chrome-devtools-frontend 1.0.1559913 → 1.0.1561528

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

@@ -2,12 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/markdown_view/markdown_view.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 * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
+import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
+import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UIHelpers from '../../../ui/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -15,7 +21,11 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import userActionRowStyles from './userActionRow.css.js';
 
-const {html, Directives: {ref}} = Lit;
+const {html, Directives: {ref, ifDefined}} = Lit;
+const lockedString = i18n.i18n.lockedString;
+
+const REPORT_URL = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
+const SCROLL_ROUNDING_OFFSET = 1;
 
 /*
 * Strings that don't need to be translated at this time.
@@ -70,13 +80,132 @@ const UIStringsNotTranslate = {
    * @description The title of the button that copies the AI-generated response to the clipboard.
    */
   copyResponse: 'Copy response',
+  /**
+   * @description The error message when the request to the LLM failed for some reason.
+   */
+  systemError:
+      'Something unforeseen happened and I can no longer continue. Try your request again and see if that resolves the issue. If this keeps happening, update Chrome to the latest version.',
+  /**
+   * @description The error message when the LLM gets stuck in a loop (max steps reached).
+   */
+  maxStepsError: 'Seems like I am stuck with the investigation. It would be better if you start over.',
+  /**
+   * @description Displayed when the user stop the response
+   */
+  stoppedResponse: 'You stopped this response',
+  /**
+   * @description Prompt for user to confirm code execution that may affect the page.
+   */
+  sideEffectConfirmationDescription: 'This code may modify page content. Continue?',
+  /**
+   * @description Button text that confirm code execution that may affect the page.
+   */
+  positiveSideEffectConfirmation: 'Continue',
+  /**
+   * @description Button text that cancels code execution that may affect the page.
+   */
+  negativeSideEffectConfirmation: 'Cancel',
+  /**
+   * @description The generic name of the AI agent (do not translate)
+   */
+  ai: 'AI',
+  /**
+   * @description The fallback text when we can't find the user full name
+   */
+  you: 'You',
+  /**
+   * @description The fallback text when a step has no title yet
+   */
+  investigating: 'Investigating',
+  /**
+   * @description Prefix to the title of each thinking step of a user action is required to continue
+   */
+  paused: 'Paused',
+  /**
+   * @description Heading text for the code block that shows the executed code.
+   */
+  codeExecuted: 'Code executed',
+  /**
+   * @description Heading text for the code block that shows the code to be executed after side effect confirmation.
+   */
+  codeToExecute: 'Code to execute',
+  /**
+   * @description Heading text for the code block that shows the returned data.
+   */
+  dataReturned: 'Data returned',
+  /**
+   * @description Aria label for the check mark icon to be read by screen reader
+   */
+  completed: 'Completed',
+  /**
+   * @description Aria label for the cancel icon to be read by screen reader
+   */
+  canceled: 'Canceled',
+  /**
+   * @description Alt text for the image input (displayed in the chat messages) that has been sent to the model.
+   */
+  imageInputSentToTheModel: 'Image input sent to the model',
+  /**
+   * @description Alt text for the account avatar.
+   */
+  accountAvatar: 'Account avatar',
+  /**
+   * @description Title for the x-link which wraps the image input rendered in chat messages.
+   */
+  openImageInNewTab: 'Open image in a new tab',
+  /**
+   * @description Alt text for image when it is not available.
+   */
+  imageUnavailable: 'Image unavailable',
 } as const;
 
-const lockedString = i18n.i18n.lockedString;
+export interface Step {
+  isLoading: boolean;
+  thought?: string;
+  title?: string;
+  code?: string;
+  output?: string;
+  canceled?: boolean;
+  sideEffect?: ConfirmSideEffectDialog;
+  contextDetails?: [AiAssistanceModel.AiAgent.ContextDetail, ...AiAssistanceModel.AiAgent.ContextDetail[]];
+}
 
