react native chatbot

โต้ตอบ Chatbot ดั้งเดิม

คอมโพเนนต์แชทบอทแบบโต้ตอบเพื่อสร้างการแชทการสนทนา อิงจาก 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	หากเป็นจริง อวตารของผู้ใช้จะถูกซ่อนในทุกขั้นตอน
inputStyle	PropTypes.object		วัตถุสไตล์ที่จะใช้แทนที่องค์ประกอบอินพุต
keyboardVerticalOffset	PropTypes.number	ios ? 44 : 0	ออฟเซ็ตแนวตั้งของมุมมองแป้นพิมพ์ ตรวจสอบแป้นพิมพ์ VerticalOffset
placeholder	PropTypes.string	Type the message ...	ตัวยึดตำแหน่งอินพุต Chatbot
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	รหัสของขั้นตอนถัดไปที่จะถูกทริกเกอร์ หากฟังก์ชันจะได้รับพารามิเตอร์ ({ value, step })
avatar	String	false	รูปประจำตัวที่จะแสดงเฉพาะในขั้นตอนนี้ หมายเหตุ: ขั้นตอนนี้ต้องเป็นขั้นตอนที่อวตารปรากฏขึ้น
delay	Number	false	ตั้งเวลาหน่วงการแสดงข้อความ
end	Boolean	false	หากเป็นจริงแสดงว่าขั้นตอนนี้เป็นขั้นตอนสุดท้าย
inputAttributes	Object	ตั้งค่าคุณลักษณะใด ๆ บนฟิลด์อินพุต (ประเภทแป้นพิมพ์, ตัวพิมพ์ใหญ่อัตโนมัติ, การทำให้สมบูรณ์อัตโนมัติ)
metadata	Object	ชุดคู่คีย์-ค่าที่คุณสามารถแนบกับออบเจ็กต์ได้ สิ่งนี้มีประโยชน์สำหรับการจัดเก็บข้อมูลเพิ่มเติมเกี่ยวกับออบเจ็กต์ในรูปแบบที่มีโครงสร้าง

ตัวอย่าง:

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

ขั้นตอนผู้ใช้งาน

ชื่อ	พิมพ์	ที่จำเป็น	คำอธิบาย
id	String / Number	true	รหัสขั้นตอน จำเป็นสำหรับขั้นตอนใดๆ
user	Boolean	true	หากเป็นจริงแสดงว่าคุณกำลังรอการดำเนินการประเภทผู้ใช้
trigger	String / Number / Function	false	รหัสของขั้นตอนถัดไปที่จะถูกทริกเกอร์ หากฟังก์ชันจะได้รับพารามิเตอร์ ({ value, step })
validator	String / Number	false	หากแอตทริบิวต์ผู้ใช้เป็นจริง คุณสามารถส่งฟังก์ชันเครื่องมือตรวจสอบความถูกต้องเพื่อตรวจสอบข้อความที่ผู้ใช้พิมพ์ได้
end	Boolean	false	หากเป็นจริงแสดงว่าขั้นตอนนี้เป็นขั้นตอนสุดท้าย
inputAttributes	Object	ตั้งค่าคุณลักษณะใด ๆ บนฟิลด์อินพุต (ประเภทแป้นพิมพ์, ตัวพิมพ์ใหญ่อัตโนมัติ, การทำให้สมบูรณ์อัตโนมัติ)
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	หากเป็นจริงแสดงว่าขั้นตอนนี้เป็นขั้นตอนสุดท้าย
inputAttributes	Object	ตั้งค่าคุณลักษณะใด ๆ บนฟิลด์อินพุต (ประเภทแป้นพิมพ์, ตัวพิมพ์ใหญ่อัตโนมัติ, การทำให้สมบูรณ์อัตโนมัติ)
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	ถ้าเป็นจริงแสดงว่าส่วนประกอบนั้นจะถูกแทนที่ด้วยขั้นตอนถัดไป
waitAction	Boolean	false	หากเป็นจริงแสดงว่าคุณกำลังรอการดำเนินการบางอย่าง คุณต้องใช้ triggerNextStep prop ในส่วนประกอบของคุณเพื่อดำเนินการ
asMessage	Boolean	false	f true ระบุว่าส่วนประกอบจะแสดงเป็นขั้นตอนข้อความ
trigger	String / Number / Function	false	รหัสของขั้นตอนถัดไปที่จะถูกทริกเกอร์ หากฟังก์ชันจะได้รับพารามิเตอร์ ({ value, step })
delay	Number	false	ตั้งเวลาหน่วงในการแสดงส่วนประกอบ
end	Boolean	false	หากเป็นจริงแสดงว่าขั้นตอนนี้เป็นขั้นตอนสุดท้าย
inputAttributes	Object	ตั้งค่าคุณลักษณะใด ๆ บนฟิลด์อินพุต (ประเภทแป้นพิมพ์, ตัวพิมพ์ใหญ่อัตโนมัติ, การทำให้สมบูรณ์อัตโนมัติ)
metadata	Object	ชุดคู่คีย์-ค่าที่คุณสามารถแนบกับออบเจ็กต์ได้ สิ่งนี้มีประโยชน์สำหรับการจัดเก็บข้อมูลเพิ่มเติมเกี่ยวกับออบเจ็กต์ในรูปแบบที่มีโครงสร้าง

