@agentscope-ai/chat 1.1.45-beta.1766388936317 → 1.1.45-beta.1766392979633

package/components/ChatAnywhere/Input/UploadPopover.tsx

@@ -0,0 +1,42 @@
+import { IconButton, Popover } from "@agentscope-ai/design";
+import { PlusOutlined } from "@ant-design/icons";
+import { useGetState } from "ahooks";
+import { Flex } from "antd";
+import React from "react";
+import { useEffect, useState } from "react";
+
+
+
+export default function UploadPopover({
+  nodes
+}: {
+  nodes: React.ReactElement[];
+}) {
+  const [visible, setVisible, getVisible] = useGetState(false);
+
+  useEffect(() => {
+    const close = () => {
+      if (getVisible()) {
+        setVisible(false);
+      }
+    };
+
+    document.addEventListener('click', close, true);
+    return () => {
+      document.removeEventListener('click', close, true);
+    }
+  }, []);
+
+  return <Popover
+    placement='bottomLeft'
+    open={visible}
+    onOpenChange={setVisible}
+    content={<Flex vertical>
+      {nodes}
+    </Flex>} trigger="click" styles={{ body: { padding: 4 } }}>
+    <IconButton
+      icon={<PlusOutlined />}
+      bordered={false}
+    />
+  </Popover>
+}

package/components/ChatAnywhere/Input/index.tsx

@@ -4,11 +4,11 @@ import { useProviderContext, ChatInput, uuid, Sender, Attachments } from '@agent
 import cls from 'classnames';
 import { useChatAnywhere } from '../hooks/ChatAnywhereProvider';
 import { useInput } from '../hooks/useInput';
-import { Button, GetProp, Space, Upload } from 'antd';
+import { GetProp, Space, Upload } from 'antd';
 import Style from './style';
-import { IconButton } from '@agentscope-ai/design';
+import { IconButton, Button } from '@agentscope-ai/design';
 import { AIGC } from '@agentscope-ai/chat';
-import { PlusOutlined } from '@ant-design/icons';
+import UploadPopover from './UploadPopover';
 
 type AttachedFiles = GetProp<typeof Attachments, 'items'>;
 
@@ -91,6 +91,23 @@ export default forwardRef(function (_, ref) {
       return [];
     }
     const nodes = onUpload.map((item, index) => {
+
+      let trigger;
+
+      if (item.trigger) {
+        trigger = item.trigger;
+      } else if (item.title || item.description) {
+        trigger = <Button type='text' icon={item.icon} >
+          {item.title && <span>{item.title}</span>}
+          {item.description && <span style={{ fontSize: '0.8em', opacity: 0.8 }}>{item.description}</span>}
+        </Button>
+      } else {
+        trigger = <IconButton
+          icon={item.icon}
+          bordered={false}
+        />
+      }
+
       return <Upload
         {...item}
         fileList={attachedFiles[index]}
@@ -107,23 +124,14 @@ export default forwardRef(function (_, ref) {
         showUploadList={false}
       >
         {
-          item.trigger || <IconButton
-            icon={item.icon}
-            bordered={false}
-          />
+          trigger
         }
       </Upload>
     });
 
     if (nodes.length === 1) return nodes;
-    return <Popover content={<Flex vertical>
-      {nodes}
-    </Flex>} trigger="click">
-      <IconButton
-        icon={<PlusOutlined />}
-        bordered={false}
-      />
-    </Popover>
+    return <UploadPopover nodes={nodes} />
+
 
 
   }, [onInput.variant, onUpload, attachedFiles]);

package/lib/ChatAnywhere/Input/UploadPopover.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export default function UploadPopover({ nodes }: {
+    nodes: React.ReactElement[];
+}): import("react/jsx-runtime").JSX.Element;

package/lib/ChatAnywhere/Input/UploadPopover.js

@@ -0,0 +1,51 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { IconButton, Popover } from "@agentscope-ai/design";
+import { PlusOutlined } from "@agentscope-ai/icons-override-antd";
+import { useGetState } from "ahooks";
+import { Flex } from "antd";
+import React from "react";
+import { useEffect } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function UploadPopover(_ref) {
+  var nodes = _ref.nodes;
+  var _useGetState = useGetState(false),
+    _useGetState2 = _slicedToArray(_useGetState, 3),
+    visible = _useGetState2[0],
+    setVisible = _useGetState2[1],
+    getVisible = _useGetState2[2];
+  useEffect(function () {
+    var close = function close() {
+      if (getVisible()) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener('click', close, true);
+    return function () {
+      document.removeEventListener('click', close, true);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(Popover, {
+    placement: "bottomLeft",
+    open: visible,
+    onOpenChange: setVisible,
+    content: /*#__PURE__*/_jsx(Flex, {
+      vertical: true,
+      children: nodes
+    }),
+    trigger: "click",
+    styles: {
+      body: {
+        padding: 4
+      }
+    },
+    children: /*#__PURE__*/_jsx(IconButton, {
+      icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
+      bordered: false
+    })
+  });
+}

package/lib/ChatAnywhere/Input/index.js

@@ -18,20 +18,19 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Flex, Popover } from 'antd';
 import { useProviderContext, ChatInput, Sender, Attachments } from "../..";
 import cls from 'classnames';
 import { useChatAnywhere } from "../hooks/ChatAnywhereProvider";
 import { useInput } from "../hooks/useInput";
 import { Upload } from 'antd';
 import Style from "./style";
-import { IconButton } from '@agentscope-ai/design';
+import { IconButton, Button } from '@agentscope-ai/design';
 import { AIGC } from "../..";
-import { PlusOutlined } from "@agentscope-ai/icons-override-antd";
+import UploadPopover from "./UploadPopover";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export default /*#__PURE__*/forwardRef(function (_, ref) {
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -130,6 +129,29 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
       return [];
     }
     var nodes = onUpload.map(function (item, index) {
+      var trigger;
+      if (item.trigger) {
+        trigger = item.trigger;
+      } else if (item.title || item.description) {
+        trigger = /*#__PURE__*/_jsxs(Button, {
+          type: "text",
+          icon: item.icon,
+          children: [item.title && /*#__PURE__*/_jsx("span", {
+            children: item.title
+          }), item.description && /*#__PURE__*/_jsx("span", {
+            style: {
+              fontSize: '0.8em',
+              opacity: 0.8
+            },
+            children: item.description
+          })]
+        });
+      } else {
+        trigger = /*#__PURE__*/_jsx(IconButton, {
+          icon: item.icon,
+          bordered: false
+        });
+      }
       return /*#__PURE__*/_createElement(Upload, _objectSpread(_objectSpread({}, item), {}, {
         fileList: attachedFiles[index],
         key: index,
@@ -142,22 +164,11 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
           }
         },
         showUploadList: false
-      }), item.trigger || /*#__PURE__*/_jsx(IconButton, {
-        icon: item.icon,
-        bordered: false
-      }));
+      }), trigger);
     });
     if (nodes.length === 1) return nodes;
-    return /*#__PURE__*/_jsx(Popover, {
-      content: /*#__PURE__*/_jsx(Flex, {
-        vertical: true,
-        children: nodes
-      }),
-      trigger: "click",
-      children: /*#__PURE__*/_jsx(IconButton, {
-        icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
-        bordered: false
-      })
+    return /*#__PURE__*/_jsx(UploadPopover, {
+      nodes: nodes
     });
   }, [onInput.variant, onUpload, attachedFiles]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/chat",
-  "version": "1.1.45-beta.1766388936317",
+  "version": "1.1.45-beta.1766392979633",
   "description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
   "license": "Apache-2.0",
   "sideEffects": [