feat: Add the ability to search emojis (#5928)

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);
     }
   }
 }

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 {

app/javascript/dashboard/i18n/locale/en/emoji.json

@@ -0,0 +1,6 @@
+{
+  "EMOJI": {
+    "PLACEHOLDER": "Search emojis",
+    "NOT_FOUND": "No emoji match your search"
+  }
+}

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,