├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── src
    ├── components
    │   └── Chat.vue
    └── index.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | **.DS_Store
 3 | .vscode
 4 | dist/
 5 | build/
 6 | npm-debug.log*
 7 | logs
 8 | *.log
 9 | .npm
10 | .eslintcache
11 | *.tgz


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *.map


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 David Davis
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-chat-widget
  2 | `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.
  3 | <br/>
  4 | 
  5 | ![Demo gif of react-chat-window being used](https://media.giphy.com/media/XEsOASAkabaoCm1chn/source.gif)
  6 | 
  7 | ## Features
  8 | 
  9 | - Customizeable
 10 | - Backend agnostic
 11 | - No file input's or emojis
 12 | - Free
 13 | 
 14 | ## [Demo](https://vue-chat-window-david-j-davis.marmt-group.now.sh/)
 15 | 
 16 | ## Table of Contents
 17 | - [Installation](#installation)
 18 | - [Example](#example)
 19 | - [Components](#components)
 20 | - [Backend Example with WebSockets](#backend)
 21 | 
 22 | ## Installation
 23 | 
 24 | ```
 25 | $ npm install vue-chat-widget
 26 | ```
 27 | 
 28 | ## Example
 29 | 
 30 | ``` javascript
 31 | <template>
 32 |     <div id="app">
 33 |       <Chat
 34 |         iconColorProp="#e6e6e6"
 35 |         messageOutColorProp="#4d9e93"
 36 |         messageInColorProp="#f1f0f0"
 37 |         messageBackgroundColorProp="#ffffff"
 38 |         :messageListProp="messageList"
 39 |         :initOpenProp="initOpen"
 40 |         @onToggleOpen="handleToggleOpen"
 41 |         @onMessageWasSent="handleMessageReceived"
 42 |       />
 43 |     </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | import {Chat} from 'vue-chat-widget'
 48 | import incomingMessageSound from '../assets/notification.mp3' // pick an audio file for chat response
 49 | 
 50 | export default {
 51 |   name: "app",
 52 |   components: {
 53 |     Chat,
 54 |   },
 55 |   data: () => {
 56 |     return {
 57 |       messageList: [],
 58 |       initOpen: false,
 59 |       toggledOpen: false
 60 |     }
 61 |   },
 62 |   methods: {
 63 |     // Send message from you
 64 |     handleMessageReceived(message) {
 65 |       this.messageList.push(message)
 66 |     },
 67 |     // Receive message from them (handled by you with your backend)
 68 |     handleMessageResponse(message) {
 69 |        if (message.length > 0) {
 70 |             this.messageList.push({ body: message, author: 'them' })
 71 |         }
 72 |     },
 73 |     // Chat toggled open event emitted
 74 |     handleToggleOpen(open) {
 75 |       this.toggledOpen = open
 76 |       // connect/disconnect websocket or something
 77 |     },
 78 |     // Audible chat response noise, use whatever noise you want
 79 |     handleMessageResponseSound() {
 80 |       const audio = new Audio(incomingMessageSound)
 81 |       audio.addEventListener('loadeddata', () => {
 82 |         audio.play()
 83 |       })
 84 |     },
 85 |   },
 86 |   // init chat with a message
 87 |   mounted() {
 88 |     this.messageList.push({ body: 'Welcome to the chat, I\'m David!', author: 'them' })
 89 |   },
 90 |   watch: {
 91 |     messageList: function(newList) {
 92 |       const nextMessage = newList[newList.length - 1]
 93 |       const isIncoming = (nextMessage || {}).author !== 'you'
 94 |       if (isIncoming && this.toggledOpen) {
 95 |         this.handleMessageResponseSound()
 96 |       }
 97 |     }
 98 |   }
 99 | }
