Unduh chat ui react - Unduh Kode Sumber Obrolan chat ui react

chat ui react

Kode Sumber AI

1.0.0

Unduh

obrolan-ui-react

Chat-Ui-React adalah paket NPM untuk membangun UIS web percakapan. Paket ini menawarkan yang berikut:

Komponen Bereaksi
- Pesan obrolan
- Formulir input pesan
Kelas yang mengontrol tampilan komponen

Anda dapat memasukkan ini ke dalam obrolan online dan chatbots Anda.

Saat ini, komponen menggunakan bahan kerangka kerja UI React-UI. Jika Anda menginginkan komponen selain material-UI, Anda dapat menggantinya dengan komponen asli dan menggunakannya.

Demo

Lihat situs demo.

Contoh

Lihat example Direktori.

Echo-Bot: Chatbot yang menggemakan input pengguna.
CDN: Cara mudah untuk memulai dengan cepat.

Instalasi

Node.js

Dengan NPM:

npm install chat-ui-react react react-dom @material-ui/core

Dengan benang:

yarn add chat-ui-react react react-dom @material-ui/core

CDN

 < script crossorigin =" anonymous " src =" https://unpkg.com/react@16/umd/react.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/react-dom@16/umd/react-dom.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/@material-ui/core@4/umd/material-ui.development.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/chat-ui-react@latest/dist/browser/chat-ui-react.umd.polyfill.js " > </ script >
< script crossorigin =" anonymous " src =" https://unpkg.com/@babel/standalone@7/babel.min.js " > </ script >

Penggunaan

Paket ini terdiri dari komponen MuiChat yang menampilkan kelas obrolan dan ChatController yang mengontrol tampilan obrolan. Gambar di bawah ini menunjukkan setiap hubungan.

 +------------+           +------------------+           +-----------+
|            |   Call    |                  |   Call    |           |
|            |           |                  |           |           |
|  Your App  |  +----->  |  ChatController  |  +----->  |  MuiChat  |
|            |           |                  |           |           |
|            |           |                  |           |           |
+------------+           +------------------+           +-----------+

Struktur ini memungkinkan kita untuk hanya fokus pada meneruskan tampilan obrolan ke ChatController . Anda tidak perlu khawatir tentang kontrol tampilan komponen.

Jika Anda tidak menyukai apa yang Anda lihat, Anda dapat mengganti MuiChat dengan komponen lain. Tidak ada perubahan dalam aplikasi karena penggantian.

Berikut adalah contoh sederhana untuk memahami cara menggunakannya.

 function App ( ) : React . ReactElement {
  const [ chatCtl ] = React . useState ( new ChatController ( ) ) ;

  React . useMemo ( async ( ) => {
    // Chat content is displayed using ChatController
    await chatCtl . addMessage ( {
      type : 'text' ,
      content : `Hello, What's your name.` ,
      self : false ,
    } ) ;
    const name = await chatCtl . setActionRequest ( { type : 'text' } ) ;
  } , [ chatCtl ] ) ;

  // Only one component used for display
  return < MuiChat chatController = { chatCtl } /> ;
}

Berikut ini, kami akan menjelaskan cara menggunakan ChatController .

Pesan

Untuk menampilkan pesan obrolan, gunakan metode addMessage . Dalam opsi self , tentukan apakah itu pesan Anda sendiri atau pesan orang lain.

 await chatCtl . addMessage ( {
  type : 'text' ,
  content : `Hello, What's your name.` ,
  self : false ,
} ) ;

Tindakan

Gunakan metode setActionRequest untuk meminta pengguna untuk pesan.

Jumlah tindakan

Ada dua cara untuk meminta suatu tindakan: tindakan satu kali dan selalu meminta tindakan.

Aksi satu kali

Tentukan false untuk opsi always untuk meminta tindakan satu kali dari pengguna. Nilai pengembalian metode ini adalah Promise yang mengembalikan input pengguna.

 const response = await chatCtl . setActionRequest ( {
  type : 'text' ,
  always : false ,
} ) ;
console . log ( response . value ) ;

Selalu bertindak

