@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/AgentScopeRuntimeWebUI/lib/demo/sessionApi/index.ts

@@ -0,0 +1,51 @@
+import { IAgentScopeRuntimeWebUISessionAPI } from '@agentscope-ai/chat';
+import { IAgentScopeRuntimeWebUISession } from '../../lib/types/ISessions';
+
+class SessionApi implements IAgentScopeRuntimeWebUISessionAPI {
+  private lsKey: string;
+  private sessionList: IAgentScopeRuntimeWebUISession[];
+
+  constructor() {
+    this.lsKey = 'agent-scope-runtime-webui-sessions';
+    this.sessionList = [];
+  }
+
+  async getSessionList() {
+    this.sessionList = JSON.parse(localStorage.getItem(this.lsKey) || '[]');
+    return [...this.sessionList];
+  }
+
+  async getSession(sessionId) {
+    return this.sessionList.find((session) => session.id === sessionId);
+  }
+
+  async updateSession(session) {
+    const index = this.sessionList.findIndex((item) => item.id === session.id);
+    if (index > -1) {
+      this.sessionList[index] = {
+        ...this.sessionList[index],
+        ...session,
+      };
+      localStorage.setItem(this.lsKey, JSON.stringify(this.sessionList));
+    }
+
+    return [...this.sessionList];
+  }
+
+  async createSession(session) {
+    session.id = Date.now().toString();
+    this.sessionList.unshift(session);
+    localStorage.setItem(this.lsKey, JSON.stringify(this.sessionList));
+    return [...this.sessionList];
+  }
+
+  async removeSession(session) {
+    this.sessionList = this.sessionList.filter(
+      (item) => item.id !== session.id,
+    );
+    localStorage.setItem(this.lsKey, JSON.stringify(this.sessionList));
+    return [...this.sessionList];
+  }
+}
+
+export default new SessionApi();

package/components/AgentScopeRuntimeWebUI/lib/types/IChatAnywhere.ts

