chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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

@@ -3,15 +3,12 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/spinners/spinners.js';
-import './ProvideFeedback.js';
+import './UserActionRow.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';
 import type * as Platform from '../../../core/platform/platform.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
-import * as Trace from '../../../models/trace/trace.js';
-import type * as Workspace from '../../../models/workspace/workspace.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
@@ -19,11 +16,10 @@ import * as MarkdownView from '../../../ui/components/markdown_view/markdown_vie
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import {PanelUtils} from '../../utils/utils.js';
-import {type ContextDetail, ErrorType} from '../AiAgent.js';
+import {AgentType, type ContextDetail, type ConversationContext, ErrorType} from '../AiAgent.js';
 
 import freestylerChatUiStyles from './freestylerChatUi.css.js';
-import type {ProvideFeedbackProps} from './ProvideFeedback.js';
+import type {UserActionRowProps} from './UserActionRow.js';
 
 const {html, Directives: {ifDefined}} = LitHtml;
 
@@ -58,6 +54,17 @@ const UIStrings = {
    *@example {AI assistance in Settings} PH1
    */
   turnOnForStylesAndRequests: 'Turn on {PH1} to get help with styles and network requests',
+  /**
+   *@description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   *@example {AI assistance in Settings} PH1
+   */
+  turnOnForStylesRequestsAndFiles: 'Turn on {PH1} to get help with styles, network requests, and files',
+  /**
+   *@description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   *@example {AI assistance in Settings} PH1
+   */
+  turnOnForStylesRequestsPerformanceAndFiles:
+      'Turn on {PH1} to get help with styles, network requests, performance, and files',
   /**
    *@description The footer disclaimer that links to more information about the AI feature.
    */
@@ -87,7 +94,7 @@ const UIStringsNotTranslate = {
    *@description Disclaimer text right after the chat input.
    */
   inputDisclaimerForDrJonesPerformanceAgent:
-      'Chat messages and the selected call stack are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won\'t always get it right.',
+      'Chat messages and the selected call tree are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won\'t always get it right.',
   /**
    *@description Placeholder text for the chat UI input.
    */
@@ -103,11 +110,23 @@ const UIStringsNotTranslate = {
   /**
    *@description Placeholder text for the chat UI input.
    */
-  inputPlaceholderForDrJonesPerformanceAgent: 'Ask a question about the selected stack trace',
+  inputPlaceholderForDrJonesPerformanceAgent: 'Ask a question about the selected item and its call tree',
+  /**
+   * @description Placeholder text for the input shown when the conversation is blocked because a cross-origin context was selected.
+   */
+  crossOriginError: 'To talk about data from another origin, start a new chat',
+  /**
+   * @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',
   /**
    *@description Title for the send icon button.
    */
   sendButtonTitle: 'Send',
+  /**
+   *@description Title for the start new chat
+   */
+  startNewChat: 'Start new chat',
   /**
    *@description Title for the cancel icon button.
    */
@@ -124,6 +143,10 @@ const UIStringsNotTranslate = {
    *@description Text for the empty state of the AI assistance panel.
    */
   emptyStateText: 'How can I help you?',
+  /**
+   *@description Text for the empty state of the AI assistance panel when there is no agent selected.
+   */
+  noAgentStateText: 'Explore AI assistance',
   /**
    * @description The error message when the LLM loop is stopped for some reason (Max steps reached or request to LLM failed)
    */
@@ -189,28 +212,16 @@ const UIStringsNotTranslate = {
    *@description Aria label for the cancel icon to be read by screen reader
    */
   canceled: 'Canceled',
+  /**
+   *@description Text displayed when the chat input is disabled due to reading past conversation.
+   */
+  pastConversation: 'You\'re viewing a past conversation.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/freestyler/components/FreestylerChatUi.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
-function getInputPlaceholderString(agentType: AgentType, state: State): Platform.UIString.LocalizedString {
-  if (state === State.CONSENT_VIEW) {
-    return i18nString(UIStrings.followTheSteps);
-  }
-  switch (agentType) {
-    case AgentType.FREESTYLER:
-      return lockedString(UIStringsNotTranslate.inputPlaceholderForFreestylerAgent);
-    case AgentType.DRJONES_FILE:
-      return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesFileAgent);
-    case AgentType.DRJONES_NETWORK_REQUEST:
-      return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesNetworkAgent);
-    case AgentType.DRJONES_PERFORMANCE:
-      return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesPerformanceAgent);
-  }
-}
-
 export interface Step {
   isLoading: boolean;
   thought?: string;
@@ -238,7 +249,7 @@ export interface UserChatMessage {
 export interface ModelChatMessage {
   entity: ChatMessageEntity.MODEL;
   steps: Step[];
-  suggestions?: string[];
+  suggestions?: [string, ...string[]];
   answer?: string;
   error?: ErrorType;
   rpcId?: number;
@@ -251,32 +262,26 @@ export const enum State {
   CHAT_VIEW = 'chat-view',
 }
 
-export const enum AgentType {
-  FREESTYLER = 'freestyler',
-  DRJONES_FILE = 'drjones-file',
-  DRJONES_NETWORK_REQUEST = 'drjones-network-request',
-  DRJONES_PERFORMANCE = 'drjones-performance',
-}
-
 export interface Props {
   onTextSubmit: (text: string) => void;
   onInspectElementClick: () => void;
   onFeedbackSubmit: (rpcId: number, rate: Host.AidaClient.Rating, feedback?: string) => void;
   onCancelClick: () => void;
-  onSelectedNetworkRequestClick: () => void | Promise<void>;
-  onSelectedFileRequestClick: () => void | Promise<void>;
+  onContextClick: () => void | Promise<void>;
+  onNewConversation: () => void;
   inspectElementToggled: boolean;
   state: State;
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
   messages: ChatMessage[];
-  selectedElement: SDK.DOMModel.DOMNode|null;
-  selectedFile: Workspace.UISourceCode.UISourceCode|null;
-  selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null;
-  selectedStackTrace: Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null;
+  selectedContext: ConversationContext<unknown>|null;
   isLoading: boolean;
   canShowFeedbackForm: boolean;
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>;
-  agentType: AgentType;
+  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.
@@ -290,6 +295,11 @@ export interface Props {
 // }
 // ```
 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');
@@ -299,14 +309,34 @@ class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownIn
       }
     }
 
+    // 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);
   }
 }
 
 export class FreestylerChatUi extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-freestyler-chat-ui`;
   readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #markdownRenderer = new MarkdownRendererWithCodeBlock();
+  #markdownRenderer = new MarkdownRendererWithCodeBlock();
   #scrollTop?: number;
   #props: Props;
 
@@ -316,6 +346,7 @@ export class FreestylerChatUi extends HTMLElement {
   }
 
   set props(props: Props) {
+    this.#markdownRenderer = new MarkdownRendererWithCodeBlock({stripLinks: props.stripLinks});
     this.#props = props;
     this.#render();
   }
@@ -339,7 +370,7 @@ export class FreestylerChatUi extends HTMLElement {
       return;
     }
 
-    const scrollContainer = this.#shadow.querySelector('.messages-scroll-container') as HTMLElement;
+    const scrollContainer = this.#shadow.querySelector('.chat-ui main') as HTMLElement;
     if (!scrollContainer) {
       return;
     }
@@ -365,6 +396,9 @@ export class FreestylerChatUi extends HTMLElement {
   }
 
   #isTextInputDisabled = (): boolean => {
+    if (this.#props.blockedByCrossOrigin || this.#props.requiresNewConversation) {
+      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 => {
@@ -373,15 +407,25 @@ export class FreestylerChatUi extends HTMLElement {
       });
     });
 
-    const isInputDisabledCheckForFreestylerAgent = !Boolean(this.#props.selectedElement) || showsSideEffects;
-    const isInputDisabledCheckForDrJonesNetworkAgent = !Boolean(this.#props.selectedNetworkRequest);
-    const isInputDisabledCheckForDrJonesFileAgent =
-        !Boolean(this.#props.selectedFile) || !this.#props.selectedFile?.contentType().isTextType();
+    if (!isAidaAvailable || isConsentView || !this.#props.agentType) {
+      return true;
+    }
+
+    if (!this.#props.selectedContext) {
+      return true;
+    }
 
-    return (this.#props.agentType === AgentType.FREESTYLER && isInputDisabledCheckForFreestylerAgent) ||
-        (this.#props.agentType === AgentType.DRJONES_NETWORK_REQUEST && isInputDisabledCheckForDrJonesNetworkAgent) ||
-        (this.#props.agentType === AgentType.DRJONES_FILE && isInputDisabledCheckForDrJonesFileAgent) ||
-        !isAidaAvailable || isConsentView;
+    // Agent-specific input disabled rules.
+    switch (this.#props.agentType) {
+      case AgentType.FREESTYLER:
+        return showsSideEffects;
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        return false;
+      case AgentType.DRJONES_FILE:
+        return false;
+      case AgentType.DRJONES_PERFORMANCE:
+        return false;
+    }
   };
 
   #handleScroll = (ev: Event): void => {
@@ -431,18 +475,25 @@ export class FreestylerChatUi extends HTMLElement {
   #handleSuggestionClick = (suggestion: string): void => {
     this.#setInputText(suggestion);
     this.focusTextInput();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
-  #renderRateButtons(rpcId: number): LitHtml.TemplateResult {
+  #renderUserActionRow(rpcId?: number, suggestions?: [string, ...string[]]): LitHtml.TemplateResult {
     // clang-format off
-    return html`<devtools-provide-feedback
+    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 ProvideFeedbackProps}
-      ></devtools-provide-feedback>`;
+      } as UserActionRowProps}
+      ></devtools-user-action-row>`;
     // clang-format on
   }
 
@@ -606,7 +657,12 @@ export class FreestylerChatUi extends HTMLElement {
     if (!step.sideEffect) {
       return LitHtml.nothing;
     }
-    const sideEffectAction = step.sideEffect.onAnswer;
+
+    const sideEffectAction = (answer: boolean): void => {
+      step.sideEffect?.onAnswer(answer);
+      step.sideEffect = undefined;
+      this.#render();
+    };
 
     // clang-format off
     return html`<div
@@ -688,15 +744,14 @@ export class FreestylerChatUi extends HTMLElement {
       // clang-format on
     }
 
-    const shouldShowSuggestions =
-        (isLast && !this.#props.isLoading && message.suggestions && message.suggestions?.length > 0);
     // clang-format off
     return html`
-      <section class="chat-message answer" jslog=${VisualLogging.section('answer')}>
+      <section
+        class="chat-message answer"
+        jslog=${VisualLogging.section('answer')}
+      >
         <div class="message-info">
-          <devtools-icon
-            name="smart-assistant"
-          ></devtools-icon>
+          <devtools-icon name="smart-assistant"></devtools-icon>
           <div class="message-name">
             <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
           </div>
@@ -710,182 +765,93 @@ export class FreestylerChatUi extends HTMLElement {
             });
           },
         )}
