@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Markdown/Markdown/index.tsx

@@ -0,0 +1,198 @@
+import Markdown from './Markdown';
+import CodeBlock from './defaultComponents/CodeBlock';
+import Media from './defaultComponents/Media';
+import DisabledImage from './defaultComponents/DisabledImage';
+import { useGlobalContext, useProviderContext } from '@agentscope-ai/chat';
+import { useTyping } from './hooks/useTyping';
+import type { MarkdownProps as InnerMarkdownProps } from './interface';
+import { cursorExtension, CursorComponent } from '../plugins/cursor';
+import { citationsExtension } from '../plugins/citations';
+import latex from '../plugins/latex';
+import useCitationsData from './hooks/useCitationsData';
+import classnames from 'classnames';
+import { ErrorBoundary } from "react-error-boundary";
+import { memo, useMemo } from 'react';
+
+export interface MarkdownProps {
+  /**
+   * @description 需要渲染的 Markdown 内容
+   * @descriptionEn Markdown content to be rendered
+   */
+  content?: InnerMarkdownProps['content'];
+  /**
+   * @description 光标样式类型，支持点状、下划线或布尔值控制
+   * @descriptionEn Cursor style type, supports dot, underline, or boolean control
+   */
+  cursor?: boolean | 'dot' | 'underline';
+  /**
+   * @description 基础字体大小，影响整个Markdown内容的字体大小
+   * @descriptionEn Base font size that affects the font size of the entire Markdown content
+   */
+  baseFontSize?: InnerMarkdownProps['baseFontSize'];
+  /**
+   * @description 基础行高，影响文本的行间距
+   * @descriptionEn Base line height that affects text line spacing
+   */
+  baseLineHeight?: InnerMarkdownProps['baseLineHeight'];
+  /**
+   * @description 引用数据数组，用于显示引用信息
+   * @descriptionEn Citation data array for displaying reference information
+   */
+  citations?: InnerMarkdownProps['citations'];
+  /**
+   * @description 引用映射对象，用于快速查找引用信息
+   * @descriptionEn Citation mapping object for quick lookup of reference information
+   */
+  citationsMap?: InnerMarkdownProps['citationsMap'];
+  /**
+   * @description 用于替换 HTML 元素的自定义 React 组件映射，组件会接收 domNode、streamStatus 等属性
+   * @descriptionEn Custom React components to replace HTML elements, components receive domNode, streamStatus, etc.
+   */
+  components?: InnerMarkdownProps['components'];
+  /**
+   * @description 是否允许渲染HTML标签，影响安全性
+   * @descriptionEn Whether to allow rendering HTML tags, affects security
+   */
+  allowHtml?: boolean;
+  /**
+   * @description 是否禁用图片渲染
+   * @descriptionEn Whether to disable image rendering
+   */
+  disableImage?: boolean;
+  /**
+   * @description 是否启用打字机效果，逐字显示内容
+   * @descriptionEn Whether to enable typewriter effect for character-by-character display
+   */
+  typing?: boolean | number;
+  /**
+   * @description 是否以原始文本形式显示，跳过Markdown解析
+   * @descriptionEn Whether to display as raw text, skipping Markdown parsing
+   */
+  raw?: boolean;
+  /**
+   * @description 组件的CSS类名
+   * @descriptionEn CSS class name for the component
+   */
+  className?: string;
+  /**
+   * @description 启用英文单词缓存，单词会在遇到空格或标点后才整体显示（仅在 typing 为 true 时生效）
+   * @descriptionEn Enable English word caching, words will be displayed as a whole after encountering spaces or punctuation (only works when typing is true)
+   * @default false
+   */
+  enableWordCaching?: boolean;
+  /**
+   * @description 启用 LaTeX 公式缓存，公式会在完整后才整体显示（仅在 typing 为 true 时生效）
+   * @descriptionEn Enable LaTeX formula caching, formulas will be displayed as a whole when complete (only works when typing is true)
+   * @default true
+   */
+  enableMathCaching?: boolean;
+  /**
+   * @description 启用文字出现动画效果
+   * @descriptionEn Enable text appearance animation effects
+   * @default false
+   */
+  enableAnimation?: boolean;
+}
+
+const Null = () => null;
+
+// 缓存不变的 dompurify 配置
+const EMPTY_DOMPURIFY_CONFIG = {
+  ALLOWED_TAGS: [],
+};
+
+
+/**
+ * 检测浏览器是否支持正则表达式的 lookbehind assertions
+ * iOS Safari < 16.4 不支持此特性
+ */
+function supportsLookbehindAssertions(): boolean {
+  try {
+    // 尝试创建包含正向后行断言的正则表达式
+    new RegExp('(?<=a)b');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+const isSupportsLookbehindAssertions = supportsLookbehindAssertions();
+
+console.log({ isSupportsLookbehindAssertions });
+
+export default memo(function (props: MarkdownProps) {
+  const baseFontSize = props.baseFontSize || 14;
+  const baseLineHeight = props.baseLineHeight || 1.7;
+  const { getPrefixCls, } = useProviderContext();
+  const prefixCls = getPrefixCls('markdown');
+  const {
+    className,
+    allowHtml = true,
+    content: _content = '',
+    typing = false,
+    cursor = false,
+    enableWordCaching = false,
+    enableMathCaching = true,
+    enableAnimation = false,
+    ...restProps
+  } = props;
+  const content = useTyping({ content: _content, typing });
+  const { citationsData, citationsDataCount, CitationComponent } = useCitationsData({ citations: props.citations, citationsMap: props.citationsMap });
+
+
+  if (props.raw || !isSupportsLookbehindAssertions) return <div className={prefixCls} style={{ fontSize: baseFontSize, lineHeight: baseLineHeight }}>{content}</div>;
+
+  // 使用 useMemo 缓存 extensions 配置
+  const extensions = useMemo(() => {
+    const exts = [
+      cursorExtension(),
+      ...latex()
+    ];
+    if (citationsDataCount > 0) exts.push(citationsExtension(citationsData));
+    return exts;
+  }, [citationsDataCount, citationsData]);
+
+  // 使用 useMemo 缓存 config 对象
+  const config = useMemo(() => ({
+    extensions,
+  }), [extensions]);
+
+  // 使用 useMemo 缓存 streaming 配置
+  const streaming = useMemo(() => ({
+    hasNextChunk: Boolean(typing),
+    enableWordCaching,
+    enableMathCaching,
+    enableAnimation
+  }), [typing, enableWordCaching, enableMathCaching, enableAnimation]);
+
+  // 使用 useMemo 缓存 components 对象
+  const components = useMemo(() => ({
+    // @ts-ignore
+    pre: CodeBlock,
+    style: Null,
+    script: Null,
+    img: props.disableImage ? DisabledImage : Media,
+    cursor: CursorComponent,
+    // @ts-ignore
+    citation: CitationComponent,
+  }), [props.disableImage, CitationComponent]);
+
+  // 使用 useMemo 缓存 dompurifyConfig
+  const dompurifyConfig = useMemo(() =>
+    allowHtml ? undefined : EMPTY_DOMPURIFY_CONFIG
+    , [allowHtml]);
+
+  return <ErrorBoundary fallback={<div className={prefixCls} style={{ fontSize: baseFontSize, lineHeight: baseLineHeight }}>{content}</div>}>
+    <Markdown
+      baseFontSize={baseFontSize}
+      baseLineHeight={baseLineHeight}
+      dompurifyConfig={dompurifyConfig}
+      streaming={streaming}
+      cursor={cursor}
+      className={classnames(prefixCls, className)}
+      components={components as unknown as InnerMarkdownProps['components']}
+      content={content}
+      config={config}
+      {...restProps}
+    /></ErrorBoundary>
+});

package/components/Markdown/Markdown/interface.ts

@@ -0,0 +1,217 @@
+import type { Config as DOMPurifyConfig } from 'dompurify';
+import type { DOMNode } from 'html-react-parser';
+import type { MarkedExtension, Tokens } from 'marked';
+import type { CSSProperties, JSX } from 'react';
+
+export interface AnimationConfig {
+  /**
+   * @description 淡入动画的持续时间（毫秒）
+   * @description The duration of the fade-in animation in milliseconds
+   * @default 200
+   */
+  fadeDuration?: number;
+  /**
+   * @description 动画的缓动函数
+   * @description Easing function for the animation
+   * @default 'ease-in-out'
+   */
+  easing?: string;
+}
+
+type Token = Tokens.Generic;
+
+interface SteamingOption {
+  /**
+   * @description 指示是否还有后续内容块，为 false 时刷新所有缓存并完成渲染
+   * @description Indicates whether more content chunks are expected. When false, flushes all cached content and completes rendering
+   * @default false
+   */
+  hasNextChunk?: boolean;
+  /**
+   * @description 为块级元素（p、li、h1、h2、h3、h4）启用文字淡入动画
+   * @description Enables text fade-in animation for block elements (p, li, h1, h2, h3, h4)
+   * @default false
+   */
+  enableAnimation?: boolean;
+  /**
+   * @description 文字出现动画效果的配置
+   * @description Configuration for text appearance animation effects
+   */
+  animationConfig?: AnimationConfig;
+  /**
+   * @description 启用英文单词缓存，单词会在遇到空格或标点后才整体显示
+   * @description Enable English word caching, words will be displayed as a whole after encountering spaces or punctuation
+   * @default false
+   */
+  enableWordCaching?: boolean;
+  /**
+   * @description 启用 LaTeX 公式缓存，公式会在完整后才整体显示（$...$、$$...$$、\(...\)、\[...\]）
+   * @description Enable LaTeX formula caching, formulas will be displayed as a whole when complete ($...$, $$...$$, \(...\), \[...\])
+   * @default true
+   */
+  enableMathCaching?: boolean;
+}
+
+type StreamStatus = 'loading' | 'done';
+
+type ComponentProps<
+  T extends Record<string, unknown> = Record<string, unknown>,
+> = React.HTMLAttributes<HTMLElement> & {
+  /**
+   * @description 组件对应的 DOM 节点，包含解析后的 DOM 节点信息
+   * @description Component Element from html-react-parser, contains the parsed DOM node information
+   */
+  domNode: DOMNode;
+  /**
+   * @description 流式状态，`loading` 表示正在加载，`done` 表示加载完成
+   * @description Streaming status, `loading` indicates streaming in progress, `done` indicates streaming complete
+   */
+  streamStatus: StreamStatus;
+} & T;
+
+interface MarkdownProps {
+  citations?: {
+    /**
+     * @description 引用的标题
+     * @descriptionEn Title of the citation
+     */
+    title?: string;
+    /**
+     * @description 引用的URL地址
+     * @descriptionEn URL address of the citation
+     */
+    url?: string;
+    /**
+     * @description 引用的内容
+     * @descriptionEn Content of the citation
+     */
+    content?: string;
+    /**
+     * @description 引用的渲染函数
+     * @descriptionEn Rendering function of the citation
+     */
+    render?: (props: {
+      text: string;
+      url: string;
+      title: string;
+      content: string;
+    }) => React.ReactNode;
+  }[];
+  /**
+   * @description 引用映射对象，用于快速查找引用信息
+   * @descriptionEn Citation mapping object for quick lookup of reference information
+   */
+  citationsMap?: Record<
+    string,
+    {
+      /**
+       * @description 引用的标题
+       * @descriptionEn Title of the citation
+       */
+      title?: string;
+      /**
+       * @description 引用的URL地址
+       * @descriptionEn URL address of the citation
+       */
+      url?: string;
+      /**
+       * @description 引用的内容
+       * @descriptionEn Content of the citation
+       */
+      content?: string;
+      /**
+       * @description 引用的渲染函数
+       * @descriptionEn Rendering function of the citation
+       */
+      render?: (props: {
+        text: string;
+        url: string;
+        title: string;
+        content: string;
+      }) => React.ReactNode;
+    }
+  >;
+  /**
+   * @description 光标样式类型，支持点状、下划线或布尔值控制
+   * @description Cursor style type, supports dot, underline, or boolean control
+   */
+  cursor?: boolean | 'dot' | 'underline';
+  /**
+   * @description 基础字体大小，影响整个Markdown内容的字体大小
+   * @description Base font size that affects the font size of the entire Markdown content
+   */
+  baseFontSize?: number;
+  /**
+   * @description 基础行高，影响文本的行间距
+   * @description Base line height that affects text line spacing
+   */
+  baseLineHeight?: number;
+  /**
+   * @description 需要渲染的 Markdown 内容
+   * @description Markdown content to be rendered
+   */
+  content?: string;
+  /**
+   * @description Markdown 内容，作为 `content` 属性的别名
+   * @description Markdown content, alias for `content` property
+   */
+  children?: string;
+  /**
+   * @description 用于替换 HTML 元素的自定义 React 组件映射，组件会接收 domNode、streamStatus 等属性
+   * @description Custom React components to replace HTML elements, components receive domNode, streamStatus, etc.
+   */
+  components?: {
+    [tagName: string]:
+      | React.ComponentType<ComponentProps>
+      | keyof JSX.IntrinsicElements;
+  };
+  /**
+   * @description 流式渲染行为的配置
+   * @description Configuration for streaming rendering behavior
+   */
+  streaming?: SteamingOption;
+  /**
+   * @description Markdown 解析和扩展的 Marked.js 配置
+   * @description Marked.js configuration for Markdown parsing and extensions
+   */
+  config?: MarkedExtension;
+  /**
+   * @description 根元素的额外 CSS 类名
+   * @description Additional CSS class name for the root container
+   */
+  rootClassName?: string;
+  /**
+   * @description 根容器的额外 CSS 类名
+   * @description Additional CSS class name for the root container
+   */
+  className?: string;
+  /**
+   * @description 段落元素的自定义 HTML 标签，防止自定义组件包含块级元素时的验证错误
+   * @description Custom HTML tag for paragraph elements, prevents validation errors when custom components contain block-level elements
+   * @default 'p'
+   */
+  paragraphTag?: keyof JSX.IntrinsicElements;
+  /**
+   * @description 根容器的内联样式
+   * @description Inline styles for the root container
+   */
+  style?: CSSProperties;
+  /**
+   * @description 组件的 CSS 类名前缀
+   * @description CSS class name prefix for the component
+   */
+  prefixCls?: string;
+  /**
+   * @description 是否为所有锚点标签添加 `target="_blank"`
+   * @description Whether to add `target="_blank"` to all anchor tags
+   * @default false
+   */
+  openLinksInNewTab?: boolean;
+  /**
+   * @description HTML 净化和 XSS 防护的 DOMPurify 配置
+   * @description DOMPurify configuration for HTML sanitization and XSS protection
+   */
+  dompurifyConfig?: DOMPurifyConfig;
+}
+
+export type { ComponentProps, MarkdownProps, StreamStatus, Token, Tokens };

package/components/Markdown/Markdown/style.ts

@@ -0,0 +1,152 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-markdown  {
+  color: inherit;
+  max-width: 100%;
+
+  ol, ul  {
+    padding-left: 30px;
+  }
+
+  blockquote {
+    padding-inline: 0.6em 0;
+    padding-block: 0;
+    margin: 1em 0;
+    border-inline-start: 4px solid ${(p) => p.theme.colorBorder};
+    opacity: 0.85;
+  }
+
+  figure {
+    margin: 0;
+  }
+
+  code {
+    font-size: 0.8571428571428571em;
+    border: 0;
+    margin: 0;
+    background-color: ${(p) => p.theme.colorFillQuaternary};
+    color: ${(p) => p.theme.colorText};
+    border-radius: ${(p) => p.theme.borderRadiusSM}px;
+    padding: 2px 6px;
+    margin-inline: 3px;
+    border: 1px solid ${(p) => p.theme.colorBorderSecondary};
+  }
+
+  pre code {
+    font-size: 0.8571428571428571em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 0.5714285714285714em;
+    margin-bottom: 0.5714285714285714em;
+    font-weight: 500;
+    line-height: 1.7777;
+    color: inherit;
+  }
+
+  p {
+    margin-top: 0.5714285714285714em;
+    margin-bottom: 0.5714285714285714em;
+  }
+
+  h1 {
+    font-size: 1.2857142857142858em;
+  }
+
+  h2 {
+    font-size: 1.1428571428571428em;
+  }
+
+  h3 {
+    font-size: 1em;
+  }
+
+  h4 {
+    font-size: 1em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h6 {
+    font-size: 1em;
+  }
+
+  hr {
+    border-color: ${(p) => p.theme.colorBorderSecondary};
+    border-style: solid;
+    border-width: 1px 0 0 0;
+    margin: 1em 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+  }
+
+  table th {
+    background: ${(p) => p.theme.colorFillQuaternary};
+    text-align: left;
+  }
+
+  table td,
+  table th {
+    padding: 0.75em 1.5em;
+    border: 1px solid ${(p) => p.theme.colorBorderSecondary};
+    white-space: pre;
+  }
+
+  .${(p) => p.theme.prefixCls}-image {
+    max-width: 480px;
+    overflow: hidden;
+  }
+
+  .${(p) => p.theme.prefixCls}-markdown-video {
+    position: relative;
+    
+    &-poster {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      max-width: 480px;
+      background-color: #000;
+      border-radius: 8px;
+      padding: 100px 0;
+      cursor: pointer;
+    }
+
+    &-play {
+      color: #ccc;
+      font-size: 30px;
+    }
+  }
+  
+}
+
+.${(p) => p.theme.prefixCls}-markdown  > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+.${(p) => p.theme.prefixCls}-markdown  > *:first-child {
+  margin-top: 0 !important;
+}
+
+@keyframes ${(p) => p.theme.prefixCls}-markdown-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+`;

package/components/Markdown/demo/basic.tsx

@@ -0,0 +1,107 @@
+import { Markdown } from '@agentscope-ai/chat';
+import { SparkEditLine } from '@agentscope-ai/icons';
+import { IconButton, Input, Modal } from '@agentscope-ai/design';
+import { useState } from 'react';
+
+
+const content = `# 这是一个一级标题
+## 这是一个二级标题
+### 这是一个三级标题
+#### 这是一个四级标题
+##### 这是一个五级标题
+###### 这是一个六级标题
+
+---
+
+这是第一个段落。
+
+这是第二个段落。
+
+city pop, short for city pop, is a genre of music that originated in japan during the late 1970s and early 1980s. it blends elements of jazz, folk, easy listening, and aor (adult oriented rock) with a distinctly urban feel. the term "city pop" often evokes images of the sophisticated, stylish, and sometimes nostalgic lifestyle of tokyo and other major japanese cities during this period. city pop is characterized by its smooth melodies, mellow rhythms, and often dreamy or introspective lyrics. common themes include city life, summer vibes, nature, and romantic encounters. the music is frequently associated with a particular aesthetic that reflects the fashion, design, and cultural trends of urban japan in the 1980s. some notable city pop artists include mariya takeuchi, known for her iconic song " plastic love," and joe hisaishi, a composer famous for his work on studio ghibli films, though he is not strictly considered a city pop artist. today, city pop has experienced a resurgence in popularity, particularly among younger generations who appreciate its unique sound and the nostalgic value it holds.
+
+---
+
+- 项目1
+- 项目2
+  - 子项目2.1
+  - 子项目2.2
+- 项目3
+
+---
+
+1. 第一项
+2. 第二项
+   1. 第二项的第一子项
+   2. 第二项的第二子项
+3. 第三项
+
+---
+
+> 这是一个引用。
+
+---
+
+*这是斜体文本*
+_这是斜体文本_
+**这是粗体文本**
+__这是粗体文本__
+  
+***这是粗斜体文本***
+**_这是粗斜体文本_**
+_**这是粗斜体文本**_
+___这是粗斜体文本___
+~~这是删除线文本~~
+
+---
+
+[https://www.aliyun.com](https://www.aliyun.com)
+
+![](https://gw.alicdn.com/imgextra/i4/O1CN01sjZ4Uu1erFDOC6IkA_!!6000000003924-2-tps-396-224.png)
+
+![](https://cloud.video.taobao.com/vod/HGJp6c7KVGDDfyeN8eimSccR_OnaS9E7PTqNzbVoAfE.mp4)
+
+![](https://cloud.video.taobao.com/vod/HGJp6c7KVGDDfyeN8eimSccR_OnaS9E7PTqNzbVoAfE.mp3)
+
+---
+\`hello world\`
+
+\`\`\`java
+class HelloWorld {
+    public static void main(String[] args) {
+        System.out.println("Hello World!"); 
+        // Hello World!
+    }
+}
+\`\`\`
+
+\`\`\`mermaid
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!
+\`\`\`
+
+---
+
+| 标题1 | 标题2 | 标题3 |标题2 | 标题3 |标题1 | 标题2 | 标题3 |标题2 | 标题3 |标题1 | 标题2 | 标题3 |标题2 | 标题3 |
+|-------|-------|-------|----|-------|------|-------|-------|----|-------|------|-------|-------|----|-------|
+| 单元格1 | 单元格2 | 单元格3 |单元格3 |单元格3 |单元格1 | 单元格2 | 单元格3 |单元格3 |单元格3 |单元格1 | 单元格2 | 单元格3 |单元格3 |单元格3 |
+| 单元格4 | 单元格5 | 单元格6 |单元格6 |单元格6 |单元格4 | 单元格5 | 单元格6 |单元格6 |单元格6 |单元格4 | 单元格5 | 单元格6 |单元格6 |单元格6 |
+
+---
+`;
+
+export default function () {
+  const [value, setValue] = useState(content);
+  const [open, setOpen] = useState(false);
+
+  return <>
+    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+      <IconButton icon={<SparkEditLine />} onClick={() => setOpen(true)} />
+      <Modal open={open} onCancel={() => setOpen(false)} title="markdown editor" footer={null} centered>
+        <Input.TextArea value={value} onChange={(e) => setValue(e.target.value)} autoSize={{ minRows: 30, maxRows: 30 }} />
+      </Modal>
+    </div>
+    <Markdown content={value} />
+  </>;
+}