From b7b4f1d12f63c4db7036ee9ce5c87b17b01de177 Mon Sep 17 00:00:00 2001
From: cryptooda <crypto.oda@gmail.com>
Date: Tue, 6 Jan 2026 22:53:58 +0700
Subject: [PATCH] Refactor AiChat component to enhance message history
 navigation and input handling

- Introduced state management for message history, allowing users to navigate through previous messages using the up and down arrow keys.
- Updated input handling to reset history index when the user types a new message, improving user experience.
- Changed the key event handler from 'onKeyPress' to 'onKeyDown' for better control over key events during message input.
- Adjusted appsettings.json to simplify the default model configuration for Gemini integration.
---
 src/Managing.Api/appsettings.json             |  2 +-
 .../src/components/organism/AiChat.tsx        | 70 ++++++++++++++++++-
 2 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/src/Managing.Api/appsettings.json b/src/Managing.Api/appsettings.json
index ad88ac95..9127277e 100644
--- a/src/Managing.Api/appsettings.json
+++ b/src/Managing.Api/appsettings.json
@@ -28,7 +28,7 @@
   },
   "Llm": {
     "Gemini": {
-      "DefaultModel": "gemini/gemini-3-flash-preview"
+      "DefaultModel": "gemini-3-flash-preview"
     },
     "OpenAI": {
       "DefaultModel": "gpt-4o"
diff --git a/src/Managing.WebApp/src/components/organism/AiChat.tsx b/src/Managing.WebApp/src/components/organism/AiChat.tsx
index ace47b17..116cea01 100644
--- a/src/Managing.WebApp/src/components/organism/AiChat.tsx
+++ b/src/Managing.WebApp/src/components/organism/AiChat.tsx
@@ -31,6 +31,9 @@ function AiChat({ onClose }: AiChatProps): JSX.Element {
   const [provider, setProvider] = useState<string>('auto')
   const [availableProviders, setAvailableProviders] = useState<string[]>([])
   const [currentProgress, setCurrentProgress] = useState<LlmProgressUpdate | null>(null)
+  const [messageHistory, setMessageHistory] = useState<string[]>([])
+  const [historyIndex, setHistoryIndex] = useState<number>(-1)
+  const [tempInput, setTempInput] = useState<string>('')
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const { apiUrl, userToken } = useApiUrlStore()
 
@@ -66,6 +69,11 @@ function AiChat({ onClose }: AiChatProps): JSX.Element {
       timestamp: new Date()
     }
 
+    // Add to message history
+    setMessageHistory(prev => [...prev, input.trim()])
+    setHistoryIndex(-1)
+    setTempInput('')
+
     setMessages(prev => [...prev, userMessage])
     setInput('')
     setIsLoading(true)
@@ -167,10 +175,54 @@ function AiChat({ onClose }: AiChatProps): JSX.Element {
     }
   }
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Handle Enter key
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault()
       sendMessage()
+      return
+    }
+
+    // Handle Up arrow - navigate backward through history
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      
+      if (messageHistory.length === 0) return
+
+      // If we're at the beginning (no history navigation yet), save current input
+      if (historyIndex === -1) {
+        setTempInput(input)
+      }
+
+      // Navigate backward
+      const newIndex = historyIndex === -1 
+        ? messageHistory.length - 1 
+        : Math.max(0, historyIndex - 1)
+      
+      setHistoryIndex(newIndex)
+      setInput(messageHistory[newIndex])
+      return
+    }
+
+    // Handle Down arrow - navigate forward through history
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      
+      if (messageHistory.length === 0) return
+
+      // If we're at the last message, clear input and reset
+      if (historyIndex >= messageHistory.length - 1) {
+        setHistoryIndex(-1)
+        setInput(tempInput)
+        setTempInput('')
+        return
+      }
+
+      // Navigate forward
+      const newIndex = historyIndex + 1
+      setHistoryIndex(newIndex)
+      setInput(messageHistory[newIndex])
+      return
     }
   }
 
@@ -261,8 +313,20 @@ function AiChat({ onClose }: AiChatProps): JSX.Element {
         <div className="flex gap-2">
           <textarea
             value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyPress={handleKeyPress}
+            onChange={(e) => {
+              const newValue = e.target.value
+              setInput(newValue)
+              
+              // Reset history index if user manually types something different
+              if (historyIndex !== -1) {
+                const currentHistoryItem = messageHistory[historyIndex]
+                if (newValue !== currentHistoryItem) {
+                  setHistoryIndex(-1)
+                  setTempInput('')
+                }
+              }
+            }}
+            onKeyDown={handleKeyDown}
             placeholder="Ask me anything about your backtests..."
             className="textarea textarea-bordered flex-1 resize-none"
             rows={2}