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

package/components/Accordion/style.ts

@@ -12,13 +12,11 @@ export default createGlobalStyle`
   .anticon-spin {
     animation-duration: 2s;
   }
+
   &-icon-success {
     color: ${(p) => p.theme.colorSuccess};
   }
 
-  
-
-
   @keyframes ${(p) => p.theme.prefixCls}-loading {
     0% {
       transform: rotate(0deg);

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/Sessions/index.tsx

@@ -45,7 +45,9 @@ export function InnerHeader({ className }: { className?: string }) {
   return <>
     <div className={cls(`${prefixCls}-header`, className)}>
       <div className={`${prefixCls}-header-left`}>
-        <img src={logo} alt="logo" height={32} />
+        {
+          logo && <img src={logo} alt="logo" height={32} />
+        }
         <span>{title}</span>
       </div>
 
@@ -68,7 +70,7 @@ export function InnerAdder(props: { style?: React.CSSProperties; narrowMode?: bo
   const { toggleCollapsed } = useContext(ChatAnyWhereLayoutContext);
 
   return <div className={`${prefixCls}-adder`} style={props.style}>
-    <Button block type="primary" icon={<SparkPlusLine />} disabled={loading} onClick={async() => {
+    <Button block type="primary" icon={<SparkPlusLine />} disabled={loading} onClick={async () => {
       await createSession();
       if (props.narrowMode) {
         toggleCollapsed();

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

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

package/components/AssetsPreview/demo/index.tsx

@@ -0,0 +1,15 @@
+import { AssetsPreview } from '@agentscope-ai/chat';
+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/index.en-US.md

@@ -0,0 +1,12 @@
+---
+group:
+  title: Output
+  order: 3
+title: ???
+description: ???
+---
+
+<DemoTitle title="???" desc="???"></DemoTitle>
+
+
+<code src="./demo/index.tsx"></code>

package/components/AssetsPreview/index.tsx

@@ -0,0 +1,62 @@
+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';
+import { useDebounce } from 'ahooks';
+
+export interface IAssetsPreviewProps {
+  className?: string;
+  classNames?: {
+    container?: string;
+  };
+  height?: number;
+  type: 'image' | 'video' | 'audio';
+  data: (IImage | IVideo | IAudio)[];
+}
+
+function AssetsPreview(props: IAssetsPreviewProps) {
+  const prefixCls = useProviderContext().getPrefixCls('assets-preview');
+  const Component = {
+    image: Image,
+    video: Video,
+    audio: Audio,
+  }[props.type];
+  const ref = useRef();
+
+  useEffect(() => { }, [props.data.length])
+  const { height = 144 } = props;
+  const [value, setValue] = useState<string>();
+  const debouncedValue = useDebounce(value, { wait: 500 });
+
+
+  const onScroll = useCallback((e) => {
+    console.log(e.target.scrollLeft, e.target.scrollWidth - e.target.clientWidth);
+  }, [])
+
+
+  return <>
+    <Style />
+    <div className={cls(`${prefixCls}`, props.className)}>
+      <div className={cls(`${prefixCls}-container`, props.className)} style={{ height }} onScroll={onScroll}>
+        {
+          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>
+    </div>
+  </>
+}
+
+
+export default AssetsPreview;

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

@@ -0,0 +1,11 @@
+---
+
+group:
+  title: 输出
+  order: 3
+title: ???
+description: ???
+---
+
+
+<DemoTitle title="???" desc="???"></DemoTitle>

package/components/AssetsPreview/style.ts

@@ -0,0 +1,60 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(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;
+    top: 50%;
+    transform: translateY(-65%);
+    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;
+  }
+}
+`;

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/ImageGenerator/Spin.tsx

@@ -233,6 +233,7 @@ const Spin = ({
         .fluid-background-container .glass {
           overflow: hidden;
           position: absolute;
+          border-radius: 8px;
           inset: 0;
           backdrop-filter: blur(calc(var(--s) * 0.12));
           box-shadow: 0 0 calc(var(--s) * 0.2) color-mix(in srgb, black, transparent 70%);

package/components/ImageGenerator/demo/basic.tsx

@@ -8,7 +8,7 @@ export default function () {
 
   useTimeout(() => {
     setSrc('https://img.alicdn.com/imgextra/i1/O1CN01lS5S0a1yl6FKoBZHl_!!6000000006618-0-tps-1280-1280.jpg');
-  }, 10 * 1000)
+  }, 20 * 1000)
 
   return <Flex vertical gap="middle">
     <ImageGenerator

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/Accordion/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.", "-accordion-group {\n  width: 100%;\n\n  svg {\n    transform: scale(1.25);\n  }\n  \n  .anticon-spin::before,\n  .anticon-spin {\n    animation-duration: 2s;\n  }\n  &-icon-success {\n    color: ", ";\n  }\n\n  \n\n\n  @keyframes ", "-loading {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  &-icon-error {\n    color: ", ";\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    color: ", ";\n    padding: 6px 12px;\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 20px;\n    background-color: ", ";\n\n    &-arrow {\n      display: flex;\n      align-items: center;\n    }\n\n    &-close {\n      border-radius: ", "px;\n      border: 1px solid ", ";\n      display: inline-flex;\n    }\n\n    &-icon {\n      position: relative;\n      display: flex;\n      width: 16px;\n      height: 16px;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n\n      &-line {\n        &::before,\n        &::after {\n          content: '';\n          position: absolute;\n          width: 1px;\n          height: 7px;\n          background-color: ", ";\n          left: 50%;\n          transform: translateX(-50%);\n        }\n\n        &::before {\n          top: -9px;\n        }\n\n        &::after {\n          bottom: -9px;\n        }\n      }\n\n      &-last::after {\n        content: none;\n      }\n\n      &-first::before {\n        content: none;\n      }\n    }\n  }\n\n  &-open {\n    overflow: hidden;\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background-color: ", ";\n  }\n\n  &-body {\n    margin: 8px;\n    color: ", ";\n    font-size: 12px;\n    border-radius: 8px;\n    overflow: hidden;\n\n    .", "-accordion-group-header {\n      background-color: transparent;\n    }\n\n    \n\n    .", "-accordion-group-header-close,\n    .", "-accordion-group-open {\n      border: 0;\n    }\n\n    .", "-accordion-group-header-close {\n      display: flex;\n    }\n\n    &-inline {\n      padding: 8px 0;\n      margin: 0;\n      background-color: transparent;\n    }\n\n    > .", "-accordion-group {\n      background-color: ", ";\n\n      &-open {\n        border-radius: 0;\n      }\n    }\n\n    &-close {\n      height: 0;\n      padding: 0;\n      margin: 0;\n    }\n  }\n}\n\n.", "-accordion-deep-thinking {\n  font-size: 12px;\n  color: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n  line-height: 20px;\n  padding: 0 12px;\n  border-left: 1px solid ", ";\n}\n\n.", "-accordion-soft-light-title {\n  font-size: 12px;\n  position: relative;\n  display: inline-block;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  mask-image: linear-gradient(\n    270deg,\n    rgba(231, 231, 237, 0.88) 20%,\n    rgba(231, 231, 237, 0.5) 50%,\n    rgba(255, 255, 255, 0.4) 52%,\n    rgba(231, 231, 237, 0.5) 70%,\n    rgba(231, 231, 237, 0.88) 80%\n  );\n  mask-size: 200% 100%;\n  animation: softlight-text 3s linear infinite;\n}\n\n\n@keyframes softlight-text {\n  0% {\n    mask-position: 100% 0;\n  }\n\n  100% {\n    mask-position: -100% 0;\n  }\n}\n\n.", "-accordion-content-body {\n  border: 1px solid ", ";\n  border-radius: 8px;\n  overflow: hidden;\n  &-header {\n    display: flex;\n    height: 24px;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 12px;\n    border-bottom: 1px solid ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &-body {\n    background-color: ", ";\n  }\n}\n"])), function (p) {
+export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-accordion-group {\n  width: 100%;\n\n  svg {\n    transform: scale(1.25);\n  }\n  \n  .anticon-spin::before,\n  .anticon-spin {\n    animation-duration: 2s;\n  }\n\n  &-icon-success {\n    color: ", ";\n  }\n\n  @keyframes ", "-loading {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  &-icon-error {\n    color: ", ";\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    color: ", ";\n    padding: 6px 12px;\n    font-size: 12px;\n    cursor: pointer;\n    line-height: 20px;\n    background-color: ", ";\n\n    &-arrow {\n      display: flex;\n      align-items: center;\n    }\n\n    &-close {\n      border-radius: ", "px;\n      border: 1px solid ", ";\n      display: inline-flex;\n    }\n\n    &-icon {\n      position: relative;\n      display: flex;\n      width: 16px;\n      height: 16px;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n\n      &-line {\n        &::before,\n        &::after {\n          content: '';\n          position: absolute;\n          width: 1px;\n          height: 7px;\n          background-color: ", ";\n          left: 50%;\n          transform: translateX(-50%);\n        }\n\n        &::before {\n          top: -9px;\n        }\n\n        &::after {\n          bottom: -9px;\n        }\n      }\n\n      &-last::after {\n        content: none;\n      }\n\n      &-first::before {\n        content: none;\n      }\n    }\n  }\n\n  &-open {\n    overflow: hidden;\n    border-radius: 8px;\n    border: 1px solid ", ";\n    background-color: ", ";\n  }\n\n  &-body {\n    margin: 8px;\n    color: ", ";\n    font-size: 12px;\n    border-radius: 8px;\n    overflow: hidden;\n\n    .", "-accordion-group-header {\n      background-color: transparent;\n    }\n\n    \n\n    .", "-accordion-group-header-close,\n    .", "-accordion-group-open {\n      border: 0;\n    }\n\n    .", "-accordion-group-header-close {\n      display: flex;\n    }\n\n    &-inline {\n      padding: 8px 0;\n      margin: 0;\n      background-color: transparent;\n    }\n\n    > .", "-accordion-group {\n      background-color: ", ";\n\n      &-open {\n        border-radius: 0;\n      }\n    }\n\n    &-close {\n      height: 0;\n      padding: 0;\n      margin: 0;\n    }\n  }\n}\n\n.", "-accordion-deep-thinking {\n  font-size: 12px;\n  color: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n  line-height: 20px;\n  padding: 0 12px;\n  border-left: 1px solid ", ";\n}\n\n.", "-accordion-soft-light-title {\n  font-size: 12px;\n  position: relative;\n  display: inline-block;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  mask-image: linear-gradient(\n    270deg,\n    rgba(231, 231, 237, 0.88) 20%,\n    rgba(231, 231, 237, 0.5) 50%,\n    rgba(255, 255, 255, 0.4) 52%,\n    rgba(231, 231, 237, 0.5) 70%,\n    rgba(231, 231, 237, 0.88) 80%\n  );\n  mask-size: 200% 100%;\n  animation: softlight-text 3s linear infinite;\n}\n\n\n@keyframes softlight-text {\n  0% {\n    mask-position: 100% 0;\n  }\n\n  100% {\n    mask-position: -100% 0;\n  }\n}\n\n.", "-accordion-content-body {\n  border: 1px solid ", ";\n  border-radius: 8px;\n  overflow: hidden;\n  &-header {\n    display: flex;\n    height: 24px;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 12px;\n    border-bottom: 1px solid ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &-body {\n    background-color: ", ";\n  }\n}\n"])), function (p) {
   return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorSuccess;

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/Sessions/index.js

@@ -60,7 +60,7 @@ export function InnerHeader(_ref) {
       className: cls("".concat(prefixCls, "-header"), className),
       children: [/*#__PURE__*/_jsxs("div", {
         className: "".concat(prefixCls, "-header-left"),
-        children: [/*#__PURE__*/_jsx("img", {
+        children: [logo && /*#__PURE__*/_jsx("img", {
           src: logo,
           alt: "logo",
           height: 32

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,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Audio(props) {
+  return /*#__PURE__*/_jsx("div", {
+    children: "Audio"
+  });
+}

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,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Video(props) {
+  return /*#__PURE__*/_jsx("div", {
+    children: "Video"
+  });
+}

package/lib/AssetsPreview/index.d.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,77 @@
+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 { 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";
+function AssetsPreview(props) {
+  var prefixCls = useProviderContext().getPrefixCls('assets-preview');
+  var Component = {
+    image: Image,
+    video: Video,
+    audio: Audio
+  }[props.type];
+  var ref = useRef();
+  useEffect(function () {}, [props.data.length]);
+  var _props$height = props.height,
+    height = _props$height === void 0 ? 144 : _props$height;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var debouncedValue = useDebounce(value, {
+    wait: 500
+  });
+  var onScroll = useCallback(function (e) {
+    console.log(e.target.scrollLeft, e.target.scrollWidth - e.target.clientWidth);
+  }, []);
+  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: {
+          height: height
+        },
+        onScroll: onScroll,
+        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, {})
+      })]
+    })]
+  });
+}
+export default AssetsPreview;

package/lib/AssetsPreview/style.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: import("react").NamedExoticComponent<object>;
+export default _default;

package/lib/AssetsPreview/style.js

@@ -0,0 +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.", "-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) {
+  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/ImageGenerator/Spin.js

@@ -113,7 +113,7 @@ var Spin = function Spin(_ref) {
   }, []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("style", {
-      children: "\n        @keyframes ai {\n          from {\n            --a: 360deg;\n            --l: 0.35;\n            --o: 1;\n          }\n          30% {\n            --l: 1.5;\n          }\n          70% {\n            --o: 0.4;\n            --l: 0.05;\n          }\n          98% {\n            --o: 0.7;\n          }\n          to {\n            --a: 0deg;\n            --l: 0.35;\n            --o: 1;\n          }\n        }\n\n        @keyframes ring {\n          from {\n            --value: var(--start);\n            --scale: 1;\n          }\n          50% {\n            --scale: 1.2;\n            --width-ratio: 1.5;\n          }\n          70% {\n            --scale: 1;\n            --value: calc(var(--start) + 180deg);\n            --width-ratio: 1;\n          }\n          80% {\n            --scale: 1.2;\n            --width-ratio: 1.5;\n          }\n          to {\n            --value: calc(var(--start) + 360deg);\n            --scale: 1;\n            --width-ratio: 1;\n          }\n        }\n\n        .fluid-background-container {\n          \n          --s: var(--actual-size);\n          --p: calc(var(--s) / 4);\n          --radius: calc(var(--s) * 0.25);\n          --count: 4;\n          --width: calc(var(--s) * 0.025);\n          --duration: calc(8s / ".concat(speed, ");\n          --ai-duration: calc(5.5s / ").concat(speed, ");\n          \n          --bg-color: color-mix(in srgb, #7b7bf4, transparent 90%);\n          position: absolute;\n          inset: 0;\n          background: radial-gradient(\n              60% 75% at center,\n              var(--bg-color) 50%,\n              transparent 50%\n            ),\n            radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);\n          overflow: hidden;\n        }\n\n        .fluid-background-container .fluid-inner {\n          overflow: hidden;\n          background: ").concat(backgroundColor, ";\n          width: 100%;\n          height: 100%;\n          position: relative;\n          display: grid;\n          place-items: center;\n        }\n\n        .fluid-background-container .c {\n          opacity: 0.9;\n          position: absolute;\n          width: calc(var(--s) * 0.4);\n          aspect-ratio: 1;\n          border-radius: 50%;\n          --offset-per-item: calc(360deg / var(--count));\n          --current-angle-offset: calc(var(--offset-per-item) * var(--i) + var(--a));\n          translate: calc(\n              cos(var(--current-angle-offset)) * var(--radius) + var(--x, 0)\n            )\n            calc(sin(var(--current-angle-offset)) * var(--radius) * -1);\n          scale: calc(0.6 + var(--l));\n          animation: ai var(--ai-duration) cubic-bezier(0.45, -0.35, 0.16, 1.5) infinite;\n          transition: opacity 0.3s linear;\n          opacity: var(--o, 1);\n        }\n\n        .fluid-background-container .c1 {\n          background: radial-gradient(50% 50% at center, ").concat(colors[0] || '#c979ee', ", color-mix(in srgb, ").concat(colors[0] || '#c979ee', ", transparent 30%));\n          --x: calc(var(--s) * 0.04);\n          width: calc(var(--s) * 0.6);\n          animation-timing-function: cubic-bezier(0.12, 0.32, 0.68, 0.24);\n        }\n\n        .fluid-background-container .c2 {\n          background: radial-gradient(50% 50% at center, ").concat(colors[1] || '#ef788c', ", color-mix(in srgb, ").concat(colors[1] || '#ef788c', ", white 40%));\n          width: calc(var(--s) * 0.55);\n        }\n\n        .fluid-background-container .c3 {\n          background: radial-gradient(50% 50% at center, ").concat(colors[2] || '#eb7fc6', ", transparent);\n          width: calc(var(--s) * 0.2);\n          opacity: 0.6;\n          --x: calc(var(--s) * -0.04);\n        }\n\n        .fluid-background-container .c4 {\n          background: ").concat(colors[3] || '#6d67c8', ";\n          animation-timing-function: cubic-bezier(0.39, -0.03, 0.75, 0.47);\n        }\n\n        .fluid-background-container .glass {\n          overflow: hidden;\n          position: absolute;\n          inset: 0;\n          backdrop-filter: blur(calc(var(--s) * 0.12));\n          box-shadow: 0 0 calc(var(--s) * 0.2) color-mix(in srgb, black, transparent 70%);\n        }\n\n        .fluid-background-container .glass::after {\n          content: \"\";\n          position: absolute;\n          inset: 0;\n          --c: rgba(255, 255, 255, 0.03);\n          --w: 0.0625rem;\n          --g: 0.1875rem;\n          background: repeating-linear-gradient(\n            var(--c),\n            var(--c),\n            var(--w),\n            transparent var(--w),\n            transparent calc(var(--w) + var(--g))\n          );\n        }\n\n        .fluid-background-container .rings {\n          aspect-ratio: 1;\n          border-radius: 50%;\n          position: absolute;\n          inset: 0;\n          perspective: calc(var(--s) * 2.75);\n          opacity: 0.9;\n        }\n\n        .fluid-background-container .rings::before,\n        .fluid-background-container .rings::after {\n          content: \"\";\n          position: absolute;\n          inset: 0;\n          background: rgba(255, 0, 0, 1);\n          border-radius: 50%;\n          --width-ratio: 1;\n          border: calc(var(--width) * var(--width-ratio)) solid transparent;\n          mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n          background: linear-gradient(\n            ").concat(ringColors.join(', '), "\n          ) border-box;\n          mask-composite: exclude;\n          animation: ring var(--duration) ease-in-out infinite;\n          --start: 180deg;\n          --value: var(--start);\n          --scale: 1;\n          transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))\n            scale(var(--scale));\n        }\n\n        .fluid-background-container .rings::before {\n          --start: 180deg;\n        }\n\n        .fluid-background-container .rings::after {\n          --start: 90deg;\n        }\n      ")
+      children: "\n        @keyframes ai {\n          from {\n            --a: 360deg;\n            --l: 0.35;\n            --o: 1;\n          }\n          30% {\n            --l: 1.5;\n          }\n          70% {\n            --o: 0.4;\n            --l: 0.05;\n          }\n          98% {\n            --o: 0.7;\n          }\n          to {\n            --a: 0deg;\n            --l: 0.35;\n            --o: 1;\n          }\n        }\n\n        @keyframes ring {\n          from {\n            --value: var(--start);\n            --scale: 1;\n          }\n          50% {\n            --scale: 1.2;\n            --width-ratio: 1.5;\n          }\n          70% {\n            --scale: 1;\n            --value: calc(var(--start) + 180deg);\n            --width-ratio: 1;\n          }\n          80% {\n            --scale: 1.2;\n            --width-ratio: 1.5;\n          }\n          to {\n            --value: calc(var(--start) + 360deg);\n            --scale: 1;\n            --width-ratio: 1;\n          }\n        }\n\n        .fluid-background-container {\n          \n          --s: var(--actual-size);\n          --p: calc(var(--s) / 4);\n          --radius: calc(var(--s) * 0.25);\n          --count: 4;\n          --width: calc(var(--s) * 0.025);\n          --duration: calc(8s / ".concat(speed, ");\n          --ai-duration: calc(5.5s / ").concat(speed, ");\n          \n          --bg-color: color-mix(in srgb, #7b7bf4, transparent 90%);\n          position: absolute;\n          inset: 0;\n          background: radial-gradient(\n              60% 75% at center,\n              var(--bg-color) 50%,\n              transparent 50%\n            ),\n            radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);\n          overflow: hidden;\n        }\n\n        .fluid-background-container .fluid-inner {\n          overflow: hidden;\n          background: ").concat(backgroundColor, ";\n          width: 100%;\n          height: 100%;\n          position: relative;\n          display: grid;\n          place-items: center;\n        }\n\n        .fluid-background-container .c {\n          opacity: 0.9;\n          position: absolute;\n          width: calc(var(--s) * 0.4);\n          aspect-ratio: 1;\n          border-radius: 50%;\n          --offset-per-item: calc(360deg / var(--count));\n          --current-angle-offset: calc(var(--offset-per-item) * var(--i) + var(--a));\n          translate: calc(\n              cos(var(--current-angle-offset)) * var(--radius) + var(--x, 0)\n            )\n            calc(sin(var(--current-angle-offset)) * var(--radius) * -1);\n          scale: calc(0.6 + var(--l));\n          animation: ai var(--ai-duration) cubic-bezier(0.45, -0.35, 0.16, 1.5) infinite;\n          transition: opacity 0.3s linear;\n          opacity: var(--o, 1);\n        }\n\n        .fluid-background-container .c1 {\n          background: radial-gradient(50% 50% at center, ").concat(colors[0] || '#c979ee', ", color-mix(in srgb, ").concat(colors[0] || '#c979ee', ", transparent 30%));\n          --x: calc(var(--s) * 0.04);\n          width: calc(var(--s) * 0.6);\n          animation-timing-function: cubic-bezier(0.12, 0.32, 0.68, 0.24);\n        }\n\n        .fluid-background-container .c2 {\n          background: radial-gradient(50% 50% at center, ").concat(colors[1] || '#ef788c', ", color-mix(in srgb, ").concat(colors[1] || '#ef788c', ", white 40%));\n          width: calc(var(--s) * 0.55);\n        }\n\n        .fluid-background-container .c3 {\n          background: radial-gradient(50% 50% at center, ").concat(colors[2] || '#eb7fc6', ", transparent);\n          width: calc(var(--s) * 0.2);\n          opacity: 0.6;\n          --x: calc(var(--s) * -0.04);\n        }\n\n        .fluid-background-container .c4 {\n          background: ").concat(colors[3] || '#6d67c8', ";\n          animation-timing-function: cubic-bezier(0.39, -0.03, 0.75, 0.47);\n        }\n\n        .fluid-background-container .glass {\n          overflow: hidden;\n          position: absolute;\n          border-radius: 8px;\n          inset: 0;\n          backdrop-filter: blur(calc(var(--s) * 0.12));\n          box-shadow: 0 0 calc(var(--s) * 0.2) color-mix(in srgb, black, transparent 70%);\n        }\n\n        .fluid-background-container .glass::after {\n          content: \"\";\n          position: absolute;\n          inset: 0;\n          --c: rgba(255, 255, 255, 0.03);\n          --w: 0.0625rem;\n          --g: 0.1875rem;\n          background: repeating-linear-gradient(\n            var(--c),\n            var(--c),\n            var(--w),\n            transparent var(--w),\n            transparent calc(var(--w) + var(--g))\n          );\n        }\n\n        .fluid-background-container .rings {\n          aspect-ratio: 1;\n          border-radius: 50%;\n          position: absolute;\n          inset: 0;\n          perspective: calc(var(--s) * 2.75);\n          opacity: 0.9;\n        }\n\n        .fluid-background-container .rings::before,\n        .fluid-background-container .rings::after {\n          content: \"\";\n          position: absolute;\n          inset: 0;\n          background: rgba(255, 0, 0, 1);\n          border-radius: 50%;\n          --width-ratio: 1;\n          border: calc(var(--width) * var(--width-ratio)) solid transparent;\n          mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n          background: linear-gradient(\n            ").concat(ringColors.join(', '), "\n          ) border-box;\n          mask-composite: exclude;\n          animation: ring var(--duration) ease-in-out infinite;\n          --start: 180deg;\n          --value: var(--start);\n          --scale: 1;\n          transform: rotateY(var(--value)) rotateX(var(--value)) rotateZ(var(--value))\n            scale(var(--scale));\n        }\n\n        .fluid-background-container .rings::before {\n          --start: 180deg;\n        }\n\n        .fluid-background-container .rings::after {\n          --start: 90deg;\n        }\n      ")
     }), /*#__PURE__*/_jsxs("div", {
       ref: containerRef,
       className: cn('fluid-background-container', className),

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.1767753123812",
+  "version": "1.1.46-beta.1767868158421",
   "description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
   "license": "Apache-2.0",
   "sideEffects": [