diff --git a/contact-center/app/src/main/java/com/chatopera/cc/util/PugHelper.java b/contact-center/app/src/main/java/com/chatopera/cc/util/PugHelper.java index 83ed7c19..d28abe95 100644 --- a/contact-center/app/src/main/java/com/chatopera/cc/util/PugHelper.java +++ b/contact-center/app/src/main/java/com/chatopera/cc/util/PugHelper.java @@ -1,16 +1,10 @@ package com.chatopera.cc.util; import com.alibaba.fastjson.JSON; -import com.google.common.collect.BoundType; -import com.google.common.collect.Range; -import org.apache.commons.lang.StringUtils; +import com.alibaba.fastjson.JSONArray; import java.text.SimpleDateFormat; -import java.util.ArrayList; -import java.util.Collection; -import java.util.Date; -import java.util.Collections; -import java.util.List; +import java.util.*; public class PugHelper { public String formatDate(String pattern, Date value) { @@ -38,6 +32,15 @@ public class PugHelper { return new String(charr); } + /** + * 将 String 转化为 JSONArray + * @param str + * @return + */ + public JSONArray parseStringToJsonArray(final String str) { + return JSON.parseArray(str); + } + public String toJSON(Object input) { return JSON.toJSON(input).toString(); } diff --git a/contact-center/app/src/main/resources/templates/apps/agent/media/message.pug b/contact-center/app/src/main/resources/templates/apps/agent/media/message.pug index 3a64d989..d72fe831 100644 --- a/contact-center/app/src/main/resources/templates/apps/agent/media/message.pug +++ b/contact-center/app/src/main/resources/templates/apps/agent/media/message.pug @@ -1,4 +1,12 @@ -if chatmessage.msgtype && chatmessage.msgtype == "image" +if chatmessage.expmsg && chatmessage.expmsg.contains("hyperlink\":\"http") + - var expmsg = pugHelper.parseStringToJsonArray(chatmessage.expmsg)[0]; + | 图文消息：#{expmsg.title} + br + = expmsg.summary + br + a(href="#{expmsg.hyperlink}", target="_blank") + img.ukefu-media-image(src="!{chatmessage.message ? chatmessage.message : ''}", id="#{chatmessage.id}") +else if chatmessage.msgtype && chatmessage.msgtype == "image" a(href="/agent/message/image.html?id=" + chatmessage.id, data-toggle="ajax", data-width="950", data-height="600", title="图片") img.ukefu-media-image(src="!{chatmessage.message ? chatmessage.message : ''}", id="#{chatmessage.id}") else if chatmessage.msgtype && chatmessage.msgtype == "cooperation" diff --git a/contact-center/app/src/main/resources/templates/apps/im/chatbot/index.pug b/contact-center/app/src/main/resources/templates/apps/im/chatbot/index.pug index 766381e5..c0aeaad6 100644 --- a/contact-center/app/src/main/resources/templates/apps/im/chatbot/index.pug +++ b/contact-center/app/src/main/resources/templates/apps/im/chatbot/index.pug @@ -1,4 +1,6 @@ doctype html +// constants +- var dialog_headimg = inviteData.consult_dialog_headimg ? '/res/image.html?id=' + inviteData.consult_dialog_headimg : '/images/agent.png' html head meta(charset='utf-8') @@ -259,6 +261,138 @@ html return false; } + function output(message, clazz, scroll, msgType) { + if (clazz == "message connect-message") { + var messages = document.getElementsByClassName("connect-message"); + for (inx = 0; inx < messages.length;) { + document.getElementById('above').removeChild(messages[inx]); + inx++; + } + } + var element = $("
"); + element.append(message); + $('#above').append(element); + if (scroll == null || scroll == true) { + if (msgType && msgType == "image") { + chatScorllBottom("above") + } else { + document.getElementById("above").scrollTop = document.getElementById("above").scrollHeight + } + } + } + + function update(id, message) { + document.getElementById(id).innerHTML = message; + } + + + function createButton(message, data) { + var element = $('

' + message + '

') + var list = element.find('.button-box'); + for (let i = 0; i < data.length; i++) { + var item = data[i]; + var allowClick = true; + var btn = $('
' + item.label + '
'); + var regClick = function (key) { + btn.click(function () { + if (allowClick) { + allowClick = false; + socket.emit('message', { + appid: "#{appid}", + userid: "#{userid}", + type: "message", + session: "#{sessionid}", + orgi: "#{orgi}", + message: key + }); + } + }); + } + regClick(item.text); + list.append(btn); + } + + return element; + } + + function createQList(message, data) { + var element = $('

' + message + '

') + var list = element.find('.button-box'); + for (let i = 0; i < data.length; i++) { + var item = data[i]; + var btn = $('
' + item.label + '
'); + var regClick = function (key) { + btn.click(function () { + socket.emit('message', { + appid: "#{appid}", + userid: "#{userid}", + type: "message", + session: "#{sessionid}", + orgi: "#{orgi}", + message: key + }); + }); + } + regClick(item.text); + list.append(btn); + } + + return element; + } + + function createCard(message, data) { + let item = data[0]; + + let html = '

' + item.title + '

' + item.summary + '

' + + var element = $(html); + element.click(function () { + window.open(item.hyperlink); + }) + + return element; + } + + function showExtmsg(username, createtime, message, json) { + var expmsg = JSON.parse(json.replace(/"/g,'"')); + + var type = expmsg[0].type; + var content; + if (type == 'button') { + content = createButton(message, expmsg); + } else if (type == 'qlist') { + content = createQList(message, expmsg); + } else if (type == 'card') { + content = createCard(message, expmsg); + } + + var box = $('
'); + + box.find('.chat-content').append(content); + output(box, 'chat-block') + } + + function showExtmsgBody(username, createtime, message, json) { + var expmsg = JSON.parse(json.replace(/"/g,'"')); + + var type = expmsg[0].type; + var content; + if (type == 'button') { + content = createButton(message, expmsg); + } else if (type == 'qlist') { + content = createQList(message, expmsg); + } else if (type == 'card') { + content = createCard(message, expmsg); + } + + var box = $('') + + var box = $('
'); + + box.find('.chat-content').append(content); + output(box, 'chat-block') + } + window.onbeforeunload = function () { } @@ -301,7 +435,6 @@ html } body.ukefu-point-text(style='overflow:hidden; background:#E8E8E8') - - var dialog_headimg= inviteData.consult_dialog_headimg ? '/res/image.html?id=' + inviteData.consult_dialog_headimg : '/images/agent.png' .large.ukefu-im-theme(style='background: white;', class=(type == 'text' ? 'ukefu-theme-border-' + inviteData.consult_dialog_color : '')) #containter.clearfix #header(class='theme' + inviteData.consult_dialog_color) @@ -347,20 +480,36 @@ html include ../media/message else .clearfix.chat-block - .chat-left - img.user-img(src=dialog_headimg , alt="") - .chat-message - label.user - if chatMessage.chatype == 'aireply' - | #{inviteData.ainame ? inviteData.ainame : '小松'} - else - | #{chatMessage.username} + // for debugging purpose + //script. + // console.log("chatMessage.message", '#{chatMessage.message.replaceAll("\\r|\\n", "")}'.replace(/\r?\n|\r/g, '')) + // console.log("chatMessage.username", "#{chatMessage.username}") + // var expmsg = "#{chatMessage.expmsg}"; + // if(expmsg) console.log("chatMessage.expmsg", JSON.parse(expmsg.replace(/"/g,'"'))) + // // && (chatMessage.message == "{CLEAR} 混合类型消息" || chatMessage.message == "{CLEAR} 图文消息") + - var createtime = pugHelper.formatDate('yyyy-MM-dd HH:mm:ss', chatMessage.createtime) + if chatMessage.expmsg + script. + try { + showExtmsgBody("#{chatMessage.username}", "#{createtime}", "#{chatMessage.message}", "#{chatMessage.expmsg}"); + } catch (e) { + console.log("unexpected result", e) + } + else + .chat-left + img.user-img(src=dialog_headimg , alt="") + .chat-message + label.user + if chatMessage.chatype == 'aireply' + | #{inviteData.ainame ? inviteData.ainame : '小松'} + else + | #{chatMessage.username} + label.time= createtime + .chatting-left + i.arrow + .chat-content + include ../media/message - label.time= pugHelper.formatDate('yyyy-MM-dd HH:mm:ss', chatMessage.createtime) - .chatting-left - i.arrow - .chat-content - include ../media/message .chat-bottom#bottom textarea#message(name='content', style='visibility:hidden;') .btn-push.clearfix @@ -556,92 +705,7 @@ html } }); - function createButton(message, data) { - var element = $('

' + message + '

') - var list = element.find('.button-box'); - for (let i = 0; i < data.length; i++) { - var item = data[i]; - var allowClick = true; - var btn = $('
' + item.label + '
'); - var regClick = function (key) { - btn.click(function () { - if (allowClick) { - allowClick = false; - socket.emit('message', { - appid: "#{appid}", - userid: "#{userid}", - type: "message", - session: "#{sessionid}", - orgi: "#{orgi}", - message: key - }); - } - }); - } - regClick(item.text); - list.append(btn); - } - return element; - } - - function createQList(message, data) { - var element = $('

' + message + '

') - var list = element.find('.button-box'); - for (let i = 0; i < data.length; i++) { - var item = data[i]; - var btn = $('
' + item.label + '
'); - var regClick = function (key) { - btn.click(function () { - socket.emit('message', { - appid: "#{appid}", - userid: "#{userid}", - type: "message", - session: "#{sessionid}", - orgi: "#{orgi}", - message: key - }); - }); - } - regClick(item.text); - list.append(btn); - } - - return element; - } - - function createCard(message, data) { - let item = data[0]; - - let html = '

' + item.title + '

' + item.summary + '

' - - var element = $(html); - element.click(function () { - window.open(item.hyperlink); - }) - - return element; - } - - function showExtmsg(username, createtime, message, json) { - var expmsg = JSON.parse(json); - - var type = expmsg[0].type; - var content; - if (type == 'button') { - content = createButton(message, expmsg); - } else if (type == 'qlist') { - content = createQList(message, expmsg); - } else if (type == 'card') { - content = createCard(message, expmsg); - } - - var box = $('
'); - - box.find('.chat-content').append(content); - - output(box, 'chat-block') - } function sendDisconnect() { socket.disconnect(); @@ -666,28 +730,6 @@ html } editor.html(''); } - function output(message, clazz, scroll, msgType) { - if (clazz == "message connect-message") { - var messages = document.getElementsByClassName("connect-message"); - for (inx = 0; inx < messages.length;) { - document.getElementById('above').removeChild(messages[inx]); - inx++; - } - } - var element = $("
"); - element.append(message); - $('#above').append(element); - if (scroll == null || scroll == true) { - if (msgType && msgType == "image") { - chatScorllBottom("above") - } else { - document.getElementById("above").scrollTop = document.getElementById("above").scrollHeight - } - } - } - function update(id, message) { - document.getElementById(id).innerHTML = message; - } var message = { // text:data.message, diff --git a/contact-center/app/src/main/resources/templates/apps/im/chatbot/mobile.pug b/contact-center/app/src/main/resources/templates/apps/im/chatbot/mobile.pug index 611b3f03..b283d9b9 100644 --- a/contact-center/app/src/main/resources/templates/apps/im/chatbot/mobile.pug +++ b/contact-center/app/src/main/resources/templates/apps/im/chatbot/mobile.pug @@ -1,4 +1,6 @@ doctype html +// constants +- var dialog_headimg= inviteData.consult_dialog_headimg ? '/res/image.html?id=' + inviteData.consult_dialog_headimg : '/images/agent.png' html head meta(charset='utf-8') @@ -142,210 +144,29 @@ html wordinx = wordinx + 2 + obj.length; } } - $(document).ready(function () { - window.addEventListener('resize', function () { - if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { - window.setTimeout(function () { - document.activeElement.scrollIntoViewIfNeeded() - }, 0) - } - }); - // 在输入框获取焦点, 键盘弹起后, 真的是一行代码 - $(document).on('submit.form.data-api', '[data-toggle="ajax-form"]', function (e) { - var formValue = $(e.target); - $(this).ajaxSubmit({ - url: formValue.attr("action"), - success: function (data) { - - }, - error: function (xhr, type, s) { - //notification("",false); //结束 - } - }); - return false; - }); - }); - - style. - .msg-btn { - border: #4598ee 1px solid; - padding: 5px; - margin: 5px; - min-width: 125px; - text-align: center; - display: inline-block; - background-color: #e6f2ff; - cursor: default; - } - - .msg-list { - color: #4598ee - } - - .msg-card { - display: inline-block; - color: #000000; - } - - .msg-crad-right { - position: relative; - left: 10px; - width: 170px; - height: 60px; - overflow: hidden; - text-overflow: ellipsis; - } - - .card-box { - cursor: default; - width: 250px; - height: 72px; - padding: 6px; - line-height: 20px; - } - - // kindeditor - body.ukefu-im-theme.ukefu-point-text(style='width:100%;overflow:hidden;height:100%;max-height:100%;position: fixed;/* 或者scroll */-webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */') - - var dialog_headimg= inviteData.consult_dialog_headimg ? '/res/image.html?id=' + inviteData.consult_dialog_headimg : '/images/agent.png' - #header(class="theme" + inviteData.consult_dialog_color) - img(src=(inviteData.consult_dialog_logo ? '/res/image.html?id=' + inviteData.consult_dialog_logo : '/images/logo.png'), style='height:50px;padding:10px;') - .ukefu-func-tab - ul - if models.contains("chatbot") && inviteData.ai && inviteData.ai == true && aiid - if exchange || exchange == "true" - li - a(href="/im/index.html?appid=" + appid + "&orgi=" + orgi + (aiid ? '&aiid=' + aiid : '') + "&ai=false" + (client ? '&client=' + client : '') + (type ? '&type=' + type : '') + (skill ? '&skill=' + skill : '') + (agent ? '&agent=' + agent : '') + "&userid=" + userid + "&sessionid=" + sessionid + "&t=" + pugHelper.currentTimeMillis()) 人工客服 - li.cur - a(href="javascript:void(0)") 智能坐席 - else - li.cur - a(href="javascript:void(0)") 智能坐席 - #cooperation.ukefu-cooperation(style='display:none;z-index: 100;background-color: #ffffff;position: fixed;left: 0px;width: 100%;top: 0px;top:0px;height: 100%;') - .ukefu-image-canvas#ukefu-image-content(style='margin-top:2px;') - img#ukefu_img_ctx(style='max-width: 100%;max-height: 100%;') - .drawBoard(style='position: absolute;left: 0;top: 0;margin-top:2px;z-index: 998;') - canvas#canvas-borad.brushBorad 你的浏览器不支持 canvas 绘图 - div(style='position: absolute;bottom: 10px;width: 100%;text-align: center;z-index:10000') - button#offcoop-btn(style='border-color:#009688 !important;color:#FFFFFF;display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;background-color: #009688;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;margin-right:10px;border: none;border-radius: 2px;cursor: pointer;opacity: .9;filter: alpha(opacity=90);background-color: #377FED !important;border:1px solid #FFFFFF;', onclick='offCoop();') 退出协作 - .chat-above#above - .clearfix.message.welcome - span#welcome-message= inviteData.dialog_message ? inviteData.dialog_message : '欢迎您来咨询！欢迎使用春松客服！如需帮助请联系 info@chatopera.com' - for chatMessage in pugHelper.reverse(chatMessageList.content) - if chatMessage.userid && userid && chatMessage.calltype && chatMessage.calltype == "呼入" - .clearfix.chat-block - .chat-right - img.user-img(src="/im/img/user.png", alt="") - .chat-message - label.time= pugHelper.formatDate('yyyy-MM-dd HH:mm:ss', chatMessage.createtime) - label.user #{chatMessage.username} - .chatting-right - i.arrow(class="arrow" + inviteData.consult_dialog_color) - .chat-content(class="theme" + inviteData.consult_dialog_color) - include ../media/message - else - .clearfix.chat-block - .chat-left - img.user-img(src=dialog_headimg, alt="") - .chat-message - label.user= chatMessage.username - label.time= pugHelper.formatDate('yyyy-MM-dd HH:mm:ss', chatMessage.createtime) - .chatting-left - i.arrow - .chat-content - include ../media/message - .mobile-chat-bottom#bottom - textarea#message(name='content', maxlength=(inviteData.maxwordsnum > 0 ? inviteData.maxwordsnum : 300)) - .btn-push.clearfix - img#facedialog(onclick='return openFaceDialog()', src='/im/img/face.png', style='width:32px;height:32px;') - a(href='javascript:void(0)', onclick='sendMessage();return false;') - img(src='/im/img/send.png', style='width:32px;height:32px;') - #faceindex(style='display:none;height:200px;position: absolute;bottom: 0px;width:100%;overflow-x:auto;') - table.ke-table(cellpadding='0', cellspacing='0', border='0', style='min-width:100%;') - tbody - for row in pugHelper.range(0,4) - tr - for col in pugHelper.range(0,20) - - var emoid=row * 20 + col; - td.ke-cell - span.ke-img - img(src="/im/js/kindeditor/plugins/emoticons/images/" + emoid + ".png", border="0", alt="", onclick="insertImg('" + emoid + "')") - - script. - var service_end = false; - // 调查问卷 - var diaShade = document.getElementById('diaShade'); - var dialogWrap = document.getElementById('dialogWrap'); - function popup(para) { - diaShade.style.display = para; - dialogWrap.style.display = para; - } - - function chatScorllBottom(box) { - var imgdefereds = []; //定义一个操作数组 - $('#' + box + ' .ukefu-media-image').each(function () { //遍历所有图片，将图片 - var dfd = $.Deferred(); //定义一个将要完成某个操作的对象 - $(this).bind('load', function () { - dfd.resolve(); //图片加载完成后，表示操作成功 - }); - if (this.complete) { //如果图片加载状态为完成，那么也标识操作成功 - setTimeout(function () { - dfd.resolve(); - }, 1000); - } - imgdefereds.push(dfd); //将所有操作对象放入数组中 - }) - $.when.apply(null, imgdefereds).done(function () { //注册所有操作完成后的执行方法 - document.getElementById(box).scrollTop = document.getElementById(box).scrollHeight - }); - } - - chatScorllBottom('above') - // 参数连接 - // 参数连接 - var hostname = location.hostname; - var protocol = window.location.protocol.replace(/:/g, ''); - var username = encodeURIComponent("#{username}"); - var socket = io(protocol + '://' + hostname + ':#{port}/im/chatbot?userid=#{userid}&orgi=#{orgi}&session=#{sessionid}&appid=#{appid}&osname=!{osname}&browser=!{browser}!{skill ? "&skill=" + skill : ""}!{username ? "&nickname='+username+'" : ""}!{agent ? "&agent=" + agent : ""}!{title ? "&title=" + encodeURIComponent(title) : ""}!{traceid ? "&url=" + url : ""}!{traceid ? "&traceid=" + traceid : ""}!{aiid ? "&aiid=" + aiid : ""}', {transports: ['websocket', 'polling']}); - socket.on('connect', function () { - //service.sendRequestMessage(); - //output(''+ new Date().format("yyyy-MM-dd hh:mm:ss") + ' 开始沟通' +'' , 'message callOutConnect-message'); - }) - socket.on("agentstatus", function (data) { - document.getElementById('connect-message').innerHTML = data.message; - }) - socket.on("status", function (data) { - output('' + data.message + '', 'message connect-message'); - if (data.messageType == "end") { - service_end = true; - //editor.readonly(); - } - if (document.getElementById("agentserviceid")) { - document.getElementById("agentserviceid").value = data.agentserviceid; - } - }) - socket.on('message', function (data) { - var chat = document.getElementsByClassName('chatting-left').innerText; - data.createtime = dayjs(data.createtime).format('YYYY-MM-DD HH:mm:ss'); - chat = data.message; - if (data.msgtype == "image") { - chat = ""; - } else if (data.msgtype == "cooperation") { - chat = "您收到一个协作邀请，点击进入协作"; - } else if (data.msgtype == "action") { - //检查访客是否在协作页面上，如果在协作页面上，就开始执行重绘，否则不做处理 - drawCanvasImage(data.attachmentid); - } - if (data.calltype == "呼入") { - output('
' + chat + '
', "chat-block", data.msgtype); - } else if (data.calltype == "呼出") { - if (data.expmsg) { - showExtmsg(data.username, data.createtime, data.message, data.expmsg); - } else { - output('
' + chat + '
', "chat-block", data.msgtype); + function output(message, clazz, msgType) { + if (clazz == "message connect-message") { + var messages = document.getElementsByClassName("connect-message"); + for (inx = 0; inx < messages.length;) { + document.getElementById('above').removeChild(messages[inx]); + inx++; } } - }); + var element = $("
"); + element.append(message); + $('#above').append(element); + if (msgType && msgType == "image") { + chatScorllBottom("above") + } else { + document.getElementById("above").scrollTop = document.getElementById("above").scrollHeight + } + //$("#welcome-message").html(document.getElementById('above').scrollHeight); + } + + function update(id, message) { + document.getElementById(id).innerHTML = message; + } function showExtmsg(username, createtime, message, json) { var expmsg = JSON.parse(json); @@ -367,6 +188,26 @@ html output(box, 'chat-block') } + function showExtmsgBody(username, createtime, message, json) { + var expmsg = JSON.parse(json.replace(/"/g,'"')); + + var type = expmsg[0].type; + var content; + if (type == 'button') { + content = createButton(message, expmsg); + } else if (type == 'qlist') { + content = createQList(message, expmsg); + } else if (type == 'card') { + content = createCard(message, expmsg); + } + + var box = $('
'); + + box.find('.chat-content').append(content); + + output(box, 'chat-block') + } + function createButton(message, data) { var element = $('

' + message + '

') var list = element.find('.button-box'); @@ -434,6 +275,223 @@ html return element; } + $(document).ready(function () { + window.addEventListener('resize', function () { + if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { + window.setTimeout(function () { + document.activeElement.scrollIntoViewIfNeeded() + }, 0) + } + }); + // 在输入框获取焦点, 键盘弹起后, 真的是一行代码 + + $(document).on('submit.form.data-api', '[data-toggle="ajax-form"]', function (e) { + var formValue = $(e.target); + $(this).ajaxSubmit({ + url: formValue.attr("action"), + success: function (data) { + + }, + error: function (xhr, type, s) { + //notification("",false); //结束 + } + }); + return false; + }); + }); + + style. + .msg-btn { + border: #4598ee 1px solid; + padding: 5px; + margin: 5px; + min-width: 125px; + text-align: center; + display: inline-block; + background-color: #e6f2ff; + cursor: default; + } + + .msg-list { + color: #4598ee + } + + .msg-card { + display: inline-block; + color: #000000; + } + + .msg-crad-right { + position: relative; + left: 10px; + width: 170px; + height: 60px; + overflow: hidden; + text-overflow: ellipsis; + } + + .card-box { + cursor: default; + width: 250px; + height: 72px; + padding: 6px; + line-height: 20px; + } + + // kindeditor + body.ukefu-im-theme.ukefu-point-text(style='width:100%;overflow:hidden;height:100%;max-height:100%;position: fixed;/* 或者scroll */-webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */') + #header(class="theme" + inviteData.consult_dialog_color) + img(src=(inviteData.consult_dialog_logo ? '/res/image.html?id=' + inviteData.consult_dialog_logo : '/images/logo.png'), style='height:50px;padding:10px;') + .ukefu-func-tab + ul + if models.contains("chatbot") && inviteData.ai && inviteData.ai == true && aiid + if exchange || exchange == "true" + li + a(href="/im/index.html?appid=" + appid + "&orgi=" + orgi + (aiid ? '&aiid=' + aiid : '') + "&ai=false" + (client ? '&client=' + client : '') + (type ? '&type=' + type : '') + (skill ? '&skill=' + skill : '') + (agent ? '&agent=' + agent : '') + "&userid=" + userid + "&sessionid=" + sessionid + "&t=" + pugHelper.currentTimeMillis()) 人工客服 + li.cur + a(href="javascript:void(0)") 智能坐席 + else + li.cur + a(href="javascript:void(0)") 智能坐席 + #cooperation.ukefu-cooperation(style='display:none;z-index: 100;background-color: #ffffff;position: fixed;left: 0px;width: 100%;top: 0px;top:0px;height: 100%;') + .ukefu-image-canvas#ukefu-image-content(style='margin-top:2px;') + img#ukefu_img_ctx(style='max-width: 100%;max-height: 100%;') + .drawBoard(style='position: absolute;left: 0;top: 0;margin-top:2px;z-index: 998;') + canvas#canvas-borad.brushBorad 你的浏览器不支持 canvas 绘图 + div(style='position: absolute;bottom: 10px;width: 100%;text-align: center;z-index:10000') + button#offcoop-btn(style='border-color:#009688 !important;color:#FFFFFF;display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;background-color: #009688;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;margin-right:10px;border: none;border-radius: 2px;cursor: pointer;opacity: .9;filter: alpha(opacity=90);background-color: #377FED !important;border:1px solid #FFFFFF;', onclick='offCoop();') 退出协作 + .chat-above#above + .clearfix.message.welcome + span#welcome-message= inviteData.dialog_message ? inviteData.dialog_message : '欢迎您来咨询！欢迎使用春松客服！如需帮助请联系 info@chatopera.com' + for chatMessage in pugHelper.reverse(chatMessageList.content) + if chatMessage.userid && userid && chatMessage.calltype && chatMessage.calltype == "呼入" + .clearfix.chat-block + .chat-right + img.user-img(src="/im/img/user.png", alt="") + .chat-message + label.time= pugHelper.formatDate('yyyy-MM-dd HH:mm:ss', chatMessage.createtime) + label.user #{chatMessage.username} + .chatting-right + i.arrow(class="arrow" + inviteData.consult_dialog_color) + .chat-content(class="theme" + inviteData.consult_dialog_color) + include ../media/message + else + .clearfix.chat-block + - var createtime = pugHelper.formatDate('yyyy-MM-dd HH:mm:ss', chatMessage.createtime) + if chatMessage.expmsg + script. + try { + showExtmsgBody("#{chatMessage.username}", "#{createtime}", "#{chatMessage.message}", "#{chatMessage.expmsg}"); + } catch (e) { + console.log("unexpected result", e) + } + else + .chat-left + img.user-img(src=dialog_headimg, alt="") + .chat-message + label.user= chatMessage.username + label.time= pugHelper.formatDate('yyyy-MM-dd HH:mm:ss', chatMessage.createtime) + .chatting-left + i.arrow + .chat-content + include ../media/message + + .mobile-chat-bottom#bottom + textarea#message(name='content', maxlength=(inviteData.maxwordsnum > 0 ? inviteData.maxwordsnum : 300)) + .btn-push.clearfix + img#facedialog(onclick='return openFaceDialog()', src='/im/img/face.png', style='width:32px;height:32px;') + a(href='javascript:void(0)', onclick='sendMessage();return false;') + img(src='/im/img/send.png', style='width:32px;height:32px;') + #faceindex(style='display:none;height:200px;position: absolute;bottom: 0px;width:100%;overflow-x:auto;') + table.ke-table(cellpadding='0', cellspacing='0', border='0', style='min-width:100%;') + tbody + for row in pugHelper.range(0,4) + tr + for col in pugHelper.range(0,20) + - var emoid=row * 20 + col; + td.ke-cell + span.ke-img + img(src="/im/js/kindeditor/plugins/emoticons/images/" + emoid + ".png", border="0", alt="", onclick="insertImg('" + emoid + "')") + + script. + var service_end = false; + // 调查问卷 + var diaShade = document.getElementById('diaShade'); + var dialogWrap = document.getElementById('dialogWrap'); + function popup(para) { + diaShade.style.display = para; + dialogWrap.style.display = para; + } + + function chatScorllBottom(box) { + var imgdefereds = []; //定义一个操作数组 + $('#' + box + ' .ukefu-media-image').each(function () { //遍历所有图片，将图片 + var dfd = $.Deferred(); //定义一个将要完成某个操作的对象 + $(this).bind('load', function () { + dfd.resolve(); //图片加载完成后，表示操作成功 + }); + if (this.complete) { //如果图片加载状态为完成，那么也标识操作成功 + setTimeout(function () { + dfd.resolve(); + }, 1000); + } + imgdefereds.push(dfd); //将所有操作对象放入数组中 + }) + $.when.apply(null, imgdefereds).done(function () { //注册所有操作完成后的执行方法 + document.getElementById(box).scrollTop = document.getElementById(box).scrollHeight + }); + } + + chatScorllBottom('above') + // 参数连接 + // 参数连接 + var hostname = location.hostname; + var protocol = window.location.protocol.replace(/:/g, ''); + var username = encodeURIComponent("#{username}"); + var socket = io(protocol + '://' + hostname + ':#{port}/im/chatbot?userid=#{userid}&orgi=#{orgi}&session=#{sessionid}&appid=#{appid}&osname=!{osname}&browser=!{browser}!{skill ? "&skill=" + skill : ""}!{username ? "&nickname='+username+'" : ""}!{agent ? "&agent=" + agent : ""}!{title ? "&title=" + encodeURIComponent(title) : ""}!{traceid ? "&url=" + url : ""}!{traceid ? "&traceid=" + traceid : ""}!{aiid ? "&aiid=" + aiid : ""}', {transports: ['websocket', 'polling']}); + socket.on('connect', function () { + //service.sendRequestMessage(); + //output(''+ new Date().format("yyyy-MM-dd hh:mm:ss") + ' 开始沟通' +'' , 'message callOutConnect-message'); + }) + + socket.on("agentstatus", function (data) { + document.getElementById('connect-message').innerHTML = data.message; + }) + + socket.on("status", function (data) { + output('' + data.message + '', 'message connect-message'); + if (data.messageType == "end") { + service_end = true; + //editor.readonly(); + } + if (document.getElementById("agentserviceid")) { + document.getElementById("agentserviceid").value = data.agentserviceid; + } + }) + + socket.on('message', function (data) { + var chat = document.getElementsByClassName('chatting-left').innerText; + data.createtime = dayjs(data.createtime).format('YYYY-MM-DD HH:mm:ss'); + chat = data.message; + if (data.msgtype == "image") { + chat = ""; + } else if (data.msgtype == "cooperation") { + chat = "您收到一个协作邀请，点击进入协作"; + } else if (data.msgtype == "action") { + //检查访客是否在协作页面上，如果在协作页面上，就开始执行重绘，否则不做处理 + drawCanvasImage(data.attachmentid); + } + if (data.calltype == "呼入") { + output('
' + chat + '
', "chat-block", data.msgtype); + } else if (data.calltype == "呼出") { + if (data.expmsg) { + showExtmsg(data.username, data.createtime, data.message, data.expmsg); + } else { + output('
' + chat + '
', "chat-block", data.msgtype); + } + } + }); + socket.on('disconnect', function () { output('连接坐席失败，在线咨询服务不可用', 'message connect-message'); }); @@ -457,6 +515,7 @@ html }); } + function drawCanvasImage(fileid) { var canvas = document.getElementById("canvas-borad"); @@ -504,27 +563,7 @@ html }); } } - function output(message, clazz, msgType) { - if (clazz == "message connect-message") { - var messages = document.getElementsByClassName("connect-message"); - for (inx = 0; inx < messages.length;) { - document.getElementById('above').removeChild(messages[inx]); - inx++; - } - } - var element = $("
"); - element.append(message); - $('#above').append(element); - if (msgType && msgType == "image") { - chatScorllBottom("above") - } else { - document.getElementById("above").scrollTop = document.getElementById("above").scrollHeight - } - //$("#welcome-message").html(document.getElementById('above').scrollHeight); - } - function update(id, message) { - document.getElementById(id).innerHTML = message; - } + autoTextarea(document.getElementById("message"));// 调用 $('#message').click(function () { wordinx = getPositionForTextArea(document.getElementById('message')); diff --git a/public/plugins/chatbot/classes/ChatbotEventSubscription.java b/public/plugins/chatbot/classes/ChatbotEventSubscription.java index 24f875fc..fbad7eef 100644 --- a/public/plugins/chatbot/classes/ChatbotEventSubscription.java +++ b/public/plugins/chatbot/classes/ChatbotEventSubscription.java @@ -20,6 +20,7 @@ import com.chatopera.bot.exception.ChatbotException; import com.chatopera.bot.sdk.Response; import com.chatopera.cc.basic.Constants; import com.chatopera.cc.basic.MainContext; +import com.chatopera.cc.basic.MainUtils; import com.chatopera.cc.cache.Cache; import com.chatopera.cc.model.Chatbot; import com.chatopera.cc.persistence.repository.AgentUserRepository; @@ -126,7 +127,9 @@ public class ChatbotEventSubscription { ChatMessage respHelp = new ChatMessage(); JSONArray respParams = new JSONArray(); if (!StringUtils.equals(MainContext.ChannelType.WEBIM.toString(), c.getChannel())) { - // 非 WEBIM 情况，比如 Facebook Messenger，使用下面的方法 + /** + * 非 WEBIM 情况，比如 Facebook Messenger，使用下面的方法 + */ // 如果在更多渠道下，此处可能仅适应于 Messenger，那么宜将检测条件调整为 ChannelType.MESSENGER if (data.getBoolean("logic_is_fallback")) { if (!StringUtils.equals(Constants.CHATBOT_HUMAN_FIRST, c.getWorkmode())) { @@ -219,7 +222,9 @@ public class ChatbotEventSubscription { } } } else { - // 当前渠道为 WEBIM + /** + * 当前渠道为 WEBIM + */ if (data.getBoolean("logic_is_fallback")) { // 兜底回复，检查FAQ JSONArray faqReplies = data.getJSONArray("faq"); @@ -249,22 +254,30 @@ public class ChatbotEventSubscription { if (MainContext.ChannelType.WEBIM.toString().equals(resp.getChannel())) { // WEBIM 渠道 if (StringUtils.equals(resp.getMessage(), "{CLEAR} 混合类型消息") || StringUtils.equals(resp.getMessage(), "{CLEAR} 图文消息")) { + // 处理多答案 JSONArray params = data.getJSONArray("params"); for (int i = 0; i < params.length(); i++) { JSONObject item = params.getJSONObject(i); ChatMessage itemResp = (ChatMessage) resp.clone(); + itemResp.setId(MainUtils.getUUID()); itemResp.setExpmsg(null); + + // 处理不同答案类型 + // 数据格式：https://github.com/chatopera/cskefu/issues/468 if (item.getString("type").equals("plain")) { itemResp.setMessage(item.getString("content")); chatbotProxy.saveAndPublish(itemResp); } else if (item.getString("type").equals("card")) { if (item.has("thumbnail")) { - item.put("thumbnail", ChatbotConstants.DEFAULT_BOT_PROVIDER + item.getString("thumbnail")); + String thumbnailUrl = botServiceProvider + item.getString("thumbnail"); + item.put("thumbnail", thumbnailUrl); + JSONArray expmsg = new JSONArray(); + expmsg.put(item); + itemResp.setExpmsg(expmsg.toString()); +// itemResp.setMsgtype("image"); + itemResp.setMessage(thumbnailUrl); + chatbotProxy.saveAndPublish(itemResp); } - JSONArray expmsg = new JSONArray(); - expmsg.put(item); - itemResp.setExpmsg(expmsg.toString()); - chatbotProxy.saveAndPublish(itemResp); } } } else {