edit add, delete button

web-app/src/components/layouts/chat-layout.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import ChatHeader from "src/components/ui/chat/chat-header";
 import ChatWindow from "src/components/ui/chat/chat-window";
 import MessageInput from "src/components/ui/chat/message-input";
-
+import '../../index.css'
 export default function ChatLayout() {
   const [messages, setMessages] = useState([
     {

web-app/src/components/ui/chat/chat-header.jsx

@@ -31,8 +31,15 @@ export default function ChatHeader({ title = "AI Assistant" }) {
             Ask anything — AI is listening
           </p>
         </div>
-        <ActionButton children='New Chat' type="add" onClick={handleNewChat}></ActionButton>
+      </div>
-        <ActionButton children='Delete Chat'type="delete" onClick={handleDeleteChat}></ActionButton>
+      
+      <div className="flex items-center gap-2">
+        <ActionButton type="add" onClick={handleNewChat}>
+          New Chat
+        </ActionButton>
+        <ActionButton type="delete" onClick={handleDeleteChat}>
+          Delete Chat
+        </ActionButton>
       </div>
     </header>
   );

web-app/src/components/ui/chat/chat-window.jsx

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect } from "react";
 
-
 function MessageBubble({ message }) {
   const isUser = message.role === "user";
   return (

web-app/src/index.css

@@ -1,5 +1,6 @@
-@import "tailwindcss/preflight";
+@tailwind base;
-@import "tailwindcss/utilities";
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --color-primary: 15 40 98;