style: updated ui styles and translations

- Adjusted padding styles in AssistantModelSettings component.
- The addition of a close button to the Assistant Prompt Settings component to enhance its functionality.
- Added OK callback event to AssistantPromptSettings component.
- Added translations for new UI elements.
- Updated translation data for Chinese language.
- Added new translations and updated existing values in the language file to incorporate additional features.
This commit is contained in:
kangfenmao 2024-10-11 14:05:50 +08:00
parent 5b41dd24d4
commit 3619e8f47b
6 changed files with 21 additions and 11 deletions

View File

@ -166,7 +166,7 @@ const Container = styled.div`
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
padding-bottom: 10px; padding: 5px;
` `
const Label = styled.p` const Label = styled.p`

View File

@ -1,14 +1,14 @@
import { useAssistant } from '@renderer/hooks/useAssistant' import { useAssistant } from '@renderer/hooks/useAssistant'
import { syncAsistantToAgent } from '@renderer/services/assistant' import { syncAsistantToAgent } from '@renderer/services/assistant'
import { Assistant } from '@renderer/types' import { Assistant } from '@renderer/types'
import { Input } from 'antd' import { Button, Input } 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'
import { Box, VStack } from '../Layout' import { Box, HStack, VStack } from '../Layout'
const AssistantPromptSettings: React.FC<{ assistant: Assistant }> = (props) => { const AssistantPromptSettings: React.FC<{ assistant: Assistant; onOk: () => void }> = (props) => {
const { assistant, updateAssistant } = useAssistant(props.assistant.id) const { assistant, updateAssistant } = useAssistant(props.assistant.id)
const [name, setName] = useState(assistant.name) const [name, setName] = useState(assistant.name)
const [prompt, setPrompt] = useState(assistant.prompt) const [prompt, setPrompt] = useState(assistant.prompt)
@ -22,14 +22,16 @@ const AssistantPromptSettings: React.FC<{ assistant: Assistant }> = (props) => {
return ( return (
<VStack flex={1}> <VStack flex={1}>
<Box mb={8}>{t('common.name')}</Box> <Box mb={8} style={{ fontWeight: 'bold' }}>
{t('common.name')}
</Box>
<Input <Input
placeholder={t('common.assistant') + t('common.name')} placeholder={t('common.assistant') + t('common.name')}
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
onBlur={onUpdate} onBlur={onUpdate}
/> />
<Box mt={8} mb={8}> <Box mt={8} mb={8} style={{ fontWeight: 'bold' }}>
{t('common.prompt')} {t('common.prompt')}
</Box> </Box>
<TextArea <TextArea
@ -38,8 +40,13 @@ const AssistantPromptSettings: React.FC<{ assistant: Assistant }> = (props) => {
value={prompt} value={prompt}
onChange={(e) => setPrompt(e.target.value)} onChange={(e) => setPrompt(e.target.value)}
onBlur={onUpdate} onBlur={onUpdate}
style={{ minHeight: 'calc(80vh - 150px)', maxHeight: 'calc(80vh - 150px)' }} style={{ minHeight: 'calc(80vh - 200px)', maxHeight: 'calc(80vh - 150px)' }}
/> />
<HStack width="100%" justifyContent="flex-end" mt="10px">
<Button type="primary" onClick={props.onOk}>
{t('common.close')}
</Button>
</HStack>
</VStack> </VStack>
) )
} }

View File

@ -81,7 +81,7 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ assistant, resolve })
/> />
</LeftMenu> </LeftMenu>
<Settings> <Settings>
{menu === 'prompt' && <AssistantPromptSettings assistant={assistant} />} {menu === 'prompt' && <AssistantPromptSettings assistant={assistant} onOk={onOk} />}
{menu === 'model' && <AssistantModelSettings assistant={assistant} />} {menu === 'model' && <AssistantModelSettings assistant={assistant} />}
</Settings> </Settings>
</HStack> </HStack>

View File

@ -27,7 +27,8 @@
"default": "Default", "default": "Default",
"warning": "Warning", "warning": "Warning",
"back": "Back", "back": "Back",
"chat": "Chat" "chat": "Chat",
"close": "Close"
}, },
"button": { "button": {
"add": "Add", "add": "Add",

View File

@ -27,7 +27,8 @@
"default": "默认", "default": "默认",
"warning": "警告", "warning": "警告",
"back": "返回", "back": "返回",
"chat": "聊天" "chat": "聊天",
"close": "关闭"
}, },
"button": { "button": {
"add": "添加", "add": "添加",

View File

@ -27,7 +27,8 @@
"default": "預設", "default": "預設",
"warning": "警告", "warning": "警告",
"back": "返回", "back": "返回",
"chat": "聊天" "chat": "聊天",
"close": "關閉"
}, },
"button": { "button": {
"add": "添加", "add": "添加",