From 7f367bf669f6ad552aa7f19dd22d2a62ca76696b Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Thu, 7 Dec 2023 17:54:01 +0800
Subject: [PATCH] Refactor styled components in MessageBody

- Changed the way styles are applied to preserve text content in the MessageBody component, enhancing readability and reusability.
- Shifted the styling rules from the Container component's sx property to createStyles and added them to the preformatted text element through a class name.
---
 src/views/components/MessageBody/index.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/views/components/MessageBody/index.tsx b/src/views/components/MessageBody/index.tsx
index 3d35533..52e88e0 100644
--- a/src/views/components/MessageBody/index.tsx
+++ b/src/views/components/MessageBody/index.tsx
@@ -1,4 +1,4 @@
-import { Container, createStyles } from "@mantine/core";
+import { Container, createStyles ,Text} from "@mantine/core";
 import React from "react";
 import { observer } from "mobx-react-lite";
 import MessageMarkdown from "@/views/components/MessageMarkdown";
@@ -14,6 +14,11 @@ interface IProps {
 const useStyles = createStyles((theme, options:any) => ({
     bodyWidth:{
         width: options.chatPanelWidth - 20,
+    },
+    userContent:{
+        fontFamily: theme.fontFamily,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
     }
 }));
 
@@ -32,13 +37,9 @@ const MessageBody = observer((props: IProps) => {
                 sx={{
                     margin: 0,
                     padding: 0,
-                    width: chat.chatPanelWidth - 20,
-                    pre: {
-                        whiteSpace: 'pre-wrap',
-                        wordBreak: 'break-word',
-                    },
+                    width: chat.chatPanelWidth - 20
                 }}>
-                <pre>{children}</pre>
+                <pre className={classes.userContent}>{children}</pre>
             </Container>
     );
 });