基于autogent创建一个AI聊天机器人
请生成一个AI聊天机器人工程。
·
请生成一个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默认显示“搜索历史记录…”字样
- Logo展示(使用
- 分组区域:
- 分组标题栏(使用
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. 生成完整的代码和测试用例,确保原型可立即运行。
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)