From 9b00cd0fbc7f5c1eccd15d68ab76b2b3cf953f77 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Wed, 22 Mar 2023 20:18:21 +0800
Subject: [PATCH] Love from ChatGPT: How to make <p> show all space like <pre>

---
 src/global.css  |  4 ++++
 src/message.tsx | 15 +++++----------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/global.css b/src/global.css
index 047a1bd..2e5a143 100644
--- a/src/global.css
+++ b/src/global.css
@@ -21,3 +21,7 @@
 body::-webkit-scrollbar {
   display: none;
 }
+
+p.message-content {
+  white-space: pre-wrap;
+}
diff --git a/src/message.tsx b/src/message.tsx
index a1b7552..2e578aa 100644
--- a/src/message.tsx
+++ b/src/message.tsx
@@ -10,8 +10,8 @@ export default function Message(props: Props) {
   const chat = chatStore.history[messageIndex];
   const pClassName =
     chat.role === "assistant"
-      ? "p-2 rounded relative bg-white my-2 text-left dark:bg-gray-700 dark:text-white"
-      : "p-2 rounded relative bg-green-400 my-2 text-right";
+      ? "message-content p-2 rounded bg-white my-2 text-left dark:bg-gray-700 dark:text-white"
+      : "message-content p-2 rounded bg-green-400 my-2 text-right";
   const iconClassName =
     chat.role === "user"
       ? "absolute bottom-0 left-0"
@@ -38,14 +38,9 @@ export default function Message(props: Props) {
     </button>
   );
   return (
-    <p className={pClassName}>
-      {chat.content
-        .split("\n")
-        .filter((line) => line)
-        .map((line) => (
-          <p className="my-1">{line}</p>
-        ))}
+    <div className="relative">
+      <p className={pClassName}>{chat.content}</p>
       <DeleteIcon />
-    </p>
+    </div>
   );
 }