@agentscope-ai/chat 1.1.39 → 1.1.41-beta.1764749089549

package/components/Markdown/Markdown/hooks/useStreaming.ts

@@ -1,503 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { MarkdownProps } from '../interface';
-
-enum TokenType {
-  Text = 0,
-  Link = 1,
-  Image = 2,
-  Heading = 3,
-  MaybeEmphasis = 4,
-  Emphasis = 5,
-  Strong = 6,
-  XML = 7,
-  MaybeCode = 8,
-  Code = 9,
-  MaybeHr = 10,
-  MaybeList = 11,
-  MaybeInlineMath = 12,
-  InlineMath = 13,
-  MaybeBlockMath = 14,
-  BlockMath = 15,
-  MaybeBackslashMath = 16,
-  Word = 17,
-}
-
-const Markdown_Symbols = {
-  emphasis: ['*', '_'],
-  code: ['`'],
-  list: ['-', '+', '*'],
-};
-
-// 辅助函数：判断是否是英文字母
-const isEnglishLetter = (char: string): boolean => {
-  const code = char.charCodeAt(0);
-  return (code >= 65 && code <= 90) || (code >= 97 && code <= 122); // A-Z or a-z
-};
-
-// 辅助函数：判断是否是单词的一部分（字母、数字、连字符、撇号）
-const isWordChar = (char: string): boolean => {
-  const code = char.charCodeAt(0);
-  return (
-    (code >= 65 && code <= 90) ||   // A-Z
-    (code >= 97 && code <= 122) ||  // a-z
-    (code >= 48 && code <= 57) ||   // 0-9
-    char === '-' ||                  // 连字符 (well-known)
-    char === "'"                     // 撇号 (don't)
-  );
-};
-
-// 辅助函数：判断是否是单词分隔符
-const isWordSeparator = (char: string): boolean => {
-  return (
-    char === ' ' ||
-    char === '\n' ||
-    char === '\t' ||
-    char === ',' ||
-    char === '.' ||
-    char === '!' ||
-    char === '?' ||
-    char === ';' ||
-    char === ':' ||
-    char === ')' ||
-    char === ']' ||
-    char === '}' ||
-    char === '"' ||
-    char === "'" ||
-    char === '>' ||
-    char === '<'
-  );
-};
-
-const STREAM_BUFFER_INIT = {
-  processedLength: 0,
-  rawStream: '',
-  pending: '',
-  token: TokenType.Text,
-  tokens: [TokenType.Text],
-  headingLevel: 0,
-  emphasisCount: 0,
-  backtickCount: 0,
-  dollarCount: 0,
-  mathDelimiter: '' as '$' | '$$' | '\\(' | '\\[' | '',
-  blockMathEnding: false, // 标记是否遇到了结束的 $$
-};
-
-const useStreaming = (input: string, config?: MarkdownProps['streaming'], cursor?: MarkdownProps['cursor']) => {
-  const { hasNextChunk = false, enableWordCaching = false, enableMathCaching = true } = config || {};
-
-  const [output, setOutput] = useState('');
-  const streamBuffer = useRef({ ...STREAM_BUFFER_INIT });
-
-  const pushToken = useCallback((type: TokenType) => {
-    streamBuffer.current.tokens = [...streamBuffer.current.tokens, type];
-    streamBuffer.current.token = type;
-  }, []);
-
-  const popToken = useCallback(() => {
-    const { tokens } = streamBuffer.current;
-    if (tokens.length <= 1) return;
-
-    const newTokens = [...tokens.slice(0, -1)];
-    streamBuffer.current.tokens = newTokens;
-    streamBuffer.current.token = newTokens[newTokens.length - 1];
-  }, []);
-
-  const flushOutput = (needPopToken = true) => {
-    if (needPopToken) popToken();
-
-    streamBuffer.current.pending = '';
-    streamBuffer.current.blockMathEnding = false;
-    const renderText = streamBuffer.current.rawStream;
-    if (renderText) {
-      setOutput(renderText);
-    }
-  };
-
-  const handleChunk = (chunk: string) => {
-    const buffer = streamBuffer.current;
-    for (const char of chunk) {
-      buffer.rawStream += char;
-      buffer.pending += char;
-
-      const { token, pending, tokens, emphasisCount } = buffer;
-      switch (token) {
-        case TokenType.Image: {
-          /**
-           * \![
-           *   ^
-           */
-          const isInvalidStart = pending.indexOf('![') === -1;
-          /**
-           * \![image]()
-           *           ^
-           */
-          const isImageEnd = char === ')' || char === '\n';
-          if (isInvalidStart || isImageEnd) {
-            if (tokens[tokens.length - 2] === TokenType.Link) {
-              popToken();
-            } else {
-              flushOutput();
-            }
-          }
-          break;
-        }
-        case TokenType.Link: {
-          // not support link reference definitions, [foo]: /url "title" \n[foo]
-          const isReferenceLink = pending.endsWith(']:');
-          const isLinkEnd = char === ')' || char === '\n';
-          const isImageInLink = char === '!';
-          if (isImageInLink) {
-            pushToken(TokenType.Image);
-          } else if (isLinkEnd || isReferenceLink) {
-            flushOutput();
-          }
-          break;
-        }
-        case TokenType.Heading: {
-          /**
-           * # token / ## token / #####token
-           *  ^         ^              ^
-           */
-          buffer.headingLevel++;
-
-          const shouldFlushOutput = char !== '#' || buffer.headingLevel >= 6;
-          if (shouldFlushOutput) {
-            flushOutput();
-            buffer.headingLevel = 0;
-          }
-          break;
-        }
-        case TokenType.MaybeEmphasis: {
-          /**
-             * /* / *\/n
-                ^     ^
-             */
-          const shouldFlushOutput = char === ' ' || char === '\n';
-          if (shouldFlushOutput) {
-            flushOutput();
-          } else if (Markdown_Symbols.emphasis.includes(char)) {
-            buffer.emphasisCount++;
-          } else {
-            popToken();
-            if (emphasisCount === 1) {
-              /**
-               * _token_ / *token*
-               * ^         ^
-               */
-              pushToken(TokenType.Emphasis);
-            } else if (emphasisCount === 2) {
-              /**
-               * __token__ / **token**
-               *  ^           ^
-               */
-              pushToken(TokenType.Strong);
-            } else if (emphasisCount === 3) {
-              /**
-               * ___token___ / ***token***
-               *   ^             ^
-               */
-              pushToken(TokenType.Emphasis);
-              pushToken(TokenType.Strong);
-            } else {
-              // no more than 3
-              buffer.emphasisCount = 0;
-            }
-          }
-
-          break;
-        }
-        case TokenType.Strong: {
-          /**
-           * __token__ / **token**
-           *         ^           ^
-           */
-          if (char === '\n') {
-            flushOutput();
-          } else if (pending.endsWith('**') || pending.endsWith('__')) {
-            if (tokens[tokens.length - 2] === TokenType.Emphasis) {
-              popToken();
-            } else {
-              flushOutput();
-            }
-          }
-
-          break;
-        }
-        case TokenType.Emphasis: {
-          /**
-           * _token_ / *token*
-           *       ^         ^
-           */
-          if (char === '\n') {
-            flushOutput();
-            buffer.emphasisCount = 0;
-          } else if (Markdown_Symbols.emphasis.includes(char)) {
-            flushOutput();
-            buffer.emphasisCount = 0;
-          }
-
-          break;
-        }
-        case TokenType.XML: {
-          /**
-           * <XML /> /<XML></XML>
-           *       ^      ^
-           */
-          const shouldFlushOutput = char === '>' || pending === '< ' || char === '\n';
-          if (shouldFlushOutput) {
-            flushOutput();
-            continue;
-          }
-          break;
-        }
-        case TokenType.MaybeCode: {
-          if (char === '`') {
-            buffer.backtickCount++;
-          } else {
-            if (buffer.backtickCount > 2) {
-              /**
-               * ```
-               *   ^
-               */
-              flushOutput();
-              buffer.backtickCount = 0;
-            } else {
-              /**
-               * ``
-               *  ^
-               */
-              popToken();
-              pushToken(TokenType.Code);
-            }
-          }
-          break;
-        }
-        case TokenType.Code: {
-          if (char === '`') {
-            buffer.backtickCount--;
-          }
-
-          if (buffer.backtickCount === 0) {
-            flushOutput();
-            buffer.backtickCount = 0;
-          }
-          break;
-        }
-        case TokenType.MaybeHr: {
-          if (char !== '-' && char !== '=') {
-            flushOutput();
-          }
-          break;
-        }
-        case TokenType.MaybeList: {
-          if (char !== ' ') {
-            flushOutput();
-          }
-          break;
-        }
-        case TokenType.MaybeInlineMath: {
-          /**
-           * $ / $$
-           * ^    ^
-           */
-          if (char === '$') {
-            buffer.dollarCount++;
-            if (buffer.dollarCount === 2) {
-              // $$ 块级公式
-              popToken();
-              pushToken(TokenType.MaybeBlockMath);
-              buffer.mathDelimiter = '$$';
-            }
-          } else if (char === '\n') {
-            // $ 后跟换行，不是有效的公式
-            flushOutput();
-            buffer.dollarCount = 0;
-            buffer.mathDelimiter = '';
-          } else {
-            // 确认为行内公式
-            popToken();
-            pushToken(TokenType.InlineMath);
-            buffer.mathDelimiter = '$';
-          }
-          break;
-        }
-        case TokenType.InlineMath: {
-          /**
-           * $x^2$ / \(x^2\)
-           *     ^         ^
-           */
-          if (buffer.mathDelimiter === '$') {
-            if (char === '$') {
-              flushOutput();
-              buffer.dollarCount = 0;
-              buffer.mathDelimiter = '';
-            } else if (char === '\n') {
-              // 行内公式不应跨行
-              flushOutput();
-              buffer.dollarCount = 0;
-              buffer.mathDelimiter = '';
-            }
-          } else if (buffer.mathDelimiter === '\\(') {
-            if (pending.endsWith('\\)')) {
-              flushOutput();
-              buffer.mathDelimiter = '';
-            }
-          }
-          break;
-        }
-        case TokenType.MaybeBlockMath: {
-          /**
-           * $$
-           *   ^
-           */
-          if (char !== '$') {
-            // $$ 后跟任何非 $ 字符，确认为块级公式
-            popToken();
-            pushToken(TokenType.BlockMath);
-          }
-          break;
-        }
-        case TokenType.BlockMath: {
-          /**
-           * $$E=mc^2$$
-           *         ^^
-           */
-          // 处理 $$ 块级公式
-          if (buffer.mathDelimiter === '$$') {
-            // 检测是否遇到结束的 $$
-            if (char === '$') {
-              buffer.dollarCount++;
-              if (buffer.dollarCount === 2) {
-                // 遇到了结束 $$，立即释放缓存
-                flushOutput();
-                buffer.dollarCount = 0;
-                buffer.mathDelimiter = '';
-              }
-            } else {
-              buffer.dollarCount = 0;
-            }
-          } else if (buffer.mathDelimiter === '\\[') {
-            // 处理 \[...\] 块级公式
-            if (pending.endsWith('\\]')) {
-              flushOutput();
-              buffer.mathDelimiter = '';
-            }
-          }
-          break;
-        }
-        case TokenType.MaybeBackslashMath: {
-          /**
-           * \( / \[
-           *  ^    ^
-           */
-          if (char === '(') {
-            // \( 行内公式
-            popToken();
-            pushToken(TokenType.InlineMath);
-            buffer.mathDelimiter = '\\(';
-          } else if (char === '[') {
-            // \[ 块级公式
-            popToken();
-            pushToken(TokenType.BlockMath);
-            buffer.mathDelimiter = '\\[';
-          } else {
-            // 不是数学公式，普通反斜杠
-            flushOutput();
-            buffer.mathDelimiter = '';
-          }
-          break;
-        }
-        case TokenType.Word: {
-          /**
-           * Hello world
-           *      ^
-           * 缓存英文单词，直到遇到分隔符（空格、标点等）
-           */
-          if (isWordSeparator(char)) {
-            // 遇到分隔符，释放缓存显示完整单词
-            flushOutput();
-          } else if (!isWordChar(char)) {
-            // 遇到非单词字符且非分隔符（如 Markdown 符号），也释放缓存
-            flushOutput();
-          }
-          // 否则继续缓存单词字符
-          break;
-        }
-        default: {
-          buffer.pending = char;
-
-          if (char === '!') {
-            pushToken(TokenType.Image);
-          } else if (char === '[') {
-            pushToken(TokenType.Link);
-          } else if (char === '#') {
-            pushToken(TokenType.Heading);
-          } else if (char === '_' || char === '*') {
-            pushToken(TokenType.MaybeEmphasis);
-            buffer.emphasisCount = 1;
-          } else if (char === '<') {
-            pushToken(TokenType.XML);
-          } else if (char === '`') {
-            pushToken(TokenType.MaybeCode);
-            buffer.backtickCount = 1;
-          } else if (char === '-' || char === '=') {
-            pushToken(TokenType.MaybeHr);
-          } else if (Markdown_Symbols.list.includes(char)) {
-            pushToken(TokenType.MaybeList);
-          } else if (enableMathCaching && char === '$') {
-            // 只有启用公式缓存时，才缓存 $ 符号的公式
-            pushToken(TokenType.MaybeInlineMath);
-            buffer.dollarCount = 1;
-            buffer.mathDelimiter = '';
-          } else if (enableMathCaching && char === '\\') {
-            // 只有启用公式缓存时，才缓存 \ 开头的公式
-            pushToken(TokenType.MaybeBackslashMath);
-          } else if (enableWordCaching && isEnglishLetter(char)) {
-            // 只有启用单词缓存时，才缓存英文单词
-            pushToken(TokenType.Word);
-          } else {
-            flushOutput(false);
-          }
-        }
-      }
-    }
-  };
-  
-  const cursorContent = useMemo(() => {
-    if (config?.enableAnimation) return  '';
-    if (cursor) {
-      if (cursor === 'dot') return ' :dot:';
-      if (cursor === 'underline') return ' :underline:';
-      return ' :dot:';
-    }
-    return '';
-  }, [cursor]);
-
-  useEffect(() => {
-    if (!input) {
-      setOutput('');
-      streamBuffer.current = { ...STREAM_BUFFER_INIT };
-      return;
-    }
-
-    if (typeof input !== 'string') {
-      console.error(`X-Markdown: input must be string, not ${typeof input}.`);
-      return;
-    }
-
-    if (!hasNextChunk) {
-      setOutput(input);
-      return;
-    }
-
-    const chunk = input.slice(streamBuffer.current.processedLength);
-    if (chunk.length) {
-      streamBuffer.current.processedLength += chunk.length;
-      handleChunk(chunk);
-    }
-  }, [input, hasNextChunk]);
-
-  return output + cursorContent;
-};
-
-export default useStreaming;

package/components/Markdown/Markdown/index.tsx

@@ -1,198 +0,0 @@
-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>
-});