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

style: update bubble ui component styles

Browse Source
This commit is contained in:
kangfenmao 2024-11-11 17:41:53 +08:00
parent 1caf53fbda
commit 60433bb1ab
3 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/renderer/src/assets/styles/index.scss
View File

@ -208,3 +208,40 @@ body[os='windows'] {
white-space: normal;
word-wrap: break-word;
}
.bubble {
background-color: var(--chat-background);
#messages {
background-color: var(--chat-background);
}
#inputbar {
border-radius: 0;
margin: 0;
border: none;
border-top: 1px solid var(--color-border-mute);
background: var(--color-background);
}
.system-prompt {
background-color: var(--chat-background-assistant);
}
.message-content-container {
margin: 5px 0;
border-radius: 8px;
padding: 10px 15px 0 15px;
}
.message-user {
color: var(--chat-text-user);
.markdown,
.anticon,
.iconfont,
.message-tokens {
color: var(--chat-text-user);
}
.message-action-button:hover {
background-color: var(--color-white-soft);
}
}
code {
color: var(--color-text);
}
}

4
src/renderer/src/pages/history/components/TopicMessages.tsx
View File

@ -1,6 +1,7 @@
import { ArrowRightOutlined, MessageOutlined } from '@ant-design/icons'
import { HStack } from '@renderer/components/Layout'
import useScrollPosition from '@renderer/hooks/useScrollPosition'
import { useSettings } from '@renderer/hooks/useSettings'
import { getAssistantById } from '@renderer/services/AssistantService'
import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
import { locateToMessage } from '@renderer/services/MessagesService'
@ -20,6 +21,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
const TopicMessages: FC<Props> = ({ topic, ...props }) => {
const navigate = useNavigate()
const { handleScroll, containerRef } = useScrollPosition('TopicMessages')
const { messageStyle } = useSettings()
const isEmpty = (topic?.messages || []).length === 0
@ -34,7 +36,7 @@ const TopicMessages: FC<Props> = ({ topic, ...props }) => {
}
return (
<MessagesContainer {...props} ref={containerRef} onScroll={handleScroll}>
<MessagesContainer {...props} ref={containerRef} onScroll={handleScroll} className={messageStyle}>
<ContainerWrapper style={{ paddingTop: 30, paddingBottom: 30 }}>
{topic?.messages.map((message) => (
<div key={message.id} style={{ position: 'relative' }}>

36
src/renderer/src/pages/home/Chat.tsx
View File

@ -53,42 +53,6 @@ const Container = styled.div`
flex: 1;
justify-content: space-between;
background-color: var(--color-background);
&.bubble {
background-color: var(--chat-background);
#messages {
background-color: var(--chat-background);
}
#inputbar {
border-radius: 0;
margin: 0;
border: none;
border-top: 1px solid var(--color-border-mute);
background: var(--color-background);
}
.system-prompt {
background-color: var(--chat-background-assistant);
}
.message-content-container {
margin: 5px 0;
border-radius: 8px;
padding: 10px 15px 0 15px;
}
.message-user {
color: var(--chat-text-user);
.markdown,
.anticon,
.iconfont,
.message-tokens {
color: var(--chat-text-user);
}
.message-action-button:hover {
background-color: var(--color-white-soft);
}
}
code {
color: var(--color-text);
}
}
`
const Main = styled(Flex)`