[AiAssistance] Disable send button when no text input

Also, making sure submit feedback button is disabled initially.

Fixed: 399303164, 367863700
Change-Id: I2cd6fca65f587d3b4c50a13b8b22b87db5a11a50
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6306723
Auto-Submit: Samiya Caur <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -1171,6 +1171,35 @@ describeWithMockConnection('AI Assistance Panel', () => {
            assert.strictEqual(updatedViewInput.inputPlaceholder, 'Select an element to ask a question');
          });
     });
+
+    it('should disable the send button when the input is empty', async () => {
+      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+      updateHostConfig({
+        devToolsFreestyler: {
+          enabled: true,
+        },
+      });
+
+      UI.Context.Context.instance().setFlavor(
+          Elements.ElementsPanel.ElementsPanel, sinon.createStubInstance(Elements.ElementsPanel.ElementsPanel));
+      const {panel, expectViewUpdate} =
+          await createAiAssistancePanel({aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE});
+
+      const updateViewInput = await expectViewUpdate(() => {
+        panel.handleAction('freestyler.elements-floating-button');
+      });
+      assert.isTrue(updateViewInput.isTextInputEmpty);
+
+      const updateViewInputAfterTextInputAdded = await expectViewUpdate(() => {
+        updateViewInput.onTextInputChange('test');
+      });
+      assert.isFalse(updateViewInputAfterTextInputAdded.isTextInputEmpty);
+
+      const updateViewInputAfterTextInputRemoved = await expectViewUpdate(() => {
+        updateViewInputAfterTextInputAdded.onTextInputChange('');
+      });
+      assert.isTrue(updateViewInputAfterTextInputRemoved.isTextInputEmpty);
+    });
   });
 
   describe('multimodal input', () => {

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -441,6 +441,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     accountFullName?: string,
   };
   #imageInput = '';
+  // Used to disable send button when there is not text input.
+  #isTextInputEmpty = true;
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
     aidaClient: Host.AidaClient.AidaClient,
@@ -809,6 +811,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           emptyStateSuggestions: this.#conversation ? getEmptyStateSuggestions(this.#conversation.type) : [],
           inputPlaceholder: this.#getChatInputPlaceholder(),
           disclaimerText: this.#getDisclaimerText(),
+          isTextInputEmpty: this.#isTextInputEmpty,
           onNewChatClick: this.#handleNewChatRequest.bind(this),
           onHistoryClick: this.#onHistoryClicked.bind(this),
           onDeleteClick: this.#onDeleteClicked.bind(this),
@@ -831,6 +834,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onTakeScreenshot: isAiAssistanceMultimodalInputEnabled() ? this.#handleTakeScreenshot.bind(this) : undefined,
           onRemoveImageInput: isAiAssistanceMultimodalInputEnabled() ? this.#handleRemoveImageInput.bind(this) :
                                                                        undefined,
+          onTextInputChange: this.#handleTextInputChange.bind(this),
         },
         this.#viewOutput, this.contentElement);
   }
@@ -1135,6 +1139,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.requestUpdate();
   }
 
+  #handleTextInputChange(value: string): void {
+    const disableSubmit = !value;
+    if (disableSubmit !== this.#isTextInputEmpty) {
+      this.#isTextInputEmpty = disableSubmit;
+      void this.requestUpdate();
+    }
+  }
+
   #runAbortController = new AbortController();
   #cancel(): void {
     this.#runAbortController.abort();

front_end/panels/ai_assistance/components/ChatView.test.ts

