@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/ChatAnywhere/Input/index.tsx

@@ -0,0 +1,158 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import { useProviderContext, ChatInput, uuid, Sender, Attachments } from '@agentscope-ai/chat';
+import cls from 'classnames';
+import { useChatAnywhere } from '../hooks/ChatAnywhereProvider';
+import { useInput } from '../hooks/useInput';
+import { Button, GetProp, Space, Upload } from 'antd';
+import Style from './style';
+import { IconButton } from '@agentscope-ai/design';
+
+type AttachedFiles = GetProp<typeof Attachments, 'items'>;
+
+export default forwardRef(function (_, ref) {
+  const [content, setContent] = React.useState('');
+  const onUpload = useChatAnywhere(v => v.onUpload);
+  const resetData = new Array(onUpload?.length || 0).fill([]);
+  const [attachedFiles, setAttachedFiles] = React.useState<AttachedFiles[]>(resetData);
+  useEffect(() => {
+    setAttachedFiles(resetData);
+  }, [resetData.length]);
+
+  const inputContext = useInput();
+  const uiConfig = useChatAnywhere(v => v.uiConfig);
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('chat-anywhere-sender');
+  const onStop = useChatAnywhere(v => v.onStop);
+  const onInput = useChatAnywhere(v => {
+    const defaultValue = {
+      beforeUI: undefined,
+      afterUI: undefined,
+      morePrefixActions: undefined,
+      maxLength: undefined,
+      zoomable: true,
+      beforeSubmit: () => Promise.resolve(true),
+      header: [],
+      hide: false,
+    };
+
+    return {
+      ...defaultValue,
+      ...v.onInput,
+    }
+  });
+
+  React.useImperativeHandle(ref, () => {
+    return {
+      setInputContent: setContent
+    };
+  }, []);
+
+  useEffect(() => {
+    inputContext.setDisabled(onInput.disabled);
+  }, [onInput.disabled])
+
+
+  if (onInput.hide) return null;
+
+  const handleFileChange = async (index, fileList) => {
+    setAttachedFiles(attachedFiles => {
+      return attachedFiles.map((item, i) => {
+        if (i === index) {
+          return fileList;
+        }
+        return item;
+      })
+    })
+  }
+
+  const prefixNodes = onUpload?.length ?
+    onUpload.map((item, index) => {
+      return <Upload
+        {...item}
+        fileList={attachedFiles[index]}
+        key={index}
+        onChange={(info) => {
+          if (item.beforeUpload && info.file.status) {
+            handleFileChange(index, info.fileList)
+          }
+
+          if (!item.beforeUpload) {
+            handleFileChange(index, info.fileList)
+          }
+        }}
+        showUploadList={false}
+      >
+        <IconButton
+          icon={item.icon}
+          bordered={false}
+        />
+      </Upload>
+    }) : [];
+
+
+  const senderHeader = (
+    <Sender.Header
+      closable={false}
+      open={attachedFiles?.some(item => item.length)}
+    >
+      {
+        attachedFiles.map((files, index) => {
+          if (!files.length) return null;
+          return <Attachments
+            key={index}
+            items={files}
+            onChange={(info) => handleFileChange(index, info.fileList)}
+          />
+        })
+      }
+    </Sender.Header>
+  );
+
+  const submitFileList = attachedFiles.map(files => files.filter(file => file.status === 'done'));
+  const fileLoading = attachedFiles.some(files => files.some(file => file.status === 'uploading'));
+
+
+
+  return <>
+    <Style />
+    <div
+      className={cls(`${prefixCls}-wrapper`)}
+    >
+      {
+        uiConfig.quickInput && <div className={cls(`${prefixCls}-wrapper-header`)}>{uiConfig.quickInput}</div>
+      }
+
+      {
+        onInput.beforeUI
+      }
+      <ChatInput
+        placeholder={onInput.placeholder}
+        value={content}
+        onChange={setContent}
+        maxLength={onInput.maxLength}
+        disabled={fileLoading || inputContext.disabled}
+        scalable={onInput?.zoomable}
+        header={senderHeader}
+        prefix={<>
+          {prefixNodes}
+          {onInput?.morePrefixActions}
+        </>}
+        onSubmit={async () => {
+          const next = await (onInput.beforeSubmit || (() => Promise.resolve(true)))();
+          if (!next) return;
+          // @ts-ignore
+          onInput.onSubmit({ query: content, fileList: submitFileList });
+          setContent('');
+          setAttachedFiles(resetData);
+        }}
+        onCancel={() => {
+          onStop?.();
+          inputContext.setLoading(false);
+        }}
+        loading={inputContext.loading}
+      />
+      {
+        onInput.afterUI
+      }
+    </div></>
+})

