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

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)}
           />
         })

package/lib/Attachments/FileList/FileListCard.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Attachment } from '..';
-export interface FileListCardProps {
+import type { ImageCardProps } from './ImageCard';
+export interface FileListCardProps extends Pick<ImageCardProps, 'onReplace'> {
     /**
      * @description 自定义CSS类名前缀，用于样式隔离和主题定制
      * @descriptionEn Custom CSS class name prefix for style isolation and theme customization

package/lib/Attachments/FileList/FileListCard.js

@@ -12,11 +12,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classnames from 'classnames';
 import React from 'react';
 import { AttachmentContext } from "../context";
-import { previewImage } from "../util";
-import Progress from "./Progress";
 import Style from "../style/fileCard";
 import { useProviderContext } from "../..";
 import { SparkFalseLine } from '@agentscope-ai/icons';
+import ImageCard from "./ImageCard";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -106,6 +105,7 @@ function FileListCard(props, ref) {
     getPrefixCls = _useProviderContext.getPrefixCls;
   var item = props.item,
     onRemove = props.onRemove,
+    onReplace = props.onReplace,
     className = props.className,
     style = props.style;
   var context = React.useContext(AttachmentContext);
@@ -130,7 +130,19 @@ function FileListCard(props, ref) {
   var isImg = React.useMemo(function () {
     return matchExt(nameSuffix, IMG_EXTS);
   }, [nameSuffix]);
-  var desc = React.useMemo(function () {
+  var renderType = props.renderType || 'default';
+  var isImgPreview = isImg && (item.originFileObj || item.thumbUrl || item.url) && renderType === 'default';
+  if (isImgPreview) {
+    return /*#__PURE__*/_jsx(ImageCard, {
+      ref: ref,
+      item: item,
+      onRemove: onRemove,
+      onReplace: onReplace,
+      className: className,
+      style: style
+    });
+  }
+  var desc = function () {
     if (description) {
       return description;
     }
@@ -141,8 +153,8 @@ function FileListCard(props, ref) {
       return item.response || EMPTY;
     }
     return size ? getSize(size) : EMPTY;
-  }, [status, percent]);
-  var _React$useMemo3 = React.useMemo(function () {
+  }();
+  var _ref3 = function () {
       var _iterator = _createForOfIteratorHelper(PRESET_FILE_ICONS),
         _step;
       try {
@@ -163,53 +175,15 @@ function FileListCard(props, ref) {
       return [/*#__PURE__*/_jsx(IconImage, {
         url: "https://gw.alicdn.com/imgextra/i1/O1CN01K7jgEj1sywWTkPSGY_!!6000000005836-55-tps-40-40.svg"
       }, "defaultIcon"), DEFAULT_ICON_COLOR];
-    }, [nameSuffix]),
-    _React$useMemo4 = _slicedToArray(_React$useMemo3, 2),
-    icon = _React$useMemo4[0],
-    iconColor = _React$useMemo4[1];
-  var _React$useState = React.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    previewImg = _React$useState2[0],
-    setPreviewImg = _React$useState2[1];
-  React.useEffect(function () {
-    if (item.originFileObj) {
-      var synced = true;
-      previewImage(item.originFileObj).then(function (url) {
-        if (synced) {
-          setPreviewImg(url);
-        }
-      });
-      return function () {
-        synced = false;
-      };
-    }
-    setPreviewImg(undefined);
-  }, [item.originFileObj]);
-  var content = null;
-  var previewUrl = item.thumbUrl || item.url || previewImg;
-  var renderType = props.renderType || 'default';
-  var isImgPreview = isImg && (item.originFileObj || previewUrl) && renderType === 'default';
-  if (isImgPreview) {
-    content = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [previewUrl && /*#__PURE__*/_jsx("img", {
-        alt: "preview",
-        src: previewUrl
-      }), status !== 'done' && /*#__PURE__*/_jsxs("div", {
-        className: "".concat(cardCls, "-img-mask"),
-        children: [status === 'uploading' && percent !== undefined && /*#__PURE__*/_jsx(Progress, {
-          percent: percent,
-          prefixCls: cardCls
-        }), status === 'error' && /*#__PURE__*/_jsx("div", {
-          className: "".concat(cardCls, "-desc"),
-          children: /*#__PURE__*/_jsx("div", {
-            className: "".concat(cardCls, "-ellipsis-prefix"),
-            children: desc
-          })
-        })]
-      })]
-    });
-  } else {
-    content = /*#__PURE__*/_jsxs(_Fragment, {
+    }(),
+    _ref4 = _slicedToArray(_ref3, 2),
+    icon = _ref4[0],
+    iconColor = _ref4[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
+      className: classnames(cardCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(cardCls, "-status-").concat(status), status), "".concat(cardCls, "-type-overview"), true), "".concat(cardCls, "-type-").concat(renderType), true), "".concat(cardCls, "-hoverable"), !disabled && onRemove), className),
+      style: style,
+      ref: ref,
       children: [/*#__PURE__*/_jsx("div", {
         className: "".concat(cardCls, "-icon"),
         style: {
@@ -228,15 +202,7 @@ function FileListCard(props, ref) {
             children: desc
           })
         })]
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
-      className: classnames(cardCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(cardCls, "-status-").concat(status), status), "".concat(cardCls, "-type-preview"), isImgPreview), "".concat(cardCls, "-type-overview"), !isImgPreview), "".concat(cardCls, "-type-").concat(renderType), true), "".concat(cardCls, "-hoverable"), !disabled && onRemove), className),
-      style: style,
-      ref: ref,
-      children: [content, /*#__PURE__*/_jsx("button", {
+      }), /*#__PURE__*/_jsx("button", {
         style: {
           opacity: !disabled && onRemove ? 1 : 0
         },

package/lib/Attachments/FileList/ImageCard.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { Attachment } from '..';
+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;
+}
+declare const _default: React.ForwardRefExoticComponent<ImageCardProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/Attachments/FileList/ImageCard.js

@@ -0,0 +1,162 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classnames from 'classnames';
+import React from 'react';
+import { Image } from 'antd';
+import { AttachmentContext } from "../context";
+import { previewImage } from "../util";
+import Progress from "./Progress";
+import Style from "../style/fileCard";
+import { useProviderContext } from "../..";
+import { SparkFalseLine, SparkVisibleLine, SparkReplaceLine } from '@agentscope-ai/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var EMPTY = "\xA0";
+var IMG_ACCEPT = 'image/png,image/jpeg,image/jpg,image/gif,image/bmp,image/webp,image/svg+xml';
+function ImageCard(props, ref) {
+  var _useProviderContext = useProviderContext(),
+    getPrefixCls = _useProviderContext.getPrefixCls;
+  var item = props.item,
+    onRemove = props.onRemove,
+    onReplace = props.onReplace,
+    className = props.className,
+    style = props.style;
+  var context = React.useContext(AttachmentContext);
+  var _ref = context || {},
+    disabled = _ref.disabled;
+  var percent = item.percent,
+    _item$status = item.status,
+    status = _item$status === void 0 ? 'done' : _item$status,
+    description = item.description;
+  var prefixCls = getPrefixCls('attachment');
+  var cardCls = "".concat(prefixCls, "-list-card");
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    previewVisible = _React$useState2[0],
+    setPreviewVisible = _React$useState2[1];
+  var fileInputRef = React.useRef(null);
+  var previewConfig = React.useMemo(function () {
+    return {
+      visible: previewVisible,
+      onVisibleChange: setPreviewVisible
+    };
+  }, [previewVisible]);
+  var desc = React.useMemo(function () {
+    if (description) {
+      return description;
+    }
+    if (status === 'uploading') {
+      return "".concat(percent || 0, "%");
+    }
+    if (status === 'error') {
+      return item.response || EMPTY;
+    }
+    return EMPTY;
+  }, [description, status, percent, item.response]);
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    previewImg = _React$useState4[0],
+    setPreviewImg = _React$useState4[1];
+  React.useEffect(function () {
+    if (item.originFileObj) {
+      var synced = true;
+      previewImage(item.originFileObj).then(function (url) {
+        if (synced) {
+          setPreviewImg(url);
+        }
+      });
+      return function () {
+        synced = false;
+      };
+    }
+    setPreviewImg(undefined);
+  }, [item.originFileObj]);
+  var previewUrl = item.thumbUrl || item.url || previewImg;
+  var handleRefreshClick = function handleRefreshClick(e) {
+    var _fileInputRef$current;
+    e.stopPropagation();
+    (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
+  };
+  var handleFileChange = function handleFileChange(e) {
+    var _e$target$files;
+    var file = (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0];
+    if (file && onReplace) {
+      onReplace(item, file);
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
+      className: classnames(cardCls, _defineProperty(_defineProperty(_defineProperty({}, "".concat(cardCls, "-status-").concat(status), status), "".concat(cardCls, "-type-preview"), true), "".concat(cardCls, "-hoverable"), !disabled && onRemove), className),
+      style: style,
+      ref: ref,
+      children: [previewUrl && /*#__PURE__*/_jsx("img", {
+        alt: "preview",
+        src: previewUrl
+      }), /*#__PURE__*/_jsx(Image, {
+        src: previewUrl,
+        style: {
+          display: 'none'
+        },
+        preview: previewConfig
+      }), status !== 'done' && /*#__PURE__*/_jsxs("div", {
+        className: "".concat(cardCls, "-img-mask"),
+        children: [status === 'uploading' && percent !== undefined && /*#__PURE__*/_jsx(Progress, {
+          percent: percent,
+          prefixCls: cardCls
+        }), status === 'error' && /*#__PURE__*/_jsx("div", {
+          className: "".concat(cardCls, "-desc"),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "".concat(cardCls, "-ellipsis-prefix"),
+            children: desc
+          })
+        })]
+      }), status === 'done' && /*#__PURE__*/_jsxs("div", {
+        className: "".concat(cardCls, "-img-hover-mask"),
+        children: [/*#__PURE__*/_jsx("button", {
+          className: "".concat(cardCls, "-img-action"),
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            setPreviewVisible(true);
+          },
+          children: /*#__PURE__*/_jsx(SparkVisibleLine, {})
+        }), onReplace && /*#__PURE__*/_jsx("button", {
+          className: "".concat(cardCls, "-img-action"),
+          onClick: handleRefreshClick,
+          children: /*#__PURE__*/_jsx(SparkReplaceLine, {})
+        })]
+      }), /*#__PURE__*/_jsx("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept: IMG_ACCEPT,
+        style: {
+          display: 'none'
+        },
+        onChange: handleFileChange
+      }), /*#__PURE__*/_jsx("button", {
+        style: {
+          opacity: !disabled && onRemove ? 1 : 0
+        },
+        className: "".concat(cardCls, "-remove"),
+        onClick: function onClick() {
+          if (!disabled && onRemove) {
+            onRemove(item);
+          }
+        },
+        children: /*#__PURE__*/_jsx(SparkFalseLine, {})
+      })]
+    })]
+  });
+}
+export default /*#__PURE__*/React.forwardRef(ImageCard);

package/lib/Attachments/FileList/index.d.ts

@@ -17,6 +17,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

package/lib/Attachments/FileList/index.js

@@ -24,6 +24,7 @@ export default function FileList(props) {
   var prefixCls = props.prefixCls,
     items = props.items,
     onRemove = props.onRemove,
+    onReplace = props.onReplace,
     overflow = props.overflow,
     listClassName = props.listClassName,
     listStyle = props.listStyle,
@@ -108,6 +109,7 @@ export default function FileList(props) {
           prefixCls: prefixCls,
           item: item,
           onRemove: onRemove,
+          onReplace: onReplace,
           className: classnames(motionCls, itemClassName),
           style: _objectSpread(_objectSpread({}, motionStyle), itemStyle),
           renderType: props.renderType

package/lib/Attachments/index.d.ts

@@ -2,6 +2,7 @@ import { type GetProp, type UploadProps } from 'antd';
 import React from 'react';
 import { type FileListProps } from './FileList';
 import FileListCard from './FileList/FileListCard';
+import ImageCard from './FileList/ImageCard';
 import { type PlaceholderType } from './PlaceholderUploader';
 export type SemanticType = 'list' | 'item' | 'placeholder';
 export type Attachment = GetProp<UploadProps, 'fileList'>[number] & {
@@ -78,6 +79,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 {
     /**
@@ -93,5 +99,6 @@ export interface AttachmentsRef {
 }
 declare const ForwardAttachments: React.ForwardRefExoticComponent<AttachmentsProps & React.RefAttributes<AttachmentsRef>> & {
     FileCard: typeof FileListCard;
+    ImageCard: typeof ImageCard;
 };
 export default ForwardAttachments;

package/lib/Attachments/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["prefixCls", "rootClassName", "rootStyle", "className", "style", "items", "children", "getDropContainer", "placeholder", "onChange", "overflow", "disabled", "classNames", "styles"];
+var _excluded = ["prefixCls", "rootClassName", "rootStyle", "className", "style", "items", "children", "getDropContainer", "placeholder", "onChange", "overflow", "disabled", "replaceable", "classNames", "styles"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -20,6 +20,7 @@ import { useEvent, useMergedState } from 'rc-util';
 import DropArea from "./DropArea";
 import FileList from "./FileList";
 import FileListCard from "./FileList/FileListCard";
+import ImageCard from "./FileList/ImageCard";
 import PlaceholderUploader from "./PlaceholderUploader";
 import SilentUploader from "./SilentUploader";
 import { AttachmentContext } from "./context";
@@ -40,6 +41,7 @@ function Attachments(props, ref) {
     onChange = props.onChange,
     overflow = props.overflow,
     disabled = props.disabled,
+    replaceable = props.replaceable,
     _props$classNames = props.classNames,
     classNames = _props$classNames === void 0 ? {} : _props$classNames,
     _props$styles = props.styles,
@@ -94,6 +96,24 @@ function Attachments(props, ref) {
       fileList: newFileList
     });
   };
+  var onItemReplace = useEvent(function (oldItem, file) {
+    var newAttachment = {
+      uid: oldItem.uid,
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      originFileObj: file,
+      status: 'done',
+      percent: 100
+    };
+    var newFileList = fileList.map(function (fileItem) {
+      return fileItem.uid === oldItem.uid ? newAttachment : fileItem;
+    });
+    triggerChange({
+      file: newAttachment,
+      fileList: newFileList
+    });
+  });
   var renderChildren;
   var getPlaceholderNode = function getPlaceholderNode(type, props, ref) {
     var placeholderContent = typeof placeholder === 'function' ? placeholder(type) : placeholder;
@@ -131,6 +151,7 @@ function Attachments(props, ref) {
         prefixCls: prefixCls,
         items: fileList,
         onRemove: onItemRemove,
+        onReplace: replaceable ? onItemReplace : undefined,
         overflow: overflow,
         upload: mergedUploadProps,
         listClassName: classnames(classNames.list),
@@ -158,4 +179,5 @@ function Attachments(props, ref) {
 }
 var ForwardAttachments = /*#__PURE__*/React.forwardRef(Attachments);
 ForwardAttachments.FileCard = FileListCard;
+ForwardAttachments.ImageCard = ImageCard;
 export default ForwardAttachments;

package/lib/Attachments/style/fileCard.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createGlobalStyle } from 'antd-style';
-export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-attachment-list-card {\n  border-radius: ", "px;\n  position: relative;\n  background: ", ";\n  border-width: ", "px;\n  border-style: solid;\n  border-color: ", ";\n  flex: none;\n  transition: all 0.3s;\n\n  &-name,\n  &-desc {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n\n  &-ellipsis-prefix {\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &-ellipsis-suffix {\n    flex: none;\n  }\n\n  &-type-overview {\n    padding: 0 8px;\n    display: flex;\n    height: 56px;\n    gap: ", "px;\n    align-items: center;\n    width: 140px;\n\n    .", "-attachment-list-card-icon {\n      display: flex;\n      align-items: center;\n    }\n\n    .", "-attachment-list-card-content {\n      flex: auto;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      font-size: ", "px;\n      color: ", ";\n    }\n\n    .", "-attachment-list-card-desc {\n      color: ", ";\n      font-size: ", "px;\n    }\n  }\n\n  &-type-preview {\n    width: 56px;\n    height: 56px;\n    line-height: 1;\n\n    img {\n      width: 100%;\n      height: 100%;\n      vertical-align: top;\n      object-fit: cover;\n      border-radius: 5px;\n    }\n\n    .", "-attachment-list-card-img-mask {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: rgba(0, 0, 0, ", ");\n      border-radius: inherit;\n    }\n\n    &.", "-attachment-list-card-status-error {\n\n      img,\n      .", "-attachment-list-card-img-mask {\n        border-radius: calc(", "px - ", "px);\n      }\n\n      .", "-attachment-list-card-desc {\n        padding-inline: ", "px;\n      }\n    }\n\n    .", "-attachment-list-card-progress {\n    }\n  }\n\n  &-remove {\n    position: absolute;\n    top: -6px;\n    right: -6px;\n    width: 16px;\n    height: 16px;\n    line-height: 1;\n    font-size: 10px;\n    cursor: pointer;\n    display: none;\n    color: ", ";\n    background-color: ", ";\n    border-width: ", "px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: 50%;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s;\n    z-index: 1;\n\n    &:dir(rtl) {\n      transform: translate(-50%, -50%);\n    }\n  }\n\n  &:hover &-remove {\n    display: flex;\n    \n  }\n\n  &-status-error {\n    border-color: ", ";\n\n    .", "-attachment-list-card-desc {\n      color: ", ";\n    }\n  }\n\n  &-motion {\n\n    &-appear-start {\n      width: 0;\n      transition: none;\n    }\n\n    &-leave-active {\n      opacity: 0;\n      width: 0;\n      padding-inline: 0;\n      border-inline-width: 0;\n      margin-inline-end: calc(-1 * ", "px);\n    }\n  }\n}\n\n.", "-attachment-list-card-hoverable {\n  position: relative;\n\n  &:hover {\n    border-color: ", ";\n\n    &::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      border-radius: 5px;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.45);\n    }\n  }\n\n}\n"])), function (p) {
+export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-attachment-list-card {\n  border-radius: ", "px;\n  position: relative;\n  background: ", ";\n  border-width: ", "px;\n  border-style: solid;\n  border-color: ", ";\n  flex: none;\n  transition: all 0.3s;\n\n  &-name,\n  &-desc {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n\n  &-ellipsis-prefix {\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &-ellipsis-suffix {\n    flex: none;\n  }\n\n  &-type-overview {\n    padding: 0 8px;\n    display: flex;\n    height: 56px;\n    gap: ", "px;\n    align-items: center;\n    width: 140px;\n\n    .", "-attachment-list-card-icon {\n      display: flex;\n      align-items: center;\n    }\n\n    .", "-attachment-list-card-content {\n      flex: auto;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      font-size: ", "px;\n      color: ", ";\n    }\n\n    .", "-attachment-list-card-desc {\n      color: ", ";\n      font-size: ", "px;\n    }\n  }\n\n  &-type-preview {\n    width: 100px;\n    height: 56px;\n    line-height: 1;\n\n    img {\n      width: 100%;\n      height: 100%;\n      vertical-align: top;\n      object-fit: cover;\n      border-radius: 6px;\n    }\n\n    .", "-attachment-list-card-img-mask {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: rgba(0, 0, 0, ", ");\n      border-radius: inherit;\n    }\n\n    .", "-attachment-list-card-img-hover-mask {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      align-items: center;\n      gap: 16px;\n      background: rgba(20, 19, 39, 0.45);\n      border-radius: 6px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    &:hover .", "-attachment-list-card-img-hover-mask {\n      opacity: 1;\n    }\n\n    .", "-attachment-list-card-img-action {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 20px;\n      height: 20px;\n      padding: 0;\n      border: none;\n      background: transparent;\n      color: ", ";\n      font-size: 20px;\n      cursor: pointer;\n      line-height: 1;\n      transition: opacity 0.2s;\n\n      &:hover {\n        opacity: 0.8;\n      }\n    }\n\n    &.", "-attachment-list-card-status-error {\n\n      img,\n      .", "-attachment-list-card-img-mask {\n        border-radius: calc(", "px - ", "px);\n      }\n\n      .", "-attachment-list-card-desc {\n        padding-inline: ", "px;\n      }\n    }\n\n    .", "-attachment-list-card-progress {\n    }\n  }\n\n  &-remove {\n    position: absolute;\n    top: -6px;\n    right: -6px;\n    width: 16px;\n    height: 16px;\n    line-height: 1;\n    font-size: 10px;\n    cursor: pointer;\n    display: none;\n    color: ", ";\n    background-color: ", ";\n    border-width: ", "px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: 50%;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.3s;\n    z-index: 1;\n\n    &:dir(rtl) {\n      transform: translate(-50%, -50%);\n    }\n  }\n\n  &:hover &-remove {\n    display: flex;\n    \n  }\n\n  &-status-error {\n    border-color: ", ";\n\n    .", "-attachment-list-card-desc {\n      color: ", ";\n    }\n  }\n\n  &-motion {\n\n    &-appear-start {\n      width: 0;\n      transition: none;\n    }\n\n    &-leave-active {\n      opacity: 0;\n      width: 0;\n      padding-inline: 0;\n      border-inline-width: 0;\n      margin-inline-end: calc(-1 * ", "px);\n    }\n  }\n}\n\n.", "-attachment-list-card-hoverable {\n  position: relative;\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &.", "-attachment-list-card-type-overview:hover {\n    &::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      border-radius: 5px;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.45);\n    }\n  }\n}\n"])), function (p) {
   return p.theme.prefixCls;
 }, function (p) {
   return p.theme.borderRadius;
@@ -35,6 +35,14 @@ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTe
   return p.theme.prefixCls;
 }, function (p) {
   return p.theme.prefixCls;
+}, function (p) {
+  return p.theme.prefixCls;
+}, function (p) {
+  return p.theme.colorWhite;
+}, function (p) {
+  return p.theme.prefixCls;
+}, function (p) {
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.borderRadius;
 }, function (p) {
@@ -65,4 +73,6 @@ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTe
   return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorPrimary;
+}, function (p) {
+  return p.theme.prefixCls;
 });

package/lib/ChatAnywhere/Input/index.js

@@ -192,6 +192,7 @@ export default /*#__PURE__*/forwardRef(function (_, ref) {
       if (!files.length) return null;
       return /*#__PURE__*/_jsx(Attachments, {
         items: files,
+        replaceable: true,
         onChange: function onChange(info) {
           return handleFileChange(index, info.fileList);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/chat",
-  "version": "1.1.53",
+  "version": "1.1.54-beta.1773217735669",
   "description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
   "license": "Apache-2.0",
   "sideEffects": [