@agentscope-ai/chat 1.1.46-beta.1767852895377 → 1.1.46-beta.1767871771878

package/components/AgentScopeRuntimeWebUI/core/Layout/index.tsx

@@ -20,12 +20,12 @@ function Layout(props: IProps, ref: React.Ref<any>) {
   const { className } = props;
   const prefixCls = useProviderContext().getPrefixCls('chat-anywhere-layout');
   const narrowMode = useChatAnywhereOptions(v => v.theme.narrowMode);
+  const background = useChatAnywhereOptions(v => v.theme.background);
   const rightHeader = useChatAnywhereOptions(v => v.theme.rightHeader);
   const { session } = useChatAnywhereOptions(v => ({ session: v.session }));
   const { collapsed } = useContext(ChatAnyWhereLayoutContext);
   const showLeft = !narrowMode && session && session.multiple;
 
-
   return <>
     <Style />
     <div className={cls(`${prefixCls}`, className)}>
@@ -38,11 +38,12 @@ function Layout(props: IProps, ref: React.Ref<any>) {
       }
       <div className={cls(`${prefixCls}-right`, {
         [`${prefixCls}-right-has-header`]: !!rightHeader,
-      })}>
+      })} style={{
+        background: background,
+      }}>
         {
           !!rightHeader && <Header />
         }
-        
         <Chat />
       </div>
     </div>

package/components/AgentScopeRuntimeWebUI/core/types/IChatAnywhere.ts

@@ -77,6 +77,12 @@ export interface IAgentScopeRuntimeWebUIThemeOptions {
    * @descriptionEn Typography configuration
    */
   typography?: IAgentScopeRuntimeWebUITypography;
+
+  /**
+   * @description 背景色
+   * @descriptionEn Background color
+   */
+  background?: string;
 }
 
 export interface IAgentScopeRuntimeWebUITypography {

package/components/AssetsPreview/Audio.tsx

@@ -0,0 +1,9 @@
+import { IAudio } from "./types";
+import { useProviderContext } from "..";
+
+
+export default function Audio(props: IAudio) {
+  const prefixCls = useProviderContext().getPrefixCls('assets-preview-audio');
+
+  return <audio src={props.src} controls className={prefixCls} />;
+}

package/components/AssetsPreview/Image.tsx

@@ -0,0 +1,19 @@
+import { useProviderContext } from "..";
+import { IImage } from "./types";
+import { Image, ConfigProvider } from 'antd';
+import { Locale } from "antd/es/locale";
+
+
+export default function (props: IImage) {
+  const prefixCls = useProviderContext().getPrefixCls('assets-preview-image');
+
+  return <div className={prefixCls} style={{
+    aspectRatio: `${props.width}/${props.height}`,
+  }}>
+    <ConfigProvider
+      locale={{
+        Image: { preview: '' }
+      } as Locale}
+    ><Image src={props.src} width={"100%"} height={"100%"} /></ConfigProvider>
+  </div>;
+}

package/components/AssetsPreview/Video.tsx

@@ -0,0 +1,13 @@
+import { IVideo } from "./types";
+import { useProviderContext } from "..";
+
+export default function Video(props: IVideo) {
+  const prefixCls = useProviderContext().getPrefixCls('assets-preview-video');
+  const { width, height, ...rest } = props;
+
+  return <div className={prefixCls} style={{
+    aspectRatio: `${width}/${height}`,
+  }}>
+    <video {...rest} controls />
+  </div>
+}

package/components/AssetsPreview/demo/index.tsx

@@ -0,0 +1,49 @@
+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="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 },
+
+    ]} />
+
+    <AssetsPreview type="audio" data={[
+      { src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
+
+    ]} />
+
+    <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', },
+
+    ]} />
+  </Flex>
+}

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

@@ -7,3 +7,6 @@ description: ???
 ---
 
 <DemoTitle title="???" desc="???"></DemoTitle>
+
+
+<code src="./demo/index.tsx"></code>

package/components/AssetsPreview/index.tsx

