chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/panels/freestyler/FreestylerPanel.ts

@@ -23,7 +23,11 @@ import {
   ErrorType,
   type ResponseData,
   ResponseType,
+  type SerializedAgent,
 } from './AiAgent.js';
+import {
+  AiHistoryStorage,
+} from './AiHistoryStorage.js';
 import {ChangeManager} from './ChangeManager.js';
 import {
   ChatMessageEntity,
@@ -190,6 +194,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
   #agents = new Set<AiAgent<unknown>>();
   #currentAgent?: AiAgent<unknown>;
 
+  #previousSameOriginContext?: ConversationContext<unknown>;
   #selectedFile: FileContext|null = null;
   #selectedElement: NodeContext|null = null;
   #selectedCallTree: CallTreeContext|null = null;
@@ -223,7 +228,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.#newChat.bind(this),
+      onNewConversation: this.#handleNewChatRequest.bind(this),
       canShowFeedbackForm: this.#serverSideLoggingEnabled,
       userInfo: {
         accountImage: syncInfo.accountImage,
@@ -234,6 +239,10 @@ export class FreestylerPanel extends UI.Panel.Panel {
       stripLinks: false,
       isReadOnly: false,
     };
+
+    for (const historyEntry of AiHistoryStorage.instance().getHistory()) {
+      this.#createAgent(historyEntry.type, historyEntry);
+    }
   }
 
   #createToolbar(): void {
@@ -241,7 +250,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     const leftToolbar = new UI.Toolbar.Toolbar('freestyler-left-toolbar', toolbarContainer);
     const rightToolbar = new UI.Toolbar.Toolbar('freestyler-right-toolbar', toolbarContainer);
 
-    this.#newChatButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#newChat.bind(this));
+    this.#newChatButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#handleNewChatRequest.bind(this));
     leftToolbar.appendToolbarItem(this.#newChatButton);
     leftToolbar.appendSeparator();
 
@@ -257,8 +266,9 @@ export class FreestylerPanel extends UI.Panel.Panel {
         AI_ASSISTANCE_SEND_FEEDBACK, i18nString(UIStrings.sendFeedback), undefined, undefined,
         'freestyler.send-feedback');
     link.style.setProperty('display', null);
-    link.style.setProperty('text-decoration', 'none');
-    link.style.setProperty('padding', '0 var(--sys-size-3)');
+    link.style.setProperty('color', 'var(--sys-color-primary)');
+    link.style.setProperty('margin', '0 var(--sys-size-3)');
+    link.style.setProperty('height', 'calc(100% - 6px)');
     const linkItem = new UI.Toolbar.ToolbarItem(link);
     rightToolbar.appendToolbarItem(linkItem);
 
@@ -292,58 +302,44 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
   }
 
-  #createAgent(agentType: AgentType): AiAgent<unknown> {
-    switch (agentType) {
-      case AgentType.FREESTYLER:
-        return this.#createFreestylerAgent();
-      case AgentType.DRJONES_FILE:
-        return this.#createDrJonesFileAgent();
-      case AgentType.DRJONES_NETWORK_REQUEST:
-        return this.#createDrJonesNetworkAgent();
-      case AgentType.DRJONES_PERFORMANCE:
-        return this.#createDrJonesPerformanceAgent();
-    }
-  }
-
-  #updateToolbarState(): void {
-    this.#deleteHistoryEntryButton.setVisible(Boolean(this.#currentAgent && !this.#currentAgent.isEmpty));
-  }
-
-  #createFreestylerAgent(): FreestylerAgent {
-    const agent = new FreestylerAgent({
+  #createAgent(agentType: AgentType, history?: SerializedAgent): AiAgent<unknown> {
+    const options = {
       aidaClient: this.#aidaClient,
-      changeManager: this.#changeManager,
       serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
-    this.#agents.add(agent);
-    return agent;
-  }
+    };
+    let agent: AiAgent<unknown>;
+    switch (agentType) {
+      case AgentType.FREESTYLER: {
+        agent = new FreestylerAgent({
+          ...options,
+          changeManager: this.#changeManager,
+        });
+        break;
+      }
+      case AgentType.DRJONES_NETWORK_REQUEST: {
+        agent = new DrJonesNetworkAgent(options);
+        break;
+      }
+      case AgentType.DRJONES_FILE: {
+        agent = new DrJonesFileAgent(options);
+        break;
+      }
+      case AgentType.DRJONES_PERFORMANCE: {
+        agent = new DrJonesPerformanceAgent(options);
+        break;
+      }
+    }
 
-  #createDrJonesFileAgent(): DrJonesFileAgent {
-    const agent = new DrJonesFileAgent({
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
-    this.#agents.add(agent);
-    return agent;
-  }
+    if (history) {
+      agent.populateHistoryFromStorage(history);
+    }
 
-  #createDrJonesNetworkAgent(): DrJonesNetworkAgent {
-    const agent = new DrJonesNetworkAgent({
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
     this.#agents.add(agent);
     return agent;
   }
 
-  #createDrJonesPerformanceAgent(): DrJonesPerformanceAgent {
-    const agent = new DrJonesPerformanceAgent({
-      aidaClient: this.#aidaClient,
-      serverSideLoggingEnabled: this.#serverSideLoggingEnabled,
-    });
-    this.#agents.add(agent);
-    return agent;
+  #updateToolbarState(): void {
+    this.#deleteHistoryEntryButton.setVisible(Boolean(this.#currentAgent && !this.#currentAgent.isEmpty));
   }
 
   static async instance(opts: {
@@ -393,7 +389,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.#currentAgent = targetAgentType ? this.#createAgent(targetAgentType) : undefined;
     this.#viewProps.agentType = targetAgentType;
     this.#onContextSelectionChanged();
-    this.doUpdate();
+    void this.doUpdate();
   }
 
   override wasShown(): void {
@@ -417,7 +413,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       inspectElementToggled: this.#toggleSearchElementAction.toggled(),
       selectedContext: this.#getConversationContext(),
     };
-    this.doUpdate();
+    void this.doUpdate();
 
     this.#freestylerEnabledSetting?.addChangeListener(this.#handleFreestylerEnabledSettingChanged, this);
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
@@ -476,7 +472,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
         accountFullName: syncInfo.accountFullName,
       };
       this.#viewProps.state = this.#getChatUiState();
-      this.doUpdate();
+      void this.doUpdate();
     }
   };
 
@@ -486,7 +482,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
 
     this.#viewProps.inspectElementToggled = ev.data;
-    this.doUpdate();
+    void this.doUpdate();
   };
 
   #handleDOMNodeFlavorChange = (ev: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void => {
@@ -538,10 +534,10 @@ export class FreestylerPanel extends UI.Panel.Panel {
     }
 
     this.#viewProps.state = nextChatUiState;
-    this.doUpdate();
+    void this.doUpdate();
   };
 
-  doUpdate(): void {
+  override async doUpdate(): Promise<void> {
     this.#updateToolbarState();
     this.view(this.#viewProps, this.#viewOutput, this.#contentContainer);
   }
@@ -633,18 +629,21 @@ export class FreestylerPanel extends UI.Panel.Panel {
       return;
     }
 
+    let newAgent = false;
     if (!this.#currentAgent || this.#currentAgent.type !== targetAgentType || this.#currentAgent.isHistoryEntry ||
         targetAgentType === AgentType.DRJONES_PERFORMANCE) {
       this.#currentAgent = this.#createAgent(targetAgentType);
+      newAgent = true;
     }
     this.#viewProps.agentType = this.#currentAgent.type;
     this.#viewOutput.freestylerChatUi?.focusTextInput();
-    Host.userMetrics.actionTaken(Host.UserMetrics.Action.FreestylerOpenedFromElementsPanelFloatingButton);
-    this.#viewProps.messages = [];
     this.#onContextSelectionChanged();
-    this.doUpdate();
-    this.#viewProps.isReadOnly = false;
-    void this.#doConversation(this.#currentAgent.runFromHistory());
+    void this.doUpdate();
+    if (newAgent) {
+      this.#viewProps.messages = [];
+      this.#viewProps.isReadOnly = false;
+      void this.#doConversation(this.#currentAgent.runFromHistory());
+    }
   }
 
   #onHistoryClicked(event: Event): void {
@@ -652,6 +651,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     const contextMenu = new UI.ContextMenu.ContextMenu(event, {
       x: boundingRect.left,
       y: boundingRect.bottom,
+      useSoftMenu: true,
     });
 
     for (const agent of [...this.#agents].reverse()) {
@@ -693,20 +693,24 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.#currentAgent = undefined;
     this.#viewProps.messages = [];
     this.#viewProps.agentType = undefined;
-    this.doUpdate();
+    this.#runAbortController.abort();
+    void AiHistoryStorage.instance().deleteAll();
+    void this.doUpdate();
   }
 
   #onDeleteClicked(): void {
     if (this.#currentAgent) {
       this.#agents.delete(this.#currentAgent);
+      void AiHistoryStorage.instance().deleteHistoryEntry(this.#currentAgent.id);
       this.#currentAgent = undefined;
+      this.#cancel();
     }
 
     this.#viewProps.messages = [];
 
     this.#selectDefaultAgentIfNeeded();
     this.#onContextSelectionChanged();
-    this.doUpdate();
+    void this.doUpdate();
     UI.ARIAUtils.alert(i18nString(UIStrings.chatDeleted));
   }
 
@@ -723,44 +727,56 @@ export class FreestylerPanel extends UI.Panel.Panel {
     await this.#doConversation(agent.runFromHistory());
   }
 
-  #newChat(): void {
+  #handleNewChatRequest(): void {
     this.#viewProps.messages = [];
     this.#viewProps.isLoading = false;
     this.#currentAgent = undefined;
     this.#cancel();
 
     this.#selectDefaultAgentIfNeeded();
-    this.doUpdate();
+    void this.doUpdate();
     UI.ARIAUtils.alert(i18nString(UIStrings.newChatCreated));
   }
 
+  #handleCrossOriginChatCancellation(): void {
+    if (this.#previousSameOriginContext) {
+      this.#onContextSelectionChanged(this.#previousSameOriginContext);
+    }
+  }
+
   #runAbortController = new AbortController();
   #cancel(): void {
     this.#runAbortController.abort();
     this.#viewProps.isLoading = false;
-    this.doUpdate();
+    void this.doUpdate();
   }
 
-  #onContextSelectionChanged(): void {
+  #onContextSelectionChanged(contextToRestore?: ConversationContext<unknown>): void {
     if (!this.#currentAgent) {
       this.#viewProps.blockedByCrossOrigin = false;
-      this.doUpdate();
+      void this.doUpdate();
       return;
     }
-    const currentContext = this.#getConversationContext();
+    const currentContext = contextToRestore ?? this.#getConversationContext();
     this.#viewProps.selectedContext = currentContext;
     if (!currentContext) {
       this.#viewProps.blockedByCrossOrigin = false;
       this.#viewProps.requiresNewConversation = false;
-      this.doUpdate();
+      void this.doUpdate();
       return;
     }
     this.#viewProps.blockedByCrossOrigin = !currentContext.isOriginAllowed(this.#currentAgent.origin);
+    if (!this.#viewProps.blockedByCrossOrigin) {
+      this.#previousSameOriginContext = currentContext;
+    }
+    if (this.#viewProps.blockedByCrossOrigin && this.#previousSameOriginContext) {
+      this.#viewProps.onCancelCrossOriginChat = this.#handleCrossOriginChatCancellation.bind(this);
+    }
     this.#viewProps.isReadOnly = this.#currentAgent.isHistoryEntry;
     this.#viewProps.requiresNewConversation = this.#currentAgent.type === AgentType.DRJONES_PERFORMANCE &&
         Boolean(this.#currentAgent.context) && this.#currentAgent.context !== currentContext;
     this.#viewProps.stripLinks = this.#viewProps.agentType === AgentType.DRJONES_PERFORMANCE;
-    this.doUpdate();
+    void this.doUpdate();
   }
 
   #getConversationContext(): ConversationContext<unknown>|null {
@@ -813,6 +829,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       steps: [],
     };
     let step: Step = {isLoading: true};
