react native chatbot

React Native 聊天机器人

一个反应本机聊天机器人组件，用于创建对话聊天。基于react-simple-chatbot。

入门

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		用于覆盖选项元素的样式对象
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	键盘视图的垂直偏移。检查键盘垂直偏移
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	步骤 ID。任何步骤都需要
message	String / Function	true	短信。如果函数，它将接收 ({ previousValue, steps }) 参数
trigger	String / Number / Function	false	下一步要触发的id。如果函数，它将接收 ({ value, steps }) 参数
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	步骤 ID。任何步骤都需要
user	Boolean	true	如果 true 表示您正在等待用户输入操作
trigger	String / Number / Function	false	下一步要触发的id。如果函数，它将接收 ({ value, steps }) 参数
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	步骤 ID。任何步骤都需要
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	步骤 ID。任何步骤都需要
component	Component	true	自定义反应组件
replace	Boolean	false	如果 true 表示该组件将被下一步替换
waitAction	Boolean	false	如果 true 表明您正在等待某些操作。您必须在组件中使用triggerNextStep 属性来执行操作
asMessage	Boolean	false	f true 表示该组件将显示为文本步骤
trigger	String / Number / Function	false	下一步要触发的id。如果函数，它将接收 ({ value, steps }) 参数
delay	Number	false	设置组件显示的延迟时间
end	Boolean	false	如果为 true 则表明这一步是最后一步
inputAttributes	Object	设置输入字段的任何属性（keyboardType、autoCapitalize、autoComplete）
metadata	Object	可以附加到对象的键值对集。这对于以结构化格式存储有关对象的附加信息非常有用

例子：

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

更新步骤

姓名	类型	必需的	描述
id	String / Number	true	步骤 ID。任何步骤都需要
update	String / Number	true	下一步要更新的id
trigger	String / Number / Function	false	下一步要触发的id。如果函数，它将接收 ({ value, steps }) 参数
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	可以附加到对象的键值对集。这对于以结构化格式存储有关对象的附加信息非常有用

如何贡献

请检查贡献指南

作者

卢卡斯·巴塞蒂

另请参阅参与该项目的贡献者列表。

捐

如果您喜欢这个项目，可以捐款支持❤️

执照

麻省理工学院·卢卡斯·巴塞蒂