ตัวอย่าง:

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

ขั้นตอนการอัพเดต

ชื่อ	พิมพ์	ที่จำเป็น	คำอธิบาย
id	String / Number	true	รหัสขั้นตอน จำเป็นสำหรับขั้นตอนใดๆ
update	String / Number	true	รหัสของขั้นตอนถัดไปที่จะได้รับการอัปเดต
trigger	String / Number / Function	false	รหัสของขั้นตอนถัดไปที่จะถูกทริกเกอร์ หากฟังก์ชันจะได้รับพารามิเตอร์ ({ value, step })
inputAttributes	Object	ตั้งค่าคุณลักษณะใด ๆ บนฟิลด์อินพุต (ประเภทแป้นพิมพ์, ตัวพิมพ์ใหญ่อัตโนมัติ, การทำให้สมบูรณ์อัตโนมัติ)
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	ฟังก์ชันโทรกลับเพื่อทริกเกอร์ขั้นตอนถัดไปเมื่อแอตทริบิวต์ผู้ใช้เป็นจริง คุณสามารถเลือกส่งออบเจ็กต์ที่มีค่าที่จะตั้งค่าในขั้นตอนและขั้นตอนถัดไปที่จะถูกทริกเกอร์ได้
inputAttributes	Object	ตั้งค่าคุณลักษณะใด ๆ บนฟิลด์อินพุต (ประเภทแป้นพิมพ์, ตัวพิมพ์ใหญ่อัตโนมัติ, การทำให้สมบูรณ์อัตโนมัติ)
metadata	Object	ชุดคู่คีย์-ค่าที่คุณสามารถแนบกับออบเจ็กต์ได้ สิ่งนี้มีประโยชน์สำหรับการจัดเก็บข้อมูลเพิ่มเติมเกี่ยวกับออบเจ็กต์ในรูปแบบที่มีโครงสร้าง

วิธีการมีส่วนร่วม

โปรดตรวจสอบคู่มือการมีส่วนร่วม

ผู้เขียน

ลูคัส บาสเซ็ตติ

ดูรายชื่อผู้ร่วมให้ข้อมูลที่เข้าร่วมโครงการนี้ด้วย

บริจาค

หากคุณชอบโครงการนี้ สามารถบริจาคเพื่อสนับสนุนโครงการนี้ได้ ❤️

ใบอนุญาต

เอ็มไอที · ลูคัส บาสเซ็ตติ