react chat widget

react chat widget

سمات

• واجهة مستخدم للرسائل النصية البسيطة
• نمط المقتطف للروابط (فقط كردود في الوقت الحالي)
• قابلة للتخصيص بالكامل
• سهل الاستخدام

تثبيت

npm

npm install --save react-chat-widget

غزل

yarn add react-chat-widget

الاستخدام

1- قم بإضافة مكون القطعة إلى المكون الجذر الخاص بك

 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- الدعامة الوحيدة المطلوبة التي تحتاج إلى استخدامها هي handleNewUserMessage ، والتي ستتلقى الإدخال من المستخدم.

 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- قم باستيراد الطرق التي تمكنك من إضافة الرسائل في القطعة. (انظر الرسائل)

 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- تخصيص القطعة لتتناسب مع تصميم التطبيق الخاص بك! يمكنك إضافة كلا الخاصيتين لإدارة عنوان الأداة والصورة الرمزية التي ستستخدمها. بالطبع، لا تتردد في تغيير الأنماط التي ستحتوي عليها الأداة في 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 ; 

واجهة برمجة التطبيقات

الدعائم

دعم	يكتب	مطلوب	القيمة الافتراضية	وصف
HandleNewUserMessage	(...args: أي[]) => أي	نعم		وظيفة التعامل مع إدخال المستخدم، ستتلقى الرسالة النصية الكاملة عند إرسالها
عنوان	خيط	لا	'مرحباً'	عنوان القطعة
العنوان الفرعي	خيط	لا	"هذا هو العنوان الفرعي للدردشة الخاصة بك"	العنوان الفرعي للقطعة
senderPlaceHolder	خيط	لا	"اكتب رسالة..."	العنصر النائب لإدخال الرسالة
الصورة الرمزية	خيط	لا		صورة الملف الشخصي التي سيتم وضعها على الردود
الملف الشخصيClientAvatar	خيط	لا		صورة الملف الشخصي التي سيتم تعيينها على رسائل العميل
titleAvatar	خيط	لا		الصورة التي ستظهر بجوار عنوان الدردشة
showCloseButton	منطقية	لا	خطأ شنيع	إظهار أو إخفاء زر الإغلاق في وضع ملء الشاشة
وضع ملء الشاشة	منطقية	لا	خطأ شنيع	السماح باستخدام ملء الشاشة في وضع سطح المكتب الكامل
ضبط تلقائي للصورة	منطقية	لا	حقيقي	التركيز التلقائي أم لا إدخال المستخدم
قاذفة	(handleToggle) => ElementType	لا		مكون Launcher مخصص لاستخدامه بدلاً من المكون الافتراضي
تم النقر على HandleQuickButton	(...args: أي[]) => أي	لا		وظيفة التعامل مع المستخدم بالنقر فوق زر سريع، ستتلقى "القيمة" عند النقر فوقها.
showTimeStamp	منطقية	لا	حقيقي	إظهار الطابع الزمني على الرسائل
معرف الدردشة	خيط	لا	"حاوية دردشة rcw"	معرف حاوية الدردشة لـ a11y
HandleToggle	(...args: أي[]) => أي	لا	"حاوية دردشة rcw"	الوظيفة التي سيتم التعامل معها عند تبديل الأداة، ستتلقى حالة التبديل
LauncherOpenLabel	خيط	لا	"فتح الدردشة"	القيمة البديلة للقاذف عند إغلاقه
LauncherCloseLabel	خيط	لا	"إغلاق الدردشة"	القيمة البديلة للقاذف عند فتحه
LauncherOpenImg	خيط	لا	''	عنوان url للصورة المحلية أو البعيدة، إذا لم يتم توفيره فسوف يعرض الصورة الافتراضية
LauncherCloseImg	خيط	لا	''	عنوان url للصورة المحلية أو البعيدة، إذا لم يتم توفيره فسوف يعرض الصورة الافتراضية
sendButtonAlt	خيط	لا	'يرسل'	إرسال زر بديل لأغراض a11y
HandleTextInputChange	(الحدث) => أي	لا		الدعامة التي يتم تشغيلها عند تغيير الإدخال
HandleSubmit	(الحدث) => أي	لا		الدعامة التي يتم تشغيلها عند إرسال رسالة، وتُستخدم للتحقق المخصص
يمكن تغيير حجمه	منطقية	لا	خطأ شنيع	الدعامة التي تسمح بتغيير حجم الأداة عن طريق سحب الحد الأيسر لها
com.emojis	منطقية	لا	خطأ شنيع	تمكين منتقي الرموز التعبيرية
showBadge	منطقية	لا	حقيقي	دعامة تسمح بإظهار أو إخفاء شارة الرسالة غير المقروءة