@@ -21,6 +21,7 @@ describeWithEnvironment('ChatView', () => {
       onCancelClick: noop,
       onContextClick: noop,
       onNewConversation: noop,
+      onTextInputChange: noop,
       inspectElementToggled: false,
       state: AiAssistance.State.CHAT_VIEW,
       conversationType: AiAssistance.ConversationType.STYLING,
@@ -36,6 +37,7 @@ describeWithEnvironment('ChatView', () => {
       emptyStateSuggestions: [],
       inputPlaceholder: i18n.i18n.lockedString('input placeholder'),
       disclaimerText: i18n.i18n.lockedString('disclaimer text'),
+      isTextInputEmpty: true,
       ...options,
     };
   }

front_end/panels/ai_assistance/components/ChatView.ts

@@ -268,6 +268,7 @@ export interface Props {
   onNewConversation: () => void;
   onTakeScreenshot?: () => void;
   onRemoveImageInput?: () => void;
+  onTextInputChange: (input: string) => void;
   inspectElementToggled: boolean;
   state: State;
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
@@ -290,6 +291,7 @@ export interface Props {
   emptyStateSuggestions: string[];
   inputPlaceholder: Platform.UIString.LocalizedString;
   disclaimerText: Platform.UIString.LocalizedString;
+  isTextInputEmpty: boolean;
 }
 
 export class ChatView extends HTMLElement {
@@ -513,6 +515,7 @@ export class ChatView extends HTMLElement {
                 multimodalInputEnabled: this.#props.multimodalInputEnabled,
                 conversationType: this.#props.conversationType,
                 imageInput: this.#props.imageInput,
+                isTextInputEmpty: this.#props.isTextInputEmpty,
                 onContextClick: this.#props.onContextClick,
                 onInspectElementClick: this.#props.onInspectElementClick,
                 onSubmit: this.#handleSubmit,
@@ -521,6 +524,7 @@ export class ChatView extends HTMLElement {
                 onNewConversation: this.#props.onNewConversation,
                 onTakeScreenshot: this.#props.onTakeScreenshot,
                 onRemoveImageInput: this.#props.onRemoveImageInput,
+                onTextInputChange: this.#props.onTextInputChange,
               })
           }
         </main>
@@ -1073,13 +1077,15 @@ function renderReadOnlySection({onNewConversation, conversationType}: {
   // clang-format on
 }
 
-function renderChatInputButtons({isLoading, blockedByCrossOrigin, isTextInputDisabled, onCancel, onNewConversation}: {
-  isLoading: boolean,
-  blockedByCrossOrigin: boolean,
-  isTextInputDisabled: boolean,
-  onCancel: (ev: SubmitEvent) => void,
-  onNewConversation: () => void,
-}): Lit.TemplateResult {
+function renderChatInputButtons(
+    {isLoading, blockedByCrossOrigin, isTextInputDisabled, isTextInputEmpty, onCancel, onNewConversation}: {
+      isLoading: boolean,
+      blockedByCrossOrigin: boolean,
+      isTextInputDisabled: boolean,
+      isTextInputEmpty: boolean,
+      onCancel: (ev: SubmitEvent) => void,
+      onNewConversation: () => void,
+    }): Lit.TemplateResult {
   if (isLoading) {
     // clang-format off
     return html`<devtools-button
@@ -1126,7 +1132,7 @@ function renderChatInputButtons({isLoading, blockedByCrossOrigin, isTextInputDis
         type: 'submit',
         variant: Buttons.Button.Variant.ICON,
         size: Buttons.Button.Size.REGULAR,
-        disabled: isTextInputDisabled,
+        disabled: isTextInputDisabled || isTextInputEmpty,
         iconName: 'send',
         title: lockedString(UIStringsNotTranslate.sendButtonTitle),
         jslogContext: 'send',
@@ -1207,6 +1213,7 @@ function renderChatInput({
   multimodalInputEnabled,
   conversationType,
   imageInput,
+  isTextInputEmpty,
   onContextClick,
   onInspectElementClick,
   onSubmit,
@@ -1215,6 +1222,7 @@ function renderChatInput({
   onNewConversation,
   onTakeScreenshot,
   onRemoveImageInput,
+  onTextInputChange,
 }: {
   isLoading: boolean,
   blockedByCrossOrigin: boolean,
@@ -1226,6 +1234,7 @@ function renderChatInput({
   multimodalInputEnabled?: boolean,
   conversationType?: ConversationType,
   imageInput?: string,
+  isTextInputEmpty: boolean,
   onContextClick: () => void ,
   onInspectElementClick: () => void,
   onSubmit: (ev: SubmitEvent) => void,
@@ -1234,6 +1243,7 @@ function renderChatInput({
   onNewConversation: () => void,
   onTakeScreenshot?: () => void,
   onRemoveImageInput?: () => void,
+  onTextInputChange: (input: string) => void,
 }): Lit.LitTemplate {
   if (!conversationType) {
     return Lit.nothing;
@@ -1278,14 +1288,15 @@ function renderChatInput({
         wrap="hard"
         maxlength="10000"
         @keydown=${onTextAreaKeyDown}
+        @input=${(event: KeyboardEvent) => onTextInputChange((event.target as HTMLInputElement).value)}
         placeholder=${inputPlaceholder}
         jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}
       ></textarea>
       <div class="chat-input-buttons">
         ${renderTakeScreenshotButton({
           multimodalInputEnabled, blockedByCrossOrigin, isTextInputDisabled, onTakeScreenshot
         })}
-        ${renderChatInputButtons({ isLoading, blockedByCrossOrigin, isTextInputDisabled, onCancel, onNewConversation })}
+        ${renderChatInputButtons({ isLoading, blockedByCrossOrigin, isTextInputDisabled, isTextInputEmpty, onCancel, onNewConversation })}
       </div>
     </div>
   </form>

front_end/panels/ai_assistance/components/UserActionRow.test.ts

@@ -78,17 +78,21 @@ describeWithEnvironment('UserActionRow', () => {
 
     {
       const [viewInput] = view.lastCall.args;
-      expect(viewInput.isSubmitButtonDisabled).equals(false);
+      expect(viewInput.isSubmitButtonDisabled).equals(true);
       viewInput.onRatingClick(Host.AidaClient.Rating.POSITIVE);
     }
 
     assert.isTrue(view.calledTwice);
 
     {
       const [viewInput] = view.lastCall.args;
-      expect(viewInput.isSubmitButtonDisabled).equals(false);
       expect(viewInput.isShowingFeedbackForm).equals(true);
       viewInput.onInputChange('test');
+    }
+
+    {
+      const [viewInput] = view.lastCall.args;
+      expect(viewInput.isSubmitButtonDisabled).equals(false);
       viewInput.onSubmit(new SubmitEvent('submit'));
     }
 

front_end/panels/ai_assistance/components/UserActionRow.ts

@@ -130,7 +130,7 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
   #feedbackValue = '';
   #currentRating: Host.AidaClient.Rating|undefined;
   #isShowingFeedbackForm = false;
-  #isSubmitButtonDisabled = false;
+  #isSubmitButtonDisabled = true;
 
   #view: View;
   #viewOutput: ViewOutput = {};