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 هو المكون الوحيد المطلوب لاستخدام الدردشة التفاعلية الجميلة. سوف يتفاعل ديناميكيًا مع التغييرات في الرسائل. يجب إضافة جميع الرسائل الجديدة عبر تغيير في الدعائم كما هو موضح في المثال.

الدعائم قاذفة:

دعم	يكتب	وصف
* ملف تعريف الوكيل	هدف	يمثل وكيل خدمة العملاء الخاص بمنتجك أو خدمتك. الحقول: اسم الفريق، imageUrl
onMessageWasSent	وظيفة (رسالة)	يتم استدعاؤه عند إرسال رسالة مع كائن رسالة كوسيطة.
messageList	[رسالة]	مجموعة من كائنات الرسالة التي سيتم عرضها كمحادثة.
com.showEmoji	منطقي	رمز منطقي يشير إلى ما إذا كان سيتم إظهار زر الرموز التعبيرية أم لا
showFile	منطقي	منطقي يشير إلى ما إذا كان سيتم إظهار زر منتقي الملفات أم لا
onKeyPress	func	دالة (userInput) => console.log(userInput) تُستخدم للقيام بشيء ما بإدخال المستخدم. تم استدعاء الوظيفة ورفضها عند 300 مللي ثانية
onDelete	func	دالة (msg) => console.log(msg) تستخدم لحذف رسالة مرسلة. إذا تم تعيين هذه الدعائم، فسيتم عرض زر الحذف في الزاوية اليمنى العليا لكل رسالة يرسلها المستخدم إلى الشريك. يمكنك تعيين أي خاصية على كائن الرسالة (خاصية id على سبيل المثال) ثم استخدام هذه الخاصية لاستدعاء بعض واجهات برمجة التطبيقات الخلفية لحذف الرسالة.

كائنات الرسالة

يتم عرض كائنات الرسالة بشكل مختلف اعتمادًا على نوعها. حاليًا، يتم دعم أنواع النصوص والرموز التعبيرية فقط. يحتوي كل كائن رسالة على حقل 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'
  }
}