From 60b7e6a0819b4ed784d222971f7c05087d7af6ab Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 8 Jul 2025 11:11:46 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9Bfix:=20think=20tag=20auto=20expand?=
 =?UTF-8?q?=20like=20tool=20tag=20behavior=20(#5727)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web-app/src/containers/ThinkingBlock.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/web-app/src/containers/ThinkingBlock.tsx b/web-app/src/containers/ThinkingBlock.tsx
index 88ec03b52..c4e6742c5 100644
--- a/web-app/src/containers/ThinkingBlock.tsx
+++ b/web-app/src/containers/ThinkingBlock.tsx
@@ -12,27 +12,30 @@ interface Props {
 // Zustand store for thinking block state
 type ThinkingBlockState = {
   thinkingState: { [id: string]: boolean }
-  toggleState: (id: string) => void
+  setThinkingState: (id: string, expanded: boolean) => void
 }
 
 const useThinkingStore = create<ThinkingBlockState>((set) => ({
   thinkingState: {},
-  toggleState: (id) =>
+  setThinkingState: (id, expanded) =>
     set((state) => ({
       thinkingState: {
         ...state.thinkingState,
-        [id]: !state.thinkingState[id],
+        [id]: expanded,
       },
     })),
 }))
 
 const ThinkingBlock = ({ id, text }: Props) => {
-  const { thinkingState, toggleState } = useThinkingStore()
+  const { thinkingState, setThinkingState } = useThinkingStore()
   const { streamingContent } = useAppState()
   const { t } = useTranslation()
   const loading = !text.includes('</think>') && streamingContent
-  const isExpanded = thinkingState[id] ?? false
-  const handleClick = () => toggleState(id)
+  const isExpanded = thinkingState[id] ?? (loading ? true : false)
+  const handleClick = () => {
+    const newExpandedState = !isExpanded
+    setThinkingState(id, newExpandedState)
+  }
 
   if (!text.replace(/<\/?think>/g, '').trim()) return null