buildship chat widget
1.0.0
Um widget de bate-papo de IA de código aberto que pode ser facilmente incorporado em seu site ou aplicativo. Este widget plug-and-play foi projetado para funcionar perfeitamente com seu fluxo de trabalho de construção personalizado, permitindo que ele se conecte com seu banco de dados, repositório de conhecimento e quaisquer outras ferramentas que você use.
Com este poderoso assistente de AI Chat, você pode aprimorar significativamente a experiência do usuário do seu site ou aplicativo.
Primeiro, carregue o widget de bate -papo na sua página, adicionando o seguinte snippet de código. Em seguida, conecte o widget ao seu fluxo de trabalho de construção, substituindo o URL da API de amostra pelo URL da API implantado em seu edifício, conforme as instruções na etapa 2. Adicione quaisquer opções de personalização conforme necessário.
< 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 >Você também pode importá -lo como um módulo se estiver trabalhando com o TypeScript ou ES6 (declarações de tipo estão incluídas):
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/...." ;
// ...Em segundo lugar, coloque um botão com o seguinte atributo de dados em qualquer lugar do seu site ou aplicativo para abrir o widget:
< button data-buildship-chat-widget-button > Beep Boop </ button >O widget é criado para trabalhar com o Buildship-um construtor de back-end de BOWCODE para criar APIs, trabalhos programados visual e rapidamente com uma interface arrastar e soltar.
window.buildShipChatWidget.config.url . Veja a Etapa 3 para obter mais detalhes.O widget fará uma solicitação de postagem para este URL. O corpo de solicitação será um objeto que contém a mensagem do usuário e outros dados para o fluxo de trabalho usar, assim:
{
"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)
}Você pode aprender mais sobre cada uma das propriedades na próxima seção.
O widget esperará uma resposta do ponto final na forma de um objeto JSON que contém a resposta ( message ) do fluxo de trabalho e o ID do thread ( threadId ), assim:
{
"message" : " The bot's response " ,
"threadId" : " The unique identifier for the conversation (learn more below) "
}No caso de uma resposta transmitida, o widget não espera um objeto JSON, conforme descrito acima, mas esperará um fluxo de pedaços que eventualmente somem a mensagem de resposta. O widget agregará esses pedaços conforme recebido e exibirá e atualizará a mensagem em tempo real, finalmente terminando com a resposta completa.
threadId através da resposta Opcionalmente, existem duas maneiras de definir o threadId através da resposta.
Através de um cabeçalho de resposta
Se a resposta incluir um cabeçalho com a tecla x-thread-id com o ID do thread como o valor, o widget o captura automaticamente e o definirá como o threadId para a conversa (se ainda não estiver definido).
NOTA: Certifique-se de definir o cabeçalho Access-Control-Expose-Headers em sua resposta para expor o cabeçalho x-thread-id ao widget do cliente.
Através do próprio fluxo
Se o endpoint responder com a message e o threadId no seguinte formato: message + x1f + threadId , onde x1f é o caractere separador da unidade, o widget extrairá o ID do thread do fluxo e o definirá como o threadId para a conversa (se ainda não estiver definido). Por exemplo:
// 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 O widget pode ser personalizado editando as propriedades presentes na window.buildShipChatWidget.config Objeto.
| Propriedade | Tipo | Descrição |
|---|---|---|
| window.buildshipchatwidget.config.url | Obrigatório | O URL do terminal para o qual o widget fará uma solicitação de postagem quando o usuário enviar uma mensagem. O terminal deve esperar um objeto JSON no corpo da solicitação e deve responder com um objeto JSON que contém a resposta do bot e o ID do thread. |
| window.buildshipchatwidget.config.threadId | Opcional | Um identificador único para a conversa. Isso pode ser usado para manter o contexto da conversa em várias mensagens/sessões. Se não estiver definido, o widget enviará a primeira mensagem do usuário sem um ID do thread. Se você projetar seu fluxo de trabalho para que ele retorne um ID do thread como parte de sua resposta (conforme descrito em solicitação e resposta), o widget usará automaticamente isso para o restante da conversa até que o script permaneça carregado - por exemplo, o ID do thread será descartado se a página for atualizada. NOTA: O ID do thread retornado na resposta não será usado se a propriedade threadId já estiver definida. |
| window.buildshipchatwidget.config.user | Opcional | Um objeto que contém os dados do usuário. Isso pode ser usado para enviar o nome do usuário, o email ou quaisquer outros dados que o fluxo de trabalho possa precisar. Exemplo: window.buildShipChatWidget.config.user = { name: "Some User", email: "[email protected]", // ...Other user data}; |
| window.buildshipchatwidget.config.widgettitle | Opcional | O título do widget. Isso será exibido na parte superior do widget. Padrões para Chatbot . |
| window.buildshipchatwidget.config.greetingMessage | Opcional | A mensagem que será exibida (como se fosse enviada pelo sistema) quando o widget for aberto pela primeira vez. Padrões de não exibir nenhuma mensagem de saudação. |
| window.buildshipchatwidget.config.disableErroralert | Opcional | Desative os alertas de erro se nenhuma URL estiver definida, se a solicitação falhar, etc. Padrões para false . |
| window.buildshipchatwidget.config.closeonoutsideclick | Opcional | Fecha o widget quando o usuário clica fora do corpo do widget. Se definido como false , você precisará usar o método close() (fornecido no objeto window.buildShipChatWidget ) para poder fechar o widget programaticamente (por exemplo, anexando -o a um botão). Padrões para true . |
| window.buildshipchatwidget.config.openonload | Opcional | Abre automaticamente o widget quando a página terminar o carregamento (requer um botão com o atributo data-buildship-chat-widget-button para estar presente na página). Padrões para false . |
| window.buildshipchatwidget.config.ResponseisSastream | Opcional | Se definido como true , o widget esperará que a resposta seja transmitida de volta do ponto final. O endpoint deve responder com uma série de pedaços que finalmente somam a resposta do endpoint. O widget agregará esses pedaços conforme recebido e exibirá e atualizará a mensagem, finalmente terminando com a resposta completa. Saiba mais aqui. Padrões para false . |
O estilo do widget pode ser personalizado substituindo as variáveis CSS e/ou as regras. (Veja aqui uma lista de variáveis e seletores).
Por exemplo, as variáveis podem ser substituídas assim:
: 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" ] {
...;
}O modo escuro é ativado quando:
O tema do sistema do usuário é definido como dark (ou seja, @media (prefers-color-scheme: dark) é verdadeiro) e é isso que a página usa, ou
O corpo tem um atributo data-theme definido como dark , assim:
< body data-theme =" dark " > </ body >Os estilos de modo escuro também podem ser substituídos:
@media ( prefers-color-scheme : dark) {
: root {
...;
}
}
[ data-theme *= "dark" ] {
...;
}A fonte é herdada do corpo.
Quando o script é carregado, procura quaisquer elementos com o atributo data-buildship-chat-widget-button e abre o widget quando algum desses elementos é clicado.
Além do objeto config , o objeto window.buildShipChatWidget também expõe os métodos open() , close() e init() , que podem ser chamados diretamente.
O método open() aceita o event de clique e usa event.target para calcular a posição do widget usando a interface do usuário flutuante.
O método close() fecha o widget.
O método init() inicializa o widget e é chamado automaticamente quando a janela termina o carregamento. Ele pode ser chamado manualmente para reinicializar o widget, se necessário (particularmente útil no caso de spas, onde o widget pode precisar ser reinicializado após uma mudança de rota).
