{"version":3,"sources":["webpack:///./src/views/Support/Support.vue","webpack:///src/views/Support/Support.vue","webpack:///./src/views/Support/Support.vue?fd7d","webpack:///./src/views/Support/Support.vue?57e7","webpack:///./src/views/Support/Support.vue?2ecd"],"names":["render","_vm","this","_c","_self","staticStyle","staticClass","attrs","_v","on","$event","openTawkTo","padding","conversationItemSelected","backToConversationList","_e","toggleFilterByDate","_s","_f","createdAt","refreshConversation","model","value","dateFilterVal","callback","$$v","expression","refreshChatHistory","messageItems","length","scrollToEnd","directives","name","rawName","isLoadingConversation","style","suppressScrollX","conversationItems","_l","conversationItem","key","id","changeConversation","lastMessage","isLoading","messageItem","class","isContactMsg","content","staticRenderFns","components","VClamp","data","quality","isInitedConversation","currentPageConversation","isInited","currentPage","computed","mapState","user","mounted","beforeDestroy","$","methods","getChatHistory","conversationId","page","pageSize","api","then","scrollTop","catch","console","loadOlder","chatScroller","scrollReachStart","getChatConversation","requestParams","xItem","additionalAttributesData","loadOlderConversation","component"],"mappings":"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","file":"js/chunk-4c6e7ad2.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('VuePerfectScrollbar',{staticStyle:{\"height\":\"calc(100vh - 4rem)\",\"background-color\":\"#f5f5f5\"}},[_c('div',{staticClass:\"d-flex flex-column align-items-center\",staticStyle:{\"margin-top\":\"2.6rem\"}},[_c('img',{staticStyle:{\"height\":\"2rem\"},attrs:{\"src\":\"/logo/iRender-fulltext.svg\",\"alt\":\"\"}}),_c('div',{staticStyle:{\"color\":\"#1967d2\",\"font-size\":\"1.5rem\",\"margin-top\":\"0.5rem\",\"text-shadow\":\"2px 2px #ffffff\"}},[_vm._v(\"\\n            iRender Support Center\\n        \")])]),_c('div',{staticClass:\"d-flex flex-column flex-lg-row m-auto justify-content-center\",staticStyle:{\"width\":\"auto\"}},[_c('div',{staticClass:\"d-flex flex-column align-items-center mt-5 mb-5 row-eq-height\"},[_c('div',[_c('el-card',{staticClass:\"box-card mb-5\"},[_c('div',{staticClass:\"d-flex flex-row justify-content-center align-items-center\"},[_c('div',{staticClass:\"d-flex justify-content-center align-items-center\"},[_c('img',{staticStyle:{\"height\":\"17.5rem\"},attrs:{\"src\":\"/background/support/support-background-1.svg\",\"alt\":\"\"}})]),_c('div',{staticClass:\"d-flex flex-column flex-fill align-items-center\",staticStyle:{\"margin-left\":\"1rem\"}},[_c('div',{staticClass:\"d-flex justify-content-center\",staticStyle:{\"font-size\":\"1.2rem\",\"color\":\"#42a5f5\"}},[_vm._v(\"\\n                                Live support 24/7\\n                            \")]),_c('div',{staticClass:\"d-flex flex-row justify-content-center align-items-center flex-fill mt-5\"},[_c('div',{staticClass:\"d-flex flex-column justify-content-center align-items-end mr-2\",staticStyle:{\"color\":\"#9e9e9e\",\"font-size\":\"0.85rem\"}},[_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_vm._v(\"\\n                                        Skype support\\n                                    \")]),_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_vm._v(\"\\n                                        Quick chat\\n                                    \")])]),_c('div',{staticClass:\"d-flex flex-column justify-content-center ml-2\",staticStyle:{\"font-size\":\"0.85rem\"}},[_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_c('el-link',{attrs:{\"href\":\"https://join.skype.com/invite/qo5nEkWfKgyF\",\"target\":\"_blank\",\"underline\":false}},[_vm._v(\"iRender Support\")])],1),_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_c('el-button',{attrs:{\"type\":\"text\"},on:{\"click\":function($event){return _vm.openTawkTo()}}},[_vm._v(\"Chat now\")])],1)])])])])]),_c('el-card',{staticClass:\"box-card\"},[_c('div',{staticClass:\"d-flex flex-row justify-content-center align-items-center\"},[_c('div',{staticClass:\"d-flex flex-column flex-fill align-items-center\",staticStyle:{\"margin-left\":\"1rem\"}},[_c('div',{staticClass:\"d-flex justify-content-center\",staticStyle:{\"font-size\":\"1.2rem\",\"color\":\"#42a5f5\"}},[_vm._v(\"\\n                                Receive complaints and questions\\n                            \")]),_c('div',{staticClass:\"d-flex flex-row justify-content-center align-items-center flex-fill mt-5\"},[_c('div',{staticClass:\"d-flex flex-column justify-content-center align-items-end mr-2\",staticStyle:{\"color\":\"#9e9e9e\",\"font-size\":\"0.85rem\"}},[_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_vm._v(\"\\n                                        Email\\n                                    \")]),_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_vm._v(\"\\n                                        Whatsapp\\n                                    \")]),_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_vm._v(\"\\n                                        Skype\\n                                    \")]),_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_vm._v(\"\\n                                        Zalo\\n                                    \")])]),_c('div',{staticClass:\"d-flex flex-column justify-content-center ml-2\",staticStyle:{\"font-size\":\"0.85rem\"}},[_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_c('el-link',{attrs:{\"href\":\"mailto:support@irender.net\",\"target\":\"_blank\",\"underline\":false}},[_vm._v(\"support@irender.net\")])],1),_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_c('el-link',{attrs:{\"href\":`whatsapp://send?phone=+84912785500&text=Hello%2C%20World!`,\"target\":\"_blank\",\"underline\":false}},[_vm._v(\"+(84) 912-785-500\")])],1),_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_c('el-link',{attrs:{\"href\":\"https://join.skype.com/invite/qo5nEkWfKgyF\",\"target\":\"_blank\",\"underline\":false}},[_vm._v(\"iRender Support\")])],1),_c('div',{staticClass:\"d-flex align-items-center\",staticStyle:{\"height\":\"1.75rem\"}},[_c('el-link',{attrs:{\"href\":\"http://zalo.me/+84962868890\",\"target\":\"_blank\",\"underline\":false}},[_vm._v(\"+(84)\\n                                            962-868-890\")])],1)])])]),_c('div',{staticClass:\"d-flex justify-content-center align-items-center\"},[_c('img',{staticStyle:{\"height\":\"17.5rem\"},attrs:{\"src\":\"/background/support/support-background-2.svg\",\"alt\":\"\"}})])])])],1)]),_c('div',{staticClass:\"ml-0 ml-lg-4 mt-0 mt-lg-5 d-flex flex-row flex-lg-column justify-content-center align-items-center mb-5 chat-history-block\"},[_c('el-card',{staticClass:\"box-card m-auto d-block d-lg-flex flex-column chat-history-box flex-fill w-100\",attrs:{\"body-style\":{ padding: '0.5rem 0' }}},[_c('div',{staticClass:\"d-flex align-items-center w-100\"},[_c('div',{staticClass:\"flex-fill d-flex align-items-center pl-2\",staticStyle:{\"font-size\":\"1.2rem\",\"color\":\"#42a5f5\"}},[(_vm.conversationItemSelected !== null)?_c('div',[_c('el-tooltip',{attrs:{\"content\":\"Go back list conversations\",\"placement\":\"top\"}},[_c('el-button',{staticClass:\"mr-1 p-0 m-0\",attrs:{\"type\":\"text\"},on:{\"click\":_vm.backToConversationList}},[_c('i',{staticClass:\"el-icon-arrow-left\",staticStyle:{\"font-size\":\"1.5rem\"}})])],1)],1):_vm._e(),_c('transition',{attrs:{\"name\":\"fade\"}},[(_vm.conversationItemSelected === null && !_vm.toggleFilterByDate)?_c('div',{staticClass:\"text-nowrap\"},[_c('i',{staticClass:\"el-icon-chat-line-round\"}),_vm._v(\" Conversations\\n                            \")]):_vm._e()]),_c('transition',{attrs:{\"name\":\"fade\"}},[(_vm.conversationItemSelected !== null)?_c('div',[_c('i',{staticClass:\"el-icon-chat-line-round\"}),_vm._v(\" Conversation \"+_vm._s(_vm._f(\"pretyDateUtcToLocal\")(_vm.conversationItemSelected.createdAt))+\"\\n                            \")]):_vm._e()])],1),_c('div',{staticClass:\"d-flex align-items-center\"},[_c('transition',{attrs:{\"name\":\"slide\"}},[(_vm.conversationItemSelected === null && _vm.toggleFilterByDate)?_c('div',{staticClass:\"mr-2\"},[_c('el-date-picker',{attrs:{\"range-separator\":\"To\",\"size\":\"mini\",\"type\":\"date\",\"format\":\"yyyy-MM-dd\",\"value-format\":\"yyyy-MM-dd\",\"placeholder\":\"Pick a date\"},on:{\"change\":_vm.refreshConversation},model:{value:(_vm.dateFilterVal),callback:function ($$v) {_vm.dateFilterVal=$$v},expression:\"dateFilterVal\"}})],1):_vm._e()]),_c('div',{staticClass:\"pr-1\",staticStyle:{\"background-color\":\"#fff\"}},[(_vm.conversationItemSelected === null && !_vm.toggleFilterByDate)?_c('el-tooltip',{attrs:{\"content\":\"Filter by date\",\"placement\":\"top\"}},[_c('el-button',{staticClass:\"mr-2 p-0 m-0\",attrs:{\"type\":\"text\"},on:{\"click\":function($event){_vm.toggleFilterByDate = true}}},[_c('i',{staticClass:\"el-icon-date\",staticStyle:{\"font-size\":\"1.5rem\"}})])],1):_vm._e(),(_vm.conversationItemSelected === null && _vm.toggleFilterByDate)?_c('el-tooltip',{attrs:{\"content\":\"Close filter\",\"placement\":\"top\"}},[_c('el-button',{staticClass:\"mr-2 p-0 m-0\",attrs:{\"type\":\"text\"},on:{\"click\":function($event){_vm.dateFilterVal = null; _vm.toggleFilterByDate = false; _vm.refreshConversation();}}},[_c('i',{staticClass:\"el-icon-close text-danger\",staticStyle:{\"font-size\":\"1.5rem\"}})])],1):_vm._e(),(_vm.conversationItemSelected === null)?_c('el-tooltip',{attrs:{\"content\":\"Refresh\",\"placement\":\"top\"}},[_c('el-button',{staticClass:\"mr-2 p-0 m-0\",attrs:{\"type\":\"text\"},on:{\"click\":_vm.refreshConversation}},[_c('i',{staticClass:\"el-icon-refresh\",staticStyle:{\"font-size\":\"1.5rem\"}})])],1):_vm._e(),(_vm.conversationItemSelected !== null)?_c('el-tooltip',{attrs:{\"content\":\"Refresh\",\"placement\":\"top\"}},[_c('el-button',{staticClass:\"mr-2 p-0 m-0\",attrs:{\"type\":\"text\"},on:{\"click\":_vm.refreshChatHistory}},[_c('i',{staticClass:\"el-icon-refresh\",staticStyle:{\"font-size\":\"1.5rem\"}})])],1):_vm._e(),(_vm.conversationItemSelected !== null && _vm.messageItems.length > 0)?_c('el-tooltip',{staticClass:\"ml-2\",attrs:{\"content\":\"Go to last message\",\"placement\":\"top\"}},[_c('el-button',{staticClass:\"mr-2 p-0 m-0\",attrs:{\"type\":\"text\"},on:{\"click\":_vm.scrollToEnd}},[_c('i',{staticClass:\"el-icon-bottom\",staticStyle:{\"font-size\":\"1.5rem\"}})])],1):_vm._e()],1)],1)]),_c('div',{staticClass:\"chat-box-content flex-fill position-relative ml-2 mr-2\"},[_c('div',{directives:[{name:\"loading\",rawName:\"v-loading\",value:(_vm.isLoadingConversation),expression:\"isLoadingConversation\"}],staticClass:\"position-absolute d-flex flex-column w-100 h-100 animatied-left-position\",style:(`left: ${_vm.conversationItemSelected === null ? 0 : -100}%; z-index: ${_vm.conversationItemSelected === null ? 'auto' : -1};`)},[_c('VuePerfectScrollbar',{staticClass:\"flex-fill w-100 pr-3 mt-2 pr-2 list-group-wrapper\",staticStyle:{\"height\":\"100px\"},attrs:{\"id\":\"chatScrollerConversation\",\"settings\":{ suppressScrollX: true }}},[(_vm.conversationItems.length > 0)?_c('div',{staticClass:\"mt-2 ml-2 w-100\"},[_c('ul',{staticClass:\"list-group\"},_vm._l((_vm.conversationItems),function(conversationItem){return _c('li',{key:conversationItem.id,staticClass:\"list-group-item pl-2 w-100\",attrs:{\"id\":`conversationItemId_${conversationItem.id}`}},[_c('a',{staticClass:\"d-block\",attrs:{\"href\":\"javascript:void();\"},on:{\"click\":function($event){return _vm.changeConversation(conversationItem)}}},[_c('div',{staticClass:\"w-100 d-flex align-items-center\"},[_c('div',{staticClass:\"mr-1\",staticStyle:{\"color\":\"rgb(66, 165, 245)\"}},[_c('i',{staticClass:\"el-icon-chat-dot-square fa-3x\"})]),_c('div',[_c('div',[_c('strong',{staticClass:\"text-nowrap\",staticStyle:{\"color\":\"rgb(66, 165, 245)\"}},[_vm._v(\"\\n                                                            Conversation \"+_vm._s(_vm._f(\"pretyDateUtcToLocal\")(conversationItem.createdAt))+\"\\n                                                        \")])]),_c('div',{staticClass:\"text-muted\",staticStyle:{\"font-size\":\"85%\"}},[_c('v-clamp',{attrs:{\"autoresize\":\"\",\"max-lines\":1}},[_vm._v(_vm._s(conversationItem.lastMessage))])],1)])])])])}),0)]):_c('div',{staticClass:\"d-flex align-items-center justify-content-center flex-fill w-100 mt-5\",staticStyle:{\"position\":\"absolute\",\"top\":\"0\",\"left\":\"0\",\"height\":\"calc(100% - 10rem)\",\"width\":\"100%\"}},[_c('div',{staticClass:\"d-block text-center\"},[_c('svg',{staticStyle:{\"width\":\"40%\"},attrs:{\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\"}},[_c('path',{attrs:{\"d\":\"M22 10V13C22 17 20 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19H8C4 19 2 18 2 13V8C2 4 4 2 8 2H14\",\"stroke\":\"#777\",\"stroke-width\":\"1.5\",\"stroke-miterlimit\":\"10\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}}),_c('path',{attrs:{\"opacity\":\"0.4\",\"d\":\"M19.5 7C20.8807 7 22 5.88071 22 4.5C22 3.11929 20.8807 2 19.5 2C18.1193 2 17 3.11929 17 4.5C17 5.88071 18.1193 7 19.5 7Z\",\"stroke\":\"#292D32\",\"stroke-width\":\"1.5\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}}),_c('path',{attrs:{\"opacity\":\"0.4\",\"d\":\"M15.9965 11H16.0054\",\"stroke\":\"#292D32\",\"stroke-width\":\"2\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}}),_c('path',{attrs:{\"opacity\":\"0.4\",\"d\":\"M11.9945 11H12.0035\",\"stroke\":\"#292D32\",\"stroke-width\":\"2\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}}),_c('path',{attrs:{\"opacity\":\"0.4\",\"d\":\"M7.99451 11H8.00349\",\"stroke\":\"#292D32\",\"stroke-width\":\"2\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}})]),_c('div',{staticClass:\"text-center text-muted\"},[_c('div',[_c('strong',[_vm._v(\"There is no conversation\")])]),_c('p',{staticClass:\"text-muted\"},[_vm._v(\"Conversation will show when you make conversation !\")])])])])])],1),_c('div',{directives:[{name:\"loading\",rawName:\"v-loading\",value:(_vm.isLoading),expression:\"isLoading\"}],staticClass:\"position-absolute d-flex flex-column w-100 h-100 animatied-left-position\",style:(`left: ${_vm.conversationItemSelected !== null ? 0 : 100}%;`)},[_c('VuePerfectScrollbar',{staticClass:\"flex-fill w-100 pr-3 mt-2\",staticStyle:{\"height\":\"100px\"},attrs:{\"id\":\"chatScroller\",\"settings\":{ suppressScrollX: true }}},[(_vm.messageItems.length > 0)?_c('div',{staticClass:\"mt-2 ml-2 d-flex flex-column w-100\"},_vm._l((_vm.messageItems),function(messageItem){return _c('div',{key:messageItem.id,staticClass:\"d-flex\",class:{ 'justify-content-end' : _vm.isContactMsg(messageItem), 'justify-content-start' : !_vm.isContactMsg(messageItem) },attrs:{\"id\":`messageItemId_${messageItem.id}`}},[_c('div',{staticClass:\"bubble\",class:{ 'bubble-right' : _vm.isContactMsg(messageItem), 'bubble-left' : !_vm.isContactMsg(messageItem) }},[(messageItem.content)?_c('div',[_vm._v(_vm._s(messageItem.content))]):_c('div',[_c('div',{staticClass:\"text-left\"},[_c('i',{staticClass:\"el-icon-paperclip\"}),_c('i',[_vm._v(\"Sent an attachment\")])])]),_c('div',{staticClass:\"mt-1\",staticStyle:{\"font-size\":\"80%\",\"opacity\":\"0.6\",\"font-style\":\"italic\"}},[_c('i',{staticClass:\"el-icon-time\"}),_vm._v(\" \"+_vm._s(_vm._f(\"pretyDateUtcToLocal\")(messageItem.createdAt))+\"\\n                                        \")])])])}),0):_c('div',{staticClass:\"d-flex align-items-center justify-content-center flex-fill w-100 mt-5\",staticStyle:{\"position\":\"absolute\",\"top\":\"0\",\"left\":\"0\",\"height\":\"calc(100% - 10rem)\",\"width\":\"100%\"}},[_c('div',{staticClass:\"d-block text-center\"},[_c('svg',{staticStyle:{\"width\":\"40%\"},attrs:{\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\"}},[_c('path',{attrs:{\"d\":\"M22 10V13C22 17 20 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19H8C4 19 2 18 2 13V8C2 4 4 2 8 2H14\",\"stroke\":\"#777\",\"stroke-width\":\"1.5\",\"stroke-miterlimit\":\"10\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}}),_c('path',{attrs:{\"opacity\":\"0.4\",\"d\":\"M19.5 7C20.8807 7 22 5.88071 22 4.5C22 3.11929 20.8807 2 19.5 2C18.1193 2 17 3.11929 17 4.5C17 5.88071 18.1193 7 19.5 7Z\",\"stroke\":\"#292D32\",\"stroke-width\":\"1.5\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}}),_c('path',{attrs:{\"opacity\":\"0.4\",\"d\":\"M15.9965 11H16.0054\",\"stroke\":\"#292D32\",\"stroke-width\":\"2\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}}),_c('path',{attrs:{\"opacity\":\"0.4\",\"d\":\"M11.9945 11H12.0035\",\"stroke\":\"#292D32\",\"stroke-width\":\"2\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}}),_c('path',{attrs:{\"opacity\":\"0.4\",\"d\":\"M7.99451 11H8.00349\",\"stroke\":\"#292D32\",\"stroke-width\":\"2\",\"stroke-linecap\":\"round\",\"stroke-linejoin\":\"round\"}})]),_c('div',{staticClass:\"text-center text-muted\"},[_c('div',[_c('strong',[_vm._v(\"There is no message\")])]),_c('p',{staticClass:\"text-muted\"},[_vm._v(\"It seems that the you has never chat with via us !\")])])])])])],1)])])],1)])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <VuePerfectScrollbar style=\"height: calc(100vh - 4rem); background-color: #f5f5f5\">\r\n        <div class=\"d-flex flex-column align-items-center\" style=\"margin-top: 2.6rem\">\r\n            <img src=\"/logo/iRender-fulltext.svg\" style=\"height: 2rem\" alt=\"\" />\r\n            <div style=\" color: #1967d2; font-size: 1.5rem; margin-top: 0.5rem; text-shadow: 2px 2px #ffffff; \">\r\n                iRender Support Center\r\n            </div>\r\n        </div>\r\n        <div class=\"d-flex flex-column flex-lg-row m-auto justify-content-center\" style=\"width: auto\">\r\n            <div class=\"d-flex flex-column align-items-center mt-5 mb-5 row-eq-height\">\r\n                <div>\r\n                    <el-card class=\"box-card mb-5\">\r\n                        <div class=\"d-flex flex-row justify-content-center align-items-center\">\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <img src=\"/background/support/support-background-1.svg\" style=\"height: 17.5rem\" alt=\"\" />\r\n                            </div>\r\n                            <div class=\"d-flex flex-column flex-fill align-items-center\" style=\"margin-left: 1rem\">\r\n                                <div class=\"d-flex justify-content-center\" style=\"font-size: 1.2rem; color: #42a5f5\">\r\n                                    Live support 24/7\r\n                                </div>\r\n                                <div class=\" d-flex flex-row justify-content-center align-items-center flex-fill mt-5 \">\r\n                                    <div class=\" d-flex flex-column justify-content-center align-items-end mr-2 \"\r\n                                        style=\"color: #9e9e9e; font-size: 0.85rem\">\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            Skype support\r\n                                        </div>\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            Quick chat\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"d-flex flex-column justify-content-center ml-2\" style=\"font-size: 0.85rem\">\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            <el-link href=\"https://join.skype.com/invite/qo5nEkWfKgyF\" target=\"_blank\"\r\n                                                :underline=\"false\">iRender Support</el-link>\r\n                                        </div>\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            <el-button @click=\"openTawkTo()\" type=\"text\">Chat now</el-button>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </el-card>\r\n                    <el-card class=\"box-card\">\r\n                        <div class=\"d-flex flex-row justify-content-center align-items-center\">\r\n                            <div class=\"d-flex flex-column flex-fill align-items-center\" style=\"margin-left: 1rem\">\r\n                                <div class=\"d-flex justify-content-center\" style=\"font-size: 1.2rem; color: #42a5f5\">\r\n                                    Receive complaints and questions\r\n                                </div>\r\n                                <div class=\" d-flex flex-row justify-content-center align-items-center flex-fill mt-5 \">\r\n                                    <div class=\" d-flex flex-column justify-content-center align-items-end mr-2 \"\r\n                                        style=\"color: #9e9e9e; font-size: 0.85rem\">\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            Email\r\n                                        </div>\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            Whatsapp\r\n                                        </div>\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            Skype\r\n                                        </div>\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            Zalo\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"d-flex flex-column justify-content-center ml-2\" style=\"font-size: 0.85rem\">\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            <el-link href=\"mailto:support@irender.net\" target=\"_blank\"\r\n                                                :underline=\"false\">support@irender.net</el-link>\r\n                                        </div>\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            <el-link :href=\"`whatsapp://send?phone=+84912785500&text=Hello%2C%20World!`\"\r\n                                                target=\"_blank\" :underline=\"false\">+(84) 912-785-500</el-link>\r\n                                        </div>\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            <el-link href=\"https://join.skype.com/invite/qo5nEkWfKgyF\" target=\"_blank\"\r\n                                                :underline=\"false\">iRender Support</el-link>\r\n                                        </div>\r\n                                        <div class=\"d-flex align-items-center\" style=\"height: 1.75rem\">\r\n                                            <el-link href=\"http://zalo.me/+84962868890\" target=\"_blank\"\r\n                                                :underline=\"false\">+(84)\r\n                                                962-868-890</el-link>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <img src=\"/background/support/support-background-2.svg\" style=\"height: 17.5rem\" alt=\"\" />\r\n                            </div>\r\n                        </div>\r\n                    </el-card>\r\n                </div>\r\n            </div>\r\n            <div class=\"ml-0 ml-lg-4 mt-0 mt-lg-5 d-flex flex-row flex-lg-column justify-content-center align-items-center mb-5 chat-history-block\">\r\n                <el-card class=\"box-card m-auto d-block d-lg-flex flex-column chat-history-box flex-fill w-100\" \r\n                    :body-style=\"{ padding: '0.5rem 0' }\">\r\n                    <div class=\"d-flex align-items-center w-100\">\r\n                        <div class=\"flex-fill d-flex align-items-center pl-2\" \r\n                            style=\"font-size: 1.2rem; color: #42a5f5\">\r\n                            <div v-if=\"conversationItemSelected !== null\">\r\n                                <el-tooltip content=\"Go back list conversations\" placement=\"top\">\r\n                                    <el-button type=\"text\" class=\"mr-1 p-0 m-0\"\r\n                                        @click=\"backToConversationList\">\r\n                                        <i class=\"el-icon-arrow-left\" style=\"font-size: 1.5rem;\"></i>\r\n                                    </el-button>\r\n                                </el-tooltip>\r\n                            </div>\r\n                            <transition name=\"fade\">\r\n                                <div v-if=\"conversationItemSelected === null && !toggleFilterByDate\"\r\n                                    class=\"text-nowrap\">\r\n                                    <i class=\"el-icon-chat-line-round\"></i> Conversations\r\n                                </div>\r\n                            </transition>\r\n                            <transition name=\"fade\">\r\n                                <div v-if=\"conversationItemSelected !== null\">\r\n                                    <i class=\"el-icon-chat-line-round\"></i> Conversation {{conversationItemSelected.createdAt | pretyDateUtcToLocal}}\r\n                                </div>\r\n                            </transition>\r\n                        </div>\r\n                        <div class=\"d-flex align-items-center\">\r\n                            <transition name=\"slide\">\r\n                                <div class=\"mr-2\" \r\n                                    v-if=\"conversationItemSelected === null && toggleFilterByDate\">\r\n                                    <el-date-picker\r\n                                        v-model=\"dateFilterVal\"\r\n                                        range-separator=\"To\"\r\n                                        size=\"mini\"\r\n                                        type=\"date\"\r\n                                        format=\"yyyy-MM-dd\"\r\n                                        value-format=\"yyyy-MM-dd\"\r\n                                        placeholder=\"Pick a date\"\r\n                                        @change=\"refreshConversation\">\r\n                                    </el-date-picker>\r\n                                </div>\r\n                            </transition>\r\n\r\n                            <div class=\"pr-1\" style=\"background-color: #fff;\">\r\n                                <el-tooltip content=\"Filter by date\" placement=\"top\"\r\n                                    v-if=\"conversationItemSelected === null && !toggleFilterByDate\">\r\n                                    <el-button type=\"text\" class=\"mr-2 p-0 m-0\"\r\n                                        @click=\"toggleFilterByDate = true\">\r\n                                        <i class=\"el-icon-date\" style=\"font-size: 1.5rem;\"></i>\r\n                                    </el-button>\r\n                                </el-tooltip>\r\n\r\n                                <el-tooltip content=\"Close filter\" placement=\"top\"\r\n                                    v-if=\"conversationItemSelected === null && toggleFilterByDate\">\r\n                                    <el-button type=\"text\" class=\"mr-2 p-0 m-0\"\r\n                                        @click=\"dateFilterVal = null; toggleFilterByDate = false; refreshConversation();\">\r\n                                        <i class=\"el-icon-close text-danger\" style=\"font-size: 1.5rem;\"></i>\r\n                                    </el-button>\r\n                                </el-tooltip>\r\n\r\n                                <el-tooltip content=\"Refresh\" placement=\"top\"\r\n                                    v-if=\"conversationItemSelected === null\">\r\n                                    <el-button type=\"text\" class=\"mr-2 p-0 m-0\"\r\n                                        @click=\"refreshConversation\">\r\n                                        <i class=\"el-icon-refresh\" style=\"font-size: 1.5rem;\"></i>\r\n                                    </el-button>\r\n                                </el-tooltip>\r\n\r\n                                <el-tooltip content=\"Refresh\" placement=\"top\"\r\n                                    v-if=\"conversationItemSelected !== null\">\r\n                                    <el-button type=\"text\" class=\"mr-2 p-0 m-0\"\r\n                                        @click=\"refreshChatHistory\">\r\n                                        <i class=\"el-icon-refresh\" style=\"font-size: 1.5rem;\"></i>\r\n                                    </el-button>\r\n                                </el-tooltip>\r\n\r\n                                \r\n                                <el-tooltip content=\"Go to last message\" placement=\"top\" class=\"ml-2\"\r\n                                    v-if=\"conversationItemSelected !== null && messageItems.length > 0\">\r\n                                    <el-button type=\"text\" class=\"mr-2 p-0 m-0\"\r\n                                        @click=\"scrollToEnd\">\r\n                                        <i class=\"el-icon-bottom\" style=\"font-size: 1.5rem;\"></i>\r\n                                    </el-button>\r\n                                </el-tooltip>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"chat-box-content flex-fill position-relative ml-2 mr-2\">\r\n                        <div class=\"position-absolute d-flex flex-column w-100 h-100 animatied-left-position\"\r\n                            :style=\"`left: ${conversationItemSelected === null ? 0 : -100}%; z-index: ${conversationItemSelected === null ? 'auto' : -1};`\"\r\n                            v-loading=\"isLoadingConversation\">\r\n                            <VuePerfectScrollbar class=\"flex-fill w-100 pr-3 mt-2 pr-2 list-group-wrapper\"\r\n                                id=\"chatScrollerConversation\"\r\n                                :settings=\"{ suppressScrollX: true }\"\r\n                                style=\"height: 100px;\">\r\n                                <div class=\"mt-2 ml-2 w-100\"\r\n                                    v-if=\"conversationItems.length > 0\">\r\n                                    <ul class=\"list-group\">\r\n                                        <li class=\"list-group-item pl-2 w-100 \"\r\n                                            v-for=\"conversationItem in conversationItems\"\r\n                                            :key=\"conversationItem.id\" \r\n                                            :id=\"`conversationItemId_${conversationItem.id}`\">                                    \r\n                                            <a href=\"javascript:void();\" class=\"d-block\"\r\n                                                @click=\"changeConversation(conversationItem)\">\r\n                                                <div class=\"w-100 d-flex align-items-center\">\r\n                                                    <div class=\"mr-1\" style=\"color: rgb(66, 165, 245);\">\r\n                                                        <i class=\"el-icon-chat-dot-square fa-3x\"></i>\r\n                                                    </div>\r\n                                                    <div>\r\n                                                        <div>\r\n                                                            <strong class=\"text-nowrap\" style=\"color: rgb(66, 165, 245);\">\r\n                                                                Conversation {{conversationItem.createdAt | pretyDateUtcToLocal}}\r\n                                                            </strong>\r\n                                                        </div>\r\n                                                        <div style=\"font-size: 85%;\" class=\"text-muted\">\r\n                                                            <v-clamp autoresize :max-lines=\"1\">{{conversationItem.lastMessage}}</v-clamp>\r\n                                                        </div>   \r\n                                                    </div>  \r\n                                                </div>\r\n                                            </a>\r\n                                        </li>\r\n                                    </ul>\r\n                                </div>\r\n                                <div v-else class=\"d-flex align-items-center justify-content-center flex-fill w-100 mt-5\"\r\n                                    style=\"position: absolute; top: 0; left: 0; height: calc(100% - 10rem); width: 100%;\">\r\n                                    <div class=\"d-block text-center\">\r\n                                        <svg style=\"width: 40%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path d=\"M22 10V13C22 17 20 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19H8C4 19 2 18 2 13V8C2 4 4 2 8 2H14\" stroke=\"#777\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                            <path opacity=\"0.4\" d=\"M19.5 7C20.8807 7 22 5.88071 22 4.5C22 3.11929 20.8807 2 19.5 2C18.1193 2 17 3.11929 17 4.5C17 5.88071 18.1193 7 19.5 7Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                            <path opacity=\"0.4\" d=\"M15.9965 11H16.0054\" stroke=\"#292D32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                            <path opacity=\"0.4\" d=\"M11.9945 11H12.0035\" stroke=\"#292D32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                            <path opacity=\"0.4\" d=\"M7.99451 11H8.00349\" stroke=\"#292D32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                        </svg>\r\n                                        <div class=\"text-center text-muted\">\r\n                                            <div>\r\n                                                <strong>There is no conversation</strong>\r\n                                            </div>\r\n                                            <p class=\"text-muted\">Conversation will show when you make conversation !</p>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </VuePerfectScrollbar>\r\n                        </div>\r\n                        <div class=\"position-absolute d-flex flex-column w-100 h-100 animatied-left-position\"\r\n                            :style=\"`left: ${conversationItemSelected !== null ? 0 : 100}%;`\"\r\n                            v-loading=\"isLoading\">\r\n                            <VuePerfectScrollbar class=\"flex-fill w-100 pr-3 mt-2\"\r\n                                id=\"chatScroller\"\r\n                                :settings=\"{ suppressScrollX: true }\"\r\n                                style=\"height: 100px;\">\r\n                                <!-- .filter(xItem => xItem.content && xItem.content !== null && xItem.content !== '') -->\r\n                                <div class=\"mt-2 ml-2 d-flex flex-column w-100\"\r\n                                    v-if=\"messageItems.length > 0\">\r\n                                    <div class=\"d-flex\"\r\n                                        v-bind:class=\"{ 'justify-content-end' : isContactMsg(messageItem), 'justify-content-start' : !isContactMsg(messageItem) }\"\r\n                                        v-for=\"messageItem in messageItems\"\r\n                                        :key=\"messageItem.id\" \r\n                                        :id=\"`messageItemId_${messageItem.id}`\">\r\n                                        <div class=\"bubble\"\r\n                                            v-bind:class=\"{ 'bubble-right' : isContactMsg(messageItem), 'bubble-left' : !isContactMsg(messageItem) }\">\r\n                                            <div v-if=\"messageItem.content\">{{messageItem.content}}</div>\r\n                                            <div v-else>\r\n                                                <div class=\"text-left\"><i class=\"el-icon-paperclip\"></i> <i>Sent an attachment</i></div>\r\n                                            </div>\r\n                                            <div class=\"mt-1\" style=\"font-size: 80%; opacity: 0.6; font-style:italic;\">\r\n                                                <i class=\"el-icon-time\"></i> {{messageItem.createdAt | pretyDateUtcToLocal}}\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div v-else class=\"d-flex align-items-center justify-content-center flex-fill w-100 mt-5\"\r\n                                    style=\"position: absolute; top: 0; left: 0; height: calc(100% - 10rem); width: 100%;\">\r\n                                    <div class=\"d-block text-center\">\r\n                                        <svg style=\"width: 40%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                            <path d=\"M22 10V13C22 17 20 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19H8C4 19 2 18 2 13V8C2 4 4 2 8 2H14\" stroke=\"#777\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                            <path opacity=\"0.4\" d=\"M19.5 7C20.8807 7 22 5.88071 22 4.5C22 3.11929 20.8807 2 19.5 2C18.1193 2 17 3.11929 17 4.5C17 5.88071 18.1193 7 19.5 7Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                            <path opacity=\"0.4\" d=\"M15.9965 11H16.0054\" stroke=\"#292D32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                            <path opacity=\"0.4\" d=\"M11.9945 11H12.0035\" stroke=\"#292D32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                            <path opacity=\"0.4\" d=\"M7.99451 11H8.00349\" stroke=\"#292D32\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                        </svg>\r\n                                        <div class=\"text-center text-muted\">\r\n                                            <div>\r\n                                                <strong>There is no message</strong>\r\n                                            </div>\r\n                                            <p class=\"text-muted\">It seems that the you has never chat with via us !</p>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </VuePerfectScrollbar>\r\n                        </div>\r\n                    </div>\r\n                </el-card>\r\n            </div>\r\n        </div>\r\n    </VuePerfectScrollbar>\r\n</template>\r\n\r\n<script>\r\nimport { mapState } from \"vuex\";\r\nimport VClamp from 'vue-clamp';\r\nimport api from '@/api/baseApi';\r\nimport { SETTINGS_CHAT_HISTORY_API } from \"@/constant/apiSettings\";\r\nconst queryString = require('query-string');\r\nexport default {\r\n    components: {\r\n        VClamp\r\n    },\r\n    data() {\r\n        return {\r\n            quality: 1,\r\n\r\n            toggleFilterByDate: false,\r\n            isLoadingConversation: true,\r\n            isInitedConversation: false,\r\n            currentPageConversation: 1,\r\n            dateFilterVal: null,\r\n            conversationItems: [],\r\n            conversationItemSelected: null,\r\n\r\n            isLoading: true,\r\n            isInited: false,\r\n            currentPage: 1,\r\n            messageItems: [],\r\n        };\r\n    },\r\n\r\n    computed: {\r\n        ...mapState({\r\n            user: (state) => state.auth.user,\r\n        }),\r\n    },\r\n    mounted() {\r\n        this.getChatConversation(\"LOAD_MORE\");\r\n        //this.getChatHistory(\"REFRESH\");\r\n    },\r\n    beforeDestroy() {\r\n        $(\"#chatScroller\").off(\"scroll\");\r\n        $(\"#chatScrollerConversation\").off(\"scroll\");\r\n    },\r\n    methods: {\r\n        openTawkTo() {\r\n            if(window.chatTool ===\"tawk.to\") window.Tawk_API.maximize();\r\n            if(window.chatTool ===\"chatwood\") window.$chatwoot.toggle(\"open\");\r\n        },\r\n        isContactMsg(messageItem) {\r\n            return messageItem.senderType !== null && messageItem.senderType === 'Contact';\r\n        },\r\n        refreshChatHistory(){\r\n            this.currentPage = 1;\r\n            this.getChatHistory(\"REFRESH\")\r\n        },\r\n        getChatHistory(targetAction = \"LOAD_MORE\") {\r\n            this.isLoading = true;\r\n            const requestSettings = SETTINGS_CHAT_HISTORY_API.GET_CHAT_HISTORY_BY_CONVERSATION;\r\n            const conversationId = this.conversationItemSelected.id;\r\n            let requestParams = {\r\n                conversationId: conversationId, \r\n                page: this.currentPage, \r\n                pageSize: 50 \r\n            };\r\n            api.baseRequest(requestSettings, null, `?${queryString.stringify(requestParams)}`)\r\n                .then((res) => {\r\n                    if (res.data) {\r\n                        if (res.data.length > 0) {\r\n                            let firstId = null;\r\n                            if (this.messageItems.length > 0) firstId = this.messageItems[0].id;\r\n                            switch (targetAction) {\r\n                                case \"LOAD_MORE\":\r\n                                    this.$set(this, \"messageItems\", (res.data.reverse()).concat(this.messageItems));\r\n                                    if (firstId !== null) {\r\n                                        this.$nextTick(() => {\r\n                                            $(\"#chatScroller\").scrollTop($(`#messageItemId_${firstId}`).offset().top);\r\n                                        });\r\n                                    }\r\n                                    break;\r\n                                case \"REFRESH\":\r\n                                this.$set(this, \"messageItems\", (res.data.reverse()));\r\n                                    this.$nextTick(() => {\r\n                                        $(\"#chatScroller\").animate({\r\n                                            scrollTop: $(\"#chatScroller\").prop(\"scrollHeight\")\r\n                                        }, 100);\r\n                                        if (!this.isInited) {\r\n                                            this.isInited = true;\r\n                                            $(\"#chatScroller\").on(\"scroll\", () => {\r\n                                                if ($(\"#chatScroller\").scrollTop() === 0) {\r\n                                                    this.loadOlder();\r\n                                                }\r\n                                            });\r\n                                        }\r\n                                    });\r\n                                    break;\r\n                            }\r\n                        }\r\n                        else {\r\n                            if (this.currentPage > 1) this.currentPage = this.currentPage - 1;\r\n                        }\r\n                        this.isLoading = false;\r\n                    }\r\n                    this.isLoading = false;\r\n                })\r\n                .catch(error => {\r\n                    console.error(error);\r\n                    this.isLoading = false;\r\n                });\r\n        },\r\n        loadOlder() {\r\n            this.currentPage = this.currentPage + 1;\r\n            this.getChatHistory(\"LOAD_MORE\");\r\n        },\r\n        scrollToEnd() {\r\n            const chatScroller = $(\"#chatScroller\");\r\n            chatScroller.animate({\r\n                scrollTop: chatScroller.prop(\"scrollHeight\")\r\n            }, 100);\r\n        },\r\n        scrollReachStart(evt) {\r\n            // if (!this.isInited) return;\r\n            // console.log(evt);\r\n            // this.loadOlder();\r\n        },\r\n        refreshConversation(){\r\n            this.$set(this, 'conversationItems', []);\r\n            this.$set(this, 'messageItems', []);\r\n            this.currentPageConversation = 1;\r\n            this.getChatConversation(\"REFRESH\")\r\n        },\r\n        getChatConversation(targetAction = \"LOAD_MORE\") {\r\n            this.isLoadingConversation = true;\r\n            const requestSettings = SETTINGS_CHAT_HISTORY_API.GET_CHAT_CONVERSATION;\r\n            let requestParams = { page: this.currentPageConversation, pageSize: 50 };\r\n            if(this.dateFilterVal && this.dateFilterVal !== '') {\r\n                requestParams.filterDate = this.dateFilterVal;\r\n            }\r\n            api.baseRequest(requestSettings, null, `?${queryString.stringify(requestParams)}`)\r\n                .then((res) => {\r\n                    if (res.data) {\r\n                        if (res.data.length > 0) {\r\n                            switch (targetAction) {\r\n                                case \"LOAD_MORE\":\r\n                                    this.$set(this, 'conversationItems', (res.data).concat(this.conversationItems).map(xItem => {\r\n                                        return {\r\n                                            ...xItem,\r\n                                            additionalAttributesData: xItem.additionalAttributes ? JSON.parse(xItem.additionalAttributes) : {}\r\n                                        }\r\n                                    }));\r\n                                    break;\r\n                                case \"REFRESH\":\r\n                                this.$set(this, 'conversationItems', (res.data.map(xItem => {\r\n                                        return {\r\n                                            ...xItem,\r\n                                            additionalAttributesData: xItem.additionalAttributes ? JSON.parse(xItem.additionalAttributes) : {}\r\n                                        }\r\n                                    })));\r\n                                    this.$nextTick(() => {\r\n                                        if (!this.isInitedConversation) {\r\n                                            this.isInitedConversation = true;\r\n                                            $(\"#chatScrollerConversation\").on(\"scroll\", () => {\r\n                                                let scrollHeight = $(\"#chatScrollerConversation\").prop(\"scrollHeight\");\r\n                                                if ($(\"#chatScrollerConversation\").scrollTop() === scrollHeight) {\r\n                                                    this.loadOlderConversation();\r\n                                                }\r\n                                            });\r\n                                        }\r\n                                    });\r\n                                    break;\r\n                            }\r\n                        }\r\n                        else {\r\n                            if (this.currentPageConversation > 1) this.currentPageConversation = this.currentPageConversation - 1;\r\n                            this.isLoading = false;\r\n                        }\r\n                        this.isLoadingConversation = false;\r\n                    }\r\n                    this.isLoadingConversation = false;\r\n                })\r\n                .catch(error => {\r\n                    console.error(error);\r\n                    this.isLoadingConversation = false;\r\n                });\r\n        },\r\n        loadOlderConversation(){\r\n            this.currentPageConversation = this.currentPageConversation + 1;\r\n            this.getChatConversation(\"LOAD_MORE\");\r\n        },         \r\n        backToConversationList() {  \r\n            this.$set(this, 'messageItems', []); \r\n            this.conversationItemSelected = null;\r\n            this.currentPage = 1;           \r\n            this.refreshConversation();\r\n        },         \r\n        changeConversation(conversationItem) {  \r\n            $(\"#chatScroller\").off(\"scroll\");\r\n            this.isInited = false;   \r\n            this.$set(this, 'messageItems', []); \r\n            this.conversationItemSelected = conversationItem;\r\n            this.currentPage = 1;           \r\n            this.getChatHistory(\"REFRESH\");\r\n        },\r\n    },\r\n};\r\n</script>\r\n\r\n<style lang=\"css\" scoped>\r\n.chat-history-box::v-deep > .el-card__body{\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    flex: 1 1 auto !important;\r\n}\r\n\r\n.slide-leave-active,\r\n.slide-enter-active {\r\n  transition: 0.3s;\r\n}\r\n.slide-enter {\r\n  transform: translate(100%, 0);\r\n  opacity: 1;\r\n}\r\n.slide-leave-to {\r\n  transform: translate(100%, 0);\r\n  opacity: 0;\r\n  width: 0;\r\n}\r\n.fade-enter-active, .fade-leave-active {\r\n  transition: opacity .1s;\r\n}\r\n.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\r\n  opacity: 0;\r\n  width: 0;\r\n  z-index: -1;\r\n}\r\n\r\n.chat-history-box::v-deep .bubble {\r\n  --r: 20px; /* the radius */\r\n  --t: 20px; /* the size of the tail */\r\n  margin-bottom: 0.8rem;\r\n  max-width: 80%;\r\n  padding: calc(2*var(--r)/3);\r\n  -webkit-mask: \r\n    radial-gradient(var(--t) at var(--_d) 0,#0000 98%,#000 102%) \r\n      var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,\r\n    conic-gradient(at var(--r) var(--r),#000 75%,#0000 0) \r\n      calc(var(--r)/-2) calc(var(--r)/-2) padding-box, \r\n    radial-gradient(closest-side at 50% 50%,#000 98%,#0000 101%) \r\n      0 0/var(--r) var(--r) space padding-box;\r\n}\r\n.chat-history-box::v-deep  .bubble-left {\r\n  --_d: 0%;\r\n  border-left: var(--t) solid #0000;\r\n  margin-right: var(--t);\r\n  place-self: start;\r\n  color: #fff;\r\n  background: linear-gradient(135deg,#42a5f5,#1384C5) border-box;\r\n}\r\n.chat-history-box::v-deep  .bubble-right {\r\n  --_d: 100%;\r\n  border-right: var(--t) solid #0000;\r\n  margin-left: var(--t);\r\n  place-self: end;\r\n  color: #000;\r\n  background: linear-gradient(135deg,#bbbbbb,#cecece) border-box;\r\n}\r\n.list-group-wrapper{\r\n    border: 1px solid rgba(0, 0, 0, 0.125);\r\n}\r\n.list-group-wrapper .list-group-item{\r\n    border-left: none;\r\n    border-right: none;\r\n}\r\n.list-group-wrapper .list-group-item:first-child{\r\n    border-top: none;\r\n}\r\n.list-group-wrapper .list-group-item:last-child{\r\n    border-bottom: none;\r\n}\r\n.list-group-wrapper .list-group-item:hover{\r\n    background-color: #e5f0ff;\r\n}\r\n.list-group-wrapper  .list-group-item a{\r\n    color: inherit;\r\n    text-decoration: none;\r\n}\r\n\r\n.animatied-left-position{\r\n    transition: left 0.3s;\r\n    -webkit-transition: left 0.3s;\r\n    -moz-transition: left 0.3s;\r\n}\r\n\r\n.chat-history-block{\r\n    width: 100%;\r\n    max-width: 100%;\r\n}\r\n\r\n\r\n.chat-history-block .el-card{\r\n    max-width: 50rem !important;\r\n}\r\n\r\n.chat-history-block .chat-box-content{\r\n    height: 30rem !important;\r\n}\r\n\r\n@media screen and (min-width: 1264px){\r\n    .chat-history-block{\r\n        width: 30rem;\r\n    }\r\n\r\n    .chat-history-block .chat-box-content{\r\n        height: auto !important;\r\n    }\r\n}\r\n</style>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Support.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Support.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Support.vue?vue&type=template&id=82856e4a&scoped=true&\"\nimport script from \"./Support.vue?vue&type=script&lang=js&\"\nexport * from \"./Support.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Support.vue?vue&type=style&index=0&id=82856e4a&prod&lang=css&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"82856e4a\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Support.vue?vue&type=style&index=0&id=82856e4a&prod&lang=css&scoped=true&\""],"sourceRoot":""}