-const REPORT_URL = 'https://support.google.com/legal/troubleshooter/1114905?hl=en#ts=1115658%2C13380504' as
-    Platform.DevToolsPath.UrlString;
-const SCROLL_ROUNDING_OFFSET = 1;
+export interface ConfirmSideEffectDialog {
+  onAnswer: (result: boolean) => void;
+}
+
+export const enum ChatMessageEntity {
+  MODEL = 'model',
+  USER = 'user',
+}
+
+export interface AnswerPart {
+  type: 'answer';
+  text: string;
+  suggestions?: [string, ...string[]];
+}
+
+export interface StepPart {
+  type: 'step';
+  step: Step;
+}
+
+export type ModelMessagePart = AnswerPart|StepPart;
+
+export interface UserChatMessage {
+  entity: ChatMessageEntity.USER;
+  text: string;
+  imageInput?: Host.AidaClient.Part;
+}
+
+export interface ModelChatMessage {
+  entity: ChatMessageEntity.MODEL;
+  parts: ModelMessagePart[];
+  error?: AiAssistanceModel.AiAgent.ErrorType;
+  rpcId?: Host.AidaClient.RpcGlobalId;
+}
+
+export type ChatMessage = UserChatMessage|ModelChatMessage;
 
 export interface RatingViewInput {
   currentRating?: Host.AidaClient.Rating;
@@ -104,7 +233,8 @@ export interface FeedbackFormViewInput {
   isSubmitButtonDisabled: boolean;
 }
 
-export type UserActionRowViewInput = RatingViewInput&ActionViewInput&SuggestionViewInput&FeedbackFormViewInput;
+export type UserActionRowViewInput =
+    MessageInput&RatingViewInput&ActionViewInput&SuggestionViewInput&FeedbackFormViewInput;
 
 export interface ViewOutput {
   suggestionsLeftScrollButtonContainer?: Element;
@@ -112,20 +242,352 @@ export interface ViewOutput {
   suggestionsRightScrollButtonContainer?: Element;
 }
 
-export interface UserActionRowWidgetParams {
-  showRateButtons: boolean;
-  onFeedbackSubmit: (rate: Host.AidaClient.Rating, feedback?: string) => void;
+export interface MessageInput {
   suggestions?: [string, ...string[]];
-  onCopyResponseClick: () => void;
-  onSuggestionClick: (suggestion: string) => void;
+  message: ChatMessage;
+  isLoading: boolean;
+  isReadOnly: boolean;
+  isLastMessage: boolean;
   canShowFeedbackForm: boolean;
+  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>;
+  markdownRenderer: MarkdownLitRenderer;
+  onSuggestionClick: (suggestion: string) => void;
+  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void;
+  onCopyResponseClick: (message: ModelChatMessage) => void;
 }
 
 export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput, target: HTMLElement): void => {
+  const message = input.message;
+  if (message.entity === ChatMessageEntity.USER) {
+    const name = input.userInfo.accountFullName || lockedString(UIStringsNotTranslate.you);
+    const image = input.userInfo.accountImage ?
+        html`<img src="data:image/png;base64, ${input.userInfo.accountImage}" alt=${
+            UIStringsNotTranslate.accountAvatar} />` :
+        html`<devtools-icon
+          name="profile"
+        ></devtools-icon>`;
+    const imageInput = message.imageInput && 'inlineData' in message.imageInput ?
+        renderImageChatMessage(message.imageInput.inlineData) :
+        Lit.nothing;
+    // clang-format off
+    Lit.render(html`
+      <style>${Input.textInputStyles}</style>
+      <style>${userActionRowStyles}</style>
+      <section
+        class="chat-message query ${input.isLastMessage ? 'is-last-message' : ''}"
+        jslog=${VisualLogging.section('question')}
+      >
+        <div class="message-info">
+          ${image}
+          <div class="message-name">
+            <h2>${name}</h2>
+          </div>
+        </div>
+        ${imageInput}
+        <div class="message-content">${renderTextAsMarkdown(message.text, input.markdownRenderer)}</div>
+      </section>
+    `, target);
+    // clang-format on
+    return;
+  }
+
   // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
     <style>${userActionRowStyles}</style>
+    <section
+      class="chat-message answer ${input.isLastMessage ? 'is-last-message' : ''}"
+      jslog=${VisualLogging.section('answer')}
+    >
+      <div class="message-info">
+        <devtools-icon name="smart-assistant"></devtools-icon>
+        <div class="message-name">
+          <h2>${lockedString(UIStringsNotTranslate.ai)}</h2>
+        </div>
+      </div>
+      ${Lit.Directives.repeat(
+        message.parts,
+        (_, index) => index,
+        (part, index) => {
+          const isLastPart = index === message.parts.length - 1;
+          if (part.type === 'answer') {
+            return html`<p>${renderTextAsMarkdown(part.text, input.markdownRenderer, { animate: !input.isReadOnly && input.isLoading && isLastPart && input.isLastMessage })}</p>`;
+          }
+          return renderStep({
+            step: part.step,
+            isLoading: input.isLoading,
+            markdownRenderer: input.markdownRenderer,
+            isLast: isLastPart,
+          });
+        },
+      )}
+      ${renderError(message)}
+      ${input.isLastMessage && !input.isLoading ? renderActions(input, output) : Lit.nothing}
+    </section>
+  `, target);
+  // clang-format on
+};
+
+export type View = typeof DEFAULT_VIEW;
+
+function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownLitRenderer, {animate, ref: refFn}: {
+  animate?: boolean,
+  ref?: (element?: Element) => void,
+} = {}): Lit.TemplateResult {
+  let tokens = [];
+  try {
+    tokens = Marked.Marked.lexer(text);
+    for (const token of tokens) {
+      // Try to render all the tokens to make sure that
+      // they all have a template defined for them. If there
+      // isn't any template defined for a token, we'll fallback
+      // to rendering the text as plain text instead of markdown.
+      markdownRenderer.renderToken(token);
+    }
+  } catch {
+    // The tokens were not parsed correctly or
+    // one of the tokens are not supported, so we
+    // continue to render this as text.
+    return html`${text}`;
+  }
+
+  // clang-format off
+  return html`<devtools-markdown-view
+    .data=${{tokens, renderer: markdownRenderer, animationEnabled: animate} as MarkdownView.MarkdownView.MarkdownViewData}
+    ${refFn ? ref(refFn) : Lit.nothing}>
+  </devtools-markdown-view>`;
+  // clang-format on
+}
+
+function renderTitle(step: Step): Lit.LitTemplate {
+  const paused =
+      step.sideEffect ? html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` : Lit.nothing;
+  const actionTitle = step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
+
+  return html`<span class="title">${paused}${actionTitle}</span>`;
+}
+
+function renderStepCode(step: Step): Lit.LitTemplate {
+  if (!step.code && !step.output) {
+    return Lit.nothing;
+  }
+
+  // If there is no "output" yet, it means we didn't execute the code yet (e.g. maybe it is still waiting for confirmation from the user)
+  // thus we show "Code to execute" text rather than "Code executed" text on the heading of the code block.
+  const codeHeadingText = (step.output && !step.canceled) ? lockedString(UIStringsNotTranslate.codeExecuted) :
+                                                            lockedString(UIStringsNotTranslate.codeToExecute);
+
+  // If there is output, we don't show notice on this code block and instead show
+  // it in the data returned code block.
+  // clang-format off
+  const code = step.code ? html`<div class="action-result">
+      <devtools-code-block
+        .code=${step.code.trim()}
+        .codeLang=${'js'}
+        .displayNotice=${!Boolean(step.output)}
+        .header=${codeHeadingText}
+        .showCopyButton=${true}
+      ></devtools-code-block>
+  </div>` :
+                           Lit.nothing;
+  const output = step.output ? html`<div class="js-code-output">
+    <devtools-code-block
+      .code=${step.output}
+      .codeLang=${'js'}
+      .displayNotice=${true}
+      .header=${lockedString(UIStringsNotTranslate.dataReturned)}
+      .showCopyButton=${false}
+    ></devtools-code-block>
+  </div>` :
+                               Lit.nothing;
+
+  return html`<div class="step-code">${code}${output}</div>`;
+  // clang-format on
+}
+
+function renderStepDetails({
+  step,
+  markdownRenderer,
+  isLast,
+}: {
+  step: Step,
+  markdownRenderer: MarkdownLitRenderer,
+  isLast: boolean,
+}): Lit.LitTemplate {
+  const sideEffects = isLast && step.sideEffect ? renderSideEffectConfirmationUi(step) : Lit.nothing;
+  const thought = step.thought ? html`<p>${renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` : Lit.nothing;
+
+  // clang-format off
+  const contextDetails = step.contextDetails ?
+  html`${Lit.Directives.repeat(
+    step.contextDetails,
+      contextDetail => {
+        return html`<div class="context-details">
+      <devtools-code-block
+        .code=${contextDetail.text}
+        .codeLang=${contextDetail.codeLang || ''}
+        .displayNotice=${false}
+        .header=${contextDetail.title}
+        .showCopyButton=${true}
+      ></devtools-code-block>
+    </div>`;
+      },
+    )}` : Lit.nothing;
+
+  return html`<div class="step-details">
+    ${thought}
+    ${renderStepCode(step)}
+    ${sideEffects}
+    ${contextDetails}
+  </div>`;
+  // clang-format on
+}
+
+function renderStepBadge({step, isLoading, isLast}: {
+  step: Step,
+  isLoading: boolean,
+  isLast: boolean,
+}): Lit.LitTemplate {
+  if (isLoading && isLast && !step.sideEffect) {
+    return html`<devtools-spinner></devtools-spinner>`;
+  }
+
+  let iconName = 'checkmark';
+  let ariaLabel: string|undefined = lockedString(UIStringsNotTranslate.completed);
+  let role: 'button'|undefined = 'button';
+  if (isLast && step.sideEffect) {
+    role = undefined;
+    ariaLabel = undefined;
+    iconName = 'pause-circle';
+  } else if (step.canceled) {
+    ariaLabel = lockedString(UIStringsNotTranslate.canceled);
+    iconName = 'cross';
+  }
+
+  return html`<devtools-icon
+      class="indicator"
+      role=${ifDefined(role)}
+      aria-label=${ifDefined(ariaLabel)}
+      .name=${iconName}
+    ></devtools-icon>`;
+}
+
+function renderStep({step, isLoading, markdownRenderer, isLast}: {
+  step: Step,
+  isLoading: boolean,
+  markdownRenderer: MarkdownLitRenderer,
+  isLast: boolean,
+}): Lit.LitTemplate {
+  const stepClasses = Lit.Directives.classMap({
+    step: true,
+    empty: !step.thought && !step.code && !step.contextDetails && !step.sideEffect,
+    paused: Boolean(step.sideEffect),
+    canceled: Boolean(step.canceled),
+  });
+  // clang-format off
+  return html`
+    <details class=${stepClasses}
+      jslog=${VisualLogging.section('step')}
+      .open=${Boolean(step.sideEffect)}>
+      <summary>
+        <div class="summary">
+          ${renderStepBadge({ step, isLoading, isLast })}
+          ${renderTitle(step)}
+          <devtools-icon
+            class="arrow"
+            name="chevron-down"
+          ></devtools-icon>
+        </div>
+      </summary>
+      ${renderStepDetails({step, markdownRenderer, isLast})}
+    </details>`;
+  // clang-format on
+}
+
+function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
+  if (!step.sideEffect) {
+    return Lit.nothing;
+  }
+
+  // clang-format off
+  return html`<div
+    class="side-effect-confirmation"
+    jslog=${VisualLogging.section('side-effect-confirmation')}
+  >
+    <p>${lockedString(UIStringsNotTranslate.sideEffectConfirmationDescription)}</p>
+    <div class="side-effect-buttons-container">
+      <devtools-button
+        .data=${
+          {
+            variant: Buttons.Button.Variant.OUTLINED,
+            jslogContext: 'decline-execute-code',
+          } as Buttons.Button.ButtonData
+        }
+        @click=${() => step.sideEffect?.onAnswer(false)}
+      >${lockedString(
+        UIStringsNotTranslate.negativeSideEffectConfirmation,
+      )}</devtools-button>
+      <devtools-button
+        .data=${
+          {
+            variant: Buttons.Button.Variant.PRIMARY,
+            jslogContext: 'accept-execute-code',
+            iconName: 'play',
+          } as Buttons.Button.ButtonData
+        }
+        @click=${() => step.sideEffect?.onAnswer(true)}
+      >${
+          lockedString(UIStringsNotTranslate.positiveSideEffectConfirmation)
+      }</devtools-button>
+    </div>
+  </div>`;
+  // clang-format on
+}
+
+function renderError(message: ModelChatMessage): Lit.LitTemplate {
+  if (message.error) {
+    let errorMessage;
+    switch (message.error) {
+      case AiAssistanceModel.AiAgent.ErrorType.UNKNOWN:
+      case AiAssistanceModel.AiAgent.ErrorType.BLOCK:
+        errorMessage = UIStringsNotTranslate.systemError;
+        break;
+      case AiAssistanceModel.AiAgent.ErrorType.MAX_STEPS:
+        errorMessage = UIStringsNotTranslate.maxStepsError;
+        break;
+      case AiAssistanceModel.AiAgent.ErrorType.ABORT:
+        return html`<p class="aborted" jslog=${VisualLogging.section('aborted')}>${
+            lockedString(UIStringsNotTranslate.stoppedResponse)}</p>`;
+    }
+
+    return html`<p class="error" jslog=${VisualLogging.section('error')}>${lockedString(errorMessage)}</p>`;
+  }
+
+  return Lit.nothing;
+}
+
+function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitTemplate {
+  if (inlineData.data === AiAssistanceModel.AiConversation.NOT_FOUND_IMAGE_DATA) {
+    // clang-format off
+    return html`<div class="unavailable-image" title=${UIStringsNotTranslate.imageUnavailable}>
+      <devtools-icon name='file-image'></devtools-icon>
+    </div>`;
+    // clang-format on
+  }
+  const imageUrl = `data:${inlineData.mimeType};base64,${inlineData.data}`;
+  // clang-format off
+    return html`<x-link
+      class="image-link" title=${UIStringsNotTranslate.openImageInNewTab}
+      href=${imageUrl}
+    >
+      <img src=${imageUrl} alt=${UIStringsNotTranslate.imageInputSentToTheModel} />
+    </x-link>`;
+  // clang-format on
+}
+
+function renderActions(input: UserActionRowViewInput, output: ViewOutput): Lit.LitTemplate {
+  // clang-format off
+  return html`
     <div class="ai-assistance-feedback-row">
       <div class="action-buttons">
         ${input.showRateButtons ? html`
@@ -273,23 +735,22 @@ export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput,
       </div>
     </form>
     ` : Lit.nothing}
-  `, target);
+  `;
   // clang-format on
-};
-
-export type View = typeof DEFAULT_VIEW;
+}
 
-/**
- * This presenter has too many responsibilities (rating buttons, feedback
- * form, suggestions).
- */
-export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidgetParams {
-  showRateButtons = false;
-  onFeedbackSubmit: (rate: Host.AidaClient.Rating, feedback?: string) => void = () => {};
-  suggestions: [string, ...string[]]|undefined;
-  onCopyResponseClick: () => void = () => {};
-  onSuggestionClick: (suggestion: string) => void = () => {};
+export class UserActionRow extends UI.Widget.Widget {
+  message: ChatMessage = {entity: ChatMessageEntity.USER, text: ''};
+  isLoading = false;
+  isReadOnly = false;
   canShowFeedbackForm = false;
+  isLastMessage = false;
+  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'> = {};
+  markdownRenderer!: MarkdownLitRenderer;
+  onSuggestionClick: (suggestion: string) => void = () => {};
+  onFeedbackSubmit:
+      (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void = () => {};
+  onCopyResponseClick: (message: ModelChatMessage) => void = () => {};
 
   #suggestionsResizeObserver = new ResizeObserver(() => this.#handleSuggestionsScrollOrResize());
   #suggestionsEvaluateLayoutThrottler = new Common.Throttler.Throttler(50);
@@ -320,20 +781,36 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
   override performUpdate(): Promise<void>|void {
     this.#view(
         {
+          message: this.message,
+          isLoading: this.isLoading,
+          isReadOnly: this.isReadOnly,
+          canShowFeedbackForm: this.canShowFeedbackForm,
+          userInfo: this.userInfo,
+          markdownRenderer: this.markdownRenderer,
+          isLastMessage: this.isLastMessage,
           onSuggestionClick: this.onSuggestionClick,
           onRatingClick: this.#handleRateClick.bind(this),
           onReportClick: () => UIHelpers.openInNewTab(REPORT_URL),
-          onCopyResponseClick: this.onCopyResponseClick,
+          onCopyResponseClick: () => {
+            if (this.message.entity === ChatMessageEntity.MODEL) {
+              this.onCopyResponseClick(this.message);
+            }
+          },
           scrollSuggestionsScrollContainer: this.#scrollSuggestionsScrollContainer.bind(this),
           onSuggestionsScrollOrResize: this.#handleSuggestionsScrollOrResize.bind(this),
           onSubmit: this.#handleSubmit.bind(this),
           onClose: this.#handleClose.bind(this),
           onInputChange: this.#handleInputChange.bind(this),
           isSubmitButtonDisabled: this.#isSubmitButtonDisabled,
-          showRateButtons: this.showRateButtons,
-          suggestions: this.suggestions,
+          // Props for actions logic
+          showRateButtons: this.message.entity === ChatMessageEntity.MODEL && !!this.message.rpcId,
+          suggestions: (this.message.entity === ChatMessageEntity.MODEL && !this.isReadOnly &&
+                        this.message.parts.at(-1)?.type === 'answer') ?
+              (this.message.parts.at(-1) as AnswerPart).suggestions :
+              undefined,
           currentRating: this.#currentRating,
           isShowingFeedbackForm: this.#isShowingFeedbackForm,
+          onFeedbackSubmit: this.onFeedbackSubmit,
         },
         this.#viewOutput, this.contentElement);
   }
@@ -395,14 +872,18 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
       this.#isShowingFeedbackForm = false;
       this.#isSubmitButtonDisabled = true;
       // This effectively reset the user rating
-      this.onFeedbackSubmit(Host.AidaClient.Rating.SENTIMENT_UNSPECIFIED);
+      if (this.message.entity === ChatMessageEntity.MODEL && this.message.rpcId) {
+        this.onFeedbackSubmit(this.message.rpcId, Host.AidaClient.Rating.SENTIMENT_UNSPECIFIED);
+      }
       void this.performUpdate();
       return;
     }
 
     this.#currentRating = rating;
     this.#isShowingFeedbackForm = this.canShowFeedbackForm;
-    this.onFeedbackSubmit(rating);
+    if (this.message.entity === ChatMessageEntity.MODEL && this.message.rpcId) {
+      this.onFeedbackSubmit(this.message.rpcId, rating);
+    }
     void this.performUpdate();
   }
 
@@ -418,7 +899,9 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
     if (!this.#currentRating || !input) {
       return;
     }
-    this.onFeedbackSubmit(this.#currentRating, input);
+    if (this.message.entity === ChatMessageEntity.MODEL && this.message.rpcId) {
+      this.onFeedbackSubmit(this.message.rpcId, this.#currentRating, input);
+    }
     this.#isShowingFeedbackForm = false;
     this.#isSubmitButtonDisabled = true;
     void this.performUpdate();