diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue index 0ebe35465..9df60200e 100644 --- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue @@ -433,12 +433,7 @@ export default { position: fixed; left: unset; position: absolute; - - &::before { - transform: rotate(0deg); - left: var(--space-smaller); - bottom: var(--space-minus-slab); - } + bottom: var(--space-smaller); } } } diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue index fdbb2fbdd..e8326fed0 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue @@ -132,7 +132,6 @@ import { mapGetters } from 'vuex'; import { mixin as clickaway } from 'vue-clickaway'; import alertMixin from 'shared/mixins/alertMixin'; -import EmojiInput from 'shared/components/emoji/EmojiInput'; import CannedResponse from './CannedResponse'; import ResizableTextArea from 'shared/components/ResizableTextArea'; import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview'; @@ -163,6 +162,8 @@ import { trimContent, debounce } from '@chatwoot/utils'; import wootConstants from 'dashboard/constants'; import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings'; +const EmojiInput = () => import('shared/components/emoji/EmojiInput'); + export default { components: { EmojiInput, @@ -401,7 +402,7 @@ export default { return conversationDisplayType !== CONDENSED; }, emojiDialogClassOnExpanedLayout() { - return this.isOnExpandedLayout && !this.popoutReplyBox + return this.isOnExpandedLayout || this.popoutReplyBox ? 'emoji-dialog--expanded' : ''; }, @@ -984,13 +985,13 @@ export default { .emoji-dialog { top: unset; - bottom: 12px; + bottom: var(--space-normal); left: -320px; right: unset; &::before { - right: -16px; - bottom: 10px; + right: var(--space-minus-normal); + bottom: var(--space-small); transform: rotate(270deg); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08)); } @@ -1004,7 +1005,7 @@ export default { &::before { transform: rotate(0deg); left: var(--space-smaller); - bottom: var(--space-minus-slab); + bottom: var(--space-minus-small); } } .message-signature { diff --git a/app/javascript/dashboard/i18n/locale/en/emoji.json b/app/javascript/dashboard/i18n/locale/en/emoji.json new file mode 100644 index 000000000..fd81268fb --- /dev/null +++ b/app/javascript/dashboard/i18n/locale/en/emoji.json @@ -0,0 +1,6 @@ +{ + "EMOJI": { + "PLACEHOLDER": "Search emojis", + "NOT_FOUND": "No emoji match your search" + } +} diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js index 93e560119..0c674eef2 100644 --- a/app/javascript/dashboard/i18n/locale/en/index.js +++ b/app/javascript/dashboard/i18n/locale/en/index.js @@ -10,7 +10,8 @@ import chatlist from './chatlist.json'; import contact from './contact.json'; import contactFilters from './contactFilters.json'; import conversation from './conversation.json'; -import csatMgmtMgmt from './csatMgmt.json'; +import csatMgmt from './csatMgmt.json'; +import emoji from './emoji.json'; import generalSettings from './generalSettings.json'; import helpCenter from './helpCenter.json'; import inboxMgmt from './inboxMgmt.json'; @@ -40,7 +41,8 @@ export default { ...contact, ...contactFilters, ...conversation, - ...csatMgmtMgmt, + ...csatMgmt, + ...emoji, ...generalSettings, ...helpCenter, ...inboxMgmt, diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue index 84891b0e2..32d9c3df1 100644 --- a/app/javascript/shared/components/emoji/EmojiInput.vue +++ b/app/javascript/shared/components/emoji/EmojiInput.vue @@ -1,41 +1,92 @@ -