Fix a few styles

Author: BrunoQuaresma

chat/src/components/ChatInterface.tsx

@@ -218,7 +218,7 @@ export default function ChatInterface() {
 
   return (
     <div className="flex flex-col h-svh">
-      <header className="p-3 dark:text-white flex items-center justify-between border-b">
+      <header className="p-4 flex items-center justify-between border-b">
         <span className="font-bold">AgentAPI Chat</span>
 
         <div className="flex items-center gap-4">

chat/src/components/MessageList.tsx

@@ -18,7 +18,7 @@ export default function MessageList({
   // If no messages, show a placeholder
   if (messages.length === 0) {
     return (
-      <div className="flex-1 p-6 flex items-center justify-center text-gray-500 bg-white">
+      <div className="flex-1 p-6 flex items-center justify-center text-muted-foreground">
         <p>No messages yet. Start the conversation!</p>
       </div>
     );
@@ -79,7 +79,7 @@ export default function MessageList({
             <div
               className={`inline-block rounded-lg ${
                 message.role === "user"
-                  ? "bg-accent-foreground rounded-lg max-w-[90%] p-4 text-accent"
+                  ? "bg-accent-foreground rounded-lg max-w-[90%] px-4 py-3 text-accent"
                   : "max-w-[90%]"
               }`}
             >

chat/src/components/ui/tabs.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Tabs({
   className,
@@ -15,7 +15,7 @@ function Tabs({
       className={cn("flex flex-col gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TabsList({
@@ -31,7 +31,7 @@ function TabsList({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsTrigger({
@@ -47,7 +47,7 @@ function TabsTrigger({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsContent({
@@ -60,7 +60,7 @@ function TabsContent({
       className={cn("flex-1 outline-none", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };