@agentscope-ai/chat 1.1.46-beta.1768184877196 → 1.1.46

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.
Files changed (13) hide show
  1. package/components/AssetsPreview/Video.tsx +27 -6
  2. package/components/AssetsPreview/style.ts +37 -4
  3. package/components/Markdown/Markdown.tsx +2 -1
  4. package/components/Markdown/core/components/CodeBlock.tsx +30 -99
  5. package/components/Markdown/demo/basic.tsx +4 -0
  6. package/components/Markdown/styles.ts +46 -9
  7. package/lib/AssetsPreview/Video.js +28 -5
  8. package/lib/AssetsPreview/style.js +7 -1
  9. package/lib/Markdown/Markdown.js +1 -1
  10. package/lib/Markdown/core/components/CodeBlock.d.ts +4 -7
  11. package/lib/Markdown/core/components/CodeBlock.js +49 -96
  12. package/lib/Markdown/styles.js +18 -2
  13. package/package.json +2 -1
package/components/AssetsPreview/Video.tsx CHANGED
@@ -1,8 +1,9 @@
1
1
  import { IVideo } from "./types";
2
2
  import { useProviderContext } from "..";
3
3
  import { useRef, useState, useCallback } from "react";
4
- import { SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
4
+ import { SparkEnlargeLine, SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
5
5
  import cls from "classnames";
6
+ import { IconButton } from "@agentscope-ai/design";
6
7
 
7
8
  export default function Video(props: IVideo) {
8
9
  const prefixCls = useProviderContext().getPrefixCls('assets-preview-video');
@@ -48,6 +49,22 @@ export default function Video(props: IVideo) {
48
49
  }
49
50
  }, []);
50
51
 
52
+ const handleEnlarge = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
53
+ event.stopPropagation();
54
+ const video = videoRef.current;
55
+ if (!video) return;
56
+
57
+ if (video.requestFullscreen) {
58
+ video.requestFullscreen();
59
+ } else if ((video as any).webkitRequestFullscreen) {
60
+ // Safari 兼容
61
+ (video as any).webkitRequestFullscreen();
62
+ } else if ((video as any).msRequestFullscreen) {
63
+ // IE11 兼容
64
+ (video as any).msRequestFullscreen();
65
+ }
66
+ }, []);
67
+
51
68
  return (
52
69
  <div
53
70
  className={prefixCls}
@@ -66,19 +83,23 @@ export default function Video(props: IVideo) {
66
83
  onEnded={handleEnded}
67
84
  />
68
85
  <div className={cls(`${prefixCls}-overlay`, {
69
- [`${prefixCls}-overlay-playing`]: isPlaying,
70
- [`${prefixCls}-overlay-paused`]: !isPlaying,
86
+ [`${prefixCls}-overlay-playing`]: 1,
87
+ // [`${prefixCls}-overlay-paused`]: 1,
71
88
  })} onClick={isPlaying ? handlePlayPause : handlePlayPause}>
72
89
  <div className={`${prefixCls}-play-btn`}>
73
90
  {
74
91
  isPlaying ? <SparkPauseFill /> : <SparkPlayFill />
75
92
  }
76
93
  </div>
77
- <div className={`${prefixCls}-duration`}>
78
- {formatTime(currentTime)}/{formatTime(duration)}
94
+
95
+
96
+ <div className={`${prefixCls}-enlarge`} onClick={handleEnlarge}>
97
+ <IconButton bordered={false} size="small" icon={<SparkEnlargeLine />} />
79
98
  </div>
80
99
  </div>
81
-
100
+ <div className={`${prefixCls}-duration`}>
101
+ {formatTime(duration - currentTime)}
102
+ </div>
82
103
  </div>
83
104
  );
84
105
  }
package/components/AssetsPreview/style.ts CHANGED
@@ -78,6 +78,20 @@ export default createGlobalStyle`
78
78
  position: relative;
79
79
  cursor: pointer;
80
80
 
81
+ &-enlarge {
82
+ display: none;
83
+ position: absolute;
84
+ top: 6px;
85
+ right: 6px;
86
+ z-index: 1;
87
+ border-radius: 4px;
88
+ background-color: ${(p) => p.theme.colorBgBase};
89
+
90
+ button {
91
+ display: flex;
92
+ }
93
+ }
94
+
81
95
  video {
82
96
  width: 100%;
83
97
  height: 100%;
@@ -94,7 +108,13 @@ export default createGlobalStyle`
94
108
  flex-direction: column;
95
109
  align-items: center;
96
110
  justify-content: center;
97
- border-radius: 4px;
111
+ border-radius: 8px;
112
+
113
+ &:hover {
114
+ .${(p) => p.theme.prefixCls}-assets-preview-video-enlarge {
115
+ display: block;
116
+ }
117
+ }
98
118
 
99
119
  &-playing {
100
120
  opacity: 0;
@@ -127,13 +147,27 @@ export default createGlobalStyle`
127
147
 
128
148
  &-duration {
129
149
  position: absolute;
150
+ display: flex;
151
+ align-items: center;
152
+ justify-content: center;
130
153
  bottom: 8px;
131
- left: 50%;
132
- transform: translateX(-50%);
154
+ left: 0px;
155
+ height: 28px;
156
+ bottom: 0;
157
+ right: 0;
133
158
  font-size: 14px;
134
159
  font-weight: 500;
135
160
  color: #fff;
136
161
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
162
+ background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);
163
+ }
164
+
165
+ &-overlay {
166
+ &:hover {
167
+ ~ .${(p) => p.theme.prefixCls}-assets-preview-video-duration {
168
+ background: transparent;
169
+ }
170
+ }
137
171
  }
138
172
 
139
173
  &-playing-overlay {
@@ -143,7 +177,6 @@ export default createGlobalStyle`
143
177
  right: 0;
144
178
  bottom: 0;
145
179
  }
146
-
147
180
  }
148
181
 
