@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/AgentScopeRuntimeWebUI/starter/OptionsPanel/defaultConfig.ts

@@ -0,0 +1,43 @@
+export default () => {
+  return {
+    theme: {
+      colorPrimary: '#615CED',
+      darkMode: true,
+      prefix: 'agentscope-runtime-webui',
+      leftHeader: {
+        logo: 'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
+        title: 'Runtime WebUI',
+      },
+    },
+    sender: {
+      // @ts-ignore
+      attachments: true,
+      maxLength: 10000,
+      disclaimer:
+        'AI can also make mistakes, so please check carefully and use it with caution',
+    },
+
+    welcome: {
+      greeting: 'Hello, how can I help you today?',
+      description:
+        'I am a helpful assistant that can help you with your questions.',
+      avatar:
+        'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
+      prompts: [
+        {
+          value: 'Hello',
+        },
+        {
+          value: 'How are you?',
+        },
+        {
+          value: 'What can you do?',
+        },
+      ],
+    },
+    api: {
+      baseURL: '',
+      token: '',
+    },
+  };
+};

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

@@ -0,0 +1,27 @@
+import { SparkSettingLine } from "@agentscope-ai/icons";
+import { IconButton, Drawer } from "@agentscope-ai/design";
+import { useState } from "react";
+import OptionsEditor from "./OptionsEditor";
+
+interface OptionsPanelProps {
+  value?: any;
+  onChange?: any;
+}
+
+export default function OptionsPanel(props: OptionsPanelProps) {
+  const [open, setOpen] = useState(false);
+
+  return <>
+    <IconButton onClick={() => setOpen(true)} icon={<SparkSettingLine />} bordered={false} />
+    <Drawer
+      destroyOnHidden
+      open={open}
+      onClose={() => setOpen(false)}
+      styles={{ body: { padding: 0 }, header: { padding: 8 } }}>
+      <OptionsEditor value={props.value} onChange={v => {
+        setOpen(false);
+        props.onChange(v);
+      }} />
+    </Drawer>
+  </>
+}

package/components/AgentScopeRuntimeWebUI/starter/index.tsx

@@ -0,0 +1,57 @@
+import { AgentScopeRuntimeWebUI } from '@agentscope-ai/chat';
+import OptionsPanel from './OptionsPanel';
+import { useMemo, useState } from 'react';
+import sessionApi from './sessionApi';
+import defaultConfig from './OptionsPanel/defaultConfig';
+import { useLocalStorageState } from 'ahooks';
+
+export default function () {
+
+  const [optionsConfig, setOptionsConfig] = useLocalStorageState('agent-scope-runtime-webui-options', {
+    defaultValue: defaultConfig(),
+    listenStorageChange: true,
+  });
+
+  const options = useMemo(() => {
+    const rightHeader = <OptionsPanel value={optionsConfig} onChange={v => {
+      setOptionsConfig(prev => ({
+        ...prev,
+        ...v,
+      }));
+    }} />;
+
+    return {
+      ...optionsConfig,
+      session: {
+        multiple: true,
+        api: sessionApi,
+      },
+      sender: {
+        ...optionsConfig.sender,
+        attachments: optionsConfig.sender.attachments ? {
+          customRequest(options) {
+            // 模拟上传进度
+            options.onProgress({
+              percent: 100,
+            });
+            // 当前是一个 mock 的上传行为
+            // 实际情况需要具体实现一个文件上传服务，将文件转化为 url
+            options.onSuccess({
+              url: URL.createObjectURL(options.file as Blob)
+            });
+          }
+        } : undefined,
+      },
+      theme: {
+        ...optionsConfig.theme,
+        rightHeader,
+      },
+    };
+  }, [optionsConfig]);
+
+  return <div style={{ height: '100dvh' }}>
+    <AgentScopeRuntimeWebUI
+      options={options}
+    />
+  </div>;
+}

package/components/AgentScopeRuntimeWebUI/starter/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/Attachments/DropArea.tsx