@@ -0,0 +1,358 @@
+import { UploadProps } from 'antd';
+import { IAgentScopeRuntimeWebUISession } from './ISessions';
+
+/**
+ * @description API 配置选项
+ * @descriptionEn API configuration options
+ */
+export interface IAgentScopeRuntimeWebUIAPIOptions {
+  /**
+   * @description 基础URL
+   * @descriptionEn Base URL
+   */
+  baseURL: string;
+  /**
+   * @description 鉴权参数
+   * @descriptionEn Authorization Token
+   */
+  token?: string;
+}
+
+/**
+ * @description 主题配置选项
+ * @descriptionEn Theme configuration options
+ */
+export interface IAgentScopeRuntimeWebUIThemeOptions {
+  /**
+   * @description 主题色
+   * @descriptionEn Primary color
+   */
+  colorPrimary?: string;
+  /**
+   * @description 背景色
+   * @descriptionEn Background color
+   */
+  colorBgBase?: string;
+  /**
+   * @description 文本颜色
+   * @descriptionEn Text color
+   */
+  colorTextBase?: string;
+  /**
+   * @description 是否开启暗色模式
+   * @descriptionEn Enable dark mode
+   */
+  darkMode?: boolean;
+  /**
+   * @description 是否开启窄屏模式
+   * @descriptionEn Enable narrow mode
+   */
+  narrowMode?: boolean;
+  /**
+   * @description CSS 类名前缀
+   * @descriptionEn CSS class name prefix
+   */
+  prefix?: string;
+  /**
+   * @description 左侧头部配置
+   * @descriptionEn Left header configuration
+   */
+  leftHeader?: IAgentScopeRuntimeWebUILeftHeader | React.ReactElement;
+  /**
+   * @description 右侧头部配置
+   * @descriptionEn Right header configuration
+   */
+  rightHeader?: React.ReactElement | React.ReactElement[];
+  /**
+   * @description 排版配置
+   * @descriptionEn Typography configuration
+   */
+  typography?: IAgentScopeRuntimeWebUITypography;
+}
+
+export interface IAgentScopeRuntimeWebUITypography {
+  /**
+   * @description 基础字体大小
+   * @descriptionEn Base font size
+   */
+  baseFontSize?: number;
+  /**
+   * @description 基础行高
+   * @descriptionEn Base line height
+   */
+  baseLineHeight?: number;
+}
+
+export interface IAgentScopeRuntimeWebUILeftHeader {
+  /**
+   * @description Logo 图片地址
+   * @descriptionEn Logo image URL
+   */
+  logo?: string;
+  /**
+   * @description 标题
+   * @descriptionEn Title
+   */
+  title?: string;
+}
+
+/**
+ * @description 欢迎页配置选项
+ * @descriptionEn Welcome page configuration options
+ */
+export interface IAgentScopeRuntimeWebUIWelcomeOptions {
+  /**
+   * @description 问候语
+   * @descriptionEn Greeting message
+   */
+  greeting?: string | React.ReactElement;
+  /**
+   * @description 描述信息
+   * @descriptionEn Description text
+   */
+  description?: string | React.ReactElement;
+  /**
+   * @description 头像
+   * @descriptionEn Avatar
+   */
+  avatar?: string | React.ReactElement;
+  /**
+   * @description 提示语列表
+   * @descriptionEn Prompt list
+   */
+  prompts?: (
+    | { label?: string; value: string; icon?: React.ReactElement }
+    | string
+  )[];
+  /**
+   * @description 自定义渲染函数
+   * @descriptionEn Custom render function
+   */
+  render?: (
+    props: Pick<
+      IAgentScopeRuntimeWebUIWelcomeOptions,
+      'greeting' | 'description' | 'avatar' | 'prompts'
+    > & { onSubmit: (data: { query: string; fileList?: any[] }) => void },
+  ) => React.ReactElement;
+}
+
+/**
+ * @description 输入框配置选项
+ * @descriptionEn Sender configuration options
+ */
+export interface IAgentScopeRuntimeWebUISenderOptions {
+  /**
+   * @description 输入框占位符
+   * @descriptionEn Input placeholder
+   */
+  placeholder?: string;
+  /**
+   * @description 最大输入长度
+   * @descriptionEn Maximum input length
+   */
+  maxLength?: number;
+  /**
+   * @description 是否可缩放
+   * @descriptionEn Whether scalable
+   */
+  scalable?: boolean;
+  /**
+   * @description 输入框前置UI
+   * @descriptionEn UI before input
+   */
+  beforeUI?: React.ReactElement | React.ReactElement[];
+  /**
+   * @description 输入框后置UI
+   * @descriptionEn UI after input
+   */
+  afterUI?: React.ReactElement | React.ReactElement[];
+  /**
+   * @description 提交前的钩子函数
+   * @descriptionEn Hook function before submit
+   */
+  beforeSubmit?: () => Promise<Boolean>;
+  /**
+   * @description 提交回调函数
+   * @descriptionEn Submit callback function
+   */
+  onSubmit?: (data: { query: string; fileList?: any[] }) => void;
+  /**
+   * @description 取消回调函数
+   * @descriptionEn Cancel callback function
+   */
+  onCancel?: () => void;
+  /**
+   * @description 免责声明
+   * @descriptionEn Disclaimer
+   */
+  disclaimer?: string | React.ReactElement;
+  /**
+   * @description 附件配置
+   * @descriptionEn Attachments configuration
+   */
+  attachments?: IAgentScopeRuntimeWebUISenderAttachmentsOptions;
+}
+
+/**
+ * @description 附件配置选项
+ * @descriptionEn Attachments configuration options
+ */
+export interface IAgentScopeRuntimeWebUISenderAttachmentsOptions {
+  /**
+   * @description 自定义上传请求
+   * @descriptionEn Custom upload request
+   */
+  customRequest?: UploadProps['customRequest'];
+}
+
+/**
+ * @description 会话 API 接口
+ * @descriptionEn Session API interface
+ */
+export interface IAgentScopeRuntimeWebUISessionAPI {
+  /**
+   * @description 获取会话列表
+   * @descriptionEn Get session list
+   */
+  getSessionList?: () => Promise<IAgentScopeRuntimeWebUISession[]>;
+  /**
+   * @description 获取会话详情
+   * @descriptionEn Get session details
+   */
+  getSession?: (sessionId: string) => Promise<IAgentScopeRuntimeWebUISession>;
+  /**
+   * @description 更新会话
+   * @descriptionEn Update session
+   */
+  updateSession?: (session: Partial<IAgentScopeRuntimeWebUISession>) => Promise<IAgentScopeRuntimeWebUISession[]>;
+  /**
+   * @description 创建会话
+   * @descriptionEn Create session
+   */
+  createSession?: (session: Partial<IAgentScopeRuntimeWebUISession>) => Promise<IAgentScopeRuntimeWebUISession[]>;
+  /**
+   * @description 删除会话
+   * @descriptionEn Remove session
+   */
+  removeSession?: (session: Partial<IAgentScopeRuntimeWebUISession>) => Promise<IAgentScopeRuntimeWebUISession[]>;
+}
+
+/**
+ * @description 会话配置选项
+ * @descriptionEn Session configuration options
+ */
+export interface IAgentScopeRuntimeWebUISessionOptions {
+  /**
+   * @description 是否支持多会话
+   * @descriptionEn Whether to support multiple sessions
+   */
+  multiple?: boolean;
+  /**
+   * @description 会话 API 接口
+   * @descriptionEn Session API interface
+   */
+  api: IAgentScopeRuntimeWebUISessionAPI;
+}
+
+/**
+ * @description 自定义卡片组件配置
+ * @descriptionEn Custom cards component configuration
+ */
+export interface IAgentScopeRuntimeWebUICardsOptions {
+  /**
+   * @description 卡片组件映射表，key 为卡片类型，value 为对应的 React 组件
+   * @descriptionEn Card component mapping, key is card type, value is corresponding React component
+   */
+  [key: string]: React.FC<any>;
+}
+
+/**
+ * @description AgentScope Runtime WebUI 主配置选项
+ * @descriptionEn AgentScope Runtime WebUI main configuration options
+ */
+export interface IAgentScopeRuntimeWebUIOptions {
+  /**
+   * @description API 配置
+   * @descriptionEn API configuration
+   */
+  api: IAgentScopeRuntimeWebUIAPIOptions;
+  /**
+   * @description 主题配置
+   * @descriptionEn Theme configuration
+   */
+  theme?: IAgentScopeRuntimeWebUIThemeOptions;
+  /**
+   * @description 欢迎页配置
+   * @descriptionEn Welcome page configuration
+   */
+  welcome?: IAgentScopeRuntimeWebUIWelcomeOptions;
+  /**
+   * @description 输入框配置
+   * @descriptionEn Sender configuration
+   */
+  sender?: IAgentScopeRuntimeWebUISenderOptions;
+  /**
+   * @description 会话配置
+   * @descriptionEn Session configuration
+   */
+  session: IAgentScopeRuntimeWebUISessionOptions;
+  /**
+   * @description 自定义卡片配置
+   * @descriptionEn Custom cards configuration
+   */
+  cards?: IAgentScopeRuntimeWebUICardsOptions;
+}
+
+/**
+ * @description 输入框上下文状态接口
+ * @descriptionEn Input context state interface
+ */
+export interface IAgentScopeRuntimeWebUIInputContext {
+  /**
+   * @description 加载状态
+   * @descriptionEn Loading state
+   */
+  loading: boolean;
+  /**
+   * @description 设置加载状态
+   * @descriptionEn Set loading state
+   */
+  setLoading: (loading: boolean) => void;
+  /**
+   * @description 获取加载状态
+   * @descriptionEn Get loading state
+   */
+  getLoading: () => boolean;
+  /**
+   * @description 禁用状态
+   * @descriptionEn Disabled state
+   */
+  disabled: boolean;
+  /**
+   * @description 设置禁用状态
+   * @descriptionEn Set disabled state
+   */
+  setDisabled: (disabled: boolean) => void;
+  /**
+   * @description 获取禁用状态
+   * @descriptionEn Get disabled state
+   */
+  getDisabled: () => boolean;
+}
+
+/**
+ * @description 输入数据接口
+ * @descriptionEn Input data interface
+ */
+export interface IAgentScopeRuntimeWebUIInputData {
+  /**
+   * @description 查询文本
+   * @descriptionEn Query text
+   */
+  query: string;
+  /**
+   * @description 文件列表
+   * @descriptionEn File list
+   */
+  fileList?: UploadProps['fileList'];
+}

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

