[Enhancement] Use JS-Cookie to set Cookies (#193)
* Update js-cookie * Add sdk css * Remove conversation padding
This commit is contained in:
parent
e32b6bf6d4
commit
3d3aefb197
14 changed files with 170 additions and 68 deletions
1
Gemfile
1
Gemfile
|
@ -36,6 +36,7 @@ gem 'webpacker'
|
|||
gem 'devise', git: 'https://github.com/plataformatec/devise'
|
||||
gem 'devise_token_auth', git: 'https://github.com/lynndylanhurley/devise_token_auth'
|
||||
# authorization
|
||||
gem 'jwt'
|
||||
gem 'pundit'
|
||||
|
||||
##--- gems for pubsub service ---##
|
||||
|
|
|
@ -220,6 +220,7 @@ GEM
|
|||
jmespath (1.4.0)
|
||||
json (2.2.0)
|
||||
json_pure (2.2.0)
|
||||
jwt (2.2.1)
|
||||
kaminari (1.1.1)
|
||||
activesupport (>= 4.1.0)
|
||||
kaminari-actionview (= 1.1.1)
|
||||
|
@ -459,6 +460,7 @@ DEPENDENCIES
|
|||
haikunator
|
||||
hashie
|
||||
jbuilder (~> 2.5)
|
||||
jwt
|
||||
kaminari
|
||||
koala
|
||||
letter_opener
|
||||
|
|
|
@ -45,7 +45,9 @@ class Api::V1::Widget::MessagesController < ActionController::Base
|
|||
end
|
||||
|
||||
def cookie_params
|
||||
JSON.parse(cookies.signed[cookie_name]).symbolize_keys
|
||||
@cookie_params ||= JWT.decode(
|
||||
request.headers[header_name], secret_key, true, algorithm: 'HS256'
|
||||
).first.symbolize_keys
|
||||
end
|
||||
|
||||
def message_finder_params
|
||||
|
@ -58,11 +60,15 @@ class Api::V1::Widget::MessagesController < ActionController::Base
|
|||
@message_finder ||= MessageFinder.new(conversation, message_finder_params)
|
||||
end
|
||||
|
||||
def cookie_name
|
||||
'cw_conversation_' + params[:website_token]
|
||||
def header_name
|
||||
'X-Auth-Token'
|
||||
end
|
||||
|
||||
def permitted_params
|
||||
params.fetch(:message).permit(:content)
|
||||
end
|
||||
|
||||
def secret_key
|
||||
Rails.application.secrets.secret_key_base
|
||||
end
|
||||
end
|
||||
|
|
|
@ -1,14 +1,11 @@
|
|||
class WidgetsController < ActionController::Base
|
||||
before_action :set_web_widget
|
||||
before_action :set_token
|
||||
before_action :set_contact
|
||||
before_action :build_contact
|
||||
|
||||
private
|
||||
|
||||
def set_web_widget
|
||||
@web_widget = ::Channel::WebWidget.find_by!(website_token: permitted_params[:website_token])
|
||||
end
|
||||
|
||||
def set_contact
|
||||
return if cookie_params[:source_id].nil?
|
||||
|
||||
|
@ -20,28 +17,49 @@ class WidgetsController < ActionController::Base
|
|||
@contact = contact_inbox.contact
|
||||
end
|
||||
|
||||
def set_token
|
||||
@token = conversation_token
|
||||
end
|
||||
|
||||
def set_web_widget
|
||||
@web_widget = ::Channel::WebWidget.find_by!(website_token: permitted_params[:website_token])
|
||||
end
|
||||
|
||||
def build_contact
|
||||
return if @contact.present?
|
||||
|
||||
contact_inbox = @web_widget.create_contact_inbox
|
||||
@contact = contact_inbox.contact
|
||||
|
||||
cookies.signed[cookie_name] = JSON.generate(
|
||||
payload = {
|
||||
source_id: contact_inbox.source_id,
|
||||
contact_id: @contact.id,
|
||||
inbox_id: @web_widget.inbox.id
|
||||
).to_s
|
||||
}
|
||||
@token = JWT.encode payload, secret_key, 'HS256'
|
||||
end
|
||||
|
||||
def cookie_params
|
||||
cookies.signed[cookie_name] ? JSON.parse(cookies.signed[cookie_name]).symbolize_keys : {}
|
||||
return @cookie_params if @cookie_params.present?
|
||||
|
||||
if conversation_token.present?
|
||||
@cookie_params = JWT.decode(
|
||||
conversation_token, secret_key, true, algorithm: 'HS256'
|
||||
).first.symbolize_keys
|
||||
return @cookie_params
|
||||
end
|
||||
{}
|
||||
end
|
||||
|
||||
def conversation_token
|
||||
permitted_params[:cw_conversation]
|
||||
end
|
||||
|
||||
def permitted_params
|
||||
params.permit(:website_token)
|
||||
params.permit(:website_token, :cw_conversation)
|
||||
end
|
||||
|
||||
def cookie_name
|
||||
'cw_conversation_' + permitted_params[:website_token]
|
||||
def secret_key
|
||||
Rails.application.secrets.secret_key_base
|
||||
end
|
||||
end
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
import sdkStyles from '../widget/assets/scss/sdk.css';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
import { SDK_CSS } from '../widget/assets/scss/sdk';
|
||||
/* eslint-disable no-param-reassign */
|
||||
const bubbleImg =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg==';
|
||||
|
@ -6,7 +8,6 @@ const closeImg =
|
|||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAP1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////9Du/pqAAAAFHRSTlMACBstLi8wMVB+mcbT2err7O3w8n+sjtQAAAEuSURBVHgBtNLdcoMgGITh1SCGH9DId//X2mnTg7hYxj0oh8w8r+MqgDnmlsIE6UwhtRxnAHge9n2KV7wvP+h4AvPbm73W+359/aJjRjQTCuTNIrJJBfKW0UwqkLeGZJ8Ff2O/T28JwZQCewuYilJgX6buavdDv188br1RIE+jc2H5yy+9VwrXXij0nsflwth7YFRw7N3Y88BcYL+z7wubO/lt6AcFwQMLF9irP8r2eF8/ei8VLrxUkDzguMDejX03WK3dsGJB9lxgrxd0T8PTRxUL5OUCealQz76KXg/or/CvI36VXgcEAAAgCMP6t16IZVDg3zPuI+0rb5g2zlsoW2lbqlvrOyw7bTuuO+8LGIs4C1mLeQuai7oL2437LRytPC1drX0tnq2+Ld+r/wDPIIIJkfdlbQAAAABJRU5ErkJggg==';
|
||||
|
||||
const body = document.getElementsByTagName('body')[0];
|
||||
const iframe = document.createElement('iframe');
|
||||
const holder = document.createElement('div');
|
||||
|
||||
const bubbleHolder = document.createElement('div');
|
||||
|
@ -16,16 +17,10 @@ const closeBubble = document.createElement('div');
|
|||
const notification_bubble = document.createElement('span');
|
||||
const bodyOverFlowStyle = document.body.style.overflow;
|
||||
|
||||
function addClass(elm, classes) {
|
||||
if (classes) {
|
||||
elm.className += ` ${classes}`;
|
||||
}
|
||||
}
|
||||
|
||||
function loadCSS() {
|
||||
const css = document.createElement('style');
|
||||
css.type = 'text/css';
|
||||
css.innerHTML = sdkStyles;
|
||||
css.innerHTML = `${SDK_CSS}`;
|
||||
document.body.appendChild(css);
|
||||
}
|
||||
|
||||
|
@ -45,14 +40,13 @@ function wootOn(elm, event, fn) {
|
|||
}
|
||||
|
||||
function classHelper(classes, action, elm) {
|
||||
let classarray;
|
||||
let search;
|
||||
let replace;
|
||||
let i;
|
||||
let has = false;
|
||||
if (classes) {
|
||||
// Trim any whitespace
|
||||
classarray = classes.split(/\s+/);
|
||||
const classarray = classes.split(/\s+/);
|
||||
for (i = 0; i < classarray.length; i += 1) {
|
||||
search = new RegExp(`\\b${classarray[i]}\\b`, 'g');
|
||||
replace = new RegExp(` *${classarray[i]}\\b`, 'g');
|
||||
|
@ -75,6 +69,12 @@ function classHelper(classes, action, elm) {
|
|||
return has;
|
||||
}
|
||||
|
||||
function addClass(elm, classes) {
|
||||
if (classes) {
|
||||
elm.className += ` ${classes}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle class
|
||||
function toggleClass(elm, classes) {
|
||||
classHelper(classes, 'toggle', elm);
|
||||
|
@ -117,7 +117,49 @@ function enableScroll() {
|
|||
document.body.style.overflow = bodyOverFlowStyle;
|
||||
}
|
||||
|
||||
function loadCallback() {
|
||||
const IFrameHelper = {
|
||||
createFrame: ({ baseUrl, websiteToken }) => {
|
||||
const iframe = document.createElement('iframe');
|
||||
const cwCookie = Cookies.get('cw_conversation');
|
||||
let widgetUrl = `${baseUrl}/widgets?website_token=${websiteToken}`;
|
||||
if (cwCookie) {
|
||||
widgetUrl = `${widgetUrl}&cw_conversation=${cwCookie}`;
|
||||
}
|
||||
iframe.src = widgetUrl;
|
||||
|
||||
iframe.id = 'chatwoot_web_widget';
|
||||
iframe.style.visibility = 'hidden';
|
||||
holder.className = 'woot-widget-holder woot--hide';
|
||||
holder.appendChild(iframe);
|
||||
body.appendChild(holder);
|
||||
IFrameHelper.initPostMessageCommunication();
|
||||
},
|
||||
getAppFrame: () => document.getElementById('chatwoot_web_widget'),
|
||||
sendMessage: (key, value) => {
|
||||
const element = IFrameHelper.getAppFrame();
|
||||
element.contentWindow.postMessage(
|
||||
`chatwoot-widget:${JSON.stringify({ event: key, ...value })}`,
|
||||
'*'
|
||||
);
|
||||
},
|
||||
initPostMessageCommunication: () => {
|
||||
window.onmessage = e => {
|
||||
if (
|
||||
typeof e.data !== 'string' ||
|
||||
e.data.indexOf('chatwoot-widget:') !== 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const message = JSON.parse(e.data.replace('chatwoot-widget:', ''));
|
||||
if (message.event === 'loaded') {
|
||||
Cookies.set('cw_conversation', message.config.authToken);
|
||||
IFrameHelper.sendMessage('config-set', {});
|
||||
IFrameHelper.onLoad();
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad: () => {
|
||||
const iframe = IFrameHelper.getAppFrame();
|
||||
iframe.style.visibility = '';
|
||||
iframe.setAttribute('id', `chatwoot_live_chat_widget`);
|
||||
iframe.onmouseenter = disableScroll;
|
||||
|
@ -142,17 +184,14 @@ function loadCallback() {
|
|||
);
|
||||
bubbleHolder.appendChild(createNotificationBubble());
|
||||
onClickChatBubble();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
function loadIframe({ websiteToken, baseUrl }) {
|
||||
iframe.style.visibility = 'hidden';
|
||||
iframe.src = `${baseUrl}/widgets?website_token=${websiteToken}`;
|
||||
iframe.onload = loadCallback;
|
||||
|
||||
holder.className = 'woot-widget-holder woot--hide';
|
||||
holder.appendChild(iframe);
|
||||
|
||||
body.appendChild(holder);
|
||||
function loadIframe({ baseUrl, websiteToken }) {
|
||||
IFrameHelper.createFrame({
|
||||
baseUrl,
|
||||
websiteToken,
|
||||
});
|
||||
}
|
||||
|
||||
window.chatwootSDK = {
|
||||
|
|
|
@ -6,6 +6,17 @@
|
|||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import { setHeader } from './helpers/axios';
|
||||
|
||||
export const IFrameHelper = {
|
||||
isIFrame: () => window.self !== window.top,
|
||||
sendMessage: msg => {
|
||||
window.parent.postMessage(
|
||||
`chatwoot-widget:${JSON.stringify({ ...msg })}`,
|
||||
'*'
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
@ -15,7 +26,28 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
if (IFrameHelper.isIFrame()) {
|
||||
IFrameHelper.sendMessage({
|
||||
event: 'loaded',
|
||||
config: {
|
||||
authToken: window.authToken,
|
||||
},
|
||||
});
|
||||
setHeader('X-Auth-Token', window.authToken);
|
||||
}
|
||||
|
||||
window.addEventListener('message', e => {
|
||||
if (
|
||||
typeof e.data !== 'string' ||
|
||||
e.data.indexOf('chatwoot-widget:') !== 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const message = JSON.parse(e.data.replace('chatwoot-widget:', ''));
|
||||
if (message.event === 'config-set') {
|
||||
this.fetchOldConversations();
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
export const SDK_CSS = `
|
||||
.woot-widget-holder {
|
||||
z-index: 2147483000!important;
|
||||
position: fixed!important;
|
||||
|
@ -63,3 +64,4 @@
|
|||
.woot--hide {
|
||||
display: none !important;
|
||||
}
|
||||
`;
|
|
@ -28,6 +28,5 @@ export default {
|
|||
|
||||
.conversation {
|
||||
height: 100%;
|
||||
padding: $space-large $space-small $space-large $space-normal;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -6,6 +6,7 @@ class ActionCableConnector extends BaseActionCableConnector {
|
|||
this.events = {
|
||||
'message.created': this.onMessageCreated,
|
||||
};
|
||||
console.log('joined', app, pubsubToken);
|
||||
}
|
||||
|
||||
onMessageCreated = data => {
|
||||
|
|
|
@ -69,6 +69,7 @@ export default {
|
|||
.conversation-wrap {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: $space-large $space-small $space-large $space-normal;
|
||||
}
|
||||
|
||||
.footer-wrap {
|
||||
|
|
|
@ -42,7 +42,7 @@ class Message < ApplicationRecord
|
|||
private
|
||||
|
||||
def dispatch_event
|
||||
Rails.configuration.dispatcher.dispatch(MESSAGE_CREATED, Time.zone.now, message: self) unless conversation.messages.count == 1
|
||||
Rails.configuration.dispatcher.dispatch(MESSAGE_CREATED, Time.zone.now, message: self)
|
||||
|
||||
if outgoing? && conversation.messages.outgoing.count == 1
|
||||
Rails.configuration.dispatcher.dispatch(FIRST_REPLY_CREATED, Time.zone.now, message: self)
|
||||
|
|
|
@ -4,15 +4,16 @@
|
|||
<title>Chatwoot</title>
|
||||
<%= csrf_meta_tags %>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
||||
<script>
|
||||
window.chatwootWebChannel = '<%= @web_widget.website_name %>'
|
||||
window.chatwootPubsubToken = '<%= @contact.pubsub_token %>'
|
||||
window.authToken = '<%= @token %>'
|
||||
</script>
|
||||
<%= javascript_pack_tag 'widget' %>
|
||||
<%= stylesheet_pack_tag 'widget' %>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<%= yield %>
|
||||
<script>
|
||||
window.chatwootWebChannel = '<%= @web_widget.website_name %>'
|
||||
window.chatwootPubsubToken = '<%= @contact.pubsub_token %>'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
"foundation-sites": "6.3.0",
|
||||
"highlight.js": "^9.15.10",
|
||||
"ionicons": "~2.0.1",
|
||||
"js-cookie": "~2.1.3",
|
||||
"js-cookie": "^2.2.1",
|
||||
"md5": "~2.2.1",
|
||||
"moment": "~2.19.3",
|
||||
"query-string": "5",
|
||||
|
|
|
@ -5855,10 +5855,10 @@ js-beautify@^1.6.12, js-beautify@^1.6.14:
|
|||
mkdirp "~0.5.1"
|
||||
nopt "~4.0.1"
|
||||
|
||||
js-cookie@~2.1.3:
|
||||
version "2.1.4"
|
||||
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.1.4.tgz#da4ec503866f149d164cf25f579ef31015025d8d"
|
||||
integrity sha1-2k7FA4ZvFJ0WTPJfV57zEBUCXY0=
|
||||
js-cookie@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
|
||||
integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
|
||||
|
||||
js-levenshtein@^1.1.3:
|
||||
version "1.1.6"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue