@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Sender/useSpeech.ts

@@ -0,0 +1,133 @@
+import { useEvent, useMergedState } from 'rc-util';
+import React from 'react';
+
+// Ensure that the SpeechRecognition API is available in the browser
+let SpeechRecognition: any;
+
+if (!SpeechRecognition && typeof window !== 'undefined') {
+  SpeechRecognition =
+    (window as any).SpeechRecognition ||
+    (window as any).webkitSpeechRecognition;
+}
+
+export type ControlledSpeechConfig = {
+  recording?: boolean;
+  onRecordingChange: (recording: boolean) => void;
+};
+
+export type AllowSpeech = boolean | ControlledSpeechConfig;
+
+export default function useSpeech(
+  onSpeech: (transcript: string) => void,
+  allowSpeech?: AllowSpeech,
+) {
+  const onEventSpeech = useEvent(onSpeech);
+
+  // ========================== Speech Config ==========================
+  const [controlledRecording, onControlledRecordingChange, speechInControlled] =
+    React.useMemo(() => {
+      if (typeof allowSpeech === 'object') {
+        return [
+          allowSpeech.recording,
+          allowSpeech.onRecordingChange,
+          typeof allowSpeech.recording === 'boolean',
+        ] as const;
+      }
+
+      return [undefined, undefined, false] as const;
+    }, [allowSpeech]);
+
+  // ======================== Speech Permission ========================
+  const [permissionState, setPermissionState] =
+    React.useState<PermissionState | null>(null);
+
+  React.useEffect(() => {
+    if (typeof navigator !== 'undefined' && 'permissions' in navigator) {
+      let lastPermission: PermissionStatus | null = null;
+
+      (navigator as any).permissions
+        .query({ name: 'microphone' })
+        .then((permissionStatus: PermissionStatus) => {
+          setPermissionState(permissionStatus.state);
+
+          // Keep the last permission status.
+          permissionStatus.onchange = function () {
+            setPermissionState(this.state);
+          };
+
+          lastPermission = permissionStatus;
+        });
+
+      return () => {
+        // Avoid memory leaks
+        if (lastPermission) {
+          lastPermission.onchange = null;
+        }
+      };
+    }
+  }, []);
+
+  // Convert permission state to a simple type
+  const mergedAllowSpeech = SpeechRecognition && permissionState !== 'denied';
+
+  // ========================== Speech Events ==========================
+  const recognitionRef = React.useRef<any | null>(null);
+  const [recording, setRecording] = useMergedState(false, {
+    value: controlledRecording,
+  });
+
+  const forceBreakRef = React.useRef(false);
+
+  const ensureRecognition = () => {
+    if (mergedAllowSpeech && !recognitionRef.current) {
+      const recognition = new SpeechRecognition();
+
+      recognition.onstart = () => {
+        setRecording(true);
+      };
+
+      recognition.onend = () => {
+        setRecording(false);
+      };
+
+      recognition.onresult = (event: SpeechRecognitionResult) => {
+        if (!forceBreakRef.current) {
+          const transcript = (event as any).results?.[0]?.[0]?.transcript;
+          onEventSpeech(transcript);
+        }
+
+        forceBreakRef.current = false;
+      };
+
+      recognitionRef.current = recognition;
+    }
+  };
+
+  const triggerSpeech = useEvent((forceBreak: boolean) => {
+    // Ignore if `forceBreak` but is not recording
+    if (forceBreak && !recording) {
+      return;
+    }
+
+    forceBreakRef.current = forceBreak;
+
+    if (speechInControlled) {
+      // If in controlled mode, do nothing
+      onControlledRecordingChange?.(!recording);
+    } else {
+      ensureRecognition();
+
+      if (recognitionRef.current) {
+        if (recording) {
+          recognitionRef.current.stop();
+          onControlledRecordingChange?.(false);
+        } else {
+          recognitionRef.current.start();
+          onControlledRecordingChange?.(true);
+        }
+      }
+    }
+  });
+
+  return [mergedAllowSpeech, triggerSpeech, recording] as const;
+}

package/components/StatusCard/demo/index.tsx

