@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Markdown/plugins/latex/index.ts

@@ -0,0 +1,109 @@
+import katex, { type KatexOptions } from 'katex';
+import { TokenizerAndRendererExtension } from 'marked';
+
+import 'katex/dist/katex.min.css';
+
+const inlineRuleNonStandard =
+  /^(?:\${1,2}([^$]{1,10000}?)\${1,2}|\\\(([\s\S]{1,10000}?)\\\)|\\\[((?:\\.|[^\\]){1,10000}?)\\\])/;
+const blockRule = /^(\${1,2})\n([\s\S]{1,10000}?)\n\1(?:\n|$)|^\\\[((?:\\.|[^\\]){1,10000}?)\\\]/;
+
+type LatexOption = {
+  katexOptions?: KatexOptions;
+  replaceAlignStart?: boolean;
+};
+
+type Token = {
+  text: string;
+  displayMode: boolean;
+};
+
+type Render = (token: Token) => string;
+
+type ILevel = 'inline' | 'block';
+
+// fix katex not support align*: https://github.com/KaTeX/KaTeX/issues/1007
+function replaceAlign(text: string) {
+  return text ? text.replace(/\{align\*\}/g, '{aligned}') : text;
+}
+
+function createRenderer(options: KatexOptions, newlineAfter: boolean) {
+  return (token: Token) =>
+    katex.renderToString(token.text, {
+      ...options,
+      displayMode: token.displayMode,
+    }) + (newlineAfter ? '\n' : '');
+}
+
+function inlineKatex(renderer: Render, replaceAlignStart: boolean) {
+  const ruleReg = inlineRuleNonStandard;
+  return {
+    name: 'inlineKatex',
+    level: 'inline' as ILevel,
+    start(src: string) {
+      if (!src.includes('$') && !src.includes('\\(')) return;
+
+      const indices = [src.indexOf('$'), src.indexOf('\\(')].filter((idx) => idx !== -1);
+
+      if (indices.length === 0) return;
+
+      const katexIndex = Math.min(...indices);
+      const possibleKatex = src.slice(katexIndex);
+
+      if (possibleKatex.match(ruleReg)) {
+        return katexIndex;
+      }
+    },
+    tokenizer(src: string) {
+      const match = src.match(inlineRuleNonStandard);
+      if (match) {
+        let text = (match[1] || match[2]).trim();
+        if (replaceAlignStart) {
+          text = replaceAlign(text);
+        }
+        return {
+          type: 'inlineKatex',
+          raw: match[0],
+          text,
+          displayMode: false,
+        };
+      }
+    },
+    renderer,
+  };
+}
+
+function blockKatex(renderer: Render, replaceAlignStart: boolean) {
+  return {
+    name: 'blockKatex',
+    level: 'block' as ILevel,
+    tokenizer(src: string) {
+      const match = src.match(blockRule);
+      if (match) {
+        let text = replaceAlign(match[2] || match[3].trim());
+        if (replaceAlignStart) {
+          text = replaceAlign(text);
+        }
+        return {
+          type: 'blockKatex',
+          raw: match[0],
+          text,
+          displayMode: true,
+        };
+      }
+    },
+    renderer,
+  };
+}
+
+const Latex = (options?: LatexOption): TokenizerAndRendererExtension[] => {
+  const { replaceAlignStart = true, katexOptions = { output: 'html' } } = options || {};
+
+  const inlineRenderer = createRenderer(katexOptions, false);
+  const blockRenderer = createRenderer(katexOptions, true);
+  return [
+    inlineKatex(inlineRenderer, replaceAlignStart),
+    blockKatex(blockRenderer, replaceAlignStart),
+  ];
+};
+
+export default Latex;

package/components/Markdown/plugins/type.ts

@@ -0,0 +1,71 @@
+import type { KatexOptions } from 'katex';
+import type { TokenizerAndRendererExtension } from 'marked';
+import type { ReactNode } from 'react';
+import type { SyntaxHighlighterProps } from 'react-syntax-highlighter';
+
+export type LatexOption = {
+  katexOptions?: KatexOptions;
+  replaceAlignStart?: boolean;
+};
+
+type HighlightCodeType = 'root' | 'header' | 'headerTitle' | 'code';
+export type HighlightCodeProps = {
+  lang?: string;
+  children: string;
+  header?: ReactNode | null;
+  prefixCls?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  highlightProps?: Partial<SyntaxHighlighterProps>;
+  // Semantic
+  classNames?: Partial<Record<HighlightCodeType, string>>;
+  styles?: Partial<Record<HighlightCodeType, React.CSSProperties>>;
+};
+
+type MermaidType = 'root' | 'header' | 'graph' | 'code';
+export type MermaidProps = {
+  children: string;
+  header?: ReactNode | null;
+  prefixCls?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  highlightProps?: Partial<SyntaxHighlighterProps>;
+  // Semantic
+  classNames?: Partial<Record<MermaidType, string>>;
+  styles?: Partial<Record<MermaidType, React.CSSProperties>>;
+};
+
+interface BaseComponentConfig {
+  style: React.CSSProperties;
+  styles: Record<string, React.CSSProperties>;
+  className: string;
+  classNames: Record<string, string>;
+}
+
+type ComponentConfig<
+  CompProps extends Record<PropertyKey, any>,
+  PickType extends keyof CompProps = keyof BaseComponentConfig,
+> = Pick<CompProps, PickType>;
+
+export interface MarkdownComponentsConfig {
+  highlightCode?: ComponentConfig<HighlightCodeProps>;
+  mermaid?: ComponentConfig<MermaidProps>;
+}
+
+export type PluginsType = {
+  /**
+   * @desc 渲染数学公式Latex语法。
+   * @descEN Rendering mathematical formulas using Latex syntax.
+   */
+  Latex: (options?: LatexOption) => TokenizerAndRendererExtension[];
+  /**
+   * @desc 渲染代码高亮。
+   * @descEN Highlight the rendering code.
+   */
+  HighlightCode: (props: HighlightCodeProps) => React.ReactNode;
+  /**
+   * @desc 渲染 Mermaid 图表。
+   * @descEN Rendering the Mermaid Chart.
+   */
+  Mermaid: (props: MermaidProps) => React.ReactNode;
+};

package/components/Mermaid/demo/basic.tsx

@@ -0,0 +1,12 @@
+import { Mermaid } from '@agentscope-ai/chat';
+import React from 'react';
+
+const content = `sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!
+`;
+
+export default function () {
+  return <Mermaid content={content} height={300} />;
+}

package/components/Mermaid/demo/class.tsx

@@ -0,0 +1,31 @@
+import { Mermaid } from '@agentscope-ai/chat';
+import React from 'react';
+
+const classDiagram = `classDiagram
+    note "From Duck till Zebra"
+    Animal <|-- Duck
+    note for Duck "can fly\\ncan swim\\ncan dive\\ncan help in debugging"
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+`;
+
+export default () => {
+  return <Mermaid content={classDiagram} height={400} />;
+};

package/components/Mermaid/demo/flowchart.tsx

@@ -0,0 +1,13 @@
+import { Mermaid } from '@agentscope-ai/chat';
+import React from 'react';
+
+const content = `flowchart LR
+    A[Hard edge] -->|Link text| B(Round edge)
+    B --> C{Decision}
+    C -->|One| D[Result one]
+    C -->|Two| E[Result two]
+`;
+
+export default () => {
+  return <Mermaid content={content} height={200} />;
+};

package/components/Mermaid/demo/sequence.tsx

@@ -0,0 +1,18 @@
+import { Mermaid } from '@agentscope-ai/chat';
+import React from 'react';
+
+const content = `sequenceDiagram
+    autonumber
+    Alice->>John: Hello John, how are you?
+    loop HealthCheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+`;
+
+export default () => {
+  return <Mermaid content={content} height={400} />;
+};

