تنزيل rasa webchat - rasa webchat Source Code تنزيل

rasa webchat

كود الذكاء الاصطناعي

css firefox bug

تنزيل

Rasa Webchat

أداة الدردشة لنشر المساعدين الظاهري المصنوع من RASA أو Botfront على أي موقع ويب.

️ الإصدار 1.0.1 من RASA WebChat مصنوع للعمل مع الإصدار 2.3.x و 2.4.x من RASA. استخدم 1.0.0 لإصدارات RASA الأخرى.

سمات

الرسائل النصية
ردود سريعة
الصور
كارويلز
دعم تخفيض
جلسات مستمرة
مؤشرات الكتابة
تأخير ذكي بين الرسائل
سهل الاستيراد في علامة نصية أو كمكون رد فعل

العرض الترويجي: تحقق من مشروعنا المفتوح المصدر البارد الآخر

الاستخدام

في علامة `<script>`

في <body/> :

 < script > ! ( function ( ) {
  let e = document . createElement ( "script" ) ,
    t = document . head || document . getElementsByTagName ( "head" ) [ 0 ] ;
  ( e . src =
    "https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js" ) ,
    // Replace 1.x.x with the version that you want
    ( e . async = ! 0 ) ,
    ( e . onload = ( ) => {
      window . WebChat . default (
        {
          customData : { language : "en" } ,
          socketUrl : "https://bf-botfront.development.agents.botfront.cloud" ,
          // add other props here
        } ,
        null
      ) ;
    } ) ,
    t . insertBefore ( e , t . firstChild ) ;
} ) ( ) ;
</ script >

️ نوصي بإضافة علامة الإصدار لمنع كسر التغييرات من الإصدارات الرئيسية ، على سبيل المثال للإصدار 1.0.0 https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js ، ومع ذلك لن يعمل مع الإصدارات أدناه 1.0.0. إذا لم تحدد إصدارًا ، فسوف تحصل على أحدث إصدار متاح من Rasa-Webchat.

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

كمكون رد فعل

قم بتثبيت حزمة NPM:

npm install rasa-webchat

ثم:

 import Widget from 'rasa-webchat' ;

function CustomWidget = ( ) => {
  return (
    < Widget
      initPayload = { "/get_started" }
      socketUrl = { "http://localhost:5500" }
      socketPath = { "/socket.io/" }
      customData = { { "language" : "en" } } // arbitrary custom data. Stay minimal as this will be added to the socket
      title = { "Title" }
    />
  )
}

تأكد من تعيين Proped embedded إلى true إذا كنت لا ترغب في رؤية المشغل.

حدود

