Chat
AI chat panel with a markdown-aware, streaming-friendly message list and an auto-resizing composer. Bring your own backend.
Assistant
html
<ng-oat-chat [(messages)]="messages" (messageSent)="onSend($event)" (stopRequested)="onStop()">
<strong chatHeader>Assistant</strong>
</ng-oat-chat>Inputs
| Input | Type | Default | Description |
|---|---|---|---|
messages | NgOatChatMessage[] (model) | [] | Two-way bindable message list |
placeholder | string | 'Send a message…' | Composer textarea placeholder |
disabled | boolean | false | Disables the composer |
autoScroll | boolean | true | Auto-scroll to the newest message |
Methods
| Method | Description |
|---|---|
addMessage(message) | Appends a message (user, assistant, or system) and returns its id |
appendToMessage(id, token) | Appends a streamed token to an existing message's content |
setMessageStatus(id, status) | Updates delivery status: 'pending' | 'streaming' | 'done' | 'error' |
Streaming from a real backend
Use readTextStream() or readSseStream() from @letsprogram/ng-oat/chat to turn a fetch response body into an async iterable of text chunks, then feed it through streamChatText():
typescript
const response = await fetch('/api/chat', { method: 'POST', body: JSON.stringify(payload) });
const id = chat().addMessage({ role: 'assistant', content: '', status: 'streaming' });
await streamChatText(readTextStream(response.body!), (token) => chat().appendToMessage(id, token));
chat().setMessageStatus(id, 'done');