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

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.

juanmanavarro/app-vue-chat-widget