@@ -1,11 +1,110 @@
 import { useProviderContext } from '../Provider';
 import Style from './style';
+import cls from 'classnames';
+import { IImage, IVideo, IAudio } from './types';
+import Image from './Image';
+import Video from './Video';
+import Audio from './Audio';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { SparkLeftLine, SparkRightLine } from '@agentscope-ai/icons';
+import { IconButton } from '@agentscope-ai/design';
 
+export interface IAssetsPreviewProps {
+  className?: string;
+  classNames?: {
+    container?: string;
+  };
+  height?: number;
+  type: 'image' | 'video' | 'audio';
+  data: (IImage | IVideo | IAudio)[];
+}
 
-export default function () {
+function AssetsPreview(props: IAssetsPreviewProps) {
   const prefixCls = useProviderContext().getPrefixCls('assets-preview');
+  const Component = {
+    image: Image,
+    video: Video,
+    audio: Audio,
+  }[props.type];
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => { }, [props.data.length])
+  const { height = 144 } = props;
+  const [arrowTop, setArrowTop] = useState<number>(0);
+  const [arrowShow, setArrowShow] = useState<'left' | 'right' | ''>('');
+  const maxWidth = useRef<number>(0);
+
+
+  const onScroll = useCallback((e) => {
+
+    if (e.target.scrollLeft > 0) {
+      setArrowShow('right');
+    }
+
+    if (e.target.scrollLeft >= maxWidth.current) {
+      setArrowShow('left')
+    }
+  }, [])
+
+
+  useEffect(() => {
+    setArrowTop(height / 2 - 12 - 6);
+  }, [height])
+
+
+  useEffect(() => {
+    if (ref.current && props.type !== 'audio') {
+      maxWidth.current = ref.current.scrollWidth - ref.current.clientWidth;
+      if (maxWidth.current > 0) {
+        setArrowShow('right');
+      } else {
+      }
+    }
+  }, [])
+
+
+  const toArrow = useCallback((direct: 'left' | 'right') => {
+    const width = ref.current.scrollWidth / props.data.length;
+    ref.current.scrollLeft = ref.current.scrollLeft + width * (direct === 'left' ? -1 : 1)
+  }, [props.data])
+
+
   return <>
     <Style />
-    <div className={prefixCls}>...</div>
+    <div className={cls(`${prefixCls}`, props.className)}>
+      <div className={cls(`${prefixCls}-container`, props.className)} style={props.type !== 'audio' ? { height } : {
+        flexDirection: 'column'
+      }} onScroll={onScroll} ref={ref}>
+        {
+          props.data.map((item, index) => {
+            return <Component key={index} {...item as any} />;
+          })
+        }
+      </div>
+
+
+      {
+        arrowTop && props.type !== 'audio' ? <>
+          {
+            arrowShow === 'left' && <>
+              <div className={cls(`${prefixCls}-left-edge`)} />
+              <IconButton onClick={() => toArrow('left')} style={{ top: arrowTop }} className={cls(`${prefixCls}-left-arrow`, `${prefixCls}-arrow`)} size="small" shape='circle' icon={<SparkLeftLine />}></IconButton>
+            </>
+          }
+
+          {
+            arrowShow === 'right' && <>
+              <div className={cls(`${prefixCls}-right-edge`)} />
+              <IconButton onClick={() => toArrow('right')} style={{ top: arrowTop }} className={cls(`${prefixCls}-right-arrow`, `${prefixCls}-arrow`)} size="small" shape='circle' icon={<SparkRightLine />}></IconButton>
+            </>
+          }
+
+        </> : null
+      }
+
+    </div>
   </>
-}
+}
+
+
+export default AssetsPreview;

package/components/AssetsPreview/style.ts