@@ -0,0 +1,52 @@
+export interface IAgentScopeRuntimeWebUIMessageCard<T = string | any> {
+  /**
+   * @description 卡片的唯一标识符
+   * @descriptionEn Unique identifier for the card
+   */
+  id?: string;
+  /**
+   * @description 卡片的类型代码
+   * @descriptionEn Type code for the card
+   */
+  code: string;
+  /**
+   * @description 卡片的渲染组件
+   * @descriptionEn Rendering component for the card
+   */
+  component?: React.FC;
+  /**
+   * @description 卡片的数据内容
+   * @descriptionEn Data content for the card
+   */
+  data?: T;
+}
+
+export interface IAgentScopeRuntimeWebUIMessage<T = string | any> {
+  /**
+   * @description 消息的唯一标识符
+   * @descriptionEn Unique identifier for the message
+   */
+  id: string;
+
+  /**
+   * @description 消息中的卡片组件配置
+   * @descriptionEn Card component configuration in the message
+   */
+  cards?: IAgentScopeRuntimeWebUIMessageCard<T>[];
+  /**
+   * @description 消息的角色类型，区分用户、助手和系统消息
+   * @descriptionEn Role type of the message to distinguish user, assistant, and system messages
+   */
+  role: 'user' | 'assistant' | 'system';
+  /**
+   * @description 消息的处理状态，影响显示效果
+   * @descriptionEn Processing status of the message, affects display effects
+   */
+  msgStatus?: 'finished' | 'interrupted' | 'generating' | 'error';
+}
+
+export interface IAgentScopeRuntimeWebUIMessagesContext {
+  messages: IAgentScopeRuntimeWebUIMessage[];
+  setMessages: (messages: IAgentScopeRuntimeWebUIMessage[]) => void;
+  getMessages: () => IAgentScopeRuntimeWebUIMessage[];
+}

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

