chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -27,7 +27,6 @@ import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
-import {ArtifactsViewer} from './components/ArtifactsViewer.js';
 import {
   type AnswerPart,
   ChatMessageEntity,
@@ -273,7 +272,7 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
     if (!context.external) {
       const focus = context.getItem();
       return new PerformanceAgentMarkdownRenderer(
-          focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus), focus.parsedTrace);
+          focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
     }
   } else if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE) {
     // Handle historical conversations (can't linkify anything).
@@ -290,8 +289,6 @@ interface ToolbarViewInput {
   onExportConversationClick: () => void;
   onHelpClick: () => void;
   onSettingsClick: () => void;
-  onArtifactsSidebarToggle: () => void;
-  artifactsSidebarVisible: boolean;
   isLoading: boolean;
   showChatActions: boolean;
   showActiveConversationActions: boolean;
@@ -384,13 +381,6 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
           .jslogContext=${'freestyler.settings'}
           .variant=${Buttons.Button.Variant.TOOLBAR}
           @click=${input.onSettingsClick}></devtools-button>
-        <!-- If the green experiment is enabled, render the artifacts sidebar toggle button -->
-        ${GreenDev.Prototypes.instance().isEnabled('artifactViewer') ? html`<devtools-button
-          title=${i18nString(UIStrings.settings)}
-          aria-label=${i18nString(UIStrings.settings)}
-          .iconName=${input.artifactsSidebarVisible ? 'left-panel-open' : 'left-panel-close'}
-          .variant=${Buttons.Button.Variant.TOOLBAR}
-          @click=${input.onArtifactsSidebarToggle}></devtools-button>` : Lit.nothing}
       </devtools-toolbar>
     </div>
   `;
@@ -428,40 +418,13 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
     }
   }
 
-  const panelWithToolbar = html`
-    ${toolbarView(input)}
-    <div class="ai-assistance-view-container">${renderState()}</div>`;
-
-  // If the green experiment is enabled, render the chat view inside
-  // a split view to also have an artifacts viewer sidebar.
-  if(GreenDev.Prototypes.instance().isEnabled('artifactViewer')) {
-    Lit.render(
-      html`
-        <devtools-split-view
-          direction="column"
-          sidebar-visibility=${input.artifactsSidebarVisible ? 'visible' : 'hidden'}
-          sidebar-position="second"
-          sidebar-initial-size="520"
-          style="width: 100%;">
-          <div slot="main" class="assistance-view-wrapper-with-sidebar">
-            ${panelWithToolbar}
-          </div>
-          <div slot="sidebar">
-            <div class="artifacts-toolbar-container" role="toolbar">
-              <div>Artifacts Viewer</div>
-            </div>
-            <devtools-widget
-              class="fill-panel"
-              .widgetConfig=${UI.Widget.widgetConfig(ArtifactsViewer)}
-            ></devtools-widget>
-          </div>
-        </devtools-split-view>
-      `,
-      target
-    );
-  } else {
-    Lit.render(panelWithToolbar, target);
-  }
+  Lit.render(
+    html`
+      ${toolbarView(input)}
+      <div class="ai-assistance-view-container">${renderState()}</div>
+    `,
+    target
+  );
   // clang-format on
 }
 
@@ -516,7 +479,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedElement: AiAssistanceModel.StylingAgent.NodeContext|null = null;
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
-  #isArtifactsSidebarOpen = false;
   // Messages displayed in the `ChatView` component.
   #messages: Message[] = [];
 
@@ -555,10 +517,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
     AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().addEventListener(
         AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
-    if (GreenDev.Prototypes.instance().isEnabled('artifactViewer')) {
-      AiAssistanceModel.ArtifactsManager.ArtifactsManager.instance().addEventListener(
-          AiAssistanceModel.ArtifactsManager.ArtifactAddedEvent.eventName, this.#onArtifactAdded.bind(this));
-    }
   }
 
   async #getPanelViewInput(): Promise<PanelViewInput> {
@@ -601,7 +559,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           uploadImageInputEnabled: isAiAssistanceMultimodalUploadInputEnabled() &&
               this.#conversation.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
           markdownRenderer,
-          isArtifactsSidebarOpen: this.#isArtifactsSidebarOpen,
           onTextSubmit: async (
               text: string, imageInput?: Host.AidaClient.Part,
               multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
@@ -803,13 +760,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
   }
 
-  #onArtifactAdded(): void {
-    if (AiAssistanceModel.ArtifactsManager.ArtifactsManager.instance().artifacts.length > 0) {
-      this.#isArtifactsSidebarOpen = true;
-      this.requestUpdate();
-    }
-  }
-
   override willHide(): void {
     super.willHide();
     this.#aiAssistanceEnabledSetting?.removeChangeListener(this.requestUpdate, this);
@@ -941,11 +891,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       onSettingsClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
       },
-      onArtifactsSidebarToggle: () => {
-        this.#isArtifactsSidebarOpen = !this.#isArtifactsSidebarOpen;
-        this.requestUpdate();
-      },
-      artifactsSidebarVisible: this.#isArtifactsSidebarOpen,
     };
   }
 

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -5,6 +5,7 @@
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/markdown_view/markdown_view.js';
 import '../../ui/components/spinners/spinners.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -200,15 +201,13 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       return nothing;
     }
 
-    return html`<x-link
+    return html`<devtools-link
           class="link"
           title="${UIStringsNotTranslate.viewUploadedFiles} ${UIStringsNotTranslate.opensInNewTab}"
           href="data:text/plain;charset=utf-8,${encodeURIComponent(input.sources)}"
-          jslog=${VisualLogging.link('files-used-in-patching').track({
-      click: true
-    })}>
+          .jslogContext=${'files-used-in-patching'}>
           ${UIStringsNotTranslate.viewUploadedFiles}
-        </x-link>`;
+        </devtools-link>`;
   }
 
   function renderHeader(): LitTemplate {
@@ -297,12 +296,10 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       return html`
           <div class="footer">
             <div class="left-side">
-              <x-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" jslog=${
-          VisualLogging.link('code-disclaimer').track({
-            click: true,
-          })}>
+              <devtools-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" .jslogContext=${
+                 'code-disclaimer'}>
                 ${lockedString(UIStringsNotTranslate.codeDisclaimer)}
