ดาวน์โหลด vue bot ui - ดาวน์โหลด vue bot ui ซอร์สโค้ด

vue bot ui

โค้ดแหล่งที่มา AI

vent to toggle & close the board manually

ดาวน์โหลด

UI ของ Vue Bot

สำหรับผู้ที่กำลังค้นหา Chatbot UI ที่ปรับแต่งได้

ฉันสร้างสำหรับโปรเจ็กต์ส่วนตัวของฉัน แต่ฉันพยายามนำเสนอตัวเลือกให้มากที่สุดเท่าที่ฉันคิดว่ามีคนต้องการ ดังนั้นอย่าลังเลที่จะใช้มัน

หน้าสาธิตจะมาเร็ว ๆ นี้

UI ของบอท vue

ติดตั้ง

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`	วัตถุ	ดูด้านล่าง	ตัวเลือกบางอย่างในการปรับแต่ง UI
`bot-typing`	บูลีน	เท็จ	หากเป็น `true` ตัวบ่งชี้การพิมพ์ของบอทจะแสดงขึ้นมา
`input-disable`	บูลีน	เท็จ	หากเป็น `true` การป้อนข้อความจะถูกปิดใช้งาน
`is-open`	บูลีน	เท็จ	หากเป็น `true` บอร์ดจะเปิดตั้งแต่เริ่มต้น
`open-delay`	ตัวเลข	ไม่ได้กำหนด	ความล่าช้าก่อนเปิดจาก init (เป็น ms) กำหนดให้ `is-open` เป็น `true`

ตัวเลือก

รายการตัวเลือกที่มีให้ปรับแต่ง UI:

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
`botTitle`	สตริง	'แชทบอท'	ชื่อบอทที่จะแสดงบนส่วนหัวของกระดาน
`colorScheme`	สตริง	'#1b53d0'	สีพื้นหลังของปุ่มบับเบิลและส่วนหัวของบอร์ด
`textColor`	สตริง	'#ffff'	สีของไอคอนปุ่มฟองและชื่อส่วนหัวของบอร์ด
`bubbleBtnSize`	ตัวเลข	56	ขนาดของปุ่มบับเบิล (px)
`animation`	บูลีน	จริง	ตั้งค่าเป็น `false` เพื่อปิดใช้งานภาพเคลื่อนไหวของไอคอนปุ่มบับเบิลและการแสดงบอร์ด
`boardContentBg`	สตริง	'#ffff'	สีพื้นหลังของกล่องข้อความบนกระดาน
`botAvatarSize`	ตัวเลข	32	ขนาดของอวตารของบอท (px)
`botAvatarImg`	สตริง	'http://placehold.it/200x200'	รูปภาพประจำตัว
`msgBubbleBgBot`	สตริง	'#f0f0f0'	สีพื้นหลังของข้อความบอท
`msgBubbleColorBot`	สตริง	'#000'	สีข้อความของข้อความบอท
`msgBubbleBgUser`	สตริง	'#4356e0'	สีพื้นหลังของข้อความผู้ใช้
`msgBubbleColorUser`	สตริง	'#ffff'	สีข้อความของข้อความผู้ใช้
`inputPlaceholder`	สตริง	'ข้อความ'	ตัวยึดตำแหน่งสำหรับการป้อนข้อความ
`inputDisableBg`	สตริง	'#ffff'	สีพื้นหลังสำหรับอินพุตที่ปิดใช้งาน ผสมกับ `opacity: 0.2`
`inputDisablePlaceholder`	สตริง	โมฆะ	ข้อความตัวยึดตำแหน่งสำหรับการป้อนข้อมูลที่ปิดใช้งาน

ส่วนประกอบและเหตุการณ์

นี่เป็นส่วนที่สำคัญที่สุดที่คุณต้องรู้ เนื่องจากคุณต้องการสิ่งเหล่านี้เพื่อรวมบอท API ของคุณ ลองดูไฟล์ App.vue ของฉันหากคุณต้องการตัวอย่าง

กิจกรรม

ชื่อ	พารามิเตอร์	คำอธิบาย
`init`		ยิงทุกครั้งที่เปิดกระดาน
`msg-send`	ค่า (วัตถุ)	เริ่มทำงานเมื่อผู้ใช้กดส่งหรือเลือกตัวเลือก
`destroy`		ไฟไหม้เมื่อปิดบอร์ด

ใช้ msg-send เพื่อรับข้อความจากผู้ใช้และทริกเกอร์คำขอไปยัง bot API

เหตุการณ์ทริกเกอร์:

ชื่อ	คำอธิบาย
`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/..

SingleText - type: 'text'

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

ButtonOptions - 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