@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Markdown/Markdown/defaultComponents/Media.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { ConfigProvider, Modal, Image as ImageViewer } from 'antd';
+import { useProviderContext } from "@agentscope-ai/chat";
+import { Locale } from "antd/es/locale";
+import { SparkFalseLine, SparkPlayCircleFill } from "@agentscope-ai/icons";
+
+export default function (props) {
+  try {
+    const src = props.src;
+    const url = new URL(src);
+    const pathname = url.pathname;
+
+    const isVideo = pathname.endsWith(".mp4");
+    const isAudio = pathname.endsWith(".mp3") || pathname.endsWith(".wav");
+
+    if (isAudio) {
+      return <audio src={props.src} {...props} controls />
+    }
+
+    if (isVideo) {
+      return <Video src={props.src} {...props} />
+    }
+
+
+    return <Image src={props.src} {...props} />
+  } catch (error) {
+    return null;
+  }
+
+}
+
+function Image(props) {
+  return <ConfigProvider
+    locale={{
+      Image: { preview: '' }
+    } as Locale}
+  ><ImageViewer src={props.src} {...props} /></ConfigProvider>
+}
+
+function Video(props) {
+  const src = props.src;
+  const [open, setOpen] = useState(false);
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('markdown-video');
+
+
+  return <>
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-poster`} onClick={() => setOpen(true)}>
+        <SparkPlayCircleFill className={`${prefixCls}-play`} />
+      </div>
+    </div>
+
+    <Modal
+      closeIcon={<a><SparkFalseLine style={{ fontSize: 20 }} /></a>}
+      centered
+      transitionName=""
+      footer={null} width={500} title="" styles={{
+        content: {
+          padding: 0
+        }
+      }} open={open} destroyOnHidden onCancel={() => setOpen(false)}>
+
+
+      <video controls autoPlay style={{ display: 'block', width: '100%' }}>
+        <source src={src} type="video/mp4" />
+      </video>
+    </Modal>
+
+  </>
+}

package/components/Markdown/Markdown/hooks/index.ts

@@ -0,0 +1,4 @@
+import useStreaming from './useStreaming';
+import useAnimation from './useAnimation';
+
+export { useStreaming, useAnimation };

package/components/Markdown/Markdown/hooks/useAnimation.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import AnimationNode from '../AnimationNode';
+import { MarkdownProps } from '../interface';
+
+export type HTMLTag = 'div' | 'p' | 'li' | 'h1' | 'h2' | 'h3' | 'h4' | 'strong';
+type AnimationComponents = Record<HTMLTag, React.FC<React.ComponentProps<HTMLTag>>>;
+
+const ANIMATION_TAGS: HTMLTag[] = ['div', 'p', 'li', 'h1', 'h2', 'h3', 'h4', 'strong'];
+
+const useAnimation = (streaming: MarkdownProps['streaming']) => {
+  const { enableAnimation = false, animationConfig } = streaming || {};
+
+  const animatedComponents = useMemo(() => {
+    if (!enableAnimation) return {};
+
+    return ANIMATION_TAGS.reduce<AnimationComponents>((acc, tag) => {
+      const AnimatedComponent: React.FC<React.ComponentProps<typeof tag>> = React.memo((props) => (
+        <AnimationNode nodeTag={tag} animationConfig={animationConfig} {...props} />
+      ));
+      return { ...acc, [tag]: AnimatedComponent };
+    }, {} as AnimationComponents);
+  }, [enableAnimation, JSON.stringify(animationConfig)]);
+
+  return animatedComponents;
+};
+
+export default useAnimation;

package/components/Markdown/Markdown/hooks/useCitationsData.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import type { MarkdownProps } from '../interface';
+import InnerCitationComponent, { CitationComponentProps } from '../../plugins/citations/CitationComponent';
+
+const emptyArray = [];
+const emptyMap = {};
+
+export default function useCitationsData(
+  props: Pick<MarkdownProps, 'citations' | 'citationsMap'>,
+) {
+  const { citations = emptyArray, citationsMap = emptyMap } = props;
+
+  const [citationsData, CitationComponent] = useMemo(() => {
+    const map = { ...citationsMap };
+
+    citations.forEach((item, index) => {
+      const key = index + 1;
+      map[key] = item;
+    });
+
+
+
+
+    return [map, (function citationComponentWrapper() {
+      return function (props: CitationComponentProps) {
+        return <InnerCitationComponent {...props} citationsData={map} />;
+      }
+    })()];
+  }, [citations, citationsMap]);
+
+  return {
+    CitationComponent,
+    citationsData,
+    citationsDataCount: Object.keys(citationsData).length,
+  };
+}

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

@@ -0,0 +1,503 @@
+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/hooks/useTyping.ts

@@ -0,0 +1,22 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useTyping = ({ content, typing }) => {
+  const [index, setIndex] = useState(0);
+  const timer = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (typing) {
+      timer.current = setInterval(() => {
+        setIndex((v) => v + 1);
+      }, typeof typing === 'number' ? typing : 5);
+    } else {
+      timer.current && clearInterval(timer.current);
+    }
+
+    return () => clearInterval(timer.current);
+  }, [typing]);
+
+  if (!typing) return content;
+
+  return content.slice(0, index);
+};