ADK changes

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

@@ -302,14 +302,7 @@
   </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>
+    <app-message-feedback [sessionName]="sessionName()" [eventId]="message.eventId"></app-message-feedback>
   }
   </div> <!-- end .message-column-container -->
   }

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

@@ -47,8 +47,6 @@ 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

@@ -418,24 +418,7 @@ button.video-rec-btn {
   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;
-  }
-}
 
 .messages-loading-container {
   margin-top: 1em;

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

@@ -27,10 +27,14 @@ import {of} from 'rxjs';
 import {AGENT_SERVICE} from '../../core/services/interfaces/agent';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag';
 import {SESSION_SERVICE} from '../../core/services/interfaces/session';
+import {FEEDBACK_SERVICE} from '../../core/services/interfaces/feedback';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
 import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
 import {MockAgentService} from '../../core/services/testing/mock-agent.service';
 import {MockFeatureFlagService} from '../../core/services/testing/mock-feature-flag.service';
+import {
+  MockFeedbackService
+} from '../../core/services/testing/mock-feedback.service';
 import {MockSessionService} from '../../core/services/testing/mock-session.service';
 import {MockStringToColorService} from '../../core/services/testing/mock-string-to-color.service';
 import {MockUiStateService} from '../../core/services/testing/mock-ui-state.service';
@@ -48,12 +52,14 @@ describe('ChatPanelComponent', () => {
   let mockStringToColorService: MockStringToColorService;
   let mockAgentService: MockAgentService;
   let mockSessionService: MockSessionService;
+  let mockFeedbackService: MockFeedbackService;
 
   beforeEach(async () => {
     mockFeatureFlagService = new MockFeatureFlagService();
     mockUiStateService = new MockUiStateService();
     mockAgentService = new MockAgentService();
     mockSessionService = new MockSessionService();
+    mockFeedbackService = new MockFeedbackService();
 
     mockFeatureFlagService.isMessageFileUploadEnabledResponse.next(true);
     mockFeatureFlagService.isManualStateUpdateEnabledResponse.next(true);
@@ -85,6 +91,7 @@ describe('ChatPanelComponent', () => {
             {provide: UI_STATE_SERVICE, useValue: mockUiStateService},
             {provide: AGENT_SERVICE, useValue: mockAgentService},
             {provide: SESSION_SERVICE, useValue: mockSessionService},
+            {provide: FEEDBACK_SERVICE, useValue: mockFeedbackService},
           ],
         })
         .compileComponents();
@@ -630,7 +637,7 @@ describe('ChatPanelComponent', () => {
       fixture.detectChanges();
 
       let feedbackButtons =
-          fixture.debugElement.query(By.css('.feedback-buttons'));
+          fixture.debugElement.query(By.css('app-message-feedback'));
       expect(feedbackButtons).toBeTruthy();
     });
 
@@ -641,7 +648,7 @@ describe('ChatPanelComponent', () => {
       fixture.detectChanges();
 
       let feedbackButtons =
-          fixture.debugElement.query(By.css('.feedback-buttons'));
+          fixture.debugElement.query(By.css('app-message-feedback'));
       expect(feedbackButtons).toBeFalsy();
     });
 
@@ -652,7 +659,7 @@ describe('ChatPanelComponent', () => {
       fixture.detectChanges();
 
       const feedbackButtons =
-          fixture.debugElement.query(By.css('.feedback-buttons'));
+          fixture.debugElement.query(By.css('app-message-feedback'));
       expect(feedbackButtons).toBeFalsy();
     });
 
@@ -667,35 +674,11 @@ describe('ChatPanelComponent', () => {
       fixture.detectChanges();
 
       let feedbackButtons =
-          fixture.debugElement.queryAll(By.css('.feedback-buttons'));
+          fixture.debugElement.queryAll(By.css('app-message-feedback'));
       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'});
-    });
   });
-  
+
   describe('Computer Use', () => {
     it(
         'isComputerUseResponse should return true when image data and url are present',
@@ -724,4 +707,4 @@ describe('ChatPanelComponent', () => {
           expect(component.isComputerUseResponse(message)).toBeFalse();
       });
     });
-  });
+  });

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

@@ -45,6 +45,7 @@ import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
 import {MediaType,} from '../artifact-tab/artifact-tab.component';
 import {AudioPlayerComponent} from '../audio-player/audio-player.component';
 import {MARKDOWN_COMPONENT, MarkdownComponentInterface} from '../markdown/markdown.component.interface';
+import {MessageFeedbackComponent} from '../message-feedback/message-feedback.component';
 import {ComputerActionComponent} from '../computer-action/computer-action.component';
 import {ChatPanelMessagesInjectionToken} from './chat-panel.component.i18n';
 import {isComputerUseResponse, isVisibleComputerUseClick} from '../../core/models/ComputerUse';
@@ -70,6 +71,7 @@ const ROOT_AGENT = 'root_agent';
     MatProgressSpinnerModule,
     NgxJsonViewerModule,
     AudioPlayerComponent,
+    MessageFeedbackComponent,
     MatTooltipModule,
     NgClass,
     ComputerActionComponent,
@@ -117,7 +119,6 @@ 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;
@@ -262,10 +263,6 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
     return this.sanitizer.bypassSecurityTrustHtml(content);
   }
 
