@ai-group/chat-sdk 2.0.1 → 2.0.3

package/dist/cjs/components/XAiChatbot/XAiChatbot.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/XAiChatbot/XAiChatbot.stories.tsx"],
-  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Divider } from 'antd';\nimport { MessageRole, MessageStatus } from '@/types/XAiMessage';\nimport type { Messages } from '@/types/XAiMessage';\nimport documentIcon from '@/assets/document.svg';\nimport XAiProvider from '../XAiProvider';\nimport XAiChatbot from '.';\nimport { useProviderContext, useProviderMethods } from '@/hooks/useProviderContext';\n\nconst meta: Meta<typeof XAiChatbot> = {\n  title: 'AI组件/XAiChatbot 聊天框',\n  component: XAiChatbot,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    navbar: {\n      description: '导航栏配置',\n    },\n    messages: {\n      description: '消息列表',\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// mock 消息数据，严格符合 Messages 类型\nconst mockMessages: Messages[] = [\n  {\n    id: '1',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.assistant,\n    content: {\n      text: '你好，有什么我能帮助你的吗？',\n    },\n  },\n  {\n    id: '2',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.user,\n    content: {\n      text: '检索从北京到上海的车票数据给我',\n    },\n    parentMessageId: '1',\n  },\n  {\n    id: '22',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.assistant,\n    content: {\n      text: '',\n    },\n    thinks: '',\n    // execute: [\n    //   // 工具库调用（MCP_TOOL）\n    //   {\n    //     type: 'ActionExecutionMessage',\n    //     createdAt: new Date(),\n    //     id: 'tool-1',\n    //     name: '已调用MCP智能工具',\n    //     arguments: { param1: 'foo' },\n    //     extra: {\n    //       action: 'INVOKE_AGENT_TOOL_START',\n    //       icon: documentIcon,\n    //       type: 'MCP_TOOL',\n    //       cost: '3.9',\n    //     },\n    //   },\n    //   // // 工具库调用（PLUGIN_TOOL）\n    //   {\n    //     type: 'ActionExecutionMessage',\n    //     createdAt: new Date(),\n    //     id: 'tool-2',\n    //     name: '已调用插件工具',\n    //     arguments: { param1: 'foo' },\n    //     extra: {\n    //       action: 'INVOKE_AGENT_TOOL_START',\n    //       icon: documentIcon,\n    //       type: 'MCP_TOOL',\n    //       cost: '3.9',\n    //     },\n    //   },\n    //   // // 工具库调用（SKILL）\n    //   // {\n    //   //   action: 'INVOKE_AGENT_TOOL_START',\n    //   //   id: 'tool-3',\n    //   //   toolType: 'SKILL',\n    //   //   agentToolName: '技能工具',\n    //   //   args: { param3: 'baz' },\n\n    //   // },\n    //   // // 知识库调用（FAQ）\n    //   // {\n    //   //   action: 'RECALL_KNOWLEDGE_START',\n    //   //   uniqueId: 'kb-1',\n    //   //   processStatus: 'START',\n    //   //   args: { question: '什么是FAQ？' },\n    //   //   knowledgeType: 'FAQ',\n    //   // },\n    //   {\n    //     type: 'ActionExecutionMessage',\n    //     createdAt: new Date(),\n    //     id: 'tool-3',\n    //     name: '已调用文档知识库',\n    //     arguments: { param1: 'foo' },\n    //     extra: {\n    //       action: 'RECALL_KNOWLEDGE_START',\n    //       icon: documentIcon,\n    //       type: 'MCP_TOOL',\n    //       cost: '3.9',\n    //     },\n    //   },\n    //   // // 知识库调用（DOCUMENT）\n    //   // {\n    //   //   action: 'RECALL_KNOWLEDGE_START',\n    //   //   uniqueId: 'kb-2',\n    //   //   processStatus: 'START',\n    //   //   args: { question: '文档库介绍' },\n    //   //   knowledgeType: 'DOCUMENT',\n    //   // },\n    //   // 运行完毕\n    // ],\n    extra: {\n      noFooter: true,\n    },\n  },\n  {\n    id: '4',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.user,\n    content: {\n      text: '能否生成一段明年的产品计划开发计划文档给我',\n    },\n  },\n  {\n    id: '0',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.assistant,\n    content: {\n      text: `\n# 项目开发计划\n\n本文档概述了 2025 年第三季度的产品开发计划，包括目标、里程碑、团队分工和风险预案。\n\n---\n\n## 🎯 核心目标\n\n- 提升用户留存率至 **45%**\n- 完成 Web 端新版上线\n- 建立 AI 推荐模块 MVP\n- 优化数据库访问性能\n\n---\n\n## 📅 关键时间节点\n\n| 里程碑           | 截止日期     | 负责人   | 代理人         | 截止日期     | 负责人   |\n|------------------|--------------|----------|------------------|--------------|----------|\n| 产品需求冻结     | 2025-08-01   | Alice    | 产品需求冻结     | 2025-08-01   | Alice    |\n| UI 设计定稿       | 2025-08-10   | Bob      | 产品需求冻结     | 2025-08-01   | Alice    |\n| 开发完成（内测） | 2025-09-15   | Charlie  | 产品需求冻结     | 2025-08-01   | Alice    |\n| 正式上线         | 2025-09-30   | Diana    | 产品需求冻结     | 2025-08-01   | Alice    |\n\n---\n\n## 🛠️ 技术方案简述\n\n我们将使用以下技术栈：\n\n- 前端：React + Vite + Zustand\n- 后端：Node.js + PostgreSQL\n- 数据分析：Python + Pandas\n- 部署环境：Kubernetes on AWS\n\n---\n\n## 💡 示例代码片段\n\n以下是一个用于生成唯一 ID 的函数示例：\n\n~~~ts\nimport { nanoid } from 'nanoid'\n\nexport function generateSessionId() {\n  return \\`sess-\\${nanoid()}\\`\n}\n~~~\n`,\n    },\n    extra: {\n      noFooter: true,\n    },\n  },\n  {\n    id: '11',\n    type: 'SuggestionMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.suggestion,\n    content: [\n      {\n        key: '1',\n        description: '我要查看 AI 文档',\n      },\n      {\n        key: '2',\n        description: '我如何看待 AI',\n      },\n      {\n        key: '3',\n        description: '你是谁？',\n      },\n    ],\n  },\n];\n\n// 基础用法\nconst BasicUsageStory = (args: any) => {\n  const [messages, setMessages] = useState<Messages[]>(mockMessages);\n  const [loading, setLoading] = useState<boolean>(false);\n\n  // 模拟随机字符串流式返回\n  const handleSendMessage = () => {\n    setLoading(true);\n\n    // 模拟流式输出（向 mockMessages 第二条消息 content.text 追加）\n    const stream = ['我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容','我', '正在', '为', '你', '生成', '内容', '好','多', '好','多', '好','多', '好','多', '好','多', '好','多', '好','多', '好','多', '好','多', '好','多', '好','多', '……'];\n\n    stream.forEach((chunk, idx) => {\n      setTimeout(() => {\n        setMessages((prev) => {\n          const updated = [...prev];\n          const targetIndex = 2; // mockMessages 的第二条（索引 1）\n          const targetMsg = updated[targetIndex];\n\n          // 确保该消息存在且是 TextMessage\n          if (targetMsg && targetMsg.type === 'TextMessage') {\n            // content 可能是多种类型，这里做类型守卫\n            if ('text' in targetMsg.content) {\n              updated[targetIndex] = {\n                ...targetMsg,\n                content: {\n                  ...targetMsg.content,\n                  // 模拟随机字符串流式拼接\n                  // text: targetMsg.content.text + chunk + Math.random().toString(36).slice(2, 5),\n                },\n                thinks: targetMsg.thinks + chunk + Math.random().toString(36).slice(2, 5),\n                status: MessageStatus.pending,\n              };\n            }\n          }\n\n          // 最后一个流块时，标记完成\n          if (idx === stream.length - 1) {\n            updated[targetIndex].execute?.push(\n              {\n                id: '5',\n                type: 'ActionExecutionMessage',\n                extra: {\n                  icon: documentIcon,\n                },\n                name: '运行完毕',\n                createdAt: new Date(),\n              });\n            setLoading(false);\n            updated[targetIndex] = {\n              ...updated[targetIndex],\n              status: MessageStatus.done,\n            };\n          }\n\n          return updated;\n        });\n      }, 200 * (idx + 1)); // 每个片段延迟 600ms 模拟流\n    });\n  };\n\n  useEffect(() => {\n    if (messages) {\n      handleSendMessage();\n    }\n  }, []);\n\n  // 清空消息\n  const handleClear = () => {\n    setMessages([]);\n  };\n\n  // 模拟按钮回调\n  const handleActions = (index: number, data: any) => {\n    console.log(index, data);\n  };\n\n  // 模拟快捷短语点击\n  const handleSuggestMessageClick = (_item: any, id: string) => {\n    setMessages((prev) => prev.filter((m) => m.id !== id));\n  };\n\n  // tooltip\n  const ToolTip = (data: any) => {\n    const { cost, token } = data?.extra || {};\n    if (!cost && !token) return null;\n    return (\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          fontSize: '12px',\n          color: '#949494',\n          flex: 1,\n          paddingRight: '40px',\n        }}\n      >\n        {cost && <div>{cost}s</div>}\n        {token && <Divider type=\"vertical\" />}\n        {token && <div>{token} tokens</div>}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      style={{\n        height: '600px',\n        width: '400px',\n        border: '1px solid #e7e7e7',\n        borderRadius: '8px',\n      }}\n    >\n      <XAiChatbot\n        {...args}\n        inputShow={false}\n        messages={messages}\n        loading={loading}\n        messageTooltip={ToolTip}\n        onClear={handleClear}\n        onSuggestMessageClick={handleSuggestMessageClick}\n        onSend={handleSendMessage}\n        onMessagesActionsCallback={handleActions}\n      />\n    </div>\n  );\n};\n\nexport const 基础用法: Story = {\n  render: BasicUsageStory,\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n    // messages: mockMessages,\n    emptyStateText: '众安智能体',\n  },\n};\n\n// 在 Provider 中使用\nexport const 在Provider中使用: Story = {\n  decorators: [\n    (Story) => (\n      <XAiProvider token=\"test-token\" url=\"https://api.example.com\">\n        <Story />\n      </XAiProvider>\n    ),\n  ],\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n  },\n};\n\n// 多个 Provider 实例\nexport const 多个Provider实例: Story = {\n  decorators: [\n    (Story) => (\n      <div style={{ display: 'flex', gap: '50px', height: '600px' }}>\n        <XAiProvider providerId=\"chat1\" token=\"token1\" url=\"https://api1.example.com\">\n          <div style={{ width: '300px', marginRight: '40px' }}>\n            <Story />\n          </div>\n        </XAiProvider>\n        <XAiProvider providerId=\"chat2\" token=\"token2\" url=\"https://api2.example.com\">\n          <div style={{ width: '300px' }}>\n            <Story />\n          </div>\n        </XAiProvider>\n      </div>\n    ),\n  ],\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n  },\n};\n\n// 展示新架构的示例组件\nconst ArchitectureDemoComponent: React.FC<{ title: string }> = ({ title }) => {\n  const { mergedProps, isInProvider, getProviderValue } = useProviderContext({\n    props: { title },\n    mergeLogic: (props, context) => {\n      if (!context?.isInProvider) {\n        return props;\n      }\n\n      return {\n        ...props,\n        messages: context.messages,\n        loading: context.loading,\n        customData: context.messages?.length || 0,\n      };\n    },\n  });\n\n  const providerMethods = useProviderMethods();\n\n  return (\n    <div style={{\n      padding: '15px',\n      border: '1px solid #e7e7e7',\n      borderRadius: '8px',\n      marginBottom: '10px',\n      backgroundColor: '#fafafa',\n    }}\n    >\n      <h4 style={{ margin: '0 0 10px 0' }}>{mergedProps.title}</h4>\n      <div style={{ fontSize: '12px', color: '#666' }}>\n        <p>Provider 状态: {isInProvider ? '✅ 已连接' : '❌ 未连接'}</p>\n        <p>消息数量: {getProviderValue('messages')?.length || 0}</p>\n        <p>加载状态: {getProviderValue('loading') ? '🔄 加载中' : '✅ 就绪'}</p>\n        <button\n          onClick={() => providerMethods.sendMessage?.('来自架构演示组件的消息')}\n          disabled={!isInProvider}\n          style={{\n            fontSize: '12px',\n            padding: '4px 8px',\n            backgroundColor: isInProvider ? '#1890ff' : '#d9d9d9',\n            color: 'white',\n            border: 'none',\n            borderRadius: '4px',\n            cursor: isInProvider ? 'pointer' : 'not-allowed',\n          }}\n        >\n          {isInProvider ? '发送消息' : '需要 Provider'}\n        </button>\n      </div>\n    </div>\n  );\n};\n\n// 展示新架构的示例\nexport const 新架构演示: Story = {\n  render: (args) => (\n    <div style={{ width: '500px', height: '700px' }}>\n      <XAiProvider token=\"demo-token\" url=\"https://api.example.com\" providerId=\"architecture-demo\">\n        <div style={{ padding: '20px' }}>\n          <h3 style={{ marginBottom: '20px' }}>新架构演示</h3>\n          <p style={{ marginBottom: '20px', color: '#666' }}>\n            展示如何使用 useProviderContext 和 useProviderMethods Hook\n          </p>\n\n          {/* 演示组件 */}\n          <div style={{ marginBottom: '20px' }}>\n            <ArchitectureDemoComponent title=\"演示组件 A\" />\n            <ArchitectureDemoComponent title=\"演示组件 B\" />\n            <ArchitectureDemoComponent title=\"演示组件 C\" />\n          </div>\n\n          {/* 聊天机器人 */}\n          <XAiChatbot\n            {...args}\n            navbarShow\n            navbar={{\n              title: '架构演示聊天机器人',\n              subtitle: '展示新 Hook 的使用',\n            }}\n          />\n        </div>\n      </XAiProvider>\n    </div>\n  ),\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n  },\n};\n\n// 对比示例：独立使用 vs Provider 模式\nexport const 架构对比演示: Story = {\n  render: (args) => (\n    <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>\n      {/* 独立使用 */}\n      <div style={{ width: '300px' }}>\n        <h4>独立使用模式</h4>\n        <div style={{ border: '1px solid #e7e7e7', borderRadius: '8px', padding: '15px' }}>\n          <ArchitectureDemoComponent title=\"独立组件\" />\n          <XAiChatbot\n            {...args}\n            navbarShow\n            navbar={{\n              title: '独立聊天机器人',\n              subtitle: '不依赖 Provider',\n            }}\n            onSend={(type, content) => {\n              console.log('独立模式发送:', type, content);\n            }}\n            onClear={() => {\n              console.log('独立模式清空');\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Provider 模式 */}\n      <div style={{ width: '300px' }}>\n        <h4>Provider 模式</h4>\n        <XAiProvider token=\"demo-token\" url=\"https://api.example.com\" providerId=\"comparison-demo\">\n          <div style={{ border: '1px solid #e7e7e7', borderRadius: '8px', padding: '15px' }}>\n            <ArchitectureDemoComponent title=\"Provider 组件\" />\n            <XAiChatbot\n              {...args}\n              navbarShow\n              navbar={{\n                title: 'Provider 聊天机器人',\n                subtitle: '由 Provider 管理',\n              }}\n            />\n          </div>\n        </XAiProvider>\n      </div>\n    </div>\n  ),\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n  },\n};\n"],
-  "mappings": "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",
-  "names": ["XAiChatbot", "documentIcon", "React", "XAiProvider", "_a"]
+  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Divider } from 'antd';\nimport { MessageRole, MessageStatus } from '@/types/XAiMessage';\nimport type { Messages } from '@/types/XAiMessage';\nimport documentIcon from '@/assets/document.svg';\nimport XAiProvider from '../XAiProvider';\nimport XAiChatbot from '.';\nimport { useProviderContext, useProviderMethods } from '@/hooks/useProviderContext';\n\nconst meta: Meta<typeof XAiChatbot> = {\n  title: 'AI组件/XAiChatbot 聊天框',\n  component: XAiChatbot,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    navbar: {\n      description: '导航栏配置',\n    },\n    messages: {\n      description: '消息列表',\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// mock 消息数据，严格符合 Messages 类型\nconst mockMessages: Messages[] = [\n  {\n    id: '1',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.assistant,\n    content: {\n      text: '你好，有什么我能帮助你的吗？',\n    },\n  },\n  {\n    id: '2',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.user,\n    content: {\n      text: '检索从北京到上海的车票数据给我',\n    },\n    parentMessageId: '1',\n  },\n  {\n    id: '22',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.assistant,\n    content: {\n      text: '',\n    },\n    thinks: '',\n    // execute: [\n    //   // 工具库调用（MCP_TOOL）\n    //   {\n    //     type: 'ActionExecutionMessage',\n    //     createdAt: new Date(),\n    //     id: 'tool-1',\n    //     name: '已调用MCP智能工具',\n    //     arguments: { param1: 'foo' },\n    //     extra: {\n    //       action: 'INVOKE_AGENT_TOOL_START',\n    //       icon: documentIcon,\n    //       type: 'MCP_TOOL',\n    //       cost: '3.9',\n    //     },\n    //   },\n    //   // // 工具库调用（PLUGIN_TOOL）\n    //   {\n    //     type: 'ActionExecutionMessage',\n    //     createdAt: new Date(),\n    //     id: 'tool-2',\n    //     name: '已调用插件工具',\n    //     arguments: { param1: 'foo' },\n    //     extra: {\n    //       action: 'INVOKE_AGENT_TOOL_START',\n    //       icon: documentIcon,\n    //       type: 'MCP_TOOL',\n    //       cost: '3.9',\n    //     },\n    //   },\n    //   // // 工具库调用（SKILL）\n    //   // {\n    //   //   action: 'INVOKE_AGENT_TOOL_START',\n    //   //   id: 'tool-3',\n    //   //   toolType: 'SKILL',\n    //   //   agentToolName: '技能工具',\n    //   //   args: { param3: 'baz' },\n\n    //   // },\n    //   // // 知识库调用（FAQ）\n    //   // {\n    //   //   action: 'RECALL_KNOWLEDGE_START',\n    //   //   uniqueId: 'kb-1',\n    //   //   processStatus: 'START',\n    //   //   args: { question: '什么是FAQ？' },\n    //   //   knowledgeType: 'FAQ',\n    //   // },\n    //   {\n    //     type: 'ActionExecutionMessage',\n    //     createdAt: new Date(),\n    //     id: 'tool-3',\n    //     name: '已调用文档知识库',\n    //     arguments: { param1: 'foo' },\n    //     extra: {\n    //       action: 'RECALL_KNOWLEDGE_START',\n    //       icon: documentIcon,\n    //       type: 'MCP_TOOL',\n    //       cost: '3.9',\n    //     },\n    //   },\n    //   // // 知识库调用（DOCUMENT）\n    //   // {\n    //   //   action: 'RECALL_KNOWLEDGE_START',\n    //   //   uniqueId: 'kb-2',\n    //   //   processStatus: 'START',\n    //   //   args: { question: '文档库介绍' },\n    //   //   knowledgeType: 'DOCUMENT',\n    //   // },\n    //   // 运行完毕\n    // ],\n    extra: {\n      noFooter: true,\n    },\n  },\n  {\n    id: '4',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.user,\n    content: {\n      text: '能否生成一段明年的产品计划开发计划文档给我',\n    },\n  },\n  {\n    id: '0',\n    type: 'TextMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.assistant,\n    content: {\n      text: `\n# 项目开发计划\n\n本文档概述了 2025 年第三季度的产品开发计划，包括目标、里程碑、团队分工和风险预案。\n\n---\n\n## 🎯 核心目标\n\n- 提升用户留存率至 **45%**\n- 完成 Web 端新版上线\n- 建立 AI 推荐模块 MVP\n- 优化数据库访问性能\n\n---\n\n## 📅 关键时间节点\n\n| 里程碑           | 截止日期     | 负责人   | 代理人         | 截止日期     | 负责人   |\n|------------------|--------------|----------|------------------|--------------|----------|\n| 产品需求冻结     | 2025-08-01   | Alice    | 产品需求冻结     | 2025-08-01   | Alice    |\n| UI 设计定稿       | 2025-08-10   | Bob      | 产品需求冻结     | 2025-08-01   | Alice    |\n| 开发完成（内测） | 2025-09-15   | Charlie  | 产品需求冻结     | 2025-08-01   | Alice    |\n| 正式上线         | 2025-09-30   | Diana    | 产品需求冻结     | 2025-08-01   | Alice    |\n\n---\n\n## 🛠️ 技术方案简述\n\n我们将使用以下技术栈：\n\n- 前端：React + Vite + Zustand\n- 后端：Node.js + PostgreSQL\n- 数据分析：Python + Pandas\n- 部署环境：Kubernetes on AWS\n\n---\n\n## 💡 示例代码片段\n\n以下是一个用于生成唯一 ID 的函数示例：\n\n~~~ts\nimport { nanoid } from 'nanoid'\n\nexport function generateSessionId() {\n  return \\`sess-\\${nanoid()}\\`\n}\n~~~\n`,\n    },\n    extra: {\n      noFooter: true,\n    },\n  },\n  {\n    id: '11',\n    type: 'SuggestionMessage',\n    createdAt: new Date(),\n    status: MessageStatus.done,\n    role: MessageRole.suggestion,\n    content: [\n      {\n        key: '1',\n        description: '我要查看 AI 文档',\n      },\n      {\n        key: '2',\n        description: '我如何看待 AI',\n      },\n      {\n        key: '3',\n        description: '你是谁？',\n      },\n    ],\n  },\n];\n\n// 基础用法\nconst BasicUsageStory = (args: any) => {\n  const [messages, setMessages] = useState<Messages[]>(mockMessages);\n  const [loading, setLoading] = useState<boolean>(false);\n\n  // 模拟随机字符串流式返回\n  const handleSendMessage = () => {\n    setLoading(true);\n\n    // 模拟流式输出（向 mockMessages 第二条消息 content.text 追加）\n    const stream = ['我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '我', '正在', '为', '你', '生成', '内容', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '好', '多', '……'];\n\n    stream.forEach((chunk, idx) => {\n      setTimeout(() => {\n        setMessages((prev) => {\n          const updated = [...prev];\n          const targetIndex = 2; // mockMessages 的第二条（索引 1）\n          const targetMsg = updated[targetIndex];\n\n          // 确保该消息存在且是 TextMessage\n          if (targetMsg && targetMsg.type === 'TextMessage') {\n            // content 可能是多种类型，这里做类型守卫\n            if ('text' in targetMsg.content) {\n              updated[targetIndex] = {\n                ...targetMsg,\n                content: {\n                  ...targetMsg.content,\n                  // 模拟随机字符串流式拼接\n                  // text: targetMsg.content.text + chunk + Math.random().toString(36).slice(2, 5),\n                },\n                thinks: targetMsg.thinks + chunk + Math.random().toString(36).slice(2, 5),\n                status: MessageStatus.pending,\n              };\n            }\n          }\n\n          // 最后一个流块时，标记完成\n          if (idx === stream.length - 1) {\n            updated[targetIndex].execute?.push(\n              {\n                id: '5',\n                type: 'ActionExecutionMessage',\n                extra: {\n                  icon: documentIcon,\n                },\n                name: '运行完毕',\n                createdAt: new Date(),\n              });\n            setLoading(false);\n            updated[targetIndex] = {\n              ...updated[targetIndex],\n              status: MessageStatus.done,\n            };\n          }\n\n          return updated;\n        });\n      }, 200 * (idx + 1)); // 每个片段延迟 600ms 模拟流\n    });\n  };\n\n  useEffect(() => {\n    if (messages) {\n      handleSendMessage();\n    }\n  }, []);\n\n  // 清空消息\n  const handleClear = () => {\n    setMessages([]);\n  };\n\n  // 模拟按钮回调\n  const handleActions = (index: number, data: any) => {\n    console.log(index, data);\n  };\n\n  // 模拟快捷短语点击\n  const handleSuggestMessageClick = (_item: any, id: string) => {\n    setMessages((prev) => prev.filter((m) => m.id !== id));\n  };\n\n  // tooltip\n  const ToolTip = (data: any) => {\n    const { cost, token } = data?.extra || {};\n    if (!cost && !token) return null;\n    return (\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          fontSize: '12px',\n          color: '#949494',\n          flex: 1,\n          paddingRight: '40px',\n        }}\n      >\n        {cost && <div>{cost}s</div>}\n        {token && <Divider type=\"vertical\" />}\n        {token && <div>{token} tokens</div>}\n      </div>\n    );\n  };\n\n  return (\n    <div\n      style={{\n        height: '600px',\n        width: '400px',\n        border: '1px solid #e7e7e7',\n        borderRadius: '8px',\n      }}\n    >\n      <XAiChatbot\n        {...args}\n        inputShow={false}\n        messages={messages}\n        loading={loading}\n        messageTooltip={ToolTip}\n        onClear={handleClear}\n        onSuggestMessageClick={handleSuggestMessageClick}\n        onSend={handleSendMessage}\n        onMessagesActionsCallback={handleActions}\n        enableUpload\n        uploadRequest={({ file, onProgress, onSuccess }) => {\n          console.info(file);\n          onProgress?.({\n            percent: 50,\n          });\n          setTimeout(() => {\n            onSuccess?.({});\n          }, 1000);\n        }}\n      />\n    </div>\n  );\n};\n\nexport const 基础用法: Story = {\n  render: BasicUsageStory,\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n    // messages: mockMessages,\n    emptyStateText: '众安智能体',\n  },\n};\n\n// 在 Provider 中使用\nexport const 在Provider中使用: Story = {\n  decorators: [\n    (Story) => (\n      <XAiProvider token=\"test-token\" url=\"https://api.example.com\">\n        <Story />\n      </XAiProvider>\n    ),\n  ],\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n  },\n};\n\n// 多个 Provider 实例\nexport const 多个Provider实例: Story = {\n  decorators: [\n    (Story) => (\n      <div style={{ display: 'flex', gap: '50px', height: '600px' }}>\n        <XAiProvider providerId=\"chat1\" token=\"token1\" url=\"https://api1.example.com\">\n          <div style={{ width: '300px', marginRight: '40px' }}>\n            <Story />\n          </div>\n        </XAiProvider>\n        <XAiProvider providerId=\"chat2\" token=\"token2\" url=\"https://api2.example.com\">\n          <div style={{ width: '300px' }}>\n            <Story />\n          </div>\n        </XAiProvider>\n      </div>\n    ),\n  ],\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n  },\n};\n\n// 展示新架构的示例组件\nconst ArchitectureDemoComponent: React.FC<{ title: string }> = ({ title }) => {\n  const { mergedProps, isInProvider, getProviderValue } = useProviderContext({\n    props: { title },\n    mergeLogic: (props, context) => {\n      if (!context?.isInProvider) {\n        return props;\n      }\n\n      return {\n        ...props,\n        messages: context.messages,\n        loading: context.loading,\n        customData: context.messages?.length || 0,\n      };\n    },\n  });\n\n  const providerMethods = useProviderMethods();\n\n  return (\n    <div style={{\n      padding: '15px',\n      border: '1px solid #e7e7e7',\n      borderRadius: '8px',\n      marginBottom: '10px',\n      backgroundColor: '#fafafa',\n    }}\n    >\n      <h4 style={{ margin: '0 0 10px 0' }}>{mergedProps.title}</h4>\n      <div style={{ fontSize: '12px', color: '#666' }}>\n        <p>Provider 状态: {isInProvider ? '✅ 已连接' : '❌ 未连接'}</p>\n        <p>消息数量: {getProviderValue('messages')?.length || 0}</p>\n        <p>加载状态: {getProviderValue('loading') ? '🔄 加载中' : '✅ 就绪'}</p>\n        <button\n          onClick={() => providerMethods.sendMessage?.({ text: '来自架构演示组件的消息' })}\n          disabled={!isInProvider}\n          style={{\n            fontSize: '12px',\n            padding: '4px 8px',\n            backgroundColor: isInProvider ? '#1890ff' : '#d9d9d9',\n            color: 'white',\n            border: 'none',\n            borderRadius: '4px',\n            cursor: isInProvider ? 'pointer' : 'not-allowed',\n          }}\n        >\n          {isInProvider ? '发送消息' : '需要 Provider'}\n        </button>\n      </div>\n    </div>\n  );\n};\n\n// 展示新架构的示例\nexport const 新架构演示: Story = {\n  render: (args) => (\n    <div style={{ width: '500px', height: '700px' }}>\n      <XAiProvider token=\"demo-token\" url=\"https://api.example.com\" providerId=\"architecture-demo\">\n        <div style={{ padding: '20px' }}>\n          <h3 style={{ marginBottom: '20px' }}>新架构演示</h3>\n          <p style={{ marginBottom: '20px', color: '#666' }}>\n            展示如何使用 useProviderContext 和 useProviderMethods Hook\n          </p>\n\n          {/* 演示组件 */}\n          <div style={{ marginBottom: '20px' }}>\n            <ArchitectureDemoComponent title=\"演示组件 A\" />\n            <ArchitectureDemoComponent title=\"演示组件 B\" />\n            <ArchitectureDemoComponent title=\"演示组件 C\" />\n          </div>\n\n          {/* 聊天机器人 */}\n          <XAiChatbot\n            {...args}\n            navbarShow\n            navbar={{\n              title: '架构演示聊天机器人',\n              subtitle: '展示新 Hook 的使用',\n            }}\n            enableUpload\n            uploadRequest={({ file, onProgress, onSuccess }) => {\n              console.info(file);\n              onProgress?.({\n                percent: 50,\n              });\n              setTimeout(() => {\n                onSuccess?.({});\n              }, 1000);\n            }}\n          />\n        </div>\n      </XAiProvider>\n    </div>\n  ),\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n  },\n};\n\n// 对比示例：独立使用 vs Provider 模式\nexport const 架构对比演示: Story = {\n  render: (args) => (\n    <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>\n      {/* 独立使用 */}\n      <div style={{ width: '300px' }}>\n        <h4>独立使用模式</h4>\n        <div style={{ border: '1px solid #e7e7e7', borderRadius: '8px', padding: '15px' }}>\n          <ArchitectureDemoComponent title=\"独立组件\" />\n          <XAiChatbot\n            {...args}\n            navbarShow\n            navbar={{\n              title: '独立聊天机器人',\n              subtitle: '不依赖 Provider',\n            }}\n            onSend={(content) => {\n              console.log('独立模式发送:', content);\n            }}\n            onClear={() => {\n              console.log('独立模式清空');\n            }}\n            enableUpload\n            uploadRequest={({ file, onProgress, onSuccess }) => {\n              console.info(file);\n              onProgress?.({\n                percent: 50,\n              });\n              setTimeout(() => {\n                onSuccess?.({});\n              }, 1000);\n            }}\n          />\n        </div>\n      </div>\n\n      {/* Provider 模式 */}\n      <div style={{ width: '300px' }}>\n        <h4>Provider 模式</h4>\n        <XAiProvider token=\"demo-token\" url=\"https://api.example.com\" providerId=\"comparison-demo\">\n          <div style={{ border: '1px solid #e7e7e7', borderRadius: '8px', padding: '15px' }}>\n            <ArchitectureDemoComponent title=\"Provider 组件\" />\n            <XAiChatbot\n              {...args}\n              navbarShow\n              navbar={{\n                title: 'Provider 聊天机器人',\n                subtitle: '由 Provider 管理',\n              }}\n              enableUpload\n              uploadRequest={({ file, onProgress, onSuccess }) => {\n                console.info(file);\n                onProgress?.({\n                  percent: 50,\n                });\n                setTimeout(() => {\n                  onSuccess?.({});\n                }, 1000);\n              }}\n            />\n          </div>\n        </XAiProvider>\n      </div>\n    </div>\n  ),\n  args: {\n    navbar: {\n      title: '智能助手',\n    },\n  },\n};\n"],
+  "mappings": "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",
+  "names": ["XAiChatbot", "documentIcon", "XAiProvider", "_a"]
 }

package/dist/cjs/components/XAiChatbot/index.js

@@ -34,7 +34,7 @@ __export(XAiChatbot_exports, {
   defaultActions: () => defaultActions
 });
 module.exports = __toCommonJS(XAiChatbot_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_antd = require("antd");
 var import_x = require("@ant-design/x");
 var import_icons = require("@ant-design/icons");
@@ -52,7 +52,7 @@ var import_arrow_down_blue = __toESM(require("../../assets/arrow-down-blue.png")
 var import_useProviderContext = require("../../hooks/useProviderContext");
 var import_styles = require("./styles");
 var import_XAiSender = __toESM(require("../XAiSender"));
-var styles = (0, import_styles.useStyles)();
+var import_jsx_runtime = require("react/jsx-runtime");
 var md = new import_markdown_it.default({
   html: true,
   linkify: true,
@@ -78,7 +78,7 @@ md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
 };
 var ActionHeader = ({ execute = [], thinks = "" }) => {
   var _a;
-  const styles2 = (0, import_styles.useStyles)();
+  const styles = (0, import_styles.useStyles)();
   const [expanded, setExpanded] = (0, import_react.useState)(true);
   const [executeExpanded, setExecuteExpanded] = (0, import_react.useState)(false);
   if (!thinks && (!execute || execute.length === 0))
@@ -86,31 +86,65 @@ var ActionHeader = ({ execute = [], thinks = "" }) => {
   const last = execute[execute.length - 1] || {};
   const { name } = last;
   const icon = (last == null ? void 0 : last.icon) || ((_a = last == null ? void 0 : last.extra) == null ? void 0 : _a.icon);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionHeaderWrapper }, !expanded && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionTitle, onClick: () => setExpanded((v) => !v) }, /* @__PURE__ */ import_react.default.createElement("img", { src: import_think.default, alt: "icon", className: styles2.actionHeaderIcon }), /* @__PURE__ */ import_react.default.createElement("span", { className: styles2.flex1 }, "运行过程"), /* @__PURE__ */ import_react.default.createElement("img", { alt: "展开icon", src: import_arrow_down.default, className: styles2.w("16px") })), expanded && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionHeaderDetail }, /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionDetailTitle, onClick: () => setExpanded((v) => !v) }, /* @__PURE__ */ import_react.default.createElement("img", { src: import_think.default, alt: "", className: (0, import_clsx.default)(styles2.w(14)) }), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(styles2.flex1, styles2.pl(10)) }, "隐藏运行过程"), /* @__PURE__ */ import_react.default.createElement("img", { alt: "收起icon", src: import_arrow_up.default, className: styles2.w("16px") })), thinks && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.actionDetailContent, style: { whiteSpace: "pre-line" } }, thinks), execute && execute.length > 0 && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !executeExpanded && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.executeHiddenWrapper, onClick: () => setExecuteExpanded((v) => !v) }, icon && /* @__PURE__ */ import_react.default.createElement("img", { src: icon, alt: "icon", className: styles2.h(15) }), /* @__PURE__ */ import_react.default.createElement("span", { className: styles2.flex1 }, name), /* @__PURE__ */ import_react.default.createElement("img", { alt: "工具icon", src: import_arrow_down_blue.default, className: styles2.w("16px") })), executeExpanded && /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.executeWrapper }, /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.executeTitle, onClick: () => setExecuteExpanded((v) => !v) }, /* @__PURE__ */ import_react.default.createElement("img", { src: import_group.default, alt: "icon", className: styles2.executeHeaderIcon }), /* @__PURE__ */ import_react.default.createElement("span", { className: styles2.flex1 }, "隐藏运行详情"), /* @__PURE__ */ import_react.default.createElement("img", { alt: "展开详情icon", src: import_arrow_up.default, className: styles2.w("16px") })), /* @__PURE__ */ import_react.default.createElement("div", { className: styles2.executeContent }, execute.map((action, idx) => {
-    var _a2, _b, _c;
-    const thinkIcon2 = (action == null ? void 0 : action.expandIcon) || ((_a2 = action == null ? void 0 : action.extra) == null ? void 0 : _a2.expandIcon) || ((_b = action == null ? void 0 : action.extra) == null ? void 0 : _b.icon) || (action == null ? void 0 : action.icon);
-    const thinkCost = (action == null ? void 0 : action.cost) || ((_c = action == null ? void 0 : action.extra) == null ? void 0 : _c.cost);
-    return /* @__PURE__ */ import_react.default.createElement("div", { key: action.uniqueId || idx, className: styles2.actionHeaderDetailItem }, thinkIcon2 && /* @__PURE__ */ import_react.default.createElement("img", { src: thinkIcon2, alt: "icon", className: styles2.actionHeaderIcon }), /* @__PURE__ */ import_react.default.createElement("span", null, action == null ? void 0 : action.name), /* @__PURE__ */ import_react.default.createElement("span", { className: styles2.actionHeaderCost }, thinkCost ? `${thinkCost}s` : ""));
-  }))))));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.actionHeaderWrapper, children: [
+    !expanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.actionTitle, onClick: () => setExpanded((v) => !v), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: import_think.default, alt: "icon", className: styles.actionHeaderIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.flex1, children: "运行过程" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { alt: "展开icon", src: import_arrow_down.default, className: styles.w("16px") })
+    ] }),
+    expanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.actionHeaderDetail, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.actionDetailTitle, onClick: () => setExpanded((v) => !v), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: import_think.default, alt: "", className: (0, import_clsx.default)(styles.w(14)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(styles.flex1, styles.pl(10)), children: "隐藏运行过程" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { alt: "收起icon", src: import_arrow_up.default, className: styles.w("16px") })
+      ] }),
+      thinks && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.actionDetailContent, style: { whiteSpace: "pre-line" }, children: thinks }),
+      execute && execute.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        !executeExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.executeHiddenWrapper, onClick: () => setExecuteExpanded((v) => !v), children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: icon, alt: "icon", className: styles.h(15) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.flex1, children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { alt: "工具icon", src: import_arrow_down_blue.default, className: styles.w("16px") })
+        ] }),
+        executeExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.executeWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.executeTitle, onClick: () => setExecuteExpanded((v) => !v), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: import_group.default, alt: "icon", className: styles.executeHeaderIcon }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.flex1, children: "隐藏运行详情" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { alt: "展开详情icon", src: import_arrow_up.default, className: styles.w("16px") })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.executeContent, children: execute.map((action, idx) => {
+            var _a2, _b, _c;
+            const thinkIcon2 = (action == null ? void 0 : action.expandIcon) || ((_a2 = action == null ? void 0 : action.extra) == null ? void 0 : _a2.expandIcon) || ((_b = action == null ? void 0 : action.extra) == null ? void 0 : _b.icon) || (action == null ? void 0 : action.icon);
+            const thinkCost = (action == null ? void 0 : action.cost) || ((_c = action == null ? void 0 : action.extra) == null ? void 0 : _c.cost);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.actionHeaderDetailItem, children: [
+              thinkIcon2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: thinkIcon2, alt: "icon", className: styles.actionHeaderIcon }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: action == null ? void 0 : action.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.actionHeaderCost, children: thinkCost ? `${thinkCost}s` : "" })
+            ] }, action.uniqueId || idx);
+          }) })
+        ] })
+      ] })
+    ] })
+  ] });
 };
 var defaultActions = [
   {
     key: "redo",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.RedoOutlined, null),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RedoOutlined, {}),
     tooltip: "重新生成"
   },
   {
     key: "copy",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CopyOutlined, null),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CopyOutlined, {}),
     tooltip: "复制"
   },
   {
     key: "delete",
-    icon: /* @__PURE__ */ import_react.default.createElement(import_icons.DeleteOutlined, null),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DeleteOutlined, {}),
     tooltip: "删除"
   }
 ];
 var XAiChatbot = (props) => {
+  const styles = (0, import_styles.useStyles)();
   const { mergedProps } = (0, import_useProviderContext.useChatbotContext)(props);
   const {
     navbarShow = false,
@@ -141,11 +175,14 @@ var XAiChatbot = (props) => {
     onStop,
     providerId,
     // 消息顶部
-    messageTop
+    messageTop,
+    enableUpload,
+    uploadRequest
   } = mergedProps;
   const messages = mergedProps.messages || propMessages || [];
   const loading = mergedProps.loading || propLoading;
   const [content, setContent] = (0, import_react.useState)(text);
+  const [files, setFiles] = (0, import_react.useState)([]);
   const lastMessageId = (0, import_react.useRef)("");
   const isScriptScrolling = (0, import_react.useRef)(false);
   const chatId = providerId ? `za-chatbot-container-${providerId}` : "za-chatbot-container";
@@ -159,17 +196,23 @@ var XAiChatbot = (props) => {
       isScriptScrolling.current = false;
     }, 0);
   };
-  const FooterActions = ({ data, lastMessage = false }) => /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(styles.flex, styles.gap(13)) }, messageActions.map((action, index) => {
+  const FooterActions = ({ data, lastMessage = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(styles.flex, styles.gap(13)), children: messageActions.map((action, index) => {
     var _a;
     if (!lastMessage && action.key === "redo")
       return null;
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { key: action.key, title: action.tooltip }, /* @__PURE__ */ import_react.default.createElement("span", { className: styles.cursor("pointer"), onClick: () => onMessagesActionsCallback == null ? void 0 : onMessagesActionsCallback(index, data) }, action.icon, (_a = action.render) == null ? void 0 : _a.call(action, index, data)));
-  }));
-  const MessageFooter = ({ data, lastMessage = false }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, messageTooltip == null ? void 0 : messageTooltip(data), /* @__PURE__ */ import_react.default.createElement(FooterActions, { data, lastMessage }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: action.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: styles.cursor("pointer"), onClick: () => onMessagesActionsCallback == null ? void 0 : onMessagesActionsCallback(index, data), children: [
+      action.icon,
+      (_a = action.render) == null ? void 0 : _a.call(action, index, data)
+    ] }) }, action.key);
+  }) });
+  const MessageFooter = ({ data, lastMessage = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    messageTooltip == null ? void 0 : messageTooltip(data),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FooterActions, { data, lastMessage })
+  ] });
   const rolesObject = {
     assistant: {
       placement: "start",
-      avatar: { icon: avatar || /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, { className: (0, import_clsx.default)(styles.bg("#fde3cf"), styles.userAvatar) }) },
+      avatar: { icon: avatar || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.UserOutlined, { className: (0, import_clsx.default)(styles.bg("#fde3cf"), styles.userAvatar) }) },
       typing: { step: 5, interval: 20 },
       style: {
         maxWidth: 600
@@ -180,26 +223,25 @@ var XAiChatbot = (props) => {
     },
     user: {
       placement: "end",
-      avatar: { icon: userAvatar || /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, { className: (0, import_clsx.default)(styles.bg("#87d068"), styles.userAvatar) }) },
+      avatar: { icon: userAvatar || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.UserOutlined, { className: (0, import_clsx.default)(styles.bg("#87d068"), styles.userAvatar) }) },
       classNames: {
         content: "user-content"
       }
     },
     suggestion: {
       placement: "start",
-      avatar: { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), style: { visibility: "hidden" } },
+      avatar: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.UserOutlined, {}), style: { visibility: "hidden" } },
       variant: "borderless"
     }
   };
-  const handleSend = (type, content2) => {
-    if (content2.trim()) {
-      onSend == null ? void 0 : onSend(type, content2);
-      setContent("");
-      scrollToBottom();
-    }
+  const handleSend = (obj) => {
+    onSend == null ? void 0 : onSend(obj);
+    setContent("");
+    setFiles([]);
+    scrollToBottom();
   };
-  const handleChange = (content2) => {
-    setContent(content2);
+  const handleChange = (str) => {
+    setContent(str);
   };
   const handleStop = () => {
     onStop == null ? void 0 : onStop();
@@ -209,121 +251,147 @@ var XAiChatbot = (props) => {
       return renderNavbar();
     }
     if (navbar == null ? void 0 : navbar.title) {
-      return /* @__PURE__ */ import_react.default.createElement("header", { className: styles.navbar }, navbar.avatar && /* @__PURE__ */ import_react.default.createElement("img", { src: navbar.avatar, className: styles.avatar, alt: "" }), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: styles.title }, navbar.title), /* @__PURE__ */ import_react.default.createElement("div", { className: styles.subtitle }, navbar.subtitle)));
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: styles.navbar, children: [
+        navbar.avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: navbar.avatar, className: styles.avatar, alt: "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.title, children: navbar.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.subtitle, children: navbar.subtitle })
+        ] })
+      ] });
     }
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
   };
   const confirmClear = () => {
     onClear == null ? void 0 : onClear();
   };
