Skip to content

AI助手面板普通文本回复无法显示为卡片格式 #256

Description

@kubbot

🐛 问题描述

当前状况:
在AI助手面板(AIAssistantPanel)中与AI对话时,存在以下问题:

  1. 当AI回复是JSON Line格式时,能够正确显示为结构化卡片
  2. 当AI回复是普通文本格式时,无法显示为卡片,用户只能在历史对话记录中看到自己发送的问题,但看不到AI的回复以卡片形式展示

具体表现:

  • 用户发送问题后,输入框清空
  • 历史记录中会增加用户的问题记录
  • 但AI的普通文本回复不会在面板中以卡片形式显示
  • 只有JSON Line格式的AI回复才能正确显示为卡片

技术细节:

  • 前端使用 /api/v1/content/{content_id}/completion-updated 端点
  • 采用流式响应处理(Vercel AI SDK数据流协议)
  • 当前的卡片构建逻辑(buildAnalysisCards)和渲染逻辑(UniversalContentRenderer)理论上应该支持普通文本
  • 但实际测试中,普通文本内容无法触发卡片显示

复现步骤:

  1. 打开任意内容的AI助手面板
  2. 发送一个普通问题(不要求JSON Line格式输出)
  3. 观察AI回复是否以卡片形式显示在面板中

预期结果:
AI的普通文本回复应该显示为卡片格式,就像JSON Line格式回复一样

实际结果:
普通文本回复不会显示为卡片,面板中看不到AI的回复

🎯 理想状态

我们希望实现的效果:

  1. 统一的卡片显示:无论AI回复是JSON Line格式还是普通文本,都应该以卡片形式显示
  2. 实时流式显示:AI回复过程中能够实时显示内容更新
  3. 一致的用户体验:用户不需要关心AI回复的格式,都能看到美观的卡片展示
  4. 完整的对话体验:用户发送问题后,能够立即在面板中看到AI的回复,而不是只能在历史记录中查看

具体需求:

  • 普通文本回复应该显示为标题为"AI分析"的卡片
  • 卡片内容使用MarkdownRenderer渲染普通文本
  • 保持与JSON Line格式卡片一致的视觉样式和交互效果
  • 支持流式显示,让用户能看到AI回复的实时更新过程

🔧 技术环境

  • 前端:Next.js + React + TypeScript
  • 后端:FastAPI + Python
  • AI处理:使用completion-updated端点进行流式响应
  • 当前工作的功能:JSON Line格式的AI回复能正确显示为卡片

📁 相关文件

  • frontend/components/ai/AIAssistantPanel.tsx - 主要的AI助手面板组件
  • frontend/components/ui/UniversalContentRenderer.tsx - 内容渲染器
  • backend/app/api/routes/content.py - completion-updated端点实现

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

  • Status
    Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions