├── .eslintrc.js ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── logo.png │ └── vue-quick-chat.png ├── components │ ├── Chat.vue │ ├── Header.vue │ ├── MessageDisplay.vue │ ├── MessageManager.vue │ ├── MyMessage.vue │ └── OtherMessage.vue ├── index.js ├── main.js ├── mixins │ └── linkParse.js └── store.js └── vue.config.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parserOptions: { 3 | parser: "babel-eslint", 4 | }, 5 | extends: [ 6 | // add more generic rulesets here, such as: 7 | // 'eslint:recommended', 8 | 'plugin:vue/recommended' 9 | ], 10 | rules: { 11 | "vue/html-indent": ["error", 4, { 12 | "attribute": 1, 13 | "baseIndent": 1, 14 | "closeBracket": 0, 15 | "alignAttributesVertically": true, 16 | "ignores": [] 17 | }], 18 | "vue/name-property-casing": ["error", "kebab-case"], 19 | "vue/mustache-interpolation-spacing": ["error", "never"], 20 | "vue/max-attributes-per-line": ["error", { 21 | "singleline": 5, 22 | "multiline": { 23 | "max": 3, 24 | "allowFirstLine": true 25 | } 26 | }], 27 | "vue/html-closing-bracket-newline": ["error", { 28 | "singleline": "never", 29 | "multiline": "never" 30 | }], 31 | "vue/html-closing-bracket-spacing": ["error", { 32 | "startTag": "never", 33 | "endTag": "never", 34 | "selfClosingTag": "never" 35 | }], 36 | "vue/singleline-html-element-content-newline": ["warning", { 37 | "ignoreWhenNoAttributes": true, 38 | "ignoreWhenEmpty": true, 39 | "ignores": ["pre", "textarea", "v-btn"] 40 | }], 41 | "vue/html-self-closing": ["error", { 42 | "html": { 43 | "void": "never", 44 | "normal": "never", 45 | "component": "always" 46 | }, 47 | "svg": "always", 48 | "math": "always" 49 | }], 50 | } 51 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | 23 | #lockfile 24 | yarn.lock -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Matheus Ricardo dos Santos 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-quick-chat 2 | This vue component is a simple chat that can be easily imported and used in your project. 3 | 4 | ## Features 5 | - Custom style 6 | - Handle on type event and on message submit 7 | - Chat with multiple participants 8 | - Support for async actions like message uploaded status 9 | - Send images (released at version 1.1.0) 10 | - Support for profile pictures (released at version 1.1.1) 11 | - Uses Luxon in place of moment. Added event functions (released at version 1.2.0) 12 | - Support for timestamp config (released at version 1.2.1) 13 | 14 | 15 | ## Instalation 16 | ``` 17 | yarn add vue-quick-chat 18 | ``` 19 | or with npm 20 | ``` 21 | npm install vue-quick-chat --save 22 | ``` 23 | 24 | ## Usage 25 | ```javascript 26 | import { Chat } from 'vue-quick-chat' 27 | import 'vue-quick-chat/dist/vue-quick-chat.css'; 28 | 29 | 30 | export default { 31 | components: { 32 | Chat 33 | }, 34 | } 35 | ``` 36 | ```html 37 | 67 | ``` 68 | You can also use a slot to define the header content 69 | ```html 70 |
71 | 96 | 101 | 102 |
103 | ``` 104 | Bellow we have an example of the component data structure 105 | ```javascript 106 | import {Chat} from 'vue-quick-chat'; 107 | import 'vue-quick-chat/dist/vue-quick-chat.css'; 108 | 109 | export default { 110 | components: { 111 | Chat 112 | }, 113 | data() { 114 | return { 115 | visible: true, 116 | participants: [ 117 | { 118 | name: 'Arnaldo', 119 | id: 1, 120 | profilePicture: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a1/NafSadh_Profile.jpg/768px-NafSadh_Profile.jpg' 121 | }, 122 | { 123 | name: 'José', 124 | id: 2, 125 | profilePicture: 'https://lh3.googleusercontent.com/-G1d4-a7d_TY/AAAAAAAAAAI/AAAAAAAAAAA/AAKWJJPez_wX5UCJztzEUeCxOd7HBK7-jA.CMID/s83-c/photo.jpg' 126 | } 127 | ], 128 | myself: { 129 | name: 'Matheus S.', 130 | id: 3, 131 | profilePicture: 'https://lh3.googleusercontent.com/-G1d4-a7d_TY/AAAAAAAAAAI/AAAAAAAAAAA/AAKWJJPez_wX5UCJztzEUeCxOd7HBK7-jA.CMID/s83-c/photo.jpg' 132 | }, 133 | messages: [ 134 | { 135 | content: 'received messages', 136 | myself: false, 137 | participantId: 1, 138 | timestamp: {year: 2019, month: 3, day: 5, hour: 20, minute: 10, second: 3, millisecond: 123}, 139 | type: 'text' 140 | }, 141 | { 142 | content: 'sent messages', 143 | myself: true, 144 | participantId: 3, 145 | timestamp: {year: 2019, month: 4, day: 5, hour: 19, minute: 10, second: 3, millisecond: 123}, 146 | type: 'text' 147 | }, 148 | { 149 | content: 'other received messages', 150 | myself: false, 151 | participantId: 2, 152 | timestamp: {year: 2019, month: 5, day: 5, hour: 10, minute: 10, second: 3, millisecond: 123}, 153 | type: 'text' 154 | } 155 | ], 156 | chatTitle: 'My chat title', 157 | placeholder: 'send your message', 158 | colors: { 159 | header: { 160 | bg: '#d30303', 161 | text: '#fff' 162 | }, 163 | message: { 164 | myself: { 165 | bg: '#fff', 166 | text: '#bdb8b8' 167 | }, 168 | others: { 169 | bg: '#fb4141', 170 | text: '#fff' 171 | }, 172 | messagesDisplay: { 173 | bg: '#f7f3f3' 174 | } 175 | }, 176 | submitIcon: '#b91010', 177 | submitImageIcon: '#b91010', 178 | }, 179 | borderStyle: { 180 | topLeft: "10px", 181 | topRight: "10px", 182 | bottomLeft: "10px", 183 | bottomRight: "10px", 184 | }, 185 | hideCloseButton: false, 186 | submitIconSize: 25, 187 | closeButtonIconSize: "20px", 188 | asyncMode: false, 189 | toLoad: [ 190 | { 191 | content: 'Hey, John Doe! How are you today?', 192 | myself: false, 193 | participantId: 2, 194 | timestamp: {year: 2011, month: 3, day: 5, hour: 10, minute: 10, second: 3, millisecond: 123}, 195 | uploaded: true, 196 | viewed: true, 197 | type: 'text' 198 | }, 199 | { 200 | content: "Hey, Adam! I'm feeling really fine this evening.", 201 | myself: true, 202 | participantId: 3, 203 | timestamp: {year: 2010, month: 0, day: 5, hour: 19, minute: 10, second: 3, millisecond: 123}, 204 | uploaded: true, 205 | viewed: true, 206 | type: 'text' 207 | }, 208 | ], 209 | scrollBottom: { 210 | messageSent: true, 211 | messageReceived: false 212 | }, 213 | displayHeader:true, 214 | profilePictureConfig: { 215 | others: true, 216 | myself: true, 217 | styles: { 218 | width: '30px', 219 | height: '30px', 220 | borderRadius: '50%' 221 | } 222 | }, 223 | timestampConfig: { 224 | format: 'HH:mm', 225 | relative: false 226 | }, 227 | // there are other options, you can check them here 228 | // https://soapbox.github.io/linkifyjs/docs/options.html 229 | linkOptions: { 230 | myself: { 231 | className: 'myLinkClass', 232 | events: { 233 | click: function (e) { 234 | alert('Link clicked!'); 235 | }, 236 | mouseover: function (e) { 237 | alert('Link hovered!'); 238 | } 239 | }, 240 | format: function (value, type) { 241 | if (type === 'url' && value.length > 50) { 242 | value = value.slice(0, 50) + '…'; 243 | } 244 | return value; 245 | } 246 | }, 247 | others: { 248 | className: 'othersLinkClass', 249 | events: { 250 | click: function (e) { 251 | alert('Link clicked!'); 252 | }, 253 | mouseover: function (e) { 254 | alert('Link hovered!'); 255 | } 256 | }, 257 | format: function (value, type) { 258 | if (type === 'url' && value.length > 50) { 259 | value = value.slice(0, 50) + '…'; 260 | } 261 | return value; 262 | } 263 | } 264 | } 265 | } 266 | }, 267 | methods: { 268 | onType: function (event) { 269 | //here you can set any behavior 270 | }, 271 | loadMoreMessages(resolve) { 272 | setTimeout(() => { 273 | resolve(this.toLoad); //We end the loading state and add the messages 274 | //Make sure the loaded messages are also added to our local messages copy or they will be lost 275 | this.messages.unshift(...this.toLoad); 276 | this.toLoad = []; 277 | }, 1000); 278 | }, 279 | onMessageSubmit: function (message) { 280 | /* 281 | * example simulating an upload callback. 282 | * It's important to notice that even when your message wasn't send 283 | * yet to the server you have to add the message into the array 284 | */ 285 | this.messages.push(message); 286 | 287 | /* 288 | * you can update message state after the server response 289 | */ 290 | // timeout simulating the request 291 | setTimeout(() => { 292 | message.uploaded = true 293 | }, 2000) 294 | }, 295 | onClose() { 296 | this.visible = false; 297 | }, 298 | onImageSelected(files, message){ 299 | let src = 'https://149364066.v2.pressablecdn.com/wp-content/uploads/2017/03/vue.jpg' 300 | this.messages.push(message); 301 | /** 302 | * This timeout simulates a requisition that uploads the image file to the server. 303 | * It's up to you implement the request and deal with the response in order to 304 | * update the message status and the message URL 305 | */ 306 | setTimeout((res) => { 307 | message.uploaded = true 308 | message.src = res.src 309 | }, 3000, {src}); 310 | }, 311 | onImageClicked(message){ 312 | /** 313 | * This is the callback function that is going to be executed when some image is clicked. 314 | * You can add your code here to do whatever you need with the image clicked. A common situation is to display the image clicked in full screen. 315 | */ 316 | console.log('Image clicked', message.src) 317 | } 318 | } 319 | } 320 | ``` 321 | ## Component Props 322 | | name | type | required |default |description | 323 | |------|------|----------|--------|------------| 324 | | participants | Array | true | | An array of participants. Each [participant](#participant) should be an Object with name and id| 325 | | myself | Object | true | | Object of my [participant](#participant). "myself" should be an Object with name and id| 326 | | messages | Array | true | | An array of [messages](#message). Each message should be an Object with content, myself, participantId and timestamp| 327 | | chatTitle | String | false | Empty String | The title on chat header | 328 | | placeholder | String | false | 'type your message here' | The placeholder of message text input | 329 | | colors | Object | true | | Object with the [color's](#color) description of style properties | 330 | | borderStyle | Object | false | { topLeft: "10px", topRight: "10px", bottomLeft: "10px", bottomRight: "10px"} | Object with the description of border style properties | 331 | | hideCloseButton | Boolean | false | false | If true, the 'Close' button will be hidden | 332 | | submitIconSize | int | false | 24 | The submit icon size in pixels. | 333 | | submitImageIconSize | int | false | 24 | The image submit icon size in pixels. | 334 | | closeButtonIconSize | String | false | "15px" | The close button icon size in pixels. | 335 | | asyncMode | Boolean | false | false | If the value is ```true``` the component begins to watch message upload status and displays a visual feedback for each message. If the value is ```false``` the visual feedback is disabled | 336 | | loadMoreMessages | Function | false | () => false | If this function is passed and you reach the top of the messages, it will be called and a loading state will be displayed until you resolve it by calling the only parameter passed to it | 337 | | scrollBottom | Object | false | { messageSent: true, messageReceived: false} | This object describes the chat scroll behavior. The two options represent the moment when the chat should scroll to the bottom. If 'messageSent' is ```true```, the chat will scroll to bottom aways you send a new message. If 'messageReceived' is ```true```, the chat will scroll to bottom always you receive a new message. | 338 | | displayHeader | Boolean | false | true | This prop describes whether the header should be displayed or not | 339 | | profilePictureConfig | Object | false | ```{ others: true, myself: false, styles: { width: '25px', height: '25px', borderRadius: '50%'} }``` | This prop is a js Object that decribes the style and the behavoir of the chat regards to the users profile picture. | 340 | | timestampConfig | Object | false | ```{ format: 'HH:mm', relative: false }``` | This prop is a js Object that decribes the timestamp format / relativeness. | 341 | | linkOptions | Object | false | ```{ myself: {}, others: {} }``` | This prop is an Object that configures the links that may appear on the messages' content. ```myself``` defines the config for links in sent messages. ```others``` defines the config for links in received messages. This functionality relies on [linkifyjs](https://soapbox.github.io/linkifyjs/). You can find the full doc of this prop [here](https://soapbox.github.io/linkifyjs/docs/options.html). | 342 | | acceptImageTypes | String | false | ```image/*``` | This prop defines the image types that are accepted to be uploaded. The image types should be separated by a comma (e.g. ```'.png, .jpeg, .jpg'```) | 343 | 344 | # Events 345 | | name | type | required |default |description | 346 | |------|------|----------|--------|------------| 347 | | onType | Function | false | () => false | Event called when the user is typing | 348 | | onMessageSubmit | Function | false | () => false | Event called when the user sends a new message | 349 | | onClose | Function | false | () => false | Event called when the user presses the close icon | 350 | | onImageClicked | Function | false | () => false | This prop is a callback function that is called after the user clicks on an image. This function may receive the message that represents the image clicked. You have many possibilities of implementations, one of them, is to display the clicked image on full-screen mode. | 351 | | onImageSelected | Function | false | () => false | This prop is a callback function that is called after the user selects an image from the computer. This is the function that should upload the image to the server and update the message status to uploaded and the src to the uploaded image URL. | 352 | 353 | ### participant 354 | | name | type | description | 355 | |---------|--------|----------------| 356 | | id | int | The user id should be an unique value | 357 | | name | String | The user name that will be displayed | 358 | | profilePicture | String | The user profule picture url | 359 | 360 | Example 361 | ```javascript 362 | { 363 | name: 'Username', 364 | id: 1, 365 | profilePicture: 'profile_url' 366 | }, 367 | ``` 368 | ### message 369 | | name | type | description | 370 | |---------|--------|----------------| 371 | | content | String | The message text content | 372 | | myself | boolean | (REMOVED) Whether the message was sent by myself or by other participants. Since version 1.0.8 this property is automatically set by the chat | 373 | | participantId | int | The participant's id who sent the message | 374 | | timestamp | Object| Object describing the year, month, day, hour, minute, second and millisecond that the message was sent | 375 | | uploaded | Boolean| If asyncMode is ```true``` and uploaded is ```true```, a visual feedback is displayed bollow the message. If asyncMode is ```true``` and uploaded is ```false```, a visual loading feedback is displayed bollow the message. If asyncMode is ```false```, this property is ignored.| 376 | | viewed | Boolean| If asyncMode is ```true``` and viewed is ```true```, a visual feedback is displayed bollow the message.| 377 | | preview | String | (ONLY FOR IMAGES) This prop is automatically set by the chat. It represents the preview image URL while the image is being uploaded to the server. | 378 | | src | String | (ONLY FOR IMAGES) This prop should be set by you after the image is uploaded. You should do it in the callback function onImageSelected. The prop represents the image URL of the uploaded image. | 379 | | type | String | This prop should be set by you in case a new message is received, otherwise, the chat will automatically set this prop. | 380 | 381 | Example 382 | ```javascript 383 | { 384 | content: 'received messages', 385 | //myself: false, 386 | participantId: 1, 387 | timestamp: { 388 | year: 2019, 389 | month: 3, 390 | day: 5, 391 | hour: 20, 392 | minute: 10, 393 | second: 3, 394 | millisecond: 123 395 | }, 396 | uploaded: true, 397 | viewed: true, 398 | type: 'text' // or 'image' 399 | // generated by URL.createObjectURL(file) 400 | // (ONLY NEEDED FOR IMAGES) 401 | preview: 'blob:http://mydomain/11999c0j-4abc-4e56-acc7-fb0bbd616ea7', 402 | src: 'myurl.com/images/image.png', 403 | } 404 | ``` 405 | ### color 406 | | name | type | description | 407 | |---------|--------|----------------| 408 | | header | Object | Object containing the header background and text color | 409 | | message | Object | Object containing the message background and text color. The Object should contains the style for 'myself' and 'others' | 410 | | messagesDisplay | Object | Object containing the background color of mesages container. | 411 | | submitIcon | String | The color applied to the send message button icon | 412 | | submitImageIcon | String | The color applied to the send image button icon | 413 | 414 | Example 415 | ```javascript 416 | { 417 | header:{ 418 | bg: '#d30303', 419 | text: '#fff' 420 | }, 421 | message:{ 422 | myself: { 423 | bg: '#fff', 424 | text: '#bdb8b8' 425 | }, 426 | others: { 427 | bg: '#fb4141', 428 | text: '#fff' 429 | } 430 | }, 431 | messagesDisplay: { 432 | bg: '#f7f3f3' 433 | }, 434 | submitIcon: '#b91010', 435 | submitImageIcon: '#b91010' 436 | } 437 | 438 | ``` 439 | ## profilePictureConfig 440 | | name | type | description | 441 | |---------|--------|----------------| 442 | | others | Boolean | Whether the profile picture of the other participant should be displayed on the screen | 443 | | myself | Boolean | Whether the profile picture of the current participant (myself) should be displayed on the screen | 444 | | styles | Object | Object containing the description of the size and the shape of the profile images picture | 445 | 446 | Example 447 | ``` javascript 448 | profilePictureConfig: { 449 | others: true, 450 | myself: true, 451 | styles: { 452 | width: '30px', 453 | height: '30px', 454 | borderRadius: '50%' 455 | } 456 | } 457 | ``` 458 | ## timestampConfig 459 | | name | type | description | 460 | |---------|--------|----------------| 461 | | format | String | [Timestamp format](https://moment.github.io/luxon/docs/manual/formatting.html#toformat) | 462 | | relative | Boolean | Whether the timestamp should be relative to current time | 463 | 464 | Example 465 | ``` javascript 466 | timestampConfig: { 467 | format: 'HH:mm', 468 | relative: false 469 | } 470 | ``` 471 | ## Project setup 472 | ``` 473 | npm install 474 | ``` 475 | 476 | ### Compiles and hot-reloads for development 477 | ``` 478 | npm run serve 479 | ``` 480 | 481 | ### Compiles and minifies for production 482 | ``` 483 | npm run build 484 | ``` 485 | 486 | ### Run your tests 487 | ``` 488 | npm run test 489 | ``` 490 | 491 | ### Lints and fixes files 492 | ``` 493 | npm run lint 494 | ``` 495 | 496 | ### Customize configuration 497 | See [Configuration Reference](https://cli.vuejs.org/config/). 498 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-quick-chat", 3 | "version": "1.2.8", 4 | "private": false, 5 | "main": "./dist/vue-quick-chat.common.js", 6 | "files": [ 7 | "dist/*", 8 | "src/*", 9 | "public/*", 10 | "*.json", 11 | "*.js" 12 | ], 13 | "author": "Matheus Santos ", 14 | "license": "MIT", 15 | "keywords": [ 16 | "vue", 17 | "vue-js-chat", 18 | "chat", 19 | "vuejs", 20 | "simple-chat" 21 | ], 22 | "repository": "https://github.com/MatheusrdSantos/vue-quick-chat", 23 | "scripts": { 24 | "serve": "vue-cli-service serve", 25 | "build": "vue-cli-service build", 26 | "build-bundle": "vue-cli-service build --target lib --name vue-quick-chat ./src/index.js", 27 | "lint": "vue-cli-service lint" 28 | }, 29 | "dependencies": { 30 | "core-js": "^2.6.5", 31 | "linkifyjs": "^2.1.9", 32 | "luxon": "^1.21.3", 33 | "vue": "^2.6.10", 34 | "vue-material-design-icons": "^4.4.0", 35 | "vuex": "^3.0.1" 36 | }, 37 | "devDependencies": { 38 | "@vue/cli-plugin-babel": "^3.11.0", 39 | "@vue/cli-plugin-eslint": "^3.11.0", 40 | "@vue/cli-service": "^3.11.0", 41 | "babel-eslint": "^10.0.1", 42 | "eslint": "^5.16.0", 43 | "eslint-plugin-vue": "^5.0.0", 44 | "less": "^3.10.3", 45 | "less-loader": "^5.0.0", 46 | "vue-cli-plugin-moment": "^0.1.1", 47 | "vue-template-compiler": "^2.6.10" 48 | }, 49 | "eslintConfig": { 50 | "root": true, 51 | "env": { 52 | "node": true 53 | }, 54 | "extends": [ 55 | "plugin:vue/essential", 56 | "eslint:recommended" 57 | ], 58 | "rules": {}, 59 | "parserOptions": { 60 | "parser": "babel-eslint" 61 | } 62 | }, 63 | "postcss": { 64 | "plugins": { 65 | "autoprefixer": {} 66 | } 67 | }, 68 | "browserslist": [ 69 | "> 1%", 70 | "last 2 versions" 71 | ] 72 | } 73 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatheusrdSantos/vue-quick-chat/f294a89b27297e08ed0d4829a3a49af34b1d7706/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-quick-chat 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 385 | 386 | 458 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatheusrdSantos/vue-quick-chat/f294a89b27297e08ed0d4829a3a49af34b1d7706/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/vue-quick-chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MatheusrdSantos/vue-quick-chat/f294a89b27297e08ed0d4829a3a49af34b1d7706/src/assets/vue-quick-chat.png -------------------------------------------------------------------------------- /src/components/Chat.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 224 | 225 | 236 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 82 | 83 | 127 | -------------------------------------------------------------------------------- /src/components/MessageDisplay.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 159 | 160 | 298 | -------------------------------------------------------------------------------- /src/components/MessageManager.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 130 | 131 | 204 | -------------------------------------------------------------------------------- /src/components/MyMessage.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 92 | 93 | -------------------------------------------------------------------------------- /src/components/OtherMessage.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 92 | 93 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | Vue.config.productionTip = false 3 | export { default as Chat } from './components/Chat.vue'; 4 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | Vue.config.productionTip = false 4 | 5 | new Vue({ 6 | render: h => h(App) 7 | }).$mount('#app') 8 | 9 | export { default as Chat } from './components/Chat.vue'; 10 | -------------------------------------------------------------------------------- /src/mixins/linkParse.js: -------------------------------------------------------------------------------- 1 | import linkifyElement from 'linkifyjs/element'; 2 | export default { 3 | props: { 4 | linkOptions: { 5 | type: Object, 6 | required: true 7 | } 8 | }, 9 | mounted() { 10 | if(this.$refs['message-content']){ 11 | linkifyElement(this.$refs['message-content'], this.linkOptions, document) 12 | } 13 | }, 14 | } -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import { DateTime } from "luxon"; 4 | 5 | Vue.use(Vuex); 6 | 7 | export default () => { 8 | return new Vuex.Store({ 9 | state: { 10 | messages: [], 11 | myself: {}, 12 | participants: [], 13 | chatTitle: '', 14 | placeholder: '' 15 | }, 16 | mutations: { 17 | newMessage: (state, message) => { 18 | message.timestamp = message.timestamp.toISO(); 19 | message.myself = message.participantId === state.myself.id; 20 | state.messages = [...state.messages, message]; 21 | }, 22 | setParticipants: (state, participants) => { 23 | state.participants = participants; 24 | }, 25 | setMyself: (state, myself) => { 26 | state.myself = myself; 27 | }, 28 | setMessages: (state, messages) => { 29 | state.messages = messages.map(message => { 30 | if(message.timestamp) (typeof message.timestamp == 'object') && (message.timestamp = DateTime.fromObject(message.timestamp).toISO()) 31 | else message.timestamp = DateTime.local().toISO(); 32 | 33 | if (!("myself" in message)) 34 | message.myself = message.participantId === state.myself.id; 35 | return message 36 | }); 37 | }, 38 | setChatTitle: (state, title) => { 39 | state.chatTitle = title; 40 | }, 41 | setPlaceholder: (state, placeholder) => { 42 | state.placeholder = placeholder; 43 | } 44 | }, 45 | actions: {}, 46 | getters: { 47 | getParticipantById: (state) => (id) => { 48 | let curr_participant; 49 | state.participants.forEach(participant => { 50 | if (participant.id === id) { 51 | curr_participant = participant; 52 | } 53 | }); 54 | 55 | return curr_participant; 56 | }, 57 | messages: (state) => { 58 | let messages = []; 59 | state.messages.forEach(message => { 60 | let newMessage = {...message}; 61 | newMessage.timestamp = DateTime.fromISO(newMessage.timestamp); 62 | messages.push(newMessage); 63 | }); 64 | return messages; 65 | }, 66 | myself: (state) => { 67 | return state.myself; 68 | } 69 | } 70 | }) 71 | } 72 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const TerserPlugin = require('terser-webpack-plugin'); 2 | 3 | module.exports = { 4 | publicPath: '', 5 | css: { extract: true }, 6 | configureWebpack: { 7 | optimization: { 8 | minimizer: [ 9 | new TerserPlugin({ 10 | terserOptions: { 11 | ecma: 6, 12 | compress: true, 13 | output: { 14 | comments: false, 15 | beautify: false 16 | } 17 | } 18 | }) 19 | ] 20 | } 21 | }, 22 | chainWebpack(config) { 23 | config.module 24 | .rule("vue") 25 | .use("vue-loader") 26 | .loader("vue-loader") 27 | .tap(options => { 28 | options.compilerOptions.whitespace = "condense"; 29 | return options 30 | }); 31 | } 32 | }; --------------------------------------------------------------------------------