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

package/components/AssetsPreview/Audio.tsx

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

package/components/AssetsPreview/Video.tsx

@@ -1,5 +1,13 @@
 import { IVideo } from "./types";
+import { useProviderContext } from "..";
 
 export default function Video(props: IVideo) {
-  return <div>Video</div>;
+  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

@@ -1,15 +1,49 @@
 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 },
-  ]} />
+  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.tsx

@@ -8,7 +8,6 @@ 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 { useDebounce } from 'ahooks';
 
 export interface IAssetsPreviewProps {
   className?: string;
@@ -27,33 +26,82 @@ function AssetsPreview(props: IAssetsPreviewProps) {
     video: Video,
     audio: Audio,
   }[props.type];
-  const ref = useRef();
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => { }, [props.data.length])
   const { height = 144 } = props;
-  const [value, setValue] = useState<string>();
-  const debouncedValue = useDebounce(value, { wait: 500 });
+  const [arrowTop, setArrowTop] = useState<number>(0);
+  const [arrowShow, setArrowShow] = useState<'left' | 'right' | ''>('');
+  const maxWidth = useRef<number>(0);
 
 
   const onScroll = useCallback((e) => {
-    console.log(e.target.scrollLeft, e.target.scrollWidth - e.target.clientWidth);
+
+    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={cls(`${prefixCls}`, props.className)}>
-      <div className={cls(`${prefixCls}-container`, props.className)} style={{ height }} onScroll={onScroll}>
+      <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>
-      <div className={cls(`${prefixCls}-left-edge`)} />
-      <div className={cls(`${prefixCls}-right-edge`)} />
-      <IconButton className={cls(`${prefixCls}-left-arrow`, `${prefixCls}-arrow`)} size="small" shape='circle' icon={<SparkLeftLine />}></IconButton>
-      <IconButton className={cls(`${prefixCls}-right-arrow`, `${prefixCls}-arrow`)} size="small" shape='circle' icon={<SparkRightLine />}></IconButton>
+
+
+      {
+        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>
   </>
 }

package/components/AssetsPreview/style.ts

@@ -23,8 +23,6 @@ export default createGlobalStyle`
 
   &-arrow {
     position: absolute;
-    top: 50%;
-    transform: translateY(-65%);
     bottom: 0;
   }
 
@@ -56,5 +54,27 @@ export default createGlobalStyle`
     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/lib/AssetsPreview/Audio.js

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

package/lib/AssetsPreview/Video.js

@@ -1,6 +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", {
-    children: "Video"
+    className: prefixCls,
+    style: {
+      aspectRatio: "".concat(width, "/").concat(height)
+    },
+    children: /*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({}, rest), {}, {
+      controls: true
+    }))
   });
 }

package/lib/AssetsPreview/index.js

@@ -19,10 +19,9 @@ 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 { useDebounce } from 'ahooks';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function AssetsPreview(props) {
   var prefixCls = useProviderContext().getPrefixCls('assets-preview');
   var Component = {
@@ -30,47 +29,90 @@ function AssetsPreview(props) {
     video: Video,
     audio: Audio
   }[props.type];
-  var ref = useRef();
+  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(),
+  var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var debouncedValue = useDebounce(value, {
-    wait: 500
-  });
+    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) {
-    console.log(e.target.scrollLeft, e.target.scrollWidth - e.target.clientWidth);
+    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__*/_jsxs("div", {
       className: cls("".concat(prefixCls), props.className),
       children: [/*#__PURE__*/_jsx("div", {
         className: cls("".concat(prefixCls, "-container"), props.className),
-        style: {
+        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);
         })
-      }), /*#__PURE__*/_jsx("div", {
-        className: cls("".concat(prefixCls, "-left-edge"))
-      }), /*#__PURE__*/_jsx("div", {
-        className: cls("".concat(prefixCls, "-right-edge"))
-      }), /*#__PURE__*/_jsx(IconButton, {
-        className: cls("".concat(prefixCls, "-left-arrow"), "".concat(prefixCls, "-arrow")),
-        size: "small",
-        shape: "circle",
-        icon: /*#__PURE__*/_jsx(SparkLeftLine, {})
-      }), /*#__PURE__*/_jsx(IconButton, {
-        className: cls("".concat(prefixCls, "-right-arrow"), "".concat(prefixCls, "-arrow")),
-        size: "small",
-        shape: "circle",
-        icon: /*#__PURE__*/_jsx(SparkRightLine, {})
-      })]
+      }), 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]
     })]
   });
 }

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  }\n\n  &-right-edge {\n    right: 0;\n  }\n\n  &-arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-65%);\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"])), 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentscope-ai/chat",
-  "version": "1.1.46-beta.1767868158421",
+  "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": [