fix: [AIChatInput]Fixed an issue with the setContentWhileSaveTool function (#3041)

Author: YyumeiZhang

content/ai/aiChatInput/index-en-US.md

@@ -1525,7 +1525,7 @@ render(<CustomRichTextExtension />);
 | focusEditor | Focus the input box. By default, the focus is on the end of the input box. | (pos?: string) => void | - |
 | getEditor | Get the current tiptap editor instance | () => Editor | - |
 | setContent | Set input box content | (content: TiptapContent) => void | - |
-| setContentWhileSaveTool | Set the input box content while retaining the skill item | (content: TiptapContent) => void | - |
+| setContentWhileSaveTool | Set the input box content while retaining the skill item | (content: string) => void | - |
 
 ## Design Tokens
 

content/ai/aiChatInput/index.md

@@ -1603,7 +1603,7 @@ render(<CustomRichTextExtension />);
 | focusEditor | 聚焦输入框，默认聚焦到输入框的末尾 | (pos?: string) => void | - |
 | getEditor | 获取当前的 tiptap 的 editor 实例 | () => Editor | - |
 | setContent | 设置输入框内容 | (content: TiptapContent) => void | - |
-| setContentWhileSaveTool | 保留技能项的同时设置输入框内容 | (content: TiptapContent) => void | - |
+| setContentWhileSaveTool | 保留技能项的同时设置输入框内容 | (content: string) => void | - |
 
 
 

packages/semi-foundation/aiChatInput/utils.ts

@@ -145,7 +145,7 @@ export function getCustomSlotAttribute() {
 
 export function findSkillSlotInString(content: string) {
     const reg = /<skill-slot\s+([^>]*)><\/skill-slot>/i;
-    const attrReg = /([\w-]+)=["']?([^"'\s>]+)["']?/g;
+    const attrReg = /([\w-]+)=["']([^"']*)["']/g;
     const match = reg.exec(content);
     if (match) {
         const attrsStr = match[1];
@@ -175,8 +175,8 @@ function omitUndefinedFromObj(obj: { [key: string]: any }) {
 
 export function getSkillSlotString(skill: BaseSkill) {
     let skillParams = '';
-    skill.label && (skillParams += ` data-label=${skill.label}`);
-    skill.value && (skillParams += ` data-value=${skill.value}`);
+    skill.label && (skillParams += ` data-label="${skill.label}"`);
+    skill.value && (skillParams += ` data-value="${skill.value}"`);
     (typeof skill.hasTemplate === 'boolean') && (skillParams += ` data-template=${skill.hasTemplate}`);
-    return `<skill-slot ${skillParams}"></skill-slot>`;
+    return `<skill-slot ${skillParams}></skill-slot>`;
 }

packages/semi-ui/aiChatInput/_story/aiChatInput.stories.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useRef, useMemo } from 'react';
+import React, { useCallback, useState, useRef, useMemo, useEffect } from 'react';
 import Button from '../../button';
 import AIChatInput from '../index';
 import Configure from '../configure';
@@ -639,4 +639,43 @@ export const AddPasteRule = () => {
       {/* <Button onClick={onButtonClick2}>点我设置结果</Button> */}
     </>
   );
-}
+}
+
+export const SetContent = () => {
+  const ref = useRef();
+
+  const onContentChange = useCallback((content) => {
+    console.log('onContentChange', content);
+  }, []);
+
+  const onSkillChange = useCallback((skill) => {
+    console.log("skill", skill);
+  })
+
+  useEffect(() => {
+    // 先用 setContent 设置了内容，其中包含 skill-slot
+    ref.current?.setContent('<skill-slot data-label="AI 写代码" data-value="AI coding" data-template=true></skill-slot>帮我完成...');
+    setTimeout(() => {
+      // 后用 setContentWhileSaveTool 实现在保留 skill 的基础上修改内容
+      ref.current?.setContentWhileSaveTool('改变后的内容');
+    }, 1000);
+  }, []);
+
+  return (<>
+      <AIChatInput
+          ref={ref}
+          placeholder={'输入内容或者上传内容'} 
+          uploadProps={uploadProps}
+          onSkillChange={onSkillChange}
+          onContentChange={onContentChange}
+          style={outerStyle} 
+      />
+      <br/><br/>
+      <Button 
+        onClick={() => {
+          console.log('html', ref.current?.getEditor().getHTML());
+          console.log('json', ref.current?.getEditor().getJSON());
+        }}
+      >点我查看富文本区域内容</Button>
+  </>);
+}

packages/semi-ui/aiChatInput/extension/skillSlot/index.tsx

@@ -53,7 +53,7 @@ const SkillSlot = Node.create({
                 renderHTML: (attributes: Record<string, any>) => ({ 'data-label': attributes.label }),
             },
             hasTemplate: {
-                parseHTML: (element: HTMLElement) => (element as HTMLElement).getAttribute('data-template'),
+                parseHTML: (element: HTMLElement) => (element as HTMLElement).getAttribute('data-template') === 'true',
                 renderHTML: (attributes: Record<string, any>) => ({ 'data-template': attributes.hasTemplate }),
             },
             isCustomSlot: getCustomSlotAttribute(),

packages/semi-ui/aiChatInput/index.tsx

@@ -13,7 +13,7 @@ import { IconSendMsgStroked, IconFile, IconCode, IconCrossStroked,
 import '@douyinfe/semi-foundation/aiChatInput/aiChatInput.scss';
 import HorizontalScroller from './horizontalScroller';
 import cls from 'classnames';
-import { getAttachmentType, isImageType, getContentType, getCustomSlotAttribute } from '@douyinfe/semi-foundation/aiChatInput/utils';
+import { getAttachmentType, isImageType, getContentType, getCustomSlotAttribute, getSkillSlotString } from '@douyinfe/semi-foundation/aiChatInput/utils';
 import Configure from './configure';
 import RichTextInput from './richTextInput';
 import { Editor, FocusPosition } from '@tiptap/core';
@@ -252,7 +252,7 @@ class AIChatInput extends BaseComponent<AIChatInputProps, AIChatInputState> {
         if (!skill) {
             realContent = `<p>${content}</p>`;
         } else {
-            realContent = `<p><skill-slot data-value=${skill.label ?? 'test'}></skill-slot>${content}</p>`;
+            realContent = `<p>${getSkillSlotString(skill)}${content}</p>`;
         }
         this.setContent(realContent);
     }