@agentscope-ai/chat 1.1.72-beta.1783304718621 → 1.1.72-beta.1783337191111

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

@@ -1,36 +1,21 @@
-import {
-  ChatInput,
-  Disclaimer,
-  IAgentScopeRuntimeWebUIInputData,
-  useProviderContext,
-} from '@agentscope-ai/chat';
+import { useCallback } from "react";
+import { useProviderContext, ChatInput, Disclaimer } from '@agentscope-ai/chat';
+import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext";
 import { useGetState } from 'ahooks';
-import { useCallback, type ReactNode } from 'react';
-import { useChatAnywhereInput } from '../../Context/ChatAnywhereInputContext';
-import { useChatAnywhereOptions } from '../../Context/ChatAnywhereOptionsContext';
-import type { QueueEnqueueResult, QueuedInputItem } from '../InputQueue';
-import useAttachments from './useAttachments';
+import { useChatAnywhereInput } from "../../Context/ChatAnywhereInputContext";
+import useAttachments from "./useAttachments";
+import { IAgentScopeRuntimeWebUIInputData } from "@agentscope-ai/chat";
 
 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) {
   const [content, setContent, getContent] = useGetState('');
   const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-input');
-  const senderOptions = useChatAnywhereOptions((v) => v.sender);
-  const inputContext = useChatAnywhereInput((v) => v);
+  const senderOptions = useChatAnywhereOptions(v => v.sender);
+  const inputContext = useChatAnywhereInput(v => v);
 
   const {
     placeholder = '',
@@ -54,139 +39,53 @@ export default function Input(props: InputProps) {
     handlePasteFile,
     handleDropFile,
     uploadIconButton,
-    uploadFileListHeader,
+    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 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();
-    }
-  }, [
-    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 fileList = (getFileList?.() || []).filter(i => i.response?.url);
+    props.onSubmit({ query: getContent(), fileList });
+    setContent('');
+    setFileList?.([]);
+  }, []);
 
   const handleCancel = useCallback(() => {
     props.onCancel();
-  }, [props.onCancel]);
-
-  return (
-    <div className={prefixCls} onKeyDownCapture={handleKeyDownCapture}>
-      <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}
-          allowSubmitWhenLoading={!!props.queue}
-          allowSpeech={allowSpeech}
-          onPasteFile={handlePasteFile}
-          onDropFile={handleDropFile}
-          suggestions={suggestions}
-        />
-        {afterUI}
-      </div>
-      {disclaimer ? (
-        <Disclaimer desc={disclaimer} />
-      ) : (
-        <div className={`${prefixCls}-blank`}></div>
-      )}
+  }, []);
+
+  return <div className={prefixCls}>
+    <div className={`${prefixCls}-wrapper`}>
+      {beforeUI}
+      <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}
+        allowSpeech={allowSpeech}
+        onPasteFile={handlePasteFile}
+        onDropFile={handleDropFile}
+        suggestions={suggestions}
+      />
+      {afterUI}
     </div>
-  );
+    {
+      disclaimer ? <Disclaimer desc={disclaimer} /> : <div className={`${prefixCls}-blank`}></div>
+    }
+  </div>;
 }

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

@@ -348,11 +348,21 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
   const [trackHeight, setTrackHeight] = useState(0);
   const normalizedMinGap = useMemo(() => getUserMessageAnchorMinGap(minGap), [minGap]);
   const normalizedMinCount = useMemo(() => getUserMessageAnchorMinCount(minCount), [minCount]);
+  const itemsRef = React.useRef(items);
+  itemsRef.current = items;
+
+  const userMessagesKey = useMemo(() => {
+    if (!enabled) return '';
+    return items
+      .filter((message) => message.role === 'user' && message.id)
+      .map((message) => `${message.id}:${message.cards?.length ?? 0}`)
+      .join('|');
+  }, [enabled, items]);
 
   const anchors = useMemo<UserMessageAnchor[]>(() => {
     if (!enabled) return [];
 
-    const visualItems = items.slice().reverse();
+    const visualItems = itemsRef.current.slice().reverse();
     const totalCount = Math.max(visualItems.length, 1);
 
     return visualItems.reduce<UserMessageAnchor[]>((result, message, index) => {
@@ -365,7 +375,7 @@ export default function UserMessageAnchors(props: UserMessageAnchorsProps) {
       });
       return result;
     }, []);
-  }, [enabled, items]);
+  }, [enabled, userMessagesKey]);
   const anchorIdsKey = useMemo(() => anchors.map((anchor) => anchor.id).join('|'), [anchors]);
   const visible = enabled && anchors.length > 0 && anchors.length >= normalizedMinCount;
 

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

@@ -10,13 +10,13 @@ import React, { useCallback, useMemo, useState } from "react";
 import { flushSync } from "react-dom";
 import UserMessageAnchors from "./UserMessageAnchors";
 
-const PAGE_SIZE = 10;
-const ANCHOR_JUMP_WINDOW_BEFORE = 24;
-const ANCHOR_JUMP_WINDOW_AFTER = 36;
+const PAGE_SIZE = 20;
+const INITIAL_VISIBLE_MESSAGE_COUNT = 60;
+const ANCHOR_JUMP_RENDER_BUFFER = 24;
 
 type MessageWithHistory = IAgentScopeRuntimeWebUIMessage & { history?: boolean };
 type HistoryRange = { start: number; end: number };
-const INITIAL_HISTORY_RANGE: HistoryRange = { start: 0, end: PAGE_SIZE };
+const INITIAL_HISTORY_RANGE: HistoryRange = { start: 0, end: INITIAL_VISIBLE_MESSAGE_COUNT };
 
 function waitForNextFrame() {
   return new Promise<void>((resolve) => {
@@ -26,8 +26,11 @@ function waitForNextFrame() {
 
 function getAnchorJumpHistoryRange(historyIndex: number, historyLength: number): HistoryRange {
   return {
-    start: Math.max(0, historyIndex - ANCHOR_JUMP_WINDOW_BEFORE),
-    end: Math.min(historyLength, historyIndex + ANCHOR_JUMP_WINDOW_AFTER),
+    start: 0,
+    end: Math.min(
+      historyLength,
+      Math.max(INITIAL_VISIBLE_MESSAGE_COUNT, historyIndex + ANCHOR_JUMP_RENDER_BUFFER),
+    ),
   };
 }
 
@@ -36,13 +39,15 @@ function areHistoryRangesEqual(prev: HistoryRange, next: HistoryRange) {
 }
 
 /**
- * Simulated backend pagination:
- * - History messages loaded with the session are revealed page by page.
- * - New messages produced in the current session are always shown in full.
+ * Render only the newest window of the conversation, then reveal older
+ * messages on demand. Sessions loaded from storage and messages produced in
+ * the current run use the same window so long-running chats do not accumulate
+ * an unbounded number of mounted bubbles.
  */
-function useSimulatedMessagePagination(
+function useMessageWindowPagination(
   allMessages: MessageWithHistory[],
   sessionId: string | undefined,
+  enabled: boolean,
 ) {
   const [historyRange, setHistoryRangeState] = useState<HistoryRange>(INITIAL_HISTORY_RANGE);
   const historyRangeRef = React.useRef<HistoryRange>(INITIAL_HISTORY_RANGE);
@@ -61,25 +66,34 @@ function useSimulatedMessagePagination(
 
   React.useLayoutEffect(() => {
     ensureMessageSequenceRef.current += 1;
-    setHistoryRange(INITIAL_HISTORY_RANGE);
-  }, [sessionId, setHistoryRange]);
+    setHistoryRange(enabled
+      ? INITIAL_HISTORY_RANGE
+      : { start: 0, end: allMessages.length });
+  }, [allMessages.length, enabled, sessionId, setHistoryRange]);
 
-  const historyMessages = useMemo(
-    () => allMessages.filter((m) => m.history),
-    [allMessages],
-  );
-  const newMessages = useMemo(
-    () => allMessages.filter((m) => !m.history),
-    [allMessages],
-  );
+  React.useEffect(() => {
+    if (!enabled) {
+      setHistoryRange({ start: 0, end: allMessages.length });
+      return;
+    }
 
-  const visibleHistory = historyMessages.slice(historyRange.start, historyRange.end);
-  const noMore = historyRange.end >= historyMessages.length;
+    updateHistoryRange((prev) => {
+      if (allMessages.length <= prev.end) return prev;
+      return {
+        start: 0,
+        end: Math.min(
+          allMessages.length,
+          Math.max(prev.end, INITIAL_VISIBLE_MESSAGE_COUNT),
+        ),
+      };
+    });
+  }, [allMessages.length, enabled, setHistoryRange, updateHistoryRange]);
+
+  const noMore = !enabled || historyRange.end >= allMessages.length;
 
-  // Show new messages first, then paginated history messages.
   const visibleMessages = useMemo(
-    () => [...newMessages, ...visibleHistory],
-    [newMessages, visibleHistory],
+    () => enabled ? allMessages.slice(historyRange.start, historyRange.end) : allMessages,
+    [allMessages, enabled, historyRange.end, historyRange.start],
   );
 
   const loadMore = useCallback(() => {
@@ -88,19 +102,24 @@ function useSimulatedMessagePagination(
         flushSync(() => {
           updateHistoryRange((prev) => ({
             start: prev.start,
-            end: Math.min(historyMessages.length, prev.end + PAGE_SIZE),
+            end: Math.min(allMessages.length, prev.end + PAGE_SIZE),
           }));
         });
         resolve();
       }, 300);
     });
-  }, [historyMessages.length, updateHistoryRange]);
+  }, [allMessages.length, updateHistoryRange]);
 
   const ensureMessageVisible = useCallback(async (messageId: string) => {
+    if (!enabled) {
+      await waitForNextFrame();
+      return;
+    }
+
     const sequence = ensureMessageSequenceRef.current + 1;
     ensureMessageSequenceRef.current = sequence;
 
-    const historyIndex = historyMessages.findIndex((message) => message.id === messageId);
+    const historyIndex = allMessages.findIndex((message) => message.id === messageId);
     await waitForNextFrame();
 
     if (ensureMessageSequenceRef.current !== sequence) {
@@ -111,7 +130,7 @@ function useSimulatedMessagePagination(
       const currentRange = historyRangeRef.current;
       const targetVisible = historyIndex >= currentRange.start && historyIndex < currentRange.end;
       if (!targetVisible) {
-        const nextRange = getAnchorJumpHistoryRange(historyIndex, historyMessages.length);
+        const nextRange = getAnchorJumpHistoryRange(historyIndex, allMessages.length);
         if (!areHistoryRangesEqual(currentRange, nextRange)) {
           flushSync(() => {
             setHistoryRange(nextRange);
@@ -124,7 +143,7 @@ function useSimulatedMessagePagination(
       throw new Error('Message visibility request was superseded');
     }
     await waitForNextFrame();
-  }, [historyMessages, setHistoryRange]);
+  }, [allMessages, enabled, setHistoryRange]);
 
   return { visibleMessages, noMore, loadMore, ensureMessageVisible };
 }
@@ -135,11 +154,17 @@ export default function MessageList(props: { onSubmit: (data: { query: string; f
   const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-message-list');
   const scrollContainerClassName = `${prefixCls}-bubble-scroll`;
   const currentSessionId = useContextSelector(ChatAnywhereSessionsContext, v => v.currentSessionId);
-  const userMessageAnchorsOptions = useChatAnywhereOptions(v => v.theme?.bubbleList?.userMessageAnchors);
+  const bubbleListOptions = useChatAnywhereOptions(v => v.theme?.bubbleList);
+  const userMessageAnchorsOptions = bubbleListOptions?.userMessageAnchors;
+  const paginationEnabled = bubbleListOptions?.pagination !== false;
   const listRef = React.useRef<{ scrollToBottom: () => void } | null>(null);
   const prevMessagesLengthRef = React.useRef(safeMessages.length);
 
-  const { visibleMessages, noMore, loadMore, ensureMessageVisible } = useSimulatedMessagePagination(safeMessages, currentSessionId);
+  const { visibleMessages, noMore, loadMore, ensureMessageVisible } = useMessageWindowPagination(
+    safeMessages,
+    currentSessionId,
+    paginationEnabled,
+  );
   const renderedItemsKey = useMemo(() => visibleMessages.map((message) => message.id).join('|'), [visibleMessages]);
 
   React.useEffect(() => {