diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx
new file mode 100644
index 000000000..59ff720c8
--- /dev/null
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/ThinkingBlock.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+
+import { atom, useAtom } from 'jotai'
+import { ChevronDown, ChevronUp, Loader } from 'lucide-react'
+
+interface Props {
+ text: string
+ status: string
+ id: string
+}
+
+const thinkingBlockStateAtom = atom<{ [id: string]: boolean }>({})
+
+const ThinkingBlock = ({ id, text, status }: Props) => {
+ const [thinkingState, setThinkingState] = useAtom(thinkingBlockStateAtom)
+
+ const isExpanded = thinkingState[id] ?? false
+
+ const loading = !text.includes('') && status === 'pending'
+
+ const handleClick = () => {
+ setThinkingState((prev) => ({ ...prev, [id]: !isExpanded }))
+ }
+
+ if (!text.replace(/<\/?think>/g, '').trim()) return null
+
+ return (
+
+
+
+ {loading && (
+
+ )}
+
+
+
+ {isExpanded && (
+
+ {text.replace(/<\/?think>/g, '').trim()}
+
+ )}
+
+
+ )
+}
+
+export default ThinkingBlock
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
index a44adb431..efa2b084c 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -16,6 +16,7 @@ import MessageToolbar from '../MessageToolbar'
import DocMessage from './DocMessage'
import ImageMessage from './ImageMessage'
import { MarkdownTextMessage } from './MarkdownTextMessage'
+import ThinkingBlock from './ThinkingBlock'
import { activeAssistantAtom } from '@/helpers/atoms/Assistant.atom'
import {
@@ -41,6 +42,21 @@ const MessageContainer: React.FC<
[props.content]
)
+ const { reasoningSegment, textSegment } = useMemo(() => {
+ const isThinking = text.includes('
') && !text.includes('')
+ if (isThinking) return { reasoningSegment: text, textSegment: '' }
+
+ const match = text.match(/
([\s\S]*?)<\/think>/)
+ if (match?.index === undefined)
+ return { reasoningSegment: undefined, textSegment: text }
+
+ const splitIndex = match.index + match[0].length
+ return {
+ reasoningSegment: text.slice(0, splitIndex),
+ textSegment: text.slice(splitIndex),
+ }
+ }, [text])
+
const image = useMemo(
() =>
props.content.find((e) => e.type === ContentType.Image)?.image_url?.url,
@@ -144,9 +160,16 @@ const MessageContainer: React.FC<
)}
dir="ltr"
>
+ {reasoningSegment && (
+
+ )}