@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Attachments/index.tsx

@@ -0,0 +1,274 @@
+import { type GetProp, GetRef, Upload, type UploadProps } from 'antd';
+import classnames from 'classnames';
+import React from 'react';
+import { useProviderContext } from '@agentscope-ai/chat';
+
+import { useEvent, useMergedState } from 'rc-util';
+import DropArea from './DropArea';
+import FileList, { type FileListProps } from './FileList';
+import FileListCard from './FileList/FileListCard';
+import PlaceholderUploader, {
+  type PlaceholderProps,
+  type PlaceholderType,
+} from './PlaceholderUploader';
+import SilentUploader from './SilentUploader';
+import { AttachmentContext } from './context';
+import Style from './style';
+
+export type SemanticType = 'list' | 'item' | 'placeholder';
+
+export type Attachment = GetProp<UploadProps, 'fileList'>[number] & {
+  description?: React.ReactNode;
+};
+
+export interface AttachmentsProps extends Omit<UploadProps, 'fileList'> {
+  /**
+   * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+   * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+   */
+  prefixCls?: string;
+  /**
+   * @description 自定义根容器的CSS类名，用于覆盖默认样式
+   * @descriptionEn Custom CSS class name for the root container to override default styles
+   */
+  rootClassName?: string;
+  /**
+   * @description 根容器的内联样式对象
+   * @descriptionEn Inline style object for the root container
+   */
+  rootStyle?: React.CSSProperties;
+  /**
+   * @description 组件容器的内联样式对象
+   * @descriptionEn Inline style object for the component container
+   */
+  style?: React.CSSProperties;
+  /**
+   * @description 组件的CSS类名
+   * @descriptionEn CSS class name for the component
+   */
+  className?: string;
+  /**
+   * @description 语义化CSS类名，用于为不同区域添加自定义类名
+   * @descriptionEn Semantic CSS class names for adding custom classes to different areas
+   */
+  classNames?: Partial<Record<SemanticType, string>>;
+  /**
+   * @description 语义化样式对象，用于精确控制不同区域的样式
+   * @descriptionEn Semantic style object for precise control of different area styles
+   */
+  styles?: Partial<Record<SemanticType, React.CSSProperties>>;
+  /**
+   * @description 自定义子元素，用于扩展组件功能
+   * @descriptionEn Custom child elements for extending component functionality
+   */
+  children?: React.ReactElement;
+  /**
+   * @description 是否禁用整个附件组件，包括拖拽和点击上传
+   * @descriptionEn Whether to disable the entire attachment component, including drag and click upload
+   */
+  disabled?: boolean;
+  /**
+   * @description 占位符配置，支持静态内容或动态函数返回
+   * @descriptionEn Placeholder configuration, supports static content or dynamic function return
+   */
+  placeholder?: PlaceholderType | ((type: 'inline' | 'drop') => PlaceholderType);
+  /**
+   * @description 获取拖拽容器的函数，用于自定义拖拽区域
+   * @descriptionEn Function to get drag container for customizing drag area
+   */
+  getDropContainer?: null | (() => HTMLElement | null | undefined);
+  /**
+   * @description 附件列表数据，用于显示已上传的文件
+   * @descriptionEn Attachment list data for displaying uploaded files
+   */
+  items?: Attachment[];
+  /**
+   * @description 文件列表溢出处理方式，影响多文件的显示效果
+   * @descriptionEn File list overflow handling method, affects display effect of multiple files
+   */
+  overflow?: FileListProps['overflow'];
+  /**
+   * @description 渲染类型，目前仅支持默认渲染模式
+   * @descriptionEn Render type, currently only supports default render mode
+   */
+  renderType?: 'default',
+}
+
+export interface AttachmentsRef {
+  /**
+   * @description 组件的原生DOM元素引用，用于直接操作DOM
+   * @descriptionEn Native DOM element reference of the component for direct DOM manipulation
+   */
+  nativeElement: HTMLDivElement | null;
+  /**
+   * @description 手动触发文件上传的方法，接收File对象作为参数
+   * @descriptionEn Method to manually trigger file upload, accepts File object as parameter
+   */
+  upload: (file: File) => void;
+}
+
+function Attachments(props: AttachmentsProps, ref: React.Ref<AttachmentsRef>) {
+  const {
+    prefixCls: customizePrefixCls,
+    rootClassName,
+    rootStyle,
+    className,
+    style,
+    items,
+    children,
+    getDropContainer,
+    placeholder,
+    onChange,
+    overflow,
+    disabled,
+    classNames = {},
+    styles = {},
+    ...uploadProps
+  } = props;
+  const { direction, getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('attachment');
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const uploadRef = React.useRef<GetRef<typeof Upload>>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    nativeElement: containerRef.current,
+    upload: (file) => {
+      const fileInput = uploadRef.current?.nativeElement?.querySelector('input[type="file"]');
+
+      // Trigger native change event
+      if (fileInput) {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(file);
+        // @ts-ignore
+        fileInput.files = dataTransfer.files;
+
+        fileInput.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+    },
+  }));
+
+  const [fileList, setFileList] = useMergedState([], {
+    value: items,
+  });
+
+  const triggerChange: GetProp<AttachmentsProps, 'onChange'> = useEvent((info) => {
+    setFileList(info.fileList);
+    onChange?.(info);
+  });
+
+  const mergedUploadProps: UploadProps = {
+    ...uploadProps,
+    fileList,
+    onChange: triggerChange,
+  };
+
+  const onItemRemove = (item: Attachment) => {
+    const newFileList = fileList.filter((fileItem) => fileItem.uid !== item.uid);
+    triggerChange({
+      file: item,
+      fileList: newFileList,
+    });
+  };
+
+  let renderChildren: React.ReactElement;
+
+  const getPlaceholderNode = (
+    type: 'inline' | 'drop',
+    props?: Pick<PlaceholderProps, 'style'>,
+    ref?: React.RefObject<GetRef<typeof Upload>>,
+  ) => {
+    const placeholderContent = typeof placeholder === 'function' ? placeholder(type) : placeholder;
+
+    return (
+      <PlaceholderUploader
+        placeholder={placeholderContent}
+        upload={mergedUploadProps}
+        prefixCls={prefixCls}
+        className={classnames(classNames.placeholder)}
+        style={{
+          ...styles.placeholder,
+          ...props?.style,
+        }}
+        ref={ref}
+      />
+    );
+  };
+
+  if (children) {
+    renderChildren = (
+      <>
+        <SilentUploader upload={mergedUploadProps} rootClassName={rootClassName} ref={uploadRef}>
+          {children}
+        </SilentUploader>
+        <DropArea
+          getDropContainer={getDropContainer}
+          prefixCls={prefixCls}
+          className={classnames(rootClassName)}
+        >
+          {getPlaceholderNode('drop')}
+        </DropArea>
+      </>
+    );
+  } else {
+    const hasFileList = fileList.length > 0;
+
+    renderChildren = (
+      <div
+        className={classnames(
+          prefixCls,
+          {
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+          },
+          className,
+          rootClassName,
+        )}
+        style={{
+          ...rootStyle,
+          ...style,
+        }}
+        dir={direction || 'ltr'}
+        ref={containerRef}
+      >
+        <FileList
+          prefixCls={prefixCls}
+          items={fileList}
+          onRemove={onItemRemove}
+          overflow={overflow}
+          upload={mergedUploadProps}
+          listClassName={classnames(classNames.list)}
+          listStyle={{
+            ...styles.list,
+            ...(!hasFileList && { display: 'none' }),
+          }}
+          itemClassName={classnames(classNames.item)}
+          itemStyle={{
+            ...styles.item,
+          }}
+          renderType={props.renderType}
+        />
+        {getPlaceholderNode('inline', hasFileList ? { style: { display: 'none' } } : {}, uploadRef)}
+      </div>
+    );
+  }
+
+  return <>
+    <Style />
+    <AttachmentContext.Provider
+      value={{
+        disabled,
+      }}
+    >
+      {renderChildren}
+    </AttachmentContext.Provider>
+  </>
+}
+
+const ForwardAttachments = React.forwardRef(Attachments) as React.ForwardRefExoticComponent<
+  AttachmentsProps & React.RefAttributes<AttachmentsRef>
+> & {
+  FileCard: typeof FileListCard;
+};
+
+ForwardAttachments.FileCard = FileListCard;
+
+export default ForwardAttachments;