الأنماط

لتغيير الأنماط التي تريد أن تحتوي عليها الأداة، ما عليك سوى تجاوز فئات CSS وتغليفها داخل الحاويات وإضافة النمط الخاص بك إليها! جميع الفئات مسبوقة بـ rcw- حتى لا تتجاوز فئاتك الأخرى في حالة عدم حصولك عليها. للتجاوز، يمكنك القيام، على سبيل المثال:

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

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

بهذه الطريقة، يمكنك ترك JS نظيفًا والاحتفاظ بالأنماط داخل CSS.

رسائل

اعتبارًا من الإصدار 3.0، أصبح للرسائل الآن معرف اختياري يمكن إضافته عند الإنشاء. إذا كنت تريد إضافة رسائل جديدة، يمكنك استخدام الطرق التالية:

• addResponseMessage

  • المعلمات:
    • النص: سلسلة (يدعم تخفيض السعر)
    • المعرف: سلسلة (اختياري)
  • طريقة لإضافة رسالة جديدة مكتوبة كرد على إدخال المستخدم.

• addUserMessage

  • المعلمات:
    • النص: سلسلة (يدعم تخفيض السعر)
    • المعرف: سلسلة (اختياري)
  • ستضيف هذه الطريقة رسالة جديدة مكتوبة كمستخدم. ضع في اعتبارك أنه لن يؤدي إلى تشغيل الدعامة HandleNewUserMessage()

• addLinkSnippet

  • المعلمات:
    • وصلة
  • طريقة إضافة مقتطف رابط. تحتاج إلى تزويد هذه الطريقة بكائن رابط، والذي يجب أن يكون على الشكل التالي:

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

  • افتراضيًا، القيمة target هي _blank والتي ستفتح الرابط في نافذة جديدة.

• renderCustomComponent

  • المعلمات:
    • المكون: المكون المطلوب تقديمه،
    • الدعائم: الدعائم احتياجات المكون،
    • showAvatar: منطقي، القيمة الافتراضية: false؛ سيتم عرض المكون مع الصورة الرمزية مثل الرسائل
  • طريقة لتقديم مكون مخصص داخل حاوية الرسائل. باستخدام هذه الطريقة، يمكنك إضافة أي مكون تريد أن تحتوي عليه الأداة.

• setQuickButtons

  • المعلمات:
    • الأزرار: مجموعة من الكائنات ذات label المفاتيح value

يتم دعم Markdown لكل من الردود ورسائل المستخدم.

سلوك القطعة

يمكنك أيضًا التحكم في إجراءات معينة للأداة:

• toggleWidget

  • المعلمات: لا توجد معلمات متوقعة
  • تهدف هذه الطريقة إلى تبديل الأداة حسب الرغبة دون الحاجة إلى تشغيل حدث النقر على المشغل

• toggleInputDisabled

  • المعلمات: لا توجد معلمات متوقعة
  • طريقة لتبديل مدى إتاحة إدخال الرسالة للمستخدم للكتابة عليها

• toggleMsgLoader

  • لتبديل أداة تحميل الرسائل التي تظهر كنمط "كتابة...".

• حذف الرسائل *

  • المعلمات:
    • العد: رسائل لحذف العد من الأخير إلى الأول
    • المعرف: معرف الرسالة المراد حذفها
  • احذف الرسائل التي تحتوي على معرف قمت بتعيينه مسبقًا باستخدام addResponseMessage أو احذفه بناءً على الموضع أو كليهما. على سبيل المثال، سيؤدي deleteMessages(2, 'myId') إلى حذف الرسالة التي تحتوي على المعرف myId والرسالة السابقة.

• MarkAllAsRead

  • وضع علامة على كافة رسائل الاستجابة كمقروءة. لا تحتوي رسائل المستخدم على خاصية القراءة/غير المقروءة.

• setBadgeCount

  • المعلمات:
    • عدد : عدد
  • اعتبارًا من الإصدار 3.0، سيتم تغيير خاصية badge لتتم إدارتها من داخل الأداة. تقوم هذه الطريقة بتعيين رقم الشارة يدويًا.

مكونات القطعة

قاذفة مخصصة

يمكنك استخدام مكون مخصص للمشغل إذا كنت بحاجة إلى مكون غير افتراضي، فما عليك سوى استخدام خاصية المشغل :

 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() هي طريقة تقوم بإرجاع مكون Launcher كما هو موضح في المثال. افتراضيًا، ستتلقى الوظيفة التي تم تمريرها بواسطة هذا الدعامة معلمة handleToggle وهي الطريقة التي ستقوم بتبديل الأداة.

عن

تتم صيانة هذا المشروع بواسطة Martín Callegari وقد كتب بواسطة Wolox.