@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/Response/Tool.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { AgentScopeRuntimeRunStatus, IAgentScopeRuntimeMessage, IDataContent } from "../types";
+import { Bubble, ToolCall } from '@agentscope-ai/chat';
+
+const Tool = React.memo(function ({ data }: { data: IAgentScopeRuntimeMessage }) {
+
+  if (data.status === AgentScopeRuntimeRunStatus.InProgress || data.status === AgentScopeRuntimeRunStatus.Created) return null;
+  const content = data.content as IDataContent<{
+    name: string;
+    arguments: Record<string, any>;
+    output: Record<string, any>;
+  }>[];
+  const toolName = content[0].data.name;
+
+  return <ToolCall title={toolName} input={content[0].data.arguments} output={content[1].data.output}></ToolCall>
+})
+
+export default Tool;
+

package/components/AgentScopeRuntimeWebUI/lib/AgentScopeRuntime/types.tsx

@@ -0,0 +1,100 @@
+export enum AgentScopeRuntimeRunStatus {
+  Created = "created",
+  InProgress = "in_progress",
+  Completed = "completed",
+  Canceled = "canceled",
+  Failed = "failed",
+  Rejected = "rejected",
+  Unknown = "unknown",
+}
+
+export enum AgentScopeRuntimeMessageRole {
+  ASSISTANT = "assistant",
+  USER = "user",
+  SYSTEM = "system",
+}
+
+export enum AgentScopeRuntimeMessageType {
+  MESSAGE = "message",
+  REASONING = "reasoning",
+  PLUGIN_CALL = "plugin_call",
+  PLUGIN_CALL_OUTPUT = "plugin_call_output",
+  FUNCTION_CALL = "function_call",
+  FUNCTION_CALL_OUTPUT = "function_call_output",
+  COMPONENT_CALL = "component_call",
+  COMPONENT_CALL_OUTPUT = "component_call_output",
+  MCP_LIST_TOOLS = "mcp_list_tools",
+  MCP_APPROVAL_REQUEST = "mcp_approval_request",
+  MCP_TOOL_CALL = "mcp_call",
+  MCP_APPROVAL_RESPONSE = "mcp_approval_response",
+  HEARTBEAT = "heartbeat",
+  ERROR = "error",
+}
+
+export enum AgentScopeRuntimeContentType {
+  TEXT = "text",
+  DATA = "data",
+  IMAGE = "image",
+  AUDIO = "audio",
+  FILE = "file",
+}
+
+export interface IBaseContent {
+  type: string;
+  object?: 'content';
+  delta?: boolean | null;
+  msg_id?: string;
+  status: AgentScopeRuntimeRunStatus;
+}
+
+export interface ITextContent extends IBaseContent {
+  type: AgentScopeRuntimeContentType.TEXT,
+  text: string;
+}
+export interface IImageContent extends IBaseContent {
+  type: AgentScopeRuntimeContentType.IMAGE,
+  image_url: string;
+}
+
+export interface IFileContent extends IBaseContent {
+  type: AgentScopeRuntimeContentType.FILE,
+  file_url: string;
+  file_name?: string;
+  file_size?: number;
+}
+
+export interface IDataContent<T = Record<string, any>> extends IBaseContent {
+  type: AgentScopeRuntimeContentType.DATA,
+  data: T;
+}
+
+export type IContent = ITextContent | IImageContent | IDataContent | IFileContent;
+
+export interface IAgentScopeRuntimeMessage {
+  id: string;
+  object?: 'message';
+  role: AgentScopeRuntimeMessageRole | string;
+  type: AgentScopeRuntimeMessageType;
+  content: IContent[];
+  status: AgentScopeRuntimeRunStatus;
+  code?: string;
+  message?: string;
+}
+
+export interface IAgentScopeRuntimeResponse {
+  id: string;
+  object?: 'response';
+  status: AgentScopeRuntimeRunStatus;
+  created_at: number;
+  completed_at?: number;
+  output: IAgentScopeRuntimeMessage[];
+  usage?: Record<string, any>;
+}
+
+export interface IAgentScopeRuntimeRequest {
+  input: {
+    role: AgentScopeRuntimeMessageRole | string;
+    type: AgentScopeRuntimeMessageType;
+    content: IContent[];
+  }[]
+}

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

@@ -0,0 +1,77 @@
+import React, { useCallback } 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";
+
+export interface InputProps {
+  onCancel: () => void;
+  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 {
+    placeholder = '',
+    disclaimer = '',
+    maxLength,
+    beforeSubmit = () => Promise.resolve(true),
+    beforeUI,
+    afterUI,
+    scalable = true,
+    attachments
+  } = senderOptions || {};
+
+  const {
+    getFileList,
+    setFileList,
+    uploadIconButton,
+    uploadFileListHeader
+  } = useAttachments(attachments);
+
+
+  
+
+  const handleSubmit = useCallback(async () => {
+    const next = await beforeSubmit();
+    if (!next) return;
+
+    props.onSubmit({ query: getContent(), fileList: getFileList?.() || [] });
+    setContent('');
+    setFileList && setFileList([]);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    props.onCancel();
+  }, []);
+
+  return <div className={prefixCls}>
+    <div className={`${prefixCls}-wrapper`}>
+      {beforeUI}
+      <ChatInput
+        loading={inputContext.loading}
+        scalable={scalable}
+        placeholder={placeholder}
+        value={content}
+        prefix={<>
+          {uploadIconButton}
+        </>}
+        header={uploadFileListHeader}
+        onChange={setContent}
+        maxLength={maxLength}
+        onSubmit={handleSubmit}
+        onCancel={handleCancel}
+      />
+      {afterUI}
+    </div>
+    {
+      disclaimer ? <Disclaimer desc={disclaimer} /> : <div className={`${prefixCls}-blank`}></div>
+    }
+  </div>;
+}

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

@@ -0,0 +1,53 @@
+import { IAgentScopeRuntimeWebUISenderAttachmentsOptions } from "@agentscope-ai/chat";
+import { Upload } from 'antd';
+import { IconButton } from "@agentscope-ai/design";
+import { SparkAttachmentLine } from "@agentscope-ai/icons";
+import { Sender, Attachments } from '@agentscope-ai/chat';
+import { useGetState } from "ahooks";
+
+export default function useAttachments(
+  attachments: IAgentScopeRuntimeWebUISenderAttachmentsOptions
+) {
+  const [fileList, setFileList, getFileList] = useGetState([]);
+
+  if (attachments?.customRequest) {
+    const uploadIconButton = <Upload
+      customRequest={attachments.customRequest}
+      fileList={fileList}
+      showUploadList={false}
+      onChange={(info) => {
+        setFileList(info.fileList);
+      }}
+    >
+      <IconButton
+        icon={<SparkAttachmentLine />}
+        bordered={false}
+      />
+    </Upload>
+
+
+    const uploadFileListHeader = <Sender.Header
+      closable={false}
+      open={fileList?.length > 0}
+    >
+      <Attachments
+        items={fileList}
+        onChange={(info) => setFileList(info.fileList)}
+      />
+    </Sender.Header>
+
+
+    return {
+      fileList,
+      getFileList,
+      setFileList,
+      uploadIconButton,
+      uploadFileListHeader
+    }
+
+  } else {
+    return {
+      enabled: false,
+    };
+  }
+}

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

