首頁>編程相關>Ai源碼
下載

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，尤其是有用的，在路線更改後可能需要重新定位小部件）。

展開
附加信息
相關應用
爲您推薦
相關資訊 全部