@@ -0,0 +1,97 @@
+import classnames from 'classnames';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { AttachmentContext } from './context';
+
+export interface DropUploaderProps {
+  /**
+   * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+   * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+   */
+  prefixCls: string;
+  /**
+   * @description 拖拽区域的CSS类名
+   * @descriptionEn CSS class name for the drop area
+   */
+  className: string;
+  /**
+   * @description 获取拖拽容器的函数，用于自定义拖拽区域
+   * @descriptionEn Function to get drop container for customizing drop area
+   */
+  getDropContainer?: null | (() => HTMLElement | null | undefined);
+  /**
+   * @description 拖拽区域内的子元素，用于显示拖拽提示内容
+   * @descriptionEn Child elements within the drop area for displaying drop prompt content
+   */
+  children?: React.ReactNode;
+}
+
+export default function DropArea(props: DropUploaderProps) {
+  const { getDropContainer, className, prefixCls, children } = props;
+  const { disabled } = React.useContext(AttachmentContext);
+
+  const [container, setContainer] = React.useState<HTMLElement | null | undefined>();
+  const [showArea, setShowArea] = React.useState<boolean | null>(null);
+
+  React.useEffect(() => {
+    const nextContainer = getDropContainer?.();
+    if (container !== nextContainer) {
+      setContainer(nextContainer);
+    }
+  }, [getDropContainer]);
+
+  React.useEffect(() => {
+    // Add global drop event
+    if (container) {
+      const onDragEnter = () => {
+        setShowArea(true);
+      };
+
+      // Should prevent default to make drop event work
+      const onDragOver = (e: DragEvent) => {
+        e.preventDefault();
+      };
+
+      const onDragLeave = (e: DragEvent) => {
+        if (!e.relatedTarget) {
+          setShowArea(false);
+        }
+      };
+      const onDrop = (e: DragEvent) => {
+        setShowArea(false);
+        e.preventDefault();
+      };
+
+      document.addEventListener('dragenter', onDragEnter);
+      document.addEventListener('dragover', onDragOver);
+      document.addEventListener('dragleave', onDragLeave);
+      document.addEventListener('drop', onDrop);
+      return () => {
+        document.removeEventListener('dragenter', onDragEnter);
+        document.removeEventListener('dragover', onDragOver);
+        document.removeEventListener('dragleave', onDragLeave);
+        document.removeEventListener('drop', onDrop);
+      };
+    }
+  }, [!!container]);
+
+  const showDropdown = getDropContainer && container && !disabled;
+
+  if (!showDropdown) {
+    return null;
+  }
+
+  const areaCls = `${prefixCls}-drop-area`;
+
+  return createPortal(
+    <div
+      className={classnames(areaCls, className, {
+        [`${areaCls}-on-body`]: container.tagName === 'BODY',
+      })}
+      style={{ display: showArea ? 'block' : 'none' }}
+    >
+      {children}
+    </div>,
+    container,
+  );
+}

package/components/Attachments/FileList/AudioIcon.tsx

@@ -0,0 +1,20 @@
+export default function AudioIcon() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>audio</title>
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+          d="M14.1178571,4.0125 C14.225,4.11964286 14.2857143,4.26428571 14.2857143,4.41607143 L14.2857143,15.4285714 C14.2857143,15.7446429 14.0303571,16 13.7142857,16 L2.28571429,16 C1.96964286,16 1.71428571,15.7446429 1.71428571,15.4285714 L1.71428571,0.571428571 C1.71428571,0.255357143 1.96964286,0 2.28571429,0 L9.86964286,0 C10.0214286,0 10.1678571,0.0607142857 10.275,0.167857143 L14.1178571,4.0125 Z M10.7315824,7.11216117 C10.7428131,7.15148751 10.7485063,7.19218979 10.7485063,7.23309113 L10.7485063,8.07742614 C10.7484199,8.27364959 10.6183424,8.44607275 10.4296853,8.50003683 L8.32984514,9.09986306 L8.32984514,11.7071803 C8.32986605,12.5367078 7.67249692,13.217028 6.84345686,13.2454634 L6.79068592,13.2463395 C6.12766108,13.2463395 5.53916361,12.8217001 5.33010655,12.1924966 C5.1210495,11.563293 5.33842118,10.8709227 5.86959669,10.4741173 C6.40077221,10.0773119 7.12636292,10.0652587 7.67042486,10.4442027 L7.67020842,7.74937024 L7.68449368,7.74937024 C7.72405122,7.59919041 7.83988806,7.48101083 7.98924584,7.4384546 L10.1880418,6.81004755 C10.42156,6.74340323 10.6648954,6.87865515 10.7315824,7.11216117 Z M9.60714286,1.31785714 L12.9678571,4.67857143 L9.60714286,4.67857143 L9.60714286,1.31785714 Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}