@@ -0,0 +1,30 @@
+import { Bubble, useProviderContext } from "@agentscope-ai/chat";
+import { ChatAnywhereMessagesContext } from "../../Context/ChatAnywhereMessagesContext";
+import { useContextSelector } from "use-context-selector";
+import { ChatAnywhereSessionsContext } from "../../Context/ChatAnywhereSessionsContext";
+import cls from 'classnames';
+import Welcome from "../Welcome";
+import { ChatAnywhereInputContext } from "../../Context/ChatAnywhereInputContext";
+
+
+export default function MessageList(props: { onSubmit: (data: { query: string; fileList?: any[] }) => void }) {
+  const loading = useContextSelector(ChatAnywhereInputContext, v => v.loading);
+  const messages = useContextSelector(ChatAnywhereMessagesContext, v => v.messages);
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-message-list');
+  const currentSessionId = useContextSelector(ChatAnywhereSessionsContext, v => v.currentSessionId);
+
+  if (messages.length === 0) return <div className={cls(prefixCls, `${prefixCls}-welcome`)}>
+    <Welcome onSubmit={props.onSubmit} />
+  </div>;
+
+  return <>
+    <Bubble.List
+      smooth={loading}
+      key={currentSessionId}
+      classNames={{
+        wrapper: prefixCls,
+      }}
+      items={messages}
+    />
+  </>;
+}

package/components/AgentScopeRuntimeWebUI/lib/Chat/Welcome/index.tsx

@@ -0,0 +1,66 @@
+import { useProviderContext } from "@agentscope-ai/chat";
+import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext";
+import { Avatar } from 'antd';
+import Style from './styles';
+import { SparkRightArrowLine } from "@agentscope-ai/icons";
+
+export default function Welcome(props: { onSubmit: (data: { query: string; fileList?: any[] }) => void }) {
+  const welcomeOptions = useChatAnywhereOptions(v => v.welcome);
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-welcome-default');
+
+  if (!welcomeOptions) return null;
+
+  const { render, ...otherWelcomeOptions } = welcomeOptions;
+
+  if (render) return welcomeOptions.render({
+    greeting: welcomeOptions.greeting,
+    avatar: welcomeOptions.avatar,
+    description: welcomeOptions.description,
+    prompts: welcomeOptions.prompts,
+    onSubmit: props.onSubmit,
+  });
+
+
+  const { greeting, avatar, prompts, description } = otherWelcomeOptions;
+
+  return <>
+    <Style />
+    <div className={prefixCls}>
+      {
+        avatar && <Avatar src={avatar} shape="square" size={72} />
+      }
+      {
+        greeting && <div className={`${prefixCls}-greeting`}>{greeting}</div>
+      }
+      {
+        description && <div className={`${prefixCls}-description`}>{description}</div>
+      }
+      {
+        prompts?.length > 0 && <div className={`${prefixCls}-prompts`}>
+          {
+            prompts.map(item => {
+              const prompt = typeof item === 'string' ? { label: item, value: item } : {
+                ...item,
+                label: item.label || item.value,
+                value: item.value,
+              };
+
+              return <Prompt key={prompt.value} prompt={prompt} onSubmit={props.onSubmit} />
+            })
+          }
+        </div>
+      }
+    </div>
+  </>;
+}
+
+function Prompt(props: { prompt: { label: string; value: string; icon?: React.ReactElement }, onSubmit: (data: { query: string; fileList?: any[] }) => void }) {
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-welcome-default');
+
+  return <div className={`${prefixCls}-prompt`} onClick={() => props.onSubmit({ query: props.prompt.value })}>
+    <span>
+      {props.prompt.label}
+    </span>
+    <SparkRightArrowLine />
+  </div>
+}

package/components/AgentScopeRuntimeWebUI/lib/Chat/Welcome/styles.ts

