@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/DeviceAction/actionMap.tsx

@@ -0,0 +1,100 @@
+import { SparkHomeLine, SparkCheckCircleLine, SparkLoadingLine, SparkUndoLine, SparkTargetLine, SparkSortLine, SparkEditLine, SparkKeyboardLine, SparkOtherLine, SparkPlaying02Line, SparkCommandLine, SparkDragDotLine, SparkPlaying01Line, SparkTrackpadLine, SparkUserCheckedLine } from "@agentscope-ai/icons";
+
+const actionMap = {
+  Click: {
+    name: '点击',
+    icon: <SparkTargetLine />,
+  },
+  Swipe: {
+    name: '滑动',
+    icon: <SparkSortLine />,
+  },
+  Type: {
+    name: '输入',
+    icon: <SparkEditLine />,
+  },
+  Back: {
+    name: '返回',
+    icon: <SparkUndoLine />,
+  },
+  Home: {
+    name: '主页',
+    icon: <SparkHomeLine />,
+  },
+  Done: {
+    name: '完成',
+    icon: <SparkCheckCircleLine />,
+  },
+  Wait: {
+    name: '等待',
+    icon: <SparkLoadingLine spin />,
+  },
+  click: {
+    name: '点击',
+    icon: <SparkTargetLine />,
+  },
+  'right click': {
+    name: '右键点击',
+    icon: <SparkTargetLine />,
+  },
+  'open app': {
+    name: '打开应用',
+    icon: <SparkOtherLine />,
+  },
+  computer_double_click: {
+    name: '双击',
+    icon: <SparkPlaying02Line />,
+  },
+  hotkey: {
+    name: '快捷键',
+    icon: <SparkCommandLine />,
+  },
+  presskey: {
+    name: '按键',
+    icon: <SparkKeyboardLine />,
+  },  
+  
+  scroll: {
+    name: '滚动',
+    icon: <SparkSortLine />,
+  },
+  drag: {
+    name: '拖拽',
+    icon: <SparkDragDotLine />,
+  },
+  type_with_clear_enter_pos: {
+    name: '输入并清除',
+    icon: <SparkEditLine />,
+  },
+  triple_click: {
+    name: '三击',
+    icon: <SparkPlaying01Line />,
+  },
+  drag_end: {
+    name: '拖拽结束',
+    icon: <SparkDragDotLine />,
+  },
+  type: {
+    name: '输入',
+    icon: <SparkEditLine />,
+  },
+  hscroll: {
+    name: '水平滚动',
+    icon: <SparkTrackpadLine />,
+  },
+  done: {
+    name: '完成',
+    icon: <SparkCheckCircleLine />,
+  },
+  wait: {
+    name: '等待',
+    icon: <SparkLoadingLine spin />,
+  },
+  call_user: {
+    name: '呼叫用户',
+    icon: <SparkUserCheckedLine />,
+  },
+}
+
+
+export default actionMap; 

package/components/DeviceAction/demo/index.tsx

