@agentscope-ai/chat 1.1.20 → 1.1.22

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

@@ -0,0 +1,114 @@
+import { Stream } from "@agentscope-ai/chat";
+import { useCallback, useRef, useEffect } from "react";
+import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext";
+import AgentScopeRuntimeResponseBuilder from "../../AgentScopeRuntime/Response/Builder";
+import { AgentScopeRuntimeRunStatus } from "../../AgentScopeRuntime/types";
+import { IAgentScopeRuntimeWebUIMessage } from "@agentscope-ai/chat";
+
+interface UseChatRequestOptions {
+  currentQARef: React.MutableRefObject<{
+    request?: IAgentScopeRuntimeWebUIMessage;
+    response?: IAgentScopeRuntimeWebUIMessage;
+    abortController?: AbortController;
+  }>;
+  updateMessage: (message: IAgentScopeRuntimeWebUIMessage) => void;
+  getCurrentSessionId: () => string;
+  onFinish: () => void;
+}
+
+/**
+ * 处理 API 请求和流式响应的 Hook
+ */
+export default function useChatRequest(options: UseChatRequestOptions) {
+  const { currentQARef, updateMessage, getCurrentSessionId, onFinish } = options;
+  const apiOptions = useChatAnywhereOptions(v => v.api);
+
+  // 使用 ref 保存最新的 apiOptions，避免闭包陷阱
+  const apiOptionsRef = useRef(apiOptions);
+
+  useEffect(() => {
+    apiOptionsRef.current = apiOptions;
+  }, [apiOptions]);
+
+  const request = useCallback(async (historyMessages: any[]) => {
+    // 使用 ref.current 获取最新的 apiOptions
+    const currentApiOptions = apiOptionsRef.current;
+    let response
+    try {
+      response = await fetch(currentApiOptions.baseURL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${currentApiOptions.token || ''}`,
+        },
+        body: JSON.stringify({
+          input: historyMessages,
+          session_id: getCurrentSessionId(),
+          stream: true,
+        }),
+      });
+    } catch (error) {
+
+    }
+
+
+
+
+    if (response && response.body && response.ok) {
+      const agentScopeRuntimeResponseBuilder = new AgentScopeRuntimeResponseBuilder({
+        id: '',
+        status: AgentScopeRuntimeRunStatus.Created,
+        created_at: 0,
+      });
+      try {
+
+        for await (const chunk of Stream({
+          readableStream: response.body,
+        })) {
+          // 检查是否被中断
+          if (currentQARef.current.response?.msgStatus === 'interrupted') {
+            currentQARef.current.abortController?.abort();
+
+            currentQARef.current.response.cards = [
+              {
+                code: 'AgentScopeRuntimeResponseCard',
+                data: agentScopeRuntimeResponseBuilder.cancel(),
+              }
+            ];
+
+            updateMessage(currentQARef.current.response);
+            break;
+          }
+
+          const chunkData = JSON.parse(chunk.data);
+          const res = agentScopeRuntimeResponseBuilder.handle(chunkData);
+
+
+          // 跳过空内容
+          if (res.status !== AgentScopeRuntimeRunStatus.Failed && !res.output?.[0]?.content?.length) continue;
+
+          if (currentQARef.current.response) {
+            currentQARef.current.response.cards = [
+              {
+                code: 'AgentScopeRuntimeResponseCard',
+                data: res,
+              }
+            ];
+
+            if (res.status === AgentScopeRuntimeRunStatus.Completed || res.status === AgentScopeRuntimeRunStatus.Failed) {
+              onFinish();
+            } else {
+              updateMessage(currentQARef.current.response);
+            }
+          }
+        }
+      } catch (error) {
+        console.error(error);
+
+      }
+    }
+  }, [getCurrentSessionId, currentQARef, updateMessage, onFinish]);
+
+  return { request };
+}
+

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

@@ -0,0 +1,50 @@
+import { useCallback } from "react";
+import ReactDOM from "react-dom";
+import { useChatAnywhereSessions } from "../../Context/ChatAnywhereSessionsContext";
+import { IAgentScopeRuntimeWebUIMessage } from "@agentscope-ai/chat";
+
+/**
+ * 处理会话创建和更新的 Hook
+ */
+export default function useChatSessionHandler() {
+  const { createSession, updateSession, getCurrentSessionId } = useChatAnywhereSessions();
+
+  /**
+   * 确保会话存在，如果不存在则创建
+   */
+  const ensureSession = useCallback(async (query: string) => {
+    if (!getCurrentSessionId()) {
+      await createSession({ name: query });
+    }
+  }, [getCurrentSessionId, createSession]);
+
+  /**
+   * 更新会话名称（仅在第一次消息时）
+   */
+  const updateSessionName = useCallback(async (query: string, messages: IAgentScopeRuntimeWebUIMessage[]) => {
+    if (messages.length === 0) {
+      await updateSession({
+        id: getCurrentSessionId(),
+        name: query,
+      });
+    }
+  }, [getCurrentSessionId, updateSession]);
+
+  /**
+   * 同步会话消息
+   */
+  const syncSessionMessages = useCallback(async (messages: IAgentScopeRuntimeWebUIMessage[]) => {
+    await updateSession({
+      id: getCurrentSessionId(),
+      messages: messages,
+    });
+  }, [getCurrentSessionId, updateSession]);
+
+  return {
+    ensureSession,
+    updateSessionName,
+    syncSessionMessages,
+    getCurrentSessionId,
+  };
+}
+

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

@@ -0,0 +1,18 @@
+import { useProviderContext } from "@agentscope-ai/chat";
+import Input from "./Input";
+import MessageList from "./MessageList";
+import Style from './styles';
+import useChatController from "./hooks/useChatController";
+
+export default function Chat() {
+  const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-chat');
+  const { handleSubmit, handleCancel } = useChatController();
+
+  return <>
+    <Style />
+    <div className={prefixCls}>
+      <MessageList onSubmit={handleSubmit} />
+      <Input onCancel={handleCancel} onSubmit={handleSubmit} />
+    </div>
+  </>;
+}

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

@@ -0,0 +1,59 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-chat-anywhere-chat {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  align-items: stretch;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-message-list  {
+  flex: 1;
+  height: 0;
+
+  &-welcome {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+}
+
+
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-message-list > div::-webkit-scrollbar {
+  display: none;
+}
+
+@keyframes message-list-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-message-list > div {
+  animation: message-list-fade-in 0.4s ease-in-out;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-message-list .${(p) => p.theme.prefixCls}-bubble-list {
+  margin: 0 auto;
+  max-width: 850px;
+  min-width: 300px;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input {
+  padding: 0 16px;
+}
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-wrapper {
+  max-width: 850px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+.${(p) => p.theme.prefixCls}-chat-anywhere-input-blank {
+  height: 16px;
+`;

package/components/AgentScopeRuntimeWebUI/lib/ChatAnywhere/ComposedProvider.tsx

@@ -0,0 +1,27 @@
+import { CustomCardsProvider } from "@agentscope-ai/chat";
+import { ChatAnywhereInputContextProvider } from "../Context/ChatAnywhereInputContext";
+import { ChatAnywhereOptionsContextProvider } from "../Context/ChatAnywhereOptionsContext";
+import { ChatAnywhereSessionsContextProvider } from "../Context/ChatAnywhereSessionsContext";
+import { ChatAnywhereMessagesContextProvider } from "../Context/ChatAnywhereMessagesContext";
+import { ChatAnyWhereLayoutContextProvider } from "../Context/ChatAnywhereLayoutContext";
+
+function ComposedProvider(props: { options, cards, children }) {
+  const { options, cards, children } = props;
+  const providers = [
+    [ChatAnywhereOptionsContextProvider, { options }],
+    [CustomCardsProvider, { cardConfig: cards }],
+    [ChatAnywhereSessionsContextProvider, {}],
+    [ChatAnywhereMessagesContextProvider, {}],
+    [ChatAnywhereInputContextProvider, {}],
+    [ChatAnyWhereLayoutContextProvider, {}],
+  ];
+
+  return providers.reduceRight(
+    // @ts-ignore
+    (children, [Provider, props]) => <Provider {...props}>{children}</Provider>,
+    children
+  );
+}
+
+
+export default ComposedProvider;  

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

@@ -0,0 +1,29 @@
+import Layout from '../Layout';
+import type { IAgentScopeRuntimeWebUIOptions } from '@agentscope-ai/chat';
+import { useMemo } from 'react';
+import AgentScopeRuntimeRequestCard from '../AgentScopeRuntime/Request/Card';
+import AgentScopeRuntimeResponseCard from '../AgentScopeRuntime/Response/Card';
+import ComposedProvider from './ComposedProvider';
+
+interface IProps {
+  options: IAgentScopeRuntimeWebUIOptions;
+}
+export default function ChatAnywhere(props: IProps) {
+  const { options = {} as IAgentScopeRuntimeWebUIOptions } = props;
+
+  const cards = useMemo(() => {
+    const res = {
+      AgentScopeRuntimeRequestCard,
+      AgentScopeRuntimeResponseCard,
+      ...options.cards,
+    };
+    return res;
+  }, [options.cards]);
+
+
+  return <>
+    <ComposedProvider options={options} cards={cards}>
+      <Layout />
+    </ComposedProvider>
+  </>;
+}

package/components/AgentScopeRuntimeWebUI/lib/Context/ChatAnywhereInputContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContextSelector } from 'use-context-selector';
+import { IAgentScopeRuntimeWebUIInputContext } from '@agentscope-ai/chat';
+import { useGetState } from 'ahooks';
+
+export const ChatAnywhereInputContext = createContext<IAgentScopeRuntimeWebUIInputContext>({
+  loading: false,
+  setLoading: () => { },
+  getLoading: () => false,
+  disabled: false,
+  setDisabled: () => { },
+  getDisabled: () => false,
+});
+
+export function ChatAnywhereInputContextProvider(props: {
+  children: React.ReactNode | React.ReactNode[];
+}) {
+  const [loading, setLoading, getLoading] = useGetState<boolean>(false);
+  const [disabled, setDisabled, getDisabled] = useGetState<boolean>(false);
+
+  return <ChatAnywhereInputContext.Provider value={{ loading, setLoading, getLoading, disabled, setDisabled, getDisabled }}>
+    {props.children}
+  </ChatAnywhereInputContext.Provider>;
+}
+
+export const useChatAnywhereInput = (selector: (v: IAgentScopeRuntimeWebUIInputContext) => IAgentScopeRuntimeWebUIInputContext) => {
+  return useContextSelector(ChatAnywhereInputContext, selector);
+}

package/components/AgentScopeRuntimeWebUI/lib/Context/ChatAnywhereLayoutContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, useCallback, useState } from "react";
+
+export const ChatAnyWhereLayoutContext = createContext<{
+  collapsed: boolean;
+  toggleCollapsed: () => void;
+}>({
+  collapsed: false,
+  toggleCollapsed: () => { },
+});
+
+
+export function ChatAnyWhereLayoutContextProvider(props: {
+  children: React.ReactNode | React.ReactNode[];
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed(prev => !prev);
+  }, []);
+
+  return <ChatAnyWhereLayoutContext.Provider value={{
+    collapsed,
+    toggleCollapsed,
+  }}>
+    {props.children}
+  </ChatAnyWhereLayoutContext.Provider>;
+}

package/components/AgentScopeRuntimeWebUI/lib/Context/ChatAnywhereMessagesContext.tsx

@@ -0,0 +1,82 @@
+import { IAgentScopeRuntimeWebUIMessage, IAgentScopeRuntimeWebUIMessagesContext } from "@agentscope-ai/chat";
+import { useGetState } from 'ahooks';
+import React from "react";
+import { createContext, useContextSelector } from 'use-context-selector';
+
+
+export const ChatAnywhereMessagesContext = createContext<IAgentScopeRuntimeWebUIMessagesContext>({
+  messages: [],
+  setMessages: () => { },
+  getMessages: () => [],
+});
+
+
+export function ChatAnywhereMessagesContextProvider(props: {
+  children: React.ReactNode | React.ReactNode[];
+}) {
+
+  const [messages, setMessages, getMessages] = useGetState<IAgentScopeRuntimeWebUIMessage[]>([]);
+
+  const value = {
+    messages,
+    setMessages,
+    getMessages,
+  };
+
+
+  return <ChatAnywhereMessagesContext.Provider value={value}>
+    {props.children}
+  </ChatAnywhereMessagesContext.Provider>;
+}
+
+export const useChatAnywhereMessages = () => {
+  const { setMessages, getMessages } = useContextSelector(ChatAnywhereMessagesContext, v => ({
+    messages: v.messages,
+    setMessages: v.setMessages,
+    getMessages: v.getMessages,
+  }));
+
+  const removeAllMessages = React.useCallback(() => {
+    setMessages([]);
+  }, []);
+
+
+  const getMessage = React.useCallback((id: string) => {
+    return getMessages().find(item => item.id === id);
+  }, []);
+
+
+  const removeMessage = React.useCallback((message: Partial<IAgentScopeRuntimeWebUIMessage>) => {
+    // @ts-ignore
+    setMessages(prev => {
+      return prev.filter(item => item.id !== message.id);
+    })
+  }, []);
+
+  const updateMessage = React.useCallback((message: Partial<IAgentScopeRuntimeWebUIMessage> & { id: string }) => {
+    // @ts-ignore
+    setMessages((prev) => {
+      const index = prev.findIndex((item) => item.id === message.id);
+      if (index > -1) {
+        const nextMessage = {
+          ...prev[index],
+          ...message
+        };
+        return [...prev.slice(0, index), nextMessage, ...prev.slice(index + 1)];
+      } else {
+        return [...prev, message];
+      }
+    });
+  }, []);
+
+
+
+  return {
+    getMessages,
+    removeAllMessages,
+    getMessage,
+    removeMessage,
+    updateMessage,
+  };
+}
+

package/components/AgentScopeRuntimeWebUI/lib/Context/ChatAnywhereOptionsContext.tsx

@@ -0,0 +1,76 @@
+import { useResponsive } from "ahooks";
+import { IAgentScopeRuntimeWebUIOptions } from "@agentscope-ai/chat";
+import { createContext, useContextSelector } from 'use-context-selector';
+import { useMemo } from "react";
+import { ConfigProvider, generateTheme, generateThemeByToken } from '@agentscope-ai/design';
+
+
+const ChatAnywhereOptionsContext = createContext<IAgentScopeRuntimeWebUIOptions>(undefined);
+
+export function useChatAnywhereOptions<Selected>(selector: (value: IAgentScopeRuntimeWebUIOptions) => Selected) {
+  try {
+    const context = useContextSelector(ChatAnywhereOptionsContext, selector);
+    return context;
+
+  } catch (error) {
+    return {} as Selected;
+  }
+};
+
+
+export function ChatAnywhereOptionsContextProvider(props: { children: React.ReactNode, options: IAgentScopeRuntimeWebUIOptions }) {
+  const { children } = props;
+  const responsive = useResponsive();
+
+  const options = useMemo(() => {
+    const theme = props.options.theme || {};
+
+    return {
+      ...props.options,
+      theme: {
+        ...theme,
+        narrowMode: !responsive.lg || theme.narrowMode,
+      }
+    };
+  }, [props.options, responsive.lg]);
+
+  const themeToken = useMemo(() => {
+    const colorPrimary = options.theme.colorPrimary;
+    const colorBgBase = options.theme.colorBgBase;
+    const colorTextBase = options.theme.colorTextBase;
+    const darkMode = options.theme.darkMode;
+    if (colorPrimary || darkMode) {
+      const res = generateThemeByToken(generateTheme({
+        primaryHex: colorPrimary,
+        bgBaseHex: colorBgBase,
+        textBaseHex: colorTextBase,
+        darkMode: darkMode,
+      }));
+
+      return res;
+    }
+    return
+  }, [options.theme.colorPrimary, options.theme.colorBgBase, options.theme.colorTextBase, options.theme.darkMode]);
+
+
+  const content = <ChatAnywhereOptionsContext.Provider value={options}>
+    {children}
+  </ChatAnywhereOptionsContext.Provider>;
+
+  if (themeToken) {
+    const prefix = options.theme.prefix || 'agentscope-runtime-webui';
+
+    return <ConfigProvider
+      {...themeToken}
+      style={{ height: '100%' }}
+      prefix={prefix}
+      prefixCls={prefix}
+    >
+      {content}
+    </ConfigProvider>
+  }
+
+  return content;
+}
+
+export default ChatAnywhereOptionsContext;

package/components/AgentScopeRuntimeWebUI/lib/Context/ChatAnywhereSessionsContext.tsx

@@ -0,0 +1,111 @@
+import { createContext, useContextSelector } from 'use-context-selector';
+import { IAgentScopeRuntimeWebUISessionsContext } from '../types/ISessions';
+import { useGetState, useMount } from 'ahooks';
+import { IAgentScopeRuntimeWebUISession } from '../types/ISessions';
+import React, { useEffect } from "react";
+import { ChatAnywhereMessagesContext } from './ChatAnywhereMessagesContext';
+import { useChatAnywhereOptions } from './ChatAnywhereOptionsContext';
+import ReactDOM from 'react-dom';
+import { useAsyncEffect } from 'ahooks';
+
+
+export const ChatAnywhereSessionsContext = createContext<IAgentScopeRuntimeWebUISessionsContext>({
+  sessions: [],
+  setSessions: () => { },
+  getSessions: () => [],
+  currentSessionId: undefined,
+  setCurrentSessionId: () => { },
+  getCurrentSessionId: () => '',
+});
+
+export function ChatAnywhereSessionsContextProvider(props: {
+  children: React.ReactNode | React.ReactNode[];
+}) {
+  const options = useChatAnywhereOptions(v => v.session);
+  const [sessions, setSessions, getSessions] = useGetState<IAgentScopeRuntimeWebUISession[]>([]);
+  const [currentSessionId, setCurrentSessionId, getCurrentSessionId] = useGetState<string | undefined>(undefined);
+
+  useMount(async () => {
+    const sessionList = await options.api.getSessionList();
+    setSessions(sessionList);
+    setCurrentSessionId(sessionList?.[0]?.id);
+  })
+
+
+  return <ChatAnywhereSessionsContext.Provider value={{
+    sessions,
+    setSessions,
+    getSessions,
+    currentSessionId,
+    setCurrentSessionId,
+    getCurrentSessionId
+  }}>
+    {props.children}
+  </ChatAnywhereSessionsContext.Provider>;
+}
+
+export const useChatAnywhereSessions = () => {
+  const {
+    setSessions,
+    getSessions,
+    getCurrentSessionId,
+    setCurrentSessionId,
+    currentSessionId,
+  } = useContextSelector(ChatAnywhereSessionsContext, v => v);
+  const options = useChatAnywhereOptions(v => v.session);
+  const setMessages = useContextSelector(ChatAnywhereMessagesContext, v => v.setMessages);
+
+
+  const removeSession = React.useCallback(async (session: Partial<IAgentScopeRuntimeWebUISession> & { id: string }) => {
+    const res = await options.api.removeSession(session);
+    setMessages([]);
+    setCurrentSessionId(undefined);
+    setSessions(res);
+  }, []);
+
+  const updateSession = React.useCallback(async (session: Partial<IAgentScopeRuntimeWebUISession>) => {
+    const res = session.id ?
+      await options.api.updateSession(session) :
+      await options.api.createSession(session);
+
+
+    setSessions(res);
+    return session;
+  }, [])
+
+  const createSession = React.useCallback(async (data?: { name?: string }) => {
+    const session = await updateSession({
+      name: data?.name || '',
+      messages: [],
+    });
+    setCurrentSessionId(session.id);
+    setMessages(session.messages);
+    return session.id;
+  }, []);
+
+
+  const changeCurrentSessionId = React.useCallback((sessionId: string) => {
+    setCurrentSessionId(sessionId);
+
+  }, []);
+
+
+  useAsyncEffect(async () => {
+    ReactDOM.flushSync(() => {
+      setMessages([])
+    })
+
+    const messages = (await options.api.getSession(currentSessionId))?.messages || [];
+    setMessages(messages);
+  }, [currentSessionId]);
+
+
+  return {
+    changeCurrentSessionId,
+    getCurrentSessionId,
+    getSessions,
+    removeSession,
+    updateSession,
+    createSession,
+  }
+};

package/components/AgentScopeRuntimeWebUI/lib/Context/useChatAnywhereEventEmitter.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+
+interface IAgentScopeRuntimeWebUIEventEmitter {
+  type: string;
+  callback: (event: any) => void;
+}
+
+
+export default function useChatAnywhereEventEmitter(props: IAgentScopeRuntimeWebUIEventEmitter) {
+
+  useEffect(() => {
+    document.addEventListener(props.type, props.callback);
+    return () => {
+      document.removeEventListener(props.type, props.callback);
+    }
+  }, [])
+
+}
+
+
+export const emit = function (props: {
+  type: string;
+  data?: any;
+}) {
+  const { type, data } = props;
+
+  document.dispatchEvent(new CustomEvent(type, {
+    detail: data,
+  }))
+}