├── .gitignore
├── README.md
├── bili.config.js
├── package.json
└── src
    ├── BubbleChat.vue
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-bubble-chat
 2 | 
 3 | Amesome & simple vue chat component
 4 | 
 5 | <a href="https://github.com/vadymsem/vue-bubble-chat" target="\_parent" rel="nofollow">
 6 |   <img alt="" src="https://img.shields.io/github/stars/vadymsem/vue-bubble-chat.svg?style=social&amp;label=Star">
 7 | </a>
 8 | 
 9 | ![preview](https://media.giphy.com/media/hrSR25LGrBp8lco4tO/giphy.gif)
10 | 
11 | 
12 | ## Installation
13 | 
14 | ```bash
15 | npm install --save vue-bubble-chat
16 | ```
17 | 
18 | ## Usage
19 | 
20 | ```vue
21 | import Vue from "vue";
22 | import BubbleChat from "vue-bubble-chat";
23 | 
24 | Vue.use(BubbleChat);
25 | ```
26 | 
27 | -----------------------------------------------------------------------
28 | ### Params
29 | 
30 | | Param name  | Data | Description |
31 | | ------------- | ------------- |------------- |
32 | | position  | type: string, default: 'right'  | horizontal position on your page, receives 'left' or 'right' values  |
33 | | messages  | type: array, default: [ ] | objects array with all your chat messages  |
34 | | text-field  | type: string  | name of key which is equel to your message  |
35 | | sender-name-field  |  type: string  | name of key which is equel to user's name  |
36 | | avatar-link-field  | type: string  | name of key which is equel to user's avatar link; by default it will be simple circle with the first letter of user's name  |
37 | 
38 | ### Events
39 | 
40 | | Event name  | Data | Description
41 | | ------------- | ------------- |------------- |
42 | | chatWasUpdated  | object:  {chatState: [{...}, {...}, ...]}  |  return a an object with chatState key where will be stored full messages array
43 | 
44 | -----------------------------------------------------------------------
45 | 
46 | ## Example
47 | ```vue
48 | <template>
49 |    <bubble-chat
50 |      :position="chatPosition"
51 |      :messages="messagesList"
52 |      :text-field="'message'"
53 |      :sender-name-field="'username'"
54 |      :avatar-link-field="'iconUrl'"
55 |    >
56 |    </bubble-chat>
57 | </template>
58 | 
59 | <script>
60 |  ...
61 |  data() {
62 |    return {
63 |      chatPosition: 'right',
64 |      messagesList: [
65 |       {
66 |           username: 'John Doe',
67 |           message: 'Hey guys! How are you?',
68 |           iconUrl: 'https://www.link-to-john-doe-pic.jpg'
69 |       }
70 |      ]
71 |     }
72 |  }
73 | 
74 | ...
75 | <script>
76 | ```
77 | 
78 | Enjoy!
79 | 
80 | ## License
81 | [MIT](https://choosealicense.com/licenses/mit/)


--------------------------------------------------------------------------------
/bili.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     banner: true,
 3 |     output: {
 4 |       extractCSS: false,
 5 |     },
 6 |     plugins: {
 7 |       vue: {
 8 |         css: true
 9 |       }
10 |     }
11 |   };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bubble-chat",
 3 |   "version": "1.1.1",
 4 |   "description": "Awesome vue chat component",
 5 |   "main": "./dist/index.js",
 6 |   "scripts": {
 7 |     "dev": "vue serve NiceHandsomeButton.vue",
 8 |     "build": "bili --name index --plugin vue --vue.css false"
 9 |   },
10 |   "files": [
11 |     "dist/*"
12 |   ],
13 |   "author": "Vadym Semenets <vadym.sem18@gmail.com>",
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/vadymsem/vue-bubble-chat.git"
17 |   },
18 |   "keywords": ["vue", "vue-chat", "vue-component", "chat", "chat-ui", "websocket-chat", "vue-bubble", "vue-bubble-chat"],
19 |   "bugs": {
20 |     "url": "https://github.com/vadymsem/vue-bubble-chat/issues"
21 |   },
22 |   "homepage": "https://github.com/vadymsem/vue-bubble-chat#readme",
23 |   "license": "ISC",
24 |   "devDependencies": {
25 |     "bili": "^4.8.1",
26 |     "rollup-plugin-vue": "^5.0.1",
27 |     "vue-template-compiler": "^2.6.10"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/BubbleChat.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bubble_chat_wrapper" :style="{[position]: 0}">
  3 |     <transition name="slide">
  4 |       <div class="bubble_chat_wrapper__rolled_up" v-show="!windowMode">
  5 |         <div class="messages_list">
  6 |           <div
  7 |             class="messages_list__item"
  8 |             v-for="(msgItem, index) in activeMessages"
  9 |             @click="openChat"
 10 |             :key="index + '_bubbles'"
 11 |             :class="{'hiding-out': index === 0 && messageUpdating, 
 12 |                         'showing-in' : index === 2 && messageUpdating,
 13 |                         'shake-it': index === 1 && messageUpdating}"
 14 |           >
 15 |             <div class="messages_list__item___sender">
 16 |               <img
 17 |                 v-if="msgItem[avatarLinkField]"
 18 |                 :src="msgItem[avatarLinkField]"
 19 |                 :alt="msgItem[senderNameField]"
 20 |               />
 21 |               <span v-if="!msgItem[avatarLinkField]">
 22 |                   {{msgItem[senderNameField] ? msgItem[senderNameField].charAt(0).toUpperCase() : '?' }}
 23 |                 </span>
 24 |             </div>
 25 |             <div class="messages_list__item___message">
 26 |               <span class="name">{{msgItem[senderNameField]}}</span>
 27 |               <span>{{msgItem[textField]}}</span>
 28 |             </div>
 29 |           </div>
 30 |         </div>
 31 |       </div>
 32 |     </transition>
 33 | 
 34 |     <transition name="slide">
 35 |       <div class="bubble_chat_wrapper__rolled_down" v-show="windowMode">
 36 |         <div class="bubble_chat_wrapper__rolled_down__list" ref="scrollWrapper">
 37 |           <div class="scroll">
 38 |             <div v-for="(msgObj, index) in fullMesagesList" :key="index" :class="{'mine': msgObj.isMine}">
 39 |                 <div>
 40 |                     <img v-if="msgObj[avatarLinkField]" :src="msgObj[avatarLinkField]" alt="avatar" />
 41 |                     <span class="no_image" v-if="!msgObj[avatarLinkField]">
 42 |                         {{msgObj[senderNameField] ? msgObj[senderNameField].charAt(0).toUpperCase() : '?' }}
 43 |                     </span>
 44 |                     <span class="name">{{msgObj[senderNameField]}}</span>
 45 |                     <span class="msg">{{msgObj[textField]}}</span>
 46 |                 </div>
 47 |             </div>
 48 |           </div>
 49 |         </div>
 50 |         <div class="bubble_chat_wrapper__rolled_down__input">
 51 |           <textarea 
 52 |             v-model="newMessageText"
 53 |             placeholder="Use 'Shift + Enter' to send" 
 54 |             v-on:keyup.enter.shift="sendMessage"
 55 |           ></textarea>
 56 |         </div>
 57 |       </div>
 58 |     </transition>
 59 | 
 60 |     <div class="bubble_chat_wrapper__control" @click="openChat">
 61 |       <span class="new_mesages" v-show="!windowMode && unredMessagesCount > 0">{{unredMessagesCount}}</span>
 62 |       <svg
 63 |         v-if="!windowMode"
 64 |         xmlns="http://www.w3.org/2000/svg"
 65 |         xmlns:xlink="http://www.w3.org/1999/xlink"
 66 |         version="1.1"
 67 |         id="Capa_1"
 68 |         x="0px"
 69 |         y="0px"
 70 |         viewBox="0 0 524.184 524.184"
 71 |         style="enable-background:new 0 0 524.184 524.184;fill: #fff;-webkit-transform: scale(.6);-ms-transform: scale(.6);transform: scale(.6);"
 72 |         xml:space="preserve"
 73 |       >
 74 |         <g>
 75 |           <path
 76 |             d="M483.606,75.31H40.542C18.34,75.31,0,93.65,0,115.852v292.48c0,22.201,18.34,40.542,40.542,40.542h443.064   c22.201,0,40.542-18.34,40.542-40.542v-292.48C525.113,93.65,506.772,75.31,483.606,75.31z M332.057,273.193L500.981,142.88   v261.591L332.057,273.193z M41.507,99.442h442.098c7.722,0,14.479,5.792,16.41,12.549L276.07,285.741   c-8.688,6.757-23.167,6.757-30.889,0L24.132,113.921C26.063,106.199,32.82,99.442,41.507,99.442z M24.132,404.471V144.81   l166.994,129.348L24.132,404.471z M41.507,426.672c-1.931,0-3.861,0-4.826-0.965l174.716-136.105l19.306,15.444   c8.688,6.757,19.306,9.653,29.924,9.653c10.618,0,22.201-2.896,29.924-9.653l21.236-16.41l176.646,137.07   c-1.931,0.965-2.896,0.965-4.826,0.965H41.507z"
 77 |           />
 78 |           <g />
 79 |           <g />
 80 |           <g />
 81 |           <g />
 82 |           <g />
 83 |           <g />
 84 |           <g />
 85 |           <g />
 86 |           <g />
 87 |           <g />
 88 |           <g />
 89 |           <g />
 90 |           <g />
 91 |           <g />
 92 |           <g />
 93 |         </g>
 94 |         <g />
 95 |         <g />
 96 |         <g />
 97 |         <g />
 98 |         <g />
 99 |         <g />
