@agentscope-ai/chat 1.1.70 → 1.1.71-beta.1781610744021

package/components/AgentScopeRuntimeWebUI/core/Context/ChatAnywhereI18nContext.tsx

@@ -35,6 +35,13 @@ const messages = {
     'common.saveSuccess': '保存成功',
     'common.saveFailed': '保存失败',
 
+    // Queue 相关
+    'queue.title': '待发送队列',
+    'queue.clear': '清空队列',
+    'queue.retry': '重试发送',
+    'queue.failed': '发送失败',
+    'queue.attachmentOnly': '附件消息',
+
     // Actions 相关
     'actions.regenerate': '重新生成',
 
@@ -73,6 +80,13 @@ const messages = {
     'common.saveSuccess': 'Saved successfully',
     'common.saveFailed': 'Failed to save',
 
+    // Queue related
+    'queue.title': 'Queued inputs',
+    'queue.clear': 'Clear queue',
+    'queue.retry': 'Retry',
+    'queue.failed': 'Failed to send',
+    'queue.attachmentOnly': 'Attachment message',
+
     // Actions related
     'actions.regenerate': 'Regenerate',
 

package/components/AgentScopeRuntimeWebUI/starter/index.tsx

@@ -1,11 +1,97 @@
-import { AgentScopeRuntimeWebUI, IAgentScopeRuntimeWebUIRef, ChatInput } from '@agentscope-ai/chat';
+import { AgentScopeRuntimeWebUI, IAgentScopeRuntimeWebUIRef } from '@agentscope-ai/chat';
 import OptionsPanel from './OptionsPanel';
 import { useMemo, useRef } from 'react';
 import defaultConfig from './OptionsPanel/defaultConfig';
 import { useLocalStorageState } from 'ahooks';
-import { Flex } from 'antd';
+import { Button, Flex } from 'antd';
 import MessageImport from './MessageImport';
 
+const encoder = new TextEncoder();
+
+const sleep = (ms: number) => new Promise(resolve => {
+  setTimeout(resolve, ms);
+});
+
+function getLastUserText(input: any[] = []) {
+  const lastMessage = input[input.length - 1];
+  const content = lastMessage?.content || [];
+  return content
+    .filter((item: any) => item?.type === 'text')
+    .map((item: any) => item.text)
+    .join('\n');
+}
+
+async function createMockQueueResponse(data: {
+  input?: any[];
+  signal?: AbortSignal;
+}) {
+  const userText = getLastUserText(data.input);
+  const messageId = `queue-demo-${Date.now()}`;
+  const chunks = [
+    {
+      object: 'message',
+      id: messageId,
+      role: 'assistant',
+      type: 'message',
+      status: 'in_progress',
+      content: [],
+    },
+    {
+      object: 'content',
+      msg_id: messageId,
+      type: 'text',
+      status: 'in_progress',
+      delta: true,
+      text: `Received: ${userText || 'attachment message'}\n\n`,
+    },
+    {
+      object: 'content',
+      msg_id: messageId,
+      type: 'text',
+      status: 'in_progress',
+      delta: true,
+      text: 'This mock response is intentionally slow, ',
+    },
+    {
+      object: 'content',
+      msg_id: messageId,
+      type: 'text',
+      status: 'in_progress',
+      delta: true,
+      text: 'so later inputs can enter the queue.',
+    },
+    {
+      object: 'response',
+      id: messageId,
+      status: 'completed',
+      created_at: Math.floor(Date.now() / 1000),
+      output: [],
+    },
+  ];
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      for (const chunk of chunks) {
+        if (data.signal?.aborted) {
+          controller.close();
+          return;
+        }
+        await sleep(700);
+        controller.enqueue(
+          encoder.encode(`data: ${JSON.stringify(chunk)}\n\n`),
+        );
+      }
+      controller.close();
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+    },
+  });
+}
+
 
 export default function () {
 
@@ -20,6 +106,16 @@ export default function () {
 
   const options = useMemo(() => {
     const rightHeader = <Flex gap={16}>
+      <Button size="small" onClick={() => {
+        chatRef.current?.input.submit({ query: 'Queue demo 1: slow response' });
+        window.setTimeout(() => {
+          chatRef.current?.input.submit({ query: 'Queue demo 2: queued while busy' });
+        }, 400);
+        window.setTimeout(() => {
+          chatRef.current?.input.submit({ query: 'Queue demo 3: sent after demo 2' });
+        }, 800);
+      }}>Queue demo</Button>
+
       <OptionsPanel value={optionsConfig} onChange={v => {
         setOptionsConfig(prev => ({
           ...prev,
@@ -40,17 +136,6 @@ export default function () {
       },
       sender: {
         ...optionsConfig.sender,
-        beforeUI: <ChatInput.BeforeUIContainer>
-          <Flex gap={6}>
-            {
-              optionsConfig.welcome.prompts.map(prompt => (
-                <a key={prompt.value} onClick={() => {
-                  chatRef.current?.input.submit({ query: prompt.value });
-                }}>{prompt.value}</a>
-              ))
-            }
-          </Flex>
-        </ChatInput.BeforeUIContainer>,
         attachments: optionsConfig.sender.attachments ? {
           customRequest(options) {
             // 模拟上传进度
@@ -71,6 +156,7 @@ export default function () {
       },
       api: {
         ...optionsConfig.api,
+        ...(!optionsConfig.api.baseURL ? { fetch: createMockQueueResponse } : {}),
         cancel: (data) => {
           console.log('cancel', data);
         },
@@ -87,4 +173,4 @@ export default function () {
       options={options}
     />
   </div>;
-}
+}

package/components/AgentScopeRuntimeWebUI/starterForMe/index.tsx

@@ -0,0 +1,31 @@
+import { AgentScopeRuntimeWebUI } from '@agentscope-ai/chat';
+
+export default function Page() {
+  return (
+    <div style={{ height: '100dvh' }}>
+      <AgentScopeRuntimeWebUI
+        options={{
+          api: {
+            baseURL: '/api/runtime/chat',
+            token: 'your-token',
+          },
+          session: {
+            multiple: true,
+          },
+          theme: {
+            locale: 'en',
+            colorPrimary: '#615CED',
+          },
+          sender: {
+            placeholder: 'Ask something',
+            maxLength: 10000,
+          },
+          welcome: {
+            greeting: 'Hello, how can I help you today?',
+            prompts: [{ value: 'What can you do?' }],
+          },
+        }}
+      />
+    </div>
+  );
+}

package/lib/AgentScopeRuntimeWebUI/core/Chat/Input/index.d.ts

@@ -1,6 +1,14 @@
 import { IAgentScopeRuntimeWebUIInputData } from "../../../..";
+import type { QueuedInputItem } from "../InputQueue";
 export interface InputProps {
     onCancel: () => void;
     onSubmit: (data: IAgentScopeRuntimeWebUIInputData) => void;
+    queue?: {
+        items: QueuedInputItem[];
+        onEnqueue: (data: IAgentScopeRuntimeWebUIInputData) => void;
+        onRemove: (id: string) => void;
+        onClear: () => void;
+        onRetry: (id: string) => void;
+    };
 }
 export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;

package/lib/AgentScopeRuntimeWebUI/core/Chat/Input/index.js

@@ -14,10 +14,12 @@ import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext
 import { useGetState } from 'ahooks';
 import { useChatAnywhereInput } from "../../Context/ChatAnywhereInputContext";
 import useAttachments from "./useAttachments";
+import InputQueuePanel from "../InputQueue/Panel";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
 export default function Input(props) {
+  var _props$queue4, _props$queue5;
   var _useGetState = useGetState(''),
     _useGetState2 = _slicedToArray(_useGetState, 3),
     content = _useGetState2[0],
@@ -55,7 +57,8 @@ export default function Input(props) {
     uploadIconButton = _useAttachments.uploadIconButton,
     uploadFileListHeader = _useAttachments.uploadFileListHeader;
   var handleSubmit = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var next, fileList;
+    var _props$queue;
+    var next, fileList, data, _props$queue2;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -73,26 +76,51 @@ export default function Input(props) {
             var _i$response;
             return (_i$response = i.response) === null || _i$response === void 0 ? void 0 : _i$response.url;
           });
-          props.onSubmit({
+          data = {
             query: getContent(),
             fileList: fileList
-          });
+          };
+          if (inputContext.loading || (_props$queue = props.queue) !== null && _props$queue !== void 0 && _props$queue.items.length) {
+            (_props$queue2 = props.queue) === null || _props$queue2 === void 0 || _props$queue2.onEnqueue(data);
+          } else {
+            props.onSubmit(data);
+          }
           setContent('');
-          setFileList && setFileList([]);
-        case 9:
+          setFileList === null || setFileList === void 0 || setFileList([]);
+        case 10:
         case "end":
           return _context.stop();
       }
     }, _callee);
-  })), []);
+  })), [beforeSubmit, getContent, getFileList, inputContext.loading, props.onSubmit, props.queue, setContent, setFileList]);
+  var handleKeyDownCapture = useCallback(function (event) {
+    var _event$nativeEvent, _props$queue3;
+    if (event.key !== 'Enter' || event.shiftKey) return;
+    if ((_event$nativeEvent = event.nativeEvent) !== null && _event$nativeEvent !== void 0 && _event$nativeEvent.isComposing) return;
+    if (!inputContext.loading && !((_props$queue3 = props.queue) !== null && _props$queue3 !== void 0 && _props$queue3.items.length)) return;
+    var fileList = ((getFileList === null || getFileList === void 0 ? void 0 : getFileList()) || []).filter(function (i) {
+      var _i$response2;
+      return (_i$response2 = i.response) === null || _i$response2 === void 0 ? void 0 : _i$response2.url;
+    });
+    if (!getContent().trim() && fileList.length === 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    void handleSubmit();
+  }, [getContent, getFileList, handleSubmit, inputContext.loading, (_props$queue4 = props.queue) === null || _props$queue4 === void 0 ? void 0 : _props$queue4.items.length]);
   var handleCancel = useCallback(function () {
     props.onCancel();
   }, []);
   return /*#__PURE__*/_jsxs("div", {
     className: prefixCls,
+    onKeyDownCapture: handleKeyDownCapture,
     children: [/*#__PURE__*/_jsxs("div", {
       className: "".concat(prefixCls, "-wrapper"),
-      children: [beforeUI, /*#__PURE__*/_jsx(ChatInput, {
+      children: [beforeUI, (_props$queue5 = props.queue) !== null && _props$queue5 !== void 0 && _props$queue5.items.length ? /*#__PURE__*/_jsx(InputQueuePanel, {
+        items: props.queue.items,
+        onRemove: props.queue.onRemove,
+        onClear: props.queue.onClear,
+        onRetry: props.queue.onRetry
+      }) : null, /*#__PURE__*/_jsx(ChatInput, {
         loading: inputContext.loading,
         disabled: inputContext.disabled,
         placeholder: placeholder,

package/lib/AgentScopeRuntimeWebUI/core/Chat/InputQueue/Panel.d.ts

@@ -0,0 +1,9 @@
+import type { QueuedInputItem } from './index';
+interface InputQueuePanelProps {
+    items: QueuedInputItem[];
+    onRemove: (id: string) => void;
+    onClear: () => void;
+    onRetry: (id: string) => void;
+}
+export default function InputQueuePanel(props: InputQueuePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/AgentScopeRuntimeWebUI/core/Chat/InputQueue/Panel.js

@@ -0,0 +1,78 @@
+import { IconButton } from '@agentscope-ai/design';
+import { SparkClearLine, SparkDeleteLine, SparkRefreshLine } from '@agentscope-ai/icons';
+import { Tooltip } from 'antd';
+import { useProviderContext } from "../../../..";
+import { useTranslation } from "../../Context/ChatAnywhereI18nContext";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function InputQueuePanel(props) {
+  var items = props.items,
+    onRemove = props.onRemove,
+    onClear = props.onClear,
+    onRetry = props.onRetry;
+  var prefixCls = useProviderContext().getPrefixCls('chat-anywhere-input-queue');
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tr = function tr(key) {
+    return (t === null || t === void 0 ? void 0 : t(key)) || key;
+  };
+  if (!items.length) return null;
+  return /*#__PURE__*/_jsxs("div", {
+    className: prefixCls,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "".concat(prefixCls, "-header"),
+      children: [/*#__PURE__*/_jsxs("span", {
+        children: [tr('queue.title'), " (", items.length, ")"]
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: tr('queue.clear'),
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          bordered: false,
+          icon: /*#__PURE__*/_jsx(SparkClearLine, {}),
+          onClick: onClear
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-list"),
+      children: items.map(function (item, index) {
+        var failed = item.status === 'failed';
+        return /*#__PURE__*/_jsxs("div", {
+          className: "".concat(prefixCls, "-item"),
+          children: [/*#__PURE__*/_jsx("span", {
+            className: "".concat(prefixCls, "-index"),
+            children: index + 1
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "".concat(prefixCls, "-content"),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "".concat(prefixCls, "-text"),
+              children: item.data.query || tr('queue.attachmentOnly')
+            }), failed ? /*#__PURE__*/_jsx("div", {
+              className: "".concat(prefixCls, "-error"),
+              children: item.errorMessage || tr('queue.failed')
+            }) : null]
+          }), failed ? /*#__PURE__*/_jsx(Tooltip, {
+            title: tr('queue.retry'),
+            children: /*#__PURE__*/_jsx(IconButton, {
+              size: "small",
+              bordered: false,
+              icon: /*#__PURE__*/_jsx(SparkRefreshLine, {}),
+              onClick: function onClick() {
+                return onRetry(item.id);
+              }
+            })
+          }) : null, /*#__PURE__*/_jsx(Tooltip, {
+            title: tr('common.delete'),
+            children: /*#__PURE__*/_jsx(IconButton, {
+              size: "small",
+              bordered: false,
+              icon: /*#__PURE__*/_jsx(SparkDeleteLine, {}),
+              onClick: function onClick() {
+                return onRemove(item.id);
+              }
+            })
+          })]
+        }, item.id);
+      })
+    })]
+  });
+}

package/lib/AgentScopeRuntimeWebUI/core/Chat/InputQueue/index.d.ts

@@ -0,0 +1,37 @@
+import type { IAgentScopeRuntimeWebUIInputData } from '../../types';
+export type QueuedInputStatus = 'pending' | 'failed';
+export interface QueuedInputItem {
+    id: string;
+    data: IAgentScopeRuntimeWebUIInputData;
+    status: QueuedInputStatus;
+    retryCount: number;
+    errorMessage?: string;
+    createdAt: number;
+}
+export interface EnqueueQueuedInputResult {
+    queue: QueuedInputItem[];
+    item?: QueuedInputItem;
+    reason?: 'full';
+}
+export declare const MAX_INPUT_QUEUE_SIZE = 50;
+export declare function createQueuedInputItem(data: IAgentScopeRuntimeWebUIInputData, options?: {
+    id?: string;
+    now?: number;
+}): QueuedInputItem;
+export declare function enqueueQueuedInput(queue: QueuedInputItem[], data: IAgentScopeRuntimeWebUIInputData, options?: {
+    maxSize?: number;
+    id?: string;
+    now?: number;
+}): EnqueueQueuedInputResult;
+export declare function dequeueNextQueuedInput(queue: QueuedInputItem[]): {
+    item?: QueuedInputItem;
+    queue: QueuedInputItem[];
+};
+export declare function removeQueuedInput(queue: QueuedInputItem[], id: string): QueuedInputItem[];
+export declare function retryQueuedInput(queue: QueuedInputItem[], id: string): QueuedInputItem[];
+export declare function restoreFailedQueuedInput(queue: QueuedInputItem[], item: QueuedInputItem, error?: unknown): QueuedInputItem[];
+export declare function canSubmitDirectly(options: {
+    loading: boolean | string;
+    queueLength: number;
+    draining: boolean;
+}): boolean;

package/lib/AgentScopeRuntimeWebUI/core/Chat/InputQueue/index.js

@@ -0,0 +1,74 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+export var MAX_INPUT_QUEUE_SIZE = 50;
+var queueId = 0;
+export function createQueuedInputItem(data, options) {
+  var _options$now;
+  return {
+    id: (options === null || options === void 0 ? void 0 : options.id) || "input-queue-".concat(Date.now().toString(36), "-").concat((++queueId).toString(36)),
+    data: data,
+    status: 'pending',
+    retryCount: 0,
+    createdAt: (_options$now = options === null || options === void 0 ? void 0 : options.now) !== null && _options$now !== void 0 ? _options$now : Date.now()
+  };
+}
+export function enqueueQueuedInput(queue, data, options) {
+  var _options$maxSize;
+  var maxSize = (_options$maxSize = options === null || options === void 0 ? void 0 : options.maxSize) !== null && _options$maxSize !== void 0 ? _options$maxSize : MAX_INPUT_QUEUE_SIZE;
+  if (queue.length >= maxSize) {
+    return {
+      queue: queue,
+      reason: 'full'
+    };
+  }
+  var item = createQueuedInputItem(data, options);
+  return {
+    queue: [].concat(_toConsumableArray(queue), [item]),
+    item: item
+  };
+}
+export function dequeueNextQueuedInput(queue) {
+  var next = queue[0];
+  if (!next || next.status !== 'pending') {
+    return {
+      queue: queue
+    };
+  }
+  return {
+    item: next,
+    queue: queue.slice(1)
+  };
+}
+export function removeQueuedInput(queue, id) {
+  return queue.filter(function (item) {
+    return item.id !== id;
+  });
+}
+export function retryQueuedInput(queue, id) {
+  return queue.map(function (item) {
+    return item.id === id ? _objectSpread(_objectSpread({}, item), {}, {
+      status: 'pending',
+      errorMessage: undefined
+    }) : item;
+  });
+}
+export function restoreFailedQueuedInput(queue, item, error) {
+  return [_objectSpread(_objectSpread({}, item), {}, {
+    status: 'failed',
+    retryCount: item.retryCount + 1,
+    errorMessage: error instanceof Error ? error.message : String(error || '')
+  })].concat(_toConsumableArray(queue));
+}
+export function canSubmitDirectly(options) {
+  return !options.loading && options.queueLength === 0 && !options.draining;
+}

package/lib/AgentScopeRuntimeWebUI/core/Chat/hooks/useChatController.d.ts

@@ -1,7 +1,14 @@
+import { InputProps } from "../Input";
+import { type QueuedInputItem } from "../InputQueue";
 /**
  * Chat controller hook — coordinates all chat-related operations.
  */
 export default function useChatController(): {
     handleSubmit: (data: import("../../../..").IAgentScopeRuntimeWebUIInputData) => void;
     handleCancel: () => void;
+    inputQueue: QueuedInputItem[];
+    enqueueQueuedInput: (data: Parameters<InputProps['onSubmit']>[0]) => void;
+    removeQueuedInput: (id: string) => void;
+    clearQueuedInputs: () => void;
+    retryQueuedInput: (id: string) => void;
 };