diff --git a/packages/ai-chat-ui/src/browser/chat-input-widget.tsx b/packages/ai-chat-ui/src/browser/chat-input-widget.tsx index 9b01001804b52..e4d5b5d234833 100644 --- 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 = (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 = (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 = (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 = (props: ChatInpu submit(editorRef.current?.document.textEditorModel.getValue() || ''); } }, - className: 'codicon-send' + className: 'codicon-send', + disabled: isInputEmpty || !props.isEnabled }]; return
@@ -446,6 +453,7 @@ interface Option { title: string; handler: () => void; className: string; + disabled?: boolean; } const ChatInputOptions: React.FunctionComponent = ({ leftOptions, rightOptions }) => ( @@ -454,7 +462,7 @@ const ChatInputOptions: React.FunctionComponent = ({ left {leftOptions.map((option, index) => ( @@ -464,7 +472,7 @@ const ChatInputOptions: React.FunctionComponent = ({ left {rightOptions.map((option, index) => ( diff --git a/packages/ai-chat-ui/src/browser/style/index.css b/packages/ai-chat-ui/src/browser/style/index.css index 9dd29cff77183..1f9ff78c1c8a5 100644 --- 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);