Needless UI

Components

Chat

Talk to a model: streamed replies, tools, versions and files.

Import

import-chat.ts
import { NuiChat, NuiChatSession, nuiEventStream } from '@needless-ui/angular/chat';

NuiChat

The conversation and the box to write in, together.

Selector
nui-chat
NameTypeDefaultDescription
sessionInputNuiChatSessionThe conversation to show.
assistantInputstring'Assistant'The assistant’s name, in the headings screen readers hear.
headingLevelInputnumber3The level of each message’s heading, which only screen readers show. Headings in replies go one deeper.
announceInput'reply' | 'notice' | 'off''reply'What screen readers hear when a reply is complete: all of it, a short notice, or nothing.
imagesInputbooleanfalseShows images in replies. Otherwise their text links to them.
valueTwo-waystring''The text being written.
placeholderInputstringThe hint in the empty field.
suggestionsInputstring[][]Prompts to send with a click, until the first message.
sendOnInput'enter' | 'mod+enter''enter'Whether Enter sends, or Ctrl or ⌘ + Enter.
disabledInputbooleanfalseStops the composer from sending.
attachInputbooleanfalseTakes files: picked, pasted or dropped.
acceptInputstring''The kinds of file to take, as for <input type="file">.
maxFilesInputnumber10How many files a message can carry.
maxSizeInputnumber20_000_000The largest file to take, in bytes.
labelsInputNuiChatLabelsInputEvery text the chat shows or announces, to translate.
ratedOutput{ message, rating }Emits a reply the reader rated, with the rating, or null when taken back.
focusMethod() => voidFocuses the text field.
scrollToEndMethod(behavior?) => voidScrolls to the latest message, and follows it.

NuiChatSession

The conversation, without any DOM. Create it in a component, with the options respond, messages and id.

NameTypeDefaultDescription
respondProperty(request) => NuiChatReplyYours: writes the reply to request.messages, and stops when request.signal aborts.
messagesPropertySignal<NuiChatMessage[]>The conversation on screen.
allPropertySignal<NuiChatMessage[]>Every message of every version, to save and pass back as messages.
busyPropertySignal<boolean>Whether a reply is on its way.
sendMethod(text, files?) => Promise<void>Sends a message and asks for a reply.
stopMethod() => voidStops the reply, keeping what it wrote.
retryMethod(message?) => Promise<void>Asks again. The new reply is a version beside the old one.
editMethod(message, text) => Promise<void>Sends a new version of one of the user’s messages.
versionsMethod(message) => NuiChatMessage[]Every version of a message, oldest first.
showMethod(message) => voidSwitches the conversation to this version.
rateMethod(message, 'up' | 'down' | null) => voidRecords the reader’s verdict on a reply.
remove, load, clearMethod(…) => voidRemoves a message and what follows it, replaces the conversation, or starts over.

NuiChatMessage

One message. Messages with the same parent are versions of each other.

NameTypeDefaultDescription
id, parentPropertystring, string | nullThe message’s key, and the one it follows.
roleProperty'user' | 'assistant'Who wrote it.
textPropertystringMarkdown from the assistant, plain text from the user.
statusProperty'pending' | 'streaming' | 'done' | 'stopped' | 'error'Where a reply stands, from waiting to done.
reasoningPropertystringWhat the model thought before it answered.
toolsPropertyNuiChatTool[]The tools it called, with their state, input and output.
sourcesProperty{ url, title? }[]The pages it used.
attachmentsPropertyNuiChatAttachment[]The files sent with it.
ratingProperty'up' | 'down' | nullThe reader’s verdict.
dataPropertyunknownAnything else to keep with it, such as the model’s name.

NuiChatToolTemplate

Draws a tool call, such as a card for the weather. The context holds the call and its message.

Selector
ng-template[nuiChatTool]
NameTypeDefaultDescription
nuiChatToolInputstringThe tool’s name. Without one, it draws every call no other template names.

NuiChatThread

The conversation on its own, for a layout of yours. It takes the inputs of nui-chat that concern the conversation.

Selector
nui-chat-thread

NuiChatComposer

The box to write in, on its own. It takes the inputs of nui-chat that concern writing.

Selector
nui-chat-composer

NuiServerEvent

What nuiEventStream yields for each event. nuiTextStream reads plain text and nuiJsonStream JSON lines; all three take a fetch response.

NameTypeDefaultDescription
eventPropertystring'message'The event’s name.
dataPropertystringIts data lines, joined.
idPropertystringThe last id the stream sent.

NuiChatError

Throw it from respond to show its message. Any other error shows a general one, so nothing internal leaks.