Beautiful Vue Chat Component

Beautiful Vue Chat Component

vue-beautiful-chat provides an intercom-like chat window that can be included easily in any project for free. It provides no messaging facilities, only the view component.

vue-beautiful-chat

vue-beautiful-chat provides an intercom-like chat window that can be included easily in any project for free. It provides no messaging facilities, only the view component.

vue-beautiful-chat is porting to vue of react-beautiful-chat (which you can find here)

Go to FAQ ⬇️

gif

Features

  • Customizeable
  • Backend agnostic
  • Free

Demo

Table of Contents

Installation

$ yarn add vue-beautiful-chat

Example

import Chat from 'vue-beautiful-chat'
Vue.use(Chat)
<template>
  <div>
    <beautiful-chat
      :participants="participants"
      :titleImageUrl="titleImageUrl"
      :onMessageWasSent="onMessageWasSent"
      :messageList="messageList"
      :newMessagesCount="newMessagesCount"
      :isOpen="isChatOpen"
      :close="closeChat"
      :open="openChat"
      :showEmoji="true"
      :showFile="true"
      :showTypingIndicator="showTypingIndicator"
      :colors="colors"
      :alwaysScrollToBottom="alwaysScrollToBottom"
      :messageStyling="messageStyling" />
  </div>
</template>
export default {
  name: 'app',
  data() {
    return {
      participants: [
        {
          id: 'user1',
          name: 'Matteo',
          imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
        },
        {
          id: 'user2',
          name: 'Support',
          imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
        }
      ], // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
      titleImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
      messageList: [
          { type: 'text', author: `me`, data: { text: `Say yes!` } },
          { type: 'text', author: `user1`, data: { text: `No.` } }
      ], // the list of the messages to show, can be paginated and adjusted dynamically
      newMessagesCount: 0,
      isChatOpen: false, // to determine whether the chat window should be open or closed
      showTypingIndicator: '', // when set to a value matching the participant.id it shows the typing indicator for the specific user
      colors: {
        header: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        launcher: {
          bg: '#4e8cff'
        },
        messageList: {
          bg: '#ffffff'
        },
        sentMessage: {
          bg: '#4e8cff',
          text: '#ffffff'
        },
        receivedMessage: {
          bg: '#eaeaea',
          text: '#222222'
        },
        userInput: {
          bg: '#f4f7f9',
          text: '#565867'
        }
      }, // specifies the color scheme for the component
      alwaysScrollToBottom: false, // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
      messageStyling: true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattmezza/msgdown)
    }
  },
  methods: {
    sendMessage (text) {
      if (text.length > 0) {
        this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
        this.onMessageWasSent({ author: 'support', type: 'text', data: { text } })
      }
    },
    onMessageWasSent (message) {
      // called when the user sends a message
      this.messageList = [ ...this.messageList, message ]
    },
    openChat () {
      // called when the user clicks on the fab button to open the chat
      this.isChatOpen = true
      this.newMessagesCount = 0
    },
    closeChat () {
      // called when the user clicks on the botton to close the chat
      this.isChatOpen = false
    }
  }
}

For more detailed examples see the demo folder.

Components

Launcher

Launcher is the only component needed to use vue-beautiful-chat. It will react dynamically to changes in messages. All new messages must be added via a change in props as shown in the example.

Launcher props:

prop type description
*participants [agentProfile] Represents your product or service's customer service agents. Fields for each agent: id, name, imageUrl
*onMessageWasSent function(message) Called when a message a message is sent with a message object as an argument.
*isOpen Boolean The bool indicating whether or not the chat window should be open.
*open Function The function passed to the component that mutates the above mentioned bool toggle for opening the chat
*close Function The function passed to the component that mutates the above mentioned bool toggle for closing the chat
messageList [message] An array of message objects to be rendered as a conversation.
showEmoji Boolean A bool indicating whether or not to show the emoji button
showFile Boolean A bool indicating whether or not to show the file chooser button
showTypingIndicator Boolean A bool indicating whether or not to show the typing indicator
colors Object An object containing the specs of the colors used to paint the component. See here
messageStyling Boolean A bool indicating whether or not to enable msgdown support for message formatting in chat. See here

Message Objects

Message objects are rendered differently depending on their type. Currently, only text, emoji and file types are supported. Each message object has an author field which can have the value 'me' or the id of the corresponding agent.

{
  author: 'support',
  type: 'text',
  data: {
    text: 'some text'
  }
}

{
  author: 'me',
  type: 'emoji',
  data: {
    code: 'someCode'
  }
}

{
  author: 'me',
  type: 'file',
  data: {
    name: 'file.mp3',
    url: 'https:123.rf/file.mp3'
  }
}

Quick replies

When sending a message, you can provide a set of sentences that will be displayed in the user chat as quick replies. Adding in the message object a suggestions field with the value an array of strings will trigger this functionality

{
  author: 'support',
  type: 'text',
  data: {
    text: 'some text'
  },
  suggestions: ['some quick reply', ..., 'another one']
}

FAQ

How to get the demo working?

  • cd vue-beautiful-chat
  • yarn watch # this starts the compiler so everytime you edit files they get compiled
  • cd demo
  • yarn dev # this starts a web server on localhost:8080 so the demo shows up - it also watches for the demo files changes

How can I add a feature or fix a bug?

  • Fork the repository
  • Fix/add your changes
  • yarn build on the root to have the library compiled with your latest changes
  • create a pull request describing what you did
  • discuss the changes with the maintainer
  • boom! your changes are added to the main repo
  • a release is created almost once per week

Github Repository

Tags: #VueJs