-              </x-link>
+              </devtools-link>
               ${renderSourcesLink()}
             </div>
             <div class="save-or-discard-buttons">
@@ -575,13 +572,11 @@ export class PatchWidget extends UI.Widget.Widget {
         {
           iconName: 'warning',
           // clang-format off
-          content: html`<x-link
+          content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
-            jslog=${VisualLogging.link('code-snippets-explainer.patch-widget').track({
-              click: true
-            })}
-          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+            .jslogContext=${'code-snippets-explainer.patch-widget'}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
         }
       ],

package/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -13,7 +15,6 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import selectWorkspaceDialogStyles from './selectWorkspaceDialog.css.js';
 
@@ -89,11 +90,11 @@ export const SELECT_WORKSPACE_DIALOG_DEFAULT_VIEW: View = (input, _output, targe
           <!-- Hardcoding, because there is no 'getFormatLocalizedString' equivalent for 'lockedString' -->
           <div>
             Tip: provide a
-            <x-link
+            <devtools-link
               class="devtools-link"
               href="https://goo.gle/devtools-automatic-workspace-folders"
-              jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('automatic-workspaces-documentation')}
-            >com.chrome.devtools.json</x-link>
+              .jslogContext=${'automatic-workspaces-documentation'}
+            >com.chrome.devtools.json</devtools-link>
             file to automatically connect your project to DevTools.
           </div>
         ` : nothing}

package/front_end/panels/ai_assistance/aiAssistancePanel.css

@@ -13,22 +13,6 @@
   justify-content: space-between;
 }
 
-.artifacts-toolbar-container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 27px;
-  padding: 5px;
-  border-bottom: 1px solid var(--sys-color-divider);
-}
-
-.assistance-view-wrapper-with-sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
 .ai-assistance-view-container {
   display: flex;
   flex-direction: column;

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -6,7 +6,6 @@ export * from './AiAssistancePanel.js';
 export * from './components/ChatView.js';
 export * as ChatInput from './components/ChatInput.js';
 export * from './components/MarkdownRendererWithCodeBlock.js';
-export * from './components/PerformanceAgentFlameChart.js';
 export * from './SelectWorkspaceDialog.js';
 export * as ChatMessage from './components/ChatMessage.js';
 export * as ExploreWidget from './components/ExploreWidget.js';

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/markdown_view/markdown_view.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -576,12 +577,12 @@ function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitT
   }
   const imageUrl = `data:${inlineData.mimeType};base64,${inlineData.data}`;
   // clang-format off
