From 16fe912fbdef3a1f0d5569aed39a80f4d7de9a4e Mon Sep 17 00:00:00 2001 From: Pranav Raj S Date: Tue, 29 Oct 2019 12:50:54 +0530 Subject: [PATCH] [Feature] Website live chat (#187) Co-authored-by: Nithin David Thomas Co-authored-by: Sojan Jose --- .scss-lint.yml | 4 + Gemfile | 2 + Gemfile.lock | 2 + .../api/v1/widget/inboxes_controller.rb | 26 +++ .../api/v1/widget/messages_controller.rb | 74 ++++++-- app/controllers/widgets_controller.rb | 47 +++++ app/finders/message_finder.rb | 10 +- .../dashboard/api/channel/webChannel.js | 9 + .../assets/images/channels/website.png | Bin 0 -> 6037 bytes .../assets/scss/_foundation-custom.scss | 11 ++ .../dashboard/components/ChatList.vue | 2 +- .../components/layout/SidebarItem.vue | 2 +- .../components/widgets/ChannelItem.vue | 52 ++++-- app/javascript/dashboard/constants.js | 3 - .../dashboard/helper/actionCable.js | 23 +-- .../dashboard/i18n/locale/en/inboxMgmt.json | 13 ++ .../dashboard/settings/inbox/ChannelList.vue | 22 +-- .../routes/dashboard/settings/inbox/Index.vue | 9 +- .../dashboard/settings/inbox/Settings.vue | 34 +++- .../settings/inbox/channel-factory.js | 26 +-- .../inbox/{ => channels}/Facebook.vue | 9 +- .../settings/inbox/channels/Website.vue | 83 +++++++++ .../dashboard/store/modules/sidebar.js | 17 +- app/javascript/packs/application.js | 7 + app/javascript/packs/sdk.js | 160 ++++++++++++++++++ app/javascript/packs/widget.js | 19 +++ .../helpers/BaseActionCableConnector.js | 26 +++ app/javascript/widget/App.vue | 25 +++ app/javascript/widget/api/auth.js | 12 ++ app/javascript/widget/api/conversation.js | 16 ++ app/javascript/widget/api/endPoints.js | 17 ++ .../widget/assets/images/defaultUser.png | Bin 0 -> 3856 bytes .../widget/assets/images/message-send.svg | 11 ++ app/javascript/widget/assets/images/send.png | Bin 0 -> 1795 bytes .../widget/assets/scss/_buttons.scss | 57 +++++++ app/javascript/widget/assets/scss/_forms.scss | 71 ++++++++ .../widget/assets/scss/_mixins.scss | 20 +++ app/javascript/widget/assets/scss/_reset.scss | 54 ++++++ .../widget/assets/scss/_variables.scss | 90 ++++++++++ app/javascript/widget/assets/scss/sdk.css | 65 +++++++ app/javascript/widget/assets/scss/woot.scss | 16 ++ .../widget/components/AgentMessage.vue | 83 +++++++++ .../widget/components/AgentMessageBubble.vue | 27 +++ .../widget/components/ChatFooter.vue | 33 ++++ .../widget/components/ChatHeaderExpanded.vue | 51 ++++++ .../widget/components/ChatInputArea.vue | 29 ++++ .../widget/components/ChatInputWrap.vue | 65 +++++++ .../widget/components/ChatMessage.vue | 38 +++++ .../widget/components/ChatSendButton.vue | 63 +++++++ .../widget/components/ConversationWrap.vue | 33 ++++ .../widget/components/HelloWorld.vue | 31 ++++ app/javascript/widget/components/Spinner.vue | 52 ++++++ .../widget/components/UserAvatar.vue | 46 +++++ .../widget/components/UserMessage.vue | 55 ++++++ .../widget/components/UserMessageBubble.vue | 36 ++++ app/javascript/widget/helpers/actionCable.js | 16 ++ app/javascript/widget/helpers/axios.js | 15 ++ app/javascript/widget/helpers/constants.js | 12 ++ app/javascript/widget/helpers/utils.js | 10 ++ app/javascript/widget/router.js | 24 +++ app/javascript/widget/store/index.js | 11 ++ .../widget/store/modules/conversation.js | 60 +++++++ app/javascript/widget/views/About.vue | 5 + app/javascript/widget/views/Home.vue | 78 +++++++++ app/listeners/action_cable_listener.rb | 8 + app/models/account.rb | 1 + app/models/channel/web_widget.rb | 17 ++ app/views/api/v1/inboxes/index.json.jbuilder | 1 + .../v1/widget/messages/index.json.jbuilder | 9 + app/views/layouts/vueapp.html.erb | 2 +- app/views/widgets/index.html.erb | 18 ++ config/application.rb | 4 + config/routes.rb | 10 +- config/webpack/development.js | 4 - config/webpack/environment.js | 5 + config/webpack/resolve.js | 1 + ...4062958_add_website_token_to_web_widget.rb | 6 + db/schema.rb | 3 +- package.json | 4 +- yarn.lock | 34 +++- 80 files changed, 2040 insertions(+), 106 deletions(-) create mode 100644 app/controllers/api/v1/widget/inboxes_controller.rb create mode 100644 app/controllers/widgets_controller.rb create mode 100644 app/javascript/dashboard/api/channel/webChannel.js create mode 100644 app/javascript/dashboard/assets/images/channels/website.png rename app/javascript/dashboard/routes/dashboard/settings/inbox/{ => channels}/Facebook.vue (96%) create mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue create mode 100755 app/javascript/packs/sdk.js create mode 100644 app/javascript/packs/widget.js create mode 100644 app/javascript/shared/helpers/BaseActionCableConnector.js create mode 100755 app/javascript/widget/App.vue create mode 100755 app/javascript/widget/api/auth.js create mode 100755 app/javascript/widget/api/conversation.js create mode 100755 app/javascript/widget/api/endPoints.js create mode 100755 app/javascript/widget/assets/images/defaultUser.png create mode 100755 app/javascript/widget/assets/images/message-send.svg create mode 100755 app/javascript/widget/assets/images/send.png create mode 100755 app/javascript/widget/assets/scss/_buttons.scss create mode 100755 app/javascript/widget/assets/scss/_forms.scss create mode 100755 app/javascript/widget/assets/scss/_mixins.scss create mode 100755 app/javascript/widget/assets/scss/_reset.scss create mode 100755 app/javascript/widget/assets/scss/_variables.scss create mode 100644 app/javascript/widget/assets/scss/sdk.css create mode 100755 app/javascript/widget/assets/scss/woot.scss create mode 100755 app/javascript/widget/components/AgentMessage.vue create mode 100755 app/javascript/widget/components/AgentMessageBubble.vue create mode 100755 app/javascript/widget/components/ChatFooter.vue create mode 100755 app/javascript/widget/components/ChatHeaderExpanded.vue create mode 100755 app/javascript/widget/components/ChatInputArea.vue create mode 100755 app/javascript/widget/components/ChatInputWrap.vue create mode 100755 app/javascript/widget/components/ChatMessage.vue create mode 100755 app/javascript/widget/components/ChatSendButton.vue create mode 100755 app/javascript/widget/components/ConversationWrap.vue create mode 100755 app/javascript/widget/components/HelloWorld.vue create mode 100755 app/javascript/widget/components/Spinner.vue create mode 100755 app/javascript/widget/components/UserAvatar.vue create mode 100755 app/javascript/widget/components/UserMessage.vue create mode 100755 app/javascript/widget/components/UserMessageBubble.vue create mode 100644 app/javascript/widget/helpers/actionCable.js create mode 100755 app/javascript/widget/helpers/axios.js create mode 100755 app/javascript/widget/helpers/constants.js create mode 100755 app/javascript/widget/helpers/utils.js create mode 100755 app/javascript/widget/router.js create mode 100755 app/javascript/widget/store/index.js create mode 100755 app/javascript/widget/store/modules/conversation.js create mode 100755 app/javascript/widget/views/About.vue create mode 100755 app/javascript/widget/views/Home.vue create mode 100644 app/views/api/v1/widget/messages/index.json.jbuilder create mode 100644 app/views/widgets/index.html.erb create mode 100644 db/migrate/20191024062958_add_website_token_to_web_widget.rb diff --git a/.scss-lint.yml b/.scss-lint.yml index 59284ef1c..215e9c49e 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -1,3 +1,7 @@ linters: LeadingZero: enabled: false + +exclude: + - 'app/javascript/widget/assets/scss/_reset.scss' + - 'app/javascript/widget/assets/scss/sdk.css' diff --git a/Gemfile b/Gemfile index 893be6119..1fb109bbb 100644 --- a/Gemfile +++ b/Gemfile @@ -53,6 +53,8 @@ gem 'telegram-bot-ruby' gem 'twitter' # facebook client gem 'koala' +# Random name generator +gem 'haikunator' ##--- gems for debugging and error reporting ---## # static analysis diff --git a/Gemfile.lock b/Gemfile.lock index 205747213..c74e87f2d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -192,6 +192,7 @@ GEM foreman (0.86.0) globalid (0.4.2) activesupport (>= 4.2.0) + haikunator (1.1.0) hashie (3.6.0) http (3.3.0) addressable (~> 2.3) @@ -455,6 +456,7 @@ DEPENDENCIES faker figaro foreman + haikunator hashie jbuilder (~> 2.5) kaminari diff --git a/app/controllers/api/v1/widget/inboxes_controller.rb b/app/controllers/api/v1/widget/inboxes_controller.rb new file mode 100644 index 000000000..2e0269db0 --- /dev/null +++ b/app/controllers/api/v1/widget/inboxes_controller.rb @@ -0,0 +1,26 @@ +class Api::V1::Widget::InboxesController < ApplicationController + def create + ActiveRecord::Base.transaction do + channel = web_widgets.create!( + website_name: permitted_params[:website_name], + website_url: permitted_params[:website_url] + ) + inbox = inboxes.create!(name: permitted_params[:website_name], channel: channel) + render json: inbox + end + end + + private + + def inboxes + current_account.inboxes + end + + def web_widgets + current_account.web_widgets + end + + def permitted_params + params.fetch(:website).permit(:website_name, :website_url) + end +end diff --git a/app/controllers/api/v1/widget/messages_controller.rb b/app/controllers/api/v1/widget/messages_controller.rb index 8bc2cf446..662fd927e 100644 --- a/app/controllers/api/v1/widget/messages_controller.rb +++ b/app/controllers/api/v1/widget/messages_controller.rb @@ -1,28 +1,68 @@ -class Api::V1::Widget::MessagesController < ApplicationController - # TODO: move widget apis to different controller. - skip_before_action :set_current_user, only: [:create_incoming] - skip_before_action :check_subscription, only: [:create_incoming] - skip_around_action :handle_with_exception, only: [:create_incoming] +class Api::V1::Widget::MessagesController < ActionController::Base + before_action :set_conversation, only: [:create] - def create_incoming - builder = Integrations::Widget::IncomingMessageBuilder.new(incoming_message_params) - builder.perform - render json: builder.message + def index + @messages = conversation.nil? ? [] : message_finder.perform end - def create_outgoing - builder = Integrations::Widget::OutgoingMessageBuilder.new(outgoing_message_params) - builder.perform - render json: builder.message + def create + @message = conversation.messages.new(message_params) + @message.save! end private - def incoming_message_params - params.require(:message).permit(:contact_id, :inbox_id, :content) + def conversation + @conversation ||= ::Conversation.find_by( + contact_id: cookie_params[:contact_id], + inbox_id: cookie_params[:inbox_id] + ) end - def outgoing_message_params - params.require(:message).permit(:user_id, :inbox_id, :content, :conversation_id) + def set_conversation + @conversation = ::Conversation.create!(conversation_params) if conversation.nil? + end + + def message_params + { + account_id: conversation.account_id, + inbox_id: conversation.inbox_id, + message_type: :incoming, + content: permitted_params[:content] + } + end + + def conversation_params + { + account_id: inbox.account_id, + inbox_id: inbox.id, + contact_id: cookie_params[:contact_id] + } + end + + def inbox + @inbox ||= ::Inbox.find_by(id: cookie_params[:inbox_id]) + end + + def cookie_params + JSON.parse(cookies.signed[cookie_name]).symbolize_keys + end + + def message_finder_params + { + filter_internal_messages: true + } + end + + def message_finder + @message_finder ||= MessageFinder.new(conversation, message_finder_params) + end + + def cookie_name + 'cw_conversation_' + params[:website_token] + end + + def permitted_params + params.fetch(:message).permit(:content) end end diff --git a/app/controllers/widgets_controller.rb b/app/controllers/widgets_controller.rb new file mode 100644 index 000000000..733e99df4 --- /dev/null +++ b/app/controllers/widgets_controller.rb @@ -0,0 +1,47 @@ +class WidgetsController < ActionController::Base + before_action :set_web_widget + 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? + + contact_inbox = ::ContactInbox.find_by( + inbox_id: @web_widget.inbox.id, + source_id: cookie_params[:source_id] + ) + + @contact = contact_inbox.contact + 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( + source_id: contact_inbox.source_id, + contact_id: @contact.id, + inbox_id: @web_widget.inbox.id + ).to_s + end + + def cookie_params + cookies.signed[cookie_name] ? JSON.parse(cookies.signed[cookie_name]).symbolize_keys : {} + end + + def permitted_params + params.permit(:website_token) + end + + def cookie_name + 'cw_conversation_' + permitted_params[:website_token] + end +end diff --git a/app/finders/message_finder.rb b/app/finders/message_finder.rb index bcac94418..e839e4946 100644 --- a/app/finders/message_finder.rb +++ b/app/finders/message_finder.rb @@ -10,11 +10,17 @@ class MessageFinder private + def messages + return @conversation.messages if @params[:filter_internal_messages].blank? + + @conversation.messages.where.not('private = ? OR message_type = ?', true, 2) + end + def current_messages if @params[:before].present? - @conversation.messages.reorder('created_at desc').where('id < ?', @params[:before]).limit(20).reverse + messages.reorder('created_at desc').where('id < ?', @params[:before]).limit(20).reverse else - @conversation.messages.reorder('created_at desc').limit(20).reverse + messages.reorder('created_at desc').limit(20).reverse end end end diff --git a/app/javascript/dashboard/api/channel/webChannel.js b/app/javascript/dashboard/api/channel/webChannel.js new file mode 100644 index 000000000..7fc5fb2db --- /dev/null +++ b/app/javascript/dashboard/api/channel/webChannel.js @@ -0,0 +1,9 @@ +import ApiClient from '../ApiClient'; + +class WebChannel extends ApiClient { + constructor() { + super('widget/inboxes'); + } +} + +export default new WebChannel(); diff --git a/app/javascript/dashboard/assets/images/channels/website.png b/app/javascript/dashboard/assets/images/channels/website.png new file mode 100644 index 0000000000000000000000000000000000000000..fdc909bc28d0c0bfc2f458085bed5f2a5af85e28 GIT binary patch literal 6037 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 literal 0 HcmV?d00001 diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss index 0a70eaf89..f918ed97c 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss @@ -25,3 +25,14 @@ border-radius: $space-smaller; font-size: $font-size-mini; } + +code { + border: 0; + font-family: 'Monaco'; + font-size: $font-size-mini; + + &.hljs { + background: $color-background; + padding: $space-two; + } +} diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue index 2b771a973..a996aae43 100644 --- a/app/javascript/dashboard/components/ChatList.vue +++ b/app/javascript/dashboard/components/ChatList.vue @@ -121,7 +121,7 @@ export default { fetchData() { if (this.chatLists.length === 0) { this.$store.dispatch('fetchAllConversations', { - inbox: this.conversationInbox, + inboxId: this.conversationInbox ? this.conversationInbox : undefined, assigneeStatus: this.allMessageType, convStatus: this.activeStatusTab, }); diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/SidebarItem.vue index c48998ba8..087467616 100644 --- a/app/javascript/dashboard/components/layout/SidebarItem.vue +++ b/app/javascript/dashboard/components/layout/SidebarItem.vue @@ -22,7 +22,7 @@
    -
    - - - - -

    {{channel}}

    - +
    + + + + + +

    + {{ channel }} +

    diff --git a/app/javascript/dashboard/store/modules/sidebar.js b/app/javascript/dashboard/store/modules/sidebar.js index 6ffda1806..6469d4674 100644 --- a/app/javascript/dashboard/store/modules/sidebar.js +++ b/app/javascript/dashboard/store/modules/sidebar.js @@ -1,13 +1,14 @@ /* eslint no-console: 0 */ /* eslint-env browser */ /* eslint no-param-reassign: 0 */ - +/* global bus */ // import * as types from '../mutation-types'; import defaultState from '../../i18n/default-sidebar'; import * as types from '../mutation-types'; import Account from '../../api/account'; import ChannelApi from '../../api/channels'; import { frontendURL } from '../../helper/URLHelper'; +import WebChannel from '../../api/channel/webChannel'; const state = defaultState; // inboxes fetch flag @@ -66,6 +67,15 @@ const actions = { }); }); }, + addWebsiteChannel: async ({ commit }, params) => { + try { + const response = await WebChannel.create(params); + commit(types.default.SET_INBOX_ITEM, response); + bus.$emit('new_website_channel', { inboxId: response.data.id }); + } catch (error) { + // Handle error + } + }, addInboxItem({ commit }, { channel, params }) { const donePromise = new Promise(resolve => { ChannelApi.createChannel(channel, params) @@ -137,9 +147,10 @@ const mutations = { channel_id: item.id, label: item.name, toState: frontendURL(`inbox/${item.id}`), - channelType: item.channelType, + channelType: item.channel_type, avatarUrl: item.avatar_url, pageId: item.page_id, + websiteToken: item.website_token, })); // Identify menuItem to update // May have more than one object to update @@ -156,7 +167,7 @@ const mutations = { channel_id: data.id, label: data.name, toState: frontendURL(`inbox/${data.id}`), - channelType: data.channelType, + channelType: data.channel_type, avatarUrl: data.avatar_url === undefined ? null : data.avatar_url, pageId: data.page_id, }); diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 714713133..4a45eb863 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -16,6 +16,8 @@ import WootWizard from 'components/ui/Wizard'; import { sync } from 'vuex-router-sync'; import Vuelidate from 'vuelidate'; import VTooltip from 'v-tooltip'; +import VueHighlightJS from 'vue-highlight.js'; +import javascript from 'highlight.js/lib/languages/javascript'; import WootUiKit from '../dashboard/components'; import App from '../dashboard/App'; @@ -34,6 +36,11 @@ Vue.use(VueI18n); Vue.use(WootUiKit); Vue.use(Vuelidate); Vue.use(VTooltip); +Vue.use(VueHighlightJS, { + languages: { + javascript, + }, +}); Vue.component('multiselect', Multiselect); Vue.component('woot-switch', WootSwitch); diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js new file mode 100755 index 000000000..736251353 --- /dev/null +++ b/app/javascript/packs/sdk.js @@ -0,0 +1,160 @@ +import sdkStyles from '../widget/assets/scss/sdk.css'; +/* 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=='; +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'); +const chatBubble = document.createElement('div'); +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; + document.body.appendChild(css); +} + +function wootOn(elm, event, fn) { + if (document.addEventListener) { + elm.addEventListener(event, fn, false); + } else if (document.attachEvent) { + // <= IE 8 loses scope so need to apply, we add this to object so we + // can detach later (can't detach anonymous functions) + // eslint-disable-next-line + elm[event + fn] = function() { + // eslint-disable-next-line + return fn.apply(elm, arguments); + }; + elm.attachEvent(`on${event}`, 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+/); + for (i = 0; i < classarray.length; i += 1) { + search = new RegExp(`\\b${classarray[i]}\\b`, 'g'); + replace = new RegExp(` *${classarray[i]}\\b`, 'g'); + if (action === 'remove') { + // eslint-disable-next-line + elm.className = elm.className.replace(replace, ''); + } else if (action === 'toggle') { + // eslint-disable-next-line + elm.className = elm.className.match(search) + ? elm.className.replace(replace, '') + : `${elm.className} ${classarray[i]}`; + } else if (action === 'has') { + if (elm.className.match(search)) { + has = true; + break; + } + } + } + } + return has; +} + +// Toggle class +function toggleClass(elm, classes) { + classHelper(classes, 'toggle', elm); +} + +const createBubbleIcon = ({ className, src, target }) => { + target.className = className; + const bubbleIcon = document.createElement('img'); + bubbleIcon.src = src; + target.appendChild(bubbleIcon); + return target; +}; + +function createBubbleHolder() { + addClass(bubbleHolder, 'woot--bubble-holder'); + body.appendChild(bubbleHolder); +} + +function createNotificationBubble() { + addClass(notification_bubble, 'woot--notification'); + return notification_bubble; +} + +function bubbleClickCallback() { + toggleClass(chatBubble, 'woot--hide'); + toggleClass(closeBubble, 'woot--hide'); + toggleClass(holder, 'woot--hide'); +} + +function onClickChatBubble() { + wootOn(chatBubble, 'click', bubbleClickCallback); + wootOn(closeBubble, 'click', bubbleClickCallback); +} + +function disableScroll() { + document.body.style.overflow = 'hidden'; +} + +function enableScroll() { + document.body.style.overflow = bodyOverFlowStyle; +} + +function loadCallback() { + iframe.style.visibility = ''; + iframe.setAttribute('id', `chatwoot_live_chat_widget`); + iframe.onmouseenter = disableScroll; + iframe.onmouseleave = enableScroll; + + loadCSS(); + createBubbleHolder(); + + bubbleHolder.appendChild( + createBubbleIcon({ + className: 'woot-widget-bubble', + src: bubbleImg, + target: chatBubble, + }) + ); + bubbleHolder.appendChild( + createBubbleIcon({ + className: 'woot-widget-bubble woot--close woot--hide', + src: closeImg, + target: closeBubble, + }) + ); + 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); +} + +window.chatwootSDK = { + run: loadIframe, +}; diff --git a/app/javascript/packs/widget.js b/app/javascript/packs/widget.js new file mode 100644 index 000000000..ebf345d45 --- /dev/null +++ b/app/javascript/packs/widget.js @@ -0,0 +1,19 @@ +import Vue from 'vue'; +import store from '../widget/store'; +import App from '../widget/App.vue'; +import router from '../widget/router'; +import ActionCableConnector from '../widget/helpers/actionCable'; + +Vue.config.productionTip = false; +window.onload = () => { + window.WOOT_WIDGET = new Vue({ + router, + store, + render: h => h(App), + }).$mount('#app'); + + window.actionCable = new ActionCableConnector( + window.WOOT_WIDGET, + window.chatwootPubsubToken + ); +}; diff --git a/app/javascript/shared/helpers/BaseActionCableConnector.js b/app/javascript/shared/helpers/BaseActionCableConnector.js new file mode 100644 index 000000000..4ad5fc2f4 --- /dev/null +++ b/app/javascript/shared/helpers/BaseActionCableConnector.js @@ -0,0 +1,26 @@ +import { createConsumer } from '@rails/actioncable'; + +class BaseActionCableConnector { + constructor(app, pubsubToken) { + const consumer = createConsumer(); + consumer.subscriptions.create( + { + channel: 'RoomChannel', + pubsub_token: pubsubToken, + }, + { + received: this.onReceived, + } + ); + this.app = app; + this.events = {}; + } + + onReceived = ({ event, data } = {}) => { + if (this.events[event] && typeof this.events[event] === 'function') { + this.events[event](data); + } + }; +} + +export default BaseActionCableConnector; diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue new file mode 100755 index 000000000..14f86d4c2 --- /dev/null +++ b/app/javascript/widget/App.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/app/javascript/widget/api/auth.js b/app/javascript/widget/api/auth.js new file mode 100755 index 000000000..5c2822c8a --- /dev/null +++ b/app/javascript/widget/api/auth.js @@ -0,0 +1,12 @@ +import authEndPoint from 'widget/api/endPoints'; +import { API } from 'widget/helpers/axios'; + +const createContact = async (inboxId, accountId) => { + const urlData = authEndPoint.createContact(inboxId, accountId); + const result = await API.post(urlData.url, urlData.params); + return result; +}; + +export default { + createContact, +}; diff --git a/app/javascript/widget/api/conversation.js b/app/javascript/widget/api/conversation.js new file mode 100755 index 000000000..d4eb2f509 --- /dev/null +++ b/app/javascript/widget/api/conversation.js @@ -0,0 +1,16 @@ +import endPoints from 'widget/api/endPoints'; +import { API } from 'widget/helpers/axios'; + +const sendMessageAPI = async content => { + const urlData = endPoints.sendMessage(content); + const result = await API.post(urlData.url, urlData.params); + return result; +}; + +const getConversationAPI = async conversationId => { + const urlData = endPoints.getConversation(conversationId); + const result = await API.get(urlData.url); + return result; +}; + +export { sendMessageAPI, getConversationAPI }; diff --git a/app/javascript/widget/api/endPoints.js b/app/javascript/widget/api/endPoints.js new file mode 100755 index 000000000..d933da581 --- /dev/null +++ b/app/javascript/widget/api/endPoints.js @@ -0,0 +1,17 @@ +const sendMessage = content => ({ + url: `/api/v1/widget/messages${window.location.search}`, + params: { + message: { + content, + }, + }, +}); + +const getConversation = () => ({ + url: `/api/v1/widget/messages${window.location.search}`, +}); + +export default { + sendMessage, + getConversation, +}; diff --git a/app/javascript/widget/assets/images/defaultUser.png b/app/javascript/widget/assets/images/defaultUser.png new file mode 100755 index 0000000000000000000000000000000000000000..0727b82c30ebd1b20201369acc079544e50d2778 GIT binary patch literal 3856 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 Sc`>{I0000 + + + Untitled + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/app/javascript/widget/assets/images/send.png b/app/javascript/widget/assets/images/send.png new file mode 100755 index 0000000000000000000000000000000000000000..9288a39b4c88e928e750b5ececf2b8292259d4b8 GIT binary patch literal 1795 zcmZ`(X*8P&7k(|V7jHGRVWQ}0YmJy7MkyysrovRM#Sm+2X)Ga@5PUL(qHPeZZD^;I zw6#?u5W4StSFywQ>8v^l}$Q58l|L2s}8pA`H6e?asB%= z42)ZLUVYzZ&tYCFbD`e*>XLP1b45NL=2j3`tp)WtZfP&}lTDkrHV2~c&ckJUB;(*S zq2y@b^_n1|`Ac!cz=i2A5eYkS11}8co`enmDWW_UUCSA`!!s^MpPEtFr`|kxFyC%5 zzLypiFT(XXEB)QZaKF4QY=r>Mi0Kq5oMW(CA6sI#V>+qSG0znx-**y~`|H6(9}UsHSxA}s8}dPacyJFn zS^l<3Rkd)574z6L7~Ea8PR{45y-IwkJhI*o-YuTVjRi>l3yYeAgH{kz!WvaD0wXw0GkmPd-}XV7kdS zv!{Tte)ft5KHTFD!Jo(PrG0OV!oJ#3FyYg)XMIkb9a0E(vYYdjm85t7I<;f){Qf~~-?ftT( zn@4vYVoTDUwj6QjF}**8J+(HEPPpU{Oq|Eo>Zui{>&il%m#j5r&@tO@y+UYEGhqc8 z*c;c}Zsth54)d6?YTGznZSl}N*9zkz78UJAL#+%J)j7tpNh zPoXB)*t6T>)kfn)kBNb5JGV%f{L&le-}+H2J=)EdTO^C8f2g)ek@gs^L$fO59|={X zhV;?!n;LriwsC`t%e5aV*~NEj`f_mWaRFG!eMt|Gym}Q+O|Z1TgyR9N-7yPh=1kqI zZOAL1)lzH@PUw0*4Y6bNdtg$q2k{mTivIfv@JvG{(UH0df(y$X30F0C-QB(swMsI7 z4VMluU_48M(dBviP_+aZ_iJiNzC%P-oKETQ4X3bKb)r@6fn0n!TrSCXNruBj*0B+H+WiOzdP4*&c7 zDEC&i(9ua%vWfuXlXSu*U7@6y&Qs1lz}TxRvc#PV0pMJ-OJY?2x3eepy;W1nz8egcpP zJ+w9g$u|cC+V~f=u|7f*p=XRhOax0c{YMZ&@V((5^Zx}^diA1w!Koh`t`hu-Bz(9Z jKq8TJZrlut@WF@r=@7yL3f4?u{3ZZvX^VMk;g$R^T#z{n literal 0 HcmV?d00001 diff --git a/app/javascript/widget/assets/scss/_buttons.scss b/app/javascript/widget/assets/scss/_buttons.scss new file mode 100755 index 000000000..cc510c269 --- /dev/null +++ b/app/javascript/widget/assets/scss/_buttons.scss @@ -0,0 +1,57 @@ +$button-border-width: 1px; +// Buttons +.button { + appearance: none; + background: $color-primary; + border: $button-border-width solid $color-primary; + border-radius: $border-radius; + color: $color-white; + cursor: pointer; + display: inline-block; + font-size: $font-size-default; + height: $space-two * 2; + line-height: $line-height; + outline: none; + padding: $space-smaller $space-normal; + text-align: center; + text-decoration: none; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + user-select: none; + vertical-align: middle; + white-space: nowrap; + + &:focus, + &:hover { + background: lighten($color-primary, 7%); + border-color: $color-primary; + text-decoration: none; + } + + &:active, + &.active { + background: $color-primary; + border-color: darken($color-primary, 5%); + color: lighten($color-primary, 20%); + text-decoration: none; + } + + &[disabled], + &:disabled, + &.disabled { + cursor: default; + opacity: .5; + pointer-events: none; + } + + &.small { + font-size: $font-size-small; + height: $space-medium; + padding: $space-smaller $space-slab; + } + + &.large { + font-size: $font-size-medium; + height: $space-larger; + padding: $space-small $space-medium; + } +} diff --git a/app/javascript/widget/assets/scss/_forms.scss b/app/javascript/widget/assets/scss/_forms.scss new file mode 100755 index 000000000..159b7788d --- /dev/null +++ b/app/javascript/widget/assets/scss/_forms.scss @@ -0,0 +1,71 @@ +// scss-lint:disable PropertySortOrder DeclarationOrder QualifyingElement +$form-border-width: 1px; +$input-height: $space-two * 2; + +.form-input { + @include placeholder { + color: $color-gray; + } + + appearance: none; + background: $color-white; + border: $form-border-width solid $color-border; + border-radius: $border-radius; + box-sizing: border-box; + color: $color-body; + display: block; + font-size: $font-size-default; + height: $input-height; + line-height: 1.3; + max-width: 100%; + outline: none; + padding: $space-small $space-slab; + position: relative; + transition: background .2s, border .2s, box-shadow .2s, color .2s; + width: 100%; + + &:focus { + border-color: $color-primary; + } + + &::placeholder { + color: $color-gray; + } + + // Input sizes + &.small { + font-size: $font-size-small; + height: $space-large; + padding: $space-small $space-slab; + } + + &.large { + font-size: $font-size-medium; + height: $space-larger; + padding: $space-slab $space-two; + } + + &.input-inline { + display: inline-block; + vertical-align: middle; + width: auto; + } + + // Input types + &[type="file"] { + height: auto; + } +} + +// Form element: Textarea +textarea.form-input { + @include placeholder { + color: $color-light-gray; + } + + &, + &.large, + &.small { + height: auto; + } +} diff --git a/app/javascript/widget/assets/scss/_mixins.scss b/app/javascript/widget/assets/scss/_mixins.scss new file mode 100755 index 000000000..5039b0e94 --- /dev/null +++ b/app/javascript/widget/assets/scss/_mixins.scss @@ -0,0 +1,20 @@ +// scss-lint:disable PseudoElement SpaceBeforeBrace VendorPrefix +$shadow-color-1: rgba(50, 50, 93, 0.2); +$shadow-color-2: rgba(0, 0, 0, 0.07); +$shadow-color-3: rgba(50, 50, 93, .08); +$shadow-color-4: rgba(0, 0, 0, .05); + +@mixin normal-shadow { + box-shadow: 0 $space-small $space-normal $shadow-color-1, 0 $space-smaller $space-slab $shadow-color-2; +} + +@mixin light-shadow { + box-shadow: 0 $space-smaller 6px $shadow-color-3, 0 1px 3px $shadow-color-4; +} + +@mixin placeholder { + &::-webkit-input-placeholder {@content} + &:-moz-placeholder {@content} + &::-moz-placeholder {@content} + &:-ms-input-placeholder {@content} +} diff --git a/app/javascript/widget/assets/scss/_reset.scss b/app/javascript/widget/assets/scss/_reset.scss new file mode 100755 index 000000000..6768b1315 --- /dev/null +++ b/app/javascript/widget/assets/scss/_reset.scss @@ -0,0 +1,54 @@ +// scss-lint:disable +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/app/javascript/widget/assets/scss/_variables.scss b/app/javascript/widget/assets/scss/_variables.scss new file mode 100755 index 000000000..b62223bc4 --- /dev/null +++ b/app/javascript/widget/assets/scss/_variables.scss @@ -0,0 +1,90 @@ +// Font sizes +$font-size-nano: 0.8rem; +$font-size-micro: 0.8rem; +$font-size-mini: 1rem; +$font-size-small: 1.2rem; +$font-size-default: 1.4rem; +$font-size-medium: 1.6rem; +$font-size-large: 2rem; +$font-size-big: 2.4rem; +$font-size-bigger: 3.2rem; +$font-size-mega: 4rem; +$font-size-giga: 5.6rem; + +// spaces +$zero: 0; +$space-micro: 0.2rem; +$space-smaller: 0.4rem; +$space-small: 0.8rem; +$space-one: 1rem; +$space-slab: 1.2rem; +$space-normal: 1.6rem; +$space-two: 2rem; +$space-medium: 2.4rem; +$space-large: 3.2rem; +$space-larger: 4.8rem; +$space-big: 6.4rem; +$space-jumbo: 8rem; +$space-mega: 10rem; + +// font-weight +$font-weight-feather: 100; +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-medium: 500; +$font-weight-bold: 600; +$font-weight-black: 700; + +//Navbar +$nav-bar-width: 23rem; +$header-height: 5.6rem; + +// Woot Logo +$woot-logo-width: 20rem; +$woot-logo-height: 8rem; +$woot-logo-padding: $space-large $space-large $space-large $space-large; + +// Colors +$color-woot: #1f93ff; +$color-primary: $color-woot; +$color-gray: #6e6f73; +$color-light-gray: #999a9b; +$color-border: #e0e6ed; +$color-border-transparent: rgba(224, 230, 237, 0.5); +$color-border-light: #f0f4f5; +$color-background: #ecf3f9; +$color-background-light: #fafafa; +$color-white: #fff; +$color-body: #3c4858; +$color-heading: #1f2d3d; +$color-modal-header: #f1f1f1; +// Thumbnail +$thumbnail-radius: 4rem; + +// chat-header +$conv-header-height: 4rem; + +// login + +// Inbox List + +$inbox-thumb-size: 4.8rem; + + +// Spinner +$spinkit-spinner-color: $color-white !default; +$spinkit-spinner-margin: 0 0 0 1.6rem !default; +$spinkit-size: 1.6rem !default; + +// Snackbar default +$woot-snackbar-bg: #323232; +$woot-snackbar-button: #ffeb3b; + +$swift-ease-out-duration: .4s !default; +$swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default; +$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default; + +$border-radius: 3px; +$line-height: 1; +$footer-height: 11.2rem; +$header-expanded-height: $space-medium * 10; diff --git a/app/javascript/widget/assets/scss/sdk.css b/app/javascript/widget/assets/scss/sdk.css new file mode 100644 index 000000000..d54cc2832 --- /dev/null +++ b/app/javascript/widget/assets/scss/sdk.css @@ -0,0 +1,65 @@ +.woot-widget-holder { + z-index: 2147483000!important; + position: fixed!important; + bottom: 104px; + right: 20px; + height: calc(85% - 64px - 20px); + width: 370px!important; + min-height: 250px!important; + max-height: 590px!important; + -moz-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important; + -o-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important; + -webkit-box-shadow: 0 5px 40px rgba(0,0,0,.16)!important; + box-shadow: 0 5px 40px rgba(0,0,0,.16)!important; + -o-border-radius: 8px!important; + -moz-border-radius: 8px!important; + -webkit-border-radius: 8px!important; + border-radius: 8px!important; + overflow: hidden!important; + opacity: 1!important; +} + +.woot-widget-holder iframe { width: 100% !important; height: 100% !important; border: 0; } + +.woot-widget-bubble { + z-index: 2147483000!important; + -moz-box-shadow: 0 8px 24px rgba(0,0,0,.16)!important; + -o-box-shadow: 0 8px 24px rgba(0,0,0,.16)!important; + -webkit-box-shadow: 0 8px 24px rgba(0,0,0,.16)!important; + box-shadow: 0 8px 24px rgba(0,0,0,.16)!important; + -o-border-radius: 100px!important; + -moz-border-radius: 100px!important; + -webkit-border-radius: 100px!important; + border-radius: 100px!important; + background: #1f93ff; + position: fixed; + cursor: pointer; + right: 20px; + bottom: 20px; + width: 64px!important; + height: 64px!important; +} + + .woot-widget-bubble:hover { + background: #1f93ff; + -moz-box-shadow: 0 8px 32px rgba(0,0,0,.4)!important; + -o-box-shadow: 0 8px 32px rgba(0,0,0,.4)!important; + -webkit-box-shadow: 0 8px 32px rgba(0,0,0,.4)!important; + box-shadow: 0 8px 32px rgba(0,0,0,.4)!important; +} + +.woot-widget-bubble img { + width: 24px; + height: 24px; + margin: 20px; +} + +.woot-widget-bubble.woot--close img { + width: 16px; + height: 16px; + margin: 24px; +} + +.woot--hide { + display: none !important; +} diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss new file mode 100755 index 000000000..68e1bebc6 --- /dev/null +++ b/app/javascript/widget/assets/scss/woot.scss @@ -0,0 +1,16 @@ +@import 'variables'; +@import 'buttons'; +@import 'mixins'; +@import 'forms'; +@import 'reset'; + +html, +body { + font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; + font-size: 10px; + height: 100%; +} + +.woot-widget-wrap { + height: 100%; +} diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue new file mode 100755 index 000000000..380b2e0fd --- /dev/null +++ b/app/javascript/widget/components/AgentMessage.vue @@ -0,0 +1,83 @@ + + + + + + diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue new file mode 100755 index 000000000..6d270dc85 --- /dev/null +++ b/app/javascript/widget/components/AgentMessageBubble.vue @@ -0,0 +1,27 @@ + + + + + + diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue new file mode 100755 index 000000000..e1fd507de --- /dev/null +++ b/app/javascript/widget/components/ChatFooter.vue @@ -0,0 +1,33 @@ + + + + + + diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue new file mode 100755 index 000000000..15ff35ae8 --- /dev/null +++ b/app/javascript/widget/components/ChatHeaderExpanded.vue @@ -0,0 +1,51 @@ + + + + + diff --git a/app/javascript/widget/components/ChatInputArea.vue b/app/javascript/widget/components/ChatInputArea.vue new file mode 100755 index 000000000..b6e562ef5 --- /dev/null +++ b/app/javascript/widget/components/ChatInputArea.vue @@ -0,0 +1,29 @@ +