@ai-group/chat-sdk 0.5.2 → 0.6.0

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

@@ -32,13 +32,14 @@ __export(XAiProvider_exports, {
   default: () => XAiProvider_default
 });
 module.exports = __toCommonJS(XAiProvider_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_antd = require("antd");
 var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
 var import_x = require("@ant-design/x");
 var import_icons = require("@ant-design/icons");
 var import_AiProviderContext = require("../../context/AiProviderContext");
 var import_useAgentGenerator = __toESM(require("../../hooks/useAgentGenerator"));
+var import_constants = require("../../constants");
 var import_user = __toESM(require("../../assets/user.png"));
 var { confirm } = import_antd.Modal;
 var XAiProvider = (0, import_react.forwardRef)(({
@@ -51,7 +52,7 @@ var XAiProvider = (0, import_react.forwardRef)(({
   onMessage,
   children
 }, ref) => {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     appInfo,
     chat,
@@ -79,6 +80,25 @@ var XAiProvider = (0, import_react.forwardRef)(({
     setMessages,
     setCurrentSessionDetail
   }), [appInfo, messages, chat, stopChat, reChat, setMessages, setCurrentSessionDetail]);
+  const [isNarrow, setIsNarrow] = (0, import_react.useState)(false);
+  const divRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const div = divRef.current;
+    if (!div)
+      return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        setIsNarrow(width <= import_constants.MOBILE_MAX_WIDTH);
+      }
+    });
+    resizeObserver.observe(div);
+    const initialWidth = div.offsetWidth;
+    setIsNarrow(initialWidth <= import_constants.MOBILE_MAX_WIDTH);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
   const handleSendMessage = (_type, content) => {
     chat(content);
   };
@@ -143,7 +163,7 @@ var XAiProvider = (0, import_react.forwardRef)(({
           confirm({
             title: "编辑对话名称",
             icon: null,
-            content: /* @__PURE__ */ import_react.default.createElement(
+            content: /* @__PURE__ */ React.createElement(
               import_antd.Input,
               {
                 defaultValue: inputValue,
@@ -174,7 +194,7 @@ var XAiProvider = (0, import_react.forwardRef)(({
         case "delete":
           confirm({
             title: "确认删除?",
-            icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ExclamationCircleFilled, null),
+            icon: /* @__PURE__ */ React.createElement(import_icons.ExclamationCircleFilled, null),
             content: "该对话内容将被删除无法恢复。",
             okText: "确认删除",
             okType: "danger",
@@ -199,15 +219,15 @@ var XAiProvider = (0, import_react.forwardRef)(({
     const { cost, token: tokenCount } = finalResult.extra || {};
     if (!cost && !token)
       return null;
-    return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", fontSize: "12px", color: "#949494", flex: 1, paddingRight: "40px" } }, cost !== void 0 && cost !== null && /* @__PURE__ */ import_react.default.createElement("div", null, cost, "s"), tokenCount && /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { type: "vertical" }), tokenCount && /* @__PURE__ */ import_react.default.createElement("div", null, tokenCount, " tokens"));
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", fontSize: "12px", color: "#949494", flex: 1, paddingRight: "40px" } }, cost !== void 0 && cost !== null && /* @__PURE__ */ React.createElement("div", null, cost, "s"), tokenCount && /* @__PURE__ */ React.createElement(import_antd.Divider, { type: "vertical" }), tokenCount && /* @__PURE__ */ React.createElement("div", null, tokenCount, " tokens"));
   };
   const clearBtnShow = typeof ((_a = config == null ? void 0 : config.chatProps) == null ? void 0 : _a.clearBtnShow) !== "undefined" ? config.chatProps.clearBtnShow : !((_b = config == null ? void 0 : config.session) == null ? void 0 : _b.showSessionList);
-  return /* @__PURE__ */ import_react.default.createElement(import_x.XProvider, null, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ React.createElement(import_x.XProvider, null, /* @__PURE__ */ React.createElement(
     import_AiProviderContext.XAiContext.Provider,
     {
       value: {
-        avatar: /* @__PURE__ */ import_react.default.createElement("img", { src: icon, alt: "智能体头像" }),
-        userAvatar: /* @__PURE__ */ import_react.default.createElement("img", { src: import_user.default, alt: "用户头像" }),
+        avatar: /* @__PURE__ */ React.createElement("img", { src: icon, alt: "智能体头像" }),
+        userAvatar: /* @__PURE__ */ React.createElement("img", { src: import_user.default, alt: "用户头像" }),
         emptyStateImage: icon,
         emptyStateText: appName,
         footerTips: "内容由AI生成，无法确保真实准确，仅供参考",
@@ -220,6 +240,8 @@ var XAiProvider = (0, import_react.forwardRef)(({
         error: null,
         activeKey: currentSessionId,
         clearBtnShow,
+        inputShow: ((_c = config == null ? void 0 : config.chatProps) == null ? void 0 : _c.inputShow) || true,
+        isNarrow,
         messageTooltip: ToolTip,
         onSend: handleSendMessage,
         onClear: handleCreateNewMessage,
@@ -232,10 +254,18 @@ var XAiProvider = (0, import_react.forwardRef)(({
         isInProvider: true
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { style: {
-      display: "flex",
-      height: "100%"
-    } }, children)
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: divRef,
+        style: {
+          display: "flex",
+          height: "100%",
+          position: "relative"
+        }
+      },
+      children
+    )
   ));
 });
 var XAiProvider_default = XAiProvider;

package/dist/cjs/components/XAiProvider/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/XAiProvider/index.tsx"],
-  "sourcesContent": ["import React, { forwardRef, useImperativeHandle } from 'react';\nimport { message, Divider, Modal, Input } from 'antd';\nimport copy from 'copy-to-clipboard';\nimport { XProvider } from '@ant-design/x';\nimport type { ConversationsProps } from '@ant-design/x';\nimport { DeleteOutlined, ExclamationCircleFilled } from '@ant-design/icons';\nimport { XAiContext } from '@/context/AiProviderContext';\nimport { XAiProviderProps, XAiProviderHandle } from '@/types/XAiProvider';\nimport useAgentGenerator from '@/hooks/useAgentGenerator';\nimport userIcon from '@/assets/user.png';\n\nconst { confirm } = Modal;\n\nconst XAiProvider = forwardRef<XAiProviderHandle, XAiProviderProps>(({\n  url,\n  token,\n  config,\n  providerId = 'defaultId',\n  onSuccess,\n  onError,\n  onMessage,\n  children,\n}, ref) => {\n  // 使用 useAgentGenerator Hook 管理消息状态\n  const {\n    appInfo,\n    chat,\n    stopChat,\n    reChat,\n    createNewChat,\n    deleteSession,\n    updateSession,\n    currentSessionId,\n    sessionPagination,\n    sessionList,\n    messages,\n    loading,\n    setCurrentSessionDetail,\n    setMessages\n  } = useAgentGenerator({ url, token, config, onError, onSuccess, onMessage });\n\n  const { appName, icon } = appInfo || {};\n\n  useImperativeHandle(ref, () => ({\n    chat,\n    stopChat,\n    reChat,\n    getAppInfo: () => appInfo,\n    getMessages: () => messages,\n    getSessions: () => sessionList,\n    setMessages,\n    setCurrentSessionDetail,\n  }), [appInfo, messages, chat, stopChat, reChat, setMessages, setCurrentSessionDetail]);\n\n  // 发送消息\n  const handleSendMessage = (_type: string, content: string) => {\n    chat(content);\n  };\n\n  // 清空消息\n  const handleCreateNewMessage = () => {\n    createNewChat();\n  };\n  \n  // 工具栏按钮点击\n  const handleActions = (index: number, actionData: any) => {\n    const { content, id } = actionData || {};\n    const { text = '' } = content;\n    switch (index) {\n      case 0:\n        reChat();\n        break;\n      case 1:\n        copy(text);\n        message.success('复制成功');\n        break;\n      case 2: {\n        const idx = messages.findIndex((item) => item.id === id);\n        if (idx >= 0) {\n          // 删除该条消息及建议类消息\n          if (messages.length - idx <= 2) {\n            setMessages((prev) => prev.filter((item) => item.id !== id && item.type !== 'SuggestionMessage'));\n          } else {\n            // 非最新消息 只删除该条消息\n            setMessages((prev) => prev.filter((item) => item.id !== id));\n          }\n          message.success('删除成功');\n        }\n        break;\n      }\n    }\n  };\n\n  // 建议消息点击\n  const handleSuggestMessageClick = (_item: any, id: string) => {\n    setMessages((prev: any[]) => prev.filter((m: any) => m.id !== id));\n  };\n\n  // 切换会话\n  const handleActiveChange = (key: string) => {\n    setCurrentSessionDetail(key);\n  };\n\n  // 删除会话\n  const handleDeleteSession = (sessionId: string) => {\n    deleteSession(sessionId);\n  };\n\n  // 修改会话内容\n  const handleUpdateSession = (sessionId: string, title: string) => {\n    updateSession(sessionId, title);\n  }\n\n  // 会话操作菜单\n  const menuConfig: ConversationsProps['menu'] = (conversation) => ({\n    items: [\n      {\n        label: '重命名',\n        key: 'edit',\n      },\n      {\n        label: '删除',\n        key: 'delete',\n        danger: true,\n      },\n    ],\n    onClick: (menuInfo) => {\n      menuInfo.domEvent.stopPropagation();\n      const { key } = menuInfo;\n      switch (key) {\n        case 'edit': {\n          let inputValue = conversation.label as string || '';\n          confirm({\n            title: '编辑对话名称',\n            icon: null,\n            content: (\n              <Input\n                defaultValue={inputValue}\n                autoFocus\n                style={{ width: '100%' }}\n                onChange={e => {\n                  inputValue = e.target.value;\n                }}\n              />\n            ),\n            okText: '确认',\n            cancelText: '取消',\n            okButtonProps: {\n              style: { background: '#000', borderColor: '#000', color: '#fff' }\n            },\n            onOk: () => {\n              if (!inputValue.trim()) {\n                message.error('对话名称不能为空');\n                return Promise.reject();\n              }\n              handleUpdateSession(conversation.key, inputValue);\n            },\n            onCancel: () => {\n              // 静默处理\n            },\n          });\n          break;\n        }\n        case 'delete':\n          confirm({\n            title: '确认删除?',\n            icon: <ExclamationCircleFilled />,\n            content: '该对话内容将被删除无法恢复。',\n            okText: '确认删除',\n            okType: 'danger',\n            cancelText: '取消',\n            okButtonProps: {\n              style: { background: '#ff4d4f', borderColor: '#ff4d4f', color: '#fff' }\n            },\n            onOk() {\n              handleDeleteSession(conversation.key);\n            },\n            onCancel() {\n              //\n            },\n          });\n          break;\n      } \n    },\n  });\n\n  const ToolTip = (messageData: any) => {\n    const finalResult = (messageData?.think || []).find((item: any) => item.actionName === 'FINISHED');\n    if (!finalResult) return null;\n    const { cost, token: tokenCount } = finalResult.extra || {};\n    if (!cost && !token) return null;\n    return (\n      <div style={{ display: 'flex', alignItems: 'center', fontSize: '12px', color: '#949494', flex: 1, paddingRight: '40px' }}>\n        { (cost !== undefined && cost !== null) && <div>{cost}s</div> }\n        { tokenCount && <Divider type=\"vertical\" /> }\n        { tokenCount && <div>{ tokenCount } tokens</div> }\n      </div>\n    );\n  };\n  // 是否展示清空按钮\n  const clearBtnShow = typeof config?.chatProps?.clearBtnShow !== 'undefined'\n    ? config.chatProps.clearBtnShow\n    : !config?.session?.showSessionList;\n\n  return (\n    <XProvider>\n      <XAiContext.Provider value={{\n        avatar: <img src={icon} alt=\"智能体头像\" />,\n        userAvatar: <img src={userIcon} alt=\"用户头像\" />,\n        emptyStateImage: icon,\n        emptyStateText: appName,\n        footerTips: '内容由AI生成，无法确保真实准确，仅供参考',\n        providerId,\n        sessionList,\n        sessionTotal: sessionPagination.total, \n        token,\n        messages,\n        loading,\n        error: null,\n        activeKey: currentSessionId,\n        clearBtnShow,\n        messageTooltip: ToolTip,\n        onSend: handleSendMessage,\n        onClear: handleCreateNewMessage,\n        onNewChat: handleCreateNewMessage,\n        onStop: stopChat,\n        menu: menuConfig,\n        onActiveChange: handleActiveChange,\n        onSuggestMessageClick: handleSuggestMessageClick,\n        onMessagesActionsCallback: handleActions,\n        isInProvider: true,\n      }}\n      >\n        <div style={{\n          display: 'flex',\n          height: '100%'\n        }}>\n          {children}\n        </div>\n      </XAiContext.Provider>\n    </XProvider>\n  );\n});\n\nexport default XAiProvider;\n"],
-  "mappings": "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",
-  "names": ["useAgentGenerator", "copy", "React", "userIcon"]
+  "sourcesContent": ["import { forwardRef, useImperativeHandle, useState, useRef, useEffect } from 'react';\nimport { message, Divider, Modal, Input } from 'antd';\nimport copy from 'copy-to-clipboard';\nimport { XProvider } from '@ant-design/x';\nimport type { ConversationsProps } from '@ant-design/x';\nimport { ExclamationCircleFilled } from '@ant-design/icons';\nimport { XAiContext } from '@/context/AiProviderContext';\nimport { XAiProviderProps, XAiProviderHandle } from '@/types/XAiProvider';\nimport useAgentGenerator from '@/hooks/useAgentGenerator';\nimport { MOBILE_MAX_WIDTH } from '@/constants';\nimport userIcon from '@/assets/user.png';\n\nconst { confirm } = Modal;\n\nconst XAiProvider = forwardRef<XAiProviderHandle, XAiProviderProps>(({\n  url,\n  token,\n  config,\n  providerId = 'defaultId',\n  onSuccess,\n  onError,\n  onMessage,\n  children,\n}, ref) => {\n  // 使用 useAgentGenerator Hook 管理消息状态\n  const {\n    appInfo,\n    chat,\n    stopChat,\n    reChat,\n    createNewChat,\n    deleteSession,\n    updateSession,\n    currentSessionId,\n    sessionPagination,\n    sessionList,\n    messages,\n    loading,\n    setCurrentSessionDetail,\n    setMessages\n  } = useAgentGenerator({ url, token, config, onError, onSuccess, onMessage });\n\n  const { appName, icon } = appInfo || {};\n\n  useImperativeHandle(ref, () => ({\n    chat,\n    stopChat,\n    reChat,\n    getAppInfo: () => appInfo,\n    getMessages: () => messages,\n    getSessions: () => sessionList,\n    setMessages,\n    setCurrentSessionDetail,\n  }), [appInfo, messages, chat, stopChat, reChat, setMessages, setCurrentSessionDetail]);\n\n  const [isNarrow, setIsNarrow] = useState<boolean>(false);\n  const divRef = useRef<HTMLDivElement>(null);\n\n  // 监听容器宽度变化\n  useEffect(() => {\n    const div = divRef.current;\n    if (!div) return;\n\n    // 创建监听器\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const width = entry.contentRect.width;\n        setIsNarrow(width <= MOBILE_MAX_WIDTH);\n      }\n    })\n\n    // 开始监听\n    resizeObserver.observe(div);\n\n    // 初始化检查\n    const initialWidth = div.offsetWidth;\n    setIsNarrow(initialWidth <= MOBILE_MAX_WIDTH);\n\n    // 清理函数\n    return () => {\n      resizeObserver.disconnect();\n    }\n  }, []);\n\n  // 发送消息\n  const handleSendMessage = (_type: string, content: string) => {\n    chat(content);\n  };\n\n  // 清空消息\n  const handleCreateNewMessage = () => {\n    createNewChat();\n  };\n  \n  // 工具栏按钮点击\n  const handleActions = (index: number, actionData: any) => {\n    const { content, id } = actionData || {};\n    const { text = '' } = content;\n    switch (index) {\n      case 0:\n        reChat();\n        break;\n      case 1:\n        copy(text);\n        message.success('复制成功');\n        break;\n      case 2: {\n        const idx = messages.findIndex((item) => item.id === id);\n        if (idx >= 0) {\n          // 删除该条消息及建议类消息\n          if (messages.length - idx <= 2) {\n            setMessages((prev) => prev.filter((item) => item.id !== id && item.type !== 'SuggestionMessage'));\n          } else {\n            // 非最新消息 只删除该条消息\n            setMessages((prev) => prev.filter((item) => item.id !== id));\n          }\n          message.success('删除成功');\n        }\n        break;\n      }\n    }\n  };\n\n  // 建议消息点击\n  const handleSuggestMessageClick = (_item: any, id: string) => {\n    setMessages((prev: any[]) => prev.filter((m: any) => m.id !== id));\n  };\n\n  // 切换会话\n  const handleActiveChange = (key: string) => {\n    setCurrentSessionDetail(key);\n  };\n\n  // 删除会话\n  const handleDeleteSession = (sessionId: string) => {\n    deleteSession(sessionId);\n  };\n\n  // 修改会话内容\n  const handleUpdateSession = (sessionId: string, title: string) => {\n    updateSession(sessionId, title);\n  }\n\n  // 会话操作菜单\n  const menuConfig: ConversationsProps['menu'] = (conversation) => ({\n    items: [\n      {\n        label: '重命名',\n        key: 'edit',\n      },\n      {\n        label: '删除',\n        key: 'delete',\n        danger: true,\n      },\n    ],\n    onClick: (menuInfo) => {\n      menuInfo.domEvent.stopPropagation();\n      const { key } = menuInfo;\n      switch (key) {\n        case 'edit': {\n          let inputValue = conversation.label as string || '';\n          confirm({\n            title: '编辑对话名称',\n            icon: null,\n            content: (\n              <Input\n                defaultValue={inputValue}\n                autoFocus\n                style={{ width: '100%' }}\n                onChange={e => {\n                  inputValue = e.target.value;\n                }}\n              />\n            ),\n            okText: '确认',\n            cancelText: '取消',\n            okButtonProps: {\n              style: { background: '#000', borderColor: '#000', color: '#fff' }\n            },\n            onOk: () => {\n              if (!inputValue.trim()) {\n                message.error('对话名称不能为空');\n                return Promise.reject();\n              }\n              handleUpdateSession(conversation.key, inputValue);\n            },\n            onCancel: () => {\n              // 静默处理\n            },\n          });\n          break;\n        }\n        case 'delete':\n          confirm({\n            title: '确认删除?',\n            icon: <ExclamationCircleFilled />,\n            content: '该对话内容将被删除无法恢复。',\n            okText: '确认删除',\n            okType: 'danger',\n            cancelText: '取消',\n            okButtonProps: {\n              style: { background: '#ff4d4f', borderColor: '#ff4d4f', color: '#fff' }\n            },\n            onOk() {\n              handleDeleteSession(conversation.key);\n            },\n            onCancel() {\n              //\n            },\n          });\n          break;\n      } \n    },\n  });\n\n  const ToolTip = (messageData: any) => {\n    const finalResult = (messageData?.think || []).find((item: any) => item.actionName === 'FINISHED');\n    if (!finalResult) return null;\n    const { cost, token: tokenCount } = finalResult.extra || {};\n    if (!cost && !token) return null;\n    return (\n      <div style={{ display: 'flex', alignItems: 'center', fontSize: '12px', color: '#949494', flex: 1, paddingRight: '40px' }}>\n        { (cost !== undefined && cost !== null) && <div>{cost}s</div> }\n        { tokenCount && <Divider type=\"vertical\" /> }\n        { tokenCount && <div>{ tokenCount } tokens</div> }\n      </div>\n    );\n  };\n  // 是否展示清空按钮\n  const clearBtnShow = typeof config?.chatProps?.clearBtnShow !== 'undefined'\n    ? config.chatProps.clearBtnShow\n    : !config?.session?.showSessionList;\n  \n\n  return (\n    <XProvider>\n      <XAiContext.Provider value={{\n        avatar: <img src={icon} alt=\"智能体头像\" />,\n        userAvatar: <img src={userIcon} alt=\"用户头像\" />,\n        emptyStateImage: icon,\n        emptyStateText: appName,\n        footerTips: '内容由AI生成，无法确保真实准确，仅供参考',\n        providerId,\n        sessionList,\n        sessionTotal: sessionPagination.total, \n        token,\n        messages,\n        loading,\n        error: null,\n        activeKey: currentSessionId,\n        clearBtnShow,\n        inputShow: config?.chatProps?.inputShow || true,\n        isNarrow,\n        messageTooltip: ToolTip,\n        onSend: handleSendMessage,\n        onClear: handleCreateNewMessage,\n        onNewChat: handleCreateNewMessage,\n        onStop: stopChat,\n        menu: menuConfig,\n        onActiveChange: handleActiveChange,\n        onSuggestMessageClick: handleSuggestMessageClick,\n        onMessagesActionsCallback: handleActions,\n        isInProvider: true,\n      }}\n      >\n        <div\n          ref={divRef}\n          style={{\n          display: 'flex',\n          height: '100%',\n          position: 'relative',\n        }}>\n          {children}\n        </div>\n      </XAiContext.Provider>\n    </XProvider>\n  );\n});\n\nexport default XAiProvider;\n"],
+  "mappings": "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",
+  "names": ["useAgentGenerator", "copy", "userIcon"]
 }

package/dist/cjs/components/XAiSender/XAiSender.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import XAiSender from '.';
+declare const meta: Meta<typeof XAiSender>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const 基础用法: Story;

package/dist/cjs/components/XAiSender/XAiSender.stories.js

@@ -0,0 +1,86 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/XAiSender/XAiSender.stories.tsx
+var XAiSender_stories_exports = {};
+__export(XAiSender_stories_exports, {
+  default: () => XAiSender_stories_default,
+  基础用法: () => 基础用法
+});
+module.exports = __toCommonJS(XAiSender_stories_exports);
+var import_react = require("react");
+var import__ = __toESM(require("."));
+var meta = {
+  title: "AI组件/XAiSender 输入框",
+  component: import__.default,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {}
+};
+var XAiSender_stories_default = meta;
+var BasicUsageStory = (args) => {
+  const [content, setContent] = (0, import_react.useState)("");
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const handleClear = () => {
+    console.log("clear");
+  };
+  const handleChange = (content2) => {
+    setContent(content2);
+  };
+  const handleSendMessage = (type, content2) => {
+    setLoading(true);
+    console.log(type, content2);
+    setTimeout(() => {
+      setContent("");
+      setLoading(false);
+    }, 2e3);
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: { width: 440, border: "1px solid #eee", padding: 20 } }, /* @__PURE__ */ React.createElement(
+    import__.default,
+    {
+      loading,
+      value: content,
+      onClear: handleClear,
+      onChange: handleChange,
+      onSubmit: handleSendMessage,
+      onStop: handleClear,
+      footerTips: "内容由AI生成，无法确保真实准确，仅供参考"
+    }
+  ));
+};
+var 基础用法 = {
+  render: BasicUsageStory,
+  args: {}
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  基础用法
+});
+//# sourceMappingURL=XAiSender.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/XAiSender/XAiSender.stories.tsx"],
+  "sourcesContent": ["import { useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport XAiSender from '.';\n\nconst meta: Meta<typeof XAiSender> = {\n  title: 'AI组件/XAiSender 输入框',\n  component: XAiSender,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {},\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// 基础用法\nconst BasicUsageStory = (args: any) => {\n  const [content, setContent] = useState('');\n  const [loading, setLoading] = useState(false);\n\n  // 模拟清空数据\n  const handleClear = () => {\n    console.log('clear');\n  };\n\n  // 模拟输入\n  const handleChange = (content: string) => {\n    setContent(content);\n  }\n\n  // 模拟快捷短语点击\n  const handleSendMessage = (type: string, content: any) => {\n    setLoading(true);\n    console.log(type, content);\n    setTimeout(() => {\n      setContent('');\n      setLoading(false);\n    }, 2000);\n  };\n\n\n  return (\n    <div style={{ width: 440, border: '1px solid #eee', padding: 20 }}>\n      <XAiSender\n        loading={loading}\n        value={content}\n        onClear={handleClear}\n        onChange={handleChange}\n        onSubmit={handleSendMessage}\n        onStop={handleClear}\n        footerTips='内容由AI生成，无法确保真实准确，仅供参考'\n      />\n    </div>\n  );\n};\n\nexport const 基础用法: Story = {\n  render: BasicUsageStory,\n  args: {},\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyB;AAEzB,eAAsB;AAEtB,IAAM,OAA+B;AAAA,EACnC,OAAO;AAAA,EACP,WAAW,SAAAA;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU,CAAC;AACb;AAEA,IAAO,4BAAQ;AAIf,IAAM,kBAAkB,CAAC,SAAc;AACrC,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,EAAE;AACzC,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAG5C,QAAM,cAAc,MAAM;AACxB,YAAQ,IAAI,OAAO;AAAA,EACrB;AAGA,QAAM,eAAe,CAACC,aAAoB;AACxC,eAAWA,QAAO;AAAA,EACpB;AAGA,QAAM,oBAAoB,CAAC,MAAcA,aAAiB;AACxD,eAAW,IAAI;AACf,YAAQ,IAAI,MAAMA,QAAO;AACzB,eAAW,MAAM;AACf,iBAAW,EAAE;AACb,iBAAW,KAAK;AAAA,IAClB,GAAG,GAAI;AAAA,EACT;AAGA,SACE,oCAAC,SAAI,OAAO,EAAE,OAAO,KAAK,QAAQ,kBAAkB,SAAS,GAAG,KAC9D;AAAA,IAAC,SAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,YAAW;AAAA;AAAA,EACb,CACF;AAEJ;AAEO,IAAM,OAAc;AAAA,EACzB,QAAQ;AAAA,EACR,MAAM,CAAC;AACT;",
+  "names": ["XAiSender", "content"]
+}

package/dist/cjs/components/XAiSender/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { XAiSenderProps } from "../../types";
+declare const XAiSender: React.FC<XAiSenderProps>;
+export default XAiSender;

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

@@ -0,0 +1,168 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/XAiSender/index.tsx
+var XAiSender_exports = {};
+__export(XAiSender_exports, {
+  default: () => XAiSender_default
+});
+module.exports = __toCommonJS(XAiSender_exports);
+var import_react = __toESM(require("react"));
+var import_x = require("@ant-design/x");
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_useProviderContext = require("../../hooks/useProviderContext");
+var import_clsx = __toESM(require("clsx"));
+var import_styles = require("./styles");
+var XAiSender = (props) => {
+  const { mergedProps } = (0, import_useProviderContext.useChatbotContext)(props);
+  const {
+    footerTips,
+    clearBtnShow,
+    value,
+    onSend,
+    onChange,
+    onClear,
+    onStop,
+    onSubmit,
+    loading: propLoading = false,
+    ...resetProps
+  } = mergedProps;
+  const loading = mergedProps.loading || propLoading;
+  const [disabled, _setDisabled] = (0, import_react.useState)(false);
+  const [mode, _setMode] = (0, import_react.useState)("");
+  const [fileUploading, setFileUploading] = (0, import_react.useState)(false);
+  const [clearPopoverVisible, setClearPopoverVisible] = (0, import_react.useState)(false);
+  const styles = (0, import_styles.useStyles)();
+  const handleSend = () => {
+    if (value.trim()) {
+      onSubmit == null ? void 0 : onSubmit("text", value);
+    }
+  };
+  const fileInputRef = (0, import_react.useRef)(null);
+  const handleFileSelect = () => {
+  };
+  const handleClear = () => {
+    setClearPopoverVisible(true);
+  };
+  const cancelClear = () => {
+    setClearPopoverVisible(false);
+  };
+  const confirmClear = () => {
+    onClear == null ? void 0 : onClear();
+    setClearPopoverVisible(false);
+  };
+  const clearConfirmContent = /* @__PURE__ */ import_react.default.createElement("div", { className: styles.p("2px") }, /* @__PURE__ */ import_react.default.createElement("p", { className: (0, import_clsx.default)(styles.mb(14), styles.mt(0)) }, "确认清除所有聊天记录并重置会话！"), /* @__PURE__ */ import_react.default.createElement("div", { className: styles.popoverFooter }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { size: "small", onClick: cancelClear }, "取消"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { size: "small", type: "primary", danger: true, onClick: confirmClear }, "确认")));
+  const uploadButton = /* @__PURE__ */ import_react.default.createElement("div", { className: styles.flexCenterGap2 }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Tooltip,
+    {
+      placement: "top",
+      title: mode === "single_agent_skill_mode" ? "工作流模式不支持上传文件" : "支持图片、文档等上传"
+    },
+    fileUploading ? /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { size: "small" }) : /* @__PURE__ */ import_react.default.createElement(
+      "i",
+      {
+        className: mode === "single_agent_skill_mode" ? styles.iconZengjiaDisabled : styles.iconZengjiaNormal,
+        onClick: () => {
+          var _a;
+          if (mode !== "single_agent_skill_mode" && fileInputRef.current) {
+            (_a = fileInputRef.current) == null ? void 0 : _a.click();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        onChange: handleFileSelect,
+        style: { display: "none" },
+        accept: "*/*",
+        disabled: fileUploading || mode === "single_agent_skill_mode"
+      }
+    )
+  ));
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: styles.chatFooter }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(styles.flex, styles.gap(8)) }, clearBtnShow && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Popover,
+    {
+      content: clearConfirmContent,
+      title: "确认清空对话",
+      trigger: "click",
+      open: clearPopoverVisible,
+      onOpenChange: setClearPopoverVisible
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: styles.clearBtn,
+        style: { border: "1px solid #E4E7EC", borderRadius: "50%", height: "35px", width: "35px" },
+        onClick: handleClear
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_icons.ClearOutlined, { className: styles.text(16) })
+    )
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_x.Sender,
+    {
+      ...resetProps,
+      value,
+      className: styles.sendWrapper,
+      placeholder: "继续对话...",
+      disabled,
+      loading,
+      actions: (_, info) => {
+        const { SendButton, LoadingButton } = info.components;
+        return /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: "small" }, /* @__PURE__ */ import_react.default.createElement("div", { className: styles.w(20) }), mode !== "single_agent_skill_mode" && uploadButton, mode === "meta_agent_mode" && /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: styles.flexCenterGap2,
+            style: { visibility: "hidden" }
+          },
+          /* @__PURE__ */ import_react.default.createElement("i", { className: styles.iconHuihuarenqun })
+        ), /* @__PURE__ */ import_react.default.createElement("div", { className: styles.divider }), loading ? /* @__PURE__ */ import_react.default.createElement(LoadingButton, { onClick: () => onStop == null ? void 0 : onStop(), className: styles.stopButton }) : /* @__PURE__ */ import_react.default.createElement(
+          SendButton,
+          {
+            className: styles.sendButton,
+            type: "primary",
+            icon: /* @__PURE__ */ import_react.default.createElement(import_icons.ArrowUpOutlined, { className: styles.text(20) }),
+            disabled
+          }
+        ));
+      },
+      onChange: (v) => {
+        onChange == null ? void 0 : onChange(v);
+      },
+      onSubmit: handleSend,
+      onCancel: () => {
+        onStop == null ? void 0 : onStop();
+      }
+    }
+  ))), footerTips && /* @__PURE__ */ import_react.default.createElement("div", { className: styles.footerTips }, footerTips));
+};
+var XAiSender_default = XAiSender;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/XAiSender/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/XAiSender/index.tsx"],
+  "sourcesContent": ["// 文件: components/XAiSender/index.tsx\nimport React, {\n  useRef,\n  useState,\n} from 'react';\nimport {\n  Sender,\n} from '@ant-design/x';\nimport {\n  Button,\n  Popover,\n  Space,\n  Tooltip,\n  Spin,\n} from 'antd';\nimport {\n  ArrowUpOutlined,\n  ClearOutlined,\n} from '@ant-design/icons';\nimport {\n  XAiSenderProps\n} from '@/types';\nimport { useChatbotContext } from '@/hooks/useProviderContext';\nimport clsx from 'clsx';\nimport { useStyles } from './styles';\n\nconst XAiSender: React.FC<XAiSenderProps> = (props) => {\n  // 使用新的 Hook 来处理 Provider 上下文\n  const { mergedProps } = useChatbotContext(props);\n\n  const {\n    footerTips,\n    clearBtnShow,\n    value,\n    onSend,\n    onChange,\n    onClear,\n    onStop,\n    onSubmit,\n    loading: propLoading = false,\n    ...resetProps\n  } = mergedProps;\n\n  // 如果在 Provider 中，使用 Provider 的状态\n  const loading = mergedProps.loading || propLoading;\n\n  const [disabled, _setDisabled] = useState<boolean>(false); // 是否禁止输入\n  const [mode, _setMode] = useState<string>(''); // todo 模式\n  const [fileUploading, setFileUploading] = useState(false); // 文件上传进度条\n  const [clearPopoverVisible, setClearPopoverVisible] = useState(false); // 气泡卡片显隐藏\n  const styles = useStyles();\n\n  // 触发发送\n  const handleSend = () => {\n    if (value.trim()) {\n      // 直接使用合并后的 onSend，自动处理 Provider 和独立模式\n      onSubmit?.('text', value);\n    }\n  };\n\n  // 文件上传按钮引用\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  // 选择文件\n  const handleFileSelect = () => {};\n\n  //  点击清除按钮\n  const handleClear = () => {\n    setClearPopoverVisible(true);\n  };\n\n  // 取消清除\n  const cancelClear = () => {\n    setClearPopoverVisible(false);\n  };\n\n  // 确认清除\n  const confirmClear = () => {\n    onClear?.();\n    setClearPopoverVisible(false);\n  };\n\n  // 清空按钮提示文案\n  const clearConfirmContent = (\n    <div className={styles.p('2px')}>\n      <p className={clsx(styles.mb(14), styles.mt(0))}>确认清除所有聊天记录并重置会话！</p>\n      <div className={styles.popoverFooter}>\n        <Button size=\"small\" onClick={cancelClear}>\n          取消\n        </Button>\n        <Button size=\"small\" type=\"primary\" danger onClick={confirmClear}>\n          确认\n        </Button>\n      </div>\n    </div>\n  );\n\n  // 自定义上传按钮\n  const uploadButton = (\n    <div className={styles.flexCenterGap2}>\n      <Tooltip\n        placement=\"top\"\n        title={\n          mode === 'single_agent_skill_mode' ? '工作流模式不支持上传文件' : '支持图片、文档等上传'\n        }\n      >\n        {fileUploading\n          ? (\n            <Spin size=\"small\" />\n          )\n          : (\n            <i\n              className={\n                mode === 'single_agent_skill_mode'\n                  ? styles.iconZengjiaDisabled\n                  : styles.iconZengjiaNormal\n              }\n              onClick={() => {\n                if (mode !== 'single_agent_skill_mode' && fileInputRef.current) {\n                  fileInputRef.current?.click();\n                }\n              }}\n            />\n          )}\n        <input\n          type=\"file\"\n          ref={fileInputRef}\n          onChange={handleFileSelect}\n          style={{ display: 'none' }}\n          accept=\"*/*\"\n          disabled={fileUploading || mode === 'single_agent_skill_mode'}\n        />\n      </Tooltip>\n    </div>\n  );\n\n  return (\n    <>\n      <div className={styles.chatFooter}>\n        <div className={clsx(styles.flex, styles.gap(8))}>\n          {/* 清空按钮 */}\n          { clearBtnShow && <Popover\n            content={clearConfirmContent}\n            title=\"确认清空对话\"\n            trigger=\"click\"\n            open={clearPopoverVisible}\n            onOpenChange={setClearPopoverVisible}\n          >\n            <div\n              className={styles.clearBtn}\n              style={{ border: '1px solid #E4E7EC', borderRadius: '50%', height: '35px', width: '35px' }}\n              onClick={handleClear}\n            >\n              <ClearOutlined className={styles.text(16)} />\n            </div>\n          </Popover> }\n          {/* 普通文本输入 */}\n          <Sender\n            {...resetProps}\n            value={value}\n            className={styles.sendWrapper}\n            placeholder=\"继续对话...\"\n            disabled={disabled}\n            loading={loading}\n            actions={(_, info) => {\n              const { SendButton, LoadingButton } = info.components;\n              return (\n                <Space size=\"small\">\n                  <div className={styles.w(20)} />\n\n                  {mode !== 'single_agent_skill_mode' && uploadButton}\n                  {mode === 'meta_agent_mode' && (\n                    <div\n                      className={styles.flexCenterGap2}\n                      style={{ visibility: 'hidden' }}\n                    >\n                      <i className={styles.iconHuihuarenqun} />\n                    </div>\n                  )}\n\n                  <div className={styles.divider} />\n\n                  {loading\n                    ? (\n                      <LoadingButton onClick={() => onStop?.()} className={styles.stopButton} />\n                    )\n                    : (\n                      <SendButton\n                        className={styles.sendButton}\n                        type=\"primary\"\n                        icon={<ArrowUpOutlined className={styles.text(20)} />}\n                        disabled={disabled}\n                      />\n                    )}\n                </Space>\n              );\n            }}\n            onChange={(v) => {\n              onChange?.(v);\n            }}\n            onSubmit={handleSend}\n            onCancel={() => {\n              onStop?.();\n            }}\n          />\n        </div>\n      </div>\n      { footerTips && <div className={styles.footerTips}>{footerTips}</div>}\n    </>\n  );\n};\n\nexport default XAiSender;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAGO;AACP,eAEO;AACP,kBAMO;AACP,mBAGO;AAIP,gCAAkC;AAClC,kBAAiB;AACjB,oBAA0B;AAE1B,IAAM,YAAsC,CAAC,UAAU;AAErD,QAAM,EAAE,YAAY,QAAI,6CAAkB,KAAK;AAE/C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,cAAc;AAAA,IACvB,GAAG;AAAA,EACL,IAAI;AAGJ,QAAM,UAAU,YAAY,WAAW;AAEvC,QAAM,CAAC,UAAU,YAAY,QAAI,uBAAkB,KAAK;AACxD,QAAM,CAAC,MAAM,QAAQ,QAAI,uBAAiB,EAAE;AAC5C,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,qBAAqB,sBAAsB,QAAI,uBAAS,KAAK;AACpE,QAAM,aAAS,yBAAU;AAGzB,QAAM,aAAa,MAAM;AACvB,QAAI,MAAM,KAAK,GAAG;AAEhB,2CAAW,QAAQ;AAAA,IACrB;AAAA,EACF;AAGA,QAAM,mBAAe,qBAAyB,IAAI;AAGlD,QAAM,mBAAmB,MAAM;AAAA,EAAC;AAGhC,QAAM,cAAc,MAAM;AACxB,2BAAuB,IAAI;AAAA,EAC7B;AAGA,QAAM,cAAc,MAAM;AACxB,2BAAuB,KAAK;AAAA,EAC9B;AAGA,QAAM,eAAe,MAAM;AACzB;AACA,2BAAuB,KAAK;AAAA,EAC9B;AAGA,QAAM,sBACJ,6BAAAA,QAAA,cAAC,SAAI,WAAW,OAAO,EAAE,KAAK,KAC5B,6BAAAA,QAAA,cAAC,OAAE,eAAW,YAAAC,SAAK,OAAO,GAAG,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC,KAAG,kBAAgB,GACjE,6BAAAD,QAAA,cAAC,SAAI,WAAW,OAAO,iBACrB,6BAAAA,QAAA,cAAC,sBAAO,MAAK,SAAQ,SAAS,eAAa,IAE3C,GACA,6BAAAA,QAAA,cAAC,sBAAO,MAAK,SAAQ,MAAK,WAAU,QAAM,MAAC,SAAS,gBAAc,IAElE,CACF,CACF;AAIF,QAAM,eACJ,6BAAAA,QAAA,cAAC,SAAI,WAAW,OAAO,kBACrB,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OACE,SAAS,4BAA4B,iBAAiB;AAAA;AAAA,IAGvD,gBAEG,6BAAAA,QAAA,cAAC,oBAAK,MAAK,SAAQ,IAGnB,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WACE,SAAS,4BACL,OAAO,sBACP,OAAO;AAAA,QAEb,SAAS,MAAM;AArH7B;AAsHgB,cAAI,SAAS,6BAA6B,aAAa,SAAS;AAC9D,+BAAa,YAAb,mBAAsB;AAAA,UACxB;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IAEJ,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,EAAE,SAAS,OAAO;AAAA,QACzB,QAAO;AAAA,QACP,UAAU,iBAAiB,SAAS;AAAA;AAAA,IACtC;AAAA,EACF,CACF;AAGF,SACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,SAAI,WAAW,OAAO,cACrB,6BAAAA,QAAA,cAAC,SAAI,eAAW,YAAAC,SAAK,OAAO,MAAM,OAAO,IAAI,CAAC,CAAC,KAE3C,gBAAgB,6BAAAD,QAAA;AAAA,IAAC;AAAA;AAAA,MACjB,SAAS;AAAA,MACT,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAM;AAAA,MACN,cAAc;AAAA;AAAA,IAEd,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,OAAO,EAAE,QAAQ,qBAAqB,cAAc,OAAO,QAAQ,QAAQ,OAAO,OAAO;AAAA,QACzF,SAAS;AAAA;AAAA,MAET,6BAAAA,QAAA,cAAC,8BAAc,WAAW,OAAO,KAAK,EAAE,GAAG;AAAA,IAC7C;AAAA,EACF,GAEA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,aAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,SAAS,CAAC,GAAG,SAAS;AACpB,cAAM,EAAE,YAAY,cAAc,IAAI,KAAK;AAC3C,eACE,6BAAAA,QAAA,cAAC,qBAAM,MAAK,WACV,6BAAAA,QAAA,cAAC,SAAI,WAAW,OAAO,EAAE,EAAE,GAAG,GAE7B,SAAS,6BAA6B,cACtC,SAAS,qBACR,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,OAAO,EAAE,YAAY,SAAS;AAAA;AAAA,UAE9B,6BAAAA,QAAA,cAAC,OAAE,WAAW,OAAO,kBAAkB;AAAA,QACzC,GAGF,6BAAAA,QAAA,cAAC,SAAI,WAAW,OAAO,SAAS,GAE/B,UAEG,6BAAAA,QAAA,cAAC,iBAAc,SAAS,MAAM,oCAAY,WAAW,OAAO,YAAY,IAGxE,6BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,MAAK;AAAA,YACL,MAAM,6BAAAA,QAAA,cAAC,gCAAgB,WAAW,OAAO,KAAK,EAAE,GAAG;AAAA,YACnD;AAAA;AAAA,QACF,CAEN;AAAA,MAEJ;AAAA,MACA,UAAU,CAAC,MAAM;AACf,6CAAW;AAAA,MACb;AAAA,MACA,UAAU;AAAA,MACV,UAAU,MAAM;AACd;AAAA,MACF;AAAA;AAAA,EACF,CACF,CACF,GACE,cAAc,6BAAAA,QAAA,cAAC,SAAI,WAAW,OAAO,cAAa,UAAW,CACjE;AAEJ;AAEA,IAAO,oBAAQ;",
+  "names": ["React", "clsx"]
+}

package/dist/cjs/components/XAiSender/styles.d.ts

@@ -0,0 +1,47 @@
+export declare const useStyles: () => {
+    chatFooter: string;
+    footerTips: string;
+    popoverFooter: string;
+    sendButton: string;
+    uploadBtn: string;
+    clearBtn: string;
+    stopButton: string;
+    divider: string;
+    sendWrapper: string;
+    iconHuihuarenqun: string;
+    iconZengjiaDisabled: string;
+    iconZengjiaNormal: string;
+} & {
+    w: (width: string | number) => string;
+    h: (height: string | number) => string;
+    p: (padding: string) => string;
+    pb: (padding: string | number) => string;
+    pt: (padding: string | number) => string;
+    pl: (padding: string | number) => string;
+    pr: (padding: string | number) => string;
+    m: (margin: string) => string;
+    mb: (margin: string | number) => string;
+    mt: (margin: string | number) => string;
+    ml: (margin: string | number) => string;
+    mr: (margin: string | number) => string;
+    text: (size: string | number) => string;
+    weight: (size: number) => string;
+    textColor: (c: string) => string;
+    bg: (c: string) => string;
+    rs: (radius: string | number) => string;
+    gap: (g: string | number) => string;
+    flex: string;
+    flexCenter: string;
+    flexBetween: string;
+    flexColumn: string;
+    flex1: string;
+    cursor: (type: string) => string;
+    border: (color: string, width?: string) => string;
+    boxShadow: (shadow: string) => string;
+    transition: (property?: string, duration?: string) => string;
+    overflow: (type: string) => string;
+    position: (type: string) => string;
+    zIndex: (index: number) => string;
+    flexCenterGap2: string;
+    flexCenterGap4: string;
+};