-    return html`<x-link
+    return html`<devtools-link
       class="image-link" title=${UIStringsNotTranslate.openImageInNewTab}
       href=${imageUrl}
     >
       <img src=${imageUrl} alt=${UIStringsNotTranslate.imageInputSentToTheModel} />
-    </x-link>`;
+    </devtools-link>`;
   // clang-format on
 }
 

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

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
 import '../../../ui/components/spinners/spinners.js';
 
 import * as Host from '../../../core/host/host.js';
@@ -13,7 +11,7 @@ import type * as AiAssistanceModel from '../../../models/ai_assistance/ai_assist
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {Directives, html, nothing, render} from '../../../ui/lit/lit.js';
 import {PatchWidget} from '../PatchWidget.js';
 
 import {ChatInput} from './ChatInput.js';
@@ -22,7 +20,7 @@ import chatViewStyles from './chatView.css.js';
 
 export {ChatInput, type ImageInputData} from './ChatInput.js';
 
-const {html, Directives: {ref, repeat, createRef}} = Lit;
+const {ref, repeat, classMap} = Directives;
 
 /*
 * Strings that don't need to be translated at this time.
@@ -38,6 +36,12 @@ const lockedString = i18n.i18n.lockedString;
 
 const SCROLL_ROUNDING_OFFSET = 1;
 
+interface ViewOutput {
+  mainElement?: HTMLElement;
+  input?: UI.Widget.WidgetElement<ChatInput>;
+}
+type View = (input: ChatWidgetInput, output: ViewOutput, target: HTMLElement|ShadowRoot) => void;
+
 export interface Props {
   onTextSubmit:
       (text: string, imageInput?: Host.AidaClient.Part,
@@ -64,18 +68,110 @@ export interface Props {
   emptyStateSuggestions: AiAssistanceModel.AiAgent.ConversationSuggestion[];
   inputPlaceholder: Platform.UIString.LocalizedString;
   disclaimerText: Platform.UIString.LocalizedString;
-  isArtifactsSidebarOpen: boolean;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
   additionalFloatyContext: UI.Floaty.FloatyContextSelection[];
 }
 
+interface ChatWidgetInput extends Props {
+  handleScroll: (ev: Event) => void;
+  handleSuggestionClick: (title: string) => void;
+  handleMessageContainerRef: (el: Element|undefined) => void;
+}
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  const inputWidgetClasses = classMap({
+    'chat-input-widget': true,
+    sticky: !input.isReadOnly,
+  });
+
+  // clang-format off
+    render(html`
+      <style>${chatViewStyles}</style>
+      <div class="chat-ui">
+        <main @scroll=${input.handleScroll} ${ref(element => { output.mainElement = element as HTMLElement; } )}>
+          ${input.messages.length > 0 ? html`
+            <div class="messages-container" ${ref(input.handleMessageContainerRef)}>
+              ${repeat(input.messages, message =>
+                html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
+                  message,
+                  isLoading: input.isLoading,
+                  isReadOnly: input.isReadOnly,
+                  canShowFeedbackForm: input.canShowFeedbackForm,
+                  userInfo: input.userInfo,
+                  markdownRenderer: input.markdownRenderer,
+                  isLastMessage: input.messages.at(-1) === message,
+                  onSuggestionClick: input.handleSuggestionClick,
+                  onFeedbackSubmit: input.onFeedbackSubmit,
+                  onCopyResponseClick: input.onCopyResponseClick,
+                })}></devtools-widget>`
+              )}
+              ${input.isLoading ? nothing : html`<devtools-widget
+                .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
+                  changeSummary: input.changeSummary ?? '',
+                  changeManager: input.changeManager,
+                })}
+              ></devtools-widget>`}
+            </div>
+          ` : html`
+            <div class="empty-state-container">
+              <div class="header">
+                <div class="icon">
+                  <devtools-icon
+                    name="smart-assistant"
+                  ></devtools-icon>
+                </div>
+                <h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>
+              </div>
+              <div class="empty-state-content">
+                ${input.emptyStateSuggestions.map(({title, jslogContext}) => {
+                  return html`<devtools-button
+                    class="suggestion"
+                    @click=${() => input.handleSuggestionClick(title)}
+                    .data=${
+                      {
+                        variant: Buttons.Button.Variant.OUTLINED,
+                        size: Buttons.Button.Size.REGULAR,
+                        title,
+                        jslogContext: jslogContext ?? 'suggestion',
+                        disabled: input.isTextInputDisabled,
+                      } as Buttons.Button.ButtonData
+                    }
+                  >${title}</devtools-button>`;
+                })}
+              </div>
+            </div>
+          `}
+          <devtools-widget class=${inputWidgetClasses} .widgetConfig=${UI.Widget.widgetConfig(ChatInput, {
+            isLoading: input.isLoading,
+            blockedByCrossOrigin: input.blockedByCrossOrigin,
+            isTextInputDisabled: input.isTextInputDisabled,
+            inputPlaceholder: input.inputPlaceholder,
+            disclaimerText: input.disclaimerText,
+            selectedContext: input.selectedContext,
+            inspectElementToggled: input.inspectElementToggled,
+            multimodalInputEnabled: input.multimodalInputEnabled ?? false,
+            conversationType: input.conversationType,
+            uploadImageInputEnabled: input.uploadImageInputEnabled ?? false,
+            isReadOnly: input.isReadOnly,
+            additionalFloatyContext: input.additionalFloatyContext,
+            onContextClick: input.onContextClick,
+            onInspectElementClick: input.onInspectElementClick,
+            onTextSubmit: input.onTextSubmit,
+            onCancelClick: input.onCancelClick,
+            onNewConversation: input.onNewConversation,
+          })} ${ref(element => { output.input = element as UI.Widget.WidgetElement<ChatInput>; } )}></devtools-widget>
+        </main>
+      </div>
+    `, target);
+  // clang-format on
+};
 export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #scrollTop?: number;
   #props: Props;
   #messagesContainerElement?: Element;
-  #mainElementRef = createRef<HTMLElement>();
+  #output: ViewOutput = {};
   #messagesContainerResizeObserver = new ResizeObserver(() => this.#handleMessagesContainerResize());
   /**
    * Indicates whether the chat scroll position should be pinned to the bottom.
@@ -94,11 +190,12 @@ export class ChatView extends HTMLElement {
    * whether to pin the content to the bottom.
    */
   #isProgrammaticScroll = false;
