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

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Builder.tsx

@@ -13,20 +13,24 @@ class AgentScopeRuntimeResponseBuilder {
       if (AgentScopeRuntimeResponseBuilder.maybeToolInput(c) && c.content?.length) {
         const content = c.content[0] as IDataContent<{
           name: string;
+          call_id?: string;
         }>;
-        bufferMessagesMap.set(content.data.name, content);
+        const key = content.data.call_id || content.data.name;
+        bufferMessagesMap.set(key, content);
         return p;
       }
 
       if (AgentScopeRuntimeResponseBuilder.maybeToolOutput(c)) {
         const content = c.content[0] as IDataContent<{
           name: string;
+          call_id?: string;
         }>;
-
-        const bufferContent = bufferMessagesMap.get(content.data.name);
+        
+        const key = content.data.call_id || content.data.name;
+        const bufferContent = bufferMessagesMap.get(key);
 
         if (bufferContent) {
-          bufferMessagesMap.delete(content.data.name);
+          bufferMessagesMap.delete(key);
           return [...p, { ...c, content: [bufferContent, ...c.content] }];
         } else {
           return p;

package/components/ImageGenerator/index.tsx

@@ -4,7 +4,7 @@ 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';
+import Dot from '../Markdown/core/plugins/cursor/Dot';
 
 export interface IImageGeneratorProps {
   /**

package/components/Markdown/Markdown.tsx

@@ -0,0 +1,105 @@
+import { memo, useMemo } from 'react';
+import MarkdownX from './core';
+import type { MarkdownProps } from './types';
+import useTyping from './core/hooks/useTyping';
+import { useProviderContext } from '@agentscope-ai/chat';
+import classNames from 'classnames';
+import Null from './core/components/Null';
+import CodeBlock from './core/components/CodeBlock';
+import DisabledImage from './core/components/DisableImage';
+import Media from './core/components/Media';
+import Raw from './core/components/Raw';
+import { ErrorBoundary } from "react-error-boundary";
+import useCitationsData from './core/hooks/useCitationsData';
+import Latex from '@ant-design/x-markdown/plugins/Latex';
+import { citationsExtension } from './core/plugins/citations';
+import { CursorComponent, cursorExtension } from './core/plugins/cursor';
+
+
+// 缓存不变的 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();
+
+
+export default memo(function (props: MarkdownProps) {
+  const baseFontSize = props.baseFontSize || 14;
+  const baseLineHeight = props.baseLineHeight || 1.7;
+  const content = useTyping({ content: props.content, typing: props.typing });
+  const prefixCls = useProviderContext().getPrefixCls('markdown');
+  const {
+    raw = false,
+    allowHtml = true,
+  } = props;
+
+  const {
+    citationsData,
+    citationsDataCount,
+    CitationComponent
+  } = useCitationsData({ citations: props.citations, citationsMap: props.citationsMap });
+
+  const components = useMemo(() => ({
+    pre: CodeBlock,
+    style: Null,
+    script: Null,
+    img: props.disableImage ? DisabledImage : Media,
+    citation: CitationComponent,
+    'custom-cursor': CursorComponent,
+  }), [props.disableImage, CitationComponent]);
+
+
+  const dompurifyConfig = useMemo(() =>
+    allowHtml ? {
+      ADD_TAGS: ['custom-cursor', 'citation']
+    } : EMPTY_DOMPURIFY_CONFIG
+    , [allowHtml]);
+
+
+  // 使用 useMemo 缓存 extensions 配置
+  const extensions = useMemo(() => {
+    const exts = Latex()
+    exts.push(cursorExtension());
+    if (citationsDataCount > 0) exts.push(citationsExtension(citationsData));
+    return exts;
+  }, [citationsDataCount, citationsData]);
+
+  // // 使用 useMemo 缓存 config 对象
+  const config = useMemo(() => ({
+    extensions,
+  }), [extensions]);
+
+  const fallback = <Raw content={content} baseFontSize={baseFontSize} baseLineHeight={baseLineHeight} />;
+
+  if (raw || !isSupportsLookbehindAssertions) return fallback;
+
+  return <ErrorBoundary fallback={fallback}>
+    <MarkdownX
+      dompurifyConfig={dompurifyConfig}
+      cursor={props.cursor}
+      // @ts-ignore
+      components={components}
+      style={{ fontSize: baseFontSize, lineHeight: baseLineHeight }}
+      openLinksInNewTab={true}
+      className={classNames(prefixCls, props.className)}
+      content={content}
+      config={config}
+    />
+  </ErrorBoundary>
+
+});

package/components/Markdown/{Markdown/defaultComponents → core/components}/CodeBlock.tsx

@@ -110,4 +110,4 @@ const useStyles = createStyles(({ css, token }) => ({
   }
 }));
 
-export default CodeBlock;
+export default CodeBlock;

package/components/Markdown/core/components/Null.tsx

@@ -0,0 +1 @@
+export default () => null;

package/components/Markdown/core/components/Raw.tsx

@@ -0,0 +1,18 @@
+import { MarkdownProps } from '../../types'
+import { useProviderContext } from '@agentscope-ai/chat';
+
+interface RawProps {
+  content: MarkdownProps['content'];
+  baseFontSize?: number;
+  baseLineHeight?: number;
+}
+
+export default function Raw(props: RawProps) {
+  const prefixCls = useProviderContext().getPrefixCls('markdown');
+
+  return <div
+    className={prefixCls}
+    style={{ fontSize: props.baseFontSize, lineHeight: props.baseLineHeight }}>
+    {props.content}
+  </div>
+}

package/components/Markdown/{Markdown → core}/hooks/useCitationsData.tsx

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

package/components/Markdown/core/hooks/useCursorContent.tsx

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+
+export default function useCursorContent({ cursor, content }: { cursor: boolean | 'dot' | 'underline', content: string }) {
+  const cursorContent = useMemo(() => {
+    if (cursor) {
+      if (cursor === 'dot') return ' :dot:';
+      if (cursor === 'underline') return ' :underline:';
+      return ' :dot:';
+    }
+    return '';
+  }, [cursor, content]);
+
+
+  return content + cursorContent;
+}

package/components/Markdown/{Markdown/hooks/useTyping.ts → core/hooks/useTyping.tsx}

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
-export const useTyping = ({ content, typing }) => {
+const useTyping = ({ content, typing }) => {
   const [index, setIndex] = useState(0);
   const timer = useRef<NodeJS.Timeout>();
 
@@ -20,3 +20,6 @@ export const useTyping = ({ content, typing }) => {
 
   return content.slice(0, index);
 };
+
+
+export default useTyping;

package/components/Markdown/core/index.tsx

@@ -0,0 +1,18 @@
+import XMarkdown from '@ant-design/x-markdown';
+import { InnerMarkdownXProps } from '../types';
+import Styles from '../styles';
+import useCursorContent from './hooks/useCursorContent';
+
+
+export default function (props: InnerMarkdownXProps) {
+  const { content: originalContent, cursor, ...rest } = props;
+  const content = useCursorContent({
+    cursor: cursor,
+    content: originalContent
+  });
+
+  return <>
+    <Styles />
+    <XMarkdown {...rest} content={content} />
+  </>;
+};

package/components/Markdown/{plugins → core/plugins}/citations/CitationComponent.tsx

@@ -44,7 +44,10 @@ export interface CitationComponentProps extends DefaultRenderProps {
 function DefaultRender(props: DefaultRenderProps) {
   const { getPrefixCls } = useProviderContext();
   const prefixCls = getPrefixCls('markdown-citation');
-  const { text, url, title, content } = props;
+  const text = props['data-text'];
+  const url = props['data-url'];
+  const title = props['data-title'];
+  const content = props['data-content'];
 
   const isTooltip = content || title;
 
@@ -67,6 +70,5 @@ function DefaultRender(props: DefaultRenderProps) {
 
 export default function CitationComponent(props: DefaultRenderProps & { citationsData: Record<string, any> }) {
   const Render = props.citationsData[props.text]?.render || DefaultRender;
-  
   return <Render {...props} />
-}
+}

package/components/Markdown/{plugins → core/plugins}/citations/index.tsx

@@ -1,7 +1,6 @@
-import { MarkdownProps } from "../../Markdown/interface";
 export { default as CitationComponent } from './CitationComponent';
 
-export function citationsExtension(citationsData: MarkdownProps['citationsMap']) {
+export function citationsExtension(citationsData) {
 
   return {
     name: 'citation',
@@ -29,8 +28,8 @@ export function citationsExtension(citationsData: MarkdownProps['citationsMap'])
       const citation = citationsData?.[text];
 
       if (!citation) return token.raw;
-
-      return `<citation text="${text}" url="${citation.url}" title="${citation.title}" content="${citation.content}"></citation>`;
+     
+      return `<citation data-text="${text}" data-url="${citation.url}" data-title="${citation.title}" data-content="${citation.content}"></citation>`;
 
     },
   };

package/components/Markdown/{plugins → core/plugins}/cursor/Underline.tsx

@@ -10,7 +10,7 @@ const Style = createGlobalStyle`
 
   &::after {
     content: '_';
-    color: ${({theme}) => theme.colorPrimary};
+    color: ${({ theme }) => theme.colorPrimary};
   }
 }
 

package/components/Markdown/{plugins → core/plugins}/cursor/index.tsx

@@ -1,14 +1,13 @@
-import React from "react";
 import Underline from './Underline';
 import Dot from './Dot';
 
-export const CursorComponent = function(props) {
-
-  if (props.type === 'dot') {
+export const CursorComponent = function (props) {
+  const type = props['data-type'];
+  if (type === 'dot') {
     return <Dot />
   }
 
-  if (props.type === 'underline') {
+  if (type === 'underline') {
     return <Underline />
   }
 
@@ -43,7 +42,7 @@ export function cursorExtension() {
       if (!cursor) {
         return;
       }
-
+      
       return {
         type: 'cursor',
         raw: match[0],
@@ -52,8 +51,9 @@ export function cursorExtension() {
       };
     },
     renderer(token) {
-      const content = `<cursor type="${token.name}"></cursor>`;
+      const content = `<custom-cursor data-type="${token.name}"></custom-cursor>`;
+      
       return content;
     },
   };
-}
+}

package/components/Markdown/demo/cursor.tsx

@@ -1,9 +1,8 @@
 import { Markdown } from '@agentscope-ai/chat';
-import { Space } from 'antd';
 
-const text = `Hello, world!`
 
+const content = `Hello, world!`;
 
 export default function () {
-  return <Space direction="vertical" ><Markdown content={text} cursor="dot" /> <Markdown content={text} cursor="underline" /></Space>;
+  return <Markdown content={content} cursor="underline" />;
 }

package/components/Markdown/index.en-US.md

@@ -19,9 +19,8 @@ import { Markdown } from '@agentscope-ai/chat';
 <code src="./demo/latex.tsx" height="600">Latex</code>
 <code src="./demo/citations.tsx" height="auto">Citations</code>
 <code src="./demo/cursor.tsx" height="auto">Cursor</code>
-<code src="./demo/typing.tsx" height="300">Typing</code>
 
 
 #### API
 
-<ApiParser source="./Markdown/index.tsx" id="MarkdownProps"></ApiParser>
+<ApiParser source="./types.tsx" id="MarkdownProps"></ApiParser>

package/components/Markdown/index.tsx

@@ -0,0 +1,6 @@
+export { default } from './Markdown';
+
+
+export type {
+  MarkdownProps,
+} from './types';

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

@@ -20,9 +20,8 @@ import { Markdown } from '@agentscope-ai/chat';
 <code src="./demo/latex.tsx" height="600">Latex</code>
 <code src="./demo/citations.tsx" height="auto">引用</code>
 <code src="./demo/cursor.tsx" height="auto">光标</code>
-<code src="./demo/typing.tsx" height="300">打字效果</code>
 
 
 #### API
 
-<ApiParser source="./Markdown/index.tsx" id="MarkdownProps"></ApiParser>
+<ApiParser source="./types.tsx" id="MarkdownProps"></ApiParser>

package/components/Markdown/{Markdown/style.ts → styles.ts}

@@ -1,14 +1,10 @@
 import { createGlobalStyle } from 'antd-style';
 
 export default createGlobalStyle`
-.${(p) => p.theme.prefixCls}-markdown  {
+.${(p) => p.theme.prefixCls}-markdown {
   color: inherit;
   max-width: 100%;
 
-  ol, ul  {
-    padding-left: 30px;
-  }
-
   blockquote {
     padding-inline: 0.6em 0;
     padding-block: 0;
@@ -35,6 +31,14 @@ export default createGlobalStyle`
 
   pre code {
     font-size: 0.8571428571428571em;
+    background-color: transparent;
+    border: none;
+  }
+
+  pre {
+    background-color: ${(p) => p.theme.colorFillQuaternary};
+    padding: 4px 10px;
+    border: 1px solid ${(p) => p.theme.colorBorderSecondary};
   }
 
   h1,
@@ -51,7 +55,6 @@ export default createGlobalStyle`
   }
 
   p {
-    margin-top: 0.5714285714285714em;
     margin-bottom: 0.5714285714285714em;
   }
 
@@ -130,23 +133,11 @@ export default createGlobalStyle`
       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;
+.${(p) => p.theme.prefixCls}-markdown.x-markdown {
+  img {
+    margin: 0;
   }
 }
 `;

package/components/Markdown/types.tsx

@@ -0,0 +1,94 @@
+import { XMarkdownProps } from '@ant-design/x-markdown';
+
+
+export interface MarkdownProps {
+  /**
+   * @description 需要渲染的 Markdown 内容
+   * @descriptionEn Markdown content to be rendered
+   */
+  content?: string;
+  /**
+   * @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?: number;
+  /**
+   * @description 基础行高，影响文本的行间距
+   * @descriptionEn Base line height that affects text line spacing
+   */
+  baseLineHeight?: number;
+
+  /**
+   * @description 是否允许渲染HTML标签，影响安全性
+   * @descriptionEn Whether to allow rendering HTML tags, affects security
+   */
+  allowHtml?: boolean;
+
+  /**
+   * @description 是否禁用图片渲染
+   * @descriptionEn Whether to disable image rendering
+  */
+  disableImage?: boolean;
+
+  /**
+   * @description 是否以原始文本形式显示，跳过Markdown解析
+   * @descriptionEn Whether to display as raw text, skipping Markdown parsing
+   */
+  raw?: boolean;
+
+  /**
+   * @description 是否启用打字机效果，逐字显示内容
+   * @descriptionEn Whether to enable typewriter effect for character-by-character display
+   */
+  typing?: boolean | number;
+
+
+  /**
+   * @description 组件的CSS类名
+   * @descriptionEn CSS class name for the component
+   */
+  className?: string;
+
+
+
+
+  citations?: {
+    title?: string;
+    url?: string;
+    content?: string;
+    render?: (props: {
+      text: string;
+      url: string;
+      title: string;
+      content: string;
+    }) => React.ReactNode;
+  }[];
+  citationsMap?: Record<
+    string,
+    {
+      title?: string;
+      url?: string;
+      content?: string;
+      render?: (props: {
+        text: string;
+        url: string;
+        title: string;
+        content: string;
+      }) => React.ReactNode;
+    }
+  >;
+}
+
+
+export interface InnerMarkdownXProps extends XMarkdownProps {
+  /**
+   * @description 光标样式类型，支持点状、下划线或布尔值控制
+   * @descriptionEn Cursor style type, supports dot, underline, or boolean control
+   */
+  cursor?: MarkdownProps['cursor'];
+}

package/components/index.ts

@@ -2,8 +2,6 @@ export { ConfigProvider } from 'antd';
 
 export { default as version } from './Version';
 
-export * from '@copilotkit/react-core';
-export * from './AGUI';
 
 export {
   CustomCardsContext,
@@ -85,4 +83,4 @@ export {
   default as Markdown,
   type MarkdownProps as IMarkdownProps,
   type MarkdownProps,
-} from './Markdown';
+} from './Markdown';

package/lib/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Builder.js

@@ -150,14 +150,16 @@ var AgentScopeRuntimeResponseBuilder = /*#__PURE__*/function () {
         var _c$content;
         if (AgentScopeRuntimeResponseBuilder.maybeToolInput(c) && (_c$content = c.content) !== null && _c$content !== void 0 && _c$content.length) {
           var content = c.content[0];
-          bufferMessagesMap.set(content.data.name, content);
+          var key = content.data.call_id || content.data.name;
+          bufferMessagesMap.set(key, content);
           return p;
         }
         if (AgentScopeRuntimeResponseBuilder.maybeToolOutput(c)) {
           var _content = c.content[0];
-          var bufferContent = bufferMessagesMap.get(_content.data.name);
+          var _key = _content.data.call_id || _content.data.name;
+          var bufferContent = bufferMessagesMap.get(_key);
           if (bufferContent) {
-            bufferMessagesMap.delete(_content.data.name);
+            bufferMessagesMap.delete(_key);
             return [].concat(_toConsumableArray(p), [_objectSpread(_objectSpread({}, c), {}, {
               content: [bufferContent].concat(_toConsumableArray(c.content))
             })]);

package/lib/ImageGenerator/index.js

@@ -3,7 +3,7 @@ import Style from "./style";
 import { useProviderContext } from "../Provider";
 import { ConfigProvider, Image } from 'antd';
 import { SparkCheckCircleFill } from '@agentscope-ai/icons';
-import Dot from "../Markdown/plugins/cursor/Dot";
+import Dot from "../Markdown/core/plugins/cursor/Dot";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/lib/Markdown/Markdown.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { MarkdownProps } from './types';
+declare const _default: import("react").NamedExoticComponent<MarkdownProps>;
+export default _default;