vue-chat-widget

vue-chat-widget is a simple chat window that can be included easily in any Vue project. It is backend agnostic and as such provides no messaging facilities, only the UI component.

Features

• Customizeable
• Backend agnostic
• No file input's or emojis
• Free

Demo

Table of Contents

• Installation
• Example
• Components
• Backend Example with WebSockets

Installation

$ npm install vue-chat-widget

Example

<template>
    <div id="app">
      <Chat
        iconColorProp="#e6e6e6"
        messageOutColorProp="#4d9e93"
        messageInColorProp="#f1f0f0"
        messageBackgroundColorProp="#ffffff"
        :messageListProp="messageList"
        :initOpenProp="initOpen"
        @onToggleOpen="handleToggleOpen"
        @onMessageWasSent="handleMessageReceived"
      />
    </div>
</template>

<script>
import {Chat} from 'vue-chat-widget'
import incomingMessageSound from '../assets/notification.mp3' // pick an audio file for chat response

export default {
  name: "app",
  components: {
    Chat,
  },
  data: () => {
    return {
      messageList: [],
      initOpen: false,
      toggledOpen: false
    }
  },
  methods: {
    // Send message from you
    handleMessageReceived(message) {
      this.messageList.push(message)
    },
    // Receive message from them (handled by you with your backend)
    handleMessageResponse(message) {
       if (message.length > 0) {
            this.messageList.push({ body: message, author: 'them' })
        }
    },
    // Chat toggled open event emitted
    handleToggleOpen(open) {
      this.toggledOpen = open
      // connect/disconnect websocket or something
    },
    // Audible chat response noise, use whatever noise you want
    handleMessageResponseSound() {
      const audio = new Audio(incomingMessageSound)
      audio.addEventListener('loadeddata', () => {
        audio.play()
      })
    },
  },
  // init chat with a message
  mounted() {
    this.messageList.push({ body: 'Welcome to the chat, I\'m David!', author: 'them' })
  },
  watch: {
    messageList: function(newList) {
      const nextMessage = newList[newList.length - 1]
      const isIncoming = (nextMessage || {}).author !== 'you'
      if (isIncoming && this.toggledOpen) {
        this.handleMessageResponseSound()
      }
    }
  }
}
</script>

Notification Sound

Implement your own notification mp3 sound “🔔”, or download this mp3 file.

Components

Chat

Chat is the only component needed to use vue-chat-widget. 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	required	description
iconColorProp	String	no	Set icon color for close and open icons. Defaults to #e6e6e6
messageOutColorProp	String	no	Set color of outgoing messages. Defaults to #3d7e9a
messageInColorProp	String	no	Set color of incoming messages. Defaults to #f1f0f0
messageBackgroundColorProp	String	no	Set background color of message area. Default to #ffffff
initOpenProp	Boolean	yes	Force the open/close state of the chat window on mount.
messageListProp	Array [message]	yes	An array of message objects to be rendered as a conversation.
@onToggleOpen	event	yes	Event emitted when chat window is open and closed.
@onMessageWasSent	function(message)	yes	Emitted when a message is sent, with a message object as an argument.

Message Objects

Message objects are rendered differently depending on their type. Currently, only text types are supported. Each message object has an author field which can have the value 'you' or 'them'.

{
  author: 'them',
  body: 'some text'
}

{
  author: 'you',
  body: 'some text'
}

Backend

For an example frontend using vue-chat-widget and websockets, look here. For an accompanying backend in Node.js for this, look here.