feat: Add emoji & icon picker for Help Center categories (#14702)

app/javascript/widget/assets/scss/woot.scss

@@ -272,6 +272,9 @@ blockquote {
     --gray-12: 32 32 32;
 
     --background-color: 253 253 253;
+    --surface-1: 254 254 254;
+    --surface-2: 255 255 255;
+    --surface-active: 255 255 255;
     --text-blue: 8 109 224;
     --border-container: 236 236 236;
     --border-strong: 235 235 235;
@@ -379,6 +382,9 @@ blockquote {
     --gray-12: 238 238 238;
 
     --background-color: 18 18 19;
+    --surface-1: 20 21 23;
+    --surface-2: 22 23 26;
+    --surface-active: 53 57 66;
     --border-strong: 52 52 52;
     --border-weak: 38 38 42;
     --solid-1: 23 23 26;

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,4 +1,5 @@
 <script>
+import { defineAsyncComponent } from 'vue';
 import { mapGetters } from 'vuex';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
@@ -7,14 +8,17 @@ import { useAttachments } from '../composables/useAttachments';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 
-import EmojiInput from 'shared/components/emoji/EmojiInput.vue';
+const EmojiIconPicker = defineAsyncComponent(
+  () =>
+    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
+);
 
 export default {
   name: 'ChatInputWrap',
   components: {
     ChatAttachmentButton,
     ChatSendButton,
-    EmojiInput,
+    EmojiIconPicker,
     FluentIcon,
     ResizableTextArea,
   },
@@ -110,6 +114,9 @@ export default {
     emojiOnClick(emoji) {
       this.userInput = `${this.userInput}${emoji} `;
     },
+    onSelectEmoji({ value }) {
+      this.emojiOnClick(value);
+    },
     onTypingOff() {
       this.toggleTyping('off');
     },
@@ -148,7 +155,7 @@ export default {
       @focus="onFocus"
       @blur="onBlur"
     />
-    <div class="flex items-center ltr:pl-2 rtl:pr-2">
+    <div class="relative flex items-center ltr:pl-2 rtl:pr-2">
       <ChatAttachmentButton
         v-if="showAttachment"
         class="text-n-slate-12"
@@ -169,10 +176,12 @@ export default {
           }"
         />
       </button>
-      <EmojiInput
+      <EmojiIconPicker
         v-if="shouldShowEmojiPicker && showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
-        :on-click="emojiOnClick"
+        mode="emoji"
+        class="!bottom-full end-0 mb-2 max-w-[calc(100vw-3rem)]"
+        @select="onSelectEmoji"
         @keydown.esc="hideEmojiPicker"
       />
       <ChatSendButton
@@ -185,10 +194,6 @@ export default {
 </template>
 
 <style scoped lang="scss">
-.emoji-dialog {
-  @apply max-w-full ltr:right-5 rtl:right-[unset] rtl:left-5 -top-[302px] before:ltr:right-2.5 before:rtl:right-[unset] before:rtl:left-2.5;
-}
-
 .user-message-input {
   @apply border-none outline-none w-full placeholder:text-n-slate-10 resize-none h-8 min-h-8 max-h-60 py-1 px-0 my-2 bg-n-background text-n-slate-12 transition-all duration-200;
 }

app/javascript/widget/i18n/locale/en.json

@@ -106,6 +106,11 @@
     "NOT_FOUND": "No emoji match your search",
     "ARIA_LABEL": "Emoji picker"
   },
+  "EMOJI_ICON_PICKER": {
+    "SEARCH_EMOJI": "Search emoji…",
+    "FREQUENTLY_USED": "Frequently used",
+    "NO_EMOJI": "No emoji match your search"
+  },
   "CSAT": {
     "TITLE": "Rate your conversation",
     "SUBMITTED_TITLE": "Thank you for submitting the rating",