vue-abchat
Version:
AI chat component for vue.js
546 lines (502 loc) • 60.2 kB
JavaScript
var abchat = (function (exports, axios) {
'use strict';
axios = axios && axios.hasOwnProperty('default') ? axios['default'] : axios;
//
var script = {
name: "vue-abchat",
props: {
base_url: {
type: String,
required: true
},
width: {
type: Number,
default: 300
},
height: {
type: Number,
default: 400
},
position: {
type: String,
default: "bottom-right"
},
title: {
type: String,
default: "ABChat"
},
button_title: {
type: String,
default: "chat"
},
colors: {
type: Object
}
},
data: function data() {
return {
message_list: [],
my_message: "",
your_message: "",
raw_data: null,
hideflag: true,
api: axios.create({
baseURL: this.base_url,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
withCredentials: false
}
}),
loadflag: false,
loadidx: null,
dialogue: false
};
},
methods: {
getmodal: async function getmodal() {
this.dialogue = !this.dialogue;
},
get_result: async function get_result(message) {
var result = null;
await this.api
.request({
method: "GET",
url: ("/chat/" + message),
mode: "no-cors"
})
.then(function (res) {
result = res;
})
.catch(function(error) {
result = error;
});
return result;
},
getChatData: async function getChatData() {
if (this.my_message == "") {
return;
}
if (this.loadflag) {
return;
}
document.getElementsByClassName("abutton")[0].textContent = await "wait";
await document
.getElementsByClassName("abutton")[0]
.classList.add("bbutton");
await document
.getElementsByClassName("abutton")[0]
.classList.remove("abutton");
this.loadflag = true;
this.loadidx = this.message_list.length;
var my_message = {
type: "user",
data: this.my_message.replace(/[\\/]/g, ""),
idx: this.loadidx
};
this.my_message = "";
await this.message_list.push(my_message);
var height = document.getElementsByClassName("chatlayout")[0]
.scrollHeight;
await document
.getElementsByClassName("chatlayout")[0]
.scrollTo(0, height);
await this.message_list.push({
type: "ai",
data: "loading",
loadflag: true,
idx: this.loadidx + 1
});
await document
.getElementsByClassName("chatlayout")[0]
.scrollTo(0, height);
var ai_message = {};
var res = await this.get_result(my_message.data);
if (res.status == 200) {
ai_message = {
type: "ai",
data: res.data.result,
loadflag: false,
targetidx: this.loadidx,
idx: this.loadidx + 1
};
} else {
ai_message = {
type: "ai",
data: "서버가 이상해요",
loadflag: false,
targetidx: this.loadidx,
idx: this.loadidx + 1
};
}
this.message_list.splice(this.loadidx + 1, 1, ai_message);
document.getElementsByClassName("bbutton")[0].textContent = await "send";
document.getElementsByClassName("bbutton")[0].classList.add("abutton");
document.getElementsByClassName("bbutton")[0].classList.remove("bbutton");
this.loadflag = false;
height = await document.getElementsByClassName("chatlayout")[0]
.scrollHeight;
await document
.getElementsByClassName("chatlayout")[0]
.scrollTo(0, height);
this.$refs.chat.focus();
},
setCompSize: function setCompSize() {
document.getElementById("complayout").style.height =
this.height.toString() + "px";
document.getElementById("complayout").style.width =
this.width.toString() + "px";
},
sendchat: async function sendchat(message) {
var que = await this.message_list[message.targetidx].data;
var ans = await this.message_list[message.idx].data;
var result = null;
await this.api
.request({
method: "POST",
url: "/db2",
mode: "no-cors",
data: {
"siren": {
"result": que
}
}
})
.then(function (res) {
result = res.data;
})
.catch(function(error) {
result = error;
});
var ai_message = {
type: "ai",
data: result,
loadflag: false
};
this.message_list.push(ai_message);
}
},
mounted: function mounted() {
var this$1 = this;
this.setCompSize();
window.onclick = function (event) {
if (event.target == document.getElementsByClassName("modal")[0]) {
this$1.getmodal();
}
};
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return function (id, style) {
return addStyle(id, style);
};
}
var HEAD;
var styles = {};
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = {
ids: new Set(),
styles: []
});
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media) { style.element.setAttribute('media', css.media); }
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
} else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index]) { style.element.removeChild(nodes[index]); }
if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }else { style.element.appendChild(textNode); }
}
}
}
var browser = createInjector;
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", [
_vm.dialogue ? _c("div", { staticClass: "modal" }, [_vm._m(0)]) : _vm._e(),
_vm._v(" "),
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: !_vm.hideflag,
expression: "!hideflag"
}
],
staticClass: "hidebtn",
on: {
click: function($event) {
_vm.hideflag = !_vm.hideflag;
}
}
},
[_c("span", [_vm._v(_vm._s(_vm.button_title))])]
),
_vm._v(" "),
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.hideflag,
expression: "hideflag"
}
],
attrs: { id: "complayout" }
},
[
_c("div", { staticClass: "headerlayout" }, [
_c(
"div",
{
staticClass: "btns2",
staticStyle: { "flex-basis": "30%" },
on: { click: _vm.getmodal }
},
[_c("div", { staticClass: "btn" }, [_vm._v("?")])]
),
_vm._v(" "),
_c(
"span",
{ staticClass: "header", staticStyle: { "flex-basis": "30%" } },
[_vm._v(_vm._s(_vm.title))]
),
_vm._v(" "),
_c(
"div",
{ staticClass: "btns", staticStyle: { "flex-basis": "30%" } },
[
_c(
"div",
{
staticClass: "btn",
on: {
click: function($event) {
_vm.message_list = [];
}
}
},
[_vm._v("C")]
),
_vm._v(" "),
_c(
"div",
{
staticClass: "btn",
on: {
click: function($event) {
_vm.hideflag = !_vm.hideflag;
}
}
},
[_c("div", { staticClass: "hidebtn2" })]
)
]
)
]),
_vm._v(" "),
_c(
"div",
{ staticClass: "chatlayout" },
_vm._l(_vm.message_list, function(message, idx) {
return _c("div", { key: idx }, [
message.type === "user"
? _c("div", { staticClass: "arrow_box box_font" }, [
_c("span", [_vm._v(_vm._s(message.data))])
])
: _c("div", { staticClass: "arrow_box2 box_font" }, [
message.loadflag
? _c("span", { staticClass: "loader" })
: _c("span", [_vm._v(_vm._s(message.data))]),
_vm._v(" "),
!message.loadflag
? _c(
"div",
{
staticClass: "siren",
on: {
click: function($event) {
return _vm.sendchat(message)
}
}
},
[
_c("font-awesome-icon", {
attrs: { icon: "exclamation-circle" }
})
],
1
)
: _vm._e()
])
])
}),
0
),
_vm._v(" "),
_c("div", { staticClass: "inputlayout" }, [
_c("input", {
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.my_message,
expression: "my_message"
}
],
ref: "chat",
staticClass: "inputbox",
attrs: { type: "text" },
domProps: { value: _vm.my_message },
on: {
keyup: function($event) {
if (
!$event.type.indexOf("key") &&
_vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
) {
return null
}
return _vm.getChatData($event)
},
input: function($event) {
if ($event.target.composing) {
return
}
_vm.my_message = $event.target.value;
}
}
}),
_vm._v(" "),
_c(
"button",
{ staticClass: "abutton", on: { click: _vm.getChatData } },
[_vm._v("send")]
)
])
]
)
])
};
var __vue_staticRenderFns__ = [
function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { staticClass: "modalcontent" }, [
_c("span", { staticClass: "modaltitle" }, [_vm._v("안내")]),
_vm._v(" "),
_c("span", { staticClass: "modaltext" }, [
_vm._v("답변이 혹시 마음에 안드신다면")
]),
_vm._v(" "),
_c("span", { staticClass: "modaltext" }, [
_vm._v("답변에 마우스를 올리면 피드백을 하실 수 있습니다.")
]),
_vm._v(" "),
_c("span", { staticClass: "modaltext" }, [_vm._v("감사합니다.")])
])
}
];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("data-v-ab8d1e1e_0", { source: "\n.btns[data-v-ab8d1e1e] {\r\n display: flex;\r\n justify-content: flex-end;\r\n color: white;\r\n font-weight: 500;\n}\n.btns2[data-v-ab8d1e1e] {\r\n display: flex;\r\n justify-content: flex-start;\r\n color: white;\r\n font-weight: 500;\n}\n.hidebtn2[data-v-ab8d1e1e] {\r\n width: 14px;\r\n height: 2px;\r\n background-color: #fff;\n}\n.btn[data-v-ab8d1e1e] {\r\n width: 22px;\r\n height: 22px;\r\n border: 1.5px rgba(255, 255, 255, 0.699) solid;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 30%;\r\n background-color: rgba(255, 255, 255, 0.13);\r\n margin-right: 3px;\n}\n.btn[data-v-ab8d1e1e]:hover {\r\n cursor: pointer;\r\n background-color: rgba(255, 255, 255, 0.603);\n}\n.hidebtn[data-v-ab8d1e1e] {\r\n position: fixed;\r\n bottom: 15px;\r\n right: 15px;\r\n padding: 0.1em 0.3em;\r\n width: 40px;\r\n height: 40px;\r\n background-color: rgb(240, 61, 37);\r\n border-radius: 17px;\r\n color: white;\r\n font-size: 1.5em;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.788);\n}\n[top] .hidebtn[data-v-ab8d1e1e] {\r\n top: 15px;\n}\n[bottom] .hidebtn[data-v-ab8d1e1e] {\r\n bottom: 15px;\n}\n[right] .hidebtn[data-v-ab8d1e1e] {\r\n right: 15px;\n}\n[left] .hidebtn[data-v-ab8d1e1e] {\r\n left: 15px;\n}\n.hidebtn[data-v-ab8d1e1e]:hover {\r\n cursor: pointer;\r\n background-color: rgb(233, 123, 33);\n}\n#complayout[data-v-ab8d1e1e] {\r\n position: fixed;\r\n bottom: 30px;\r\n right: 30px;\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.788);\n}\n[top] #complayout[data-v-ab8d1e1e] {\r\n top: 30px;\n}\n[bottom] #complayout[data-v-ab8d1e1e] {\r\n bottom: 30px;\n}\n[right] #complayout[data-v-ab8d1e1e] {\r\n right: 30px;\n}\n[left] #complayout[data-v-ab8d1e1e] {\r\n left: 30px;\n}\n.headerlayout[data-v-ab8d1e1e] {\r\n text-align: center;\r\n border-top-left-radius: 10px;\r\n border-top-right-radius: 10px;\r\n background-color: rgb(51, 78, 121);\r\n padding: 5px 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\n}\n.header[data-v-ab8d1e1e] {\r\n color: white;\r\n font-size: 1.2em;\r\n font-weight: 700;\n}\n.chatlayout[data-v-ab8d1e1e]::-webkit-scrollbar {\r\n display: none;\n}\n.chatlayout[data-v-ab8d1e1e] {\r\n -ms-overflow-style: none;\r\n height: 100%;\r\n overflow: auto;\r\n padding-right: 1.2em;\r\n padding-left: 1.2em;\r\n background-color: rgb(163, 171, 197);\r\n border-left: 2px rgba(31, 31, 31, 0.26) solid;\r\n border-right: 2px rgba(31, 31, 31, 0.26) solid;\n}\n.inputlayout[data-v-ab8d1e1e] {\r\n border-bottom-left-radius: 10px;\r\n border-bottom-right-radius: 10px;\r\n padding: 0.5em 0.5em;\r\n background-color: rgb(51, 78, 121);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\n}\n.inputbox[data-v-ab8d1e1e] {\r\n font-size: 1em;\r\n border: 0px;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 7px;\r\n padding: 3px;\r\n margin-right: 0.5em;\r\n box-sizing: border-box;\n}\n.abutton[data-v-ab8d1e1e] {\r\n width: 65px;\r\n padding: 0.5em 0.5em;\r\n background: rgb(202, 207, 226);\r\n color: rgb(80, 77, 77);\r\n font-size: 1em;\r\n font-weight: 700;\r\n border: 0px white;\r\n border-radius: 0.5em;\n}\n.bbutton[data-v-ab8d1e1e] {\r\n width: 65px;\r\n padding: 0.5em 0.5em;\r\n background: rgb(233, 96, 78);\r\n color: rgb(255, 255, 255);\r\n font-size: 1em;\r\n font-weight: 700;\r\n border: 0px white;\r\n border-radius: 0.5em;\n}\n.box_font[data-v-ab8d1e1e] {\r\n font-weight: 500;\n}\n.arrow_box[data-v-ab8d1e1e] {\r\n padding: 1px 10px;\r\n position: relative;\r\n background: #feffe9;\r\n border: 1px solid #f5f5f5;\r\n min-height: 30px;\r\n border-radius: 7px;\r\n word-break: break-all;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n margin: 0.5em 0;\n}\n.arrow_box[data-v-ab8d1e1e]:after,\r\n.arrow_box[data-v-ab8d1e1e]:before {\r\n left: 100%;\r\n top: 50%;\r\n border: solid transparent;\r\n content: \" \";\r\n height: 0;\r\n width: 0;\r\n position: absolute;\r\n pointer-events: none;\n}\n.arrow_box[data-v-ab8d1e1e]:after {\r\n border-color: rgba(232, 232, 232, 0);\r\n border-left-color: #feffe9;\r\n top: 15px;\r\n border-radius: 5px;\r\n border-width: 3px;\r\n margin-top: -3px;\n}\n.arrow_box[data-v-ab8d1e1e]:before {\r\n border-color: rgba(245, 245, 245, 0);\r\n border-left-color: #f5f5f5;\r\n top: 15px;\r\n border-radius: 5px;\r\n border-width: 7px;\r\n margin-top: -7px;\n}\n.arrow_box2[data-v-ab8d1e1e] {\r\n padding: 1px 10px;\r\n position: relative;\r\n background: #dfefff;\r\n border: 1px solid #f5f5f5;\r\n min-height: 30px;\r\n border-radius: 7px;\r\n word-break: break-all;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin: 0.5em 0;\n}\n.arrow_box2[data-v-ab8d1e1e]:after,\r\n.arrow_box2[data-v-ab8d1e1e]:before {\r\n right: 100%;\r\n top: 50%;\r\n border: solid transparent;\r\n content: \" \";\r\n height: 0;\r\n width: 0;\r\n position: absolute;\r\n pointer-events: none;\n}\n.arrow_box2[data-v-ab8d1e1e]:after {\r\n border-color: rgba(232, 232, 232, 0);\r\n border-right-color: #dfefff;\r\n top: 15px;\r\n border-width: 3px;\r\n margin-top: -3px;\n}\n.arrow_box2[data-v-ab8d1e1e]:before {\r\n border-color: rgba(245, 245, 245, 0);\r\n border-right-color: #f5f5f5;\r\n top: 15px;\r\n border-width: 7px;\r\n margin-top: -7px;\n}\n.arrow_box2:hover .siren[data-v-ab8d1e1e] {\r\n color: #dd9696;\r\n cursor: pointer;\n}\n.siren[data-v-ab8d1e1e] {\r\n color: #dfefff;\n}\n.loader[data-v-ab8d1e1e],\r\n.loader[data-v-ab8d1e1e]:before,\r\n.loader[data-v-ab8d1e1e]:after {\r\n border-radius: 50%;\r\n width: 0.9em;\r\n height: 0.9em;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation: load7-data-v-ab8d1e1e 1.8s infinite ease-in-out;\r\n animation: load7-data-v-ab8d1e1e 1.8s infinite ease-in-out;\n}\n.loader[data-v-ab8d1e1e] {\r\n color: #5684c9;\r\n font-size: 1px;\r\n margin: 5px auto;\r\n margin-bottom: 45px;\r\n position: relative;\r\n text-indent: -9999em;\r\n -webkit-transform: translateZ(0);\r\n -ms-transform: translateZ(0);\r\n transform: translateZ(0);\r\n -webkit-animation-delay: -0.16s;\r\n animation-delay: -0.16s;\n}\n.loader[data-v-ab8d1e1e]:before,\r\n.loader[data-v-ab8d1e1e]:after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\n}\n.loader[data-v-ab8d1e1e]:before {\r\n left: -3em;\r\n -webkit-animation-delay: -0.32s;\r\n animation-delay: -0.32s;\n}\n.loader[data-v-ab8d1e1e]:after {\r\n left: 3em;\n}\n@-webkit-keyframes load7-data-v-ab8d1e1e {\n0%,\r\n 80%,\r\n 100% {\r\n box-shadow: 0 2.5em 0 -1.3em;\n}\n40% {\r\n box-shadow: 0 2.5em 0 0;\n}\n}\n@keyframes load7-data-v-ab8d1e1e {\n0%,\r\n 80%,\r\n 100% {\r\n box-shadow: 0 2.5em 0 -1.3em;\n}\n40% {\r\n box-shadow: 0 2.5em 0 0;\n}\n}\r\n", map: {"version":3,"sources":["C:\\Users\\multicampus\\Desktop\\silverlyjoo\\ai\\vue-abchat\\src\\components\\vue-abchat.vue"],"names":[],"mappings":";AAyPA;EACA,aAAA;EACA,yBAAA;EACA,YAAA;EACA,gBAAA;AACA;AACA;EACA,aAAA;EACA,2BAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,WAAA;EACA,WAAA;EACA,sBAAA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,8CAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,kBAAA;EACA,2CAAA;EACA,iBAAA;AACA;AACA;EACA,eAAA;EACA,4CAAA;AACA;AAEA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EACA,oBAAA;EACA,WAAA;EACA,YAAA;EACA,kCAAA;EACA,mBAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,gDAAA;AACA;AAEA;EACA,SAAA;AACA;AACA;EACA,YAAA;AACA;AACA;EACA,WAAA;AACA;AACA;EACA,UAAA;AACA;AAEA;EACA,eAAA;EACA,mCAAA;AACA;AAEA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EACA,uBAAA;EACA,sBAAA;EACA,mBAAA;EACA,gDAAA;AACA;AAEA;EACA,SAAA;AACA;AACA;EACA,YAAA;AACA;AACA;EACA,WAAA;AACA;AACA;EACA,UAAA;AACA;AAEA;EACA,kBAAA;EACA,4BAAA;EACA,6BAAA;EACA,kCAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;AACA;AACA;EACA,YAAA;EACA,gBAAA;EACA,gBAAA;AACA;AAEA;EACA,aAAA;AACA;AACA;EACA,wBAAA;EACA,YAAA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;EACA,oCAAA;EACA,6CAAA;EACA,8CAAA;AACA;AACA;EACA,+BAAA;EACA,gCAAA;EACA,oBAAA;EACA,kCAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;AACA;AAEA;EACA,cAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,YAAA;EACA,mBAAA;EACA,sBAAA;AACA;AAEA;EACA,WAAA;EACA,oBAAA;EACA,8BAAA;EACA,sBAAA;EACA,cAAA;EACA,gBAAA;EACA,iBAAA;EACA,oBAAA;AACA;AACA;EACA,WAAA;EACA,oBAAA;EACA,4BAAA;EACA,yBAAA;EACA,cAAA;EACA,gBAAA;EACA,iBAAA;EACA,oBAAA;AACA;AAEA;EACA,gBAAA;AACA;AAEA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;EACA,yBAAA;EACA,gBAAA;EACA,kBAAA;EACA,qBAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,eAAA;AACA;AACA;;EAEA,UAAA;EACA,QAAA;EACA,yBAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,kBAAA;EACA,oBAAA;AACA;AAEA;EACA,oCAAA;EACA,0BAAA;EACA,SAAA;EACA,kBAAA;EACA,iBAAA;EACA,gBAAA;AACA;AACA;EACA,oCAAA;EACA,0BAAA;EACA,SAAA;EACA,kBAAA;EACA,iBAAA;EACA,gBAAA;AACA;AAEA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;EACA,yBAAA;EACA,gBAAA;EACA,kBAAA;EACA,qBAAA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,eAAA;AACA;AACA;;EAEA,WAAA;EACA,QAAA;EACA,yBAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,kBAAA;EACA,oBAAA;AACA;AAEA;EACA,oCAAA;EACA,2BAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;AACA;AACA;EACA,oCAAA;EACA,2BAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;AACA;AACA;EACA,cAAA;EACA,eAAA;AACA;AACA;EACA,cAAA;AACA;AAEA;;;EAGA,kBAAA;EACA,YAAA;EACA,aAAA;EACA,iCAAA;EACA,yBAAA;EACA,kEAAA;EACA,0DAAA;AACA;AACA;EACA,cAAA;EACA,cAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,oBAAA;EACA,gCAAA;EACA,4BAAA;EACA,wBAAA;EACA,+BAAA;EACA,uBAAA;AACA;AACA;;EAEA,WAAA;EACA,kBAAA;EACA,MAAA;AACA;AACA;EACA,UAAA;EACA,+BAAA;EACA,uBAAA;AACA;AACA;EACA,SAAA;AACA;AACA;AACA;;;IAGA,4BAAA;AACA;AACA;IACA,uBAAA;AACA;AACA;AACA;AACA;;;IAGA,4BAAA;AACA;AACA;IACA,uBAAA;AACA;AACA","file":"vue-abchat.vue","sourcesContent":["<template>\r\n <div>\r\n <div v-if=\"dialogue\" class=\"modal\">\r\n <div class=\"modalcontent\">\r\n <span class=\"modaltitle\">안내</span>\r\n <span class=\"modaltext\">답변이 혹시 마음에 안드신다면</span>\r\n <span class=\"modaltext\">답변에 마우스를 올리면 피드백을 하실 수 있습니다.</span>\r\n <span class=\"modaltext\">감사합니다.</span>\r\n </div>\r\n </div>\r\n <div class=\"hidebtn\" v-show=\"!hideflag\" @click=\"hideflag = !hideflag\">\r\n <span>{{ button_title }}</span>\r\n </div>\r\n <div id=\"complayout\" v-show=\"hideflag\">\r\n <div class=\"headerlayout\">\r\n <div style=\"flex-basis: 30%;\" class=\"btns2\" @click=\"getmodal\">\r\n <div class=\"btn\">?</div>\r\n </div>\r\n <span class=\"header\" style=\"flex-basis: 30%;\">{{ title }}</span>\r\n <div style=\"flex-basis: 30%;\" class=\"btns\">\r\n <div class=\"btn\" @click=\"message_list=[]\">C</div>\r\n <div class=\"btn\" @click=\"hideflag = !hideflag\">\r\n <div class=\"hidebtn2\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"chatlayout\">\r\n <div v-for=\"(message, idx) in message_list\" :key=\"idx\">\r\n <div class=\"arrow_box box_font\" v-if=\"message.type==='user'\">\r\n <span>{{ message.data }}</span>\r\n </div>\r\n <div class=\"arrow_box2 box_font\" v-else>\r\n <span v-if=\"message.loadflag\" class=\"loader\"></span>\r\n <span v-else>{{ message.data }}</span>\r\n <div v-if=\"!message.loadflag\" @click=\"sendchat(message)\" class=\"siren\">\r\n <font-awesome-icon icon=\"exclamation-circle\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"inputlayout\">\r\n <input\r\n type=\"text\"\r\n ref=\"chat\"\r\n class=\"inputbox\"\r\n v-model=\"my_message\"\r\n @keyup.enter=\"getChatData\"\r\n />\r\n <button class=\"abutton\" @click=\"getChatData\">send</button>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nimport axios from \"axios\";\r\n\r\nexport default {\r\n name: \"vue-abchat\",\r\n props: {\r\n base_url: {\r\n type: String,\r\n required: true\r\n },\r\n width: {\r\n type: Number,\r\n default: 300\r\n },\r\n height: {\r\n type: Number,\r\n default: 400\r\n },\r\n position: {\r\n type: String,\r\n default: \"bottom-right\"\r\n },\r\n title: {\r\n type: String,\r\n default: \"ABChat\"\r\n },\r\n button_title: {\r\n type: String,\r\n default: \"chat\"\r\n },\r\n colors: {\r\n type: Object\r\n }\r\n },\r\n data() {\r\n return {\r\n message_list: [],\r\n my_message: \"\",\r\n your_message: \"\",\r\n raw_data: null,\r\n hideflag: true,\r\n api: axios.create({\r\n baseURL: this.base_url,\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n \"Access-Control-Allow-Origin\": \"*\",\r\n withCredentials: false\r\n }\r\n }),\r\n loadflag: false,\r\n loadidx: null,\r\n dialogue: false\r\n };\r\n },\r\n methods: {\r\n async getmodal() {\r\n this.dialogue = !this.dialogue;\r\n },\r\n async get_result(message) {\r\n let result = null;\r\n await this.api\r\n .request({\r\n method: \"GET\",\r\n url: `/chat/${message}`,\r\n mode: \"no-cors\"\r\n })\r\n .then(res => {\r\n result = res;\r\n })\r\n .catch(function(error) {\r\n result = error;\r\n });\r\n return result;\r\n },\r\n async getChatData() {\r\n if (this.my_message == \"\") {\r\n return;\r\n }\r\n if (this.loadflag) {\r\n return;\r\n }\r\n document.getElementsByClassName(\"abutton\")[0].textContent = await \"wait\";\r\n await document\r\n .getElementsByClassName(\"abutton\")[0]\r\n .classList.add(\"bbutton\");\r\n await document\r\n .getElementsByClassName(\"abutton\")[0]\r\n .classList.remove(\"abutton\");\r\n this.loadflag = true;\r\n this.loadidx = this.message_list.length;\r\n let my_message = {\r\n type: \"user\",\r\n data: this.my_message.replace(/[\\\\/]/g, \"\"),\r\n idx: this.loadidx\r\n };\r\n this.my_message = \"\";\r\n await this.message_list.push(my_message);\r\n let height = document.getElementsByClassName(\"chatlayout\")[0]\r\n .scrollHeight;\r\n\r\n await document\r\n .getElementsByClassName(\"chatlayout\")[0]\r\n .scrollTo(0, height);\r\n\r\n await this.message_list.push({\r\n type: \"ai\",\r\n data: \"loading\",\r\n loadflag: true,\r\n idx: this.loadidx + 1\r\n });\r\n\r\n await document\r\n .getElementsByClassName(\"chatlayout\")[0]\r\n .scrollTo(0, height);\r\n\r\n let ai_message = {};\r\n const res = await this.get_result(my_message.data);\r\n if (res.status == 200) {\r\n ai_message = {\r\n type: \"ai\",\r\n data: res.data.result,\r\n loadflag: false,\r\n targetidx: this.loadidx,\r\n idx: this.loadidx + 1\r\n };\r\n } else {\r\n ai_message = {\r\n type: \"ai\",\r\n data: \"서버가 이상해요\",\r\n loadflag: false,\r\n targetidx: this.loadidx,\r\n idx: this.loadidx + 1\r\n };\r\n }\r\n\r\n this.message_list.splice(this.loadidx + 1, 1, ai_message);\r\n document.getElementsByClassName(\"bbutton\")[0].textContent = await \"send\";\r\n document.getElementsByClassName(\"bbutton\")[0].classList.add(\"abutton\");\r\n document.getElementsByClassName(\"bbutton\")[0].classList.remove(\"bbutton\");\r\n this.loadflag = false;\r\n\r\n height = await document.getElementsByClassName(\"chatlayout\")[0]\r\n .scrollHeight;\r\n await document\r\n .getElementsByClassName(\"chatlayout\")[0]\r\n .scrollTo(0, height);\r\n\r\n this.$refs.chat.focus();\r\n },\r\n setCompSize() {\r\n document.getElementById(\"complayout\").style.height =\r\n this.height.toString() + \"px\";\r\n document.getElementById(\"complayout\").style.width =\r\n this.width.toString() + \"px\";\r\n },\r\n async sendchat(message) {\r\n let que = await this.message_list[message.targetidx].data;\r\n let ans = await this.message_list[message.idx].data;\r\n let result = null\r\n await this.api\r\n .request({\r\n method: \"POST\",\r\n url: `/db2`,\r\n mode: \"no-cors\",\r\n data: {\r\n \"siren\": {\r\n \"result\": que\r\n }\r\n }\r\n })\r\n .then(res => {\r\n result = res.data;\r\n })\r\n .catch(function(error) {\r\n result = error;\r\n });\r\n let ai_message = {\r\n type: \"ai\",\r\n data: result,\r\n loadflag: false\r\n };\r\n this.message_list.push(ai_message)\r\n }\r\n },\r\n mounted() {\r\n this.setCompSize();\r\n window.onclick = event => {\r\n if (event.target == document.getElementsByClassName(\"modal\")[0]) {\r\n this.getmodal();\r\n }\r\n };\r\n }\r\n};\r\n</script>\r\n<style scoped>\r\n.btns {\r\n display: flex;\r\n justify-content: flex-end;\r\n color: white;\r\n font-weight: 500;\r\n}\r\n.btns2 {\r\n display: flex;\r\n justify-content: flex-start;\r\n color: white;\r\n font-weight: 500;\r\n}\r\n\r\n.hidebtn2 {\r\n width: 14px;\r\n height: 2px;\r\n background-color: #fff;\r\n}\r\n\r\n.btn {\r\n width: 22px;\r\n height: 22px;\r\n border: 1.5px rgba(255, 255, 255, 0.699) solid;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 30%;\r\n background-color: rgba(255, 255, 255, 0.13);\r\n margin-right: 3px;\r\n}\r\n.btn:hover {\r\n cursor: pointer;\r\n background-color: rgba(255, 255, 255, 0.603);\r\n}\r\n\r\n.hidebtn {\r\n position: fixed;\r\n bottom: 15px;\r\n right: 15px;\r\n padding: 0.1em 0.3em;\r\n width: 40px;\r\n height: 40px;\r\n background-color: rgb(240, 61, 37);\r\n border-radius: 17px;\r\n color: white;\r\n font-size: 1.5em;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.788);\r\n}\r\n\r\n[top] .hidebtn {\r\n top: 15px;\r\n}\r\n[bottom] .hidebtn {\r\n bottom: 15px;\r\n}\r\n[right] .hidebtn {\r\n right: 15px;\r\n}\r\n[left] .hidebtn {\r\n left: 15px;\r\n}\r\n\r\n.hidebtn:hover {\r\n cursor: pointer;\r\n background-color: rgb(233, 123, 33);\r\n}\r\n\r\n#complayout {\r\n position: fixed;\r\n bottom: 30px;\r\n right: 30px;\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.788);\r\n}\r\n\r\n[top] #complayout {\r\n top: 30px;\r\n}\r\n[bottom] #complayout {\r\n bottom: 30px;\r\n}\r\n[right] #complayout {\r\n right: 30px;\r\n}\r\n[left] #complayout {\r\n left: 30px;\r\n}\r\n\r\n.headerlayout {\r\n text-align: center;\r\n border-top-left-radius: 10px;\r\n border-top-right-radius: 10px;\r\n background-color: rgb(51, 78, 121);\r\n padding: 5px 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n.header {\r\n color: white;\r\n font-size: 1.2em;\r\n font-weight: 700;\r\n}\r\n\r\n.chatlayout::-webkit-scrollbar {\r\n display: none;\r\n}\r\n.chatlayout {\r\n -ms-overflow-style: none;\r\n height: 100%;\r\n overflow: auto;\r\n padding-right: 1.2em;\r\n padding-left: 1.2em;\r\n background-color: rgb(163, 171, 197);\r\n border-left: 2px rgba(31, 31, 31, 0.26) solid;\r\n border-right: 2px rgba(31, 31, 31, 0.26) solid;\r\n}\r\n.inputlayout {\r\n border-bottom-left-radius: 10px;\r\n border-bottom-right-radius: 10px;\r\n padding: 0.5em 0.5em;\r\n background-color: rgb(51, 78, 121);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.inputbox {\r\n font-size: 1em;\r\n border: 0px;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 7px;\r\n padding: 3px;\r\n margin-right: 0.5em;\r\n box-sizing: border-box;\r\n}\r\n\r\n.abutton {\r\n width: 65px;\r\n padding: 0.5em 0.5em;\r\n background: rgb(202, 207, 226);\r\n color: rgb(80, 77, 77);\r\n font-size: 1em;\r\n font-weight: 700;\r\n border: 0px white;\r\n border-radius: 0.5em;\r\n}\r\n.bbutton {\r\n width: 65px;\r\n padding: 0.5em 0.5em;\r\n background: rgb(233, 96, 78);\r\n color: rgb(255, 255, 255);\r\n font-size: 1em;\r\n font-weight: 700;\r\n border: 0px white;\r\n border-radius: 0.5em;\r\n}\r\n\r\n.box_font {\r\n font-weight: 500;\r\n}\r\n\r\n.arrow_box {\r\n padding: 1px 10px;\r\n position: relative;\r\n background: #feffe9;\r\n border: 1px solid #f5f5f5;\r\n min-height: 30px;\r\n border-radius: 7px;\r\n word-break: break-all;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n margin: 0.5em 0;\r\n}\r\n.arrow_box:after,\r\n.arrow_box:before {\r\n left: 100%;\r\n top: 50%;\r\n border: solid transparent;\r\n content: \" \";\r\n height: 0;\r\n width: 0;\r\n position: absolute;\r\n pointer-events: none;\r\n}\r\n\r\n.arrow_box:after {\r\n border-color: rgba(232, 232, 232, 0);\r\n border-left-color: #feffe9;\r\n top: 15px;\r\n border-radius: 5px;\r\n border-width: 3px;\r\n margin-top: -3px;\r\n}\r\n.arrow_box:before {\r\n border-color: rgba(245, 245, 245, 0);\r\n border-left-color: #f5f5f5;\r\n top: 15px;\r\n border-radius: 5px;\r\n border-width: 7px;\r\n margin-top: -7px;\r\n}\r\n\r\n.arrow_box2 {\r\n padding: 1px 10px;\r\n position: relative;\r\n background: #dfefff;\r\n border: 1px solid #f5f5f5;\r\n min-height: 30px;\r\n border-radius: 7px;\r\n word-break: break-all;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin: 0.5em 0;\r\n}\r\n.arrow_box2:after,\r\n.arrow_box2:before {\r\n right: 100%;\r\n top: 50%;\r\n border: solid transparent;\r\n content: \" \";\r\n height: 0;\r\n width: 0;\r\n position: absolute;\r\n pointer-events: none;\r\n}\r\n\r\n.arrow_box2:after {\r\n border-color: rgba(232, 232, 232, 0);\r\n border-right-color: #dfefff;\r\n top: 15px;\r\n border-width: 3px;\r\n margin-top: -3px;\r\n}\r\n.arrow_box2:before {\r\n border-color: rgba(245, 245, 245, 0);\r\n border-right-color: #f5f5f5;\r\n top: 15px;\r\n border-width: 7px;\r\n margin-top: -7px;\r\n}\r\n.arrow_box2:hover .siren {\r\n color: #dd9696;\r\n cursor: pointer;\r\n}\r\n.siren {\r\n color: #dfefff;\r\n}\r\n\r\n.loader,\r\n.loader:before,\r\n.loader:after {\r\n border-radius: 50%;\r\n width: 0.9em;\r\n height: 0.9em;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation: load7 1.8s infinite ease-in-out;\r\n animation: load7 1.8s infinite ease-in-out;\r\n}\r\n.loader {\r\n color: #5684c9;\r\n font-size: 1px;\r\n margin: 5px auto;\r\n margin-bottom: 45px;\r\n position: relative;\r\n text-indent: -9999em;\r\n -webkit-transform: translateZ(0);\r\n -ms-transform: translateZ(0);\r\n transform: translateZ(0);\r\n -webkit-animation-delay: -0.16s;\r\n animation-delay: -0.16s;\r\n}\r\n.loader:before,\r\n.loader:after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n}\r\n.loader:before {\r\n left: -3em;\r\n -webkit-animation-delay: -0.32s;\r\n animation-delay: -0.32s;\r\n}\r\n.loader:after {\r\n left: 3em;\r\n}\r\n@-webkit-keyframes load7 {\r\n 0%,\r\n 80%,\r\n 100% {\r\n box-shadow: 0 2.5em 0 -1.3em;\r\n }\r\n 40% {\r\n box-shadow: 0 2.5em 0 0;\r\n }\r\n}\r\n@keyframes load7 {\r\n 0%,\r\n 80%,\r\n 100% {\r\n box-shadow: 0 2.5em 0 -1.3em;\r\n }\r\n 40% {\r\n box-shadow: 0 2.5em 0 0;\r\n }\r\n}\r\n</style>\r\n<style scoped>\r\n/* modal */\r\n.modal {\r\n position: fixed;\r\n z-index: 1;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n background-color: black;\r\n background-color: rgba(0, 0, 0, 0.562);\r\n display: flex;\r\n}\r\n.modalcontent {\r\n background-color: #fefefe;\r\n margin: auto auto;\r\n padding: 20px;\r\n border: 1px solid #888;\r\n width: 50%;\r\n}\r\n\r\n.modaltitle {\r\n display: block;\r\n margin: 0 0 13px 0;\r\n font-weight: 700;\r\n}\r\n.modaltext {\r\n display: block;\r\n color: rgb(70, 70, 70);\r\n word-break: break-all;\r\n margin-bottom: 7px;\r\n}\r\n</style>"]}, media: undefined })
,inject("data-v-ab8d1e1e_1", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n/* modal */\n.modal[data-v-ab8d1e1e] {\r\n position: fixed;\r\n z-index: 1;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n background-color: black;\r\n background-color: rgba(0, 0, 0, 0.562);\r\n display: flex;\n}\n.modalcontent[data-v-ab8d1e1e] {\r\n background-color: #fefefe;\r\n margin: auto auto;\r\n padding: 20px;\r\n border: 1px solid #888;\r\n width: 50%;\n}\n.modaltitle[data-v-ab8d1e1e] {\r\n display: block;\r\n margin: 0 0 13px 0;\r\n font-weight: 700;\n}\n.modaltext[data-v-ab8d1e1e] {\r\n display: block;\r\n color: rgb(70, 70, 70);\r\n word-break: break-all;\r\n margin-bottom: 7px;\n}\r\n", map: {"version":3,"sources":["C:\\Users\\multicampus\\Desktop\\silverlyjoo\\ai\\vue-abchat\\src\\components\\vue-abchat.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAujBA,UAAA;AACA;EACA,eAAA;EACA,UAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,uBAAA;EACA,sCAAA;EACA,aAAA;AACA;AACA;EACA,yBAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,UAAA;AACA;AAEA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA;AACA;AACA;EACA,cAAA;EACA,sBAAA;EACA,qBAAA;EACA,kBAAA;AACA","file":"vue-abchat.vue","sourcesContent":["<template>\r\n <div>\r\n <div v-if=\"dialogue\" class=\"modal\">\r\n <div class=\"modalcontent\">\r\n <span class=\"modaltitle\">안내</span>\r\n <span class=\"modaltext\">답변이 혹시 마음에 안드신다면</span>\r\n <span class=\"modaltext\">답변에 마우스를 올리면 피드백을 하실 수 있습니다.</span>\r\n <span class=\"modaltext\">감사합니다.</span>\r\n </div>\r\n </div>\r\n <div class=\"hidebtn\" v-show=\"!hideflag\" @click=\"hideflag = !hideflag\">\r\n <span>{{ button_title }}</span>\r\n </div>\r\n <div id=\"complayout\" v-show=\"hideflag\">\r\n <div class=\"headerlayout\">\r\n <div style=\"flex-basis: 30%;\" class=\"btns2\" @click=\"getmodal\">\r\n <div class=\"btn\">?</div>\r\n </div>\r\n <span class=\"header\" style=\"flex-basis: 30%;\">{{ title }}</span>\r\n <div style=\"flex-basis: 30%;\" class=\"btns\">\r\n <div class=\"btn\" @click=\"message_list=[]\">C</div>\r\n <div class=\"btn\" @click=\"hideflag = !hideflag\">\r\n <div class=\"hidebtn2\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"chatlayout\">\r\n <div v-for=\"(message, idx) in message_list\" :key=\"idx\">\r\n <div class=\"arrow_box box_font\" v-if=\"message.type==='user'\">\r\n <span>{{ message.data }}</span>\r\n </div>\r\n <div class=\"arrow_box2 box_font\" v-else>\r\n <span v-if=\"message.loadflag\" class=\"loader\"></span>\r\n <span v-else>{{ message.data }}</span>\r\n <div v-if=\"!message.loadflag\" @click=\"sendchat(message)\" class=\"siren\">\r\n <font-awesome-icon icon=\"exclamation-circle\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"inputlayout\">\r\n <input\r\n type=\"text\"\r\n ref=\"chat\"\r\n class=\"inputbox\"\r\n v-model=\"my_message\"\r\n @keyup.enter=\"getChatData\"\r\n />\r\n <button class=\"abutton\" @click=\"getChatData\">send</button>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n<script>\r\nimport axios from \"axios\";\r\n\r\nexport default {\r\n name: \"vue-abchat\",\r\n props: {\r\n base_url: {\r\n type: String,\r\n required: true\r\n },\r\n width: {\r\n type: Number,\r\n default: 300\r\n },\r\n height: {\r\n type: Number,\r\n default: 400\r\n },\r\n position: {\r\n type: String,\r\n default: \"bottom-right\"\r\n },\r\n title: {\r\n type: String,\r\n default: \"ABChat\"\r\n },\r\n button_title: {\r\n type: String,\r\n default: \"chat\"\r\n },\r\n colors: {\r\n type: Object\r\n }\r\n },\r\n data() {\r\n return {\r\n message_list: [],\r\n my_message: \"\",\r\n your_message: \"\",\r\n raw_data: null,\r\n hideflag: true,\r\n api: axios.create({\r\n baseURL: this.base_url,\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n \"Access-Control-Allow-Origin\": \"*\",\r\n withCredentials: false\r\n }\r\n }),\r\n loadflag: false,\r\n loadidx: null,\r\n dialogue: false\r\n };\r\n },\r\n methods: {\r\n async getmodal() {\r\n this.dialogue = !this.dialogue;\r\n },\r\n async get_result(message) {\r\n let result = null;\r\n await this.api\r\n .request({\r\n method: \"GET\",\r\n url: `/chat/${message}`,\r\n mode: \"no-cors\"\r\n })\r\n .then(res => {\r\n result = res;\r\n })\r\n .catch(function(error) {\r\n result = error;\r\n });\r\n return result;\r\n },\r\n async getChatData() {\r\n if (this.my_message == \"\") {\r\n return;\r\n }\r\n if (this.loadflag) {\r\n return;\r\n }\r\n document.getElementsByClassName(\"abutton\")[0].textContent = await \"wait\";\r\n await document\r\n .getElementsByClassName(\"abutton\")[0]\r\n .classList.add(\"bbutton\");\r\n await document\r\n .getElementsByClassName(\"abutton\")[0]\r\n .classList.remove(\"abutton\");\r\n this.loadflag = true;\r\n this.loadidx = this.message_list.length;\r\n let my_message = {\r\n type: \"user\",\r\n data: this.my_message.replace(/[\\\\/]/g, \"\"),\r\n idx: this.loadidx\r\n };\r\n this.my_message = \"\";\r\n await this.message_list.push(my_message);\r\n let height = document.getElementsByClassName(\"chatlayout\")[0]\r\n .scrollHeight;\r\n\r\n await document\r\n .getElementsByClassName(\"chatlayout\")[0]\r\n .scrollTo(0, height);\r\n\r\n await this.message_list.push({\r\n type: \"ai\",\r\n data: \"loading\",\r\n loadflag: true,\r\n idx: this.loadidx + 1\r\n });\r\n\r\n await document\r\n .getElementsByClassName(\"chatlayout\")[0]\r\n .scrollTo(0, height);\r\n\r\n let ai_message = {};\r\n const res = await this.get_result(my_message.data);\r\n if (res.status == 200) {\r\n ai_message = {\r\n type: \"ai\",\r\n data: res.data.result,\r\n loadflag: false,\r\n targetidx: this.loadidx,\r\n idx: this.loadidx + 1\r\n };\r\n } else {\r\n ai_message = {\r\n type: \"ai\",\r\n data: \"서버가 이상해요\",\r\n loadflag: false,\r\n targetidx: this.loadidx,\r\n idx: this.loadidx + 1\r\n };\r\n }\r\n\r\n this.message_list.splice(this.loadidx + 1, 1, ai_message);\r\n document.getElementsByClassName(\"bbutton\")[0].textContent = await \"send\";\r\n document.getElementsByClassName(\"bbutton\")[0].classList.add(\"abutton\");\r\n document.getElementsByClassName(\"bbutton\")[0].classList.remove(\"bbutton\");\r\n this.loadflag