feat: add an emoji picker

frontend/package.json

@@ -147,6 +147,7 @@
         "fast-deep-equal": "^3.1.3",
         "fastpriorityqueue": "^0.7.5",
         "fflate": "^0.7.4",
+        "frimousse": "^0.3.0",
         "fuse.js": "^6.6.2",
         "heatmap.js": "^2.0.5",
         "hls.js": "^1.5.15",

frontend/src/lib/components/EmojiPicker/EmojiPickerPopover.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { EmojiPickerPopover } from 'lib/components/EmojiPicker/EmojiPickerPopover'
+
+type Story = StoryObj<typeof EmojiPickerPopover>
+const meta: Meta<typeof EmojiPickerPopover> = {
+    title: 'Lemon UI/Emoji Picker Popover',
+    component: EmojiPickerPopover,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A component that opens a popover emoji picker.',
+            },
+        },
+    },
+    argTypes: {
+        onSelect: {
+            description: 'The function to run when a user chooses an emoji',
+        },
+        defaultOpen: {
+            description: 'Whether to start with the popover open - defaults to false',
+        },
+    },
+}
+export default meta
+
+const BasicTemplate: StoryFn<typeof EmojiPickerPopover> = (props) => {
+    return (
+        <div className="w-[325px] h-[370px] border rounded">
+            <EmojiPickerPopover {...props} />
+        </div>
+    )
+}
+
+export const Default: Story = BasicTemplate.bind({})
+Default.args = {}
+
+export const Open: Story = BasicTemplate.bind({})
+Open.args = {
+    defaultOpen: true,
+}

frontend/src/lib/components/EmojiPicker/EmojiPickerPopover.tsx

@@ -0,0 +1,102 @@
+import {
+    EmojiPicker,
+    EmojiPickerListCategoryHeaderProps,
+    EmojiPickerListEmojiProps,
+    EmojiPickerListRowProps,
+} from 'frimousse'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { Popover } from 'lib/lemon-ui/Popover'
+import { useState } from 'react'
+import { IconEmojiAdd } from '@posthog/icons'
+
+const EmojiPickerCategoryHeader = ({ category, ...props }: EmojiPickerListCategoryHeaderProps): JSX.Element => (
+    <div className="bg-bg-light px-3 pt-3 pb-1.5 font-medium text-neutral-600 text-sm" {...props}>
+        {category.label}
+    </div>
+)
+
+const EmojiPickerEmojiRow = ({ children, ...props }: EmojiPickerListRowProps): JSX.Element => (
+    <div className="scroll-my-1.5 px-1.5" {...props}>
+        {children}
+    </div>
+)
+
+const EmojiPickerEmojiButton = ({ emoji, ...props }: EmojiPickerListEmojiProps): JSX.Element => (
+    <button
+        data-attr="emoji-picker-button"
+        className="flex items-center justify-center rounded-md text-xl size-8 data-[active]:bg-secondary-3000-hover"
+        {...props}
+    >
+        {emoji.emoji}
+    </button>
+)
+
+export interface EmojiPickerPopoverProps {
+    /**
+     * The action to take when a user selects an emoji
+     * receives the emoji as a string
+     */
+    onSelect: (s: string) => void
+    /**
+     * Whether to start with the popover open or closed
+     * Defaults to false (closed)
+     */
+    defaultOpen?: boolean
+    /**
+     * the data-attr to set on the button that opens and closes the popover
+     */
+    'data-attr'?: string
+}
+
+export function EmojiPickerPopover({
+    onSelect,
+    defaultOpen = false,
+    'data-attr': dataAttr,
+}: EmojiPickerPopoverProps): JSX.Element {
+    const [emojiPickerOpen, setEmojiPickerOpen] = useState(defaultOpen)
+
+    return (
+        <Popover
+            onClickOutside={() => setEmojiPickerOpen(false)}
+            // prefer the bottom, but will fall back to other positions based on space
+            placement="bottom-start"
+            visible={emojiPickerOpen}
+            overlay={
+                <EmojiPicker.Root
+                    className="isolate flex h-[368px] w-fit flex-col bg-bg-light"
+                    onEmojiSelect={({ emoji }) => {
+                        onSelect(emoji)
+                        setEmojiPickerOpen(false)
+                    }}
+                >
+                    <EmojiPicker.Search className="z-10 mx-2 mt-2 appearance-none rounded bg-fill-input px-2.5 py-2 text-sm border" />
+                    <EmojiPicker.Viewport className="relative flex-1 outline-hidden">
+                        <EmojiPicker.Loading className="absolute inset-0 flex items-center justify-center text-tertiary text-sm">
+                            Loading…
+                        </EmojiPicker.Loading>
+                        <EmojiPicker.Empty className="absolute inset-0 flex items-center justify-center text-tertiary text-sm">
+                            No emoji found.
+                        </EmojiPicker.Empty>
+                        <EmojiPicker.List
+                            className="select-none pb-1.5"
+                            components={{
+                                CategoryHeader: EmojiPickerCategoryHeader,
+                                Row: EmojiPickerEmojiRow,
+                                Emoji: EmojiPickerEmojiButton,
+                            }}
+                        />
+                    </EmojiPicker.Viewport>
+                </EmojiPicker.Root>
+            }
+        >
+            <LemonButton
+                data-attr={dataAttr}
+                icon={<IconEmojiAdd className="text-lg" />}
+                onClick={() => {
+                    setEmojiPickerOpen(!emojiPickerOpen)
+                }}
+                size="small"
+            />
+        </Popover>
+    )
+}

frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx

@@ -111,7 +111,7 @@ export const LemonTextArea = React.forwardRef<HTMLTextAreaElement, LemonTextArea
             />
             {hasFooter ? (
                 <div className="flex flex-row gap-x-2 justify-between border-l border-r border-b rounded-b px-1">
-                    <div className="flex flex-row gap-x-1 items-center">{actions}</div>
+                    <div className="flex flex-row items-center">{actions}</div>
                     <div className="flex flex-row gap-x-1 items-center">
                         <div className="flex flex-row gap-x-1 justify-end flex-grow">
                             {rightFooter}

frontend/src/lib/lemon-ui/LemonTextArea/LemonTextAreaMarkdown.tsx

@@ -1,7 +1,8 @@
-import { useValues } from 'kea'
+import { useActions, useValues } from 'kea'
 import { TextContent } from 'lib/components/Cards/TextCard/TextCard'
 import { useUploadFiles } from 'lib/hooks/useUploadFiles'
-import { IconMarkdown, IconUploadFile } from 'lib/lemon-ui/icons'
+import { IconMarkdown } from 'lib/lemon-ui/icons'
+import { IconImage } from '@posthog/icons'
 import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput'
 import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
 import { LemonTextArea, LemonTextAreaProps } from 'lib/lemon-ui/LemonTextArea/LemonTextArea'
@@ -10,10 +11,14 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import posthog from 'posthog-js'
 import React, { useRef, useState } from 'react'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { EmojiPickerPopover } from 'lib/components/EmojiPicker/EmojiPickerPopover'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { emojiUsageLogic } from 'lib/lemon-ui/LemonTextArea/emojiUsageLogic'
 
 export const LemonTextAreaMarkdown = React.forwardRef<HTMLTextAreaElement, LemonTextAreaProps>(
     function LemonTextAreaMarkdown({ value, onChange, className, ...editAreaProps }, ref): JSX.Element {
         const { objectStorageAvailable } = useValues(preflightLogic)
+        const { emojiUsed } = useActions(emojiUsageLogic)
 
         const [isPreviewShown, setIsPreviewShown] = useState(false)
         const dropRef = useRef<HTMLDivElement>(null)
@@ -65,23 +70,46 @@ export const LemonTextAreaMarkdown = React.forwardRef<HTMLTextAreaElement, Lemon
                                             loading={uploading}
                                             value={filesToUpload}
                                             callToAction={
-                                                objectStorageAvailable ? (
-                                                    <Tooltip title="Click here or drag and drop to upload images">
-                                                        <div className="rounded hover:bg-fill-button-tertiary-hover px-1 py-0.5">
-                                                            {' '}
-                                                            <IconUploadFile className="text-xl" />
-                                                        </div>
-                                                    </Tooltip>
-                                                ) : (
-                                                    <Tooltip title="Enable object storage to add images by dragging and dropping">
-                                                        <div className="rounded px-1 py-0.5">
-                                                            {' '}
-                                                            <IconUploadFile className="text-xl" />
-                                                        </div>
-                                                    </Tooltip>
-                                                )
+                                                <LemonButton
+                                                    size="small"
+                                                    icon={<IconImage className="text-lg" />}
+                                                    disabledReason={
+                                                        objectStorageAvailable
+                                                            ? undefined
+                                                            : 'Enable object storage to add images by dragging and dropping'
+                                                    }
+                                                    tooltip={
+                                                        objectStorageAvailable
+                                                            ? 'Click here or drag and drop to upload images'
+                                                            : null
+                                                    }
+                                                />
                                             }
                                         />,
+                                        <EmojiPickerPopover
+                                            key="emoj-picker"
+                                            data-attr="lemon-text-area-markdown-emoji-popover"
+                                            onSelect={(emoji: string) => {
+                                                if (ref && 'current' in ref && ref.current) {
+                                                    const textArea = ref.current
+                                                    const cursorStart = textArea.selectionStart || 0
+                                                    const cursorEnd = textArea.selectionEnd || 0
+                                                    const textBefore = (value || '').slice(0, cursorStart)
+                                                    const textAfter = (value || '').slice(cursorEnd)
+                                                    const spaceBefore = textBefore.endsWith(' ') ? '' : ' '
+                                                    const spaceAfter = textAfter.startsWith(' ') ? '' : ' '
+                                                    const newValue =
+                                                        textBefore + spaceBefore + emoji + spaceAfter + textAfter
+                                                    onChange?.(newValue)
+                                                    // Restore cursor position after the inserted emoji
+                                                    setTimeout(() => {
+                                                        textArea.selectionStart = textArea.selectionEnd =
+                                                            cursorStart + spaceBefore.length + emoji.length
+                                                    }, 0)
+                                                }
+                                                emojiUsed(emoji)
+                                            }}
+                                        />,
                                     ]}
                                 />
                             </div>

frontend/src/lib/lemon-ui/LemonTextArea/emojiUsageLogic.ts

@@ -0,0 +1,70 @@
+import { actions, kea, reducers, path, selectors } from 'kea'
+import { now } from 'lib/dayjs'
+
+import { permanentlyMount } from 'lib/utils/kea-logic-builders'
+
+import type { emojiUsageLogicType } from './emojiUsageLogicType'
+
+export const defaultQuickEmojis = ['💖', '👍', '🤔', '👎', '🌶️']
+
+export const emojiUsageLogic = kea<emojiUsageLogicType>([
+    path(['lib', 'lemon-ui', 'LemonTextArea', 'emojiUsage', 'logic']),
+    actions({
+        emojiUsed: (emoji: string) => ({ emoji }),
+    }),
+    reducers({
+        usedEmojis: [
+            {} as Record<string, number[]>,
+            { persist: true },
+            {
+                emojiUsed: (state, { emoji }) => {
+                    const currentTime = now().valueOf()
+                    const thirtyDaysAgo = currentTime - 30 * 24 * 60 * 60 * 1000
+
+                    const newState = { ...state, [emoji]: state[emoji] || [] }
+                    newState[emoji] = [...newState[emoji], currentTime]
+
+                    newState[emoji] = newState[emoji].filter((timestamp: number) => timestamp > thirtyDaysAgo)
+
+                    if (newState[emoji].length === 0) {
+                        delete newState[emoji]
+                    } else {
+                        // Limit to max 10 timestamps per emoji to prevent memory issues
+                        if (newState[emoji].length > 10) {
+                            newState[emoji] = newState[emoji].slice(-10)
+                        }
+                    }
+
+                    return newState
+                },
+            },
+        ],
+    }),
+    selectors({
+        favouriteEmojis: [
+            (s) => [s.usedEmojis],
+            (usedEmojis): string[] => {
+                // Get user's favorite emojis sorted by usage count
+                const userFavorites = Object.entries(usedEmojis)
+                    .map(([emoji, timestamps]) => ({
+                        emoji,
+                        count: timestamps.length,
+                    }))
+                    .sort((a, b) => b.count - a.count) // Sort by usage count descending
+                    .slice(0, 5) // Take top 5
+                    .map(({ emoji }) => emoji) // Extract just the emoji strings
+
+                // If we have fewer than 5 favorites, fill with quickEmojis (avoiding duplicates)
+                if (userFavorites.length < 5) {
+                    const remainingSlots = 5 - userFavorites.length
+                    const availableQuickEmojis = defaultQuickEmojis.filter((emoji) => !userFavorites.includes(emoji))
+                    const fillEmojis = availableQuickEmojis.slice(0, remainingSlots)
+                    return [...userFavorites, ...fillEmojis]
+                }
+
+                return userFavorites
+            },
+        ],
+    }),
+    permanentlyMount(),
+])

frontend/src/lib/lemon-ui/icons/categories.ts

@@ -109,6 +109,7 @@ export const TECHNOLOGY = {
         'IconChat',
         'IconThoughtBubble',
         'IconChatHelp',
+        'IconComment',
     ],
     Hardware: [
         'IconCompass',
@@ -167,6 +168,7 @@ export const TECHNOLOGY = {
         'IconMouseScrollDown',
         'IconDrag',
         'IconPointer',
+        'IconImage',
     ],
 }
 
@@ -191,6 +193,7 @@ export const ELEMENTS = {
         'IconSort',
         'IconSortAlpha',
         'IconExternal',
+        'IconEmojiAdd',
     ],
     Symbols: [
         'IconLock',
@@ -209,6 +212,7 @@ export const ELEMENTS = {
         'IconHide',
         'IconStopFilled',
         'IconListCheck',
+        'IconEmoji',
     ],
     'Arrows & Shapes': [
         'IconArrowLeft',
@@ -288,7 +292,7 @@ export const TEAMS_AND_COMPANIES = {
     'Feature Success': ['IconFlask', 'IconTestTube', 'IconMultivariateTesting', 'IconSplitTesting', 'IconBalance'],
     Pipeline: ['IconWebhooks', 'IconDecisionTree'],
     'Product OS': ['IconNotebook', 'IconHogQL', 'IconDashboard', 'IconSupport'],
-    Logos: ['IconLogomark', 'IconGithub'],
+    Logos: ['IconLogomark', 'IconGithub', 'IconLinear'],
     ErrorTracking: ['IconIssue'],
     LLMObservability: ['IconLlmObservability', 'IconLlmPromptEvaluation', 'IconLlmPromptManagement'],
 }

frontend/src/scenes/notebooks/Nodes/NotebookNodePlaylist.tsx

@@ -13,10 +13,10 @@ import { notebookNodeLogic } from './notebookNodeLogic'
 import { JSONContent, NotebookNodeProps, NotebookNodeAttributeProperties } from '../Notebook/utils'
 import { SessionRecordingsPlaylist } from 'scenes/session-recordings/playlist/SessionRecordingsPlaylist'
 import { sessionRecordingPlayerLogic } from 'scenes/session-recordings/player/sessionRecordingPlayerLogic'
-import { IconComment } from 'lib/lemon-ui/icons'
 import { sessionRecordingPlayerLogicType } from 'scenes/session-recordings/player/sessionRecordingPlayerLogicType'
 import { RecordingsUniversalFiltersEmbed } from 'scenes/session-recordings/filters/RecordingsUniversalFiltersEmbed'
 import { PostHogErrorBoundary } from 'posthog-js/react'
+import { IconComment } from '@posthog/icons'
 
 const Component = ({
     attributes,

frontend/src/scenes/notebooks/Nodes/NotebookNodeRecording.tsx

@@ -21,9 +21,8 @@ import { notebookNodeLogic } from './notebookNodeLogic'
 import { LemonSwitch } from '@posthog/lemon-ui'
 import { JSONContent, NotebookNodeProps, NotebookNodeAttributeProperties } from '../Notebook/utils'
 import { asDisplay } from 'scenes/persons/person-utils'
-import { IconComment } from 'lib/lemon-ui/icons'
 import { NotFound } from 'lib/components/NotFound'
-import { IconPerson } from '@posthog/icons'
+import { IconComment, IconPerson } from '@posthog/icons'
 import { UUID_REGEX_MATCH_GROUPS } from './utils'
 
 const HEIGHT = 500