-  const EmptyState = (0, import_react.useMemo)(() => () => empty || /* @__PURE__ */ import_react.default.createElement("div", { className: styles.emptyWrapper }, /* @__PURE__ */ import_react.default.createElement("img", { src: emptyStateImage, alt: "空状态图标", className: styles.emptyImg }), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(styles.text(16), styles.weight(600), styles.textColor("#343434")) }, emptyStateText)), [emptyStateImage, emptyStateText]);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.GlobalStyle, null), /* @__PURE__ */ import_react.default.createElement(import_markdown.default, null), /* @__PURE__ */ import_react.default.createElement("div", { id: "x-ai-chatbot", className: styles.wrapper }, navbarShow && /* @__PURE__ */ import_react.default.createElement(NavBar, null), /* @__PURE__ */ import_react.default.createElement("div", { className: styles.messageContainer }, (messages == null ? void 0 : messages.length) ? /* @__PURE__ */ import_react.default.createElement(
-    import_x.Bubble.List,
-    {
-      id: chatId,
-      roles: rolesObject,
-      className: styles.messageList,
-      items: messages.map((msg) => {
-        const { id, role, status, type, execute = [], thinks = "", extra = { noFooter: false }, stepContent } = msg;
-        if (role === import_XAiMessage.MessageRole.assistant) {
-          lastMessageId.current = id;
-        }
-        const bubbleContent = {
-          key: id,
-          role,
-          loading: status === import_XAiMessage.MessageStatus.init,
-          header: () => messageTop || /* @__PURE__ */ import_react.default.createElement(
-            ActionHeader,
-            {
-              execute,
-              thinks
+  const EmptyState = (0, import_react.useMemo)(() => () => empty || /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.emptyWrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: emptyStateImage, alt: "空状态图标", className: styles.emptyImg }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(styles.text(16), styles.weight(600), styles.textColor("#343434")), children: emptyStateText })
+  ] }), [emptyStateImage, emptyStateText]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.GlobalStyle, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_markdown.default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: "x-ai-chatbot", className: styles.wrapper, children: [
+      navbarShow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.messageContainer, children: (messages == null ? void 0 : messages.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_x.Bubble.List,
+        {
+          id: chatId,
+          roles: rolesObject,
+          className: styles.messageList,
+          items: messages.map((msg) => {
+            const { id, role, status, type, execute = [], thinks = "", extra = { noFooter: false }, stepContent } = msg;
+            if (role === import_XAiMessage.MessageRole.assistant) {
+              lastMessageId.current = id;
             }
-          ),
-          content: (() => {
-            var _a, _b;
-            if (type === "TextMessage") {
-              if (role === "user") {
-                return /* @__PURE__ */ import_react.default.createElement(
-                  "div",
-                  {
-                    className: "ai-markdown-body",
-                    style: {
-                      minWidth: 0,
-                      maxWidth: 600
-                    }
-                  },
-                  (_a = msg.content) == null ? void 0 : _a.text
-                );
-              }
-              const html = md.render(((_b = msg.content) == null ? void 0 : _b.text) || "");
-              const htmlString = (0, import_react_html_parser.default)(html);
-              return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (stepContent == null ? void 0 : stepContent.length) && stepContent.map((item) => {
-                const html2 = md.render(item.content || "");
-                const stepHtmlString = (0, import_react_html_parser.default)(html2);
-                return /* @__PURE__ */ import_react.default.createElement(
-                  "div",
-                  {
-                    key: item.id,
-                    className: "ai-markdown-body step-content",
-                    style: {
-                      minWidth: 0,
-                      maxWidth: 600
-                    }
-                  },
-                  /* @__PURE__ */ import_react.default.createElement("div", null, stepHtmlString),
-                  /* @__PURE__ */ import_react.default.createElement("div", { className: styles.stepLine })
-                );
-              }), /* @__PURE__ */ import_react.default.createElement(
-                "div",
+            const bubbleContent = {
+              key: id,
+              role,
+              loading: status === import_XAiMessage.MessageStatus.init,
+              header: () => messageTop || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ActionHeader,
                 {
-                  className: "ai-markdown-body",
-                  style: {
-                    minWidth: 0,
-                    maxWidth: 600
+                  execute,
+                  thinks
+                }
+              ),
+              content: (() => {
+                var _a, _b;
+                if (type === "TextMessage") {
+                  if (role === "user") {
+                    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: "ai-markdown-body",
+                        style: {
+                          minWidth: 0,
+                          maxWidth: 600
+                        },
+                        children: (_a = msg.content) == null ? void 0 : _a.text
+                      }
+                    );
                   }
-                },
-                htmlString
-              ));
-            }
-            if (type === "SuggestionMessage") {
-              return /* @__PURE__ */ import_react.default.createElement(
-                import_x.Prompts,
-                {
-                  vertical: true,
-                  items: msg.content,
-                  onItemClick: (info) => {
-                    onSuggestMessageClick == null ? void 0 : onSuggestMessageClick(info.data, id, "text");
-                    if (info.data.description) {
-                      onSend == null ? void 0 : onSend("text", info.data.description);
+                  const html = md.render(((_b = msg.content) == null ? void 0 : _b.text) || "");
+                  const htmlString = (0, import_react_html_parser.default)(html);
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    (stepContent == null ? void 0 : stepContent.length) && stepContent.map((item) => {
+                      const html2 = md.render(item.content || "");
+                      const stepHtmlString = (0, import_react_html_parser.default)(html2);
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
+                        {
+                          className: "ai-markdown-body step-content",
+                          style: {
+                            minWidth: 0,
+                            maxWidth: 600
+                          },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: stepHtmlString }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.stepLine })
+                          ]
+                        },
+                        item.id
+                      );
+                    }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: "ai-markdown-body",
+                        style: {
+                          minWidth: 0,
+                          maxWidth: 600
+                        },
+                        children: htmlString
+                      }
+                    )
+                  ] });
+                }
+                if (type === "SuggestionMessage") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_x.Prompts,
+                    {
+                      vertical: true,
+                      items: msg.content,
+                      onItemClick: (info) => {
+                        onSuggestMessageClick == null ? void 0 : onSuggestMessageClick(info.data, id);
+                        if (info.data.description) {
+                          onSend == null ? void 0 : onSend({ text: info.data.description });
+                        }
+                      }
                     }
-                  }
+                  );
                 }
-              );
+                return null;
+              })()
+            };
+            if (!extra.noFooter) {
+              bubbleContent.footer = () => {
+                return role === import_XAiMessage.MessageRole.assistant && status !== import_XAiMessage.MessageStatus.failed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageFooter, { data: msg, lastMessage: lastMessageId.current === id }) });
+              };
             }
