feat: Enhance assistant emoji and popup UI interactions

CherryHQ · Feb 22, 2025 · 4e20bd1 · 4e20bd1
1 parent 5c2d936
commit 4e20bd1
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
@@ -123,6 +123,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       maskClosable={false}
       afterClose={onClose}
       okText={t('agents.add.title')}
+      width={800}
       centered>
       <Form
         ref={formRef}

diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx
@@ -1,5 +1,6 @@
 import 'emoji-picker-element'
 
+import { CloseCircleFilled } from '@ant-design/icons'
 import EmojiPicker from '@renderer/components/EmojiPicker'
 import { Box, HStack } from '@renderer/components/Layout'
 import { Assistant, AssistantSettings } from '@renderer/types'
@@ -18,7 +19,7 @@ interface Props {
 }
 
 const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant, onOk }) => {
-  const [emoji, setEmoji] = useState(getLeadingEmoji(assistant.name) || '⭐️')
+  const [emoji, setEmoji] = useState(getLeadingEmoji(assistant.name) || assistant.emoji)
   const [name, setName] = useState(assistant.name.replace(getLeadingEmoji(assistant.name) || '', '').trim())
   const [prompt, setPrompt] = useState(assistant.prompt)
   const { t } = useTranslation()
@@ -34,14 +35,40 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant,
     updateAssistant(_assistant)
   }
 
+  const handleEmojiDelete = () => {
+    setEmoji('')
+    const _assistant = { ...assistant, name: name.trim(), prompt, emoji: undefined }
+    updateAssistant(_assistant)
+  }
+
   return (
     <Container>
       <Box mb={8} style={{ fontWeight: 'bold' }}>
         {t('common.name')}
       </Box>
       <HStack gap={8} alignItems="center">
         <Popover content={<EmojiPicker onEmojiClick={handleEmojiSelect} />} arrow>
-          <Button style={{ fontSize: 20, padding: '4px 8px', minWidth: '42px', height: '32px' }}>{emoji}</Button>
+          <EmojiButtonWrapper>
+            <Button style={{ fontSize: 20, padding: '4px', minWidth: '32px', height: '32px' }}>{emoji}</Button>
+            {emoji && (
+              <CloseCircleFilled
+                className="delete-icon"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleEmojiDelete()
+                }}
+                style={{
+                  display: 'none',
+                  position: 'absolute',
+                  top: '-8px',
+                  right: '-8px',
+                  fontSize: '16px',
+                  color: '#ff4d4f',
+                  cursor: 'pointer'
+                }}
+              />
+            )}
+          </EmojiButtonWrapper>
         </Popover>
         <Input
           placeholder={t('common.assistant') + t('common.name')}
@@ -80,4 +107,13 @@ const Container = styled.div`
   padding: 5px;
 `
 
+const EmojiButtonWrapper = styled.div`
+  position: relative;
+  display: inline-block;
+
+  &:hover .delete-icon {
+    display: block !important;
+  }
+`
+
 export default AssistantPromptSettings