Fixes build warnings

Fixes annoying build warnings on `npm run build`, which also appear on `npm run serve` and hide actual issues.

PiperOrigin-RevId: 837331270

Author: hoonji

angular.json

@@ -35,7 +35,14 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+              "string-to-color",
+              "json-source-map",
+              "natural-compare-lite",
+              "ajv",
+              "jmespath"
+            ]
           },
           "configurations": {
             "production": {

src/app/components/add-tool-dialog/add-tool-dialog.component.ts

@@ -18,9 +18,9 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
 import { MatButton, MatIconButton } from '@angular/material/button';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatFormField } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatOption, MatSelect } from '@angular/material/select';
 import { MatIcon } from '@angular/material/icon';
@@ -44,7 +44,6 @@ import { TooltipUtil } from '../../../utils/tooltip-util';
     MatButton,
     MatIconButton,
     MatIcon,
-    MatLabel,
   ],
 })
 export class AddToolDialogComponent implements OnInit{

src/app/components/builder-tabs/builder-tabs.component.ts

@@ -20,22 +20,18 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, in
 import { FormsModule } from '@angular/forms';
 import { MatButton, MatIconButton } from '@angular/material/button';
 import { MatCheckbox } from '@angular/material/checkbox';
-import { MatCardActions, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
 import { MatDialog } from '@angular/material/dialog';
-import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { MatInput } from '@angular/material/input';
 import { MatOption, MatSelect } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import {MatExpansionModule} from '@angular/material/expansion';
-import { MatTab, MatTabGroup, MatTabLabel } from '@angular/material/tabs';
 import { MatTooltip } from '@angular/material/tooltip';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { YamlUtils } from '../../../utils/yaml-utils';
 import { AgentNode, ToolNode, CallbackNode } from '../../core/models/AgentBuilder';
-import { AgentBuilderService } from '../../core/services/agent-builder.service';
 import { getToolIcon } from '../../core/constants/tool-icons';
 import { AGENT_SERVICE } from '../../core/services/interfaces/agent';
 import {AGENT_BUILDER_SERVICE} from '../../core/services/interfaces/agent-builder';
@@ -57,24 +53,16 @@ import { ThemeToggle } from '../theme-toggle/theme-toggle';
   imports: [
     CommonModule,
     FormsModule,
-    JsonEditorComponent,
-    MatButton,
     MatButton,
     MatCheckbox,
     MatExpansionModule,
-    MatExpansionPanel,
-    MatExpansionPanelHeader,
-    MatExpansionPanelTitle,
     MatFormField,
     MatIcon,
     MatInput,
     MatIconButton,
     MatLabel,
     MatOption,
     MatSelect,
-    MatTab,
-    MatTabGroup,
-    MatTabLabel,
     MatTooltip,
     MatMenu,
     MatMenuTrigger,

src/app/components/built-in-tool-dialog/built-in-tool-dialog.component.ts

@@ -20,10 +20,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
 import { MatButton } from '@angular/material/button';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
-import { MatInput } from '@angular/material/input';
-import { MatOption, MatSelect } from '@angular/material/select';
 import { getToolIcon } from '../../core/constants/tool-icons';
 import { JsonEditorComponent } from '../json-editor/json-editor.component';
 
@@ -42,14 +39,9 @@ interface ToolCategory {
     FormsModule,
     MatDialogTitle,
     MatDialogContent,
-    MatFormField,
     MatIcon,
-    MatInput,
-    MatSelect,
-    MatOption,
     MatDialogActions,
     MatButton,
-    MatLabel,
     JsonEditorComponent,
   ],
 })

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

@@ -16,8 +16,8 @@
  */
 
 import {TextFieldModule} from '@angular/cdk/text-field';
-import {CommonModule, DOCUMENT, NgClass, NgStyle} from '@angular/common';
-import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Inject, Input, OnChanges, Output, Renderer2, signal, SimpleChanges, Type, ViewChild} from '@angular/core';
+import {CommonModule, NgClass} from '@angular/common';
+import {AfterViewInit, Component, ElementRef, EventEmitter, inject, Input, OnChanges, Output, signal, SimpleChanges, Type, ViewChild} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
@@ -64,7 +64,6 @@ const ROOT_AGENT = 'root_agent';
     AudioPlayerComponent,
     MatTooltipModule,
     NgClass,
-    NgStyle,
   ],
 })
 export class ChatPanelComponent implements OnChanges, AfterViewInit {

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

@@ -15,19 +15,17 @@
  * limitations under the License.
  */
 
-import {AsyncPipe, DOCUMENT, Location, NgClass} from '@angular/common';
+import {AsyncPipe, DOCUMENT, NgClass} from '@angular/common';
 import {HttpErrorResponse} from '@angular/common/http';
 import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, inject, Injectable, OnDestroy, OnInit, Renderer2, signal, viewChild, WritableSignal} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButton, MatFabButton} from '@angular/material/button';
 import {MatCard} from '@angular/material/card';
-import {MatOption} from '@angular/material/core';
 import {MatDialog} from '@angular/material/dialog';
 import {MatDivider} from '@angular/material/divider';
 import {MatIcon} from '@angular/material/icon';
 import {MatPaginatorIntl} from '@angular/material/paginator';
-import {MatSelect} from '@angular/material/select';
 import {MatDrawer, MatDrawerContainer} from '@angular/material/sidenav';
 import {MatSlideToggle} from '@angular/material/slide-toggle';
 import {MatSnackBar} from '@angular/material/snack-bar';
@@ -43,7 +41,6 @@ import {AgentRunRequest} from '../../core/models/AgentRunRequest';
 import {EvalCase} from '../../core/models/Eval';
 import {Session, SessionState} from '../../core/models/Session';
 import {Event as AdkEvent, Part} from '../../core/models/types';
-import {AgentBuilderService} from '../../core/services/agent-builder.service';
 import {AGENT_SERVICE} from '../../core/services/interfaces/agent';
 import {AGENT_BUILDER_SERVICE} from '../../core/services/interfaces/agent-builder';
 import {ARTIFACT_SERVICE} from '../../core/services/interfaces/artifact';
@@ -71,10 +68,7 @@ import {EditJsonDialogComponent} from '../edit-json-dialog/edit-json-dialog.comp
 import {EvalTabComponent} from '../eval-tab/eval-tab.component';
 import {PendingEventDialogComponent} from '../pending-event-dialog/pending-event-dialog.component';
 import {DeleteSessionDialogComponent, DeleteSessionDialogData,} from '../session-tab/delete-session-dialog/delete-session-dialog.component';
-import {SessionTabComponent} from '../session-tab/session-tab.component';
 import {SidePanelComponent} from '../side-panel/side-panel.component';
-import {SidePanelMessagesInjectionToken} from '../side-panel/side-panel.component.i18n';
-import {ThemeToggle} from '../theme-toggle/theme-toggle';
 import {TraceEventComponent} from '../trace-tab/trace-event/trace-event.component';
 import {ViewImageDialogComponent} from '../view-image-dialog/view-image-dialog.component';
 
@@ -145,7 +139,6 @@ const BIDI_STREAMING_RESTART_WARNING =
     SidePanelComponent,
     CanvasComponent,
     BuilderTabsComponent,
-    ThemeToggle,
   ],
 })
 export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {

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

@@ -19,17 +19,15 @@ import {AsyncPipe, NgClass} from '@angular/common';
 import {ChangeDetectorRef, Component, EventEmitter, inject, Input, OnInit, Output, signal,} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
-import {MatChip} from '@angular/material/chips';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIcon, MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
 import {MatProgressBar} from '@angular/material/progress-bar';
 import {ActivatedRoute} from '@angular/router';
-import {BehaviorSubject, combineLatest, of, Subject} from 'rxjs';
+import {of, Subject} from 'rxjs';
 import {catchError, debounceTime, map, switchMap, tap,} from 'rxjs/operators';
 
 import {Session} from '../../core/models/Session';
-import {FeatureFlagService} from '../../core/services/feature-flag.service';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/interfaces/feature-flag';
 import {SESSION_SERVICE} from '../../core/services/interfaces/session';
 import {UI_STATE_SERVICE} from '../../core/services/interfaces/ui-state';
@@ -43,7 +41,6 @@ import {SessionTabMessagesInjectionToken} from './session-tab.component.i18n';
   imports: [
     NgClass,
     AsyncPipe,
-    MatChip,
     MatProgressBar,
     MatIcon,
     MatFormFieldModule,

src/styles.scss

@@ -174,38 +174,38 @@ html.light-theme {
 
 // Dark theme dialog overrides
 html.dark-theme {
-  @include mat.dialog-overrides(
-    (
-      container-color: #2b2b2f,
-      subhead-color: white,
-    )
-  );
-
   // Custom property for dialog subhead font
   --mdc-dialog-subhead-font-family: 'Google Sans';
   --mdc-dialog-subhead-font-style: normal;
   --mdc-dialog-subhead-font-weight: 400;
   --mdc-dialog-subhead-font-size: 24px;
   --mdc-dialog-subhead-line-height: 32px;
   --mdc-dialog-subhead-color: #e3e3e3;
-}
 
-// Light theme dialog overrides
-html.light-theme {
   @include mat.dialog-overrides(
     (
-      container-color: #ffffff,
-      subhead-color: #202124,
+      container-color: #2b2b2f,
+      subhead-color: white,
     )
   );
+}
 
+// Light theme dialog overrides
+html.light-theme {
   // Custom property for dialog subhead font
   --mdc-dialog-subhead-font-family: 'Google Sans';
   --mdc-dialog-subhead-font-style: normal;
   --mdc-dialog-subhead-font-weight: 400;
   --mdc-dialog-subhead-font-size: 24px;
   --mdc-dialog-subhead-line-height: 32px;
   --mdc-dialog-subhead-color: #202124;
+
+  @include mat.dialog-overrides(
+    (
+      container-color: #ffffff,
+      subhead-color: #202124,
+    )
+  );
 }
 
 .mat-mdc-dialog-container .mat-mdc-dialog-title.mdc-dialog__title {
@@ -219,13 +219,6 @@ html.light-theme {
 
 // Dark theme progress spinner and custom properties
 html.dark-theme {
-  @include mat.progress-spinner-overrides(
-    (
-      active-indicator-color: #a8c7fa,
-      size: 80,
-    )
-  );
-
   --chat-panel-function-event-button-background-color: white;
   --chat-panel-function-event-button-highlight-background-color: rgb(
     15,
@@ -510,15 +503,17 @@ html.dark-theme {
   --mat-table-header-headline-color: #fff;
 }
 
-// Light theme progress spinner and custom properties
-html.light-theme {
   @include mat.progress-spinner-overrides(
     (
-      active-indicator-color: #305f9d,
+      active-indicator-color: #a8c7fa,
       size: 80,
     )
   );
 
+}
+
+// Light theme progress spinner and custom properties
+html.light-theme {
   --chat-panel-function-event-button-background-color: #202124;
   --chat-panel-function-event-button-highlight-background-color: #0f5223;
   --chat-panel-function-event-button-highlight-border-color: #0f5223;
@@ -795,6 +790,13 @@ html.light-theme {
   --builder-tool-item-background-color: #f6f3f3;
   --builder-tool-item-border-color: #c8c6c6;
   --builder-tool-item-hover-background-color: #dcd9d9;
+
+  @include mat.progress-spinner-overrides(
+    (
+      active-indicator-color: #305f9d,
+      size: 80,
+    )
+  );
 }
 
 // Form field overrides for dark theme