chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

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

@@ -4,9 +4,9 @@
 
 import * as Host from '../../../core/host/host.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
-import type * as Trace from '../../../models/trace/trace.js';
+import type * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
-import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {describeWithEnvironment, getGetHostConfigStub} from '../../../testing/EnvironmentHelpers.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import * as Freestyler from '../freestyler.js';
@@ -56,7 +56,7 @@ css
       selectedElement: {} as unknown as SDK.DOMModel.DOMNode,
       selectedFile: null,
       selectedNetworkRequest: {} as unknown as SDK.NetworkRequest.NetworkRequest,
-      selectedStackTrace: {} as unknown as Trace.Helpers.TreeHelpers.TraceEntryNodeForAI,
+      selectedAiCallTree: {} as unknown as TimelineUtils.AICallTree.AICallTree,
       isLoading: false,
       canShowFeedbackForm: false,
       userInfo: {},
@@ -70,7 +70,6 @@ css
         messages: [
           {
             entity: Freestyler.ChatMessageEntity.MODEL,
-            suggestions: [],
             steps: [
               {
                 isLoading: false,
@@ -121,5 +120,36 @@ css
       assert.isTrue(chatInput.disabled);
       assert.strictEqual(chatInput.placeholder, 'Ask a question about the selected element');
     });
+
+    it('shows usage instructions', async () => {
+      const stub = getGetHostConfigStub({
+        devToolsFreestyler: {
+          enabled: true,
+        },
+        devToolsAiAssistanceNetworkAgent: {
+          enabled: true,
+        },
+        devToolsAiAssistanceFileAgent: {
+          enabled: true,
+        },
+        devToolsAiAssistancePerformanceAgent: {
+          enabled: true,
+        },
+      });
+      const props = getProp({
+        agentType: undefined,
+      });
+      const chat = new Freestyler.FreestylerChatUi(props);
+      renderElementIntoDOM(chat);
+      const instructions = chat.shadowRoot?.querySelectorAll('.instructions strong');
+      assert.isDefined(instructions);
+      assert.strictEqual(instructions?.length, 4);
+      assert.strictEqual(instructions[0].textContent, 'CSS help:');
+      assert.strictEqual(instructions[1].textContent, 'File insights:');
+      assert.strictEqual(instructions[2].textContent, 'Network request insights:');
+      assert.strictEqual(instructions[3].textContent, 'Performance analysis:');
+
+      stub.restore();
+    });
   });
 });

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

@@ -3,15 +3,15 @@
 // 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 * as SDK from '../../../core/sdk/sdk.js';
 import type * as Workspace from '../../../models/workspace/workspace.js';
+import * as TimelineUtils from '../../../panels/timeline/utils/utils.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';
@@ -20,10 +20,10 @@ 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, 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 +58,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 +98,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,7 +114,7 @@ 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 Title for the send icon button.
    */
