@agentscope-ai/chat 1.1.46-beta.1768039019165 → 1.1.46-beta.1768184877196

package/components/AssetsPreview/Audio.tsx

@@ -78,8 +78,8 @@ export default function Audio(props: IAudio) {
     <>
       <audio ref={audioRef} src={props.src} muted={isMuted} />
       <div className={prefixCls}>
-        <IconButton shape="circle" size="small" type="text" onClick={togglePlay} icon={isPlaying ? <SparkPauseFill /> : <SparkPlayFill />} />
-        <IconButton shape="circle" size="small" type="text" onClick={toggleMuted} icon={isMuted ? <SparkMuteLine /> : <SparkVolumeLine />} />
+        <IconButton size="small" type="text" onClick={togglePlay} icon={isPlaying ? <SparkPauseFill /> : <SparkPlayFill />} />
+        <IconButton size="small" type="text" onClick={toggleMuted} icon={isMuted ? <SparkMuteLine /> : <SparkVolumeLine />} />
         <div className={`${prefixCls}-time`}>{formatTime(currentTime)}</div>
         <div
           className={`${prefixCls}-progress`}

package/components/AssetsPreview/Image.tsx

@@ -16,4 +16,9 @@ export default function (props: IImage) {
       } as Locale}
     ><Image src={props.src} width={"100%"} height={"100%"} /></ConfigProvider>
   </div>;
+}
+
+
+export function ImagesContainer(props: { children: React.ReactNode }) {
+  return <Image.PreviewGroup>{props.children}</Image.PreviewGroup>
 }

package/components/AssetsPreview/Video.tsx

@@ -1,7 +1,8 @@
 import { IVideo } from "./types";
 import { useProviderContext } from "..";
 import { useRef, useState, useCallback } from "react";