@@ -0,0 +1,51 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-chat-anywhere-welcome-default {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+
+  &-greeting {
+   color: ${({ theme }) => theme.colorText};
+   font-size: 16px;
+   line-height: 26px;
+   font-weight: 500;
+  }
+
+  &-description {
+    color: ${({ theme }) => theme.colorTextSecondary};
+    font-size: 12px;
+    line-height: 18px;
+    margin-top: -10px;
+  }
+  
+  &-prompts {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 10px;
+  }
+
+  &-prompt {
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: ${({ theme }) => theme.colorFillQuaternary};
+    color: ${({ theme }) => theme.colorText};
+    font-size: 14px;
+    padding: 10px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    gap: 20px;
+    
+
+    &:hover {
+      background-color: ${({ theme }) => theme.colorFillTertiary};
+    }
+    
+  }
+}
+`;

package/components/AgentScopeRuntimeWebUI/lib/Chat/hooks/index.tsx

@@ -0,0 +1,5 @@
+export { default as useChatController } from './useChatController';
+export { default as useChatRequest } from './useChatRequest';
+export { default as useChatMessageHandler } from './useChatMessageHandler';
+export { default as useChatSessionHandler } from './useChatSessionHandler';
+

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

@@ -0,0 +1,130 @@
+import { sleep } from "@agentscope-ai/chat";
+import { useCallback, useEffect, useRef } 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 useChatMessageHandler from "./useChatMessageHandler";
+import useChatRequest from "./useChatRequest";
+import useChatSessionHandler from "./useChatSessionHandler";
+import ReactDOM from "react-dom";
+
+/**
+ * 聊天控制器 Hook - 协调所有聊天相关操作
+ */
+export default function useChatController() {
+  const setLoading = useContextSelector(ChatAnywhereInputContext, v => v.setLoading);
+  const currentSessionId = useContextSelector(ChatAnywhereSessionsContext, v => v.currentSessionId);
+
+  const currentQARef = useRef<{
+    request?: IAgentScopeRuntimeWebUIMessage;
+    response?: IAgentScopeRuntimeWebUIMessage;
+    abortController?: AbortController;
+  }>({});
+
+  // 消息处理
+  const messageHandler = useChatMessageHandler({ currentQARef });
+
+  // 会话处理
+  const sessionHandler = useChatSessionHandler();
+
+  /**
+   * 完成响应
+   */
+  const finishResponse = useCallback((status: 'finished' | 'interrupted' = 'finished') => {
+    if (!currentQARef.current.response) return;
+
+    currentQARef.current.response.msgStatus = status;
+    setLoading(false);
+    ReactDOM.flushSync(() => {
+      messageHandler.updateMessage(currentQARef.current.response);
+    });
+
+    sessionHandler.syncSessionMessages(messageHandler.getMessages());
+  }, [setLoading, messageHandler, sessionHandler]);
+
+  // API 请求处理
+  const { request } = useChatRequest({
+    currentQARef,
+    updateMessage: messageHandler.updateMessage,
+    getCurrentSessionId: sessionHandler.getCurrentSessionId,
+    onFinish: () => finishResponse('finished'),
+  });
+
+  /**
+   * 处理用户提交
+   */
+  const handleSubmit = useCallback<InputProps['onSubmit']>(async (data) => {
+    // 1. 确保会话存在
+    await sessionHandler.ensureSession(data.query);
+
+    // 2. 更新会话名称（如果是第一条消息）
+    const messages = messageHandler.getMessages();
+    if (sessionHandler.getCurrentSessionId()) {
+      await sessionHandler.updateSessionName(data.query, messages);
+    }
+
+    // 3. 创建用户请求消息
+    messageHandler.createRequestMessage(data);
+    setLoading(true);
+
+    await sleep(100);
+
+    // 4. 创建助手响应消息
+    messageHandler.createResponseMessage();
+
+    // 5. 获取历史消息并发起请求
+    const historyMessages = messageHandler.getHistoryMessages();
+    await sessionHandler.syncSessionMessages(messageHandler.getMessages());
+
+    await request(historyMessages);
+  }, [messageHandler, sessionHandler, request]);
+
+  /**
+   * 处理取消
+   */
+  const handleCancel = useCallback(() => {
+    finishResponse('interrupted');
+  }, [finishResponse]);
+
+  /**
+   * 处理重新生成
+   */
+  const handleRegenerate = useCallback(async (messageId: string) => {
+    // 1. 移除旧消息
+    messageHandler.removeMessageById(messageId);
+
+    // 2. 创建新的响应消息
+    currentQARef.current.abortController = new AbortController();
+    messageHandler.createResponseMessage();
+
+    // 3. 发起请求
+    const historyMessages = messageHandler.getHistoryMessages();
+    await request(historyMessages);
+  }, [messageHandler, request]);
+
+  // 监听会话切换，重置状态
+  useEffect(() => {
+    currentQARef.current = {
+      request: undefined,
+      response: undefined,
+      abortController: undefined
+    };
+  }, [currentSessionId]);
+
+  // 监听重新生成事件
+  useChatAnywhereEventEmitter({
+    type: 'handleReplace',
+    callback: async (data) => {
+      await handleRegenerate(data.detail.id);
+    }
+  });
+
+  return {
+    handleSubmit,
+    handleCancel,
+  };
+}
+

package/components/AgentScopeRuntimeWebUI/lib/Chat/hooks/useChatMessageHandler.tsx

@@ -0,0 +1,87 @@
+import { uuid } from "@agentscope-ai/chat";
+import { useCallback } from "react";
+import ReactDOM from "react-dom";
+import { IAgentScopeRuntimeWebUIMessage } from "@agentscope-ai/chat";
+import { useChatAnywhereMessages } from "../../Context/ChatAnywhereMessagesContext";
+import AgentScopeRuntimeRequestBuilder from "../../AgentScopeRuntime/Request/Builder";
+import { InputProps } from "../Input";
+
+interface UseChatMessageHandlerOptions {
+  currentQARef: React.MutableRefObject<{
+    request?: IAgentScopeRuntimeWebUIMessage;
+    response?: IAgentScopeRuntimeWebUIMessage;
+    abortController?: AbortController;
+  }>;
+}
+
+/**
+ * 处理消息创建和更新的 Hook
+ */
+export default function useChatMessageHandler(options: UseChatMessageHandlerOptions) {
+  const { currentQARef } = options;
+  const { updateMessage, getMessages, removeMessage } = useChatAnywhereMessages();
+
+  /**
+   * 创建用户请求消息
+   */
+  const createRequestMessage = useCallback((data: Parameters<InputProps['onSubmit']>[0]) => {
+
+    currentQARef.current.abortController = new AbortController();
+    currentQARef.current.request = {
+      id: uuid(),
+      role: 'user',
+      cards: [{
+        code: 'AgentScopeRuntimeRequestCard',
+        data: new AgentScopeRuntimeRequestBuilder(data).data,
+      }]
+    };
+
+    ReactDOM.flushSync(() => {
+      updateMessage(currentQARef.current.request!);
+    });
+
+    return currentQARef.current.request;
+  }, [currentQARef, updateMessage]);
+
+  /**
+   * 创建助手响应消息
+   */
+  const createResponseMessage = useCallback(() => {
+    currentQARef.current.response = {
+      id: uuid(),
+      role: 'assistant',
+      cards: [],
+      msgStatus: 'generating',
+    };
+
+    updateMessage(currentQARef.current.response);
+
+    return currentQARef.current.response;
+  }, [currentQARef, updateMessage]);
+
+  /**
+   * 获取历史消息（用于 API 请求）
+   */
+  const getHistoryMessages = useCallback(() => {
+    return AgentScopeRuntimeRequestBuilder.getHistoryMessages(getMessages());
+  }, [getMessages]);
+
+  /**
+   * 移除指定消息
+   */
+  const removeMessageById = useCallback((id: string) => {
+    ReactDOM.flushSync(() => {
+      removeMessage({ id });
+    });
+  }, [removeMessage]);
+
+  return {
+    createRequestMessage,
+    createResponseMessage,
+    getHistoryMessages,
+    updateMessage,
+    removeMessageById,
+    getMessages,
+  };
+}
+