[AI Assistance] Implement start new chat button

Bug: 377227220
Change-Id: Iccda3f41b3422a1773ce3add6a5b45beaf6c44f0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5999711
Auto-Submit: Alex Rudenko <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: OrKoN

front_end/panels/freestyler/FreestylerPanel.ts

@@ -211,6 +211,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       onFeedbackSubmit: this.#handleFeedbackSubmit.bind(this),
       onCancelClick: this.#cancel.bind(this),
       onContextClick: this.#handleContextClick.bind(this),
+      onNewConversation: this.#clearMessages.bind(this),
       canShowFeedbackForm: this.#serverSideLoggingEnabled,
       userInfo: {
         accountImage: syncInfo.accountImage,

front_end/panels/freestyler/components/FreestylerChatUi.test.ts

@@ -46,6 +46,7 @@ css
       onFeedbackSubmit: noop,
       onCancelClick: noop,
       onContextClick: noop,
+      onNewConversation: noop,
       inspectElementToggled: false,
       state: Freestyler.State.CHAT_VIEW,
       agentType: Freestyler.AgentType.FREESTYLER,

front_end/panels/freestyler/components/FreestylerChatUi.ts

@@ -119,6 +119,10 @@ const UIStringsNotTranslate = {
    *@description Title for the send icon button.
    */
   sendButtonTitle: 'Send',
+  /**
+   *@description Title for the start new chat
+   */
+  startNewChatButtonTitle: 'Start new chat',
   /**
    *@description Title for the cancel icon button.
    */
@@ -292,6 +296,7 @@ export interface Props {
   onFeedbackSubmit: (rpcId: number, rate: Host.AidaClient.Rating, feedback?: string) => void;
   onCancelClick: () => void;
   onContextClick: () => void | Promise<void>;
+  onNewConversation: () => void;
   inspectElementToggled: boolean;
   state: State;
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
@@ -874,6 +879,10 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format on
   };
 
+  #onNewConversation(): void {
+    this.#props.onNewConversation();
+  }
+
   #getEmptyStateSuggestions = (): string[] => {
     if (!this.#props.agentType) {
       return [];
@@ -927,6 +936,61 @@ export class FreestylerChatUi extends HTMLElement {
     }
   }
 
+  #renderChatInputButton(): LitHtml.TemplateResult {
+    if (this.#props.isLoading) {
+      // clang-format off
+      return html`<devtools-button
+        class="chat-input-button"
+        aria-label=${lockedString(UIStringsNotTranslate.cancelButtonTitle)}
+        @click=${this.#handleCancel}
+        .data=${
+          {
+            variant: Buttons.Button.Variant.ICON,
+            size: Buttons.Button.Size.REGULAR,
+            iconName: 'record-stop',
+            title: lockedString(UIStringsNotTranslate.cancelButtonTitle),
+            jslogContext: 'stop',
+          } as Buttons.Button.ButtonData
+        }
+      ></devtools-button>`;
+      // clang-format on
+    }
+    if (this.#props.blockedByCrossOrigin) {
+      // clang-format off
+      return html`<devtools-button
+        class="chat-input-button"
+        aria-label=${lockedString(UIStringsNotTranslate.startNewChatButtonTitle)}
+        @click=${this.#onNewConversation}
+        .data=${
+          {
+            variant: Buttons.Button.Variant.PRIMARY,
+            size: Buttons.Button.Size.REGULAR,
+            title: lockedString(UIStringsNotTranslate.startNewChatButtonTitle),
+            jslogContext: 'start-new-chat',
+          } as Buttons.Button.ButtonData
+        }
+      >${lockedString(UIStringsNotTranslate.startNewChatButtonTitle)}</devtools-button>`;
+      // clang-format on
+    }
+    // clang-format off
+    return html`<devtools-button
+      class="chat-input-button"
+      aria-label=${lockedString(UIStringsNotTranslate.sendButtonTitle)}
+      .data=${
+        {
+          type: 'submit',
+          variant: Buttons.Button.Variant.ICON,
+          size: Buttons.Button.Size.REGULAR,
+          disabled: this.#isTextInputDisabled(),
+          iconName: 'send',
+          title: lockedString(UIStringsNotTranslate.sendButtonTitle),
+          jslogContext: 'send',
+        } as Buttons.Button.ButtonData
+      }
+    ></devtools-button>`;
+    // clang-format on
+  }
+
   #renderChatInput = (): LitHtml.TemplateResult => {
     // clang-format off
     return html`
@@ -937,37 +1001,7 @@ export class FreestylerChatUi extends HTMLElement {
           @keydown=${this.#handleTextAreaKeyDown}
           placeholder=${this.#getInputPlaceholderString()}
           jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}></textarea>
-          ${this.#props.isLoading
-            ? html`<devtools-button
-              class="chat-input-button"
-              aria-label=${lockedString(UIStringsNotTranslate.cancelButtonTitle)}
-              @click=${this.#handleCancel}
-              .data=${
-                {
-                  variant: Buttons.Button.Variant.ICON,
-                  size: Buttons.Button.Size.REGULAR,
-                  disabled: this.#isTextInputDisabled(),
-                  iconName: 'record-stop',
-                  title: lockedString(UIStringsNotTranslate.cancelButtonTitle),
-                  jslogContext: 'stop',
-                } as Buttons.Button.ButtonData
-              }
-            ></devtools-button>`
-            : html`<devtools-button
-              class="chat-input-button"
-              aria-label=${lockedString(UIStringsNotTranslate.sendButtonTitle)}
-              .data=${
-                {
-                  type: 'submit',
-                  variant: Buttons.Button.Variant.ICON,
-                  size: Buttons.Button.Size.REGULAR,
-                  disabled: this.#isTextInputDisabled(),
-                  iconName: 'send',
-                  title: lockedString(UIStringsNotTranslate.sendButtonTitle),
-                  jslogContext: 'send',
-                } as Buttons.Button.ButtonData
-              }
-            ></devtools-button>`}
+          ${this.#renderChatInputButton()}
       </div>`;
     // clang-format on
   };

front_end/ui/components/docs/freestyler/basic.ts

@@ -44,6 +44,7 @@ const component = new Freestyler.FreestylerChatUi({
   onFeedbackSubmit: noop,
   onCancelClick: noop,
   onContextClick: noop,
+  onNewConversation: noop,
   inspectElementToggled: false,
   state: Freestyler.State.CHAT_VIEW,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,

front_end/ui/components/docs/freestyler/empty_state.ts

@@ -19,6 +19,7 @@ const component = new Freestyler.FreestylerChatUi({
   onFeedbackSubmit: noop,
   onCancelClick: noop,
   onContextClick: noop,
+  onNewConversation: noop,
   inspectElementToggled: false,
   state: Freestyler.State.CHAT_VIEW,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2888,6 +2888,7 @@ export const knownContextValues = new Set([
   'stalled',
   'standard-emulated-device-list',
   'start',
+  'start-new-chat',
   'start-time',
   'start-url',
   'start-view',