react native chatbot

Bereaksi Chatbot Asli

Komponen chatbot asli yang bereaksi untuk membuat obrolan percakapan. Berdasarkan reaksi-simple-chatbot.

Memulai

npm install react-native-chatbot --save

Penggunaan

 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 } / > 

Dokumentasi

Properti

Nama	Jenis	Bawaan	Keterangan
avatarStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen avatar
avatarWrapperStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen sekitar avatar
botAvatar	PropTypes.string	img	Sumber gambar bot
botBubbleColor	PropTypes.string	#6E48AA	Warna gelembung bot
botDelay	PropTypes.number	1000	Waktu tunda pesan bot
botFontColor	PropTypes.string	#fff	Warna font bot
bubbleStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen gelembung
optionStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti wadah opsi
optionElementStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen opsi
optionFontColor	PropTypes.string		Pilihan warna font
optionBubbleColor	PropTypes.string		Pilihan warna gelembung
className	PropTypes.string		Tambahkan nama kelas ke elemen root
contentStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen gulir
customDelay	PropTypes.number	1000	Waktu tunda pesan khusus
customStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen langkah kustom
footerStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen footer
handleEnd({ renderedSteps, steps, values })	PropTypes.func		Fungsi panggilan balik ketika obrolan berakhir
headerComponent	PropTypes.element		Komponen header untuk chatbot
hideUserAvatar	PropTypes.bool	false	Jika benar, avatar pengguna akan disembunyikan di semua langkah
inputStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen masukan
keyboardVerticalOffset	PropTypes.number	ios ? 44 : 0	Offset vertikal tampilan keyboard. Periksa keyboardVertikalOffset
placeholder	PropTypes.string	Type the message ...	Placeholder masukan Chatbot
steps	PropTypes.array		Langkah-langkah chatbot untuk ditampilkan
style	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen tombol kirim
submitButtonStyle	PropTypes.object		Objek gaya yang digunakan untuk mengganti elemen tombol
submitButtonContent	PropTypes.string atau PropTypes.element	SEND	String atau objek yang digunakan untuk mengganti konten tombol
userAvatar	PropTypes.string	img	Sumber gambar pengguna
userBubbleStyle	PropTypes.string	img	Objek gaya yang digunakan untuk mengganti elemen gelembung pengguna
userBubbleColor	PropTypes.string	#fff	Warna gelembung pengguna
userDelay	PropTypes.number	1000	Waktu tunda pesan pengguna
userFontColor	PropTypes.string	#4a4a4a	Warna font pengguna
scrollViewProps	PropTypes.object	#4a4a4a	Gunakan untuk mengganti props tampilan gulir

Tangga

Langkah Teks