-            return null;
-          })()
-        };
-        if (!extra.noFooter) {
-          bubbleContent.footer = () => {
-            return role === import_XAiMessage.MessageRole.assistant && status !== import_XAiMessage.MessageStatus.failed && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(MessageFooter, { data: msg, lastMessage: lastMessageId.current === id }));
-          };
+            return bubbleContent;
+          })
         }
-        return bubbleContent;
-      })
-    }
-  ) : /* @__PURE__ */ import_react.default.createElement(EmptyState, null)), inputShow && /* @__PURE__ */ import_react.default.createElement(
-    import_XAiSender.default,
-    {
-      value: content,
-      loading,
-      footerTips,
-      clearBtnShow,
-      onChange: handleChange,
-      onSubmit: handleSend,
-      onStop: handleStop,
-      onClear: confirmClear
-    }
-  )));
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, {}) }),
+      inputShow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_XAiSender.default,
+        {
+          value: content,
+          loading,
+          footerTips,
+          clearBtnShow,
+          enableUpload,
+          files,
+          onChangeFiles: setFiles,
+          uploadRequest,
+          onChange: handleChange,
+          onSubmit: handleSend,
+          onStop: handleStop,
+          onClear: confirmClear
+        }
+      )
+    ] })
+  ] });
 };
 var XAiChatbot_default = XAiChatbot;
 // Annotate the CommonJS export names for ESM import in node: