@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/ImageGenerator/index.tsx

@@ -0,0 +1,124 @@
+import React, { ReactNode } from 'react';
+import Style from './style';
+import { useProviderContext } from '../Provider';
+import { ConfigProvider, Image } from 'antd';
+import { Locale } from 'antd/es/locale';
+import { SparkCheckCircleFill } from '@agentscope-ai/icons';
+import Dot from '../Markdown/plugins/cursor/Dot';
+
+export interface IImageGeneratorProps {
+  /**
+   * @description 生成图片的宽度，单位为像素
+   * @descriptionEn Width of the generated image in pixels
+   * @default 320
+   */
+  width?: number;
+  /**
+   * @description 生成图片的高度，单位为像素
+   * @descriptionEn Height of the generated image in pixels
+   * @default 320
+   */
+  height?: number;
+  /**
+   * @description 图片的URL地址，为空时显示加载状态
+   * @descriptionEn URL address of the image, shows loading state when empty
+   * @default ''
+   */
+  src?: string;
+  /**
+   * @description 图片生成过程中的提示文本
+   * @descriptionEn Prompt text during image generation process
+   * @default 'Painting...'
+   */
+  loadingText?: string;
+  /**
+   * @description 图片生成完成后的提示文本
+   * @descriptionEn Prompt text after image generation is completed
+   * @default 'Paint Completed'
+   */
+  doneText?: string;
+  /**
+   * @description 自定义骨架屏组件，用于加载状态显示
+   * @descriptionEn Custom skeleton screen component for loading state display
+   * @default null
+   */
+  skeleton?: ReactNode;
+  /**
+   * @description 自定义骨架屏组件的加载态提示
+   * @descriptionEn Custom skeleton screen component prompt text
+   * @default 'Painting...'
+   */
+  skeletonText?: string;
+
+  /**
+   * @description 是否为块级元素，使得图片宽高比为 width / height
+   * @descriptionEn Whether to be a block element, make the image width / height ratio
+   * @default false
+   */
+  block?: boolean;
+}
+
+
+const ImageGenerator: React.FC<IImageGeneratorProps> = (props) => {
+  const { getPrefixCls } = useProviderContext();
+
+  const prefixCls = getPrefixCls('image-generator');
+  const { block, skeletonText, width = 320, height = 320, src, loadingText = 'Painting...', doneText = 'Paint Completed' } = props;
+
+  const skeleton = props.skeleton || <div className={`${prefixCls}-default-skeleton`} style={{ width: '100%', height: '100%' }}>
+    <img
+      className={`${prefixCls}-default-skeleton-bg`}
+      src="https://img.alicdn.com/imgextra/i2/O1CN01jwLfwV1hPiHfJjQXM_!!6000000004270-2-tps-1155-763.png"
+      alt=""
+    />
+    <div className={`${prefixCls}-default-skeleton-content`}>
+      <img
+        className={`${prefixCls}-default-skeleton-icon`}
+        src="https://img.alicdn.com/imgextra/i2/O1CN01M1X8yM1MWUC7u3Go5_!!6000000001442-54-tps-72-72.apng"
+      />
+
+      {
+        skeletonText && <div className={`${prefixCls}-default-skeleton-text`}>{skeletonText}</div>
+      }
+
+    </div>
+  </div>;
+
+  const loading = !src;
+
+  const size: React.CSSProperties = block ? { aspectRatio: `${width}/${height}` } : { width, height };
+
+  return <>
+    <Style />
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-text`}>
+        {
+          loading ? <Dot /> : <SparkCheckCircleFill className={`${prefixCls}-text-success`} />
+        }
+        {
+          loading ? <span style={{ paddingLeft: 20 }}>{loadingText}</span> : doneText
+        }
+      </div>
+
+      <div className={`${prefixCls}-wrapper`} style={size}>
+        {
+          loading ? skeleton : <ConfigProvider
+            locale={{
+              Image: { preview: '' }
+            } as Locale}
+          ><Image
+              width={'100%'}
+              height={'100%'}
+              src={src}
+            /></ConfigProvider>
+        }
+      </div>
+    </div>
+  </>
+};
+
+
+export default ImageGenerator;
+
+
+

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

@@ -0,0 +1,23 @@
+---
+group:
+  title: 输出
+  order: 3
+title: ImageGenerator
+description: 生图类Query的过程展示
+---
+
+<DemoTitle title="ImageGenerator" desc="生图类Query的过程展示"></DemoTitle>
+
+<code src="./demo/basic.tsx" height="auto">示例</code>
+
+<Install>import { ImageGenerator } from '@agentscope-ai/chat'</Install>
+
+#### 更多示例
+
+<code src="./demo/size.tsx" height="auto">自定义尺寸</code>
+
+<code src="./demo/custom.tsx" height="auto">自定义骨架 loading</code>
+
+#### API
+
+<ApiParser source="./index.tsx" id="IImageGeneratorProps"></ApiParser>

package/components/ImageGenerator/style.ts

@@ -0,0 +1,99 @@
+import { createGlobalStyle } from 'antd-style';
+
+export default createGlobalStyle`
+.${(p) => p.theme.prefixCls}-image-generator {
+
+  .${(p) => p.theme.prefixCls}-image {
+    border-radius: 8px;
+    filter: blur(20px);
+    animation: ${(p) => p.theme.prefixCls}clearBlur 1s ease forwards;
+    overflow: hidden;
+  }
+
+
+  &-wrapper {
+    overflow: hidden;
+  }
+
+
+  &-text {
+    position: relative;
+    display: flex;
+    gap: 8px;
+    height: 40px;
+    align-items: center;
+    font-size: 14px;
+    line-height: 26px;
+    color: ${(p) => p.theme.colorText};
+
+
+    &-success {
+      color: ${(p) => p.theme.colorSuccess};
+      font-size: 20px;
+    }
+  }
+
+  &-default-skeleton {
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+
+    &-bg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(0deg);
+      width: 100vmax;
+      height: 100vmax;
+      object-fit: cover;
+      animation: ${(p) => p.theme.prefixCls}spin 6s linear infinite;
+      pointer-events: none;
+    }
+
+    &-icon {
+      width: 32px;
+      height: 32px;
+    } 
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+      
+    }
+
+    &-text {
+      margin-top: 8px;
+      font-size: 14px;
+      color: ${(p) => p.theme.colorBgBase};
+    }
+  }
+}
+
+
+
+@keyframes ${(p) => p.theme.prefixCls}clearBlur {
+  from {
+    filter: blur(20px);
+  }
+  to {
+    filter: blur(0);
+  }
+}
+
+@keyframes ${(p) => p.theme.prefixCls}spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+`;

package/components/Markdown/Markdown/AnimationNode.tsx

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

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

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

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

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

package/components/Markdown/Markdown/defaultComponents/CodeBlock.tsx

@@ -0,0 +1,113 @@
+import React, { useMemo, useState } from 'react';
+import type { FC } from 'react';
+import { CodeBlock as Code, CodeBlockLangExtensionsMap, } from '@agentscope-ai/design';
+import { createStyles } from 'antd-style';
+import { useProviderContext, Mermaid } from '@agentscope-ai/chat';
+import { theme as AntdTheme } from 'antd'
+import { SparkCopyLine, SparkTrueLine } from '@agentscope-ai/icons';
+
+const supportedLanguages = Object.keys(CodeBlockLangExtensionsMap);
+
+const countLines = (str: string): number => {
+  const regex = /\n/g;
+  const matches = str.match(regex);
+  return matches ? matches.length : 1;
+};
+
+const useCode = (raw: any) => {
+  if (!raw) return {};
+
+  const { children, className } = raw.props;
+
+  if (!children) return {};
+
+  const content = Array.isArray(children) ? (children[0] as string) : children;
+  const lang = className?.replace('language-', '') || 'txt';
+  const isSingleLine = countLines(content) <= 1 && content.length <= 32;
+
+  return {
+    content,
+    isSingleLine,
+    lang,
+  };
+};
+
+interface CodeBlockProps {
+  children: any;
+  enableMermaid?: boolean;
+}
+
+const CodeBlock: FC<CodeBlockProps> = ({ children, enableMermaid }) => {
+  const code = useCode(children);
+  const { styles, cx } = useStyles();
+  const { getPrefixCls, theme } = useProviderContext();
+  const isDarkMode = theme?.algorithm === AntdTheme.darkAlgorithm;
+  const [copied, setCopied] = useState(false);
+
+
+  const { content: _content = '', lang = '' } = code;
+  const content = useMemo(() => {
+    return _content.replace(/ :(dot|underline):/g, '');
+  }, [_content])
+
+
+  if (!content) return null;
+  if (lang === 'mermaid') {
+    return (
+      <Mermaid content={content} width={"50%"} />
+    );
+  }
+  if (supportedLanguages.indexOf(lang) === -1) return <pre><code>{content}</code></pre>;
+
+  return <div className={styles.container}>
+    <div className={styles.header}>
+      <div className={styles.lang}>{lang}</div>
+      {
+        copied ? <SparkTrueLine className={styles.copied} /> : <SparkCopyLine className={styles.icon} onClick={() => {
+          navigator.clipboard.writeText(content);
+          setCopied(true);
+          setTimeout(() => {
+            setCopied(false);
+          }, 1000);
+        }} />
+      }
+    </div>
+    <Code value={content} language={lang} theme={isDarkMode ? 'dark' : 'light'} readOnly={true}></Code>
+  </div>
+};
+
+const useStyles = createStyles(({ css, token }) => ({
+  copied: css`
+    color: ${token.colorSuccess};
+    cursor: pointer;
+    font-size: 16px;
+  `,
+  container: css`
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 6px;
+    overflow: hidden;
+    font-size: 0.8571428571428571em;
+    margin: 1em 0;
+  `,
+  header: css`
+    display: flex;
+    justify-content: space-between;
+    background: ${token.colorFillSecondary};
+    height: 28px;
+    line-height: 28px;
+    border-radius: 4px 4px 0 0;
+    align-items: center;
+    user-select: none;
+    position: relative;
+    padding: 0 12px;
+  `,
+  icon: css`
+    fontsize: 16px;
+    cursor: pointer;
+  `,
+  lang: {
+    textTransform: 'capitalize'
+  }
+}));
+
+export default CodeBlock;

package/components/Markdown/Markdown/defaultComponents/DisabledImage.tsx

@@ -0,0 +1,3 @@
+export default function DisabledImage(props) {
+  return <a href={props.src} target="_blank" rel="noopener noreferrer">{props.src}</a>;
+}