-import { SparkPlayFill } from "@agentscope-ai/icons";
+import { SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
+import cls from "classnames";
 
 export default function Video(props: IVideo) {
   const prefixCls = useProviderContext().getPrefixCls('assets-preview-video');
@@ -9,6 +10,7 @@ export default function Video(props: IVideo) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
 
   const formatTime = useCallback((seconds: number) => {
     const mins = Math.floor(seconds / 60);
@@ -37,6 +39,13 @@ export default function Video(props: IVideo) {
 
   const handleEnded = useCallback(() => {
     setIsPlaying(false);
+    setCurrentTime(0);
+  }, []);
+
+  const handleTimeUpdate = useCallback(() => {
+    if (videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime);
+    }
   }, []);
 
   return (
@@ -53,21 +62,23 @@ export default function Video(props: IVideo) {
         poster={poster}
         preload="metadata"
         onLoadedMetadata={handleLoadedMetadata}
+        onTimeUpdate={handleTimeUpdate}
         onEnded={handleEnded}
       />
-      {!isPlaying && (
-        <div className={`${prefixCls}-overlay`} onClick={handlePlayPause}>
-          <div className={`${prefixCls}-play-btn`}>
-            <SparkPlayFill />
-          </div>
-          <div className={`${prefixCls}-duration`}>
-            {formatTime(duration)}
-          </div>
+      <div className={cls(`${prefixCls}-overlay`, {
+        [`${prefixCls}-overlay-playing`]: isPlaying,
+        [`${prefixCls}-overlay-paused`]: !isPlaying,
+      })} onClick={isPlaying ? handlePlayPause : handlePlayPause}>
+        <div className={`${prefixCls}-play-btn`}>
+          {
+            isPlaying ? <SparkPauseFill /> : <SparkPlayFill />
+          }
+        </div>
+        <div className={`${prefixCls}-duration`}>
+          {formatTime(currentTime)}/{formatTime(duration)}
         </div>
-      )}
-      {isPlaying && (
-        <div className={`${prefixCls}-playing-overlay`} onClick={handlePlayPause} />
-      )}
+      </div>
+
     </div>
   );
 }

package/components/AssetsPreview/demo/audio.tsx

@@ -0,0 +1,13 @@
+
+import { AssetsPreview } from '@agentscope-ai/chat';
+import { Flex, Space } from 'antd';
+import React from 'react';
+
+export default function () {
+  return <AssetsPreview type="audio" data={[
+    { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
+    { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
+    { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
+
+  ]} />
+}

package/components/AssetsPreview/demo/center.tsx

@@ -0,0 +1,9 @@
+import { AssetsPreview } from '@agentscope-ai/chat';
+import { Flex, Space } from 'antd';
+import React from 'react';
+
+export default function () {
+  return <AssetsPreview type="image" data={[
+    { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 1, height: 1 },
+  ]} />
+}

package/components/AssetsPreview/demo/left.tsx

@@ -0,0 +1,21 @@
+import { AssetsPreview } from '@agentscope-ai/chat';
+import { Flex, Space } from 'antd';
+import React from 'react';
+
+export default function () {
+  return <AssetsPreview type="image" data={[
+    { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
+    { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
+    { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
+    { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
+    { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
+    { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
+    { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
+    { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
+  ]} />
+
+
+
+
+
+}

package/components/AssetsPreview/demo/video.tsx

@@ -0,0 +1,10 @@
+
+import { AssetsPreview } from '@agentscope-ai/chat';
+import { Flex, Space } from 'antd';
+import React from 'react';
+
+export default function () {
+  return <AssetsPreview type="video" data={[
+    { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
+  ]} />
+}

package/components/AssetsPreview/index.en-US.md

@@ -2,11 +2,35 @@
 group:
   title: Output
   order: 3
-title: ???
-description: ???
+title: AssetsPreview
+description: Preview assets in conversations
 ---
 
-<DemoTitle title="???" desc="???"></DemoTitle>
+<DemoTitle title="AssetsPreview" desc="Preview assets in conversations"></DemoTitle>
 
+<Install>import { AssetsPreview } from '@agentscope-ai/chat'</Install>
 
-<code src="./demo/index.tsx"></code>
+#### AssetsPreview Examples
+
+<code src="./demo/left.tsx" height="auto">Multiple images left-aligned</code>
+<code src="./demo/center.tsx" height="auto">Single image centered</code>
+<code src="./demo/video.tsx" height="auto">Video preview</code>
+<code src="./demo/audio.tsx" height="auto">Audio preview</code>
+
+#### API
+
+##### IAssetsPreviewProps
+
+<ApiParser source="./index.tsx" id="IAssetsPreviewProps"></ApiParser>
+
+##### IImage
+
+<ApiParser source="./types.tsx" id="IImage"></ApiParser>
+
+##### IVideo
+
+<ApiParser source="./types.tsx" id="IVideo"></ApiParser>
+
+##### IAudio
+
+<ApiParser source="./types.tsx" id="IAudio"></ApiParser>

package/components/AssetsPreview/index.tsx

@@ -2,20 +2,44 @@ import { useProviderContext } from '../Provider';
 import Style from './style';
 import cls from 'classnames';
 import { IImage, IVideo, IAudio } from './types';
-import Image from './Image';
+import Image, { ImagesContainer } from './Image';
 import Video from './Video';
 import Audio from './Audio';
 import { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
 import { SparkLeftLine, SparkRightLine } from '@agentscope-ai/icons';
 import { IconButton } from '@agentscope-ai/design';
-
 export interface IAssetsPreviewProps {
+  /**
+   * @description 类名
+   * @descriptionEn Class Name
+   * @default ''
+   */
   className?: string;
+  /**
+   * @description 语义化类名
+   * @descriptionEn Semantic Class Name
+   * @default {}
+   */
   classNames?: {
     container?: string;
   };
+  /**
+   * @description 高度
+   * @descriptionEn Height
+   * @default 144
+   */
   height?: number;
+  /**
+   * @description 类型
+   * @descriptionEn Type
+   * @default 'image'
+   */
   type: 'image' | 'video' | 'audio';
+  /**
+   * @description 数据
+   * @descriptionEn Data
+   * @default []
+   */
   data: (IImage | IVideo | IAudio)[];
 }
 
@@ -44,7 +68,7 @@ function AssetsPreview(props: IAssetsPreviewProps) {
 
 
   const toArrow = useCallback((direct: 'left' | 'right') => {
-    const width = 100;
+    const width = 200;
     ref.current.scrollLeft = ref.current.scrollLeft + width * (direct === 'left' ? -1 : 1)
   }, [])
 
@@ -54,16 +78,19 @@ function AssetsPreview(props: IAssetsPreviewProps) {
     audio: Audio,
   }[props.type];
 
+
+  const list = props.data.map((item, index) => {
+    return <Component key={index} {...item as any} />;
+  })
+
   return <>
     <Style />
     <div className={cls(`${prefixCls}`, props.className)}>
-      <div className={cls(`${prefixCls}-container`, props.className)} style={props.type !== 'audio' ? { height } : {
+      <div className={cls(`${prefixCls}-container`, props.classNames?.container)} style={props.type !== 'audio' ? { height } : {
         flexDirection: 'column'
       }} onScroll={onScroll} ref={ref}>
         {
-          props.data.map((item, index) => {
-            return <Component key={index} {...item as any} />;
-          })
+          props.type === 'image' ? <ImagesContainer>{list}</ImagesContainer> : list
         }
       </div>
 
@@ -85,7 +112,6 @@ function AssetsPreview(props: IAssetsPreviewProps) {
 
         </> : null
       }
-
     </div>
   </>
 }

package/components/AssetsPreview/index.zh-CN.md

@@ -1,11 +1,36 @@
 ---
-
 group:
-  title: 输出
+  title: Output
   order: 3
-title: ???
-description: ???
+title: AssetsPreview
+description: 可以在对话中预览资源
 ---
 
+<DemoTitle title="AssetsPreview" desc="可以在对话中预览资源"></DemoTitle>
+
+<Install>import { AssetsPreview } from '@agentscope-ai/chat'</Install>
+
+#### AssetsPreview 示例
+
+<code src="./demo/left.tsx" height="auto">多张左对齐平铺</code>
+<code src="./demo/center.tsx" height="auto">单张居中显示</code>
+<code src="./demo/video.tsx" height="auto">视频生成</code>
+<code src="./demo/audio.tsx" height="auto">音频生成</code>
+
+#### API
+
+##### IAssetsPreviewProps
+
+<ApiParser source="./index.tsx" id="IAssetsPreviewProps"></ApiParser>
+
+##### IImage
+
+<ApiParser source="./types.tsx" id="IImage"></ApiParser>
+
+##### IVideo
+
+<ApiParser source="./types.tsx" id="IVideo"></ApiParser>
+
+##### IAudio
 
-<DemoTitle title="???" desc="???"></DemoTitle>
+<ApiParser source="./types.tsx" id="IAudio"></ApiParser>

package/components/AssetsPreview/style.ts

@@ -62,6 +62,11 @@ export default createGlobalStyle`
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
+
+    .anticon-eye {
+      font-size: 20px;
+      margin: 0 !important;
+    }
   }
 
   &-video {
@@ -90,7 +95,18 @@ export default createGlobalStyle`
       align-items: center;
       justify-content: center;
       border-radius: 4px;
-      background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);
+
+      &-playing {
+        opacity: 0;
+        &:hover {
+          opacity: 1;
+          background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);
+        }
+      }
+
+      &-paused {
+        background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);
+      }
     }
 
     &-play-btn {
@@ -127,6 +143,7 @@ export default createGlobalStyle`
       right: 0;
       bottom: 0;
     }
+    
   }
     
   &-audio {

package/components/AssetsPreview/types.tsx

@@ -1,14 +1,54 @@
 export interface IImage {
+  /**
+   * @description 图片地址
+   * @descriptionEn Image URL
+   * @default ''
+   */
   src: string;
+  /**
+   * @description 图片宽度（比例值）
+   * @descriptionEn Image Width (Ratio Value)
+   * @default 0
+   */
   width: number;
+  /**
+   * @description 图片高度（比例值）
+   * @descriptionEn Image Height (Ratio Value)
+   * @default 0
+   */
   height: number;
 }
 export interface IVideo {
+  /**
+   * @description 封面图片地址
+   * @descriptionEn Poster Image URL
+   * @default ''
+   */
   poster?: string;
+  /**
+   * @description 视频地址
+   * @descriptionEn Video URL
+   * @default ''
+   */
   src: string;
+  /**
+   * @description 视频宽度（比例值）
+   * @descriptionEn Video Width (Ratio Value)
+   * @default 0
+   */
   width: number;
+  /**
+   * @description 视频高度（比例值）
+   * @descriptionEn Video Height (Ratio Value)
+   * @default 0
+   */
   height: number;
 }
 export interface IAudio {
+  /**
+   * @description 音频地址
+   * @descriptionEn Audio URL
+   * @default ''
+   */
   src: string;
 } 

package/lib/AssetsPreview/Audio.js

@@ -92,13 +92,11 @@ export default function Audio(props) {
     }), /*#__PURE__*/_jsxs("div", {
       className: prefixCls,
       children: [/*#__PURE__*/_jsx(IconButton, {
-        shape: "circle",
         size: "small",
         type: "text",
         onClick: togglePlay,
         icon: isPlaying ? /*#__PURE__*/_jsx(SparkPauseFill, {}) : /*#__PURE__*/_jsx(SparkPlayFill, {})
       }), /*#__PURE__*/_jsx(IconButton, {
-        shape: "circle",
         size: "small",
         type: "text",
         onClick: toggleMuted,

package/lib/AssetsPreview/Image.d.ts

@@ -1,2 +1,6 @@
+/// <reference types="react" />
 import { IImage } from "./types";
 export default function (props: IImage): import("react/jsx-runtime").JSX.Element;
+export declare function ImagesContainer(props: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/AssetsPreview/Image.js

@@ -21,4 +21,9 @@ export default function (props) {
       })
     })
   });
+}
+export function ImagesContainer(props) {
+  return /*#__PURE__*/_jsx(Image.PreviewGroup, {
+    children: props.children
+  });
 }

package/lib/AssetsPreview/Video.js

@@ -15,7 +15,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { useProviderContext } from "..";
 import { useRef, useState, useCallback } from "react";
-import { SparkPlayFill } from "@agentscope-ai/icons";
+import { SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
+import cls from "classnames";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Video(props) {
@@ -34,6 +35,10 @@ export default function Video(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     duration = _useState4[0],
     setDuration = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentTime = _useState6[0],
+    setCurrentTime = _useState6[1];
   var formatTime = useCallback(function (seconds) {
     var mins = Math.floor(seconds / 60);
     var secs = Math.floor(seconds % 60);
@@ -57,6 +62,12 @@ export default function Video(props) {
   }, []);
   var handleEnded = useCallback(function () {
     setIsPlaying(false);
+    setCurrentTime(0);
+  }, []);
+  var handleTimeUpdate = useCallback(function () {
+    if (videoRef.current) {
+      setCurrentTime(videoRef.current.currentTime);
+    }
   }, []);
   return /*#__PURE__*/_jsxs("div", {
     className: prefixCls,
@@ -69,20 +80,18 @@ export default function Video(props) {
       poster: poster,
       preload: "metadata",
       onLoadedMetadata: handleLoadedMetadata,
+      onTimeUpdate: handleTimeUpdate,
       onEnded: handleEnded
-    })), !isPlaying && /*#__PURE__*/_jsxs("div", {
-      className: "".concat(prefixCls, "-overlay"),
-      onClick: handlePlayPause,
+    })), /*#__PURE__*/_jsxs("div", {
+      className: cls("".concat(prefixCls, "-overlay"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-overlay-playing"), isPlaying), "".concat(prefixCls, "-overlay-paused"), !isPlaying)),
+      onClick: isPlaying ? handlePlayPause : handlePlayPause,
       children: [/*#__PURE__*/_jsx("div", {
         className: "".concat(prefixCls, "-play-btn"),
-        children: /*#__PURE__*/_jsx(SparkPlayFill, {})
-      }), /*#__PURE__*/_jsx("div", {
+        children: isPlaying ? /*#__PURE__*/_jsx(SparkPauseFill, {}) : /*#__PURE__*/_jsx(SparkPlayFill, {})
+      }), /*#__PURE__*/_jsxs("div", {
         className: "".concat(prefixCls, "-duration"),
-        children: formatTime(duration)
+        children: [formatTime(currentTime), "/", formatTime(duration)]
       })]
-    }), isPlaying && /*#__PURE__*/_jsx("div", {
-      className: "".concat(prefixCls, "-playing-overlay"),
-      onClick: handlePlayPause
     })]
   });
 }

package/lib/AssetsPreview/index.d.ts

@@ -1,11 +1,36 @@
 import { IImage, IVideo, IAudio } from './types';
 export interface IAssetsPreviewProps {
+    /**
+     * @description 类名
+     * @descriptionEn Class Name
+     * @default ''
+     */
     className?: string;
+    /**
+     * @description 语义化类名
+     * @descriptionEn Semantic Class Name
+     * @default {}
+     */
     classNames?: {
         container?: string;
     };
+    /**
+     * @description 高度
+     * @descriptionEn Height
+     * @default 144
+     */
     height?: number;
+    /**
+     * @description 类型
+     * @descriptionEn Type
+     * @default 'image'
+     */
     type: 'image' | 'video' | 'audio';
+    /**
+     * @description 数据
+     * @descriptionEn Data
+     * @default []
+     */
     data: (IImage | IVideo | IAudio)[];
 }
 declare function AssetsPreview(props: IAssetsPreviewProps): import("react/jsx-runtime").JSX.Element;

package/lib/AssetsPreview/index.js

@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useProviderContext } from "../Provider";
 import Style from "./style";
 import cls from 'classnames';
-import Image from "./Image";
+import Image, { ImagesContainer } from "./Image";
 import Video from "./Video";
 import Audio from "./Audio";
 import { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
@@ -23,6 +23,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function AssetsPreview(props) {
+  var _props$classNames;
   var prefixCls = useProviderContext().getPrefixCls('assets-preview');
   var ref = useRef(null);
   var _props$height = props.height,
@@ -49,7 +50,7 @@ function AssetsPreview(props) {
     }
   }, []);
   var toArrow = useCallback(function (direct) {
-    var width = 100;
+    var width = 200;
     ref.current.scrollLeft = ref.current.scrollLeft + width * (direct === 'left' ? -1 : 1);
   }, []);
   var Component = {
@@ -57,11 +58,14 @@ function AssetsPreview(props) {
     video: Video,
     audio: Audio
   }[props.type];
+  var list = props.data.map(function (item, index) {
+    return /*#__PURE__*/_jsx(Component, _objectSpread({}, item), index);
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
       className: cls("".concat(prefixCls), props.className),
       children: [/*#__PURE__*/_jsx("div", {
-        className: cls("".concat(prefixCls, "-container"), props.className),
+        className: cls("".concat(prefixCls, "-container"), (_props$classNames = props.classNames) === null || _props$classNames === void 0 ? void 0 : _props$classNames.container),
         style: props.type !== 'audio' ? {
           height: height
         } : {
@@ -69,9 +73,9 @@ function AssetsPreview(props) {
         },
         onScroll: onScroll,
         ref: ref,
-        children: props.data.map(function (item, index) {
-          return /*#__PURE__*/_jsx(Component, _objectSpread({}, item), index);
-        })
+        children: props.type === 'image' ? /*#__PURE__*/_jsx(ImagesContainer, {
+          children: list
+        }) : list
       }), arrowTop && props.type !== 'audio' ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [deferScrollLeft > 50 && /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("div", {

package/lib/AssetsPreview/style.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.", "-assets-preview {\n  position: relative;\n\n  &-left-edge,\n  &-right-edge {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 128px;\n    pointer-events: none;\n  }\n\n  &-left-edge {\n    left: 0;\n    background: linear-gradient(to right, ", ", rgba(0, 0, 0, 0));\n  }\n\n  &-right-edge {\n    right: 0;\n    background: linear-gradient(to left, ", ", rgba(0, 0, 0, 0));\n  }\n\n  &-arrow {\n    position: absolute;\n    bottom: 0;\n  }\n\n  &-left-arrow {\n    left: 10px;\n  }\n\n  &-right-arrow {\n    right: 10px;\n  }\n\n  &-container {\n    display: flex;\n    padding: 8px;\n    gap: 8px;\n    overflow-x: auto;\n    justify-content: safe center;\n    background-color: ", ";\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE/Edge */\n    &::-webkit-scrollbar {\n      display: none; /* Chrome/Safari/Opera */\n    }\n  }\n\n\n  &-image {\n    height: 100%;\n    flex-basis: auto;\n    flex-shrink: 0;\n    border-radius: 8px;\n    overflow: hidden;\n    background-size: cover;\n    background-position: center;\n    background-repeat: no-repeat;\n  }\n\n  &-video {\n    height: 100%;\n    flex-basis: auto;\n    flex-shrink: 0;\n    border-radius: 8px;\n    overflow: hidden;\n    position: relative;\n    cursor: pointer;\n\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    &-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      border-radius: 4px;\n      background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n    }\n\n    &-play-btn {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #fff;\n      transition: transform 0.2s ease;\n      font-size: 40px;\n      \n\n      &:hover {\n        transform: scale(1.1);\n      }\n    }\n\n    &-duration {\n      position: absolute;\n      bottom: 8px;\n      left: 50%;\n      transform: translateX(-50%);\n      font-size: 14px;\n      font-weight: 500;\n      color: #fff;\n      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n    }\n\n    &-playing-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n  }\n    \n  &-audio {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background-color: ", ";\n    border-radius: 8px;\n    border: 1px solid ", ";\n    height: 40px;\n    padding: 0 8px;\n\n    &-time {\n      font-size: 12px;\n      color: ", ";\n      line-height: 1;\n    }\n\n    &-progress {\n      flex: 1;\n      height: 8px;\n      background-color: ", ";\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n\n      &-bar {\n        height: 100%;\n        background-color: ", ";\n        border-radius: 4px;\n        transition: width 0.1s linear;\n      }\n    }\n  }\n}\n"])), function (p) {
+export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-assets-preview {\n  position: relative;\n\n  &-left-edge,\n  &-right-edge {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 128px;\n    pointer-events: none;\n  }\n\n  &-left-edge {\n    left: 0;\n    background: linear-gradient(to right, ", ", rgba(0, 0, 0, 0));\n  }\n\n  &-right-edge {\n    right: 0;\n    background: linear-gradient(to left, ", ", rgba(0, 0, 0, 0));\n  }\n\n  &-arrow {\n    position: absolute;\n    bottom: 0;\n  }\n\n  &-left-arrow {\n    left: 10px;\n  }\n\n  &-right-arrow {\n    right: 10px;\n  }\n\n  &-container {\n    display: flex;\n    padding: 8px;\n    gap: 8px;\n    overflow-x: auto;\n    justify-content: safe center;\n    background-color: ", ";\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE/Edge */\n    &::-webkit-scrollbar {\n      display: none; /* Chrome/Safari/Opera */\n    }\n  }\n\n\n  &-image {\n    height: 100%;\n    flex-basis: auto;\n    flex-shrink: 0;\n    border-radius: 8px;\n    overflow: hidden;\n    background-size: cover;\n    background-position: center;\n    background-repeat: no-repeat;\n\n    .anticon-eye {\n      font-size: 20px;\n      margin: 0 !important;\n    }\n  }\n\n  &-video {\n    height: 100%;\n    flex-basis: auto;\n    flex-shrink: 0;\n    border-radius: 8px;\n    overflow: hidden;\n    position: relative;\n    cursor: pointer;\n\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    &-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      border-radius: 4px;\n\n      &-playing {\n        opacity: 0;\n        &:hover {\n          opacity: 1;\n          background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n        }\n      }\n\n      &-paused {\n        background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n      }\n    }\n\n    &-play-btn {\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #fff;\n      transition: transform 0.2s ease;\n      font-size: 40px;\n      \n\n      &:hover {\n        transform: scale(1.1);\n      }\n    }\n\n    &-duration {\n      position: absolute;\n      bottom: 8px;\n      left: 50%;\n      transform: translateX(-50%);\n      font-size: 14px;\n      font-weight: 500;\n      color: #fff;\n      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n    }\n\n    &-playing-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n    \n  }\n    \n  &-audio {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background-color: ", ";\n    border-radius: 8px;\n    border: 1px solid ", ";\n    height: 40px;\n    padding: 0 8px;\n\n    &-time {\n      font-size: 12px;\n      color: ", ";\n      line-height: 1;\n    }\n\n    &-progress {\n      flex: 1;\n      height: 8px;\n      background-color: ", ";\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n      overflow: hidden;\n\n      &-bar {\n        height: 100%;\n        background-color: ", ";\n        border-radius: 4px;\n        transition: width 0.1s linear;\n      }\n    }\n  }\n}\n"])), function (p) {
   return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorBgLayout;

package/lib/AssetsPreview/types.d.ts

@@ -1,14 +1,54 @@
 export interface IImage {
+    /**
+     * @description 图片地址
+     * @descriptionEn Image URL
+     * @default ''
+     */
     src: string;
+    /**
+     * @description 图片宽度（比例值）
+     * @descriptionEn Image Width (Ratio Value)
+     * @default 0
+     */
     width: number;
+    /**
+     * @description 图片高度（比例值）
+     * @descriptionEn Image Height (Ratio Value)
+     * @default 0
+     */
     height: number;
 }
 export interface IVideo {
+    /**
+     * @description 封面图片地址
+     * @descriptionEn Poster Image URL
+     * @default ''
+     */
     poster?: string;
+    /**
+     * @description 视频地址
+     * @descriptionEn Video URL
+     * @default ''
+     */
     src: string;
+    /**
+     * @description 视频宽度（比例值）
+     * @descriptionEn Video Width (Ratio Value)
+     * @default 0
+     */
     width: number;
+    /**
+     * @description 视频高度（比例值）
+     * @descriptionEn Video Height (Ratio Value)
+     * @default 0
+     */
     height: number;
 }
 export interface IAudio {
+    /**
+     * @description 音频地址
+     * @descriptionEn Audio URL
+     * @default ''
+     */
     src: string;
 }

package/package.json

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

package/components/AssetsPreview/demo/index.tsx

@@ -1,50 +0,0 @@
-import { AssetsPreview } from '@agentscope-ai/chat';
-import { Flex, Space } from 'antd';
-import React from 'react';
-
-export default function () {
-  return <Flex vertical gap={32}>
-    <AssetsPreview type="audio" data={[
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
-
-    ]} />
-
-
-    <AssetsPreview type="image" data={[
-      { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
-    ]} />
-
-
-    <AssetsPreview type="image" data={[
-      { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
-      { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
-      { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
-      { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
-      { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
-      { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
-      { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
-      { src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
-    ]} />
-
-    <AssetsPreview type="video" data={[
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
-    ]} />
-
-    <AssetsPreview type="video" data={[
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
-    ]} />
-
-    <AssetsPreview type="audio" data={[
-      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
-    ]} />
-
-
-  </Flex>
-}