@@ -189,14 +200,54 @@ const UIStringsNotTranslate = {
    *@description Aria label for the cancel icon to be read by screen reader
    */
   canceled: 'Canceled',
+  /*
+   * @description Header text for instructions on how to use the AI assistance feature.
+   */
+  getStarted: 'Hi! Here’s how to get started:',
+  /**
+   * @description AI assistance for CSS.
+   */
+  cssHelp: 'CSS help:',
+  /**
+   * @description Explanation on how to use AI assistance for DOM elements.
+   */
+  cssHelpExplainer:
+      'Navigate to the Elements panel, right-click a DOM element, and select "Ask AI assistant". I’ll be happy to explain its styles or behavior.',
+  /**
+   * @description AI assistance for files.
+   */
+  fileHelp: 'File insights:',
+  /**
+   * @description Explanation on how to use AI assistance for files in the Sources panel.
+   */
+  fileHelpExplainer:
+      'Open the Sources panel, right-click a file, and select "Ask AI". I can provide insights into its purpose or origin.',
+  /**
+   * @description AI assistance for network requests.
+   */
+  networkHelp: 'Network request insights:',
+  /**
+   * @description Explanation on how to use AI assistance for network requests.
+   */
+  networkHelpExplainer:
+      'In the Network panel, right-click any request and select "Ask AI assistant". I’ll help break down what’s happening with each request.',
+  /**
+   * @description AI assistance for performance traces.
+   */
+  performanceHelp: 'Performance analysis:',
+  /**
+   * @description Explanation on how to use AI assistance for performance traces.
+   */
+  performanceHelpExplainer:
+      'In the Performance panel, run a trace. Then, right-click any function in the timeline and select "Ask AI". I’ll help you analyze its performance impact and suggest improvements.',
 };
 
 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) {
+function getInputPlaceholderString(state: State, agentType?: AgentType): Platform.UIString.LocalizedString {
+  if (state === State.CONSENT_VIEW || !agentType) {
     return i18nString(UIStrings.followTheSteps);
   }
   switch (agentType) {
@@ -238,7 +289,7 @@ export interface UserChatMessage {
 export interface ModelChatMessage {
   entity: ChatMessageEntity.MODEL;
   steps: Step[];
-  suggestions?: string[];
+  suggestions?: [string, ...string[]];
   answer?: string;
   error?: ErrorType;
   rpcId?: number;
@@ -251,13 +302,6 @@ 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;
@@ -272,11 +316,11 @@ export interface Props {
   selectedElement: SDK.DOMModel.DOMNode|null;
   selectedFile: Workspace.UISourceCode.UISourceCode|null;
   selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest|null;
-  selectedStackTrace: Trace.Helpers.TreeHelpers.TraceEntryNodeForAI|null;
+  selectedAiCallTree: TimelineUtils.AICallTree.AICallTree|null;
   isLoading: boolean;
   canShowFeedbackForm: boolean;
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>;
-  agentType: AgentType;
+  agentType?: AgentType;
 }
 
 // The model returns multiline code blocks in an erroneous way with the language being in new line.
@@ -304,7 +348,6 @@ class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownIn
 }
 
 export class FreestylerChatUi extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-freestyler-chat-ui`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #markdownRenderer = new MarkdownRendererWithCodeBlock();
   #scrollTop?: number;
@@ -339,7 +382,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;
     }
@@ -381,7 +424,7 @@ export class FreestylerChatUi extends HTMLElement {
     return (this.#props.agentType === AgentType.FREESTYLER && isInputDisabledCheckForFreestylerAgent) ||
         (this.#props.agentType === AgentType.DRJONES_NETWORK_REQUEST && isInputDisabledCheckForDrJonesNetworkAgent) ||
         (this.#props.agentType === AgentType.DRJONES_FILE && isInputDisabledCheckForDrJonesFileAgent) ||
-        !isAidaAvailable || isConsentView;
+        !isAidaAvailable || isConsentView || !this.#props.agentType;
   };
 
   #handleScroll = (ev: Event): void => {
@@ -431,18 +474,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 +656,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,8 +743,7 @@ export class FreestylerChatUi extends HTMLElement {
       // clang-format on
     }
 
-    const shouldShowSuggestions =
-        (isLast && !this.#props.isLoading && message.suggestions && message.suggestions?.length > 0);
+    const shouldShowSuggestions = (isLast && !this.#props.isLoading && message.suggestions);
     // clang-format off
     return html`
       <section class="chat-message answer" jslog=${VisualLogging.section('answer')}>
@@ -717,29 +771,17 @@ export class FreestylerChatUi extends HTMLElement {
         }
         ${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}
+          ${this.#renderUserActionRow(message.rpcId, shouldShowSuggestions ? message.suggestions : undefined)}
         </div>
       </section>
     `;
     // clang-format on
   };
 
-  #renderSelection(): LitHtml.TemplateResult {
+  #renderSelection(): LitHtml.LitTemplate {
+    if (!this.#props.agentType) {
+      return LitHtml.nothing;
+    }
     switch (this.#props.agentType) {
       case AgentType.FREESTYLER:
         return this.#renderSelectAnElement();
@@ -762,12 +804,13 @@ export class FreestylerChatUi extends HTMLElement {
       return html`${LitHtml.nothing}`;
     }
 
-    // TODO(b/371947238): Add icon
+    const icon = PanelUtils.getIconForSourceFile(this.#props.selectedFile);
+
     // clang-format off
     return html`<div class="select-element">
     <div role=button class=${resourceClass}
     @click=${this.#props.onSelectedFileRequestClick}>
-      ${this.#props.selectedFile?.displayName()}
+      ${icon}${this.#props.selectedFile?.displayName()}
     </div></div>`;
     // clang-format on
   }
@@ -829,25 +872,24 @@ export class FreestylerChatUi extends HTMLElement {
 
   #renderSelectedTask = (): LitHtml.TemplateResult => {
     const resourceClass = LitHtml.Directives.classMap({
-      'not-selected': !this.#props.selectedStackTrace,
+      'not-selected': !this.#props.selectedAiCallTree,
       'resource-task': true,
     });
 
-    if (!this.#props.selectedStackTrace) {
+    if (!this.#props.selectedAiCallTree) {
       return html`${LitHtml.nothing}`;
     }
 
-    const selectedNode = Trace.Helpers.TreeHelpers.TraceEntryNodeForAI.getSelectedNodeForTraceEntryTreeForAI(
-        this.#props.selectedStackTrace);
-
-    if (!selectedNode) {
+    const {event} = this.#props.selectedAiCallTree.selectedNode;
+    if (!event) {
       return html`${LitHtml.nothing}`;
     }
 
-    let displayName = selectedNode.type;
-    if (selectedNode.type === 'ProfileCall' && selectedNode.function) {
-      displayName = selectedNode.function;
-    }
+    const displayName = TimelineUtils.EntryName.nameForEntry(event);
+    const handleClick = (): void => {
+      const trace = new SDK.TraceObject.RevealableEvent(event);
+      void Common.Revealer.reveal(trace);
+    };
 
     const iconData = {
       iconName: 'performance',
@@ -856,36 +898,34 @@ export class FreestylerChatUi extends HTMLElement {
     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>`;
+      <div role=button class=${resourceClass} @click=${handleClick}>
+        ${icon}${displayName}
+      </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
@@ -915,25 +955,34 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format on
   };
 
-  #getSuggestions = (): string[] => {
+  #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?',
         ];
     }
   };
@@ -946,7 +995,7 @@ export class FreestylerChatUi extends HTMLElement {
           .disabled=${this.#isTextInputDisabled()}
           wrap="hard"
           @keydown=${this.#handleTextAreaKeyDown}
-          placeholder=${getInputPlaceholderString(this.#props.agentType, this.#props.state)}
+          placeholder=${getInputPlaceholderString(this.#props.state, this.#props.agentType)}
           jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}></textarea>
           ${this.#props.isLoading
             ? html`<devtools-button
@@ -984,7 +1033,7 @@ export class FreestylerChatUi extends HTMLElement {
   };
 
   #getDisclaimerText = (): Platform.UIString.LocalizedString => {
-    if (this.#props.state === State.CONSENT_VIEW) {
+    if (this.#props.state === State.CONSENT_VIEW || !this.#props.agentType) {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
     }
     switch (this.#props.agentType) {
@@ -1008,11 +1057,22 @@ 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 ||
+        config.devToolsAiAssistancePerformanceAgentDogfood?.enabled) {
+      return UIStrings.turnOnForStylesRequestsPerformanceAndFiles;
+    }
+    if (config.devToolsAiAssistanceFileAgent?.enabled || config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
+      return UIStrings.turnOnForStylesRequestsAndFiles;
+    }
+    if (config.devToolsAiAssistanceNetworkAgent?.enabled || config.devToolsExplainThisResourceDogfood?.enabled) {
+      return UIStrings.turnOnForStylesAndRequests;
+    }
+    return UIStrings.turnOnForStyles;
   }
 
   #getUnavailableAidaAvailabilityContents(
@@ -1033,7 +1093,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 +1112,38 @@ export class FreestylerChatUi extends HTMLElement {
     // clang-format on
   }
 
+  #renderNoAgentState(): LitHtml.TemplateResult {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+
+    // clang-format off
+    return html`
+      <div class="messages-container">
+        <section class="no-agent-message" jslog=${VisualLogging.section('no-agent-entrypoint')}>
+          <div class="header">
+            <devtools-icon name="smart-assistant"></devtools-icon>
+            <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
+          </div>
+          <div class="instructions">
+            <p>${lockedString(UIStringsNotTranslate.getStarted)}</p>
+            ${config.devToolsFreestyler?.enabled ? html`
+              <p><strong>${lockedString(UIStringsNotTranslate.cssHelp)}</strong> ${lockedString(UIStringsNotTranslate.cssHelpExplainer)}</p>
+            ` : LitHtml.nothing}
+            ${(config.devToolsAiAssistanceFileAgent?.enabled || config.devToolsAiAssistanceFileAgentDogfood?.enabled) ? html`
+              <p><strong>${lockedString(UIStringsNotTranslate.fileHelp)}</strong> ${lockedString(UIStringsNotTranslate.fileHelpExplainer)}</p>
+            ` : LitHtml.nothing}
+            ${(config.devToolsAiAssistanceNetworkAgent?.enabled  || config.devToolsExplainThisResourceDogfood?.enabled) ? html`
+              <p><strong>${lockedString(UIStringsNotTranslate.networkHelp)}</strong> ${lockedString(UIStringsNotTranslate.networkHelpExplainer)}</p>
+            ` : LitHtml.nothing}
+            ${(config.devToolsAiAssistancePerformanceAgent?.enabled || config.devToolsAiAssistancePerformanceAgentDogfood?.enabled) ? html`
+              <p><strong>${lockedString(UIStringsNotTranslate.performanceHelp)}</strong> ${lockedString(UIStringsNotTranslate.performanceHelpExplainer)}</p>
+            ` : LitHtml.nothing}
+          </div>
+        </section>
+      </div>
+    `;
+    // clang-format on
+  }
+
   #renderMainContents(): LitHtml.TemplateResult {
     if (this.#props.state === State.CONSENT_VIEW) {
       return this.#renderDisabledState(this.#getConsentViewContents());
@@ -1061,6 +1153,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,7 +1168,7 @@ 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`
@@ -1088,18 +1184,16 @@ export class FreestylerChatUi extends HTMLElement {
         <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>

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

@@ -0,0 +1,60 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
+import {
+  describeWithEnvironment,
+} from '../../../testing/EnvironmentHelpers.js';
+import * as Freestyler from '../freestyler.js';
+
+describeWithEnvironment('UserActionRow', () => {
+  it('should show the feedback form when canShowFeedbackForm is true', async () => {
+    const component = new Freestyler.UserActionRow({
+      showRateButtons: true,
+      onFeedbackSubmit: sinon.stub(),
+      canShowFeedbackForm: true,
+      handleSuggestionClick: sinon.stub(),
+    });
+    renderElementIntoDOM(component);
+    const button = component.shadowRoot!.querySelector('.rate-buttons devtools-button')! as HTMLElement;
+    button.click();
+
+    assert(component.shadowRoot!.querySelector('.feedback-form'));
+  });
+
+  it('should not show the feedback form when canShowFeedbackForm is false', async () => {
+    const component = new Freestyler.UserActionRow({
+      showRateButtons: true,
+      onFeedbackSubmit: sinon.stub(),
+      canShowFeedbackForm: false,
+      handleSuggestionClick: sinon.stub(),
+    });
+    renderElementIntoDOM(component);
+
+    const button = component.shadowRoot!.querySelector('.rate-buttons devtools-button')! as HTMLElement;
+    button.click();
+
+    assert.notExists(component.shadowRoot!.querySelector('.feedback-form'));
+  });
+
+  it('should disable the submit button when the input is empty', async () => {
+    const component = new Freestyler.UserActionRow({
+      showRateButtons: true,
+      onFeedbackSubmit: sinon.stub(),
+      canShowFeedbackForm: true,
+      handleSuggestionClick: sinon.stub(),
+    });
+    renderElementIntoDOM(component);
+    const button = component.shadowRoot!.querySelector('.rate-buttons devtools-button')! as HTMLElement;
+    button.click();
+
+    assert(component.shadowRoot!.querySelector('.feedback-form'));
+    const submitButton = component.shadowRoot!.querySelector('[aria-label="Submit"]') as HTMLButtonElement;
+    assert.isTrue(submitButton?.disabled);
+    const inputField = component.shadowRoot!.querySelector('.feedback-form input')! as HTMLInputElement;
+    inputField.value = 'test';
+    inputField.dispatchEvent(new Event('input'));
+    assert.isFalse(submitButton?.disabled);
+  });
+});