react beautiful chat

โต้ตอบสวยงามแชท

react-beautiful-chat มีหน้าต่างแชทเหมือนอินเตอร์คอมที่สามารถรวมเข้ากับโปรเจ็กต์ใดก็ได้ฟรี ไม่มีสิ่งอำนวยความสะดวกในการส่งข้อความ มีเพียงองค์ประกอบมุมมองเท่านั้น

react-beautiful-chat เป็นเวอร์ชันปรับปรุงของ react-chat-window (ซึ่งคุณสามารถหาได้ที่นี่)

คุณสมบัติ

• ปรับแต่งได้
• ผู้ไม่เชื่อเรื่องพระเจ้าแบ็กเอนด์
• ฟรี

สาธิต

สารบัญ

• การติดตั้ง
• ตัวอย่าง
• ส่วนประกอบ

การติดตั้ง

 $ npm install react-beautiful-chat

ตัวอย่าง

 import React , { Component } from 'react'
import { render } from 'react-dom'
import { Launcher } from '../../src'

class Demo extends Component {

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

  _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-beautiful-chat' ,
          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 > )
  }
}

สำหรับตัวอย่างโดยละเอียดเพิ่มเติม โปรดดูโฟลเดอร์สาธิต

ส่วนประกอบ

ตัวเปิด

Launcher เป็นองค์ประกอบเดียวที่จำเป็นในการใช้ react-beautiful-chat มันจะตอบสนองต่อการเปลี่ยนแปลงในข้อความแบบไดนามิก ต้องเพิ่มข้อความใหม่ทั้งหมดผ่านการเปลี่ยนแปลงอุปกรณ์ประกอบฉากตามที่แสดงในตัวอย่าง

อุปกรณ์ประกอบฉากตัวเปิด:

ข้อเสนอ	พิมพ์	คำอธิบาย
*โปรไฟล์ตัวแทน	วัตถุ	หมายถึงตัวแทนฝ่ายบริการลูกค้าของผลิตภัณฑ์หรือบริการของคุณ ฟิลด์: ชื่อทีม, imageUrl
onMessageWasSent	ฟังก์ชั่น(ข้อความ)	เรียกว่าเมื่อข้อความส่งข้อความโดยมีวัตถุข้อความเป็นอาร์กิวเมนต์
รายการข้อความ	[ข้อความ]	อาร์เรย์ของวัตถุข้อความที่จะแสดงผลเป็นการสนทนา
แสดงอีโมจิ	บูล	บูลที่ระบุว่าจะแสดงปุ่มอีโมจิหรือไม่
showFile	บูล	บูลที่ระบุว่าจะแสดงปุ่มเลือกไฟล์หรือไม่
onKeyPress	ฟังก์ชั่น	ฟังก์ชัน (userInput) => console.log(userInput) ใช้ทำอะไรบางอย่างกับอินพุตของผู้ใช้ ฟังก์ชั่นถูกเรียกใช้ debounced ที่ 300ms
บนลบ	ฟังก์ชั่น	ฟังก์ชั่น (msg) => console.log(msg) ใช้ในการลบข้อความที่ส่ง หากตั้งค่าอุปกรณ์ประกอบฉากนี้ ปุ่มลบจะแสดงที่มุมขวาบนของแต่ละข้อความที่ผู้ใช้ส่งถึงพันธมิตร คุณสามารถตั้งค่าคุณสมบัติใดๆ บนออบเจ็กต์ข้อความ (เช่น คุณสมบัติ id ) จากนั้นใช้คุณสมบัตินี้เพื่อเรียก API แบ็กเอนด์บางส่วนเพื่อลบข้อความ

วัตถุข้อความ

ออบเจ็กต์ข้อความจะแสดงผลแตกต่างกันไปขึ้นอยู่กับประเภทของออบเจ็กต์ ปัจจุบันรองรับเฉพาะข้อความและอีโมจิเท่านั้น แต่ละวัตถุข้อความมีช่อง author ซึ่งสามารถมีค่า 'ฉัน' หรือ 'พวกเขา'

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

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

{
  author : 'me' ,
  type : 'file' ,
  data : {
    name : 'file.mp3' ,
    url : 'https:123.rf/file.mp3'
  }
}