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 = () => { @@ -43,7 +46,6 @@ const DropdownAssistant = () => {
{ - console.log('edit clicked', selectedAssistant) if (selectedAssistant) { setEditingAssistantId(selectedAssistant.id) setDialogOpen(true) @@ -73,6 +75,7 @@ const DropdownAssistant = () => { updateCurrentThreadAssistant(assistant) }} > + {assistant?.avatar} {assistant.name} diff --git a/web-app/src/containers/dialogs/AddEditAssistant.tsx b/web-app/src/containers/dialogs/AddEditAssistant.tsx index 3f2736aea..6a06d9502 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(['']) const [paramsValues, setParamsValues] = useState(['']) const [paramsTypes, setParamsTypes] = useState(['string']) + const [showEmojiPicker, setShowEmojiPicker] = useState(false) + const emojiPickerRef = useRef(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,25 +214,40 @@ export default function AddEditAssistant({
-
- - setName(e.target.value)} - placeholder="Enter name" - autoFocus - /> -
+
+
+ +
setShowEmojiPicker(!showEmojiPicker)} + > + {avatar || '😊'} +
+
+ { + setAvatar(emojiData.emoji) + setShowEmojiPicker(false) + }} + /> +
+
-
- - setAvatar(e.target.value)} - placeholder="Enter avatar URL" - /> +
+ + setName(e.target.value)} + placeholder="Enter name" + autoFocus + /> +
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() { >

+ {assistant.avatar && ( + {assistant.avatar} + )} {assistant.name}

diff --git a/web-app/src/routes/settings/general.tsx b/web-app/src/routes/settings/general.tsx index f79bdce73..5c327e4ff 100644 --- a/web-app/src/routes/settings/general.tsx +++ b/web-app/src/routes/settings/general.tsx @@ -108,12 +108,6 @@ function General() { v{VERSION} } /> - } - /> }