mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-09 23:10:20 +08:00
feat: Add emoji selection for assistant name
This commit is contained in:
parent
12c9d810a2
commit
e2d0c3bbce
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user