Source

https://github.com/kyleparisi/vue.kyleparisi.com

Install

<link rel="stylesheet" href="https://vue.kyleparisi.com/Chat.css">

<div id="chat">
    <Chat></Chat>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://vue.kyleparisi.com/Chat.js"></script>
<script>
    new Vue({el: "#chat"})
</script>

State

window.data = window.data || {};
_.defaults(window.data, {
  // currently visible chat
  chat: false,
  // all chats available to user
  chats: {},
  // who is online
  online: [],
  // fetching chats/messages
  loading: true,
  // input field
  text: "",
  // who is typing
  typing: [],
  // height of chat window
  chatHeight: 400
});

Data model

type user = {
  id: string
  name: string
  image_url: string
}

type message = {
  id: string
  key: string
  timestamp: string
  text: string
  deleted: string
  edited: string
  chat_id: string
  user_id: string
}

type chat = {
  key: string
  title: string
  you: string
  url: string
  image_url: string
  // id of user
  owner: string
  read: string
  users: {
    [id: string] : user
  }
  messages: Array<message>
}

type chats = {
  [key: string]: chat
}

Events

<div id="chat">
    <Chat
      v-on:open-chat-list=""
      v-on:close-chat-list=""
      v-on:chat-title-clicked=""
      v-on:get-older-messages=""
      v-on:send-message=""
      v-on:update-read=""
      v-on:typing=""
    ></Chat>
</div>