@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Attachments/FileList/index.tsx

@@ -0,0 +1,201 @@
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { Button, type UploadProps } from 'antd';
+import classnames from 'classnames';
+import { CSSMotionList } from 'rc-motion';
+import React from 'react';
+import type { Attachment } from '..';
+import FileListCard from './FileListCard';
+
+export interface FileListProps {
+  /**
+   * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+   * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+   */
+  prefixCls: string;
+  /**
+   * @description 文件附件数据数组，包含所有要显示的文件信息
+   * @descriptionEn File attachment data array containing all file information to display
+   */
+  items: Attachment[];
+  /**
+   * @description 文件移除时的回调函数，用于处理文件删除操作
+   * @descriptionEn Callback function when file is removed for handling file deletion operations
+   */
+  onRemove: (item: Attachment) => void;
+  /**
+   * @description 文件列表的溢出处理方式，影响滚动和布局行为
+   * @descriptionEn Overflow handling method for file list, affects scrolling and layout behavior
+   */
+  overflow?: 'scrollX' | 'scrollY' | 'wrap';
+  /**
+   * @description 上传组件的属性配置，用于控制上传行为
+   * @descriptionEn Upload component props configuration for controlling upload behavior
+   */
+  upload: UploadProps;
+
+  // Semantic
+  /**
+   * @description 文件列表容器的CSS类名
+   * @descriptionEn CSS class name for the file list container
+   */
+  listClassName?: string;
+  /**
+   * @description 文件列表容器的内联样式对象
+   * @descriptionEn Inline style object for the file list container
+   */
+  listStyle?: React.CSSProperties;
+  /**
+   * @description 文件列表项的CSS类名
+   * @descriptionEn CSS class name for file list items
+   */
+  itemClassName?: string;
+  /**
+   * @description 文件列表项的内联样式对象
+   * @descriptionEn Inline style object for file list items
+   */
+  itemStyle?: React.CSSProperties;
+  /**
+   * @description 渲染类型，目前仅支持默认渲染模式
+   * @descriptionEn Render type, currently only supports default render mode
+   */
+  renderType?: 'default',
+}
+
+const TOLERANCE = 1;
+
+export default function FileList(props: FileListProps) {
+  const {
+    prefixCls,
+    items,
+    onRemove,
+    overflow,
+    listClassName,
+    listStyle,
+    itemClassName,
+    itemStyle,
+  } = props;
+
+  const listCls = `${prefixCls}-list`;
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const [firstMount, setFirstMount] = React.useState(false);
+
+  React.useEffect(() => {
+    setFirstMount(true);
+    return () => {
+      setFirstMount(false);
+    };
+  }, []);
+
+  // ================================= Scroll =================================
+  const [pingStart, setPingStart] = React.useState(false);
+  const [pingEnd, setPingEnd] = React.useState(false);
+
+  const checkPing = () => {
+    const containerEle = containerRef.current;
+
+    if (!containerEle) {
+      return;
+    }
+
+    if (overflow === 'scrollX') {
+      setPingStart(Math.abs(containerEle.scrollLeft) >= TOLERANCE);
+      setPingEnd(
+        containerEle.scrollWidth - containerEle.clientWidth - Math.abs(containerEle.scrollLeft) >=
+        TOLERANCE,
+      );
+    } else if (overflow === 'scrollY') {
+      setPingStart(containerEle.scrollTop !== 0);
+      setPingEnd(containerEle.scrollHeight - containerEle.clientHeight !== containerEle.scrollTop);
+    }
+  };
+
+  React.useEffect(() => {
+    checkPing();
+  }, [overflow]);
+
+  const onScrollOffset = (offset: -1 | 1) => {
+    const containerEle = containerRef.current;
+
+    if (containerEle) {
+      containerEle.scrollTo({
+        left: containerEle.scrollLeft + offset * containerEle.clientWidth,
+        behavior: 'smooth',
+      });
+    }
+  };
+
+  const onScrollLeft = () => {
+    onScrollOffset(-1);
+  };
+
+  const onScrollRight = () => {
+    onScrollOffset(1);
+  };
+
+  return (
+    <div
+      className={classnames(
+        listCls,
+        {
+          [`${listCls}-overflow-${props.overflow}`]: overflow,
+          [`${listCls}-overflow-ping-start`]: pingStart,
+          [`${listCls}-overflow-ping-end`]: pingEnd,
+        },
+        listClassName,
+      )}
+      ref={containerRef}
+      onScroll={checkPing}
+      style={listStyle}
+    >
+      <CSSMotionList
+        keys={items.map((item) => ({
+          key: item.uid,
+          item,
+        }))}
+        motionName={`${listCls}-card-motion`}
+        component={false}
+        motionAppear={firstMount}
+        motionLeave
+        motionEnter
+      >
+        {({ key, item, className: motionCls, style: motionStyle }) => {
+          return (
+            <FileListCard
+              key={key}
+              prefixCls={prefixCls}
+              item={item}
+              onRemove={onRemove}
+              className={classnames(motionCls, itemClassName)}
+              style={{
+                ...motionStyle,
+                ...itemStyle,
+              }}
+              renderType={props.renderType}
+            />
+          );
+        }}
+      </CSSMotionList>
+
+      {overflow === 'scrollX' && (
+        <>
+          <Button
+            size="small"
+            shape="circle"
+            className={`${listCls}-prev-btn`}
+            icon={<LeftOutlined />}
+            onClick={onScrollLeft}
+          />
+          <Button
+            size="small"
+            shape="circle"
+            className={`${listCls}-next-btn`}
+            icon={<RightOutlined />}
+            onClick={onScrollRight}
+          />
+        </>
+      )}
+    </div>
+  );
+}

