buildship chat widget
1.0.0
Un widget de chat AI open source qui peut être facilement intégré sur votre site Web ou votre application. Ce widget de plug-and-play est conçu pour fonctionner de manière transparente avec votre flux de travail de construction personnalisé, ce qui lui permet de se connecter avec votre base de données, votre référentiel de connaissances et tout autre outil que vous utilisez.
Avec ce puissant assistant de chat AI, vous pouvez améliorer considérablement l'expérience utilisateur de votre site Web ou de votre application.
Tout d'abord, chargez le widget de chat sur votre page en ajoutant l'extrait de code suivant. Ensuite, connectez le widget à votre flux de travail BuildShip en remplaçant l'URL de l'API à l'échantillon par votre URL API déployée BuildShip selon les instructions de l'étape 2. Ajoutez toutes les options de personnalisation selon les besoins.
< script src =" https://unpkg.com/@buildshipapp/chat-widget@^1 " defer > </ script >
< script >
window . addEventListener ( "load" , ( ) => {
window . buildShipChatWidget . config . widgetTitle = "Chatbot" ;
window . buildShipChatWidget . config . greetingMessage =
"Hello! How may I help you today?" ;
window . buildShipChatWidget . config . url =
"https://<project_id>.buildship.run/chat/...." ;
<!-- Other optional properties, learn more in the `Config Properties` section below -->
} ) ;
</ script >Vous pouvez également l'importer en tant que module si vous travaillez avec TypeScript ou ES6 (les déclarations de type sont incluses):
import "@buildshipapp/chat-widget" ;
window . buildShipChatWidget . config . widgetTitle = "Chatbot" ;
window . buildShipChatWidget . config . greetingMessage =
"Hello! How may I help you today?" ;
window . buildShipChatWidget . config . url =
"https://<project_id>.buildship.run/chat/...." ;
// ...Deuxièmement, placez un bouton avec l'attribut de données suivant n'importe où sur votre site Web ou votre application pour ouvrir le widget:
< button data-buildship-chat-widget-button > Beep Boop </ button >Le widget est conçu pour fonctionner avec BuildShip - un constructeur de backend à code basse pour créer des API, des travaux planifiés visuellement et rapidement avec une interface glisser-déposer.
window.buildShipChatWidget.config.url . Voir l'étape 3 pour plus de détails.Le widget fera une demande de poste à cette URL. Le corps de la demande sera un objet contenant le message de l'utilisateur et d'autres données pour que le flux de travail utilise, comme ainsi:
{
"message" : " The user's message " ,
"threadId" : " A unique identifier for the conversation (learn more below) " ,
"timestamp" : " The timestamp of when the POST request was initiated "
...Other miscellaneous user data (learn more in the 'Config Properties' section below)
}Vous pouvez en savoir plus sur chacune des propriétés de la section suivante.
Le widget s'attendra à une réponse du point de terminaison sous la forme d'un objet JSON contenant la réponse ( message ) du workflow et l'ID de thread ( threadId ), comme ainsi:
{
"message" : " The bot's response " ,
"threadId" : " The unique identifier for the conversation (learn more below) "
}En cas de réponse en streaming, le widget ne s'attend pas à un objet JSON comme décrit ci-dessus, mais s'attendra plutôt à un flux de morceaux qui finissent par s'additionner au message de réponse. Le widget agrégera ces morceaux au fur et à mesure qu'ils ont reçu et affichent et mettra à jour le message en temps réel, se terminant enfin par la réponse complète.
threadId via la réponse Facultativement, il existe deux façons de définir le threadId via la réponse.
Via un en-tête de réponse
Si la réponse comprend un en-tête avec la clé x-thread-id avec l'ID de thread comme valeur, le widget le ramasse automatiquement et le définira comme le threadId pour la conversation (s'il n'est pas déjà défini).
Remarque: Assurez-vous de définir l'en-tête Access-Control-Expose-Headers dans votre réponse pour exposer l'en-tête x-thread-id vers le widget client.
Via le flux lui-même
Si le point de terminaison répond avec le message et le threadId dans le format suivant: message + x1f + threadId , où x1f est le caractère séparateur d'unité, le widget extraitera ensuite l'ID de thread du flux et le définira comme le threadId pour la conversation (s'il n'est pas déjà défini). Par exemple:
// Simulating what a streamed response might look like where
// message: "Hello world!"
// threadId: "tId_123"
readable . push ( "Hello " ) ;
readable . push ( "world!" ) ;
readable . push ( "x1f" + "tId_123" ) ; // No spaces between the end of the message, the unit separator character, and the beginning of the threadId Le widget peut être personnalisé en modifiant les propriétés présentes dans l'objet window.buildShipChatWidget.config .
| Propriété | Taper | Description |
|---|---|---|
| window.buildshipschatwidget.config.url | Requis | L'URL du point de terminaison auquel le widget fera une demande de poste lorsque l'utilisateur envoie un message. Le point de terminaison doit s'attendre à un objet JSON dans le corps de la demande et doit répondre avec un objet JSON contenant la réponse du bot et l'ID de fil. |
| window.buildshipschatwidget.config.threadId | Facultatif | Un identifiant unique pour la conversation. Cela peut être utilisé pour maintenir le contexte de la conversation sur plusieurs messages / séances. S'il n'est pas défini, le widget enverra le premier message utilisateur sans ID de thread. Si vous concevez ensuite votre flux de travail pour qu'il renvoie un ID de thread dans le cadre de sa réponse (comme décrit dans la demande et la réponse), le widget l'utilisera automatiquement pour le reste de la conversation jusqu'à ce que le script reste chargé - par exemple, l'ID de thread sera rejeté si la page est actualisée. Remarque: L'ID de thread renvoyé dans la réponse ne sera pas utilisé si la propriété threadId est déjà définie. |
| window.buildshipschatwidget.config.user | Facultatif | Un objet contenant les données de l'utilisateur. Cela peut être utilisé pour envoyer le nom, le courrier électronique de l'utilisateur ou toute autre donnée dont le workflow pourrait avoir besoin. Exemple: window.buildShipChatWidget.config.user = { name: "Some User", email: "[email protected]", // ...Other user data}; |
| window.buildshipschatwidget.config.widgettitle | Facultatif | Le titre du widget. Cela sera affiché en haut du widget. Par défaut à Chatbot . |
| window.buildshipschatwidget.config.greetingMessage | Facultatif | Le message qui sera affiché (comme s'il avait été envoyé par le système) lors de l'ouverture du widget. Par défaut ne affiche aucun message de salutation. |
| window.buildshipschatwidget.config.disableErrororert | Facultatif | Désactive les alertes d'erreur si aucune URL n'est définie, si la demande échoue, etc. par défaut est false . |
| window.buildshipschatwidget.config.closeonoutsideclick | Facultatif | Ferme le widget lorsque l'utilisateur clique à l'extérieur du corps du widget. Si vous êtes défini sur false , vous devrez utiliser la méthode close() (fournie dans l'objet window.buildShipChatWidget ) pour pouvoir fermer le widget par programme (par exemple, en le fixant à un bouton). Par défaut est true . |
| window.buildshipschatwidget.config.openonload | Facultatif | Ouvre automatiquement le widget lorsque la page termine le chargement (nécessite un bouton avec l'attribut de data-buildship-chat-widget-button pour être présent sur la page). Par défaut est false . |
| window.buildshipschatwidget.config.Responseisastream | Facultatif | S'il est défini sur true , le widget s'attendra à ce que la réponse soit diffusée à partir du point de terminaison. Le point final doit répondre par une série de morceaux qui s'ajoutent enfin à la réponse du point de terminaison. Le widget agrégera ces morceaux au fur et à mesure qu'ils ont reçu et affichent et mettra à jour le message, se terminant enfin par la réponse complète. Apprenez-en plus ici. Par défaut est false . |
Le style du widget peut être personnalisé en remplaçant les variables CSS et / ou les règles. (Voir ici pour une liste de variables et de sélecteurs).
Par exemple, les variables peuvent être remplacées comme ainsi:
: root {
--buildship-chat-widget-primary-color : # 0000ff ;
}
/* Explicitly targeting the light theme is necessary in case the user's system theme is set to 'dark', but the body's `data-theme` attribute is set to `light` (perhaps via a theme toggle on the page). */
[ data-theme *= "light" ] {
...;
}Le mode sombre est activé lorsque soit:
Le thème du système de l'utilisateur est défini sur dark (c'est-à-dire @media (prefers-color-scheme: dark) est vrai) et c'est ce que la page utilise, ou
Le corps a un attribut de data-theme dans dark , comme ainsi:
< body data-theme =" dark " > </ body >Les styles de mode sombre peuvent également être remplacés:
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}La police est héritée du corps.
Lorsque le script est chargé, il recherche tous les éléments avec l'attribut data-buildship-chat-widget-button et ouvre le widget lorsque l'un de ces éléments est cliqué.
En plus de l'objet config , l'objet window.buildShipChatWidget expose également les méthodes open() , close() et init() , qui peuvent être appelées directement.
La méthode open() accepte l' event de clic et utilise event.target pour calculer la position du widget à l'aide de l'interface utilisateur flottante.
La méthode close() ferme le widget.
La méthode init() initialise le widget et est appelée automatiquement lorsque la fenêtre termine le chargement. Il peut être appelé manuellement pour réinitialiser le widget si nécessaire (particulièrement utile en cas de spas, où le widget pourrait devoir être réinitialisé après un changement d'itinéraire).
