react native chatbot

React ネイティブ チャットボット

会話チャットを作成するための反応ネイティブ チャットボット コンポーネント。反応シンプルチャットボットに基づいています。

はじめに

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。関数の場合、({ 値, ステップ }) パラメータを受け取ります
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。関数の場合、({ 値, ステップ }) パラメータを受け取ります
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	{ ラベル、値、トリガー } プロパティを持つオプションの配列
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	カスタム React コンポーネント
replace	Boolean	false	true の場合、コンポーネントが次のステップで置き換えられることを示します
waitAction	Boolean	false	true の場合は、何らかのアクションを待っていることを示します。アクションを実行するには、コンポーネントでtriggerNextStepプロパティを使用する必要があります
asMessage	Boolean	false	f true は、コンポーネントがテキスト ステップとして表示されることを示します
trigger	String / Number / Function	false	トリガーされる次のステップの ID。関数の場合、({ 値, ステップ }) パラメータを受け取ります
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。関数の場合、({ 値, ステップ }) パラメータを受け取ります
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	オブジェクトにアタッチできるキーと値のペアのセット。これは、オブジェクトに関する追加情報を構造化形式で保存する場合に役立ちます。

貢献方法

貢献ガイドを確認してください

著者

ルーカス・バセッティ

このプロジェクトに参加した貢献者のリストもご覧ください。

寄付する

このプロジェクトが気に入ったら、寄付してサポートしていただけます❤️

ライセンス

MIT・ルーカス・バセッティ