From 974f7901e67391f58270da393a0532cc58247930 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Wed, 21 May 2025 23:45:49 +0700
Subject: [PATCH] feat: add assistant emoji picker

---
 web-app/package.json                          |   1 +
 web-app/src/containers/DropdownAssistant.tsx  |   5 +-
 .../containers/dialogs/AddEditAssistant.tsx   | 117 +++++++++++++++---
 web-app/src/hooks/useAssistant.ts             |   2 +-
 web-app/src/index.css                         |  10 +-
 web-app/src/routes/assistant.tsx              |   3 +
 web-app/src/routes/settings/general.tsx       |   6 -
 7 files changed, 116 insertions(+), 28 deletions(-)

diff --git a/web-app/package.json b/web-app/package.json
index d54759b9e..d8838b344 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -37,6 +37,7 @@
     "@uiw/react-textarea-code-editor": "^3.1.1",
     "class-variance-authority": "^0.7.1",
     "culori": "^4.0.1",
+    "emoji-picker-react": "^4.12.2",
     "fzf": "^0.5.2",
     "i18next": "^25.0.1",
     "katex": "^0.16.22",
diff --git a/web-app/src/containers/DropdownAssistant.tsx b/web-app/src/containers/DropdownAssistant.tsx
index 3c9b43936..d8702de92 100644
--- a/web-app/src/containers/DropdownAssistant.tsx
+++ b/web-app/src/containers/DropdownAssistant.tsx
@@ -36,6 +36,9 @@ const DropdownAssistant = () => {
           <DropdownMenuTrigger asChild>
             <button className="bg-main-view-fg/5 py-0.5 hover:bg-main-view-fg/8 px-2 rounded font-medium cursor-pointer flex items-center gap-1.5 relative z-20 max-w-40">
               <span className="text-main-view-fg/80 truncate">
+                {selectedAssistant?.avatar && (
+                  <span className="mr-1">{selectedAssistant?.avatar}</span>
+                )}
                 {selectedAssistant?.name || 'Jan'}
               </span>
             </button>
@@ -43,7 +46,6 @@ const DropdownAssistant = () => {
           <div
             className="size-5 cursor-pointer relative z-10 flex items-center justify-center rounded hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out "
             onClick={() => {
-              console.log('edit clicked', selectedAssistant)
               if (selectedAssistant) {
                 setEditingAssistantId(selectedAssistant.id)
                 setDialogOpen(true)
@@ -73,6 +75,7 @@ const DropdownAssistant = () => {
                     updateCurrentThreadAssistant(assistant)
                   }}
                 >
+                  <span className="mr-1">{assistant?.avatar}</span>
                   {assistant.name}
                 </span>
               </DropdownMenuItem>
diff --git a/web-app/src/containers/dialogs/AddEditAssistant.tsx b/web-app/src/containers/dialogs/AddEditAssistant.tsx
index 3f2736aea..bbc705b70 100644
--- a/web-app/src/containers/dialogs/AddEditAssistant.tsx
+++ b/web-app/src/containers/dialogs/AddEditAssistant.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import {
   Dialog,
   DialogContent,
@@ -9,6 +9,7 @@ import {
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { IconPlus, IconTrash, IconChevronDown } from '@tabler/icons-react'
+import EmojiPicker, { EmojiClickData, Theme } from 'emoji-picker-react'
 
 import { Textarea } from '@/components/ui/textarea'
 
@@ -18,6 +19,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { useTheme } from '@/hooks/useTheme'
 
 interface AddEditAssistantProps {
   open: boolean
@@ -43,9 +45,32 @@ export default function AddEditAssistant({
   const [instructions, setInstructions] = useState(
     initialData?.instructions || ''
   )
+  const { isDark } = useTheme()
   const [paramsKeys, setParamsKeys] = useState<string[]>([''])
   const [paramsValues, setParamsValues] = useState<unknown[]>([''])
   const [paramsTypes, setParamsTypes] = useState<string[]>(['string'])
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const emojiPickerRef = useRef<HTMLDivElement>(null)
+
+  // Handle click outside emoji picker
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        emojiPickerRef.current &&
+        !emojiPickerRef.current.contains(event.target as Node)
+      ) {
+        setShowEmojiPicker(false)
+      }
+    }
+
+    if (showEmojiPicker) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [showEmojiPicker])
 
   // Reset form when modal opens/closes or editing key changes
   useEffect(() => {
@@ -189,26 +214,80 @@ export default function AddEditAssistant({
           </DialogTitle>
         </DialogHeader>
         <div className="space-y-2">
-          <div className="space-y-2">
-            <label className="text-sm mb-2 inline-block">Name</label>
-            <Input
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Enter name"
-              autoFocus
-            />
+          <div className="flex items-center gap-2">
+            <div className="relative">
+              <label className="text-sm mb-2 inline-block">Emoji</label>
+              <div
+                className="border rounded-sm p-2 w-9 h-9 flex items-center justify-center border-main-view-fg/10 cursor-pointer"
+                onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+              >
+                {avatar || '😊'}
+              </div>
+              <div className="relative" ref={emojiPickerRef}>
+                <EmojiPicker
+                  open={showEmojiPicker}
+                  theme={isDark ? ('dark' as Theme) : ('light' as Theme)}
+                  className="!absolute !z-40 !overflow-y-auto top-2"
+                  height={350}
+                  lazyLoadEmojis
+                  previewConfig={{ showPreview: false }}
+                  onEmojiClick={(emojiData: EmojiClickData) => {
+                    setAvatar(emojiData.emoji)
+                    setShowEmojiPicker(false)
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2 w-full">
+              <label className="text-sm mb-2 inline-block">Name</label>
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Enter name"
+                autoFocus
+              />
+            </div>
           </div>
 
-          <div className="space-y-2">
-            <label className="text-sm mb-2 inline-block">
-              Avatar (optional)
-            </label>
-            <Input
-              value={avatar || ''}
-              onChange={(e) => setAvatar(e.target.value)}
-              placeholder="Enter avatar URL"
-            />
-          </div>
+          {/* <div className="space-y-2">
+            <label className="text-sm mb-2 inline-block">Emoji Avatar</label>
+            <div className="flex items-center gap-2">
+              <div className="border rounded-md p-2 w-12 h-12 flex items-center justify-center text-2xl">
+                {avatar || '😊'}
+              </div>
+              <div className="relative">
+                <Button
+                  onClick={() =>
+                    document
+                      .getElementById('emoji-picker-container')
+                      ?.classList.toggle('hidden')
+                  }
+                >
+                  Choose Emoji
+                </Button>
+                <div
+                  id="emoji-picker-container"
+                  className="absolute z-50 mt-1 hidden"
+                >
+                  <EmojiPicker
+                    open={true}
+                    theme={isDark ? ('dark' as Theme) : ('light' as Theme)}
+                    autoFocusSearch
+                    previewConfig={{ showPreview: false }}
+                    onEmojiClick={(emojiData: EmojiClickData) => {
+                      setAvatar(emojiData.emoji)
+                      document
+                        .getElementById('emoji-picker-container')
+                        ?.classList.add('hidden')
+                    }}
+                    width={300}
+                    height={400}
+                  />
+                </div>
+              </div>
+            </div>
+          </div> */}
 
           <div className="space-y-2">
             <label className="text-sm mb-2 inline-block">
diff --git a/web-app/src/hooks/useAssistant.ts b/web-app/src/hooks/useAssistant.ts
index 59c1fa5f2..f24c7f3e1 100644
--- a/web-app/src/hooks/useAssistant.ts
+++ b/web-app/src/hooks/useAssistant.ts
@@ -12,7 +12,7 @@ interface AssistantState {
 }
 
 export const defaultAssistant: Assistant = {
-  avatar: '',
+  avatar: '👋',
   id: 'jan',
   name: 'Jan',
   created_at: 1747029866.542,
diff --git a/web-app/src/index.css b/web-app/src/index.css
index 5804fde90..70c62d823 100644
--- a/web-app/src/index.css
+++ b/web-app/src/index.css
@@ -94,4 +94,12 @@
     @apply font-bold;
     color: color-mix(in srgb, currentColor 80%, white 20%);
   }
-}
\ No newline at end of file
+  .epr-main {
+    input {
+      @apply border !border-main-view-fg/10 !h-9 !text-sm !bg-main-view;
+    }
+    input:focus {
+      @apply !bg-main-view;
+    }
+  }
+}
diff --git a/web-app/src/routes/assistant.tsx b/web-app/src/routes/assistant.tsx
index 11e288b4c..4592d86d9 100644
--- a/web-app/src/routes/assistant.tsx
+++ b/web-app/src/routes/assistant.tsx
@@ -67,6 +67,9 @@ function Assistant() {
             >
               <div className="flex items-center justify-between gap-2">
                 <h3 className="text-base font-medium text-main-view-fg/80">
+                  {assistant.avatar && (
+                    <span className="mr-1">{assistant.avatar}</span>
+                  )}
                   {assistant.name}
                 </h3>
                 <div className="flex items-center gap-0.5">
diff --git a/web-app/src/routes/settings/general.tsx b/web-app/src/routes/settings/general.tsx
index 12a99a27e..4dcf7303b 100644
--- a/web-app/src/routes/settings/general.tsx
+++ b/web-app/src/routes/settings/general.tsx
@@ -71,12 +71,6 @@ function General() {
                   </>
                 }
               />
-              <CardItem
-                title={t('settings.general.autoDownload', {
-                  ns: 'settings',
-                })}
-                actions={<Switch />}
-              />
               <CardItem
                 title={t('common.language')}
                 actions={<LanguageSwitcher />}