@@ -0,0 +1,132 @@
+import { DeviceAction, IDeviceActionProps } from "@agentscope-ai/chat";
+import { Flex } from "antd";
+
+const actions = [
+  {
+    time: "2:00:00",
+    action: "Click",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:05",
+    action: "Swipe",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:10",
+    action: "Type",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:15",
+    action: "Back",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:20",
+    action: "Home",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:25",
+    action: "Done",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:30",
+    action: "Wait",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:35",
+    action: "call_user",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:40",
+    action: "click",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:45",
+    action: "right click",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:50",
+    action: "open app",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:00:55",
+    action: "computer_double_click",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:00",
+    action: "hotkey",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:05",
+    action: "presskey",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:10",
+    action: "scroll",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:15",
+    action: "drag",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:20",
+    action: "type_with_clear_enter_pos",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:25",
+    action: "triple_click",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:30",
+    action: "drag_end",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:35",
+    action: "type",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:40",
+    action: "hscroll",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:45",
+    action: "done",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+  {
+    time: "2:01:50",
+    action: "wait",
+    image: "https://gw.alicdn.com/imgextra/i3/O1CN01jnIWvS1OQC0DWx9Tu_!!6000000001699-0-tps-1200-687.jpg"
+  },
+
+]
+
+export default function () {
+  return <Flex gap={16} vertical>
+    {
+      actions.map((item, index) => {
+        return <DeviceAction key={index} {...item} description={`description for ${item.action}...`} action={item.action as IDeviceActionProps['action']} />
+      })
+    }
+
+  </Flex>
+}

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

@@ -0,0 +1,19 @@
+---
+order: 4
+
+group:
+  title: Output
+  order: 3
+title: DeviceAction
+description: A card that shows AI operating the device in real time
+---
+
+<DemoTitle title="DeviceAction" desc="A card that shows AI operating the device in real time" llmTxtName="DeviceAction"></DemoTitle>
+
+<code src="./demo/index.tsx" height="auto">Example</code>
+
+<Install>import { DeviceAction } from '@agentscope-ai/chat'</Install>
+
+#### API
+
+<ApiParser source="./index.tsx" id="IDeviceActionProps"></ApiParser>

package/components/DeviceAction/index.tsx

@@ -0,0 +1,75 @@
+
+import { OperateCard, useProviderContext } from '@agentscope-ai/chat';
+import { ConfigProvider, Image } from 'antd';
+import { Locale } from 'antd/es/locale';
+import actionMap from './actionMap';
+
+export interface IDeviceActionProps {
+  /**
+   * @description 时间
+   * @descriptionEn Time
+   * @default ''
+   */
+  time?: string;
+  /**
+   * @description 动作
+   * @descriptionEn Action
+   * @default ''
+   */
+  action: 'Click' | 'Swipe' | 'Type' | 'Back' | 'Home' | 'Done' | 'Wait' | 'click' | 'right click' | 'open app' | 'computer_double_click' | 'hotkey' | 'presskey' | 'scroll' | 'drag' | 'type_with_clear_enter_pos' | 'triple_click' | 'drag_end' | 'type' | 'hscroll' | 'done' | 'wait' | 'call_user',
+  /**
+   * @description 动作名称，通常不用传入，会根据 action 自动生成
+   * @descriptionEn Action Name, usually not passed in, will be generated automatically based on action
+   * @default ''
+   */
+  actionName?: string;
+  /**
+   * @description 描述
+   * @descriptionEn Description
+   * @default ''
+   */
+  description: string;
+  /**
+   * @description 操作截图
+   * @descriptionEn Operation Screenshot
+   * @default ''
+   */
+  image?: string;
+}
+
+
+export default function (props: IDeviceActionProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('operate-card');
+
+
+  return <div>
+    <div className={`${prefixCls}-device-action-time`}>{props.time}</div>
+
+    <OperateCard header={{
+      className: `${prefixCls}-device-action`,
+      icon: <div className={`${prefixCls}-device-action-icon`}>{actionMap[props.action]?.icon}</div>,
+      title: <div className={`${prefixCls}-device-action-content`}>
+        <div className={`${prefixCls}-device-action-description`}>
+          <span>
+            {props.actionName || actionMap[props.action]?.name}
+          </span>
+          <span>
+            {props.description}
+          </span>
+        </div>
+
+        <div className={`${prefixCls}-device-action-image`} >
+          <ConfigProvider
+            locale={{
+              Image: { preview: '' }
+            } as Locale}
+          >
+            <Image src={props.image} alt={props.description} width={'100%'} height={'100%'} />
+
+          </ConfigProvider>
+        </div>
+      </div>,
+    }} />
+  </div>;
+}

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

@@ -0,0 +1,19 @@
+---
+order: 4
+
+group:
+  title: 输出
+  order: 3
+title: DeviceAction
+description: 一种展示AI对设备进行实时操作行为的卡片
+---
+
+<DemoTitle title="DeviceAction" desc="一种展示AI对设备进行实时操作行为的卡片" llmTxtName="DeviceAction"></DemoTitle>
+
+<code src="./demo/index.tsx" height="auto">示例</code>
+
+<Install>import { DeviceAction } from '@agentscope-ai/chat'</Install>
+
+#### API
+
+<ApiParser source="./index.tsx" id="IDeviceActionProps"></ApiParser>

package/components/Disclaimer/demo/index.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Disclaimer } from '@agentscope-ai/chat';
+
+export default () => <Disclaimer />;

package/components/Disclaimer/demo/withLink.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Disclaimer } from '@agentscope-ai/chat';
+
+export default () => <Disclaimer afterLink={{  text: 'See More', href: 'https://www.aliyun.com'}}/>;

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

@@ -0,0 +1,23 @@
+---
+order: 1
+group:
+  title: Display
+  order: 1
+title: Disclaimer
+description: Disclaimer
+---
+
+<DemoTitle title="Disclaimer" desc="Disclaimer"></DemoTitle>
+
+<code src="./demo/index.tsx" center>Example</code>
+
+<Install>import { Disclaimer } from '@agentscope-ai/chat'</Install>
+
+#### Disclaimer Examples
+
+The following are examples and variations of this component
+<code src="./demo/withLink.tsx" center>With Embedded Link</code>
+
+#### API
+
+<ApiParser source="./index.tsx" id="IDisclaimerProps"></ApiParser>

package/components/Disclaimer/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Style from './style';
+import { useProviderContext } from '@agentscope-ai/chat';
+
+
+
+export interface IDisclaimerProps {
+  /**
+   * @description 免责声明的文本内容，用于提醒用户AI的局限性
+   * @descriptionEn Disclaimer text content for reminding users of AI limitations
+   */
+  desc?: React.ReactElement | string
+
+  /**
+   * @description 免责声明组件的内联样式对象，用于自定义外观
+   * @descriptionEn Inline style object for the disclaimer component for customizing appearance
+   */
+  style?: React.CSSProperties
+
+  /**
+   * @description 免责声明后的链接配置，用于提供更多相关信息
+   * @descriptionEn Link configuration after disclaimer for providing additional relevant information
+   */
+  afterLink?: {
+    href: string
+    text: string
+  }
+}
+
+export default function (props: IDisclaimerProps) {
+  const { desc = 'AI can also make mistakes, so please check carefully and use it with caution' } = props;
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('disclaimer');
+
+  return <>
+    <Style />
+    <div className={prefixCls} style={props.style}>
+      {desc}
+      {props.afterLink && <a className={`${prefixCls}-after-link`} href={props.afterLink.href} target="_blank">{props.afterLink.text}</a>}
+    </div>
+  </>
+}

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

@@ -0,0 +1,24 @@
+---
+order: 1
+group:
+  title: 展现
+  order: 1
+title: Disclaimer
+description: 免责声明
+---
+
+<DemoTitle title="Disclaimer" desc="免责声明"></DemoTitle>
+
+<code src="./demo/index.tsx" center>示例</code>
+
+<Install>import { Disclaimer } from '@agentscope-ai/chat'</Install>
+
+
+#### 免责声明示例
+
+以下是此组件的示例和变体
+<code src="./demo/withLink.tsx" center>嵌入链接</code>
+
+#### API
+
+<ApiParser source="./index.tsx" id="IDisclaimerProps"></ApiParser>

package/components/Disclaimer/style.ts

@@ -0,0 +1,17 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-disclaimer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 1.5;
+  color: ${(p) => p.theme.colorTextTertiary};
+  padding: 8px 12px;
+}
+
+.${(p) => p.theme.prefixCls}-disclaimer-after-link {
+  padding-left: 8px;
+}
+`;

package/components/ImageGenerator/demo/basic.tsx

@@ -0,0 +1,23 @@
+import { ImageGenerator } from '@agentscope-ai/chat';
+import { useTimeout } from 'ahooks';
+import { Flex } from 'antd';
+import { useState } from 'react';
+
+export default function () {
+  const [src, setSrc] = useState('');
+
+  useTimeout(() => {
+    setSrc('https://img.alicdn.com/imgextra/i1/O1CN01lS5S0a1yl6FKoBZHl_!!6000000006618-0-tps-1280-1280.jpg');
+  }, 20 * 1000)
+
+  return <Flex vertical gap="middle">
+    <ImageGenerator
+      src={src}
+      skeletonText="Painting..."
+    />
+
+    <ImageGenerator
+      src="https://img.alicdn.com/imgextra/i1/O1CN01lS5S0a1yl6FKoBZHl_!!6000000006618-0-tps-1280-1280.jpg"
+    />
+  </Flex>
+}

package/components/ImageGenerator/demo/custom.tsx

@@ -0,0 +1,56 @@
+import { ImageGenerator } from '@agentscope-ai/chat';
+import { Flex } from 'antd';
+import { createStyles } from 'antd-style';
+
+
+const useStyles = createStyles(({ token }) => {
+  return {
+    skeleton: {
+      position: 'relative',
+      overflow: 'hidden',
+      borderRadius: 8,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    bg: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      width: '200%',
+      height: '200%',
+      transform: 'translate(-50%, -50%) rotate(0deg)',
+      objectFit: 'cover',
+    },
+    icon: {
+      width: 64,
+      height: 64,
+      zIndex: 1,
+    }
+  };
+});
+
+export default function () {
+  const { styles } = useStyles();
+  return <Flex vertical gap="middle">
+    <ImageGenerator
+
+      skeleton={<div className={styles.skeleton} style={{ width: 320, height: 320 }}>
+        <img
+          className={styles.bg}
+          src="https://img.alicdn.com/imgextra/i2/O1CN01j5MC6r1scV7D2cNYt_!!6000000005787-2-tps-1366-1354.png"
+          alt=""
+        />
+
+        <img
+          className={styles.icon}
+          src="https://img.alicdn.com/imgextra/i2/O1CN01tLbrX11xwGHaPhX0F_!!6000000006507-54-tps-500-500.apng"
+        />
+
+
+      </div>}
+    />
+
+
+  </Flex>
+}

package/components/ImageGenerator/demo/size.tsx

@@ -0,0 +1,15 @@
+import { ImageGenerator } from '@agentscope-ai/chat';
+import { useTimeout } from 'ahooks';
+import { Flex } from 'antd';
+import { useState } from 'react';
+
+export default function () {
+
+  return <Flex vertical gap="middle">
+    <ImageGenerator
+      width={16}
+      height={9}
+      block
+    />
+  </Flex>
+}

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

@@ -0,0 +1,23 @@
+---
+group:
+  title: Output
+  order: 3
+title: ImageGenerator
+description: Process display for image generation queries
+---
+
+<DemoTitle title="ImageGenerator" desc="Process display for image generation queries"></DemoTitle>
+
+<code src="./demo/basic.tsx" height="auto">Example</code>
+
+<Install>import { ImageGenerator } from '@agentscope-ai/chat'</Install>
+
+#### ImageGeneration Examples
+
+<code src="./demo/size.tsx" height="auto">Custom Size</code>
+
+<code src="./demo/custom.tsx" height="auto">Custom skeleton</code>
+
+#### API
+
+<ApiParser source="./index.tsx" id="IImageGeneratorProps"></ApiParser>