Love from ChatGPT: How to make <p> show all space like <pre>

src/global.css

@@ -21,3 +21,7 @@
 body::-webkit-scrollbar {
   display: none;
 }
+
+p.message-content {
+  white-space: pre-wrap;
+}

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"
+      ? "message-content p-2 rounded 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-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}>
+    <div className="relative">
-      {chat.content
+      <p className={pClassName}>{chat.content}</p>
-        .split("\n")
-        .filter((line) => line)
-        .map((line) => (
-          <p className="my-1">{line}</p>
-        ))}
       <DeleteIcon />
-    </p>
+    </div>
   );
 }