A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.

Overview

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"
      :icons="icons"
      :open="openChat"
      :showEmoji="true"
      :showFile="true"
      :showEdition="true"
      :showDeletion="true"
      :showTypingIndicator="showTypingIndicator"
      :showLauncher="true"
      :showCloseButton="true"
      :colors="colors"
      :alwaysScrollToBottom="alwaysScrollToBottom"
      :disableUserListToggle="false"
      :messageStyling="messageStyling"
      @onType="handleOnType"
      @edit="editMessage" />
  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/mattezza/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
    },
    handleScrollToTop () {
      // called when the user scrolls message list to top
      // leverage pagination for loading another page of messages
    },
    handleOnType () {
      console.log('Emit typing event')
    },
    editMessage(message){
      const m = this.messageList.find(m=>m.id === message.id);
      m.isEdited = true;
      m.data.text = message.data.text;
    }
  }
}

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.

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 is sent with the 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
showDeletion Boolean A bool indicating whether or not to show the edit button for a message
showEdition Boolean A bool indicating whether or not to show the delete button for a message
showTypingIndicator String A string that can be set to a user's participant.id to show typing indicator for them
showHeader Boolean A bool indicating whether or not to show the header of chatwindow
disableUserListToggle Boolean A bool indicating whether or not to allow the user to toggle between message list and participants list
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

Events

event params description
onType undefined Fires when user types on the message input
edit message Fires after user edited message

Slots

header

Replacing default header.

<template v-slot:header>
  🤔 Good chat between {{participants.map(m=>m.name).join(' & ')}}
template>
user-avatar

Replacing user avatar. Params: message, user

<template v-slot:user-avatar="{ message, user }">
  <div style="border-radius:50%; color: pink; font-size: 15px; line-height:25px; text-align:center;background: tomato; width: 25px !important; height: 25px !important; min-width: 30px;min-height: 30px;margin: 5px; font-weight:bold" v-if="message.type === 'text' && user && user.name">
    {{user.name.toUpperCase()[0]}}
  div>
template>
text-message-body

Change markdown for text message. Params: message

<template v-slot:text-message-body="{ message }">
  <small style="background:red" v-if="message.meta">
    {{message.meta}}
  small>
  {{message.text}}
template>
system-message-body

Change markdown for system message. Params: message

<template v-slot:system-message-body="{ message }">
  [System]: {{message.text}}
template>

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',
  id: 1, // or text '1'
  isEdited: false,
  data: {
    text: 'some text',
    meta: '06-16-2019 12:43'
  }
}

{
  author: 'me',
  type: 'emoji',
  id: 1, // or text '1'
  isEdited: false,
  data: {
    code: 'someCode'
  }
}

