fix: remove trailing empty paragraphs when sending messages

The-Commit-Company · Aug 31, 2024 · e704b20 · e704b20
1 parent d77e527
commit e704b20
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/frontend/src/components/feature/chat/ChatInput/RightToolbarButtons.tsx b/frontend/src/components/feature/chat/ChatInput/RightToolbarButtons.tsx
@@ -188,16 +188,32 @@ export const SendButton = ({ sendMessage, messageSending, setContent, ...props }
     const onClick = () => {
         if (editor) {
 
-
             const hasContent = editor.getText().trim().length > 0
 
             const hasInlineImage = editor.getHTML().includes('img')
 
             let html = ''
-            let json = {}
+            let json: any = {}
             if (hasContent || hasInlineImage) {
-                html = editor.getHTML()
                 json = editor.getJSON()
+
+                // remove empty paragraphs at the end of the content
+                const content = json.content
+
+                for (let i = content.length - 1; i >= 0; i--) {
+                    if (content[i].type === 'paragraph' && (!content[i].content || content[i].content.length === 0)) {
+                        content.pop()
+                    } else {
+                        break
+                    }
+                }
+
+                json.content = content
+
+                // Get the HTMl content
+                editor.commands.setContent(json)
+
+                html = editor.getHTML()
             }
             editor.setEditable(false)
             sendMessage(html, json)

diff --git a/frontend/src/components/feature/chat/ChatInput/Tiptap.tsx b/frontend/src/components/feature/chat/ChatInput/Tiptap.tsx
@@ -499,7 +499,8 @@ const Tiptap = ({ isEdit, slotBefore, fileProps, onMessageSend, replyMessage, cl
                         // followCursor: true,
                         offset: [90, 15],
                         inlinePositioning: true,
-                    }}>
+                    }}
+                        editor={editor}>
                         <div className='bg-gray-1 dark:bg-gray-3 shadow-md p-2 rounded-md'>
                             <TextFormattingMenu />
                         </div>