package/components/Attachments/PlaceholderUploader.tsx

@@ -0,0 +1,124 @@
+import { Flex, GetRef, Typography, Upload, type UploadProps } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { AttachmentContext } from './context';
+
+export interface PlaceholderConfig {
+  /**
+   * @description 占位符的图标元素，用于视觉引导
+   * @descriptionEn Icon element for the placeholder for visual guidance
+   */
+  icon?: React.ReactNode;
+  /**
+   * @description 占位符的主标题文本，用于说明功能
+   * @descriptionEn Main title text for the placeholder for explaining functionality
+   */
+  title?: React.ReactNode;
+  /**
+   * @description 占位符的描述文本，用于提供详细说明
+   * @descriptionEn Description text for the placeholder for providing detailed explanation
+   */
+  description?: React.ReactNode;
+}
+
+export type PlaceholderType = PlaceholderConfig | React.ReactElement;
+
+export interface PlaceholderProps {
+  /**
+   * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+   * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+   */
+  prefixCls: string;
+  /**
+   * @description 占位符配置，支持配置对象或自定义React元素
+   * @descriptionEn Placeholder configuration, supports config object or custom React elements
+   */
+  placeholder?: PlaceholderType;
+  /**
+   * @description 上传组件的属性配置，用于控制上传行为
+   * @descriptionEn Upload component props configuration for controlling upload behavior
+   */
+  upload?: UploadProps;
+  /**
+   * @description 组件的CSS类名
+   * @descriptionEn CSS class name for the component
+   */
+  className?: string;
+  /**
+   * @description 组件的内联样式对象
+   * @descriptionEn Inline style object for the component
+   */
+  style?: React.CSSProperties;
+}
+
+function Placeholder(props: PlaceholderProps, ref: React.Ref<GetRef<typeof Upload>>) {
+  const { prefixCls, placeholder = {}, upload, className, style } = props;
+
+  const placeholderCls = `${prefixCls}-placeholder`;
+
+  const placeholderConfig = (placeholder || {}) as PlaceholderConfig;
+
+  const { disabled } = React.useContext(AttachmentContext);
+
+  const [dragIn, setDragIn] = React.useState(false);
+
+  const onDragEnter = () => {
+    setDragIn(true);
+  };
+
+  const onDragLeave = (e: React.DragEvent) => {
+    // Leave the div should end
+    if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as HTMLElement)) {
+      setDragIn(false);
+    }
+  };
+
+  const onDrop = () => {
+    setDragIn(false);
+  };
+
+  const node = React.isValidElement(placeholder) ? (
+    placeholder
+  ) : (
+    <Flex align="center" justify="center" vertical className={`${placeholderCls}-inner`}>
+      <Typography.Text className={`${placeholderCls}-icon`}>
+        {placeholderConfig.icon}
+      </Typography.Text>
+      <Typography.Title className={`${placeholderCls}-title`} level={5}>
+        {placeholderConfig.title}
+      </Typography.Title>
+      <Typography.Text className={`${placeholderCls}-description`} type="secondary">
+        {placeholderConfig.description}
+      </Typography.Text>
+    </Flex>
+  );
+
+  return (
+    <div
+      className={classNames(
+        placeholderCls,
+        {
+          [`${placeholderCls}-drag-in`]: dragIn,
+          [`${placeholderCls}-disabled`]: disabled,
+        },
+        className,
+      )}
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+      aria-hidden={disabled}
+      style={style}
+    >
+      <Upload.Dragger
+        showUploadList={false}
+        {...upload}
+        ref={ref}
+        style={{ padding: 0, border: 0, background: 'transparent' }}
+      >
+        {node}
+      </Upload.Dragger>
+    </div>
+  );
+}
+
+export default React.forwardRef(Placeholder);