الدعامة / البارم	القيمة الافتراضية	وصف
`initPayload`	`null`	تم إرسال الحمولة النافعة إلى RASA عند بدء المحادثة
`socketUrl`	`null`	عنوان URL المقبس
`socketPath`	`null`	أغلق نافذة الدردشة
`customData`	`null`	كائن تعسفي أرسل مع المقبس. إذا كنت تستخدم مع botfront ، يجب أن تتضمن اللغة (على سبيل المثال `{"language": "en"}` )
`docViewer`	`false`	إذا قمت بإضافة هذا الدعامة إلى المكون أو إلى البرنامج النصي init ، `docViewer=true` ، فسيتعامل هذا على الروابط في الرسائل المستلمة كروابط إلى مستند `https://docs.google.com/viewer` `.pdf .doc .xlsx` etc.
`title`	`'Welcome"`	العنوان الموضح في رأس القطعة
`subtitle`	`null`	العنوان الفرعي يظهر تحت العنوان في رأس القطعة
`inputTextFieldHint`	`"Type a message"`	حقل إدخال رسالة المستخدم
`hideWhenNotConnected`	`true`	إذا كان `true` فستختبئ عنصر واجهة المستخدم عند فقدان التوصيل بالمقبس
`connectOn`	`"mount"`	يتيح لك هذا الدعامة اختيار متى ستحاول القطعة الاتصال بالخادم. بشكل افتراضي ، يحاول الاتصال بمجرد تصاعده. إذا قمت بتحديد `connectOn='open'` ، فسيحاول الاتصال فقط عند فتح عنصر واجهة المستخدم. يمكن أن تأخذ فقط القيم `mount` `open` .
`onSocketEvent`	`null`	استدعاء رمز مخصص في حدث مقبس معين
`embedded`	`false`	قم بالتعيين إلى `true` إذا كنت ترغب في تضمين صفحة الويب. سيتم فتح القطعة دائمًا وسيتم تشغيل `initPayload` على الفور
`showFullScreenButton`	`false`	إظهار تبديل الشاشة
`displayUnreadCount`	`false`	مسار إلى صورة معروضة على المشغل عند إغلاق القطعة
`showMessageDate`	`false`	عرض تاريخ الرسالة. يمكن تجاوزه بوظيفة: `(timestamp, message) => return 'my custom date'`
`customMessageDelay`	انظر أدناه	هذه الدعامة هي وظيفة ، وتأخذ الوظيفة سلسلة الرسائل كوسيطة. سيتم استدعاء الوظيفة المحددة في كل مرة يتم استلام رسالة وسيتم استخدام القيمة التي تم إرجاعها كتأخير ميلي ثانية قبل عرض رسالة جديدة.
`params`	انظر أدناه	يستخدم بشكل أساسي لتخصيص حجم الصورة ، ويستخدم أيضًا لتغيير خيارات التخزين.
`storage`	`"local"`	️ هذا ليس دعامة ، يجب تمريره داخل كائن Params أعلاه. يحدد موقع تخزين حالة المحادثة في المتصفح. تحدد `"session"` الحالة التي سيتم تخزينها في تخزين الجلسة. يستمر تخزين الجلسة عند إعادة تحميل الصفحة ، ويتم مسحه بعد إغلاق المتصفح أو علامة التبويب ، أو عند استدعاء `sessionStorage.clear()` . يعرّف `"local"` الدولة التي سيتم تخزينها في Stoage المحلي. يستمر التخزين المحلي بعد إغلاق المتصفح ، ويتم مسحه عند مسح ملفات تعريف الارتباط للمتصفح ، أو عند استدعاء `localStorage.clear()` .
`customComponent`	`null`	مكون مخصص لاستخدامه مع الاستجابات المخصصة. على سبيل المثال: `customComponent={ (messageData) => (<div>Custom React component</div>)}` . يرجى ملاحظة أنه لا يمكن استخدام هذا إلا إذا اتصلت بـ WebChat من تطبيق React حيث لا يمكنك كتابة مكون في Javscript Pure.
`onWidgetEvent`	`{}`	استدعاء رمز مخصص في حدث عنصر واجهة مستخدم معين ( `onChatOpen` ، `onChatClose` ، `onChatHidden` ، متاح في الوقت الحالي) ، إضافة وظيفة إلى خاصية الكائن المطلوبة في الدعائم لتتفاعل مع الحدث.

أمثلة إضافية

`customMessageDelay`

 ( message ) => {
    let delay = message . length * 30 ;
    if ( delay > 2 * 1000 ) delay = 3 * 1000 ;
    if ( delay < 400 ) delay = 1000 ;
    return delay ;
}

`onSocketEvent`

 onSocketEvent = { {
  'bot_uttered' : ( ) => console . log ( 'the bot said something' ) ,
  'connect' : ( ) => console . log ( 'connection established' ) ,
  'disconnect' : ( ) => doSomeCleanup ( ) ,
} }

`params`

تسمح الدعائم params فقط بتحديد أبعاد الصورة المخصصة:

 params = { {
        images : {
          dims : {
            width : 300 ,
            height : 200
          }
        }
      } }

ميزات أخرى

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

سيتم عرض الرسائل النصية المستلمة عند إغلاق عنصر واجهة المستخدم كملالية أدوات.

إرسال رسالة في تحميل الصفحة

عند إعادة الاتصال بجلسة دردشة موجودة ، سيرسل الروبوت رسالة وردت في مفتاح LocalStorage المحدد بواسطة ثابت NEXT_MESSAGE . يجب أن يتم تشكيل الرسالة JSON مع خاصية message تصف الرسالة وخاصية expiry التي تم تعيينها على طابع زمني UNIX بالمللي ثانية وبعد ذلك لا ينبغي إرسال هذه الرسالة. يعد هذا مفيدًا إذا كنت ترغب في أن يتمكن روبوتك من تزويد المستخدم بالتنقل حول الموقع.

إرسال حمولة من تطبيق React الخاص بك

 function myComponent ( ) {
    const webchatRef = useRef ( null ) ;
    
    // triggered when something happens in your app
    function callback ( ) {
        if ( webchatRef . current && webchatRef . current . sendMessage ) {
            webchatRef . current . sendMessage ( '/myIntent{"entityName":"value"}' ) ;
        }
    }
    
    return < RasaWebchat
        ref = { webchatRef }
    /> ;
}

