"combine button components"

src/app/index.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ChatLayout from "src/components/ui/ChatLayout";
+import ChatLayout from "../components/ui/ChatLayout";
 
 function App() {
   return (

src/components/ui/Button/ActionButton.css

@@ -0,0 +1,29 @@
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 2px solid var(--btn-color);
+  border-radius: 6px;
+  background-color: white;
+  color: var(--btn-color);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.action-btn:hover,
+.action-btn:focus {
+  background-color: var(--btn-color);
+  color: white;
+  border-color: var(--btn-color);
+}
+
+.action-btn svg {
+  fill: currentColor;
+  transition: fill 0.25s ease;
+}
+
+.action-btn:hover {
+  transform: translateY(-1px);
+}

src/components/ui/Button/ActionButton.jsx

@@ -0,0 +1,57 @@
+import './ActionButton.css';
+
+export default function ActionButton({
+  onClick,
+  children,
+  type = 'add', // 'add' or 'delete'
+  ...props
+}) {
+  // Define color and icon based on type
+  const config = {
+    add: {
+      color: '#0F2862',
+      svg: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
+          />
+        </svg>
+      ),
+    },
+    delete: {
+      color: '#9E363A',
+      svg: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          viewBox="0 0 16 16"
+        >
+          <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
+        </svg>
+      ),
+    },
+  };
+
+  const { color, svg } = config[type] || config.add;
+
+  return (
+    <button
+      onClick={onClick}
+      className="action-btn"
+      style={{ '--btn-color': color }}
+      {...props}
+    >
+      { type === 'add' ? 'New Chat' : 'Delete Chat'}
+      {svg}
+    </button>
+  );
+}

src/components/ui/Button/DeleteButton.jsx

@@ -1,19 +0,0 @@
-import Button from 'react-bootstrap/Button';
-
-export default function DeleteButton({ onClick, variant = "outline-danger", children, ...props }) {
-  return (
-    <Button onClick={onClick} variant={variant} {...props}>
-      {children || "Delete"}{" "}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        className="bi bi-trash3"
-        viewBox="0 0 16 16"
-      >
-        <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
-      </svg>
-    </Button>
-  );
-}

src/components/ui/Button/NewChatButton.css

@@ -1,13 +0,0 @@
-.custom-btn {
-  background-color: white !important;
-  border: 2px solid #0F2862 !important;
-  color: #0F2862 !important;
-  transition: all 0.25s ease;
-}
-
-.custom-btn:hover,
-.custom-btn:focus {
-  background-color: #0F2862 !important;
-  color: white !important;
-  border-color: #0F2862 !important;
-}

src/components/ui/Button/NewChatButton.jsx

@@ -1,19 +0,0 @@
-import Button from 'react-bootstrap/Button';
-import './NewChatButton.css'
-export default function NewChatButton({ onClick, variant = "outline-light", children, ...props }) {
-  return (
-    <Button onClick={onClick} className="custom-btn" {...props}>
-      {children || "New Chat"}{" "}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        className="bi bi-plus-lg"
-        viewBox="0 0 16 16"
-      >
-        <path fillRule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
-      </svg>
-    </Button>
-  );
-}

src/components/ui/ChatHeader.jsx

@@ -1,6 +1,24 @@
 import React from "react";
+import ActionButton from "./Button/ActionButton.jsx";
 
 export default function ChatHeader({ title = "AI Assistant" }) {
+  // Delete chat log (frontend + backend)
+  const handleDeleteChat = async () => {
+    if (!window.confirm("Delete all messages?")) return;
+    await fetch(`/api/chat/${conversationId}`, { method: "DELETE" });
+    setMessages([]);
+  };
+
+  // Restart chat (new conversation)
+  const handleNewChat = async () => {
+    const res = await fetch("/api/chat/new", { method: "POST" });
+    const data = await res.json();
+    if (data.success) {
+      setConversationId(data.conversationId);
+      setMessages([]);
+    }
+  };
+  
   return (
     <header className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-slate-800 to-slate-900 text-white">
       <div className="flex items-center gap-3">
@@ -13,7 +31,10 @@ export default function ChatHeader({ title = "AI Assistant" }) {
             Ask anything — AI is listening
           </p>
         </div>
+        <ActionButton type="add" onClick={handleNewChat}></ActionButton>
+        <ActionButton type="delete" onClick={handleDeleteChat}></ActionButton>
       </div>
+
     </header>
   );
 }

src/components/ui/ChatWindow.jsx

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