cleanup

app/page.module.css

@@ -291,7 +291,6 @@
 .main {
   display: flex;
   flex-direction: column;
-  height: 100vh;
   justify-content: space-between;
   padding: 2rem;
 }
@@ -310,26 +309,28 @@
 }
 
 .message {
-  background-color: #f9f9f9;
-  border-radius: 15px;
-  padding: 10px 15px;
-  margin: 8px 0;
-  max-width: 80%;
-  word-break: break-word; /* Ensures text breaks nicely */
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  background: linear-gradient(180deg, #a8a8a8 0%, #8b8b8b 50%, #a8a8a8 100%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  color: #333;
+  overflow: hidden; /* Prevents text from overflowing */
 }
 
-/* Different background for messages from the 'user' role */
-.message-user {
-  background-color: #dcf8c6 !important;
+.message-content {
+  flex: 1;
+  margin-right: 10px; /* Adjust as needed */
+  overflow: hidden; /* Prevents text from overflowing */
+  text-overflow: ellipsis; /* Adds an ellipsis to text that overflows */
+  white-space: nowrap; /* Keeps the text on a single line */
 }
 
-/* Avatar styles */
 .avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: #ccc;
   margin-right: 10px;
+  /* Ensure you have width, height, and other necessary styles here */
 }
 
 /* Style for function call messages */
@@ -396,4 +397,15 @@
 /* In your CSS file */
 .avatar-user {
   width: 20px; /* Based on Tailwind's width setting */
-}
+}
+
+.avatar {
+  display: inline-block;
+  vertical-align: middle;
+  width: 40px;
+  height: 40px;
+  
+  
+  margin-right: 10px;
+}
+

app/page.tsx

@@ -124,35 +124,38 @@ const Page: React.FC = () => {
       <div className={styles.messages}>
         {messages.length > 0 ? (
           messages.map((message, i) => {
-            const messageClass = `message ${message.role === 'user' ? 'message-user' : ''}`;
+            const messageClass = `${styles.message} ${message.role === 'user' ? styles['message-user'] : ''}`;
             return (
-              <div key={i} className={messageClass}>
-                <div className="avatar">
+              <div key={i} className={messageClass} style={{ display: 'flex', alignItems: 'center' }}>
+                <div className={styles.avatar}>
                   {roleUIConfig[message.role].avatar}
                 </div>
-                {message.content === "" && message.function_call != undefined ? (
-                  typeof message.function_call === "object" ? (
-                    <div className="flex flex-col">
-                      <div>
-                        Using{" "}
-                        <span className="font-bold">
-                          {message.function_call.name}
-                        </span>{" "}
-                        ...
+                <div style={{ flex: 1 }}>
+                  {message.content === "" && message.function_call != undefined ? (
+                    typeof message.function_call === "object" ? (
+                      <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        <div>
+                          Using{" "}
+                          <span className="font-bold">
+                            {message.function_call.name}
+                          </span>{" "}
+                          ...
+                        </div>
+                        <div>
+                          {message.function_call.arguments}
+                        </div>
                       </div>
-                      <div className="">
-                        {message.function_call.arguments}
-                      </div>
-                    </div>
+                    ) : (
+                      <div className="function-call">{message.function_call}</div>
+                    )
                   ) : (
-                    <div className="function-call">{message.function_call}</div>
-                  )
-                ) : (
-                  roleUIConfig[message.role].dialogComponent(message)
-                )}
+                    roleUIConfig[message.role].dialogComponent(message)
+                  )}
+                </div>
               </div>
             );
-        })) : null}
+          })
+        ) : null}
       </div>
       <form onSubmit={handleSubmit} className={styles.form}>
         <input
@@ -168,6 +171,6 @@ const Page: React.FC = () => {
       </form>
     </main>
   );
-};
+}
 
 export default Page;

app/tools/odds.ts

@@ -35,7 +35,6 @@ function createOddsApi({ apiKey }: { apiKey: string }) {
         }
         const activeSports = await fetch(`https://api.the-odds-api.com/v4/sports/${sportKey}/odds?apiKey=${apiKey}&oddsFormat=${oddsFormat}&dateFormat=${dateFormat}&market=${market}&regions=${regions}`);
         const oddsResponse = await activeSports.json();
-        console.log(oddsResponse);
         return JSON.stringify(oddsResponse);
     } catch (error) {
       throw new Error(`Error in oddsApi: ${error}`);