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

package/components/AgentScopeRuntimeWebUI/core/Chat/Input/index.tsx

@@ -5,10 +5,19 @@ import { useGetState } from 'ahooks';
 import { useChatAnywhereInput } from "../../Context/ChatAnywhereInputContext";
 import useAttachments from "./useAttachments";
 import { IAgentScopeRuntimeWebUIInputData } from "@agentscope-ai/chat";
+import InputQueuePanel from "../InputQueue/Panel";
+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) {
@@ -44,18 +53,42 @@ export default function Input(props: InputProps) {
     if (!next) return;
 
     const fileList = (getFileList?.() || []).filter(i => i.response?.url);
-    props.onSubmit({ query: getContent(), fileList });
+    const data = { query: getContent(), fileList };
+    if (inputContext.loading || props.queue?.items.length) {
+      props.queue?.onEnqueue(data);
+    } else {
+      props.onSubmit(data);
+    }
     setContent('');
-    setFileList && setFileList([]);
-  }, []);
+    setFileList?.([]);
+  }, [beforeSubmit, getContent, getFileList, inputContext.loading, props.onSubmit, props.queue, setContent, setFileList]);
+
+  const handleKeyDownCapture = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Enter' || event.shiftKey) return;
+    if (event.nativeEvent?.isComposing) return;
+    if (!inputContext.loading && !props.queue?.items.length) return;
+
+    const fileList = (getFileList?.() || []).filter(i => i.response?.url);
+    if (!getContent().trim() && fileList.length === 0) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    void handleSubmit();
+  }, [getContent, getFileList, handleSubmit, inputContext.loading, props.queue?.items.length]);
 
   const handleCancel = useCallback(() => {
     props.onCancel();
   }, []);
 
-  return <div className={prefixCls}>
+  return <div className={prefixCls} onKeyDownCapture={handleKeyDownCapture}>
     <div className={`${prefixCls}-wrapper`}>
       {beforeUI}
+      {props.queue?.items.length ? <InputQueuePanel
+        items={props.queue.items}
+        onRemove={props.queue.onRemove}
+        onClear={props.queue.onClear}
+        onRetry={props.queue.onRetry}
+      /> : null}
       <ChatInput
         loading={inputContext.loading}
         disabled={inputContext.disabled}
@@ -80,4 +113,4 @@ export default function Input(props: InputProps) {
       disclaimer ? <Disclaimer desc={disclaimer} /> : <div className={`${prefixCls}-blank`}></div>
     }
   </div>;
-}
+}

package/components/AgentScopeRuntimeWebUI/core/Chat/InputQueue/Panel.tsx

@@ -0,0 +1,82 @@
+import { IconButton } from '@agentscope-ai/design';
+import {
+  SparkClearLine,
+  SparkDeleteLine,
+  SparkRefreshLine,
+} from '@agentscope-ai/icons';
+import { Tooltip } from 'antd';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { useTranslation } from '../../Context/ChatAnywhereI18nContext';
+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) {
+  const { items, onRemove, onClear, onRetry } = props;
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-input-queue');
+  const { t } = useTranslation();
+  const tr = (key: Parameters<typeof t>[0]) => t?.(key) || key;
+
+  if (!items.length) return null;
+
+  return (
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-header`}>
+        <span>
+          {tr('queue.title')} ({items.length})
+        </span>
+        <Tooltip title={tr('queue.clear')}>
+          <IconButton
+            size="small"
+            bordered={false}
+            icon={<SparkClearLine />}
+            onClick={onClear}
+          />
+        </Tooltip>
+      </div>
+      <div className={`${prefixCls}-list`}>
+        {items.map((item, index) => {
+          const failed = item.status === 'failed';
+          return (
+            <div className={`${prefixCls}-item`} key={item.id}>
+              <span className={`${prefixCls}-index`}>{index + 1}</span>
+              <div className={`${prefixCls}-content`}>
+                <div className={`${prefixCls}-text`}>
+                  {item.data.query || tr('queue.attachmentOnly')}
+                </div>
+                {failed ? (
+                  <div className={`${prefixCls}-error`}>
+                    {item.errorMessage || tr('queue.failed')}
+                  </div>
+                ) : null}
+              </div>
+              {failed ? (
+                <Tooltip title={tr('queue.retry')}>
+                  <IconButton
+                    size="small"
+                    bordered={false}
+                    icon={<SparkRefreshLine />}
+                    onClick={() => onRetry(item.id)}
+                  />
+                </Tooltip>
+              ) : null}
+              <Tooltip title={tr('common.delete')}>
+                <IconButton
+                  size="small"
+                  bordered={false}
+                  icon={<SparkDeleteLine />}
+                  onClick={() => onRemove(item.id)}
+                />
+              </Tooltip>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/components/AgentScopeRuntimeWebUI/core/Chat/InputQueue/__tests__/inputQueue.test.ts

@@ -0,0 +1,112 @@
+import assert from 'node:assert/strict';
+import {
+  canSubmitDirectly,
+  dequeueNextQueuedInput,
+  enqueueQueuedInput,
+  removeQueuedInput,
+  restoreFailedQueuedInput,
+  retryQueuedInput,
+} from '../index';
+
+const input = (query: string) => ({ query });
+
+function test(name: string, fn: () => void) {
+  try {
+    fn();
+    console.log(`ok - ${name}`);
+  } catch (error) {
+    console.error(`not ok - ${name}`);
+    throw error;
+  }
+}
+
+test('enqueue appends inputs in FIFO order and dequeue consumes the head', () => {
+  let queue = enqueueQueuedInput([], input('first'), {
+    id: 'q1',
+    now: 1,
+  }).queue;
+  queue = enqueueQueuedInput(queue, input('second'), {
+    id: 'q2',
+    now: 2,
+  }).queue;
+
+  const first = dequeueNextQueuedInput(queue);
+  assert.equal(first.item?.data.query, 'first');
+  assert.deepEqual(first.queue.map(item => item.data.query), ['second']);
+
+  const second = dequeueNextQueuedInput(first.queue);
+  assert.equal(second.item?.data.query, 'second');
+  assert.equal(second.queue.length, 0);
+});
+
+test('direct submit is allowed only when idle, queue is empty and no drain is active', () => {
+  assert.equal(
+    canSubmitDirectly({ loading: false, queueLength: 0, draining: false }),
+    true,
+  );
+  assert.equal(
+    canSubmitDirectly({ loading: true, queueLength: 0, draining: false }),
+    false,
+  );
+  assert.equal(
+    canSubmitDirectly({ loading: false, queueLength: 1, draining: false }),
+    false,
+  );
+  assert.equal(
+    canSubmitDirectly({ loading: false, queueLength: 0, draining: true }),
+    false,
+  );
+});
+
+test('enqueue rejects new input when the queue reaches max size', () => {
+  const queue = enqueueQueuedInput([], input('first'), {
+    id: 'q1',
+    maxSize: 1,
+  }).queue;
+  const result = enqueueQueuedInput(queue, input('second'), {
+    id: 'q2',
+    maxSize: 1,
+  });
+
+  assert.equal(result.reason, 'full');
+  assert.deepEqual(result.queue.map(item => item.id), ['q1']);
+});
+
+test('failed send is restored at the queue head and blocks automatic dequeue', () => {
+  const original = enqueueQueuedInput([], input('send me'), {
+    id: 'q1',
+  }).queue[0];
+  const queue = restoreFailedQueuedInput([], original, new Error('network'));
+
+  assert.equal(queue[0].status, 'failed');
+  assert.equal(queue[0].retryCount, 1);
+  assert.equal(queue[0].errorMessage, 'network');
+
+  const next = dequeueNextQueuedInput(queue);
+  assert.equal(next.item, undefined);
+  assert.equal(next.queue, queue);
+});
+
+test('retry marks a failed item pending so it can be sent again', () => {
+  const original = enqueueQueuedInput([], input('retry me'), {
+    id: 'q1',
+  }).queue[0];
+  const failed = restoreFailedQueuedInput([], original, 'boom');
+  const retried = retryQueuedInput(failed, 'q1');
+  const next = dequeueNextQueuedInput(retried);
+
+  assert.equal(retried[0].status, 'pending');
+  assert.equal(retried[0].errorMessage, undefined);
+  assert.equal(next.item?.id, 'q1');
+});
+
+test('remove deletes only the selected queued input', () => {
+  let queue = enqueueQueuedInput([], input('first'), { id: 'q1' }).queue;
+  queue = enqueueQueuedInput(queue, input('second'), { id: 'q2' }).queue;
+
+  assert.deepEqual(removeQueuedInput(queue, 'q1').map(item => item.id), ['q2']);
+  assert.deepEqual(removeQueuedInput(queue, 'missing').map(item => item.id), [
+    'q1',
+    'q2',
+  ]);
+});

package/components/AgentScopeRuntimeWebUI/core/Chat/InputQueue/index.ts

@@ -0,0 +1,122 @@
+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 const MAX_INPUT_QUEUE_SIZE = 50;
+
+let queueId = 0;
+
+export function createQueuedInputItem(
+  data: IAgentScopeRuntimeWebUIInputData,
+  options?: {
+    id?: string;
+    now?: number;
+  },
+): QueuedInputItem {
+  return {
+    id:
+      options?.id ||
+      `input-queue-${Date.now().toString(36)}-${(++queueId).toString(36)}`,
+    data,
+    status: 'pending',
+    retryCount: 0,
+    createdAt: options?.now ?? Date.now(),
+  };
+}
+
+export function enqueueQueuedInput(
+  queue: QueuedInputItem[],
+  data: IAgentScopeRuntimeWebUIInputData,
+  options?: {
+    maxSize?: number;
+    id?: string;
+    now?: number;
+  },
+): EnqueueQueuedInputResult {
+  const maxSize = options?.maxSize ?? MAX_INPUT_QUEUE_SIZE;
+  if (queue.length >= maxSize) {
+    return { queue, reason: 'full' };
+  }
+
+  const item = createQueuedInputItem(data, options);
+  return {
+    queue: [...queue, item],
+    item,
+  };
+}
+
+export function dequeueNextQueuedInput(queue: QueuedInputItem[]): {
+  item?: QueuedInputItem;
+  queue: QueuedInputItem[];
+} {
+  const next = queue[0];
+  if (!next || next.status !== 'pending') {
+    return { queue };
+  }
+
+  return {
+    item: next,
+    queue: queue.slice(1),
+  };
+}
+
+export function removeQueuedInput(
+  queue: QueuedInputItem[],
+  id: string,
+): QueuedInputItem[] {
+  return queue.filter(item => item.id !== id);
+}
+
+export function retryQueuedInput(
+  queue: QueuedInputItem[],
+  id: string,
+): QueuedInputItem[] {
+  return queue.map(item =>
+    item.id === id
+      ? {
+          ...item,
+          status: 'pending',
+          errorMessage: undefined,
+        }
+      : item,
+  );
+}
+
+export function restoreFailedQueuedInput(
+  queue: QueuedInputItem[],
+  item: QueuedInputItem,
+  error?: unknown,
+): QueuedInputItem[] {
+  return [
+    {
+      ...item,
+      status: 'failed',
+      retryCount: item.retryCount + 1,
+      errorMessage: error instanceof Error ? error.message : String(error || ''),
+    },
+    ...queue,
+  ];
+}
+
+export function canSubmitDirectly(options: {
+  loading: boolean | string;
+  queueLength: number;
+  draining: boolean;
+}) {
+  return !options.loading && options.queueLength === 0 && !options.draining;
+}

package/components/AgentScopeRuntimeWebUI/core/Chat/hooks/useChatController.tsx

@@ -1,11 +1,21 @@
 import { sleep } from "@agentscope-ai/chat";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useContextSelector } from "use-context-selector";
 import { ChatAnywhereInputContext } from "../../Context/ChatAnywhereInputContext";
 import { ChatAnywhereSessionsContext } from "../../Context/ChatAnywhereSessionsContext";
 import useChatAnywhereEventEmitter from "../../Context/useChatAnywhereEventEmitter";
 import { IAgentScopeRuntimeWebUIMessage } from "@agentscope-ai/chat";
 import { InputProps } from "../Input";
+import {
+  canSubmitDirectly,
+  dequeueNextQueuedInput,
+  enqueueQueuedInput,
+  MAX_INPUT_QUEUE_SIZE,
+  removeQueuedInput,
+  restoreFailedQueuedInput,
+  retryQueuedInput,
+  type QueuedInputItem,
+} from "../InputQueue";
 import useChatMessageHandler from "./useChatMessageHandler";
 import useChatRequest from "./useChatRequest";
 import useChatSessionHandler from "./useChatSessionHandler";
@@ -18,6 +28,7 @@ import ReactDOM from "react-dom";
  */
 export default function useChatController() {
   const setLoading = useContextSelector(ChatAnywhereInputContext, v => v.setLoading);
+  const getLoading = useContextSelector(ChatAnywhereInputContext, v => v.getLoading);
   const currentSessionId = useContextSelector(ChatAnywhereSessionsContext, v => v.currentSessionId);
   const apiOptions = useChatAnywhereOptions(v => v.api);
   const apiOptionsRef = useRef(apiOptions);
@@ -43,6 +54,15 @@ export default function useChatController() {
      */
     activeSessionId?: string;
   }>({ activeRequestId: 0 });
+  const [inputQueue, setInputQueue] = useState<QueuedInputItem[]>([]);
+  const inputQueueRef = useRef<QueuedInputItem[]>([]);
+  const drainTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const drainingRef = useRef(false);
+  const drainQueueRef = useRef<(() => Promise<void>) | null>(null);
+
+  useEffect(() => {
+    inputQueueRef.current = inputQueue;
+  }, [inputQueue]);
 
   // Message handler
   const messageHandler = useChatMessageHandler({ currentQARef });
@@ -53,6 +73,17 @@ export default function useChatController() {
   /**
    * Finalize the current response and reset UI loading state.
    */
+  const scheduleDrainQueue = useCallback(() => {
+    if (drainTimerRef.current) {
+      clearTimeout(drainTimerRef.current);
+    }
+
+    drainTimerRef.current = setTimeout(() => {
+      drainTimerRef.current = null;
+      void drainQueueRef.current?.();
+    }, 0);
+  }, []);
+
   const finishResponse = useCallback((status: 'finished' | 'interrupted' = 'finished') => {
     if (!currentQARef.current.response) return;
 
@@ -63,7 +94,8 @@ export default function useChatController() {
     });
 
     sessionHandler.syncSessionMessages(messageHandler.getMessages());
-  }, [setLoading, messageHandler, sessionHandler]);
+    scheduleDrainQueue();
+  }, [setLoading, messageHandler, sessionHandler, scheduleDrainQueue]);
 
   // API request handling
   const { request, reconnect } = useChatRequest({
@@ -76,7 +108,7 @@ export default function useChatController() {
   /**
    * Handle user message submission.
    */
-  const handleSubmit = useCallback<InputProps['onSubmit']>(async (data) => {
+  const submitNow = useCallback<InputProps['onSubmit']>(async (data) => {
     // 0. Abort any previous in-flight SSE. We do NOT call the cancel API here
     //    — the user is sending a new message, not explicitly cancelling.
     //    Cancel is only invoked from handleCancel.
@@ -120,6 +152,61 @@ export default function useChatController() {
     // mockRequest(mockdata);
   }, [messageHandler, sessionHandler, request, setLoading]);
 
+  const enqueueInput = useCallback((data: Parameters<InputProps['onSubmit']>[0]) => {
+    const result = enqueueQueuedInput(inputQueueRef.current, data, {
+      maxSize: MAX_INPUT_QUEUE_SIZE,
+    });
+    inputQueueRef.current = result.queue;
+    setInputQueue(result.queue);
+  }, []);
+
+  const drainQueue = useCallback(async () => {
+    if (drainingRef.current || getLoading()) return;
+
+    const result = dequeueNextQueuedInput(inputQueueRef.current);
+    const nextItem = result.item;
+
+    if (!nextItem) return;
+
+    inputQueueRef.current = result.queue;
+    setInputQueue(result.queue);
+
+    drainingRef.current = true;
+    try {
+      await submitNow(nextItem.data);
+    } catch (error) {
+      setLoading(false);
+      const restored = restoreFailedQueuedInput(inputQueueRef.current, nextItem, error);
+      inputQueueRef.current = restored;
+      setInputQueue(restored);
+    } finally {
+      drainingRef.current = false;
+    }
+  }, [getLoading, setLoading, submitNow]);
+
+  useEffect(() => {
+    drainQueueRef.current = drainQueue;
+  }, [drainQueue]);
+
+  const handleSubmit = useCallback<InputProps['onSubmit']>(async (data) => {
+    if (!canSubmitDirectly({
+      loading: getLoading(),
+      queueLength: inputQueueRef.current.length,
+      draining: drainingRef.current,
+    })) {
+      enqueueInput(data);
+      return;
+    }
+
+    await submitNow(data);
+  }, [enqueueInput, getLoading, submitNow]);
+
+  useEffect(() => {
+    if (!getLoading() && inputQueue.length > 0) {
+      scheduleDrainQueue();
+    }
+  }, [getLoading, inputQueue.length, scheduleDrainQueue]);
+
 
   const handleApproval = useCallback(async ({ input }) => {
     currentQARef.current.abortController?.abort();
@@ -259,6 +346,10 @@ export default function useChatController() {
     };
 
     return () => {
+      if (drainTimerRef.current) {
+        clearTimeout(drainTimerRef.current);
+        drainTimerRef.current = null;
+      }
       currentQARef.current.abortController?.abort();
       currentQARef.current.activeRequestId += 1;
     };
@@ -298,6 +389,22 @@ export default function useChatController() {
   return {
     handleSubmit,
     handleCancel,
+    inputQueue,
+    enqueueQueuedInput: enqueueInput,
+    removeQueuedInput: (id: string) => {
+      const next = removeQueuedInput(inputQueueRef.current, id);
+      inputQueueRef.current = next;
+      setInputQueue(next);
+    },
+    clearQueuedInputs: () => {
+      inputQueueRef.current = [];
+      setInputQueue([]);
+    },
+    retryQueuedInput: (id: string) => {
+      const next = retryQueuedInput(inputQueueRef.current, id);
+      inputQueueRef.current = next;
+      setInputQueue(next);
+      scheduleDrainQueue();
+    },
   };
 }
-

package/components/AgentScopeRuntimeWebUI/core/Chat/index.tsx

@@ -7,14 +7,32 @@ import { useChatAnywhereSessionLoader } from "../Context/ChatAnywhereSessionsCon
 
 export default function Chat() {
   const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-chat');
-  const { handleSubmit, handleCancel } = useChatController();
+  const {
+    handleSubmit,
+    handleCancel,
+    inputQueue,
+    enqueueQueuedInput,
+    removeQueuedInput,
+    clearQueuedInputs,
+    retryQueuedInput,
+  } = useChatController();
   useChatAnywhereSessionLoader();
 
   return <>
     <Style />
     <div className={prefixCls}>
       <MessageList onSubmit={handleSubmit} />
-      <Input onCancel={handleCancel} onSubmit={handleSubmit} />
+      <Input
+        onCancel={handleCancel}
+        onSubmit={handleSubmit}
+        queue={{
+          items: inputQueue,
+          onEnqueue: enqueueQueuedInput,
+          onRemove: removeQueuedInput,
+          onClear: clearQueuedInputs,
+          onRetry: retryQueuedInput,
+        }}
+      />
     </div>
   </>;
-}
+}

package/components/AgentScopeRuntimeWebUI/core/Chat/styles.tsx

@@ -54,6 +54,73 @@ export default createGlobalStyle`
   min-width: 300px;
   margin: 0 auto;
 }
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-queue {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 8px;
+  padding: 8px;
+  border: 1px solid ${(p) => p.theme.colorBorderSecondary};
+  border-radius: 8px;
+  background: ${(p) => p.theme.colorFillTertiary};
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${(p) => p.theme.colorTextSecondary};
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-queue-list {
+  display: flex;
+  max-height: 180px;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: auto;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-queue-item {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 4px 6px;
+  border-radius: 6px;
+  background: ${(p) => p.theme.colorBgContainer};
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-queue-index {
+  color: ${(p) => p.theme.colorTextQuaternary};
+  font-size: 12px;
+  text-align: center;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-queue-content {
+  min-width: 0;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-queue-text {
+  overflow: hidden;
+  color: ${(p) => p.theme.colorText};
+  font-size: 12px;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-queue-error {
+  overflow: hidden;
+  color: ${(p) => p.theme.colorError};
+  font-size: 11px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .${(p) => p.theme.prefixCls}-chat-anywhere-input-blank {
   height: 16px;
-`;
+`;

package/components/AgentScopeRuntimeWebUI/core/ChatAnywhere/index.tsx

@@ -1,6 +1,6 @@
 import Layout from '../Layout';
 import type { IAgentScopeRuntimeWebUIOptions } from '@agentscope-ai/chat';
-import { forwardRef, useMemo, useState } from 'react';
+import { forwardRef, useMemo } from 'react';
 import AgentScopeRuntimeRequestCard from '../AgentScopeRuntime/Request/Card';
 import AgentScopeRuntimeResponseCard from '../AgentScopeRuntime/Response/Card';
 import ComposedProvider from './ComposedProvider';