@@ -1,6 +1,80 @@
 import { createGlobalStyle } from 'antd-style';
 
 export default createGlobalStyle`
-.${(p) => p.theme.prefixCls}- {
+.${(p) => p.theme.prefixCls}-assets-preview {
+  position: relative;
+
+  &-left-edge,
+  &-right-edge {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 128px;
+    pointer-events: none;
+  }
+
+  &-left-edge {
+    left: 0;
+  }
+
+  &-right-edge {
+    right: 0;
+  }
+
+  &-arrow {
+    position: absolute;
+    bottom: 0;
+  }
+
+  &-left-arrow {
+    left: 10px;
+  }
+
+  &-right-arrow {
+    right: 10px;
+  }
+
+  &-container {
+    display: flex;
+    padding: 8px;
+    gap: 8px;
+    overflow-x: auto;
+    justify-content: safe center;
+    background-color: ${(p) => p.theme.colorFillTertiary};
+  }
+
+
+  &-image {
+    height: 100%;
+    flex-basis: auto;
+    flex-shrink: 0;
+    border-radius: 8px;
+    overflow: hidden;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  &-video {
+    height: 100%;
+    flex-basis: auto;
+    flex-shrink: 0;
+    border-radius: 8px;
+    overflow: hidden;
+
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+
+  }
+
+  
+  &-audio {
+    display: block;
+    width: 100%;
+  }
 }
 `;

package/components/AssetsPreview/types.tsx

@@ -0,0 +1,14 @@
+export interface IImage {
+  src: string;
+  width: number;
+  height: number;
+}
+export interface IVideo {
+  poster?: string;
+  src: string;
+  width: number;
+  height: number;
+}
+export interface IAudio {
+  src: string;
+} 

package/components/index.ts

@@ -2,7 +2,6 @@ export { ConfigProvider } from 'antd';
 
 export { default as version } from './Version';
 
-
 export {
   CustomCardsContext,
   CustomCardsProvider,
@@ -87,4 +86,8 @@ export {
 
 export { default as AIGC } from './AIGC';
 
-export { Sandbox as GenerativeUISandbox } from './GenerativeUI';
+export {
+  default as AssetsPreview,
+  type IAssetsPreviewProps,
+} from './AssetsPreview';
+export { Sandbox as GenerativeUISandbox } from './GenerativeUI';

package/lib/AgentScopeRuntimeWebUI/core/Layout/index.js

@@ -22,6 +22,9 @@ function Layout(props, ref) {
   var narrowMode = useChatAnywhereOptions(function (v) {
     return v.theme.narrowMode;
   });
+  var background = useChatAnywhereOptions(function (v) {
+    return v.theme.background;
+  });
   var rightHeader = useChatAnywhereOptions(function (v) {
     return v.theme.rightHeader;
   });
@@ -42,6 +45,9 @@ function Layout(props, ref) {
         children: /*#__PURE__*/_jsx(Sessions, {})
       }), /*#__PURE__*/_jsxs("div", {
         className: cls("".concat(prefixCls, "-right"), _defineProperty({}, "".concat(prefixCls, "-right-has-header"), !!rightHeader)),
+        style: {
+          background: background
+        },
         children: [!!rightHeader && /*#__PURE__*/_jsx(Header, {}), /*#__PURE__*/_jsx(Chat, {})]
       })]
     }), /*#__PURE__*/_jsx(Ref, {

package/lib/AgentScopeRuntimeWebUI/core/types/IChatAnywhere.d.ts

@@ -79,6 +79,11 @@ export interface IAgentScopeRuntimeWebUIThemeOptions {
      * @descriptionEn Typography configuration
      */
     typography?: IAgentScopeRuntimeWebUITypography;
+    /**
+     * @description 背景色
+     * @descriptionEn Background color
+     */
+    background?: string;
 }
 export interface IAgentScopeRuntimeWebUITypography {
     /**

package/lib/AssetsPreview/Audio.d.ts

@@ -0,0 +1,2 @@
+import { IAudio } from "./types";
+export default function Audio(props: IAudio): import("react/jsx-runtime").JSX.Element;

package/lib/AssetsPreview/Audio.js

@@ -0,0 +1,10 @@
+import { useProviderContext } from "..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Audio(props) {
+  var prefixCls = useProviderContext().getPrefixCls('assets-preview-audio');
+  return /*#__PURE__*/_jsx("audio", {
+    src: props.src,
+    controls: true,
+    className: prefixCls
+  });
+}

package/lib/AssetsPreview/Image.d.ts

@@ -0,0 +1,2 @@
+import { IImage } from "./types";
+export default function (props: IImage): import("react/jsx-runtime").JSX.Element;

package/lib/AssetsPreview/Image.js

@@ -0,0 +1,24 @@
+import { useProviderContext } from "..";
+import { Image, ConfigProvider } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function (props) {
+  var prefixCls = useProviderContext().getPrefixCls('assets-preview-image');
+  return /*#__PURE__*/_jsx("div", {
+    className: prefixCls,
+    style: {
+      aspectRatio: "".concat(props.width, "/").concat(props.height)
+    },
+    children: /*#__PURE__*/_jsx(ConfigProvider, {
+      locale: {
+        Image: {
+          preview: ''
+        }
+      },
+      children: /*#__PURE__*/_jsx(Image, {
+        src: props.src,
+        width: "100%",
+        height: "100%"
+      })
+    })
+  });
+}

package/lib/AssetsPreview/Video.d.ts

@@ -0,0 +1,2 @@
+import { IVideo } from "./types";
+export default function Video(props: IVideo): import("react/jsx-runtime").JSX.Element;

package/lib/AssetsPreview/Video.js

@@ -0,0 +1,26 @@
+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 = ["width", "height"];
+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; }
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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 { jsx as _jsx } from "react/jsx-runtime";
+export default function Video(props) {
+  var prefixCls = useProviderContext().getPrefixCls('assets-preview-video');
+  var width = props.width,
+    height = props.height,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsx("div", {
+    className: prefixCls,
+    style: {
+      aspectRatio: "".concat(width, "/").concat(height)
+    },
+    children: /*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({}, rest), {}, {
+      controls: true
+    }))
+  });
+}

package/lib/AssetsPreview/index.d.ts

@@ -1 +1,12 @@
-export default function (): import("react/jsx-runtime").JSX.Element;
+import { IImage, IVideo, IAudio } from './types';
+export interface IAssetsPreviewProps {
+    className?: string;
+    classNames?: {
+        container?: string;
+    };
+    height?: number;
+    type: 'image' | 'video' | 'audio';
+    data: (IImage | IVideo | IAudio)[];
+}
+declare function AssetsPreview(props: IAssetsPreviewProps): import("react/jsx-runtime").JSX.Element;
+export default AssetsPreview;

package/lib/AssetsPreview/index.js

@@ -1,14 +1,119 @@
+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 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; }
+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 { useProviderContext } from "../Provider";
 import Style from "./style";
+import cls from 'classnames';
+import Image from "./Image";
+import Video from "./Video";
+import Audio from "./Audio";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { SparkLeftLine, SparkRightLine } from '@agentscope-ai/icons';
+import { IconButton } from '@agentscope-ai/design';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function () {
+function AssetsPreview(props) {
   var prefixCls = useProviderContext().getPrefixCls('assets-preview');
+  var Component = {
+    image: Image,
+    video: Video,
+    audio: Audio
+  }[props.type];
+  var ref = useRef(null);
+  useEffect(function () {}, [props.data.length]);
+  var _props$height = props.height,
+    height = _props$height === void 0 ? 144 : _props$height;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    arrowTop = _useState2[0],
+    setArrowTop = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    arrowShow = _useState4[0],
+    setArrowShow = _useState4[1];
+  var maxWidth = useRef(0);
+  var onScroll = useCallback(function (e) {
+    if (e.target.scrollLeft > 0) {
+      setArrowShow('right');
+    }
+    if (e.target.scrollLeft >= maxWidth.current) {
+      setArrowShow('left');
+    }
+  }, []);
+  useEffect(function () {
+    setArrowTop(height / 2 - 12 - 6);
+  }, [height]);
+  useEffect(function () {
+    if (ref.current && props.type !== 'audio') {
+      maxWidth.current = ref.current.scrollWidth - ref.current.clientWidth;
+      if (maxWidth.current > 0) {
+        setArrowShow('right');
+      } else {}
+    }
+  }, []);
+  var toArrow = useCallback(function (direct) {
+    var width = ref.current.scrollWidth / props.data.length;
+    ref.current.scrollLeft = ref.current.scrollLeft + width * (direct === 'left' ? -1 : 1);
+  }, [props.data]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx("div", {
-      className: prefixCls,
-      children: "..."
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
+      className: cls("".concat(prefixCls), props.className),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: cls("".concat(prefixCls, "-container"), props.className),
+        style: props.type !== 'audio' ? {
+          height: height
+        } : {
+          flexDirection: 'column'
+        },
+        onScroll: onScroll,
+        ref: ref,
+        children: props.data.map(function (item, index) {
+          return /*#__PURE__*/_jsx(Component, _objectSpread({}, item), index);
+        })
+      }), arrowTop && props.type !== 'audio' ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [arrowShow === 'left' && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("div", {
+            className: cls("".concat(prefixCls, "-left-edge"))
+          }), /*#__PURE__*/_jsx(IconButton, {
+            onClick: function onClick() {
+              return toArrow('left');
+            },
+            style: {
+              top: arrowTop
+            },
+            className: cls("".concat(prefixCls, "-left-arrow"), "".concat(prefixCls, "-arrow")),
+            size: "small",
+            shape: "circle",
+            icon: /*#__PURE__*/_jsx(SparkLeftLine, {})
+          })]
+        }), arrowShow === 'right' && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("div", {
+            className: cls("".concat(prefixCls, "-right-edge"))
+          }), /*#__PURE__*/_jsx(IconButton, {
+            onClick: function onClick() {
+              return toArrow('right');
+            },
+            style: {
+              top: arrowTop
+            },
+            className: cls("".concat(prefixCls, "-right-arrow"), "".concat(prefixCls, "-arrow")),
+            size: "small",
+            shape: "circle",
+            icon: /*#__PURE__*/_jsx(SparkRightLine, {})
+          })]
+        })]
+      }) : null]
     })]
   });
-}
+}
+export default AssetsPreview;

package/lib/AssetsPreview/style.js

@@ -1,6 +1,8 @@
 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.", "- {\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  }\n\n  &-right-edge {\n    right: 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  }\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\n    video {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n\n  }\n\n  \n  &-audio {\n    display: block;\n    width: 100%;\n  }\n}\n"])), function (p) {
   return p.theme.prefixCls;
+}, function (p) {
+  return p.theme.colorFillTertiary;
 });

package/lib/AssetsPreview/types.d.ts

@@ -0,0 +1,14 @@
+export interface IImage {
+    src: string;
+    width: number;
+    height: number;
+}
+export interface IVideo {
+    poster?: string;
+    src: string;
+    width: number;
+    height: number;
+}
+export interface IAudio {
+    src: string;
+}

package/lib/AssetsPreview/types.js

@@ -0,0 +1 @@
+export {};

package/lib/index.d.ts

@@ -26,4 +26,5 @@ export { default as sleep } from './Util/sleep';
 export { default as Welcome, type IWelcomeProps } from './Welcome';
 export { default as Markdown, type MarkdownProps as IMarkdownProps, type MarkdownProps, } from './Markdown';
 export { default as AIGC } from './AIGC';
+export { default as AssetsPreview, type IAssetsPreviewProps, } from './AssetsPreview';
 export { Sandbox as GenerativeUISandbox } from './GenerativeUI';

package/lib/index.js

@@ -25,4 +25,5 @@ export { default as sleep } from "./Util/sleep";
 export { default as Welcome } from "./Welcome";
 export { default as Markdown } from "./Markdown";
 export { default as AIGC } from "./AIGC";
+export { default as AssetsPreview } from "./AssetsPreview";
 export { Sandbox as GenerativeUISandbox } from "./GenerativeUI";

package/package.json

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