diff --git a/cockpit/chat/a2ui/angular/src/app/a2ui.component.ts b/cockpit/chat/a2ui/angular/src/app/a2ui.component.ts index 1bef15d66..8e5b477f7 100644 --- a/cockpit/chat/a2ui/angular/src/app/a2ui.component.ts +++ b/cockpit/chat/a2ui/angular/src/app/a2ui.component.ts @@ -1,14 +1,19 @@ // SPDX-License-Identifier: MIT import { Component } from '@angular/core'; import { ChatComponent, a2uiBasicCatalog } from '@ngaf/chat'; +import { ExampleChatLayoutComponent } from '@ngaf/example-layouts'; import { agent } from '@ngaf/langgraph'; import { environment } from '../environments/environment'; @Component({ selector: 'app-a2ui', standalone: true, - imports: [ChatComponent], - template: ``, + imports: [ChatComponent, ExampleChatLayoutComponent], + template: ` + + + + `, }) export class A2uiComponent { protected readonly agent = agent({ diff --git a/cockpit/chat/a2ui/angular/src/index.html b/cockpit/chat/a2ui/angular/src/index.html index b566e7a1a..c9723e559 100644 --- a/cockpit/chat/a2ui/angular/src/index.html +++ b/cockpit/chat/a2ui/angular/src/index.html @@ -5,9 +5,8 @@ Chat A2UI — Angular - - + diff --git a/cockpit/chat/a2ui/angular/src/styles.css b/cockpit/chat/a2ui/angular/src/styles.css index b17f1690e..d42cba930 100644 --- a/cockpit/chat/a2ui/angular/src/styles.css +++ b/cockpit/chat/a2ui/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the a2ui capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} diff --git a/cockpit/chat/debug/angular/src/index.html b/cockpit/chat/debug/angular/src/index.html index 996c3026f..f2ce61f79 100644 --- a/cockpit/chat/debug/angular/src/index.html +++ b/cockpit/chat/debug/angular/src/index.html @@ -5,9 +5,8 @@ Chat Debug — Angular - - + diff --git a/cockpit/chat/debug/angular/src/styles.css b/cockpit/chat/debug/angular/src/styles.css index 7260a5b65..d42cba930 100644 --- a/cockpit/chat/debug/angular/src/styles.css +++ b/cockpit/chat/debug/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the debug capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} diff --git a/cockpit/chat/generative-ui/angular/src/index.html b/cockpit/chat/generative-ui/angular/src/index.html index 8123c3b27..2b534d4de 100644 --- a/cockpit/chat/generative-ui/angular/src/index.html +++ b/cockpit/chat/generative-ui/angular/src/index.html @@ -5,9 +5,8 @@ Chat Generative UI — Angular - - + diff --git a/cockpit/chat/generative-ui/angular/src/styles.css b/cockpit/chat/generative-ui/angular/src/styles.css index 8b4b3f531..d42cba930 100644 --- a/cockpit/chat/generative-ui/angular/src/styles.css +++ b/cockpit/chat/generative-ui/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the generative-ui capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} diff --git a/cockpit/chat/input/angular/src/app/input.component.ts b/cockpit/chat/input/angular/src/app/input.component.ts index 2816df8cb..e36f619a8 100644 --- a/cockpit/chat/input/angular/src/app/input.component.ts +++ b/cockpit/chat/input/angular/src/app/input.component.ts @@ -18,20 +18,20 @@ import { environment } from '../environments/environment'; template: `
-
-

Chat Input Demo

+
+

Chat Input Demo

-
+
-
+

Input State

-
+ style="color: var(--ngaf-chat-text-muted);">Input State +
Stream Status
{{ streamStatus() }}
Is Loading
@@ -39,8 +39,8 @@ import { environment } from '../environments/environment';

Features

