@agentscope-ai/chat 1.1.53 → 1.1.54-beta.1773466321797

package/components/Attachments/FileList/FileListCard.tsx

@@ -2,16 +2,14 @@ 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';
+import ImageCard from './ImageCard';
+import type { ImageCardProps } from './ImageCard';
 
 
-export interface FileListCardProps {
+export interface FileListCardProps extends Pick<ImageCardProps, 'onReplace'> {
   /**
    * @description 自定义CSS类名前缀，用于样式隔离和主题定制
    * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
@@ -42,7 +40,6 @@ export interface FileListCardProps {
    * @descriptionEn Render type, currently only supports default render mode
    */
   renderType?: 'default',
-
 }
 
 const EMPTY = '\u00A0';
@@ -126,7 +123,7 @@ function getSize(size: number) {
 
 function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>) {
   const { getPrefixCls } = useProviderContext();
-  const { item, onRemove, className, style } = props;
+  const { item, onRemove, onReplace, className, style } = props;
   const context = React.useContext(AttachmentContext);
   const { disabled } = context || {};
   const { name, size, percent, status = 'done', description } = item;
@@ -141,7 +138,23 @@ function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>)
 
   const isImg = React.useMemo(() => matchExt(nameSuffix, IMG_EXTS), [nameSuffix]);
 
-  const desc = React.useMemo(() => {
+  const renderType = props.renderType || 'default';
+  const isImgPreview = isImg && (item.originFileObj || item.thumbUrl || item.url) && renderType === 'default';
+
+  if (isImgPreview) {
+    return (
+      <ImageCard
+        ref={ref}
+        item={item}
+        onRemove={onRemove}
+        onReplace={onReplace}
+        className={className}
+        style={style}
+      />
+    );
+  }
+
+  const desc = (() => {
     if (description) {
       return description;
     }
@@ -155,9 +168,9 @@ function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>)
     }
 
     return size ? getSize(size) : EMPTY;
-  }, [status, percent]);
+  })();
 
-  const [icon, iconColor] = React.useMemo(() => {
+  const [icon, iconColor] = (() => {
     for (const { ext, icon, color } of PRESET_FILE_ICONS) {
       if (matchExt(nameSuffix, ext)) {
         return [icon, color];
@@ -165,57 +178,25 @@ function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>)
     }
 
     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>
+  })();
+
+  return (
+    <>
+      <Style />
+      <div
+        className={classnames(
+          cardCls,
+          {
+            [`${cardCls}-status-${status}`]: status,
+            [`${cardCls}-type-overview`]: true,
+            [`${cardCls}-type-${renderType}`]: true,
+            [`${cardCls}-hoverable`]: !disabled && onRemove,
+          },
+          className,
         )}
-      </>
-    );
-  } else {
-    content = (
-      <>
+        style={style}
+        ref={ref}
+      >
         <div className={`${cardCls}-icon`} style={{ color: iconColor }}>
           {icon}
         </div>
@@ -227,44 +208,23 @@ function FileListCard(props: FileListCardProps, ref: React.Ref<HTMLDivElement>)
             <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></>
+        <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/ImageCard.tsx

@@ -0,0 +1,197 @@
+import classnames from 'classnames';
+import React from 'react';
+import { Image } from 'antd';
+import type { Attachment } from '..';
+import { AttachmentContext } from '../context';
+import { previewImage } from '../util';
+import Progress from './Progress';
+import Style from '../style/fileCard';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { SparkFalseLine, SparkVisibleLine, SparkRefreshLine, SparkReplaceLine } from '@agentscope-ai/icons';
+
+export interface ImageCardProps {
+  /**
+   * @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 替换当前图片的回调，传入原始附件和新选择的文件
+   * @descriptionEn Callback to replace current image, receives the original attachment and newly selected file
+   */
+  onReplace?: (oldItem: Attachment, file: File) => void;
+  /**
+   * @description 组件的CSS类名
+   * @descriptionEn CSS class name for the component
+   */
+  className?: string;
+  /**
+   * @description 组件的内联样式对象
+   * @descriptionEn Inline style object for the component
+   */
+  style?: React.CSSProperties;
+}
+
+const EMPTY = '\u00A0';
+
+const IMG_ACCEPT = 'image/png,image/jpeg,image/jpg,image/gif,image/bmp,image/webp,image/svg+xml';
+
+function ImageCard(props: ImageCardProps, ref: React.Ref<HTMLDivElement>) {
+  const { getPrefixCls } = useProviderContext();
+  const { item, onRemove, onReplace, className, style } = props;
+  const context = React.useContext(AttachmentContext);
+  const { disabled } = context || {};
+  const { percent, status = 'done', description } = item;
+  const prefixCls = getPrefixCls('attachment');
+  const cardCls = `${prefixCls}-list-card`;
+
+  const [previewVisible, setPreviewVisible] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const previewConfig = React.useMemo(() => ({
+    visible: previewVisible,
+    onVisibleChange: setPreviewVisible,
+  }), [previewVisible]);
+
+  const desc = React.useMemo(() => {
+    if (description) {
+      return description;
+    }
+
+    if (status === 'uploading') {
+      return `${percent || 0}%`;
+    }
+
+    if (status === 'error') {
+      return item.response || EMPTY;
+    }
+
+    return EMPTY;
+  }, [description, status, percent, item.response]);
+
+  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]);
+
+  const previewUrl = item.thumbUrl || item.url || previewImg;
+
+  const handleRefreshClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && onReplace) {
+      onReplace(item, file);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <>
+      <Style />
+      <div
+        className={classnames(
+          cardCls,
+          {
+            [`${cardCls}-status-${status}`]: status,
+            [`${cardCls}-type-preview`]: true,
+            [`${cardCls}-hoverable`]: !disabled && onRemove,
+          },
+          className,
+        )}
+        style={style}
+        ref={ref}
+      >
+        {previewUrl && <img alt="preview" src={previewUrl} />}
+
+        <Image
+          src={previewUrl}
+          style={{ display: 'none' }}
+          preview={previewConfig}
+        />
+
+        {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>
+        )}
+
+        {status === 'done' && (
+          <div className={`${cardCls}-img-hover-mask`}>
+            <button
+              className={`${cardCls}-img-action`}
+              onClick={(e) => {
+                e.stopPropagation();
+                setPreviewVisible(true);
+              }}
+            >
+              <SparkVisibleLine />
+            </button>
+            {onReplace && (
+              <button
+                className={`${cardCls}-img-action`}
+                onClick={handleRefreshClick}
+              >
+                <SparkReplaceLine />
+              </button>
+            )}
+          </div>
+        )}
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={IMG_ACCEPT}
+          style={{ display: 'none' }}
+          onChange={handleFileChange}
+        />
+
+        <button
+          style={{
+            opacity: !disabled && onRemove ? 1 : 0,
+          }}
+          className={`${cardCls}-remove`}
+          onClick={() => {
+            if (!disabled && onRemove) {
+              onRemove(item);
+            }
+          }}
+        >
+          <SparkFalseLine />
+        </button>
+      </div>
+    </>
+  );
+}
+
+export default React.forwardRef(ImageCard);

package/components/Attachments/FileList/index.tsx

@@ -22,6 +22,11 @@ export interface FileListProps {
    * @descriptionEn Callback function when file is removed for handling file deletion operations
    */
   onRemove: (item: Attachment) => void;
+  /**
+   * @description 替换图片文件的回调，传入原始附件和新选择的文件
+   * @descriptionEn Callback to replace an image file, receives the original attachment and newly selected file
+   */
+  onReplace?: (oldItem: Attachment, file: File) => void;
   /**
    * @description 文件列表的溢出处理方式，影响滚动和布局行为
    * @descriptionEn Overflow handling method for file list, affects scrolling and layout behavior
@@ -68,6 +73,7 @@ export default function FileList(props: FileListProps) {
     prefixCls,
     items,
     onRemove,
+    onReplace,
     overflow,
     listClassName,
     listStyle,
@@ -167,6 +173,7 @@ export default function FileList(props: FileListProps) {
               prefixCls={prefixCls}
               item={item}
               onRemove={onRemove}
+              onReplace={onReplace}
               className={classnames(motionCls, itemClassName)}
               style={{
                 ...motionStyle,

package/components/Attachments/index.tsx

@@ -7,6 +7,7 @@ import { useEvent, useMergedState } from 'rc-util';
 import DropArea from './DropArea';
 import FileList, { type FileListProps } from './FileList';
 import FileListCard from './FileList/FileListCard';
+import ImageCard from './FileList/ImageCard';
 import PlaceholderUploader, {
   type PlaceholderProps,
   type PlaceholderType,
@@ -92,6 +93,11 @@ export interface AttachmentsProps extends Omit<UploadProps, 'fileList'> {
    * @descriptionEn Render type, currently only supports default render mode
    */
   renderType?: 'default',
+  /**
+   * @description 图片类型文件是否支持点击刷新按钮直接替换上传
+   * @descriptionEn Whether image files support direct replacement upload via the refresh button
+   */
+  replaceable?: boolean;
 }
 
 export interface AttachmentsRef {
@@ -121,6 +127,7 @@ function Attachments(props: AttachmentsProps, ref: React.Ref<AttachmentsRef>) {
     onChange,
     overflow,
     disabled,
+    replaceable,
     classNames = {},
     styles = {},
     ...uploadProps
@@ -170,6 +177,25 @@ function Attachments(props: AttachmentsProps, ref: React.Ref<AttachmentsRef>) {
     });
   };
 
+  const onItemReplace = useEvent((oldItem: Attachment, file: File) => {
+    const newAttachment: Attachment = {
+      uid: oldItem.uid,
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      originFileObj: file as any,
+      status: 'done',
+      percent: 100,
+    };
+    const newFileList = fileList.map((fileItem) =>
+      fileItem.uid === oldItem.uid ? newAttachment : fileItem,
+    );
+    triggerChange({
+      file: newAttachment,
+      fileList: newFileList,
+    });
+  });
+
   let renderChildren: React.ReactElement;
 
   const getPlaceholderNode = (
@@ -233,6 +259,7 @@ function Attachments(props: AttachmentsProps, ref: React.Ref<AttachmentsRef>) {
           prefixCls={prefixCls}
           items={fileList}
           onRemove={onItemRemove}
+          onReplace={replaceable ? onItemReplace : undefined}
           overflow={overflow}
           upload={mergedUploadProps}
           listClassName={classnames(classNames.list)}
@@ -267,8 +294,10 @@ const ForwardAttachments = React.forwardRef(Attachments) as React.ForwardRefExot
   AttachmentsProps & React.RefAttributes<AttachmentsRef>
 > & {
   FileCard: typeof FileListCard;
+  ImageCard: typeof ImageCard;
 };
 
 ForwardAttachments.FileCard = FileListCard;
+ForwardAttachments.ImageCard = ImageCard;
 
 export default ForwardAttachments;

package/components/Attachments/style/fileCard.ts

@@ -61,7 +61,7 @@ export default createGlobalStyle`
   }
 
   &-type-preview {
-    width: 56px;
+    width: 100px;
     height: 56px;
     line-height: 1;
 
@@ -70,7 +70,7 @@ export default createGlobalStyle`
       height: 100%;
       vertical-align: top;
       object-fit: cover;
-      border-radius: 5px;
+      border-radius: 6px;
     }
 
     .${(p) => p.theme.prefixCls}-attachment-list-card-img-mask {
@@ -83,6 +83,44 @@ export default createGlobalStyle`
       border-radius: inherit;
     }
 
+    .${(p) => p.theme.prefixCls}-attachment-list-card-img-hover-mask {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      gap: 16px;
+      background: rgba(20, 19, 39, 0.45);
+      border-radius: 6px;
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+
+    &:hover .${(p) => p.theme.prefixCls}-attachment-list-card-img-hover-mask {
+      opacity: 1;
+    }
+
+    .${(p) => p.theme.prefixCls}-attachment-list-card-img-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: ${(p) => p.theme.colorWhite};
+      font-size: 20px;
+      cursor: pointer;
+      line-height: 1;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
     &.${(p) => p.theme.prefixCls}-attachment-list-card-status-error {
 
       img,
@@ -161,7 +199,9 @@ export default createGlobalStyle`
 
   &:hover {
     border-color: ${(p) => p.theme.colorPrimary};
+  }
 
+  &.${(p) => p.theme.prefixCls}-attachment-list-card-type-overview:hover {
     &::after {
       content: '';
       position: absolute;
@@ -173,6 +213,5 @@ export default createGlobalStyle`
       background-color: rgba(0, 0, 0, 0.45);
     }
   }
-
 }
 `;

package/components/ChatAnywhere/Input/index.tsx

@@ -159,6 +159,7 @@ export default forwardRef(function (_, ref) {
           return <Attachments
             key={index}
             items={files}
+            replaceable={true}
             onChange={(info) => handleFileChange(index, info.fileList)}
           />
         })