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/examples/chat/smoke/CHECKLIST.md b/examples/chat/smoke/CHECKLIST.md index bd1e1202f..d7a364887 100644 --- a/examples/chat/smoke/CHECKLIST.md +++ b/examples/chat/smoke/CHECKLIST.md @@ -114,7 +114,7 @@ renders correctly both during streaming and after completion. ## chat-debug devtools -- [ ] Floating debug launcher button visible in the bottom-right corner +- [ ] Floating debug launcher button visible in the top-right corner - [ ] Launcher has `role="button"`, accessible name "Open chat devtools" - [ ] Click launcher — debug panel opens (zinc-dark chrome, shadcn-styled) - [ ] Panel header shows a status pill (idle / loading / streaming) that updates live diff --git a/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts b/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts index 7dfe22b54..104ed68fe 100644 --- a/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts +++ b/libs/chat/src/lib/compositions/chat-debug/chat-debug.component.ts @@ -48,8 +48,8 @@ interface TabEntry { /* ── Status pill launcher ─────────────────────────────────────── */ .launcher { position: fixed; - bottom: 20px; - left: 20px; + top: 20px; + right: 20px; display: inline-flex; align-items: center; justify-content: center; diff --git a/libs/chat/src/lib/styles/chat-tokens.spec.ts b/libs/chat/src/lib/styles/chat-tokens.spec.ts index 7121404ba..c14c8d228 100644 --- a/libs/chat/src/lib/styles/chat-tokens.spec.ts +++ b/libs/chat/src/lib/styles/chat-tokens.spec.ts @@ -39,3 +39,17 @@ describe('ROOT_TOKEN_STYLES — prefers-reduced-motion', () => { expect(ROOT_TOKEN_STYLES).toContain(selector); }); }); + +describe('ROOT_TOKEN_STYLES — theme attribute selectors', () => { + it.each([ + '[data-theme="light"]', + '[data-theme="dark"]', + '[data-ngaf-chat-theme="light"]', + '[data-ngaf-chat-theme="dark"]', + ])('honors %s as a theme override hook', (selector) => { + // Both `data-theme` (consumer-facing override) and `data-ngaf-chat-theme` + // (the chat-lib-internal attribute documented for app-shells that + // already use `data-theme` for their own picker) must flip tokens. + expect(ROOT_TOKEN_STYLES).toContain(selector); + }); +}); diff --git a/libs/chat/src/lib/styles/chat-tokens.ts b/libs/chat/src/lib/styles/chat-tokens.ts index 8a27ba027..9095a8c5f 100644 --- a/libs/chat/src/lib/styles/chat-tokens.ts +++ b/libs/chat/src/lib/styles/chat-tokens.ts @@ -297,9 +297,13 @@ export const ROOT_TOKEN_STYLES = ` :root { ${DARK_TOKENS} } } :root[data-theme="light"], - [data-theme="light"] { ${LIGHT_TOKENS} } + [data-theme="light"], + :root[data-ngaf-chat-theme="light"], + [data-ngaf-chat-theme="light"] { ${LIGHT_TOKENS} } :root[data-theme="dark"], - [data-theme="dark"] { ${DARK_TOKENS} } + [data-theme="dark"], + :root[data-ngaf-chat-theme="dark"], + [data-ngaf-chat-theme="dark"] { ${DARK_TOKENS} } } ${KEYFRAMES} ${REDUCED_MOTION_STYLES}