Integra con un assistente di programmazione IA

L’integrazione consigliata è il pacchetto npm @openstaticfish/chattybox. Permette al codice dell’applicazione di configurare la chiave pubblica e l’URL API, montare l’interfaccia gestita di ChattyBox dove si trova il componente oppure usare il client headless per un’interfaccia completamente personalizzata.

Lo script autonomo widget.js è documentato per ultimo come fallback senza build per i siti che non possono installare pacchetti npm.

Prima di iniziare

Completa la configurazione del chatbot prima di chiedere a un assistente di modificare l’applicazione:

• Verifica risposte rappresentative e citazioni in Test Chat.
• Crea una chiave per il browser in Public Keys e limita le origini consentite.
• Copia la chiave pubblica e l’URL API del widget mostrati in Embed.
• Decidi quali route o layout dell’applicazione devono montare l’esperienza.

Sono credenziali pubbliche del browser, ma evita comunque di inserire nei commit valori specifici dell’ambiente. Non fornire mai un token di deployment della configurazione, credenziali amministrative o un file di ambiente non pertinente.

Consigliato: monta l’interfaccia gestita da npm

Questo è il prompt predefinito per React, Next.js, Vite e altre applicazioni browser basate su pacchetti.

Istruzione

Integra il pacchetto npm ChattyBox

Integra ChattyBox in questa applicazione usando il pacchetto npm @openstaticfish/chattybox.

Configurazione pubblica del browser:
- Chiave API: [PASTE PUBLIC WIDGET KEY]
- URL API: [PASTE WIDGET API URL]

Prima esamina il framework, il modello di routing, il gestore dei pacchetti, le convenzioni delle variabili d’ambiente e il layout persistente dell’applicazione. Dimmi quali file intendi modificare prima di apportare modifiche. Fammi una domanda se non sono chiare le route in cui deve comparire ChattyBox.

Requisiti:
1. Installa @openstaticfish/chattybox con il gestore dei pacchetti già usato da questo repository.
2. Memorizza la chiave API pubblica e l’URL API usando la convenzione del framework per le variabili d’ambiente esposte al browser. Aggiungi nomi segnaposto a un file di ambiente di esempio, ma non inserire nei commit valori reali.
3. Importa Chattybox da @openstaticfish/chattybox e crea un client con apiKey e baseUrl.
4. Monta l’interfaccia gestita con client.mountWidget() dal componente lato client o dall’hook del ciclo di vita appropriato.
5. Montala solo nelle route o nel layout indicati e chiama la funzione remove() restituita durante la pulizia quando il framework lo richiede.
6. Non inserire manualmente widget.js, non creare un proxy backend e non introdurre un secondo client ChattyBox.
7. Mantieni navigazione, confini di rendering, localizzazione, Analytics, consenso e stili esistenti.
8. Apporta la modifica mirata più piccola possibile e non eseguire il deployment.
9. Esegui build, lint, controllo dei tipi e test pertinenti del repository.
10. Indica i file modificati, le variabili d’ambiente da impostare, dove viene montata l’interfaccia e come testarla sul sito sottoposto a deployment.

Il codice dell’applicazione risultante dovrebbe avere questa forma:

import { Chattybox } from '@openstaticfish/chattybox';

const client = new Chattybox({
  apiKey: PUBLIC_CHATTYBOX_API_KEY,
  baseUrl: PUBLIC_CHATTYBOX_API_URL,
});

const widget = client.mountWidget();

// Use during component cleanup when appropriate.
// widget.remove();

Crea un’interfaccia personalizzata

Scegli questa opzione quando l’applicazione deve gestire l’elenco dei messaggi, l’input, gli stati di caricamento, gli errori, le citazioni e il posizionamento invece di montare l’interfaccia gestita.

Istruzione

Crea un’interfaccia ChattyBox headless

Crea un’interfaccia chatbot personalizzata usando il pacchetto npm @openstaticfish/chattybox e il relativo client headless.

Configurazione pubblica del browser:
- Chiave API: [PASTE PUBLIC WIDGET KEY]
- URL API: [PASTE WIDGET API URL]

Prima esamina il framework dell’applicazione, il sistema dei componenti, i modelli di stato, gli stili, le convenzioni di accessibilità e la configurazione dei test. Proponi i confini dei componenti e i file prima di modificare il codice.

