fix(cockpit-chat): render messages in c-messages + c-input primitive demos

cockpit/chat/input/angular/src/app/input.component.ts

@@ -1,7 +1,13 @@
 // SPDX-License-Identifier: MIT
 import { Component, computed } from '@angular/core';
-import { ChatInputComponent as ChatInputPrimitive } from '@ngaf/chat';
-import { ChatMessageListComponent } from '@ngaf/chat';
+import {
+  ChatInputComponent as ChatInputPrimitive,
+  ChatMessageListComponent,
+  ChatMessageComponent,
+  ChatStreamingMdComponent,
+  MessageTemplateDirective,
+  messageContent,
+} from '@ngaf/chat';
 import { ExampleChatLayoutComponent } from '@ngaf/example-layouts';
 import { agent } from '@ngaf/langgraph';
 import { environment } from '../environments/environment';
@@ -10,19 +16,51 @@ import { environment } from '../environments/environment';
  * InputComponent showcases ChatInputComponent features including
  * keyboard handling, disabled state, and custom placeholder.
  * A sidebar displays the current input state.
+ *
+ * ChatMessageListComponent renders nothing on its own — it discovers
+ * projected `<ng-template chatMessageTemplate="...">` blocks via
+ * contentChildren. Templates are projected here so the conversation
+ * surface actually displays user + assistant turns.
  */
 @Component({
   selector: 'app-input',
   standalone: true,
-  imports: [ChatInputPrimitive, ChatMessageListComponent, ExampleChatLayoutComponent],
+  imports: [
+    ChatInputPrimitive,
+    ChatMessageListComponent,
+    ChatMessageComponent,
+    ChatStreamingMdComponent,
+    MessageTemplateDirective,
+    ExampleChatLayoutComponent,
+  ],
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <div main class="flex-1 flex flex-col min-w-0">
         <header class="px-4 py-3 border-b" style="border-color: var(--ngaf-chat-separator); background: var(--ngaf-chat-bg);">
           <h1 class="text-sm font-semibold" style="color: var(--ngaf-chat-text);">Chat Input Demo</h1>
         </header>
         <div class="flex-1 overflow-y-auto">
-          <chat-message-list [agent]="agent" />
+          <chat-message-list [agent]="agent">
+            <ng-template chatMessageTemplate="human" let-message>
+              <chat-message [role]="'user'">{{ messageContent(message) }}</chat-message>
+            </ng-template>
+            <ng-template chatMessageTemplate="ai" let-message let-i="index">
+              <chat-message
+                [role]="'assistant'"
+                [streaming]="agent.isLoading() && i === agent.messages().length - 1"
+                [current]="i === agent.messages().length - 1"
+              >
+                <chat-streaming-md
+                  [content]="messageContent(message)"
+                  [streaming]="agent.isLoading() && i === agent.messages().length - 1"
+                />
+              </chat-message>
+            </ng-template>
+            <ng-template chatMessageTemplate="tool" let-message><!-- hidden --></ng-template>
+            <ng-template chatMessageTemplate="system" let-message>
+              <chat-message [role]="'system'">{{ messageContent(message) }}</chat-message>
+            </ng-template>
+          </chat-message-list>
         </div>
         <div class="px-4 py-2" style="background: var(--ngaf-chat-bg);">
           <chat-input [agent]="agent" placeholder="Try typing here..." (submitted)="submitMessage($event)" />
@@ -59,6 +97,7 @@ export class InputComponent {
 
   protected readonly streamStatus = computed(() => this.agent.status());
   protected readonly isLoading = computed(() => this.agent.isLoading());
+  protected readonly messageContent = messageContent;
 
   submitMessage(content: string) {
     this.agent.submit({ message: content });

cockpit/chat/messages/angular/src/app/messages.component.ts

@@ -4,6 +4,10 @@ import {
   ChatMessageListComponent,
   ChatInputComponent,
   ChatTypingIndicatorComponent,
+  ChatMessageComponent,
+  ChatStreamingMdComponent,
+  MessageTemplateDirective,
+  messageContent,
 } from '@ngaf/chat';
 import { ExampleChatLayoutComponent } from '@ngaf/example-layouts';
 import { agent } from '@ngaf/langgraph';
@@ -15,19 +19,53 @@ import { environment } from '../environments/environment';
  * Uses ChatMessageListComponent, ChatInputComponent, and ChatTypingIndicatorComponent
  * individually rather than the composed ChatComponent, giving full control
  * over layout and message rendering.
+ *
+ * ChatMessageListComponent renders nothing on its own — it discovers
+ * projected `<ng-template chatMessageTemplate="...">` blocks via
+ * contentChildren and uses them per message type. The composed `<chat>`
+ * component provides default templates internally; primitive consumers
+ * must project them explicitly.
  */
 @Component({
   selector: 'app-messages',
   standalone: true,
-  imports: [ChatMessageListComponent, ChatInputComponent, ChatTypingIndicatorComponent, ExampleChatLayoutComponent],
+  imports: [
+    ChatMessageListComponent,
+    ChatInputComponent,
+    ChatTypingIndicatorComponent,
+    ChatMessageComponent,
+    ChatStreamingMdComponent,
+    MessageTemplateDirective,
+    ExampleChatLayoutComponent,
+  ],
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <div main class="flex-1 flex flex-col min-w-0">
         <header class="px-4 py-3 border-b" style="border-color: var(--ngaf-chat-separator); background: var(--ngaf-chat-bg);">
           <h1 class="text-sm font-semibold" style="color: var(--ngaf-chat-text);">Chat Messages Primitives</h1>
         </header>
         <div class="flex-1 overflow-y-auto">
-          <chat-message-list [agent]="agent" />
+          <chat-message-list [agent]="agent">
+            <ng-template chatMessageTemplate="human" let-message>
+              <chat-message [role]="'user'">{{ messageContent(message) }}</chat-message>
+            </ng-template>
+            <ng-template chatMessageTemplate="ai" let-message let-i="index">
+              <chat-message
+                [role]="'assistant'"
+                [streaming]="agent.isLoading() && i === agent.messages().length - 1"
+                [current]="i === agent.messages().length - 1"
+              >
+                <chat-streaming-md
+                  [content]="messageContent(message)"
+                  [streaming]="agent.isLoading() && i === agent.messages().length - 1"
+                />
+              </chat-message>
+            </ng-template>
+            <ng-template chatMessageTemplate="tool" let-message><!-- hidden --></ng-template>
+            <ng-template chatMessageTemplate="system" let-message>
+              <chat-message [role]="'system'">{{ messageContent(message) }}</chat-message>
+            </ng-template>
+          </chat-message-list>
         </div>
         <div class="px-4 py-2" style="background: var(--ngaf-chat-bg);">
           <chat-typing-indicator [agent]="agent" />
@@ -52,6 +90,8 @@ export class MessagesComponent {
     assistantId: environment.streamingAssistantId,
   });
 
+  protected readonly messageContent = messageContent;
+
   submitMessage(content: string) {
     this.agent.submit({ message: content });
   }