From a3d05ef55d45d8db8cc427f2b73df928c47dc724 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 16 Jun 2026 10:39:47 +0530
Subject: [PATCH] chore: Update emoji picker in widget (#14741)

---
 app/helpers/portal_helper.rb                  |  6 +-
 .../emoji-icon-picker/ColorPalette.vue        |  2 +-
 .../emoji-icon-picker/EmojiIconPicker.vue     |  6 +-
 .../emoji-icon-picker/constants.js            |  4 -
 .../shared/components/emoji/EmojiPicker.vue   | 99 +++++++++++++++++++
 .../components/emoji/pickerHelper.js}         |  5 +-
 .../widget/components/ChatInputWrap.vue       | 10 +-
 .../documentation_layout/_hero.html.erb       |  2 +-
 spec/helpers/portal_helper_spec.rb            | 29 ------
 9 files changed, 113 insertions(+), 50 deletions(-)
 create mode 100644 app/javascript/shared/components/emoji/EmojiPicker.vue
 rename app/javascript/{dashboard/components-next/emoji-icon-picker/helper.js => shared/components/emoji/pickerHelper.js} (94%)

diff --git a/app/helpers/portal_helper.rb b/app/helpers/portal_helper.rb
index 76e286542..64e46f0b7 100644
--- a/app/helpers/portal_helper.rb
+++ b/app/helpers/portal_helper.rb
@@ -17,15 +17,11 @@ module PortalHelper
     uri.to_s
   end
 
-  def generate_portal_bg_color(portal_color, theme)
+  def generate_portal_bg(portal_color, theme)
     base_color = theme == 'dark' ? 'black' : 'white'
     "color-mix(in srgb, #{portal_color} 20%, #{base_color})"
   end
 
-  def generate_portal_bg(portal_color, theme)
-    generate_portal_bg_color(portal_color, theme)
-  end
-
   def generate_gradient_to_bottom(theme)
     base_color = theme == 'dark' ? '#151718' : 'white'
     "linear-gradient(to bottom, transparent, #{base_color})"
diff --git a/app/javascript/dashboard/components-next/emoji-icon-picker/ColorPalette.vue b/app/javascript/dashboard/components-next/emoji-icon-picker/ColorPalette.vue
index dfd3646dc..0e884bd22 100644
--- a/app/javascript/dashboard/components-next/emoji-icon-picker/ColorPalette.vue
+++ b/app/javascript/dashboard/components-next/emoji-icon-picker/ColorPalette.vue
@@ -7,7 +7,7 @@ const selectedColor = defineModel({ type: String, default: '' });
 </script>
 
 <template>
-  <div class="flex items-center justify-between gap-1 px-0.5 mx-2 py-1">
+  <div class="flex items-center justify-between gap-1 px-0.5 mx-2 py-1 mb-px">
     <button
       v-for="color in ICON_COLORS"
       :key="color.value"
