i chatbot

я-чат-бот

Простой и элегантный компонент для создания диалоговых интерфейсов на React. ??

Начиная

Установка

 npm i i-chatbot --save

Основное использование

Импортировать компонент

 import ChatBot, { ChatBotUtil } from 'i-chatbot'

Создайте методы, которые будут обрабатывать события обратной передачи от чат-бота. Он должен возвращать массив объектов сообщений для ответа на действие пользователя с помощью обратного вызова.

  getStarted () {
    return [
      ChatBotUtil.textMessage(['Hi!', 'Hey there!'].any()),
      ChatBotUtil.textMessage(['How is life?', 'What's up?'].any(),
        ChatBotUtil.makeReplyButton('Great!', this.intro))
    ]
  }

  intro () {
    return [
      ChatBotUtil.textMessage('That's good to hear!')
    ]
  }

Отобразите ChatBot с помощью метода обратного вызова для начала работы и кнопки запуска.

 <ChatBot onGetStarted={this.getStarted}
         getStartedButton={ChatBotUtil.makeGetStartedButton('Get Started')} />

ЧатБот

Реквизит

Опора	По умолчанию	Тип	Описание
onGetStarted	-	функция	Начальный метод обратного вызова для возврата первых сообщений
GetStartedButton	-	объект	Параметры кнопки «Пуск»

Методы

startOver (сообщение)

Сбрасывает состояние чата и добавляет объект сообщения, если не установлена ​​кнопка «Начать».

ChatBotUtil

Методы

textMessage (текст, ... действия)

Создайте объект текстового сообщения.

Параметры:

Имя	Тип	Описание
текст	нить	Текст сообщения
действия	объект(ы)	Объект кнопки быстрого ответа

userTextMessage (текст)

Создайте объект текстового сообщения пользователя.

Параметры:

Имя	Тип	Описание
текст	нить	Текст сообщения

makeReplyButton (заголовок)

Создайте кнопку «Начать».

Параметры:

Имя	Тип	Описание
заголовок	нить	Заголовок

makeReplyButton (заголовок, обратная передача)

Создайте кнопку быстрого ответа.

Параметры:

Имя	Тип	Описание
заголовок	нить	Заголовок
обратная передача	нить	Значение постбэка

makeTextInputField (заголовок, обратная передача)

Создайте поле для ввода текста.

Параметры:

Имя	Тип	Описание
отправлять	нить	Название кнопки отправки
заполнитель	нить	Заполнитель для поля ввода
обратная передача	нить	Значение постбэка

Стиль

В качестве препроцессора CSS используется LESS. Скопируйте и измените стили из demo/src/i-chatbot.less , а затем импортируйте их в свое приложение.

Создано с помощью i-chatbot ?

• Персональный сайт Олега Стасулы
• Целевая страница Джастина Кейса

Вы создали что-нибудь классное с помощью i-chatbot ? Отправьте запрос на включение и добавьте его в этот список!

Дела?

• Направление чата снизу вверх
• Улучшенная проверка ввода
• Заполнитель аватара

Вклад ?

Ваш вклад приветствуется, каким бы большим или маленьким он ни был!

Пожалуйста, ознакомьтесь с руководством по участию, чтобы получить подробную информацию о структуре проекта, среде разработки, наборе тестов, стиле кода и т. д. Все обновления версий упоминаются в журнале изменений.

Лицензия?

Библиотека доступна с открытым исходным кодом в соответствии с условиями лицензии MIT.