feat(ui): 优化流式输出工具调用渲染
- 添加 tool_start/tool_end WebSocket 事件支持 - 流式消息复用 ChatMessage 组件渲染工具调用卡片 - 修复 AI SDK v5 格式兼容问题(input/output 字段) - 修复会话恢复时 tool-result 格式错误 - 放宽 ToolState schema 中 input 字段类型为 unknown
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user