You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/website/content/docs/chat/api/chat-config.mdx
+19-10Lines changed: 19 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# ChatConfig
2
2
3
-
`ChatConfig` is the configuration interface accepted by `provideChat()`. It defines global settings for chat composition components including the generative UI registry, assistant labels, and license token.
3
+
`ChatConfig` is the configuration interface accepted by `provideChat()`. The object is stored under `CHAT_CONFIG`for application code that wants shared chat defaults, and `provideChat()` uses the license token to start the package license check.
4
4
5
5
**Import:**
6
6
@@ -13,11 +13,11 @@ import type { AngularRegistry } from '@ngaf/render';
13
13
14
14
```typescript
15
15
interfaceChatConfig {
16
-
/**Default render registry for generative UI components. */
16
+
/**Shared render registry for consumers that read CHAT_CONFIG. */
17
17
renderRegistry?:AngularRegistry;
18
-
/**Override the default AI avatar label (default: "A"). */
18
+
/**Shared AI avatar label for consumers that read CHAT_CONFIG (default: "A"). */
19
19
avatarLabel?:string;
20
-
/**Override the default assistant display name (default: "Assistant"). */
20
+
/**Shared assistant display name for consumers that read CHAT_CONFIG (default: "Assistant"). */
21
21
assistantName?:string;
22
22
/** Signed license token from cacheplane.dev. Optional; omitted in dev. */
23
23
license?:string;
@@ -32,7 +32,7 @@ interface ChatConfig {
32
32
avatarLabel?:string
33
33
```
34
34
35
-
A short string (typically one or two characters) displayed in the AI avatar badge that appears next to assistant messages in composition components.
35
+
A short string (typically one or two characters) for wrappers or components that choose to read `CHAT_CONFIG`.
36
36
37
37
**Default:**`"A"`
38
38
@@ -42,15 +42,15 @@ A short string (typically one or two characters) displayed in the AI avatar badg
42
42
provideChat({ avatarLabel: 'AI' });
43
43
```
44
44
45
-
There is no avatar-specific CSS token. Use `avatarLabel` for the badge text, and use the shared `--ngaf-chat-*` tokens such as `--ngaf-chat-surface`, `--ngaf-chat-text`, and `--ngaf-chat-text-muted` to align surrounding chat surfaces with your app theme.
45
+
There is no avatar-specific CSS token. Use the shared `--ngaf-chat-*` tokens such as `--ngaf-chat-surface`, `--ngaf-chat-text`, and `--ngaf-chat-text-muted` to align chat surfaces with your app theme.
46
46
47
47
### assistantName
48
48
49
49
```typescript
50
50
assistantName?:string
51
51
```
52
52
53
-
The display name for the AI assistant. Used in labels, ARIA attributes, and any place where the assistant needs a human-readable name.
53
+
The display name for wrappers or components that choose to read `CHAT_CONFIG`.
The default render registry for generative UI components.
69
+
A shared render registry value for consumers that inject `CHAT_CONFIG`. `ChatComponent` does not read this value directly; pass a `ViewRegistry` to the `<chat [views]="...">` input for built-in generative UI rendering.
70
70
71
71
**Example:**
72
72
@@ -112,12 +112,21 @@ export class ChatHeaderComponent {
112
112
}
113
113
```
114
114
115
+
## Gotcha: Inputs Still Win
116
+
117
+
`provideChat()` is not a replacement for component inputs. For generative UI, configure the chat surface directly:
Copy file name to clipboardExpand all lines: apps/website/content/docs/chat/api/provide-chat.mdx
+9-6Lines changed: 9 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# provideChat()
2
2
3
-
`provideChat` is the provider factory that registers `@ngaf/chat` configuration in Angular's dependency injection system. Call it once in your `ApplicationConfig`(or at the route level) to set global defaults used by chat composition components.
3
+
`provideChat` is the provider factory that registers `@ngaf/chat` configuration in Angular's dependency injection system and starts the package license check. Call it in your `ApplicationConfig` or at the route level when you need a shared `CHAT_CONFIG` value.
4
4
5
5
```typescript
6
6
import { provideChat } from'@ngaf/chat';
@@ -23,7 +23,7 @@ function provideChat(config: ChatConfig): EnvironmentProviders
Copy file name to clipboardExpand all lines: apps/website/content/docs/chat/components/chat.mdx
+15-1Lines changed: 15 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,6 +48,7 @@ import { ChatComponent } from '@ngaf/chat';
48
48
})
49
49
exportclassChatPageComponent {
50
50
chatRef =agent({
51
+
apiUrl: 'http://localhost:2024',
51
52
assistantId: 'chat_agent',
52
53
threadId: signal(null),
53
54
});
@@ -100,6 +101,7 @@ When you pass a non-empty `threads` array, a sidebar appears on the left (hidden
100
101
})
101
102
exportclassChatWithThreadsComponent {
102
103
chatRef =agent({
104
+
apiUrl: 'http://localhost:2024',
103
105
assistantId: 'chat_agent',
104
106
threadId: signal(null),
105
107
});
@@ -151,7 +153,19 @@ AI messages containing JSON are parsed character-by-character as tokens stream.
151
153
152
154
## A2UI Rendering
153
155
154
-
When AI messages contain A2UI content (prefixed with `---a2ui_JSON---`), the component auto-detects and renders surfaces using the built-in `a2uiBasicCatalog()`. This includes 12 components from the A2UI v0.9 basic catalog: Text, Image, Icon, Divider, Row, Column, Card, List, Button, TextField, CheckBox, and ChoicePicker.
156
+
When AI messages contain A2UI content (prefixed with `---a2ui_JSON---`), the component auto-detects A2UI mode. Pass `a2uiBasicCatalog()` to `[views]` to render the built-in catalog:
The catalog currently maps 18 component types: Text, Image, Icon, Divider, Row, Column, Card, List, Button, TextField, CheckBox, MultipleChoice, DateTimeInput, Slider, Tabs, Modal, Video, and AudioPlayer.
155
169
156
170
A2UI surfaces support two-way data binding, button actions, template expansion over collections, and validation. See the [A2UI guide](/docs/render/a2ui/overview) for details.
Copy file name to clipboardExpand all lines: apps/website/content/docs/chat/getting-started/introduction.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -60,7 +60,7 @@ LangGraph Platform
60
60
61
61
-**`@ngaf/langgraph`** provides the `agent()` function and returns a `LangGraphAgent`, which satisfies the `Agent` contract consumed by `@ngaf/chat`. It exposes reactive Signals for `messages()`, `isLoading()`, `error()`, `interrupt()`, `toolCalls()`, `history()`, and more.
62
62
63
-
-**`@ngaf/render`** provides `RenderSpecComponent` and view registries for rendering JSON UI specs as Angular components. The `ChatComponent` auto-detects JSON specs in AI messages and renders them through `@ngaf/render` - pass a view registry via the `[views]` input. The `ChatComponent` also auto-detects A2UI v0.9 payloads and renders them using a built-in 12-component catalog.
63
+
-**`@ngaf/render`** provides `RenderSpecComponent` and view registries for rendering JSON UI specs as Angular components. The `ChatComponent` auto-detects JSON specs in AI messages and renders them through `@ngaf/render` - pass a view registry via the `[views]` input. The same `[views]` input enables A2UI rendering with `a2uiBasicCatalog()`, which currently maps 18 component types.
64
64
65
65
## When to Use `ChatComponent` vs. Custom Assembly
Copy file name to clipboardExpand all lines: apps/website/content/docs/chat/guides/configuration.mdx
+16-6Lines changed: 16 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
1
# Configuration
2
2
3
-
`@ngaf/chat` uses Angular's dependency injection system for global configuration. The `provideChat()` function registers a `ChatConfig` object under the `CHAT_CONFIG` injection token.
3
+
`@ngaf/chat` uses Angular's dependency injection system for shared configuration. The `provideChat()` function registers a `ChatConfig` object under the `CHAT_CONFIG` injection token and starts the package license check.
4
4
5
5
## provideChat()
6
6
7
-
Call `provideChat()` in your application's provider array to set global configuration for chat components.
7
+
Call `provideChat()` in your application's provider array when your application or wrappers need to inject shared chat configuration.
8
8
9
9
```typescript
10
10
// app.config.ts
@@ -32,21 +32,31 @@ function provideChat(config: ChatConfig): EnvironmentProviders
32
32
## ChatConfigInterface
33
33
34
34
```typescript
35
+
import type { AngularRegistry } from '@ngaf/render';
36
+
35
37
interface ChatConfig {
38
+
/** Default render registry for consumers that read CHAT_CONFIG. */
39
+
renderRegistry?: AngularRegistry;
40
+
36
41
/** Override the default AI avatar label (default: "A"). */
37
42
avatarLabel?: string;
38
43
39
44
/** Override the default assistant display name (default: "Assistant"). */
40
45
assistantName?: string;
46
+
47
+
/** Signed license token from cacheplane.dev. Optional in development. */
Copy file name to clipboardExpand all lines: apps/website/content/docs/chat/guides/generative-ui.mdx
+3-2Lines changed: 3 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,6 +46,7 @@ const myViews = views({
46
46
})
47
47
exportclassChatPageComponent {
48
48
chatRef =agent({
49
+
apiUrl: 'http://localhost:2024',
49
50
assistantId: 'gen_ui_agent',
50
51
threadId: signal(null),
51
52
});
@@ -132,7 +133,7 @@ The store enables two-way data binding between generative UI components and your
132
133
133
134
## A2UI Protocol
134
135
135
-
For agents that implement Google's A2UI v0.9 protocol, `ChatComponent` auto-detects A2UI payloads (prefixed with `---a2ui_JSON---`) and renders them using the built-in A2UI catalog. See the [A2UI guide](/docs/render/a2ui/overview) for details.
136
+
For agents that emit A2UI JSONL payloads, `ChatComponent` auto-detects content prefixed with `---a2ui_JSON---`. Pass `a2uiBasicCatalog()` to `[views]` when you want those surfaces rendered with the built-in components. See the [A2UI guide](/docs/render/a2ui/overview) for details.
136
137
137
138
## What's Next
138
139
@@ -152,6 +153,6 @@ For agents that implement Google's A2UI v0.9 protocol, `ChatComponent` auto-dete
152
153
Full reference for the JSON spec format, prop expressions, and element types.
0 commit comments