请生成一个AI聊天机器人工程
要求:

1. 项目基本信息

  • 项目名称:赢估值智能协作平台
  • 项目描述: AI聊天机器人工程:
    • 支持历史聊天会话分组管理,聊天会话默认挂在“聊天”分组下。“聊天”分组用于挂载所有未分组的聊天会话。
    • 点击某历史聊天会话后,在主内容聊天窗口区域展示该会话,用户可以在AI聊天机器人输入框输入文字继续发送进行对话,并更新Content-Title 主内容区域顶部显示的时间。
    • 支持当前消息和历史消息的多轮对话。消息发送时,本会话中的历史消息一并发送给后台。
  • 运行环境: 支持windows和linux编译和部署。
  • 环境隔离:需要使用conda环境隔离
  • 项目根目录:ams_autogen

2. 前端WEB

2.1. 技术规范

  • 前端技术栈:React 18、Ant Design 5.x、React Icons
  • 样式方案:仅使用 Ant Design 组件和 CSS-in-JS,禁止使用Tailwind CSS
  • 图标库:@ant-design/icons + 必要时的 react-icons

2.2. 主布局 (MainLayout)

  • 功能:整体页面布局,控制侧边栏展开/收起
  • 组件结构
    • Layout (Ant Design) 布局组件
    • Sider 可折叠侧边栏(宽度:展开72px,收起0px)
    • Content 主内容区域
      • Content-Title 主内容区域顶部标题区(高度:64px,不可收起,不显示滚动条)
        • 最左侧显示左侧折叠按钮图标,控制侧边栏显示和隐藏;
        • 左侧折叠按钮右侧显示当前会话分组的信息,分上下两部分:
          • 上部分:显示当前会话分组标题(文字用粗体)
          • 下部分:显示当前会话分组最后一次交流的日期和时间(举例:今天 14:30、昨天 17:22、前天 08:33、1月4日 17:22、2025年12月28日 14:32 )字体颜色为#6B7280
      • Content-ChatWindow 主内容聊天窗口区域内容超过高度时显示滚动条。
  • 交互
    • 点击左侧折叠按钮控制侧边栏的显示和隐藏
    • 移动端显示遮罩层(lg以下断点)
  • Ant Design组件Layout, Button, Drawer(移动端)

2.3. 侧边栏 (Sidebar)

  • 功能:新建对话和分组管理
  • 结构
    • 顶部区域:从上往下展示
      • Logo展示(使用Avatar组件),Avatar显示"YS",右侧显示黑体加粗的“赢估值”几个文字
      • 新建对话:样式为w-full bg-blue-50 hover:bg-blue-100 text-blue-700 py-2.5 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors mb-3 border border-blue-200 font-medium的button,显示“+ 新建会话”字样。
      • 搜索框(Input.Search),placeholder默认显示“搜索历史记录…”字样
    • 分组区域
      • 分组标题栏(使用Space布局)
      • 新建分组按钮(点击弹出Modal输入分组名)
      • 分组列表(可展开/收起,使用Collapse或自定义)
    • 未分组对话:显示未分组的聊天会话项列表
    • 底部用户信息
      • 用户头像(Avatar
      • 用户名和职位
      • 设置按钮(MoreOutlined

2.3.1. 分组区域管理

  • 分组功能

    • 每个分组显示:展开图标、圆点、名称、置顶状态
    • 分组内显示对话列表(缩进)
    • 分组右键菜单:重命名、置顶/取消置顶、删除
    • 分组排序:置顶的排在前面
  • 新建分组

    • 点击“+”按钮弹出Modal
    • 输入分组名称
    • 确认后添加到列表
  • 分组项的操作

    • 在分组项滑动鼠标时,条目背景显示淡灰色,条目右侧显示“…”的快捷菜单按钮。鼠标离开条目时背景恢复默认白色,条目右侧隐藏“…”的快捷菜单按钮。
    • 展开/收起:点击分组标题
    • 快捷菜单:重命名、置顶、删除,菜单项有对应的菜单图标,删除菜单项前有一条菜单分割线。
      • 重命名:弹出Modal输入新名称
      • 置顶:改变排序
      • 删除:确认对话框,对话移至未分组
    • 分组项下是聊天会话
  • 聊天会话项的功能

    • 聊天会话项属于分组下
    • 显示:图标(置顶/未置顶)、标题、时间
    • 悬停显示更多按钮
    • 右键菜单:移动到分组、重命名、分享、置顶、删除
  • 聊天会话项的操作

    • 在聊天会话项滑动鼠标时,条目背景显示淡灰色,条目右侧显示“…”的快捷菜单按钮。鼠标离开条目时背景恢复默认白色,条目右侧隐藏“…”的快捷菜单按钮。
    • 快捷菜单:重命名、置顶、删除,菜单项有对应的菜单图标,删除菜单项前有一条菜单分割线。
      • 移动到分组:弹出移动对话窗口:
        • 从对话菜单选择"移动到分组"
        • 弹出Modal显示分组列表
        • 可选择"移出分组"或目标分组
        • 确认后更新对话的groupId
      • 重命名:弹出Modal输入新名称
      • 分享:用于生成分享该会话的链接
      • 置顶:改变排序
      • 删除:确认对话框,对话移至未分组

2.4. 主内容聊天窗口区域 (Content-ChatWindow)

  • 新会话时:聊天窗口区正中间显示AI聊天机器人输入框(多行文本输入)。提供附件上传(回形针图标)按钮和消息发送(纸飞机图标)按钮。输入框placeholder默认显示“给智能机器人发送消息”字样。AI聊天机器人输入框上面显示黑体加粗标题文字:Hi,有什么可以帮助您?
  • 非新会话时:上部分显示该会话的对话历史消息。分左、右显示双方聊天消息。右边是用户发送的消息,左边为AI消息的回复消息。机器人的回复中,上面为文字内容,下面这引用的文档列表(如果没有文档列表时,则不显示)。
2.4.1. 消息系统
  • 消息项 (MessageItem)

    • 用户消息:右侧显示,蓝色背景(bg-color: #1677ff),白色文字
    • AI消息:左侧显示,白色背景,灰色边框
    • 头像:Avatar组件(用户用蓝色,AI用白色+蓝色图标)
    • 内容:支持Markdown样式(Typography组件)
    • 时间戳:小号文字,灰色
    • 操作按钮:复制、点赞、点踩、转发、删除(使用Space布局)
  • 消息操作

    • 复制:使用navigator.clipboard
    • 点赞/点踩:状态记录
    • 转发:弹出选择对话框
    • 删除:确认后移除
  • AI加载状态

    • 显示加载动画(Spin组件)
    • 头像和消息气泡
2.4.2. 输入框 (InputBox)
  • 功能

    • 多行文本输入(自动高度调整)
    • 支持Enter发送(Shift+Enter换行)
    • 文件上传(隐藏input[type=file]
    • AI润色功能(模拟延迟,显示加载状态)
    • 发送按钮(根据输入状态变色)
  • Ant Design组件

    • Input.TextArea:主输入框
    • Button:工具栏按钮
    • Upload:文件上传(可集成)
    • Spin:加载状态

3. 后端服务

3.1. 后台用 python 3.10 开发

3.2. 使用AutoGen框架

  • 参考官方文档[https://microsoft.github.io/autogen/stable/reference/index.html]中的功能
  • AutoGen 使用 0.7.5 版本
  • 项目使用 TeamManager 的加载用户基于 AutoGen Studio 0.4.3 配置的 team(RoundRobin Team 、Selector Team、Swarm Team、WEb Agent Team 、Deep Research Team)导出的Json文件。
    • 用户在本系统外,使用 AutoGen Studio 0.4.3 版本把model、agent、team配置好,导出该team.json供本系统使用。
    • TeamManager 加载 “team.json” 可参考[https://microsoft.github.io/autogen/stable/user-guide/autogenstudio-user-guide/usage.html]中的介绍。
  • 支持多轮对话,历史消息用 Supabase 进行存储和管理;

3.3. Supabase 用途

  • 保存历史会话的分组
  • 保存历史会话
  • 界面上点击某个历史会话时,从Supabase库中读取该会话,并展示在聊天窗口区。

3.4. 附件管理

  • 提供会话级的附件上传存储目录,附件本身写在磁盘上,附件所在的目录存储在 Supabase 中;
  • 支持xls、xlsx、doc、docx、ppt、pptx、txt、md文件上传;
  • 支持xls、xlsx、doc、docx、ppt、ppt上传后,转换成md文件格式,同时,生成的md文件所在的目录存储在 Supabase 中;

4. 生成单元测试

5. 生成完整的代码和测试用例,确保原型可立即运行。

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