buildship chat widget
1.0.0
웹 사이트 나 앱에 쉽게 내장 할 수있는 오픈 소스 AI 채팅 위젯. 이 플러그 앤 플레이 위젯은 사용자 정의 Buildship Workflow와 완벽하게 작동하도록 설계되어 데이터베이스, 지식 저장소 및 사용하는 기타 도구와 연결할 수 있습니다.
이 강력한 AI 채팅 어시스턴트를 사용하면 웹 사이트 또는 앱의 사용자 경험을 크게 향상시킬 수 있습니다.
먼저 다음 코드 스 니펫을 추가하여 페이지에 채팅 위젯을로드하십시오. 그런 다음 2 단계의 지침에 따라 BuildShip 배포 된 API URL로 샘플 API URL을 교체하여 위젯을 빌드십 워크 플로우에 연결하십시오. 필요에 따라 사용자 정의 옵션을 추가하십시오.
< 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 >위젯은 API를 생성하기위한 로우 코드 백엔드 빌더 인 BuildShip과 함께 작동하도록 만들어졌습니다.
window.buildShipChatWidget.config.url 속성을 설정하여 위젯에 연결하십시오. 자세한 내용은 3 단계를 참조하십시오.위젯은이 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)
}다음 섹션에서 각 속성에 대해 자세히 알아볼 수 있습니다.
위젯은 워크 플로의 응답 ( message )과 스레드 ID ( threadId )를 포함하는 JSON 객체의 형태로 엔드 포인트의 응답을 다음과 같이 기대합니다.
{
"message" : " The bot's response " ,
"threadId" : " The unique identifier for the conversation (learn more below) "
}스트리밍 된 응답의 경우 위젯은 위에서 설명한대로 JSON 객체를 기대하지 않지만 대신 응답 메시지에 추가되는 청크 스트림을 기대합니다. 위젯은이 청크를받을 때이 청크를 집계하고 표시하고 메시지를 실시간으로 업데이트하여 완전한 응답으로 끝납니다.
threadId 설정합니다 선택적으로 응답을 통해 threadId 설정하는 두 가지 방법이 있습니다.
응답 헤더를 통해
응답에 스레드 ID가있는 키 x-thread-id 가있는 헤더가 포함 된 경우 위젯은 자동으로 픽업하여 대화의 threadId 설정합니다 (아직 설정되지 않은 경우).
참고 : 응답에서 Access-Control-Expose-Headers 헤더를 설정하여 x-thread-id 헤더를 클라이언트 위젯에 노출시켜야합니다.
스트림 자체를 통해
끝점이 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 위젯은 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.disableerRoralert | 선택 과목 | URL이 설정되지 않은 경우 오류 알림을 비활성화하고 요청에 실패한 경우 기본값으로 false 됩니다. |
| Window.buildshipchatwidget.config.closeonoutsideclick | 선택 과목 | 사용자가 위젯 본문 밖에서 클릭하면 위젯을 닫습니다. false 로 설정된 경우 close() 메소드 ( window.buildShipChatWidget 개체에 제공)를 사용하여 프로그래밍 방식으로 위젯을 닫을 수 있어야합니다 (예 : 버튼에 버튼에 연결 함). 기본값은 true . |
| Window.buildshipchatwidget.config.openonload | 선택 과목 | 페이지가로드가 완료되면 위젯을 자동으로 엽니 다 (페이지에 data-buildship-chat-widget-button 속성이있는 버튼이 필요하다). 기본값으로 false . |
| Window.Buildshipchatwidget.config.responseistrame | 선택 과목 | 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) Page가 사용하는 것입니다.
본문에는 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() , close() 및 init() 메소드를 노출시켜 직접 호출 할 수 있습니다.
open() 메소드는 클릭 event 허용하고 event.target 사용하여 플로팅 UI를 사용하여 위젯의 위치를 계산합니다.
close() 메소드는 위젯을 닫습니다.
init() 메소드는 위젯을 초기화하고 창이로드가 완료되면 자동으로 호출됩니다. 필요한 경우 위젯을 다시 시작하기 위해 수동으로 호출 될 수 있습니다 (특히 경로 변경 후 위젯을 재개해야 할 SPA의 경우 특히 유용합니다).
