cleanup

app/globals.css

@@ -75,8 +75,6 @@
 
 * {
   box-sizing: border-box;
-  padding: 0;
-  margin: 0;
 }
 
 html,
@@ -104,8 +102,4 @@ a {
   html {
     color-scheme: dark;
   }
-}
-
-ul {
-  padding: 5px;
-}
+}

app/page.module.css

@@ -14,9 +14,14 @@
   margin-bottom: 60px; /* Space for the input area */
 }
 
+.messages pre, .messages code {
+  white-space: pre-wrap; /* Wraps the text */
+  word-break: break-word; /* Breaks words at the end of the line */
+  overflow-wrap: break-word; /* Ensures long words are wrapped */
+}
+
 /* Individual message styling */
 .message {
-  /* Add specific styles for message appearance here */
 }
 
 /* Input container styling */

app/page.tsx

@@ -101,7 +101,7 @@ const Page: React.FC = () => {
           messages.map((message, i) => {
             const messageClass = `${styles.message} ${message.role === 'user' ? styles['message-user'] : ''}`;
             return (
-              <div key={i} className={messageClass} style={{ display: 'flex', alignItems: 'center' }}>
+              <div key={i} className={messageClass} style={{ alignItems: 'center' }}>
                 {message.content === "" && message.function_call != undefined ? (
                     typeof message.function_call === "object" ? (
                       <div style={{ display: 'flex', flexDirection: 'column' }}>