@ai-group/chat-sdk 3.3.3 → 3.3.5

package/dist/cjs/components/XAdkProvider/compound/DefaultLayout.d.ts

@@ -16,6 +16,8 @@ export interface DefaultLayoutProps {
     footer?: React.ReactNode;
     /** 是否允许上传文件 */
     allowUpload?: boolean;
+    /** 是否启用拖拽上传，拖拽区域为整个聊天区域（不含侧边栏），需 allowUpload 为 true */
+    draggable?: boolean;
     /** 是否显示清空按钮 */
     clearBtnShow?: boolean;
     /** 是否显示函数调用详情 */

package/dist/cjs/components/XAdkProvider/compound/DefaultLayout.js

@@ -32,6 +32,8 @@ __export(DefaultLayout_exports, {
   default: () => DefaultLayout_default
 });
 module.exports = __toCommonJS(DefaultLayout_exports);
+var import_react = require("react");
+var import_x = require("@ant-design/x");
 var import_ChatStateContext = require("../context/ChatStateContext");
 var import_Sidebar = __toESM(require("./Sidebar"));
 var import_Messages = __toESM(require("./Messages"));
@@ -43,12 +45,25 @@ var DefaultLayout = ({
   header,
   footer,
   allowUpload = false,
+  draggable = true,
   clearBtnShow = true,
   showFnCallDetail,
   renderFunctionCall,
   strategies
 }) => {
   const { appInfo, messages, prologue, suggestions } = (0, import_ChatStateContext.useChatState)();
+  const chatAreaRef = (0, import_react.useRef)(null);
+  const senderRef = (0, import_react.useRef)(null);
+  const [dropFileList, setDropFileList] = (0, import_react.useState)([]);
+  const enableDragUpload = allowUpload && draggable;
+  const handleDropFiles = (0, import_react.useCallback)((info) => {
+    var _a;
+    const rawFiles = info.fileList.map((f) => f.originFileObj).filter(Boolean);
+    if (rawFiles.length > 0) {
+      (_a = senderRef.current) == null ? void 0 : _a.addFiles(rawFiles);
+    }
+    setDropFileList([]);
+  }, []);
   const isEmpty = messages.length === 0 && !prologue && (!suggestions || suggestions.length === 0);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
@@ -62,137 +77,160 @@ var DefaultLayout = ({
       },
       children: [
         showSessionList && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Sidebar.default, { isNarrow: false }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
+            ref: chatAreaRef,
             style: {
               flex: 1,
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
               flexDirection: "column",
-              overflow: "hidden"
+              overflow: "hidden",
+              position: "relative"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "div",
-              {
-                style: {
-                  width: "100%",
-                  maxWidth: "800px",
-                  height: "100%",
-                  display: "flex",
-                  flexDirection: "column"
-                },
-                children: [
-                  header || appInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "div",
-                    {
-                      style: {
-                        padding: "16px 24px",
-                        display: "flex",
-                        justifyContent: "center",
-                        background: "white"
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "12px"
-                          },
-                          children: appInfo.appName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            "div",
-                            {
-                              style: {
-                                fontSize: "16px",
-                                fontWeight: 500,
-                                color: "#000"
-                              },
-                              children: appInfo.appName
-                            }
-                          ) })
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    "div",
-                    {
-                      style: {
-                        flex: 1,
-                        overflow: "hidden",
-                        display: "flex",
-                        flexDirection: "column"
-                      },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "div",
-                          {
-                            style: {
-                              flex: isEmpty ? 1 : 0,
-                              transition: "flex 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
-                            }
-                          }
-                        ),
-                        isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  style: {
+                    width: "100%",
+                    maxWidth: "800px",
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "column"
+                  },
+                  children: [
+                    header || appInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          padding: "16px 24px",
+                          display: "flex",
+                          justifyContent: "center",
+                          background: "white"
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           "div",
                           {
                             style: {
                               display: "flex",
-                              flexDirection: "column",
                               alignItems: "center",
-                              padding: "0 24px",
-                              marginBottom: "24px"
-                            },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Welcome.default, {})
-                          }
-                        ),
-                        !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "div",
-                          {
-                            style: {
-                              flex: 1,
-                              overflow: "hidden"
+                              gap: "12px"
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                              import_Messages.default,
+                            children: appInfo.appName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "div",
                               {
-                                showFnCallDetail,
-                                renderFunctionCall,
-                                strategies
+                                style: {
+                                  fontSize: "16px",
+                                  fontWeight: 500,
+                                  color: "#000"
+                                },
+                                children: appInfo.appName
                               }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "div",
-                          {
-                            style: {
-                              width: "100%",
-                              maxWidth: isEmpty ? "600px" : "100%",
-                              alignSelf: "center",
-                              padding: isEmpty ? "0 24px" : "0",
-                              transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
-                            },
-                            children: footer || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Sender.default, { allowUpload, clearBtnShow })
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "div",
-                          {
-                            style: {
-                              flex: isEmpty ? 1.5 : 0,
-                              transition: "flex 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
-                            }
+                            ) })
                           }
                         )
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          overflow: "hidden",
+                          display: "flex",
+                          flexDirection: "column"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                flex: isEmpty ? 1 : 0,
+                                transition: "flex 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
+                              }
+                            }
+                          ),
+                          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                padding: "0 24px",
+                                marginBottom: "24px"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Welcome.default, {})
+                            }
+                          ),
+                          !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                flex: 1,
+                                overflow: "hidden"
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                import_Messages.default,
+                                {
+                                  showFnCallDetail,
+                                  renderFunctionCall,
+                                  strategies
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                width: "100%",
+                                maxWidth: isEmpty ? "600px" : "100%",
+                                alignSelf: "center",
+                                padding: isEmpty ? "0 24px" : "0",
+                                transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
+                              },
+                              children: footer || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                import_Sender.default,
+                                {
+                                  ref: senderRef,
+                                  allowUpload,
+                                  draggable: !enableDragUpload,
+                                  clearBtnShow
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                flex: isEmpty ? 1.5 : 0,
+                                transition: "flex 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              enableDragUpload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_x.Attachments,
+                {
+                  style: { display: "none" },
+                  items: dropFileList,
+                  getDropContainer: () => chatAreaRef.current,
+                  multiple: true,
+                  beforeUpload: () => false,
+                  onChange: handleDropFiles
+                }
+              )
+            ]
           }
         )
       ]

package/dist/cjs/components/XAdkProvider/compound/DefaultLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/XAdkProvider/compound/DefaultLayout.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { useChatState } from \"../context/ChatStateContext\";\nimport Sidebar from \"./Sidebar\";\nimport Messages from \"./Messages\";\nimport Welcome from \"./Welcome\";\nimport Sender from \"./Sender\";\nimport type { ChatStrategies } from \"@/types\";\n\n/**\n * XAdkProvider 默认布局\n *\n * 提供类似 ChatGPT/DeepSeek 的默认布局:\n * - 左侧: 会话列表侧边栏 (可选,支持展开/收起)\n * - 右侧: 聊天区域 (标题 + 消息 + 输入框,居中显示,最大宽度800px)\n */\nexport interface DefaultLayoutProps {\n  /** 是否显示会话列表 */\n  showSessionList?: boolean;\n  /** 自定义头部 */\n  header?: React.ReactNode;\n  /** 自定义底部 (替代默认 Sender) */\n  footer?: React.ReactNode;\n  /** 是否允许上传文件 */\n  allowUpload?: boolean;\n  /** 是否显示清空按钮 */\n  clearBtnShow?: boolean;\n  /** 是否显示函数调用详情 */\n  showFnCallDetail?: boolean;\n  /** 自定义消息 Footer */\n  messagesFooter?: (msg: any) => React.ReactNode;\n  /** 自定义工具调用渲染函数，返回 null 则降级使用默认渲染 */\n  renderFunctionCall?: (msg: import(\"@/types\").IMessage) => React.ReactNode | null;\n  /** 局部策略覆盖，优先级高于 Provider preset/strategies */\n  strategies?: ChatStrategies;\n}\n\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({\n  showSessionList = false,\n  header,\n  footer,\n  allowUpload = false,\n  clearBtnShow = true,\n  showFnCallDetail,\n  renderFunctionCall,\n  strategies,\n}) => {\n  const { appInfo, messages, prologue, suggestions } = useChatState();\n\n  // 判断是否为空状态(展示Welcome)\n  const isEmpty =\n    messages.length === 0 &&\n    !prologue &&\n    (!suggestions || suggestions.length === 0);\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        height: \"100%\",\n        width: \"100%\",\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n    >\n      {/* 左侧会话列表 - XAiConversations 组件会处理展开/收起 */}\n      {showSessionList && <Sidebar isNarrow={false} />}\n\n      {/* 右侧聊天区域 - 使用 flex: 1 自动占据剩余空间 */}\n      <div\n        style={{\n          flex: 1,\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          flexDirection: \"column\",\n          overflow: \"hidden\",\n        }}\n      >\n        {/* 居中容器 - 最大宽度 800px */}\n        <div\n          style={{\n            width: \"100%\",\n            maxWidth: \"800px\",\n            height: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n          }}\n        >\n          {/* 头部 */}\n          {header ||\n            (appInfo && (\n              <div\n                style={{\n                  padding: \"16px 24px\",\n                  display: \"flex\",\n                  justifyContent: \"center\",\n                  background: \"white\",\n                }}\n              >\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: \"12px\",\n                  }}\n                >\n                  {/* {appInfo.icon && (\n                    <img\n                      src={appInfo.icon}\n                      alt=\"应用图标\"\n                      style={{\n                        width: 32,\n                        height: 32,\n                        borderRadius: \"6px\",\n                      }}\n                    />\n                  )} */}\n                  {appInfo.appName && (\n                    <div>\n                      <div\n                        style={{\n                          fontSize: \"16px\",\n                          fontWeight: 500,\n                          color: \"#000\",\n                        }}\n                      >\n                        {appInfo.appName}\n                      </div>\n                      {/* {appInfo.description && (\n                        <div\n                          style={{\n                            fontSize: \"12px\",\n                            color: \"#999\",\n                            marginTop: \"2px\",\n                          }}\n                        >\n                          {appInfo.description}\n                        </div>\n                      )} */}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ))}\n\n          {/* 消息区域或Welcome区域 */}\n          <div\n            style={{\n              flex: 1,\n              overflow: \"hidden\",\n              display: \"flex\",\n              flexDirection: \"column\",\n            }}\n          >\n            {/* 上方弹性占位 - Welcome状态时占据空间 */}\n            <div\n              style={{\n                flex: isEmpty ? 1 : 0,\n                transition: \"flex 0.4s cubic-bezier(0.4, 0, 0.2, 1)\",\n              }}\n            />\n\n            {/* Welcome 组件 - 只在空状态显示 */}\n            {isEmpty && (\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  alignItems: \"center\",\n                  padding: \"0 24px\",\n                  marginBottom: \"24px\",\n                }}\n              >\n                <Welcome />\n              </div>\n            )}\n\n            {/* Messages 组件 - 只在非空状态显示 */}\n            {!isEmpty && (\n              <div\n                style={{\n                  flex: 1,\n                  overflow: \"hidden\",\n                }}\n              >\n                <Messages\n                  showFnCallDetail={showFnCallDetail}\n                  renderFunctionCall={renderFunctionCall}\n                  strategies={strategies}\n                />\n              </div>\n            )}\n\n            {/* 输入区域 - 始终存在,通过样式控制位置 */}\n            <div\n              style={{\n                width: \"100%\",\n                maxWidth: isEmpty ? \"600px\" : \"100%\",\n                alignSelf: \"center\",\n                padding: isEmpty ? \"0 24px\" : \"0\",\n                transition: \"all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\",\n              }}\n            >\n              {footer || (\n                <Sender allowUpload={allowUpload} clearBtnShow={clearBtnShow} />\n              )}\n            </div>\n\n            {/* 下方弹性占位 - Welcome状态时占据更多空间,让内容偏上 */}\n            <div\n              style={{\n                flex: isEmpty ? 1.5 : 0,\n                transition: \"flex 0.4s cubic-bezier(0.4, 0, 0.2, 1)\",\n              }}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nDefaultLayout.displayName = \"XAdkProvider.DefaultLayout\";\n\nexport default DefaultLayout;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useRef, useCallback, useState } from \"react\";\nimport { Attachments } from \"@ant-design/x\";\nimport type { UploadFile } from \"antd\";\nimport { useChatState } from \"../context/ChatStateContext\";\nimport Sidebar from \"./Sidebar\";\nimport Messages from \"./Messages\";\nimport Welcome from \"./Welcome\";\nimport Sender from \"./Sender\";\nimport type { ChatStrategies } from \"@/types\";\nimport type { XAdkSenderHandle } from \"@/types/XAdkSender\";\n\n/**\n * XAdkProvider 默认布局\n *\n * 提供类似 ChatGPT/DeepSeek 的默认布局:\n * - 左侧: 会话列表侧边栏 (可选,支持展开/收起)\n * - 右侧: 聊天区域 (标题 + 消息 + 输入框,居中显示,最大宽度800px)\n */\nexport interface DefaultLayoutProps {\n  /** 是否显示会话列表 */\n  showSessionList?: boolean;\n  /** 自定义头部 */\n  header?: React.ReactNode;\n  /** 自定义底部 (替代默认 Sender) */\n  footer?: React.ReactNode;\n  /** 是否允许上传文件 */\n  allowUpload?: boolean;\n  /** 是否启用拖拽上传，拖拽区域为整个聊天区域（不含侧边栏），需 allowUpload 为 true */\n  draggable?: boolean;\n  /** 是否显示清空按钮 */\n  clearBtnShow?: boolean;\n  /** 是否显示函数调用详情 */\n  showFnCallDetail?: boolean;\n  /** 自定义消息 Footer */\n  messagesFooter?: (msg: any) => React.ReactNode;\n  /** 自定义工具调用渲染函数，返回 null 则降级使用默认渲染 */\n  renderFunctionCall?: (msg: import(\"@/types\").IMessage) => React.ReactNode | null;\n  /** 局部策略覆盖，优先级高于 Provider preset/strategies */\n  strategies?: ChatStrategies;\n}\n\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({\n  showSessionList = false,\n  header,\n  footer,\n  allowUpload = false,\n  draggable = true,\n  clearBtnShow = true,\n  showFnCallDetail,\n  renderFunctionCall,\n  strategies,\n}) => {\n  const { appInfo, messages, prologue, suggestions } = useChatState();\n  const chatAreaRef = useRef<HTMLDivElement>(null);\n  const senderRef = useRef<XAdkSenderHandle>(null);\n  const [dropFileList, setDropFileList] = useState<UploadFile[]>([]);\n\n  // 拖拽上传是否启用\n  const enableDragUpload = allowUpload && draggable;\n\n  // Attachments 拖拽文件后的回调\n  const handleDropFiles = useCallback((info: { fileList: UploadFile[] }) => {\n    const rawFiles = info.fileList\n      .map((f) => f.originFileObj)\n      .filter(Boolean) as File[];\n    if (rawFiles.length > 0) {\n      senderRef.current?.addFiles(rawFiles);\n    }\n    // 清空 Attachments 文件列表，避免累积\n    setDropFileList([]);\n  }, []);\n\n  // 判断是否为空状态(展示Welcome)\n  const isEmpty =\n    messages.length === 0 &&\n    !prologue &&\n    (!suggestions || suggestions.length === 0);\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        height: \"100%\",\n        width: \"100%\",\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n    >\n      {/* 左侧会话列表 - XAiConversations 组件会处理展开/收起 */}\n      {showSessionList && <Sidebar isNarrow={false} />}\n\n      {/* 右侧聊天区域 - 使用 flex: 1 自动占据剩余空间 */}\n      <div\n        ref={chatAreaRef}\n        style={{\n          flex: 1,\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          flexDirection: \"column\",\n          overflow: \"hidden\",\n          position: \"relative\",\n        }}\n      >\n        {/* 居中容器 - 最大宽度 800px */}\n        <div\n          style={{\n            width: \"100%\",\n            maxWidth: \"800px\",\n            height: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n          }}\n        >\n          {/* 头部 */}\n          {header ||\n            (appInfo && (\n              <div\n                style={{\n                  padding: \"16px 24px\",\n                  display: \"flex\",\n                  justifyContent: \"center\",\n                  background: \"white\",\n                }}\n              >\n                <div\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: \"12px\",\n                  }}\n                >\n                  {appInfo.appName && (\n                    <div>\n                      <div\n                        style={{\n                          fontSize: \"16px\",\n                          fontWeight: 500,\n                          color: \"#000\",\n                        }}\n                      >\n                        {appInfo.appName}\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            ))}\n\n          {/* 消息区域或Welcome区域 */}\n          <div\n            style={{\n              flex: 1,\n              overflow: \"hidden\",\n              display: \"flex\",\n              flexDirection: \"column\",\n            }}\n          >\n            {/* 上方弹性占位 - Welcome状态时占据空间 */}\n            <div\n              style={{\n                flex: isEmpty ? 1 : 0,\n                transition: \"flex 0.4s cubic-bezier(0.4, 0, 0.2, 1)\",\n              }}\n            />\n\n            {/* Welcome 组件 - 只在空状态显示 */}\n            {isEmpty && (\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  alignItems: \"center\",\n                  padding: \"0 24px\",\n                  marginBottom: \"24px\",\n                }}\n              >\n                <Welcome />\n              </div>\n            )}\n\n            {/* Messages 组件 - 只在非空状态显示 */}\n            {!isEmpty && (\n              <div\n                style={{\n                  flex: 1,\n                  overflow: \"hidden\",\n                }}\n              >\n                <Messages\n                  showFnCallDetail={showFnCallDetail}\n                  renderFunctionCall={renderFunctionCall}\n                  strategies={strategies}\n                />\n              </div>\n            )}\n\n            {/* 输入区域 - 始终存在,通过样式控制位置 */}\n            <div\n              style={{\n                width: \"100%\",\n                maxWidth: isEmpty ? \"600px\" : \"100%\",\n                alignSelf: \"center\",\n                padding: isEmpty ? \"0 24px\" : \"0\",\n                transition: \"all 0.4s cubic-bezier(0.4, 0, 0.2, 1)\",\n              }}\n            >\n              {footer || (\n                <Sender\n                  ref={senderRef}\n                  allowUpload={allowUpload}\n                  draggable={!enableDragUpload}\n                  clearBtnShow={clearBtnShow}\n                />\n              )}\n            </div>\n\n            {/* 下方弹性占位 - Welcome状态时占据更多空间,让内容偏上 */}\n            <div\n              style={{\n                flex: isEmpty ? 1.5 : 0,\n                transition: \"flex 0.4s cubic-bezier(0.4, 0, 0.2, 1)\",\n              }}\n            />\n          </div>\n        </div>\n\n        {/* Attachments 拖拽遮罩 - 仅用于拖拽上传功能 */}\n        {enableDragUpload && (\n          <Attachments\n            style={{ display: \"none\" }}\n            items={dropFileList}\n            getDropContainer={() => chatAreaRef.current}\n            multiple\n            beforeUpload={() => false}\n            onChange={handleDropFiles}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nDefaultLayout.displayName = \"XAdkProvider.DefaultLayout\";\n\nexport default DefaultLayout;\n"],
+  "mappings": "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",
   "names": ["Sidebar", "Welcome", "Messages", "Sender"]
 }

package/dist/cjs/components/XAdkProvider/compound/Sender.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { XAdkSenderProps } from "../../../types/XAdkSender";
+import type { XAdkSenderProps, XAdkSenderHandle } from "../../../types";
 /**
  * XAdkProvider.Sender - 输入框组件
  *
@@ -23,5 +23,5 @@ export interface XAdkSenderCompoundProps extends Partial<Omit<XAdkSenderProps, '
     /** 额外的类名 */
     className?: string;
 }
-declare const Sender: React.FC<XAdkSenderCompoundProps>;
+declare const Sender: React.ForwardRefExoticComponent<XAdkSenderCompoundProps & React.RefAttributes<XAdkSenderHandle>>;
 export default Sender;

package/dist/cjs/components/XAdkProvider/compound/Sender.js

@@ -32,16 +32,18 @@ __export(Sender_exports, {
   default: () => Sender_default
 });
 module.exports = __toCommonJS(Sender_exports);
+var import_react = require("react");
 var import_XAdkSender = __toESM(require("../../XAdkSender"));
 var import_ChatStateContext = require("../context/ChatStateContext");
 var import_ChatActionContext = require("../context/ChatActionContext");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Sender = (props) => {
+var Sender = (0, import_react.forwardRef)((props, ref) => {
   const { loading, uploadRequest } = (0, import_ChatStateContext.useChatState)();
   const { chat, stopChat, clearChat } = (0, import_ChatActionContext.useChatActions)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_XAdkSender.default,
     {
+      ref,
       loading,
       onSubmit: chat,
       onStop: stopChat,
@@ -50,7 +52,7 @@ var Sender = (props) => {
       ...props
     }
   );
-};
+});
 Sender.displayName = "XAdkProvider.Sender";
 var Sender_default = Sender;
 //# sourceMappingURL=Sender.js.map

package/dist/cjs/components/XAdkProvider/compound/Sender.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/XAdkProvider/compound/Sender.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport XAdkSender from '@/components/XAdkSender';\nimport { useChatState } from '../context/ChatStateContext';\nimport { useChatActions } from '../context/ChatActionContext';\nimport type { XAdkSenderProps } from '@/types/XAdkSender';\n\n/**\n * XAdkProvider.Sender - 输入框组件\n *\n * 从 Context 获取聊天动作并提供输入界面\n * 基于 XAdkSender 组件实现\n *\n * @example\n * ```tsx\n * <XAdkProvider url=\"...\" token=\"...\">\n *   <XAdkProvider.Sender\n *     allowUpload={true}\n *     clearBtnShow={true}\n *     uploadRequest={myUploadHandler}\n *   />\n * </XAdkProvider>\n * ```\n */\nexport interface XAdkSenderCompoundProps extends Partial<Omit<XAdkSenderProps, 'loading' | 'onSubmit' | 'onStop' | 'onClear'>> {\n  /** 额外的样式 */\n  style?: React.CSSProperties;\n  /** 额外的类名 */\n  className?: string;\n}\n\nconst Sender: React.FC<XAdkSenderCompoundProps> = (props) => {\n  const { loading, uploadRequest } = useChatState();\n  const { chat, stopChat, clearChat } = useChatActions();\n\n  return (\n    <XAdkSender\n      loading={loading}\n      onSubmit={chat}\n      onStop={stopChat}\n      onClear={clearChat}\n      uploadRequest={uploadRequest}\n      {...props}\n    />\n  );\n};\n\nSender.displayName = 'XAdkProvider.Sender';\n\nexport default Sender;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,wBAAuB;AACvB,8BAA6B;AAC7B,+BAA+B;AAgC3B;AALJ,IAAM,SAA4C,CAAC,UAAU;AAC3D,QAAM,EAAE,SAAS,cAAc,QAAI,sCAAa;AAChD,QAAM,EAAE,MAAM,UAAU,UAAU,QAAI,yCAAe;AAErD,SACE;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ;",
+  "sourcesContent": ["import React, { forwardRef } from 'react';\nimport XAdkSender from '@/components/XAdkSender';\nimport { useChatState } from '../context/ChatStateContext';\nimport { useChatActions } from '../context/ChatActionContext';\nimport type { XAdkSenderProps, XAdkSenderHandle } from '@/types';\n\n/**\n * XAdkProvider.Sender - 输入框组件\n *\n * 从 Context 获取聊天动作并提供输入界面\n * 基于 XAdkSender 组件实现\n *\n * @example\n * ```tsx\n * <XAdkProvider url=\"...\" token=\"...\">\n *   <XAdkProvider.Sender\n *     allowUpload={true}\n *     clearBtnShow={true}\n *     uploadRequest={myUploadHandler}\n *   />\n * </XAdkProvider>\n * ```\n */\nexport interface XAdkSenderCompoundProps extends Partial<Omit<XAdkSenderProps, 'loading' | 'onSubmit' | 'onStop' | 'onClear'>> {\n  /** 额外的样式 */\n  style?: React.CSSProperties;\n  /** 额外的类名 */\n  className?: string;\n}\n\nconst Sender = forwardRef<XAdkSenderHandle, XAdkSenderCompoundProps>((props, ref) => {\n  const { loading, uploadRequest } = useChatState();\n  const { chat, stopChat, clearChat } = useChatActions();\n\n  return (\n    <XAdkSender\n      ref={ref}\n      loading={loading}\n      onSubmit={chat}\n      onStop={stopChat}\n      onClear={clearChat}\n      uploadRequest={uploadRequest}\n      {...props}\n    />\n  );\n});\n\nSender.displayName = 'XAdkProvider.Sender';\n\nexport default Sender;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAClC,wBAAuB;AACvB,8BAA6B;AAC7B,+BAA+B;AAgC3B;AALJ,IAAM,aAAS,yBAAsD,CAAC,OAAO,QAAQ;AACnF,QAAM,EAAE,SAAS,cAAc,QAAI,sCAAa;AAChD,QAAM,EAAE,MAAM,UAAU,UAAU,QAAI,yCAAe;AAErD,SACE;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,OAAO,cAAc;AAErB,IAAO,iBAAQ;",
   "names": ["XAdkSender"]
 }

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

@@ -1,4 +1,4 @@
 import React from "react";
-import { XAdkSenderProps } from "../../types";
-declare const XAdkSender: React.FC<XAdkSenderProps>;
+import { XAdkSenderHandle } from "../../types";
+declare const XAdkSender: React.ForwardRefExoticComponent<import("../../types").SenderUIProps & import("../../types").UploaderCoreProps & React.RefAttributes<XAdkSenderHandle>>;
 export default XAdkSender;

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

@@ -39,9 +39,10 @@ var import_styles = require("./styles");
 var import_FileGallery = __toESM(require("../FileGallery"));
 var import_file = require("../../utils/file");
 var import_jsx_runtime = require("react/jsx-runtime");
-var XAdkSender = ({
+var XAdkSender = (0, import_react.forwardRef)(({
   clearBtnShow = true,
   allowUpload = false,
+  draggable = true,
   loading = false,
   disabled = false,
   uploadRequest = () => {
@@ -75,7 +76,7 @@ var XAdkSender = ({
   header,
   prefix,
   footer
-}) => {
+}, ref) => {
   const styles = (0, import_styles.useStyles)();
   const [value, setValue] = (0, import_react.useState)("");
   const [files, setFiles] = (0, import_react.useState)([]);
@@ -192,6 +193,11 @@ var XAdkSender = ({
     },
     [files, maxFiles, maxFileSize, allowedFileTypes]
   );
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    addFiles: (rawFiles) => {
+      handleFileSelect(rawFiles);
+    }
+  }), [handleFileSelect]);
   const uploadFiles = async (fileList) => {
     for (const localFile of fileList) {
       setFiles(
@@ -464,9 +470,9 @@ var XAdkSender = ({
     {
       ref: containerRef,
       className: containerClass,
-      onDragOver: allowUpload ? handleDragOver : void 0,
-      onDragLeave: allowUpload ? handleDragLeave : void 0,
-      onDrop: allowUpload ? handleDrop : void 0,
+      onDragOver: allowUpload && draggable ? handleDragOver : void 0,
+      onDragLeave: allowUpload && draggable ? handleDragLeave : void 0,
+      onDrop: allowUpload && draggable ? handleDrop : void 0,
       children: [
         renderSlot(header, false),
         allowUpload && files.length > 0 && renderFileList(),
@@ -520,6 +526,7 @@ var XAdkSender = ({
       ]
     }
   );
-};
+});
+XAdkSender.displayName = "XAdkSender";
 var XAdkSender_default = XAdkSender;
 //# sourceMappingURL=index.js.map