fix(TopicMessages): fix topic style (#9178)

* fix(TopicMessages): fix topic style
This commit is contained in:
Teo 2025-08-14 16:55:08 +08:00 committed by GitHub
parent 1bf380a921
commit bf30bf28a9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -3,6 +3,7 @@ import { HStack } from '@renderer/components/Layout'
import SearchPopup from '@renderer/components/Popups/SearchPopup'
import { MessageEditingProvider } from '@renderer/context/MessageEditingContext'
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 { isGenerating, locateToMessage } from '@renderer/services/MessagesService'
@ -10,6 +11,7 @@ import NavigationService from '@renderer/services/NavigationService'
import { useAppDispatch } from '@renderer/store'
import { loadTopicMessagesThunk } from '@renderer/store/thunk/messageThunk'
import { Topic } from '@renderer/types'
import { classNames } from '@renderer/utils'
import { Button, Divider, Empty } from 'antd'
import { t } from 'i18next'
import { Forward } from 'lucide-react'
@ -26,6 +28,7 @@ const TopicMessages: FC<Props> = ({ topic, ...props }) => {
const navigate = NavigationService.navigate!
const { handleScroll, containerRef } = useScrollPosition('TopicMessages')
const dispatch = useAppDispatch()
const { messageStyle } = useSettings()
useEffect(() => {
topic && dispatch(loadTopicMessagesThunk(topic.id))
@ -48,9 +51,9 @@ const TopicMessages: FC<Props> = ({ topic, ...props }) => {
return (
<MessageEditingProvider>
<MessagesContainer {...props} ref={containerRef} onScroll={handleScroll}>
<ContainerWrapper>
<ContainerWrapper className={messageStyle}>
{topic?.messages.map((message) => (
<div key={message.id} style={{ position: 'relative' }}>
<MessageWrapper key={message.id} className={classNames([messageStyle, message.role])}>
<MessageItem message={message} topic={topic} hideMenuBar={true} />
<Button
type="text"
@ -60,7 +63,7 @@ const TopicMessages: FC<Props> = ({ topic, ...props }) => {
icon={<Forward size={16} />}
/>
<Divider style={{ margin: '8px auto 15px' }} variant="dashed" />
</div>
</MessageWrapper>
))}
{isEmpty && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
{!isEmpty && (
@ -91,4 +94,11 @@ const ContainerWrapper = styled.div`
flex-direction: column;
`
const MessageWrapper = styled.div`
position: relative;
&.bubble.user {
padding-top: 26px;
}
`
export default TopicMessages