react chat widget

react chat widget

Fitur

• UI pesan teks biasa
• Gaya cuplikan untuk tautan (saat ini hanya sebagai tanggapan)
• Dapat disesuaikan sepenuhnya
• Mudah digunakan

Instalasi

npm

npm install --save react-chat-widget

benang

yarn add react-chat-widget

Penggunaan

1- Tambahkan komponen Widget ke komponen root Anda

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  return (
    < div className = "App" >
      < Widget />
    </ div >
  ) ;
}

export default App ;

2- Satu-satunya prop wajib yang perlu Anda gunakan adalah handleNewUserMessage , yang akan menerima masukan dari pengguna.

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

3- Impor metode bagi Anda untuk menambahkan pesan di Widget. (Lihat pesan)

 import React from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this awesome chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
    addResponseMessage ( response ) ;
  } ;

  return (
    < div className = "App" >
      < Widget
        handleNewUserMessage = { handleNewUserMessage }
      />
    </ div >
  ) ;
}

export default App ;

4- Sesuaikan widget agar sesuai dengan desain aplikasi Anda! Anda dapat menambahkan kedua alat peraga untuk mengatur judul widget dan avatar yang akan digunakan. Tentu saja, jangan ragu untuk mengubah gaya widget di CSS

 import React , { useEffect } from 'react' ;
import { Widget , addResponseMessage } from 'react-chat-widget' ;

import 'react-chat-widget/lib/styles.css' ;

import logo from './logo.svg' ;

function App ( ) {
  useEffect ( ( ) => {
    addResponseMessage ( 'Welcome to this **awesome** chat!' ) ;
  } , [ ] ) ;

  const handleNewUserMessage = ( newMessage ) => {
    console . log ( `New message incoming! ${ newMessage } ` ) ;
    // Now send the message throught the backend API
  } ;

    return (
      < div className = "App" >
        < Widget
          handleNewUserMessage = { handleNewUserMessage }
          profileAvatar = { logo }
          title = "My new awesome title"
          subtitle = "And my cool subtitle"
        />
      </ div >
    ) ;
}

export default App ; 

API

Alat peraga

menopang	jenis	diperlukan	nilai bawaan	keterangan
handleNewUserMessage	(...args: apa saja[]) => apa saja	YA		Berfungsi untuk menangani input pengguna, akan menerima pesan teks lengkap saat dikirimkan
judul	rangkaian	TIDAK	'Selamat datang'	Judul widget
subjudul	rangkaian	TIDAK	'Ini subtitle obrolanmu'	Subjudul widget
pengirimPlaceHolder	rangkaian	TIDAK	'Ketikkan pesan...'	Placeholder input pesan
profilAvatar	rangkaian	TIDAK		Gambar profil yang akan diatur pada tanggapan
profilKlienAvatar	rangkaian	TIDAK		Gambar profil yang akan disetel pada pesan klien
judulAvatar	rangkaian	TIDAK		Gambar gambar yang akan ditampilkan di sebelah judul obrolan
tampilkanCloseButton	boolean	TIDAK	PALSU	Menampilkan atau menyembunyikan tombol tutup dalam mode layar penuh
mode layar penuh	boolean	TIDAK	PALSU	Izinkan penggunaan layar penuh dalam mode desktop penuh
fokus otomatis	boolean	TIDAK	BENAR	Fokus otomatis atau tidak masukan pengguna
peluncur	(handleToggle) => Tipe Elemen	TIDAK		Komponen Peluncur Khusus untuk digunakan sebagai pengganti default
menanganiQuickButtonClicked	(...args: apa saja[]) => apa saja	TIDAK		Berfungsi untuk menangani pengguna yang mengklik tombol cepat, akan menerima 'nilai' ketika diklik.
tampilkan Stempel Waktu	boolean	TIDAK	BENAR	Tampilkan cap waktu pada pesan
chatId	rangkaian	TIDAK	'rcw-obrolan-wadah'	ID wadah obrolan untuk a11y
menanganiToggle	(...args: apa saja[]) => apa saja	TIDAK	'rcw-obrolan-wadah'	Berfungsi untuk menangani saat widget diaktifkan, akan menerima status sakelar
peluncurOpenLabel	rangkaian	TIDAK	'Buka obrolan'	Nilai alt untuk lacher saat ditutup
peluncurTutupLabel	rangkaian	TIDAK	'Tutup obrolan'	Nilai alt untuk peluncur saat terbuka
peluncurOpenImg	rangkaian	TIDAK	''	url gambar lokal atau jarak jauh, jika tidak disediakan maka akan menampilkan gambar default
peluncurCloseImg	rangkaian	TIDAK	''	url gambar lokal atau jarak jauh, jika tidak disediakan maka akan menampilkan gambar default
kirimButtonAlt	rangkaian	TIDAK	'Mengirim'	Kirim tombol alt untuk tujuan a11y
handleTextInputChange	(acara) => apa saja	TIDAK		Prop yang memicu perubahan input
menanganiKirim	(acara) => apa saja	TIDAK		Prop yang terpicu saat pesan dikirimkan, digunakan untuk validasi khusus
dapat diubah ukurannya	boolean	TIDAK	PALSU	Prop yang memungkinkan untuk mengubah ukuran widget dengan menyeret batas kirinya
emoji	boolean	TIDAK	PALSU	aktifkan pemilih emoji
tampilkan lencana	boolean	TIDAK	BENAR	Prop yang memungkinkan untuk menampilkan atau menyembunyikan lencana pesan yang belum dibaca

Gaya

Untuk mengubah gaya yang Anda perlukan untuk dimiliki widget, cukup ganti kelas CSS yang membungkusnya di dalam wadah dan tambahkan gaya Anda sendiri ke dalamnya! Semua kelas diawali dengan rcw- sehingga kelas tersebut tidak menimpa kelas Anda yang lain jika Anda tidak memilikinya. Untuk menggantinya, Anda dapat melakukan, misalnya:

. rcw-conversation-container > . rcw-header {
  background-color : red;
}

. rcw-message > . rcw-response {
  background-color : black;
  color : white;
}

Dengan begitu, Anda dapat membiarkan JS tetap bersih dan mempertahankan gaya di dalam CSS.

Pesan

Mulai v3.0, pesan kini memiliki ID opsional yang dapat ditambahkan saat pembuatan. Jika ingin menambahkan pesan baru, Anda dapat menggunakan metode berikut:

• tambahkanResponseMessage

  • param:
    • teks: string (mendukung penurunan harga)
    • id: string (opsional)
  • Metode untuk menambahkan pesan baru yang ditulis sebagai respons terhadap masukan pengguna.

• tambahkanUserMessage

  • param:
    • teks: string (mendukung penurunan harga)
    • id: string (opsional)
  • Metode ini akan menambahkan pesan baru yang ditulis sebagai pengguna. Perlu diingat itu tidak akan memicu prop handleNewUserMessage()

• tambahkanLinkSnippet

  • param:
    • link
  • Metode untuk menambahkan cuplikan tautan. Anda perlu menyediakan metode ini dengan objek tautan, yang harus berbentuk:

     {
      title : 'My awesome link' ,
      link : 'https://github.com/Wolox/react-chat-widget' ,
      target : '_blank'
    }

  • Secara default, nilai target adalah _blank yang akan membuka link di jendela baru.

• renderKomponen Khusus

  • param:
    • komponen: Komponen yang akan dirender,
    • props: alat peraga yang dibutuhkan komponen,
    • showAvatar: boolean, nilai default: false; komponen akan dirender dengan avatar seperti pesan
  • Metode untuk merender komponen khusus di dalam wadah pesan. Dengan metode ini, Anda dapat menambahkan komponen apa pun yang Anda perlukan untuk dimiliki widget.

• setQuickButtons

  • param:
    • tombol: Array objek dengan label dan value kunci

Penurunan harga didukung untuk tanggapan dan pesan pengguna.

Perilaku widget

Anda juga dapat mengontrol tindakan tertentu pada widget:

• beralihWidget

  • params: Tidak ada params yang diharapkan
  • Cara ini adalah dengan mengganti widget sesuka hati tanpa perlu memicu event klik pada peluncur

• beralihInputDisabled

  • params: Tidak ada params yang diharapkan
  • Metode untuk mengaktifkan ketersediaan input pesan bagi pengguna untuk menulis

• beralihMsgLoader

  • Mengalihkan pemuat pesan yang ditampilkan sebagai gaya "mengetik...".

• hapus Pesan *

  • param:
    • count: pesan untuk dihapus dihitung dari yang terakhir hingga yang pertama
    • id: id pesan yang akan dihapus
  • Hapus pesan yang memiliki id yang sebelumnya Anda atur dengan addResponseMessage atau hapus berdasarkan posisi atau keduanya. Misalnya deleteMessages(2, 'myId') akan menghapus pesan yang memiliki id myId dan pesan sebelumnya.

• tandaiSemuaSebagaiBaca

  • Menandai semua pesan respons sebagai telah dibaca. Pesan pengguna tidak memiliki properti baca/belum dibaca.

• setBadgeCount

  • param:
    • hitungan: angka
  • Mulai v3.0, prop badge diubah untuk dikelola dari dalam Widget. Cara ini adalah mengatur nomor lencana secara manual.

Komponen widget

Peluncur Khusus

Anda dapat menggunakan komponen khusus untuk Peluncur jika Anda memerlukan komponen yang bukan bawaan, cukup gunakan penyangga peluncur :

 import React from 'react' ;
import { Widget } from 'react-chat-widget' ;

...

function MyApp ( ) {
  const getCustomLauncher = ( handleToggle ) =>
    < button onClick = { handleToggle } > This is my launcher component! </ button >

  return (
    < Widget
      . . .
      launcher = { handleToggle => getCustomLauncher ( handleToggle ) }
    />
  )
}

getCustomLauncher() adalah metode yang akan mengembalikan komponen Launcher seperti yang terlihat pada contoh. Secara default, fungsi yang diteruskan oleh prop tersebut, akan menerima parameter handleToggle yang merupakan metode yang akan mengaktifkan widget.

Tentang

Proyek ini dikelola oleh Martín Callegari dan ditulis oleh Wolox.