chore: bring emoji input in scope

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -1,11 +1,8 @@
 <script>
 import emojis from './emojisGroup.json';
-import FluentIcon from 'shared/components/FluentIcon/Index.vue';
-import WootButton from 'dashboard/components/ui/WootButton.vue';
 const SEARCH_KEY = 'Search';
 
 export default {
-  components: { FluentIcon, WootButton },
   props: {
     onClick: {
       type: Function,
@@ -98,7 +95,7 @@ export default {
           class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
           :placeholder="$t('EMOJI.PLACEHOLDER')"
         />
-        <WootButton
+        <button
           v-if="showRemoveButton"
           size="small"
           variant="smooth"
@@ -107,7 +104,7 @@ export default {
           @click="onClick('')"
         >
           {{ $t('EMOJI.REMOVE') }}
-        </WootButton>
+        </button>
       </div>
       <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
         <h5 class="emoji-category--title">
@@ -142,7 +139,7 @@ export default {
         </div>
         <div v-if="hasEmptySearchResult" class="empty-message">
           <div class="emoji-icon">
-            <FluentIcon icon="emoji" size="48" />
+            <span class="i-lucide-smile size-12" />
           </div>
           <span class="empty-message--text">
             {{ $t('EMOJI.NOT_FOUND') }}
@@ -158,10 +155,8 @@ export default {
               :class="{ active: selectedKey === 'Search' }"
               @click="changeCategory('Search')"
             >
-              <FluentIcon
+              <span
-                icon="search"
+                class="i-lucide-search size-4 text-slate-700 dark:text-slate-100"
-                size="16"
-                class="text-slate-700 dark:text-slate-100"
               />
             </button>
           </li>

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';
@@ -8,14 +9,14 @@ import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import { useDarkMode } from 'widget/composables/useDarkMode';
 
-import EmojiInput from 'shared/components/emoji/EmojiInput.vue';
-
 export default {
   name: 'ChatInputWrap',
   components: {
     ChatAttachmentButton,
     ChatSendButton,
-    EmojiInput,
+    EmojiInput: defineAsyncComponent(
+      () => import('shared/components/emoji/EmojiInput.vue')
+    ),
     FluentIcon,
     ResizableTextArea,
   },