package/components/Attachments/index.zh-CN.md.bk

@@ -0,0 +1,10 @@
+---
+group:
+  title: 输出
+  order: 2
+title: FileCard
+description: 文件卡片
+---
+
+
+<code src="./demo/basic.tsx" center>示例</code>

package/components/Attachments/style/fileCard.ts

@@ -0,0 +1,163 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-attachment-list-card {
+  border-radius: ${(p) => p.theme.borderRadius}px;
+  position: relative;
+  background: ${(p) => p.theme.colorBgContainer};
+  border-width: ${(p) => p.theme.lineWidth}px;
+  border-style: solid;
+  border-color: ${(p) => p.theme.colorBorderSecondary};
+  flex: none;
+  transition: all 0.3s;
+
+  &-name,
+  &-desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  &-ellipsis-prefix {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &-ellipsis-suffix {
+    flex: none;
+  }
+
+  &-type-overview {
+    padding: 0 8px;
+    display: flex;
+    height: 56px;
+    gap: ${(p) => p.theme.paddingXS}px;
+    align-items: center;
+    width: 140px;
+
+    .${(p) => p.theme.prefixCls}-attachment-list-card-icon {
+      display: flex;
+      align-items: center;
+    }
+
+    .${(p) => p.theme.prefixCls}-attachment-list-card-content {
+      flex: auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      font-size: ${(p) => p.theme.fontSize}px;
+      color: ${(p) => p.theme.colorText};
+    }
+
+    .${(p) => p.theme.prefixCls}-attachment-list-card-desc {
+      color: ${(p) => p.theme.colorTextQuaternary};
+      font-size: ${(p) => p.theme.fontSizeSM}px;
+    }
+  }
+
+  &-type-preview {
+    width: 56px;
+    height: 56px;
+    line-height: 1;
+
+    img {
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+      object-fit: cover;
+      border-radius: 5px;
+    }
+
+    .${(p) => p.theme.prefixCls}-attachment-list-card-img-mask {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0, 0, 0, ${(p) => p.theme.opacityLoading});
+      border-radius: inherit;
+    }
+
+    &.${(p) => p.theme.prefixCls}-attachment-list-card-status-error {
+
+      img,
+      .${(p) => p.theme.prefixCls}-attachment-list-card-img-mask {
+        border-radius: calc(${(p) => p.theme.borderRadius}px - ${(p) =>
+  p.theme.lineWidth}px);
+      }
+
+      .${(p) => p.theme.prefixCls}-attachment-list-card-desc {
+        padding-inline: ${(p) => p.theme.paddingXXS}px;
+      }
+    }
+
+    .${(p) => p.theme.prefixCls}-attachment-list-card-progress {
+    }
+  }
+
+  &-remove {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 16px;
+    height: 16px;
+    line-height: 1;
+    font-size: 10px;
+    cursor: pointer;
+    display: none;
+    color: ${(p) => p.theme.colorText};
+    background-color: ${(p) => p.theme.colorBgContainer};
+    border-width: ${(p) => p.theme.lineWidth}px;
+    border-style: solid;
+    border-color: ${(p) => p.theme.colorBorder};
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+
+    &:dir(rtl) {
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &:hover &-remove {
+    display: flex;
+    
+  }
+
+  &-status-error {
+    border-color: ${(p) => p.theme.colorError};
+
+    .${(p) => p.theme.prefixCls}-attachment-list-card-desc {
+      color: ${(p) => p.theme.colorError};
+    }
+  }
+
+  &-motion {
+
+    &-appear-start {
+      width: 0;
+      transition: none;
+    }
+
+    &-leave-active {
+      opacity: 0;
+      width: 0;
+      padding-inline: 0;
+      border-inline-width: 0;
+      margin-inline-end: calc(-1 * ${(p) => p.theme.paddingSM}px);
+    }
+  }
+}
+
+.${(p) => p.theme.prefixCls}-attachment-list-card-hoverable {
+  &:hover {
+    border-color: ${(p) => p.theme.colorPrimary};
+  }
+}
+`;

package/components/Attachments/style/index.ts

@@ -0,0 +1,232 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${p => p.theme.prefixCls}-attachment {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  &,
+  * {
+    box-sizing: border-box;
+  }
+
+  &-drop-area {
+    position: absolute;
+    inset: 0;
+    z-index: ${(p) => p.theme.zIndexPopupBase}
+    box-sizing: border-box;
+
+    &,
+    * {
+      box-sizing: border-box;
+    }
+
+    &-on-body {
+      position: fixed;
+      inset: 0;
+    }
+
+    &-hide-placement {
+      .${p => p.theme.prefixCls}-attachment-placeholder-inner {
+        display: none;
+      }
+    }
+
+    .${p => p.theme.prefixCls}-attachment-placeholder {
+      padding: 0;
+    }
+  }
+
+  &-placeholder {
+    height: 100%;
+    border-radius: ${(p) => p.theme.borderRadius}px;
+    border-width: ${(p) => p.theme.lineWidthBold}px;
+    border-style: dashed;
+    border-color: transparent;
+    padding: ${(p) => p.theme.padding}px;
+    position: relative;
+    backdrop-filter: blur(10px);
+    box-sizing: border-box;
+
+    &,
+    * {
+      box-sizing: border-box;
+    }
+
+    .${p => p.theme.prefixCls}-upload-wrapper .${p => p.theme.prefixCls}-upload.${p => p.theme.prefixCls}-upload-btn {
+      padding: 0;
+    }
+
+    &.${p => p.theme.prefixCls}-attachment-placeholder-drag-in {
+      border-color: ${(p) => p.theme.colorPrimaryHover};
+    }
+
+    &.${p => p.theme.prefixCls}-attachment-placeholder-disabled {
+      opacity: 0.25;
+      pointer-events: none;
+    }
+
+    &-inner {
+      gap: calc(${(p) => p.theme.paddingXXS}px / 2);
+    }
+
+    &-icon {
+      font-size: ${(p) => p.theme.fontSizeHeading2}px;
+      line-height: 1;
+    }
+
+    &-title.${p => p.theme.prefixCls}-attachment-placeholder-title {
+      margin: 0;
+      font-size: ${(p) => p.theme.fontSize}px;
+      line-height: ${(p) => p.theme.lineHeight};
+    }
+  }
+
+  &-list {
+    display: flex;
+    gap: ${(p) => p.theme.paddingSM}px;
+    font-size: ${(p) => p.theme.fontSize}px;
+    line-height: ${(p) => p.theme.lineHeight};
+    color: ${(p) => p.theme.colorText};
+    width: 100%;
+    overflow: auto;
+    padding: ${(p) => p.theme.padding}px;
+    padding-bottom: 0;
+
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &-overflow-scrollX,
+    &-overflow-scrollY {
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        opacity: 0;
+        z-index: 1;
+      }
+    }
+
+    &-overflow-ping-start:before {
+      opacity: 1;
+    }
+
+    &-overflow-ping-end:after {
+      opacity: 1;
+    }
+
+    &-overflow-scrollX {
+      overflow-x: auto;
+      overflow-y: hidden;
+      flex-wrap: nowrap;
+
+      &:before,
+      &:after {
+        inset-block: 0;
+        width: 8px;
+      }
+
+      &:before {
+        inset-inline-start: 0;
+        background: linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
+      }
+
+      &:after {
+        inset-inline-end: 0;
+        background: linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
+      }
+
+      &:dir(rtl) {
+        &:before {
+          background: linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
+        }
+
+        &:after {
+          background: linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
+        }
+      }
+    }
+
+    &-overflow-scrollY {
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: calc(${(p) => p.theme.fontSize}px * ${(p) =>
+  p.theme.lineHeight}px * 2 + ${(p) => p.theme.paddingSM}px + ${(p) =>
+  p.theme.paddingSM}px * 3);
+
+      &:before,
+      &:after {
+        inset-inline: 0;
+        height: 8px;
+      }
+
+      &:before {
+        inset-block-start: 0;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
+      }
+
+      &:after {
+        inset-block-end: 0;
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
+      }
+    }
+
+    &-upload-btn {
+      width: calc(${(p) => p.theme.fontSize}px * ${(p) =>
+  p.theme.lineHeight}px * 2 + ${(p) => p.theme.paddingSM}px + ${(p) =>
+  p.theme.paddingSM}px);
+      height: calc(${(p) => p.theme.fontSize}px * ${(p) =>
+  p.theme.lineHeight}px * 2 + ${(p) => p.theme.paddingSM}px + ${(p) =>
+  p.theme.paddingSM}px);
+      font-size: ${(p) => p.theme.fontSizeHeading2}px;
+      color: #999;
+    }
+
+    &-prev-btn,
+    &-next-btn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      box-shadow: ${(p) => p.theme.boxShadowTertiary};
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &-prev-btn {
+      left: ${(p) => p.theme.padding}px;
+    }
+
+    &-next-btn {
+      right: ${(p) => p.theme.padding}px;
+    }
+
+    &:dir(ltr) {
+      &.${p => p.theme.prefixCls}-attachment-list-overflow-ping-start .${p => p.theme.prefixCls}-attachment-list-prev-btn {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      &.${p => p.theme.prefixCls}-attachment-list-overflow-ping-end .${p => p.theme.prefixCls}-attachment-list-next-btn {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    &:dir(rtl) {
+      &.${p => p.theme.prefixCls}-attachment-list-overflow-ping-end .${p => p.theme.prefixCls}-attachment-list-prev-btn {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      &.${p => p.theme.prefixCls}-attachment-list-overflow-ping-start .${p => p.theme.prefixCls}-attachment-list-next-btn {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+}
+`;