From bf30bf28a9a099ab7485428ab9b08a869947f519 Mon Sep 17 00:00:00 2001
From: Teo <cheesen.xu@gmail.com>
Date: Thu, 14 Aug 2025 16:55:08 +0800
Subject: [PATCH] fix(TopicMessages): fix topic style (#9178)

* fix(TopicMessages): fix topic style
---
 .../pages/history/components/TopicMessages.tsx   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/pages/history/components/TopicMessages.tsx b/src/renderer/src/pages/history/components/TopicMessages.tsx
index 1b4be00029..8c98c458df 100644
--- a/src/renderer/src/pages/history/components/TopicMessages.tsx
+++ b/src/renderer/src/pages/history/components/TopicMessages.tsx
@@ -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