Adds optional feedback buttons to agent responses

Adds thumbs up/down buttons below the last response in a sequence of agent responses. This can allow sending requests to the planned FeedbackService (still under discussion for 3p usage). The feature is hidden behind a feature flag, which defaults to hidden.

PiperOrigin-RevId: 840027004

Author: hoonji

src/app/components/chat-panel/chat-panel.component.html

@@ -19,6 +19,7 @@
 <div #autoScroll class="chat-messages">
   <div #videoContainer></div>
   @for (message of messages; track message; let i = $index) {
+  <div class="message-column-container">
   <div
     [ngClass]="{
           'user-message': message.role === 'user',
@@ -288,6 +289,18 @@
     </button>
     }
   </div>
+  <!-- Feedback UI -->
+  @if(isUserFeedbackEnabled() && !isLoadingAgentResponse() && message.role === "bot") {
+  <div class="feedback-buttons">
+    <button mat-icon-button [matTooltip]="i18n.goodResponseTooltip" (click)="emitFeedback('up')">
+      <mat-icon>thumb_up</mat-icon>
+    </button>
+    <button mat-icon-button [matTooltip]="i18n.badResponseTooltip" (click)="emitFeedback('down')">
+      <mat-icon>thumb_down</mat-icon>
+    </button>
+  </div>
+  }
+  </div> <!-- end .message-column-container -->
   }
 </div>
 } @if (appName != "" && isChatMode && !isSessionLoading) {

src/app/components/chat-panel/chat-panel.component.i18n.ts

@@ -47,6 +47,8 @@ export const CHAT_PANEL_MESSAGES = {
   turnOffCamTooltip: 'Turn off camera',
   useCamTooltip: 'Use camera',
   updatedSessionStateChipLabel: 'Updated session state',
+  goodResponseTooltip: 'Good response',
+  badResponseTooltip: 'Bad response',
 };
 
 

src/app/components/chat-panel/chat-panel.component.scss

@@ -45,7 +45,9 @@
   position: relative;
   display: inline-block;
   &.message-card--highlighted {
-    background-color: var(--chat-panel-function-event-button-highlight-background-color);
+    background-color: var(
+      --chat-panel-function-event-button-highlight-background-color
+    );
   }
 }
 
@@ -55,17 +57,29 @@
 }
 
 .function-event-button-highlight {
-  background-color: var(--chat-panel-function-event-button-highlight-background-color);
-  border-color: var(--chat-panel-function-event-button-highlight-border-color) !important;
+  background-color: var(
+    --chat-panel-function-event-button-highlight-background-color
+  );
+  border-color: var(
+    --chat-panel-function-event-button-highlight-border-color
+  ) !important;
   color: var(--chat-panel-function-event-button-highlight-color) !important;
 }
 
