@agentscope-ai/chat 1.1.46-beta.1768191317759 → 1.1.46-beta.1768287325682
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Markdown/Markdown.tsx +14 -8
- package/components/Markdown/core/components/CodeBlock.tsx +30 -99
- package/components/Markdown/demo/basic.tsx +11 -1
- package/components/Markdown/styles.ts +46 -9
- package/lib/Markdown/Markdown.js +14 -7
- package/lib/Markdown/core/components/CodeBlock.d.ts +4 -7
- package/lib/Markdown/core/components/CodeBlock.js +49 -96
- package/lib/Markdown/styles.js +18 -2
- package/package.json +2 -1
|
@@ -57,7 +57,7 @@ export default memo(function (props: MarkdownProps) {
|
|
|
57
57
|
} = useCitationsData({ citations: props.citations, citationsMap: props.citationsMap });
|
|
58
58
|
|
|
59
59
|
const components = useMemo(() => ({
|
|
60
|
-
|
|
60
|
+
code: CodeBlock,
|
|
61
61
|
style: Null,
|
|
62
62
|
script: Null,
|
|
63
63
|
img: props.disableImage ? DisabledImage : Media,
|
|
@@ -67,12 +67,9 @@ export default memo(function (props: MarkdownProps) {
|
|
|
67
67
|
...props.components,
|
|
68
68
|
}), [props.disableImage, CitationComponent, props.components]);
|
|
69
69
|
|
|
70
|
-
const dompurifyConfig = useMemo(() =>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
} : EMPTY_DOMPURIFY_CONFIG
|
|
74
|
-
, [allowHtml]);
|
|
75
|
-
|
|
70
|
+
const dompurifyConfig = useMemo(() => ({
|
|
71
|
+
ADD_TAGS: ['custom-cursor', 'citation']
|
|
72
|
+
}), []);
|
|
76
73
|
|
|
77
74
|
// 使用 useMemo 缓存 extensions 配置
|
|
78
75
|
const { extensions, walkTokens } = useMemo(() => {
|
|
@@ -91,7 +88,16 @@ export default memo(function (props: MarkdownProps) {
|
|
|
91
88
|
const config = useMemo(() => ({
|
|
92
89
|
extensions,
|
|
93
90
|
walkTokens,
|
|
94
|
-
|
|
91
|
+
// 当 allowHtml 为 false 时,转义 HTML 标签使其显示为字符串
|
|
92
|
+
...(!allowHtml && {
|
|
93
|
+
renderer: {
|
|
94
|
+
html(token: { text?: string; raw?: string }) {
|
|
95
|
+
const text = token.text || token.raw || '';
|
|
96
|
+
return text.replace(/</g, '<').replace(/>/g, '>');
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
})
|
|
100
|
+
}), [extensions, allowHtml]);
|
|
95
101
|
|
|
96
102
|
const fallback = <Raw content={content || ''} baseFontSize={baseFontSize} baseLineHeight={baseLineHeight} />;
|
|
97
103
|
|
|
@@ -1,114 +1,45 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { useProviderContext, Mermaid } from '@agentscope-ai/chat';
|
|
6
|
-
import { theme as AntdTheme } from 'antd'
|
|
1
|
+
import { Bubble, CodeHighlighter, Mermaid } from '@ant-design/x';
|
|
2
|
+
import { type ComponentProps } from '@ant-design/x-markdown';
|
|
3
|
+
import { useProviderContext } from "@agentscope-ai/chat";
|
|
4
|
+
import { useState } from 'react';
|
|
7
5
|
import { SparkCopyLine, SparkTrueLine } from '@agentscope-ai/icons';
|
|
8
6
|
|
|
9
|
-
const supportedLanguages = Object.keys(CodeBlockLangExtensionsMap);
|
|
10
7
|
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
const matches = str.match(regex);
|
|
15
|
-
return matches ? matches.length : 1;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
const useCode = (raw: any) => {
|
|
19
|
-
if (!raw) return {};
|
|
20
|
-
|
|
21
|
-
const { children, className } = raw.props;
|
|
22
|
-
|
|
23
|
-
if (!children) return {};
|
|
8
|
+
const Code: React.FC<ComponentProps> = (props) => {
|
|
9
|
+
const { className, children } = props;
|
|
10
|
+
const lang = className?.match(/language-(\w+)/)?.[1] || '';
|
|
24
11
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
return {
|
|
30
|
-
content,
|
|
31
|
-
isSingleLine,
|
|
32
|
-
lang,
|
|
33
|
-
};
|
|
12
|
+
if (typeof children !== 'string') return null;
|
|
13
|
+
if (lang === 'mermaid') {
|
|
14
|
+
return <Mermaid header={<CodeHeader lang='mermaid' content={children} />}>{children}</Mermaid>;
|
|
15
|
+
}
|
|
16
|
+
return <CodeHighlighter lang={lang} header={<CodeHeader lang={lang} content={children} />}>{children}</CodeHighlighter>;
|
|
34
17
|
};
|
|
35
18
|
|
|
36
|
-
interface CodeBlockProps {
|
|
37
|
-
children: any;
|
|
38
|
-
enableMermaid?: boolean;
|
|
39
|
-
}
|
|
40
19
|
|
|
41
|
-
|
|
42
|
-
const code = useCode(children);
|
|
43
|
-
const { styles, cx } = useStyles();
|
|
44
|
-
const { getPrefixCls, theme } = useProviderContext();
|
|
45
|
-
const isDarkMode = theme?.algorithm === AntdTheme.darkAlgorithm;
|
|
20
|
+
function CodeHeader({ lang, content }: { lang: string, content: string }) {
|
|
46
21
|
const [copied, setCopied] = useState(false);
|
|
22
|
+
const { getPrefixCls } = useProviderContext();
|
|
23
|
+
const prefixCls = getPrefixCls('code-header');
|
|
47
24
|
|
|
48
25
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
return _content.replace(/ :(dot|underline):/g, '');
|
|
52
|
-
}, [_content])
|
|
26
|
+
return <div className={prefixCls}>
|
|
27
|
+
<div className={`${prefixCls}-lang`}>{lang}</div>
|
|
53
28
|
|
|
54
29
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<div className={styles.header}>
|
|
65
|
-
<div className={styles.lang}>{lang}</div>
|
|
66
|
-
{
|
|
67
|
-
copied ? <SparkTrueLine className={styles.copied} /> : <SparkCopyLine className={styles.icon} onClick={() => {
|
|
68
|
-
navigator.clipboard.writeText(content);
|
|
69
|
-
setCopied(true);
|
|
70
|
-
setTimeout(() => {
|
|
71
|
-
setCopied(false);
|
|
72
|
-
}, 1000);
|
|
73
|
-
}} />
|
|
74
|
-
}
|
|
75
|
-
</div>
|
|
76
|
-
<Code value={content} language={lang} theme={isDarkMode ? 'dark' : 'light'} readOnly={true}></Code>
|
|
30
|
+
{
|
|
31
|
+
copied ? <SparkTrueLine className={`${prefixCls}-copied`} /> : <SparkCopyLine className={`${prefixCls}-icon`} onClick={() => {
|
|
32
|
+
navigator.clipboard.writeText(content);
|
|
33
|
+
setCopied(true);
|
|
34
|
+
setTimeout(() => {
|
|
35
|
+
setCopied(false);
|
|
36
|
+
}, 1000);
|
|
37
|
+
}} />
|
|
38
|
+
}
|
|
77
39
|
</div>
|
|
78
|
-
};
|
|
79
40
|
|
|
80
|
-
const useStyles = createStyles(({ css, token }) => ({
|
|
81
|
-
copied: css`
|
|
82
|
-
color: ${token.colorSuccess};
|
|
83
|
-
cursor: pointer;
|
|
84
|
-
font-size: 16px;
|
|
85
|
-
`,
|
|
86
|
-
container: css`
|
|
87
|
-
border: 1px solid ${token.colorBorderSecondary};
|
|
88
|
-
border-radius: 6px;
|
|
89
|
-
overflow: hidden;
|
|
90
|
-
font-size: 0.8571428571428571em;
|
|
91
|
-
margin: 1em 0;
|
|
92
|
-
`,
|
|
93
|
-
header: css`
|
|
94
|
-
display: flex;
|
|
95
|
-
justify-content: space-between;
|
|
96
|
-
background: ${token.colorFillSecondary};
|
|
97
|
-
height: 28px;
|
|
98
|
-
line-height: 28px;
|
|
99
|
-
border-radius: 4px 4px 0 0;
|
|
100
|
-
align-items: center;
|
|
101
|
-
user-select: none;
|
|
102
|
-
position: relative;
|
|
103
|
-
padding: 0 12px;
|
|
104
|
-
`,
|
|
105
|
-
icon: css`
|
|
106
|
-
fontsize: 16px;
|
|
107
|
-
cursor: pointer;
|
|
108
|
-
`,
|
|
109
|
-
lang: {
|
|
110
|
-
textTransform: 'capitalize'
|
|
111
|
-
}
|
|
112
|
-
}));
|
|
113
41
|
|
|
114
|
-
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
export default Code;
|
|
@@ -11,6 +11,12 @@ const content = `# 这是一个一级标题
|
|
|
11
11
|
##### 这是一个五级标题
|
|
12
12
|
###### 这是一个六级标题
|
|
13
13
|
|
|
14
|
+
<div>
|
|
15
|
+
????
|
|
16
|
+
<h1>这是一个标题</h1>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
|
|
14
20
|
---
|
|
15
21
|
|
|
16
22
|
这是第一个段落。
|
|
@@ -65,6 +71,10 @@ ___这是粗斜体文本___
|
|
|
65
71
|
---
|
|
66
72
|
\`hello world\`
|
|
67
73
|
|
|
74
|
+
\`\`\`
|
|
75
|
+
## title
|
|
76
|
+
\`\`\`
|
|
77
|
+
|
|
68
78
|
\`\`\`java
|
|
69
79
|
class HelloWorld {
|
|
70
80
|
public static void main(String[] args) {
|
|
@@ -102,6 +112,6 @@ export default function () {
|
|
|
102
112
|
<Input.TextArea value={value} onChange={(e) => setValue(e.target.value)} autoSize={{ minRows: 30, maxRows: 30 }} />
|
|
103
113
|
</Modal>
|
|
104
114
|
</div>
|
|
105
|
-
<Markdown content={value} />
|
|
115
|
+
<Markdown content={value} allowHtml={false} disableImage={true} />
|
|
106
116
|
</>;
|
|
107
117
|
}
|
|
@@ -35,12 +35,49 @@ export default createGlobalStyle`
|
|
|
35
35
|
border: none;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
padding: 4px 10px;
|
|
38
|
+
.${(p) => p.theme.prefixCls}-mermaid,
|
|
39
|
+
.${(p) => p.theme.prefixCls}-codeHighlighter {
|
|
41
40
|
border: 1px solid ${(p) => p.theme.colorBorderSecondary};
|
|
41
|
+
border-radius: ${(p) => p.theme.borderRadiusSM}px;
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.${(p) => p.theme.prefixCls}-mermaid-graph,
|
|
46
|
+
.${(p) => p.theme.prefixCls}-codeHighlighter-code {
|
|
47
|
+
border: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
.${(p) => p.theme.prefixCls}-code-header {
|
|
52
|
+
display: flex;
|
|
53
|
+
justify-content: space-between;
|
|
54
|
+
background: ${(p) => p.theme.colorFillSecondary};
|
|
55
|
+
border-bottom: 1px solid ${(p) => p.theme.colorBorderSecondary};
|
|
56
|
+
height: 28px;
|
|
57
|
+
line-height: 28px;
|
|
58
|
+
align-items: center;
|
|
59
|
+
user-select: none;
|
|
60
|
+
position: relative;
|
|
61
|
+
padding: 0 12px;
|
|
62
|
+
|
|
63
|
+
&-lang {
|
|
64
|
+
font-weight: bold;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&-icon {
|
|
68
|
+
font-size: 16px;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&-copied {
|
|
73
|
+
color: ${(p) => p.theme.colorSuccess};
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
font-size: 16px;
|
|
76
|
+
}
|
|
42
77
|
}
|
|
43
78
|
|
|
79
|
+
|
|
80
|
+
|
|
44
81
|
h1,
|
|
45
82
|
h2,
|
|
46
83
|
h3,
|
|
@@ -166,7 +203,7 @@ export default createGlobalStyle`
|
|
|
166
203
|
}
|
|
167
204
|
|
|
168
205
|
|
|
169
|
-
.${p => p.theme.prefixCls}-markdown-footnote {
|
|
206
|
+
.${(p) => p.theme.prefixCls}-markdown-footnote {
|
|
170
207
|
display: inline-flex;
|
|
171
208
|
align-items: center;
|
|
172
209
|
justify-content: center;
|
|
@@ -175,17 +212,17 @@ export default createGlobalStyle`
|
|
|
175
212
|
height: 16px;
|
|
176
213
|
margin-inline: 2px;
|
|
177
214
|
font-size: 10px;
|
|
178
|
-
color: ${p => p.theme.colorTextSecondary};
|
|
215
|
+
color: ${(p) => p.theme.colorTextSecondary};
|
|
179
216
|
text-align: center;
|
|
180
|
-
background: ${p => p.theme.colorFillSecondary};
|
|
217
|
+
background: ${(p) => p.theme.colorFillSecondary};
|
|
181
218
|
border-radius: 4px;
|
|
182
|
-
transition: all 100ms ${p => p.theme.motionEaseOut};
|
|
219
|
+
transition: all 100ms ${(p) => p.theme.motionEaseOut};
|
|
183
220
|
cursor: pointer;
|
|
184
221
|
line-height: 1;
|
|
185
222
|
|
|
186
223
|
&:hover {
|
|
187
|
-
color: ${p => p.theme.colorWhite};
|
|
188
|
-
background: ${p => p.theme.colorPrimary};
|
|
224
|
+
color: ${(p) => p.theme.colorWhite};
|
|
225
|
+
background: ${(p) => p.theme.colorPrimary};
|
|
189
226
|
}
|
|
190
227
|
}
|
|
191
228
|
`;
|
package/lib/Markdown/Markdown.js
CHANGED
|
@@ -69,7 +69,7 @@ export default /*#__PURE__*/memo(function (props) {
|
|
|
69
69
|
CitationComponent = _useCitationsData.CitationComponent;
|
|
70
70
|
var components = useMemo(function () {
|
|
71
71
|
return _objectSpread({
|
|
72
|
-
|
|
72
|
+
code: CodeBlock,
|
|
73
73
|
style: Null,
|
|
74
74
|
script: Null,
|
|
75
75
|
img: props.disableImage ? DisabledImage : Media,
|
|
@@ -79,10 +79,10 @@ export default /*#__PURE__*/memo(function (props) {
|
|
|
79
79
|
}, props.components);
|
|
80
80
|
}, [props.disableImage, CitationComponent, props.components]);
|
|
81
81
|
var dompurifyConfig = useMemo(function () {
|
|
82
|
-
return
|
|
82
|
+
return {
|
|
83
83
|
ADD_TAGS: ['custom-cursor', 'citation']
|
|
84
|
-
}
|
|
85
|
-
}, [
|
|
84
|
+
};
|
|
85
|
+
}, []);
|
|
86
86
|
|
|
87
87
|
// 使用 useMemo 缓存 extensions 配置
|
|
88
88
|
var _useMemo = useMemo(function () {
|
|
@@ -103,11 +103,18 @@ export default /*#__PURE__*/memo(function (props) {
|
|
|
103
103
|
|
|
104
104
|
// // 使用 useMemo 缓存 config 对象
|
|
105
105
|
var config = useMemo(function () {
|
|
106
|
-
return {
|
|
106
|
+
return _objectSpread({
|
|
107
107
|
extensions: extensions,
|
|
108
108
|
walkTokens: walkTokens
|
|
109
|
-
}
|
|
110
|
-
|
|
109
|
+
}, !allowHtml && {
|
|
110
|
+
renderer: {
|
|
111
|
+
html: function html(token) {
|
|
112
|
+
var text = token.text || token.raw || '';
|
|
113
|
+
return text.replace(/</g, '<').replace(/>/g, '>');
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
}, [extensions, allowHtml]);
|
|
111
118
|
var fallback = /*#__PURE__*/_jsx(Raw, {
|
|
112
119
|
content: content || '',
|
|
113
120
|
baseFontSize: baseFontSize,
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
declare const CodeBlock: FC<CodeBlockProps>;
|
|
7
|
-
export default CodeBlock;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type ComponentProps } from '@ant-design/x-markdown';
|
|
3
|
+
declare const Code: React.FC<ComponentProps>;
|
|
4
|
+
export default Code;
|
|
@@ -1,113 +1,66 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
2
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
1
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
2
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
5
3
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
4
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
7
5
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
8
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import { useProviderContext, Mermaid } from "../../..";
|
|
13
|
-
import { theme as AntdTheme } from 'antd';
|
|
7
|
+
import { CodeHighlighter, Mermaid } from '@ant-design/x';
|
|
8
|
+
import { useProviderContext } from "../../..";
|
|
9
|
+
import { useState } from 'react';
|
|
14
10
|
import { SparkCopyLine, SparkTrueLine } from '@agentscope-ai/icons';
|
|
15
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
var useCode = function useCode(raw) {
|
|
25
|
-
if (!raw) return {};
|
|
26
|
-
var _raw$props = raw.props,
|
|
27
|
-
children = _raw$props.children,
|
|
28
|
-
className = _raw$props.className;
|
|
29
|
-
if (!children) return {};
|
|
30
|
-
var content = Array.isArray(children) ? children[0] : children;
|
|
31
|
-
var lang = (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'txt';
|
|
32
|
-
var isSingleLine = countLines(content) <= 1 && content.length <= 32;
|
|
33
|
-
return {
|
|
34
|
-
content: content,
|
|
35
|
-
isSingleLine: isSingleLine,
|
|
36
|
-
lang: lang
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
var CodeBlock = function CodeBlock(_ref) {
|
|
40
|
-
var children = _ref.children,
|
|
41
|
-
enableMermaid = _ref.enableMermaid;
|
|
42
|
-
var code = useCode(children);
|
|
43
|
-
var _useStyles = useStyles(),
|
|
44
|
-
styles = _useStyles.styles,
|
|
45
|
-
cx = _useStyles.cx;
|
|
46
|
-
var _useProviderContext = useProviderContext(),
|
|
47
|
-
getPrefixCls = _useProviderContext.getPrefixCls,
|
|
48
|
-
theme = _useProviderContext.theme;
|
|
49
|
-
var isDarkMode = (theme === null || theme === void 0 ? void 0 : theme.algorithm) === AntdTheme.darkAlgorithm;
|
|
50
|
-
var _useState = useState(false),
|
|
51
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
52
|
-
copied = _useState2[0],
|
|
53
|
-
setCopied = _useState2[1];
|
|
54
|
-
var _code$content = code.content,
|
|
55
|
-
_content = _code$content === void 0 ? '' : _code$content,
|
|
56
|
-
_code$lang = code.lang,
|
|
57
|
-
lang = _code$lang === void 0 ? '' : _code$lang;
|
|
58
|
-
var content = useMemo(function () {
|
|
59
|
-
return _content.replace(/ :(dot|underline):/g, '');
|
|
60
|
-
}, [_content]);
|
|
61
|
-
if (!content) return null;
|
|
13
|
+
var Code = function Code(props) {
|
|
14
|
+
var _className$match;
|
|
15
|
+
var className = props.className,
|
|
16
|
+
children = props.children;
|
|
17
|
+
var lang = (className === null || className === void 0 || (_className$match = className.match(/language-(\w+)/)) === null || _className$match === void 0 ? void 0 : _className$match[1]) || '';
|
|
18
|
+
if (typeof children !== 'string') return null;
|
|
62
19
|
if (lang === 'mermaid') {
|
|
63
20
|
return /*#__PURE__*/_jsx(Mermaid, {
|
|
64
|
-
|
|
65
|
-
|
|
21
|
+
header: /*#__PURE__*/_jsx(CodeHeader, {
|
|
22
|
+
lang: "mermaid",
|
|
23
|
+
content: children
|
|
24
|
+
}),
|
|
25
|
+
children: children
|
|
66
26
|
});
|
|
67
27
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
28
|
+
return /*#__PURE__*/_jsx(CodeHighlighter, {
|
|
29
|
+
lang: lang,
|
|
30
|
+
header: /*#__PURE__*/_jsx(CodeHeader, {
|
|
31
|
+
lang: lang,
|
|
32
|
+
content: children
|
|
33
|
+
}),
|
|
34
|
+
children: children
|
|
72
35
|
});
|
|
36
|
+
};
|
|
37
|
+
function CodeHeader(_ref) {
|
|
38
|
+
var lang = _ref.lang,
|
|
39
|
+
content = _ref.content;
|
|
40
|
+
var _useState = useState(false),
|
|
41
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
42
|
+
copied = _useState2[0],
|
|
43
|
+
setCopied = _useState2[1];
|
|
44
|
+
var _useProviderContext = useProviderContext(),
|
|
45
|
+
getPrefixCls = _useProviderContext.getPrefixCls;
|
|
46
|
+
var prefixCls = getPrefixCls('code-header');
|
|
73
47
|
return /*#__PURE__*/_jsxs("div", {
|
|
74
|
-
className:
|
|
75
|
-
children: [/*#__PURE__*/
|
|
76
|
-
className:
|
|
77
|
-
children:
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
setCopied(
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}, 1000);
|
|
90
|
-
}
|
|
91
|
-
})]
|
|
92
|
-
}), /*#__PURE__*/_jsx(Code, {
|
|
93
|
-
value: content,
|
|
94
|
-
language: lang,
|
|
95
|
-
theme: isDarkMode ? 'dark' : 'light',
|
|
96
|
-
readOnly: true
|
|
48
|
+
className: prefixCls,
|
|
49
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
50
|
+
className: "".concat(prefixCls, "-lang"),
|
|
51
|
+
children: lang
|
|
52
|
+
}), copied ? /*#__PURE__*/_jsx(SparkTrueLine, {
|
|
53
|
+
className: "".concat(prefixCls, "-copied")
|
|
54
|
+
}) : /*#__PURE__*/_jsx(SparkCopyLine, {
|
|
55
|
+
className: "".concat(prefixCls, "-icon"),
|
|
56
|
+
onClick: function onClick() {
|
|
57
|
+
navigator.clipboard.writeText(content);
|
|
58
|
+
setCopied(true);
|
|
59
|
+
setTimeout(function () {
|
|
60
|
+
setCopied(false);
|
|
61
|
+
}, 1000);
|
|
62
|
+
}
|
|
97
63
|
})]
|
|
98
64
|
});
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
var css = _ref2.css,
|
|
102
|
-
token = _ref2.token;
|
|
103
|
-
return {
|
|
104
|
-
copied: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n cursor: pointer;\n font-size: 16px;\n "])), token.colorSuccess),
|
|
105
|
-
container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n border-radius: 6px;\n overflow: hidden;\n font-size: 0.8571428571428571em;\n margin: 1em 0;\n "])), token.colorBorderSecondary),
|
|
106
|
-
header: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n background: ", ";\n height: 28px;\n line-height: 28px;\n border-radius: 4px 4px 0 0;\n align-items: center;\n user-select: none;\n position: relative;\n padding: 0 12px;\n "])), token.colorFillSecondary),
|
|
107
|
-
icon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n fontsize: 16px;\n cursor: pointer;\n "]))),
|
|
108
|
-
lang: {
|
|
109
|
-
textTransform: 'capitalize'
|
|
110
|
-
}
|
|
111
|
-
};
|
|
112
|
-
});
|
|
113
|
-
export default CodeBlock;
|
|
65
|
+
}
|
|
66
|
+
export default Code;
|
package/lib/Markdown/styles.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var _templateObject;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { createGlobalStyle } from 'antd-style';
|
|
4
|
-
export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-markdown {\n color: inherit;\n max-width: 100%;\n\n blockquote {\n padding-inline: 0.6em 0;\n padding-block: 0;\n margin: 1em 0;\n border-inline-start: 4px solid ", ";\n opacity: 0.85;\n }\n\n figure {\n margin: 0;\n }\n\n code {\n font-size: 0.8571428571428571em;\n border: 0;\n margin: 0;\n background-color: ", ";\n color: ", ";\n border-radius: ", "px;\n padding: 2px 6px;\n margin-inline: 3px;\n border: 1px solid ", ";\n }\n\n pre code {\n font-size: 0.8571428571428571em;\n background-color: transparent;\n border: none;\n }\n\n
|
|
4
|
+
export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-markdown {\n color: inherit;\n max-width: 100%;\n\n blockquote {\n padding-inline: 0.6em 0;\n padding-block: 0;\n margin: 1em 0;\n border-inline-start: 4px solid ", ";\n opacity: 0.85;\n }\n\n figure {\n margin: 0;\n }\n\n code {\n font-size: 0.8571428571428571em;\n border: 0;\n margin: 0;\n background-color: ", ";\n color: ", ";\n border-radius: ", "px;\n padding: 2px 6px;\n margin-inline: 3px;\n border: 1px solid ", ";\n }\n\n pre code {\n font-size: 0.8571428571428571em;\n background-color: transparent;\n border: none;\n }\n\n .", "-mermaid,\n .", "-codeHighlighter {\n border: 1px solid ", ";\n border-radius: ", "px;\n \n }\n\n .", "-mermaid-graph,\n .", "-codeHighlighter-code {\n border: none;\n }\n\n\n .", "-code-header {\n display: flex;\n justify-content: space-between;\n background: ", ";\n border-bottom: 1px solid ", ";\n height: 28px;\n line-height: 28px;\n align-items: center;\n user-select: none;\n position: relative;\n padding: 0 12px;\n\n &-lang {\n font-weight: bold;\n }\n\n &-icon {\n font-size: 16px;\n cursor: pointer;\n }\n\n &-copied {\n color: ", ";\n cursor: pointer;\n font-size: 16px;\n }\n }\n\n\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-top: 0.5714285714285714em;\n margin-bottom: 0.5714285714285714em;\n font-weight: 500;\n line-height: 1.7777;\n color: inherit;\n }\n\n p {\n margin-bottom: 0.5714285714285714em;\n }\n\n h1 {\n font-size: 1.2857142857142858em;\n }\n\n h2 {\n font-size: 1.1428571428571428em;\n }\n\n h3 {\n font-size: 1em;\n }\n\n h4 {\n font-size: 1em;\n }\n\n h5 {\n font-size: 1em;\n }\n\n h6 {\n font-size: 1em;\n }\n\n hr {\n border-color: ", ";\n border-style: solid;\n border-width: 1px 0 0 0;\n margin: 1em 0;\n }\n\n table {\n border-collapse: collapse;\n display: block;\n width: max-content;\n max-width: 100%;\n overflow: auto;\n }\n\n table th {\n background: ", ";\n text-align: left;\n }\n\n table td,\n table th {\n padding: 0.75em 1.5em;\n border: 1px solid ", ";\n white-space: pre;\n }\n\n .", "-image {\n max-width: 480px;\n overflow: hidden;\n }\n\n .", "-markdown-video {\n position: relative;\n \n &-poster {\n display: flex;\n align-items: center;\n justify-content: center;\n max-width: 480px;\n background-color: #000;\n border-radius: 8px;\n padding: 100px 0;\n cursor: pointer;\n }\n\n &-play {\n color: #ccc;\n font-size: 30px;\n }\n }\n}\n\n.", "-markdown.x-markdown {\n img {\n margin: 0;\n }\n}\n\n\n.", "-markdown > *:last-child {\n margin-bottom: 0 !important;\n}\n\n.", "-markdown > *:first-child {\n margin-top: 0 !important;\n}\n\n.", "-markdown-footnotes {\n > h2 {\n display: none;\n }\n\n > ol {\n margin: 0 0 0 1em;\n }\n\n [data-footnote-backref] {\n display: none;\n }\n\n}\n\n\n.", "-markdown-footnote {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 16px;\n padding: 0 4px;\n height: 16px;\n margin-inline: 2px;\n font-size: 10px;\n color: ", ";\n text-align: center;\n background: ", ";\n border-radius: 4px;\n transition: all 100ms ", ";\n cursor: pointer;\n line-height: 1;\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n}\n"])), function (p) {
|
|
5
5
|
return p.theme.prefixCls;
|
|
6
6
|
}, function (p) {
|
|
7
7
|
return p.theme.colorBorder;
|
|
@@ -14,9 +14,25 @@ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTe
|
|
|
14
14
|
}, function (p) {
|
|
15
15
|
return p.theme.colorBorderSecondary;
|
|
16
16
|
}, function (p) {
|
|
17
|
-
return p.theme.
|
|
17
|
+
return p.theme.prefixCls;
|
|
18
|
+
}, function (p) {
|
|
19
|
+
return p.theme.prefixCls;
|
|
18
20
|
}, function (p) {
|
|
19
21
|
return p.theme.colorBorderSecondary;
|
|
22
|
+
}, function (p) {
|
|
23
|
+
return p.theme.borderRadiusSM;
|
|
24
|
+
}, function (p) {
|
|
25
|
+
return p.theme.prefixCls;
|
|
26
|
+
}, function (p) {
|
|
27
|
+
return p.theme.prefixCls;
|
|
28
|
+
}, function (p) {
|
|
29
|
+
return p.theme.prefixCls;
|
|
30
|
+
}, function (p) {
|
|
31
|
+
return p.theme.colorFillSecondary;
|
|
32
|
+
}, function (p) {
|
|
33
|
+
return p.theme.colorBorderSecondary;
|
|
34
|
+
}, function (p) {
|
|
35
|
+
return p.theme.colorSuccess;
|
|
20
36
|
}, function (p) {
|
|
21
37
|
return p.theme.colorBorderSecondary;
|
|
22
38
|
}, function (p) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agentscope-ai/chat",
|
|
3
|
-
"version": "1.1.46-beta.
|
|
3
|
+
"version": "1.1.46-beta.1768287325682",
|
|
4
4
|
"description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"sideEffects": [
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
"@ant-design/cssinjs-utils": "^1.1.3",
|
|
65
65
|
"@ant-design/graphs": "^2.1.1",
|
|
66
66
|
"@ant-design/icons": "^5.0.1",
|
|
67
|
+
"@ant-design/x": "^2.1.3",
|
|
67
68
|
"@ant-design/x-markdown": "^2.1.1",
|
|
68
69
|
"ahooks": "^3.8.4",
|
|
69
70
|
"antd-style": "^3.7.1",
|