From 8061e7a8fb05ff9af795580bf048e42f92c06084 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <209825114+claude[bot]@users.noreply.github.com>
Date: Thu, 4 Sep 2025 16:10:56 +0000
Subject: [PATCH] fix: require text when uploading images in chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated validation logic to require accompanying text when images are present
- Images-only submissions are now blocked, but documents can still be standalone
- Applied consistent validation across handleSubmit, keyboard submission, and submit button disabled state
- Resolves issue where users could send image-only messages causing errors

Fixes #229

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/components/ChatBox.tsx | 44 ++++++++++++++++++++---------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/ChatBox.tsx b/frontend/src/components/ChatBox.tsx
index aa1eb17a0..108b30a27 100644
--- a/frontend/src/components/ChatBox.tsx
+++ b/frontend/src/components/ChatBox.tsx
@@ -516,9 +516,14 @@ export default function Component({
   const handleSubmit = (e?: React.FormEvent) => {
     e?.preventDefault();
 
-    // Allow submission if there's text input, images, or a document
-    const hasContent = inputValue.trim() || images.length > 0 || uploadedDocument;
-    if (!hasContent || isSubmitDisabled) return;
+    // Require text when images are present, allow document-only or text-only submissions
+    const hasText = inputValue.trim();
+    const hasImages = images.length > 0;
+    const hasDocument = uploadedDocument;
+
+    // If images are present, text is required. Otherwise, just need text or document.
+    const hasValidContent = hasImages ? hasText : hasText || hasDocument;
+    if (!hasValidContent || isSubmitDisabled) return;
 
     // Clear the drafts when submitting
     if (chatId) {
@@ -576,14 +581,22 @@ export default function Component({
       if (isMobile || e.shiftKey || isStreaming) {
         // On mobile, when Shift is pressed, or when streaming, allow newline
         return;
-      } else if (isSubmitDisabled || !inputValue.trim()) {
-        // Prevent form submission when disabled or empty input
-        e.preventDefault();
-        return;
       } else {
-        // On desktop without Shift and not streaming, submit the form
-        e.preventDefault();
-        handleSubmit();
+        // Check if submission is valid (same logic as handleSubmit)
+        const hasText = inputValue.trim();
+        const hasImages = images.length > 0;
+        const hasDocument = uploadedDocument;
+        const hasValidContent = hasImages ? hasText : hasText || hasDocument;
+
+        if (isSubmitDisabled || !hasValidContent) {
+          // Prevent form submission when disabled or invalid content
+          e.preventDefault();
+          return;
+        } else {
+          // On desktop without Shift and not streaming, submit the form
+          e.preventDefault();
+          handleSubmit();
+        }
       }
     }
   };
@@ -982,9 +995,14 @@ export default function Component({
             type="submit"
             size="sm"
             className="ml-auto gap-1.5"
-            disabled={
-              (!inputValue.trim() && images.length === 0 && !uploadedDocument) || isSubmitDisabled
-            }
+            disabled={(() => {
+              const hasText = inputValue.trim();
+              const hasImages = images.length > 0;
+              const hasDocument = uploadedDocument;
+              // If images are present, text is required. Otherwise, just need text or document.
+              const hasValidContent = hasImages ? hasText : hasText || hasDocument;
+              return !hasValidContent || isSubmitDisabled;
+            })()}
             aria-label="Send message"
           >
             <CornerRightUp className="size-3.5" />