react chat window

react-chat-window

react-chat-window menyediakan jendela obrolan seperti interkom yang dapat dimasukkan dengan mudah dalam proyek apa pun secara gratis. Ini tidak menyediakan fasilitas pesan, hanya komponen tampilan.

Fitur

• Dapat disesuaikan
• Backend Agnostik
• Bebas

Demo

Daftar isi

• Instalasi
• Contoh
• Komponen

Instalasi

 $ npm install react-chat-window

Contoh

 import React , { Component } from 'react'
import { Launcher } from 'react-chat-window'

class Demo extends Component {

  constructor ( ) {
    super ( ) ;
    this . state = {
      messageList : [ ]
    } ;
  }

  _onMessageWasSent ( message ) {
    this . setState ( {
      messageList : [ ... this . state . messageList , message ]
    } )
  }

  _sendMessage ( text ) {
    if ( text . length > 0 ) {
      this . setState ( {
        messageList : [ ... this . state . messageList , {
          author : 'them' ,
          type : 'text' ,
          data : { text }
        } ]
      } )
    }
  }

  render ( ) {
    return ( < div >
      < Launcher
        agentProfile = { {
          teamName : 'react-chat-window' ,
          imageUrl : 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
        } }
        onMessageWasSent = { this . _onMessageWasSent . bind ( this ) }
        messageList = { this . state . messageList }
        showEmoji
      />
    </ div > )
  }
}

Untuk contoh lebih rinci, lihat folder demo.

Komponen

Peluncur

Launcher adalah satu-satunya komponen yang diperlukan untuk menggunakan react-cat-window. Ini akan bereaksi secara dinamis terhadap perubahan pesan. Semua pesan baru harus ditambahkan melalui perubahan alat peraga seperti yang ditunjukkan pada contoh.

Props peluncur:

menopang	jenis	diperlukan	keterangan
AgenProfile	obyek	Ya	Mewakili agen layanan pelanggan produk atau layanan Anda. Fields: ImageUrl (String), TeamName (String).
Handleclick	fungsi	Ya	Mencegat acara klik di peluncur. Tidak ada argumen yang dikirim ketika fungsi dipanggil.
isopen	Boolean	Ya	Paksa status terbuka/tutup jendela obrolan. Jika ini tidak diatur, itu akan terbuka dan tutup saat diklik.
Distist Messagel	[pesan]	Ya	Sejumlah objek pesan yang akan diterjemahkan sebagai percakapan.
bisu	Boolean	TIDAK	Jangan memainkan suara untuk pesan yang masuk. Default ke false .
newmessageScount	nomor	TIDAK	Jumlah pesan baru. Jika lebih besar dari 0, nomor ini akan ditampilkan dalam lencana pada peluncur. Default ke 0 .
Onfilessdelected	fungsi (daftar file)	TIDAK	Dipanggil setelah file telah dipilih dari dialog di jendela obrolan.
OnMessageSent	fungsi (pesan)	Ya	Dipanggil saat pesan dikirim, dengan objek pesan sebagai argumen.
Showemoji	Boolean	TIDAK	Apakah akan menunjukkan tombol emoji di bilah input. Default ke true .

Objek pesan

Objek pesan diberikan secara berbeda tergantung pada jenisnya. Saat ini, hanya jenis teks, file, dan emoji yang didukung. Setiap objek pesan memiliki bidang author yang dapat memiliki nilai 'saya' atau 'mereka'.

 {
  author : 'them' ,
  type : 'text' ,
  data : {
    text : 'some text'
  }
}

{
  author : 'me' ,
  type : 'emoji' ,
  data : {
    code : 'someCode'
  }
}


{
  author : 'me' ,
  type : 'file' ,
  data : {
    url : 'somefile.mp3' ,
    fileName : 'Any old name'
  }
}

Objek profil agen

Terlihat seperti ini:

 {
  imageUrl : 'https://somewhere.on/the_web.png' ,
  teamName : 'Da best'
}