+    this.#viewProps.isLoading = true;
     for await (const data of generator) {
       step.sideEffect = undefined;
       switch (data.type) {
@@ -821,7 +838,6 @@ export class FreestylerPanel extends UI.Panel.Panel {
             entity: ChatMessageEntity.USER,
             text: data.query,
           });
-          this.#viewProps.isLoading = true;
           systemMessage = {
             entity: ChatMessageEntity.MODEL,
             steps: [],
@@ -891,13 +907,11 @@ export class FreestylerPanel extends UI.Panel.Panel {
             systemMessage.steps.pop();
           }
           step.isLoading = false;
-          this.#viewProps.isLoading = false;
           break;
         }
         case ResponseType.ERROR: {
           systemMessage.error = data.error;
           systemMessage.rpcId = undefined;
-          this.#viewProps.isLoading = false;
           const lastStep = systemMessage.steps.at(-1);
           if (lastStep) {
             // Mark the last step as cancelled to make the UI feel better.
@@ -911,9 +925,20 @@ export class FreestylerPanel extends UI.Panel.Panel {
         }
       }
 
-      this.doUpdate();
-      this.#viewOutput.freestylerChatUi?.scrollToLastMessage();
+      void this.doUpdate();
+
+      // This handles scrolling to the bottom for live conversations when:
+      // * User submits the query & the context step is shown.
+      // * There is a side effect dialog  shown.
+      if (!this.#viewProps.isReadOnly &&
+          (data.type === ResponseType.CONTEXT || data.type === ResponseType.SIDE_EFFECT)) {
+        this.#viewOutput.freestylerChatUi?.scrollToBottom();
+      }
     }
+
+    this.#viewProps.isLoading = false;
+    this.#viewOutput.freestylerChatUi?.finishTextAnimations();
+    void this.doUpdate();
   }
 }
 

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

@@ -21,7 +21,7 @@ import {AgentType, type ContextDetail, type ConversationContext, ErrorType} from
 import freestylerChatUiStyles from './freestylerChatUi.css.js';
 import type {UserActionRowProps} from './UserActionRow.js';
 
-const {html, Directives: {ifDefined}} = LitHtml;
+const {html, Directives: {ifDefined, ref}} = LitHtml;
 
 const UIStrings = {
   /**
@@ -222,6 +222,8 @@ const str_ = i18n.i18n.registerUIStrings('panels/freestyler/components/Freestyle
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
+const SCROLL_ROUNDING_OFFSET = 1;
+
 export interface Step {
   isLoading: boolean;
   thought?: string;
@@ -269,6 +271,7 @@ export interface Props {
   onCancelClick: () => void;
   onContextClick: () => void | Promise<void>;
   onNewConversation: () => void;
+  onCancelCrossOriginChat?: () => void;
   inspectElementToggled: boolean;
   state: State;
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
@@ -339,6 +342,20 @@ export class FreestylerChatUi extends HTMLElement {
   #markdownRenderer = new MarkdownRendererWithCodeBlock();
   #scrollTop?: number;
   #props: Props;
+  #messagesContainerElement?: Element;
+  #mainElementRef?: LitHtml.Directives.Ref<Element> = LitHtml.Directives.createRef();
+  #lastAnswerMarkdownView?: MarkdownView.MarkdownView.MarkdownView;
+  #messagesContainerResizeObserver = new ResizeObserver(() => this.#handleMessagesContainerResize());
+  /**
+   * Indicates whether the chat scroll position should be pinned to the bottom.
+   *
+   * This is true when:
+   *   - The scroll is at the very bottom, allowing new messages to push the scroll down automatically.
+   *   - The panel is initially rendered and the user hasn't scrolled yet.
+   *
+   * It is set to false when the user scrolls up to view previous messages.
+   */
+  #pinScrollToBottom = true;
 
   constructor(props: Props) {
     super();
@@ -354,6 +371,14 @@ export class FreestylerChatUi extends HTMLElement {
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [freestylerChatUiStyles];
     this.#render();
+
+    if (this.#messagesContainerElement) {
+      this.#messagesContainerResizeObserver.observe(this.#messagesContainerElement);
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.#messagesContainerResizeObserver.disconnect();
   }
 
   focusTextInput(): void {
@@ -370,20 +395,41 @@ export class FreestylerChatUi extends HTMLElement {
       return;
     }
 
-    const scrollContainer = this.#shadow.querySelector('.chat-ui main') as HTMLElement;
-    if (!scrollContainer) {
+    if (!this.#mainElementRef?.value) {
+      return;
+    }
+
+    this.#mainElementRef.value.scrollTop = this.#scrollTop;
+  }
+
+  finishTextAnimations(): void {
+    if (!this.#lastAnswerMarkdownView) {
+      return;
+    }
+
+    this.#lastAnswerMarkdownView.finishAnimations();
+  }
+
+  scrollToBottom(): void {
+    if (!this.#mainElementRef?.value) {
       return;
     }
 
-    scrollContainer.scrollTop = this.#scrollTop;
+    this.#mainElementRef.value.scrollTop = this.#mainElementRef.value.scrollHeight;
   }
 
-  scrollToLastMessage(): void {
-    const message = this.#shadow.querySelector('.chat-message:last-child') as HTMLDivElement;
-    if (!message) {
+  #handleMessagesContainerResize(): void {
+    if (!this.#pinScrollToBottom) {
       return;
     }
-    message.scrollIntoViewIfNeeded();
+
+    if (!this.#mainElementRef?.value) {
+      return;
+    }
+
+    if (this.#pinScrollToBottom) {
+      this.#mainElementRef.value.scrollTop = this.#mainElementRef.value.scrollHeight;
+    }
   }
 
   #setInputText(text: string): void {
@@ -428,12 +474,36 @@ export class FreestylerChatUi extends HTMLElement {
     }
   };
 
+  #handleMessageContainerRef(el: Element|undefined): void {
+    this.#messagesContainerElement = el;
+
+    if (el) {
+      this.#messagesContainerResizeObserver.observe(el);
+    } else {
+      this.#pinScrollToBottom = true;
+      this.#messagesContainerResizeObserver.disconnect();
+    }
+  }
+
+  #handleLastAnswerMarkdownViewRef(el: Element|undefined): void {
+    if (!el) {
+      this.#lastAnswerMarkdownView = undefined;
+      return;
+    }
+
+    if (el instanceof MarkdownView.MarkdownView.MarkdownView) {
+      this.#lastAnswerMarkdownView = el;
+    }
+  }
+
   #handleScroll = (ev: Event): void => {
     if (!ev.target || !(ev.target instanceof HTMLElement)) {
       return;
     }
 
     this.#scrollTop = ev.target.scrollTop;
+    this.#pinScrollToBottom =
+        ev.target.scrollTop + ev.target.clientHeight + SCROLL_ROUNDING_OFFSET > ev.target.scrollHeight;
   };
 
   #handleSubmit = (ev: SubmitEvent): void => {
@@ -497,7 +567,10 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format on
   }
 
