Unduh vue bot ui - pengunduhan kode sumber vue bot ui

vue bot ui

Kode Sumber AI

vent to toggle & close the board manually

Unduh

UI Bot Vue

Bagi mereka yang mencari UI chatbot yang dapat disesuaikan.

Saya membangun untuk proyek pribadi saya, tetapi saya mencoba memberikan opsi sebanyak yang saya pikir seseorang membutuhkannya, jadi jangan ragu untuk menggunakannya.

Halaman demo akan segera hadir.

UI bot vue

Memasang

npm install vue-bot-ui

// or
yarn add vue-bot-ui

Penggunaan

Impor & daftarkan komponen

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

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

Dan gunakan:

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

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

Alat peraga

Daftar props yang tersedia untuk digunakan dalam komponen:

Nama	Jenis	Bawaan	Keterangan
`messages`	Himpunan	[]	Diperlukan . Data Pesan
`options`	Obyek	lihat di bawah	Beberapa opsi untuk menyesuaikan UI
`bot-typing`	Boolean	PALSU	Jika `true` , indikator pengetikan bot akan muncul
`input-disable`	Boolean	PALSU	Jika `true` , input pesan akan dinonaktifkan
`is-open`	Boolean	PALSU	Jika `true` , papan akan terbuka dari init
`open-delay`	Nomor	belum diartikan	Penundaan sebelum pembukaan dari init (dalam ms). Membutuhkan `is-open` untuk menjadi `true`

Pilihan

Daftar opsi yang tersedia untuk menyesuaikan UI:

Nama	Jenis	Bawaan	Keterangan
`botTitle`	Rangkaian	'Bot Obrolan'	Nama bot yang akan ditampilkan di header papan
`colorScheme`	Rangkaian	'#1b53d0'	Warna latar belakang tombol gelembung & header papan
`textColor`	Rangkaian	'#fff'	Warna ikon tombol gelembung & judul header papan
`bubbleBtnSize`	Nomor	56	Ukuran tombol gelembung (px)
`animation`	Boolean	BENAR	Setel ke `false` untuk menonaktifkan animasi ikon tombol gelembung & tampilan papan
`boardContentBg`	Rangkaian	'#fff'	Warna latar belakang kotak pesan papan
`botAvatarSize`	Nomor	32	Ukuran avatar bot (px)
`botAvatarImg`	Rangkaian	'http://placehold.it/200x200'	gambar avatar
`msgBubbleBgBot`	Rangkaian	'#f0f0f0'	Warna latar belakang pesan Bot
`msgBubbleColorBot`	Rangkaian	'#000'	Warna teks pesan Bot
`msgBubbleBgUser`	Rangkaian	'#4356e0'	Warna latar belakang pesan pengguna
`msgBubbleColorUser`	Rangkaian	'#fff'	Warna teks pesan pengguna
`inputPlaceholder`	Rangkaian	'Pesan'	Placeholder untuk input pesan
`inputDisableBg`	Rangkaian	'#fff'	Warna latar belakang untuk masukan yang dinonaktifkan, dicampur dengan `opacity: 0.2`
`inputDisablePlaceholder`	Rangkaian	batal	Pesan placeholder untuk input yang dinonaktifkan

Komponen & Acara

Ini adalah bagian terpenting yang perlu Anda ketahui, karena Anda memerlukannya untuk mengintegrasikan API bot Anda. Lihatlah file App.vue saya jika Anda memerlukan contoh.

Acara

Nama	Param	Keterangan
`init`		Tembak setiap kali papan dibuka
`msg-send`	nilai (Objek)	Aktifkan saat pengguna menekan Kirim atau pilih salah satu opsi
`destroy`		Tembak saat papan ditutup

Gunakan msg-send untuk menerima pesan dari pengguna dan memicu permintaan ke bot API.

Peristiwa Pemicu:

Nama	Keterangan
`botui-open`	Untuk membuka papan
`botui-close`	Untuk menutup papan
`botui-toggle`	Untuk mengaktifkan/menutup papan

Komponen

Pola umum / Contoh data:

 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' ,
  } ,
  ...
]

Daftar komponen:

Komponen saat ini didukung oleh paket ini, jalur ke file: components/MessageBubble/..

Teks Tunggal - type: 'text'

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

Opsi Tombol - 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
    } ,
    ...
  ] ,
}

Komponen lainnya akan segera hadir...

slot

Daftar slot yang tersedia:

Nama	Keterangan
`header`	Header papan, yang berisi nama Bot.
`actions`	Slot di samping tombol Kirim di pesan masukan. Anda dapat menambahkan tindakan tambahan di sini (emoji, lampirkan,...)
`sendButton`	Ikon tombol kirim, Anda dapat mengubahnya menjadi teks.
`bubbleButton`	Tombol gelembung yang berisi BubbleIcon & CloseIcon sebagai default.
`botTyping`	Gelembung pesan Pengetikan Bot yang berisi indikator 3 titik sebagai default.

Tidak menemukan apa yang Anda butuhkan?

Anda dapat menimpa CSS berdasarkan nama kelas. Setiap jenis dan negara bagian memiliki kelas terpisah untuk Anda sesuaikan.

Permintaan fitur : Silakan membuka terbitan untuk meminta fitur baru.

Pengembang / Bangun

 # 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