package/components/Attachments/FileList/FileListCard.tsx

@@ -0,0 +1,270 @@
+import classnames from 'classnames';
+import React from 'react';
+import type { Attachment } from '..';
+import { AttachmentContext } from '../context';
+import { previewImage } from '../util';
+import AudioIcon from './AudioIcon';
+import Progress from './Progress';
+import VideoIcon from './VideoIcon';
+import Style from '../style/fileCard';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { SparkFalseLine } from '@agentscope-ai/icons';
+
+
+export interface FileListCardProps {
+  /**
+   * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+   * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+   */
+  prefixCls?: string;
+  /**
+   * @description 文件附件数据对象，包含文件的基本信息
+   * @descriptionEn File attachment data object containing basic file information
+   */
+  item: Attachment;
+  /**
+   * @description 文件移除时的回调函数，用于处理文件删除操作
+   * @descriptionEn Callback function when file is removed for handling file deletion operations
+   */
+  onRemove?: (item: Attachment) => void;
+  /**
+   * @description 组件的CSS类名
+   * @descriptionEn CSS class name for the component
+   */
+  className?: string;
+  /**
+   * @description 组件的内联样式对象
+   * @descriptionEn Inline style object for the component
+   */
+  style?: React.CSSProperties;
+  /**
+   * @description 渲染类型，目前仅支持默认渲染模式
+   * @descriptionEn Render type, currently only supports default render mode
+   */
+  renderType?: 'default',
+
+}
+
+const EMPTY = '\u00A0';
+
+const DEFAULT_ICON_COLOR = '#8c8c8c';
+
+const IMG_EXTS = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg'];
+
+const IconImage = ({ url }) => <img src={url} width={32} height={32} />
+
+const PRESET_FILE_ICONS: {
+  ext: string[];
+  color: string;
+  icon: React.ReactElement;
+}[] = [
+    {
+      icon: <IconImage url="https://gw.alicdn.com/imgextra/i1/O1CN01cVtZXI23tPVhiZoPJ_!!6000000007313-55-tps-40-40.svg" />,
+      color: '#22b35e',
+      ext: ['xlsx', 'xls'],
+    },
+    {
+      icon: <IconImage url="https://gw.alicdn.com/imgextra/i1/O1CN01uDnnuz1XMNEjgFMul_!!6000000002909-55-tps-40-40.svg" />,
+      color: DEFAULT_ICON_COLOR,
+      ext: IMG_EXTS,
+    },
+    {
+      icon: <IconImage url="https://gw.alicdn.com/imgextra/i1/O1CN01PaXli01DDPAO68fsI_!!6000000000182-55-tps-40-40.svg" />,
+      color: DEFAULT_ICON_COLOR,
+      ext: ['md', 'mdx'],
+    },
+    {
+      icon: <IconImage url="https://gw.alicdn.com/imgextra/i3/O1CN01mB5PzD27fuIWK661W_!!6000000007825-55-tps-40-40.svg" />,
+      color: '#ff4d4f',
+      ext: ['pdf'],
+    },
+    {
+      icon: <IconImage url="https://gw.alicdn.com/imgextra/i3/O1CN01a8j7Jv1nW1QyFme7k_!!6000000005096-55-tps-40-40.svg" />,
+      color: '#ff6e31',
+      ext: ['ppt', 'pptx'],
+    },
+    {
+      icon: <IconImage url="https://gw.alicdn.com/imgextra/i1/O1CN01XaNi8P1UkhQXoQdUL_!!6000000002556-55-tps-40-40.svg" />,
+      color: '#1677ff',
+      ext: ['doc', 'docx'],
+    },
+    {
+      icon: <IconImage url="https://gw.alicdn.com/imgextra/i1/O1CN01K7jgEj1sywWTkPSGY_!!6000000005836-55-tps-40-40.svg" />,
+      color: '#fab714',
+      ext: ['zip', 'rar', '7z', 'tar', 'gz'],
+    },
+    {
+      icon: <IconImage url="https://gw.alicdn.com/imgextra/i2/O1CN01zTTe0q1Xg4GkZgJol_!!6000000002952-55-tps-40-40.svg" />,
+
+      color: '#ff4d4f',
+      ext: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'],
+    },
+    {
+      icon: <IconImage url="https://gw.alicdn.com/imgextra/i2/O1CN01qOBdXG1UpHO6f3Vvc_!!6000000002566-55-tps-40-40.svg" />,
+
+      color: '#8c8c8c',
+      ext: ['mp3', 'wav', 'flac', 'ape', 'aac', 'ogg'],
+    },
+  ];
+
+function matchExt(suffix: string, ext: string[]) {
+  return ext.some((e) => suffix.toLowerCase() === `.${e}`);
+}
+
+function getSize(size: number) {
+  let retSize = size;
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
+  let unitIndex = 0;
+
+  while (retSize >= 1024 && unitIndex < units.length - 1) {
+    retSize /= 1024;
+    unitIndex++;
+  }
+
+  return `${retSize.toFixed(0)} ${units[unitIndex]}`;
+}
+
+function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>) {
+  const { getPrefixCls } = useProviderContext();
+  const { item, onRemove, className, style } = props;
+  const context = React.useContext(AttachmentContext);
+  const { disabled } = context || {};
+  const { name, size, percent, status = 'done', description } = item;
+  const prefixCls = getPrefixCls('attachment');
+  const cardCls = `${prefixCls}-list-card`;
+
+  const [namePrefix, nameSuffix] = React.useMemo(() => {
+    const nameStr = name || '';
+    const match = nameStr.match(/^(.*)\.[^.]+$/);
+    return match ? [match[1], nameStr.slice(match[1].length)] : [nameStr, ''];
+  }, [name]);
+
+  const isImg = React.useMemo(() => matchExt(nameSuffix, IMG_EXTS), [nameSuffix]);
+
+  const desc = React.useMemo(() => {
+    if (description) {
+      return description;
+    }
+
+    if (status === 'uploading') {
+      return `${percent || 0}%`;
+    }
+
+    if (status === 'error') {
+      return item.response || EMPTY;
+    }
+
+    return size ? getSize(size) : EMPTY;
+  }, [status, percent]);
+
+  const [icon, iconColor] = React.useMemo(() => {
+    for (const { ext, icon, color } of PRESET_FILE_ICONS) {
+      if (matchExt(nameSuffix, ext)) {
+        return [icon, color];
+      }
+    }
+
+    return [<IconImage url="https://gw.alicdn.com/imgextra/i1/O1CN01K7jgEj1sywWTkPSGY_!!6000000005836-55-tps-40-40.svg" key="defaultIcon" />, DEFAULT_ICON_COLOR];
+  }, [nameSuffix]);
+
+  const [previewImg, setPreviewImg] = React.useState<string>();
+
+  React.useEffect(() => {
+    if (item.originFileObj) {
+      let synced = true;
+      previewImage(item.originFileObj).then((url) => {
+        if (synced) {
+          setPreviewImg(url);
+        }
+      });
+
+      return () => {
+        synced = false;
+      };
+    }
+    setPreviewImg(undefined);
+  }, [item.originFileObj]);
+
+  let content: React.ReactNode = null;
+  const previewUrl = item.thumbUrl || item.url || previewImg;
+  const renderType = props.renderType || 'default';
+  const isImgPreview = isImg && (item.originFileObj || previewUrl) && renderType === 'default';
+
+  if (isImgPreview) {
+    content = (
+      <>
+        {
+          previewUrl && (
+            <img alt="preview" src={previewUrl} />
+          )
+        }
+
+        {status !== 'done' && (
+          <div className={`${cardCls}-img-mask`}>
+            {status === 'uploading' && percent !== undefined && (
+              <Progress percent={percent} prefixCls={cardCls} />
+            )}
+            {status === 'error' && (
+              <div className={`${cardCls}-desc`}>
+                <div className={`${cardCls}-ellipsis-prefix`}>{desc}</div>
+              </div>
+            )}
+          </div>
+        )}
+      </>
+    );
+  } else {
+    content = (
+      <>
+        <div className={`${cardCls}-icon`} style={{ color: iconColor }}>
+          {icon}
+        </div>
+        <div className={`${cardCls}-content`}>
+          <div className={`${cardCls}-name`}>
+            {namePrefix ?? EMPTY}{nameSuffix}
+          </div>
+          <div className={`${cardCls}-desc`}>
+            <div className={`${cardCls}-ellipsis-prefix`}>{desc}</div>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  return <>
+    <Style />
+    <div
+      className={classnames(
+        cardCls,
+        {
+          [`${cardCls}-status-${status}`]: status,
+          [`${cardCls}-type-preview`]: isImgPreview,
+          [`${cardCls}-type-overview`]: !isImgPreview,
+          [`${cardCls}-type-${renderType}`]: true,
+          [`${cardCls}-hoverable`]: !disabled && onRemove,
+        },
+        className,
+      )}
+      style={style}
+      ref={ref}
+    >
+      {content}
+
+      <button
+        style={{
+          opacity: !disabled && onRemove ? 1 : 0,
+        }}
+        className={`${cardCls}-remove`}
+        onClick={() => {
+          if (!disabled && onRemove) {
+            onRemove(item);
+          }
+        }}
+      >
+        <SparkFalseLine />
+
+      </button>
+    </div></>
+}
+
+export default React.forwardRef(FileListCard);

package/components/Attachments/FileList/Progress.tsx

@@ -0,0 +1,30 @@
+import { Progress as AntdProgress, theme } from 'antd';
+
+export interface ProgressProps {
+  /**
+   * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+   * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+   */
+  prefixCls: string;
+  /**
+   * @description 进度百分比值，范围0-100，用于显示上传进度
+   * @descriptionEn Progress percentage value, range 0-100, for displaying upload progress
+   */
+  percent: number;
+}
+
+export default function Progress(props: ProgressProps) {
+  const { percent } = props;
+  const { token } = theme.useToken();
+
+  return (
+    <AntdProgress
+      type="circle"
+      percent={percent}
+      size={40}
+      strokeColor="#FFF"
+      trailColor="rgba(255, 255, 255, 0.3)"
+      format={(ptg) => <span style={{ color: '#FFF' }}>{(ptg || 0).toFixed(0)}%</span>}
+    />
+  );
+}

package/components/Attachments/FileList/VideoIcon.tsx

@@ -0,0 +1,20 @@
+export default function VideoIcon() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>video</title>
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+          d="M14.1178571,4.0125 C14.225,4.11964286 14.2857143,4.26428571 14.2857143,4.41607143 L14.2857143,15.4285714 C14.2857143,15.7446429 14.0303571,16 13.7142857,16 L2.28571429,16 C1.96964286,16 1.71428571,15.7446429 1.71428571,15.4285714 L1.71428571,0.571428571 C1.71428571,0.255357143 1.96964286,0 2.28571429,0 L9.86964286,0 C10.0214286,0 10.1678571,0.0607142857 10.275,0.167857143 L14.1178571,4.0125 Z M12.9678571,4.67857143 L9.60714286,1.31785714 L9.60714286,4.67857143 L12.9678571,4.67857143 Z M10.5379461,10.3101106 L6.68957555,13.0059749 C6.59910784,13.0693494 6.47439406,13.0473861 6.41101953,12.9569184 C6.3874624,12.9232903 6.37482581,12.8832269 6.37482581,12.8421686 L6.37482581,7.45043999 C6.37482581,7.33998304 6.46436886,7.25043999 6.57482581,7.25043999 C6.61588409,7.25043999 6.65594753,7.26307658 6.68957555,7.28663371 L10.5379461,9.98249803 C10.6284138,10.0458726 10.6503772,10.1705863 10.5870027,10.2610541 C10.5736331,10.2801392 10.5570312,10.2967411 10.5379461,10.3101106 Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}