@@ -0,0 +1,29 @@
+import { IAgentScopeRuntimeWebUIMessage } from "@agentscope-ai/chat";
+
+
+export interface IAgentScopeRuntimeWebUISession {
+  /**
+   * @description 会话的唯一标识符
+   * @descriptionEn Unique identifier for the session
+   */
+  id: string;
+  /**
+   * @description 会话的名称
+   * @descriptionEn Name of the session
+   */
+  name: string;
+  /**
+   * @description 会话的消息列表
+   * @descriptionEn Message list for the session
+   */
+  messages: IAgentScopeRuntimeWebUIMessage[];
+}
+
+export interface IAgentScopeRuntimeWebUISessionsContext {
+  sessions: IAgentScopeRuntimeWebUISession[];
+  setSessions: (sessions: IAgentScopeRuntimeWebUISession[]) => void;
+  getSessions: () => IAgentScopeRuntimeWebUISession[];
+  currentSessionId: string | undefined;
+  setCurrentSessionId: (sessionId: string | undefined) => void;
+  getCurrentSessionId: () => string | undefined;
+}

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

@@ -0,0 +1,3 @@
+export * from './IChatAnywhere';
+export * from './IMessages';
+export * from './ISessions';

package/components/AgentScopeRuntimeWebUI/starter/OptionsPanel/FormItem.tsx

@@ -0,0 +1,37 @@
+import { Form, Input, InputNumber, Space, ColorPicker, Flex } from 'antd';
+import { createStyles } from 'antd-style';
+
+
+interface FormItemProps {
+  name: string | string[];
+  label: string;
+  isList?: boolean;
+  children: any;
+  normalize?: (value: any) => any;
+}
+
+
+const useStyles = createStyles(({ token, css }) => ({
+  label: {
+    marginBottom: 6,
+    fontSize: 12,
+    color: token.colorTextSecondary,
+  },
+
+}));
+
+export default function FormItem(props: FormItemProps) {
+  const { styles } = useStyles();
+
+
+  const node = props.isList ?
+    <Form.List name={props.name}>{props.children}</Form.List> :
+    <Form.Item name={props.name} normalize={props.normalize}>{props.children}</Form.Item>;
+
+
+  return <div>
+    {props.label && <div className={styles.label}>{props.label}</div>}
+    {node}
+  </div>
+
+}

