问题描述
当前进度反馈较粗糙:
thinking → tool_use → tool_result → answer
用户在长时间等待时(如复杂检索 >3s)不清楚具体进度,导致:
- 用户体验不佳
- 用户可能误以为卡住而刷新页面
- 无法预估剩余等待时间
建议方案
后端: 增加细粒度事件
// ai/agent/types.go
const (
EventTypePhaseChange = "phase_change" // 阶段变化
EventTypeProgress = "progress" // 进度更新
)
type PhaseChangeData struct {
Phase string `json:"phase"` // analyzing, planning, retrieving, synthesizing
EstimatedMs int `json:"estimated_ms"` // 预估剩余毫秒
ToolsPlanned []string `json:"tools_planned"` // 计划执行的工具
}
type ProgressData struct {
Phase string `json:"phase"`
Progress int `json:"progress"` // 0-100
SubPhase string `json:"sub_phase"` // 子阶段描述
ToolsInProgress []string `json:"tools_in_progress"`
ToolsCompleted []string `json:"tools_completed"`
}
后端: AmazingParrot 埋点
func (p *AmazingParrot) ExecuteWithCallback(...) error {
// Phase 1: Analyzing
callback(EventTypePhaseChange, &PhaseChangeData{
Phase: "analyzing",
EstimatedMs: 500,
})
plan, err := p.planRetrieval(ctx, userInput, history, callback)
// Phase 2: Retrieving
callback(EventTypePhaseChange, &PhaseChangeData{
Phase: "retrieving",
ToolsPlanned: plan.GetToolNames(),
EstimatedMs: 1000,
})
// 每个工具完成时发送进度
for i, tool := range tools {
result := tool.Execute(ctx)
callback(EventTypeProgress, &ProgressData{
Phase: "retrieving",
Progress: (i + 1) * 100 / len(tools),
ToolsCompleted: completedTools,
ToolsInProgress: remainingTools,
})
}
// Phase 3: Synthesizing
callback(EventTypePhaseChange, &PhaseChangeData{
Phase: "synthesizing",
EstimatedMs: 2000,
})
// ...
}
前端: ProgressIndicator 组件
// web/src/components/chat/ProgressIndicator.tsx
interface StreamingProgress {
phase: "analyzing" | "planning" | "retrieving" | "synthesizing";
progress: number;
subPhase?: string;
toolsInProgress: string[];
toolsCompleted: string[];
estimatedTimeMs: number;
}
function ProgressIndicator({ progress }: { progress: StreamingProgress }) {
const phaseLabels = {
analyzing: "🧠 分析中...",
planning: "📋 规划检索...",
retrieving: "🔍 检索数据...",
synthesizing: "✍️ 生成回答...",
};
return (
<div className="progress-container">
<div className="phase-label">{phaseLabels[progress.phase]}</div>
<div className="progress-bar">
<div
className="progress-fill"
style={{ width: `${progress.progress}%` }}
/>
</div>
{progress.toolsInProgress.length > 0 && (
<div className="tools-status">
<span>正在执行: </span>
{progress.toolsInProgress.map(tool => (
<ToolChip key={tool} name={tool} status="running" />
))}
{progress.toolsCompleted.map(tool => (
<ToolChip key={tool} name={tool} status="completed" />
))}
</div>
)}
{progress.estimatedTimeMs > 0 && (
<div className="eta">
预计剩余: {Math.ceil(progress.estimatedTimeMs / 1000)}s
</div>
)}
</div>
);
}
文件变更
后端
ai/agent/types.go - 添加新事件类型和数据结构
ai/agent/amazing_parrot.go - 发送进度事件
proto/ai/v1/ai.proto - 添加新事件类型
前端
web/src/components/chat/ProgressIndicator.tsx - 新组件
web/src/components/chat/ProgressIndicator.css - 样式
web/src/hooks/useParrotChat.ts - 处理新事件类型
web/src/components/chat/ChatMessages.tsx - 集成 ProgressIndicator
验收标准
预估工时
2-3 天
相关 Issue
问题描述
当前进度反馈较粗糙:
用户在长时间等待时(如复杂检索 >3s)不清楚具体进度,导致:
建议方案
后端: 增加细粒度事件
后端: AmazingParrot 埋点
前端: ProgressIndicator 组件
文件变更
后端
ai/agent/types.go- 添加新事件类型和数据结构ai/agent/amazing_parrot.go- 发送进度事件proto/ai/v1/ai.proto- 添加新事件类型前端
web/src/components/chat/ProgressIndicator.tsx- 新组件web/src/components/chat/ProgressIndicator.css- 样式web/src/hooks/useParrotChat.ts- 处理新事件类型web/src/components/chat/ChatMessages.tsx- 集成 ProgressIndicator验收标准
预估工时
2-3 天
相关 Issue