react native chatbot

React Native Чат-бот

Собственный компонент чат-бота, реагирующий на реакцию, для создания разговорных чатов. На основе чат-бота React-Simple.

Начало работы

npm install react-native-chatbot --save

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

 import ChatBot from 'react-native-chatbot' ;

const steps = [
  {
    id : '0' ,
    message : 'Welcome to react chatbot!' ,
    trigger : '1' ,
  } ,
  {
    id : '1' ,
    message : 'Bye!' ,
    end : true ,
  } ,
] ;

< ChatBot steps = { steps } / > 

Документация

Характеристики

Имя	Тип	По умолчанию	Описание
avatarStyle	PropTypes.object		Объект стиля, используемый для переопределения элемента аватара.
avatarWrapperStyle	PropTypes.object		Объект стиля, используемый для переопределения элемента, окружающего аватар.
botAvatar	PropTypes.string	img	Источник изображения бота
botBubbleColor	PropTypes.string	#6E48AA	Цвет пузырька бота
botDelay	PropTypes.number	1000	Время задержки сообщений бота
botFontColor	PropTypes.string	#fff	Цвет шрифта бота
bubbleStyle	PropTypes.object		Объект стиля, используемый для переопределения элемента пузырька.
optionStyle	PropTypes.object		Объект стиля, используемый для переопределения контейнера параметров.
optionElementStyle	PropTypes.object		Объект стиля, используемый для переопределения элемента option.
optionFontColor	PropTypes.string		Вариант цвета шрифта
optionBubbleColor	PropTypes.string		Цвет пузырька опции
className	PropTypes.string		Добавьте имя класса в корневой элемент
contentStyle	PropTypes.object		Объект стиля, используемый для переопределения элемента прокрутки.
customDelay	PropTypes.number	1000	Время задержки пользовательских сообщений
customStyle	PropTypes.object		Объект стиля, используемый для переопределения пользовательского элемента шага.
footerStyle	PropTypes.object		Объект стиля, используемый для переопределения элемента нижнего колонтитула.
handleEnd({ renderedSteps, steps, values })	PropTypes.func		Функция обратного вызова при завершении чата
headerComponent	PropTypes.element		Компонент заголовка для чат-бота
hideUserAvatar	PropTypes.bool	false	Если true, аватар пользователя будет скрыт на всех этапах.
inputStyle	PropTypes.object		Объект стиля, используемый для переопределения элемента ввода.
keyboardVerticalOffset	PropTypes.number	ios ? 44 : 0	Вертикальное смещение вида клавиатуры. Проверьте клавиатуруVerticalOffset
placeholder	PropTypes.string	Type the message ...	Заполнитель ввода данных чат-бота
steps	PropTypes.array		Действия чат-бота для отображения
style	PropTypes.object		Объект стиля, используемый для переопределения элемента кнопки отправки.
submitButtonStyle	PropTypes.object		Объект стиля, используемый для переопределения элемента кнопки.
submitButtonContent	PropTypes.string или PropTypes.element	SEND	Строка или объект, используемый для переопределения содержимого кнопки.
userAvatar	PropTypes.string	img	Источник изображения пользователя
userBubbleStyle	PropTypes.string	img	Объект стиля, используемый для переопределения пользовательского элемента пузырька.
userBubbleColor	PropTypes.string	#fff	Цвет пузырька пользователя
userDelay	PropTypes.number	1000	Время задержки сообщений пользователя
userFontColor	PropTypes.string	#4a4a4a	Цвет пользовательского шрифта
scrollViewProps	PropTypes.object	#4a4a4a	Используйте для переопределения реквизитов просмотра прокрутки

Шаги

Текстовый шаг

Имя	Тип	Необходимый	Описание
id	String / Number	true	Идентификатор шага. Требуется для любого шага
message	String / Function	true	Текстовое сообщение. Если функция, она получит ({ previousValue, шаги }) параметры
trigger	String / Number / Function	false	Идентификатор следующего шага, который будет запущен. Если функция, она получит ({значение, шаги}) параметры
avatar	String	false	аватар, который будет отображаться только на этом этапе. Примечание. На этом этапе должен появиться аватар.
delay	Number	false	установите время задержки для отображения сообщения
end	Boolean	false	если true, укажите, что этот шаг является последним
inputAttributes	Object	Установите любые атрибуты в поле ввода (keyboardType, autoCapitalize, autoComplete).
metadata	Object	Набор пар ключ-значение, которые можно прикрепить к объекту. Это может быть полезно для хранения дополнительной информации об объекте в структурированном формате.

Пример:

 {
  id : '1' ,
  message : 'Hello World' ,
  trigger : '2' ,
} ,
{
  id : '2' ,
  message : ( { previousValue , steps } ) => 'Hello' ,
  end : true ,
} 

Шаг пользователя