package/components/AgentScopeRuntimeWebUI/starter/OptionsPanel/OptionsEditor.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect } from 'react';
+import { Form, Input, ColorPicker, Flex, Splitter, Divider, InputNumber } from 'antd';
+import { createStyles } from 'antd-style';
+import { Button, IconButton, Switch } from '@agentscope-ai/design'
+import { SparkDeleteLine, SparkPlusLine } from '@agentscope-ai/icons';
+import FormItem from './FormItem';
+import defaultConfig from './defaultConfig';
+
+const useStyles = createStyles(({ token, css }) => ({
+  container: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  form: {
+    height: 0,
+    flex: 1,
+    padding: '8px 16px 16px 16px',
+    overflow: 'auto',
+  },
+  actions: {
+    padding: 16,
+    display: 'flex',
+    borderTop: `1px solid ${token.colorBorderSecondary}`,
+    justifyContent: 'flex-end',
+    gap: 16,
+  }
+
+}));
+
+interface OptionsEditorProps {
+  value?: any;
+  onChange?: any;
+}
+
+const OptionsEditor: React.FC<OptionsEditorProps> = ({
+  value,
+  onChange,
+}) => {
+  const { styles } = useStyles();
+  const [form] = Form.useForm();
+
+
+  const handleSave = () => {
+    form.validateFields().then((values) => {
+      onChange(values);
+    });
+  };
+
+  const handleReset = () => {
+    form.setFieldsValue(defaultConfig);
+  };
+
+  return (
+    <div className={styles.container}>
+      <Form
+        className={styles.form}
+        form={form}
+        layout="vertical"
+        initialValues={value}
+      >
+
+
+        <Divider orientation="left">Theme</Divider>
+
+        <FormItem name={['theme', 'colorPrimary']} label="colorPrimary" normalize={value => value.toHexString()}>
+          <ColorPicker />
+        </FormItem>
+
+        <FormItem name={['theme', 'colorBgBase']} label="colorBgBase" normalize={value => value.toHexString()}>
+          <ColorPicker />
+        </FormItem>
+
+        <FormItem name={['theme', 'colorTextBase']} label="colorTextBase" normalize={value => value.toHexString()}>
+          <ColorPicker />
+        </FormItem>
+
+        <FormItem name={['theme', 'darkMode']} label="darkMode" >
+          <Switch />
+        </FormItem>
+
+        <FormItem name={['theme', 'leftHeader', 'logo']} label="leftHeader.logo" >
+          <Input />
+        </FormItem>
+
+        <FormItem name={['theme', 'leftHeader', 'title']} label="leftHeader.title" >
+          <Input />
+        </FormItem>
+
+        <Divider orientation="left">Sender</Divider>
+
+
+        <FormItem name={['sender', 'disclaimer']} label="disclaimer" >
+          <Input />
+        </FormItem>
+
+
+        <FormItem name={['sender', 'attachments']} label="attachments" >
+          <Switch />
+        </FormItem>
+
+
+        <FormItem name={['sender', 'maxLength']} label="maxLength" >
+          <InputNumber min={1000} />
+        </FormItem>
+
+        <Divider orientation="left">Welcome</Divider>
+
+
+        <FormItem name={['welcome', 'greeting']} label="greeting" >
+          <Input />
+        </FormItem>
+
+        <FormItem name={['welcome', 'description']} label="description" >
+          <Input />
+        </FormItem>
+
+        <FormItem name={['welcome', 'avatar']} label="avatar" >
+          <Input />
+        </FormItem>
+
+
+        <FormItem name={['welcome', 'prompts']} isList label="prompts" >
+          {(fields, { add, remove }) => {
+            return <div>
+              {fields.map(field => {
+                return <Flex key={field.key} gap={6}>
+                  <Form.Item style={{ flex: 1 }} key={field.key} name={[field.name, 'value']}>
+                    <Input />
+                  </Form.Item>
+                  <IconButton icon={<SparkPlusLine />} onClick={() => add({})}></IconButton>
+                  <IconButton icon={<SparkDeleteLine />} onClick={() => remove(field.name)}></IconButton>
+                </Flex>
+              })}
+            </div>
+          }}
+        </FormItem>
+
+
+        <Divider orientation="left">API</Divider>
+
+        <FormItem name={['api', 'baseURL']} label="baseURL" >
+          <Input />
+        </FormItem>
+
+        <FormItem name={['api', 'token']} label="token" >
+          <Input />
+        </FormItem>
+      </Form>
+
+      <div className={styles.actions}>
+        <Button onClick={handleReset}>Reset</Button>
+        <Button type="primary" onClick={handleSave}>
+          Save & Copy
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default OptionsEditor;
+