thzxx
8a385b8e1a
问题: - 思考过程默认折叠，流式时看不到实时思考 - StreamingIndicator 独立展示，与卡片内容脱节 - 思考和回复在同一卡片无阶段分隔 - 加载态只有光秃秃闪烁块 - 流式中的卡片和无流式的卡片看不出区别 优化: - 思考过程: 流式时自动展开(defaultExpanded)，完成后可手动折叠 - 三阶段标签: 💭思考 / 🔧工具 / ✏️回复，带颜色和脉冲动画 - 流式无内容时显示「正在思考.../正在生成回复...」带打字光标 - 有内容时末尾添加闪烁光标指示持续输出中 - 卡片流式时边框高亮(borderColor + boxShadow) - StreamingIndicator 仅在没有可见内容时显示「正在连接 AI...」
33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
/**
|
|
* StreamingIndicator — 流式加载指示器
|
|
*
|
|
* 仅在流式开始、尚无任何内容输出时显示初始加载状态。
|
|
* 一旦有思考内容或文本输出，AssistantMessage 卡片内部自行展示进度。
|
|
*/
|
|
|
|
import { Box, Typography } from '@mui/material';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { useAgentStore } from '@renderer/stores/agent-store';
|
|
|
|
export function StreamingIndicator(): React.JSX.Element | null {
|
|
const isStreaming = useAgentStore((s) => s.isStreaming);
|
|
const streamingContent = useAgentStore((s) => s.streamingContent);
|
|
const messages = useAgentStore((s) => s.messages);
|
|
|
|
// 已有内容输出时隐藏（AssistantMessage 内部展示）
|
|
if (!isStreaming) return null;
|
|
|
|
const lastMsg = messages[messages.length - 1];
|
|
const hasVisibleContent = !!streamingContent || !!lastMsg?.reasoningContent || !!lastMsg?.toolCalls?.length;
|
|
if (hasVisibleContent) return null;
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, py: 2, pl: 5, animation: 'fadeIn 200ms ease-out' }}>
|
|
<Loader2 size={16} style={{ animation: 'spin 1s linear infinite', color: '#818cf8' }} />
|
|
<Typography variant="caption" sx={{ color: 'text.secondary', fontSize: 12 }}>
|
|
正在连接 AI...
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|