Do not let ai chat submit empty messages (#14771)

fixed #14755 Signed-off-by: Jonas Helming <[email protected]>
eclipse-theia · Jan 25, 2025 · 42e1556 · 42e1556
1 parent 445b35b
commit 42e1556
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/ai-chat-ui/src/browser/chat-input-widget.tsx b/packages/ai-chat-ui/src/browser/chat-input-widget.tsx
@@ -154,6 +154,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     const onDeleteChangeSetElement = (index: number) => props.onDeleteChangeSetElement(props.chatModel.id, index);
 
     const [inProgress, setInProgress] = React.useState(false);
+    const [isInputEmpty, setIsInputEmpty] = React.useState(true);
     const [changeSetUI, setChangeSetUI] = React.useState(
         () => props.chatModel.changeSet ? buildChangeSetUI(props.chatModel.changeSet, props.labelProvider, onDeleteChangeSet, onDeleteChangeSetElement) : undefined
     );
@@ -212,6 +213,8 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                 }
             };
             editor.getControl().onDidChangeModelContent(() => {
+                const value = editor.getControl().getValue();
+                setIsInputEmpty(!value || value.length === 0);
                 updateEditorHeight();
                 handleOnChange();
             });
@@ -270,6 +273,9 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     }, [props.chatModel]);
 
     function submit(value: string): void {
+        if (!value || value.trim().length === 0) {
+            return;
+        }
         setInProgress(true);
         props.onQuery(value);
         if (editorRef.current) {
@@ -338,7 +344,8 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                     submit(editorRef.current?.document.textEditorModel.getValue() || '');
                 }
             },
-            className: 'codicon-send'
+            className: 'codicon-send',
+            disabled: isInputEmpty || !props.isEnabled
         }];
 
     return <div className='theia-ChatInput'>
@@ -446,6 +453,7 @@ interface Option {
     title: string;
     handler: () => void;
     className: string;
+    disabled?: boolean;
 }
 
 const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ leftOptions, rightOptions }) => (
@@ -454,7 +462,7 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ left
             {leftOptions.map((option, index) => (
                 <span
                     key={index}
-                    className={`codicon ${option.className} option`}
+                    className={`codicon ${option.className} option ${option.disabled ? 'disabled' : ''}`}
                     title={option.title}
                     onClick={option.handler}
                 />
@@ -464,7 +472,7 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ left
             {rightOptions.map((option, index) => (
                 <span
                     key={index}
-                    className={`codicon ${option.className} option`}
+                    className={`codicon ${option.className} option ${option.disabled ? 'disabled' : ''}`}
                     title={option.title}
                     onClick={option.handler}
                 />

diff --git a/packages/ai-chat-ui/src/browser/style/index.css b/packages/ai-chat-ui/src/browser/style/index.css
@@ -394,6 +394,12 @@ div:last-child > .theia-ChatNode {
   cursor: pointer;
 }
 
+.theia-ChatInputOptions .option.disabled {
+  cursor: default;
+  opacity: var(--theia-mod-disabled-opacity);
+  pointer-events: none;
+}
+
 .theia-ChatInputOptions .option:hover {
   opacity: 1;
   background-color: var(--theia-toolbar-hoverBackground);