feat: Render computer-use state in chat function responses

PiperOrigin-RevId: 856215304

Author: google-genai-bot

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

@@ -234,15 +234,24 @@
       {{ message.functionCall.name }}
     </button>
     } @if (message.functionResponse) {
-    <button
-      mat-stroked-button
-      [ngClass]="{'function-event-button-highlight': shouldMessageHighlighted(i)}"
-      class="function-event-button"
-      (click)="clickEvent.emit(i)"
-    >
-      <mat-icon>check</mat-icon>
-      {{ message.functionResponse.name }}
-    </button>
+      @if (isComputerUseResponse(message)) {
+      <div class="computer-use-container" (click)="clickEvent.emit(i)">
+        <div class="computer-use-header">
+          <span class="computer-use-tool-name">{{ message.functionResponse.name }}</span>
+        </div>
+        <img [src]="getComputerUseScreenshot(message)" class="computer-use-screenshot" alt="Computer Use Screenshot" />
+        <div class="computer-use-footprint">
+          <mat-icon class="computer-icon">computer</mat-icon>
+          <span class="url-text">{{ getComputerUseUrl(message) }}</span>
+        </div>
+      </div>
+      } @else {
+        <button mat-stroked-button [ngClass]="{'function-event-button-highlight': shouldMessageHighlighted(i)}"
+          class="function-event-button" (click)="clickEvent.emit(i)">
+          <mat-icon>check</mat-icon>
+          {{ message.functionResponse.name }}
+        </button>
+      }
     }
     <div
       [ngClass]="{

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

@@ -441,3 +441,52 @@ button.video-rec-btn {
   margin-top: 1em;
   margin-bottom: 1em;
 }
+
+.computer-use-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 400px;
+  border-radius: 12px;
+  border: 1px solid var(--chat-panel-input-field-mat-mdc-text-field-wrapper-border-color);
+  overflow: hidden;
+  cursor: pointer;
+  margin: 5px 5px 10px;
+  background-color: var(--chat-panel-bot-message-message-card-background-color);
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.computer-use-screenshot {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-bottom: 1px solid var(--chat-panel-input-field-mat-mdc-text-field-wrapper-border-color);
+}
+
+.computer-use-footprint {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  gap: 8px;
+  background-color: var(--chat-panel-thought-chip-background-color);
+}
+
+.computer-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+  color: var(--chat-panel-header-expected-color);
+}
+
+.url-text {
+  font-size: 11px;
+  font-family: monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--chat-panel-input-field-textarea-color);
+  opacity: 0.8;
+}