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

package/components/Markdown/Markdown/AnimationNode.tsx

@@ -1,89 +0,0 @@
-import type { DOMNode } from 'html-react-parser';
-import React, { useEffect, useRef, useState } from 'react';
-import { HTMLTag } from './hooks/useAnimation';
-import { AnimationConfig } from './interface';
-import { useGlobalContext, useProviderContext } from '@agentscope-ai/chat';
-
-export interface AnimationNodeProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode | React.ReactNode[];
-  nodeTag: HTMLTag;
-  animationConfig?: AnimationConfig;
-  streamStatus?: 'loading' | 'done';
-  domNode?: DOMNode;
-  [key: string]: unknown;
-}
-
-export interface AnimationTextProps {
-  text: string;
-  animationConfig?: AnimationConfig;
-}
-
-const AnimationText = React.memo<AnimationTextProps>((props) => {
-  const { text, animationConfig } = props;
-  const { fadeDuration = 200, easing = 'ease-in-out' } = animationConfig || {};
-  const [chunks, setChunks] = useState<string[]>([]);
-  const prevTextRef = useRef('');
-  const { getPrefixCls, } = useProviderContext();
-  const prefixCls = getPrefixCls('markdown');
-
-  useEffect(() => {
-    if (text === prevTextRef.current) return;
-
-    if (!(prevTextRef.current && text.indexOf(prevTextRef.current) === 0)) {
-      setChunks([text]);
-      prevTextRef.current = text;
-      return;
-    }
-
-    const newText = text.slice(prevTextRef.current.length);
-    if (!newText) return;
-
-    setChunks((prev) => [...prev, newText]);
-    prevTextRef.current = text;
-  }, [text]);
-
-  return (
-    <>
-      {chunks.map((text, index) => {
-        return (
-          <span
-            style={{
-              animation: `${prefixCls}-fadeIn ${fadeDuration}ms ${easing} forwards`,
-            }}
-            key={`${index}-${text}`}
-          >
-            {text}
-          </span>
-        );
-      })}
-    </>
-  );
-});
-
-const AnimationNode: React.FC<AnimationNodeProps> = (props) => {
-  const { nodeTag, children, animationConfig, domNode, streamStatus, ...restProps } = props;
-
-  const renderChildren = (): React.ReactNode | React.ReactNode[] => {
-    if (!children) return null;
-
-    if (Array.isArray(children)) {
-      return children.map((child, index) =>
-        typeof child === 'string' ? (
-          <AnimationText key={index} animationConfig={animationConfig} text={child} />
-        ) : (
-          child
-        ),
-      );
-    }
-    return typeof children === 'string' ? (
-      <AnimationText text={children} animationConfig={animationConfig} />
-    ) : (
-      children
-    );
-  };
-
-  return React.createElement(nodeTag, restProps, renderChildren());
-};
-
-export default AnimationNode;
-export { AnimationText };

package/components/Markdown/Markdown/Markdown.tsx

@@ -1,61 +0,0 @@
-import classnames from 'classnames';
-import React from 'react';
-import { Parser, Renderer } from './core';
-import { useAnimation, useStreaming } from './hooks';
-import { MarkdownProps } from './interface';
-import Style from './style';
-
-const Markdown: React.FC<MarkdownProps> = (props) => {
-
-  const {
-    cursor,
-    baseFontSize,
-    baseLineHeight,
-    streaming,
-    config,
-    components,
-    paragraphTag = 'p',
-    content,
-    children,
-    rootClassName,
-    className,
-    style,
-    openLinksInNewTab,
-    dompurifyConfig,
-  } = props;
-  const mergedCls = classnames(rootClassName, className);
-  const mergedStyle: React.CSSProperties = {
-    fontSize: baseFontSize,
-    lineHeight: baseLineHeight,
-    ...style,
-  };
-  const displayContent = useStreaming(content || children || '', streaming, cursor);
-  const animationComponents = useAnimation(streaming);
-
-  if (!displayContent) return null;
-
-  const parser = new Parser({
-    markedConfig: config,
-    paragraphTag,
-    openLinksInNewTab,
-  });
-
-  const renderComponents = { ...animationComponents, ...(components || {}) };
-  const renderer = new Renderer({
-    components: renderComponents,
-    dompurifyConfig,
-  });
-
-  const htmlString = parser.parse(displayContent);
-  return (
-    <>
-      <Style />
-      <div className={mergedCls} style={mergedStyle}>
-        {renderer.render(htmlString)}
-      </div>
-    </>
-  );
-};
-
-
-export default Markdown;

package/components/Markdown/Markdown/core/Parser.ts

@@ -1,52 +0,0 @@
-import { Marked, Renderer, Tokens } from 'marked';
-import { MarkdownProps } from '../interface';
-
-type ParserOptions = {
-  markedConfig?: MarkdownProps['config'];
-  paragraphTag?: string;
-  openLinksInNewTab?: boolean;
-};
-
-class Parser {
-  options: ParserOptions;
-  markdownInstance: Marked;
-
-  constructor(options: ParserOptions = {}) {
-    const { markedConfig = {}, openLinksInNewTab = true } = options;
-    this.options = options;
-    this.markdownInstance = new Marked(markedConfig);
-    this.configureRenderer(openLinksInNewTab);
-    this.configureParagraph();
-  }
-
-  private configureRenderer(openLinksInNewTab?: boolean) {
-    if (!openLinksInNewTab) return;
-
-    const renderer = {
-      link(this: Renderer, { href, title, tokens }: Tokens.Link) {
-        const text = this.parser.parseInline(tokens);
-        const titleAttr = title ? ` title="${title}"` : '';
-        return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
-      },
-    };
-    this.markdownInstance.use({ renderer });
-  }
-
-  public configureParagraph() {
-    const { paragraphTag } = this.options;
-    if (!paragraphTag) return;
-
-    const renderer = {
-      paragraph(this: Renderer, { tokens }: Tokens.Paragraph) {
-        return `<${paragraphTag}>${this.parser.parseInline(tokens)}</${paragraphTag}>\n`;
-      },
-    };
-    this.markdownInstance.use({ renderer });
-  }
-
-  public parse(content: string) {
-    return this.markdownInstance.parse(content) as string;
-  }
-}
-
-export default Parser;

package/components/Markdown/Markdown/core/Renderer.ts

@@ -1,121 +0,0 @@
-import type { Config as DOMPurifyConfig } from 'dompurify';
-import DOMPurify from 'dompurify';
-import parseHtml, { DOMNode, domToReact, Element } from 'html-react-parser';
-import React, { ReactNode } from 'react';
-import type { ComponentProps, MarkdownProps } from '../interface';
-
-interface RendererOptions {
-  components?: MarkdownProps['components'];
-  dompurifyConfig?: DOMPurifyConfig;
-}
-
-class Renderer {
-  private readonly options: RendererOptions;
-
-  constructor(options: RendererOptions) {
-    this.options = options;
-  }
-
-  /**
-   * Detect unclosed tags using regular expressions
-   */
-  private detectUnclosedTags(htmlString: string): Set<string> {
-    const unclosedTags = new Set<string>();
-    const stack: string[] = [];
-    const tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9-]*)(?:\s[^>]*)?>/g;
-
-    let match = tagRegex.exec(htmlString);
-    while (match !== null) {
-      const [fullMatch, tagName] = match;
-      const isClosing = fullMatch.startsWith('</');
-      const isSelfClosing = fullMatch.endsWith('/>');
-
-      if (this.options.components?.[tagName.toLowerCase()]) {
-        if (isClosing) {
-          // Found closing tag, pop from stack
-          const lastIndex = stack.lastIndexOf(tagName.toLowerCase());
-          if (lastIndex !== -1) {
-            stack.splice(lastIndex, 1);
-          }
-        } else if (!isSelfClosing) {
-          // Found opening tag, push to stack
-          stack.push(tagName.toLowerCase());
-        }
-      }
-      match = tagRegex.exec(htmlString);
-    }
-
-    // Remaining tags in stack are unclosed
-    stack.forEach((tag) => {
-      unclosedTags.add(tag);
-    });
-    return unclosedTags;
-  }
-
-  /**
-   * Configure DOMPurify to preserve components and target attributes, filter everything else
-   */
-  private configureDOMPurify(): DOMPurifyConfig {
-    const customComponents = Object.keys(this.options.components || {});
-    const userConfig = this.options.dompurifyConfig || {};
-
-    return {
-      ...userConfig,
-      ADD_TAGS: [...new Set([...customComponents, ...(userConfig.ALLOWED_TAGS || [])])],
-    };
-  }
-
-  private replaceElement(unclosedTags?: Set<string>) {
-    return (domNode: DOMNode) => {
-      if (!('name' in domNode)) return;
-
-      const { name, attribs, children } = domNode as Element;
-      const renderElement = this.options.components?.[name];
-
-      if (renderElement) {
-        const streamStatus = unclosedTags?.has(name) ? 'loading' : 'done';
-        const props: ComponentProps = {
-          domNode,
-          streamStatus,
-          ...attribs,
-        };
-
-        // Handle class and className merging
-        const classes = [props.className, props.classname, props.class]
-          .filter(Boolean)
-          .join(' ')
-          .trim();
-        props.className = classes || '';
-
-        if (children) {
-          props.children = this.processChildren(children as DOMNode[], unclosedTags);
-        }
-
-        return React.createElement(renderElement, props);
-      }
-    };
-  }
-
-  private processChildren(children: DOMNode[], unclosedTags?: Set<string>): ReactNode {
-    return domToReact(children as DOMNode[], {
-      replace: this.replaceElement(unclosedTags),
-    });
-  }
-
-  public processHtml(htmlString: string): React.ReactNode {
-    const unclosedTags = this.detectUnclosedTags(htmlString);
-    // Use DOMPurify to clean HTML while preserving custom components and target attributes
-    // const purifyConfig = this.configureDOMPurify();
-    // const cleanHtml = DOMPurify.sanitize(htmlString, purifyConfig);
-
-    return parseHtml(htmlString, {
-      replace: this.replaceElement(unclosedTags),
-    });
-  }
-
-  public render(html: string): ReactNode | null {
-    return this.processHtml(html);
-  }
-}
-
-export default Renderer;

package/components/Markdown/Markdown/core/index.ts

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

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

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

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

@@ -1,27 +0,0 @@
-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;