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

package/components/ChatAnywhere/Input/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { UploadFile } from 'antd';
+import { Flex, Popover, UploadFile } from 'antd';
 import { useProviderContext, ChatInput, uuid, Sender, Attachments } from '@agentscope-ai/chat';
 import cls from 'classnames';
 import { useChatAnywhere } from '../hooks/ChatAnywhereProvider';
@@ -8,6 +8,7 @@ import { Button, GetProp, Space, Upload } from 'antd';
 import Style from './style';
 import { IconButton } from '@agentscope-ai/design';
 import { AIGC } from '@agentscope-ai/chat';
+import { PlusOutlined } from '@ant-design/icons';
 
 type AttachedFiles = GetProp<typeof Attachments, 'items'>;
 
@@ -31,7 +32,7 @@ export default forwardRef(function (_, ref) {
   useEffect(() => {
     attachedFilesRef.current = attachedFiles;
   }, [attachedFiles]);
-  
+
   const uiConfig = useChatAnywhere(v => v.uiConfig);
   const { getPrefixCls } = useProviderContext();
   const prefixCls = getPrefixCls('chat-anywhere-sender');
@@ -85,8 +86,11 @@ export default forwardRef(function (_, ref) {
     })
   }
 
-  const prefixNodes = onInput.variant !== 'aigc' && onUpload?.length ?
-    onUpload.map((item, index) => {
+  const uploadPrefixNodes = useMemo(() => {
+    if (onInput.variant === 'aigc' || !onUpload?.length) {
+      return [];
+    }
+    const nodes = onUpload.map((item, index) => {
       return <Upload
         {...item}
         fileList={attachedFiles[index]}
@@ -102,12 +106,29 @@ export default forwardRef(function (_, ref) {
         }}
         showUploadList={false}
       >
-        <IconButton
-          icon={item.icon}
-          bordered={false}
-        />
+        {
+          item.trigger || <IconButton
+            icon={item.icon}
+            bordered={false}
+          />
+        }
       </Upload>
-    }) : [];
+    });
+
+    if (nodes.length === 1) return nodes;
+    return <Popover content={<Flex vertical>
+      {nodes}
+    </Flex>} trigger="click">
+      <IconButton
+        icon={<PlusOutlined />}
+        bordered={false}
+      />
+    </Popover>
+
+
+  }, [onInput.variant, onUpload, attachedFiles]);
+
+
 
 
   // aigc 模式下的 header
@@ -162,7 +183,7 @@ export default forwardRef(function (_, ref) {
         if (trimmed.startsWith('.')) {
           return fileName.toLowerCase().endsWith(trimmed.toLowerCase());
         }
-        
+
         // Wildcard: image/*, */*
         if (trimmed.includes('*')) {
           if (trimmed === '*/*') return true;
@@ -170,7 +191,7 @@ export default forwardRef(function (_, ref) {
           const [fileMain] = fileType.split('/');
           return acceptMain === fileMain;
         }
-        
+
         // Exact: image/jpeg
         return fileType === trimmed;
       });
@@ -225,7 +246,7 @@ export default forwardRef(function (_, ref) {
       const getExtension = () => {
         const nameMatch = fileName.match(/\.([^.]+)$/);
         if (nameMatch) return nameMatch[1].toLowerCase();
-        
+
         const typeMatch = fileType.match(/\/([^/+]+)/);
         return typeMatch ? typeMatch[1].toLowerCase() : 'bin';
       };
@@ -257,7 +278,7 @@ export default forwardRef(function (_, ref) {
       setAttachedFiles(prev => {
         const updated = [...prev];
         const currentList = updated[uploadIndex] || [];
-        
+
         // If not multiple, replace existing files
         if (!uploadConfig.multiple) {
           updated[uploadIndex] = [uploadFile];
@@ -296,11 +317,11 @@ export default forwardRef(function (_, ref) {
           updateFile({ percent: event.percent });
         },
       } as any, {
-        defaultRequest: () => {}
+        defaultRequest: () => { }
       });
     }
   };
-  
+
   // 检查是否有必需的上传项没有文件
   const requiredFileMissing = useMemo(() => {
     return onUpload?.some((item, index) => {
@@ -311,7 +332,7 @@ export default forwardRef(function (_, ref) {
       return false;
     }) ?? false;
   }, [onUpload, attachedFiles]);
-  
+
   const sendDisabled = requiredFileMissing;
 
   return <>
@@ -340,7 +361,7 @@ export default forwardRef(function (_, ref) {
         scalable={onInput?.zoomable}
         header={senderHeader}
         prefix={<>
-          {prefixNodes}
+          {uploadPrefixNodes}
           {onInput?.morePrefixActions}
         </>}
         onSubmit={async () => {

package/components/ChatAnywhere/hooks/types.ts

@@ -234,6 +234,7 @@ export interface IChatAnywhereConfigOnUpload {
    * @descriptionEn Description for the upload component
    */
   description?: string | React.ReactElement;
+  trigger?: React.ReactElement;
 }
 
 export interface IChatAnywhereConfig {

package/components/GenerativeUI/Sandbox.tsx

@@ -0,0 +1,7 @@
+export default function Iframe() {
+  return <iframe srcDoc={`<html>
+    <body>
+      <h1>Hello, world!</h1>
+    </body>
+  </html>`} />
+}

package/components/GenerativeUI/index.tsx

@@ -0,0 +1 @@
+export { default as Sandbox } from './Sandbox';

package/components/Sender/style/index.ts

@@ -69,7 +69,9 @@ const IndexStyle = createGlobalStyle`
   }
 
   &-prefix {
+    width: 0;
     flex: 1;
+    overflow: auto;
   }
 
   &-input {

package/components/index.ts

@@ -85,4 +85,6 @@ export {
   type MarkdownProps,
 } from './Markdown';
 
-export { default as AIGC } from './AIGC';
+export { default as AIGC } from './AIGC';
+
+export { Sandbox as GenerativeUISandbox } from './GenerativeUI';

package/lib/ChatAnywhere/Input/index.js

@@ -18,6 +18,7 @@ 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";
@@ -26,6 +27,7 @@ import { Upload } from 'antd';
 import Style from "./style";
 import { IconButton } from '@agentscope-ai/design';
 import { AIGC } from "../..";
+import { PlusOutlined } from "@agentscope-ai/icons-override-antd";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -123,24 +125,41 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
       return _ref.apply(this, arguments);
     };
   }();
-  var prefixNodes = onInput.variant !== 'aigc' && onUpload !== null && onUpload !== void 0 && onUpload.length ? onUpload.map(function (item, index) {
-    return /*#__PURE__*/_createElement(Upload, _objectSpread(_objectSpread({}, item), {}, {
-      fileList: attachedFiles[index],
-      key: index,
-      onChange: function onChange(info) {
-        if (item.beforeUpload && info.file.status) {
-          handleFileChange(index, info.fileList);
-        }
-        if (!item.beforeUpload) {
-          handleFileChange(index, info.fileList);
-        }
-      },
-      showUploadList: false
-    }), /*#__PURE__*/_jsx(IconButton, {
-      icon: item.icon,
-      bordered: false
-    }));
-  }) : [];
+  var uploadPrefixNodes = useMemo(function () {
+    if (onInput.variant === 'aigc' || !(onUpload !== null && onUpload !== void 0 && onUpload.length)) {
+      return [];
+    }
+    var nodes = onUpload.map(function (item, index) {
+      return /*#__PURE__*/_createElement(Upload, _objectSpread(_objectSpread({}, item), {}, {
+        fileList: attachedFiles[index],
+        key: index,
+        onChange: function onChange(info) {
+          if (item.beforeUpload && info.file.status) {
+            handleFileChange(index, info.fileList);
+          }
+          if (!item.beforeUpload) {
+            handleFileChange(index, info.fileList);
+          }
+        },
+        showUploadList: false
+      }), item.trigger || /*#__PURE__*/_jsx(IconButton, {
+        icon: item.icon,
+        bordered: false
+      }));
+    });
+    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
+      })
+    });
+  }, [onInput.variant, onUpload, attachedFiles]);
 
   // aigc 模式下的 header
   var aigcSenderHeader = /*#__PURE__*/_jsx(AIGC.SenderHeader, {
@@ -377,7 +396,7 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
         scalable: onInput === null || onInput === void 0 ? void 0 : onInput.zoomable,
         header: senderHeader,
         prefix: /*#__PURE__*/_jsxs(_Fragment, {
-          children: [prefixNodes, onInput === null || onInput === void 0 ? void 0 : onInput.morePrefixActions]
+          children: [uploadPrefixNodes, onInput === null || onInput === void 0 ? void 0 : onInput.morePrefixActions]
         }),
         onSubmit: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
           var next;

package/lib/ChatAnywhere/hooks/types.d.ts

@@ -231,6 +231,7 @@ export interface IChatAnywhereConfigOnUpload {
      * @descriptionEn Description for the upload component
      */
     description?: string | React.ReactElement;
+    trigger?: React.ReactElement;
 }
 export interface IChatAnywhereConfig {
     /**

package/lib/GenerativeUI/Sandbox.d.ts

@@ -0,0 +1 @@
+export default function Iframe(): import("react/jsx-runtime").JSX.Element;

package/lib/GenerativeUI/Sandbox.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Iframe() {
+  return /*#__PURE__*/_jsx("iframe", {
+    srcDoc: "<html>\n    <body>\n      <h1>Hello, world!</h1>\n    </body>\n  </html>"
+  });
+}

package/lib/GenerativeUI/index.d.ts

@@ -0,0 +1 @@
+export { default as Sandbox } from './Sandbox';

package/lib/GenerativeUI/index.js

@@ -0,0 +1 @@
+export { default as Sandbox } from "./Sandbox";

package/lib/Sender/style/index.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createGlobalStyle } from 'antd-style';
-var IndexStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-sender {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  box-shadow: 0px 12px 24px -16px rgba(54, 54, 73, 0.04),\n    0px 12px 40px 0px rgba(51, 51, 71, 0.08),\n    0px 0px 1px 0px rgba(44, 44, 54, 0.02);\n  background-color: ", ";\n  border-radius: ", "px;\n  border-color: ", ";\n  border-width: 0;\n  border-style: solid;\n  overflow: hidden;\n\n  &:after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    transition: border-color ", ";\n    border-radius: inherit;\n    border-style: inherit;\n    border-color: inherit;\n    border-width: ", "px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 12px 24px -16px rgba(54, 54, 73, 0.04),\n      0px 12px 40px 0px rgba(51, 51, 71, 0.08),\n      0px 0px 1px 0px rgba(44, 44, 54, 0.02);\n    border-color: ", ";\n\n    &:after {\n      border-width: ", "px;\n    }\n  }\n\n  &-disabled {\n    .", "-sender-content,\n    .", "-sender-header {\n      background-color: ", ";\n    }\n  }\n\n  &-blur {\n    .", "-sender-input {\n      height: 22px !important;\n      min-height: 22px !important;\n    }\n  }\n\n  &.", "-sender-rtl {\n    direction: rtl;\n  }\n\n  &-content {\n    width: 100%;\n    padding: 8px;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  &-content-bottom {\n    margin-top: 4px;\n    display: flex;\n  }\n\n  &-prefix {\n    flex: 1;\n  }\n\n  &-input {\n    margin: 4px 0;\n    padding: 0 8px;\n    border-radius: 0;\n    align-self: center;\n    font-size: 14px;\n    line-height: 22px;\n  }\n\n  &-actions-list {\n    flex: none;\n    display: flex;\n    margin: 0 0 0 auto;\n\n    &-presets {\n      gap: ", "px;\n    }\n\n    &-length {\n      font-size: 12px;\n      line-height: 1;\n      display: flex;\n      align-items: center;\n      padding: 0 12px;\n      color: ", ";\n    }\n  }\n\n  &-recording {\n    height: 30px;\n    padding: 0 8px;\n    &-icon {\n      display: block;\n      width: 100%;\n      height: 30px;\n    }\n  }\n\n  &-actions-btn {\n    &-disabled {\n      background: ", ";\n    }\n\n    &-loading-button {\n      padding: 0;\n      border: 0;\n    }\n\n    &-loading-icon {\n      height: ", "px;\n      width: ", "px;\n      vertical-align: top;\n    }\n\n    &-recording-icon {\n      height: 1.2em;\n      width: 1.2em;\n      vertical-align: top;\n    }\n\n    \n  }\n}\n\n.", "-sender {\n  &-header {\n    &-motion {\n      transition: height .3s, border .3s;\n      overflow: hidden;\n      &-enter-start,\n      &-leave-active {\n        border-bottom-color: transparent;\n      }\n\n      &-hidden {\n        display: none;\n      }\n    }\n  }\n}\n"])), function (p) {
+var IndexStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-sender {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  box-shadow: 0px 12px 24px -16px rgba(54, 54, 73, 0.04),\n    0px 12px 40px 0px rgba(51, 51, 71, 0.08),\n    0px 0px 1px 0px rgba(44, 44, 54, 0.02);\n  background-color: ", ";\n  border-radius: ", "px;\n  border-color: ", ";\n  border-width: 0;\n  border-style: solid;\n  overflow: hidden;\n\n  &:after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    transition: border-color ", ";\n    border-radius: inherit;\n    border-style: inherit;\n    border-color: inherit;\n    border-width: ", "px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 12px 24px -16px rgba(54, 54, 73, 0.04),\n      0px 12px 40px 0px rgba(51, 51, 71, 0.08),\n      0px 0px 1px 0px rgba(44, 44, 54, 0.02);\n    border-color: ", ";\n\n    &:after {\n      border-width: ", "px;\n    }\n  }\n\n  &-disabled {\n    .", "-sender-content,\n    .", "-sender-header {\n      background-color: ", ";\n    }\n  }\n\n  &-blur {\n    .", "-sender-input {\n      height: 22px !important;\n      min-height: 22px !important;\n    }\n  }\n\n  &.", "-sender-rtl {\n    direction: rtl;\n  }\n\n  &-content {\n    width: 100%;\n    padding: 8px;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  &-content-bottom {\n    margin-top: 4px;\n    display: flex;\n  }\n\n  &-prefix {\n    width: 0;\n    flex: 1;\n    overflow: auto;\n  }\n\n  &-input {\n    margin: 4px 0;\n    padding: 0 8px;\n    border-radius: 0;\n    align-self: center;\n    font-size: 14px;\n    line-height: 22px;\n  }\n\n  &-actions-list {\n    flex: none;\n    display: flex;\n    margin: 0 0 0 auto;\n\n    &-presets {\n      gap: ", "px;\n    }\n\n    &-length {\n      font-size: 12px;\n      line-height: 1;\n      display: flex;\n      align-items: center;\n      padding: 0 12px;\n      color: ", ";\n    }\n  }\n\n  &-recording {\n    height: 30px;\n    padding: 0 8px;\n    &-icon {\n      display: block;\n      width: 100%;\n      height: 30px;\n    }\n  }\n\n  &-actions-btn {\n    &-disabled {\n      background: ", ";\n    }\n\n    &-loading-button {\n      padding: 0;\n      border: 0;\n    }\n\n    &-loading-icon {\n      height: ", "px;\n      width: ", "px;\n      vertical-align: top;\n    }\n\n    &-recording-icon {\n      height: 1.2em;\n      width: 1.2em;\n      vertical-align: top;\n    }\n\n    \n  }\n}\n\n.", "-sender {\n  &-header {\n    &-motion {\n      transition: height .3s, border .3s;\n      overflow: hidden;\n      &-enter-start,\n      &-leave-active {\n        border-bottom-color: transparent;\n      }\n\n      &-hidden {\n        display: none;\n      }\n    }\n  }\n}\n"])), function (p) {
   return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorBgBase;

package/lib/index.d.ts

@@ -26,3 +26,4 @@ export { default as sleep } from './Util/sleep';
 export { default as Welcome, type IWelcomeProps } from './Welcome';
 export { default as Markdown, type MarkdownProps as IMarkdownProps, type MarkdownProps, } from './Markdown';
 export { default as AIGC } from './AIGC';
+export { Sandbox as GenerativeUISandbox } from './GenerativeUI';

package/lib/index.js

@@ -24,4 +24,5 @@ export { default as StatusCard } from "./StatusCard";
 export { default as sleep } from "./Util/sleep";
 export { default as Welcome } from "./Welcome";
 export { default as Markdown } from "./Markdown";
-export { default as AIGC } from "./AIGC";
+export { default as AIGC } from "./AIGC";
+export { Sandbox as GenerativeUISandbox } from "./GenerativeUI";

package/package.json

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