feat: Add emoji selection for assistant name

This commit is contained in:
ousugo 2025-02-20 12:44:07 +08:00 committed by 亢奋猫
parent 12c9d810a2
commit e2d0c3bbce

View File

@ -1,6 +1,10 @@
import 'emoji-picker-element'
import EmojiPicker from '@renderer/components/EmojiPicker'
import { Box, HStack } from '@renderer/components/Layout' import { Box, HStack } from '@renderer/components/Layout'
import { Assistant, AssistantSettings } from '@renderer/types' import { Assistant, AssistantSettings } from '@renderer/types'
import { Button, Input } from 'antd' import { getLeadingEmoji } from '@renderer/utils'
import { Button, Input, Popover } from 'antd'
import TextArea from 'antd/es/input/TextArea' import TextArea from 'antd/es/input/TextArea'
import { useState } from 'react' import { useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
@ -14,12 +18,19 @@ interface Props {
} }
const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant, onOk }) => { const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant, onOk }) => {
const [name, setName] = useState(assistant.name) const [emoji, setEmoji] = useState(getLeadingEmoji(assistant.name) || '⭐️')
const [name, setName] = useState(assistant.name.replace(getLeadingEmoji(assistant.name) || '', '').trim())
const [prompt, setPrompt] = useState(assistant.prompt) const [prompt, setPrompt] = useState(assistant.prompt)
const { t } = useTranslation() const { t } = useTranslation()
const onUpdate = () => { const onUpdate = () => {
const _assistant = { ...assistant, name, prompt } const _assistant = { ...assistant, name: `${emoji} ${name}`.trim(), prompt }
updateAssistant(_assistant)
}
const handleEmojiSelect = (selectedEmoji: string) => {
setEmoji(selectedEmoji)
const _assistant = { ...assistant, name: `${selectedEmoji} ${name}`.trim(), prompt }
updateAssistant(_assistant) updateAssistant(_assistant)
} }
@ -28,12 +39,18 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant,
<Box mb={8} style={{ fontWeight: 'bold' }}> <Box mb={8} style={{ fontWeight: 'bold' }}>
{t('common.name')} {t('common.name')}
</Box> </Box>
<Input <HStack gap={8} alignItems="center">
placeholder={t('common.assistant') + t('common.name')} <Popover content={<EmojiPicker onEmojiClick={handleEmojiSelect} />} arrow>
value={name} <Button style={{ fontSize: 20, padding: '4px 8px', minWidth: '42px', height: '32px' }}>{emoji}</Button>
onChange={(e) => setName(e.target.value)} </Popover>
onBlur={onUpdate} <Input
/> placeholder={t('common.assistant') + t('common.name')}
value={name}
onChange={(e) => setName(e.target.value)}
onBlur={onUpdate}
style={{ flex: 1 }}
/>
</HStack>
<Box mt={8} mb={8} style={{ fontWeight: 'bold' }}> <Box mt={8} mb={8} style={{ fontWeight: 'bold' }}>
{t('common.prompt')} {t('common.prompt')}
</Box> </Box>