feat: SSE streaming runs + thinking/tool panel + typewriter effect

src/pages/TaskAssistant.tsx

@@ -1,10 +1,10 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { Input, Button, Avatar, Spin, theme, Typography, App } from 'antd'
+import { Input, Button, Avatar, Spin, theme, Typography, App, Collapse } from 'antd'
 import {
   SendOutlined, RobotOutlined, UserOutlined, PlusOutlined,
-  DeleteOutlined, StopOutlined, MessageOutlined,
+  DeleteOutlined, StopOutlined, MessageOutlined, BulbOutlined, ToolOutlined,
 } from '@ant-design/icons'
-import { sendMessage } from '@/services/ai-chat'
+import { streamChat, type StreamEvent } from '@/services/ai-chat'
 import {
   listConversations, createConversation, deleteConversation,
   getMessages, updateConversation, type Conversation,
@@ -18,6 +18,8 @@ interface Message {
   role: 'user' | 'assistant'
   content: string
   timestamp: number
+  thinking?: string
+  toolCalls?: { name: string; result?: string }[]
 }
 
 function ChatPage() {
@@ -27,12 +29,14 @@ function ChatPage() {
   const [messages, setMessages] = useState<Message[]>([])
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
+  const [streaming, setStreaming] = useState(false)
   const [editingId, setEditingId] = useState<string | null>(null)
   const [editTitle, setEditTitle] = useState('')
   const [deleting, setDeleting] = useState(false)
   const abortRef = useRef<AbortController | null>(null)
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const editInputRef = useRef<any>(null)
+  const streamMsgRef = useRef<string>('')
   const { token } = theme.useToken()
 
   const loadConversations = useCallback(async () => {
@@ -42,12 +46,11 @@ function ChatPage() {
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
+  }, [messages, streamMsgRef.current])
 
   const switchConversation = useCallback(async (id: string) => {
-    if (loading) { abortRef.current?.abort(); setLoading(false) }
-    setActiveId(id)
-    setMessages([])
+    if (loading) { abortRef.current?.abort(); setLoading(false); setStreaming(false) }
+    setActiveId(id); setMessages([]); streamMsgRef.current = ''
     try {
       const records = await getMessages(id)
       setMessages(records.map(m => ({
@@ -58,23 +61,17 @@ function ChatPage() {
   }, [loading])
 
   const handleNew = async () => {
-    if (loading) { abortRef.current?.abort(); setLoading(false) }
+    if (loading) { abortRef.current?.abort(); setLoading(false); setStreaming(false) }
     try {
       const conv = await createConversation()
       setConversations(prev => [conv, ...prev])
-      setActiveId(conv.id)
-      setMessages([])
-      setInput('')
+      setActiveId(conv.id); setMessages([]); setInput(''); streamMsgRef.current = ''
     } catch { /* */ }
   }
 
   const handleDelete = (id: string) => {
     modal.confirm({
-      title: '删除对话',
-      content: '确定要删除这个对话吗？',
-      okText: '删除',
-      okType: 'danger',
-      cancelText: '取消',
+      title: '删除对话', content: '确定？', okText: '删除', okType: 'danger', cancelText: '取消',
       onOk: async () => {
         setDeleting(true)
         try {
@@ -88,11 +85,9 @@ function ChatPage() {
   }
 
   const startEdit = (conv: Conversation) => {
-    setEditingId(conv.id)
-    setEditTitle(conv.title)
+    setEditingId(conv.id); setEditTitle(conv.title)
     setTimeout(() => editInputRef.current?.focus(), 50)
   }
-
   const saveTitle = async (id: string) => {
     const title = editTitle.trim()
     if (title && title !== conversations.find(c => c.id === id)?.title) {
@@ -102,59 +97,109 @@ function ChatPage() {
     setEditingId(null)
   }
 
+  // ── Send with SSE streaming ──
   const handleSend = async () => {
     const text = input.trim()
     if (!text || loading) return
 
-    const userMsg: Message = {
-      id: Date.now().toString(), role: 'user', content: text, timestamp: Date.now(),
-    }
-    const newMessages = [...messages, userMsg]
-    setMessages(newMessages)
+    const userMsg: Message = { id: Date.now().toString(), role: 'user', content: text, timestamp: Date.now() }
+    const prevMessages = [...messages, userMsg]
+    setMessages(prevMessages)
     setInput('')
     setLoading(true)
+    setStreaming(true)
 
     const controller = new AbortController()
     abortRef.current = controller
 
-    try {
-      const result = await sendMessage(
-        newMessages.map(m => ({ role: m.role, content: m.content })),
-        activeId ?? undefined, controller.signal,
-      )
+    // Placeholder for streaming assistant message
+    const streamMsgId = (Date.now() + 1).toString()
+    const streamMsg: Message = { id: streamMsgId, role: 'assistant', content: '', timestamp: Date.now(), thinking: '', toolCalls: [] }
+    setMessages(prev => [...prev, streamMsg])
+    streamMsgRef.current = ''
 
-      const convId = result.conversationId || activeId
-      if (convId && convId !== activeId) {
-        setActiveId(convId)
-        loadConversations()
+    let currentContent = ''
+    let currentThinking = ''
+    let currentTools: { name: string; result?: string }[] = []
+    let completedConvId: string | undefined
+
+    const updateStreamMsg = (updates: Partial<Message>) => {
+      setMessages(prev => prev.map(m => m.id === streamMsgId ? { ...m, ...updates } : m))
     }
 
-      setMessages(prev => [...prev, {
-        id: (Date.now() + 1).toString(), role: 'assistant',
-        content: result.content, timestamp: Date.now(),
-      }])
+    try {
+      await streamChat(
+        prevMessages.map(m => ({ role: m.role, content: m.content })),
+        activeId,
+        (event: StreamEvent) => {
+          switch (event.event) {
+            case 'meta':
+              completedConvId = event.conversationId
+              if (event.conversationId && event.conversationId !== activeId) {
+                setActiveId(event.conversationId)
                 loadConversations()
+              }
+              break
+            case 'message.delta':
+              currentContent += event.delta || ''
+              updateStreamMsg({ content: currentContent })
+              break
+            case 'reasoning.available':
+              currentThinking = event.text || ''
+              updateStreamMsg({ thinking: currentThinking })
+              break
+            case 'tool.start':
+              currentTools.push({ name: event.toolName || 'unknown' })
+              updateStreamMsg({ toolCalls: [...currentTools] })
+              break
+            case 'tool.result':
+              if (currentTools.length > 0) {
+                currentTools[currentTools.length - 1].result = event.output || ''
+                updateStreamMsg({ toolCalls: [...currentTools] })
+              }
+              break
+            case 'run.completed':
+              if (event.output) { currentContent = event.output; updateStreamMsg({ content: currentContent }) }
+              break
+            case 'done':
+              completedConvId = event.conversationId || completedConvId
+              break
+            case 'error':
+              updateStreamMsg({ content: `❌ ${event.error}` })
+              break
+          }
+        },
+        controller.signal,
+      )
+
+      if (completedConvId) loadConversations()
     } catch (err: any) {
-      if (err.name === 'AbortError') return
-      setMessages(prev => [...prev, {
-        id: (Date.now() + 1).toString(), role: 'assistant',
-        content: '请求失败：' + (err instanceof Error ? err.message : '未知错误'),
-        timestamp: Date.now(),
-      }])
+      if (err.name === 'AbortError') {
+        updateStreamMsg({ content: currentContent || '（已停止）' })
+      } else {
+        updateStreamMsg({ content: `❌ ${err.message}` })
+      }
     } finally {
       setLoading(false)
+      setStreaming(false)
       abortRef.current = null
     }
   }
 
-  const handleStop = () => { abortRef.current?.abort(); setLoading(false) }
+  const handleStop = async () => {
+    abortRef.current?.abort()
+    setStreaming(false)
+  }
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend() }
   }
 
+  const inputPlaceholder = activeId ? '输入消息，Enter 发送' : '请先新建或选择对话'
+
   return (
     <div style={{ display: 'flex', height: 'calc(100vh - 112px)', gap: 12 }}>
+      {/* Sidebar */}
       <div style={{
         width: 260, flexShrink: 0, display: 'flex', flexDirection: 'column',
         background: token.colorBgContainer, borderRadius: token.borderRadiusLG,
@@ -174,58 +219,39 @@ function ChatPage() {
               }}>
               <MessageOutlined style={{ color: token.colorTextQuaternary, fontSize: 14, marginRight: 8, flexShrink: 0 }} />
               {editingId === conv.id ? (
-                <Input
-                  ref={editInputRef} size="small" value={editTitle}
+                <Input ref={editInputRef} size="small" value={editTitle}
                   onChange={e => setEditTitle(e.target.value)}
-                  onBlur={() => saveTitle(conv.id)}
-                  onPressEnter={() => saveTitle(conv.id)}
-                  onClick={e => e.stopPropagation()}
-                  style={{ flex: 1, fontSize: 13 }}
-                />
+                  onBlur={() => saveTitle(conv.id)} onPressEnter={() => saveTitle(conv.id)}
+                  onClick={e => e.stopPropagation()} style={{ flex: 1, fontSize: 13 }} />
               ) : (
                 <Text ellipsis style={{ flex: 1, fontSize: 13, lineHeight: '28px' }}
-                  onDoubleClick={e => { e.stopPropagation(); startEdit(conv) }}>
-                  {conv.title}
-                </Text>
+                  onDoubleClick={e => { e.stopPropagation(); startEdit(conv) }}>{conv.title}</Text>
               )}
-              <Button
-                type="text" size="small" danger
-                icon={<DeleteOutlined />}
-                disabled={deleting}
-                onClick={e => { e.stopPropagation(); handleDelete(conv.id) }}
-                style={{ marginLeft: 4, flexShrink: 0 }}
-              />
+              <Button type="text" size="small" danger icon={<DeleteOutlined />}
+                disabled={deleting} onClick={e => { e.stopPropagation(); handleDelete(conv.id) }}
+                style={{ marginLeft: 4, flexShrink: 0 }} />
             </div>
           ))}
           {conversations.length === 0 && (
             <div style={{ textAlign: 'center', padding: 24, color: token.colorTextQuaternary }}>
               <Text type="secondary" style={{ fontSize: 13 }}>暂无对话</Text>
-              <br />
-              <Text type="secondary" style={{ fontSize: 12, marginTop: 4 }}>双击标题可重命名</Text>
             </div>
           )}
         </div>
       </div>
 
+      {/* Chat area */}
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
         <div style={{
           flex: 1, overflowY: 'auto', background: token.colorBgContainer,
           borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
-          padding: '20px 24px',
-          border: `1px solid ${token.colorBorderSecondary}`, borderBottom: 'none',
+          padding: '20px 24px', border: `1px solid ${token.colorBorderSecondary}`, borderBottom: 'none',
         }}>
           {messages.length === 0 && (
-            <div style={{
-              display: 'flex', flexDirection: 'column', alignItems: 'center',
-              justifyContent: 'center', height: '100%', color: token.colorTextQuaternary,
-            }}>
-              <RobotOutlined style={{ fontSize: 48, marginBottom: 16 }} />
-              <Text type="secondary" style={{ fontSize: 16 }}>
-                {activeId ? '开始新对话' : '点击左侧「新对话」开始'}
-              </Text>
-              <Text type="secondary" style={{ fontSize: 13, marginTop: 8 }}>
-                Hermes Agent 通过 DeepSeek 提供回答
-              </Text>
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+              <RobotOutlined style={{ fontSize: 48, marginBottom: 16, color: token.colorTextQuaternary }} />
+              <Text type="secondary" style={{ fontSize: 16 }}>{activeId ? '开始新对话' : '点击「新对话」开始'}</Text>
+              <Text type="secondary" style={{ fontSize: 13, marginTop: 8 }}>Hermes Agent · 流式响应 · 思考过程可见</Text>
             </div>
           )}
 
@@ -236,59 +262,68 @@ function ChatPage() {
             }}>
               <Avatar size={32}
                 icon={msg.role === 'user' ? <UserOutlined /> : <RobotOutlined />}
-                style={{
-                  backgroundColor: msg.role === 'user' ? token.colorPrimary : token.colorSuccess,
-                  flexShrink: 0,
-                }}
-              />
+                style={{ backgroundColor: msg.role === 'user' ? token.colorPrimary : token.colorSuccess, flexShrink: 0 }} />
+              <div style={{ maxWidth: '75%', minWidth: 0 }}>
+                {/* Thinking panel */}
+                {msg.thinking && (
+                  <Collapse size="small" ghost items={[{
+                    key: 'thinking', label: <Text type="secondary" style={{ fontSize: 12 }}><BulbOutlined /> 思考过程</Text>,
+                    children: <div style={{ fontSize: 13, color: token.colorTextSecondary, whiteSpace: 'pre-wrap', lineHeight: 1.7, maxHeight: 200, overflowY: 'auto' }}>{msg.thinking}</div>,
+                  }]} style={{ marginBottom: 8 }} />
+                )}
+                {/* Tool calls */}
+                {msg.toolCalls && msg.toolCalls.length > 0 && (
+                  <Collapse size="small" ghost items={[{
+                    key: 'tools', label: <Text type="secondary" style={{ fontSize: 12 }}><ToolOutlined /> 工具调用 ({msg.toolCalls.length})</Text>,
+                    children: msg.toolCalls.map((t, i) => (
+                      <div key={i} style={{ marginBottom: 8, fontSize: 12 }}>
+                        <Text code style={{ fontSize: 12 }}>{t.name}</Text>
+                        {t.result && <div style={{ marginTop: 4, color: token.colorTextSecondary, maxHeight: 150, overflowY: 'auto', whiteSpace: 'pre-wrap' }}>{t.result}</div>}
+                      </div>
+                    )),
+                  }]} style={{ marginBottom: 8 }} />
+                )}
+                {/* Message content */}
                 <div style={{
-                maxWidth: '75%', padding: '12px 16px', borderRadius: 12,
+                  padding: '12px 16px', borderRadius: 12, lineHeight: 1.8, wordBreak: 'break-word',
                   background: msg.role === 'user' ? token.colorPrimary : token.colorFillAlter,
                   color: msg.role === 'user' ? '#fff' : token.colorText,
-                lineHeight: 1.8, wordBreak: 'break-word',
                 }}>
-                {msg.role === 'assistant' ? <Markdown content={msg.content} /> : msg.content}
+                  {msg.role === 'assistant' ? (
+                    msg.content ? <Markdown content={msg.content} /> : <Spin size="small" />
+                  ) : msg.content}
+                </div>
               </div>
             </div>
           ))}
 
-          {loading && (
+          {/* Streaming indicator */}
+          {streaming && (
             <div style={{ display: 'flex', gap: 12, marginBottom: 20 }}>
-              <Avatar size={32} icon={<RobotOutlined />}
-                style={{ backgroundColor: token.colorSuccess, flexShrink: 0 }} />
-              <div style={{
-                maxWidth: '75%', padding: '12px 16px', borderRadius: 12,
-                background: token.colorFillAlter,
-              }}>
-                <Spin size="small" /> <Text type="secondary">Hermes 思考中...</Text>
+              <Avatar size={32} icon={<RobotOutlined />} style={{ backgroundColor: token.colorSuccess, flexShrink: 0 }} />
+              <div style={{ padding: '8px 16px', borderRadius: 12, background: token.colorFillAlter }}>
+                <Spin size="small" /> <Text type="secondary" style={{ fontSize: 13 }}>Hermes 执行中...</Text>
               </div>
             </div>
           )}
           <div ref={messagesEndRef} />
         </div>
 
+        {/* Input */}
         <div style={{
-          background: token.colorBgContainer,
-          border: `1px solid ${token.colorBorderSecondary}`,
-          borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
-          padding: '16px 20px',
+          background: token.colorBgContainer, border: `1px solid ${token.colorBorderSecondary}`,
+          borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`, padding: '16px 20px',
         }}>
           <div style={{
             display: 'flex', alignItems: 'flex-end', gap: 10,
             background: token.colorFillTertiary, borderRadius: 12,
             padding: '8px 8px 8px 14px', border: `1px solid ${token.colorBorderSecondary}`,
           }}>
-            <Input.TextArea
-              value={input}
-              onChange={e => setInput(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={activeId ? '输入消息，Enter 发送，Shift+Enter 换行' : '请先新建或选择对话'}
-              autoSize={{ minRows: 1, maxRows: 5 }}
-              disabled={loading || !activeId}
-              variant="borderless"
-              style={{ flex: 1, resize: 'none', padding: '4px 0', fontSize: 14 }}
-            />
-            {loading ? (
+            <Input.TextArea value={input} onChange={e => setInput(e.target.value)}
+              onKeyDown={handleKeyDown} placeholder={inputPlaceholder}
+              autoSize={{ minRows: 1, maxRows: 5 }} disabled={loading || !activeId}
+              variant="borderless" style={{ flex: 1, resize: 'none', padding: '4px 0', fontSize: 14 }} />
+            {streaming ? (
               <Button danger type="primary" icon={<StopOutlined />} onClick={handleStop}
                 style={{ borderRadius: 8, height: 34, minWidth: 72 }}>停止</Button>
             ) : (
@@ -304,9 +339,5 @@ function ChatPage() {
 }
 
 export default function TaskAssistant() {
-  return (
-    <App>
-      <ChatPage />
-    </App>
-  )
+  return <App><ChatPage /></App>
 }

src/services/ai-chat.ts

@@ -1,22 +1,94 @@
-import { api } from './http-client'
+import { getAccessToken } from './token-store'
 
-interface ChatMessage {
-  role: 'user' | 'assistant' | 'system'
-  content: string
+interface ChatMessage { role: 'user' | 'assistant' | 'system'; content: string }
+
+export type StreamEvent =
+  | { event: 'meta'; conversationId: string }
+  | { event: 'message.delta'; delta: string; runId?: string }
+  | { event: 'reasoning.available'; text: string; runId?: string }
+  | { event: 'tool.start'; toolName?: string; input?: any; runId?: string }
+  | { event: 'tool.result'; output?: string; runId?: string }
+  | { event: 'run.completed'; output?: string; usage?: any; runId?: string }
+  | { event: 'done'; conversationId?: string }
+  | { event: 'stopped' }
+  | { event: 'error'; error: string }
+
+export async function streamChat(
+  messages: ChatMessage[],
+  conversationId: string | null,
+  onEvent: (e: StreamEvent) => void,
+  signal: AbortSignal,
+): Promise<void> {
+  const token = getAccessToken()
+  const body: Record<string, unknown> = { messages }
+  if (conversationId) body.conversationId = conversationId
+
+  const resp = await fetch('/admin-api/ai/chat/stream', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(body),
+    signal,
+  })
+
+  if (!resp.ok) {
+    const err = await resp.text().catch(() => '')
+    throw new Error(`Stream request failed ${resp.status}: ${err}`)
+  }
+
+  const reader = resp.body?.getReader()
+  if (!reader) throw new Error('No response body')
+
+  const decoder = new TextDecoder()
+  let buffer = ''
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    buffer += decoder.decode(value, { stream: true })
+    const lines = buffer.split('\n')
+    buffer = lines.pop() || ''
+    for (const line of lines) {
+      if (line.startsWith('data: ')) {
+        try {
+          const event: StreamEvent = JSON.parse(line.slice(6))
+          onEvent(event)
+        } catch { /* skip bad lines */ }
+      }
+    }
+  }
 }
 
+export async function stopChat(runId: string): Promise<void> {
+  const token = getAccessToken()
+  await fetch('/admin-api/ai/chat/stop', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ runId }),
+  })
+}
+
+// Legacy non-streaming (kept for fallback)
 interface ChatResponse {
   content: string
   conversationId?: string
   usage?: { model?: string; inputTokens?: number; outputTokens?: number }
 }
-
 export async function sendMessage(
-  messages: ChatMessage[],
-  conversationId?: string,
-  signal?: AbortSignal,
+  messages: ChatMessage[], conversationId?: string, signal?: AbortSignal,
 ): Promise<ChatResponse> {
+  const token = getAccessToken()
   const body: Record<string, unknown> = { messages }
   if (conversationId) body.conversationId = conversationId
-  return api.post<ChatResponse>('/admin-api/ai/chat', body, signal ? { signal } : undefined)
+  const resp = await fetch('/admin-api/ai/chat', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify(body),
+    signal,
+  })
+  const json = await resp.json()
+  if (!json.success) throw new Error(json.message || 'Chat failed')
+  return json.data
 }