@agentscope-ai/chat 1.1.72-beta.1785916409537 → 1.1.72

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Actions.tsx

@@ -26,7 +26,7 @@ export default function Tools(props: {
   isLast?: boolean;
 }) {
   const { t } = useTranslation();
-  const defaultActions = [
+  const actionsOptionsList = useChatAnywhereOptions(v => v.actions?.list) || [
     {
       icon: <SparkCopyLine />,
       onClick: () => {
@@ -34,10 +34,6 @@ export default function Tools(props: {
       }
     }
   ];
-  const configuredActions = useChatAnywhereOptions(v => v.actions?.list);
-  const actionsOptionsList = Array.isArray(configuredActions)
-    ? configuredActions
-    : defaultActions;
 
   const replace = useChatAnywhereOptions(v => v.actions?.replace) ?? true;
   const rightOption = useChatAnywhereOptions(v => v.actions?.right);
@@ -88,3 +84,4 @@ export default function Tools(props: {
     right={rightNode}
   />
 }
+

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Card.tsx

@@ -33,9 +33,6 @@ function DefaultResponseRender(props: {
 }) {
   const avatar = useChatAnywhereOptions(v => v.welcome.avatar);
   const nick = useChatAnywhereOptions(v => v.welcome.nick);
-  const nickNode = typeof nick === 'string' || React.isValidElement(nick)
-    ? nick
-    : null;
   const messages = useMemo(() => {
     return AgentScopeRuntimeResponseBuilder.mergeToolMessages(props.data.output);
   }, [props.data.output])
@@ -46,7 +43,7 @@ function DefaultResponseRender(props: {
   return <>
     {avatar && <Flex align="center" gap={8} style={{ marginBottom: 8 }}>
       <Avatar src={avatar} />
-      {nickNode && <span>{nickNode}</span>}
+      {nick && <span>{nick as string}</span>}
     </Flex>}
     {props.contentPrepend ?? null}
     {

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

@@ -5,26 +5,16 @@ import {
   useProviderContext,
 } from '@agentscope-ai/chat';
 import { useGetState } from 'ahooks';
-import { useCallback, type ReactNode } from 'react';
+import { Children, useCallback, useRef } from 'react';
 import { useChatAnywhereInput } from '../../Context/ChatAnywhereInputContext';
 import { useChatAnywhereOptions } from '../../Context/ChatAnywhereOptionsContext';
-import type { QueueEnqueueResult, QueuedInputItem } from '../InputQueue';
-import { hasSubmittableAttachments } from './submission';
-import useAttachments from './useAttachments';
+import useAttachments, { type AttachmentUploadFile } from './useAttachments';
+import useLongTextUpload from './useLongTextUpload';
+import useMentions from './useMentions';
 
 export interface InputProps {
   onCancel: () => void;
-  onSubmit: (
-    data: IAgentScopeRuntimeWebUIInputData,
-  ) => void | QueueEnqueueResult | Promise<void | QueueEnqueueResult>;
-  queue?: {
-    items: QueuedInputItem[];
-    isOwner: boolean;
-    panel?: ReactNode;
-    onEnqueue: (
-      data: IAgentScopeRuntimeWebUIInputData,
-    ) => QueueEnqueueResult | Promise<QueueEnqueueResult>;
-  };
+  onSubmit: (data: IAgentScopeRuntimeWebUIInputData) => void;
 }
 
 export default function Input(props: InputProps) {
@@ -32,6 +22,7 @@ export default function Input(props: InputProps) {
   const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-input');
   const senderOptions = useChatAnywhereOptions((v) => v.sender);
   const inputContext = useChatAnywhereInput((v) => v);
+  const uploadFileRef = useRef<AttachmentUploadFile | null>(null);
 
   const {
     placeholder = '',
@@ -47,142 +38,140 @@ export default function Input(props: InputProps) {
     prefix,
     allowSpeech,
     suggestions,
+    mentions,
+    components,
+    longTextUpload,
   } = senderOptions || {};
 
+  const mentionController = useMentions(
+    mentions,
+    content,
+    setContent,
+    !!inputContext.disabled,
+  );
+
+  const uploadLongTextFile = useCallback<AttachmentUploadFile>(
+    (fileToUpload, uploadOptions) => {
+      if (!uploadFileRef.current) {
+        return Promise.reject(new Error('Upload request is not available.'));
+      }
+
+      return uploadFileRef.current(fileToUpload, uploadOptions);
+    },
+    [],
+  );
+
+  const longTextUploadController = useLongTextUpload({
+    options: longTextUpload,
+    fallbackCustomRequest: attachments?.customRequest,
+    maxLength,
+    getContent,
+    setContent,
+    clearMentions: mentionController.clear,
+    uploadFile: uploadLongTextFile,
+    onContentChange: mentionController.handleValueChange,
+  });
+
   const {
-    fileList,
     getFileList,
     setFileList,
+    uploadFile,
     handlePasteFile,
     handleDropFile,
     uploadIconButton,
     uploadFileListHeader,
-  } = useAttachments(attachments, { disabled: !!inputContext.disabled });
+  } = useAttachments(attachments, {
+    disabled: !!inputContext.disabled || longTextUploadController.uploading,
+  });
+  uploadFileRef.current = uploadFile;
 
-  const getSubmittableData = useCallback(() => {
-    const fileList = (getFileList?.() || []).filter((i) => i.response?.url);
-    const query = getContent();
-    if (!query.trim() && fileList.length === 0) return;
+  const handleSubmit = useCallback(async () => {
+    if (longTextUploadController.isUploading()) return;
 
-    return {
-      query,
-      text: query,
+    const fileList = (getFileList?.() || []).filter((i) => i.response?.url);
+    const inputData: IAgentScopeRuntimeWebUIInputData = {
+      query: mentionController.getQuery(getContent()),
       fileList,
-      attachments: fileList,
+      mentions: mentionController.mentions.map(({ value, type }) => ({
+        value,
+        type,
+      })),
     };
-  }, [getContent, getFileList]);
+    const beforeSubmitResult = await beforeSubmit(inputData);
+    const normalizedResult =
+      typeof beforeSubmitResult === 'boolean'
+        ? { proceed: beforeSubmitResult }
+        : beforeSubmitResult;
+
+    if (normalizedResult.clear) {
+      longTextUploadController.resetPromptState();
+      setContent('');
+      setFileList?.([]);
+      mentionController.clear();
+    }
+    if (!normalizedResult.proceed) return;
 
-  const clearInput = useCallback(() => {
+    props.onSubmit({
+      ...inputData,
+      query: normalizedResult.query ?? inputData.query,
+    });
+    longTextUploadController.resetPromptState();
     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 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 {
-      const result = await props.onSubmit(data);
-      if (result && !result.ok) return;
-      clearInput();
-    }
+    mentionController.clear();
   }, [
     beforeSubmit,
-    clearInput,
-    getSubmittableData,
-    inputContext.loading,
-    props.onSubmit,
-    props.queue,
+    getContent,
+    getFileList,
+    longTextUploadController,
+    mentionController,
+    props,
+    setContent,
+    setFileList,
   ]);
 
-  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} onKeyDownCapture={handleKeyDownCapture}>
+    <div className={prefixCls}>
       <div className={`${prefixCls}-wrapper`}>
         {beforeUI}
-        {props.queue?.panel}
-        <ChatInput
-          loading={inputContext.loading}
-          disabled={inputContext.disabled}
-          placeholder={placeholder}
-          value={content}
-          prefix={
-            <>
-              {uploadIconButton}
-              {prefix}
-            </>
-          }
-          header={uploadFileListHeader}
-          onChange={setContent}
-          maxLength={maxLength}
-          showCharacterCount={showCharacterCount}
-          characterCountRender={characterCountRender}
-          actionAffix={actionAffix}
-          onSubmit={handleSubmit}
-          onCancel={handleCancel}
-          allowEmptySubmit={hasSubmittableAttachments(fileList)}
-          allowSubmitWhenLoading={!!props.queue}
-          allowSpeech={allowSpeech}
-          onPasteFile={handlePasteFile}
-          onDropFile={handleDropFile}
-          suggestions={suggestions}
-        />
+        {mentionController.wrapInput(
+          <ChatInput
+            loading={inputContext.loading}
+            disabled={
+              inputContext.disabled || longTextUploadController.uploading
+            }
+            placeholder={placeholder}
+            value={content}
+            prefix={Children.toArray([uploadIconButton, prefix])}
+            header={Children.toArray([
+              uploadFileListHeader,
+              mentionController.header,
+            ])}
+            onChange={longTextUploadController.handleContentChange}
+            onKeyDown={mentionController.handleKeyDown}
+            onSelectionChange={mentionController.handleSelectionChange}
+            onBlur={mentionController.close}
+            submitType={mentionController.open ? false : 'enter'}
+            allowEmptySubmit={mentionController.mentions.length > 0}
+            maxLength={maxLength}
+            truncateOnMaxLength={!longTextUploadController.enabled}
+            showCharacterCount={showCharacterCount}
+            characterCountRender={characterCountRender}
+            actionAffix={actionAffix}
+            onSubmit={handleSubmit}
+            onCancel={handleCancel}
+            allowSpeech={allowSpeech}
+            onPaste={longTextUploadController.handlePaste}
+            onPasteFile={handlePasteFile}
+            onDropFile={handleDropFile}
+            suggestions={suggestions}
+            components={components}
+          />,
+        )}
         {afterUI}
       </div>
       {disclaimer ? (

package/components/AgentScopeRuntimeWebUI/core/Chat/Input/mentionUtils.ts

@@ -0,0 +1,104 @@
+import type { IAgentScopeRuntimeWebUISenderMentionItem } from '@agentscope-ai/chat';
+
+export interface MentionRange {
+  start: number;
+  end: number;
+  keyword: string;
+}
+
+export interface SelectedMention {
+  id: number;
+  item: IAgentScopeRuntimeWebUISenderMentionItem;
+  text: string;
+  start: number;
+  end: number;
+}
+
+function escapeRegExp(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export function findMentionRange(
+  value: string,
+  cursor: number,
+  trigger: string,
+): MentionRange | null {
+  if (!trigger) return null;
+
+  const contentBeforeCursor = value.slice(0, cursor);
+  const match = contentBeforeCursor.match(
+    new RegExp(
+      `(?:^|\\s)${escapeRegExp(trigger)}([^\\s${escapeRegExp(trigger)}]*)$`,
+    ),
+  );
+  if (!match) return null;
+
+  const tokenLength = trigger.length + match[1].length;
+  let end = cursor;
+  while (
+    end < value.length &&
+    !/\s/.test(value[end]) &&
+    !value.startsWith(trigger, end)
+  ) {
+    end += 1;
+  }
+  return {
+    start: cursor - tokenLength,
+    end,
+    keyword: match[1],
+  };
+}
+
+export function remapSelectedMentions(
+  previousValue: string,
+  nextValue: string,
+  mentions: SelectedMention[],
+) {
+  if (previousValue === nextValue) return mentions;
+
+  let prefixLength = 0;
+  const maxPrefix = Math.min(previousValue.length, nextValue.length);
+  while (
+    prefixLength < maxPrefix &&
+    previousValue[prefixLength] === nextValue[prefixLength]
+  ) {
+    prefixLength += 1;
+  }
+
+  let suffixLength = 0;
+  const maxSuffix = Math.min(
+    previousValue.length - prefixLength,
+    nextValue.length - prefixLength,
+  );
+  while (
+    suffixLength < maxSuffix &&
+    previousValue[previousValue.length - 1 - suffixLength] ===
+      nextValue[nextValue.length - 1 - suffixLength]
+  ) {
+    suffixLength += 1;
+  }
+
+  const previousEditEnd = previousValue.length - suffixLength;
+  const nextEditEnd = nextValue.length - suffixLength;
+  const delta = nextEditEnd - previousEditEnd;
+
+  return mentions.flatMap((mention) => {
+    let nextMention = mention;
+    if (mention.end <= prefixLength) {
+      nextMention = mention;
+    } else if (mention.start >= previousEditEnd) {
+      nextMention = {
+        ...mention,
+        start: mention.start + delta,
+        end: mention.end + delta,
+      };
+    } else {
+      return [];
+    }
+
+    return nextValue.slice(nextMention.start, nextMention.end) ===
+      nextMention.text
+      ? [nextMention]
+      : [];
+  });
+}

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

@@ -6,6 +6,19 @@ import { SparkAttachmentLine } from "@agentscope-ai/icons";
 import { Sender, Attachments } from '@agentscope-ai/chat';
 import React, { useCallback, useRef, useState } from "react";
 
+type UploadCustomRequest = NonNullable<IAgentScopeRuntimeWebUISenderAttachmentsOptions['customRequest']>;
+
+export interface UploadFileOptions {
+  customRequest?: UploadCustomRequest;
+  fileName?: string;
+  fileType?: string;
+}
+
+export type AttachmentUploadFile = (
+  fileToUpload: File | Blob,
+  uploadOptions?: UploadFileOptions,
+) => Promise<UploadFile>;
+
 function isAcceptedFile(file: File, accept?: string) {
   if (!accept) return true;
 
@@ -35,7 +48,7 @@ function getFileExtension(fileName: string, fileType: string) {
 }
 
 export default function useAttachments(
-  attachments: IAgentScopeRuntimeWebUISenderAttachmentsOptions,
+  attachments?: IAgentScopeRuntimeWebUISenderAttachmentsOptions,
   options?: {
     disabled?: boolean;
   }
@@ -66,22 +79,29 @@ export default function useAttachments(
   const disabled = !!options?.disabled;
   const uidCounter = useRef(0);
 
-  const handleManualFile = useCallback((file: File) => {
-    if (disabled || !customRequest || !isAcceptedFile(file, accept)) return;
-    if (maxCount && fileListRef.current.length >= maxCount) return;
-
-    const fileType = file.type || '';
-    const fileName = file.name || '';
+  const uploadFile = useCallback((
+    fileToUpload: File | Blob,
+    uploadOptions: UploadFileOptions = {},
+  ) => {
+    return new Promise<UploadFile>((resolve, reject) => {
+      const request = uploadOptions.customRequest || customRequest;
+      if (disabled || !request) {
+        reject(new Error('Upload request is not available.'));
+        return;
+      }
 
-    const startUpload = (fileToUpload: File | Blob) => {
-      if (maxCount && fileListRef.current.length >= maxCount) return;
+      if (maxCount && fileListRef.current.length >= maxCount) {
+        reject(new Error('Maximum upload count reached.'));
+        return;
+      }
 
-      const uploadType = fileToUpload.type || fileType;
+      const uploadType = fileToUpload.type || uploadOptions.fileType || '';
+      const sourceName = uploadOptions.fileName || ('name' in fileToUpload ? fileToUpload.name : '');
       const timestamp = Date.now();
       const uid = `manual-${timestamp}-${uidCounter.current++}`;
-      const uploadFile: UploadFile = {
+      const uploadFileItem: UploadFile = {
         uid,
-        name: fileName || `file-${timestamp}.${getFileExtension(fileName, uploadType)}`,
+        name: sourceName || `file-${timestamp}.${getFileExtension(sourceName, uploadType)}`,
         size: fileToUpload.size,
         type: uploadType,
         status: 'uploading',
@@ -89,7 +109,7 @@ export default function useAttachments(
         originFileObj: fileToUpload as any,
       };
 
-      setMergedFileList(prev => [...prev, uploadFile]);
+      setMergedFileList(prev => [...prev, uploadFileItem]);
 
       if (uploadType.startsWith('image/')) {
         const reader = new FileReader();
@@ -104,31 +124,45 @@ export default function useAttachments(
         reader.readAsDataURL(fileToUpload);
       }
 
-      customRequest(
-        {
-          file: fileToUpload as any,
-          filename: 'file',
-          action: '',
-          method: 'POST',
-          onSuccess: (response: any) => {
-            setMergedFileList(prev => prev.map(f =>
-              f.uid === uid ? { ...f, status: 'done' as const, response, percent: 100 } : f
-            ));
-          },
-          onError: (error: any) => {
-            setMergedFileList(prev => prev.map(f =>
-              f.uid === uid ? { ...f, status: 'error' as const, error } : f
-            ));
+      try {
+        request(
+          {
+            file: fileToUpload as any,
+            filename: 'file',
+            action: '',
+            method: 'POST',
+            onSuccess: (response: any) => {
+              let completedFile: UploadFile | undefined;
+              setMergedFileList(prev => prev.map(f =>
+                f.uid === uid ? (completedFile = { ...f, status: 'done' as const, response, percent: 100 }) : f
+              ));
+              resolve(completedFile || { ...uploadFileItem, status: 'done', response, percent: 100 });
+            },
+            onError: (error: any) => {
+              setMergedFileList(prev => prev.map(f =>
+                f.uid === uid ? { ...f, status: 'error' as const, error } : f
+              ));
+              reject(error);
+            },
+            onProgress: (event: any) => {
+              setMergedFileList(prev => prev.map(f =>
+                f.uid === uid ? { ...f, percent: event?.percent } : f
+              ));
+            },
           },
-          onProgress: (event: any) => {
-            setMergedFileList(prev => prev.map(f =>
-              f.uid === uid ? { ...f, percent: event?.percent } : f
-            ));
-          },
-        },
-        { defaultRequest: () => undefined },
-      );
-    };
+          { defaultRequest: () => undefined },
+        );
+      } catch (error) {
+        setMergedFileList(prev => prev.map(f =>
+          f.uid === uid ? { ...f, status: 'error' as const, error } : f
+        ));
+        reject(error);
+      }
+    });
+  }, [customRequest, disabled, maxCount, setMergedFileList]);
+
+  const handleManualFile = useCallback((file: File) => {
+    if (disabled || !customRequest || !isAcceptedFile(file, accept)) return;
 
     try {
       const beforeUploadResult = beforeUpload?.(file as any, [file as any]);
@@ -144,11 +178,19 @@ export default function useAttachments(
           }
 
           if (processedFile && typeof processedFile === 'object') {
-            startUpload(processedFile as File | Blob);
+            uploadFile(processedFile as File | Blob, {
+              customRequest,
+              fileName: file.name,
+              fileType: file.type,
+            }).catch((error) => {
+              console.error('upload file rejected:', error);
+            });
             return;
           }
 
-          startUpload(file);
+          uploadFile(file, { customRequest }).catch((error) => {
+            console.error('upload file rejected:', error);
+          });
         }).catch((error) => {
           console.error('beforeUpload promise rejected:', error);
         });
@@ -156,15 +198,33 @@ export default function useAttachments(
       }
 
       if (beforeUploadResult && typeof beforeUploadResult === 'object') {
-        startUpload(beforeUploadResult as unknown as File | Blob);
+        uploadFile(beforeUploadResult as unknown as File | Blob, {
+          customRequest,
+          fileName: file.name,
+          fileType: file.type,
+        }).catch((error) => {
+          console.error('upload file rejected:', error);
+        });
         return;
       }
 
-      startUpload(file);
+      uploadFile(file, { customRequest }).catch((error) => {
+        console.error('upload file rejected:', error);
+      });
     } catch (error) {
       console.error('beforeUpload rejected:', error);
     }
-  }, [accept, beforeUpload, customRequest, disabled, maxCount, setMergedFileList]);
+  }, [accept, beforeUpload, customRequest, disabled, uploadFile]);
+
+  const uploadFileListHeader = <Sender.Header
+    closable={false}
+    open={fileList?.length > 0}
+  >
+    <Attachments
+      items={fileList}
+      onChange={(info) => setMergedFileList(info.fileList)}
+    />
+  </Sender.Header>
 
   if (customRequest) {
     const uploadIconButton = <Upload
@@ -186,22 +246,11 @@ export default function useAttachments(
       }
     </Upload>
 
-
-    const uploadFileListHeader = <Sender.Header
-      closable={false}
-      open={fileList?.length > 0}
-    >
-      <Attachments
-        items={fileList}
-        onChange={(info) => setMergedFileList(info.fileList)}
-      />
-    </Sender.Header>
-
-
     return {
       fileList,
       getFileList,
       setFileList: setMergedFileList,
+      uploadFile,
       handlePasteFile: handleManualFile,
       handleDropFile: handleManualFile,
       uploadIconButton,
@@ -214,8 +263,10 @@ export default function useAttachments(
       fileList,
       getFileList,
       setFileList: setMergedFileList,
+      uploadFile,
       handlePasteFile: undefined,
       handleDropFile: undefined,
+      uploadFileListHeader,
     };
   }
 }