-  #renderTextAsMarkdown(text: string): LitHtml.TemplateResult {
+  #renderTextAsMarkdown(text: string, {animate, ref: refFn}: {
+    animate?: boolean,
+    ref?: (element?: Element) => void,
+  } = {}): LitHtml.TemplateResult {
     let tokens = [];
     try {
       tokens = Marked.Marked.lexer(text);
@@ -517,7 +590,8 @@ export class FreestylerChatUi extends HTMLElement {
 
     // clang-format off
     return html`<devtools-markdown-view
-      .data=${{tokens, renderer: this.#markdownRenderer} as MarkdownView.MarkdownView.MarkdownViewData}>
+      .data=${{tokens, renderer: this.#markdownRenderer, animationEnabled: animate} as MarkdownView.MarkdownView.MarkdownViewData}
+      ${refFn ? ref(refFn) : LitHtml.nothing}>
     </devtools-markdown-view>`;
     // clang-format on
   }
@@ -766,7 +840,7 @@ export class FreestylerChatUi extends HTMLElement {
           },
         )}
         ${message.answer
-          ? html`<p>${this.#renderTextAsMarkdown(message.answer)}</p>`
+          ? html`<p>${this.#renderTextAsMarkdown(message.answer, { animate: !this.#props.isReadOnly, ref: this.#handleLastAnswerMarkdownViewRef })}</p>`
           : LitHtml.nothing}
         ${this.#renderError(message)}
         <div class="actions">
@@ -836,7 +910,7 @@ export class FreestylerChatUi extends HTMLElement {
   #renderMessages = (): LitHtml.TemplateResult => {
     // clang-format off
     return html`
-      <div class="messages-container">
+      <div class="messages-container" ${ref(this.#handleMessageContainerRef)}>
         ${this.#props.messages.map((message, _, array) =>
           this.#renderChatMessage(message, {
             isLast: array.at(-1) === message,
@@ -885,6 +959,10 @@ export class FreestylerChatUi extends HTMLElement {
     this.#props.onNewConversation();
   }
 
+  #onCancelCrossOriginChat(): void {
+    this.#props.onCancelCrossOriginChat?.();
+  }
+
   #getEmptyStateSuggestions = (): string[] => {
     if (!this.#props.agentType) {
       return [];
@@ -965,7 +1043,7 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format on
   }
 
-  #renderChatInputButton(): LitHtml.TemplateResult {
+  #renderChatInputButtons(): LitHtml.TemplateResult {
     if (this.#props.isLoading) {
       // clang-format off
       return html`<devtools-button
@@ -986,19 +1064,32 @@ export class FreestylerChatUi extends HTMLElement {
     }
     if (this.#props.blockedByCrossOrigin || this.#props.requiresNewConversation) {
       // clang-format off
-      return html`<devtools-button
-        class="chat-input-button"
-        aria-label=${lockedString(UIStringsNotTranslate.startNewChat)}
-        @click=${this.#onNewConversation}
-        .data=${
-          {
-            variant: Buttons.Button.Variant.PRIMARY,
-            size: Buttons.Button.Size.REGULAR,
-            title: lockedString(UIStringsNotTranslate.startNewChat),
-            jslogContext: 'start-new-chat',
-          } as Buttons.Button.ButtonData
-        }
-      >${lockedString(UIStringsNotTranslate.startNewChat)}</devtools-button>`;
+      return html`
+        ${this.#props.blockedByCrossOrigin && Boolean(this.#props.onCancelCrossOriginChat) ? html`<devtools-button
+          class="chat-cancel-context-button"
+          @click=${this.#onCancelCrossOriginChat}
+          .data=${
+            {
+              variant: Buttons.Button.Variant.TEXT,
+              size: Buttons.Button.Size.REGULAR,
+              jslogContext: 'cancel-cross-origin-context-chat',
+            } as Buttons.Button.ButtonData
+          }
+        >${lockedString(UIStringsNotTranslate.cancelButtonTitle)}</devtools-button>` : LitHtml.nothing}
+        <devtools-button
+          class="chat-input-button"
+          aria-label=${lockedString(UIStringsNotTranslate.startNewChat)}
+          @click=${this.#onNewConversation}
+          .data=${
+            {
+              variant: Buttons.Button.Variant.PRIMARY,
+              size: Buttons.Button.Size.REGULAR,
+              title: lockedString(UIStringsNotTranslate.startNewChat),
+              jslogContext: 'start-new-chat',
+            } as Buttons.Button.ButtonData
+          }
+        >${lockedString(UIStringsNotTranslate.startNewChat)}</devtools-button>
+      `;
       // clang-format on
     }
     // clang-format off
@@ -1024,6 +1115,12 @@ export class FreestylerChatUi extends HTMLElement {
       return LitHtml.nothing;
     }
 
+    const cls = LitHtml.Directives.classMap({
+      'chat-input': true,
+      'one-big-button': Boolean(this.#props.requiresNewConversation),
+      'two-big-buttons': this.#props.blockedByCrossOrigin,
+    });
+
     // clang-format off
     return html`
     <form class="input-form" @submit=${this.#handleSubmit}>
@@ -1035,14 +1132,16 @@ export class FreestylerChatUi extends HTMLElement {
         </div>
       ` : LitHtml.nothing}
       <div class="chat-input-container">
-        <textarea class="chat-input"
+        <textarea class=${cls}
           .disabled=${this.#isTextInputDisabled()}
           wrap="hard"
           @keydown=${this.#handleTextAreaKeyDown}
           placeholder=${this.#getInputPlaceholderString()}
           jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}
         ></textarea>
-        ${this.#renderChatInputButton()}
+        <div class="chat-input-buttons">
+          ${this.#renderChatInputButtons()}
+        </div>
       </div>
     </form>`;
     // clang-format on
@@ -1226,7 +1325,7 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format off
     LitHtml.render(html`
       <div class="chat-ui">
-        <main @scroll=${this.#handleScroll}>
+        <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
           ${this.#renderMainContents()}
           ${this.#props.isReadOnly ?
               this.#renderReadOnlySection() :

package/front_end/panels/freestyler/components/UserActionRow.ts

@@ -166,6 +166,7 @@ export class UserActionRow extends HTMLElement {
     }
     this.#props.onFeedbackSubmit(this.#currentRating, input.value);
     this.#isShowingFeedbackForm = false;
+    this.#isSubmitButtonDisabled = true;
     this.#render();
   };