Needless UI

Mga component

Chat

Makipag-usap sa model: mga naka-stream na sagot, tool, version at file.

Import

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

NuiChat

Ang usapan at ang box na susulatan, magkasama.

Selector
nui-chat
PangalanUriDefaultPaglalarawan
sessionInputNuiChatSessionAng usapang ipapakita.
assistantInputstring'Assistant'Ang pangalan ng assistant, sa mga heading na naririnig ng mga screen reader.
headingLevelInputnumber3Ang level ng heading ng bawat mensahe, na mga screen reader lang ang nagpapakita. Isang level na mas malalim ang mga heading sa mga sagot.
announceInput'reply' | 'notice' | 'off''reply'Ang naririnig ng mga screen reader kapag kumpleto na ang sagot: lahat ng ito, maikling abiso, o wala.
imagesInputbooleanfalseIpinapakita ang mga image sa mga sagot. Kung hindi, nagiging link papunta sa mga ito ang text nila.
valueTwo-waystring''Ang text na sinusulat.
placeholderInputstringText na ipinapakita habang walang laman ang field.
suggestionsInputstring[][]Mga prompt na maipapadala sa isang click, hanggang sa unang mensahe.
sendOnInput'enter' | 'mod+enter''enter'Kung Enter ang nagpapadala, o Ctrl o ⌘ + Enter.
disabledInputbooleanfalsePinipigilan ang composer na magpadala.
attachInputbooleanfalseTumatanggap ng mga file: pinili, na-paste o na-drop.
acceptInputstring''Ang mga uri ng file na tatanggapin, gaya sa <input type="file">.
maxFilesInputnumber10Ilang file ang puwedeng dalhin ng isang mensahe.
maxSizeInputnumber20_000_000Ang pinakamalaking file na tatanggapin, sa byte.
labelsInputNuiChatLabelsInputBawat text na ipinapakita o ina-announce ng chat, para maisalin.
ratedOutput{ message, rating }Inilalabas ang sagot na ni-rate ng user, kasama ang rating, o null kapag binawi ito.
focusMethod() => voidInililipat ang focus sa text field.
scrollToEndMethod(behavior?) => voidNag-i-scroll sa pinakabagong mensahe, at sinusundan ito.

NuiChatSession

Ang usapan, nang walang anumang DOM. Gawin ito sa isang component, gamit ang mga opsyong respond, messages at id.

PangalanUriDefaultPaglalarawan
respondProperty(request) => NuiChatReplySa iyo ito: isinusulat ang sagot sa request.messages, at humihinto kapag nag-abort ang request.signal.
messagesPropertySignal<NuiChatMessage[]>Ang usapang nasa screen.
allPropertySignal<NuiChatMessage[]>Bawat mensahe ng bawat version, para i-save at ibalik bilang messages.
busyPropertySignal<boolean>Kung may sagot na paparating.
sendMethod(text, files?) => Promise<void>Nagpapadala ng mensahe at humihingi ng sagot.
stopMethod() => voidInihihinto ang sagot, at itinatago ang naisulat na nito.
retryMethod(message?) => Promise<void>Nagtatanong ulit. Version sa tabi ng luma ang bagong sagot.
editMethod(message, text) => Promise<void>Nagpapadala ng bagong version ng isa sa mga mensahe ng user.
versionsMethod(message) => NuiChatMessage[]Bawat version ng isang mensahe, pinakaluma muna.
showMethod(message) => voidInililipat ang usapan sa version na ito.
rateMethod(message, 'up' | 'down' | null) => voidItinatala ang rating ng user sa isang sagot.
remove, load, clearMethod(…) => voidInaalis ang isang mensahe at ang mga kasunod nito, pinapalitan ang usapan, o nagsisimula ulit.

NuiChatMessage

Isang mensahe. Mga version ng isa’t isa ang mga mensaheng may parehong parent.

PangalanUriDefaultPaglalarawan
id, parentPropertystring, string | nullAng key ng mensahe, at ng mensaheng sinusundan nito.
roleProperty'user' | 'assistant'Kung sino ang sumulat nito.
textPropertystringMarkdown mula sa assistant, plain text mula sa user.
statusProperty'pending' | 'streaming' | 'done' | 'stopped' | 'error'Kung nasaan na ang sagot, mula paghihintay hanggang tapos.
reasoningPropertystringAng inisip ng model bago ito sumagot.
toolsPropertyNuiChatTool[]Ang mga tool na tinawag nito, kasama ang state, input at output nila.
sourcesProperty{ url, title? }[]Ang mga page na ginamit nito.
attachmentsPropertyNuiChatAttachment[]Ang mga file na ipinadala kasama nito.
ratingProperty'up' | 'down' | nullAng rating ng user.
dataPropertyunknownKahit ano pang itatago kasama nito, gaya ng pangalan ng model.

NuiChatToolTemplate

Iginuguhit ang isang tool call, gaya ng card para sa weather. Nasa context ang call at ang mensahe nito.

Selector
ng-template[nuiChatTool]
PangalanUriDefaultPaglalarawan
nuiChatToolInputstringAng pangalan ng tool. Kapag wala, iginuguhit nito ang bawat call na hindi pinangalanan ng ibang template.

NuiChatThread

Ang usapan lang, para sa sarili mong layout. Tinatanggap nito ang mga input ng nui-chat na tungkol sa usapan.

Selector
nui-chat-thread

NuiChatComposer

Ang box na susulatan lang. Tinatanggap nito ang mga input ng nui-chat na tungkol sa pagsusulat.

Selector
nui-chat-composer

NuiServerEvent

Ang ibinibigay ng nuiEventStream para sa bawat event. Binabasa ng nuiTextStream ang plain text at ng nuiJsonStream ang mga JSON line; tumatanggap ang tatlo ng fetch response.

PangalanUriDefaultPaglalarawan
eventPropertystring'message'Ang pangalan ng event.
dataPropertystringAng mga data line nito, pinagdugtong.
idPropertystringAng huling id na ipinadala ng stream.

NuiChatError

I-throw ito mula sa respond para ipakita ang mensahe nito. Pangkalahatang mensahe ang ipinapakita ng ibang error, kaya walang internal na detalyeng lumalabas.