100 | </script>
101 | ```
102 | 
103 | ## Notification Sound
104 | 
105 | Implement your own notification mp3 sound “🔔”, or [download this mp3 file](https://www.dropbox.com/s/fnnjo8cyxj8ovgf/notification.mp3?dl=1).
106 | 
107 | ## Components
108 | 
109 | ## Chat
110 | 
111 | `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.
112 | 
113 | Launcher props:
114 | 
115 | |      prop        | type   | required | description |
116 | |------------------|--------|----------|-------------|
117 | | iconColorProp     | String | no | Set icon color for close and open icons. Defaults to `#e6e6e6`|
118 | | messageOutColorProp | String | no | Set color of outgoing messages. Defaults to `#3d7e9a` |
119 | | messageInColorProp | String | no | Set color of incoming messages. Defaults to `#f1f0f0` |
120 | | messageBackgroundColorProp | String | no | Set background color of message area. Default to `#ffffff` |
121 | | initOpenProp | Boolean | yes | Force the open/close state of the chat window on mount. |
122 | | messageListProp  | Array [[message](#message-objects)] | yes | An array of message objects to be rendered as a conversation. |
123 | | @onToggleOpen    | event | yes | Event emitted when chat window is open and closed. |
124 | | @onMessageWasSent | function([message](#message-objects)) | yes | Emitted when a message is sent, with a message object as an argument. |
125 | 
126 | 
127 | ### Message Objects
128 | 
129 | 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'.
130 | 
131 | ``` javascript
132 | {
133 |   author: 'them',
134 |   body: 'some text'
135 | }
136 | 
137 | {
138 |   author: 'you',
139 |   body: 'some text'
140 | }
141 | 
142 | ```
143 | 
144 | ## Backend
145 | 
146 | For an example frontend using vue-chat-widget and websockets, [look here](https://gist.github.com/david-j-davis/afcd4bcceaa7562f91604b945dd3f8b0). For an accompanying backend in Node.js for this, [look here](https://gist.github.com/david-j-davis/5f88958874a0acdf0a9bde30ddfc1a23).


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     presets: [
3 |         '@vue/app'
4 |     ]
5 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-chat-widget",
 3 |   "version": "0.3.2",
 4 |   "private": false,
 5 |   "description": "A lean Vue.js chat ui that is backend agnostic",
 6 |   "main": "./dist/vue-chat-widget.common.js",
 7 |   "files": [
 8 |     "dist/"
 9 |   ],
10 |   "scripts": {
11 |     "serve": "vue-cli-service serve",
12 |     "build": "vue-cli-service build",
13 |     "build-bundle": "vue-cli-service build --target lib --name vue-chat-widget ./src/index.js",
14 |     "lint": "vue-cli-service lint",
15 |     "publish": "npm publish --access public"
16 |   },
17 |   "keywords": [
18 |     "vuejs chat",
19 |     "vue chat widget",
20 |     "vue chat ui",
21 |     "vue chat socket",
22 |     "vue simple chat"
23 |   ],
24 |   "author": "david-j-davis <davidjamesdavis.djd@gmail.com>",
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "https://github.com/Marmt-Group/app-vue-chat-widget"
28 |   },
29 |   "bugs": {
30 |     "url": "https://github.com/Marmt-Group/app-vue-chat-widget/issues"
31 |   },
32 |   "license": "MIT",
33 |   "dependencies": {
34 |     "core-js": "^3.2.1",
35 |     "vue": "^2.6.10",
36 |     "vue-icon": "^2.1.1"
37 |   },
38 |   "devDependencies": {
39 |     "@vue/cli-plugin-babel": "^3.11.0",
40 |     "@vue/cli-plugin-eslint": "^3.11.0",
41 |     "@vue/cli-service": "^3.11.0",
42 |     "babel-core": "^6.26.3",
43 |     "babel-eslint": "^10.0.3",
44 |     "eslint-plugin-vue": "^5.2.3",
45 |     "vue-template-compiler": "^2.6.10"
46 |   },
47 |   "eslintConfig": {
48 |     "root": true,
49 |     "env": {
50 |       "node": true
51 |     },
52 |     "extends": [
53 |       "plugin:vue/essential",
54 |       "eslint:recommended"
55 |     ],
56 |     "rules": {},
57 |     "parserOptions": {
58 |       "parser": "babel-eslint"
59 |     }
60 |   },
61 |   "postcss": {
62 |     "plugins": {
63 |       "autoprefixer": {}
64 |     }
65 |   },
66 |   "browserslist": [
67 |     "> 1%",
68 |     "last 2 versions"
69 |   ]
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/Chat.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |   <div class="open-chat" :class="(isOpen ? 'hide' : 'show')" @click="toggleChatOpen">
  4 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path :fill="iconColorProp" d="M899.3 171.4l-1.7 294.8s-4.9 159.7-176.2 159.7H481L373.9 736.3l176.2 1.6 242.1 250.3 8.3-256.9s189.4 13.2 189.4-154.8V327.8s8.2-100.3-90.6-156.4zM690.1 584.8c87.3 0 158.1-70.8 158.1-158.1V169.8c0-87.3-70.8-158.1-158.1-158.1h-522C80.8 11.7 10 82.5 10 169.8v256.9c0 87.3 70.8 158.1 158.1 158.1h13.3l1.6 233.9 261.2-233.9h245.9z"/></svg>
  5 |   </div>
  6 |   <div class="chat-container" :class="(isOpen ? 'show' : 'hide')">
  7 |     <div class="chat-window">
  8 |       <div class="close-chat" @click="toggleChatOpen" :style="{background: iconColorProp}">
  9 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><g fill="none" stroke="#ffffff" stroke-width="10" stroke-miterlimit="10" stroke-linecap="round"><path d="M10 10l45 45M10 55l45-45"/></g></svg>
 10 |       </div>
 11 |       <div ref="chatArea" class="chat-area" :style="{background: messageBackgroundColorProp}">
 12 |         <p v-for="message in messageListProp" :key="message.id||message.body" class="message" :style="[message.author === 'you' ? {background: messageOutColorProp} : {background: messageInColorProp}]" :class="{'message-out': message.author === 'you', 'message-in': message.author !== 'you' }">
 13 |           {{ message.body }}
 14 |         </p>
 15 |       </div>
 16 |       <div class="chat-input">
 17 |         <form @submit.prevent="handleOutboundMessage()" class="chat-form">
 18 |           <input v-model="youMessage" type="text" :placeholder="messagePlaceholder" autofocus>
 19 |           <button class="submit" type="submit"><v-icon name="send" base-class="icon-send-message" :style="{color: iconColorProp, width: '30px'}"></v-icon></button>
 20 |         </form>
 21 |       </div>
 22 |     </div>
 23 |   </div>
 24 | </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | export default {
 29 |   name: 'Chat',
 30 |   inheritAttrs: false,
 31 |   props: {
 32 |     messagePlaceholder: {
 33 |       type: String,
 34 |       default: 'Type your message'
 35 |     },
 36 |     iconColorProp: {
 37 |       type: String,
 38 |       default: '#e6e6e6'
 39 |     },
 40 |     messageBackgroundColorProp: {
 41 |       type: String,
 42 |       default: '#ffffff'
 43 |     },
 44 |     messageOutColorProp: {
 45 |       type: String,
 46 |       default: '#3d7e9a'
 47 |     },
 48 |     messageInColorProp: {
 49 |       type: String,
 50 |       default: '#f1f0f0'
 51 |     },
 52 |     messageListProp: Array,
 53 |     initOpenProp: Boolean
 54 |   },
 55 | 
 56 |   data: () => {
 57 |     return {
 58 |       youMessage: '',
 59 |       isOpen: false
 60 |     }
 61 |   },
 62 | 
 63 |   methods: {
 64 |     handleOutboundMessage() {
 65 |       if (!this.youMessage) {
 66 |         return
 67 |       }
 68 |       this.$emit('onMessageWasSent', { body: this.youMessage, author: 'you' })
 69 |       this.youMessage = ''
 70 |       this.$nextTick(() => {
 71 |         this.messageScroll()
 72 |       })
 73 |     },
 74 |     toggleChatOpen() {
 75 |       this.isOpen = !this.isOpen
 76 |       this.$emit('onToggleOpen', this.isOpen)
 77 |     },
 78 |     messageScroll() {
 79 |       let messageDisplay = this.$refs.chatArea
 80 |       messageDisplay.scrollTop = messageDisplay.scrollHeight
 81 |     }
 82 |   },
 83 |   mounted() {
 84 |     this.isOpen = this.initOpenProp || false
 85 |     if (this.messageListProp) {
 86 |       this.messageScroll()
 87 |     }
 88 |   }
 89 | }
 90 | </script>
 91 | 
 92 | <style scoped lang="css">
 93 |   * {
 94 |     box-sizing: border-box;
 95 |   }
 96 |   .headline {
 97 |     text-align: center;
 98 |     font-weight: 100;
 99 |     color: white;
100 |   }
101 |   .chat-container {
102 |     position: fixed;
103 |     bottom: 50px;
104 |     right: 50px;
105 |     max-width: 350px;
106 |     width: 100%;
107 |     z-index: 10000;
108 |     transform: scale(0);
109 |     transform-origin: right bottom;
110 |   }
111 |   .chat-container.show {
112 |     animation: scaleIn .15s ease-in-out 0s 1 normal forwards;
113 |   }
114 |   .chat-container.hide {
115 |     display: none;
116 |   }
117 |   .chat-window {
118 |     display: flex;
119 |     flex-direction: column;
120 |     box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.1);
121 |     width: 100%;
122 |   }
123 |   .chat-area {
124 |     border-radius: 3px 3px 0 0;
125 |     height: 300px;
126 |     padding: 1em 1em 0;
127 |     position: relative;
128 |     overflow: auto;
129 |     width: 100%;
130 |   }
131 |   .message {
132 |     width: 45%;
133 |     border-radius: 10px;
134 |     padding: .5em;
135 |     font-size: .8em;
136 |   }
137 |   .message-out {
138 |     color: #ffffff;
139 |     margin-left: 50%;
140 |   }
141 |   .message-in {
142 |     background: #f1f0f0;
143 |     color: black;
144 |   }
145 |   .chat-inputs {
146 |     display: flex;
147 |     justify-content: space-between;
148 |   }
149 |   .chat-input input {
150 |     border: none;
151 |     font-size: .8em;
152 |     outline: none;
153 |     padding: 1.5em;
154 |     width: 90%;
155 |   }
156 |   .chat-form {
157 |     background: #ffffff;
158 |     border-top: 1px solid #e9e9e9;
159 |     border-radius: 0 0 3px 3px;
160 |     display: flex;
161 |     flex-direction: row;
162 |     align-items: center;
163 |     overflow: hidden;
164 |     width: 100%;
165 |   }
166 |   .submit {
167 |     -webkit-appearance: none;
168 |     background: transparent;
169 |     border: 0;
170 |     cursor: pointer;
171 |   }
172 |   .submit:focus {
173 |     outline: none;
174 |   }
175 |   .submit-icon {
176 |     width: 20px;
177 |   }
178 |   .close-chat {
179 |     position: absolute;
180 |     right: -40px;
181 |     top: -40px;
182 |     width: 35px;
183 |     border-radius: 50%;
184 |     height: 35px;
185 |     background: #f7f7f7;
186 |     cursor: pointer;
187 |     transform: scale(0);
188 |   }
189 |   .chat-container.show .close-chat {
190 |     animation: scaleIn .15s ease-in-out .3s 1 normal forwards;
191 |   }
192 |   .close-chat svg {
193 |     position: relative;
194 |     left: -1px;
195 |     top: 6px;
196 |     width: 20px;
197 |   }
198 |   .open-chat {
199 |     position: fixed;
200 |     width: 70px;
201 |     right: 50px;
202 |     bottom: 25px;
203 |     cursor: pointer;
204 |     z-index: 900;
205 |     transform: scale(0);
206 |   }
207 |   .open-chat.hide {
208 |     display: none;
209 |   }
210 |   .open-chat.show {
211 |     animation: scaleIn .15s ease-in-out .15s 1 normal forwards;
212 |   }
213 |   @keyframes scaleIn {
214 |     0% {
215 |       transform: scale(0);
216 |     }
217 |     100% {
218 |       transform: scale(1);
219 |     }
220 |   }
221 | </style>
222 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import feather from 'vue-icon'
3 | Vue.config.productionTip = false
4 | Vue.use(feather, 'v-icon')
5 | 
6 | export { default as Chat } from './components/Chat.vue'


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     css: { extract: false }
3 | }


--------------------------------------------------------------------------------