149
182
  &-audio {
package/components/Markdown/Markdown.tsx CHANGED
@@ -57,12 +57,13 @@ export default memo(function (props: MarkdownProps) {
57
57
  } = useCitationsData({ citations: props.citations, citationsMap: props.citationsMap });
58
58
 
59
59
  const components = useMemo(() => ({
60
- pre: CodeBlock,
60
+ code: CodeBlock,
61
61
  style: Null,
62
62
  script: Null,
63
63
  img: props.disableImage ? DisabledImage : Media,
64
64
  citation: CitationComponent,
65
65
  'custom-cursor': CursorComponent,
66
+
66
67
  a: Link,
67
68
  ...props.components,
68
69
  }), [props.disableImage, CitationComponent, props.components]);
package/components/Markdown/core/components/CodeBlock.tsx CHANGED
@@ -1,114 +1,45 @@
1
- import React, { useMemo, useState } from 'react';
2
- import type { FC } from 'react';
3
- import { CodeBlock as Code, CodeBlockLangExtensionsMap, } from '@agentscope-ai/design';
4
- import { createStyles } from 'antd-style';
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 countLines = (str: string): number => {
12
- if (!str) return 1;
13
- const regex = /\n/g;
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
- const content = Array.isArray(children) ? (children[0] as string) : children;
26
- const lang = className?.replace('language-', '') || 'txt';
27
- const isSingleLine = countLines(content) <= 1 && content.length <= 32;
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
- const CodeBlock: FC<CodeBlockProps> = ({ children, enableMermaid }) => {
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
- const { content: _content = '', lang = '' } = code;
50
- const content = useMemo(() => {
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
- if (!content) return null;
56
- if (lang === 'mermaid') {
57
- return (
58
- <Mermaid content={content} width={"50%"} />
59
- );
60
- }
61
- if (supportedLanguages.indexOf(lang) === -1) return <pre><code>{content}</code></pre>;
62
-
63
- return <div className={styles.container}>
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
- export default CodeBlock;
42
+ }
43
+
44
+
45
+ export default Code;
package/components/Markdown/demo/basic.tsx CHANGED
@@ -65,6 +65,10 @@ ___这是粗斜体文本___
65
65
  ---
66
66
  \`hello world\`
67
67
 
68
+ \`\`\`
69
+ ## title
70
+ \`\`\`
71
+
68
72
  \`\`\`java
69
73
  class HelloWorld {
70
74
  public static void main(String[] args) {
package/components/Markdown/styles.ts CHANGED
@@ -35,12 +35,49 @@ export default createGlobalStyle`
35
35
  border: none;
36
36
  }
37
37
 
38
- pre {
39
- background-color: ${(p) => p.theme.colorFillQuaternary};
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/AssetsPreview/Video.js CHANGED
@@ -15,8 +15,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
15
15
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
16
16
  import { useProviderContext } from "..";
17
17
  import { useRef, useState, useCallback } from "react";
18
- import { SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
18
+ import { SparkEnlargeLine, SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
19
19
  import cls from "classnames";
20
+ import { IconButton } from "@agentscope-ai/design";
20
21
  import { jsx as _jsx } from "react/jsx-runtime";
21
22
  import { jsxs as _jsxs } from "react/jsx-runtime";
22
23
  export default function Video(props) {
@@ -69,6 +70,20 @@ export default function Video(props) {
69
70
  setCurrentTime(videoRef.current.currentTime);
70
71
  }
71
72
  }, []);
73
+ var handleEnlarge = useCallback(function (event) {
74
+ event.stopPropagation();
75
+ var video = videoRef.current;
76
+ if (!video) return;
77
+ if (video.requestFullscreen) {
78
+ video.requestFullscreen();
79
+ } else if (video.webkitRequestFullscreen) {
80
+ // Safari 兼容
81
+ video.webkitRequestFullscreen();
82
+ } else if (video.msRequestFullscreen) {
83
+ // IE11 兼容
84
+ video.msRequestFullscreen();
85
+ }
86
+ }, []);
72
87
  return /*#__PURE__*/_jsxs("div", {
73
88
  className: prefixCls,
74
89
  style: {
@@ -83,15 +98,23 @@ export default function Video(props) {
83
98
  onTimeUpdate: handleTimeUpdate,
84
99
  onEnded: handleEnded
85
100
  })), /*#__PURE__*/_jsxs("div", {
86
- className: cls("".concat(prefixCls, "-overlay"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-overlay-playing"), isPlaying), "".concat(prefixCls, "-overlay-paused"), !isPlaying)),
101
+ className: cls("".concat(prefixCls, "-overlay"), _defineProperty({}, "".concat(prefixCls, "-overlay-playing"), 1)),
87
102
  onClick: isPlaying ? handlePlayPause : handlePlayPause,
88
103
  children: [/*#__PURE__*/_jsx("div", {
89
104
  className: "".concat(prefixCls, "-play-btn"),
90
105
  children: isPlaying ? /*#__PURE__*/_jsx(SparkPauseFill, {}) : /*#__PURE__*/_jsx(SparkPlayFill, {})
91
- }), /*#__PURE__*/_jsxs("div", {
92
- className: "".concat(prefixCls, "-duration"),
93
- children: [formatTime(currentTime), "/", formatTime(duration)]
106
+ }), /*#__PURE__*/_jsx("div", {
107
+ className: "".concat(prefixCls, "-enlarge"),
108
+ onClick: handleEnlarge,
109
+ children: /*#__PURE__*/_jsx(IconButton, {
110
+ bordered: false,
111
+ size: "small",
112
+ icon: /*#__PURE__*/_jsx(SparkEnlargeLine, {})
113
+ })
94
114
  })]
115
+ }), /*#__PURE__*/_jsx("div", {
116
+ className: "".concat(prefixCls, "-duration"),
117
+ children: formatTime(duration - currentTime)
95
118
  })]
96
119
  });
97
120
  }
package/lib/AssetsPreview/style.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.", "-assets-preview {\n position: relative;\n\n &-left-edge,\n &-right-edge {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 128px;\n pointer-events: none;\n }\n\n &-left-edge {\n left: 0;\n background: linear-gradient(to right, ", ", rgba(0, 0, 0, 0));\n }\n\n &-right-edge {\n right: 0;\n background: linear-gradient(to left, ", ", rgba(0, 0, 0, 0));\n }\n\n &-arrow {\n position: absolute;\n bottom: 0;\n }\n\n &-left-arrow {\n left: 10px;\n }\n\n &-right-arrow {\n right: 10px;\n }\n\n &-container {\n display: flex;\n padding: 8px;\n gap: 8px;\n overflow-x: auto;\n justify-content: safe center;\n background-color: ", ";\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE/Edge */\n &::-webkit-scrollbar {\n display: none; /* Chrome/Safari/Opera */\n }\n }\n\n\n &-image {\n height: 100%;\n flex-basis: auto;\n flex-shrink: 0;\n border-radius: 8px;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n\n .anticon-eye {\n font-size: 20px;\n margin: 0 !important;\n }\n }\n\n &-video {\n height: 100%;\n flex-basis: auto;\n flex-shrink: 0;\n border-radius: 8px;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n\n &-playing {\n opacity: 0;\n &:hover {\n opacity: 1;\n background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n }\n }\n\n &-paused {\n background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n }\n }\n\n &-play-btn {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n transition: transform 0.2s ease;\n font-size: 40px;\n \n\n &:hover {\n transform: scale(1.1);\n }\n }\n\n &-duration {\n position: absolute;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 14px;\n font-weight: 500;\n color: #fff;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n }\n\n &-playing-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n \n }\n \n &-audio {\n display: flex;\n align-items: center;\n gap: 8px;\n background-color: ", ";\n border-radius: 8px;\n border: 1px solid ", ";\n height: 40px;\n padding: 0 8px;\n\n &-time {\n font-size: 12px;\n color: ", ";\n line-height: 1;\n }\n\n &-progress {\n flex: 1;\n height: 8px;\n background-color: ", ";\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n\n &-bar {\n height: 100%;\n background-color: ", ";\n border-radius: 4px;\n transition: width 0.1s linear;\n }\n }\n }\n}\n"])), function (p) {
4
+ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-assets-preview {\n position: relative;\n\n &-left-edge,\n &-right-edge {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 128px;\n pointer-events: none;\n }\n\n &-left-edge {\n left: 0;\n background: linear-gradient(to right, ", ", rgba(0, 0, 0, 0));\n }\n\n &-right-edge {\n right: 0;\n background: linear-gradient(to left, ", ", rgba(0, 0, 0, 0));\n }\n\n &-arrow {\n position: absolute;\n bottom: 0;\n }\n\n &-left-arrow {\n left: 10px;\n }\n\n &-right-arrow {\n right: 10px;\n }\n\n &-container {\n display: flex;\n padding: 8px;\n gap: 8px;\n overflow-x: auto;\n justify-content: safe center;\n background-color: ", ";\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE/Edge */\n &::-webkit-scrollbar {\n display: none; /* Chrome/Safari/Opera */\n }\n }\n\n\n &-image {\n height: 100%;\n flex-basis: auto;\n flex-shrink: 0;\n border-radius: 8px;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n\n .anticon-eye {\n font-size: 20px;\n margin: 0 !important;\n }\n }\n\n &-video {\n height: 100%;\n flex-basis: auto;\n flex-shrink: 0;\n border-radius: 8px;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n\n &-enlarge {\n display: none;\n position: absolute;\n top: 6px;\n right: 6px;\n z-index: 1;\n border-radius: 4px;\n background-color: ", ";\n\n button {\n display: flex;\n }\n }\n\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n\n &:hover {\n .", "-assets-preview-video-enlarge {\n display: block;\n }\n }\n\n &-playing {\n opacity: 0;\n &:hover {\n opacity: 1;\n background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n }\n }\n\n &-paused {\n background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n }\n }\n\n &-play-btn {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n transition: transform 0.2s ease;\n font-size: 40px;\n \n\n &:hover {\n transform: scale(1.1);\n }\n }\n\n &-duration {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n bottom: 8px;\n left: 0px;\n height: 28px;\n bottom: 0;\n right: 0;\n font-size: 14px;\n font-weight: 500;\n color: #fff;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n }\n\n &-overlay {\n &:hover {\n ~ .", "-assets-preview-video-duration {\n background: transparent;\n }\n }\n }\n\n &-playing-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n \n &-audio {\n display: flex;\n align-items: center;\n gap: 8px;\n background-color: ", ";\n border-radius: 8px;\n border: 1px solid ", ";\n height: 40px;\n padding: 0 8px;\n\n &-time {\n font-size: 12px;\n color: ", ";\n line-height: 1;\n }\n\n &-progress {\n flex: 1;\n height: 8px;\n background-color: ", ";\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n\n &-bar {\n height: 100%;\n background-color: ", ";\n border-radius: 4px;\n transition: width 0.1s linear;\n }\n }\n }\n}\n"])), function (p) {
5
5
  return p.theme.prefixCls;
6
6
  }, function (p) {
7
7
  return p.theme.colorBgLayout;
@@ -11,6 +11,12 @@ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTe
11
11
  return p.theme.colorFillTertiary;
12
12
  }, function (p) {
13
13
  return p.theme.colorBgBase;
14
+ }, function (p) {
15
+ return p.theme.prefixCls;
16
+ }, function (p) {
17
+ return p.theme.prefixCls;
18
+ }, function (p) {
19
+ return p.theme.colorBgBase;
14
20
  }, function (p) {
15
21
  return p.theme.colorBorderSecondary;
16
22
  }, function (p) {
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
- pre: CodeBlock,
72
+ code: CodeBlock,
73
73
  style: Null,
74
74
  script: Null,
75
75
  img: props.disableImage ? DisabledImage : Media,
package/lib/Markdown/core/components/CodeBlock.d.ts CHANGED
@@ -1,7 +1,4 @@
1
- import type { FC } from 'react';
2
- interface CodeBlockProps {
3
- children: any;
4
- enableMermaid?: boolean;
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;
package/lib/Markdown/core/components/CodeBlock.js CHANGED
@@ -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 React, { useMemo, useState } from 'react';
10
- import { CodeBlock as Code, CodeBlockLangExtensionsMap } from '@agentscope-ai/design';
11
- import { createStyles } from 'antd-style';
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 supportedLanguages = Object.keys(CodeBlockLangExtensionsMap);
18
- var countLines = function countLines(str) {
19
- if (!str) return 1;
20
- var regex = /\n/g;
21
- var matches = str.match(regex);
22
- return matches ? matches.length : 1;
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
- content: content,
65
- width: "50%"
21
+ header: /*#__PURE__*/_jsx(CodeHeader, {
22
+ lang: "mermaid",
23
+ content: children
24
+ }),
25
+ children: children
66
26
  });
67
27
  }
68
- if (supportedLanguages.indexOf(lang) === -1) return /*#__PURE__*/_jsx("pre", {
69
- children: /*#__PURE__*/_jsx("code", {
70
- children: content
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: styles.container,
75
- children: [/*#__PURE__*/_jsxs("div", {
76
- className: styles.header,
77
- children: [/*#__PURE__*/_jsx("div", {
78
- className: styles.lang,
79
- children: lang
80
- }), copied ? /*#__PURE__*/_jsx(SparkTrueLine, {
81
- className: styles.copied
82
- }) : /*#__PURE__*/_jsx(SparkCopyLine, {
83
- className: styles.icon,
84
- onClick: function onClick() {
85
- navigator.clipboard.writeText(content);
86
- setCopied(true);
87
- setTimeout(function () {
88
- setCopied(false);
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
- var useStyles = createStyles(function (_ref2) {
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 pre {\n background-color: ", ";\n padding: 4px 10px;\n border: 1px solid ", ";\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) {
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.colorFillQuaternary;
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.1768184877196",
3
+ "version": "1.1.46",
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",