buildship chat widget
1.0.0
Виджет чата с открытым исходным кодом, который можно легко встроить на ваш сайт или приложение. Этот виджет подключаемого и игрока предназначен для беспрепятственной работы с вашим пользовательским рабочим процессом Buildship, что позволяет ему соединиться с вашей базой данных, хранилища знаний и любыми другими инструментами, которые вы используете.
С помощью этого мощного помощника в чате искусственного интеллекта вы можете значительно улучшить пользовательский опыт вашего веб -сайта или приложения.
Во -первых, загрузите виджет чата на вашу страницу, добавив следующий фрагмент кода. Затем подключите виджет с вашим рабочим процессом Buildship, заменив выборочный URL -адрес API с помощью URL -адреса Buildship развернута в соответствии с инструкциями на шаге 2. Добавьте любые параметры настройки по мере необходимости.
< 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 >Виджет построен для работы с Buildship-бэкэнд-строителем низких кодов для создания API, запланированных заданий визуально и быстро с помощью интерфейса перетаскивания.
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)
}Вы можете узнать больше о каждом из свойств в следующем разделе.
Виджет ожидает ответа от конечной точки в форме объекта JSON, содержащего ответ рабочего процесса ( message ) и идентификатор потока ( threadId ), как и так:
{
"message" : " The bot's response " ,
"threadId" : " The unique identifier for the conversation (learn more below) "
}В случае потокового ответа виджет не ожидает объекта JSON, как описано выше, но вместо этого ожидает поток кусков, который в конечном итоге составляет ответное сообщение. Виджет будет собирать эти куски, поскольку они принимают, отображают и обновляют сообщение в режиме реального времени, наконец, заканчивая полным ответом.
threadId через ответ При желании есть два способа установить threadId через ответ.
Через заголовок ответа
Если ответ включает в себя заголовок с ключом x-thread-id с идентификатором потока в качестве значения, виджет автоматически забирает его и установит в качестве threadId для разговора (если он еще не установлен).
ПРИМЕЧАНИЕ. Обязательно установите заголовок Access-Control-Expose-Headers в своем ответе, чтобы выставить заголовок x-thread-id на виджет клиента.
Через сам поток
Если конечная точка реагирует с message и threadId в следующем формате: message + x1f + threadId , где x1f является символом отделения устройства, виджет затем извлечет идентификатор потока из потока и установит его в качестве 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 в органе запроса и должна отвечать объектом JSON, содержащим ответ бота и идентификатор потока. |
| window.buildshipchatwidget.config.threadid | Необязательный | Уникальный идентификатор для разговора. Это может быть использовано для поддержания контекста разговора в нескольких сообщениях/сессиях. Если не установить, виджет отправит первое пользовательское сообщение без идентификатора потока. Если вы разработаете свой рабочий процесс, чтобы он вернул идентификатор потока как часть своего ответа (как описано в запросе и ответе), виджет автоматически использует его для остальной части разговора, пока сценарий не останется загруженным - например, идентификатор потока будет отброшен, если страница будет обновлена. ПРИМЕЧАНИЕ. Идентификатор потока, возвращаемый в ответе, не будет использоваться, если свойство threadId уже установлено. |
| 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.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() , close() и init() , которые могут быть вызваны непосредственно.
Метод open() принимает event Click и использует event.target для вычисления позиции виджета с помощью плавающего пользовательского интерфейса.
Метод close() закрывает виджет.
Метод init() инициализирует виджет и называется автоматически, когда окно завершает загрузку. Это может быть вызвано вручную для повторного инициализации виджета, если это необходимо (особенно полезно в случае спа-салонов, где виджет может потребоваться повторно инициализировать после изменения маршрута).
