Enables logo customization

src/app/components/custom-logo/custom-logo.component.html

@@ -0,0 +1,30 @@
+<!--
+ 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.
+-->
+
+@let imgUrl = logoConfig?.imageUrl;
+@let text = logoConfig?.text;
+
+@if (imgUrl && text) {
+  <a href="/">
+    <img class="orcas-logo" src="{{imgUrl}}" width="32px" height="32px" />
+    {{text}}
+  </a>
+} @else {
+  <div>
+    Invalid custom logo config. Make sure that your runtime config specifies
+    both imgUrl and text in the logo field.
+  </div>
+}

src/app/components/custom-logo/custom-logo.component.scss

@@ -0,0 +1,24 @@
+/**
+ * @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.
+ */
+
+a {
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}

src/app/components/custom-logo/custom-logo.component.spec.ts

@@ -0,0 +1,83 @@
+/**
+ * @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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { CustomLogoComponent } from './custom-logo.component';
+import {RuntimeConfigUtil} from '../../../utils/runtime-config-util';
+
+describe('CustomLogoComponent', () => {
+  let component: CustomLogoComponent;
+  let fixture: ComponentFixture<CustomLogoComponent>;
+
+  const setupTest = (logoConfig: any) => {
+    spyOn(RuntimeConfigUtil, 'getRuntimeConfig').and.returnValue({
+      logo: logoConfig,
+    } as any);
+
+    TestBed.configureTestingModule({
+      imports: [CustomLogoComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CustomLogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  };
+
+  describe('with valid logo config', () => {
+    beforeEach(() => {
+      setupTest({ imageUrl: 'test.png', text: 'Test Logo' });
+    });
+
+    it('should render the logo and text', () => {
+      const linkElement = fixture.debugElement.query(By.css('a'));
+      const imgElement = fixture.debugElement.query(By.css('img'));
+
+      expect(imgElement.nativeElement.src).toContain('test.png');
+      expect(linkElement.nativeElement.textContent).toContain('Test Logo');
+    });
+  });
+
+  describe('with invalid logo config', () => {
+    it('should show an error if imageUrl is missing', () => {
+      setupTest({ text: 'Test Logo' });
+      const errorElement = fixture.debugElement.query(By.css('div'));
+
+      expect(errorElement.nativeElement.textContent).toContain(
+        'Invalid custom logo config'
+      );
+    });
+
+    it('should show an error if text is missing', () => {
+      setupTest({ imageUrl: 'test.png' });
+      const errorElement = fixture.debugElement.query(By.css('div'));
+
+      expect(errorElement.nativeElement.textContent).toContain(
+        'Invalid custom logo config'
+      );
+    });
+
+    it('should show an error if logoConfig is missing', () => {
+      setupTest(undefined);
+      const errorElement = fixture.debugElement.query(By.css('div'));
+
+      expect(errorElement.nativeElement.textContent).toContain(
+        'Invalid custom logo config'
+      );
+    });
+  });
+});

src/app/components/custom-logo/custom-logo.component.ts

@@ -0,0 +1,31 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+import {RuntimeConfigUtil} from '../../../utils/runtime-config-util';
+
+/** Logo component to override the default logo. */
+@Component({
+  selector: 'app-custom-logo',
+  standalone: true,
+  templateUrl: './custom-logo.component.html',
+  styleUrls: ['./custom-logo.component.scss'],
+})
+export class CustomLogoComponent {
+  readonly logoConfig = RuntimeConfigUtil.getRuntimeConfig().logo;
+}

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

@@ -3,8 +3,15 @@
   <div style="width: 100%">
     <div class="drawer-header">
       <div class="drawer-logo">
-        <img src="assets/ADK-512-color.svg" width="32px" height="32px" />
-        {{ i18n.agentDevelopmentKitLabel }}
+        @if (logoComponent) {
+          <div>
+            <ng-container *ngComponentOutlet="logoComponent"></ng-container>
+            <div class="powered-by-adk">Powered by Agent Development Kit</div>
+          </div>
+        } @else {
+          <img src="assets/ADK-512-color.svg" width="32px" height="32px" />
+          {{ i18n.agentDevelopmentKitLabel }}
+        }
       </div>
       <span
         class="material-symbols-outlined"

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

@@ -127,3 +127,10 @@
   line-height: 24px;
   letter-spacing: 0.1px;
 }
+
+.powered-by-adk {
+  font-size: 10px;
+  color: grey;
+  text-align: right;
+  margin-top: -5px;
+}

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

@@ -15,18 +15,19 @@
  * limitations under the License.
  */
 
-import {CommonModule} from '@angular/common';
-import {Component, EventEmitter, inject, Input, Output, viewChild} from '@angular/core';
+import {Component, EventEmitter, inject, Input, Output, viewChild, Type} from '@angular/core';
 import {MatMiniFabButton} from '@angular/material/button';
 import {MatIcon} from '@angular/material/icon';
 import {MatPaginator, PageEvent} from '@angular/material/paginator';
 import {MatTab, MatTabGroup, MatTabLabel} from '@angular/material/tabs';
 import {MatTooltip} from '@angular/material/tooltip';
 import {type SafeHtml} from '@angular/platform-browser';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
