@ai-group/chat-sdk 2.1.13 → 3.0.1-alpha.2

package/dist/esm/components/XAdkChatbot/XAdkChatbot.stories.js

@@ -1,21 +1,498 @@
-import XAdkChatbot from '.';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from "react";
+import { Button, Space } from "antd";
+import XAdkChatbot from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var meta = {
-  title: 'AI组件/XAdkChatbot 聊天框',
+  title: "AI组件/XAdkChatbot 聊天消息组件",
   component: XAdkChatbot,
   parameters: {
-    layout: 'centered'
+    layout: "padded",
+    docs: {
+      description: {
+        component: "\n\n\u72EC\u7ACB\u7684\u804A\u5929\u6D88\u606F\u663E\u793A\u7EC4\u4EF6,\u7528\u4E8E\u6E32\u67D3\u6D88\u606F\u5217\u8868\u548C\u5EFA\u8BAE\u95EE\u9898\u3002\n\n## \u6838\u5FC3\u529F\u80FD\n\n- \uD83D\uDCDD **\u6D88\u606F\u6E32\u67D3**: \u652F\u6301\u6587\u672C\u3001Markdown\u3001\u4EE3\u7801\u5757\u3001\u51FD\u6570\u8C03\u7528\u7B49\n- \uD83D\uDCAD **\u601D\u7EF4\u94FE**: \u652F\u6301\u663E\u793A AI \u63A8\u7406\u8FC7\u7A0B\n- \uD83C\uDFAF **\u5EFA\u8BAE\u95EE\u9898**: \u663E\u793A\u548C\u70B9\u51FB\u5EFA\u8BAE\u95EE\u9898\n- \uD83D\uDCCC **\u5F00\u573A\u767D**: \u652F\u6301\u663E\u793A\u6B22\u8FCE\u6D88\u606F\n- \uD83D\uDD04 **\u52A0\u8F7D\u72B6\u6001**: \u5B9E\u65F6\u663E\u793A AI \u751F\u6210\u72B6\u6001\n- \uD83C\uDFA8 **\u81EA\u5B9A\u4E49\u6E32\u67D3**: \u652F\u6301\u81EA\u5B9A\u4E49\u6D88\u606F\u5E95\u90E8\u5185\u5BB9\n\n## Props\n\n| \u5C5E\u6027 | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u8BF4\u660E |\n|------|------|--------|------|\n| messages | IMessage[] | [] | \u6D88\u606F\u5217\u8868 |\n| loading | boolean | false | \u662F\u5426\u6B63\u5728\u52A0\u8F7D |\n| prologue | string | - | \u5F00\u573A\u767D |\n| suggestions | string[] | [] | \u5EFA\u8BAE\u95EE\u9898 |\n| showFnCallDetail | boolean | false | \u663E\u793A\u51FD\u6570\u8C03\u7528\u8BE6\u60C5 |\n| footer | (msg) => ReactNode | - | \u81EA\u5B9A\u4E49\u6D88\u606F\u5E95\u90E8 |\n| onSubmit | (content) => void | - | \u53D1\u9001\u6D88\u606F\u56DE\u8C03 |\n| onStop | () => void | - | \u505C\u6B62\u751F\u6210\u56DE\u8C03 |\n| onClear | () => void | - | \u6E05\u7A7A\u6D88\u606F\u56DE\u8C03 |\n| onSuggest | (text) => void | - | \u70B9\u51FB\u5EFA\u8BAE\u56DE\u8C03 |\n| onConfirm | (fnCall, confirmed) => void | - | \u786E\u8BA4\u51FD\u6570\u8C03\u7528 |\n        "
+      }
+    }
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
-    messages: {
-      description: '消息列表'
+    loading: {
+      description: "是否正在加载(AI 生成中)",
+      control: "boolean"
+    },
+    showFnCallDetail: {
+      description: "是否显示函数调用详情",
+      control: "boolean"
     }
   }
 };
 export default meta;
+// Mock 消息数据
+var mockMessages = [{
+  id: "1",
+  role: "user",
+  text: "你好"
+}, {
+  id: "2",
+  role: "bot",
+  text: "你好!我是 AI 助手,很高兴为你服务。有什么我可以帮助你的吗?",
+  invocationId: "inv-1"
+}, {
+  id: "3",
+  role: "user",
+  text: "介绍一下 React Hooks"
+}, {
+  id: "4",
+  role: "bot",
+  text: "React Hooks \u662F React 16.8 \u5F15\u5165\u7684\u65B0\u7279\u6027,\u5B83\u8BA9\u4F60\u5728\u4E0D\u7F16\u5199 class \u7684\u60C5\u51B5\u4E0B\u4F7F\u7528 state \u548C\u5176\u4ED6 React \u7279\u6027\u3002\n\n## \u5E38\u7528\u7684 Hooks\n\n### 1. useState\n\u7528\u4E8E\u5728\u51FD\u6570\u7EC4\u4EF6\u4E2D\u6DFB\u52A0\u72B6\u6001:\n\n```jsx\nconst [count, setCount] = useState(0);\n```\n\n### 2. useEffect\n\u7528\u4E8E\u5904\u7406\u526F\u4F5C\u7528:\n\n```jsx\nuseEffect(() => {\n  document.title = `Count: ${count}`;\n}, [count]);\n```\n\n### 3. useContext\n\u7528\u4E8E\u8BBF\u95EE Context:\n\n```jsx\nconst theme = useContext(ThemeContext);\n```\n\n## \u4F18\u52BF\n\n- \u2705 \u4EE3\u7801\u66F4\u7B80\u6D01\n- \u2705 \u903B\u8F91\u590D\u7528\u66F4\u5BB9\u6613\n- \u2705 \u907F\u514D this \u76F8\u5173\u95EE\u9898\n- \u2705 \u66F4\u597D\u7684\u4EE3\u7801\u7EC4\u7EC7",
+  invocationId: "inv-2"
+}];
+
+// ============================================
+// 示例 1: 基础用法
+// ============================================
 export var 基础用法 = {
-  args: {
-    messages: []
+  render: function render() {
+    var _useState = useState(mockMessages),
+      _useState2 = _slicedToArray(_useState, 2),
+      messages = _useState2[0],
+      setMessages = _useState2[1];
+    var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+    var handleSubmit = function handleSubmit(_ref) {
+      var text = _ref.text;
+      if (!(text !== null && text !== void 0 && text.trim())) return;
+      var userMsg = {
+        id: Date.now().toString(),
+        role: "user",
+        text: text
+      };
+      setMessages(function (prev) {
+        return [].concat(_toConsumableArray(prev), [userMsg]);
+      });
+      setLoading(true);
+      setTimeout(function () {
+        var botMsg = {
+          id: (Date.now() + 1).toString(),
+          role: "bot",
+          text: "\u8FD9\u662F\u5BF9 \"".concat(text, "\" \u7684\u6A21\u62DF\u56DE\u590D\u3002"),
+          invocationId: "inv-".concat(Date.now())
+        };
+        setMessages(function (prev) {
+          return [].concat(_toConsumableArray(prev), [botMsg]);
+        });
+        setLoading(false);
+      }, 1000);
+    };
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 700,
+        height: "600px",
+        border: "1px solid #f0f0f0",
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/_jsx(XAdkChatbot, {
+        messages: messages,
+        loading: loading,
+        initialized: true,
+        onSubmit: handleSubmit,
+        onStop: function onStop() {
+          return setLoading(false);
+        },
+        onClear: function onClear() {
+          return setMessages([]);
+        }
+      })
+    });
+  }
+};
+
+// ============================================
+// 示例 2: 开场白和建议问题
+// ============================================
+export var 开场白和建议 = {
+  render: function render() {
+    var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      messages = _useState6[0],
+      setMessages = _useState6[1];
+    var _useState7 = useState(["什么是 React Hooks?", "如何使用 useState?", "useEffect 的作用是什么?"]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      suggestions = _useState8[0],
+      setSuggestions = _useState8[1];
+    var prologue = "你好!我是 AI 助手,专注于 React 开发相关的问题。";
+    var handleSuggest = function handleSuggest(text) {
+      var userMsg = {
+        id: Date.now().toString(),
+        role: "user",
+        text: text
+      };
+      setMessages([userMsg]);
+      setSuggestions([]);
+      setTimeout(function () {
+        var botMsg = {
+          id: (Date.now() + 1).toString(),
+          role: "bot",
+          text: "\u8FD9\u662F\u5BF9 \"".concat(text, "\" \u7684\u56DE\u7B54..."),
+          invocationId: "inv-".concat(Date.now())
+        };
+        setMessages(function (prev) {
+          return [].concat(_toConsumableArray(prev), [botMsg]);
+        });
+      }, 1000);
+    };
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 700,
+        height: "600px",
+        border: "1px solid #f0f0f0",
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/_jsx(XAdkChatbot, {
+        messages: messages,
+        loading: false,
+        initialized: true,
+        prologue: prologue,
+        suggestions: suggestions,
+        onSuggest: handleSuggest
+      })
+    });
+  }
+};
+
+// ============================================
+// 示例 3: 流式输出
+// ============================================
+export var 流式输出 = {
+  render: function render() {
+    var _useState9 = useState([{
+        id: "1",
+        role: "user",
+        text: "给我讲一个故事"
+      }]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      messages = _useState10[0],
+      setMessages = _useState10[1];
+    var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      loading = _useState12[0],
+      setLoading = _useState12[1];
+    var handleStart = function handleStart() {
+      setLoading(true);
+      var fullText = "从前有座山,山里有座庙,庙里有个老和尚在给小和尚讲故事。讲什么呢?从前有座山,山里有座庙...";
+      var currentText = "";
+      var index = 0;
+      var botMsg = {
+        id: "2",
+        role: "bot",
+        text: "",
+        invocationId: "inv-1"
+      };
+      setMessages(function (prev) {
+        return [].concat(_toConsumableArray(prev), [botMsg]);
+      });
+      var interval = setInterval(function () {
+        if (index < fullText.length) {
+          currentText += fullText[index];
+          setMessages(function (prev) {
+            var newMessages = _toConsumableArray(prev);
+            newMessages[newMessages.length - 1] = _objectSpread(_objectSpread({}, botMsg), {}, {
+              text: currentText
+            });
+            return newMessages;
+          });
+          index++;
+        } else {
+          clearInterval(interval);
+          setLoading(false);
+        }
+      }, 50);
+    };
+    return /*#__PURE__*/_jsxs("div", {
+      style: {
+        width: 700
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          marginBottom: "16px"
+        },
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "primary",
+          onClick: handleStart,
+          disabled: loading,
+          children: "\u5F00\u59CB\u6D41\u5F0F\u8F93\u51FA\u6F14\u793A"
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          height: "550px",
+          border: "1px solid #f0f0f0",
+          borderRadius: "8px",
+          overflow: "hidden"
+        },
+        children: /*#__PURE__*/_jsx(XAdkChatbot, {
+          messages: messages,
+          loading: loading,
+          initialized: true,
+          onStop: function onStop() {
+            return setLoading(false);
+          }
+        })
+      })]
+    });
+  }
+};
+
+// ============================================
+// 示例 4: 自定义消息 Footer
+// ============================================
+export var 自定义Footer = {
+  render: function render() {
+    var _useState13 = useState(mockMessages),
+      _useState14 = _slicedToArray(_useState13, 1),
+      messages = _useState14[0];
+    var _useState15 = useState(new Set()),
+      _useState16 = _slicedToArray(_useState15, 2),
+      likedMessages = _useState16[0],
+      setLikedMessages = _useState16[1];
+    var handleLike = function handleLike(messageId) {
+      setLikedMessages(function (prev) {
+        var newSet = new Set(prev);
+        if (newSet.has(messageId)) {
+          newSet.delete(messageId);
+        } else {
+          newSet.add(messageId);
+        }
+        return newSet;
+      });
+    };
+    var customFooter = function customFooter(data) {
+      var message = data.message,
+        isLastBotMsg = data.isLastBotMsg;
+      if (!isLastBotMsg) return null;
+      var isLiked = likedMessages.has(message.id);
+      return /*#__PURE__*/_jsx("div", {
+        style: {
+          padding: "8px 0"
+        },
+        children: /*#__PURE__*/_jsxs(Space, {
+          size: "small",
+          children: [/*#__PURE__*/_jsx(Button, {
+            size: "small",
+            type: isLiked ? "primary" : "text",
+            onClick: function onClick() {
+              return handleLike(message.id);
+            },
+            children: isLiked ? "👍 已赞" : "👍 赞"
+          }), /*#__PURE__*/_jsx(Button, {
+            size: "small",
+            type: "text",
+            children: "\uD83D\uDC4E \u8E29"
+          }), /*#__PURE__*/_jsx(Button, {
+            size: "small",
+            type: "text",
+            children: "\uD83D\uDCCB \u590D\u5236"
+          }), /*#__PURE__*/_jsx(Button, {
+            size: "small",
+            type: "text",
+            children: "\uD83D\uDD04 \u91CD\u65B0\u751F\u6210"
+          })]
+        })
+      });
+    };
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 700,
+        height: "600px",
+        border: "1px solid #f0f0f0",
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/_jsx(XAdkChatbot, {
+        messages: messages,
+        loading: false,
+        initialized: true,
+        actions: customFooter
+      })
+    });
+  }
+};
+
+// ============================================
+// 示例 5: 函数调用
+// ============================================
+export var 函数调用 = {
+  render: function render() {
+    var messagesWithFunctionCall = [{
+      id: "1",
+      role: "user",
+      text: "今天北京的天气怎么样?"
+    }, {
+      id: "2",
+      role: "bot",
+      functionCall: {
+        id: "call-1",
+        name: "get_weather",
+        args: {
+          city: "北京",
+          date: "2024-03-05"
+        }
+      },
+      invocationId: "inv-1"
+    }, {
+      id: "3",
+      role: "bot",
+      text: "根据天气查询,今天北京的天气是晴天,温度 15-25°C,空气质量良好,适合户外活动。",
+      invocationId: "inv-1"
+    }];
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 700,
+        height: "600px",
+        border: "1px solid #f0f0f0",
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/_jsx(XAdkChatbot, {
+        messages: messagesWithFunctionCall,
+        loading: false,
+        initialized: true,
+        showFnCallDetail: true
+      })
+    });
+  }
+};
+
+// ============================================
+// 示例 6: 思维链
+// ============================================
+export var 思维链 = {
+  render: function render() {
+    var messagesWithThought = [{
+      id: "1",
+      role: "user",
+      text: "帮我分析一下这个问题"
+    }, {
+      id: "2",
+      role: "bot",
+      text: "让我分析一下这个问题...",
+      thought: true,
+      invocationId: "inv-1"
+    }, {
+      id: "3",
+      role: "bot",
+      text: "首先,我需要理解问题的核心...",
+      thought: true,
+      invocationId: "inv-1"
+    }, {
+      id: "4",
+      role: "bot",
+      text: "根据分析,我的结论是...(这是最终回答)",
+      thought: false,
+      invocationId: "inv-1"
+    }];
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 700,
+        height: "600px",
+        border: "1px solid #f0f0f0",
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/_jsx(XAdkChatbot, {
+        messages: messagesWithThought,
+        loading: false,
+        initialized: true
+      })
+    });
+  }
+};
+
+// ============================================
+// 示例 7: 代码高亮
+// ============================================
+export var 代码高亮 = {
+  render: function render() {
+    var messagesWithCode = [{
+      id: "1",
+      role: "user",
+      text: "写一个 React 组件"
+    }, {
+      id: "2",
+      role: "bot",
+      text: "\u8FD9\u662F\u4E00\u4E2A\u7B80\u5355\u7684 React \u8BA1\u6570\u5668\u7EC4\u4EF6:\n\n```jsx\nimport React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <h1>Count: {count}</h1>\n      <button onClick={() => setCount(count + 1)}>\n        +1\n      </button>\n      <button onClick={() => setCount(count - 1)}>\n        -1\n      </button>\n    </div>\n  );\n}\n\nexport default Counter;\n```\n\n\u8FD9\u4E2A\u7EC4\u4EF6\u4F7F\u7528\u4E86 `useState` Hook \u6765\u7BA1\u7406\u8BA1\u6570\u5668\u72B6\u6001\u3002",
+      invocationId: "inv-1"
+    }];
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 700,
+        height: "600px",
+        border: "1px solid #f0f0f0",
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/_jsx(XAdkChatbot, {
+        messages: messagesWithCode,
+        loading: false,
+        initialized: true
+      })
+    });
+  }
+};
+
+// ============================================
+// 示例 8: 多轮对话
+// ============================================
+export var 多轮对话 = {
+  render: function render() {
+    var multiRoundMessages = [{
+      id: "1",
+      role: "user",
+      text: "React 是什么?"
+    }, {
+      id: "2",
+      role: "bot",
+      text: "React 是一个用于构建用户界面的 JavaScript 库。",
+      invocationId: "inv-1"
+    }, {
+      id: "3",
+      role: "user",
+      text: "它有什么特点?"
+    }, {
+      id: "4",
+      role: "bot",
+      text: "React 的主要特点包括:\n1. 组件化\n2. 虚拟 DOM\n3. 单向数据流\n4. JSX 语法",
+      invocationId: "inv-2"
+    }, {
+      id: "5",
+      role: "user",
+      text: "什么是虚拟 DOM?"
+    }, {
+      id: "6",
+      role: "bot",
+      text: "虚拟 DOM 是真实 DOM 的 JavaScript 对象表示,React 通过对比虚拟 DOM 的变化来高效更新真实 DOM。",
+      invocationId: "inv-3"
+    }];
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 700,
+        height: "600px",
+        border: "1px solid #f0f0f0",
+        borderRadius: "8px",
+        overflow: "hidden"
+      },
+      children: /*#__PURE__*/_jsx(XAdkChatbot, {
+        messages: multiRoundMessages,
+        loading: false,
+        initialized: true
+      })
+    });
   }
 };
 //# sourceMappingURL=XAdkChatbot.stories.js.map

package/dist/esm/components/XAdkChatbot/XAdkChatbot.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["XAdkChatbot","meta","title","component","parameters","layout","tags","argTypes","messages","description","基础用法","args"],"sources":["../../../../src/components/XAdkChatbot/XAdkChatbot.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 XAdkChatbot from '.';\nimport { useProviderContext, useProviderMethods } from '@/hooks/useProviderContext';\n\nconst meta: Meta<typeof XAdkChatbot> = {\n  title: 'AI组件/XAdkChatbot 聊天框',\n  component: XAdkChatbot,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    messages: {\n      description: '消息列表',\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const 基础用法: Story = {\n  args: {\n    messages: [],\n  },\n};"],"mappings":"AAOA,OAAOA,WAAW,MAAM,GAAG;AAG3B,IAAMC,IAA8B,GAAG;EACrCC,KAAK,EAAE,sBAAsB;EAC7BC,SAAS,EAAEH,WAAW;EACtBI,UAAU,EAAE;IACVC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,QAAQ,EAAE;IACRC,QAAQ,EAAE;MACRC,WAAW,EAAE;IACf;EACF;AACF,CAAC;AAED,eAAeR,IAAI;AAGnB,OAAO,IAAMS,IAAW,GAAG;EACzBC,IAAI,EAAE;IACJH,QAAQ,EAAE;EACZ;AACF,CAAC"}
+{"version":3,"names":["React","useState","Button","Space","XAdkChatbot","jsx","_jsx","jsxs","_jsxs","meta","title","component","parameters","layout","docs","description","tags","argTypes","loading","control","showFnCallDetail","mockMessages","id","role","text","invocationId","基础用法","render","_useState","_useState2","_slicedToArray","messages","setMessages","_useState3","_useState4","setLoading","handleSubmit","_ref","trim","userMsg","Date","now","toString","prev","concat","_toConsumableArray","setTimeout","botMsg","style","width","height","border","borderRadius","overflow","children","initialized","onSubmit","onStop","onClear","开场白和建议","_useState5","_useState6","_useState7","_useState8","suggestions","setSuggestions","prologue","handleSuggest","onSuggest","流式输出","_useState9","_useState10","_useState11","_useState12","handleStart","fullText","currentText","index","interval","setInterval","length","newMessages","_objectSpread","clearInterval","marginBottom","type","onClick","disabled","自定义Footer","_useState13","_useState14","_useState15","Set","_useState16","likedMessages","setLikedMessages","handleLike","messageId","newSet","has","delete","add","customFooter","data","message","isLastBotMsg","isLiked","padding","size","actions","函数调用","messagesWithFunctionCall","functionCall","name","args","city","date","思维链","messagesWithThought","thought","代码高亮","messagesWithCode","多轮对话","multiRoundMessages"],"sources":["../../../../src/components/XAdkChatbot/XAdkChatbot.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Button, Space } from \"antd\";\nimport XAdkChatbot from \"./index\";\nimport type { IMessage } from \"@/types\";\n\nconst meta: Meta<typeof XAdkChatbot> = {\n  title: \"AI组件/XAdkChatbot 聊天消息组件\",\n  component: XAdkChatbot,\n  parameters: {\n    layout: \"padded\",\n    docs: {\n      description: {\n        component: `\n\n独立的聊天消息显示组件,用于渲染消息列表和建议问题。\n\n## 核心功能\n\n- 📝 **消息渲染**: 支持文本、Markdown、代码块、函数调用等\n- 💭 **思维链**: 支持显示 AI 推理过程\n- 🎯 **建议问题**: 显示和点击建议问题\n- 📌 **开场白**: 支持显示欢迎消息\n- 🔄 **加载状态**: 实时显示 AI 生成状态\n- 🎨 **自定义渲染**: 支持自定义消息底部内容\n\n## Props\n\n| 属性 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| messages | IMessage[] | [] | 消息列表 |\n| loading | boolean | false | 是否正在加载 |\n| prologue | string | - | 开场白 |\n| suggestions | string[] | [] | 建议问题 |\n| showFnCallDetail | boolean | false | 显示函数调用详情 |\n| footer | (msg) => ReactNode | - | 自定义消息底部 |\n| onSubmit | (content) => void | - | 发送消息回调 |\n| onStop | () => void | - | 停止生成回调 |\n| onClear | () => void | - | 清空消息回调 |\n| onSuggest | (text) => void | - | 点击建议回调 |\n| onConfirm | (fnCall, confirmed) => void | - | 确认函数调用 |\n        `,\n      },\n    },\n  },\n  tags: [\"autodocs\"],\n  argTypes: {\n    loading: {\n      description: \"是否正在加载(AI 生成中)\",\n      control: \"boolean\",\n    },\n    showFnCallDetail: {\n      description: \"是否显示函数调用详情\",\n      control: \"boolean\",\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// Mock 消息数据\nconst mockMessages: IMessage[] = [\n  {\n    id: \"1\",\n    role: \"user\",\n    text: \"你好\",\n  },\n  {\n    id: \"2\",\n    role: \"bot\",\n    text: \"你好!我是 AI 助手,很高兴为你服务。有什么我可以帮助你的吗?\",\n    invocationId: \"inv-1\",\n  },\n  {\n    id: \"3\",\n    role: \"user\",\n    text: \"介绍一下 React Hooks\",\n  },\n  {\n    id: \"4\",\n    role: \"bot\",\n    text: `React Hooks 是 React 16.8 引入的新特性,它让你在不编写 class 的情况下使用 state 和其他 React 特性。\n\n## 常用的 Hooks\n\n### 1. useState\n用于在函数组件中添加状态:\n\n\\`\\`\\`jsx\nconst [count, setCount] = useState(0);\n\\`\\`\\`\n\n### 2. useEffect\n用于处理副作用:\n\n\\`\\`\\`jsx\nuseEffect(() => {\n  document.title = \\`Count: \\${count}\\`;\n}, [count]);\n\\`\\`\\`\n\n### 3. useContext\n用于访问 Context:\n\n\\`\\`\\`jsx\nconst theme = useContext(ThemeContext);\n\\`\\`\\`\n\n## 优势\n\n- ✅ 代码更简洁\n- ✅ 逻辑复用更容易\n- ✅ 避免 this 相关问题\n- ✅ 更好的代码组织`,\n    invocationId: \"inv-2\",\n  },\n];\n\n// ============================================\n// 示例 1: 基础用法\n// ============================================\nexport const 基础用法: Story = {\n  render: () => {\n    const [messages, setMessages] = useState<IMessage[]>(mockMessages);\n    const [loading, setLoading] = useState(false);\n\n    const handleSubmit = ({ text }: any) => {\n      if (!text?.trim()) return;\n\n      const userMsg: IMessage = {\n        id: Date.now().toString(),\n        role: \"user\",\n        text,\n      };\n      setMessages((prev) => [...prev, userMsg]);\n\n      setLoading(true);\n      setTimeout(() => {\n        const botMsg: IMessage = {\n          id: (Date.now() + 1).toString(),\n          role: \"bot\",\n          text: `这是对 \"${text}\" 的模拟回复。`,\n          invocationId: `inv-${Date.now()}`,\n        };\n        setMessages((prev) => [...prev, botMsg]);\n        setLoading(false);\n      }, 1000);\n    };\n\n    return (\n      <div\n        style={{\n          width: 700,\n          height: \"600px\",\n          border: \"1px solid #f0f0f0\",\n          borderRadius: \"8px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <XAdkChatbot\n          messages={messages}\n          loading={loading}\n          initialized={true}\n          onSubmit={handleSubmit}\n          onStop={() => setLoading(false)}\n          onClear={() => setMessages([])}\n        />\n      </div>\n    );\n  },\n};\n\n// ============================================\n// 示例 2: 开场白和建议问题\n// ============================================\nexport const 开场白和建议: Story = {\n  render: () => {\n    const [messages, setMessages] = useState<IMessage[]>([]);\n    const [suggestions, setSuggestions] = useState([\n      \"什么是 React Hooks?\",\n      \"如何使用 useState?\",\n      \"useEffect 的作用是什么?\",\n    ]);\n\n    const prologue = \"你好!我是 AI 助手,专注于 React 开发相关的问题。\";\n\n    const handleSuggest = (text: string) => {\n      const userMsg: IMessage = {\n        id: Date.now().toString(),\n        role: \"user\",\n        text,\n      };\n      setMessages([userMsg]);\n      setSuggestions([]);\n\n      setTimeout(() => {\n        const botMsg: IMessage = {\n          id: (Date.now() + 1).toString(),\n          role: \"bot\",\n          text: `这是对 \"${text}\" 的回答...`,\n          invocationId: `inv-${Date.now()}`,\n        };\n        setMessages((prev) => [...prev, botMsg]);\n      }, 1000);\n    };\n\n    return (\n      <div\n        style={{\n          width: 700,\n          height: \"600px\",\n          border: \"1px solid #f0f0f0\",\n          borderRadius: \"8px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <XAdkChatbot\n          messages={messages}\n          loading={false}\n          initialized={true}\n          prologue={prologue}\n          suggestions={suggestions}\n          onSuggest={handleSuggest}\n        />\n      </div>\n    );\n  },\n};\n\n// ============================================\n// 示例 3: 流式输出\n// ============================================\nexport const 流式输出: Story = {\n  render: () => {\n    const [messages, setMessages] = useState<IMessage[]>([\n      {\n        id: \"1\",\n        role: \"user\",\n        text: \"给我讲一个故事\",\n      },\n    ]);\n    const [loading, setLoading] = useState(false);\n\n    const handleStart = () => {\n      setLoading(true);\n\n      const fullText =\n        \"从前有座山,山里有座庙,庙里有个老和尚在给小和尚讲故事。讲什么呢?从前有座山,山里有座庙...\";\n      let currentText = \"\";\n      let index = 0;\n\n      const botMsg: IMessage = {\n        id: \"2\",\n        role: \"bot\",\n        text: \"\",\n        invocationId: \"inv-1\",\n      };\n\n      setMessages((prev) => [...prev, botMsg]);\n\n      const interval = setInterval(() => {\n        if (index < fullText.length) {\n          currentText += fullText[index];\n          setMessages((prev) => {\n            const newMessages = [...prev];\n            newMessages[newMessages.length - 1] = {\n              ...botMsg,\n              text: currentText,\n            };\n            return newMessages;\n          });\n          index++;\n        } else {\n          clearInterval(interval);\n          setLoading(false);\n        }\n      }, 50);\n    };\n\n    return (\n      <div style={{ width: 700 }}>\n        <div style={{ marginBottom: \"16px\" }}>\n          <Button type=\"primary\" onClick={handleStart} disabled={loading}>\n            开始流式输出演示\n          </Button>\n        </div>\n        <div\n          style={{\n            height: \"550px\",\n            border: \"1px solid #f0f0f0\",\n            borderRadius: \"8px\",\n            overflow: \"hidden\",\n          }}\n        >\n          <XAdkChatbot\n            messages={messages}\n            loading={loading}\n            initialized={true}\n            onStop={() => setLoading(false)}\n          />\n        </div>\n      </div>\n    );\n  },\n};\n\n// ============================================\n// 示例 4: 自定义消息 Footer\n// ============================================\nexport const 自定义Footer: Story = {\n  render: () => {\n    const [messages] = useState<IMessage[]>(mockMessages);\n    const [likedMessages, setLikedMessages] = useState<Set<string>>(new Set());\n\n    const handleLike = (messageId: string) => {\n      setLikedMessages((prev) => {\n        const newSet = new Set(prev);\n        if (newSet.has(messageId)) {\n          newSet.delete(messageId);\n        } else {\n          newSet.add(messageId);\n        }\n        return newSet;\n      });\n    };\n\n    const customFooter = (data: any) => {\n      const { message, isLastBotMsg } = data;\n\n      if (!isLastBotMsg) return null;\n\n      const isLiked = likedMessages.has(message.id);\n\n      return (\n        <div style={{ padding: \"8px 0\" }}>\n          <Space size=\"small\">\n            <Button\n              size=\"small\"\n              type={isLiked ? \"primary\" : \"text\"}\n              onClick={() => handleLike(message.id)}\n            >\n              {isLiked ? \"👍 已赞\" : \"👍 赞\"}\n            </Button>\n            <Button size=\"small\" type=\"text\">\n              👎 踩\n            </Button>\n            <Button size=\"small\" type=\"text\">\n              📋 复制\n            </Button>\n            <Button size=\"small\" type=\"text\">\n              🔄 重新生成\n            </Button>\n          </Space>\n        </div>\n      );\n    };\n\n    return (\n      <div\n        style={{\n          width: 700,\n          height: \"600px\",\n          border: \"1px solid #f0f0f0\",\n          borderRadius: \"8px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <XAdkChatbot\n          messages={messages}\n          loading={false}\n          initialized={true}\n          actions={customFooter}\n        />\n      </div>\n    );\n  },\n};\n\n// ============================================\n// 示例 5: 函数调用\n// ============================================\nexport const 函数调用: Story = {\n  render: () => {\n    const messagesWithFunctionCall: IMessage[] = [\n      {\n        id: \"1\",\n        role: \"user\",\n        text: \"今天北京的天气怎么样?\",\n      },\n      {\n        id: \"2\",\n        role: \"bot\",\n        functionCall: {\n          id: \"call-1\",\n          name: \"get_weather\",\n          args: {\n            city: \"北京\",\n            date: \"2024-03-05\",\n          },\n        },\n        invocationId: \"inv-1\",\n      },\n      {\n        id: \"3\",\n        role: \"bot\",\n        text: \"根据天气查询,今天北京的天气是晴天,温度 15-25°C,空气质量良好,适合户外活动。\",\n        invocationId: \"inv-1\",\n      },\n    ];\n\n    return (\n      <div\n        style={{\n          width: 700,\n          height: \"600px\",\n          border: \"1px solid #f0f0f0\",\n          borderRadius: \"8px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <XAdkChatbot\n          messages={messagesWithFunctionCall}\n          loading={false}\n          initialized={true}\n          showFnCallDetail={true}\n        />\n      </div>\n    );\n  },\n};\n\n// ============================================\n// 示例 6: 思维链\n// ============================================\nexport const 思维链: Story = {\n  render: () => {\n    const messagesWithThought: IMessage[] = [\n      {\n        id: \"1\",\n        role: \"user\",\n        text: \"帮我分析一下这个问题\",\n      },\n      {\n        id: \"2\",\n        role: \"bot\",\n        text: \"让我分析一下这个问题...\",\n        thought: true,\n        invocationId: \"inv-1\",\n      },\n      {\n        id: \"3\",\n        role: \"bot\",\n        text: \"首先,我需要理解问题的核心...\",\n        thought: true,\n        invocationId: \"inv-1\",\n      },\n      {\n        id: \"4\",\n        role: \"bot\",\n        text: \"根据分析,我的结论是...(这是最终回答)\",\n        thought: false,\n        invocationId: \"inv-1\",\n      },\n    ];\n\n    return (\n      <div\n        style={{\n          width: 700,\n          height: \"600px\",\n          border: \"1px solid #f0f0f0\",\n          borderRadius: \"8px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <XAdkChatbot\n          messages={messagesWithThought}\n          loading={false}\n          initialized={true}\n        />\n      </div>\n    );\n  },\n};\n\n// ============================================\n// 示例 7: 代码高亮\n// ============================================\nexport const 代码高亮: Story = {\n  render: () => {\n    const messagesWithCode: IMessage[] = [\n      {\n        id: \"1\",\n        role: \"user\",\n        text: \"写一个 React 组件\",\n      },\n      {\n        id: \"2\",\n        role: \"bot\",\n        text: `这是一个简单的 React 计数器组件:\n\n\\`\\`\\`jsx\nimport React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <h1>Count: {count}</h1>\n      <button onClick={() => setCount(count + 1)}>\n        +1\n      </button>\n      <button onClick={() => setCount(count - 1)}>\n        -1\n      </button>\n    </div>\n  );\n}\n\nexport default Counter;\n\\`\\`\\`\n\n这个组件使用了 \\`useState\\` Hook 来管理计数器状态。`,\n        invocationId: \"inv-1\",\n      },\n    ];\n\n    return (\n      <div\n        style={{\n          width: 700,\n          height: \"600px\",\n          border: \"1px solid #f0f0f0\",\n          borderRadius: \"8px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <XAdkChatbot\n          messages={messagesWithCode}\n          loading={false}\n          initialized={true}\n        />\n      </div>\n    );\n  },\n};\n\n// ============================================\n// 示例 8: 多轮对话\n// ============================================\nexport const 多轮对话: Story = {\n  render: () => {\n    const multiRoundMessages: IMessage[] = [\n      {\n        id: \"1\",\n        role: \"user\",\n        text: \"React 是什么?\",\n      },\n      {\n        id: \"2\",\n        role: \"bot\",\n        text: \"React 是一个用于构建用户界面的 JavaScript 库。\",\n        invocationId: \"inv-1\",\n      },\n      {\n        id: \"3\",\n        role: \"user\",\n        text: \"它有什么特点?\",\n      },\n      {\n        id: \"4\",\n        role: \"bot\",\n        text: \"React 的主要特点包括:\\n1. 组件化\\n2. 虚拟 DOM\\n3. 单向数据流\\n4. JSX 语法\",\n        invocationId: \"inv-2\",\n      },\n      {\n        id: \"5\",\n        role: \"user\",\n        text: \"什么是虚拟 DOM?\",\n      },\n      {\n        id: \"6\",\n        role: \"bot\",\n        text: \"虚拟 DOM 是真实 DOM 的 JavaScript 对象表示,React 通过对比虚拟 DOM 的变化来高效更新真实 DOM。\",\n        invocationId: \"inv-3\",\n      },\n    ];\n\n    return (\n      <div\n        style={{\n          width: 700,\n          height: \"600px\",\n          border: \"1px solid #f0f0f0\",\n          borderRadius: \"8px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <XAdkChatbot\n          messages={multiRoundMessages}\n          loading={false}\n          initialized={true}\n        />\n      </div>\n    );\n  },\n};\n"],"mappings":"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"}

package/dist/esm/components/XAdkChatbot/components/FileGallery/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { FileData } from "../../../../types";
+export interface FileGalleryProps {
+    files?: FileData[];
+    align?: "left" | "right";
+}
+/**
+ * 文件展示画廊组件
+ * 支持图片九宫格 + 文件列表双模式
+ */
+declare const FileGallery: React.FC<FileGalleryProps>;
+export default FileGallery;