@agentscope-ai/chat 1.1.50 → 1.1.51-beta.1772249245731

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 (5) hide show
  1. package/components/Markdown/core/components/CodeBlock.tsx +30 -11
  2. package/components/Markdown/styles.ts +11 -0
  3. package/lib/Markdown/core/components/CodeBlock.js +48 -13
  4. package/lib/Markdown/styles.js +1 -1
  5. package/package.json +1 -1
package/components/Markdown/core/components/CodeBlock.tsx CHANGED
@@ -1,9 +1,15 @@
1
1
  import { Bubble, CodeHighlighter, Mermaid } from '@ant-design/x';
2
2
  import { type ComponentProps } from '@ant-design/x-markdown';
3
3
  import { useProviderContext } from "@agentscope-ai/chat";
4
- import { useState } from 'react';
5
- import { SparkCopyLine, SparkTrueLine } from '@agentscope-ai/icons';
4
+ import { useCallback, useState } from 'react';
5
+ import { SparkCopyLine, SparkDownloadLine, SparkTrueLine } from '@agentscope-ai/icons';
6
6
 
7
+ const LANG_EXT_MAP: Record<string, string> = {
8
+ javascript: 'js', typescript: 'ts', python: 'py', ruby: 'rb',
9
+ rust: 'rs', kotlin: 'kt', csharp: 'cs', markdown: 'md',
10
+ yaml: 'yml', shell: 'sh', bash: 'sh', zsh: 'sh',
11
+ mermaid: 'mmd', jsx: 'jsx', tsx: 'tsx',
12
+ };
7
13
 
8
14
  const Code: React.FC<ComponentProps> = (props) => {
9
15
  const { className, children } = props;
@@ -22,20 +28,33 @@ function CodeHeader({ lang, content }: { lang: string, content: string }) {
22
28
  const { getPrefixCls } = useProviderContext();
23
29
  const prefixCls = getPrefixCls('code-header');
24
30
 
31
+ const handleDownload = useCallback(() => {
32
+ const ext = LANG_EXT_MAP[lang] || lang || 'txt';
33
+ const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
34
+ const url = URL.createObjectURL(blob);
35
+ const a = document.createElement('a');
36
+ a.href = url;
37
+ a.download = `code.${ext}`;
38
+ a.click();
39
+ URL.revokeObjectURL(url);
40
+ }, [lang, content]);
25
41
 
26
42
  return <div className={prefixCls}>
27
43
  <div className={`${prefixCls}-lang`}>{lang}</div>
28
44
 
29
45
 
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
- }
46
+ <div className={`${prefixCls}-actions`}>
47
+ <SparkDownloadLine className={`${prefixCls}-download`} onClick={handleDownload} />
48
+ {
49
+ copied ? <SparkTrueLine className={`${prefixCls}-copied`} /> : <SparkCopyLine className={`${prefixCls}-icon`} onClick={() => {
50
+ navigator.clipboard.writeText(content);
51
+ setCopied(true);
52
+ setTimeout(() => {
53
+ setCopied(false);
54
+ }, 1000);
55
+ }} />
56
+ }
57
+ </div>
39
58
  </div>
40
59
 
41
60
 
package/components/Markdown/styles.ts CHANGED
@@ -69,6 +69,17 @@ export default createGlobalStyle`
69
69
  font-weight: bold;
70
70
  }
71
71
 
72
+ &-actions {
73
+ display: flex;
74
+ align-items: center;
75
+ gap: 8px;
76
+ }
77
+
78
+ &-download {
79
+ font-size: 16px;
80
+ cursor: pointer;
81
+ }
82
+
72
83
  &-icon {
73
84
  font-size: 16px;
74
85
  cursor: pointer;
package/lib/Markdown/core/components/CodeBlock.js CHANGED
@@ -6,10 +6,27 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
7
  import { CodeHighlighter, Mermaid } from '@ant-design/x';
8
8
  import { useProviderContext } from "../../..";
9
- import { useState } from 'react';
10
- import { SparkCopyLine, SparkTrueLine } from '@agentscope-ai/icons';
9
+ import { useCallback, useState } from 'react';
10
+ import { SparkCopyLine, SparkDownloadLine, SparkTrueLine } from '@agentscope-ai/icons';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
+ var LANG_EXT_MAP = {
14
+ javascript: 'js',
15
+ typescript: 'ts',
16
+ python: 'py',
17
+ ruby: 'rb',
18
+ rust: 'rs',
19
+ kotlin: 'kt',
20
+ csharp: 'cs',
21
+ markdown: 'md',
22
+ yaml: 'yml',
23
+ shell: 'sh',
24
+ bash: 'sh',
25
+ zsh: 'sh',
26
+ mermaid: 'mmd',
27
+ jsx: 'jsx',
28
+ tsx: 'tsx'
29
+ };
13
30
  var Code = function Code(props) {
14
31
  var _className$match;
15
32
  var className = props.className,
@@ -44,22 +61,40 @@ function CodeHeader(_ref) {
44
61
  var _useProviderContext = useProviderContext(),
45
62
  getPrefixCls = _useProviderContext.getPrefixCls;
46
63
  var prefixCls = getPrefixCls('code-header');
64
+ var handleDownload = useCallback(function () {
65
+ var ext = LANG_EXT_MAP[lang] || lang || 'txt';
66
+ var blob = new Blob([content], {
67
+ type: 'text/plain;charset=utf-8'
68
+ });
69
+ var url = URL.createObjectURL(blob);
70
+ var a = document.createElement('a');
71
+ a.href = url;
72
+ a.download = "code.".concat(ext);
73
+ a.click();
74
+ URL.revokeObjectURL(url);
75
+ }, [lang, content]);
47
76
  return /*#__PURE__*/_jsxs("div", {
48
77
  className: prefixCls,
49
78
  children: [/*#__PURE__*/_jsx("div", {
50
79
  className: "".concat(prefixCls, "-lang"),
51
80
  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
- }
81
+ }), /*#__PURE__*/_jsxs("div", {
82
+ className: "".concat(prefixCls, "-actions"),
83
+ children: [/*#__PURE__*/_jsx(SparkDownloadLine, {
84
+ className: "".concat(prefixCls, "-download"),
85
+ onClick: handleDownload
86
+ }), copied ? /*#__PURE__*/_jsx(SparkTrueLine, {
87
+ className: "".concat(prefixCls, "-copied")
88
+ }) : /*#__PURE__*/_jsx(SparkCopyLine, {
89
+ className: "".concat(prefixCls, "-icon"),
90
+ onClick: function onClick() {
91
+ navigator.clipboard.writeText(content);
92
+ setCopied(true);
93
+ setTimeout(function () {
94
+ setCopied(false);
95
+ }, 1000);
96
+ }
97
+ })]
63
98
  })]
64
99
  });
65
100
  }
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 .", "-mermaid,\n .", "-codeHighlighter {\n border: 1px solid ", ";\n border-radius: ", "px;\n \n }\n\n .", "-mermaid-graph,\n .", "-codeHighlighter-code {\n border: none;\n background-color: ", ";\n\n * {\n background-color: transparent !important;\n }\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) {
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 background-color: ", ";\n\n * {\n background-color: transparent !important;\n }\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 &-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n &-download {\n font-size: 16px;\n cursor: pointer;\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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agentscope-ai/chat",
3
- "version": "1.1.50",
3
+ "version": "1.1.51-beta.1772249245731",
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": [