buildship chat widget

buildship ai聊天小部件

一个可以轻松嵌入您网站或应用程序的开源AI聊天小部件。该插件的小部件旨在与您的自定义buildship工作流无缝地工作，从而使其与您使用的数据库，知识存储库以及您使用的任何其他工具连接。

借助此功能强大的AI聊天助理，您可以显着增强网站或应用程序的用户体验。

尝试现场演示

AI.Assistant.intro.mp4

入门

步骤1。将小部件添加到您的网站或应用

• 首先，通过添加以下代码段来将聊天小部件加载到页面上。然后，根据步骤2中的说明，将buildship部署的API URL替换为buildship url，将小部件连接到您的buildShip工作流程。根据需要添加任何自定义选项。

   < 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 >

  如果您使用Typescript或ES6（包括类型声明），则可以作为模块导入它：

   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/...." ;
  // ...

• 其次，在网站或应用程序上的任何位置都将一个按钮放置一个数据归因于以下数据，以打开小部件：

   < button data-buildship-chat-widget-button > Beep Boop </ button >

步骤2。将聊天小部件连接到您的BuildShip工作流程

该小部件是为了与BuildShip合作的构建 - 一个低代码后端构建器，用于创建API，通过拖放接口在视觉上和快速的情况下创建APIS。

• 通过克隆这些聊天窗口小部件模板的克隆来开始
• 添加您的OpenAI Assistant ID和API键，然后运送工作流程。部署工作流程后，您将获得API URL。
• 通过设置window.buildShipChatWidget.config.url 。有关更多详细信息，请参见步骤3。
• 您也可以随时自定义此模板工作流程。

您的BuildShip工作流程的要求

1. 小部件将向此URL提出发布请求。请求主体将是一个包含用户消息和其他数据的对象，用于使用工作流程，例如：

   {
     "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)
   }

   您可以在下一部分中了解有关每个属性的更多信息。

2. 小部件将以json对象的形式从端点产生响应，该对象包含工作流的响应（ message ）和线程ID（ threadId ），例如：

   {
     "message" : " The bot's response " ,
     "threadId" : " The unique identifier for the conversation (learn more below) "
   }

流响应

如果有流响应，小部件不会期望如上所述的JSON对象，而是期望一系列最终加起来响应消息的块。小部件将在接收到这些块时汇总这些块，并实时显示和更新消息，最后以完整的响应结束。

通过响应设置threadId

可选地，有两种方法可以通过响应设置threadId 。

1. 通过响应标头

   如果响应包括带有键x-thread-id的标题，则带有线程ID作为值，则小部件将自动拾取并将其设置为threadId （如果尚未设置）。

   注意：请确保在响应中设置Access-Control-Expose-Headers标题，以将x-thread-id标头曝光到客户端小部件。

2. 通过流本身

   如果端点以以下格式使用message和threadId响应： message + x1f + threadId ，其中x1f是单位分离器字符，则小部件将从流中提取线程ID并将其设置为对话的threadId （如果尚未设置）。例如：

    // 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

步骤3。配置属性和自定义

可以通过编辑window.buildShipChatWidget.config对象中的属性来自定义小部件。

财产	类型	描述
window.buildshipchatwidget.config.url	必需的	当用户发送消息时，小部件将提出端口请求的端点的URL。端点应期望在请求主体中一个JSON对象，并应使用包含机器人响应和线程ID的JSON对象响应。
window.buildshipchatwidget.config.threadid	选修的	对话的唯一标识符。这可以用来通过多个消息/会话来维护对话的上下文。如果未设置，小部件将在没有线程ID的情况下发送第一个用户消息。如果您设计工作流程以使其作为其响应的一部分返回线程ID（如请求和响应中所述），那么小部件将在对话的其余部分中自动使用它，直到脚本保持加载，例如，如果页面刷新页面，则将丢弃线程ID。注意：如果已经设置了threadId属性，则不会使用响应中返回的线程ID。
window.buildshipchatwidget.config.user	选修的	包含用户数据的对象。这可用于发送用户的姓名，电子邮件或工作流可能需要的任何其他数据。示例： window.buildShipChatWidget.config.user = { name: "Some User", email: "[email protected]", // ...Other user data};
window.buildshipchatwidget.config.widgettitle	选修的	小部件的标题。这将显示在小部件的顶部。默认为Chatbot 。
window.buildshipchatwidget.config.greetingmessage	选修的	首次打开小部件时，将显示的消息（好像是由系统发送的）。默认值不显示任何问候消息。
window.buildshipchatwidget.config.disableRoralert	选修的	禁用错误警报，如果未设置URL，请求失败等。默认为false 。
window.buildshipchatwidget.config.closeonoutsideclick	选修的	当用户单击小部件主体外时，关闭小部件。如果设置为false ，则需要使用close()方法（在window.buildShipChatWidget中提供。BuildShipshapwidget对象）来编程（例如，将其连接到按钮）。默认为true 。
window.buildshipchatwidget.config.openonload	选修的	当页面完成加载时，会自动打开小部件（需要一个按钮，其中包含在页面上存在的data-buildship-chat-widget-button属性）。默认为false 。
window.buildshipchatwidget.config.responseisastream	选修的	如果设置为true ，小部件将期望从端点回到响应。端点必须以一系列块的响应，最终加起来端点的响应。小部件将在接收到这些块并显示和更新消息时汇总这些块，最后以完整的响应结束。在这里了解更多。默认为false 。

自定义小部件的外观（可选）

可以通过覆盖CSS变量和/或规则来定制小部件的样式。 （有关变量和选择器的列表，请参见此处）。

例如，变量可以像这样覆盖：

 : 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" ] {
  ...;
}

两者都会激活黑暗模式：

• 用户的系统主题设置为dark （即@media (prefers-color-scheme: dark)是正确的），这就是页面使用的，或

• 人体的data-theme属性设置为dark ，因此：

   < body data-theme =" dark " > </ body >

暗模式样式也可以被覆盖：

 @media ( prefers-color-scheme : dark) {
  : root {
    ...;
  }
}

[ data-theme *= "dark" ] {
  ...;
}

字体是从身体继承的。

它如何工作

加载脚本后，它将查找具有data-buildship-chat-widget-button属性的任何元素，并在单击任何这些元素时打开小部件。

除了config对象外， window.buildShipChatWidget对象还可以直接调用open() ，colles（）， close()和init()方法。

open()方法接受点击event ，并使用event.target使用浮动UI来计算小部件的位置。

close()方法关闭小部件。

init()方法初始化了小部件，并且当窗口完成加载时会自动称为。如果需要，可以手动调用小部件重新定位（对于Spas，尤其是有用的，在路线更改后可能需要重新定位小部件）。