feat: [AIChatInput] The newly added keepSkillAfterSend API allows users to set whether to delete the skill upon sending (#3046)

Author: YyumeiZhang

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

@@ -679,3 +679,37 @@ export const SetContent = () => {
       >点我查看富文本区域内容</Button>
   </>);
 }
+
+export const KeepSkill = () => {
+  const ref = useRef();
+  const [generating, setGenerating] = useState(false);
+
+  const onContentChange = useCallback((content) => {
+    console.log('onContentChange', content);
+  }, []);
+
+  const toggleGenerate = useCallback((props) => {
+    setGenerating(value => !value);
+  }, []);
+
+  return (<>
+      <AIChatInput
+          ref={ref}
+          generating={generating}
+          keepSkillAfterSend
+          defaultContent={`<skill-slot data-label="帮我写作" data-value="writing" data-template=true></skill-slot>帮我完成...`}
+          placeholder={'输入内容或者上传内容'} 
+          uploadProps={uploadProps}
+          onContentChange={onContentChange}
+          onMessageSend={toggleGenerate}
+          onStopGenerate={toggleGenerate}
+          style={outerStyle} 
+      />
+      <Button onClick={() => {
+        const html = ref.current.editor.getHTML();
+        const json = ref.current.editor.getJSON();
+        console.log('html', html);
+        console.log('json', json);
+      }}>点击获取</Button>
+  </>);
+}

packages/semi-ui/aiChatInput/index.tsx

@@ -54,6 +54,7 @@ class AIChatInput extends BaseComponent<AIChatInputProps, AIChatInputState> {
         dropdownMatchTriggerWidth: true,
         round: true,
         topSlotPosition: 'top',
+        keepSkillAfterSend: false,
     }
 
     constructor(props: AIChatInputProps) {
@@ -203,14 +204,14 @@ class AIChatInput extends BaseComponent<AIChatInputProps, AIChatInputState> {
     }
 
     componentDidUpdate(prevProps: Readonly<AIChatInputProps>): void {
-        const { suggestions } = this.props;
+        const { suggestions, keepSkillAfterSend } = this.props;
         if (!isEqual(suggestions, prevProps.suggestions)) {
             const newVisible = (suggestions && suggestions.length > 0) ? true : false;
             newVisible ? this.foundation.showSuggestionPanel() :
                 this.foundation.hideSuggestionPanel();
         }
         if (this.props.generating && (this.props.generating !== prevProps.generating)) {
-            this.adapter.clearContent();
+            keepSkillAfterSend ? this.setContentWhileSaveTool('') : this.adapter.clearContent();
             this.adapter.clearAttachments();
         }
     }

packages/semi-ui/aiChatInput/interface.ts

@@ -23,6 +23,7 @@ export interface AIChatInputState {
 
 export interface AIChatInputProps {
     dropdownMatchTriggerWidth?: boolean;
+    keepSkillAfterSend: boolean;
     className?: string;
     style?: React.CSSProperties;
     // Rich text editor related