@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Sender/StopLoading.tsx

@@ -0,0 +1,48 @@
+import React, { memo } from 'react';
+
+const StopLoadingIcon = memo((props: { className?: string }) => {
+  const { className } = props;
+
+  return (
+    <svg
+      color="currentColor"
+      viewBox="0 0 1000 1000"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      className={className}
+    >
+      <title>Stop Loading</title>
+      <rect fill="currentColor" height="250" rx="24" ry="24" width="250" x="375" y="375" />
+
+      {/* <circle
+        cx="500"
+        cy="500"
+        fill="none"
+        r="450"
+        stroke="currentColor"
+        strokeWidth="100"
+        opacity="0.45"
+      />
+
+      <circle
+        cx="500"
+        cy="500"
+        fill="none"
+        r="450"
+        stroke="currentColor"
+        strokeWidth="100"
+        strokeDasharray="600 9999999"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="1s"
+          from="0 500 500"
+          repeatCount="indefinite"
+          to="360 500 500"
+          type="rotate"
+        />
+      </circle> */}
+    </svg>
+  );
+});
+export default StopLoadingIcon;

package/components/Sender/components/ActionButton.tsx

@@ -0,0 +1,106 @@
+import { Button, IconButton, type ButtonProps } from '@agentscope-ai/design';
+import classNames from 'classnames';
+import * as React from 'react';
+
+export interface ActionButtonContextProps {
+  /**
+   * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+   * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+   */
+  prefixCls: string;
+  /**
+   * @description 发送消息的回调函数
+   * @descriptionEn Callback function for sending messages
+   */
+  onSend?: VoidFunction;
+  /**
+   * @description 是否禁用发送按钮
+   * @descriptionEn Whether to disable the send button
+   */
+  onSendDisabled?: boolean;
+  /**
+   * @description 清空输入的回调函数
+   * @descriptionEn Callback function for clearing input
+   */
+  onClear?: VoidFunction;
+  /**
+   * @description 是否禁用清空按钮
+   * @descriptionEn Whether to disable the clear button
+   */
+  onClearDisabled?: boolean;
+  /**
+   * @description 取消操作的回调函数
+   * @descriptionEn Callback function for canceling operations
+   */
+  onCancel?: VoidFunction;
+  /**
+   * @description 是否禁用取消按钮
+   * @descriptionEn Whether to disable the cancel button
+   */
+  onCancelDisabled?: boolean;
+  /**
+   * @description 语音输入的回调函数
+   * @descriptionEn Callback function for voice input
+   */
+  onSpeech?: VoidFunction;
+  /**
+   * @description 是否禁用语音按钮
+   * @descriptionEn Whether to disable the speech button
+   */
+  onSpeechDisabled?: boolean;
+  /**
+   * @description 是否正在录音，影响语音按钮的显示状态
+   * @descriptionEn Whether currently recording, affects the display state of the speech button
+   */
+  speechRecording?: boolean;
+  /**
+   * @description 是否禁用所有操作按钮
+   * @descriptionEn Whether to disable all action buttons
+   */
+  disabled?: boolean;
+}
+
+export const ActionButtonContext = React.createContext<ActionButtonContextProps>(null!);
+
+export interface ActionButtonProps {
+  /**
+   * @description 按钮的操作类型，决定按钮的行为和样式
+   * @descriptionEn Action type of the button, determines button behavior and style
+   */
+  action: 'onSend' | 'onClear' | 'onCancel' | 'onSpeech';
+  onClick?: (e) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function ActionButton(props: ActionButtonProps) {
+  const { className, action, onClick: outClick, ...restProps } = props;
+  const context = React.useContext(ActionButtonContext);
+  const { prefixCls, disabled: rootDisabled } = context;
+
+  const onClick = context[action];
+  const mergedDisabled = rootDisabled ?? restProps.disabled ?? context[`${action}Disabled`];
+
+  return (
+    <IconButton
+      bordered={false}
+      disabled={mergedDisabled}
+      {...restProps}
+      onClick={(e) => {
+        if (!mergedDisabled) {
+          if (onClick) {
+            onClick();
+          }
+          if (outClick) {
+            outClick(e);
+          }
+        }
+      }}
+      className={classNames(prefixCls, className, {
+        [`${prefixCls}-disabled`]: mergedDisabled,
+      })}
+    />
+  );
+}
+
+export default React.forwardRef(ActionButton);

package/components/Sender/components/ClearButton.tsx

@@ -0,0 +1,10 @@
+import { ClearOutlined } from '@ant-design/icons';
+import type { ButtonProps } from 'antd';
+import * as React from 'react';
+import ActionButton from './ActionButton';
+
+function ClearButton(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
+  return <ActionButton icon={<ClearOutlined />} {...props} action="onClear" ref={ref} />;
+}
+
+export default React.forwardRef(ClearButton);

package/components/Sender/components/LoadingButton.tsx

@@ -0,0 +1,26 @@
+import type { ButtonProps } from 'antd';
+import classNames from 'classnames';
+import * as React from 'react';
+import StopLoadingIcon from '../StopLoading';
+import ActionButton, { ActionButtonContext } from './ActionButton';
+
+function LoadingButton(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
+  const { prefixCls } = React.useContext(ActionButtonContext);
+  const { className } = props;
+
+  return (
+    <ActionButton
+      icon={<StopLoadingIcon className={`${prefixCls}-loading-icon`} />}
+      type="primary"
+      variant="text"
+      {...props}
+      className={classNames(className, `${prefixCls}-loading-button`)}
+      action="onCancel"
+      ref={ref}
+    >
+      
+    </ActionButton>
+  );
+}
+
+export default React.forwardRef(LoadingButton);

package/components/Sender/components/SendButton.tsx

@@ -0,0 +1,22 @@
+import { ArrowUpOutlined, SendOutlined } from '@ant-design/icons';
+import type { ButtonProps } from 'antd';
+import * as React from 'react';
+import ActionButton from './ActionButton';
+import { createStyles } from 'antd-style';
+
+
+function SendButton(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
+
+
+  return (
+    <ActionButton
+      icon={<ArrowUpOutlined />}
+      type="primary"
+      {...props}
+      action="onSend"
+      ref={ref}
+    />
+  );
+}
+
+export default React.forwardRef(SendButton);

package/components/Sender/components/SpeechButton/RecordingIcon.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+export interface RecordingIconProps {
+  /**
+   * @description 录音图标的CSS类名，用于自定义样式
+   * @descriptionEn CSS class name for the recording icon for custom styling
+   */
+  className?: string;
+}
+
+const SIZE = 1000;
+const COUNT = 4;
+const RECT_WIDTH = 140;
+const RECT_RADIUS = RECT_WIDTH / 2;
+const RECT_HEIGHT_MIN = 250;
+const RECT_HEIGHT_MAX = 500;
+const DURATION = 0.8;
+
+export default function RecordingIcon({ className }: RecordingIconProps) {
+  return (
+    <svg
+      color="currentColor"
+      viewBox={`0 0 ${SIZE} ${SIZE}`}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      className={className}
+    >
+      <title>Speech Recording</title>
+
+      {Array.from({ length: COUNT }).map((_, index) => {
+        const dest = (SIZE - RECT_WIDTH * COUNT) / (COUNT - 1);
+        const x = index * (dest + RECT_WIDTH);
+        const yMin = SIZE / 2 - RECT_HEIGHT_MIN / 2;
+        const yMax = SIZE / 2 - RECT_HEIGHT_MAX / 2;
+
+        return (
+          <rect
+            fill="currentColor"
+            rx={RECT_RADIUS}
+            ry={RECT_RADIUS}
+            height={RECT_HEIGHT_MIN}
+            width={RECT_WIDTH}
+            x={x}
+            y={yMin}
+            key={index}
+          >
+            <animate
+              attributeName="height"
+              values={`${RECT_HEIGHT_MIN}; ${RECT_HEIGHT_MAX}; ${RECT_HEIGHT_MIN}`}
+              keyTimes="0; 0.5; 1"
+              dur={`${DURATION}s`}
+              begin={`${(DURATION / COUNT) * index}s`}
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="y"
+              values={`${yMin}; ${yMax}; ${yMin}`}
+              keyTimes="0; 0.5; 1"
+              dur={`${DURATION}s`}
+              begin={`${(DURATION / COUNT) * index}s`}
+              repeatCount="indefinite"
+            />
+          </rect>
+        );
+      })}
+    </svg>
+  );
+}

package/components/Sender/components/SpeechButton/index.tsx

@@ -0,0 +1,30 @@
+import type { ButtonProps } from 'antd';
+import * as React from 'react';
+import ActionButton, { ActionButtonContext } from '../ActionButton';
+import { SparkMicLine, SparkMicOffLine, SparkMicOnLine } from '@agentscope-ai/icons';
+import RecordingIcon from './RecordingIcon';
+
+function SpeechButton(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {
+  const { speechRecording, onSpeechDisabled, prefixCls } = React.useContext(ActionButtonContext);
+
+  let icon: React.ReactNode = null;
+  if (speechRecording) {
+    icon = <RecordingIcon className={`${prefixCls}-recording-icon`} />;
+  } else if (onSpeechDisabled) {
+    icon = <SparkMicOffLine />;
+  } else {
+    icon = <SparkMicLine />;
+  }
+
+  return (
+    <ActionButton
+      icon={icon}
+      variant="text"
+      {...props}
+      action="onSpeech"
+      ref={ref}
+    />
+  );
+}
+
+export default React.forwardRef(SpeechButton);

package/components/Sender/demo/asr.tsx

@@ -0,0 +1,7 @@
+import React, { useState } from 'react';
+import { ChatInput } from '@agentscope-ai/chat';
+
+export default function () {
+  const [value, setValue] = useState('');
+  return <ChatInput placeholder='Please type here...' value={value} onChange={setValue} allowSpeech></ChatInput>
+}

package/components/Sender/demo/basic.tsx

@@ -0,0 +1,7 @@
+import React, { useState } from 'react';
+import { ChatInput } from '@agentscope-ai/chat';
+
+export default function () {
+  const [value, setValue] = useState('Hello, Alibaba Cloud Spark Chat!');
+  return <ChatInput placeholder='Please type here...' value={value} onChange={setValue}></ChatInput>
+}

package/components/Sender/demo/loading.tsx

@@ -0,0 +1,5 @@
+import { ChatInput } from '@agentscope-ai/chat';
+
+export default function () {
+  return <ChatInput loading placeholder='Please type here...'></ChatInput>
+}

package/components/Sender/demo/moreMode.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ChatInput } from '@agentscope-ai/chat';
+import { SparkMagicNoteLine } from '@agentscope-ai/icons';
+
+export default function () {
+  const [mode, setMode] = React.useState('');
+  return <div style={{ width: '100%' }}>
+    <ChatInput.ModeSelect options={[
+      {
+        icon: <SparkMagicNoteLine style={{ fontSize: 16 }} />,
+        label: '文本',
+        value: 'text',
+        tooltip: '文本 tooltip'
+      },
+      {
+        icon: <SparkMagicNoteLine style={{ fontSize: 16 }} />,
+        label: '图片',
+        selectedLabel: <div style={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}>图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片图片',
+        </div>,
+        value: 'image',
+      },
+      {
+        icon: <SparkMagicNoteLine style={{ fontSize: 16 }} />,
+        label: '文件',
+        value: 'file',
+      },
+    ]}
+      value={mode}
+      closeTip='close tooltip'
+      onChange={setMode}
+      desc={<div
+        style={{ fontSize: 12 }}
+        onClick={() => {
+          setMode('')
+        }}>
+        description of {mode}
+      </div>}
+    />
+    <ChatInput placeholder='Please type here...' ></ChatInput>
+  </div>
+}

package/components/Sender/demo/morePrefixAction.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Attachments, ChatInput } from '@agentscope-ai/chat';
+import { GetProp, Upload } from 'antd';
+import { IconButton, Button } from '@agentscope-ai/design';
+import { SparkAttachmentLine, SparkDeepSearchLine, SparkKeyboardLine } from '@agentscope-ai/icons';
+
+export default function () {
+  const [search, setSearch] = React.useState(false);
+  const [attachedFiles, setAttachedFiles] = React.useState<GetProp<typeof Attachments, 'items'>>([]);
+  const handleFileChange: GetProp<typeof Attachments, 'onChange'> = async ({ fileList }) => {
+    setAttachedFiles(fileList);
+  }
+
+  const senderHeader = (
+    <ChatInput.Header
+      closable={false}
+      open={attachedFiles?.length > 0}
+    >
+      <Attachments
+        items={attachedFiles}
+        onChange={handleFileChange}
+      />
+    </ChatInput.Header>
+  );
+  const attachmentsNode = (
+    <Upload onChange={handleFileChange} fileList={attachedFiles} showUploadList={false} key="upload">
+      <IconButton icon={<SparkAttachmentLine />} bordered={false} />
+    </Upload>
+  );
+
+  return <ChatInput
+    placeholder='Please type here...'
+    zoomable
+    header={senderHeader}
+    prefix={[
+      attachmentsNode,
+      <Button type="text" color={search ? 'primary' : 'default'} variant={search ? 'filled' : 'text'} icon={<SparkDeepSearchLine />} style={{ padding: '0 6px', gap: 6 }} onClick={() => setSearch(!search)}>联网搜索</Button>,
+    ]}>
+  </ChatInput>
+}

package/components/Sender/demo/withFile.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Attachments, ChatInput } from '@agentscope-ai/chat';
+import { Button, GetProp, Upload } from 'antd';
+import { IconButton } from '@agentscope-ai/design';
+import { SparkAttachmentLine } from '@agentscope-ai/icons';
+
+export default function () {
+  // mock data
+  const [attachedFiles, setAttachedFiles] = React.useState<GetProp<typeof Attachments, 'items'>>([
+    {
+      uid: '-1',
+      name: 'file.pdf',
+      status: 'done',
+      size: 1000,
+    },
+    {
+      uid: '-2',
+      name: 'file.pdf',
+      status: 'done',
+      size: 2000,
+
+    },
+    {
+      uid: '-3',
+      name: 'file.pdf',
+      status: 'done',
+      size: 3000,
+    },
+  ]);
+
+  const handleFileChange: GetProp<typeof Attachments, 'onChange'> = async ({ fileList }) => {
+    setAttachedFiles(fileList);
+  }
+
+  const senderHeader = (
+    <ChatInput.Header
+      closable={false}
+      open={attachedFiles?.length > 0}
+    >
+      <Attachments
+        items={attachedFiles}
+        onChange={handleFileChange}
+      />
+    </ChatInput.Header>
+  );
+  const attachmentsNode = (
+    <Upload onChange={handleFileChange} fileList={attachedFiles} showUploadList={false} key="upload">
+      <IconButton icon={<SparkAttachmentLine />} bordered={false} />
+    </Upload>
+  );
+
+  return <ChatInput placeholder='Please type here...' header={senderHeader}
+    prefix={attachmentsNode}></ChatInput>
+}

package/components/Sender/demo/withImage.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Attachments, ChatInput } from '@agentscope-ai/chat';
+import { Button, GetProp, Upload } from 'antd';
+import { IconButton } from '@agentscope-ai/design';
+import { SparkAttachmentLine } from '@agentscope-ai/icons';
+
+export default function () {
+  // mock data
+  const [attachedFiles, setAttachedFiles] = React.useState<GetProp<typeof Attachments, 'items'>>([
+    {
+      uid: '-1',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png',
+    },
+    {
+      uid: '-2',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png',
+    },
+    {
+      uid: '-3',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png',
+    },
+  ]);
+  const handleFileChange: GetProp<typeof Attachments, 'onChange'> = async ({ fileList }) => {
+    setAttachedFiles(fileList);
+  }
+
+  const senderHeader = (
+    <ChatInput.Header
+      closable={false}
+      open={attachedFiles?.length > 0}
+    >
+      <Attachments
+        items={attachedFiles}
+        onChange={handleFileChange}
+      />
+    </ChatInput.Header>
+  );
+  const attachmentsNode = (
+    <Upload onChange={handleFileChange} fileList={attachedFiles} showUploadList={false} key="upload">
+      <IconButton icon={<SparkAttachmentLine />} bordered={false} />
+    </Upload>
+  );
+
+  return <ChatInput placeholder='Please type here...' header={senderHeader}
+    prefix={attachmentsNode}></ChatInput>
+}

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

@@ -0,0 +1,29 @@
+---
+group:
+  title: Input
+  order: 2
+title: ChatInput
+description: AI Input Box
+---
+
+<DemoTitle title="ChatInput" desc="AI Input Box" llmTxtName="Sender"></DemoTitle>
+
+<code src="./demo/basic.tsx" center height="350">Example</code>
+
+<Install>import { ChatInput } from '@agentscope-ai/chat'</Install>
+
+
+#### ChatInput Examples
+
+The following are examples and variations of this component
+
+<code src="./demo/loading.tsx" center height="350">Pause During Generation</code>
+<code src="./demo/withImage.tsx" center height="350">Upload Image</code>
+<code src="./demo/withFile.tsx" center height="350">Upload File</code>
+<code src="./demo/moreMode.tsx" center height="350">Custom Mode</code>
+<code src="./demo/morePrefixAction.tsx" center height="350">Custom Functionality</code>
+<code src="./demo/asr.tsx" center height="350">Voice Input</code>
+
+#### API
+
+<ApiParser source="./index.tsx" id="SenderProps"></ApiParser>