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	可以附加到物件的鍵值對集。這對於以結構化格式儲存有關物件的附加資訊非常有用

如何貢獻

請檢查貢獻指南

作者

盧卡斯·巴塞蒂

另請參閱參與專案的貢獻者清單。

捐

如果您喜歡這個項目，可以捐款支持❤️

執照

麻省理工學院·盧​​卡斯·巴塞蒂