package/components/ChatAnywhere/Input/style.ts

@@ -0,0 +1,14 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-chat-anywhere-sender-wrapper {
+  position: relative;
+
+  &-header {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+}
+
+`;

package/components/ChatAnywhere/Layout/index.tsx

@@ -0,0 +1,70 @@
+import React, { useContext, useEffect } from 'react';
+import classnames from 'classnames';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { Drawer } from 'antd';
+import { useResponsive } from 'ahooks';
+import { useChatAnywhere } from '../hooks/ChatAnywhereProvider';
+import Style from './style';
+
+interface IProps {
+  top?: React.ReactNode;
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+}
+
+
+function Left(props: IProps) {
+  const {
+    sessionListShow,
+    setSessionListShow,
+  } = useChatAnywhere(v => ({ sessionListShow: v.sessionListShow, setSessionListShow: v.setSessionListShow }))
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('chat-anywhere-layout');
+  const isMobile = isMobileHook();
+
+  useEffect(() => {
+    setSessionListShow(!isMobile)
+  }, [isMobile])
+
+  if (!props.left) return null;
+
+  if (!isMobile)
+    return <div className={classnames(`${prefixCls}-left`, sessionListShow ? '' : `${prefixCls}-left-hide`)}>
+      {props.left}
+    </div>
+
+  return <Drawer width={"80vw"} styles={{ body: { padding: 0 } }} open={sessionListShow} onClose={() => { setSessionListShow(false) }} title={null} closable={false} placement="left">
+    <div style={{ display: 'flex', flexDirection: 'column', }}>
+      {props.left}
+    </div>
+  </Drawer>;
+}
+
+export default function (props: IProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('chat-anywhere-layout');
+  const uiConfig = useChatAnywhere(state => state.uiConfig);
+
+
+  return <>
+    <Style />
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-main`}>
+        <Left {...props} />
+
+        <div className={`${prefixCls}-right`} style={{
+          background: uiConfig?.background,
+        }}>
+          {props.top}
+          {props.right}
+        </div>
+      </div>
+    </div></>;
+}
+
+export const isMobileHook = () => {
+  const responsive = useResponsive();
+  const uiConfig = useChatAnywhere(state => state.uiConfig);
+
+  return !responsive.md || uiConfig?.narrowScreen;
+}

package/components/ChatAnywhere/Layout/style.ts

