Proprietà dei componenti
Componi messaggi, schede di citazione, prompt, stati vuoti e controlli dai tuoi componenti React.
Collega i componenti React a ChattyBox con @openstaticfish/chattybox. Il tuo team controlla il rendering e lo stato mentre l'infrastruttura gestita gestisce risposte basate sulla fonte, citazioni e continuità della conversazione.
ChattyBox esegue la scansione della documentazione esistente, indicizza il contenuto per il recupero e incorpora un chatbot che risponde utilizzando i tuoi documenti anziché la memoria del modello generico.
Installa JavaScript SDK nella tua applicazione React.
Crea un client Chattybox fuori dal percorso di rendering del componente.
Invia messaggi da un gestore eventi e aggiorna lo stato UI con la risposta.
Eseguire il rendering dei collegamenti di origine e gestire gli errori strutturati ChattyboxError.
Lancio in tre fasi
Utilizza i modelli di stato, accessibilità, stile e sistema di progettazione già seguiti dalla tua applicazione invece di adattarti a una shell di widget fissa.
Componi messaggi, schede di citazione, prompt, stati vuoti e controlli dai tuoi componenti React.
Utilizza lo stato locale o il livello di stato esistente mantenendo isolate le conversazioni tra i visitatori.
Controlla il focus, le regioni live, il comportamento della tastiera e gli annunci di errore all'interno della tua applicazione.
Mantieni ridotta l'integrazione del browser mentre ChattyBox gestisce l'indicizzazione, il recupero e le risposte citate dei contenuti.
Crea il client una volta, chiamalo da un gestore eventi e mantieni l'ID di conversazione di ciascun visitatore nello stato del componente o dell'applicazione.
import { useState } from 'react';
import { Chattybox } from '@openstaticfish/chattybox';
const chattybox = new Chattybox({
apiKey: import.meta.env.VITE_CHATTYBOX_API_KEY,
baseUrl: import.meta.env.VITE_CHATTYBOX_API_URL,
});
export function Chat() {
const [answer, setAnswer] = useState('');
async function ask(message: string) {
const response = await chattybox.sendMessage({ message });
setAnswer(response.message);
}
return <div aria-live="polite">{answer}</div>;
}Comprendere il client sottostante, il modello di risposta e il confine dell'infrastruttura.
Applica il client React all'interno del limite del client App Router.
Esaminare la continuazione della conversazione e la gestione strutturata degli errori.
Utilizza UI basato su script mantenuto invece di creare componenti personalizzati.
SÌ. JavaScript SDK restituisce messaggi, ID di conversazione e URL di origine in modo che la tua applicazione React possa eseguire il rendering di un'interfaccia completamente personalizzata.
Il SDK è intenzionalmente senza testa. Ciò consente ai team di utilizzare la propria libreria di componenti, il comportamento di accessibilità, la gestione dello stato e la progettazione del prodotto.
Crealo una volta fuori dal percorso di rendering del componente o in un fornitore di applicazioni stabile anziché costruire un nuovo client per ogni rendering.
SÌ. Utilizza la guida all'installazione del widget ospitato quando desideri un'interfaccia mantenuta anziché un rendering React personalizzato.
Nessuna carta di credito richiesta. I tuoi contenuti non vengono usati per addestrare modelli.
Piano Free. Nessuna carta.