package/components/Mermaid/demo/state.tsx

@@ -0,0 +1,16 @@
+import { Mermaid } from '@agentscope-ai/chat';
+import React from 'react';
+
+const content = `stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+ `;
+
+export default function () {
+  return <Mermaid content={content} height={400} />;
+}

package/components/Mermaid/demo/timeline.tsx

@@ -0,0 +1,15 @@
+import { Mermaid } from '@agentscope-ai/chat';
+import React from 'react';
+
+const content = `timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook
+         : Google
+    2005 : YouTube
+    2006 : Twitter
+`;
+
+export default function () {
+  return <Mermaid content={content} height={300} />;
+}

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

@@ -0,0 +1,27 @@
+---
+group:
+  title: Output
+  order: 3
+title: Mermaid
+description: Mermaid Chart
+---
+
+<DemoTitle title="Mermaid" desc="Mermaid is a component for rendering Mermaid diagrams in React. It supports various diagram types like flowcharts, sequence diagrams, class diagrams, and more with customizable styling and interactive features."></DemoTitle>
+
+<code src="./demo/basic.tsx" height="auto">Example</code>
+
+<Install>import { Mermaid } from '@agentscope-ai/chat'</Install>
+
+#### More Mermaid Example
+
+<code src="./demo/flowchart.tsx" height="auto">Flowchart</code>
+<code src="./demo/sequence.tsx" height="auto">Sequence Diagram</code>
+<code src="./demo/class.tsx" height="auto">Class Diagram</code>
+<code src="./demo/state.tsx" height="auto">State Diagram</code>
+<code src="./demo/timeline.tsx" height="auto">Timeline</code>
+
+For more examples, please refer to [Mermaid Docs](https://mermaid.js.org/intro/)
+
+#### API
+
+<ApiParser source="./index.tsx" id="IMermaidProps"></ApiParser>

package/components/Mermaid/index.tsx

@@ -0,0 +1,118 @@
+import { Image } from '@agentscope-ai/design';
+import { useAsyncEffect } from 'ahooks';
+import { theme as AntdTheme } from 'antd';
+import { kebabCase } from 'lodash';
+import { MermaidConfig, Mermaid as MermaidInstance } from 'mermaid';
+import React, { useEffect, useId, useMemo, useState } from 'react';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { createGlobalStyle } from 'antd-style';
+
+const Style = createGlobalStyle`
+.${p => p.theme.prefixCls}-mermaid {
+  &-preview img {
+    background: ${(p) => p.theme.colorBgBase};
+  }
+}
+`;
+
+// 懒加载 Mermaid 实例
+let mermaidPromise: Promise<MermaidInstance | undefined>;
+const genMermaidPromise = async () => {
+  if (mermaidPromise) return mermaidPromise;
+  mermaidPromise = import('mermaid').then(module => module.default);
+  return mermaidPromise;
+}
+
+
+export interface IMermaidProps {
+  /**
+   * @description Mermaid 图表的源代码，包含图表定义和配置
+   * @descriptionEn Mermaid chart source code containing chart definition and configuration
+   */
+  content: string;
+  /**
+   * @description 图表的宽度，支持数字（像素）或字符串（CSS单位）
+   * @descriptionEn Width of the chart, supports number (pixels) or string (CSS units)
+   */
+  width?: number | string;
+  /**
+   * @description 图表的高度，支持数字（像素）或字符串（CSS单位）
+   * @descriptionEn Height of the chart, supports number (pixels) or string (CSS units)
+   */
+  height?: number | string;
+}
+
+export default function Mermaid(props: IMermaidProps) {
+  const { content, width, height } = props;
+  const { theme, getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('mermaid');
+
+  const mermaidConfig: MermaidConfig = useMemo(
+    () => ({
+      theme: theme?.algorithm === AntdTheme.darkAlgorithm ? 'dark' : 'default',
+      securityLevel: 'loose',
+
+      startOnLoad: false,
+    }),
+    [theme?.algorithm, theme?.token.fontFamily],
+  );
+
+  const [renderedContent, setRenderedContent] = useState('');
+  const [blobUrl, setBlobUrl] = useState<string>();
+
+  const id = useId();
+  const mermaidId = kebabCase(`mermaid-${id}`);
+
+  useAsyncEffect(async () => {
+    try {
+      const mermaidInstance = await genMermaidPromise();
+      if (!mermaidInstance) {
+        setRenderedContent(content);
+        return;
+      }
+      const isValid = await mermaidInstance.parse(content);
+      if (isValid) {
+        mermaidInstance.initialize(mermaidConfig);
+        const { svg } = await mermaidInstance.render(mermaidId, content);
+        setRenderedContent(svg);
+      } else {
+        throw new Error('Invalid Mermaid syntax');
+      }
+    } catch (error) {
+      if (!renderedContent) console.error('Mermaid parse error: ', error);
+      setRenderedContent(renderedContent || '');
+    }
+  }, [content, mermaidConfig]);
+
+
+  useEffect(() => {
+    if (renderedContent) {
+      const blob = new Blob([renderedContent], { type: 'image/svg+xml' });
+      const url = URL.createObjectURL(blob);
+      setBlobUrl(url);
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+
+    }
+  }, [renderedContent]);
+
+  if (!blobUrl) return null;
+
+
+  return (
+    <>
+      <Style />
+      <Image
+        className={prefixCls}
+        src={blobUrl}
+        alt={'mermaid'}
+        width={width}
+        height={height}
+        preview={{
+          rootClassName: `${prefixCls}-preview`
+        }}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,27 @@
+---
+group:
+  title: 输出
+  order: 3
+title: Mermaid
+description: Mermaid 图表
+---
+
+<DemoTitle title="Mermaid" desc="Mermaid 是 React 中用于渲染 Mermaid 图表的组件。它支持多种图表类型，如流程图、序列图、类图等，具有可定制的样式和交互功能。"></DemoTitle>
+
+<code src="./demo/basic.tsx" height="auto">示例</code>
+
+<Install>import { Mermaid } from '@agentscope-ai/chat'</Install>
+
+#### Mermaid 更多示例
+
+<code src="./demo/flowchart.tsx" height="auto">Flowchart</code>
+<code src="./demo/sequence.tsx" height="auto">Sequence Diagram</code>
+<code src="./demo/class.tsx" height="auto">Class Diagram</code>
+<code src="./demo/state.tsx" height="auto">State Diagram</code>
+<code src="./demo/timeline.tsx" height="auto">Timeline</code>
+
+更多示例请参考 [Mermaid Docs](https://mermaid.js.org/intro/)
+
+#### API
+
+<ApiParser source="./index.tsx" id="IMermaidProps"></ApiParser>

package/components/OperateCard/OperateCard.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { useProviderContext } from '../Provider';
+import Style from './style';
+import classNames from 'classnames';
+import { SparkDownLine, SparkUpLine } from '@agentscope-ai/icons';
+import { IconButton } from '@agentscope-ai/design';
+
+
+export interface IOperateCardProps {
+  /**
+   * @description 头部配置
+   * @descriptionEn Header Config
+   * @default {}
+   */
+  header: {
+    className?: string;
+    style?: React.CSSProperties;
+    icon: React.ReactNode;
+    title: React.ReactNode | string;
+    description?: React.ReactNode | string;
+  },
+  /**
+   * @description 内容配置
+   * @descriptionEn Body Config
+   * @default {}
+   */
+  body?: {
+    children?: React.ReactNode;
+    defaultOpen?: boolean;
+  }
+}
+
+function LineBody(props: {
+  children?: React.ReactNode;
+}) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('operate-card');
+  return <>
+    <div className={`${prefixCls}-line-body`}>
+      {props.children}
+    </div>
+  </>
+}
+
+
+function OperateCard(props: IOperateCardProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('operate-card');
+  const [open, setOpen] = useState(props.body?.defaultOpen || false);
+
+  return <>
+    <Style />
+    <div className={prefixCls}>
+      <div className={classNames(`${prefixCls}-header`, props.header.className, {
+        [`${prefixCls}-header-has-body`]: props.body
+      })} onClick={() => {
+        if (props.body) {
+          setOpen(!open)
+        }
+      }}>
+        <div className={`${prefixCls}-header-icon`}>
+          {props.header.icon}
+        </div>
+        {
+          typeof props.header.title === 'string' ? <div className={`${prefixCls}-header-title`}>{props.header.title}</div> : props.header.title
+        }
+        {
+          props.header.description && <div className={`${prefixCls}-header-description`}>
+            {props.header.description}
+          </div>
+        }
+
+        {
+          props.body && <IconButton
+            size="small"
+            bordered={false}
+            className={`${prefixCls}-header-arrow`}
+            icon={open ? <SparkUpLine /> : <SparkDownLine />}
+          />
+        }
+      </div>
+      {
+        props.body && open && <div className={`${prefixCls}-body`}>
+          {props.body.children}
+        </div>
+      }
+    </div >
+  </>
+}
+
+OperateCard.LineBody = LineBody;
+
+export default OperateCard;

package/components/OperateCard/demo/index.tsx

@@ -0,0 +1,35 @@
+import { OperateCard } from '@agentscope-ai/chat';
+import { SparkBookLine } from '@agentscope-ai/icons';
+import { Flex } from 'antd';
+
+
+export default function () {
+
+  return <Flex vertical gap={16}>
+    <OperateCard header={{
+      icon: <SparkBookLine />,
+      title: 'OperateCard',
+      description: 'OperateCard Description',
+    }} />
+
+
+
+    <OperateCard header={{
+      icon: <SparkBookLine />,
+      title: 'OperateCard',
+      description: 'OperateCard Description',
+    }} body={{
+      children: <OperateCard.LineBody>
+        <div style={{ marginLeft: 16 }}>
+          <div>
+            OperateCard Body
+          </div>
+          <div>
+            OperateCard Body
+          </div>
+        </div>
+      </OperateCard.LineBody>,
+      defaultOpen: true,
+    }} />
+  </Flex>
+}

package/components/OperateCard/demo/rag.tsx

@@ -0,0 +1,19 @@
+import { Rag } from '@agentscope-ai/chat';
+
+export default function () {
+  return <Rag
+    subTitle="GPT-5技术博客、行业分析、技术特性"
+    list={[
+      {
+        title: '【文档库】GPT-5 技术博客', content: 'Aliyun Bailianis a product offered by Alibaba Cloud, which is the cloud computing arm of Alibaba Group. Bailian is a high-performance AI development platform designed to help users build, deploy, and manage machine learning models and AI applications more efficiently.', footer: '来源文档：（真）拟定稿。GPT 的制度研究',
+        images: [
+          'https://gw.alicdn.com/imgextra/i1/O1CN01n7R7cy1MkE5OYeXV9_!!6000000001472-55-tps-24-24.svg',
+          'https://gw.alicdn.com/imgextra/i1/O1CN01n7R7cy1MkE5OYeXV9_!!6000000001472-55-tps-24-24.svg',
+          'https://gw.alicdn.com/imgextra/i1/O1CN01n7R7cy1MkE5OYeXV9_!!6000000001472-55-tps-24-24.svg',
+        ],
+      },
+      { title: '【文档库】GPT-5 行业分析', content: 'Aliyun Bailianis a product offered by Alibaba Cloud, which is the cloud computing arm of Alibaba Group. Bailian is a high-performance AI development platform designed to help users build, deploy, and manage machine learning models and AI applications more efficiently.', footer: '来源文档：（真）拟定稿。GPT 的制度研究' },
+      { title: '【文档库】GPT-5 技术特性', content: 'Aliyun Bailianis a product offered by Alibaba Cloud, which is the cloud computing arm of Alibaba Group. Bailian is a high-performance AI development platform designed to help users build, deploy, and manage machine learning models and AI applications more efficiently.', footer: '来源文档：（真）拟定稿。GPT 的制度研究' },
+    ]}
+  />
+}

package/components/OperateCard/demo/thinking.tsx

@@ -0,0 +1,17 @@
+import { Thinking } from "@agentscope-ai/chat";
+
+export default function () {
+  return <Thinking
+    title="Deep thinking"
+    subTitle="I am the name of a concept that is being thought about"
+    content={`Okay, the user is asking about "citypop." Let me start by recalling what I know about that term. I remember that City Pop is a genre of music, but I need to make sure I'm accurate.
+
+First, when did City Pop originate? I think it was in Japan during the late 1970s and 1980s. That makes sense because Japan's economy was booming then, leading to a vibrant urban culture. The genre probably blends Western styles like funk, jazz, and disco with Japanese pop elements. Artists like Tatsuro Yamashita and Mariya Takeuchi come to mind. Oh, and there's that song "Plastic Love" by Mariya Takeuchi that went viral online recently, which might have sparked renewed interest.
+
+I should also mention the themes of City Pop songs—they often reflect city life, romance, and leisure, fitting the upbeat and cosmopolitan vibe of the time. The visual style associated with it includes retro anime and vibrant cityscapes, which adds to its aesthetic appeal. It's interesting how the internet, especially platforms like YouTube and Spotify, helped revive this genre internationally. Maybe I should note that connection between modern digital culture and the resurgence of City Pop.
+
+Wait, are there any subgenres or key characteristics I should highlight? The use of synthesizers, smooth vocals, and lush production are typical. Also, City Pop was influenced by yacht rock and soft rock from the West. It's important to link it to Japan's economic bubble era, as that context explains the music's optimistic and luxurious feel.
+
+I need to ensure I don't confuse it with other Japanese genres like J-pop or Enka. City Pop is distinct in its fusion with Western sounds. Including notable albums, like Tatsuro Yamashita's "For You" or Anri's "Timely!!", could be helpful. Oh, and the connection to future funk and vaporwave genres that sample City Pop tracks is a good point for its modern influence.`}
+  />
+}

package/components/OperateCard/demo/todo.tsx

@@ -0,0 +1,28 @@
+import { Flex } from 'antd';
+import { TodoList } from "@agentscope-ai/chat";
+
+
+export default function () {
+  return <Flex vertical gap={16}>
+
+    <TodoList
+      title="Task List"
+      defaultOpen={true}
+      list={[
+        { title: '1、搜索GPT-5的官方发布信息，确认新特性', status: 'todo' },
+        { title: '2、找技术博客和行业分析，获取GPT-5详细技术特性', status: 'todo' },
+        { title: '3、交叉验证多个来源信息，确保准确性', status: 'todo' },
+        { title: '4、整理信息并生成结构化文本报告', status: 'todo' },
+      ]}
+    />
+    <TodoList
+      title="Task List"
+      defaultOpen={false}
+      list={[
+        { title: '1、搜索GPT-5的官方发布信息，确认新特性', status: 'done' },
+        { title: '2、找技术博客和行业分析，获取GPT-5详细技术特性', status: 'running' },
+        { title: '3、交叉验证多个来源信息，确保准确性', status: 'todo' },
+        { title: '4、整理信息并生成结构化文本报告', status: 'todo' },
+      ]}
+    /></Flex>
+}

package/components/OperateCard/demo/toolCall.tsx

@@ -0,0 +1,14 @@
+import { ToolCall } from "@agentscope-ai/chat";
+export default function () {
+  return <ToolCall
+    title="Call Tool"
+    subTitle="I am the name of a tool that is being called"
+    input={{
+      foo: 'bar',
+      baz: 'qux',
+    }}
+    output={{
+      result: 'result',
+    }}
+  />
+}