From 6f6bd3716f88d92cea904a244eefe0ceb40df4e8 Mon Sep 17 00:00:00 2001
From: Mitch Liao <mitchliao@google.com>
Date: Mon, 31 Aug 2026 18:06:01 -0400
Subject: [PATCH] refactor: allow feedback component override

---
 .../event-row/event-row.component.html        |  9 ++++-
 .../event-row/event-row.component.ts          |  6 ++-
 .../message-feedback.component.interface.ts   | 37 +++++++++++++++++++
 .../message-feedback.component.ts             |  3 +-
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 src/app/components/message-feedback/message-feedback.component.interface.ts

diff --git a/src/app/components/event-row/event-row.component.html b/src/app/components/event-row/event-row.component.html
index c1fd0e01..4d8ea2e7 100644
--- a/src/app/components/event-row/event-row.component.html
+++ b/src/app/components/event-row/event-row.component.html
@@ -47,5 +47,12 @@
     }
   <!-- Feedback UI -->
   @if(isUserFeedbackEnabled && !isLoadingAgentResponse && uiEvent.role === "bot") {
-    <app-message-feedback [sessionName]="sessionName" [eventId]="uiEvent.event.id || ''"></app-message-feedback>
+    @if (!messageFeedbackComponent) {
+      <app-message-feedback [sessionName]="sessionName" [eventId]="uiEvent.event.id || ''"></app-message-feedback>
+    } @else {
+      <ng-container
+        [ngComponentOutlet]="messageFeedbackComponent"
+        [ngComponentOutletInputs]="{sessionName: sessionName, eventId: uiEvent.event.id || ''}"
+      ></ng-container>
+    }
   }
diff --git a/src/app/components/event-row/event-row.component.ts b/src/app/components/event-row/event-row.component.ts
index 9b0acda9..1ae00035 100644
--- a/src/app/components/event-row/event-row.component.ts
+++ b/src/app/components/event-row/event-row.component.ts
@@ -16,7 +16,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, inject} from '@angular/core';
 
 import {AgentRunRequest} from '../../core/models/AgentRunRequest';
 import type {EvalCase} from '../../core/models/Eval';
@@ -24,6 +24,7 @@ import {UiEvent} from '../../core/models/UiEvent';
 import {ChatAvatarComponent} from '../chat-avatar/chat-avatar.component';
 import {MessageFeedbackComponent} from '../message-feedback/message-feedback.component';
 import {EventContentComponent} from '../event-content/event-content.component';
+import {MESSAGE_FEEDBACK_COMPONENT} from '../message-feedback/message-feedback.component.interface';
 
 @Component({
   selector: 'app-event-row',
@@ -46,6 +47,9 @@ import {EventContentComponent} from '../event-content/event-content.component';
   ],
 })
 export class EventRowComponent {
+  protected readonly messageFeedbackComponent =
+      inject(MESSAGE_FEEDBACK_COMPONENT, {optional: true});
+
   @Input({required: true}) uiEvent!: UiEvent;
   @Input({required: true}) index!: number;
   @Input() uiEvents: UiEvent[] = [];
diff --git a/src/app/components/message-feedback/message-feedback.component.interface.ts b/src/app/components/message-feedback/message-feedback.component.interface.ts
new file mode 100644
index 00000000..dc11d080
--- /dev/null
+++ b/src/app/components/message-feedback/message-feedback.component.interface.ts
@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {InjectionToken, InputSignal, Type} from '@angular/core';
+
+/**
+ * Represents a component to be used to collect feedback on a message, in place
+ * of the built-in one. Feedback UX varies by product, and an embedder already
+ * supplies the feedback backend through `FEEDBACK_SERVICE`.
+ */
+export const MESSAGE_FEEDBACK_COMPONENT =
+    new InjectionToken<Type<MessageFeedbackComponentInterface>>(
+        'MESSAGE_FEEDBACK_COMPONENT',
+    );
+
+/**
+ * Interface for the message feedback component. The message is identified by
+ * the session it belongs to and the event that carries it.
+ */
+export interface MessageFeedbackComponentInterface {
+  sessionName: InputSignal<string>;
+  eventId: InputSignal<string>;
+}
\ No newline at end of file
diff --git a/src/app/components/message-feedback/message-feedback.component.ts b/src/app/components/message-feedback/message-feedback.component.ts
index 34d447ae..9959d41e 100644
--- a/src/app/components/message-feedback/message-feedback.component.ts
+++ b/src/app/components/message-feedback/message-feedback.component.ts
@@ -29,6 +29,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {Feedback, FEEDBACK_SERVICE} from '../../core/services/interfaces/feedback';
 
 import {MessageFeedbackMessagesInjectionToken} from './message-feedback.component.i18n';
+import {MessageFeedbackComponentInterface} from './message-feedback.component.interface';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -47,7 +48,7 @@ import {MessageFeedbackMessagesInjectionToken} from './message-feedback.componen
     MatTooltipModule,
   ],
 })
-export class MessageFeedbackComponent {
+export class MessageFeedbackComponent implements MessageFeedbackComponentInterface {
   sessionName = input.required<string>();
   eventId = input.required<string>();