Имя	Тип	Необходимый	Описание
id	String / Number	true	Идентификатор шага. Требуется для любого шага
user	Boolean	true	если true, укажите, что вы ожидаете действия типа пользователя
trigger	String / Number / Function	false	Идентификатор следующего шага, который будет запущен. Если функция, она получит ({значение, шаги}) параметры
validator	String / Number	false	если атрибут пользователя имеет значение true, вы можете передать функцию валидатора для проверки текста, введенного пользователем.
end	Boolean	false	если true, укажите, что этот шаг является последним
inputAttributes	Object	Установите любые атрибуты в поле ввода (keyboardType, autoCapitalize, autoComplete).
metadata	Object	Набор пар ключ-значение, которые можно прикрепить к объекту. Это может быть полезно для хранения дополнительной информации об объекте в структурированном формате.

Пример:

 {
  id : '1' ,
  user : true ,
  inputAttributes : {
    keyboardType : 'email-address'
  } ,
  end : true ,
} 

Варианты Шаг

Имя	Тип	Необходимый	Описание
id	String / Number	true	Идентификатор шага. Требуется для любого шага
options	Array	true	Массив параметров со свойствами {label, value, Trigger}
end	Boolean	false	если true, укажите, что этот шаг является последним
inputAttributes	Object	Установите любые атрибуты в поле ввода (keyboardType, autoCapitalize, autoComplete).
metadata	Object	Набор пар ключ-значение, которые можно прикрепить к объекту. Это может быть полезно для хранения дополнительной информации об объекте в структурированном формате.

Пример:

 {
  id : '1' ,
  options : [
    { value : 1 , label : 'Number 1' , trigger : '3' } ,
    { value : 2 , label : 'Number 2' , trigger : '2' } ,
    { value : 3 , label : 'Number 3' , trigger : '2' } ,
  ] ,
} 

Пользовательский шаг

Имя	Тип	Необходимый	Описание
id	String / Number	true	Идентификатор шага. Требуется для любого шага
component	Component	true	Пользовательский компонент React
replace	Boolean	false	если true, указывает, что компонент будет заменен на следующем шаге
waitAction	Boolean	false	если true, это означает, что вы ждете какого-то действия. Вы должны использовать свойство ignoreNextStep в своем компоненте для выполнения действия.
asMessage	Boolean	false	f true указывает, что компонент будет отображаться как текстовый шаг
trigger	String / Number / Function	false	Идентификатор следующего шага, который будет запущен. Если функция, она получит ({значение, шаги}) параметры
delay	Number	false	установите время задержки для отображения компонента
end	Boolean	false	если true, укажите, что этот шаг является последним
inputAttributes	Object	Установите любые атрибуты в поле ввода (keyboardType, autoCapitalize, autoComplete).
metadata	Object	Набор пар ключ-значение, которые можно прикрепить к объекту. Это может быть полезно для хранения дополнительной информации об объекте в структурированном формате.

Пример:

 {
  id : '1' ,
  component : < CustomComponent / >
  trigger : '2'
} 

Шаг обновления

Имя	Тип	Необходимый	Описание
id	String / Number	true	Идентификатор шага. Требуется для любого шага
update	String / Number	true	Идентификатор следующего шага, который будет обновлен
trigger	String / Number / Function	false	Идентификатор следующего шага, который будет запущен. Если функция, она получит ({значение, шаги}) параметры
inputAttributes	Object	Установите любые атрибуты в поле ввода (keyboardType, autoCapitalize, autoComplete).
metadata	Object	Набор пар ключ-значение, которые можно прикрепить к объекту. Это может быть полезно для хранения дополнительной информации об объекте в структурированном формате.

Пример:

 {
  id : '1' ,
  options : [
    { value : 1 , label : 'Number 1' , trigger : '3' } ,
    { value : 2 , label : 'Number 2' , trigger : '2' } ,
    { value : 3 , label : 'Number 3' , trigger : '2' } ,
  ] ,
} 

Пользовательский компонент

Когда вы объявляете пользовательский шаг, вам необходимо указать пользовательский компонент React, который будет отображаться в чате. Этот пользовательский компонент получит следующие свойства.

Имя	Тип	Описание
previousStep	PropTypes.object	Предыдущий шаг визуализируется
step	PropTypes.object	Текущий шаг визуализируется
steps	PropTypes.object	Все шаги отображены
triggerNextStep({ value, trigger })	PropTypes.func	Функция обратного вызова для запуска следующего шага, когда атрибут пользователя имеет значение true. При желании вы можете передать объект со значением, которое будет установлено на шаге, и запустить следующий шаг.
inputAttributes	Object	Установите любые атрибуты в поле ввода (keyboardType, autoCapitalize, autoComplete).
metadata	Object	Набор пар ключ-значение, которые можно прикрепить к объекту. Это может быть полезно для хранения дополнительной информации об объекте в структурированном формате.

Как внести свой вклад

Пожалуйста, ознакомьтесь с руководством по участию

Авторы

Лукас Бассетти

См. также список участников, принявших участие в этом проекте.

Пожертвовать

Если вам понравился этот проект, вы можете сделать пожертвование на его поддержку ❤️

Лицензия

Массачусетский технологический институт · Лукас Бассетти