chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/spinners/spinners.js';
-import './UserActionRow.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -15,14 +14,19 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {AgentType, type ContextDetail, type ConversationContext, ErrorType} from '../agents/AiAgent.js';
 
-import styles from './chatView.css.js';
-import type {UserActionRowProps} from './UserActionRow.js';
+import stylesRaw from './chatView.css.js';
+import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
+import {UserActionRow} from './UserActionRow.js';
 
-const {html, Directives: {ifDefined, ref}} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const styles = new CSSStyleSheet();
+styles.replaceSync(stylesRaw.cssContent);
+
+const {html, Directives: {ifDefined, ref}} = Lit;
 
 const UIStrings = {
   /**
@@ -149,13 +153,17 @@ const UIStringsNotTranslate = {
    */
   inputPlaceholderForPerformanceAgentNoContext: 'Select an item to ask a question',
   /**
-   * @description Placeholder text for the input shown when the conversation is blocked because a cross-origin context was selected.
+   *@description Placeholder text for the chat UI input.
    */
-  crossOriginError: 'To talk about data from another origin, start a new chat',
+  inputPlaceholderForPerformanceInsightsAgent: 'Ask a question about the selected performance insight',
+  /**
+   *@description Placeholder text for the chat UI input.
+   */
+  inputPlaceholderForPerformanceInsightsAgentNoContext: 'Select a performance insight to ask a question',
   /**
    * @description Placeholder text for the input shown when the conversation is blocked because a cross-origin context was selected.
    */
-  newConversationError: 'To talk about this data, start a new chat',
+  crossOriginError: 'To talk about data from another origin, start a new chat',
   /**
    *@description Title for the send icon button.
    */
@@ -253,6 +261,10 @@ const UIStringsNotTranslate = {
    *@description Text displayed when the chat input is disabled due to reading past conversation.
    */
   pastConversation: 'You\'re viewing a past conversation.',
+  /**
+   *@description Text displayed for showing change summary view.
+   */
+  changeSummary: 'Change summary',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ChatView.ts', UIStrings);
@@ -320,58 +332,8 @@ export interface Props {
   agentType?: AgentType;
   isReadOnly: boolean;
   blockedByCrossOrigin: boolean;
-  requiresNewConversation?: boolean;
   stripLinks: boolean;
-}
-
-// The model returns multiline code blocks in an erroneous way with the language being in new line.
-// This renderer takes that into account and correctly updates the parsed multiline token with the language
-// correctly identified and stripped from the content.
-// Example:
-// ```
-// css <-- This should have been on the first line.
-// * {
-//   color: red;
-// }
-// ```
-class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
-  #stripLinks: boolean = false;
-  constructor(opts: {stripLinks?: boolean} = {}) {
-    super();
-    this.#stripLinks = Boolean(opts.stripLinks);
-  }
-  override templateForToken(token: Marked.Marked.MarkedToken): LitHtml.TemplateResult|null {
-    if (token.type === 'code') {
-      const lines = (token.text as string).split('\n');
-      if (lines[0]?.trim() === 'css') {
-        token.lang = 'css';
-        token.text = lines.slice(1).join('\n');
-      }
-    }
-
-    // Potentially remove links from the rendered result
-    if (this.#stripLinks && (token.type === 'link' || token.type === 'image')) {
-      // Insert an extra text node at the end after any link text. Show the link as plaintext (surrounded by parentheses)
-      const urlText = ` ( ${token.href} )`;
-      // Images would be turned into as links (but we'll skip that) https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/markdown_view/MarkdownView.ts;l=286-291;drc=d2cc89e48c913666655542d818ad0a09d25d0d08
-      const childTokens = token.type === 'image' ? undefined : [
-        ...token.tokens,
-        {type: 'text', text: urlText, raw: urlText},
-      ];
-
-      token = {
-        ...token,
-        // Marked doesn't read .text or .raw of a link, but we'll update anyway
-        // https://github.com/markedjs/marked/blob/035af38ab1e5aae95ece213dcc9a9c6d79cff46f/src/Renderer.ts#L178-L191
-        text: `${token.text}${urlText}`,
-        raw: `${token.text}${urlText}`,
-        type: 'text',
-        tokens: childTokens,
-      };
-    }
-
-    return super.templateForToken(token);
-  }
+  changeSummary?: string;
 }
 
 export class ChatView extends HTMLElement {
@@ -380,7 +342,7 @@ export class ChatView extends HTMLElement {
   #scrollTop?: number;
   #props: Props;
   #messagesContainerElement?: Element;
-  #mainElementRef?: LitHtml.Directives.Ref<Element> = LitHtml.Directives.createRef();
+  #mainElementRef?: Lit.Directives.Ref<Element> = Lit.Directives.createRef();
   #lastAnswerMarkdownView?: MarkdownView.MarkdownView.MarkdownView;
   #messagesContainerResizeObserver = new ResizeObserver(() => this.#handleMessagesContainerResize());
   /**
@@ -479,16 +441,11 @@ export class ChatView extends HTMLElement {
   }
 
   #isTextInputDisabled = (): boolean => {
-    if (this.#props.blockedByCrossOrigin || this.#props.requiresNewConversation) {
+    if (this.#props.blockedByCrossOrigin) {
       return true;
     }
     const isAidaAvailable = this.#props.aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
     const isConsentView = this.#props.state === State.CONSENT_VIEW;
-    const showsSideEffects = this.#props.messages.some(message => {
-      return message.entity === ChatMessageEntity.MODEL && message.steps.some(step => {
-        return Boolean(step.sideEffect);
-      });
-    });
 
     if (!isAidaAvailable || isConsentView || !this.#props.agentType) {
       return true;
@@ -498,19 +455,7 @@ export class ChatView extends HTMLElement {
       return true;
     }
 
-    // Agent-specific input disabled rules.
-    switch (this.#props.agentType) {
-      case AgentType.STYLING:
-        return showsSideEffects;
-      case AgentType.NETWORK:
-        return false;
-      case AgentType.FILE:
-        return false;
-      case AgentType.PERFORMANCE:
-        return false;
-      case AgentType.PATCH:
-        return false;
-    }
+    return false;
   };
 
   #handleMessageContainerRef(el: Element|undefined): void {
@@ -560,14 +505,14 @@ export class ChatView extends HTMLElement {
       return;
     }
 
+    // Go to a new line only when Shift + Enter is pressed.
     if (ev.key === 'Enter' && !ev.shiftKey) {
-      // Do not go to a new line whenver Shift + Enter is pressed.
       ev.preventDefault();
-      // Only submit the text when there isn't a request already in flight.
-      if (!this.#props.isLoading) {
-        this.#props.onTextSubmit(ev.target.value);
-        ev.target.value = '';
+      if (!ev.target || !ev.target.value) {
+        return;
       }
+      this.#props.onTextSubmit(ev.target.value);
+      ev.target.value = '';
     }
   };
 
@@ -587,435 +532,6 @@ export class ChatView extends HTMLElement {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
-  #renderUserActionRow(rpcId?: Host.AidaClient.RpcGlobalId, suggestions?: [string, ...string[]]):
-      LitHtml.TemplateResult {
-    // clang-format off
-    return html`<devtools-user-action-row
-      .props=${{
-        showRateButtons: rpcId !== undefined,
-        onFeedbackSubmit: (rating, feedback) => {
-          if (!rpcId) {
-            return;
-          }
-          this.#props.onFeedbackSubmit(rpcId, rating, feedback);
-        },
-        suggestions,
-        handleSuggestionClick: this.#handleSuggestionClick,
-        canShowFeedbackForm: this.#props.canShowFeedbackForm,
-      } as UserActionRowProps}
-      ></devtools-user-action-row>`;
-    // clang-format on
-  }
-
-  #renderTextAsMarkdown(text: string, {animate, ref: refFn}: {
-    animate?: boolean,
-    ref?: (element?: Element) => void,
-  } = {}): LitHtml.TemplateResult {
-    let tokens = [];
-    try {
-      tokens = Marked.Marked.lexer(text);
-      for (const token of tokens) {
-        // Try to render all the tokens to make sure that
-        // they all have a template defined for them. If there
-        // isn't any template defined for a token, we'll fallback
-        // to rendering the text as plain text instead of markdown.
-        this.#markdownRenderer.renderToken(token);
-      }
-    } catch (err) {
-      // The tokens were not parsed correctly or
-      // one of the tokens are not supported, so we
-      // continue to render this as text.
-      return html`${text}`;
-    }
-
-    // clang-format off
-    return html`<devtools-markdown-view
-      .data=${{tokens, renderer: this.#markdownRenderer, animationEnabled: animate} as MarkdownView.MarkdownView.MarkdownViewData}
-      ${refFn ? ref(refFn) : LitHtml.nothing}>
-    </devtools-markdown-view>`;
-    // clang-format on
-  }
-
-  #renderTitle(step: Step): LitHtml.LitTemplate {
-    const paused = step.sideEffect ? html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
-                                     LitHtml.nothing;
-    const actionTitle = step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
-
-    return html`<span class="title">${paused}${actionTitle}</span>`;
-  }
-
-  #renderStepCode(step: Step): LitHtml.LitTemplate {
-    if (!step.code && !step.output) {
-      return LitHtml.nothing;
-    }
-
-    // If there is no "output" yet, it means we didn't execute the code yet (e.g. maybe it is still waiting for confirmation from the user)
-    // thus we show "Code to execute" text rather than "Code executed" text on the heading of the code block.
-    const codeHeadingText = (step.output && !step.canceled) ? lockedString(UIStringsNotTranslate.codeExecuted) :
-                                                              lockedString(UIStringsNotTranslate.codeToExecute);
-
-    // If there is output, we don't show notice on this code block and instead show
-    // it in the data returned code block.
-    // clang-format off
-    const code = step.code ? html`<div class="action-result">
-        <devtools-code-block
-          .code=${step.code.trim()}
-          .codeLang=${'js'}
-          .displayNotice=${!Boolean(step.output)}
-          .header=${codeHeadingText}
-          .showCopyButton=${true}
-        ></devtools-code-block>
-    </div>` :
-                             LitHtml.nothing;
-    const output = step.output ? html`<div class="js-code-output">
-      <devtools-code-block
-        .code=${step.output}
-        .codeLang=${'js'}
-        .displayNotice=${true}
-        .header=${lockedString(UIStringsNotTranslate.dataReturned)}
-        .showCopyButton=${false}
-      ></devtools-code-block>
-    </div>` :
-                                 LitHtml.nothing;
-
-    return html`<div class="step-code">${code}${output}</div>`;
-    // clang-format on
-  }
-
-  #renderStepDetails(step: Step, options: {isLast: boolean}): LitHtml.LitTemplate {
-    const sideEffects =
-        options.isLast && step.sideEffect ? this.#renderSideEffectConfirmationUi(step) : LitHtml.nothing;
-    const thought = step.thought ? html`<p>${this.#renderTextAsMarkdown(step.thought)}</p>` : LitHtml.nothing;
-
-    // clang-format off
-    const contextDetails = step.contextDetails ?
-    html`${LitHtml.Directives.repeat(
-      step.contextDetails,
-        contextDetail => {
-          return html`<div class="context-details">
-        <devtools-code-block
-          .code=${contextDetail.text}
-          .codeLang=${contextDetail.codeLang || ''}
-          .displayNotice=${false}
-          .header=${contextDetail.title}
-          .showCopyButton=${true}
-        ></devtools-code-block>
-      </div>`;
-        },
-      )}` : LitHtml.nothing;
-
-    return html`<div class="step-details">
-      ${thought}
-      ${this.#renderStepCode(step)}
-      ${sideEffects}
-      ${contextDetails}
-    </div>`;
-    // clang-format on
-  }
-
-  #renderStepBadge(step: Step, options: {isLast: boolean}): LitHtml.LitTemplate {
-    if (this.#props.isLoading && options.isLast && !step.sideEffect) {
-      return html`<devtools-spinner></devtools-spinner>`;
-    }
-
-    let iconName: string = 'checkmark';
-    let ariaLabel: string|undefined = lockedString(UIStringsNotTranslate.completed);
-    let role: 'button'|undefined = 'button';
-    if (options.isLast && step.sideEffect) {
-      role = undefined;
-      ariaLabel = undefined;
-      iconName = 'pause-circle';
-    } else if (step.canceled) {
-      ariaLabel = lockedString(UIStringsNotTranslate.canceled);
-      iconName = 'cross';
-    }
-
-    return html`<devtools-icon
-        class="indicator"
-        role=${ifDefined(role)}
-        aria-label=${ifDefined(ariaLabel)}
-        .name=${iconName}
-      ></devtools-icon>`;
-  }
-
-  #renderStep(step: Step, options: {isLast: boolean}): LitHtml.LitTemplate {
-    const stepClasses = LitHtml.Directives.classMap({
-      step: true,
-      empty: !step.thought && !step.code && !step.contextDetails,
-      paused: Boolean(step.sideEffect),
-      canceled: Boolean(step.canceled),
-    });
-    // clang-format off
-    return html`
-      <details class=${stepClasses}
-        jslog=${VisualLogging.section('step')}
-        .open=${Boolean(step.sideEffect)}>
-        <summary>
-          <div class="summary">
-            ${this.#renderStepBadge(step, options)}
-            ${this.#renderTitle(step)}
-            <devtools-icon
-              class="arrow"
-              .name=${'chevron-down'}
-            ></devtools-icon>
-          </div>
-        </summary>
-        ${this.#renderStepDetails(step, {
-          isLast: options.isLast,
-        })}
-      </details>`;
-    // clang-format on
-  }
-
-  #renderSideEffectConfirmationUi(step: Step): LitHtml.LitTemplate {
-    if (!step.sideEffect) {
-      return LitHtml.nothing;
-    }
-
-    const sideEffectAction = (answer: boolean): void => {
-      step.sideEffect?.onAnswer(answer);
-      step.sideEffect = undefined;
-      this.#render();
-    };
-
-    // clang-format off
-    return html`<div
-      class="side-effect-confirmation"
-      jslog=${VisualLogging.section('side-effect-confirmation')}
-    >
-      <p>${lockedString(UIStringsNotTranslate.sideEffectConfirmationDescription)}</p>
-      <div class="side-effect-buttons-container">
-        <devtools-button
-          .data=${
-            {
-              variant: Buttons.Button.Variant.OUTLINED,
-              jslogContext: 'decline-execute-code',
-            } as Buttons.Button.ButtonData
-          }
-          @click=${() => sideEffectAction(false)}
-        >${lockedString(
-          UIStringsNotTranslate.negativeSideEffectConfirmation,
-        )}</devtools-button>
-        <devtools-button
-          .data=${
-            {
-              variant: Buttons.Button.Variant.PRIMARY,
-              jslogContext: 'accept-execute-code',
-              iconName: 'play',
-            } as Buttons.Button.ButtonData
-          }
-          @click=${() => sideEffectAction(true)}
-        >${
-            lockedString(UIStringsNotTranslate.positiveSideEffectConfirmation)
-        }</devtools-button>
-      </div>
-    </div>`;
-    // clang-format on
-  }
-
-  #renderError(message: ModelChatMessage): LitHtml.LitTemplate {
-    if (message.error) {
-      let errorMessage;
-      switch (message.error) {
-        case ErrorType.UNKNOWN:
-        case ErrorType.BLOCK:
-          errorMessage = UIStringsNotTranslate.systemError;
-          break;
-        case ErrorType.MAX_STEPS:
-          errorMessage = UIStringsNotTranslate.maxStepsError;
-          break;
-        case ErrorType.ABORT:
-          return html`<p class="aborted" jslog=${VisualLogging.section('aborted')}>${
-              lockedString(UIStringsNotTranslate.stoppedResponse)}</p>`;
-      }
-
-      return html`<p class="error" jslog=${VisualLogging.section('error')}>${lockedString(errorMessage)}</p>`;
-    }
-
-    return LitHtml.nothing;
-  }
-
-  #renderChatMessage = (message: ChatMessage, {isLast}: {isLast: boolean}): LitHtml.TemplateResult => {
-    if (message.entity === ChatMessageEntity.USER) {
-      const name = this.#props.userInfo.accountFullName || lockedString(UIStringsNotTranslate.you);
-      const image = this.#props.userInfo.accountImage ?
-          html`<img src="data:image/png;base64, ${this.#props.userInfo.accountImage}" alt="Account avatar" />` :
-          html`<devtools-icon
-            .name=${'profile'}
-          ></devtools-icon>`;
-      // clang-format off
-      return html`<section
-        class="chat-message query"
-        jslog=${VisualLogging.section('question')}
-      >
-        <div class="message-info">
-          ${image}
-          <div class="message-name">
-            <h2>${name}</h2>
-          </div>
-        </div>
-        <div class="message-content">${this.#renderTextAsMarkdown(message.text)}</div>
-      </section>`;
-      // clang-format on
-    }
-
-    // clang-format off
-    return html`
-      <section
-        class="chat-message answer"
-        jslog=${VisualLogging.section('answer')}
-      >
-        <div class="message-info">
-          <devtools-icon name="smart-assistant"></devtools-icon>
-          <div class="message-name">
-            <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
-          </div>
-        </div>
-        ${LitHtml.Directives.repeat(
-          message.steps,
-          (_, index) => index,
-          step => {
-            return this.#renderStep(step, {
-              isLast: [...message.steps.values()].at(-1) === step && isLast,
-            });
-          },
-        )}
-        ${message.answer
-          ? html`<p>${this.#renderTextAsMarkdown(message.answer, { animate: !this.#props.isReadOnly, ref: this.#handleLastAnswerMarkdownViewRef })}</p>`
-          : LitHtml.nothing}
-        ${this.#renderError(message)}
-        <div class="actions">
-          ${isLast && this.#props.isLoading
-            ? LitHtml.nothing
-            : this.#renderUserActionRow(
-                message.rpcId,
-                isLast ? message.suggestions : undefined,
-              )}
-        </div>
-      </section>
-    `;
-    // clang-format on
-  };
-
-  #renderSelection(): LitHtml.LitTemplate {
-    if (!this.#props.agentType) {
-      return LitHtml.nothing;
-    }
-    return this.#renderContextSelector();
-  }
-
-  #renderContextSelector(): LitHtml.LitTemplate {
-    // TODO: currently the picker behavior is SDKNode specific.
-    const hasPickerBehavior = this.#props.agentType === AgentType.STYLING;
-
-    const resourceClass = LitHtml.Directives.classMap({
-      'not-selected': !this.#props.selectedContext,
-      'resource-link': true,
-      'allow-overflow': hasPickerBehavior,
-    });
-
-    if (!this.#props.selectedContext && !hasPickerBehavior) {
-      return LitHtml.nothing;
-    }
-
-    const icon = this.#props.selectedContext?.getIcon() ?? LitHtml.nothing;
-
-    const handleKeyDown = (ev: KeyboardEvent): void => {
-      if (ev.key === 'Enter') {
-        void this.#props.onContextClick();
-      }
-    };
-
-    // clang-format off
-    return html`<div class="select-element">
-      ${
-        hasPickerBehavior ? html`
-          <devtools-button
-            .data=${{
-                variant: Buttons.Button.Variant.ICON_TOGGLE,
-                size: Buttons.Button.Size.REGULAR,
-                iconName: 'select-element',
-                toggledIconName: 'select-element',
-                toggleType: Buttons.Button.ToggleType.PRIMARY,
-                toggled: this.#props.inspectElementToggled,
-                title: lockedString(UIStringsNotTranslate.selectAnElement),
-                jslogContext: 'select-element',
-            } as Buttons.Button.ButtonData}
-            @click=${this.#props.onInspectElementClick}
-          ></devtools-button>
-        ` : LitHtml.nothing
-      }
-      <div
-        role=button
-        class=${resourceClass}
-        tabindex=${hasPickerBehavior ? '-1' : '0'}
-        @click=${this.#props.onContextClick}
-        @keydown=${handleKeyDown}
-      >
-        ${icon}${this.#props.selectedContext?.getTitle() ?? html`<span>${
-          lockedString(UIStringsNotTranslate.noElementSelected)
-        }</span>`}
-      </div>
-    </div>`;
-    // clang-format on
-  }
-
-  #renderMessages = (): LitHtml.TemplateResult => {
-    // clang-format off
-    return html`
-      <div class="messages-container" ${ref(this.#handleMessageContainerRef)}>
-        ${this.#props.messages.map((message, _, array) =>
-          this.#renderChatMessage(message, {
-            isLast: array.at(-1) === message,
-          }),
-        )}
-      </div>
-    `;
-    // clang-format on
-  };
-
-  #renderEmptyState = (): LitHtml.TemplateResult => {
-    const suggestions = this.#getEmptyStateSuggestions();
-
-    // clang-format off
-    return 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">
-        ${suggestions.map(suggestion => {
-          return html`<devtools-button
-            class="suggestion"
-            @click=${() => this.#handleSuggestionClick(suggestion)}
-            .data=${
-              {
-                variant: Buttons.Button.Variant.OUTLINED,
-                size: Buttons.Button.Size.REGULAR,
-                title: suggestion,
-                jslogContext: 'suggestion',
-                disabled: this.#isTextInputDisabled(),
-              } as Buttons.Button.ButtonData
-            }
-          >${suggestion}</devtools-button>`;
-        })}
-      </div>
-    </div>`;
-    // clang-format on
-  };
-
-  #onNewConversation(): void {
-    this.#props.onNewConversation();
-  }
-
-  #onCancelCrossOriginChat(): void {
-    this.#props.onCancelCrossOriginChat?.();
-  }
-
   #getEmptyStateSuggestions = (): string[] => {
     if (!this.#props.agentType) {
       return [];
@@ -1045,6 +561,9 @@ export class ChatView extends HTMLElement {
           'Where is most of the time being spent in this call tree?',
           'How can I reduce the time of this call tree?',
         ];
+      case AgentType.PERFORMANCE_INSIGHT:
+        // TODO(b/393061683): Define these.
+        return ['Placeholder', 'Suggestions', 'For now'];
       case AgentType.PATCH:
         return [
           'What can you help me with?',
@@ -1060,9 +579,6 @@ export class ChatView extends HTMLElement {
     if (state === State.CONSENT_VIEW || !agentType) {
       return i18nString(UIStrings.followTheSteps);
     }
-    if (this.#props.requiresNewConversation) {
-      return lockedString(UIStringsNotTranslate.newConversationError);
-    }
     if (this.#props.blockedByCrossOrigin) {
       return lockedString(UIStringsNotTranslate.crossOriginError);
     }
@@ -1084,141 +600,13 @@ export class ChatView extends HTMLElement {
         return this.#props.selectedContext ?
             lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceAgent) :
             lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceAgentNoContext);
+      case AgentType.PERFORMANCE_INSIGHT:
+        return this.#props.selectedContext ?
+            lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceInsightsAgent) :
+            lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceInsightsAgentNoContext);
     }
   }
 
-  #renderReadOnlySection(): LitHtml.LitTemplate {
-    if (!this.#props.agentType) {
-      return LitHtml.nothing;
-    }
-
-    // clang-format off
-    return html`<div
-      class="chat-readonly-container"
-      jslog=${VisualLogging.section('read-only')}
-    >
-      <span>${lockedString(UIStringsNotTranslate.pastConversation)}</span>
-      <devtools-button
-        aria-label=${lockedString(UIStringsNotTranslate.startNewChat)}
-        class="chat-inline-button"
-        @click=${this.#onNewConversation}
-        .data=${{
-          variant: Buttons.Button.Variant.TEXT,
-          title: lockedString(UIStringsNotTranslate.startNewChat),
-          jslogContext: 'start-new-chat',
-        } as Buttons.Button.ButtonData}
-      >${lockedString(UIStringsNotTranslate.startNewChat)}</devtools-button>
-    </div>`;
-    // clang-format on
-  }
-
-  #renderChatInputButtons(): 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 || this.#props.requiresNewConversation) {
-      // clang-format off
-      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
-    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>`;
-  }
-
-  #renderChatInput = (): LitHtml.LitTemplate => {
-    if (!this.#props.agentType) {
-      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}>
-      <div class="input-form-shadow-container">
-        <div class="input-form-shadow"></div>
-      </div>
-      ${this.#props.state !== State.CONSENT_VIEW ? html`
-        <div class="input-header">
-          <div class="header-link-container">
-            ${this.#renderSelection()}
-          </div>
-        </div>
-      ` : LitHtml.nothing}
-      <div class="chat-input-container">
-        <textarea class=${cls}
-          .disabled=${this.#isTextInputDisabled()}
-          wrap="hard"
-          @keydown=${this.#handleTextAreaKeyDown}
-          placeholder=${this.#getInputPlaceholderString()}
-          jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}
-        ></textarea>
-        <div class="chat-input-buttons">
-          ${this.#renderChatInputButtons()}
-        </div>
-      </div>
-    </form>`;
-    // clang-format on
-  };
-
   #getDisclaimerText = (): Platform.UIString.LocalizedString => {
     if (this.#props.state === State.CONSENT_VIEW || !this.#props.agentType || this.#props.isReadOnly) {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
@@ -1251,10 +639,16 @@ export class ChatView extends HTMLElement {
           return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceAgentEnterpriseNoLogging);
         }
         return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceAgent);
+      case AgentType.PERFORMANCE_INSIGHT:
+        // TODO(b/393061683): Define these rather than reuse the existing performance agent.
+        if (noLogging) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceAgentEnterpriseNoLogging);
+        }
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceAgent);
     }
   };
 
-  #getConsentViewContents(): LitHtml.TemplateResult {
+  #getConsentViewContents(): Lit.TemplateResult {
     const settingsLink = document.createElement('button');
     settingsLink.textContent = i18nString(UIStrings.settingsLink);
     settingsLink.classList.add('link');
@@ -1283,7 +677,7 @@ export class ChatView extends HTMLElement {
   #getUnavailableAidaAvailabilityContents(
       aidaAvailability:
           Exclude<Host.AidaClient.AidaAccessPreconditions, Host.AidaClient.AidaAccessPreconditions.AVAILABLE>):
-      LitHtml.TemplateResult {
+      Lit.TemplateResult {
     switch (aidaAvailability) {
       case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
       case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED: {
@@ -1295,132 +689,53 @@ export class ChatView extends HTMLElement {
     }
   }
 
-  #renderDisabledState(contents: LitHtml.TemplateResult): LitHtml.TemplateResult {
-    // clang-format off
-    return html`
-      <div class="empty-state-container">
-        <div class="disabled-view">
-          <div class="disabled-view-icon-container">
-            <devtools-icon .data=${{
-              iconName: 'smart-assistant',
-              width: 'var(--sys-size-8)',
-              height: 'var(--sys-size-8)',
-            } as IconButton.Icon.IconData}>
-            </devtools-icon>
-          </div>
-          <div>
-            ${contents}
-          </div>
-        </div>
-      </div>
-    `;
-    // clang-format on
-  }
-
-  #renderNoAgentState(): LitHtml.TemplateResult {
-    const config = Common.Settings.Settings.instance().getHostConfig();
-    const featureCards: {
-      icon: string,
-      heading: string,
-      content: LitHtml.TemplateResult,
-    }[] =
-        [
-          ...(config.devToolsFreestyler?.enabled ? [{
-            icon: 'brush-2',
-            heading: 'CSS styles',
-            content: html`Open <button class="link" role="link" jslog=${
-                VisualLogging.link('open-elements-panel').track({click: true})} @click=${() => {
-              void UI.ViewManager.ViewManager.instance().showView('elements');
-            }}>Elements</button> to ask about CSS styles`,
-          }] :
-                                                   []),
-          ...(config.devToolsAiAssistanceNetworkAgent?.enabled) ? [{
-            icon: 'arrow-up-down',
-            heading: 'Network',
-            content: html`Open <button class="link" role="link" jslog=${
-                VisualLogging.link('open-network-panel').track({click: true})} @click=${() => {
-              void UI.ViewManager.ViewManager.instance().showView('network');
-            }}>Network</button> to ask about a request's details`,
-          }] :
-                                                                  [],
-          ...(config.devToolsAiAssistanceFileAgent?.enabled) ? [{
-            icon: 'document',
-            heading: 'Files',
-            content: html`Open <button class="link" role="link" jslog=${
-                VisualLogging.link('open-sources-panel').track({click: true})} @click=${() => {
-              void UI.ViewManager.ViewManager.instance().showView('sources');
-            }}>Sources</button> to ask about a file's content`,
-          }] :
-                                                               [],
-          ...(config.devToolsAiAssistancePerformanceAgent?.enabled ? [{
-            icon: 'performance',
-            heading: 'Performance',
-            content: html`Open <button class="link" role="link" jslog=${
-                VisualLogging.link('open-performance-panel').track({click: true})} @click=${() => {
-              void UI.ViewManager.ViewManager.instance().showView('timeline');
-            }}>Performance</button> to ask about a trace item`,
-          }] :
-                                                                     []),
-        ];
-
-    // clang-format off
-    return html`
-      <div class="empty-state-container">
-        <div class="header">
-          <div class="icon">
-            <devtools-icon
-              name="smart-assistant"
-            ></devtools-icon>
-          </div>
-          <h1>${lockedString(UIStringsNotTranslate.noAgentStateText)}</h1>
-          <p>To chat about an item, right-click and select <strong>Ask AI</strong></p>
-        </div>
-        <div class="empty-state-content">
-          ${featureCards.map(featureCard => html`
-            <div class="feature-card">
-              <div class="feature-card-icon">
-                <devtools-icon name=${featureCard.icon}></devtools-icon>
-              </div>
-              <div class="feature-card-content">
-                <h3>${featureCard.heading}</h3>
-                <p>${featureCard.content}</p>
-              </div>
-            </div>
-          `)}
-        </div>
-      </div>`;
-    // clang-format on
-  }
-
-  #renderMainContents(): LitHtml.TemplateResult {
-    if (this.#props.state === State.CONSENT_VIEW) {
-      return this.#renderDisabledState(this.#getConsentViewContents());
-    }
-
-    if (this.#props.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
-      return this.#renderDisabledState(this.#getUnavailableAidaAvailabilityContents(this.#props.aidaAvailability));
-    }
-
-    if (!this.#props.agentType) {
-      return this.#renderNoAgentState();
-    }
-
-    if (this.#props.messages.length > 0) {
-      return this.#renderMessages();
-    }
-
-    return this.#renderEmptyState();
-  }
-
   #render(): void {
     // clang-format off
-    LitHtml.render(html`
+    Lit.render(html`
       <div class="chat-ui">
         <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
-          ${this.#renderMainContents()}
-          ${this.#props.isReadOnly ?
-              this.#renderReadOnlySection() :
-              this.#renderChatInput()
+          ${renderMainContents({
+            state: this.#props.state,
+            aidaAvailability: this.#props.aidaAvailability,
+            messages: this.#props.messages,
+            isLoading: this.#props.isLoading,
+            isReadOnly: this.#props.isReadOnly,
+            canShowFeedbackForm: this.#props.canShowFeedbackForm,
+            isTextInputDisabled: this.#isTextInputDisabled(),
+            suggestions: this.#getEmptyStateSuggestions(),
+            consentViewContents: this.#getConsentViewContents(),
+            userInfo: this.#props.userInfo,
+            markdownRenderer: this.#markdownRenderer,
+            agentType: this.#props.agentType,
+            getUnavailableAidaAvailabilityContents: this.#getUnavailableAidaAvailabilityContents,
+            onSuggestionClick: this.#handleSuggestionClick,
+            onFeedbackSubmit: this.#props.onFeedbackSubmit,
+            onLastAnswerMarkdownViewRef: this.#handleLastAnswerMarkdownViewRef,
+            onMessageContainerRef: this.#handleMessageContainerRef,
+          })}
+          ${this.#props.isReadOnly
+            ? renderReadOnlySection({
+                agentType: this.#props.agentType,
+                onNewConversation: this.#props.onNewConversation,
+              })
+            : renderChatInput({
+                isLoading: this.#props.isLoading,
+                blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
+                isTextInputDisabled: this.#isTextInputDisabled(),
+                inputPlaceholderString: this.#getInputPlaceholderString(),
+                state: this.#props.state,
+                selectedContext: this.#props.selectedContext,
+                inspectElementToggled: this.#props.inspectElementToggled,
+                agentType: this.#props.agentType,
+                changeSummary: this.#props.changeSummary,
+                onContextClick: this.#props.onContextClick,
+                onInspectElementClick: this.#props.onInspectElementClick,
+                onSubmit: this.#handleSubmit,
+                onTextAreaKeyDown: this.#handleTextAreaKeyDown,
+                onCancel: this.#handleCancel,
+                onNewConversation: this.#props.onNewConversation,
+                onCancelCrossOriginChat: this.#props.onCancelCrossOriginChat,
+              })
           }
         </main>
         <footer class="disclaimer" jslog=${VisualLogging.section('footer')}>
@@ -1444,6 +759,864 @@ export class ChatView extends HTMLElement {
   }
 }
 
+function renderChangeSummary(changeSummary?: string): Lit.LitTemplate {
+  if (!changeSummary) {
+    return Lit.nothing;
+  }
+
+  return html`<details class="change-summary">
+      <summary>
+        <devtools-icon class="difference-icon" .name=${'difference'}
+        ></devtools-icon>
+        <span class="header-text">
+          ${lockedString(UIStringsNotTranslate.changeSummary)}
+        </span>
+        <devtools-icon
+          class="arrow"
+          .name=${'chevron-up'}
+        ></devtools-icon>
+      </summary>
+      <devtools-code-block
+        .code=${changeSummary}
+        .codeLang=${'css'}
+        .displayNotice=${false}
+      ></devtools-code-block>
+    </details>`;
+}
+
+function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownRendererWithCodeBlock, {animate, ref: refFn}: {
+  animate?: boolean,
+  ref?: (element?: Element) => void,
+} = {}): Lit.TemplateResult {
+  let tokens = [];
+  try {
+    tokens = Marked.Marked.lexer(text);
+    for (const token of tokens) {
+      // Try to render all the tokens to make sure that
+      // they all have a template defined for them. If there
+      // isn't any template defined for a token, we'll fallback
+      // to rendering the text as plain text instead of markdown.
+      markdownRenderer.renderToken(token);
+    }
+  } catch {
+    // The tokens were not parsed correctly or
+    // one of the tokens are not supported, so we
+    // continue to render this as text.
+    return html`${text}`;
+  }
+
+  // clang-format off
+  return html`<devtools-markdown-view
+    .data=${{tokens, renderer: markdownRenderer, animationEnabled: animate} as MarkdownView.MarkdownView.MarkdownViewData}
+    ${refFn ? ref(refFn) : Lit.nothing}>
+  </devtools-markdown-view>`;
+  // clang-format on
+}
+
+function renderTitle(step: Step): Lit.LitTemplate {
+  const paused =
+      step.sideEffect ? html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` : Lit.nothing;
+  const actionTitle = step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
+
+  return html`<span class="title">${paused}${actionTitle}</span>`;
+}
+
+function renderStepCode(step: Step): Lit.LitTemplate {
+  if (!step.code && !step.output) {
+    return Lit.nothing;
+  }
+
+  // If there is no "output" yet, it means we didn't execute the code yet (e.g. maybe it is still waiting for confirmation from the user)
+  // thus we show "Code to execute" text rather than "Code executed" text on the heading of the code block.
+  const codeHeadingText = (step.output && !step.canceled) ? lockedString(UIStringsNotTranslate.codeExecuted) :
+                                                            lockedString(UIStringsNotTranslate.codeToExecute);
+
+  // If there is output, we don't show notice on this code block and instead show
+  // it in the data returned code block.
+  // clang-format off
+  const code = step.code ? html`<div class="action-result">
+      <devtools-code-block
+        .code=${step.code.trim()}
+        .codeLang=${'js'}
+        .displayNotice=${!Boolean(step.output)}
+        .header=${codeHeadingText}
+        .showCopyButton=${true}
+      ></devtools-code-block>
+  </div>` :
+                           Lit.nothing;
+  const output = step.output ? html`<div class="js-code-output">
+    <devtools-code-block
+      .code=${step.output}
+      .codeLang=${'js'}
+      .displayNotice=${true}
+      .header=${lockedString(UIStringsNotTranslate.dataReturned)}
+      .showCopyButton=${false}
+    ></devtools-code-block>
+  </div>` :
+                               Lit.nothing;
+
+  return html`<div class="step-code">${code}${output}</div>`;
+  // clang-format on
+}
+
+function renderStepDetails({
+  step,
+  markdownRenderer,
+  isLast,
+}: {
+  step: Step,
+  markdownRenderer: MarkdownRendererWithCodeBlock,
+  isLast: boolean,
+}): Lit.LitTemplate {
+  const sideEffects = isLast && step.sideEffect ? renderSideEffectConfirmationUi(step) : Lit.nothing;
+  const thought = step.thought ? html`<p>${renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` : Lit.nothing;
+
+  // clang-format off
+  const contextDetails = step.contextDetails ?
+  html`${Lit.Directives.repeat(
+    step.contextDetails,
+      contextDetail => {
+        return html`<div class="context-details">
+      <devtools-code-block
+        .code=${contextDetail.text}
+        .codeLang=${contextDetail.codeLang || ''}
+        .displayNotice=${false}
+        .header=${contextDetail.title}
+        .showCopyButton=${true}
+      ></devtools-code-block>
+    </div>`;
+      },
+    )}` : Lit.nothing;
+
+  return html`<div class="step-details">
+    ${thought}
+    ${renderStepCode(step)}
+    ${sideEffects}
+    ${contextDetails}
+  </div>`;
+  // clang-format on
+}
+
+function renderStepBadge({step, isLoading, isLast}: {
+  step: Step,
+  isLoading: boolean,
+  isLast: boolean,
+}): Lit.LitTemplate {
+  if (isLoading && isLast && !step.sideEffect) {
+    return html`<devtools-spinner></devtools-spinner>`;
+  }
+
+  let iconName: string = 'checkmark';
+  let ariaLabel: string|undefined = lockedString(UIStringsNotTranslate.completed);
+  let role: 'button'|undefined = 'button';
+  if (isLast && step.sideEffect) {
+    role = undefined;
+    ariaLabel = undefined;
+    iconName = 'pause-circle';
+  } else if (step.canceled) {
+    ariaLabel = lockedString(UIStringsNotTranslate.canceled);
+    iconName = 'cross';
+  }
+
+  return html`<devtools-icon
+      class="indicator"
+      role=${ifDefined(role)}
+      aria-label=${ifDefined(ariaLabel)}
+      .name=${iconName}
+    ></devtools-icon>`;
+}
+
+function renderStep({step, isLoading, markdownRenderer, isLast}: {
+  step: Step,
+  isLoading: boolean,
+  markdownRenderer: MarkdownRendererWithCodeBlock,
+  isLast: boolean,
+}): Lit.LitTemplate {
+  const stepClasses = Lit.Directives.classMap({
+    step: true,
+    empty: !step.thought && !step.code && !step.contextDetails,
+    paused: Boolean(step.sideEffect),
+    canceled: Boolean(step.canceled),
+  });
+  // clang-format off
+  return html`
+    <details class=${stepClasses}
+      jslog=${VisualLogging.section('step')}
+      .open=${Boolean(step.sideEffect)}>
+      <summary>
+        <div class="summary">
+          ${renderStepBadge({ step, isLoading, isLast })}
+          ${renderTitle(step)}
+          <devtools-icon
+            class="arrow"
+            .name=${'chevron-down'}
+          ></devtools-icon>
+        </div>
+      </summary>
+      ${renderStepDetails({step, markdownRenderer, isLast})}
+    </details>`;
+  // clang-format on
+}
+
+function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
+  if (!step.sideEffect) {
+    return Lit.nothing;
+  }
+
+  // clang-format off
+  return html`<div
+    class="side-effect-confirmation"
+    jslog=${VisualLogging.section('side-effect-confirmation')}
+  >
+    <p>${lockedString(UIStringsNotTranslate.sideEffectConfirmationDescription)}</p>
+    <div class="side-effect-buttons-container">
+      <devtools-button
+        .data=${
+          {
+            variant: Buttons.Button.Variant.OUTLINED,
+            jslogContext: 'decline-execute-code',
+          } as Buttons.Button.ButtonData
+        }
+        @click=${() => step.sideEffect?.onAnswer(false)}
+      >${lockedString(
+        UIStringsNotTranslate.negativeSideEffectConfirmation,
+      )}</devtools-button>
+      <devtools-button
+        .data=${
+          {
+            variant: Buttons.Button.Variant.PRIMARY,
+            jslogContext: 'accept-execute-code',
+            iconName: 'play',
+          } as Buttons.Button.ButtonData
+        }
+        @click=${() => step.sideEffect?.onAnswer(true)}
+      >${
+          lockedString(UIStringsNotTranslate.positiveSideEffectConfirmation)
+      }</devtools-button>
+    </div>
+  </div>`;
+  // clang-format on
+}
+
+function renderError(message: ModelChatMessage): Lit.LitTemplate {
+  if (message.error) {
+    let errorMessage;
+    switch (message.error) {
+      case ErrorType.UNKNOWN:
+      case ErrorType.BLOCK:
+        errorMessage = UIStringsNotTranslate.systemError;
+        break;
+      case ErrorType.MAX_STEPS:
+        errorMessage = UIStringsNotTranslate.maxStepsError;
+        break;
+      case ErrorType.ABORT:
+        return html`<p class="aborted" jslog=${VisualLogging.section('aborted')}>${
+            lockedString(UIStringsNotTranslate.stoppedResponse)}</p>`;
+    }
+
+    return html`<p class="error" jslog=${VisualLogging.section('error')}>${lockedString(errorMessage)}</p>`;
+  }
+
+  return Lit.nothing;
+}
+
+function renderChatMessage({
+  message,
+  isLoading,
+  isReadOnly,
+  canShowFeedbackForm,
+  isLast,
+  userInfo,
+  markdownRenderer,
+  onSuggestionClick,
+  onFeedbackSubmit,
+  onLastAnswerMarkdownViewRef,
+}: {
+  message: ChatMessage,
+  isLoading: boolean,
+  isReadOnly: boolean,
+  canShowFeedbackForm: boolean,
+  isLast: boolean,
+  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
+  markdownRenderer: MarkdownRendererWithCodeBlock,
+  onSuggestionClick: (suggestion: string) => void,
+  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
+  onLastAnswerMarkdownViewRef: (el: Element|undefined) => void,
+}): Lit.TemplateResult {
+  if (message.entity === ChatMessageEntity.USER) {
+    const name = userInfo.accountFullName || lockedString(UIStringsNotTranslate.you);
+    const image = userInfo.accountImage ?
+        html`<img src="data:image/png;base64, ${userInfo.accountImage}" alt="Account avatar" />` :
+        html`<devtools-icon
+          .name=${'profile'}
+        ></devtools-icon>`;
+    // clang-format off
+    return html`<section
+      class="chat-message query"
+      jslog=${VisualLogging.section('question')}
+    >
+      <div class="message-info">
+        ${image}
+        <div class="message-name">
+          <h2>${name}</h2>
+        </div>
+      </div>
+      <div class="message-content">${renderTextAsMarkdown(message.text, markdownRenderer)}</div>
+    </section>`;
+    // clang-format on
+  }
+
+  // clang-format off
+  return html`
+    <section
+      class="chat-message answer"
+      jslog=${VisualLogging.section('answer')}
+    >
+      <div class="message-info">
+        <devtools-icon name="smart-assistant"></devtools-icon>
+        <div class="message-name">
+          <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
+        </div>
+      </div>
+      ${Lit.Directives.repeat(
+        message.steps,
+        (_, index) => index,
+        step => {
+          return renderStep({
+            step,
+            isLoading,
+            markdownRenderer,
+            isLast: [...message.steps.values()].at(-1) === step && isLast,
+          });
+        },
+      )}
+      ${message.answer
+        ? html`<p>${renderTextAsMarkdown(message.answer, markdownRenderer, { animate: !isReadOnly, ref: onLastAnswerMarkdownViewRef })}</p>`
+        : Lit.nothing}
+      ${renderError(message)}
+      ${isLast && isLoading
+        ? Lit.nothing
+        : html`<devtools-widget class="actions" .widgetConfig=${UI.Widget.widgetConfig(UserActionRow, {
+            showRateButtons: message.rpcId !== undefined,
+            onFeedbackSubmit: (rating: Host.AidaClient.Rating, feedback: string) => {
+              if (!message.rpcId) {
+                return;
+              }
+              onFeedbackSubmit(message.rpcId, rating, feedback);
+            },
+            suggestions: isLast ? message.suggestions : undefined,
+            onSuggestionClick,
+            canShowFeedbackForm,
+          })}></devtools-widget>`
+      }
+    </section>
+  `;
+  // clang-format on
+}
+
+function renderSelection({
+  selectedContext,
+  inspectElementToggled,
+  agentType,
+  onContextClick,
+  onInspectElementClick,
+}: {
+  selectedContext: ConversationContext<unknown>|null,
+  inspectElementToggled: boolean,
+  agentType?: AgentType, onContextClick: () => void | Promise<void>, onInspectElementClick: () => void,
+}): Lit.LitTemplate {
+  if (!agentType) {
+    return Lit.nothing;
+  }
+
+  // TODO: currently the picker behavior is SDKNode specific.
+  const hasPickerBehavior = agentType === AgentType.STYLING;
+
+  const resourceClass = Lit.Directives.classMap({
+    'not-selected': !selectedContext,
+    'resource-link': true,
+    'allow-overflow': hasPickerBehavior,
+  });
+
+  if (!selectedContext && !hasPickerBehavior) {
+    return Lit.nothing;
+  }
+
+  const icon = selectedContext?.getIcon() ?? Lit.nothing;
+
+  const handleKeyDown = (ev: KeyboardEvent): void => {
+    if (ev.key === 'Enter') {
+      void onContextClick();
+    }
+  };
+
+  // clang-format off
+  return html`<div class="select-element">
+    ${
+      hasPickerBehavior ? html`
+        <devtools-button
+          .data=${{
+              variant: Buttons.Button.Variant.ICON_TOGGLE,
+              size: Buttons.Button.Size.REGULAR,
+              iconName: 'select-element',
+              toggledIconName: 'select-element',
+              toggleType: Buttons.Button.ToggleType.PRIMARY,
+              toggled: inspectElementToggled,
+              title: lockedString(UIStringsNotTranslate.selectAnElement),
+              jslogContext: 'select-element',
+          } as Buttons.Button.ButtonData}
+          @click=${onInspectElementClick}
+        ></devtools-button>
+      ` : Lit.nothing
+    }
+    <div
+      role=button
+      class=${resourceClass}
+      tabindex=${hasPickerBehavior ? '-1' : '0'}
+      @click=${onContextClick}
+      @keydown=${handleKeyDown}
+    >
+      ${icon}${selectedContext?.getTitle() ?? html`<span>${
+        lockedString(UIStringsNotTranslate.noElementSelected)
+      }</span>`}
+    </div>
+  </div>`;
+  // clang-format on
+}
+
+function renderMessages({
+  messages,
+  isLoading,
+  isReadOnly,
+  canShowFeedbackForm,
+  userInfo,
+  markdownRenderer,
+  onSuggestionClick,
+  onFeedbackSubmit,
+  onLastAnswerMarkdownViewRef,
+  onMessageContainerRef,
+}: {
+  messages: ChatMessage[],
+  isLoading: boolean,
+  isReadOnly: boolean,
+  canShowFeedbackForm: boolean,
+  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
+  markdownRenderer: MarkdownRendererWithCodeBlock,
+  onSuggestionClick: (suggestion: string) => void,
+  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
+  onLastAnswerMarkdownViewRef: (el: Element|undefined) => void,
+  onMessageContainerRef: (el: Element|undefined) => void,
+}): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="messages-container" ${ref(onMessageContainerRef)}>
+      ${messages.map((message, _, array) =>
+        renderChatMessage({
+          message,
+          isLoading,
+          isReadOnly,
+          canShowFeedbackForm,
+          isLast: array.at(-1) === message,
+          userInfo,
+          markdownRenderer,
+          onSuggestionClick,
+          onFeedbackSubmit,
+          onLastAnswerMarkdownViewRef,
+        }),
+      )}
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick}: {
+  isTextInputDisabled: boolean,
+  suggestions: string[],
+  onSuggestionClick: (suggestion: string) => void,
+}): Lit.TemplateResult {
+  // clang-format off
+  return 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">
+      ${suggestions.map(suggestion => {
+        return html`<devtools-button
+          class="suggestion"
+          @click=${() => onSuggestionClick(suggestion)}
+          .data=${
+            {
+              variant: Buttons.Button.Variant.OUTLINED,
+              size: Buttons.Button.Size.REGULAR,
+              title: suggestion,
+              jslogContext: 'suggestion',
+              disabled: isTextInputDisabled,
+            } as Buttons.Button.ButtonData
+          }
+        >${suggestion}</devtools-button>`;
+      })}
+    </div>
+  </div>`;
+  // clang-format on
+}
+
+function renderReadOnlySection({onNewConversation, agentType}: {
+  onNewConversation: () => void,
+  agentType?: AgentType,
+}): Lit.LitTemplate {
+  if (!agentType) {
+    return Lit.nothing;
+  }
+
+  // clang-format off
+  return html`<div
+    class="chat-readonly-container"
+    jslog=${VisualLogging.section('read-only')}
+  >
+    <span>${lockedString(UIStringsNotTranslate.pastConversation)}</span>
+    <devtools-button
+      aria-label=${lockedString(UIStringsNotTranslate.startNewChat)}
+      class="chat-inline-button"
+      @click=${onNewConversation}
+      .data=${{
+        variant: Buttons.Button.Variant.TEXT,
+        title: lockedString(UIStringsNotTranslate.startNewChat),
+        jslogContext: 'start-new-chat',
+      } as Buttons.Button.ButtonData}
+    >${lockedString(UIStringsNotTranslate.startNewChat)}</devtools-button>
+  </div>`;
+  // clang-format on
+}
+
+function renderChatInputButtons(
+    {isLoading, blockedByCrossOrigin, isTextInputDisabled, onCancel, onNewConversation, onCancelCrossOriginChat}: {
+      isLoading: boolean,
+      blockedByCrossOrigin: boolean,
+      isTextInputDisabled: boolean,
+      onCancel: (ev: SubmitEvent) => void,
+      onNewConversation: () => void,
+      onCancelCrossOriginChat?: () => void,
+    }): Lit.TemplateResult {
+  if (isLoading) {
+    // clang-format off
+    return html`<devtools-button
+      class="chat-input-button"
+      aria-label=${lockedString(UIStringsNotTranslate.cancelButtonTitle)}
+      @click=${onCancel}
+      .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 (blockedByCrossOrigin) {
+    // clang-format off
+    return html`
+      ${blockedByCrossOrigin && Boolean(onCancelCrossOriginChat) ? html`<devtools-button
+        class="chat-cancel-context-button"
+        @click=${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>` : Lit.nothing}
+      <devtools-button
+        class="chat-input-button"
+        aria-label=${lockedString(UIStringsNotTranslate.startNewChat)}
+        @click=${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
+  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: isTextInputDisabled,
+        iconName: 'send',
+        title: lockedString(UIStringsNotTranslate.sendButtonTitle),
+        jslogContext: 'send',
+      } as Buttons.Button.ButtonData
+    }
+  ></devtools-button>`;
+}
+
+function renderChatInput({
+  isLoading,
+  blockedByCrossOrigin,
+  isTextInputDisabled,
+  inputPlaceholderString,
+  state,
+  selectedContext,
+  inspectElementToggled,
+  agentType,
+  changeSummary,
+  onContextClick,
+  onInspectElementClick,
+  onSubmit,
+  onTextAreaKeyDown,
+  onCancel,
+  onNewConversation,
+  onCancelCrossOriginChat,
+}: {
+  isLoading: boolean,
+  blockedByCrossOrigin: boolean,
+  isTextInputDisabled: boolean,
+  inputPlaceholderString: Platform.UIString.LocalizedString,
+  state: State,
+  selectedContext: ConversationContext<unknown> | null,
+  inspectElementToggled: boolean,
+  agentType?: AgentType,
+  changeSummary?: string,
+  onContextClick: () => void | Promise<void>,
+  onInspectElementClick: () => void,
+  onSubmit: (ev: SubmitEvent) => void,
+  onTextAreaKeyDown: (ev: KeyboardEvent) => void,
+  onCancel: (ev: SubmitEvent) => void,
+  onNewConversation: () => void,
+  onCancelCrossOriginChat?: () => void,
+}): Lit.LitTemplate {
+  if (!agentType) {
+    return Lit.nothing;
+  }
+
+  const cls = Lit.Directives.classMap({
+    'chat-input': true,
+    'two-big-buttons': blockedByCrossOrigin,
+  });
+
+  // clang-format off
+  return html`
+  <form class="input-form" @submit=${onSubmit}>
+    <div class="input-form-shadow-container">
+      <div class="input-form-shadow"></div>
+    </div>
+    ${state !== State.CONSENT_VIEW ? html`
+      <div class="input-header">
+        <div class="header-link-container">
+          ${renderSelection({
+            selectedContext,
+            inspectElementToggled,
+            agentType,
+            onContextClick,
+            onInspectElementClick,
+          })}
+        </div>
+        ${renderChangeSummary(changeSummary)}
+      </div>
+    ` : Lit.nothing}
+    <div class="chat-input-container">
+      <textarea class=${cls}
+        .disabled=${isTextInputDisabled}
+        wrap="hard"
+        maxlength="10000"
+        @keydown=${onTextAreaKeyDown}
+        placeholder=${inputPlaceholderString}
+        jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}
+      ></textarea>
+      <div class="chat-input-buttons">
+        ${renderChatInputButtons({ isLoading, blockedByCrossOrigin, isTextInputDisabled, onCancel, onNewConversation, onCancelCrossOriginChat })}
+      </div>
+    </div>
+  </form>`;
+  // clang-format on
+}
+
+function renderDisabledState(contents: Lit.TemplateResult): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <div class="empty-state-container">
+      <div class="disabled-view">
+        <div class="disabled-view-icon-container">
+          <devtools-icon .data=${{
+            iconName: 'smart-assistant',
+            width: 'var(--sys-size-8)',
+            height: 'var(--sys-size-8)',
+          } as IconButton.Icon.IconData}>
+          </devtools-icon>
+        </div>
+        <div>
+          ${contents}
+        </div>
+      </div>
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderNoAgentState(): Lit.TemplateResult {
+  const config = Common.Settings.Settings.instance().getHostConfig();
+  const featureCards: {
+    icon: string,
+    heading: string,
+    content: Lit.TemplateResult,
+  }[] =
+      [
+        ...(config.devToolsFreestyler?.enabled ? [{
+          icon: 'brush-2',
+          heading: 'CSS styles',
+          content: html`Open <button class="link" role="link" jslog=${
+              VisualLogging.link('open-elements-panel').track({click: true})} @click=${() => {
+            void UI.ViewManager.ViewManager.instance().showView('elements');
+          }}>Elements</button> to ask about CSS styles`,
+        }] :
+                                                 []),
+        ...(config.devToolsAiAssistanceNetworkAgent?.enabled) ? [{
+          icon: 'arrow-up-down',
+          heading: 'Network',
+          content: html`Open <button class="link" role="link" jslog=${
+              VisualLogging.link('open-network-panel').track({click: true})} @click=${() => {
+            void UI.ViewManager.ViewManager.instance().showView('network');
+          }}>Network</button> to ask about a request's details`,
+        }] :
+                                                                [],
+        ...(config.devToolsAiAssistanceFileAgent?.enabled) ? [{
+          icon: 'document',
+          heading: 'Files',
+          content: html`Open <button class="link" role="link" jslog=${
+              VisualLogging.link('open-sources-panel').track({click: true})} @click=${() => {
+            void UI.ViewManager.ViewManager.instance().showView('sources');
+          }}>Sources</button> to ask about a file's content`,
+        }] :
+                                                             [],
+        ...(config.devToolsAiAssistancePerformanceAgent?.enabled ? [{
+          icon: 'performance',
+          heading: 'Performance',
+          content: html`Open <button class="link" role="link" jslog=${
+              VisualLogging.link('open-performance-panel').track({click: true})} @click=${() => {
+            void UI.ViewManager.ViewManager.instance().showView('timeline');
+          }}>Performance</button> to ask about a trace item`,
+        }] :
+                                                                   []),
+      ];
+
+  // clang-format off
+  return html`
+    <div class="empty-state-container">
+      <div class="header">
+        <div class="icon">
+          <devtools-icon
+            name="smart-assistant"
+          ></devtools-icon>
+        </div>
+        <h1>${lockedString(UIStringsNotTranslate.noAgentStateText)}</h1>
+        <p>To chat about an item, right-click and select <strong>Ask AI</strong></p>
+      </div>
+      <div class="empty-state-content">
+        ${featureCards.map(featureCard => html`
+          <div class="feature-card">
+            <div class="feature-card-icon">
+              <devtools-icon name=${featureCard.icon}></devtools-icon>
+            </div>
+            <div class="feature-card-content">
+              <h3>${featureCard.heading}</h3>
+              <p>${featureCard.content}</p>
+            </div>
+          </div>
+        `)}
+      </div>
+    </div>`;
+  // clang-format on
+}
+
+function renderMainContents({
+  state,
+  aidaAvailability,
+  messages,
+  isLoading,
+  isReadOnly,
+  canShowFeedbackForm,
+  isTextInputDisabled,
+  suggestions,
+  consentViewContents,
+  userInfo,
+  markdownRenderer,
+  agentType,
+  getUnavailableAidaAvailabilityContents,
+  onSuggestionClick,
+  onFeedbackSubmit,
+  onLastAnswerMarkdownViewRef,
+  onMessageContainerRef,
+}: {
+  state: State,
+  aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
+  messages: ChatMessage[],
+  isLoading: boolean,
+  isReadOnly: boolean,
+  canShowFeedbackForm: boolean,
+  isTextInputDisabled: boolean,
+  suggestions: string[],
+  consentViewContents: Lit.TemplateResult,
+  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
+  markdownRenderer: MarkdownRendererWithCodeBlock,
+  agentType?: AgentType,
+           getUnavailableAidaAvailabilityContents:
+               (aidaAvailability: Exclude<
+                   Host.AidaClient.AidaAccessPreconditions, Host.AidaClient.AidaAccessPreconditions.AVAILABLE>) =>
+                   Lit.TemplateResult,
+           onSuggestionClick: (suggestion: string) => void,
+           onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) =>
+               void,
+           onLastAnswerMarkdownViewRef: (el: Element|undefined) => void,
+           onMessageContainerRef: (el: Element|undefined) => void,
+}): Lit.TemplateResult {
+  if (state === State.CONSENT_VIEW) {
+    return renderDisabledState(consentViewContents);
+  }
+
+  if (aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+    return renderDisabledState(getUnavailableAidaAvailabilityContents(aidaAvailability));
+  }
+
+  if (!agentType) {
+    return renderNoAgentState();
+  }
+
+  if (messages.length > 0) {
+    return renderMessages({
+      messages,
+      isLoading,
+      isReadOnly,
+      canShowFeedbackForm,
+      userInfo,
+      markdownRenderer,
+      onSuggestionClick,
+      onFeedbackSubmit,
+      onLastAnswerMarkdownViewRef,
+      onMessageContainerRef,
+    });
+  }
+
+  return renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick});
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-ai-chat-view': ChatView;