style: update bubble ui component styles

src/renderer/src/assets/styles/index.scss

@@ -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);
+  }
+}

src/renderer/src/pages/history/components/TopicMessages.tsx

@@ -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' }}>

src/renderer/src/pages/home/Chat.tsx

@@ -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)`