diff --git a/app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue b/app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue
index 5413f5a48..2272d1b7b 100644
--- a/app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue
+++ b/app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue
@@ -19,7 +19,7 @@ import {
   getEmojiTint,
   getRecentEmojis,
   addRecentEmoji,
-} from './helper';
+} from 'shared/components/emoji/pickerHelper';
 
 const props = defineProps({
   // 'both' shows Icons + Emojis tabs; 'emoji' shows only the emoji panel.
@@ -229,7 +229,7 @@ const selectEmoji = emoji => {
           :key="icon.name"
           type="button"
           :title="icon.name"
-          class="flex items-center justify-center !p-0 w-full max-w-[2rem] aspect-square transition-colors rounded-lg hover:bg-[var(--ep-tint)] active:enabled:scale-[0.97]"
+          class="flex items-center justify-center !p-0 size-8 transition-colors rounded-lg aspect-square hover:bg-[var(--ep-tint)] active:enabled:scale-[0.97]"
           @click="selectIcon(icon)"
         >
           <span
@@ -287,7 +287,7 @@ const selectEmoji = emoji => {
               :key="`${section.name}-${emoji.slug}`"
               type="button"
               :title="emoji.name"
-              class="flex items-center justify-center !p-0 w-full max-w-[2rem] text-xl transition-colors rounded-lg aspect-square hover:bg-[var(--ep-tint)] active:enabled:scale-[0.97]"
+              class="flex items-center justify-center !p-0 size-8 w-full max-w-[2rem] text-xl transition-colors rounded-lg aspect-square hover:bg-[var(--ep-tint)] active:enabled:scale-[0.97]"
               @mouseenter="applyEmojiTint($event, emoji.emoji)"
               @click="selectEmoji(emoji)"
             >
diff --git a/app/javascript/dashboard/components-next/emoji-icon-picker/constants.js b/app/javascript/dashboard/components-next/emoji-icon-picker/constants.js
index d8226db3e..bfb28741a 100644
--- a/app/javascript/dashboard/components-next/emoji-icon-picker/constants.js
+++ b/app/javascript/dashboard/components-next/emoji-icon-picker/constants.js
@@ -29,10 +29,6 @@ export const ICON_COLORS = [
 
 export const DEFAULT_ICON_COLOR = '#3B82F6';
 
-// Recently used emojis persisted in localStorage.
-export const RECENT_EMOJI_KEY = 'emoji-icon-picker.recent-emojis';
-export const MAX_RECENT_EMOJIS = 16;
-
 export const PICKER_MODE = {
   BOTH: 'both',
   EMOJI: 'emoji',
diff --git a/app/javascript/shared/components/emoji/EmojiPicker.vue b/app/javascript/shared/components/emoji/EmojiPicker.vue
new file mode 100644
index 000000000..a671a9cef
--- /dev/null
+++ b/app/javascript/shared/components/emoji/EmojiPicker.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Virtualizer } from 'virtua/vue';
+
+import {
+  buildEmojiSections,
+  getEmojiTint,
+  getRecentEmojis,
+  addRecentEmoji,
+} from 'shared/components/emoji/pickerHelper';
+
+const emit = defineEmits(['select']);
+
+const { t } = useI18n();
+
+const emojiSearch = ref('');
+const recentEmojis = ref([]);
+const searchInput = ref(null);
+
+onMounted(() => {
+  recentEmojis.value = getRecentEmojis();
+  searchInput.value?.focus();
+});
+
+const emojiSections = computed(() =>
+  buildEmojiSections(
+    emojiSearch.value,
+    recentEmojis.value,
+    t('EMOJI_ICON_PICKER.FREQUENTLY_USED')
+  )
+);
+
+// Tints an emoji button with a light shade of the emoji's own color on hover.
+const applyEmojiTint = (event, emoji) => {
+  event.currentTarget.style.setProperty('--ep-tint', getEmojiTint(emoji));
+};
+
+const selectEmoji = emoji => {
+  recentEmojis.value = addRecentEmoji(emoji);
+  emit('select', { type: 'emoji', value: emoji.emoji, emoji: emoji.emoji });
+};
+</script>
+
+<template>
+  <div
+    role="dialog"
+    class="absolute z-20 flex flex-col overflow-hidden shadow-xl w-[22rem] bg-n-surface-2 backdrop-blur-[100px] rounded-2xl outline outline-1 outline-n-weak dark:outline-n-strong/50"
+  >
+    <div class="flex flex-col gap-1.5 pt-2">
+      <div class="relative px-2">
+        <span
+          class="absolute z-10 -translate-y-1/2 i-lucide-search size-4 text-n-slate-10 top-1/2 start-5"
+        />
+        <input
+          ref="searchInput"
+          v-model="emojiSearch"
+          type="text"
+          class="block w-full h-10 text-sm reset-base outline outline-1 outline-offset-[-1px] outline-n-weak focus:outline-n-brand border-none rounded-lg !ps-9 !pe-3 !py-2.5 bg-transparent text-n-slate-12 placeholder:text-n-slate-10"
+          :placeholder="t('EMOJI_ICON_PICKER.SEARCH_EMOJI')"
+        />
+      </div>
+      <div
+        v-if="emojiSections.length"
+        class="h-60 overflow-y-auto px-2 pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        <Virtualizer v-slot="{ item: section }" :data="emojiSections">
+          <h5
+            class="px-1 pt-2 pb-1 m-0 text-xs font-medium tracking-wide uppercase text-n-slate-10"
+          >
+            {{ section.name }}
+          </h5>
+          <div class="grid grid-cols-10 gap-0.5">
+            <button
+              v-for="emoji in section.emojis"
+              :key="`${section.name}-${emoji.slug}`"
+              type="button"
+              :title="emoji.name"
+              class="flex items-center justify-center !p-0 w-full max-w-[2rem] text-xl transition-colors rounded-lg aspect-square hover:bg-[var(--ep-tint)] active:enabled:scale-[0.97]"
+              @mouseenter="applyEmojiTint($event, emoji.emoji)"
+              @click="selectEmoji(emoji)"
+            >
+              {{ emoji.emoji }}
+            </button>
+          </div>
+        </Virtualizer>
+      </div>
+      <div
+        v-else
+        class="flex flex-col items-center justify-center gap-2 h-60 text-n-slate-10"
+      >
+        <span class="i-lucide-smile-plus size-7" />
+        <span class="text-sm font-medium">
+          {{ t('EMOJI_ICON_PICKER.NO_EMOJI') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/emoji-icon-picker/helper.js b/app/javascript/shared/components/emoji/pickerHelper.js
similarity index 94%
rename from app/javascript/dashboard/components-next/emoji-icon-picker/helper.js
rename to app/javascript/shared/components/emoji/pickerHelper.js
index 03e8ec5e0..c77f102f2 100644
--- a/app/javascript/dashboard/components-next/emoji-icon-picker/helper.js
+++ b/app/javascript/shared/components/emoji/pickerHelper.js
@@ -1,5 +1,8 @@
 import emojiGroups from 'shared/components/emoji/emojisGroup.json';
-import { MAX_RECENT_EMOJIS, RECENT_EMOJI_KEY } from './constants';
+
+// Recently used emojis persisted in localStorage.
+const RECENT_EMOJI_KEY = 'emoji-icon-picker.recent-emojis';
+const MAX_RECENT_EMOJIS = 16;
 
 const matchesSearch = (emoji, term) =>
   emoji.slug.replaceAll('_', ' ').includes(term) ||
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 9326b60d8..b95a8c990 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -8,9 +8,8 @@ import { useAttachments } from '../composables/useAttachments';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 
-const EmojiIconPicker = defineAsyncComponent(
-  () =>
-    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
+const EmojiPicker = defineAsyncComponent(
+  () => import('shared/components/emoji/EmojiPicker.vue')
 );
 
 export default {
@@ -18,7 +17,7 @@ export default {
   components: {
     ChatAttachmentButton,
     ChatSendButton,
-    EmojiIconPicker,
+    EmojiPicker,
     FluentIcon,
     ResizableTextArea,
   },
@@ -176,10 +175,9 @@ export default {
           }"
         />
       </button>
-      <EmojiIconPicker
+      <EmojiPicker
         v-if="shouldShowEmojiPicker && showEmojiPicker"
         v-on-clickaway="hideEmojiPicker"
-        mode="emoji"
         class="!bottom-full end-0 mb-2 max-w-[calc(100vw-3rem)]"
         @select="onSelectEmoji"
         @keydown.esc="hideEmojiPicker"
diff --git a/app/views/public/api/v1/portals/documentation_layout/_hero.html.erb b/app/views/public/api/v1/portals/documentation_layout/_hero.html.erb
index b34b4dc2e..7beae0c9e 100644
--- a/app/views/public/api/v1/portals/documentation_layout/_hero.html.erb
+++ b/app/views/public/api/v1/portals/documentation_layout/_hero.html.erb
@@ -21,7 +21,7 @@
           <% popular_topics.each do |category| %>
             <a href="<%= public_portal_category_path(portal.slug, category.locale, category.slug) %>"
                class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-white/60 dark:bg-n-slate-1/60 backdrop-blur border border-solid border-n-weak text-n-slate-11 hover:text-n-portal hover:border-n-portal transition">
-              <% if category.icon.present? %><span class="text-xs"><%= render_emoji_or_icon(category.icon, category.icon_color) %></span><% end %>
+              <% if category.icon.present? %><span class="inline-flex items-center text-xs leading-none"><%= render_emoji_or_icon(category.icon, category.icon_color) %></span><% end %>
               <%= category.name %>
             </a>
           <% end %>
diff --git a/spec/helpers/portal_helper_spec.rb b/spec/helpers/portal_helper_spec.rb
index 37c7a927c..96df64a05 100644
--- a/spec/helpers/portal_helper_spec.rb
+++ b/spec/helpers/portal_helper_spec.rb
@@ -23,35 +23,6 @@ describe PortalHelper do
     end
   end
 
-  describe '#generate_portal_bg_color' do
-    context 'when theme is dark' do
-      it 'returns the correct color mix with black' do
-        expect(helper.generate_portal_bg_color('#ff0000', 'dark')).to eq(
-          'color-mix(in srgb, #ff0000 20%, black)'
-        )
-      end
-    end
-
-    context 'when theme is not dark' do
-      it 'returns the correct color mix with white' do
-        expect(helper.generate_portal_bg_color('#ff0000', 'light')).to eq(
-          'color-mix(in srgb, #ff0000 20%, white)'
-        )
-      end
-    end
-
-    context 'when provided with various colors' do
-      it 'adjusts the color mix appropriately' do
-        expect(helper.generate_portal_bg_color('#00ff00', 'dark')).to eq(
-          'color-mix(in srgb, #00ff00 20%, black)'
-        )
-        expect(helper.generate_portal_bg_color('#0000ff', 'light')).to eq(
-          'color-mix(in srgb, #0000ff 20%, white)'
-        )
-      end
-    end
-  end
-
   describe '#generate_portal_bg' do
     context 'when theme is dark' do
       it 'returns the correct background with dark grid image and color mix with black' do