+// Enables messages to have columns
+.message-column-container {
+  display: flex;
+  flex-direction: column;
+}
+
 .user-message {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   .message-card {
-    background-color: var(--chat-panel-user-message-message-card-background-color);
+    background-color: var(
+      --chat-panel-user-message-message-card-background-color
+    );
     align-self: flex-end;
     color: var(--chat-panel-user-message-message-card-color);
     box-shadow: none;
@@ -76,7 +90,9 @@
   display: flex;
   align-items: center;
   .message-card {
-    background-color: var(--chat-panel-bot-message-message-card-background-color);
+    background-color: var(
+      --chat-panel-bot-message-message-card-background-color
+    );
     align-self: flex-start;
     color: var(--chat-panel-bot-message-message-card-color);
     box-shadow: none;
@@ -85,8 +101,11 @@
 
 .bot-message:focus-within {
   .message-card {
-    background-color: var(--chat-panel-bot-message-focus-within-message-card-background-color);
-    border: 1px solid var(--chat-panel-bot-message-focus-within-message-card-border-color);
+    background-color: var(
+      --chat-panel-bot-message-focus-within-message-card-background-color
+    );
+    border: 1px solid
+      var(--chat-panel-bot-message-focus-within-message-card-border-color);
   }
 }
 
@@ -153,7 +172,8 @@
 
 .eval-response-header {
   padding-bottom: 5px;
-  border-bottom: 2px solid var(--chat-panel-eval-response-header-border-bottom-color);
+  border-bottom: 2px solid
+    var(--chat-panel-eval-response-header-border-bottom-color);
   font-style: italic;
   font-weight: 700;
 }
@@ -278,7 +298,8 @@
 }
 
 :host ::ng-deep .input-field .mat-mdc-text-field-wrapper {
-  border: 1px solid var(--chat-panel-input-field-mat-mdc-text-field-wrapper-border-color);
+  border: 1px solid
+    var(--chat-panel-input-field-mat-mdc-text-field-wrapper-border-color);
   border-radius: 16px;
 }
 
@@ -396,3 +417,22 @@ button.video-rec-btn {
   align-items: center;
   height: 100%;
 }
+
+.feedback-buttons {
+  // Default touch target is fixed at 48px, which is too large
+  --mat-icon-button-touch-target-display: none;
+  margin-left: 50px;
+
+  button {
+    padding: 0;
+    height: 24px;
+    width: 24px;
+    min-height: 24px;
+    min-width: 24px;
+  }
+  mat-icon {
+    font-size: 12px;
+    height: 12px;
+    width: 12px;
+  }
+}

src/app/components/chat-panel/chat-panel.component.spec.ts

@@ -23,41 +23,48 @@ import {fakeAsync, initTestBed, tick} from '../../testing/utils';
 import {MatDialogModule} from '@angular/material/dialog';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {of} from 'rxjs';
 
+import {AGENT_SERVICE} from '../../core/services/interfaces/agent';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
-import {UI_STATE_SERVICE, UiStateService} from '../../core/services/interfaces/ui-state';
-import {MockFeatureFlagService} from '../../core/services/testing/mock-feature-flag.service';
-import {MockStringToColorService} from '../../core/services/testing/mock-string-to-color.service';
-import {MockUiStateService} from '../../core/services/testing/mock-ui-state.service';
+import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
+import {
+  MockFeatureFlagService
+} from '../../core/services/testing/mock-feature-flag.service';
+import {
+  MockStringToColorService
+} from '../../core/services/testing/mock-string-to-color.service';
+import {
+  MockUiStateService
+} from '../../core/services/testing/mock-ui-state.service';
 import {MARKDOWN_COMPONENT} from '../markdown/markdown.component.interface';
 import {MockMarkdownComponent} from '../markdown/testing/mock-markdown.component';
 
 import {ChatPanelComponent} from './chat-panel.component';
-
-const USER_ID = 'user';
-const FUNC1_NAME = 'func1';
+import {MockAgentService} from '../../core/services/testing/mock-agent.service';
 
 describe('ChatPanelComponent', () => {
   let component: ChatPanelComponent;
   let fixture: ComponentFixture<ChatPanelComponent>;
   let mockFeatureFlagService: MockFeatureFlagService;
   let mockUiStateService: MockUiStateService;
   let mockStringToColorService: MockStringToColorService;
+  let mockAgentService: MockAgentService;
 
   beforeEach(async () => {
     mockFeatureFlagService = new MockFeatureFlagService();
     mockUiStateService = new MockUiStateService();
+    mockAgentService = new MockAgentService();
 
     mockFeatureFlagService.isMessageFileUploadEnabledResponse.next(true);
     mockFeatureFlagService.isManualStateUpdateEnabledResponse.next(true);
     mockFeatureFlagService.isBidiStreamingEnabledResponse.next(true);
+    mockFeatureFlagService.isFeedbackServiceEnabledResponse.next(true);
 
     mockStringToColorService = new MockStringToColorService();
     mockStringToColorService.stc.and.returnValue('rgb(255, 0, 0)');
 
-    initTestBed();  // required for 1p compat
+    mockAgentService.getLoadingStateResponse.next(false);
 
     initTestBed();  // required for 1p compat
     await TestBed
@@ -76,6 +83,7 @@ describe('ChatPanelComponent', () => {
             {provide: MARKDOWN_COMPONENT, useValue: MockMarkdownComponent},
             {provide: FEATURE_FLAG_SERVICE, useValue: mockFeatureFlagService},
             {provide: UI_STATE_SERVICE, useValue: mockUiStateService},
+            {provide: AGENT_SERVICE, useValue: mockAgentService},
           ],
         })
         .compileComponents();
@@ -476,4 +484,72 @@ describe('ChatPanelComponent', () => {
     });
     });
   });
+
+  describe('Feedback UI', () => {
+    it('should show when feature flag is on', () => {
+      component.messages = [{role: 'bot', text: 'message'}];
+
+      mockFeatureFlagService.isFeedbackServiceEnabledResponse.next(true);
+      fixture.detectChanges();
+
+      let feedbackButtons = fixture.debugElement.query(By.css('.feedback-buttons'));
+      expect(feedbackButtons).toBeTruthy();
+    });
+
+    it('should hide when feature flag is off', () => {
+      component.messages = [{role: 'bot', text: 'message'}];
+
+      mockFeatureFlagService.isFeedbackServiceEnabledResponse.next(false);
+      fixture.detectChanges();
+
+      let feedbackButtons = fixture.debugElement.query(By.css('.feedback-buttons'));
+      expect(feedbackButtons).toBeFalsy();
+    });
+
+    it('should hide when agent response is loading', () => {
+      component.messages = [{role: 'bot', text: 'message'}];
+
+      mockAgentService.getLoadingStateResponse.next(true);
+      fixture.detectChanges();
+
+      const feedbackButtons = fixture.debugElement.query(By.css('.feedback-buttons'));
+      expect(feedbackButtons).toBeFalsy();
+    });
+
+    it('should show after each bot message', () => {
+      component.messages = [
+        {role: 'bot', text: 'message 1'},
+        {role: 'bot', text: 'message 1'},
+        {role: 'user', text: 'message 2'},
+        {role: 'bot', text: 'message 1'},
+        {role: 'bot', text: 'message 1'},
+      ];
+      fixture.detectChanges();
+
+      let feedbackButtons = fixture.debugElement.queryAll(By.css('.feedback-buttons'));
+      expect(feedbackButtons.length).toBe(4);
+    });
+
+    it(`component should emit 'up' on up click`, () => {
+      spyOn(component.feedback, 'emit');
+      component.messages = [{role: 'bot', text: 'message'}];
+      fixture.detectChanges();
+
+      const upButton = fixture.debugElement.queryAll(By.css('.feedback-buttons button'))[0];
+      upButton.nativeElement.click();
+
+      expect(component.feedback.emit).toHaveBeenCalledWith({direction: 'up'});
+    });
+
+    it(`component should emit 'down' on down click`, () => {
+      spyOn(component.feedback, 'emit');
+      component.messages = [{role: 'bot', text: 'message'}];
+      fixture.detectChanges();
+
+      const downButton = fixture.debugElement.queryAll(By.css('.feedback-buttons button'))[1];
+      downButton.nativeElement.click();
+
+      expect(component.feedback.emit).toHaveBeenCalledWith({direction: 'down'});
+    });
+  });
 });

src/app/components/chat-panel/chat-panel.component.ts

@@ -40,6 +40,8 @@ import {AudioPlayerComponent} from '../audio-player/audio-player.component';
 import {MARKDOWN_COMPONENT, MarkdownComponentInterface} from '../markdown/markdown.component.interface';
 
 import {ChatPanelMessagesInjectionToken} from './chat-panel.component.i18n';
+import {AGENT_SERVICE} from '../../core/services/interfaces/agent';
+import {toSignal} from '@angular/core/rxjs-interop';
 
 const ROOT_AGENT = 'root_agent';
 
@@ -107,6 +109,9 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   @Output() readonly updateState = new EventEmitter<void>();
   @Output() readonly toggleAudioRecording = new EventEmitter<void>();
   @Output() readonly toggleVideoRecording = new EventEmitter<void>();
+  @Output()
+  readonly feedback =
+      new EventEmitter<{direction: 'up'|'down'}>();
 
   @ViewChild('videoContainer', {read: ElementRef}) videoContainer!: ElementRef;
   @ViewChild('autoScroll') scrollContainer!: ElementRef;
@@ -120,6 +125,7 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
       MARKDOWN_COMPONENT,
   );
   private readonly featureFlagService = inject(FEATURE_FLAG_SERVICE);
+  private readonly agentService = inject(AGENT_SERVICE);
   readonly MediaType = MediaType;
 
   readonly isMessageFileUploadEnabledObs =
@@ -129,6 +135,8 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   readonly isBidiStreamingEnabledObs =
       this.featureFlagService.isBidiStreamingEnabled();
   readonly canEditSession = signal(true);
+  readonly isUserFeedbackEnabled = toSignal(this.featureFlagService.isFeedbackServiceEnabled());
+  readonly isLoadingAgentResponse = toSignal(this.agentService.getLoadingState());
 
   constructor(private sanitizer: DomSanitizer) {}
 
@@ -189,4 +197,8 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   renderGooglerSearch(content: string) {
     return this.sanitizer.bypassSecurityTrustHtml(content);
   }
+
+  emitFeedback(direction: 'up'|'down') {
+    this.feedback.emit({direction});
+  }
 }