@@ -0,0 +1,32 @@
+import { StatusCard } from '@agentscope-ai/chat';
+import { Flex } from 'antd';
+import { useState } from 'react';
+
+
+export default function () {
+  const [done, setDone] = useState(false);
+  return <Flex vertical gap={16}>
+    <StatusCard title="Success" status="success">
+
+      <StatusCard.Statistic values={[
+        { title: 'Runtime', value: '23min' },
+        { title: 'Input Token', value: '200k' },
+        { title: 'Output Token', value: '1000k' },
+      ]} />
+    </StatusCard>
+    <StatusCard title="Execution Failed" description="Failed to load resource: net::ERR_CONNECTION_CLOSED" status="error" />
+    <StatusCard title="Warning" status="warning" />
+
+
+    <StatusCard.HITL
+      done={done}
+      onDone={() => setDone(true)}
+      title="Human intervention required"
+      description="Please log in after entering your account and password"
+      waitButtonText="I have completed, continue task"
+      doneButtonText="User has confirmed"
+    />
+
+
+  </Flex>
+}

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

@@ -0,0 +1,30 @@
+---
+group:
+  title: Output
+  order: 3
+title: StatusCard
+description: Express the execution status of LLM or Agent
+---
+
+<DemoTitle title="StatusCard" desc="Express the execution status of LLM or Agent"></DemoTitle>
+
+<code src="./demo/index.tsx" height="auto">Example</code>
+
+
+<Install>import { StatusCard } from '@agentscope-ai/chat'</Install>
+
+
+
+#### API
+
+##### IStatusCardProps
+
+<ApiParser source="./index.tsx" id="IStatusCardProps"></ApiParser>
+
+##### IStatusCardHITLProps
+
+<ApiParser source="./index.tsx" id="IStatusCardHITLProps"></ApiParser>
+
+##### IStatusCardStatisticProps
+
+<ApiParser source="./index.tsx" id="IStatusCardStatisticProps"></ApiParser>

package/components/StatusCard/index.tsx

@@ -0,0 +1,162 @@
+import { SparkCheckCircleFill, SparkCheckCircleLine, SparkErrorCircleFill, SparkErrorCircleLine, SparkStopCircleFill, SparkStopCircleLine, SparkTrueLine, SparkWarningCircleFill, SparkWarningCircleLine } from '@agentscope-ai/icons';
+import { useProviderContext } from '../Provider';
+import Style from './style';
+import classNames from 'classnames';
+import { ButtonProps } from 'antd';
+import { Button } from '@agentscope-ai/design';
+
+export interface IStatusCardProps {
+  /**
+   * @description 标题
+   * @descriptionEn Title
+   */
+  title: string;
+  /**
+   * @description 状态
+   * @descriptionEn Status
+   */
+  status: 'success' | 'error' | 'warning' | 'info';
+  /**
+   * @description 描述
+   * @descriptionEn Description
+   */
+  description?: string;
+  /**
+   * @description 图标
+   * @descriptionEn Icon
+   */
+  icon?: React.ReactNode;
+  /**
+   * @description 子元素
+   * @descriptionEn Children
+   */
+  children?: React.ReactNode;
+}
+
+
+
+function StatusCard(props: IStatusCardProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('status-card');
+
+  const icon = props.icon || {
+    'success': <SparkCheckCircleFill />,
+    'error': <SparkErrorCircleFill />,
+    'warning': <SparkStopCircleLine />,
+    'info': <SparkWarningCircleFill />,
+  }[props.status];
+
+
+  return <>
+    <Style />
+    <div className={classNames(prefixCls, `${prefixCls}-${props.status}`)}>
+      <div className={`${prefixCls}-header`}>
+        <div className={`${prefixCls}-header-top`}>
+          <div className={`${prefixCls}-header-icon`}>{icon}</div>
+          <div className={`${prefixCls}-header-title`}>{props.title}</div>
+        </div>
+        {
+          props.description && <div className={`${prefixCls}-header-description`}>{props.description}</div>
+        }
+      </div>
+      {
+        props.children && <div className={`${prefixCls}-body`}>{props.children}</div>
+      }
+    </div>
+  </>
+}
+
+
+export interface IStatusCardHITLProps {
+  /**
+   * @description 标题
+   * @descriptionEn Title
+   */
+  title: string;
+  /**
+   * @description 描述
+   * @descriptionEn Description
+   * @default '需要用户人工干预'
+   */
+  description?: string;
+  /**
+   * @description 等待按钮文本
+   * @descriptionEn Wait Button Text
+   * @default '我已完成，继续任务'
+   */
+  waitButtonText?: string;
+  /**
+   * @description 完成按钮文本
+   * @descriptionEn Done Button Text
+   * @default '用户已确认'
+   */
+  doneButtonText?: string;
+  /**
+   * @description 是否完成
+   * @descriptionEn Done
+   */
+  done: boolean;
+  /**
+   * @description 完成回调
+   * @descriptionEn Done Callback
+   */
+  onDone: () => void;
+}
+
+
+StatusCard.HITL = function (props: IStatusCardHITLProps) {
+  const { title = '需要用户人工干预', description, waitButtonText = '我已完成，继续任务', doneButtonText = '用户已确认' } = props;
+
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('status-card');
+
+  const button = props.done ?
+    <Button onClick={props.onDone} type="primary" disabled icon={<SparkTrueLine />}>{doneButtonText}</Button> :
+    <Button onClick={props.onDone} type="primary" >{waitButtonText}</Button>;
+
+
+  return <StatusCard
+    status='info'
+    title={title}
+
+  >
+    <div className={`${prefixCls}-HITL`}>
+      {
+        description && <div className={`${prefixCls}-HITL-desc`}>{description}</div>
+      }
+
+      <div className={`${prefixCls}-HITL-button`}>
+        {button}
+      </div>
+    </div>
+  </StatusCard>
+}
+
+export interface IStatusCardStatisticProps {
+  /**
+   * @description 统计数据
+   * @descriptionEn Values
+   */
+  values: {
+    title: string;
+    value: string;
+  }[];
+}
+
+
+StatusCard.Statistic = function (props: IStatusCardStatisticProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('status-card');
+
+  return <div className={`${prefixCls}-statistic`}>
+    {props.values.map(item => {
+      return <div className={`${prefixCls}-statistic-item`}>
+        <div className={`${prefixCls}-statistic-item-title`}>{item.title}</div>
+        <div className={`${prefixCls}-statistic-item-value`}>{item.value}</div>
+      </div>
+    })}
+  </div>
+}
+
+
+export default StatusCard;

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

@@ -0,0 +1,27 @@
+---
+group:
+  title: 输出
+  order: 3
+title: StatusCard
+description: 表达LLM或Agent的执行任务状态
+---
+
+<DemoTitle title="StatusCard" desc="表达LLM或Agent的执行任务状态"></DemoTitle>
+
+<code src="./demo/index.tsx" height="auto">示例</code>
+
+<Install>import { StatusCard } from '@agentscope-ai/chat'</Install>
+
+#### API
+
+##### IStatusCardProps
+
+<ApiParser source="./index.tsx" id="IStatusCardProps"></ApiParser>
+
+##### IStatusCardHITLProps
+
+<ApiParser source="./index.tsx" id="IStatusCardHITLProps"></ApiParser>
+
+##### IStatusCardStatisticProps
+
+<ApiParser source="./index.tsx" id="IStatusCardStatisticProps"></ApiParser>

package/components/StatusCard/style.ts

@@ -0,0 +1,119 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-status-card {
+  width: 100%;
+  border-radius: ${(p) => p.theme.borderRadiusLG}px;
+  border: 1px solid ${(p) => p.theme.colorBorderSecondary};
+  overflow: hidden;
+  &-success {
+    background-color: ${(p) => p.theme.colorSuccessBg};
+
+    .${(p) => p.theme.prefixCls}-status-card-header-icon {
+      color: ${(p) => p.theme.colorSuccess};
+    }
+  }
+  &-error {
+    background-color: ${(p) => p.theme.colorErrorBg};
+
+    .${(p) => p.theme.prefixCls}-status-card-header-icon {
+      color: ${(p) => p.theme.colorError};
+    }
+  }
+  &-warning {
+    background-color: ${(p) => p.theme.colorWarningBg};
+
+    .${(p) => p.theme.prefixCls}-status-card-header-icon {
+      color: ${(p) => p.theme.colorWarning};
+    }
+  }
+  &-info {
+    background-color: ${(p) => p.theme.colorFillTertiary};
+
+    .${(p) => p.theme.prefixCls}-status-card-header-icon {
+      color: ${(p) => p.theme.colorInfo};
+    }
+  }
+
+  &-header-icon {
+    font-size: 20px;
+  }
+
+
+  &-header-title {
+    font-size: 16px;
+    color: ${(p) => p.theme.colorText};
+  }
+
+  &-header {
+    padding: 0 12px;
+  }
+
+  &-header-top {
+    display: flex;
+    align-items: center;
+    margin: 8px 0;
+    gap: 8px;
+  }
+
+
+  &-header-description {
+    margin-top: -6px;
+    margin-bottom: 8px;
+    margin-left: 30px;
+    font-size: 12px;
+    color: ${(p) => p.theme.colorTextTertiary};
+  }
+
+
+
+
+
+  &-HITL {
+    padding: 16px;
+    border-top: 1px solid ${(p) => p.theme.colorBorderSecondary};
+    background-color: ${(p) => p.theme.colorBgBase};
+    border-radius: ${(p) => p.theme.borderRadiusLG}px ${(p) =>
+  p.theme.borderRadiusLG}px 0 0;
+
+    &-desc {
+      color: ${(p) => p.theme.colorTextTertiary};
+      margin-bottom: 12px;
+    }
+
+    &-button {
+      display: flex;
+      justify-content: flex-end;
+    }
+  
+  }
+
+  &-statistic {
+    display: flex;
+    padding: 16px 26px;
+    border-top: 1px solid ${(p) => p.theme.colorBorderSecondary};
+    background-color: ${(p) => p.theme.colorBgBase};
+    border-radius: ${(p) => p.theme.borderRadiusLG}px ${(p) =>
+  p.theme.borderRadiusLG}px 0 0;
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 8px;
+
+      &-title {
+        font-size: 12px;
+        color: ${(p) => p.theme.colorTextTertiary};
+      }
+
+      &-value {
+        font-size: 18px;
+        line-height: 32px;
+        color: ${(p) => p.theme.colorText};
+      }
+    }
+  }
+
+}
+`;

package/components/Stream/index.ts

@@ -0,0 +1,203 @@
+/**
+ * @description default separator for {@link splitStream}
+ */
+const DEFAULT_STREAM_SEPARATOR = '\n\n';
+/**
+ * @description Default separator for {@link splitPart}
+ * @example "event: delta\ndata: {\"key\": \"value\"}"
+ */
+const DEFAULT_PART_SEPARATOR = '\n';
+/**
+ * @description Default separator for key value, A colon (`:`) is used to separate keys from values
+ * @example "event: delta"
+ */
+const DEFAULT_KV_SEPARATOR = ':';
+
+/**
+ * Check if a string is not empty or only contains whitespace characters
+ */
+const isValidString = (str: string) => (str ?? '').trim() !== '';
+
+/**
+ * @description A TransformStream inst that splits a stream into parts based on {@link DEFAULT_STREAM_SEPARATOR}
+ * @example
+ *
+ * `event: delta
+ * data: { content: 'hello' }
+ *
+ * event: delta
+ * data: { key: 'world!' }
+ *
+ * `
+ */
+function splitStream() {
+  // Buffer to store incomplete data chunks between transformations
+  let buffer = '';
+
+  return new TransformStream<string, string>({
+    transform(streamChunk, controller) {
+      buffer += streamChunk;
+
+      // Split the buffer based on the separator
+      const parts = buffer.split(DEFAULT_STREAM_SEPARATOR);
+
+      // Enqueue all complete parts except for the last incomplete one
+      parts.slice(0, -1).forEach((part) => {
+        // Skip empty parts
+        if (isValidString(part)) {
+          controller.enqueue(part);
+        }
+      });
+
+      // Save the last incomplete part back to the buffer for the next chunk
+      buffer = parts[parts.length - 1];
+    },
+    flush(controller) {
+      // If there's any remaining data in the buffer, enqueue it as the final part
+      if (isValidString(buffer)) {
+        controller.enqueue(buffer);
+      }
+    },
+  });
+}
+
+/**
+ * @link https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#fields
+ */
+export type SSEFields = 'data' | 'event' | 'id' | 'retry';
+
+/**
+ * @example
+ * const sseObject = {
+ *    event: 'delta',
+ *    data: '{ key: "world!" }',
+ * };
+ */
+export type SSEOutput = Partial<Record<SSEFields, any>>;
+
+/**
+ * @description A TransformStream inst that transforms a part string into {@link SSEOutput}
+ * @example part string
+ *
+ * "event: delta\ndata: { key: 'world!' }\n"
+ *
+ * @link https://developer.mozilla.org/en-US/docs/Web/API/EventSource
+ *
+ * When handling responses with `Content-Type: text/event-stream`, the following standard practices are commonly observed:
+ * - Double newline characters (`\n\n`) are used to separate individual events.
+ * - Single newline characters (`\n`) are employed to separate line within an event.
+ */
+function splitPart() {
+  return new TransformStream<string, SSEOutput>({
+    transform(partChunk, controller) {
+      // Split the chunk into key-value pairs using the partSeparator
+      const lines = partChunk.split(DEFAULT_PART_SEPARATOR);
+
+      const sseEvent = lines.reduce<SSEOutput>((acc, line) => {
+        const separatorIndex = line.indexOf(DEFAULT_KV_SEPARATOR);
+
+        if (separatorIndex === -1) {
+          throw new Error(
+            `The key-value separator "${DEFAULT_KV_SEPARATOR}" is not found in the sse line chunk!`,
+          );
+        }
+
+        // Extract the key from the beginning of the line up to the separator
+        const key = line.slice(0, separatorIndex);
+
+        // The colon is used for comment lines, skip directly
+        if (!isValidString(key)) return acc;
+
+        // Extract the value from the line after the separator
+        const value = line.slice(separatorIndex + 1);
+
+        return { ...acc, [key]: value };
+      }, {});
+
+      if (Object.keys(sseEvent).length === 0) return;
+
+      // Reduce the key-value pairs into a single object and enqueue
+      controller.enqueue(sseEvent);
+    },
+  });
+}
+
+export interface StreamOptions<Output> {
+  /**
+   * @description 二进制数据的可读流
+   * @descriptionEn Readable stream of binary data
+   * @link https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
+   */
+  readableStream: ReadableStream<Uint8Array>;
+
+  /**
+   * @description 支持自定义转换流来转换数据流
+   * @descriptionEn Support customizable transformStream to transform streams
+   * @default sseTransformStream
+   * @link https://developer.mozilla.org/en-US/docs/Web/API/TransformStream
+   */
+  transformStream?: TransformStream<string, Output>;
+}
+
+type XReadableStream<R = SSEOutput> = ReadableStream<R> & AsyncGenerator<R>;
+
+/**
+ * @description Transform Uint8Array binary stream to {@link SSEOutput} by default
+ * @warning The `Stream` only support the `utf-8` encoding. More encoding support maybe in the future.
+ */
+function Stream<Output = SSEOutput>(
+  options: StreamOptions<Output>,
+  config?: {
+    openaiCompatible?: boolean;
+  },
+) {
+  const { readableStream, transformStream } = options;
+
+  if (!(readableStream instanceof ReadableStream)) {
+    throw new Error(
+      'The options.readableStream must be an instance of ReadableStream.',
+    );
+  }
+
+  // Default encoding is `utf-8`
+  const decoderStream = new TextDecoderStream();
+
+  const stream = (
+    transformStream
+      ? /**
+         * Uint8Array binary -> string -> Output
+         */
+        readableStream.pipeThrough(decoderStream).pipeThrough(transformStream)
+      : /**
+         * Uint8Array binary -> string -> SSE part string -> Default Output {@link SSEOutput}
+         */
+        readableStream
+          .pipeThrough(decoderStream)
+          .pipeThrough(splitStream())
+          .pipeThrough(splitPart())
+  ) as XReadableStream<Output>;
+
+  /** support async iterator */
+  stream[Symbol.asyncIterator] = async function* () {
+    const reader = this.getReader();
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      if (!value) continue;
+
+      // Transformed data through all transform pipes
+      yield config?.openaiCompatible
+        ? {
+            ...value,
+            data: value.data.slice(1),
+          }
+        : value;
+    }
+  };
+
+  return stream;
+}
+
+export default Stream;