buildship chat widget
1.0.0
Un widget de chat de IA de código abierto que se puede integrar fácilmente en su sitio web o aplicación. Este widget plug-and-play está diseñado para funcionar sin problemas con su flujo de trabajo de construcción personalizado, lo que le permite conectarse con su base de datos, repositorio de conocimiento y cualquier otra herramienta que use.
Con este poderoso asistente de chat de IA, puede mejorar la experiencia del usuario de su sitio web o aplicación significativamente.
Primero, cargue el widget de chat en su página agregando el siguiente fragmento de código. Luego conecte el widget a su flujo de trabajo de construcción reemplazando la URL de la API de muestra con su URL de API implementada de construcción según las instrucciones en el Paso 2. Agregue las opciones de personalización según sea necesario.
< 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 >También puede importarlo como módulo si está trabajando con TypeScript o ES6 (se incluyen las declaraciones de tipo):
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/...." ;
// ...En segundo lugar, coloque un botón con el siguiente atributo de datos en cualquier lugar de su sitio web o aplicación para abrir el widget:
< button data-buildship-chat-widget-button > Beep Boop </ button >El widget está construido para trabajar con Buildship, un constructor de backend de bajo código para crear API, trabajos programados visualmente y rápido con una interfaz de arrastrar y soltar.
window.buildShipChatWidget.config.url . Vea el paso 3 para más detalles.El widget hará una solicitud posterior a esta URL. El cuerpo de solicitud será un objeto que contenga el mensaje del usuario y otros datos para que el flujo de trabajo utilice, así:
{
"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)
}Puede obtener más información sobre cada una de las propiedades en la siguiente sección.
El widget esperará una respuesta desde el punto final en forma de un objeto JSON que contenga la respuesta del flujo de trabajo ( message ) y el ID de subproceso ( threadId ), como así:
{
"message" : " The bot's response " ,
"threadId" : " The unique identifier for the conversation (learn more below) "
}En el caso de una respuesta transmitida, el widget no esperará un objeto JSON como se describe anteriormente, sino que esperará un flujo de fragmentos que eventualmente se suman al mensaje de respuesta. El widget agregará estos fragmentos a medida que se reciban y muestran y actualizará el mensaje en tiempo real, finalmente terminando con la respuesta completa.
threadId a través de la respuesta Opcionalmente, hay dos formas de establecer el threadId a través de la respuesta.
A través de un encabezado de respuesta
Si la respuesta incluye un encabezado con la clave x-thread-id con el ID de subproceso como valor, el widget lo recogerá automáticamente y lo establecerá como el threadId para la conversación (si aún no está configurado).
Nota: Asegúrese de establecer el encabezado de Access-Control-Expose-Headers en su respuesta para exponer el encabezado x-thread-id al widget del cliente.
A través de la transmisión en sí
Si el punto final responde con el message y el threadId en el siguiente formato: message + x1f + threadId , donde x1f es el carácter del separador de la unidad, el widget extraerá el ID de subproceso de la transmisión y lo establecerá como el threadId para la conversación (si aún no está configurado). Por ejemplo:
// 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 El widget se puede personalizar editando las propiedades presentes en la window.buildShipChatWidget.config .
| Propiedad | Tipo | Descripción |
|---|---|---|
| Window.BuildshipchatWidget.config.url | Requerido | La URL del punto final al que el widget hará una solicitud de publicación cuando el usuario envíe un mensaje. El punto final debe esperar un objeto JSON en el cuerpo de solicitud y debe responder con un objeto JSON que contenga la respuesta del bot y el ID de subproceso. |
| Window.BuildshipchatWidget.Config.Threadid | Opcional | Un identificador único para la conversación. Esto se puede utilizar para mantener el contexto de la conversación en múltiples mensajes/sesiones. Si no está configurado, el widget enviará el primer mensaje de usuario sin una ID de subproceso. Si luego diseña su flujo de trabajo para que devuelva una ID de subproceso como parte de su respuesta (como se describe en la solicitud y la respuesta), el widget lo usará automáticamente para el resto de la conversación hasta que el script permanezca cargado, por ejemplo, la ID del subproceso se descartará si la página se actualiza. Nota: El ID de subproceso devuelto en la respuesta no se usará si la propiedad threadId ya está configurada. |
| Window.BuildshipchatWidget.Config.user | Opcional | Un objeto que contiene los datos del usuario. Esto se puede usar para enviar el nombre del usuario, el correo electrónico o cualquier otro datos que el flujo de trabajo pueda necesitar. Ejemplo: window.buildShipChatWidget.config.user = { name: "Some User", email: "[email protected]", // ...Other user data}; |
| Window.BuildshipchatWidget.Config.Widgettitle | Opcional | El título del widget. Esto se mostrará en la parte superior del widget. El valor predeterminado a Chatbot . |
| Window.BuildshipchatWidget.Config.GreetingMessage | Opcional | El mensaje que se mostrará (como si fuera enviado por el sistema) cuando se abre por primera vez el widget. El valor predeterminado no muestra ningún mensaje de saludo. |
| Window.BuildshipchatWidget.Config.DisableErroralert | Opcional | Desactiva las alertas de error si no se establece URL, si la solicitud falla, etc. El valor predeterminado es false . |
| Window.BuildshipchatWidget.Config.CloseOnOutsideclick | Opcional | Cierra el widget cuando el usuario hace clic fuera del cuerpo del widget. Si se establece en false , deberá usar el método close() (proporcionado en el objeto window.buildShipChatWidget ) para poder cerrar el widget mediante programación (por ejemplo, al conectarlo a un botón). El valor predeterminado es true . |
| Window.BuildshipchatWidget.Config.OpenonLoad | Opcional | Se abre automáticamente el widget cuando la página finaliza la carga (requiere un botón con el atributo de data-buildship-chat-widget-button para estar presente en la página). El valor predeterminado es false . |
| Window.BuildshipchatWidget.Config.ResponseSASTREAM | Opcional | Si se establece en true , el widget esperará que la respuesta se transmitiera desde el punto final. El punto final debe responder con una serie de fragmentos que finalmente se suman a la respuesta del punto final. El widget agregará estos fragmentos a medida que se reciban y muestran y actualizarán el mensaje, finalmente terminando con la respuesta completa. Obtenga más información aquí. El valor predeterminado es false . |
El estilo del widget se puede personalizar anulando las variables CSS y/o las reglas. (Consulte aquí para obtener una lista de variables y selectores).
Por ejemplo, las variables pueden anularse así:
: 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" ] {
...;
}El modo oscuro se activa cuando ya sea:
El tema del sistema del usuario está configurado en dark (es decir, @media (prefers-color-scheme: dark) es verdadero) y eso es lo que usa la página, o
El cuerpo tiene un atributo data-theme establecido en dark , como así:
< body data-theme =" dark " > </ body >Los estilos de modo oscuro también se pueden anular:
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}La fuente se hereda del cuerpo.
Cuando se carga el script, busca cualquier elemento con el atributo data-buildship-chat-widget-button y abre el widget cuando se hace clic en cualquiera de esos elementos.
Además del objeto config , el objeto window.buildShipChatWidget también expone los métodos open() , close() e init() , que pueden llamarse directamente.
El método open() acepta el event de clic y usa event.target para calcular la posición del widget usando la interfaz de usuario flotante.
El método close() cierra el widget.
El método init() inicializa el widget y se llama automáticamente cuando la ventana finaliza la carga. Se puede llamar manualmente para reinicializar el widget si es necesario (particularmente útil en el caso de SPA, donde el widget puede necesitar ser reinicializado después de un cambio de ruta).
