Needless UI

Componenti

Chat

Parla con un modello: risposte in streaming, tool, versioni e file.

Import

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

NuiChat

La conversazione e la casella di testo, insieme.

Selettore
nui-chat
NomeTipoPredefinitoDescrizione
sessionInputNuiChatSessionLa conversazione da mostrare.
assistantInputstring'Assistant'Il nome dell’assistente, nelle intestazioni lette dagli screen reader.
headingLevelInputnumber3Il livello dell’intestazione di ogni messaggio, visibile solo agli screen reader. Le intestazioni nelle risposte scendono di un livello.
announceInput'reply' | 'notice' | 'off''reply'Cosa annunciano gli screen reader quando una risposta è completa: tutta, un breve avviso o niente.
imagesInputbooleanfalseMostra le immagini nelle risposte. Altrimenti il loro testo è un link all’immagine.
valueBidirezionalestring''Il testo che si sta scrivendo.
placeholderInputstringIl testo mostrato nel campo vuoto.
suggestionsInputstring[][]Prompt da inviare con un clic, fino al primo messaggio.
sendOnInput'enter' | 'mod+enter''enter'Se si invia con Invio, o con Ctrl o ⌘ + Invio.
disabledInputbooleanfalseImpedisce l’invio dalla casella di testo.
attachInputbooleanfalseAccetta file: scelti, incollati o trascinati.
acceptInputstring''I tipi di file accettati, come per <input type="file">.
maxFilesInputnumber10Quanti file può contenere un messaggio.
maxSizeInputnumber20_000_000La dimensione massima di un file, in byte.
labelsInputNuiChatLabelsInputOgni testo che la chat mostra o annuncia, da tradurre.
ratedOutput{ message, rating }Emette una risposta valutata dall’utente, con il giudizio, o null quando lo ritira.
focusMetodo() => voidSposta il focus sul campo di testo.
scrollToEndMetodo(behavior?) => voidScorre fino all’ultimo messaggio e lo segue.

NuiChatSession

La conversazione, senza DOM. Creala in un componente, con le opzioni respond, messages e id.

NomeTipoPredefinitoDescrizione
respondProprietà(request) => NuiChatReplyLa tua funzione: scrive la risposta a request.messages e si ferma quando request.signal viene annullato.
messagesProprietàSignal<NuiChatMessage[]>La conversazione sullo schermo.
allProprietàSignal<NuiChatMessage[]>Ogni messaggio di ogni versione, da salvare e ripassare come messages.
busyProprietàSignal<boolean>Se una risposta è in arrivo.
sendMetodo(text, files?) => Promise<void>Invia un messaggio e chiede una risposta.
stopMetodo() => voidFerma la risposta, conservando ciò che ha già scritto.
retryMetodo(message?) => Promise<void>Chiede di nuovo. La nuova risposta è una versione accanto alla vecchia.
editMetodo(message, text) => Promise<void>Invia una nuova versione di uno dei messaggi dell’utente.
versionsMetodo(message) => NuiChatMessage[]Tutte le versioni di un messaggio, dalla più vecchia.
showMetodo(message) => voidPorta la conversazione su questa versione.
rateMetodo(message, 'up' | 'down' | null) => voidRegistra il giudizio dell’utente su una risposta.
remove, load, clearMetodo(…) => voidRimuove un messaggio e ciò che lo segue, sostituisce la conversazione o ricomincia da capo.

NuiChatMessage

Un messaggio. I messaggi con lo stesso parent sono versioni l’uno dell’altro.

NomeTipoPredefinitoDescrizione
id, parentProprietàstring, string | nullLa chiave del messaggio, e quella del messaggio a cui fa seguito.
roleProprietà'user' | 'assistant'Chi l’ha scritto.
textProprietàstringMarkdown dall’assistente, testo semplice dall’utente.
statusProprietà'pending' | 'streaming' | 'done' | 'stopped' | 'error'A che punto è una risposta, dall’attesa alla fine.
reasoningProprietàstringCosa ha pensato il modello prima di rispondere.
toolsProprietàNuiChatTool[]I tool chiamati, con stato, input e output.
sourcesProprietà{ url, title? }[]Le pagine usate.
attachmentsProprietàNuiChatAttachment[]I file inviati con il messaggio.
ratingProprietà'up' | 'down' | nullIl giudizio dell’utente.
dataProprietàunknownQualsiasi altra cosa da conservare con il messaggio, come il nome del modello.

NuiChatToolTemplate

Disegna una chiamata a un tool, come una card per il meteo. Il contesto contiene la chiamata e il suo messaggio.

Selettore
ng-template[nuiChatTool]
NomeTipoPredefinitoDescrizione
nuiChatToolInputstringIl nome del tool. Senza nome, disegna ogni chiamata che nessun altro template nomina.

NuiChatThread

La conversazione da sola, per un tuo layout. Accetta gli input di nui-chat che riguardano la conversazione.

Selettore
nui-chat-thread

NuiChatComposer

La casella di testo da sola. Accetta gli input di nui-chat che riguardano la scrittura.

Selettore
nui-chat-composer

NuiServerEvent

Ciò che nuiEventStream restituisce per ogni evento. nuiTextStream legge testo semplice e nuiJsonStream righe JSON; tutti e tre accettano una risposta di fetch.

NomeTipoPredefinitoDescrizione
eventProprietàstring'message'Il nome dell’evento.
dataProprietàstringLe sue righe di dati, unite.
idProprietàstringL’ultimo id inviato dallo stream.

NuiChatError

Lancialo da respond per mostrarne il messaggio. Qualsiasi altro errore mostra un messaggio generico, così non trapela nulla di interno.