---

名称: 添加事件类型 描述: 在前端信息流系统中添加新的事件类型及对应的React组件。当用户提及“新事件”、“添加事件类型”、“事件块”、“新块类型”或希望显示新的智能体输出类型时使用。

添加事件类型

操作说明

1. 在 frontend/src/App.tsx 中读取当前事件类型：

   • 找到 EventType 联合类型定义
   • 查看现有的块组件（UserMessageBlock、PlanBlock、TodoBlock等）

2. 定义新的事件类型接口：

   type NewEventType = {
     type: 'new_type';
     // 添加必填字段
   };
   

3. 添加到 EventType 联合类型中：

   type EventType = UserMessage | Plan | Todo | ... | NewEventType;
   

4. 按照现有模式创建新的块组件：

   function NewTypeBlock({ event }: { event: NewEventType }) {
     return (
       <div className="p-3 bg-zinc-800/50 rounded-lg border border-zinc-700/50">
         {/* 渲染事件数据 */}
       </div>
     );
   }
   

5. 在主组件的feed渲染switch/条件语句中添加对应case

6. 如果后端发送此事件类型，请更新WebSocket消息处理器

示例

• “添加新的‘search_result’事件类型”
• “创建用于显示错误的块”
• “为进度更新添加事件类型”

约束规范

• 遵循现有的命名约定（组件使用PascalCase，事件类型使用snake_case）
• 使用现有的Tailwind类以确保样式一致性
• 确保TypeScript类型完整（不使用any）
• 通过WebSocket发送模拟事件进行测试