{
  author: 'me',
  type: 'file',
  id: 1, // or text '1'
  isEdited: false,
  data: {
    file: {
      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',
  id: 1, // or text '1'
  data: {
    text: 'some text',
    meta: '06-16-2019 12:43'
  },
  suggestions: ['some quick reply', ..., 'another one']
}

FAQ

How to get the demo working?

git clone [email protected]:mattmezza/vue-beautiful-chat.git
cd vue-beautiful-chat
yarn install  # this installs the package dependencies
yarn watch  # this watches files to continuously compile them

Open a new shell in the same folder

cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080

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 😉

How can I customize the colors?

  • When initializing the component, pass an object specifying the colors used:
let redColors = {
  header: {
    bg: '#D32F2F',
    text: '#fff'
  },
  launcher: {
    bg: '#D32F2F'
  },
  messageList: {
    bg: '#fff'
  },
  sentMessage: {
    bg: '#F44336',
    text: '#fff'
  },
  receivedMessage: {
    bg: '#eaeaea',
    text: '#222222'
  },
  userInput: {
    bg: '#fff',
    text: '#212121'
  }
}
<beautiful-chat
  ...
  :colors="redColors" />

This is the red variant. Please check this file for the list of variants shown in the demo page online.

Please note that you need to pass an Object containing each one of the color properties otherwise the validation will fail.

How can I add message formatting?

Good news, message formatting is already added for you. You can enable it by setting messageStyling to true and you will be using the msgdown library. You can enable/disable the formatting support at any time, or you can let users do it whenever they prefer.

Contributors

@a-kriya, @mattmezza

Please contact us if you would like to join as a contributor.

Comments
  • Multiple Chats

    Multiple Chats

    Are there any plans to support multiple different chats.

    Like having thread list to select from. And some UI to create a new thread or start a new direct conversation between two users?

    enhancement help wanted wontfix 
    opened by OliverZiegler 20
  • Support for quick replies

    Support for quick replies

    It would be nice if there could be "quick reply" support to allow the user to select a pre-configured reply without typing.

    For example, how facebook does it: quick-reply

    opened by thegafo 12
  • src folder no longer included when using npm

    src folder no longer included when using npm

    The following is presented in the readme but a change has been to the package.json that causes the src folder to be no longer included.

    import CloseIcon from 'vue-beautiful-chat/src/assets/close-icon.png'
    import OpenIcon from 'vue-beautiful-chat/src/assets/logo-no-bg.svg'
    import FileIcon from 'vue-beautiful-chat/src/assets/file.svg'
    import CloseIconSvg from 'vue-beautiful-chat/src/assets/close.svg'
    

    I believe this is the culprit in the package.json file

    **  "files": [
        "dist/*"
      ],**
    
    stale 
    opened by Matthewken 8
  • src folder missing in vue-beautiful-chat

    src folder missing in vue-beautiful-chat

    the src folder is missing when I installed the component in the example there were few images imported from the src/assets folder like openIcon, closeIcon, fileIcon as I imported them with the given path there were builder errors

    Module not found: Error: Can't resolve 'vue-beautiful-chat/src/assets/logo-no-bg.svg'

    I thing the src folder is in git ignore by mistakenly

    opened by imraniqbal829 7
  • SSR

    SSR

    I noticed a ssr.index.js in the ./dist folder but I'm unsure how I could use it for the Gridsome build to work.

    Any ideas?

    Edit: I tried using the lazy-loaded component approach (described here) but it leads to a window is not defined error and the ssr.index.js doesn't seem to export a Vue component.

    And using the following leads to a successfully built page with no chat (using the <ClientOnly>...</ClientOnly> wrapper in the template):

    export default {
      name: 'chatbox',
      components: {
        BeautifulChat: () =>
          import('vue-beautiful-chat/dist/ssr.index')
            .then(m => m.default)
            .catch()
      },
    

    Is there a way to get the SSR export to a valid Vue Component?

    stale 
    opened by Berkmann18 7
  • How to handle off typing event??

    How to handle off typing event??

    I can display typing indicator, but cannot disappear it. This is my code.(We're using LaravelEcho)

    handleOnType () {
          this.echo.whisper("typing", {
            user_id: this.user_id
          });
        },
    
    Echo.listenForWhisper("typing", (e) => {
                this.showTypingIndicator = e.user_id;
              });
    

    If user submit the message, we can disappear the indicator on onMessageWasSent function. But if user cancel the input, we cannot handle that.

    Do you know how to do this??

    opened by Yoshihide-Nishimoto 7
  • It's no more possible to load this library from the git repo

    It's no more possible to load this library from the git repo

    Hey,

    Since this commit it's no more possible to do yarn add https://github.com/mattmezza/vue-beautiful-chat in order to test the master branche as the main field from the package.json file points to a non-versioned file.

    Would you mind to version the /dist folder too?

    Thanks.

    opened by zedtux 6
  • Push root props in store for direct access

    Push root props in store for direct access

    Fully backwards compatible as the changes are internal only so the public API is unaffected.

    In this POC, only the props for Header component are replaced and the values are read from store. This allowed the proxying of props to be cleaned up from ChatWindow component because it does not care about titleImageUrl, or disableUserListToggle or showCloseButton.

    Header was only at the second level, so full benefits of this will be visible for deeply nested components such as TextMessage where root props like showDeletion and showEdition are proxied through ChatWindow, MessageList, Message, and the final declaration in TextMessage component itself, which all can be cleaned up and the values read directly in TextMessage component from store.

    If this POC looks good, the migration can be done incrementally (this PR works and behaves the same -- mainly due to the watcher in Launcher).

    opened by a-kriya 6
  • Sender name? Add author username to received messages

    Sender name? Add author username to received messages

    Thank you very much for this great nice looking component. I´m sorry, if i miss something obvious, but how do i show the user which person sent the message?

    Author can contain only me and them. I´d like to set author with the user name and show it in the chat box beside the message.

    thanks

    enhancement 
    opened by benjamin79 6
  • Not Showing edit button for messages

    Not Showing edit button for messages

    props :showEdition the edit button for messages are not showing

    template:

           <beautiful-chat
                :participants="participants"
                :titleImageUrl="titleImageUrl"
                :onMessageWasSent="onMessageWasSent"
                :messageList="messageList"
                :newMessagesCount="newMessagesCount"
                :isOpen="isChatOpen"
                :close="closeChat"
                :open="openChat"
                :showEmoji="true"
                :showFile="true"
                :showEdition="true"
                :showDeletion="true"
                :showTypingIndicator="showTypingIndicator"
                :showLauncher="true"
                :showCloseButton="false"
                :colors="colors"
                :alwaysScrollToBottom="alwaysScrollToBottom"
                :disableUserListToggle="false"
                :messageStyling="messageStyling"
                @onType="handleOnType"
                @edit="editMessage"
            >
                <template v-slot:header>
                    🤔 Good chat between
                    {{ participants.map(m => m.name).join(" & ") }}
                </template>
    
                <template v-slot:user-avatar="{ message, user }">
                    <div
                        style= ""
                        v-if="message.type === 'text' && user && user.name"
                    >
                        {{ user.name.toUpperCase()[0] }}
                    </div>
                </template>
    
                <template v-slot:system-message-body="{ message }">
                    [System]: {{ message.text }}
                </template>
            </beautiful-chat>
    
     messageList: [
                    { type: "text", author: `me`, data: { text: `Say yes!` } },
                    { type: "text", author: `1`, data: { text: `No.` } },
                    { type: "text", author: `1`, data: { text: `No.` } },
                    { type: "text", author: `1`, data: { text: `No.` } },
                    { type: "text", author: `1`, data: { text: `No.` } },
                    { type: "text", author: `1`, data: { text: `No.` } },
                    { type: "text", author: `1`, data: { text: `No.` } },
                    { type: "text", author: `1`, data: { text: `No.` } },
                    { type: "text", author: `me`, data: { text: `Say yes!` } },
                    { type: "text", author: `me`, data: { text: `Say yes!` } }
                ],
    
    stale 
    opened by ga2tes 5
  • Header toogle

    Header toogle

    Hello, currently its not possible to disable header toggling. Can you add this feature?

    Namely preventing the toggle between chat and participants list, hiding thus the participants list.

    Screen Shot 2020-10-18 at 11 44 30 PM Screen Shot 2020-10-18 at 11 44 50 PM enhancement good first issue pinned 
    opened by fkefer1 5
  • Possible to programmatically insert

    Possible to programmatically insert "user" response

    I am building voice interaction with speech to text. I do not want an input field for the user, I want to insert what I have detect from speech recognition. How would I do that with your component?

    stale 
    opened by waymorphood 2
  • Fixes #209: Allow inserting emojis alongside text

    Fixes #209: Allow inserting emojis alongside text

    For my current project I needed to insert emojis into the input field rather then send them as a message directly. This PR includes changes to realize that.

    I have added a property sendEmojisDirectly that propagates towards the UserInput. If set to false the new feature - respecting the last selection that has been made in the input fileld - will either insert the emoji at the caret or overwrite a selected range.

    pinned 
    opened by bLind17 12
  • Added ability to have multiple chats

    Added ability to have multiple chats

    @mattmezza Please let me know if you have any questions or want to discuss. I updated the the chat and the demo, but not your doc. I can do it if necessary. The old demo works with the new chat, so the changes are backward compatible.

    pinned 
    opened by eduardsmetanin 18
Releases(v2.5.0)
Owner
Matteo Merola
Just a regular guy but with superpowers... Co-founder @datasound, maintainer @myunimol, flying high with KLM
Matteo Merola
Vue transition component with a11y considerations

Vue transition component with a11y considerations

Maarten Van Hoof 5 Mar 5, 2022
Iconic is a free “do wtf you want with” set of pixel-perfect icons. Available as basic SVG icons and via first-party React and Vue libraries.

Iconic is a free “do wtf you want with” set of pixel-perfect icons. Available as basic SVG icons and via first-party React and Vue libraries.

Make Lemonade 282 Sep 21, 2022
toss up game made with vue js 3 with the respective winner system and coin count

toss up game made with vue js 3 with the respective winner system and coin count

DavidsDvm 1 Oct 28, 2021
A microfrontend / serverless architected UI for monitoring and recording a11y reports via lighthouse.

Serverless Lerna + Yarn Workspaces Starter A Serverless monorepo starter that uses Lerna and Yarn Workspaces. Designed to scale for larger projects Ma

null 0 Nov 12, 2021
Accessibility auditing for Vue.js applications.

vue-axe Accessibility auditing for Vue.js applications by running dequelabs/axe-core validation on the page you're viewing, axe-core will run 1 second

Vue A11y 172 Jun 23, 2022
Static AST checker for accessibility rules on elements in .vue

eslint-plugin-vue-a11y Static AST checker for accessibility rules on elements in .vue. Installation You'll first need to install ESLint: $ npm i eslin

null 153 Aug 31, 2022
Accessible, internationalized Vue calendar

Vue A11Y Calendar Localized, accessible calendar and datepicker for Vue with no external dependencies. Installation $ npm install vue-a11y-calendar Pe

International Business Machines 252 Apr 15, 2022
An eslint plugin for checking Vue.js files for accessibility

eslint-plugin-vuejs-accessibility An eslint plugin for checking accessibility rules from within .vue files. Installation If you're using yarn: yarn ad

Vue A11y 147 Jul 17, 2022
A headless Vue 3 notification library to use with Tailwind CSS.

A headless Vue 3 notification library to use with Tailwind CSS. This is a fork and port of vue3-vt-notifications created and modified by killmenot to support Vue 3. Initially created by sansil.

Emmanuel Deossa 114 Oct 4, 2022
A headless Vue 3 notification library to use with Tailwind CSS.

A headless Vue 3 notification library to use with Tailwind CSS. This is a fork and port of vue3-vt-notifications created and modified by killmenot to support Vue 3. Initially created by sansil.

Emmanuel Deossa 8 Sep 5, 2021
A vue.js ui library for web.

A vue.js ui library for web.

Spider Nest 0 Nov 3, 2021
Utilities for accessibility (a11y) in Vue.js

Vue A11y Utils Utilities for accessibility (a11y) in Vue.js Table of Contents Why Getting Started <VueAria> Component v-aria Custome Directive Travel

Jinjiang 112 Jul 27, 2022
A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.

A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.

Matteo Merola 1.2k Sep 28, 2022
This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker

vue-material-datepicker This datepicker is a fully customisable Vue(v2.1.6) version of the material-ui datepicker that fit all your projects. See belo

Bastien Granger 54 Dec 13, 2021
Private-Chat-with-SocketIO.JS - A simple minimal Web application to chat in private with friends

Private messaging with Socket.IO Please read the related guide: Running the fron

null 2 Feb 10, 2022
Leopard Chat UI - A Teneo Chat Client based on Vue and Vuetify

A Feature Rich Chat Client for Teneo About • Installation • Features • Documentation • Demo • Contributing • Author • Support • License About Leopard

Peter Joles 67 Jul 12, 2022
Vue-chat - Chat app Vue.js & Tailwind with FireBase

Demo: https://vue-chatapp.vercel.app/ Chat app for education Vue.js Stack Vue.js

Yuriy Yurich 0 Aug 5, 2022
Analyze your WhatsApp Chat in Seconds. Reveal insights & get statistics, while all data stays on your device. No chat data is sent to a server it runs only locally in your browser.

WhatsAnalyze Analyze your WhatsApp Chat in Seconds Reveal insights & get statistics, while all data stays on your device. No chat data is sent to a se

SpiritFour 40 Sep 29, 2022
🔥 Simple, extendable, dependency free notification plugin. 🔥

Vue Toastify I wanted a notification plugin which I can use by passing props from the server and can also be called at run time. With this component i

null 174 Aug 2, 2022
:alien: A search component with suggestions, customizable and extendable.

vue-search-panel English | 简体中文 vue-search-panel is a search component with suggestions Contents Features Example Install Usage API Reference Features

Zhi Xiong 35 Aug 25, 2022