[Enhancement] Use JS-Cookie to set Cookies (#193)

* Update js-cookie

* Add sdk css

* Remove conversation padding
This commit is contained in:
Pranav Raj S 2019-10-30 10:43:11 +05:30 committed by Sojan Jose
parent e32b6bf6d4
commit 3d3aefb197
14 changed files with 170 additions and 68 deletions

View file

@ -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 ---##

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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 = {

View file

@ -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>

View file

@ -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;
}
`;

View file

@ -28,6 +28,5 @@ export default {
.conversation {
height: 100%;
padding: $space-large $space-small $space-large $space-normal;
}
</style>

View file

@ -6,6 +6,7 @@ class ActionCableConnector extends BaseActionCableConnector {
this.events = {
'message.created': this.onMessageCreated,
};
console.log('joined', app, pubsubToken);
}
onMessageCreated = data => {

View file

@ -69,6 +69,7 @@ export default {
.conversation-wrap {
flex: 1;
overflow-y: auto;
padding: $space-large $space-small $space-large $space-normal;
}
.footer-wrap {

View file

@ -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)

View file

@ -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>

View file

@ -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",

View file

@ -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"