FyersDev · harshith-v-fyers · Apr 22, 2026 · Apr 9, 2026 · Apr 9, 2026 · Apr 10, 2026
diff --git a/FIX_ASSET_PATHS.md b/FIX_ASSET_PATHS.md
@@ -0,0 +1,97 @@
+# Fix Asset Paths - Remaining Files
+
+## Files Already Fixed ✅
+- client/src/components/Templates/TemplatesView.tsx
+- client/src/components/Chat/Header.tsx  
+- client/src/components/Endpoints/FIAIcon.tsx
+- client/src/components/Auth/Login.tsx
+- client/src/components/Nav/TopNavBar.tsx
+- client/index.html
+
+## Files Still Need Fixing
+
+Run this script to fix all remaining files:
+
+```bash
+cd /Users/em1064/code/InstiLibreChat/client/src
+
+# Files to update (add import and fix src attributes)
+cat > /tmp/fix_assets.sh << 'EOF'
+#!/bin/bash
+
+# List of files that need fixing
+files=(
+  "components/Resources/Modals/UploadFileModal.tsx"
+  "components/Chat/Input/Files/UploadButton.tsx"
+  "components/Auth/OTP.tsx"
+  "components/Documents/DocumentUpload.tsx"
+  "components/Chat/Messages/Feedback.tsx"
+  "components/Chat/Messages/MessageIcon.tsx"
+  "components/Nav/NavToggle.tsx"
+  "components/Input/Generations/Regenerate.tsx"
+  "components/Templates/SelectedTemplate.tsx"
+  "components/Web/Sources.tsx"
+  "components/SidePanel/Agents/FileSearch.tsx"
+  "components/Conversations/ConvoOptions/SharedLinkButton.tsx"
+  "components/Chat/Input/TemplateSelector.tsx"
+  "components/SidePanel/Agents/FileContext.tsx"
+  "routes/ResourcesRoute.tsx"
+  "components/Documents/DocumentSelector.tsx"
+  "components/Chat/Menus/OpenSidebar.tsx"
+  "components/Chat/Input/ToolsDropdown.tsx"
+  "components/Artifacts/DownloadArtifact.tsx"
+  "components/Nav/SettingsTabs/Data/SharedLinks.tsx"
+  "components/Chat/GeneratePDFButton.tsx"
+  "components/Chat/Messages/HoverButtons.tsx"
+  "components/Chat/Input/TemplatePersonaSelector.tsx"
+  "components/Conversations/ConvoOptions/ConvoOptions.tsx"
+)
+
+for file in "${files[@]}"; do
+  if [ ! -f "$file" ]; then
+    echo "⚠️  Skipping $file (not found)"
+    continue
+  fi
+
+  echo "Fixing $file..."
+
+  # Check if import already exists
+  if ! grep -q "import { asset } from '~/utils/assetPath'" "$file"; then
+    # Add import after the last import line
+    sed -i.bak '/^import /h; ${x;s/^import .*/&\nimport { asset } from '\''~\/utils\/assetPath'\'';/;x}; /^import /{x;p;x;}' "$file"
+  fi
+
+  # Replace all /assets/ references
+  sed -i.bak 's|src="/assets/\([^"]*\)"|src={asset('\''\1'\'')}|g' "$file"
+
+  echo "✓ Fixed $file"
+done
+
+echo "✅ All files fixed!"
+EOF
+
+chmod +x /tmp/fix_assets.sh
+/tmp/fix_assets.sh
+```
+
+## Or Manual Quick Fix
+
+For a quicker solution that doesn't require perfect imports, you can use a global replace:
+
+```bash
+cd /Users/em1064/code/InstiLibreChat/client/src
+
+# Replace all /assets/ with /research/assets/
+find . -name "*.tsx" -o -name "*.ts" | while read file; do
+  if grep -q 'src="/assets/' "$file"; then
+    sed -i.bak 's|src="/assets/|src="/research/assets/|g' "$file"
+    echo "Fixed: $file"
+  fi
+done
+```
+
+This will change all `/assets/` to `/research/assets/` directly without needing the asset utility function.
+
+## Recommended: Use the Quick Fix
+
+The second approach is simpler and faster. Just replace `/assets/` → `/research/assets/` in all files.
diff --git a/client/index.html b/client/index.html
@@ -2,17 +2,17 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <base href="/" />
+    <base href="/research/" />
     <meta name="theme-color" content="#171717" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="description" content="FIA-Fyers Intelligence Assistant - Advanced AI-powered financial intelligence platform" />
     <title>FIA - FYERS Intelligent Assistant</title>