يمكن أن يكون الحمولة النافعة أي رسالة يرسلها المستخدم عادةً ، ولكن إذا كنت ترغب في فرض نية وربما بعض الكيانات ، يمكنك استخدام هذا التنسيق /myIntent{"entity1":"value1","entity2":"value2"}

الخلفية

يمكن استخدام القطعة مع أي الواجهة الخلفية ولكن تم تصميمها في المقام الأول لاستخدامها مع RASA أو Botfront.

راسا

استخدم قناة socketio : راجع التعليمات في وثائق RASA

إذا كنت ترغب في معالجة customData في RASA ، فعليك إنشاء قناة جديدة. استخدم قناة rasa_core.channels.socketio كقالب لقنتك الجديدة. في هذه القناة ، يمكن استرداد customData عبر data['customData'] . بعد ذلك ، يمكنك تعديل sender_id ، حفظ customData إلى قاعدة البيانات ، أو ملء فتحات أو أي شيء تحتاجه مع بياناتك الإضافية.

botfront

يتم تطوير Rasa Webchat بواسطة فريق Botfront ويعمل مع Botfront. إذا كان الروبوت الخاص بك متعدد اللغات ، فتأكد من خصوصية اللغة الحالية في Propata customData . eg customData={{language: 'en'}} . انظر في مستندات botfront لمزيد من التفاصيل.

أنماط

من الإصدار 0.8 ، بدأنا بادئة جميع فئات CSS ، إذا كان لديك بالفعل تصميم CSS للعناصر واجهة المستخدم ، ما عليك سوى إعداد rw- إلى جميع الفئات التي قمت بتغييرها.

تَسَلسُل:

 .rw-conversation-container
  |-- .rw-header
        |-- .rw-title
        |-- .rw-close-function
        |-- .rw-loading
  |-- .rw-messages-container
        |-- .rw-message
              |-- .rw-client
              |-- .rw-response
        |-- .rw-replies
              |-- .rw-reply
              |-- .rw-response
        |-- .rw-snippet
              |-- .rw-snippet-title
              |-- .rw-snippet-details
              |-- .rw-link
        |-- .rw-imageFrame
        |-- .rw-videoFrame
  |-- .rw-sender
        |-- .rw-new-message
        |-- .rw-send

فصل	وصف
.rw-widget-container	DIV يحتوي على صندوق الدردشة من الإصدار الافتراضي
.rw-widget-embedded	Div من صندوق الدردشة المضمن (باستخدام الدعامة المدمجة)
.rw-full-screen	Div من صندوق الدردشة ملء الشاشة (باستخدام الدعامة FullScreenMode)
.RW-Conversation-container	الوالد DIV يحتوي على الرأس ، ومرسل الرسائل والمرسل
.rw-messages-container	المنطقة المركزية التي تظهر فيها الرسائل
.rw-sender	DIV من المساحة السفلية التي تطالب إدخال المستخدم
.rw-new-message	عنصر إدخال النص للمرسل
.rw-send	عنصر إرسال أيقونة المرسل
.RW-Header	DIV من المنطقة العلوية برأس صندوق الدردشة
.rw-title	عنصر العنوان من الرأس
.rw-colose-button	أيقونة العنوان
.RW-تحميل	عنصر حالة التحميل في الرأس
.rw-message	المربعات التي تحمل رسائل العميل والاستجابة
.rw-replies	المنطقة التي تعطي خيارات الرد السريع
.rw-snippet	مكون لوصف الروابط
.rw-dimageframe	حاوية لإرسال الصور
.rw-videoframe	حاوية لإرسال الفيديو

المساهمين

@ @ @znattheotomalty @hub4itdliuproduction @mattheujnon @mofortin @guillaumetech

رخصة

مرخصة بموجب ترخيص Apache ، الإصدار 2.0 ("الترخيص") ؛ لا يجوز لك استخدام هذا الملف إلا في الامتثال للترخيص. يمكنك الحصول على نسخة من الترخيص على

 http://www.apache.org/licenses/LICENSE-2.0

ما لم يكن مطلوبًا بموجب القانون المعمول به أو الموافقة على الكتابة ، يتم توزيع البرامج الموزعة بموجب الترخيص على أساس "كما هي" ، دون ضمانات أو شروط من أي نوع ، إما صريحة أو ضمنية. راجع ترخيص الأذونات والقيود التي تحكم اللغة المحددة بموجب الترخيص. (ج) 2021 Dialogue Technologies Inc. جميع الحقوق محفوظة.

يوسع

معلومات إضافية