-  emitFeedback(direction: 'up'|'down') {
-    this.feedback.emit({direction});
-  }
-
   private restoreScrollPosition() {
     // Scroll to the last unseen message after the new messages are loaded.
     if (this.scrollContainer?.nativeElement) {

src/app/components/message-feedback/message-feedback.component.html

@@ -0,0 +1,44 @@
+<div class="message-feedback-container">
+  <div class="feedback-buttons">
+    <button mat-icon-button [matTooltip]="i18n.goodResponseTooltip" (click)="sendFeedback('up')">
+      @if (selectedFeedback() === 'up') {
+        <mat-icon>thumb_up_filled</mat-icon>
+      } @else {
+        <mat-icon>thumb_up</mat-icon>
+      }
+    </button>
+    <button mat-icon-button [matTooltip]="i18n.badResponseTooltip" (click)="sendFeedback('down')">
+      @if (selectedFeedback() === 'down') {
+        <mat-icon>thumb_down_filled</mat-icon>
+      } @else {
+        <mat-icon>thumb_down</mat-icon>
+      }
+    </button>
+  </div>
+
+  <div class="feedback-details-container" *ngIf="isDetailedFeedbackVisible()">
+
+    <div class="additional-feedback">
+      <h3>{{ i18n.feedbackAdditionalLabel }}</h3>
+      <mat-form-field appearance="outline">
+        <textarea
+          matInput
+          [formControl]="comment"
+          [placeholder]="feedbackPlaceholder()">
+        </textarea>
+      </mat-form-field>
+    </div>
+
+    <div class="actions">
+      <button mat-stroked-button (click)="onDetailedFeedbackCancelled()">
+        {{ i18n.feedbackCancelButton }}
+      </button>
+      <button
+        mat-flat-button
+        color="primary"
+        (click)="onDetailedFeedbackSubmitted()">
+        {{ i18n.feedbackSubmitButton }}
+      </button>
+    </div>
+  </div>
+</div>

src/app/components/message-feedback/message-feedback.component.i18n.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2025 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} from '@angular/core';
+
+/**
+ * Default English messages for MessageFeedbackComponent.
+ */
+export const MESSAGE_FEEDBACK_MESSAGES = {
+  goodResponseTooltip: 'Good response',
+  badResponseTooltip: 'Bad response',
+  feedbackAdditionalLabel: 'Additional feedback (Optional)',
+  feedbackCommentPlaceholderDown: 'Share what could be improved in the response',
+  feedbackCommentPlaceholderUp: 'Share what you liked about the response',
+  feedbackCancelButton: 'Cancel',
+  feedbackSubmitButton: 'Submit',
+  feedbackDialogTitle: 'Reasons for feedback (Select all that apply)',
+  feedbackReasonHallucination: 'Hallucinated libraries / APIs etc',
+  feedbackReasonIncomplete: 'Incomplete answer',
+  feedbackReasonFollowup: 'Didn\'t understand followup',
+  feedbackReasonFactual: 'Factual errors',
+  feedbackReasonLinks: 'Broken/incorrect links',
+  feedbackReasonIrrelevant: 'Irrelevant information',
+  feedbackReasonRepetitive: 'Repetitive',
+};
+
+/**
+ * Interface for human-readable messages displayed in the MessageFeedbackComponent.
+ */
+export type MessageFeedbackMessages = typeof MESSAGE_FEEDBACK_MESSAGES;
+
+/**
+ * Injection token for MessageFeedbackComponent messages.
+ */
+export const MessageFeedbackMessagesInjectionToken =
+    new InjectionToken<MessageFeedbackMessages>('Message Feedback Messages', {
+      factory: () => MESSAGE_FEEDBACK_MESSAGES,
+    });

src/app/components/message-feedback/message-feedback.component.scss

@@ -0,0 +1,74 @@
+.message-feedback-container {
+  display: block;
+}
+
+.feedback-buttons {
+  --mat-icon-button-touch-target-size: 32px;
+  --button-size: 32px;
+  --icon-size: 12px;
+
+  margin-left: 54px;
+  display: flex;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--button-size);
+    height: var(--button-size);
+    transition: all 0.2s ease;
+
+    mat-icon {
+      font-size: var(--icon-size);
+      height: var(--icon-size);
+      width: var(--icon-size);
+      transition: all 0.2s ease;
+    }
+  }
+}
+
+.feedback-details-container {
+  margin-left: 54px;
+  max-width: 500px;
+  padding: 16px;
+  background-color: var(--builder-card-background-color);
+  border-radius: 8px;
+  margin-top: 8px;
+  border: 1px solid var(--builder-border-color);
+
+  .additional-feedback {
+    h3 {
+      font-size: 13px;
+      font-weight: 500;
+      margin-bottom: 8px;
+      margin-top: 0;
+      color: var(--builder-text-secondary-color);
+    }
+
+    mat-form-field {
+      width: 100%;
+
+      textarea {
+        min-height: 60px;
+        resize: vertical;
+        font-size: 13px;
+      }
+    }
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 12px;
+
+    button {
+      border-radius: 18px;
+      padding: 0 16px;
+      height: 32px;
+      line-height: 32px;
+      font-size: 13px;
+      font-weight: 500;
+    }
+  }
+}