Merge branch 'main' into agent-builder-an-working

Author: hoonji

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

@@ -395,8 +395,6 @@
     </mat-form-field>
     </div>
 
-  } @else {
-    <div class="readonly-session-message">{{i18n.cannotEditSessionMessage}}</div>
   }
 }
 

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',
-  cannotEditSessionMessage:
-      'This session is read-only. You cannot send messages or update the state.',
 };
 
 

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

@@ -193,15 +193,6 @@
   margin: 0 auto;
 }
 
-.readonly-session-message {
-  display: block;
-  text-align: center;
-  padding: 10px;
-  width: 100%;
-  margin: 0 auto;
-  color: var(--chat-error-color);
-}
-
 .input-field {
   flex-grow: 1;
 

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

@@ -128,7 +128,9 @@
       </div>
       <div class="toolbar-actions">
         @if (this.isEvalEditMode()) {
-        <button mat-button (click)="cancelEditEvalCase()" style="height: 30px">{{ i18n.cancelButton }}</button>
+        <button mat-button (click)="cancelEditEvalCase()" style="height: 30px">
+          {{ i18n.cancelButton }}
+        </button>
         <button
           mat-flat-button
           (click)="saveEvalCase()"
@@ -155,12 +157,18 @@
         }
       </div>
       } @else {
-      <div style="display: flex">
+      <div style="display: flex; align-items: center">
         @let isSessionLoading = uiStateService.isSessionLoading() | async; @if (isSessionLoading ===
         false) {
         <div class="toolbar-session-text">{{ i18n.sessionIdLabel }}</div>
         <div class="toolbar-session-id">{{ sessionId }}</div>
-        } @else {
+        @if (!canEditSession()) {
+          <div class="readonly-badge">
+            <mat-icon>visibility</mat-icon>
+            {{ i18n.readOnlyBadgeLabel }}
+          </div>
+          <div class="readonly-session-message">{{i18n.cannotEditSessionMessage}}</div>
+        } } @else {
         <div class="toolbar-session-text">{{ i18n.loadingSessionLabel }}</div>
         }
       </div>

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

@@ -41,6 +41,9 @@ export const CHAT_MESSAGES = {
   failedToLoadAgentsMessage: 'Failed to load agents. To get started, run',
   errorMessageLabel: 'Error message:',
   noAgentsFoundWarning: 'Warning: No agents found in current folder.',
+  cannotEditSessionMessage:
+      'Chat is disabled to prevent changes to the end user\'s session.',
+  readOnlyBadgeLabel: 'Read only',
 };
 
 /**
@@ -51,7 +54,7 @@ export type ChatMessages = typeof CHAT_MESSAGES;
 /**
  * Injection token for ChatComponent messages.
  */
-export const ChatMessagesInjectionToken = new InjectionToken<ChatMessages>(
-    'Chat Messages', {
+export const ChatMessagesInjectionToken =
+    new InjectionToken<ChatMessages>('Chat Messages', {
       factory: () => CHAT_MESSAGES,
     });

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

@@ -162,8 +162,12 @@
 }
 
 .function-event-button-highlight {
-  background-color: var(--chat-function-event-button-highlight-background-color);
-  border-color: var(--chat-function-event-button-highlight-border-color) !important;
+  background-color: var(
+    --chat-function-event-button-highlight-background-color
+  );
+  border-color: var(
+    --chat-function-event-button-highlight-border-color
+  ) !important;
   color: var(--chat-function-event-button-highlight-color) !important;
 }
 
@@ -194,8 +198,11 @@
 
 .bot-message:focus-within {
   .message-card {
-    background-color: var(--chat-bot-message-focus-within-message-card-background-color);
-    border: 1px solid var(--chat-bot-message-focus-within-message-card-border-color);
+    background-color: var(
+      --chat-bot-message-focus-within-message-card-background-color
+    );
+    border: 1px solid
+      var(--chat-bot-message-focus-within-message-card-border-color);
   }
 }
 
@@ -473,6 +480,7 @@ button {
   margin-left: auto;
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .toolbar-session-text {
@@ -486,6 +494,7 @@ button {
   text-transform: uppercase;
   margin-left: 20px;
   padding-top: 4px;
+  flex-shrink: 0;
 }
 
 .toolbar-session-id {
@@ -497,6 +506,7 @@ button {
   line-height: 20px;
   letter-spacing: 0.25px;
   margin-left: 5px;
+  flex-shrink: 0;
 }
 
 .toolbar-icon {
@@ -522,11 +532,16 @@ button {
       label-text-size: 14px,
       label-text-color: var(--chat-toolbar-sse-toggle-label-text-color),
       selected-track-color: var(--chat-toolbar-sse-toggle-selected-track-color),
-      selected-focus-track-color: var(--chat-toolbar-sse-toggle-selected-track-color),
-      selected-hover-track-color: var(--chat-toolbar-sse-toggle-selected-track-color),
-      selected-handle-color: var(--chat-toolbar-sse-toggle-selected-handle-color),
-      selected-focus-handle-color: var(--chat-toolbar-sse-toggle-selected-handle-color),
-      selected-hover-handle-color: var(--chat-toolbar-sse-toggle-selected-handle-color),
+      selected-focus-track-color:
+        var(--chat-toolbar-sse-toggle-selected-track-color),
+      selected-hover-track-color:
+        var(--chat-toolbar-sse-toggle-selected-track-color),
+      selected-handle-color:
+        var(--chat-toolbar-sse-toggle-selected-handle-color),
+      selected-focus-handle-color:
+        var(--chat-toolbar-sse-toggle-selected-handle-color),
+      selected-hover-handle-color:
+        var(--chat-toolbar-sse-toggle-selected-handle-color),
       track-height: 24px,
       track-width: 46px,
       track-outline-color: var(--chat-toolbar-sse-toggle-track-outline-color),
@@ -541,6 +556,37 @@ button {
   overflow-x: auto;
   max-width: 100%;
 }
+  
+.readonly-badge {
+  color: var(--chat-readonly-badge-color);
+  background-color: var(--chat-readonly-badge-background-color);
+  border-radius: 4px;
+  padding: 1px 6px;
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  font-size: 12px;
+  line-height: 16px;
+  gap: 4px;
+  white-space: nowrap;
+  mat-icon {
+    font-size: 14px;
+    width: 14px;
+    height: 14px;
+    padding-top: 1px;
+    flex-shrink: 0;
+  }
+}
+
+.readonly-session-message {
+  display: block;
+  color: var(--chat-toolbar-session-text-color);
+  margin-left: 1em;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.3px;
+  flex-shrink: 1;
+}
 
 ::ng-deep .mat-drawer-content {
   display: flex !important;

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

@@ -211,6 +211,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   root_agent = ROOT_AGENT;
   updatedSessionState: WritableSignal<any> = signal(null);
   private readonly isModelThinkingSubject = new BehaviorSubject(false);
+  protected readonly canEditSession = signal(true);
 
   // TODO: Remove this once backend supports restarting bidi streaming.
   sessionHasUsedBidi = new Set<string>();
@@ -1169,6 +1170,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
 
     this.sessionService.canEdit(this.userId, session).subscribe((canEdit) => {
       this.chatPanel()?.canEditSession.set(canEdit);
+      this.canEditSession.set(canEdit);
     });
     this.bottomPanelVisible = false;
     this.changeDetectorRef.detectChanges();

src/app/components/session-tab/session-tab.component.html

@@ -15,8 +15,8 @@
 -->
 
 <div class="session-wrapper">
-  @let isSessionListLoading = uiStateService.isSessionListLoading() | async;
-  @if (isSessionListLoading) {
+  @let isSessionListLoading = uiStateService.isSessionListLoading() | async; @if
+  (isSessionListLoading) {
   <div class="loading-spinner-container">
     <mat-progress-bar mode="indeterminate"></mat-progress-bar>
   </div>
@@ -30,13 +30,12 @@
       [ngClass]="session.id === sessionId ? 'session-item current': 'session-item'"
     >
       <div class="session-info">
-        <div class="session-id">
-          {{session.id}} @if ((sessionService.canEdit(userId, session) | async) === false) {
-          <mat-chip>{{ i18n.readonlyChip }}</mat-chip>
-          }
-        </div>
+        <div class="session-id">{{session.id}}</div>
         <div class="session-date">{{ getDate(session) }}</div>
       </div>
+      @if ((sessionService.canEdit(userId, session) | async) === false) {
+      <mat-chip>{{ i18n.readonlyChip }}</mat-chip>
+      }
     </div>
     }
   </div>

src/app/components/session-tab/session-tab.component.scss

@@ -33,6 +33,7 @@
 .session-item {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   border: none;
   background-color: var(--session-tab-session-item-background-color);
   border-radius: 8px;
@@ -45,6 +46,10 @@
   &.current {
     background-color: var(--session-tab-session-item-current-background-color);
   }
+
+  mat-chip {
+    margin-right: 11px;
+  }
 }
 
 .session-id {

src/styles.scss

@@ -165,6 +165,8 @@ markdown p {
   --chat-mat-mdc-text-field-wrapper-border-color: #8e918f;
   --chat-segment-key-color: lightgray;
   --chat-bottom-resize-handler-background-color: #5f6368;
+  --chat-readonly-badge-background-color: #ff8983;
+  --chat-readonly-badge-color: #202124;
   --chat-trace-detail-container-background-color: #1b1b1b;
   --chat-toolbar-background-color: #1b1b1b;
   --chat-toolbar-edit-mode-background-color: #44c2651a;