From 26b46c733d52f9d7419fd8be9c4c6e1a31c122e7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 1 Mar 2026 00:17:57 +0000
Subject: [PATCH] sync(ui): update UI

---
 ui/src/components/ThemeToggle.tsx            | 11 ++++--
 ui/src/components/chat/ChatView.tsx          |  4 ++
 ui/src/components/chat/SettingsPanel.tsx     | 12 ++++--
 ui/src/components/chat/ThinkingIndicator.tsx | 12 ++++++
 ui/tailwind.config.ts                        | 40 +++++++++-----------
 5 files changed, 50 insertions(+), 29 deletions(-)
 create mode 100644 ui/src/components/chat/ThinkingIndicator.tsx

diff --git a/ui/src/components/ThemeToggle.tsx b/ui/src/components/ThemeToggle.tsx
index 26998bc..1ea1222 100644
--- a/ui/src/components/ThemeToggle.tsx
+++ b/ui/src/components/ThemeToggle.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { Sun, Moon } from 'lucide-react';
 import { Switch } from '@/components/ui/switch';
 
@@ -6,9 +7,9 @@ interface ThemeToggleProps {
   onThemeChange: (isDark: boolean) => void;
 }
 
-export default function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
+const ThemeToggle = forwardRef<HTMLDivElement, ThemeToggleProps>(({ theme, onThemeChange }, ref) => {
   return (
-    <div className="flex items-center gap-1.5">
+    <div ref={ref} className="flex items-center gap-1.5">
       <Sun className="h-4 w-4 text-muted-foreground" />
       <Switch
         checked={theme === 'dark'}
@@ -18,4 +19,8 @@ export default function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps)
       <Moon className="h-4 w-4 text-muted-foreground" />
     </div>
   );
-}
+});
+
+ThemeToggle.displayName = 'ThemeToggle';
+
+export default ThemeToggle;
diff --git a/ui/src/components/chat/ChatView.tsx b/ui/src/components/chat/ChatView.tsx
index dbda402..c8e2218 100644
--- a/ui/src/components/chat/ChatView.tsx
+++ b/ui/src/components/chat/ChatView.tsx
@@ -1,6 +1,7 @@
 import { useRef, useEffect } from 'react';
 import ChatMessage from './ChatMessage';
 import ChatInput from './ChatInput';
+import ThinkingIndicator from './ThinkingIndicator';
 import ThemeToggle from '@/components/ThemeToggle';
 import type { Message, FileAttachment } from '@/lib/llm';
 
@@ -41,6 +42,9 @@ export default function ChatView({
             <ChatMessage key={message.id} message={message} />
           ))}
           
+          {/* Thinking indicator — visible before first stream token */}
+          {isLoading && !streamingContent && <ThinkingIndicator />}
+
           {/* Streaming Message */}
           {streamingContent && (
             <ChatMessage
diff --git a/ui/src/components/chat/SettingsPanel.tsx b/ui/src/components/chat/SettingsPanel.tsx
index 40556dc..fe1e8af 100644
--- a/ui/src/components/chat/SettingsPanel.tsx
+++ b/ui/src/components/chat/SettingsPanel.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, forwardRef } from 'react';
 import { X, Check, AlertCircle, Loader2, Sun, Moon, Monitor } from 'lucide-react';
 import { useLLM } from '@/context/LLMContext';
 import { useTheme } from '@/context/ThemeContext';
@@ -18,7 +18,7 @@ const themeOptions = [
   { value: 'system' as const, label: 'System', icon: Monitor },
 ];
 
-export default function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
+const SettingsPanel = forwardRef<HTMLDivElement, SettingsPanelProps>(({ isOpen, onClose }, ref) => {
   const { langgraphUrl, updateLanggraphUrl, checkConnection, isConnected } = useLLM();
   const { theme, setTheme } = useTheme();
   const [isChecking, setIsChecking] = useState(false);
@@ -45,7 +45,7 @@ export default function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
       />
 
       {/* Panel */}
-      <div className="fixed right-0 top-0 z-50 h-full w-full max-w-md border-l border-border bg-card shadow-xl">
+      <div ref={ref} className="fixed right-0 top-0 z-50 h-full w-full max-w-md border-l border-border bg-card shadow-xl">
         <div className="flex h-full flex-col">
           {/* Header */}
           <div className="flex items-center justify-between border-b border-border p-4">
@@ -147,4 +147,8 @@ export default function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
       </div>
     </>
   );
-}
+});
+
+SettingsPanel.displayName = 'SettingsPanel';
+
+export default SettingsPanel;
diff --git a/ui/src/components/chat/ThinkingIndicator.tsx b/ui/src/components/chat/ThinkingIndicator.tsx
new file mode 100644
index 0000000..9269f41
--- /dev/null
+++ b/ui/src/components/chat/ThinkingIndicator.tsx
@@ -0,0 +1,12 @@
+export default function ThinkingIndicator() {
+  return (
+    <div className="flex justify-start py-2">
+      <div className="flex items-center gap-1.5 text-muted-foreground text-sm">
+        <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-[dot-pulse_1.4s_ease-in-out_infinite_0ms]" />
+        <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-[dot-pulse_1.4s_ease-in-out_infinite_200ms]" />
+        <span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/60 animate-[dot-pulse_1.4s_ease-in-out_infinite_400ms]" />
+        <span className="ml-1 text-xs">Thinking...</span>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
index cc139df..ded75f4 100644
--- a/ui/tailwind.config.ts
+++ b/ui/tailwind.config.ts
@@ -63,28 +63,24 @@ export default {
   			md: 'calc(var(--radius) - 2px)',
   			sm: 'calc(var(--radius) - 4px)'
   		},
-  		keyframes: {
-  			'accordion-down': {
-  				from: {
-  					height: '0'
-  				},
-  				to: {
-  					height: 'var(--radix-accordion-content-height)'
-  				}
-  			},
-  			'accordion-up': {
-  				from: {
-  					height: 'var(--radix-accordion-content-height)'
-  				},
-  				to: {
-  					height: '0'
-  				}
-  			}
-  		},
-  		animation: {
-  			'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
-  		},
+		keyframes: {
+			'accordion-down': {
+				from: { height: '0' },
+				to: { height: 'var(--radix-accordion-content-height)' }
+			},
+			'accordion-up': {
+				from: { height: 'var(--radix-accordion-content-height)' },
+				to: { height: '0' }
+			},
+			'dot-pulse': {
+				'0%, 80%, 100%': { opacity: '0.3', transform: 'scale(0.8)' },
+				'40%': { opacity: '1', transform: 'scale(1.2)' }
+			}
+		},
+		animation: {
+			'accordion-down': 'accordion-down 0.2s ease-out',
+			'accordion-up': 'accordion-up 0.2s ease-out'
+		},
   		fontFamily: {
   			sans: [
   				'Poppins',