@agentscope-ai/chat 1.1.20 → 1.1.22

package/components/Markdown/demo/citations.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Markdown } from '@agentscope-ai/chat';
+
+const content = `杭州今天和未来几天的天气预报如下：
+
+今天（2月18日）多云，气温在4-12℃之间[2][3][two]。白天多云，夜间转阴[7]。风力较大，上午为偏东风2-3级，傍晚增大到4级[7]。
+
+未来几天天气概况：
+- 2月19日（明天）：阴天，有小雨，气温11℃左右[3][7]
+- 2月20日：阴天，小到中雨，气温7℃左右[3][7]
+- 2月21日：多云，气温7℃左右[3]
+- 2月22日：小雨，气温7℃左右[3]
+
+总体来看，未来几天杭州天气较凉，以阴天和雨天为主，气温在7-11℃之间波动。建议市民适当增添衣物，注意保暖，外出时携带雨具[2][3][7][110]。
+`;
+
+const citationsMap = [
+  'https://www.weather.com.cn/weather/101210101.shtml',
+  'https://tianqi.moji.com/weather/china/zhejiang/hangzhou',
+  'https://weather.cma.cn/web/weather/58457.html',
+  'https://tianqi.so.com/weather/101210101',
+  'https://www.accuweather.com/zh/cn/hangzhou/106832/weather-forecast/106832',
+  'https://www.hzqx.com',
+  'https://www.hzqx.com/pc/hztq/',
+].map((url, index) => {
+  return {
+    url,
+    title: `参考${index + 1}`,
+    content: url,
+  };
+}).reduce((acc, item, index) => {
+  acc[index + 1] = item;
+  return acc;
+}, {});
+
+export default function () {
+  return <Markdown content={content} citationsMap={{
+    ...citationsMap, two: {
+      url: 'two',
+      title: 'two',
+      content: 'two',
+      render: (props) => {
+        return <i>{props.content}</i>;
+      }
+    }
+  }} />;
+}

package/components/Markdown/demo/cursor.tsx

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

package/components/Markdown/demo/latex.tsx

@@ -0,0 +1,77 @@
+import { Markdown } from '@agentscope-ai/chat';
+
+
+const content = `三角函数是一类数学函数，主要用来描述直角三角形中的角度与边长之间的关系。最常用的三角函数包括正弦（sine, 简写为sin）、余弦（cosine, 简写为cos）和正切（tangent, 简写为tan）。此外还有它们的倒数：余割（cosecant, 简写为csc或cosec）、正割（secant, 简写为sec）和余切（cotangent, 简写为cot）。
+
+这些函数的基本定义如下：
+
+1. **正弦（sin）**：对于一个角θ，在直角三角形中，正弦是该角对边与斜边的比值。
+   \\[ 1 + 2 = 3 \\]
+
+2. **余弦（cos）**：对于一个角θ，在直角三角形中，余弦是该角邻边与斜边的比值。
+   \\[ \\cos(\\theta) = \\frac{\\text{邻边}}{\\text{斜边}} \\]
+
+3. **正切（tan）**：对于一个角θ，在直角三角形中，正切是对边与邻边的比值。
+   \\[ \\tan(\\theta) = \\frac{\\text{对边}}{\\text{邻边}} \\]
+
+4. **余割（csc）**：是正弦的倒数。
+   \\[ \\csc(\\theta) = \\frac{1}{\\sin(\\theta)} \\]
+
+5. **正割（sec）**：是余弦的倒数。
+   \\[ \\sec(\\theta) = \\frac{1}{\\cos(\\theta)} \\]
+
+6. **余切（cot）**：是正切的倒数。
+   \\[ \\cot(\\theta) = \\frac{1}{\\tan(\\theta)} \\]
+
+三角函数在数学、物理学、工程学等领域有着广泛的应用，尤其是在处理周期性现象时。
+
+矩阵是数学中一种重要的工具，广泛应用于线性代数、计算机科学、物理学等领域。以下是关于矩阵形式的详细说明：
+矩阵是一个**按矩形排列的数表**，由 **m 行 n 列** 的元素组成，通常用大写字母表示（如 A、B）。 
+
+一般形式如下：
+
+$$
+A = \\begin{bmatrix}
+a_{11} & a_{12} & \\cdots & a_{1n} \\\\
+a_{21} & a_{22} & \\cdots & a_{2n} \\\\
+\\vdots & \\vdots & \\ddots & \\vdots \\\\
+a_{m1} & a_{m2} & \\cdots & a_{mn}
+\\end{bmatrix}
+$$
+
+---
+
+其中 \( C \) 表示圆的周长，\( \pi \) 是圆周率（大约等于 3.14159），而 \( r \) 是圆的半径。
+
+其中 $ C $ 表示圆的周长，$ \pi $ 是圆周率（大约等于 3.14159），而 $ r $ 是圆的半径。
+
+---
+
+\\[
+x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
+\\]
+
+\\[
+\\begin{align*}
+1. & \\quad x + y = 10 \\\\
+2. & \\quad 2x - y = 0
+\\end{align*}
+\\]
+
+
+$$ x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a} $$
+
+$$
+\\begin{align*}
+1. & \\quad x + y = 10 \\\\
+2. & \\quad 2x - y = 0
+\\end{align*}
+$$
+`;
+
+
+export default function () {
+  return <Markdown
+    content={content}
+  />;
+}

package/components/Markdown/demo/typing.tsx

@@ -0,0 +1,82 @@
+import { Markdown } from '@agentscope-ai/chat';
+import { Flex } from 'antd';
+
+const fullContentZh = `# 出师表
+臣亮言：先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。
+
+然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。
+
+诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
+
+亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。
+
+先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。
+
+臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。
+
+先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。
+
+先帝知臣谨慎，故临崩寄臣以大事也。
+
+受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。
+
+今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。
+
+此臣所以报先帝而忠陛下之职分也。
+
+愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。
+
+陛下亦宜自谋，以咨诹善道，察纳雅言。深追先帝遗诏，臣不胜受恩感激。今当远离，临表涕零，不知所言。`;
+
+const fullContentEn = `# 出师表
+
+Permit me to observe: the late emperor was taken from us before he could finish his life's work, the restoration of the Han. Today, the empire is still divided in three, and our very survival is threatened.
+
+Yet still the officials at court and the soldiers throughout the realm remain loyal to you, your majesty. Because they remember the late emperor, all of them, and they wish to repay his kindness in service to you.
+
+This is the moment to extend your divine influence, to honor the memory of the late Emperor and strengthen the morale of your officers. It is not the time to listen to bad advice, or close your ears to the suggestions of loyal men.
+
+The emperors of the Western Han chose their courtiers wisely, and their dynasty flourished. The emperors of the Eastern Han chose poorly, and they doomed the empire to ruin.
+
+Whenever the late Emperor discussed this problem with me, he lamented the failings of Emperors Huan and Ling.
+
+I began as a common man, farming in my fields in Nanyang, doing what I could to survive in an age of chaos. I never had any interest in making a name for myself as a noble.
+
+The late Emperor was not ashamed to visit my cottage and seek my advice. Grateful for his regard, I responded to his appeal and threw myself into his service.
+
+The late Emperor always appreciated my caution and, in his final days, entrusted me with his cause.
+
+Since that moment, I have been tormented day and night by the fear that I might let him down. That is why I crossed the Lu river at the height of summer, and entered the wastelands beyond.
+
+Now the south has been subdued, and our forces are fully armed. I should lead our soldiers to conquer the northern heartland and attempt to remove the hateful traitors, restore the house of Han, and return it to the former capital.
+
+This is the way I mean to honor my debt to the late Emperor and fulfill my duty to you.
+
+My only desire is to be permitted to drive out the traitors and restore the Han. If I should let you down, punish my offense and report it to the spirit of the late Emperor.
+
+Your Majesty, consider your course of action carefully. Seek out good advice, and never forget the late words of the late Emperor. I depart now on a long expedition, and I will be forever grateful if you heed my advice. Blinded by my own tears, I know not what I write.`;
+
+
+export default function () {
+  return <Flex gap={32}>
+    <div style={{ flex: 1 }}>
+
+      <Markdown
+        typing={50}
+        enableAnimation={true}
+        enableWordCaching={true}
+        content={fullContentZh}
+      />
+    </div>
+
+    <div style={{ flex: 1 }}>
+
+      <Markdown
+        cursor="underline"
+        typing={12.5}
+        enableWordCaching={true}
+        content={fullContentEn}
+      />
+    </div>
+  </Flex>
+}

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

@@ -0,0 +1,27 @@
+---
+group:
+  title: Output
+  order: 3
+title: Markdown
+description: Markdown is a React component for rendering Markdown text
+---
+
+<DemoTitle title="Markdown" desc="Markdown is a React component for rendering Markdown text. It supports various Markdown syntax such as headings, lists, links, images, code blocks, etc."></DemoTitle>
+
+<code src="./demo/basic.tsx" height="600">Example</code>
+
+<Install>
+import { Markdown } from '@agentscope-ai/chat';
+</Install>
+
+#### More Examples
+
+<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>

package/components/Markdown/index.ts

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

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

@@ -0,0 +1,28 @@
+---
+group:
+  title: 输出
+  order: 3
+title: Markdown
+description: 是一个用于渲染 Markdown 文本的 React 组件
+---
+
+<DemoTitle title="Markdown" desc="是一个用于渲染 Markdown 文本的 React 组件。它支持各种 Markdown 语法，例如标题、列表、链接、图片、代码块等。"></DemoTitle>
+
+<code src="./demo/basic.tsx" height="600">示例</code>
+
+<Install>
+import { Markdown } from '@agentscope-ai/chat';
+</Install>
+
+
+#### 更多示例
+
+<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>

package/components/Markdown/plugins/citations/CitationComponent.tsx

@@ -0,0 +1,72 @@
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from '@agentscope-ai/chat';
+import { Popover } from 'antd';
+
+
+const Style = createGlobalStyle`
+.${p => p.theme.prefixCls}-markdown-citation {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  padding: 0 4px;
+  height: 16px;
+  margin-inline: 2px;
+  font-size: 10px;
+  color: ${p => p.theme.colorTextSecondary};
+  text-align: center;
+  vertical-align: top;
+  background: ${p => p.theme.colorFillSecondary};
+  border-radius: 4px;
+  transition: all 100ms ${p => p.theme.motionEaseOut};
+  cursor: pointer;
+  line-height: 1;
+
+  &:hover {
+    color: ${p => p.theme.colorWhite};
+    background: ${p => p.theme.colorPrimary};
+  }
+}
+`;
+
+
+export interface DefaultRenderProps {
+  text: string;
+  url: string;
+  title: string;
+  content: string;
+}
+
+export interface CitationComponentProps extends DefaultRenderProps {
+  render: (props: DefaultRenderProps) => React.ReactNode;
+}
+
+function DefaultRender(props: DefaultRenderProps) {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('markdown-citation');
+  const { text, url, title, content } = props;
+
+  const isTooltip = content || title;
+
+  let node = <sup className={prefixCls}>{text}</sup>;
+
+  if (isTooltip) {
+    node = <Popover title={title} content={url ? <a href={url}
+      rel="noreferrer"
+      target={'_blank'}>{url}</a> : content}>{node}</Popover>;
+  }
+
+  return <>
+    <Style />
+    {node}
+  </>
+}
+
+
+
+
+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/citations/index.tsx

@@ -0,0 +1,37 @@
+import { MarkdownProps } from "../../Markdown/interface";
+export { default as CitationComponent } from './CitationComponent';
+
+export function citationsExtension(citationsData: MarkdownProps['citationsMap']) {
+
+  return {
+    name: 'citation',
+    level: 'inline' as const,
+    tokenizer(src: string) {
+      // 使用负向前瞻确保不匹配 markdown 链接语法 [text](url)
+      const match = src.match(/^\[([^\]]+)\](?!\()/);
+      if (match) {
+        const content = match[0].trim();
+        const text = content?.replace(/^\[([^\]]+)\]/g, '$1');
+
+        if (citationsData[text]) {
+          return {
+            type: 'citation',
+            raw: content,
+            text: content?.replace(/^\[([^\]]+)\]/g, '$1'),
+            renderType: 'component',
+          };
+        }
+      }
+    },
+    renderer(token) {
+      if (citationsData && Object.keys(citationsData).length === 0) return null;
+      const { text } = token;
+      const citation = citationsData?.[text];
+
+      if (!citation) return token.raw;
+
+      return `<citation text="${text}" url="${citation.url}" title="${citation.title}" content="${citation.content}"></citation>`;
+
+    },
+  };
+}

package/components/Markdown/plugins/cursor/Dot.tsx

@@ -0,0 +1,106 @@
+import { useProviderContext } from '@agentscope-ai/chat';
+import { createGlobalStyle } from 'antd-style';
+import classNames from 'classnames';
+
+const Style = createGlobalStyle`
+.${p => p.theme.prefixCls}-markdown-cursor-dot {
+  display: inline-flex;
+  width: 0;
+  align-items: center;
+  padding-left: 2px;
+  gap: 4px;
+
+
+  &-dot1 {
+    flex: 0 0 5px;
+    width: 5px;
+    height: 5px;
+    border-radius: 999px;
+    background-color: ${p => p.theme.colorText};
+    animation: markdown-cursor-dot1 2s infinite ease;
+  }
+
+
+  &-dot2 {
+    flex: 0 0 5px;
+    width: 5px;
+    height: 5px;
+    border-radius: 999px;
+    opacity: 0.5;
+    background-color: ${p => p.theme.colorText};
+    animation: markdown-cursor-dot2 2s infinite ease;
+  }
+
+}
+
+
+@keyframes markdown-cursor-dot1 {
+  0% {
+    transform: translateX(0px)scale(1);
+    z-index: 1;
+    opacity: 1;
+
+  }
+
+  40% {
+    transform: translateX(8.5px)scale(0.8);
+    z-index: 3;
+    opacity: 0.5;
+
+  }
+
+  50% {
+    transform: translateX(8.5px) scale(0.8);
+    z-index: 1;
+    opacity: 0.5;
+  }
+
+  90% {
+    transform: translateX(0px) scale(1);
+    z-index: 1;
+    opacity: 1;
+  }
+}
+
+@keyframes markdown-cursor-dot2 {
+  0% {
+    transform: translateX(0px)scale(1);
+    z-index: 1;
+    opacity: 0.5;
+
+  }
+
+  40% {
+    transform: translateX(-8.5px)scale(1.25);
+    z-index: 3;
+    opacity: 1;
+
+  }
+
+  50% {
+    transform: translateX(-8.5px) scale(1.25);
+    z-index: 1;
+    opacity: 1;
+  }
+
+  90% {
+    transform: translateX(0px) scale(1);
+    z-index: 1;
+    opacity: 0.5;
+  }
+}
+`
+
+export default function () {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = getPrefixCls('markdown-cursor-dot');
+
+  return <>
+    <Style />
+    <span className={classNames(prefixCls, getPrefixCls('markdown-cursor'))}>
+      <span style={{ opacity: 0, marginLeft: '-.75em' }}>_</span>
+      <span className={`${prefixCls}-dot1`}></span>
+      <span className={`${prefixCls}-dot2`}></span>
+    </span>
+  </>
+}

package/components/Markdown/plugins/cursor/Underline.tsx

@@ -0,0 +1,38 @@
+import { useProviderContext } from '@agentscope-ai/chat';
+import classNames from 'classnames';
+import { createGlobalStyle } from 'antd-style';
+
+const Style = createGlobalStyle`
+.markdown-cursor-underline {
+  opacity: 1;
+  padding: 0 2px;
+  animation: markdown-cursor-underline .8s infinite;
+
+  &::after {
+    content: '_';
+    color: ${({theme}) => theme.colorPrimary};
+  }
+}
+
+
+@keyframes markdown-cursor-underline {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+`
+
+
+
+export default function () {
+  const { getPrefixCls } = useProviderContext();
+  const prefixCls = ('markdown-cursor-underline');
+  return <>
+    <Style />
+    <span className={classNames(prefixCls, getPrefixCls('markdown-cursor'))} />
+  </>
+}

package/components/Markdown/plugins/cursor/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import Underline from './Underline';
+import Dot from './Dot';
+
+export const CursorComponent = function(props) {
+
+  if (props.type === 'dot') {
+    return <Dot />
+  }
+
+  if (props.type === 'underline') {
+    return <Underline />
+  }
+
+  return null;
+}
+
+export function cursorExtension() {
+  const options = {
+    cursors: {
+      dot: 'dot',
+      underline: 'underline',
+    },
+  };
+
+  const cursorNames = Object.keys(options.cursors).map(e => e.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|');
+  const cursorRegex = new RegExp(`:(${cursorNames}):`);
+  const tokenizerRule = new RegExp(`^${cursorRegex.source}`);
+
+  return {
+    name: 'cursor',
+    level: 'inline',
+    start(src) { return src.match(cursorRegex)?.index; },
+    tokenizer(src, tokens) {
+      const match = tokenizerRule.exec(src);
+      if (!match) {
+        return;
+      }
+
+      const name = match[1];
+      const cursor = options.cursors[name];
+
+      if (!cursor) {
+        return;
+      }
+
+      return {
+        type: 'cursor',
+        raw: match[0],
+        name,
+        cursor,
+      };
+    },
+    renderer(token) {
+      const content = `<cursor type="${token.name}"></cursor>`;
+      return content;
+    },
+  };
+}