feat(ui): 优化流式输出工具调用渲染

- 添加 tool_start/tool_end WebSocket 事件支持
- 流式消息复用 ChatMessage 组件渲染工具调用卡片
- 修复 AI SDK v5 格式兼容问题(input/output 字段)
- 修复会话恢复时 tool-result 格式错误
- 放宽 ToolState schema 中 input 字段类型为 unknown
This commit is contained in:
2025-12-15 17:35:39 +08:00
parent 865e0906b9
commit 3fd8fd98b8
12 changed files with 384 additions and 58 deletions
+7 -5
View File
@@ -9,7 +9,6 @@ import { toast } from 'sonner';
import {
useChat,
ChatMessage,
StreamingMessage,
TypingIndicator,
ChatInput,
} from '@ai-assistant/ui';
@@ -46,7 +45,7 @@ export function ChatPage({
messages,
isConnected,
isLoading,
streamingContent,
streamingMessage,
sendMessage,
cancelProcessing,
} = useChat({
@@ -73,7 +72,7 @@ export function ChatPage({
// 自动滚动到底部
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages, streamingContent]);
}, [messages, streamingMessage]);
// 空状态组件
const EmptyState = () => (
@@ -270,9 +269,12 @@ export function ChatPage({
))}
</AnimatePresence>
{streamingContent && <StreamingMessage content={streamingContent} />}
{/* 流式消息 - 复用 ChatMessage 组件 */}
{streamingMessage && (
<ChatMessage message={streamingMessage} isStreaming />
)}
{isLoading && !streamingContent && <TypingIndicator />}
{isLoading && !streamingMessage && <TypingIndicator />}
<div ref={messagesEndRef} />
</div>