SHARE
TWEET

Untitled

a guest Apr 26th, 2019 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div>
  3.         <div class="arrow"></div>
  4.         <ul class="ChatLog">
  5.             <li class="ChatLog__entry" v-for="message in messages" :class="{'ChatLog__entry_mine': message.isMine}">
  6.                 <img class="ChatLog__avatar" src="/logo.png" />
  7.                 <p class="ChatLog__message">
  8.                     {{ message.text }}
  9.                     <img class="ChatLog__message__image" :src="message.attachment.url" v-if="message.attachment.type === 'image'" />
  10.                     <video controls class="ChatLog__message__image" height="160" v-if="message.attachment.type === 'video'" autoplay="">
  11.                         <source :src="message.attachment.url" type="video/mp4">
  12.                     </video>
  13.                     <audio controls class="ChatLog__message__image" v-if="message.attachment.type === 'audio'" autoplay="">
  14.                         <source :src="message.attachment.url" type="audio/mp3">
  15.                     </audio>
  16.                 </p>
  17.  
  18.                 <div v-if="message.original.type === 'actions'">
  19.                     <div class="btn" v-for="action in message.original.actions"
  20.                          @click="performAction(action.value, message.original)">
  21.                         <img v-if="action.image_url" :src="action.image_url" style="max-height: 25px" />
  22.                         {{ action.text }}
  23.                     </div>
  24.                 </div>
  25.             </li>
  26.         </ul>
  27.         <input type="text" class="ChatInput" @keyup.enter="sendMessage" v-model="newMessage" placeholder="Ieraksti ziņu">
  28.     </div>
  29. </template>
  30.  
  31. <style>
  32.     input.ChatAttachment {
  33.         width: 0.1px;
  34.         height: 0.1px;
  35.         opacity: 0;
  36.         overflow: hidden;
  37.         position: absolute;
  38.         z-index: -1;
  39.     }
  40.     .ChatAttachment+label {
  41.         cursor: pointer;
  42.         height: 25px;
  43.         display: inline-block;
  44.         border-radius: 5px;
  45.         background-color: white;
  46.         border: none;
  47.         padding: 10px;
  48.     }
  49.     input.ChatInput {
  50.         width: 300px;
  51.         height: 25px;
  52.         border-radius: 5px;
  53.         border: none;
  54.         padding: 10px;
  55.     }
  56.  
  57.     .btn {
  58.         display: block;
  59.         padding: 5px;
  60.         border-radius: 5px;
  61.         margin: 5px;
  62.         min-width: 100px;
  63.         background-color: lightgrey;
  64.     }
  65.  
  66.     ul.ChatLog {
  67.         list-style: none;
  68.     }
  69.  
  70.     .ChatLog {
  71.         max-width: 20em;
  72.         margin: 0 auto;
  73.     }
  74.     .ChatLog .ChatLog__entry {
  75.         margin: .5em;
  76.     }
  77.  
  78.     .ChatLog__entry {
  79.         display: flex;
  80.         flex-direction: row;
  81.         align-items: flex-end;
  82.         max-width: 100%;
  83.     }
  84.  
  85.     .ChatLog__entry.ChatLog__entry_mine {
  86.         flex-direction: row-reverse;
  87.     }
  88.  
  89.     .ChatLog__avatar {
  90.         flex-shrink: 0;
  91.         flex-grow: 0;
  92.         z-index: 1;
  93.         height: 50px;
  94.         width: 50px;
  95.         border-radius: 25px;
  96.  
  97.     }
  98.  
  99.     .ChatLog__entry.ChatLog__entry_mine
  100.     .ChatLog__avatar {
  101.         display: none;
  102.     }
  103.  
  104.     .ChatLog__entry .ChatLog__message {
  105.         position: relative;
  106.         margin: 0 12px;
  107.     }
  108.  
  109.     .ChatLog__entry .ChatLog__message__image {
  110.         max-width: 100%;
  111.     }
  112.  
  113.     .ChatLog__entry .ChatLog__message::before {
  114.         position: absolute;
  115.         right: auto;
  116.         bottom: .6em;
  117.         left: -12px;
  118.         height: 0;
  119.         content: '';
  120.         border: 6px solid transparent;
  121.         border-right-color: #ddd;
  122.         z-index: 2;
  123.     }
  124.  
  125.     .ChatLog__entry.ChatLog__entry_mine .ChatLog__message::before {
  126.         right: -12px;
  127.         bottom: .6em;
  128.         left: auto;
  129.         border: 6px solid transparent;
  130.         border-left-color: #08f;
  131.     }
  132.  
  133.     .ChatLog__message {
  134.         background-color: #ddd;
  135.         padding: .5em;
  136.         border-radius: 4px;
  137.         font-weight: lighter;
  138.         max-width: 70%;
  139.     }
  140.  
  141.     .ChatLog__entry.ChatLog__entry_mine .ChatLog__message {
  142.         border-top: 1px solid #07f;
  143.         border-bottom: 1px solid #07f;
  144.         background-color: #08f;
  145.         color: #fff;
  146.     }
  147. </style>
  148.  
  149. <script>
  150.     const axios = require('axios');
  151.  
  152.     export default {
  153.         props: {
  154.             apiEndpoint: {
  155.                 default: '/botman',
  156.             },
  157.             userId: {
  158.                 default: +(new Date()),
  159.             },
  160.         },
  161.  
  162.         data() {
  163.             return {
  164.                 messages: [],
  165.                 newMessage: null
  166.             };
  167.         },
  168.  
  169.         methods: {
  170.             callAPI(text, interactive = false, attachment = null, callback) {
  171.                 let data = new FormData();
  172.                 const postData = {
  173.                     driver: 'web',
  174.                     userId: this.userId,
  175.                     message: text,
  176.                     attachment,
  177.                     interactive
  178.                 };
  179.  
  180.                 Object.keys(postData).forEach(key => data.append(key, postData[key]));
  181.  
  182.                 axios.post(this.apiEndpoint, data).then(response => {
  183.                     const messages = response.data.messages || [];
  184.                     messages.forEach(msg => {
  185.                         this._addMessage(msg.text, msg.attachment, false, msg);
  186.                     });
  187.                     if (callback) {
  188.                         callback(response.data);
  189.                     }
  190.                 });
  191.             },
  192.  
  193.             performAction(value, message) {
  194.                 this.callAPI(value, true, null, (response) => {
  195.                     message.actions = null;
  196.                 });
  197.             },
  198.  
  199.             _addMessage(text, attachment, isMine, original = {}) {
  200.                 this.messages.push({
  201.                     'isMine': isMine,
  202.                     'user': isMine ? '👨' : '🤖',
  203.                     'text': text,
  204.                     'original': original,
  205.                     'attachment': attachment || {},
  206.                 });
  207.             },
  208.  
  209.             sendMessage() {
  210.                 let messageText = this.newMessage;
  211.                 this.newMessage = '';
  212.                 if (messageText === 'clear') {
  213.                     this.messages = [];
  214.                     return;
  215.                 }
  216.  
  217.                 this._addMessage(messageText, null, true);
  218.  
  219.                 this.callAPI(messageText);
  220.             }
  221.         }
  222.     }
  223. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top