تنزيل vue bot ui - تنزيل كود مصدر vue bot ui

vue bot ui

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

vent to toggle & close the board manually

تنزيل

واجهة المستخدم فيو بوت

لمن يبحث عن واجهة مستخدم chatbot قابلة للتخصيص.

أقوم بالإنشاء لمشروعي الخاص، لكنني حاولت تقديم أكبر عدد ممكن من الخيارات التي أعتقد أن شخصًا ما يحتاجها، لذا لا تتردد في استخدامها.

الصفحة التجريبية قريبا.

واجهة المستخدم فيو بوت

ثَبَّتَ

npm install vue-bot-ui

// or
yarn add vue-bot-ui

الاستخدام

استيراد وتسجيل المكون

 import { VueBotUI } from 'vue-bot-ui'

export default {
  components : {
    VueBotUI ,
  } ,
  ...
}

واستخدمه:

< VueBotUI
  : messages = " data "
  : options = " botOptions "
  @ msg-send = " messageSendHandler "
/>

 data ( ) {
  return {
    data : [ ] , // See Data example below
    botOptions : {
      // See the list of options below
    }
  }
}

الدعائم

قائمة الدعائم المتاحة لاستخدامها في المكون:

اسم	يكتب	تقصير	وصف
`messages`	صفيف	[]	مطلوب . بيانات الرسائل
`options`	هدف	انظر أدناه	بعض الخيارات لتخصيص واجهة المستخدم
`bot-typing`	منطقية	خطأ شنيع	إذا كان `true` ، فسيظهر مؤشر كتابة الروبوت
`input-disable`	منطقية	خطأ شنيع	إذا كان `true` ، فسيتم تعطيل إدخال الرسالة
`is-open`	منطقية	خطأ شنيع	إذا كان `true` ، فسيتم فتح اللوحة من الحرف init
`open-delay`	رقم	غير محدد	التأخير قبل الفتح من الحرف الأول (بالمللي ثانية). يتطلب `is-open` ليكون `true`

خيارات

قائمة الخيارات المتاحة لتخصيص واجهة المستخدم:

اسم	يكتب	تقصير	وصف
`botTitle`	خيط	"الدردشة الآلية"	اسم البوت الذي سيظهر على رأس اللوحة
`colorScheme`	خيط	'#1b53d0'	لون خلفية زر الفقاعة ورأس اللوحة
`textColor`	خيط	'#ففف'	لون رمز زر الفقاعة وعنوان رأس اللوحة
`bubbleBtnSize`	رقم	56	حجم زر الفقاعة (px)
`animation`	منطقية	حقيقي	اضبط على `false` لتعطيل الرسوم المتحركة لرمز زر الفقاعة وعرض اللوحة
`boardContentBg`	خيط	'#ففف'	لون خلفية صندوق رسائل اللوحة
`botAvatarSize`	رقم	32	حجم الصورة الرمزية للبوت (بيكسل)
`botAvatarImg`	خيط	"http://placehold.it/200x200"	الصورة الرمزية
`msgBubbleBgBot`	خيط	'#f0f0f0'	لون خلفية رسالة الروبوت
`msgBubbleColorBot`	خيط	'#000'	لون نص رسالة الروبوت
`msgBubbleBgUser`	خيط	'#4356e0'	لون خلفية رسالة المستخدم
`msgBubbleColorUser`	خيط	'#ففف'	لون نص رسالة المستخدم
`inputPlaceholder`	خيط	'رسالة'	العنصر النائب لإدخال الرسالة
`inputDisableBg`	خيط	'#ففف'	لون الخلفية للإدخال المعطل، مختلط مع `opacity: 0.2`
`inputDisablePlaceholder`	خيط	باطل	رسالة العنصر النائب للإدخال المعطل

المكونات والأحداث

هذا هو الجزء الأكثر أهمية الذي تحتاج إلى معرفته، لأنك تحتاج إليه لدمج واجهة برمجة تطبيقات الروبوت الخاصة بك. ألق نظرة على ملف App.vue الخاص بي إذا كنت بحاجة إلى مثال.

الأحداث

اسم	بارامس	وصف
`init`		أطلق النار في كل مرة يتم فيها فتح اللوحة
`msg-send`	القيمة (الكائن)	أطلق النار عندما يضغط المستخدم على إرسال أو يحدد خيارًا
`destroy`		حريق عند إغلاق اللوحة

استخدم msg-send للحصول على الرسالة من المستخدم وتشغيل الطلب إلى واجهة برمجة تطبيقات الروبوت.

أحداث الزناد:

اسم	وصف
`botui-open`	لفتح اللوحة
`botui-close`	لإغلاق اللوحة
`botui-toggle`	لتبديل فتح/إغلاق اللوحة

عناصر

النمط الشائع/بيانات المثال:

 const messages = [
  {
    agent : 'bot' , // Required. 'bot' or 'user'
    type : 'text' , // Required. Bubble message component type: 'text' / 'button'
    text : 'Hello. How can I help you' , // Required. The message
    disableInput : false , // Disable message input or not
    ...
  } ,
  {
    agent : 'user' ,
    type : 'text' , // always
    text : 'I need a new laptop' ,
  } ,
  ...
]

قائمة المكونات:

المكونات الحالية التي تدعمها هذه الحزمة، المسار إلى الملفات: components/MessageBubble/..

نص مفرد - type: 'text'

 {
  agent : 'bot' ,
  type : 'text' ,
  text : 'Hello. How can I help you' ,
  disableInput : false ,
}

خيارات الزر - type: 'button'

 {
  agent : 'bot' ,
  type : 'button' ,
  text : 'Select the option below' ,
  disableInput : true ,
  options : [
    {
      text : 'Open Google' ,
      value : 'https://google.com' ,
      action : 'url'
    } ,
    {
      text : 'Submit Support Ticket' ,
      value : 'submit_ticket' ,
      action : 'postback' // Request to API
    } ,
    ...
  ] ,
}

المكونات الأخرى تأتي قريبا ...

فتحات

قائمة الفتحات المتاحة:

اسم	وصف
`header`	رأس اللوحة، الذي يحتوي على اسم الروبوت.
`actions`	الفتحة الموجودة بجانب زر الإرسال في رسالة الإدخال. يمكنك إضافة إجراءات إضافية هنا (إيموجي، إرفاق،...)
`sendButton`	رمز زر الإرسال، يمكنك تغييره إلى نص.
`bubbleButton`	زر الفقاعة الذي يحتوي على BubbleIcon وCloseIcon كإعداد افتراضي.
`botTyping`	بوت كتابة فقاعة الرسالة التي تحتوي على مؤشر 3 نقاط كإعداد افتراضي.

لم تجد ما حاجتك؟

يمكنك استبدال CSS باسم الفئة. يحتوي كل نوع وحالة على فئة منفصلة يمكنك تخصيصها.

طلب الميزة : لا تتردد في فتح مشكلة لطلب ميزة جديدة.

المطورين / بناء

 # Clone repo
git clone https://github.com/JuzSer/vue-bot-ui

# Install packages
yarn

# Development & Demo - http://localhost:1901
yarn serve

# Build main library
yarn build-bundle