-
    + style="color: var(--ngaf-chat-text-muted);">Features +
    • Custom placeholder text
    • Enter to send
    • Shift+Enter for newline
      • diff --git a/cockpit/chat/input/angular/src/index.html b/cockpit/chat/input/angular/src/index.html index a09f29255..ae9903bcc 100644 --- a/cockpit/chat/input/angular/src/index.html +++ b/cockpit/chat/input/angular/src/index.html @@ -5,9 +5,8 @@ Chat Input — Angular - - + diff --git a/cockpit/chat/input/angular/src/styles.css b/cockpit/chat/input/angular/src/styles.css index d4e83d3e7..d42cba930 100644 --- a/cockpit/chat/input/angular/src/styles.css +++ b/cockpit/chat/input/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the input capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} diff --git a/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts b/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts index a06702046..11581d3da 100644 --- a/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts +++ b/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts @@ -19,14 +19,14 @@ import { environment } from '../environments/environment'; template: ` -
      +

      Interrupt Panel

      + style="color: var(--ngaf-chat-text-muted);">Interrupt Panel

      Stream Status

      -

      {{ streamStatus() }}

      + style="color: var(--ngaf-chat-text-muted);">Stream Status +

      {{ streamStatus() }}

      diff --git a/cockpit/chat/interrupts/angular/src/index.html b/cockpit/chat/interrupts/angular/src/index.html index d4e08882c..49c9e4bf4 100644 --- a/cockpit/chat/interrupts/angular/src/index.html +++ b/cockpit/chat/interrupts/angular/src/index.html @@ -5,9 +5,8 @@ Chat Interrupts — Angular - - + diff --git a/cockpit/chat/interrupts/angular/src/styles.css b/cockpit/chat/interrupts/angular/src/styles.css index 0275e37b1..d42cba930 100644 --- a/cockpit/chat/interrupts/angular/src/styles.css +++ b/cockpit/chat/interrupts/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the interrupts capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} diff --git a/cockpit/chat/messages/angular/src/app/messages.component.ts b/cockpit/chat/messages/angular/src/app/messages.component.ts index 450fb5d8a..59c2a4b69 100644 --- a/cockpit/chat/messages/angular/src/app/messages.component.ts +++ b/cockpit/chat/messages/angular/src/app/messages.component.ts @@ -23,21 +23,21 @@ import { environment } from '../environments/environment'; template: `
      -
      -

      Chat Messages Primitives

      +
      +

      Chat Messages Primitives

      -
      +
      -
      +

      Primitives Used

      -
        + style="color: var(--ngaf-chat-text-muted);">Primitives Used +
        • ChatMessageListComponent
        • ChatInputComponent
        • ChatTypingIndicatorComponent
          • diff --git a/cockpit/chat/messages/angular/src/index.html b/cockpit/chat/messages/angular/src/index.html index 96fef9bbe..0d47dc3d3 100644 --- a/cockpit/chat/messages/angular/src/index.html +++ b/cockpit/chat/messages/angular/src/index.html @@ -5,9 +5,8 @@ Chat Messages — Angular - - + diff --git a/cockpit/chat/messages/angular/src/styles.css b/cockpit/chat/messages/angular/src/styles.css index e80c54b41..d42cba930 100644 --- a/cockpit/chat/messages/angular/src/styles.css +++ b/cockpit/chat/messages/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the messages capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} diff --git a/cockpit/chat/subagents/angular/src/app/subagents.component.ts b/cockpit/chat/subagents/angular/src/app/subagents.component.ts index 25099aac8..06e1d5ef0 100644 --- a/cockpit/chat/subagents/angular/src/app/subagents.component.ts +++ b/cockpit/chat/subagents/angular/src/app/subagents.component.ts @@ -21,14 +21,14 @@ import { environment } from '../environments/environment'; template: ` -
          +

          Active Subagents

          + style="color: var(--ngaf-chat-text-muted);">Active Subagents

          Agent Pipeline

          -
            + style="color: var(--ngaf-chat-text-muted);">Agent Pipeline +
            1. Orchestrator
            2. Research Agent
            3. Analysis Agent
              4. diff --git a/cockpit/chat/subagents/angular/src/index.html b/cockpit/chat/subagents/angular/src/index.html index 0e43c8531..82b6ebc95 100644 --- a/cockpit/chat/subagents/angular/src/index.html +++ b/cockpit/chat/subagents/angular/src/index.html @@ -5,9 +5,8 @@ Chat Subagents — Angular - - + diff --git a/cockpit/chat/subagents/angular/src/styles.css b/cockpit/chat/subagents/angular/src/styles.css index 315040f3b..d42cba930 100644 --- a/cockpit/chat/subagents/angular/src/styles.css +++ b/cockpit/chat/subagents/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the subagents capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} diff --git a/cockpit/chat/theming/angular/src/app/theming.component.ts b/cockpit/chat/theming/angular/src/app/theming.component.ts index 621b5b20d..c5fbce953 100644 --- a/cockpit/chat/theming/angular/src/app/theming.component.ts +++ b/cockpit/chat/theming/angular/src/app/theming.component.ts @@ -53,15 +53,15 @@ const THEMES: Record> = { template: ` -
              +

              Theme Picker

              + style="color: var(--ngaf-chat-text-muted);">Theme Picker
              @for (name of themeNames; track name) { @@ -69,8 +69,8 @@ const THEMES: Record> = {

              CSS Variables

              -
                + style="color: var(--ngaf-chat-text-muted);">CSS Variables +
                • --ngaf-chat-bg
                • --ngaf-chat-text
                • --ngaf-chat-accent
                  • diff --git a/cockpit/chat/theming/angular/src/index.html b/cockpit/chat/theming/angular/src/index.html index cb6f574f4..f3bd95262 100644 --- a/cockpit/chat/theming/angular/src/index.html +++ b/cockpit/chat/theming/angular/src/index.html @@ -5,9 +5,8 @@ Chat Theming — Angular - - + diff --git a/cockpit/chat/theming/angular/src/styles.css b/cockpit/chat/theming/angular/src/styles.css index e31c63fdd..d42cba930 100644 --- a/cockpit/chat/theming/angular/src/styles.css +++ b/cockpit/chat/theming/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the theming capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} diff --git a/cockpit/chat/threads/angular/src/app/threads.component.ts b/cockpit/chat/threads/angular/src/app/threads.component.ts index ba5dc2577..222c26502 100644 --- a/cockpit/chat/threads/angular/src/app/threads.component.ts +++ b/cockpit/chat/threads/angular/src/app/threads.component.ts @@ -17,9 +17,9 @@ import { environment } from '../environments/environment';
                  + style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">

                  Threads

                  + style="color: var(--ngaf-chat-text-muted);">Threads Chat Threads — Angular - - + diff --git a/cockpit/chat/threads/angular/src/styles.css b/cockpit/chat/threads/angular/src/styles.css index 7f6c26701..d42cba930 100644 --- a/cockpit/chat/threads/angular/src/styles.css +++ b/cockpit/chat/threads/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the threads capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} diff --git a/cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts b/cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts index 41cefe5f6..ced5a5475 100644 --- a/cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts +++ b/cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts @@ -20,14 +20,14 @@ import { environment } from '../environments/environment'; template: ` -
                  +

                  Tool Calls

                  + style="color: var(--ngaf-chat-text-muted);">Tool Calls

                  Available Tools

                  -
                    + style="color: var(--ngaf-chat-text-muted);">Available Tools +
                    • search — Web search
                    • calculator — Math expressions
                    • weather — City weather
                      • diff --git a/cockpit/chat/tool-calls/angular/src/index.html b/cockpit/chat/tool-calls/angular/src/index.html index d35828138..826d839ca 100644 --- a/cockpit/chat/tool-calls/angular/src/index.html +++ b/cockpit/chat/tool-calls/angular/src/index.html @@ -5,9 +5,8 @@ Chat Tool Calls — Angular - - + diff --git a/cockpit/chat/tool-calls/angular/src/styles.css b/cockpit/chat/tool-calls/angular/src/styles.css index 79c4e28fd..d42cba930 100644 --- a/cockpit/chat/tool-calls/angular/src/styles.css +++ b/cockpit/chat/tool-calls/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the tool-calls capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +}