Skip to content

[AI优化] 渐进式进度反馈 - 细粒度流式状态更新 #97

@hrygo

Description

@hrygo

问题描述

当前进度反馈较粗糙:

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

验收标准

  • 每个阶段有明确的视觉反馈
  • 工具执行进度实时更新
  • 预估剩余时间基本准确 (±30%)
  • 移动端适配
  • 动画流畅 (60fps)
  • 支持 dark mode

预估工时

2-3 天

相关 Issue

  • 依赖: 无
  • 相关: #XX (智能快捷回复)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions