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

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

@@ -1,14 +1,21 @@
-import { useCallback } from "react";
+import { useCallback, type ReactNode } from "react";
 import { useProviderContext, ChatInput, Disclaimer } from '@agentscope-ai/chat';
 import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext";
 import { useGetState } from 'ahooks';
 import { useChatAnywhereInput } from "../../Context/ChatAnywhereInputContext";
 import useAttachments from "./useAttachments";
 import { IAgentScopeRuntimeWebUIInputData } from "@agentscope-ai/chat";
+import type { QueueEnqueueResult, QueuedInputItem } from "../InputQueue";
 
 export interface InputProps {
   onCancel: () => void;
   onSubmit: (data: IAgentScopeRuntimeWebUIInputData) => void;
+  queue?: {
+    items: QueuedInputItem[];
+    isOwner: boolean;
+    panel?: ReactNode;
+    onEnqueue: (data: IAgentScopeRuntimeWebUIInputData) => QueueEnqueueResult | Promise<QueueEnqueueResult>;
+  };
 }
 
 export default function Input(props: InputProps) {
@@ -38,24 +45,83 @@ export default function Input(props: InputProps) {
     uploadFileListHeader
   } = useAttachments(attachments, { disabled: !!inputContext.disabled });
 
+  const getSubmittableData = useCallback(() => {
+    const fileList = (getFileList?.() || []).filter(i => i.response?.url);
+    const query = getContent();
+    if (!query.trim() && fileList.length === 0) return;
+
+    return {
+      query,
+      text: query,
+      fileList,
+      attachments: fileList,
+    };
+  }, [getContent, getFileList]);
+
+  const clearInput = useCallback(() => {
+    setContent('');
+    setFileList?.([]);
+  }, [setContent, setFileList]);
+
+  const handleEnqueue = useCallback(async () => {
+    const next = await beforeSubmit();
+    if (!next) return;
+
+    const data = getSubmittableData();
+    if (!data) return;
+    if (!props.queue) return;
+
+    const result = await props.queue.onEnqueue(data);
+    if (result.ok) {
+      clearInput();
+    }
+  }, [beforeSubmit, clearInput, getSubmittableData, props.queue]);
 
   const handleSubmit = useCallback(async () => {
     const next = await beforeSubmit();
     if (!next) return;
 
-    const fileList = (getFileList?.() || []).filter(i => i.response?.url);
-    props.onSubmit({ query: getContent(), fileList });
-    setContent('');
-    setFileList && setFileList([]);
-  }, []);
+    const data = getSubmittableData();
+    if (!data) return;
+
+    if (props.queue && (
+      inputContext.loading ||
+      props.queue.items.length ||
+      props.queue.isOwner === false
+    )) {
+      const result = await props.queue.onEnqueue(data);
+      if (result.ok) {
+        clearInput();
+      }
+    } else {
+      props.onSubmit(data);
+      clearInput();
+    }
+  }, [beforeSubmit, clearInput, getSubmittableData, inputContext.loading, props.onSubmit, props.queue]);
+
+  const handleKeyDownCapture = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Enter' || event.shiftKey) return;
+    if (event.nativeEvent?.isComposing) return;
+    if (!props.queue) return;
+    const forceEnqueue = event.ctrlKey || event.metaKey;
+    if (!forceEnqueue && !inputContext.loading && !props.queue?.items.length) return;
+
+    const data = getSubmittableData();
+    if (!data) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    void (forceEnqueue ? handleEnqueue() : handleSubmit());
+  }, [getSubmittableData, handleEnqueue, handleSubmit, inputContext.loading, props.queue, props.queue?.items.length]);
 
   const handleCancel = useCallback(() => {
     props.onCancel();
-  }, []);
+  }, [props.onCancel]);
 
-  return <div className={prefixCls}>
+  return <div className={prefixCls} onKeyDownCapture={handleKeyDownCapture}>
     <div className={`${prefixCls}-wrapper`}>
       {beforeUI}
+      {props.queue?.panel}
       <ChatInput
         loading={inputContext.loading}
         disabled={inputContext.disabled}
@@ -80,4 +146,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,289 @@
+import { useEffect, useState } from 'react';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { IconButton } from '@agentscope-ai/design';
+import {
+  SparkClearLine,
+  SparkDeleteLine,
+  SparkDragDotLine,
+  SparkEditLine,
+  SparkPauseLine,
+  SparkPlayLine,
+  SparkRefreshLine,
+  SparkSendLine,
+} from '@agentscope-ai/icons';
+import { Tooltip } from 'antd';
+import { useTranslation } from '../../Context/ChatAnywhereI18nContext';
+import type { QueuedInputItem } from './index';
+
+interface InputQueuePanelProps {
+  items: QueuedInputItem[];
+  paused: boolean;
+  isOwner: boolean;
+  onRemove: (id: string) => void;
+  onClear: () => void;
+  onRetry: (id: string) => void;
+  onTogglePaused: () => void;
+  onReorder: (sourceId: string, targetId: string) => void;
+  onUpdateQuery: (id: string, query: string) => void;
+  onSendNow: (id: string) => void;
+}
+
+export default function InputQueuePanel(props: InputQueuePanelProps) {
+  const {
+    items,
+    paused,
+    isOwner,
+    onRemove,
+    onClear,
+    onRetry,
+    onTogglePaused,
+    onReorder,
+    onUpdateQuery,
+    onSendNow,
+  } = props;
+  const [draggingId, setDraggingId] = useState<string>();
+  const [dragOverId, setDragOverId] = useState<string>();
+  const [editingId, setEditingId] = useState<string>();
+  const [draftQuery, setDraftQuery] = useState('');
+  const prefixCls = useProviderContext().getPrefixCls(
+    'chat-anywhere-input-queue',
+  );
+  const { t } = useTranslation();
+  const tr = (key: Parameters<typeof t>[0]) => t?.(key) || key;
+
+  useEffect(() => {
+    if (editingId && !items.some(item => item.id === editingId)) {
+      setEditingId(undefined);
+      setDraftQuery('');
+    }
+  }, [editingId, items]);
+
+  const isNoDragTarget = (target: EventTarget | null) => {
+    return target instanceof HTMLElement && !!target.closest('[data-no-drag]');
+  };
+
+  const startEdit = (item: QueuedInputItem) => {
+    setEditingId(item.id);
+    setDraftQuery(item.data.query || '');
+  };
+
+  const commitEdit = () => {
+    if (!editingId) return;
+    onUpdateQuery(editingId, draftQuery);
+    setEditingId(undefined);
+    setDraftQuery('');
+  };
+
+  const cancelEdit = () => {
+    setEditingId(undefined);
+    setDraftQuery('');
+  };
+
+  const clearDragState = () => {
+    setDraggingId(undefined);
+    setDragOverId(undefined);
+  };
+
+  const getFileName = (file: NonNullable<QueuedInputItem['data']['fileList']>[number]) => {
+    return file.name || file.response?.name || file.response?.url || file.url || tr('queue.attachmentOnly');
+  };
+
+  const getFileUrl = (file: NonNullable<QueuedInputItem['data']['fileList']>[number]) => {
+    return file.thumbUrl || file.url || file.response?.url;
+  };
+
+  const isImageFile = (file: NonNullable<QueuedInputItem['data']['fileList']>[number]) => {
+    return file.type?.startsWith('image/') || /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(getFileName(file));
+  };
+
+  if (!items.length) return null;
+
+  return (
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-header`}>
+        <div className={`${prefixCls}-title`}>
+          <span className={`${prefixCls}-pulse`} />
+          <span>{tr('queue.title')}</span>
+          {!isOwner ? (
+            <span className={`${prefixCls}-owner`}>{tr('queue.remoteOwner')}</span>
+          ) : null}
+          <span className={`${prefixCls}-count`}>{items.length}</span>
+        </div>
+        {isOwner ? <div className={`${prefixCls}-header-actions`}>
+          <Tooltip title={paused ? tr('queue.resume') : tr('queue.pause')}>
+            <IconButton
+              size="small"
+              bordered={false}
+              className={`${prefixCls}-clear`}
+              icon={paused ? <SparkPlayLine /> : <SparkPauseLine />}
+              onClick={onTogglePaused}
+            />
+          </Tooltip>
+          <Tooltip title={tr('queue.clear')}>
+            <IconButton
+              size="small"
+              bordered={false}
+              className={`${prefixCls}-clear`}
+              icon={<SparkClearLine />}
+              onClick={onClear}
+            />
+          </Tooltip>
+        </div> : null}
+      </div>
+      <div className={`${prefixCls}-list`}>
+        {items.map((item, index) => {
+          const failed = item.status === 'failed';
+          const files = item.data.attachments || item.data.fileList || [];
+          const statusText = failed
+            ? tr('queue.failed')
+            : index === 0
+              ? tr('queue.next')
+              : `${index + 1}`;
+          const queryText = item.data.query || tr('queue.attachmentOnly');
+          const itemClassName = [
+            `${prefixCls}-item`,
+            index === 0 ? `${prefixCls}-item-next` : '',
+            failed ? `${prefixCls}-item-failed` : '',
+          ]
+            .filter(Boolean)
+            .join(' ');
+
+          return (
+            <div
+              className={[
+                itemClassName,
+                draggingId === item.id ? `${prefixCls}-item-dragging` : '',
+                dragOverId === item.id && draggingId !== item.id
+                  ? `${prefixCls}-item-drag-over`
+                  : '',
+              ].filter(Boolean).join(' ')}
+              draggable
+              key={item.id}
+              onDragStart={(event) => {
+                if (isNoDragTarget(event.target)) {
+                  event.preventDefault();
+                  return;
+                }
+
+                setDraggingId(item.id);
+                event.dataTransfer.effectAllowed = 'move';
+                event.dataTransfer.setData('text/plain', item.id);
+              }}
+              onDragOver={(event) => {
+                if (!draggingId || draggingId === item.id) return;
+                event.preventDefault();
+                event.dataTransfer.dropEffect = 'move';
+                setDragOverId(item.id);
+              }}
+              onDragLeave={() => {
+                if (dragOverId === item.id) setDragOverId(undefined);
+              }}
+              onDrop={(event) => {
+                event.preventDefault();
+                const sourceId = draggingId || event.dataTransfer.getData('text/plain');
+                clearDragState();
+                if (sourceId && sourceId !== item.id) {
+                  onReorder(sourceId, item.id);
+                }
+              }}
+              onDragEnd={clearDragState}
+            >
+              <span className={`${prefixCls}-drag-handle`}>
+                <SparkDragDotLine />
+              </span>
+              <span className={`${prefixCls}-index`}>{statusText}</span>
+              <div className={`${prefixCls}-content`}>
+                {editingId === item.id ? (
+                  <input
+                    autoFocus
+                    className={`${prefixCls}-edit-input`}
+                    data-no-drag
+                    value={draftQuery}
+                    onBlur={commitEdit}
+                    onChange={(event) => setDraftQuery(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        event.preventDefault();
+                        commitEdit();
+                      }
+                      if (event.key === 'Escape') {
+                        event.preventDefault();
+                        cancelEdit();
+                      }
+                    }}
+                  />
+                ) : (
+                  <span className={`${prefixCls}-text`} title={queryText}>
+                    {queryText}
+                  </span>
+                )}
+                {files.length ? (
+                  <span className={`${prefixCls}-files`}>
+                    {files.slice(0, 2).map(file => {
+                      const name = getFileName(file);
+                      const url = getFileUrl(file);
+                      return (
+                        <span className={`${prefixCls}-file`} key={file.uid || name} title={name}>
+                          {isImageFile(file) && url ? (
+                            <img alt="" className={`${prefixCls}-file-thumb`} src={url} />
+                          ) : (
+                            <span className={`${prefixCls}-file-icon`}>#</span>
+                          )}
+                          <span className={`${prefixCls}-file-name`}>{name}</span>
+                        </span>
+                      );
+                    })}
+                    {files.length > 2 ? (
+                      <span className={`${prefixCls}-file-more`}>+{files.length - 2}</span>
+                    ) : null}
+                  </span>
+                ) : null}
+                {failed ? (
+                  <span className={`${prefixCls}-error`}>
+                    {item.errorMessage || tr('queue.failed')}
+                  </span>
+                ) : null}
+              </div>
+              <div className={`${prefixCls}-actions`} data-no-drag>
+                <Tooltip title={tr('common.edit')}>
+                  <IconButton
+                    size="small"
+                    bordered={false}
+                    icon={<SparkEditLine />}
+                    onClick={() => startEdit(item)}
+                  />
+                </Tooltip>
+                {isOwner ? <Tooltip title={tr('queue.sendNow')}>
+                    <IconButton
+                      size="small"
+                      bordered={false}
+                      icon={<SparkSendLine />}
+                      onClick={() => onSendNow(item.id)}
+                    />
+                  </Tooltip> : null}
+                {isOwner && failed ? (
+                  <Tooltip title={tr('queue.retry')}>
+                    <IconButton
+                      size="small"
+                      bordered={false}
+                      icon={<SparkRefreshLine />}
+                      onClick={() => onRetry(item.id)}
+                    />
+                  </Tooltip>
+                ) : null}
+                {isOwner ? <Tooltip title={tr('common.delete')}>
+                  <IconButton
+                    size="small"
+                    bordered={false}
+                    icon={<SparkDeleteLine />}
+                    onClick={() => onRemove(item.id)}
+                  />
+                </Tooltip> : null}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,235 @@
+import assert from 'node:assert/strict';
+import {
+  assignInputQueueOwner,
+  canSubmitDirectly,
+  createEmptyInputQueueState,
+  createQueuedInputItem,
+  createSendNowCommand,
+  dequeueNextQueuedInput,
+  enqueueInputQueueState,
+  enqueueQueuedInput,
+  INPUT_QUEUE_OWNER_TTL,
+  isInputQueueOwner,
+  isInputQueueStateEmpty,
+  reorderQueuedInput,
+  removeQueuedInput,
+  restoreFailedQueuedInput,
+  retryQueuedInput,
+  updateQueuedInputQuery,
+} 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,
+  );
+  assert.equal(
+    canSubmitDirectly({
+      loading: false,
+      queueLength: 0,
+      draining: false,
+      paused: true,
+    }),
+    false,
+  );
+  assert.equal(
+    canSubmitDirectly({
+      loading: false,
+      queueLength: 0,
+      draining: false,
+      canExecute: false,
+    }),
+    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('full queue state is not rewritten when enqueue is rejected', () => {
+  const state = enqueueInputQueueState(createEmptyInputQueueState(1), input('first'), {
+    id: 'q1',
+    maxSize: 1,
+    now: 2,
+  }).state;
+  const result = enqueueInputQueueState(state, input('second'), {
+    id: 'q2',
+    maxSize: 1,
+    now: 3,
+  });
+
+  assert.equal(result.reason, 'full');
+  assert.equal(result.state, state);
+});
+
+test('queued input item preserves full message body aliases', () => {
+  const file = { uid: 'f1', name: 'shot.png', response: { url: '/shot.png' } };
+  const item = createQueuedInputItem({
+    query: 'with file',
+    fileList: [file as any],
+  });
+
+  assert.equal(item.data.text, 'with file');
+  assert.deepEqual(item.data.attachments, [file]);
+});
+
+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',
+  ]);
+});
+
+test('queue state keeps owner and paused metadata separate from items', () => {
+  const empty = createEmptyInputQueueState(1);
+  const queued = enqueueInputQueueState(empty, input('first'), {
+    id: 'q1',
+    now: 2,
+    ownerTabId: 'tab-a',
+  }).state;
+
+  assert.equal(queued.ownerTabId, 'tab-a');
+  assert.equal(queued.ownerUpdatedAt, 2);
+  assert.equal(queued.paused, false);
+  assert.deepEqual(queued.items.map(item => item.id), ['q1']);
+});
+
+test('queue owner is isolated by tab and can be reclaimed when stale', () => {
+  const owned = assignInputQueueOwner(createEmptyInputQueueState(1), 'tab-a', 10);
+
+  assert.equal(isInputQueueOwner(owned, 'tab-a', 12), true);
+  assert.equal(isInputQueueOwner(owned, 'tab-b', 12), false);
+  assert.equal(isInputQueueOwner(owned, 'tab-b', 10 + INPUT_QUEUE_OWNER_TTL + 1), true);
+});
+
+test('drag reorder moves a queued input before the drop target', () => {
+  let queue = enqueueQueuedInput([], input('first'), { id: 'q1' }).queue;
+  queue = enqueueQueuedInput(queue, input('second'), { id: 'q2' }).queue;
+  queue = enqueueQueuedInput(queue, input('third'), { id: 'q3' }).queue;
+
+  assert.deepEqual(reorderQueuedInput(queue, 'q3', 'q1').map(item => item.id), [
+    'q3',
+    'q1',
+    'q2',
+  ]);
+  assert.equal(reorderQueuedInput(queue, 'missing', 'q1'), queue);
+  assert.equal(reorderQueuedInput(queue, 'q2', 'q2'), queue);
+});
+
+test('queued input query can be edited before sending', () => {
+  const queue = enqueueQueuedInput([], input('old'), { id: 'q1' }).queue;
+  const edited = updateQueuedInputQuery(
+    restoreFailedQueuedInput([], queue[0], 'boom'),
+    'q1',
+    'new',
+  );
+
+  assert.equal(edited[0].data.query, 'new');
+  assert.equal(edited[0].data.text, 'new');
+  assert.equal(edited[0].status, 'pending');
+  assert.equal(edited[0].errorMessage, undefined);
+});
+
+test('empty queue state is removable from storage', () => {
+  assert.equal(isInputQueueStateEmpty(createEmptyInputQueueState()), true);
+
+  const queued = enqueueInputQueueState(createEmptyInputQueueState(), input('first'), {
+    id: 'q1',
+  }).state;
+  assert.equal(isInputQueueStateEmpty(queued), false);
+});
+
+test('send-now command carries selected task and source tab', () => {
+  const command = createSendNowCommand('q1', 'tab-a', 100);
+
+  assert.equal(command.type, 'send-now');
+  assert.equal(command.itemId, 'q1');
+  assert.equal(command.sourceTabId, 'tab-a');
+  assert.equal(command.createdAt, 100);
+});