From 75428d8d1f11bcbebebfccf085f4210aed3b2b12 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@users.noreply.github.com>
Date: Mon, 9 Mar 2026 18:02:26 +0100
Subject: [PATCH] fix(ui): minor visual enhancements (#8909)

- Fixes thinking box overflowing in other pages
- Shows loading icon to the active chats

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/react-ui/src/hooks/useChat.js | 14 ++++++++++----
 core/http/react-ui/src/pages/Chat.jsx   |  5 +++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/core/http/react-ui/src/hooks/useChat.js b/core/http/react-ui/src/hooks/useChat.js
index 742659ddc..42b704519 100644
--- a/core/http/react-ui/src/hooks/useChat.js
+++ b/core/http/react-ui/src/hooks/useChat.js
@@ -103,6 +103,7 @@ export function useChat(initialModel = '') {
   })
 
   const [isStreaming, setIsStreaming] = useState(false)
+  const [streamingChatId, setStreamingChatId] = useState(null)
   const [streamingContent, setStreamingContent] = useState('')
   const [streamingReasoning, setStreamingReasoning] = useState('')
   const [streamingToolCalls, setStreamingToolCalls] = useState([])
@@ -263,6 +264,7 @@ export function useChat(initialModel = '') {
     const controller = new AbortController()
     abortControllerRef.current = controller
     setIsStreaming(true)
+    setStreamingChatId(activeChatId)
     setStreamingContent('')
     setStreamingReasoning('')
     setStreamingToolCalls([])
@@ -526,6 +528,7 @@ export function useChat(initialModel = '') {
 
     // Finalize
     setIsStreaming(false)
+    setStreamingChatId(null)
     abortControllerRef.current = null
     setStreamingContent('')
     setStreamingReasoning('')
@@ -577,14 +580,17 @@ export function useChat(initialModel = '') {
     ))
   }, [])
 
+  const isActiveStreaming = isStreaming && streamingChatId === activeChatId
+
   return {
     chats,
     activeChat,
     activeChatId,
-    isStreaming,
-    streamingContent,
-    streamingReasoning,
-    streamingToolCalls,
+    isStreaming: isActiveStreaming,
+    streamingChatId: isStreaming ? streamingChatId : null,
+    streamingContent: isActiveStreaming ? streamingContent : '',
+    streamingReasoning: isActiveStreaming ? streamingReasoning : '',
+    streamingToolCalls: isActiveStreaming ? streamingToolCalls : [],
     tokensPerSecond,
     maxTokensPerSecond,
     addChat,
diff --git a/core/http/react-ui/src/pages/Chat.jsx b/core/http/react-ui/src/pages/Chat.jsx
index 4b7c58554..4fecb1a73 100644
--- a/core/http/react-ui/src/pages/Chat.jsx
+++ b/core/http/react-ui/src/pages/Chat.jsx
@@ -164,8 +164,8 @@ export default function Chat() {
   const { addToast } = useOutletContext()
   const navigate = useNavigate()
   const {
-    chats, activeChat, activeChatId, isStreaming, streamingContent, streamingReasoning,
-    streamingToolCalls, tokensPerSecond, maxTokensPerSecond,
+    chats, activeChat, activeChatId, isStreaming, streamingChatId, streamingContent,
+    streamingReasoning, streamingToolCalls, tokensPerSecond, maxTokensPerSecond,
     addChat, switchChat, deleteChat, deleteAllChats, renameChat, updateChatSettings,
     sendMessage, stopGeneration, clearHistory, getContextUsagePercent,
   } = useChat(urlModel || '')
@@ -430,6 +430,7 @@ export default function Chat() {
                       className="chat-list-item-name"
                       onDoubleClick={() => startRename(chat.id, chat.name)}
                     >
+                      {streamingChatId === chat.id && <i className="fas fa-circle-notch fa-spin" style={{ marginRight: '6px', fontSize: '0.7rem', opacity: 0.7 }} />}
                       {chat.name}
                     </span>
                     <span className="chat-list-item-time">{relativeTime(chat.updatedAt)}</span>