الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

رد الفعل-window

يوفر react-chat-window نافذة دردشة تشبه الاتصالات الداخلية يمكن تضمينها بسهولة في أي مشروع مجانًا. لا يوفر أي مرافق للرسائل ، فقط مكون العرض.


سمات

  • قابلة للتخصيص
  • الواجهة الخلفية اللاأدرية
  • حر

العرض التوضيحي

جدول المحتويات

  • تثبيت
  • مثال
  • عناصر

تثبيت 

 $ npm install react-chat-window

مثال 

 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 > )
  }
}

لمزيد من الأمثلة التفصيلية ، انظر المجلد التجريبي.

عناصر

قاذفة

Launcher هو المكون الوحيد اللازم لاستخدام React-Chat-Window. سوف يتفاعل ديناميكيًا مع التغييرات في الرسائل. يجب إضافة جميع الرسائل الجديدة من خلال تغيير في الدعائم كما هو موضح في المثال.

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

دعم يكتب مطلوب وصف
AgentProfile هدف نعم يمثل وكيل خدمة العملاء أو الخدمة الخاصة بك. الحقول: ImageUrl (سلسلة) ، اسم TeamName (سلسلة).
اليد وظيفة نعم اعتراض حدث النقر على المشغل. لم يتم إرسال حجة عند استدعاء الوظيفة.
isopen منطقية نعم إجبار الحالة المفتوحة/الإغلاق على نافذة الدردشة. إذا لم يتم تعيين هذا ، فسيتم فتحه وإغلاقه عند النقر عليه.
Messagelist [رسالة] نعم مجموعة من كائنات الرسائل التي سيتم تقديمها كمحادثة.
صامت منطقية لا لا تلعب الصوت للرسائل الواردة. الإعدادات الافتراضية إلى false .
NewMessagesCount رقم لا عدد الرسائل الجديدة. إذا كان أكبر من 0 ، فسيتم عرض هذا الرقم في شارة على المشغل. الافتراضات إلى 0 .
onfilessected وظيفة (Filelist) لا تم تحديد ما بعد الملف من الحوار في نافذة الدردشة.
onMessageWassent وظيفة (رسالة) نعم يسمى عند إرسال رسالة ، مع كائن رسالة كوسيطة.
Showemoji منطقية لا سواء لإظهار زر الرموز التعبيرية في شريط الإدخال أم لا. الافتراضات إلى true .

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

يتم تقديم كائنات الرسائل بشكل مختلف اعتمادًا على نوعها. حاليًا ، يتم دعم أنواع النص والملف والرموز التعبيرية فقط. يحتوي كل كائن رسالة على حقل author يمكن أن يكون له قيمة "ME" أو "لهم". 

 {
  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'
  }
}

كائنات ملف تعريف الوكيل

تبدو هكذا: 

 {
  imageUrl : 'https://somewhere.on/the_web.png' ,
  teamName : 'Da best'
}
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل