whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: Improve system prompt styling with theme-aware background

Browse Source
This commit is contained in:
kangfenmao 2025-02-18 09:39:02 +08:00
parent 98087e50db
commit 9d35205681
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/src/pages/home/Messages/Prompt.tsx
View File

@ -1,3 +1,4 @@
import { useTheme } from '@renderer/context/ThemeProvider'
import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
import { Assistant, Topic } from '@renderer/types'
import { FC } from 'react'
@ -11,26 +12,30 @@ interface Props {
const Prompt: FC<Props> = ({ assistant, topic }) => {
const { t } = useTranslation()
const { theme } = useTheme()
const prompt = assistant.prompt || t('chat.default.description')
const topicPrompt = topic?.prompt || ''
const isDark = theme === 'dark'
if (!prompt && !topicPrompt) {
return null
}
return (
<Container className="system-prompt" onClick={() => AssistantSettingsPopup.show({ assistant })}>
<Container className="system-prompt" onClick={() => AssistantSettingsPopup.show({ assistant })} $isDark={isDark}>
<Text>{prompt}</Text>
</Container>
)
}
const Container = styled.div`
const Container = styled.div<{ $isDark: boolean }>`
padding: 10px 20px;
background-color: var(--color-background-soft);
margin: 4px 20px 0 20px;
border-radius: 6px;
cursor: pointer;
border: 0.5px solid var(--color-border);
background-color: ${({ $isDark }) => ($isDark ? 'var(--color-background-soft)' : 'transparent')};
`
const Text = styled.div`