Add validation for empty messages

desktop/src/lib/editor.ts

@@ -386,3 +386,40 @@ const applyBlockContentMarksChangesToYDoc = (
     blockContentMap.set('marks', blockContent.marks);
   }
 };
+
+export const editorHasContent = (block?: JSONContent) => {
+  if (!block) {
+    return false;
+  }
+
+  if (block.text && block.text?.length > 0) {
+    return true;
+  }
+
+  if (block.type === 'file' && block.attrs?.fileId) {
+    return true;
+  }
+
+  if (block.type === 'upload' && block.attrs?.uploadId) {
+    return true;
+  }
+
+  if (block.type === 'gif' && block.attrs?.gifId) {
+    return true;
+  }
+
+  if (block.type === 'emoji' && block.attrs?.emoji) {
+    return true;
+  }
+
+  if (block.content && block.content?.length > 0) {
+    for (let i = 0; i < block.content.length; i += 1) {
+      const innerBlock = block.content[i];
+      if (editorHasContent(innerBlock)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};

desktop/src/renderer/components/messages/message-create.tsx

@@ -7,6 +7,7 @@ import { useMutation } from '@/renderer/hooks/use-mutation';
 import { useWorkspace } from '@/renderer/contexts/workspace';
 import { MessageNode } from '@/types/messages';
 import { CircleX } from 'lucide-react';
+import { editorHasContent } from '@/lib/editor';
 
 interface MessageCreateProps {
   conversationId: string;
@@ -23,6 +24,7 @@ export const MessageCreate = React.forwardRef<
   const workspace = useWorkspace();
   const { mutate, isPending } = useMutation();
 
+  const [hasContent, setHasContent] = React.useState<boolean>(false);
   const messageEditorRef = React.useRef<MessageEditorRefProps>(null);
   const [replyTo, setReplyTo] = React.useState<MessageNode | null>(null);
 
@@ -57,7 +59,14 @@ export const MessageCreate = React.forwardRef<
         <MessageEditor
           ref={messageEditorRef}
           conversationId={conversationId}
+          onChange={(content) => {
+            setHasContent(editorHasContent(content));
+          }}
           onSubmit={(content) => {
+            if (!editorHasContent(content)) {
+              return;
+            }
+
             const messageContent = content;
             if (replyTo) {
               messageContent.content.unshift({
@@ -86,7 +95,7 @@ export const MessageCreate = React.forwardRef<
           }}
           loading={isPending}
           canEdit={true}
-          canSubmit={true}
+          canSubmit={hasContent}
         />
       </div>
       <div className="flex h-8 min-h-8 items-center text-xs text-muted-foreground"></div>

desktop/src/renderer/components/messages/message-editor.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import type { JSONContent } from '@tiptap/core';
 import { EditorContent, useEditor } from '@tiptap/react';
 import isHotkey from 'is-hotkey';
-import { MessageGifPicker } from '@/renderer/components/messages/message-gif-picker';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -164,15 +163,6 @@ export const MessageEditor = React.forwardRef<
         />
       </div>
       <div className="flex flex-row gap-2">
-        {/* <MessageReactionPicker
-          size={20}
-          className="cursor-pointer"
-          onEmojiSelect={(emoji) => {
-            console.log(emoji);
-          }}
-        /> */}
-        <MessageGifPicker />
-        <span className="h-5 border-l-2 border-l-gray-300" />
         {props.loading ? (
           <Spinner size={20} />
         ) : (