chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/{freestyler/components/FreestylerChatUi.test.ts → ai_assistance/components/ChatView.test.ts}

@@ -3,16 +3,15 @@
 // found in the LICENSE file.
 
 import * as Host from '../../../core/host/host.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.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';
+import * as Freestyler from '../ai_assistance.js';
 
 const {MarkdownRendererWithCodeBlock} = Freestyler.FOR_TEST;
 
-describeWithEnvironment('FreestylerChatUi', () => {
+describeWithEnvironment('ChatView', () => {
   describe('MarkdownRendererWithCodeBlock', () => {
     it('should transform code token for multiline code blocks with `css` language written in the first line', () => {
       const renderer = new MarkdownRendererWithCodeBlock();
@@ -58,10 +57,9 @@ css
         const linklessRenderer = new MarkdownRendererWithCodeBlock({stripLinks: true});
         for (const linkCase of linkCases) {
           const elem = renderToElem(linkCase, linklessRenderer);
-          assert.strictEqual(elem.querySelectorAll('a, x-link, devtools-link').length, 0);
-          assert.strictEqual(
-              ['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)), false);
-          assert.ok(elem.textContent?.includes('( https://z.com )'), linkCase);
+          assert.lengthOf(elem.querySelectorAll('a, x-link, devtools-link'), 0);
+          assert.isFalse(['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)));
+          assert.isOk(elem.textContent?.includes('( https://z.com )'), linkCase);
         }
       });
 
@@ -69,10 +67,9 @@ css
         const linkfulRenderer = new MarkdownRendererWithCodeBlock();
         for (const linkCase of linkCases) {
           const elem = renderToElem(linkCase, linkfulRenderer);
-          assert.strictEqual(elem.querySelectorAll('a, x-link, devtools-link').length, 1);
-          assert.strictEqual(
-              ['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)), true);
-          assert.strictEqual(elem.textContent?.includes('( https://z.com )'), false);
+          assert.lengthOf(elem.querySelectorAll('a, x-link, devtools-link'), 1);
+          assert.isTrue(['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)));
+          assert.isFalse(elem.textContent?.includes('( https://z.com )'));
         }
       });
 
@@ -89,13 +86,11 @@ css
         const linklessRenderer = new MarkdownRendererWithCodeBlock({stripLinks: true});
         for (const imageCase of imageCases) {
           const elem = renderToElem(imageCase, linklessRenderer);
-          assert.strictEqual(elem.querySelectorAll('a, x-link, devtools-link, img, devtools-markdown-image').length, 0);
-          assert.strictEqual(
-              ['<a', '<x-link', '<devtools-link', '<img', '<devtools-markdown-image'].some(
-                  tagName => elem.outerHTML.includes(tagName)),
-              false);
+          assert.lengthOf(elem.querySelectorAll('a, x-link, devtools-link, img, devtools-markdown-image'), 0);
+          assert.isFalse(['<a', '<x-link', '<devtools-link', '<img', '<devtools-markdown-image'].some(
+              tagName => elem.outerHTML.includes(tagName)));
 
-          assert.ok(elem.textContent?.includes('( https://z.com/i.png )'), imageCase);
+          assert.isOk(elem.textContent?.includes('( https://z.com/i.png )'), imageCase);
         }
       });
     });
@@ -104,6 +99,8 @@ css
   function getProp(options: Partial<Freestyler.Props>): Freestyler.Props {
     const noop = () => {};
     const messages: Freestyler.ChatMessage[] = options.messages ?? [];
+    const selectedContext = sinon.createStubInstance(Freestyler.NodeContext);
+    selectedContext.getTitle.returns('');
     return {
       onTextSubmit: noop,
       onInspectElementClick: noop,
@@ -113,10 +110,10 @@ css
       onNewConversation: noop,
       inspectElementToggled: false,
       state: Freestyler.State.CHAT_VIEW,
-      agentType: Freestyler.AgentType.FREESTYLER,
+      agentType: Freestyler.AgentType.STYLING,
       aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
       messages,
-      selectedContext: new Freestyler.NodeContext({} as unknown as SDK.DOMModel.DOMNode),
+      selectedContext,
       isLoading: false,
       canShowFeedbackForm: false,
       userInfo: {},
@@ -147,7 +144,7 @@ css
           },
         ],
       });
-      const chat = new Freestyler.FreestylerChatUi(props);
+      const chat = new Freestyler.ChatView(props);
       renderElementIntoDOM(chat);
 
       const sideEffect = chat.shadowRoot!.querySelector('.side-effect-confirmation');
@@ -158,7 +155,7 @@ css
       const props = getProp({
         state: Freestyler.State.CONSENT_VIEW,
       });
-      const chat = new Freestyler.FreestylerChatUi(props);
+      const chat = new Freestyler.ChatView(props);
       renderElementIntoDOM(chat);
 
       const optIn = chat.shadowRoot?.querySelector('.disabled-view');
@@ -174,7 +171,7 @@ css
         state: Freestyler.State.CHAT_VIEW,
         aidaAvailability: Host.AidaClient.AidaAccessPreconditions.NO_INTERNET,
       });
-      const chat = new Freestyler.FreestylerChatUi(props);
+      const chat = new Freestyler.ChatView(props);
       renderElementIntoDOM(chat);
 
       const optIn = chat.shadowRoot?.querySelector('.disabled-view');
@@ -203,7 +200,7 @@ css
         const props = getProp({
           agentType: undefined,
         });
-        const chat = new Freestyler.FreestylerChatUi(props);
+        const chat = new Freestyler.ChatView(props);
         renderElementIntoDOM(chat);
         const featureCards = chat.shadowRoot?.querySelectorAll('.feature-card');
         assert.isDefined(featureCards);
@@ -234,7 +231,7 @@ css
         const props = getProp({
           agentType: undefined,
         });
-        const chat = new Freestyler.FreestylerChatUi(props);
+        const chat = new Freestyler.ChatView(props);
         renderElementIntoDOM(chat);
         const featureCards = chat.shadowRoot?.querySelectorAll('.feature-card');
         assert.isDefined(featureCards);

package/front_end/panels/{freestyler/components/FreestylerChatUi.ts → ai_assistance/components/ChatView.ts}

@@ -9,6 +9,7 @@ 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 * as Root from '../../../core/root/root.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';
@@ -16,9 +17,9 @@ 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 {AgentType, type ContextDetail, type ConversationContext, ErrorType} from '../AiAgent.js';
+import {AgentType, type ContextDetail, type ConversationContext, ErrorType} from '../agents/AiAgent.js';
 
-import freestylerChatUiStyles from './freestylerChatUi.css.js';
+import styles from './chatView.css.js';
 import type {UserActionRowProps} from './UserActionRow.js';
 
 const {html, Directives: {ifDefined, ref}} = LitHtml;
@@ -83,18 +84,38 @@ const UIStringsNotTranslate = {
   /**
    *@description Disclaimer text right after the chat input.
    */
-  inputDisclaimerForDrJonesNetworkAgent:
+  inputDisclaimerForFreestylerAgentEnterpriseNoLogging:
+      'Chat messages and any data the inspected page can access via Web APIs are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+  /**
+   *@description Disclaimer text right after the chat input.
+   */
+  inputDisclaimerForNetworkAgent:
       'Chat messages and the selected network request 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 Disclaimer text right after the chat input.
    */
-  inputDisclaimerForDrJonesFileAgent:
+  inputDisclaimerForNetworkAgentEnterpriseNoLogging:
+      'Chat messages and the selected network request are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+  /**
+   *@description Disclaimer text right after the chat input.
+   */
+  inputDisclaimerForFileAgent:
       'Chat messages and the selected file 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 Disclaimer text right after the chat input.
    */
-  inputDisclaimerForDrJonesPerformanceAgent:
+  inputDisclaimerForFileAgentEnterpriseNoLogging:
+      'Chat messages and the selected file are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+  /**
+   *@description Disclaimer text right after the chat input.
+   */
+  inputDisclaimerForPerformanceAgent:
       '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 Disclaimer text right after the chat input.
+   */
+  inputDisclaimerForPerformanceAgentEnterpriseNoLogging:
+      'Chat messages and the selected call stack are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
   /**
    *@description Placeholder text for the chat UI input.
    */
@@ -102,15 +123,31 @@ const UIStringsNotTranslate = {
   /**
    *@description Placeholder text for the chat UI input.
    */
-  inputPlaceholderForDrJonesNetworkAgent: 'Ask a question about the selected network request',
+  inputPlaceholderForNetworkAgent: 'Ask a question about the selected network request',
   /**
    *@description Placeholder text for the chat UI input.
    */
-  inputPlaceholderForDrJonesFileAgent: 'Ask a question about the selected file',
+  inputPlaceholderForFileAgent: 'Ask a question about the selected file',
   /**
    *@description Placeholder text for the chat UI input.
    */
-  inputPlaceholderForDrJonesPerformanceAgent: 'Ask a question about the selected item and its call tree',
+  inputPlaceholderForPerformanceAgent: 'Ask a question about the selected item and its call tree',
+  /**
+   *@description Placeholder text for the chat UI input when there is no context selected.
+   */
+  inputPlaceholderForFreestylerAgentNoContext: 'Select an element to ask a question',
+  /**
+   *@description Placeholder text for the chat UI input when there is no context selected.
+   */
+  inputPlaceholderForNetworkAgentNoContext: 'Select a network request to ask a question',
+  /**
+   *@description Placeholder text for the chat UI input when there is no context selected.
+   */
+  inputPlaceholderForFileAgentNoContext: 'Select a file to ask a question',
+  /**
+   *@description Placeholder text for the chat UI input when there is no context selected.
+   */
+  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.
    */
@@ -218,7 +255,7 @@ const UIStringsNotTranslate = {
   pastConversation: 'You\'re viewing a past conversation.',
 };
 
-const str_ = i18n.i18n.registerUIStrings('panels/freestyler/components/FreestylerChatUi.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ChatView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
@@ -254,7 +291,7 @@ export interface ModelChatMessage {
   suggestions?: [string, ...string[]];
   answer?: string;
   error?: ErrorType;
-  rpcId?: number;
+  rpcId?: Host.AidaClient.RpcGlobalId;
 }
 
 export type ChatMessage = UserChatMessage|ModelChatMessage;
@@ -267,7 +304,7 @@ export const enum State {
 export interface Props {
   onTextSubmit: (text: string) => void;
   onInspectElementClick: () => void;
-  onFeedbackSubmit: (rpcId: number, rate: Host.AidaClient.Rating, feedback?: string) => void;
+  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void;
   onCancelClick: () => void;
   onContextClick: () => void | Promise<void>;
   onNewConversation: () => void;
@@ -337,7 +374,7 @@ class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownIn
   }
 }
 
-export class FreestylerChatUi extends HTMLElement {
+export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #markdownRenderer = new MarkdownRendererWithCodeBlock();
   #scrollTop?: number;
@@ -369,7 +406,7 @@ export class FreestylerChatUi extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [freestylerChatUiStyles];
+    this.#shadow.adoptedStyleSheets = [styles];
     this.#render();
 
     if (this.#messagesContainerElement) {
@@ -463,13 +500,15 @@ export class FreestylerChatUi extends HTMLElement {
 
     // Agent-specific input disabled rules.
     switch (this.#props.agentType) {
-      case AgentType.FREESTYLER:
+      case AgentType.STYLING:
         return showsSideEffects;
-      case AgentType.DRJONES_NETWORK_REQUEST:
+      case AgentType.NETWORK:
+        return false;
+      case AgentType.FILE:
         return false;
-      case AgentType.DRJONES_FILE:
+      case AgentType.PERFORMANCE:
         return false;
-      case AgentType.DRJONES_PERFORMANCE:
+      case AgentType.PATCH:
         return false;
     }
   };
@@ -548,7 +587,8 @@ export class FreestylerChatUi extends HTMLElement {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
-  #renderUserActionRow(rpcId?: number, suggestions?: [string, ...string[]]): LitHtml.TemplateResult {
+  #renderUserActionRow(rpcId?: Host.AidaClient.RpcGlobalId, suggestions?: [string, ...string[]]):
+      LitHtml.TemplateResult {
     // clang-format off
     return html`<devtools-user-action-row
       .props=${{
@@ -778,6 +818,7 @@ export class FreestylerChatUi extends HTMLElement {
       let errorMessage;
       switch (message.error) {
         case ErrorType.UNKNOWN:
+        case ErrorType.BLOCK:
           errorMessage = UIStringsNotTranslate.systemError;
           break;
         case ErrorType.MAX_STEPS:
@@ -864,20 +905,27 @@ export class FreestylerChatUi extends HTMLElement {
   }
 
   #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,
     });
 
-    // TODO: currently the picker behavior is SDKNode specific.
-    const hasPickerBehavior = this.#props.agentType === AgentType.FREESTYLER;
-
     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">
       ${
@@ -897,11 +945,16 @@ export class FreestylerChatUi extends HTMLElement {
           ></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
+        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
@@ -968,30 +1021,36 @@ export class FreestylerChatUi extends HTMLElement {
       return [];
     }
     switch (this.#props.agentType) {
-      case AgentType.FREESTYLER:
+      case AgentType.STYLING:
         return [
           'What can you help me with?',
           'Why isn’t this element visible?',
           'How do I center this element?',
         ];
-      case AgentType.DRJONES_FILE:
+      case AgentType.FILE:
         return [
           'What does this script do?',
           'Is the script optimized for performance?',
           'Does the script handle user input safely?',
         ];
-      case AgentType.DRJONES_NETWORK_REQUEST:
+      case AgentType.NETWORK:
         return [
           'Why is this network request taking so long?',
           'Are there any security headers present?',
           'Why is the request failing?',
         ];
-      case AgentType.DRJONES_PERFORMANCE:
+      case AgentType.PERFORMANCE:
         return [
           '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?',
         ];
+      case AgentType.PATCH:
+        return [
+          'What can you help me with?',
+          'Why isn’t this element visible?',
+          'How do I center this element?',
+        ];
     }
   };
 
@@ -1008,14 +1067,23 @@ export class FreestylerChatUi extends HTMLElement {
       return lockedString(UIStringsNotTranslate.crossOriginError);
     }
     switch (agentType) {
-      case AgentType.FREESTYLER:
+      case AgentType.PATCH:
         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);
+      case AgentType.STYLING:
+        return this.#props.selectedContext ?
+            lockedString(UIStringsNotTranslate.inputPlaceholderForFreestylerAgent) :
+            lockedString(UIStringsNotTranslate.inputPlaceholderForFreestylerAgentNoContext);
+      case AgentType.FILE:
+        return this.#props.selectedContext ? lockedString(UIStringsNotTranslate.inputPlaceholderForFileAgent) :
+                                             lockedString(UIStringsNotTranslate.inputPlaceholderForFileAgentNoContext);
+      case AgentType.NETWORK:
+        return this.#props.selectedContext ?
+            lockedString(UIStringsNotTranslate.inputPlaceholderForNetworkAgent) :
+            lockedString(UIStringsNotTranslate.inputPlaceholderForNetworkAgentNoContext);
+      case AgentType.PERFORMANCE:
+        return this.#props.selectedContext ?
+            lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceAgent) :
+            lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceAgentNoContext);
     }
   }
 
@@ -1032,6 +1100,7 @@ export class FreestylerChatUi extends HTMLElement {
       <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,
@@ -1124,6 +1193,9 @@ export class FreestylerChatUi extends HTMLElement {
     // 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">
@@ -1151,15 +1223,34 @@ export class FreestylerChatUi extends HTMLElement {
     if (this.#props.state === State.CONSENT_VIEW || !this.#props.agentType || this.#props.isReadOnly) {
       return i18nString(UIStrings.inputDisclaimerForEmptyState);
     }
+    const noLogging = Common.Settings.Settings.instance().getHostConfig().aidaAvailability?.enterprisePolicyValue ===
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
     switch (this.#props.agentType) {
-      case AgentType.FREESTYLER:
+      case AgentType.PATCH:
+        if (noLogging) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForFreestylerAgentEnterpriseNoLogging);
+        }
         return lockedString(UIStringsNotTranslate.inputDisclaimerForFreestylerAgent);
-      case AgentType.DRJONES_FILE:
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForDrJonesFileAgent);
-      case AgentType.DRJONES_NETWORK_REQUEST:
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForDrJonesNetworkAgent);
-      case AgentType.DRJONES_PERFORMANCE:
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForDrJonesPerformanceAgent);
+      case AgentType.STYLING:
+        if (noLogging) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForFreestylerAgentEnterpriseNoLogging);
+        }
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForFreestylerAgent);
+      case AgentType.FILE:
+        if (noLogging) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForFileAgentEnterpriseNoLogging);
+        }
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForFileAgent);
+      case AgentType.NETWORK:
+        if (noLogging) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForNetworkAgentEnterpriseNoLogging);
+        }
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForNetworkAgent);
+      case AgentType.PERFORMANCE:
+        if (noLogging) {
+          return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceAgentEnterpriseNoLogging);
+        }
+        return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceAgent);
     }
   };
 
@@ -1332,7 +1423,7 @@ export class FreestylerChatUi extends HTMLElement {
               this.#renderChatInput()
           }
         </main>
-        <footer class="disclaimer">
+        <footer class="disclaimer" jslog=${VisualLogging.section('footer')}>
           <p class="disclaimer-text">
             ${this.#getDisclaimerText()}
             <button
@@ -1355,7 +1446,7 @@ export class FreestylerChatUi extends HTMLElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-freestyler-chat-ui': FreestylerChatUi;
+    'devtools-ai-chat-view': ChatView;
   }
 }
 
@@ -1363,4 +1454,4 @@ export const FOR_TEST = {
   MarkdownRendererWithCodeBlock,
 };
 
-customElements.define('devtools-freestyler-chat-ui', FreestylerChatUi);
+customElements.define('devtools-ai-chat-view', ChatView);

package/front_end/panels/{freestyler → ai_assistance}/components/UserActionRow.test.ts

@@ -6,7 +6,7 @@ import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {
   describeWithEnvironment,
 } from '../../../testing/EnvironmentHelpers.js';
-import * as Freestyler from '../freestyler.js';
+import * as Freestyler from '../ai_assistance.js';
 
 describeWithEnvironment('UserActionRow', () => {
   it('should show the feedback form when canShowFeedbackForm is true', async () => {

package/front_end/panels/{freestyler → ai_assistance}/components/UserActionRow.ts

@@ -141,6 +141,7 @@ export class UserActionRow extends HTMLElement {
     if (this.#currentRating === rating) {
       this.#currentRating = undefined;
       this.#isShowingFeedbackForm = false;
+      this.#isSubmitButtonDisabled = true;
       // This effectively reset the user rating
       this.#props.onFeedbackSubmit(Host.AidaClient.Rating.SENTIMENT_UNSPECIFIED);
       this.#render();
@@ -155,6 +156,7 @@ export class UserActionRow extends HTMLElement {
 
   #handleClose = (): void => {
     this.#isShowingFeedbackForm = false;
+    this.#isSubmitButtonDisabled = true;
     this.#render();
   };
 
@@ -289,21 +291,23 @@ export class UserActionRow extends HTMLElement {
         <span class="feedback-disclaimer">${
           lockedString(UIStringsNotTranslate.disclaimer)
         }</span>
-        <devtools-button
-        aria-label=${lockedString(UIStringsNotTranslate.submit)}
-        .data=${
-          {
-              type: 'submit',
-              disabled: this.#isSubmitButtonDisabled,
-              variant: Buttons.Button.Variant.OUTLINED,
-              size: Buttons.Button.Size.SMALL,
-              title: lockedString(UIStringsNotTranslate.submit),
-              jslogContext: 'send',
-            } as Buttons.Button.ButtonData
-          }
-        >${
-          lockedString(UIStringsNotTranslate.submit)
-        }</devtools-button>
+        <div>
+          <devtools-button
+          aria-label=${lockedString(UIStringsNotTranslate.submit)}
+          .data=${
+            {
+                type: 'submit',
+                disabled: this.#isSubmitButtonDisabled,
+                variant: Buttons.Button.Variant.OUTLINED,
+                size: Buttons.Button.Size.SMALL,
+                title: lockedString(UIStringsNotTranslate.submit),
+                jslogContext: 'send',
+              } as Buttons.Button.ButtonData
+            }
+          >${
+            lockedString(UIStringsNotTranslate.submit)
+          }</devtools-button>
+        </div>
       </div>
     </form>
     `;