feat: AIChatInput add immediatelyRender

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

@@ -1477,6 +1477,7 @@ render(<CustomRichTextExtension />);
 | defaultContent | Default input content, supports html string or Tiptap content | TiptapContent | - |
 | dropdownMatchTriggerWidth | Should dropdown width match input? | boolean | true |
 | extensions | Custom editor extensions | Extension[] | - |
+| immediatelyRender | As a parameter of tiptap's userEditor, if it's an SSR scenario, this parameter needs to be set to false. See [use-ssr-with-react-and-tiptap](https://tiptap.dev/docs/editor/getting-started/install/react#use-ssr-with-react-and-tiptap)  | boolean | - |
 | generating | Is it generating? | boolean | false |
 | onContentChange | Callback when input content changes | (content: <ApiType detail='{ type: string; [key: string]: any }'>OnContentChangeProps</ApiType>) => void | - |
 | onMessageSend | Callback for sending message | (content: <ApiType detail='{references?: Reference[]; attachments?: Attachment[]; inputContents?: Content[]; setup?: Setup}'>OnMessageSendProps</ApiType>) => void | - |

content/ai/aiChatInput/index.md

@@ -1555,6 +1555,7 @@ render(<CustomRichTextExtension />);
 | defaultContent | 输入框默认内容，支持 html string 以及 json 格式，同 Tiptap 的 Content | TiptapContent | - |
 | dropdownMatchTriggerWidth | 下拉弹出层是否是否与输入框宽度一致 | boolean | true |
 | extensions | 自定义扩展，类型同 tiptap 的 Extension 类型相同 | Extension[] | - |
+| immediatelyRender | 作为 tiptap 的 userEditor 的参数， 如果为 SSR 场景，需要设置此参数为 false，参考 [use-ssr-with-react-and-tiptap](https://tiptap.dev/docs/editor/getting-started/install/react#use-ssr-with-react-and-tiptap) | boolean | - |
 | generating | 是否正在生成中 | boolean | false |
 | onContentChange | 输入框内容变化时候的回调 | (content: <ApiType detail='{ type: string; [key: string]: any }'>OnContentChangeProps</ApiType>) => void | - |
 | onMessageSend | 发送消息回调 | (content: <ApiType detail='{references?: Reference[]; attachments?: Attachment[]; inputContents?: Content[]; setup?: Setup}'>OnMessageSendProps</ApiType>) => void | - |

packages/semi-ui/aiChatInput/index.tsx

@@ -577,7 +577,7 @@ class AIChatInput extends BaseComponent<AIChatInputProps, AIChatInputState> {
     render() {
         const { direction } = this.context;
         const defaultPosition = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
-        const { style, className, popoverProps, placeholder, extensions, defaultContent } = this.props;
+        const { style, className, popoverProps, placeholder, extensions, defaultContent, immediatelyRender } = this.props;
         const { templateVisible, skillVisible, suggestionVisible, popupKey } = this.state;
 
         return (
@@ -605,6 +605,7 @@ class AIChatInput extends BaseComponent<AIChatInputProps, AIChatInputState> {
                 >
                     {this.renderTopArea()}
                     <RichTextInput
+                        immediatelyRender={immediatelyRender}
                         innerRef={this.richTextDIVRef}
                         defaultContent={defaultContent}
                         placeholder={placeholder}

packages/semi-ui/aiChatInput/interface.ts

@@ -75,7 +75,8 @@ export interface AIChatInputProps {
     // transformer
     transformer?: Map<string, (obj: any) => any>;
     // Popover related
-    popoverProps?: PopoverProps
+    popoverProps?: PopoverProps;
+    immediatelyRender?: boolean
 }
 
 export interface RenderSuggestionItemProps {

packages/semi-ui/aiChatInput/richTextInput.tsx

@@ -22,6 +22,7 @@ export default (props: {
     innerRef?: React.Ref<HTMLDivElement>;
     defaultContent?: TiptapContent;
     placeholder?: string;
+    immediatelyRender?: boolean;
     setEditor?: (editor: Editor) => void;
     onKeyDown?: (e: KeyboardEvent) => void;
     onChange?: (content: string) => void;
@@ -33,7 +34,7 @@ export default (props: {
     handleCreate?: () => void
 }) => {
     const { setEditor, onKeyDown, onChange, placeholder, extensions = [], 
-        defaultContent, onPaste, innerRef, handleKeyDown, onFocus, onBlur, handleCreate } = props;
+        defaultContent, onPaste, innerRef, handleKeyDown, onFocus, onBlur, handleCreate, immediatelyRender } = props;
     const isComposing = useRef(false);
 
     const handleCompositionStart = useCallback((view: EditorView) => {
@@ -119,6 +120,7 @@ export default (props: {
         extensions: allExtensions as Extension[],
         content: defaultContent ?? ``,
         editorProps: editorProps,
+        immediatelyRender,
         // onSelectionUpdate,
         onCreate,
         onUpdate,
@@ -129,6 +131,11 @@ export default (props: {
         setEditor(editor);
     }, [editor, setEditor]);
 
+    if (!editor) {
+        // Prevent rendering until the editor is initialized
+        return null; 
+    }
+
     return (<>
         <EditorContent 
             editor={editor}