buildship chat widget
1.0.0
Ein Open-Source-KI-Chat-Widget, das einfach in Ihre Website oder App eingebettet werden kann. Dieses Plug-and-Play-Widget ist so konzipiert, dass er nahtlos mit Ihrem benutzerdefinierten Buildship-Workflow zusammenarbeitet und es ermöglicht, mit Ihrer Datenbank, Ihrem Wissens-Repository und anderen von Ihnen verwendeten Tools eine Verbindung herzustellen.
Mit diesem leistungsstarken AI -Chat -Assistenten können Sie die Benutzererfahrung Ihrer Website oder App erheblich verbessern.
Laden Sie zunächst das Chat -Widget auf Ihrer Seite, indem Sie den folgenden Code -Snippet hinzufügen. Schließen Sie das Widget dann an Ihren Buildship -Workflow an, indem Sie die Beispiel -API -URL von API durch die API -URL der Buildship gemäß den Anweisungen in Schritt 2 ersetzen. Fügen Sie bei Bedarf alle Anpassungsoptionen hinzu.
< 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 >Sie können es auch als Modul importieren, wenn Sie mit TypeScript oder ES6 arbeiten (Typdeklarationen sind enthalten):
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/...." ;
// ...Zweitens platzieren Sie eine Schaltfläche mit den folgenden Daten-Attribute überall auf Ihrer Website oder App, um das Widget zu öffnen:
< button data-buildship-chat-widget-button > Beep Boop </ button >Das Widget ist für die Arbeit mit Buildship entwickelt-einem LowCode-Backend-Builder zum Erstellen von APIs, geplanten Jobs visuell und schnell mit einer Drag-and-Drop-Schnittstelle.
window.buildShipChatWidget.config.url einstellen. Weitere Details finden Sie in Schritt 3.Das Widget stellt eine Postanfrage an diese URL. Das Anforderungsgremium ist ein Objekt, das die Nachricht des Benutzers und andere Daten für den Workflow enthält, der nutzen kann, wie SO:
{
"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)
}Sie können im nächsten Abschnitt mehr über jede der Eigenschaften erfahren.
Das Widget erwartet eine Antwort vom Endpunkt in Form eines JSON -Objekts, das die Antwort des Workflows ( message ) und die Thread -ID ( threadId ) enthält, wie so:
{
"message" : " The bot's response " ,
"threadId" : " The unique identifier for the conversation (learn more below) "
}Im Falle einer gestreamten Antwort erwartet das Widget ein JSON -Objekt wie oben beschrieben, sondern erwartet stattdessen einen Strecke von Stücken, die sich schließlich zur Antwortmeldung summieren. Das Widget wird diese Brocken so aggregieren, wie sie empfangen werden, und zeigt die Nachricht in Echtzeit an und aktualisiert sie schließlich mit der vollständigen Antwort.
threadId durch die Antwort Optional gibt es zwei Möglichkeiten, die threadId durch die Antwort zu setzen.
Über einen Antwortheader
Wenn die Antwort einen Header mit dem Schlüssel x-thread-id mit der Thread-ID als Wert enthält, nimmt das Widget sie automatisch auf und setzt sie als threadId für die Konversation ein (falls es noch nicht festgelegt ist).
HINWEIS: Stellen Sie sicher, dass Sie den Header der Access-Control-Expose-Headers in Ihrer Antwort einstellen, um den x-thread-id Header dem Client-Widget auszusetzen.
Über den Stream selbst
Wenn der Endpunkt im folgenden Format mit der message und dem threadId antwortet: message + x1f + threadId , wobei x1f das Einheitsabschlüsselungszeichen ist, extrahiert das Widget die Thread -ID aus dem Stream und setzt sie als threadId für die Konversation (falls es nicht bereits festgelegt ist). Zum Beispiel:
// 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 Das Widget kann durch Bearbeiten der im window.buildShipChatWidget.config enthaltenen Eigenschaften angepasst werden.
| Eigentum | Typ | Beschreibung |
|---|---|---|
| window.buildshipChatwidget.config.url | Erforderlich | Die URL des Endpunkts, an den das Widget eine Postanforderung stellt, wenn der Benutzer eine Nachricht sendet. Der Endpunkt sollte ein JSON -Objekt in der Anforderungsbehörde erwarten und mit einem JSON -Objekt antworten, das die Antwort des Bots und die Thread -ID enthält. |
| window.buildshipChatwidget.config.threadid | Optional | Eine einzigartige Kennung für das Gespräch. Dies kann verwendet werden, um den Kontext der Konversation über mehrere Nachrichten/Sitzungen hinweg aufrechtzuerhalten. Wenn nicht festgelegt, sendet das Widget die erste Benutzernachricht ohne Thread -ID. Wenn Sie dann Ihren Workflow so entwerfen, dass er eine Thread -ID als Teil seiner Antwort zurückgibt (wie in Anforderung und Antwort beschrieben), verwendet das Widget dies für den Rest der Konversation automatisch, bis das Skript geladen bleibt. Beispielsweise wird die Thread -ID verworfen, wenn die Seite aktualisiert wird. Hinweis: Die in der Antwort zurückgegebene Thread -ID wird nicht verwendet, wenn die threadId -Eigenschaft bereits festgelegt ist. |
| window.buildshipChatwidget.config.user | Optional | Ein Objekt, das die Daten des Benutzers enthält. Dies kann verwendet werden, um den Namen des Benutzers, die E -Mail oder alle anderen Daten zu senden, die der Workflow benötigt. Beispiel: window.buildShipChatWidget.config.user = { name: "Some User", email: "[email protected]", // ...Other user data}; |
| window.buildshipChatwidget.config.widgettitle | Optional | Der Titel des Widgets. Dies wird oben im Widget angezeigt. Standardeinstellungen zu Chatbot . |
| window.buildshipChatwidget.config.greetingMessage | Optional | Die Meldung, die angezeigt wird (als ob sie vom System gesendet wurde), wenn das Widget zum ersten Mal geöffnet wird. Standardeinstellungen, um keine Grußnachricht anzuzeigen. |
| window.buildshipChatwidget.config.DisableerRoralert | Optional | Deaktiviert Fehlerwarnungen, wenn keine URL festgelegt wird, wenn die Anforderung fehlschlägt usw. Standard ist auf false . |
| window.buildshipChatwidget.config.CLOSEONOUTSIDECLICK | Optional | Schließt das Widget, wenn der Benutzer außerhalb des Widget -Körpers klickt. Wenn Sie auf false festgelegt sind, müssen Sie die Methode close() (im window.buildShipChatWidget bereitgestellt.BuildshipChatWidget -Objekt) verwenden, um das Widget programmgesteuert zu schließen (z. B. an einer Taste). Standardmäßig true . |
| window.buildshipChatwidget.config.openonload | Optional | Öffnet automatisch das Widget, wenn die Seite das Laden beendet (erfordert eine Schaltfläche mit dem Attribut data-buildship-chat-widget-button um auf der Seite vorhanden zu sein). Standardmäßig false . |
| window.buildshipChatwidget.config.responseSastream | Optional | Wenn das Widget auf true eingestellt ist, erwartet das Widget, dass die Antwort vom Endpunkt zurückgeführt wird. Der Endpunkt muss mit einer Reihe von Brocken antworten, die schließlich zur Antwort des Endpunkts addieren. Das Widget wird diese Brocken so aggregieren, wie sie empfangen werden, und zeigt die Nachricht an und aktualisiert sie schließlich mit der vollständigen Antwort. Erfahren Sie hier mehr. Standardmäßig false . |
Das Styling des Widgets kann angepasst werden, indem die CSS -Variablen und/oder die Regeln überschreiben. (Hier finden Sie eine Liste von Variablen und Selektoren).
Beispielsweise können die Variablen wie SO überschrieben werden:
: 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" ] {
...;
}Der dunkle Modus wird aktiviert, wenn beide:
Das System des Benutzers ist auf dark festgelegt (dh @media (prefers-color-scheme: dark) und das ist, was die Seite verwendet oder
Der Körper verfügt über ein data-theme das auf dark eingestellt ist, wie SO:
< body data-theme =" dark " > </ body >Dunkle Modus -Stile können ebenfalls überschrieben werden:
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}Die Schrift wird aus dem Körper geerbt.
Wenn das Skript geladen wird, sucht es nach Elementen mit dem Attribut data-buildship-chat-widget-button und öffnet das Widget, wenn eines dieser Elemente geklickt wird.
init() zum config close() das window.buildShipChatWidget open()
Die open() -Methode akzeptiert das Click event und verwendet event.target , um die Position des Widgets mithilfe der schwimmenden Benutzeroberfläche zu berechnen.
Die close() -Methode schließt das Widget.
Die init() -Methode initialisiert das Widget und wird automatisch aufgerufen, wenn das Fenster geladen wird. Es kann manuell aufgerufen werden, das Widget bei Bedarf neu zu initialisieren (besonders nützlich bei SPAs, bei dem das Widget möglicherweise nach einer Routenänderung neu initialisiert werden muss).