100 |         <g />
101 |         <g />
102 |         <g />
103 |         <g />
104 |         <g />
105 |         <g />
106 |         <g />
107 |         <g />
108 |         <g />
109 |       </svg>
110 | 
111 |       <svg
112 |         v-if="windowMode"
113 |         xmlns="http://www.w3.org/2000/svg"
114 |         xmlns:xlink="http://www.w3.org/1999/xlink"
115 |         version="1.1"
116 |         id="Capa_1"
117 |         x="0px"
118 |         y="0px"
119 |         viewBox="0 0 47.971 47.971"
120 |         style="enable-background:new 0 0 47.971 47.971;fill: #fff;
121 |     -webkit-transform: scale(.3);
122 |         -ms-transform: scale(.3);
123 |             transform: scale(.3);"
124 |         xml:space="preserve"
125 |       >
126 |         <g>
127 |           <path
128 |             d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88   c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242   C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879   s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"
129 |           />
130 |         </g>
131 |         <g />
132 |         <g />
133 |         <g />
134 |         <g />
135 |         <g />
136 |         <g />
137 |         <g />
138 |         <g />
139 |         <g />
140 |         <g />
141 |         <g />
142 |         <g />
143 |         <g />
144 |         <g />
145 |         <g />
146 |       </svg>
147 |     </div>
148 | 
149 |   </div>
150 | </template>
151 | 
152 | <script>
153 | export default {
154 |   name: "BubbleChat",
155 |   props: {
156 |     position: {
157 |       type: String,
158 |       default: "right",
159 |       validator: value => value === "right" || value === "left"
160 |     },
161 |     messages: {
162 |       type: Array,
163 |       default: () => [],
164 |     },
165 |     textField: {
166 |       type: String,
167 |       default: 'text'
168 |     },
169 |     senderNameField: {
170 |       type: String,
171 |       default: 'name'
172 |     },
173 |     avatarLinkField: {
174 |       type: String
175 |     }
176 |   },
177 |   data() {
178 |     return {
179 |       messageUpdating: false,
180 |       windowMode: false,
181 |       newMessageText: '',
182 |       fullMesagesList: [],
183 |       checkedMessages: 0
184 |     };
185 |   },
186 |   computed: {
187 |     notMineMessages() {
188 |       return this.fullMesagesList.filter((msg) => !msg.isMine).length
189 |     },
190 |     unredMessagesCount() {
191 |       return this.notMineMessages - this.checkedMessages
192 |     },
193 |     activeMessages() {
194 |       if (this.windowMode) return
195 | 
196 |       return this.fullMesagesList.length > 3
197 |         ? [...this.fullMesagesList.slice(Math.max(this.fullMesagesList.length - 3, 1))].reverse()
198 |         : [...this.fullMesagesList].reverse()
199 |     }
200 |   },
201 |   methods: {
202 |     sendMessage() {
203 |         const msg = Object.assign({}, {
204 |                 isMine: true,
205 |                 [this.$props.textField]: this.newMessageText, 
206 |                 [this.$props.senderNameField]: 'me'
207 |             }
208 |         )
209 |         this.fullMesagesList.push(msg)
210 |         this.newMessageText = ''
211 |     },
212 |     scrollDownChat() {
213 |         if(this.windowMode) {
214 |             setTimeout(() => {
215 |               this.$refs.scrollWrapper.scrollTop = this.$refs.scrollWrapper.scrollHeight
216 |             }, 100)
217 |         }
218 |     },
219 |     openChat() {
220 |       this.checkedMessages = this.notMineMessages
221 |       this.windowMode = !this.windowMode;
222 |       this.scrollDownChat()
223 |     }
224 |   },
225 |   created() {
226 |     this.fullMesagesList = this.$props.messages;
227 |   },
228 |   watch: {
229 |     'fullMesagesList': function(e) {
230 |       this.messageUpdating = true;
231 |       this.$emit('chatWasUpdated', {chatState: this.fullMesagesList })
232 |       setTimeout(() => {
233 |         this.messageUpdating = false;
234 |       }, 200);
235 |       this.scrollDownChat()
236 |     }
237 |   },
238 | };
239 | </script>
240 | 
241 | <style>
242 | 
243 | @-webkit-keyframes bubble-show-up {
244 |     from {
245 |         -webkit-transform: translate(100%, 100%);
246 |                 transform: translate(100%, 100%);
247 |         opacity: 0;
248 |     }
249 | 
250 |     to {
251 |         -webkit-transform: translate(0%, 0%);
252 |                 transform: translate(0%, 0%);
253 |         opacity: 1;
254 |     }
255 | }
256 | @keyframes bubble-show-up {
257 |     from {
258 |         -webkit-transform: translate(100%, 100%);
259 |                 transform: translate(100%, 100%);
260 |         opacity: 0;
261 |     }
262 | 
263 |     to {
264 |         -webkit-transform: translate(0%, 0%);
265 |                 transform: translate(0%, 0%);
266 |         opacity: 1;
267 |     }
268 | }
269 | 
270 | 
271 | 
272 | .slide {
273 |   -webkit-backface-visibility: hidden;
274 |           backface-visibility: hidden;
275 |   z-index: 1;
276 | }
277 | 
278 | /* moving */
279 | .slide-move {
280 |   -webkit-transition: all 300ms ease-in-out 25ms;
281 |   -o-transition: all 300ms ease-in-out 25ms;
282 |   transition: all 300ms ease-in-out 25ms;
283 | }
284 | 
285 | /* appearing */
286 | .slide-enter-active {
287 |   -webkit-transition: all 200ms ease-out;
288 |   -o-transition: all 200ms ease-out;
289 |   transition: all 200ms ease-out;
290 | }
291 | 
292 | /* disappearing */
293 | .slide-leave-active {
294 |   -webkit-transition: all 100ms ease-in;
295 |   -o-transition: all 100ms ease-in;
296 |   transition: all 100ms ease-in;
297 |   position: absolute;
298 |   z-index: 0;
299 | }
300 | 
301 | /* appear at / disappear to */
302 | .slide-enter,
303 | .slide-leave-to {
304 |   opacity: 0;
305 | }
306 | 
307 | @-webkit-keyframes hideMessage {
308 |   from {
309 |     opacity: 1;
310 |     bottom: 100px;
311 |     bottom: 85px;
312 |   }
313 |   to {
314 |     opacity: 0;
315 |     bottom: 130px;
316 |     bottom: 285px;
317 |   }
318 | }
319 | 
320 | @keyframes hideMessage {
321 |   from {
322 |     opacity: 1;
323 |     bottom: 100px;
324 |     bottom: 85px;
325 |   }
326 |   to {
327 |     opacity: 0;
328 |     bottom: 130px;
329 |     bottom: 285px;
330 |   }
331 | }
332 | 
333 | @-webkit-keyframes shaking {
334 |   from {
335 |     background-color: rgba(255, 244, 149, 0.2);
336 |     opacity: 0;
337 |   }
338 |   to {
339 |     background-color: rgba(255, 255, 255, 1);
340 |     opacity: 1;
341 |   }
342 | }
343 | 
344 | @keyframes shaking {
345 |   from {
346 |     background-color: rgba(255, 244, 149, 0.2);
347 |     opacity: 0;
348 |   }
349 |   to {
350 |     background-color: rgba(255, 255, 255, 1);
351 |     opacity: 1;
352 |   }
353 | }
354 | 
355 | @-webkit-keyframes showMessage {
356 |   from {
357 |     opacity: 0;
358 |     bottom: -50px;
359 |     right: -300px;
360 |   }
361 |   to {
362 |     opacity: 1;
363 |     bottom: 0px;
364 |     right: 0px;
365 |   }
366 | }
367 | 
368 | @keyframes showMessage {
369 |   from {
370 |     opacity: 0;
371 |     bottom: -50px;
372 |     right: -300px;
373 |   }
374 |   to {
375 |     opacity: 1;
376 |     bottom: 0px;
377 |     right: 0px;
378 |   }
379 | }
380 | 
381 | .shake-it {
382 |   -webkit-animation: shaking 0.2s ease-in;
383 |           animation: shaking 0.2s ease-in;
384 | }
385 | 
386 | .hiding-out {
387 |   -webkit-animation: hideMessage 0.2s ease-out;
388 |           animation: hideMessage 0.2s ease-out;
389 | }
390 | 
391 | .showing-in {
392 |   -webkit-animation: showMessage 0.2s ease-in;
393 |           animation: showMessage 0.2s ease-in;
394 | }
395 | 
396 | html,
397 | body {
398 |   min-width: 100%;
399 |   min-height: 100%;
400 |   margin: 0;
401 |   padding: 0;
402 | }
403 | 
404 | .bubble_chat_wrapper,
405 | .bubble_chat_wrapper * {
406 |   -webkit-box-sizing: border-box;
407 |           box-sizing: border-box;
408 | }
409 | 
410 | .bubble_chat_wrapper {
411 |   position: fixed;
412 |   padding: 5px;
413 |   z-index: 16777271;
414 |   bottom: 0;
415 |   right: 0px;
416 |   width: 320px;
417 |   height: 400px;
418 |   display: -webkit-box;
419 |   display: -ms-flexbox;
420 |   display: flex;
421 |   -webkit-box-orient: vertical;
422 |   -webkit-box-direction: reverse;
423 |       -ms-flex-direction: column-reverse;
424 |           flex-direction: column-reverse;
425 |   -webkit-box-align: end;
426 |       -ms-flex-align: end;
427 |           align-items: flex-end;
428 | }
429 | 
430 | /* bubble mode */
431 | .bubble_chat_wrapper .bubble_chat_wrapper__rolled_up {
432 |   position: fixed;
433 |   bottom: 60px;
434 | }
435 | 
436 | .bubble_chat_wrapper .bubble_chat_wrapper__rolled_up .messages_list {
437 |   width: 320px;
438 |   height: 200px;
439 |   position: relative;
440 | }
441 | 
442 | .bubble_chat_wrapper .bubble_chat_wrapper__rolled_up .messages_list__item {
443 |   display: -webkit-box;
444 |   display: -ms-flexbox;
445 |   display: flex;
446 |   -webkit-box-pack: justify;
447 |   -ms-flex-pack: justify;
448 |   justify-content: space-between;
449 |   -webkit-box-align: center;
450 |   -ms-flex-align: center;
451 |   align-items: center;
452 |   min-width: 100%;
453 |   width: 100%;
454 |   padding: 5px 10px;
455 |   background-color: #d6d6d6;
456 |   max-width: 100%;
457 |   border-radius: 10px;
458 |   background-color: #fff;
459 |   -webkit-box-shadow: 0 0 20px rgba(208, 208, 208, 0.3);    
460 |   box-shadow: 0 0 20px rgba(208, 208, 208, 0.3);
461 |   height: 100px;
462 |   -webkit-transition: 0.2s;
463 |   -o-transition: 0.2s;
464 |   transition: 0.2s;
465 |   z-index: 1;
466 |   position: absolute;
467 |   bottom: 0;
468 |   overflow: hidden;
469 | }
470 | .bubble_chat_wrapper .bubble_chat_wrapper__rolled_up .messages_list__item::before {
471 |     content: '';
472 |     position: absolute;
473 |     width: 100%;
474 |     height: 100%;
475 |     left: 0;
476 |     top: 0;
477 |     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(75%, transparent), color-stop(80%, rgba(255, 255, 255, .5)), color-stop(98%, rgb(255, 255, 255, 1)));
478 |     background-image: -o-linear-gradient(top, transparent 75%, rgba(255, 255, 255, .5) 80%, rgb(255, 255, 255, 1) 98%);
479 |     background-image: linear-gradient(180deg, transparent 75%, rgba(255, 255, 255, .5) 80%, rgb(255, 255, 255, 1) 98%);
480 |     z-index: 10;
481 | }
482 | 
483 | .bubble_chat_wrapper
484 |   .bubble_chat_wrapper__rolled_up
485 |   .messages_list__item:nth-of-type(3) {
486 |   bottom: 85px;
487 |   z-index: 1;
488 |   -webkit-transform: scale(0.8);
489 |       -ms-transform: scale(0.8);
490 |           transform: scale(0.8);
491 | }
492 | 
493 | .bubble_chat_wrapper
494 |   .bubble_chat_wrapper__rolled_up
495 |   .messages_list__item:nth-of-type(2) {
496 |   bottom: 45px;
497 |   -webkit-transform: scale(0.9);
498 |       -ms-transform: scale(0.9);
499 |           transform: scale(0.9);
500 |     z-index: 2;
501 | }
502 | 
503 | .bubble_chat_wrapper
504 |   .bubble_chat_wrapper__rolled_up
505 |   .messages_list__item:nth-of-type(1) {
506 |   bottom: 0;
507 |   -webkit-transform: scale(1);
508 |       -ms-transform: scale(1);
509 |           transform: scale(1);
510 |     z-index: 3;
511 | }
512 | 
513 | .bubble_chat_wrapper
514 |   .bubble_chat_wrapper__rolled_up
515 |   .messages_list__item:hover {
516 |   -webkit-box-shadow: 0 0 20px rgba(208, 208, 208, 0.8);    
517 |   box-shadow: 0 0 20px rgba(208, 208, 208, 0.8);
518 |   -webkit-transition: 0.2s;
519 |   -o-transition: 0.2s;
520 |   transition: 0.2s;
521 |   cursor: pointer;
522 | }
523 | 
524 | .bubble_chat_wrapper
525 |   .bubble_chat_wrapper__rolled_up
526 |   .messages_list__item:nth-of-type(2):hover {
527 |   -webkit-transform: scale(0.95) translate(0, -25px);
528 |       -ms-transform: scale(0.95) translate(0, -25px);
529 |           transform: scale(0.95) translate(0, -25px);
530 | }
531 | 
532 | .bubble_chat_wrapper
533 |   .bubble_chat_wrapper__rolled_up
534 |   .messages_list__item:nth-of-type(3):hover {
535 |   -webkit-transform: scale(0.85) translate(0, -30px);
536 |       -ms-transform: scale(0.85) translate(0, -30px);
537 |           transform: scale(0.85) translate(0, -30px);
538 | }
539 | 
540 | .bubble_chat_wrapper
541 |   .bubble_chat_wrapper__rolled_up
542 |   .messages_list__item
543 |   .messages_list__item___sender {
544 |   display: -webkit-box;
545 |   display: -ms-flexbox;
546 |   display: flex;
547 |   -webkit-box-orient: vertical;
548 |   -webkit-box-direction: normal;
549 |   -ms-flex-direction: column;
550 |   flex-direction: column;
551 |   -webkit-box-pack: justify;
552 |   -ms-flex-pack: justify;
553 |   justify-content: center;
554 |   -webkit-box-align: center;
555 |   -ms-flex-align: center;
556 |   align-items: center;
557 |   -webkit-box-flex: 1;
558 |   -ms-flex: 1;
559 |   flex: 1;
560 |   overflow: hidden;
561 | }
562 | 
563 | .bubble_chat_wrapper
564 |   .bubble_chat_wrapper__rolled_up
565 |   .messages_list__item
566 |   .messages_list__item___sender
567 |   > img {
568 |   width: 50px;
569 |   height: 50px;
570 |   border-radius: 50%;
571 |   -o-object-fit: cover;
572 |   object-fit: cover;
573 | }
574 | 
575 | .bubble_chat_wrapper
576 |   .bubble_chat_wrapper__rolled_up
577 |   .messages_list__item
578 |   .messages_list__item___sender
579 |   > span {
580 |   width: 50px;
581 |   height: 50px;
582 |   border-radius: 50%;
583 |   background-color: #98afea;
584 |   display: -webkit-box;
585 |   display: -ms-flexbox;
586 |   display: flex;
587 |   -webkit-box-align: center;
588 |       -ms-flex-align: center;
589 |           align-items: center;
590 |   -webkit-box-pack: center;
591 |       -ms-flex-pack: center;
592 |           justify-content: center;
593 |   color: #fff;
594 |   font-size: 30px;
595 |   font-weight: 100;
596 | }
597 | 
598 | .bubble_chat_wrapper
599 |   .bubble_chat_wrapper__rolled_up
600 |   .messages_list__item
601 |   .messages_list__item___message {
602 |   padding-left: 5px;
603 |   -webkit-box-flex: 4;
604 |   -ms-flex: 4;
605 |   flex: 4;
606 |   font-size: 13px;
607 |   letter-spacing: 0.3px;
608 |   min-height: 100%;
609 |   height: 100%;
610 |   display: -webkit-box;
611 |   display: -ms-flexbox;
612 |   display: flex;
613 |   -webkit-box-orient: vertical;
614 |   -webkit-box-direction: normal;
615 |   -ms-flex-direction: column;
616 |   flex-direction: column;
617 |   -webkit-box-align: start;
618 |   -ms-flex-align: start;
619 |   align-items: flex-start;
620 |   -webkit-box-pack: start;
621 |   -ms-flex-pack: start;
622 |   justify-content: flex-start;
623 |   position: relative;
624 |   z-index: 1;
625 | }
626 | 
627 | .bubble_chat_wrapper
628 |   .bubble_chat_wrapper__rolled_up
629 |   .messages_list__item
630 |   .messages_list__item___message
631 |   span {
632 |   overflow: hidden;
633 |   -o-text-overflow: ellipsis;
634 |      text-overflow: ellipsis;
635 | }
636 | 
637 | .bubble_chat_wrapper
638 |   .bubble_chat_wrapper__rolled_up
639 |   .messages_list__item
640 |   .messages_list__item___message
641 |   span.name {
642 |   display: block;
643 |   font-weight: 600;
644 |   font-size: 12px;
645 |   width: 100%;
646 |   text-align: right;
647 |   padding-right: 10px;
648 |   margin-bottom: 2px;
649 |   padding-bottom: 5px;
650 |   letter-spacing: 0.6px;
651 |   text-transform: capitalize;
652 |   position: relative;
653 | }
654 | 
655 | .bubble_chat_wrapper
656 |   .bubble_chat_wrapper__rolled_up
657 |   .messages_list__item
658 |   .messages_list__item___message
659 |   span.name::after {
660 |   content: "";
661 |   position: absolute;
662 |   width: 100%;
663 |   bottom: 0;
664 |   right: 0;
665 |   height: 1px;
666 |   background-image: -o-linear-gradient(45deg, transparent, #e2e2e2);
667 |   background-image: linear-gradient(45deg, transparent, #e2e2e2);
668 | }
669 | 
670 | .bubble_chat_wrapper
671 |   .bubble_chat_wrapper__rolled_up
672 |   .messages_list__item
673 |   .messages_list__item___message
674 |   span:last-of-type {
675 |   max-height: 100%;
676 | }
677 | 
678 | /* window mode */
679 | .bubble_chat_wrapper .bubble_chat_wrapper__rolled_down {
680 |   width: 320px;
681 |   height: 400px;
682 |   display: -webkit-box;
683 |   display: -ms-flexbox;
684 |   display: flex;
685 |   -webkit-box-orient: vertical;
686 |   -webkit-box-direction: normal;
687 |       -ms-flex-direction: column;
688 |           flex-direction: column;
689 |   position: fixed;
690 |   bottom: 60px;
691 |   padding: 2px;
692 |   background-color: #abc3ff;
693 |   border-radius: 5px;
694 |   -webkit-box-pack: justify;
695 |       -ms-flex-pack: justify;
696 |           justify-content: space-between;
697 | }
698 | 
699 | .bubble_chat_wrapper
700 |   .bubble_chat_wrapper__rolled_down
701 |   .bubble_chat_wrapper__rolled_down__list {
702 |   height: calc(100% - 52px);
703 |   display: block;
704 |   background-color: #fff;
705 |   overflow: hidden;
706 |   overflow-y: auto;
707 |   padding: 10px 0 10px 10px;
708 |   position: relative;
709 | }
710 | 
711 | .bubble_chat_wrapper
712 |   .bubble_chat_wrapper__rolled_down
713 |   .bubble_chat_wrapper__rolled_down__list .scroll {
714 |   display: -webkit-box;
715 |   display: -ms-flexbox;
716 |   display: flex;
717 |   -webkit-box-orient: vertical;
718 |   -webkit-box-direction: normal;
719 |       -ms-flex-direction: column;
720 |           flex-direction: column;
721 |   -webkit-box-pack: end;
722 |       -ms-flex-pack: end;
723 |           justify-content: flex-end;
724 |   -webkit-box-align: end;
725 |       -ms-flex-align: end;
726 |           align-items: flex-end;
727 |   padding-right: 15px;
728 |       min-height: 100%;
729 |     -webkit-box-pack: end;
730 |     -ms-flex-pack: end;
731 |             justify-content: flex-end;
732 | }
733 | 
734 | .bubble_chat_wrapper
735 |   .bubble_chat_wrapper__rolled_down::before {
736 |     content: '';
737 |     position: absolute;
738 |     width: calc(100% - 4px);
739 |     height: 100%;
740 |     top: 2px;
741 |     left: 2px;
742 |     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #fff), color-stop(10%, rgba(255, 255, 255, 0.3)), color-stop(20%, transparent), to(transparent));
743 |     background-image: -o-linear-gradient(top, #fff 3%, rgba(255, 255, 255, 0.3) 10%, transparent 20%, transparent 100%);
744 |     background-image: linear-gradient(-180deg, #fff 3%, rgba(255, 255, 255, 0.3) 10%, transparent 20%, transparent 100%);
745 |     z-index: 10;
746 |     border-radius: 4px;
747 |     pointer-events: none!important;
748 | }
749 | 
750 | .bubble_chat_wrapper
751 |   .bubble_chat_wrapper__rolled_down
752 |   .bubble_chat_wrapper__rolled_down__list .scroll > div {
753 |     border-radius: 10px;
754 |     width: 90%;
755 |     -webkit-box-shadow: 0 0 3px 0px rgba(0,0,0,.3);
756 |             box-shadow: 0 0 3px 0px rgba(0,0,0,.3);
757 |     padding: 10px;
758 |     margin: 8px 0;
759 |     display: -webkit-box;
760 |     display: -ms-flexbox;
761 |     display: flex;
762 |     -webkit-box-orient: vertical;
763 |     -webkit-box-direction: normal;
764 |         -ms-flex-direction: column;
765 |             flex-direction: column;
766 |     position: relative;
767 |     -webkit-animation: .2s bubble-show-up ease-in-out;
768 |         animation: .2s bubble-show-up ease-in-out;
769 |   }
770 | 
771 | .bubble_chat_wrapper
772 |   .bubble_chat_wrapper__rolled_down
773 |   .bubble_chat_wrapper__rolled_down__list .scroll > div.mine {
774 |     background-color: #e5edff;
775 |     -ms-flex-item-align: start;
776 |         align-self: flex-start;
777 |   }
778 | 
779 | .bubble_chat_wrapper
780 |   .bubble_chat_wrapper__rolled_down
781 |   .bubble_chat_wrapper__rolled_down__list .scroll > div.mine img,
782 | .bubble_chat_wrapper
783 |   .bubble_chat_wrapper__rolled_down
784 |   .bubble_chat_wrapper__rolled_down__list .scroll > div.mine span.no_image,
785 | .bubble_chat_wrapper
786 |   .bubble_chat_wrapper__rolled_down
787 |   .bubble_chat_wrapper__rolled_down__list .scroll > div.mine span.name  {
788 |     display: none;
789 |   }
790 | 
791 |   .bubble_chat_wrapper
792 |   .bubble_chat_wrapper__rolled_down
793 |   .bubble_chat_wrapper__rolled_down__list .scroll > div > div {
794 |     display: -webkit-box;
795 |     display: -ms-flexbox;
796 |     display: flex;
797 |     -webkit-box-orient: vertical;
798 |     -webkit-box-direction: normal;
799 |     -ms-flex-direction: column;
800 |             flex-direction: column;
801 |     -webkit-box-align: start;
802 |     -ms-flex-align: start;
803 |             align-items: flex-start;
804 |     overflow: hidden;
805 |     text-overflow: ellipsis;
806 |   }
807 | 
808 | .bubble_chat_wrapper
809 |   .bubble_chat_wrapper__rolled_down
810 |   .bubble_chat_wrapper__rolled_down__list .scroll > div img,
811 | .bubble_chat_wrapper
812 |   .bubble_chat_wrapper__rolled_down
813 |   .bubble_chat_wrapper__rolled_down__list .scroll > div span.no_image {
814 |     width: 20px;
815 |     height: 20px;
816 |     border-radius: 50%;
817 |     position: absolute;
818 |     left: -25px;
819 |     bottom: 5px;
820 |     background-color: #808080;
821 |     font-size: 10px;
822 |     color: #fff;
823 |     display: -webkit-box;
824 |     display: -ms-flexbox;
825 |     display: flex;
826 |     -webkit-box-align: center;
827 |         -ms-flex-align: center;
828 |             align-items: center;
829 |     -webkit-box-pack: center;
830 |         -ms-flex-pack: center;
831 |             justify-content: center;
832 |   }
833 | 
834 | .bubble_chat_wrapper
835 |   .bubble_chat_wrapper__rolled_down
836 |   .bubble_chat_wrapper__rolled_down__list .scroll > div span.msg {
837 |       font-size: 13px;
838 |       color: #2c2c3e;
839 |       letter-spacing: .3px;
840 |       white-space: pre-line;
841 |       width: 100%;
842 |       text-align: left;
843 |       overflow: hidden;
844 |       text-overflow: ellipsis;
845 |  }
846 | 
847 | .bubble_chat_wrapper
848 |   .bubble_chat_wrapper__rolled_down
849 |   .bubble_chat_wrapper__rolled_down__list .scroll > div span.name {
850 |     font-size: 13px;
851 |     font-weight: 500;
852 |     text-transform: capitalize;
853 |     color: #696969;
854 |     margin-bottom: 5px;
855 |     text-align: left;
856 |   }
857 | 
858 | .bubble_chat_wrapper
859 |   .bubble_chat_wrapper__rolled_down
860 |   .bubble_chat_wrapper__rolled_down__input {
861 |   height: 50px;
862 |   display: block;
863 |   background-color: #fff;
864 | }
865 | 
866 | .bubble_chat_wrapper
867 |   .bubble_chat_wrapper__rolled_down
868 |   .bubble_chat_wrapper__rolled_down__input
869 |   textarea {
870 |   width: 100%;
871 |   height: 100%;
872 |   resize: none;
873 |   outline: none;
874 |   padding: 5px 10px 10px;
875 |   font-size: 12px;
876 |   border: none;
877 | }
878 | 
879 | /* control  */
880 | .bubble_chat_wrapper .bubble_chat_wrapper__control {
881 |   width: 40px;
882 |   height: 40px;
883 |   border-radius: 50%;
884 |   background-color: #4f7dec;
885 |   display: block;
886 |   -webkit-box-shadow: 0 0 10px rgba(44, 142, 255, 0.5);
887 |           box-shadow: 0 0 10px rgba(44, 142, 255, 0.5);
888 |   cursor: pointer;
889 |   -webkit-transition: 0.4s;
890 |   -o-transition: 0.4s;
891 |   transition: 0.4s;
892 |   position: relative;
893 | }
894 | .bubble_chat_wrapper .bubble_chat_wrapper__control span.new_mesages {
895 |   position: absolute;
896 |     width: 20px;
897 |     height: 20px;
898 |     display: block;
899 |     border-radius: 50%;
900 |     background-color: #e05f1f;
901 |     color: #fff;
902 |     display: flex;
903 |     align-items: center;
904 |     font-size: 12px;
905 |     justify-content: center;
906 |     left: -5px;
907 |     top: 0px;
908 |     z-index: 10;
909 | }
910 | .bubble_chat_wrapper .bubble_chat_wrapper__control:hover {
911 |   -webkit-transition: 0.4s;
912 |   -o-transition: 0.4s;
913 |   transition: 0.4s;
914 |   -webkit-box-shadow: 0 0 10px rgba(44, 142, 255, 1);
915 |           box-shadow: 0 0 10px rgba(44, 142, 255, 1);
916 | }
917 | </style>
918 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import BubbleChat from "./BubbleChat.vue";
2 | 
3 | export default {
4 |  install(Vue, options) {
5 |   Vue.component("bubble-chat", BubbleChat);
6 |  }
7 | };


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