@alifd/chat 0.3.37-beta.8 → 0.3.37

package/es/html-render/main.scss

@@ -211,14 +211,19 @@
   }
 
   li>p {
-    margin: 0.4rem 0;
+    margin: 0.3rem 0;
   }
 
   p {
-    margin: 0.4rem 0;
+    margin: 0.3rem 0;
     line-height: 1.8;
   }
 
+  span {
+    line-height: 1.8;
+    margin: 0.3rem 0;
+  }
+
   blockquote {
     opacity: 1;
     border: none;

package/es/index.js

@@ -32,4 +32,4 @@ export { default as CheckboxGroup } from './checkbox-group';
 export { default as Select } from './select';
 export { default as Flip } from './flip';
 export { default as ToolStatus } from './tool-status';
-export const version = '0.3.37-beta.8';
+export const version = '0.3.37';

package/es/markdown/index.js

@@ -20,7 +20,7 @@ const DEFAULT_WHITELIST_TAGS = ['img', 'code', 'pre', 'link-reference'];
  * @when 需要解析和渲染 Markdown 文本内容时使用。 - Use when you need to parse and render Markdown text content.
  */
 const Markdown = forwardRef((_a, ref) => {
-    var { className, onReady, content } = _a, others = __rest(_a, ["className", "onReady", "content"]);
+    var { className, onReady, content, needCodeHeader = true } = _a, others = __rest(_a, ["className", "onReady", "content", "needCodeHeader"]);
     useEffect(() => {
         // 初始化表情库
         init();
@@ -35,25 +35,46 @@ const Markdown = forwardRef((_a, ref) => {
         if (!text)
             return [];
         const whitelist = [...DEFAULT_WHITELIST_TAGS, ...(customWhitelist || [])];
-        if (whitelist.length === 0) {
-            return text.split('');
-        }
-        // 创建匹配白名单标签的正则表达式
-        const tagPattern = new RegExp(`(<(${whitelist.join('|')}).*?>.*?<\\/\\2>)`, 'gs');
+        // 综合正则：匹配 markdown 链接或白名单标签
+        const markdownLinkPattern = /\[[^\]]*\]\([^)]*\)/g;
+        const tagPattern = whitelist.length > 0 ? new RegExp(`<(${whitelist.join('|')}).*?>.*?<\\/\\1>`, 'gs') : null;
         const parts = [];
         let lastIndex = 0;
+        // 找到所有匹配项的位置
+        const allMatches = [];
+        // 添加 markdown 链接匹配
         let match;
-        // 分割文本，将白名单标签作为整体，其他文本按字符分割
-        while ((match = tagPattern.exec(text)) !== null) {
-            if (match.index > lastIndex) {
-                // 添加标签前的普通文本，按字符分割
-                parts.push(...text.substring(lastIndex, match.index).split(''));
+        while ((match = markdownLinkPattern.exec(text)) !== null) {
+            allMatches.push({
+                start: match.index,
+                end: match.index + match[0].length,
+                content: match[0]
+            });
+        }
+        // 添加 HTML 标签匹配
+        if (tagPattern) {
+            tagPattern.lastIndex = 0;
+            while ((match = tagPattern.exec(text)) !== null) {
+                allMatches.push({
+                    start: match.index,
+                    end: match.index + match[0].length,
+                    content: match[0]
+                });
             }
-            // 添加整个标签内容作为一项
-            parts.push(match[1]);
-            lastIndex = match.index + match[1].length;
         }
-        // 添加剩余的普通文本，按字符分割
+        // 按位置排序
+        allMatches.sort((a, b) => a.start - b.start);
+        // 分割文本
+        for (const item of allMatches) {
+            // 添加匹配项之前的普通文本（逐字符）
+            if (item.start > lastIndex) {
+                parts.push(...text.substring(lastIndex, item.start).split(''));
+            }
+            // 添加整个匹配项
+            parts.push(item.content);
+            lastIndex = item.end;
+        }
+        // 添加剩余文本（逐字符）
         if (lastIndex < text.length) {
             parts.push(...text.substring(lastIndex).split(''));
         }
@@ -102,25 +123,35 @@ const Markdown = forwardRef((_a, ref) => {
             return;
         }
         // 固定吐字速度为50ms一次
-        const timePerItem = 100;
-        // 动态调整一次吐字的字数，确保1s内吐完，最少吐2个列表项
+        const timePerItem = 50;
+        // 动态调整一次吐字的字数，确保0.5s内吐完，最少吐2个列表项
         const itemsPerTime = Math.max(Math.floor(contentQueue.length / 10), 2);
         const processNextItem = () => {
-            const currentQueue = contentQueue;
-            if (currentQueue.length === 0) {
-                return;
-            }
-            // 获取并移除队列中的第charsPerTime个列表项
-            const nextItems = currentQueue.slice(0, itemsPerTime);
-            const newQueue = currentQueue.slice(itemsPerTime);
-            // 更新显示内容
-            setDisplayedContent(prev => prev + nextItems.join(''));
-            // 更新队列
-            setContentQueue(newQueue);
+            setContentQueue(currentQueue => {
+                if (currentQueue.length === 0) {
+                    return currentQueue;
+                }
+                // 获取并移除队列中的第itemsPerTime个列表项
+                const nextItems = currentQueue.slice(0, itemsPerTime);
+                const newQueue = currentQueue.slice(itemsPerTime);
+                // 更新显示内容
+                setDisplayedContent(prev => prev + nextItems.join(''));
+                return newQueue;
+            });
         };
-        // 开始处理第一个字符
-        clearTypeTimer(); // 确保没有并发定时器
-        typeTimeoutRef.current = setTimeout(processNextItem, timePerItem);
+        // 清除现有定时器
+        clearTypeTimer();
+        // 立即吐出第一次字符
+        processNextItem();
+        // 设置后续的定时器，继续按50ms间隔吐字
+        typeTimeoutRef.current = setTimeout(() => {
+            const continueTyping = () => {
+                processNextItem();
+                // 继续设置下一次定时器
+                typeTimeoutRef.current = setTimeout(continueTyping, timePerItem);
+            };
+            continueTyping();
+        }, timePerItem);
         return clearTypeTimer;
     }, [contentQueue.length, others === null || others === void 0 ? void 0 : others.typewriterEffect]);
     // 处理 HTML 标签
@@ -221,11 +252,15 @@ const Markdown = forwardRef((_a, ref) => {
         // 这里的 </ xx> 都被转成了&#x2F ， 所以会font标签的元素 后面都会多一个 </ xx>
         transformedContent = transformedContent.replace(/&#x2F;/g, '/');
         // transformedContent = transformedContent.replace(/&#x2F;&#x2F;/g, '//');
+        transformedContent = transformedContent.replace(/&#39;/g, "'");
         // 适配//开头不支持的图片地址
         transformedContent = replaceImageLinks(transformedContent);
         return md.render(transformedContent);
     }, [transformedContent]);
     useEffect(() => {
+        if (!needCodeHeader) {
+            return;
+        }
         if (containerRef.current) {
             // 清除现有的 .code-block-header 元素
             const existingHeaders = containerRef.current.querySelectorAll('.code-block-header');

package/es/markdown/types.d.ts

@@ -76,4 +76,9 @@ export interface MarkdownProps extends React.HTMLAttributes<HTMLElement> {
      * @en Whitelist tags that will be put into typewriter queue as a whole
      */
     whitelistTags?: string[];
+    /**
+     * 是不是需要头部的代码复制区域
+     * @en Tags that will not be put into typewriter queue
+     */
+    needCodeHeader?: boolean;
 }

package/es/tool-status/index.js

@@ -13,7 +13,7 @@ const SUCCESS_ICON = 'icon-check'; //'success'
 const ERROR_ICON = 'icon-cross1'; //'error'
 const LOADING_ICON = 'loading';
 const ToolStatus = forwardRef((props, ref) => {
-    const { useText = '使用', name, className, selected = false, status, onToolClick, authInfo, fullWidth } = props;
+    const { useText = '使用', name, className, selected = false, status, onToolClick, authInfo, fullWidth, param, groupName } = props;
     const handleClick = (event) => {
         event.stopPropagation();
         onToolClick === null || onToolClick === void 0 ? void 0 : onToolClick(props);
@@ -30,8 +30,11 @@ const ToolStatus = forwardRef((props, ref) => {
                 event.stopPropagation();
                 (_a = authInfo === null || authInfo === void 0 ? void 0 : authInfo.onAuthClick) === null || _a === void 0 ? void 0 : _a.call(authInfo, props);
             } }, authInfo === null || authInfo === void 0 ? void 0 : authInfo.content),
-        React.createElement("div", { className: 'content-use-tips' }, useText),
-        React.createElement("div", { className: 'content-name' }, name)));
+        React.createElement("div", { className: 'content-container' },
+            React.createElement("div", { className: 'content-use-tips' }, useText),
+            groupName && React.createElement("div", { className: 'content-group' }, groupName),
+            name && React.createElement("div", { className: 'content-name' }, name),
+            param && React.createElement("div", { className: 'content-detail' }, param))));
 });
 export * from './types';
 export default ConfigProvider.config(ToolStatus);

package/es/tool-status/main.scss

@@ -54,22 +54,31 @@
     line-height: $s-4;
     font-size: $font-size-caption;
     cursor: pointer;
-    margin-right: $s-1;
+    min-width: 52px;
   }
 
-  .content-use-tips {
-    color: $color-text1-3;
-    margin-right: $s-1;
-    line-height: $s-4;
+  .content-container {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
   }
 
-  .content-name {
-    color: $color-text1-4;
+  .content-use-tips, .content-group, .content-name, .content-detail {
+    color: $color-text1-3;
     line-height: $s-4;
+    margin-right: $s-1;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    flex: 1;
   }
 
+
+  .content-group {
+    color: $color-text1-4;
+  }
+
+  .content-detail {
+    flex: 1;
+    color: $color-text1-4;
+  }
 }

package/es/tool-status/types.d.ts

@@ -33,10 +33,18 @@ export interface ToolStatusProps extends React.HTMLAttributes<HTMLElement>, Comm
      * 工具名称
      */
     name?: string;
+    /**
+     * 工具集名称
+     */
+    groupName?: string;
     /**
      * 工具详情链接
      */
     useText?: string;
+    /**
+     * 当前的具体使用说明
+     */
+    param?: string;
     /**
      * 是否100%的宽度
      */

package/lib/html-render/main.scss

@@ -211,14 +211,19 @@
   }
 
   li>p {
-    margin: 0.4rem 0;
+    margin: 0.3rem 0;
   }
 
   p {
-    margin: 0.4rem 0;
+    margin: 0.3rem 0;
     line-height: 1.8;
   }
 
+  span {
+    line-height: 1.8;
+    margin: 0.3rem 0;
+  }
+
   blockquote {
     opacity: 1;
     border: none;

package/lib/index.js

@@ -70,4 +70,4 @@ var flip_1 = require("./flip");
 Object.defineProperty(exports, "Flip", { enumerable: true, get: function () { return tslib_1.__importDefault(flip_1).default; } });
 var tool_status_1 = require("./tool-status");
 Object.defineProperty(exports, "ToolStatus", { enumerable: true, get: function () { return tslib_1.__importDefault(tool_status_1).default; } });
-exports.version = '0.3.37-beta.8';
+exports.version = '0.3.37';

package/lib/markdown/index.js

@@ -22,7 +22,7 @@ const DEFAULT_WHITELIST_TAGS = ['img', 'code', 'pre', 'link-reference'];
  * @when 需要解析和渲染 Markdown 文本内容时使用。 - Use when you need to parse and render Markdown text content.
  */
 const Markdown = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, onReady, content } = _a, others = tslib_1.__rest(_a, ["className", "onReady", "content"]);
+    var { className, onReady, content, needCodeHeader = true } = _a, others = tslib_1.__rest(_a, ["className", "onReady", "content", "needCodeHeader"]);
     (0, react_1.useEffect)(() => {
         // 初始化表情库
         (0, dingtalk_im_emoji_1.init)();
@@ -37,25 +37,46 @@ const Markdown = (0, react_1.forwardRef)((_a, ref) => {
         if (!text)
             return [];
         const whitelist = [...DEFAULT_WHITELIST_TAGS, ...(customWhitelist || [])];
-        if (whitelist.length === 0) {
-            return text.split('');
-        }
-        // 创建匹配白名单标签的正则表达式
-        const tagPattern = new RegExp(`(<(${whitelist.join('|')}).*?>.*?<\\/\\2>)`, 'gs');
+        // 综合正则：匹配 markdown 链接或白名单标签
+        const markdownLinkPattern = /\[[^\]]*\]\([^)]*\)/g;
+        const tagPattern = whitelist.length > 0 ? new RegExp(`<(${whitelist.join('|')}).*?>.*?<\\/\\1>`, 'gs') : null;
         const parts = [];
         let lastIndex = 0;
+        // 找到所有匹配项的位置
+        const allMatches = [];
+        // 添加 markdown 链接匹配
         let match;
-        // 分割文本，将白名单标签作为整体，其他文本按字符分割
-        while ((match = tagPattern.exec(text)) !== null) {
-            if (match.index > lastIndex) {
-                // 添加标签前的普通文本，按字符分割
-                parts.push(...text.substring(lastIndex, match.index).split(''));
+        while ((match = markdownLinkPattern.exec(text)) !== null) {
+            allMatches.push({
+                start: match.index,
+                end: match.index + match[0].length,
+                content: match[0]
+            });
+        }
+        // 添加 HTML 标签匹配
+        if (tagPattern) {
+            tagPattern.lastIndex = 0;
+            while ((match = tagPattern.exec(text)) !== null) {
+                allMatches.push({
+                    start: match.index,
+                    end: match.index + match[0].length,
+                    content: match[0]
+                });
             }
-            // 添加整个标签内容作为一项
-            parts.push(match[1]);
-            lastIndex = match.index + match[1].length;
         }
-        // 添加剩余的普通文本，按字符分割
+        // 按位置排序
+        allMatches.sort((a, b) => a.start - b.start);
+        // 分割文本
+        for (const item of allMatches) {
+            // 添加匹配项之前的普通文本（逐字符）
+            if (item.start > lastIndex) {
+                parts.push(...text.substring(lastIndex, item.start).split(''));
+            }
+            // 添加整个匹配项
+            parts.push(item.content);
+            lastIndex = item.end;
+        }
+        // 添加剩余文本（逐字符）
         if (lastIndex < text.length) {
             parts.push(...text.substring(lastIndex).split(''));
         }
@@ -104,25 +125,35 @@ const Markdown = (0, react_1.forwardRef)((_a, ref) => {
             return;
         }
         // 固定吐字速度为50ms一次
-        const timePerItem = 100;
-        // 动态调整一次吐字的字数，确保1s内吐完，最少吐2个列表项
+        const timePerItem = 50;
+        // 动态调整一次吐字的字数，确保0.5s内吐完，最少吐2个列表项
         const itemsPerTime = Math.max(Math.floor(contentQueue.length / 10), 2);
         const processNextItem = () => {
-            const currentQueue = contentQueue;
-            if (currentQueue.length === 0) {
-                return;
-            }
-            // 获取并移除队列中的第charsPerTime个列表项
-            const nextItems = currentQueue.slice(0, itemsPerTime);
-            const newQueue = currentQueue.slice(itemsPerTime);
-            // 更新显示内容
-            setDisplayedContent(prev => prev + nextItems.join(''));
-            // 更新队列
-            setContentQueue(newQueue);
+            setContentQueue(currentQueue => {
+                if (currentQueue.length === 0) {
+                    return currentQueue;
+                }
+                // 获取并移除队列中的第itemsPerTime个列表项
+                const nextItems = currentQueue.slice(0, itemsPerTime);
+                const newQueue = currentQueue.slice(itemsPerTime);
+                // 更新显示内容
+                setDisplayedContent(prev => prev + nextItems.join(''));
+                return newQueue;
+            });
         };
-        // 开始处理第一个字符
-        clearTypeTimer(); // 确保没有并发定时器
-        typeTimeoutRef.current = setTimeout(processNextItem, timePerItem);
+        // 清除现有定时器
+        clearTypeTimer();
+        // 立即吐出第一次字符
+        processNextItem();
+        // 设置后续的定时器，继续按50ms间隔吐字
+        typeTimeoutRef.current = setTimeout(() => {
+            const continueTyping = () => {
+                processNextItem();
+                // 继续设置下一次定时器
+                typeTimeoutRef.current = setTimeout(continueTyping, timePerItem);
+            };
+            continueTyping();
+        }, timePerItem);
         return clearTypeTimer;
     }, [contentQueue.length, others === null || others === void 0 ? void 0 : others.typewriterEffect]);
     // 处理 HTML 标签
@@ -223,11 +254,15 @@ const Markdown = (0, react_1.forwardRef)((_a, ref) => {
         // 这里的 </ xx> 都被转成了&#x2F ， 所以会font标签的元素 后面都会多一个 </ xx>
         transformedContent = transformedContent.replace(/&#x2F;/g, '/');
         // transformedContent = transformedContent.replace(/&#x2F;&#x2F;/g, '//');
+        transformedContent = transformedContent.replace(/&#39;/g, "'");
         // 适配//开头不支持的图片地址
         transformedContent = replaceImageLinks(transformedContent);
         return md.render(transformedContent);
     }, [transformedContent]);
     (0, react_1.useEffect)(() => {
+        if (!needCodeHeader) {
+            return;
+        }
         if (containerRef.current) {
             // 清除现有的 .code-block-header 元素
             const existingHeaders = containerRef.current.querySelectorAll('.code-block-header');

package/lib/markdown/types.d.ts

@@ -76,4 +76,9 @@ export interface MarkdownProps extends React.HTMLAttributes<HTMLElement> {
      * @en Whitelist tags that will be put into typewriter queue as a whole
      */
     whitelistTags?: string[];
+    /**
+     * 是不是需要头部的代码复制区域
+     * @en Tags that will not be put into typewriter queue
+     */
+    needCodeHeader?: boolean;
 }

package/lib/tool-status/index.js

@@ -16,7 +16,7 @@ const SUCCESS_ICON = 'icon-check'; //'success'
 const ERROR_ICON = 'icon-cross1'; //'error'
 const LOADING_ICON = 'loading';
 const ToolStatus = (0, react_1.forwardRef)((props, ref) => {
-    const { useText = '使用', name, className, selected = false, status, onToolClick, authInfo, fullWidth } = props;
+    const { useText = '使用', name, className, selected = false, status, onToolClick, authInfo, fullWidth, param, groupName } = props;
     const handleClick = (event) => {
         event.stopPropagation();
         onToolClick === null || onToolClick === void 0 ? void 0 : onToolClick(props);
@@ -33,8 +33,11 @@ const ToolStatus = (0, react_1.forwardRef)((props, ref) => {
                 event.stopPropagation();
                 (_a = authInfo === null || authInfo === void 0 ? void 0 : authInfo.onAuthClick) === null || _a === void 0 ? void 0 : _a.call(authInfo, props);
             } }, authInfo === null || authInfo === void 0 ? void 0 : authInfo.content),
-        react_1.default.createElement("div", { className: 'content-use-tips' }, useText),
-        react_1.default.createElement("div", { className: 'content-name' }, name)));
+        react_1.default.createElement("div", { className: 'content-container' },
+            react_1.default.createElement("div", { className: 'content-use-tips' }, useText),
+            groupName && react_1.default.createElement("div", { className: 'content-group' }, groupName),
+            name && react_1.default.createElement("div", { className: 'content-name' }, name),
+            param && react_1.default.createElement("div", { className: 'content-detail' }, param))));
 });
 tslib_1.__exportStar(require("./types"), exports);
 exports.default = next_1.ConfigProvider.config(ToolStatus);

package/lib/tool-status/main.scss

@@ -54,22 +54,31 @@
     line-height: $s-4;
     font-size: $font-size-caption;
     cursor: pointer;
-    margin-right: $s-1;
+    min-width: 52px;
   }
 
-  .content-use-tips {
-    color: $color-text1-3;
-    margin-right: $s-1;
-    line-height: $s-4;
+  .content-container {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
   }
 
-  .content-name {
-    color: $color-text1-4;
+  .content-use-tips, .content-group, .content-name, .content-detail {
+    color: $color-text1-3;
     line-height: $s-4;
+    margin-right: $s-1;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    flex: 1;
   }
 
+
+  .content-group {
+    color: $color-text1-4;
+  }
+
+  .content-detail {
+    flex: 1;
+    color: $color-text1-4;
+  }
 }

package/lib/tool-status/types.d.ts

@@ -33,10 +33,18 @@ export interface ToolStatusProps extends React.HTMLAttributes<HTMLElement>, Comm
      * 工具名称
      */
     name?: string;
+    /**
+     * 工具集名称
+     */
+    groupName?: string;
     /**
      * 工具详情链接
      */
     useText?: string;
+    /**
+     * 当前的具体使用说明
+     */
+    param?: string;
     /**
      * 是否100%的宽度
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.3.37-beta.8",
+  "version": "0.3.37",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",