+import {AsyncPipe, NgComponentOutlet} from '@angular/common';
 
 import {EvalCase} from '../../core/models/Eval';
 import {Session} from '../../core/models/Session';
+import {LOGO_COMPONENT} from '../../injection_tokens';
 import {FEATURE_FLAG_SERVICE} from '../../core/services/feature-flag.service';
 import {ArtifactTabComponent} from '../artifact-tab/artifact-tab.component';
 import {EvalTabComponent} from '../eval-tab/eval-tab.component';
@@ -46,7 +47,8 @@ import {SidePanelMessagesInjectionToken} from './side-panel.component.i18n';
   styleUrls: ['./side-panel.component.scss'],
   standalone: true,
   imports: [
-    CommonModule,
+    AsyncPipe,
+    NgComponentOutlet,
     MatTooltip,
     MatTabGroup,
     MatTab,
@@ -96,6 +98,9 @@ export class SidePanelComponent {
   readonly sessionTabComponent = viewChild(SessionTabComponent);
   readonly evalTabComponent = viewChild(EvalTabComponent);
 
+  readonly logoComponent: Type<Component> | null = inject(LOGO_COMPONENT, {
+    optional: true,
+  });
   readonly i18n = inject(SidePanelMessagesInjectionToken);
   readonly featureFlagService = inject(FEATURE_FLAG_SERVICE);
 

src/app/core/models/RuntimeConfig.ts

@@ -0,0 +1,33 @@
+/**
+ * @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.
+ */
+
+/**
+ * Runtime configuration for the ADK web app. Corresponds to the JSON file
+ * read by the web app at runtime (runtime-config.json).
+ */
+export interface RuntimeConfig {
+  backendUrl: string;
+  logo?: LogoConfig;
+}
+
+/**
+ * Logo configuration for the ADK web app.
+ */
+export interface LogoConfig {
+  text: string;
+  imageUrl: string;
+}

src/app/injection_tokens.ts

@@ -0,0 +1,27 @@
+/**
+ * @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.
+ */
+
+/** @fileoverview App-level injection tokens. */
+
+import {Component, InjectionToken, Type} from '@angular/core';
+
+/**
+ * Represents a component to be used as the logo across the app.
+ */
+export const LOGO_COMPONENT = new InjectionToken<Type<Component>>(
+    'LOGO_COMPONENT',
+);

src/assets/config/runtime-config.json

@@ -1,3 +1,3 @@
 {
   "backendUrl": "http://localhost:8000"
-}
+}

src/main.ts

@@ -27,6 +27,7 @@ import {provideAnimations} from '@angular/platform-browser/animations';
 
 import {AppRoutingModule} from './app/app-routing.module';
 import {AppComponent} from './app/app.component';
+import {CustomLogoComponent} from './app/components/custom-logo/custom-logo.component';
 import {AGENT_SERVICE, AgentService} from './app/core/services/agent.service';
 import {ARTIFACT_SERVICE, ArtifactService} from './app/core/services/artifact.service';
 import {AUDIO_SERVICE, AudioService} from './app/core/services/audio.service';
@@ -43,13 +44,15 @@ import {StringToColorServiceImpl} from './app/core/services/string-to-color.serv
 import {TRACE_SERVICE, TraceService} from './app/core/services/trace.service';
 import {VIDEO_SERVICE, VideoService} from './app/core/services/video.service';
 import {WEBSOCKET_SERVICE, WebSocketService} from './app/core/services/websocket.service';
+import {LOGO_COMPONENT} from './app/injection_tokens';
 import {MARKDOWN_COMPONENT} from './app/components/markdown/markdown.component.interface';
 import {MarkdownComponent} from './app/components/markdown/markdown.component';
 
 fetch('./assets/config/runtime-config.json')
   .then((response) => response.json())
   .then((config) => {
     (window as any)['runtimeConfig'] = config;
+
     bootstrapApplication(AppComponent, {
       providers: [
         importProvidersFrom(
@@ -70,6 +73,7 @@ fetch('./assets/config/runtime-config.json')
         {provide: STRING_TO_COLOR_SERVICE, useClass: StringToColorServiceImpl},
         {provide: SAFE_VALUES_SERVICE, useClass: SafeValuesServiceImpl},
         {provide: MARKDOWN_COMPONENT, useValue: MarkdownComponent},
+        ...(config.logo ? [{provide: LOGO_COMPONENT, useValue: CustomLogoComponent}] : []),
         provideAnimations(),
       ]
     }).catch((err) => console.error(err));

src/utils/runtime-config-util.ts

@@ -0,0 +1,25 @@
+/**
+ * @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 {RuntimeConfig} from '../app/core/models/RuntimeConfig';
+
+export class RuntimeConfigUtil {
+  /** Returns the runtime config from global variable. */
+  static getRuntimeConfig(): RuntimeConfig {
+    return (window as any)['runtimeConfig'] as RuntimeConfig;
+  }
+}