chrome-devtools-frontend 1.0.1547147 → 1.0.1548870

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -365,10 +365,10 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
       <devtools-toolbar class="freestyler-right-toolbar" role="presentation">
         <x-link
           class="toolbar-feedback-link devtools-link"
-          title=${UIStrings.sendFeedback}
+          title=${i18nString(UIStrings.sendFeedback)}
           href=${AI_ASSISTANCE_SEND_FEEDBACK}
           jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('freestyler.send-feedback')}
-        >${UIStrings.sendFeedback}</x-link>
+        >${i18nString(UIStrings.sendFeedback)}</x-link>
         <div class="toolbar-divider"></div>
         <devtools-button
           title=${i18nString(UIStrings.help)}
@@ -461,26 +461,6 @@ function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentF
   return new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(focus);
 }
 
-function agentToConversationType(agent: AiAssistanceModel.AiAgent.AiAgent<unknown>):
-    AiAssistanceModel.AiHistoryStorage.ConversationType {
-  if (agent instanceof AiAssistanceModel.StylingAgent.StylingAgent) {
-    return AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
-  }
-
-  if (agent instanceof AiAssistanceModel.NetworkAgent.NetworkAgent) {
-    return AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK;
-  }
-  if (agent instanceof AiAssistanceModel.FileAgent.FileAgent) {
-    return AiAssistanceModel.AiHistoryStorage.ConversationType.FILE;
-  }
-
-  if (agent instanceof AiAssistanceModel.PerformanceAgent.PerformanceAgent) {
-    return AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE;
-  }
-
-  throw new Error('Provided agent does not have a corresponding conversation type');
-}
-
 let panelInstance: AiAssistancePanel;
 export class AiAssistancePanel extends UI.Panel.Panel {
   static panelName = 'freestyler';
@@ -494,7 +474,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #changeManager = new AiAssistanceModel.ChangeManager.ChangeManager();
   #mutex = new Common.Mutex.Mutex();
 
-  #conversationAgent?: AiAssistanceModel.AiAgent.AiAgent<unknown>;
   #conversation?: AiAssistanceModel.AiConversation.AiConversation;
 
   #selectedFile: AiAssistanceModel.FileAgent.FileContext|null = null;
@@ -504,10 +483,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   // Messages displayed in the `ChatView` component.
   #messages: ChatMessage[] = [];
-  // Indicates whether the new conversation context is blocked due to cross-origin restrictions.
-  // This happens when the conversation's context has a different
-  // origin than the selected context.
-  #blockedByCrossOrigin = false;
+
   // Whether the UI should show loading or not.
   #isLoading = false;
   // Selected conversation context. The reason we keep this as a
@@ -527,7 +503,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   // Used to disable send button when there is not text input.
   #isTextInputEmpty = true;
   #timelinePanelInstance: TimelinePanel.TimelinePanel.TimelinePanel|null = null;
-  #conversationHandler: AiAssistanceModel.ConversationHandler.ConversationHandler;
   #runAbortController = new AbortController();
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
@@ -545,8 +520,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       accountImage: syncInfo.accountImage,
       accountFullName: syncInfo.accountFullName,
     };
-    this.#conversationHandler = AiAssistanceModel.ConversationHandler.ConversationHandler.instance(
-        {aidaClient: this.#aidaClient, aidaAvailability});
 
     if (UI.ActionRegistry.ActionRegistry.instance().hasAction('elements.toggle-element-search')) {
       this.#toggleSearchElementAction =
@@ -569,7 +542,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       };
     }
 
-    if (this.#conversation?.type) {
+    if (this.#conversation) {
       const emptyStateSuggestions = await getEmptyStateSuggestions(this.#selectedContext, this.#conversation);
       const markdownRenderer = getMarkdownRenderer(this.#selectedContext, this.#conversation);
       return {
@@ -683,7 +656,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const isSourcesPanelVisible = viewManager.isViewVisible('sources');
     const isPerformancePanelVisible = viewManager.isViewVisible('timeline');
 
-    let targetConversationType: AiAssistanceModel.AiHistoryStorage.ConversationType|undefined = undefined;
+    let targetConversationType: AiAssistanceModel.AiHistoryStorage.ConversationType|undefined;
     if (isElementsPanelVisible && hostConfig.devToolsFreestyler?.enabled) {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
     } else if (isNetworkPanelVisible && hostConfig.devToolsAiAssistanceNetworkAgent?.enabled) {
@@ -703,7 +676,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     // If there already is an agent and if it is not empty,
     // we don't automatically change the agent. In addition to this,
     // we don't change the current agent when there is a message in flight.
-    if ((this.#conversationAgent && this.#conversation && !this.#conversation.isEmpty) || this.#isLoading) {
+    if ((this.#conversation && !this.#conversation.isEmpty) || this.#isLoading) {
       return;
     }
     const targetConversationType = this.#getDefaultConversationType();
@@ -712,59 +685,34 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       // So we can just reuse it
       return;
     }
-    const agent = targetConversationType ?
-        this.#conversationHandler.createAgent(targetConversationType, this.#changeManager) :
+    const conversation = targetConversationType ?
+        new AiAssistanceModel.AiConversation.AiConversation(
+            targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager) :
         undefined;
-    this.#updateConversationState({agent});
+    this.#updateConversationState(conversation);
   }
 
-  #updateConversationState(opts?: {
-    agent?: AiAssistanceModel.AiAgent.AiAgent<unknown>,
-    conversation?: AiAssistanceModel.AiConversation.AiConversation,
-  }): void {
-    if (this.#conversationAgent !== opts?.agent) {
+  #updateConversationState(
+      conversation?: AiAssistanceModel.AiConversation.AiConversation,
+      ): void {
+    if (this.#conversation !== conversation) {
       // Cancel any previous conversation
       this.#cancel();
       this.#messages = [];
       this.#isLoading = false;
       this.#conversation?.archiveConversation();
-      this.#conversationAgent = opts?.agent;
-
-      // If we get a new agent we need to
-      // create a new conversation along side it
-      if (opts?.agent) {
-        this.#conversation = new AiAssistanceModel.AiConversation.AiConversation(
-            agentToConversationType(opts.agent),
-            [],
-            opts.agent.id,
-            false,
-        );
-      }
-    }
 
-    if (!opts?.agent) {
-      this.#conversation = undefined;
-      // We need to run doConversation separately
-      this.#messages = [];
-      // If a no new agent is provided
-      // but conversation is
-      // update with history conversation
-      if (opts?.conversation) {
-        this.#conversation = opts.conversation;
+      if (!conversation) {
+        const conversationType = this.#getDefaultConversationType();
+        if (conversationType) {
+          conversation = new AiAssistanceModel.AiConversation.AiConversation(
+              conversationType, [], undefined, false, this.#aidaClient, this.#changeManager);
+        }
       }
-    }
 
-    if (!this.#conversationAgent && !this.#conversation) {
-      const conversationType = this.#getDefaultConversationType();
-      if (conversationType) {
-        const agent = this.#conversationHandler.createAgent(conversationType, this.#changeManager);
-        this.#updateConversationState({agent});
-        return;
-      }
+      this.#conversation = conversation;
     }
 
-    this.#onContextSelectionChanged();
-
     this.requestUpdate();
   }
 
@@ -780,7 +728,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#selectedPerformanceTrace =
         createPerformanceTraceContext(UI.Context.Context.instance().flavor(AiAssistanceModel.AIContext.AgentFocus));
     this.#selectedFile = createFileContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UISourceCode));
-    this.#updateConversationState({agent: this.#conversationAgent});
+    this.#updateConversationState(this.#conversation);
 
     this.#aiAssistanceEnabledSetting?.addChangeListener(this.requestUpdate, this);
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
@@ -879,7 +827,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     this.#selectedElement = createNodeContext(selectedElementFilter(ev.data));
-    this.#updateConversationState({agent: this.#conversationAgent});
+    this.#updateConversationState(this.#conversation);
   };
 
   #handleDOMNodeAttrChange =
@@ -903,7 +851,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         } else {
           this.#selectedRequest = null;
         }
-        this.#updateConversationState({agent: this.#conversationAgent});
+        this.#updateConversationState(this.#conversation);
       };
 
   #handlePerformanceTraceFlavorChange =
@@ -915,20 +863,18 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         this.#selectedPerformanceTrace =
             Boolean(ev.data) ? new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(ev.data) : null;
 
-        this.#updateConversationState({agent: this.#conversationAgent});
+        this.#updateConversationState(this.#conversation);
       };
 
   #handleUISourceCodeFlavorChange =
       (ev: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void => {
         const newFile = ev.data;
-        if (!newFile) {
-          return;
-        }
-        if (this.#selectedFile?.getItem() === newFile) {
+
+        if (!newFile || this.#selectedFile?.getItem() === newFile) {
           return;
         }
         this.#selectedFile = new AiAssistanceModel.FileAgent.FileContext(ev.data);
-        this.#updateConversationState({agent: this.#conversationAgent});
+        this.#updateConversationState(this.#conversation);
       };
 
   #onPrimaryPageChanged(): void {
@@ -941,11 +887,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   #getChangeSummary(): string|undefined {
-    if (!isAiAssistancePatchingEnabled() || !this.#conversationAgent || this.#conversation?.isReadOnly) {
+    if (!isAiAssistancePatchingEnabled() || !this.#conversation || this.#conversation?.isReadOnly) {
       return;
     }
 
-    return this.#changeManager.formatChangesForPatching(this.#conversationAgent.id, /* includeSourceLocation= */ true);
+    return this.#changeManager.formatChangesForPatching(this.#conversation.id, /* includeSourceLocation= */ true);
   }
 
   #getToolbarInput(): ToolbarViewInput {
@@ -1185,12 +1131,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
-    let agent = this.#conversationAgent;
-    if (!this.#conversation || !this.#conversationAgent || this.#conversation.type !== targetConversationType ||
-        this.#conversation?.isEmpty) {
-      agent = this.#conversationHandler.createAgent(targetConversationType, this.#changeManager);
+    let conversation = this.#conversation;
+    if (!this.#conversation || this.#conversation.type !== targetConversationType || this.#conversation.isEmpty) {
+      conversation = new AiAssistanceModel.AiConversation.AiConversation(
+          targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager);
     }
-    this.#updateConversationState({agent});
+    this.#updateConversationState(conversation);
     const predefinedPrompt = opts?.['prompt'];
     if (predefinedPrompt && typeof predefinedPrompt === 'string') {
       if (!this.#canExecuteQuery()) {
@@ -1214,17 +1160,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         serializedConversation =>
             AiAssistanceModel.AiConversation.AiConversation.fromSerializedConversation(serializedConversation));
     for (const conversation of historicalConversations.reverse()) {
-      if (conversation.isEmpty) {
-        continue;
-      }
-      const title = conversation.title;
-      if (!title) {
+      if (conversation.isEmpty || !conversation.title) {
         continue;
       }
 
-      contextMenu.defaultSection().appendCheckboxItem(title, () => {
+      contextMenu.defaultSection().appendCheckboxItem(conversation.title, () => {
         void this.#openHistoricConversation(conversation);
-      }, {checked: (this.#conversation === conversation), jslogContext: 'freestyler.history-item'});
+      }, {checked: (this.#conversation?.id === conversation.id), jslogContext: 'freestyler.history-item'});
     }
 
     const historyEmpty = contextMenu.defaultSection().items.length === 0;
@@ -1282,11 +1224,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   async #openHistoricConversation(conversation: AiAssistanceModel.AiConversation.AiConversation): Promise<void> {
-    if (this.#conversation === conversation) {
+    if (this.#conversation?.id === conversation.id) {
       return;
     }
 
-    this.#updateConversationState({conversation});
+    this.#updateConversationState(conversation);
     await this.#doConversation(conversation.history);
   }
 
@@ -1355,10 +1297,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#imageInput = {isLoading: true};
       this.requestUpdate();
     }, SHOW_LOADING_STATE_TIMEOUT);
-    const reader = new FileReader();
-    let dataUrl: string|undefined;
     try {
-      dataUrl = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      const dataUrl = await new Promise<string>((resolve, reject) => {
         reader.onload = () => {
           if (typeof reader.result === 'string') {
             resolve(reader.result);
@@ -1368,31 +1309,22 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         };
         reader.readAsDataURL(file);
       });
+      const commaIndex = dataUrl.indexOf(',');
+      const bytes = dataUrl.substring(commaIndex + 1);
+      this.#imageInput = {
+        isLoading: false,
+        data: bytes,
+        mimeType: file.type,
+        inputType: AiAssistanceModel.AiAgent.MultimodalInputType.UPLOADED_IMAGE
+      };
     } catch {
-      clearTimeout(showLoadingTimeout);
       this.#imageInput = undefined;
-      this.requestUpdate();
-      void this.updateComplete.then(() => {
-        this.#viewOutput.chatView?.focusTextInput();
-      });
       Snackbars.Snackbar.Snackbar.show({
         message: lockedString(UIStringsNotTranslate.uploadImageFailureMessage),
       });
-      return;
     }
 
     clearTimeout(showLoadingTimeout);
-    if (!dataUrl) {
-      return;
-    }
-    const commaIndex = dataUrl.indexOf(',');
-    const bytes = dataUrl.substring(commaIndex + 1);
-    this.#imageInput = {
-      isLoading: false,
-      data: bytes,
-      mimeType: file.type,
-      inputType: AiAssistanceModel.AiAgent.MultimodalInputType.UPLOADED_IMAGE
-    };
     this.requestUpdate();
     void this.updateComplete.then(() => {
       this.#viewOutput.chatView?.focusTextInput();
@@ -1404,21 +1336,18 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#runAbortController = new AbortController();
   }
 
-  #onContextSelectionChanged(): void {
-    if (!this.#conversationAgent) {
-      this.#blockedByCrossOrigin = false;
-      return;
+  // Indicates whether the new conversation context is blocked due to cross-origin restrictions.
+  // This happens when the conversation's context has a different
+  // origin than the selected context.
+  get #blockedByCrossOrigin(): boolean {
+    if (!this.#conversation) {
+      return false;
     }
     this.#selectedContext = this.#getConversationContext(this.#conversation);
     if (!this.#selectedContext) {
-      this.#blockedByCrossOrigin = false;
-
-      // Clear out any text the user has entered into the input but never
-      // submitted now they have no active context
-      this.#viewOutput.chatView?.clearTextInput();
-      return;
+      return false;
     }
-    this.#blockedByCrossOrigin = !this.#selectedContext.isOriginAllowed(this.#conversationAgent.origin);
+    return !this.#selectedContext.isOriginAllowed(this.#conversation.origin);
   }
 
   #getConversationContext(conversation?: AiAssistanceModel.AiConversation.AiConversation):
@@ -1445,9 +1374,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   async #startConversation(
-      text: string, imageInput?: Host.AidaClient.Part,
-      multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType): Promise<void> {
-    if (!this.#conversationAgent) {
+      text: string,
+      imageInput?: Host.AidaClient.Part,
+      multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType,
+      ): Promise<void> {
+    if (!this.#conversation) {
       return;
     }
     // Cancel any previous in-flight conversation.
@@ -1455,34 +1386,31 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const signal = this.#runAbortController.signal;
     const context = this.#getConversationContext(this.#conversation);
     // If a different context is provided, it must be from the same origin.
-    if (context && !context.isOriginAllowed(this.#conversationAgent.origin)) {
+    if (context && !context.isOriginAllowed(this.#conversation.origin)) {
       // This error should not be reached. If it happens, some
       // invariants do not hold anymore.
       throw new Error('cross-origin context data should not be included');
     }
-    if (this.#conversation?.isEmpty) {
+    if (this.#conversation.isEmpty) {
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.STARTED_AI_CONVERSATION);
     }
-    const image = isAiAssistanceMultimodalInputEnabled() ? imageInput : undefined;
-    const imageId = image ? crypto.randomUUID() : undefined;
-    const multimodalInput = image && imageId && multimodalInputType ? {
-      input: image,
-      id: imageId,
+    const multimodalInput = isAiAssistanceMultimodalInputEnabled() && imageInput && multimodalInputType ? {
+      input: imageInput,
+      id: crypto.randomUUID(),
       type: multimodalInputType,
     } :
-                                                                      undefined;
-    if (this.#conversation) {
-      void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
-    }
+                                                                                                          undefined;
 
-    const generator = this.#conversationAgent.run(
-        text, {
-          signal,
-          selected: context,
-        },
-        multimodalInput);
-    const generatorWithHistory = this.#conversationHandler.handleConversationWithHistory(generator, this.#conversation);
-    await this.#doConversation(generatorWithHistory);
+    void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
+
+    await this.#doConversation(
+        this.#conversation.run(
+            text, {
+              signal,
+              selected: context,
+            },
+            multimodalInput),
+    );
   }
 
   async #doConversation(
@@ -1655,8 +1583,7 @@ export function getResponseMarkdown(message: ModelChatMessage): string {
       contentParts.push(`### ${step.title}`);
     }
     if (step.contextDetails) {
-      contentParts.push(
-          AiAssistanceModel.AiConversation.AiConversation.generateContextDetailsMarkdown(step.contextDetails));
+      contentParts.push(AiAssistanceModel.AiConversation.generateContextDetailsMarkdown(step.contextDetails));
     }
     if (step.thought) {
       contentParts.push(step.thought);

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

@@ -303,14 +303,6 @@ export class ChatView extends HTMLElement {
     this.#messagesContainerResizeObserver.disconnect();
   }
 
-  clearTextInput(): void {
-    const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
-    if (!textArea) {
-      return;
-    }
-    textArea.value = '';
-  }
-
   focusTextInput(): void {
     const textArea = this.#shadow.querySelector('.chat-input') as HTMLTextAreaElement;
     if (!textArea) {
@@ -954,6 +946,9 @@ function renderSelection({
   onInspectElementClick: () => void,
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType,
 }): Lit.LitTemplate {
+  if (!selectedContext) {
+    return Lit.nothing;
+  }
   // TODO: currently the picker behavior is SDKNode specific.
   const hasPickerBehavior = conversationType === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING;
 
@@ -964,10 +959,6 @@ function renderSelection({
     disabled: isTextInputDisabled,
   });
 
-  if (!selectedContext && !hasPickerBehavior) {
-    return Lit.nothing;
-  }
-
   const handleKeyDown = (ev: KeyboardEvent): void => {
     if (ev.key === 'Enter' || ev.key === ' ') {
       void onContextClick();
@@ -1307,8 +1298,10 @@ function renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin, tooltipI
   tooltipId: string,
   disclaimerText: string,
 }): Lit.LitTemplate {
-  const classes =
-      Lit.Directives.classMap({'chat-input-disclaimer': true, 'hide-divider': !isLoading && blockedByCrossOrigin});
+  const classes = Lit.Directives.classMap({
+    'chat-input-disclaimer': true,
+    'hide-divider': !isLoading && blockedByCrossOrigin,
+  });
   // clang-format off
   return html`
     <p class=${classes}>
@@ -1323,7 +1316,7 @@ function renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin, tooltipI
           void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
         }}
       >${lockedString('Relevant data')}</button>&nbsp;${lockedString('is sent to Google')}
-      ${renderDisclamerTooltip(tooltipId, disclaimerText)}
+      ${renderDisclaimerTooltip(tooltipId, disclaimerText)}
     </p>
   `;
   // clang-format on
@@ -1376,50 +1369,80 @@ function renderChatInput({
   onRemoveImageInput?: () => void,
   onImageUpload?: (ev: Event) => void,
 }): Lit.LitTemplate {
-  const shouldShowMultiLine = selectedContext;
   const chatInputContainerCls = Lit.Directives.classMap({
     'chat-input-container': true,
-    'single-line-layout': !shouldShowMultiLine,
+    'single-line-layout': !selectedContext,
     disabled: isTextInputDisabled,
   });
 
   // clang-format off
-  return html`
-  <form class="input-form" @submit=${onSubmit}>
+  return html` <form class="input-form" @submit=${onSubmit}>
     <div class=${chatInputContainerCls}>
-      ${renderImageInput(
-        {multimodalInputEnabled, imageInput, isTextInputDisabled, onRemoveImageInput}
-      )}
-      <textarea class="chat-input"
+      ${renderImageInput({
+        multimodalInputEnabled,
+        imageInput,
+        isTextInputDisabled,
+        onRemoveImageInput,
+      })}
+      <textarea
+        class="chat-input"
         .disabled=${isTextInputDisabled}
         wrap="hard"
         maxlength="10000"
         @keydown=${onTextAreaKeyDown}
-        @input=${(event: KeyboardEvent) => onTextInputChange((event.target as HTMLInputElement).value)}
+        @input=${(event: KeyboardEvent) =>
+          onTextInputChange((event.target as HTMLInputElement).value)}
         placeholder=${inputPlaceholder}
-        jslog=${VisualLogging.textField('query').track({change: true, keydown: 'Enter'})}
+        jslog=${VisualLogging.textField('query').track({
+          change: true,
+          keydown: 'Enter',
+        })}
         aria-description=${i18nString(UIStrings.inputTextAriaDescription)}
+        ${ref(el => {
+          // If the elements is disabled reset the text to show
+          // the place holder
+          if (el && isTextInputDisabled) {
+            (el as HTMLInputElement).value = '';
+          }
+        })}
       ></textarea>
       <div class="chat-input-actions">
         <div class="chat-input-actions-left">
-          ${shouldShowMultiLine ? renderSelection({
+          ${renderSelection({
             selectedContext,
             inspectElementToggled,
             conversationType,
             isTextInputDisabled,
             onContextClick,
             onInspectElementClick,
-          }) : Lit.nothing}
+          })}
         </div>
         <div class="chat-input-actions-right">
           <div class="chat-input-disclaimer-container">
-            ${renderRelevantDataDisclaimer({ isLoading, blockedByCrossOrigin, tooltipId: RELEVANT_DATA_LINK_CHAT_ID, disclaimerText})}
+            ${renderRelevantDataDisclaimer({
+              isLoading,
+              blockedByCrossOrigin,
+              tooltipId: RELEVANT_DATA_LINK_CHAT_ID,
+              disclaimerText,
+            })}
           </div>
           ${renderMultimodalInputButtons({
-            multimodalInputEnabled, blockedByCrossOrigin, isTextInputDisabled, imageInput, uploadImageInputEnabled, onTakeScreenshot, onImageUpload
+            multimodalInputEnabled,
+            blockedByCrossOrigin,
+            isTextInputDisabled,
+            imageInput,
+            uploadImageInputEnabled,
+            onTakeScreenshot,
+            onImageUpload,
           })}
           ${renderChatInputButtons({
-            isLoading, blockedByCrossOrigin, isTextInputDisabled, isTextInputEmpty, imageInput, onCancel, onNewConversation
+            isLoading,
+            blockedByCrossOrigin,
+            isTextInputDisabled,
+            isTextInputEmpty,
+            imageInput,
+            onCancel,
+            onNewConversation,
           })}
         </div>
       </div>
@@ -1479,7 +1502,7 @@ function renderMainContents({
   return renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick});
 }
 
-function renderDisclamerTooltip(id: string, disclaimerText: string): Lit.TemplateResult {
+function renderDisclaimerTooltip(id: string, disclaimerText: string): Lit.TemplateResult {
   // clang-format off
   return html`
     <devtools-tooltip

package/front_end/panels/application/ExtensionStorageModel.ts

@@ -196,7 +196,7 @@ export class ExtensionStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
 
   #extensionIdForContext(context: SDK.RuntimeModel.ExecutionContext): string|undefined {
     const url = Common.ParsedURL.ParsedURL.fromString(context.origin);
-    return url && url.scheme === 'chrome-extension' ? url.host : undefined;
+    return url?.scheme === 'chrome-extension' ? url.host : undefined;
   }
 
   #executionContextDestroyed(context: SDK.RuntimeModel.ExecutionContext): void {