Requisiti:
1. Installa @openstaticfish/chattybox con il gestore dei pacchetti già presente nel repository.
2. Configura un client Chattybox con apiKey e baseUrl usando variabili d’ambiente esposte al browser; non inserire nei commit valori reali.
3. Usa sendMessage() e conserva conversationId per i messaggi successivi.
4. Visualizza le fonti delle risposte come link accessibili e mantieni il loro ordine.
5. Implementa gli stati di attesa, vuoto, errore, nuovo tentativo e risposta non supportata.
6. Impedisci gli invii duplicati e mantieni utilizzabili il comportamento da tastiera e quello per gli screen reader.
7. Monta l’interfaccia solo nelle route o nel layout indicati.
8. Segui componenti e stili esistenti invece di aggiungere un nuovo design system.
9. Non caricare widget.js e non chiamare mountWidget().
10. Esegui build, lint, controllo dei tipi e test pertinenti, poi indica i file modificati e un piano di verifica.

Note sui framework

Quando serve, dai all’assistente una frase aggiuntiva:

• Next.js App Router: “Mantieni il client Chattybox e la chiamata a mountWidget() all’interno di un piccolo Client Component renderizzato dal layout previsto.”
• React SPA: “Monta dalla shell persistente dell’applicazione o dal layout della route specifica e occupati della pulizia nella funzione di ritorno dell’effetto.”
• Docusaurus: “Crea un componente del tema solo client e renderizzalo da src/theme/Root; mantieni la navigazione della documentazione e i cambi di lingua.”
• Vue, Nuxt, Svelte o un altro framework: “Usa il ciclo di vita di mounting solo client del framework e il relativo ciclo di pulizia.”

Esamina un’integrazione SDK esistente

Istruzione

Esamina la mia integrazione dell’SDK ChattyBox

Esamina questa integrazione ChattyBox senza eseguire il deployment e senza modificare codice non correlato.

Verifica che:
1. @openstaticfish/chattybox sia installato e importato invece di duplicarne il comportamento.
2. Un solo client Chattybox riceva la chiave API pubblica e l’URL API previsti.
3. Le variabili d’ambiente del browser seguano le regole di denominazione delle variabili pubbliche di questo framework senza esporre credenziali private.
4. mountWidget() o l’interfaccia personalizzata compaia solo nelle route previste e venga pulita correttamente.
5. La navigazione lato client e i nuovi mounting in sviluppo non creino istanze duplicate.
6. I confini di rendering, la localizzazione, Analytics, il consenso, l’accessibilità e il layout esistenti rimangano intatti.
7. L’implementazione abbia test appropriati e non includa refactoring non correlati.

Restituisci i risultati per gravità, con percorsi dei file e riferimenti alle righe. Proponi solo le correzioni sicure più piccole e fornisci i comandi esatti di verifica.

Niente npm o passaggio di build?

Usa la guida all’installazione di widget.js solo quando il sito non può usare il pacchetto npm, ad esempio con HTML semplice, un campo di codice personalizzato di un CMS o Google Tag Manager.

Istruzione

Installa lo script widget di fallback

Installa il widget ChattyBox ospitato su questo sito usando lo script esatto generato dalla scheda Embed di ChattyBox:

[PASTE COMPLETE WIDGET SCRIPT]

Esamina prima il sito e identifica il punto di inserimento globale più sicuro per le pagine pubbliche. Carica lo script invariato esattamente una volta, escludi le route private, amministrative e di checkout, mantieni il comportamento di consenso e CSP, non esporre credenziali private, non eseguire il deployment della modifica e indica la posizione modificata insieme a un piano di test nel browser.

Prova il risultato

1. Esamina il diff e conferma che non siano state inserite nei commit credenziali reali.
2. Esegui build, lint, controllo dei tipi e i test normali del progetto.
3. Esegui il deployment tramite il normale processo di revisione.
4. Verifica le route previste in una finestra privata del browser, inclusa la navigazione lato client.
5. Poni una domanda supportata, segui una citazione e prova il comportamento di fallback.
6. Controlla il layout mobile, l’uso della tastiera e la console del browser.

Continua con la documentazione di riferimento dell’SDK e la checklist di lancio.