Merge pull request #1366 from The-Commit-Company/1362-more-affectiona…

…te-default-reactions feat: suggest frequently used emojis in quick reactions
The-Commit-Company · Feb 20, 2025 · 7014602 · 7014602
2 parents 9757266 + 0e2eaa8
commit 7014602
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 13 deletions.
diff --git a/frontend/src/components/feature/chat/ChatInput/EmojiSuggestion.tsx b/frontend/src/components/feature/chat/ChatInput/EmojiSuggestion.tsx
@@ -31,7 +31,7 @@ async function search(value: string, maxResults: number = 10): Promise<EmojiType
     return results
 }
 
-function getTopFavoriteEmojis(maxResults: number = 10): EmojiType[] {
+export function getTopFavoriteEmojis(maxResults: number = 10): EmojiType[] {
 
     // ID's of emojis
 

diff --git a/...tend/src/components/feature/chat/ChatMessage/MessageActions/QuickActions/QuickActions.tsx b/...tend/src/components/feature/chat/ChatMessage/MessageActions/QuickActions/QuickActions.tsx
@@ -12,8 +12,39 @@ import { toast } from 'sonner'
 import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner'
 import { CreateThreadActionButton } from './CreateThreadButton'
 import clsx from 'clsx'
+import { EmojiType, getTopFavoriteEmojis } from '../../../ChatInput/EmojiSuggestion'
+
+const topEmojis = getTopFavoriteEmojis(10)
+
+const STANDARD_EMOJIS: EmojiType[] = [{
+    id: '+1',
+    emoji: '👍',
+    name: 'Thumbs Up',
+    shortcodes: ":+1:"
+}, {
+    id: 'white_check_mark',
+    emoji: '✅',
+    name: 'Check Mark Button',
+    shortcodes: ":white_check_mark:"
+},
+{
+    id: 'eyes',
+    emoji: '👀',
+    name: 'Eyes',
+    shortcodes: ":eyes:"
+},
+{
+    id: 'tada',
+    emoji: '🎉',
+    name: 'Party Popper',
+    shortcodes: ":tada:"
+}
+]
 
-const QUICK_EMOJIS = ['👍', '✅', '👀', '🎉']
+// If we have frequently used emojis, then show them, else fill the rest with standard emojis - remove duplicates
+const QUICK_EMOJIS = [...topEmojis, ...STANDARD_EMOJIS].filter((emoji, index, self) =>
+    index === self.findIndex((t) => t.id === emoji.id)
+).slice(0, 4)
 
 interface QuickActionsProps extends MessageContextMenuProps {
     isEmojiPickerOpen: boolean,
@@ -74,17 +105,20 @@ export const QuickActions = ({ message, onReply, onEdit, isEmojiPickerOpen, setI
             )}>
             <Flex gap='1'>
                 {QUICK_EMOJIS.map((emoji) => {
-                    return <QuickActionButton
-                        key={emoji}
-                        className={'text-base'}
-                        tooltip={`React with ${emoji}`}
-                        aria-label={`React with ${emoji}`}
-                        onClick={() => {
-                            onEmojiReact(emoji)
-                        }}>
-                        {/* @ts-expect-error */}
-                        <em-emoji native={emoji} />
-                    </QuickActionButton>
+                    if (emoji.emoji) {
+                        return <QuickActionButton
+                            key={emoji.id}
+                            className={'text-base'}
+                            tooltip={`React with ${emoji.emoji}`}
+                            aria-label={`React with ${emoji.emoji}`}
+                            onClick={() => {
+                                onEmojiReact(emoji.emoji as string)
+                            }}>
+                            {/* @ts-expect-error */}
+                            <em-emoji native={emoji.emoji} />
+                        </QuickActionButton>
+                    }
+                    return null
                 })}
 
                 <EmojiPickerButton