package/components/Attachments/SilentUploader.tsx

@@ -0,0 +1,39 @@
+import { type GetRef, Upload, type UploadProps } from 'antd';
+import React from 'react';
+
+export interface SilentUploaderProps {
+  /**
+   * @description 要包装的子元素，通常是触发上传的按钮或区域
+   * @descriptionEn Child element to be wrapped, usually a button or area that triggers upload
+   */
+  children: React.ReactElement;
+  /**
+   * @description 上传组件的属性配置，用于控制上传行为
+   * @descriptionEn Upload component props configuration for controlling upload behavior
+   */
+  upload: UploadProps;
+  /**
+   * @description 自定义根容器的CSS类名，用于覆盖默认样式
+   * @descriptionEn Custom CSS class name for the root container to override default styles
+   */
+  rootClassName?: string;
+}
+
+/**
+ * SilentUploader is only wrap children with antd Upload component.
+ */
+function SilentUploader(props: SilentUploaderProps, ref: React.Ref<GetRef<typeof Upload>>) {
+  const { children, upload, rootClassName } = props;
+
+  const uploadRef = React.useRef<GetRef<typeof Upload>>(null);
+  React.useImperativeHandle(ref, () => uploadRef.current!);
+
+  // ============================ Render ============================
+  return (
+    <Upload {...upload} showUploadList={false} rootClassName={rootClassName} ref={uploadRef}>
+      {children}
+    </Upload>
+  );
+}
+
+export default React.forwardRef(SilentUploader);

package/components/Attachments/context.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface AttachmentContextProps {
+  /**
+   * @description 是否禁用附件功能，影响所有子组件的交互状态
+   * @descriptionEn Whether to disable attachment functionality, affects interaction state of all child components
+   */
+  disabled?: boolean;
+}
+
+export const AttachmentContext = React.createContext<AttachmentContextProps>(null!);

package/components/Attachments/demo/basic.tsx

@@ -0,0 +1,71 @@
+import { Attachments } from '@agentscope-ai/chat';
+import { App, Flex } from 'antd';
+import React from 'react';
+
+const Demo = () => {
+  const filesList = [
+    {
+      uid: '1',
+      name: 'excel-file.xlsx',
+      size: 111111,
+    },
+    {
+      uid: '2',
+      name: 'word-file.docx',
+      size: 222222,
+    },
+    {
+      uid: '3',
+      name: 'image-file.png',
+      size: 333333,
+    },
+    {
+      uid: '4',
+      name: 'pdf-file.pdf',
+      size: 444444,
+    },
+    {
+      uid: '5',
+      name: 'ppt-file.pptx',
+      size: 555555,
+    },
+    {
+      uid: '6',
+      name: 'video-file.mp4',
+      size: 666666,
+    },
+    {
+      uid: '7',
+      name: 'audio-file.mp3',
+      size: 777777,
+    },
+    {
+      uid: '8',
+      name: 'zip-file.zip',
+      size: 888888,
+    },
+    {
+      uid: '9',
+      name: 'markdown-file.md',
+      size: 999999,
+      description: 'Custom description here',
+    },
+    {
+      uid: '10',
+      name: 'image-file.png',
+      thumbUrl: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png',
+      url: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png',
+      size: 123456,
+    },
+  ];
+
+  return (
+    <Flex gap="middle" wrap>
+      {filesList.map((file, index) => (
+        <Attachments.FileCard key={index} item={file} />
+      ))}
+    </Flex>
+  );
+};
+
+export default () => <Demo />;

package/components/Attachments/index.en-US.md.bk

@@ -0,0 +1,10 @@
+---
+group:
+  title: Output
+  order: 2
+title: FileCard
+description: File Card
+---
+
+
+<code src="./demo/basic.tsx" center>Example</code>