-        ${
-          message.answer
-            ? html`<p>${this.#renderTextAsMarkdown(message.answer)}</p>`
-            : LitHtml.nothing
-        }
+        ${message.answer
+          ? html`<p>${this.#renderTextAsMarkdown(message.answer)}</p>`
+          : LitHtml.nothing}
         ${this.#renderError(message)}
         <div class="actions">
-          ${
-            message.rpcId !== undefined
-              ? this.#renderRateButtons(message.rpcId)
-              : LitHtml.nothing
-          }
-          ${shouldShowSuggestions ?
-            html`<div class="suggestions">
-              ${message.suggestions?.map(suggestion => html`<devtools-button
-                  .data=${{
-                      variant: Buttons.Button.Variant.OUTLINED,
-                      title: suggestion,
-                      jslogContext: 'suggestion',
-                  } as Buttons.Button.ButtonData}
-                  @click=${() => this.#handleSuggestionClick(suggestion)}
-                >${suggestion}</devtools-button>`)}
-            </div>` : LitHtml.nothing}
+          ${isLast && this.#props.isLoading
+            ? LitHtml.nothing
+            : this.#renderUserActionRow(
+                message.rpcId,
+                isLast ? message.suggestions : undefined,
+              )}
         </div>
       </section>
     `;
     // clang-format on
   };
 
-  #renderSelection(): LitHtml.TemplateResult {
-    switch (this.#props.agentType) {
-      case AgentType.FREESTYLER:
-        return this.#renderSelectAnElement();
-      case AgentType.DRJONES_FILE:
-        return this.#renderSelectedFileName();
-      case AgentType.DRJONES_NETWORK_REQUEST:
-        return this.#renderSelectedNetworkRequest();
-      case AgentType.DRJONES_PERFORMANCE:
-        return this.#renderSelectedTask();
-    }
-  }
-
-  #renderSelectedFileName(): LitHtml.TemplateResult {
-    const resourceClass = LitHtml.Directives.classMap({
-      'not-selected': !this.#props.selectedFile,
-      'resource-link': true,
-    });
-
-    if (!this.#props.selectedFile) {
-      return html`${LitHtml.nothing}`;
+  #renderSelection(): LitHtml.LitTemplate {
+    if (!this.#props.agentType) {
+      return LitHtml.nothing;
     }
-
-    // TODO(b/371947238): Add icon
-    // clang-format off
-    return html`<div class="select-element">
-    <div role=button class=${resourceClass}
-    @click=${this.#props.onSelectedFileRequestClick}>
-      ${this.#props.selectedFile?.displayName()}
-    </div></div>`;
-    // clang-format on
+    return this.#renderContextSelector();
   }
 
-  #renderSelectedNetworkRequest = (): LitHtml.TemplateResult => {
+  #renderContextSelector(): LitHtml.LitTemplate {
     const resourceClass = LitHtml.Directives.classMap({
-      'not-selected': !this.#props.selectedNetworkRequest,
+      'not-selected': !this.#props.selectedContext,
       'resource-link': true,
     });
 
-    if (!this.#props.selectedNetworkRequest) {
-      return html`${LitHtml.nothing}`;
-    }
-
-    const icon = PanelUtils.getIconForNetworkRequest(this.#props.selectedNetworkRequest);
-    // clang-format off
-    return html`<div class="select-element">
-    <div role=button class=${resourceClass}
-    @click=${this.#props.onSelectedNetworkRequestClick}>
-      ${icon}${this.#props.selectedNetworkRequest?.name()}
-    </div></div>`;
-    // clang-format on
-  };
-
-  #renderSelectAnElement = (): LitHtml.TemplateResult => {
-    const resourceClass = LitHtml.Directives.classMap({
-      'not-selected': !this.#props.selectedElement,
-      'resource-link': true,
-    });
-
-    // clang-format off
-    return html`
-      <div class="select-element">
-        <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>
-        <div class=${resourceClass}>${
-          this.#props.selectedElement
-            ? LitHtml.Directives.until(
-                  Common.Linkifier.Linkifier.linkify(this.#props.selectedElement),
-                )
-            : html`<span>${
-              lockedString(UIStringsNotTranslate.noElementSelected)
-            }</span>`
-        }</div>
-      </div>`;
-    // clang-format on
-  };
-
-  #renderSelectedTask = (): LitHtml.TemplateResult => {
-    const resourceClass = LitHtml.Directives.classMap({
-      'not-selected': !this.#props.selectedStackTrace,
-      'resource-task': true,
-    });
+    // TODO: currently the picker behavior is SDKNode specific.
+    const hasPickerBehavior = this.#props.agentType === AgentType.FREESTYLER;
 
-    if (!this.#props.selectedStackTrace) {
-      return html`${LitHtml.nothing}`;
-    }
-
-    const selectedNode = Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.getSelectedNodeForTraceEntryTreeForAI(
-        this.#props.selectedStackTrace);
-
-    if (!selectedNode) {
-      return html`${LitHtml.nothing}`;
+    if (!this.#props.selectedContext && !hasPickerBehavior) {
+      return LitHtml.nothing;
     }
 
-    let displayName = selectedNode.type;
-    if (selectedNode.type === 'ProfileCall' && selectedNode.function) {
-      displayName = selectedNode.function;
-    }
+    const icon = this.#props.selectedContext?.getIcon() ?? LitHtml.nothing;
 
-    const iconData = {
-      iconName: 'performance',
-      color: 'var(--sys-color-on-surface-subtle)',
-    };
-    const icon = PanelUtils.createIconElement(iconData, 'Performance');
-    icon.classList.add('icon');
-
-    // TODO(b/371118936): Make the div clickable
     // clang-format off
     return html`<div class="select-element">
-    <div class=${resourceClass}>
-      ${icon}${displayName}
-    </div></div>`;
+      ${
+        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}
+        @click=${this.#props.onContextClick}>
+          ${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-scroll-container" @scroll=${this.#handleScroll}>
-        <div class="messages-container">
-          ${this.#props.messages.map((message, _, array) =>
-            this.#renderChatMessage(message, {
-              isLast: array.at(-1) === message,
-            }),
-          )}
-        </div>
+      <div class="messages-container">
+        ${this.#props.messages.map((message, _, array) =>
+          this.#renderChatMessage(message, {
+            isLast: array.at(-1) === message,
+          }),
+        )}
       </div>
     `;
     // clang-format on
   };
 
   #renderEmptyState = (): LitHtml.TemplateResult => {
-    const suggestions = this.#getSuggestions();
+    const suggestions = this.#getEmptyStateSuggestions();
 
     // clang-format off
-    return html`<div class="empty-state-container messages-scroll-container">
+    return html`<div class="empty-state-container">
       <div class="header">
         <div class="icon">
           <devtools-icon
@@ -894,7 +860,7 @@ export class FreestylerChatUi extends HTMLElement {
         </div>
         <h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>
       </div>
-      <div class="suggestions">
+      <div class="empty-state-content">
         ${suggestions.map(suggestion => {
           return html`<devtools-button
             class="suggestion"
@@ -915,76 +881,175 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format on
   };
 
-  #getSuggestions = (): string[] => {
+  #onNewConversation(): void {
+    this.#props.onNewConversation();
+  }
+
+  #getEmptyStateSuggestions = (): string[] => {
+    if (!this.#props.agentType) {
+      return [];
+    }
     switch (this.#props.agentType) {
       case AgentType.FREESTYLER:
         return [
+          'What can you help me with?',
           'Why isn’t this element visible?',
-          'Why does this element overlap another?',
           'How do I center this element?',
         ];
       case AgentType.DRJONES_FILE:
         return [
-          'What are the key functions in this file and what are they doing?',
+          'What does this script do?',
+          'Is the script optimized for performance?',
+          'Does the script handle user input safely?',
         ];
       case AgentType.DRJONES_NETWORK_REQUEST:
         return [
-          'Why is this network request taking longer to complete?',
+          'Why is this network request taking so long?',
+          'Are there any security headers present?',
+          'Why is the request failing?',
         ];
       case AgentType.DRJONES_PERFORMANCE:
         return [
-          'Is this item on the critical rendering path?',
+          'Identify performance issues in this call tree',
+          'Where is most of the time being spent in this call tree?',
+          'How can I reduce the time of this call tree?',
         ];
     }
   };
 
-  #renderChatInput = (): LitHtml.TemplateResult => {
+  #getInputPlaceholderString(): Platform.UIString.LocalizedString {
+    const state = this.#props.state;
+    const agentType = this.#props.agentType;
+    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);
+    }
+    switch (agentType) {
+      case AgentType.FREESTYLER:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForFreestylerAgent);
+      case AgentType.DRJONES_FILE:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesFileAgent);
+      case AgentType.DRJONES_NETWORK_REQUEST:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesNetworkAgent);
+      case AgentType.DRJONES_PERFORMANCE:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForDrJonesPerformanceAgent);
+    }
+  }
+
+  #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)}
+        @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
+  }
+
+  #renderChatInputButton(): LitHtml.TemplateResult {
+    if (this.#props.isLoading) {
+      // clang-format off
+      return html`<devtools-button
+        class="chat-input-button"
+        aria-label=${lockedString(UIStringsNotTranslate.cancelButtonTitle)}
+        @click=${this.#handleCancel}
+        .data=${
+          {
+            variant: Buttons.Button.Variant.ICON,
+            size: Buttons.Button.Size.REGULAR,
+            iconName: 'record-stop',
+            title: lockedString(UIStringsNotTranslate.cancelButtonTitle),
+            jslogContext: 'stop',
+          } as Buttons.Button.ButtonData
+        }
+      ></devtools-button>`;
+      // clang-format on
+    }
+    if (this.#props.blockedByCrossOrigin || this.#props.requiresNewConversation) {
+      // clang-format off
+      return html`<devtools-button
+        class="chat-input-button"
+        aria-label=${lockedString(UIStringsNotTranslate.startNewChat)}
+        @click=${this.#onNewConversation}
+        .data=${
+          {
+            variant: Buttons.Button.Variant.PRIMARY,
+            size: Buttons.Button.Size.REGULAR,
+            title: lockedString(UIStringsNotTranslate.startNewChat),
+            jslogContext: 'start-new-chat',
+          } as Buttons.Button.ButtonData
+        }
+      >${lockedString(UIStringsNotTranslate.startNewChat)}</devtools-button>`;
+      // 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;
+    }
+
     // clang-format off
     return html`
+    <form class="input-form" @submit=${this.#handleSubmit}>
+      ${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="chat-input"
           .disabled=${this.#isTextInputDisabled()}
           wrap="hard"
           @keydown=${this.#handleTextAreaKeyDown}
-          placeholder=${getInputPlaceholderString(this.#props.agentType, this.#props.state)}
-          jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}></textarea>
-          ${this.#props.isLoading
-            ? html`<devtools-button
-              class="chat-input-button"
-              aria-label=${lockedString(UIStringsNotTranslate.cancelButtonTitle)}
-              @click=${this.#handleCancel}
-              .data=${
-                {
-                  variant: Buttons.Button.Variant.ICON,
-                  size: Buttons.Button.Size.REGULAR,
-                  disabled: this.#isTextInputDisabled(),
-                  iconName: 'record-stop',
-                  title: lockedString(UIStringsNotTranslate.cancelButtonTitle),
-                  jslogContext: 'stop',
-                } as Buttons.Button.ButtonData
-              }
-            ></devtools-button>`
-            : html`<devtools-button
-              class="chat-input-button"
-              aria-label=${lockedString(UIStringsNotTranslate.sendButtonTitle)}
-              .data=${
-                {
-                  type: 'submit',
-                  variant: Buttons.Button.Variant.ICON,
-                  size: Buttons.Button.Size.REGULAR,
-                  disabled: this.#isTextInputDisabled(),
-                  iconName: 'send',
-                  title: lockedString(UIStringsNotTranslate.sendButtonTitle),
-                  jslogContext: 'send',
-                } as Buttons.Button.ButtonData
-              }
-            ></devtools-button>`}
-      </div>`;
+          placeholder=${this.#getInputPlaceholderString()}
+          jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}
+        ></textarea>
+        ${this.#renderChatInputButton()}
+      </div>
+    </form>`;
     // clang-format on
   };
 
   #getDisclaimerText = (): Platform.UIString.LocalizedString => {
-    if (this.#props.state === State.CONSENT_VIEW) {
+    if (this.#props.state === State.CONSENT_VIEW || !this.#props.agentType || this.#props.isReadOnly) {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
     }
     switch (this.#props.agentType) {
@@ -1008,11 +1073,21 @@ export class FreestylerChatUi extends HTMLElement {
       void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
     });
     settingsLink.setAttribute('jslog', `${VisualLogging.action('open-ai-settings').track({click: true})}`);
+    return html`${i18n.i18n.getFormatLocalizedString(str_, this.#getStringForConsentView(), {PH1: settingsLink})}`;
+  }
+
+  #getStringForConsentView(): string {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    return html`${
-        config.devToolsExplainThisResourceDogfood?.enabled ?
-            i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStylesAndRequests, {PH1: settingsLink}) :
-            i18n.i18n.getFormatLocalizedString(str_, UIStrings.turnOnForStyles, {PH1: settingsLink})}`;
+    if (config.devToolsAiAssistancePerformanceAgent?.enabled) {
+      return UIStrings.turnOnForStylesRequestsPerformanceAndFiles;
+    }
+    if (config.devToolsAiAssistanceFileAgent?.enabled) {
+      return UIStrings.turnOnForStylesRequestsAndFiles;
+    }
+    if (config.devToolsAiAssistanceNetworkAgent?.enabled) {
+      return UIStrings.turnOnForStylesAndRequests;
+    }
+    return UIStrings.turnOnForStyles;
   }
 
   #getUnavailableAidaAvailabilityContents(
@@ -1033,7 +1108,7 @@ export class FreestylerChatUi extends HTMLElement {
   #renderDisabledState(contents: LitHtml.TemplateResult): LitHtml.TemplateResult {
     // clang-format off
     return html`
-      <div class="empty-state-container messages-scroll-container">
+      <div class="empty-state-container">
         <div class="disabled-view">
           <div class="disabled-view-icon-container">
             <devtools-icon .data=${{
@@ -1052,6 +1127,81 @@ export class FreestylerChatUi extends HTMLElement {
     // 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());
@@ -1061,6 +1211,10 @@ export class FreestylerChatUi extends HTMLElement {
       return this.#renderDisabledState(this.#getUnavailableAidaAvailabilityContents(this.#props.aidaAvailability));
     }
 
+    if (!this.#props.agentType) {
+      return this.#renderNoAgentState();
+    }
+
     if (this.#props.messages.length > 0) {
       return this.#renderMessages();
     }
@@ -1072,34 +1226,26 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format off
     LitHtml.render(html`
       <div class="chat-ui">
-        <main>
+        <main @scroll=${this.#handleScroll}>
           ${this.#renderMainContents()}
-          <form class="input-form" @submit=${this.#handleSubmit}>
-            ${this.#props.state !== State.CONSENT_VIEW ? html`
-              <div class="input-header">
-                <div class="header-link-container">
-                  ${this.#renderSelection()}
-                </div>
-              </div>
-            ` : LitHtml.nothing}
-            ${this.#renderChatInput()}
-          </form>
+          ${this.#props.isReadOnly ?
+              this.#renderReadOnlySection() :
+              this.#renderChatInput()
+          }
         </main>
         <footer class="disclaimer">
           <p class="disclaimer-text">
             ${this.#getDisclaimerText()}
-            <x-link
+            <button
               class="link"
+              role="link"
               jslog=${VisualLogging.link('open-ai-settings').track({
                 click: true,
               })}
-              @click=${(event: Event) => {
-                event.preventDefault();
-                void UI.ViewManager.ViewManager.instance().showView(
-                  'chrome-ai',
-                );
+              @click=${() => {
+                void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
               }}
-            >${i18nString(UIStrings.learnAbout)}</x-link>
+            >${i18nString(UIStrings.learnAbout)}</button>
           </p>
         </footer>
       </div>