Nama	Jenis	Diperlukan	Keterangan
id	String / Number	true	Id langkah. Diperlukan untuk setiap langkah
message	String / Function	true	Pesan teks. Jika berfungsi, ia akan menerima parameter ({ previousValue, Steps }).
trigger	String / Number / Function	false	Id langkah selanjutnya yang akan dipicu. Jika berfungsi, ia akan menerima parameter ({ nilai, langkah }).
avatar	String	false	avatar yang akan ditampilkan pada langkah ini. Catatan: langkah ini harus menjadi langkah munculnya avatar
delay	Number	false	atur waktu tunda agar pesan ditampilkan
end	Boolean	false	jika benar tunjukkan bahwa langkah ini adalah yang terakhir
inputAttributes	Object	Tetapkan atribut apa pun pada bidang input (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Kumpulan pasangan nilai kunci yang dapat Anda lampirkan ke objek. Ini berguna untuk menyimpan informasi tambahan tentang objek dalam format terstruktur

Contoh:

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

Langkah Pengguna

Nama	Jenis	Diperlukan	Keterangan
id	String / Number	true	Id langkah. Diperlukan untuk setiap langkah
user	Boolean	true	jika benar menunjukkan bahwa Anda menunggu tindakan tipe pengguna
trigger	String / Number / Function	false	Id langkah selanjutnya yang akan dipicu. Jika berfungsi, ia akan menerima parameter ({ nilai, langkah }).
validator	String / Number	false	jika atribut pengguna benar, Anda dapat meneruskan fungsi validator untuk memvalidasi teks yang diketik oleh pengguna
end	Boolean	false	jika benar tunjukkan bahwa langkah ini adalah yang terakhir
inputAttributes	Object	Tetapkan atribut apa pun pada bidang input (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Kumpulan pasangan nilai kunci yang dapat Anda lampirkan ke objek. Ini berguna untuk menyimpan informasi tambahan tentang objek dalam format terstruktur

Contoh:

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

Langkah Pilihan

Nama	Jenis	Diperlukan	Keterangan
id	String / Number	true	Id langkah. Diperlukan untuk setiap langkah
options	Array	true	Array opsi dengan properti { label, value, trigger }
end	Boolean	false	jika benar tunjukkan bahwa langkah ini adalah yang terakhir
inputAttributes	Object	Tetapkan atribut apa pun pada bidang input (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Kumpulan pasangan nilai kunci yang dapat Anda lampirkan ke objek. Ini berguna untuk menyimpan informasi tambahan tentang objek dalam format terstruktur

Contoh:

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

Langkah Kustom

Nama	Jenis	Diperlukan	Keterangan
id	String / Number	true	Id langkah. Diperlukan untuk setiap langkah
component	Component	true	Komponen Reaksi Kustom
replace	Boolean	false	jika benar menunjukkan bahwa komponen tersebut akan diganti pada langkah berikutnya
waitAction	Boolean	false	jika benar, tunjukkan bahwa Anda menunggu tindakan. Anda harus menggunakan prop triggerNextStep di komponen Anda untuk menjalankan tindakan
asMessage	Boolean	false	f true menunjukkan bahwa komponen akan ditampilkan sebagai langkah teks
trigger	String / Number / Function	false	Id langkah selanjutnya yang akan dipicu. Jika berfungsi, ia akan menerima parameter ({ nilai, langkah }).
delay	Number	false	atur waktu tunda agar komponen ditampilkan
end	Boolean	false	jika benar tunjukkan bahwa langkah ini adalah yang terakhir
inputAttributes	Object	Tetapkan atribut apa pun pada bidang input (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Kumpulan pasangan nilai kunci yang dapat Anda lampirkan ke objek. Ini berguna untuk menyimpan informasi tambahan tentang objek dalam format terstruktur

Contoh:

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

Langkah Pembaruan

Nama	Jenis	Diperlukan	Keterangan
id	String / Number	true	Id langkah. Diperlukan untuk setiap langkah
update	String / Number	true	Id langkah selanjutnya yang akan diperbarui
trigger	String / Number / Function	false	Id langkah selanjutnya yang akan dipicu. Jika berfungsi, ia akan menerima parameter ({ nilai, langkah }).
inputAttributes	Object	Tetapkan atribut apa pun pada bidang input (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Kumpulan pasangan nilai kunci yang dapat Anda lampirkan ke objek. Ini berguna untuk menyimpan informasi tambahan tentang objek dalam format terstruktur

Contoh:

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

Komponen Khusus

Saat Anda mendeklarasikan langkah khusus, Anda perlu menunjukkan Komponen React khusus yang akan dirender dalam obrolan. Komponen khusus ini akan menerima properti berikut.

Nama	Jenis	Keterangan
previousStep	PropTypes.object	Langkah sebelumnya dirender
step	PropTypes.object	Langkah saat ini dirender
steps	PropTypes.object	Semua langkah diberikan
triggerNextStep({ value, trigger })	PropTypes.func	Fungsi panggilan balik untuk memicu langkah berikutnya ketika atribut pengguna benar. Secara opsional, Anda dapat meneruskan objek dengan nilai yang akan ditetapkan pada langkah tersebut dan langkah berikutnya akan dipicu
inputAttributes	Object	Tetapkan atribut apa pun pada bidang input (keyboardType, autoCapitalize, autoComplete)
metadata	Object	Kumpulan pasangan nilai kunci yang dapat Anda lampirkan ke objek. Ini berguna untuk menyimpan informasi tambahan tentang objek dalam format terstruktur

Bagaimana Berkontribusi

Silakan periksa panduan berkontribusi

Penulis

Lucas Bassetti

Lihat juga daftar kontributor yang berpartisipasi dalam proyek ini.

Menyumbangkan

Jika Anda menyukai proyek ini, Anda dapat berdonasi untuk mendukungnya ❤️

Lisensi

MIT · Lucas Bassetti