-  #inputRef = createRef<UI.Widget.WidgetElement<ChatInput>>();
+  #view: View;
 
-  constructor(props: Props) {
+  constructor(props: Props, view = DEFAULT_VIEW) {
     super();
     this.#props = props;
+    this.#view = view;
   }
 
   set props(props: Props) {
@@ -132,7 +229,7 @@ export class ChatView extends HTMLElement {
       return;
     }
 
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
@@ -140,11 +237,11 @@ export class ChatView extends HTMLElement {
   }
 
   scrollToBottom(): void {
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
-    this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
+    this.#setMainElementScrollTop(this.#output.mainElement.scrollHeight);
   }
 
   #handleMessagesContainerResize(): void {
@@ -152,26 +249,26 @@ export class ChatView extends HTMLElement {
       return;
     }
 
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
     if (this.#pinScrollToBottom) {
-      this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
+      this.#setMainElementScrollTop(this.#output.mainElement.scrollHeight);
     }
   }
 
   #setMainElementScrollTop(scrollTop: number): void {
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
     this.#scrollTop = scrollTop;
     this.#isProgrammaticScroll = true;
-    this.#mainElementRef.value.scrollTop = scrollTop;
+    this.#output.mainElement.scrollTop = scrollTop;
   }
 
-  #handleMessageContainerRef(el: Element|undefined): void {
+  #handleMessageContainerRef = (el: Element|undefined): void => {
     this.#messagesContainerElement = el;
 
     if (el) {
@@ -180,7 +277,7 @@ export class ChatView extends HTMLElement {
       this.#pinScrollToBottom = true;
       this.#messagesContainerResizeObserver.disconnect();
     }
-  }
+  };
 
   #handleScroll = (ev: Event): void => {
     if (!ev.target || !(ev.target instanceof HTMLElement)) {
@@ -201,103 +298,21 @@ export class ChatView extends HTMLElement {
   };
 
   #handleSuggestionClick = (suggestion: string): void => {
-    this.#inputRef.value?.getWidget()?.setInputValue(suggestion);
+    this.#output.input?.getWidget()?.setInputValue(suggestion);
     this.#render();
     this.focusTextInput();
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
   #render(): void {
-    const inputWidgetClasses = Lit.Directives.classMap({
-      'chat-input-widget': true,
-      sticky: !this.#props.isReadOnly,
-    });
-
-    // clang-format off
-    Lit.render(html`
-      <style>${chatViewStyles}</style>
-      <div class="chat-ui">
-        <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
-          ${this.#props.messages.length > 0 ? html`
-            <div class="messages-container" ${ref(this.#handleMessageContainerRef)}>
-              ${repeat(this.#props.messages, message =>
-                html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
-                  message,
-                  isLoading: this.#props.isLoading,
-                  isReadOnly: this.#props.isReadOnly,
-                  canShowFeedbackForm: this.#props.canShowFeedbackForm,
-                  userInfo: this.#props.userInfo,
-                  markdownRenderer: this.#props.markdownRenderer,
-                  isLastMessage: this.#props.messages.at(-1) === message,
-                  onSuggestionClick: this.#handleSuggestionClick,
-                  onFeedbackSubmit: this.#props.onFeedbackSubmit,
-                  onCopyResponseClick: this.#props.onCopyResponseClick,
-                })}></devtools-widget>`
-              )}
-              ${this.#props.isLoading ? Lit.nothing : html`<devtools-widget
-                .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
-                  changeSummary: this.#props.changeSummary ?? '',
-                  changeManager: this.#props.changeManager,
-                })}
-              ></devtools-widget>`}
-            </div>
-          ` : html`
-            <div class="empty-state-container">
-              <div class="header">
-                <div class="icon">
-                  <devtools-icon
-                    name="smart-assistant"
-                  ></devtools-icon>
-                </div>
-                <h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>
-              </div>
-              <div class="empty-state-content">
-                ${this.#props.emptyStateSuggestions.map(({title, jslogContext}) => {
-                  return html`<devtools-button
-                    class="suggestion"
-                    @click=${() => this.#handleSuggestionClick(title)}
-                    .data=${
-                      {
-                        variant: Buttons.Button.Variant.OUTLINED,
-                        size: Buttons.Button.Size.REGULAR,
-                        title,
-                        jslogContext: jslogContext ?? 'suggestion',
-                        disabled: this.#props.isTextInputDisabled,
-                      } as Buttons.Button.ButtonData
-                    }
-                  >${title}</devtools-button>`;
-                })}
-              </div>
-            </div>
-          `}
-          <devtools-widget class=${inputWidgetClasses} .widgetConfig=${UI.Widget.widgetConfig(ChatInput, {
-            isLoading: this.#props.isLoading,
-            blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
-            isTextInputDisabled: this.#props.isTextInputDisabled,
-            inputPlaceholder: this.#props.inputPlaceholder,
-            disclaimerText: this.#props.disclaimerText,
-            selectedContext: this.#props.selectedContext,
-            inspectElementToggled: this.#props.inspectElementToggled,
-            multimodalInputEnabled: this.#props.multimodalInputEnabled ?? false,
-            conversationType: this.#props.conversationType,
-            uploadImageInputEnabled: this.#props.uploadImageInputEnabled ?? false,
-            isReadOnly: this.#props.isReadOnly,
-            additionalFloatyContext: this.#props.additionalFloatyContext,
-            onContextClick: this.#props.onContextClick,
-            onInspectElementClick: this.#props.onInspectElementClick,
-            onTextSubmit: (
-                text: string, imageInput?: Host.AidaClient.Part,
-                multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
-              this.#props.onTextSubmit(text, imageInput, multimodalInputType);
-              this.#render();
-            },
-            onCancelClick: this.#props.onCancelClick,
-            onNewConversation: this.#props.onNewConversation,
-          })} ${ref(this.#inputRef)}></devtools-widget>
-        </main>
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
+    this.#view(
+        {
+          ...this.#props,
+          handleScroll: this.#handleScroll,
+          handleSuggestionClick: this.#handleSuggestionClick,
+          handleMessageContainerRef: this.#handleMessageContainerRef,
+        },
+        this.#output, this.#shadow);
   }
 }