+
+
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index d2e5267a4..44934487e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -26,10 +26,11 @@
|
diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js
index 8fc3389f1..2c848a798 100755
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@@ -7,7 +7,9 @@ import billing from './modules/billing';
import cannedResponse from './modules/cannedResponse';
import Channel from './modules/channels';
import contacts from './modules/contacts';
+import contactConversations from './modules/contactConversations';
import conversationMetadata from './modules/conversationMetadata';
+import conversationLabels from './modules/conversationLabels';
import conversations from './modules/conversations';
import inboxes from './modules/inboxes';
import inboxMembers from './modules/inboxMembers';
@@ -22,6 +24,8 @@ export default new Vuex.Store({
cannedResponse,
Channel,
contacts,
+ contactConversations,
+ conversationLabels,
conversationMetadata,
conversations,
inboxes,
diff --git a/app/javascript/dashboard/store/modules/contactConversations.js b/app/javascript/dashboard/store/modules/contactConversations.js
new file mode 100644
index 000000000..7ac37c29d
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/contactConversations.js
@@ -0,0 +1,64 @@
+import Vue from 'vue';
+import * as types from '../mutation-types';
+import ContactAPI from '../../api/contacts';
+
+const state = {
+ records: {},
+ uiFlags: {
+ isFetching: false,
+ },
+};
+
+export const getters = {
+ getUIFlags($state) {
+ return $state.uiFlags;
+ },
+ getContactConversation: $state => id => {
+ return $state.records[Number(id)] || [];
+ },
+};
+
+export const actions = {
+ get: async ({ commit }, contactId) => {
+ commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
+ isFetching: true,
+ });
+ try {
+ const response = await ContactAPI.getConversations(contactId);
+ commit(types.default.SET_CONTACT_CONVERSATIONS, {
+ id: contactId,
+ data: response.data.payload,
+ });
+ commit(types.default.SET_ALL_CONVERSATION, response.data.payload, {
+ root: true,
+ });
+ commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
+ isFetching: false,
+ });
+ } catch (error) {
+ commit(types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, {
+ isFetching: false,
+ });
+ }
+ },
+};
+
+export const mutations = {
+ [types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG]($state, data) {
+ $state.uiFlags = {
+ ...$state.uiFlags,
+ ...data,
+ };
+ },
+ [types.default.SET_CONTACT_CONVERSATIONS]: ($state, { id, data }) => {
+ Vue.set($state.records, id, data);
+ },
+};
+
+export default {
+ namespaced: true,
+ state,
+ getters,
+ actions,
+ mutations,
+};
diff --git a/app/javascript/dashboard/store/modules/conversationLabels.js b/app/javascript/dashboard/store/modules/conversationLabels.js
new file mode 100644
index 000000000..059a31566
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/conversationLabels.js
@@ -0,0 +1,61 @@
+import Vue from 'vue';
+import * as types from '../mutation-types';
+import ConversationAPI from '../../api/conversations';
+
+const state = {
+ records: {},
+ uiFlags: {
+ isFetching: false,
+ },
+};
+
+export const getters = {
+ getUIFlags($state) {
+ return $state.uiFlags;
+ },
+ getConversationLabels: $state => id => {
+ return $state.records[Number(id)] || [];
+ },
+};
+
+export const actions = {
+ get: async ({ commit }, conversationId) => {
+ commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
+ isFetching: true,
+ });
+ try {
+ const response = await ConversationAPI.getLabels(conversationId);
+ commit(types.default.SET_CONVERSATION_LABELS, {
+ id: conversationId,
+ data: response.data.payload,
+ });
+ commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
+ isFetching: false,
+ });
+ } catch (error) {
+ commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
+ isFetching: false,
+ });
+ }
+ },
+};
+
+export const mutations = {
+ [types.default.SET_CONVERSATION_LABELS_UI_FLAG]($state, data) {
+ $state.uiFlags = {
+ ...$state.uiFlags,
+ ...data,
+ };
+ },
+ [types.default.SET_CONVERSATION_LABELS]: ($state, { id, data }) => {
+ Vue.set($state.records, id, data);
+ },
+};
+
+export default {
+ namespaced: true,
+ state,
+ getters,
+ actions,
+ mutations,
+};
diff --git a/app/javascript/dashboard/store/modules/specs/contactConversations/actions.spec.js b/app/javascript/dashboard/store/modules/specs/contactConversations/actions.spec.js
new file mode 100644
index 000000000..77565b5a4
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/contactConversations/actions.spec.js
@@ -0,0 +1,41 @@
+import axios from 'axios';
+import { actions } from '../../contactConversations';
+import * as types from '../../../mutation-types';
+import conversationList from './fixtures';
+
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+ describe('#get', () => {
+ it('sends correct actions if API is success', async () => {
+ axios.get.mockResolvedValue({ data: { payload: conversationList } });
+ await actions.get({ commit }, 1);
+ expect(commit.mock.calls).toEqual([
+ [types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, { isFetching: true }],
+
+ [
+ types.default.SET_CONTACT_CONVERSATIONS,
+ { id: 1, data: conversationList },
+ ],
+ [types.default.SET_ALL_CONVERSATION, conversationList, { root: true }],
+ [
+ types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG,
+ { isFetching: false },
+ ],
+ ]);
+ });
+ it('sends correct actions if API is error', async () => {
+ axios.get.mockRejectedValue({ message: 'Incorrect header' });
+ await actions.get({ commit });
+ expect(commit.mock.calls).toEqual([
+ [types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG, { isFetching: true }],
+ [
+ types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG,
+ { isFetching: false },
+ ],
+ ]);
+ });
+ });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/contactConversations/fixtures.js b/app/javascript/dashboard/store/modules/specs/contactConversations/fixtures.js
new file mode 100644
index 000000000..321fe66a4
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/contactConversations/fixtures.js
@@ -0,0 +1,82 @@
+export default [
+ {
+ meta: {
+ sender: {
+ id: 1,
+ name: 'sender1',
+ thumbnail: '',
+ channel: 'Channel::WebWidget',
+ },
+ assignee: null,
+ },
+ id: 1,
+ messages: [
+ {
+ id: 1,
+ content: 'Hello',
+ account_id: 1,
+ inbox_id: 1,
+ conversation_id: 1,
+ message_type: 1,
+ created_at: 1578555084,
+ updated_at: '2020-01-09T07:31:24.419Z',
+ private: false,
+ user_id: 1,
+ status: 'sent',
+ fb_id: null,
+ content_type: 'text',
+ content_attributes: {},
+ sender: {
+ name: 'Sender 1',
+ avatar_url: 'random_url',
+ },
+ },
+ ],
+ inbox_id: 1,
+ status: 0,
+ timestamp: 1578555084,
+ user_last_seen_at: 0,
+ agent_last_seen_at: 1578555084,
+ unread_count: 0,
+ },
+ {
+ meta: {
+ sender: {
+ id: 2,
+ name: 'sender1',
+ thumbnail: '',
+ channel: 'Channel::WebWidget',
+ },
+ assignee: null,
+ },
+ id: 2,
+ messages: [
+ {
+ id: 2,
+ content: 'Hello',
+ account_id: 1,
+ inbox_id: 2,
+ conversation_id: 2,
+ message_type: 1,
+ created_at: 1578555084,
+ updated_at: '2020-01-09T07:31:24.419Z',
+ private: false,
+ user_id: 2,
+ status: 'sent',
+ fb_id: null,
+ content_type: 'text',
+ content_attributes: {},
+ sender: {
+ name: 'Sender 1',
+ avatar_url: 'random_url',
+ },
+ },
+ ],
+ inbox_id: 2,
+ status: 0,
+ timestamp: 1578555084,
+ user_last_seen_at: 0,
+ agent_last_seen_at: 1578555084,
+ unread_count: 0,
+ },
+];
diff --git a/app/javascript/dashboard/store/modules/specs/contactConversations/getters.spec.js b/app/javascript/dashboard/store/modules/specs/contactConversations/getters.spec.js
new file mode 100644
index 000000000..0d9bcf256
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/contactConversations/getters.spec.js
@@ -0,0 +1,23 @@
+import { getters } from '../../contactConversations';
+
+describe('#getters', () => {
+ it('getContactConversation', () => {
+ const state = {
+ records: { 1: [{ id: 1, contact_id: 1, message: 'Hello' }] },
+ };
+ expect(getters.getContactConversation(state)(1)).toEqual([
+ { id: 1, contact_id: 1, message: 'Hello' },
+ ]);
+ });
+
+ it('getUIFlags', () => {
+ const state = {
+ uiFlags: {
+ isFetching: true,
+ },
+ };
+ expect(getters.getUIFlags(state)).toEqual({
+ isFetching: true,
+ });
+ });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/contactConversations/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/contactConversations/mutations.spec.js
new file mode 100644
index 000000000..f4f196186
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/contactConversations/mutations.spec.js
@@ -0,0 +1,29 @@
+import * as types from '../../../mutation-types';
+import { mutations } from '../../contactConversations';
+
+describe('#mutations', () => {
+ describe('#SET_CONTACT_CONVERSATIONS_UI_FLAG', () => {
+ it('set ui flags', () => {
+ const state = { uiFlags: { isFetching: true } };
+ mutations[types.default.SET_CONTACT_CONVERSATIONS_UI_FLAG](state, {
+ isFetching: false,
+ });
+ expect(state.uiFlags).toEqual({
+ isFetching: false,
+ });
+ });
+ });
+
+ describe('#SET_CONTACT_CONVERSATIONS', () => {
+ it('set contact conversation records', () => {
+ const state = { records: {} };
+ mutations[types.default.SET_CONTACT_CONVERSATIONS](state, {
+ id: 1,
+ data: [{ id: 1, contact_id: 1, message: 'hello' }],
+ });
+ expect(state.records).toEqual({
+ 1: [{ id: 1, contact_id: 1, message: 'hello' }],
+ });
+ });
+ });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/conversationLabels/actions.spec.js b/app/javascript/dashboard/store/modules/specs/conversationLabels/actions.spec.js
new file mode 100644
index 000000000..cb6818f27
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/conversationLabels/actions.spec.js
@@ -0,0 +1,35 @@
+import axios from 'axios';
+import { actions } from '../../conversationLabels';
+import * as types from '../../../mutation-types';
+
+const commit = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+ describe('#get', () => {
+ it('sends correct actions if API is success', async () => {
+ axios.get.mockResolvedValue({
+ data: { payload: ['customer-success', 'on-hold'] },
+ });
+ await actions.get({ commit }, 1);
+ expect(commit.mock.calls).toEqual([
+ [types.default.SET_CONVERSATION_LABELS_UI_FLAG, { isFetching: true }],
+
+ [
+ types.default.SET_CONVERSATION_LABELS,
+ { id: 1, data: ['customer-success', 'on-hold'] },
+ ],
+ [types.default.SET_CONVERSATION_LABELS_UI_FLAG, { isFetching: false }],
+ ]);
+ });
+ it('sends correct actions if API is error', async () => {
+ axios.get.mockRejectedValue({ message: 'Incorrect header' });
+ await actions.get({ commit });
+ expect(commit.mock.calls).toEqual([
+ [types.default.SET_CONVERSATION_LABELS_UI_FLAG, { isFetching: true }],
+ [types.default.SET_CONVERSATION_LABELS_UI_FLAG, { isFetching: false }],
+ ]);
+ });
+ });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/conversationLabels/getters.spec.js b/app/javascript/dashboard/store/modules/specs/conversationLabels/getters.spec.js
new file mode 100644
index 000000000..281b90794
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/conversationLabels/getters.spec.js
@@ -0,0 +1,24 @@
+import { getters } from '../../conversationLabels';
+
+describe('#getters', () => {
+ it('getConversationLabels', () => {
+ const state = {
+ records: { 1: ['customer-success', 'on-hold'] },
+ };
+ expect(getters.getConversationLabels(state)(1)).toEqual([
+ 'customer-success',
+ 'on-hold',
+ ]);
+ });
+
+ it('getUIFlags', () => {
+ const state = {
+ uiFlags: {
+ isFetching: true,
+ },
+ };
+ expect(getters.getUIFlags(state)).toEqual({
+ isFetching: true,
+ });
+ });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/conversationLabels/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversationLabels/mutations.spec.js
new file mode 100644
index 000000000..c22bc40f5
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/conversationLabels/mutations.spec.js
@@ -0,0 +1,29 @@
+import * as types from '../../../mutation-types';
+import { mutations } from '../../conversationLabels';
+
+describe('#mutations', () => {
+ describe('#SET_CONVERSATION_LABELS_UI_FLAG', () => {
+ it('set ui flags', () => {
+ const state = { uiFlags: { isFetching: true } };
+ mutations[types.default.SET_CONVERSATION_LABELS_UI_FLAG](state, {
+ isFetching: false,
+ });
+ expect(state.uiFlags).toEqual({
+ isFetching: false,
+ });
+ });
+ });
+
+ describe('#SET_CONVERSATION_LABELS', () => {
+ it('set contact conversation records', () => {
+ const state = { records: {} };
+ mutations[types.default.SET_CONVERSATION_LABELS](state, {
+ id: 1,
+ data: ['customer-success', 'on-hold'],
+ });
+ expect(state.records).toEqual({
+ 1: ['customer-success', 'on-hold'],
+ });
+ });
+ });
+});
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 285ca5797..dcd87673a 100755
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -62,6 +62,14 @@ export default {
SET_CONTACTS: 'SET_CONTACTS',
EDIT_CONTACT: 'EDIT_CONTACT',
+ // Contact Conversation
+ SET_CONTACT_CONVERSATIONS_UI_FLAG: 'SET_CONTACT_CONVERSATIONS_UI_FLAG',
+ SET_CONTACT_CONVERSATIONS: 'SET_CONTACT_CONVERSATIONS',
+
+ // Conversation Label
+ SET_CONVERSATION_LABELS_UI_FLAG: 'SET_CONVERSATION_LABELS_UI_FLAG',
+ SET_CONVERSATION_LABELS: 'SET_CONVERSATION_LABELS',
+
// Reports
SET_ACCOUNT_REPORTS: 'SET_ACCOUNT_REPORTS',
SET_ACCOUNT_SUMMARY: 'SET_ACCOUNT_SUMMARY',
diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js
index 317186d1d..8f2295ff2 100755
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -4,8 +4,6 @@ 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==';
-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 holder = document.createElement('div');
@@ -120,7 +118,7 @@ const IFrameHelper = {
createFrame: ({ baseUrl, websiteToken }) => {
const iframe = document.createElement('iframe');
const cwCookie = Cookies.get('cw_conversation');
- let widgetUrl = `${baseUrl}/widgets?website_token=${websiteToken}`;
+ let widgetUrl = `${baseUrl}/widget?website_token=${websiteToken}`;
if (cwCookie) {
widgetUrl = `${widgetUrl}&cw_conversation=${cwCookie}`;
}
@@ -142,6 +140,20 @@ const IFrameHelper = {
'*'
);
},
+ events: {
+ loaded: message => {
+ Cookies.set('cw_conversation', message.config.authToken);
+ IFrameHelper.sendMessage('config-set', {});
+ IFrameHelper.onLoad(message.config.channelConfig);
+ IFrameHelper.setCurrentUrl();
+ },
+ set_auth_token: message => {
+ Cookies.set('cw_conversation', message.authToken);
+ },
+ toggleBubble: () => {
+ bubbleClickCallback();
+ },
+ },
initPostMessageCommunication: () => {
window.onmessage = e => {
if (
@@ -151,11 +163,8 @@ const IFrameHelper = {
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(message.config.channelConfig);
- IFrameHelper.setCurrentUrl();
+ if (typeof IFrameHelper.events[message.event] === 'function') {
+ IFrameHelper.events[message.event](message);
}
};
},
@@ -180,11 +189,8 @@ const IFrameHelper = {
target: chatBubble,
});
- const closeIcon = createBubbleIcon({
- className: 'woot-widget-bubble woot--close woot--hide',
- src: closeImg,
- target: closeBubble,
- });
+ const closeIcon = closeBubble;
+ closeIcon.className = 'woot-widget-bubble woot--close woot--hide';
chatIcon.style.background = widgetColor;
closeIcon.style.background = widgetColor;
@@ -195,7 +201,6 @@ const IFrameHelper = {
onClickChatBubble();
},
setCurrentUrl: () => {
- console.log(IFrameHelper.getAppFrame(), document);
IFrameHelper.sendMessage('set-current-url', {
refererURL: window.location.href,
});
diff --git a/app/javascript/packs/widget.js b/app/javascript/packs/widget.js
index ebf345d45..856c33e05 100644
--- a/app/javascript/packs/widget.js
+++ b/app/javascript/packs/widget.js
@@ -1,9 +1,12 @@
import Vue from 'vue';
+import Vuelidate from 'vuelidate';
import store from '../widget/store';
import App from '../widget/App.vue';
import router from '../widget/router';
import ActionCableConnector from '../widget/helpers/actionCable';
+Vue.use(Vuelidate);
+
Vue.config.productionTip = false;
window.onload = () => {
window.WOOT_WIDGET = new Vue({
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 86b86d459..890233796 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -6,17 +6,8 @@
@@ -50,7 +71,7 @@ export default {
max-width: 88%;
& + .agent-message {
- margin-bottom: $space-smaller;
+ margin-bottom: $space-micro;
.chat-bubble {
border-top-left-radius: $space-smaller;
@@ -80,10 +101,10 @@ export default {
.agent-name {
color: $color-body;
- font-size: $font-size-default;
+ font-size: $font-size-small;
font-weight: $font-weight-medium;
- margin-bottom: $space-small;
- margin-top: $space-small;
+ margin: $space-small 0;
+ padding-left: $space-micro;
}
}
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index 54319761a..8017a8854 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -1,20 +1,42 @@
-
+
+
+
+
-
diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue
index 6d9bb4227..01dbb16ac 100755
--- a/app/javascript/widget/components/ChatFooter.vue
+++ b/app/javascript/widget/components/ChatFooter.vue
@@ -12,8 +12,14 @@ export default {
ChatInputWrap,
},
props: {
- msg: String,
- onSendMessage: Function,
+ msg: {
+ type: String,
+ default: '',
+ },
+ onSendMessage: {
+ type: Function,
+ default: () => {},
+ },
},
};
@@ -21,14 +27,15 @@ export default {
diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue
index 0b1a447e9..d2f020ac6 100755
--- a/app/javascript/widget/components/ChatHeaderExpanded.vue
+++ b/app/javascript/widget/components/ChatHeaderExpanded.vue
@@ -1,6 +1,10 @@
-
+
+
{{ introHeading }}
@@ -37,23 +41,37 @@ export default {
diff --git a/app/javascript/widget/components/ChatInputArea.vue b/app/javascript/widget/components/ChatInputArea.vue
index 6110c8321..167032951 100755
--- a/app/javascript/widget/components/ChatInputArea.vue
+++ b/app/javascript/widget/components/ChatInputArea.vue
@@ -1,14 +1,21 @@
-
+
+
+
@@ -45,13 +51,19 @@ export default {
border: 0;
cursor: pointer;
position: relative;
+ padding-right: $space-smaller;
.icon-holder {
display: flex;
align-items: center;
justify-content: center;
fill: $color-white;
+ font-size: $font-size-big;
font-weight: $font-weight-medium;
+ width: $space-two;
+ height: $space-two;
+ -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.34 7.32l-14-7a3 3 0 00-4.08 3.9l2.4 5.37c.11.262.11.558 0 .82l-2.4 5.37A3 3 0 003 20a3.14 3.14 0 001.35-.32l14-7a3 3 0 000-5.36h-.01zm-.89 3.57l-14 7a1 1 0 01-1.35-1.3l2.39-5.37a2 2 0 00.08-.22h6.89a1 1 0 000-2H4.57a2 2 0 00-.08-.22L2.1 3.41a1 1 0 011.35-1.3l14 7a1 1 0 010 1.78z' fill='%23999A9B' fill-rule='nonzero'/%3E%3C/svg%3E");
+ mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.34 7.32l-14-7a3 3 0 00-4.08 3.9l2.4 5.37c.11.262.11.558 0 .82l-2.4 5.37A3 3 0 003 20a3.14 3.14 0 001.35-.32l14-7a3 3 0 000-5.36h-.01zm-.89 3.57l-14 7a1 1 0 01-1.35-1.3l2.39-5.37a2 2 0 00.08-.22h6.89a1 1 0 000-2H4.57a2 2 0 00-.08-.22L2.1 3.41a1 1 0 011.35-1.3l14 7a1 1 0 010 1.78z' fill='%23999A9B' fill-rule='nonzero'/%3E%3C/svg%3E");
}
}
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index fbd37fd81..a80a422c1 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -13,12 +13,10 @@
/>