Enables customizing markdown renderer

PiperOrigin-RevId: 811555749

Author: hoonji

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

@@ -105,7 +105,7 @@
             </div>
           </div>
           } @else {
-          <app-markdown [text]="message.text!" [thought]="message.thought"></app-markdown>
+            <ng-container [ngComponentOutlet]="markdownComponent" [ngComponentOutletInputs]="{text: message.text!, thought: message.thought}"></ng-container>
           }
         }
         </div>

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

@@ -28,6 +28,8 @@ import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-
 import {StringToColorServiceImpl} from '../../core/services/string-to-color.service';
 import {MockStringToColorService} from '../../core/services/testing/mock-string-to-color.service';
 import {ChatPanelComponent} from './chat-panel.component';
+import {MARKDOWN_COMPONENT} from '../markdown/markdown.component.interface';
+import {MarkdownComponent} from '../markdown/markdown.component';
 
 const USER_ID = 'user';
 const FUNC1_NAME = 'func1';
@@ -53,6 +55,7 @@ describe('ChatPanelComponent', () => {
               provide: STRING_TO_COLOR_SERVICE,
               useClass: StringToColorServiceImpl,
             },
+            {provide: MARKDOWN_COMPONENT, useValue: MarkdownComponent},
           ],
         })
         .compileComponents();

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

@@ -17,7 +17,7 @@
 
 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, ViewChild,} from '@angular/core';
+import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Inject, Input, OnChanges, Output, Renderer2, signal, SimpleChanges, ViewChild, Type} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
@@ -34,7 +34,7 @@ import type {EvalCase} from '../../core/models/Eval';
 import {STRING_TO_COLOR_SERVICE} from '../../core/services/interfaces/string-to-color';
 import {MediaType,} from '../artifact-tab/artifact-tab.component';
 import {AudioPlayerComponent} from '../audio-player/audio-player.component';
-import {MarkdownComponent} from '../markdown/markdown.component';
+import {MARKDOWN_COMPONENT, MarkdownComponentInterface} from '../markdown/markdown.component.interface';
 
 import {ChatPanelMessagesInjectionToken} from './chat-panel.component.i18n';
 
@@ -49,7 +49,7 @@ const ROOT_AGENT = 'root_agent';
     CommonModule, FormsModule, MatIconModule, MatCardModule,
     MatProgressBarModule, MatButtonModule, MatInputModule, TextFieldModule,
     MatFormFieldModule, MatMenuModule, NgxJsonViewerModule,
-    AudioPlayerComponent, MatTooltipModule, NgClass, NgStyle, MarkdownComponent
+    AudioPlayerComponent, MatTooltipModule, NgClass, NgStyle,
   ],
 })
 export class ChatPanelComponent implements OnChanges, AfterViewInit {
@@ -101,6 +101,9 @@ export class ChatPanelComponent implements OnChanges, AfterViewInit {
   private previousMessageCount = 0;
   protected readonly i18n = inject(ChatPanelMessagesInjectionToken);
   private readonly stringToColorService = inject(STRING_TO_COLOR_SERVICE);
+  readonly markdownComponent: Type<MarkdownComponentInterface> = inject(
+    MARKDOWN_COMPONENT,
+  );
   readonly MediaType = MediaType;
 
   constructor(

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

@@ -56,6 +56,8 @@ import {TRACE_SERVICE, TraceService} from '../../core/services/trace.service';
 import {VIDEO_SERVICE, VideoService} from '../../core/services/video.service';
 import {WEBSOCKET_SERVICE, WebSocketService,} from '../../core/services/websocket.service';
 import {Component} from '@angular/core';
+import {MARKDOWN_COMPONENT} from '../markdown/markdown.component.interface';
+import {MarkdownComponent} from '../markdown/markdown.component';
 
 import {ChatPanelComponent} from '../chat-panel/chat-panel.component';
 import {SidePanelComponent} from '../side-panel/side-panel.component';
@@ -202,6 +204,7 @@ describe('ChatComponent', () => {
             {provide: Router, useValue: mockRouter},
             {provide: ActivatedRoute, useValue: mockActivatedRoute},
             {provide: Location, useValue: mockLocation},
+            {provide: MARKDOWN_COMPONENT, useValue: MarkdownComponent},
           ],
         })
         .compileComponents();

src/app/components/markdown/markdown.component.html

@@ -15,9 +15,9 @@
 -->
 
 <markdown
-  [data]="text"
+  [data]="text()"
   [ngStyle]="{
-              'font-style': thought ? 'italic' : 'normal',
-              color: thought ? '#9aa0a6' : 'white'
+              'font-style': thought() ? 'italic' : 'normal',
+              color: thought() ? '#9aa0a6' : 'white'
             }"
 ></markdown>

src/app/components/markdown/markdown.component.interface.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.
+ */
+
+import {Component, InjectionToken, InputSignal, Type} from '@angular/core';
+
+/**
+ * Represents a component to be used to render markdown across the app.
+ */
+export const MARKDOWN_COMPONENT = new InjectionToken<Type<MarkdownComponentInterface>>(
+    'MARKDOWN_COMPONENT',
+);
+
+/**
+ * Interface for Markdown component.
+ */
+export interface MarkdownComponentInterface {
+  text: InputSignal<string>;
+  thought: InputSignal<boolean>;
+}

src/app/components/markdown/markdown.component.spec.ts

@@ -46,7 +46,7 @@ describe('MarkdownComponent', () => {
   });
 
   it('should display markdown text', fakeAsync(() => {
-       component.text = '**bold**';
+       fixture.componentRef.setInput('text', '**bold**');
        fixture.detectChanges();
        tick();
        const element: HTMLElement = fixture.nativeElement;
@@ -55,7 +55,7 @@ describe('MarkdownComponent', () => {
      }));
 
   it('should apply italic style when thought is true', () => {
-    component.thought = true;
+    fixture.componentRef.setInput('thought', true);
     fixture.detectChanges();
     const markdownElement: HTMLElement|null =
         fixture.nativeElement.querySelector('markdown');
@@ -64,7 +64,7 @@ describe('MarkdownComponent', () => {
   });
 
   it('should apply normal style when thought is false', () => {
-    component.thought = false;
+    fixture.componentRef.setInput('thought', false);
     fixture.detectChanges();
     const markdownElement: HTMLElement|null =
         fixture.nativeElement.querySelector('markdown');

src/app/components/markdown/markdown.component.ts

@@ -16,8 +16,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {Component, Input, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-
+import {Component, input} from '@angular/core';
 import {MarkdownModule, provideMarkdown} from 'ngx-markdown';
 
 /**
@@ -34,9 +33,8 @@ import {MarkdownModule, provideMarkdown} from 'ngx-markdown';
   providers: [
     provideMarkdown(),
   ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class MarkdownComponent {
-  @Input() text = '';
-  @Input() thought = false;
+  text = input('');
+  thought = input(false);
 }

src/main.ts

@@ -43,6 +43,8 @@ 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 {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())
@@ -67,6 +69,7 @@ fetch('./assets/config/runtime-config.json')
         {provide: GRAPH_SERVICE, useClass: GraphService},
         {provide: STRING_TO_COLOR_SERVICE, useClass: StringToColorServiceImpl},
         {provide: SAFE_VALUES_SERVICE, useClass: SafeValuesServiceImpl},
+        {provide: MARKDOWN_COMPONENT, useValue: MarkdownComponent},
         provideAnimations(),
       ]
     }).catch((err) => console.error(err));