-    <link rel="icon" type="image/svg+xml" href="assets/Logo.svg" />
-    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png" />
-    <link rel="apple-touch-icon" href="assets/apple-touch-icon-180x180.png" />
+    <link rel="icon" type="image/svg+xml" href="/research/assets/Logo.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/research/assets/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/research/assets/favicon-16x16.png" />
+    <link rel="apple-touch-icon" href="/research/assets/apple-touch-icon-180x180.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
     <style>
       html,
@@ -23,6 +23,18 @@
       }
     </style>
     <script>
+      (function () {
+        try {
+          var p = new URLSearchParams(window.location.search);
+          var t = (p.get('theme') || '').toLowerCase();
+          if (t === 'light' || t === 'dark') {
+            localStorage.setItem('color-theme', t);
+            var root = document.documentElement;
+            root.classList.remove('dark', 'light');
+            root.classList.add(t === 'dark' ? 'dark' : 'light');
+          }
+        } catch (e) {}
+      })();
       const theme = localStorage.getItem('color-theme');
       const loadingContainerStyle = document.createElement('style');
       let backgroundColor;
@@ -46,8 +58,29 @@
           height: 100vh;
           background-color: ${backgroundColor};
         }
+        #loading-container::after {
+          content: '';
+          width: 120px;
+          height: 120px;
+          background-image: url('/research/assets/${theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'loader_dark' : 'loader_light'}.gif');
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
       `;
       document.head.appendChild(loadingContainerStyle);
+
+      // Sync saas-api cookies to localStorage (set by /auth/embed flow)
+      (function() {
+        function getCookie(name) {
+          var m = document.cookie.match('(?:^|; )' + name + '=([^;]*)');
+          return m ? decodeURIComponent(m[1]) : null;
+        }
+        var at = getCookie('saas_access_token');
+        var rt = getCookie('saas_refresh_token');
+        if (at) localStorage.setItem('access_token', at);
+        if (rt) localStorage.setItem('refresh_token', rt);
+      })();
     </script>
     <script>
       // Embedded auth: if ?token= is in the URL, call token-exchange to get

diff --git a/client/public/assets/loader_dark.gif b/client/public/assets/loader_dark.gif
diff --git a/client/public/assets/loader_light.gif b/client/public/assets/loader_light.gif
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -10,6 +10,7 @@ import { ScreenshotProvider, useApiErrorBoundary } from './hooks';
 import WakeLockManager from '~/components/System/WakeLockManager';
 import ConditionalDevtools from '~/components/System/ConditionalDevtools';
 import { getThemeFromEnv } from './utils/getThemeFromEnv';
+import { getInitialThemeFromWindowSearch } from './utils/themeFromQuery';
 import { initializeFontSize } from '~/store/fontSize';
 import { LiveAnnouncer } from '~/a11y';
 import { router } from './routes';
@@ -33,16 +34,21 @@ const App = () => {
 
   // Load theme from environment variables if available
   const envTheme = getThemeFromEnv();
+  const urlTheme = getInitialThemeFromWindowSearch();
+
+  const themeProviderProps = {};
+  if (envTheme) {
+    themeProviderProps.themeRGB = envTheme;
+    themeProviderProps.initialTheme = urlTheme ?? 'system';
+  } else if (urlTheme) {
+    themeProviderProps.initialTheme = urlTheme;
+  }
 
   return (
     <QueryClientProvider client={queryClient}>
       <RecoilRoot>
         <LiveAnnouncer>
-          <ThemeProvider
-            // Only pass initialTheme and themeRGB if environment theme exists
-            // This allows localStorage values to persist when no env theme is set
-            {...(envTheme && { initialTheme: 'system', themeRGB: envTheme })}
-          >
+          <ThemeProvider {...themeProviderProps}>
             {/* The ThemeProvider will automatically:
                 1. Apply dark/light mode classes
                 2. Apply custom theme colors if envTheme is provided

diff --git a/client/src/components/Artifacts/DownloadArtifact.tsx b/client/src/components/Artifacts/DownloadArtifact.tsx
@@ -45,7 +45,7 @@ const DownloadArtifact = ({ artifact }: { artifact: Artifact }) => {
         <CircleCheckBig size={16} />
       ) : (
         <img 
-          src="/assets/download.svg" 
+          src="/research/assets/download.svg" 
           alt="Download" 
           className="opacity-70 dark:invert dark:opacity-70" 
           style={{ width: '16px', height: '16px' }}

diff --git a/client/src/components/Auth/Login.tsx b/client/src/components/Auth/Login.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate, useOutletContext } from 'react-router-dom';
 import { useToastContext } from '@librechat/client';
 import type { TLoginLayoutContext } from '~/common';
+import { asset } from '~/utils/assetPath';
 
 function Login() {
   const navigate = useNavigate();
@@ -95,7 +96,7 @@ function Login() {
   <div className="flex items-center gap-2 sm:gap-3">
     <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center p-1 flex-shrink-0">
       <img
-        src="/assets/Logo.svg"
+        src={asset('Logo.svg')}
         alt="FIA Logo"
         className="w-full h-full object-contain"
       />
@@ -115,7 +116,7 @@ function Login() {
     {/* FYERS Illustration */}
     <div className="flex justify-start">
       <img
-        src="/assets/Fia Login.png"
+        src={asset('Fia Login.png')}
         alt="FYERS platform preview"
         className="w-full max-w-[900px] h-[260px] sm:h-[320px] lg:h-[420px] object-contain"
 

diff --git a/client/src/components/Auth/OTP.tsx b/client/src/components/Auth/OTP.tsx
@@ -257,7 +257,7 @@ function OTP() {
         <div className="flex items-center gap-2 sm:gap-3">
           <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center p-1">
             <img
-              src="/assets/Logo.svg"
+              src="/research/assets/Logo.svg"
               alt="FIA Logo"
               className="w-full h-full object-contain"
             />
@@ -274,7 +274,7 @@ function OTP() {
           </h1>
 
           <img
-            src="/assets/Fia Login.png"
+            src="/research/assets/Fia Login.png"
             alt="FYERS platform preview"
             className="w-full max-w-[900px] h-[260px] sm:h-[320px] lg:h-[420px] object-contain"
           />

diff --git a/client/src/components/Chat/GeneratePDFButton.tsx b/client/src/components/Chat/GeneratePDFButton.tsx
@@ -291,7 +291,7 @@ export default function GeneratePDFButton() {
         ) : (
           <>
             <img 
-              src="/assets/documents.svg" 
+              src="/research/assets/documents.svg" 
               alt="Generate PDF" 
               className="h-3.5 w-3.5 opacity-70 dark:invert dark:opacity-70" 
             />

diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
@@ -1,13 +1,18 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import type { ContextType } from '~/common';
-import { HeaderNewChat, OpenSidebar } from './Menus';
-import { AnimatePresence, motion } from 'framer-motion';
-import ModelSelector from '~/components/Chat/Menus/Endpoints/ModelSelector';
+import Settings from '~/components/Nav/Settings';
 import { useGetStartupConfig } from '~/data-provider';
+import { useLocalize } from '~/hooks';
+import { asset } from '~/utils/assetPath';
+import { HeaderNewChat } from './Menus';
 
 export default function Header() {
-  const { navVisible, setNavVisible } = useOutletContext<ContextType>();
+  const { navVisible } = useOutletContext<ContextType>();
   const { data: startupConfig } = useGetStartupConfig();
+  const localize = useLocalize();
+  const [showSettings, setShowSettings] = useState(false);
 
   return (
     <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:!bg-[#111111]">
@@ -23,37 +28,47 @@ export default function Header() {
                 transition={{ duration: 0.2 }}
                 key="header-buttons"
               >
-                <OpenSidebar setNavVisible={setNavVisible} className="max-md:hidden" />
                 <HeaderNewChat />
               </motion.div>
             )}
           </AnimatePresence>
         </div>
 
         {/* Center: FIA Logo and Text */}
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center gap-1">
-          <div className="w-8 h-8 relative rounded-sm flex items-center justify-center">
-            <img
-              src="/assets/FIA.svg"
-              alt="FIA"
-              className="w-full h-full object-contain"
-            />
+        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1">
+          <div className="relative flex h-8 w-8 items-center justify-center rounded-sm">
+            <img src={asset('FIA.svg')} alt="FIA" className="h-full w-full object-contain" />
           </div>
-          <div 
-            className="text-[20px] font-sans leading-5 text-text-primary dark:text-gray-100"
+          <div
+            className="font-sans text-[20px] leading-5 text-text-primary dark:text-gray-100"
             style={{ fontSize: '20px' }}
           >
             FIA - FYERS Intelligent Assistant
           </div>
         </div>
 
-        {/* Right: Model Selector */}
-        <div className="mx-1 flex items-center">
-          <div className="scale-75 origin-right">
-            <ModelSelector startupConfig={startupConfig} />
+        {/* Right: model row + Settings inside same scale-75 block (gear sits beside model button) */}
+        {/* <div className="mx-1 flex items-center">
+          <div className="flex flex-row items-center gap-2 scale-75 origin-right">
+            <div className="min-w-0 max-w-md flex-1">
+              <ModelSelector startupConfig={startupConfig} />
+            </div>
+            <button
+              type="button"
+              onClick={() => setShowSettings(true)}
+              className="my-1 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border-light bg-surface-secondary text-text-primary hover:bg-surface-tertiary"
+              aria-label={localize('com_nav_settings')}
+            >
+              <img
+                src="/research/assets/settings.svg"
+                alt=""
+                className="h-5 w-5 dark:brightness-0 dark:invert"
+              />
+            </button>
           </div>
-        </div>
+        </div> */}
       </div>
+      {showSettings && <Settings open={showSettings} onOpenChange={setShowSettings} />}
     </div>
   );
 }
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
@@ -199,7 +199,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
       cn(
         'px-1.5 pt-3 pb-1 m-0 w-full resize-none font-inter',
         'placeholder-gray-400 dark:placeholder-gray-500',
-        'bg-white dark:bg-gray-800',
+        'bg-transparent',
         'text-gray-900 dark:text-gray-100',
         'text-base',
         isCollapsed ? 'max-h-[52px]' : 'max-h-[45vh] md:max-h-[55vh]',
@@ -248,7 +248,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
             onClick={handleContainerClick}
             className={cn(
               'relative flex w-full flex-grow flex-col overflow-hidden rounded-[2px]',
-              'bg-white dark:bg-gray-800 border border-[#2434E7] dark:border-blue-500',
+              'bg-transparent border border-[#2434E7]',
               'transition-all duration-200',
               isTextAreaFocused ? 'shadow-lg' : 'shadow-md',
             )}

diff --git a/client/src/components/Chat/Input/Files/UploadButton.tsx b/client/src/components/Chat/Input/Files/UploadButton.tsx
@@ -35,12 +35,12 @@ const UploadButton = () => {
             aria-label="Upload Document"
             style={{ width: '34px', height: '34px' }}
             className={cn(
-              'flex items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50',
+              'flex cursor-pointer items-center justify-center rounded-lg border border-border-light bg-transparent p-1 transition-all hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50',
             )}
           >
             <div className="flex w-full items-center justify-center gap-2">
               <img
-                src="/assets/export.svg"
+                src="/research/assets/export.svg"
                 alt="Upload Document"
                 className="icon-md dark:invert"
                 style={{ width: '18px', height: '18px' }}

diff --git a/client/src/components/Chat/Input/SendButton.tsx b/client/src/components/Chat/Input/SendButton.tsx
@@ -23,7 +23,7 @@ const SubmitButton = React.memo(
             id="send-button"
             disabled={props.disabled}
             className={cn(
-              'rounded-full bg-blue-600 p-1.5 text-white outline-offset-4 transition-all duration-200 hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-400 disabled:opacity-50',
+              'rounded-full bg-[#2434E7] p-1.5 text-white outline-offset-4 transition-all duration-200 hover:bg-[#1c2ac9] disabled:cursor-not-allowed disabled:opacity-50',
             )}            
             data-testid="send-button"
             type="submit"