Untuk selalu meminta tindakan dari pengguna, tentukan true dalam opsi always . Tentukan fungsi callback yang menerima input karena input beberapa kali oleh pengguna. Untuk membatalkan permintaan input dari pengguna, hubungi metode cancelActionRequest .

 chatCtl . setActionRequest (
  { type : 'text' , always : true } ,
  ( response ) => {
    console . log ( response . value ) ;
  }
) ;
chatCtl . cancelActionRequest ( ) ;

Tipe Aksi

Ada beberapa jenis tindakan seperti teks dan seleksi.

Teks

Tindakan ini memasukkan string.

Tentukan text untuk type . Nilai pengembalian metode ini adalah pesan yang dimasukkan oleh pengguna.

 const response = await chatCtl . setActionRequest ( { type : 'text' } ) ;
console . log ( response . value ) ;

Seleksi tunggal

Tindakan ini memilih satu dari opsi.

Tentukan select untuk type . Tentukan opsi dalam options . value digunakan untuk atribut dan text HTML digunakan untuk tampilan layar. Nilai pengembalian metode ini adalah elemen options yang dipilih oleh pengguna.

 const response = await chatCtl . setActionRequest ( {
  type : 'select' ,
  options : [
    {
      value : 'a' ,
      text : 'A' ,
    } ,
    {
      value : 'b' ,
      text : 'B' ,
    } ,
  ] ,
} ) ;
console . log ( response . option ) ;
// If A is selected
// { value: 'a', text: 'A' }

Beberapa pilihan

Tindakan ini memilih beberapa opsi.

Tentukan multi-select untuk type . Tentukan opsi dalam options . value digunakan untuk atribut dan text HTML digunakan untuk tampilan. Nilai pengembalian metode ini adalah options yang dipilih.

 const response = await chatCtl . setActionRequest ( {
  type : 'multi-select' ,
  options : [
    {
      value : 'a' ,
      text : 'A' ,
    } ,
    {
      value : 'b' ,
      text : 'B' ,
    } ,
  ] ,
} ) ;
console . log ( response . options ) ;
//  If A and B are selected
// [{ value: 'a', text: 'A' }, { value: 'b', text: 'B' }]

Mengajukan

Tindakan ini memasukkan file.

Tentukan file untuk type . Anda dapat menentukan accept dan multiple atribut dari tag input . Nilai pengembalian metode ini adalah array file yang dimasukkan oleh pengguna.

 const response = await chatCtl . setActionRequest ( {
  type : 'file' ,
  accept : 'image/*' ,
  multiple : true ,
} ) ;
console . log ( response . files ) ;

Audio

Tindakan ini memasukkan audio.

Tentukan audio untuk type . Nilai pengembalian metode ini adalah Blob input audio oleh pengguna. Jika input audio gagal, Promise penolakan yang Reject dikembalikan.

 try {
  const response = await chatCtl . setActionRequest ( {
    type : 'audio' ,
  } ) ;
  console . log ( response . audio ) ;
} catch ( e ) {
  console . log ( e ) ;
}

Kebiasaan

Tindakan ini menggunakan komponen khusus Anda sebagai input. Tentukan type custom . Tentukan komponen Anda dalam Component .

Komponen khusus mengikuti konvensi React untuk membuat formulir input seperti biasa. Ini menerima chatController dan actionRequest sebagai properti. Ini secara otomatis ditetapkan oleh obrolan-ui-react. Kemudian, atur input yang diterima dari pengguna ke metode setActionResponse dari kelas ChatController . Ini dapat diterima dengan aplikasi sebagai nilai pengembalian setActionRequest .

 function GoodInput ( {
  chatController ,
  actionRequest ,
} : {
  chatController : ChatController ;
  actionRequest : ActionRequest ;
} ) {
  const chatCtl = chatController ;

  const setResponse = React . useCallback ( ( ) : void => {
    const res = { type : 'custom' , value : 'Good!' } ;
    chatCtl . setActionResponse ( actionRequest , res ) ;
  } , [ actionRequest , chatCtl ] ) ;

  return (
    < Button
      type = "button"
      onClick = { setResponse }
      variant = "contained"
      color = "primary"
    >
      Good!
    </ Button >
  ) ;
}

const custom = await chatCtl . setActionRequest ( {
  type : 'custom' ,
  Component : GoodInput ,
} ) ;
console . log ( custom . value ) ;