@@ -0,0 +1,51 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+
+.${(p) => p.theme.prefixCls}-chat-anywhere-layout {
+  *::-webkit-scrollbar {
+    display: none;
+  }
+  font-family: ${(p) => p.theme.fontFamily};
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  background: ${(p) => p.theme.colorBgBase};
+
+  &-main {
+    display: flex;
+    height: 100%;
+    background: ${(p) => p.theme.colorBgBase};
+  }
+
+  &-left {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    box-sizing: border-box;
+    background-color: ${(p) => p.theme.colorBgBase};
+    width: 240px;
+    transition: all 0.2s;
+
+    &-hide {
+      margin-left: -168px;
+      background-color: transparent;
+    }
+  }
+
+  &-right {
+    position: relative;
+    width: 0;
+    flex: 1;
+    box-sizing: border-box;
+    background: ${(p) => p.theme.colorFillTertiary};
+  }
+}
+
+
+
+
+*[data-tauri-drag-region] {
+  -webkit-app-region: drag;
+}
+`;

package/components/ChatAnywhere/SessionList/index.tsx

@@ -0,0 +1,122 @@
+import React, { useContext, useEffect, useMemo } from 'react';
+import { Conversations } from '@agentscope-ai/chat';
+import cls from 'classnames';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { Button, IconButton } from '@agentscope-ai/design';
+import { useChatAnywhere } from '../hooks/ChatAnywhereProvider';
+import { useSessionList } from '../hooks/useSessionList';
+import { useMessages } from '../hooks/useMessages';
+import { isMobileHook } from '../Layout';
+import Style from './style';
+import { SparkOperateLeftLine, SparkOperateRightLine, SparkPlusLine, SparkDeleteLine } from "@agentscope-ai/icons";
+
+
+export default function () {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('chat-anywhere-session-list');
+  const sessionListShow = useChatAnywhere(v => v.sessionListShow);
+
+  return <>
+    <Style />
+    <div className={cls(`${prefixCls}`, sessionListShow ? '' : `${prefixCls}-hide`)}>
+      <InnerAdder />
+      <InnerSession />
+    </div>
+  </>
+}
+
+export function InnerSession() {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('chat-anywhere-session-list');
+
+  const {
+    currentSessionKey,
+    setCurrentSessionKey,
+    currentRegenerateIndex,
+    sessionList,
+    getMessagesBySession,
+    setSessionListShow
+  } = useSessionList();
+  const { setMessages } = useMessages();
+  const getLoading = useChatAnywhere(v => v.getLoading);
+  const onSessionKeyChange = useChatAnywhere(v => v.onSessionKeyChange);
+  const isMobile = isMobileHook();
+
+
+  useEffect(() => {
+    const messages = getMessagesBySession(currentSessionKey, currentRegenerateIndex);
+    setMessages(messages);
+  }, [currentSessionKey, currentRegenerateIndex]);
+
+  return <div className={`${prefixCls}-session`} >
+    <Conversations
+      menu={[
+        {
+          key: 'delete',
+          icon: <SparkDeleteLine />,
+          danger: true,
+          onClick: (session) => { },
+        },
+      ]}
+      activeKey={currentSessionKey}
+      items={sessionList}
+      onActiveChange={key => {
+        if (getLoading()) return;
+        if (isMobile) {
+          setSessionListShow(false);
+        }
+
+        requestIdleCallback(() => {
+          setCurrentSessionKey(key);
+          onSessionKeyChange(key);
+        })
+      }}
+    />
+  </div>
+}
+
+export function InnerAdder() {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('chat-anywhere-session-list');
+  const {
+    currentSessionKey,
+    setCurrentSessionKey,
+    deleteSession,
+    createSession,
+    sessionList,
+    sessionListShow,
+    setSessionListShow
+  } = useSessionList();
+  const uiConfig = useChatAnywhere(v => v.uiConfig);
+  const isMobile = isMobileHook();
+
+
+  return <>
+    <div className={`${prefixCls}-logo`}>
+      {uiConfig?.logo}
+      <IconButton
+        bordered={false}
+        onClick={() => setSessionListShow(!sessionListShow)}
+        icon={
+          sessionListShow ? <SparkOperateLeftLine /> : <SparkOperateRightLine />
+        }></IconButton>
+
+    </div>
+
+    <div className={`${prefixCls}-adder`}>
+      <Button
+        type="primary"
+        block
+        icon={<SparkPlusLine />}
+        onClick={() => {
+          if (isMobile) {
+            setSessionListShow(false);
+          }
+          createSession();
+        }}
+      >
+        New Session
+      </Button>
+    </div>
+  </>
+}

package/components/ChatAnywhere/SessionList/style.ts

@@ -0,0 +1,53 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-chat-anywhere-session-list {
+  display: flex;
+  flex-direction: column;
+  height: 0;
+  flex: 1;
+  width: 100%;
+
+  .${(p) => p.theme.prefixCls}-conversations {
+    height: 100%;
+  }
+
+  &-session { 
+    height: 0;
+    flex: 1;
+    padding: 8px 20px;
+
+  }
+
+  &-logo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 64px;
+  }
+
+  &-adder {
+    padding: 0 20px 8px 20px;
+    button {
+      border-radius: 6px;
+      box-shadow: 15px 0px 30px -10px rgba(131, 88, 246, 0.4),
+        0px 0px 30px -10px rgba(255, 142, 168, 0.4),
+        -15px 0px 30px -10px rgba(225, 163, 37, 0.4);
+    }
+  }
+
+  &-hide {
+    .${(p) => p.theme.prefixCls}-chat-anywhere-session-list-adder-logo > div {
+      opacity: 0;
+    }
+    .${(p) => p.theme.prefixCls}-chat-anywhere-session-list-adder {
+      opacity: 0;
+    }
+    .${(p) => p.theme.prefixCls}-chat-anywhere-session-list-session {
+      opacity: 0;
+    }
+  }
+}
+
+`;

package/components/ChatAnywhere/hooks/ChatAnywhereProvider.tsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import { TMessage, TSession, IChatAnywhereConfig } from './types';
+import { useGetState } from 'ahooks';
+import { useSessionList } from './useSessionList';
+import { createContext, useContextSelector } from 'use-context-selector';
+import { useMessages } from './useMessages';
+import { useInput } from './useInput';
+import { ScrollToBottomOptions } from 'use-stick-to-bottom';
+
+
+export function ChatAnywhereProvider(props:
+  IChatAnywhereConfig &
+  { children: React.ReactNode, }
+) {
+
+  const [sessionList, setSessionList, getSessionList] = useGetState<TSession[]>([]);
+  const [currentSessionKey, setCurrentSessionKey, getCurrentSessionKey] = useGetState<string>('0');
+  const [currentRegenerateIndex, setCurrentRegenerateIndex, getCurrentRegenerateIndex] = useGetState<number>(0);
+  const [messages, setMessages, getMessages] = useGetState<TMessage[]>([]);
+  const [loading, setLoading, getLoading] = useGetState<boolean>(false);
+  const [disabled, setDisabled, getDisabled] = useGetState<boolean>(false);
+  const [sessionListShow, setSessionListShow, getSessionListShow] = useGetState<boolean>(true);
+
+  const { children, ...rest } = props;
+
+  const value = {
+    sessionList,
+    setSessionList,
+    getSessionList,
+    currentSessionKey,
+    setCurrentSessionKey,
+    getCurrentSessionKey,
+    messages,
+    setMessages,
+    getMessages,
+    loading,
+    setLoading,
+    getLoading,
+    disabled,
+    setDisabled,
+    getDisabled,
+    sessionListShow,
+    setSessionListShow,
+    getSessionListShow,
+    currentRegenerateIndex,
+    setCurrentRegenerateIndex,
+    getCurrentRegenerateIndex,
+    ...rest,
+  }
+
+
+
+  return <ChatAnywhereContext.Provider value={value}>
+    {children}
+  </ChatAnywhereContext.Provider>
+}
+
+export const ChatAnywhereContext = createContext<IChatAnywhereContext>(undefined);
+
+export function useChatAnywhere<Selected>(selector: (value: IChatAnywhereContext) => Selected) {
+  try {
+    const context = useContextSelector(ChatAnywhereContext, selector);
+    return context;
+
+  } catch (error) {
+    return {} as Selected;
+  }
+};
+
+export interface IChatAnywhereContext {
+  /**
+   * @description 会话列表数据，包含所有可用的聊天会话
+   * @descriptionEn Session list data containing all available chat sessions
+   */
+  sessionList: TSession[];
+  /**
+   * @description 设置会话列表的状态更新函数
+   * @descriptionEn State update function for setting session list
+   */
+  setSessionList: React.Dispatch<React.SetStateAction<TSession[]>>
+  /**
+   * @description 获取当前会话列表的同步函数
+   * @descriptionEn Synchronous function to get current session list
+   */
+  getSessionList: () => TSession[];
+
+  /**
+   * @description 当前激活会话的唯一标识符
+   * @descriptionEn Unique identifier for the currently active session
+   */
+  currentSessionKey: string;
+  /**
+   * @description 设置当前会话标识符的状态更新函数
+   * @descriptionEn State update function for setting current session identifier
+   */
+  setCurrentSessionKey: React.Dispatch<React.SetStateAction<string>>;
+  /**
+   * @description 获取当前会话标识符的同步函数
+   * @descriptionEn Synchronous function to get current session identifier
+   */
+  getCurrentSessionKey: () => string;
+
+  /**
+   * @description 当前会话的消息列表
+   * @descriptionEn Message list for the current session
+   */
+  messages: TMessage[];
+  /**
+   * @description 设置消息列表的状态更新函数
+   * @descriptionEn State update function for setting message list
+   */
+  setMessages: React.Dispatch<React.SetStateAction<TMessage[]>>;
+  /**
+   * @description 获取当前消息列表的同步函数
+   * @descriptionEn Synchronous function to get current message list
+   */
+  getMessages: () => TMessage[];
+
+  /**
+   * @description 是否正在加载状态，影响UI的交互性
+   * @descriptionEn Whether in loading state, affects UI interactivity
+   */
+  loading: boolean;
+  /**
+   * @description 设置加载状态的状态更新函数
+   * @descriptionEn State update function for setting loading state
+   */
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * @description 获取当前加载状态的同步函数
+   * @descriptionEn Synchronous function to get current loading state
+   */
+  getLoading: () => boolean;
+
+  /**
+   * @description 是否禁用组件，影响所有交互功能
+   * @descriptionEn Whether to disable the component, affects all interaction functionality
+   */
+  disabled: boolean;
+  /**
+   * @description 设置禁用状态的状态更新函数
+   * @descriptionEn State update function for setting disabled state
+   */
+  setDisabled: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * @description 获取当前禁用状态的同步函数
+   * @descriptionEn Synchronous function to get current disabled state
+   */
+  getDisabled: () => boolean;
+
+  /**
+   * @description 是否显示会话列表，控制侧边栏的可见性
+   * @descriptionEn Whether to show session list, controls sidebar visibility
+   */
+  sessionListShow: boolean;
+  /**
+   * @description 设置会话列表显示状态的状态更新函数
+   * @descriptionEn State update function for setting session list display state
+   */
+  setSessionListShow: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * @description 获取当前会话列表显示状态的同步函数
+   * @descriptionEn Synchronous function to get current session list display state
+   */
+  getSessionListShow: () => boolean;
+
+  /**
+   * @description 当前重新生成的消息索引，用于定位重新生成的消息
+   * @descriptionEn Current regenerate message index for locating regenerated messages
+   */
+  currentRegenerateIndex: number;
+  /**
+   * @description 设置重新生成索引的状态更新函数
+   * @descriptionEn State update function for setting regenerate index
+   */
+  setCurrentRegenerateIndex: React.Dispatch<React.SetStateAction<number>>;
+  /**
+   * @description 获取当前重新生成索引的同步函数
+   * @descriptionEn Synchronous function to get current regenerate index
+   */
+  getCurrentRegenerateIndex: () => number;
+
+  /**
+   * @description 输入事件的处理函数，用于处理用户输入
+   * @descriptionEn Input event handler for processing user input
+   */
+  onInput?: IChatAnywhereConfig['onInput'];
+  /**
+   * @description 停止生成事件的处理函数，用于中断AI响应
+   * @descriptionEn Stop generation event handler for interrupting AI responses
+   */
+  onStop?: IChatAnywhereConfig['onStop'];
+  /**
+   * @description 文件上传事件的处理函数，用于处理文件上传
+   * @descriptionEn File upload event handler for processing file uploads
+   */
+  onUpload?: IChatAnywhereConfig['onUpload'];
+  /**
+   * @description 会话切换事件的处理函数，用于处理会话变更
+   * @descriptionEn Session change event handler for processing session switches
+   */
+  onSessionKeyChange?: IChatAnywhereConfig['onSessionKeyChange'];
+  /**
+   * @description UI配置对象，用于自定义界面外观和行为
+   * @descriptionEn UI configuration object for customizing interface appearance and behavior
+   */
+  uiConfig?: IChatAnywhereConfig['uiConfig'];
+};
+
+
+export type ChatAnywhereRef =
+  ReturnType<typeof useMessages> &
+  ReturnType<typeof useInput> &
+  ReturnType<typeof useSessionList> &
+  {
+    setInputContent: (content: string) => void;
+    scrollToBottom: (options?: ScrollToBottomOptions) => void;
+    reload: () => void;
+  };