diff --git a/web-app/src/components/layouts/dashboard-layout.jsx b/web-app/src/components/layouts/dashboard-layout.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/web-app/src/components/ui/Button/ActionButton.css b/web-app/src/components/ui/Button/ActionButton.css
deleted file mode 100644
index 499ef30..0000000
--- a/web-app/src/components/ui/Button/ActionButton.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.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);
-}
diff --git a/web-app/src/components/ui/Button/ActionButton.jsx b/web-app/src/components/ui/Button/ActionButton.jsx
deleted file mode 100644
index 334f9e8..0000000
--- a/web-app/src/components/ui/Button/ActionButton.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import './ActionButton.css';
-
-export default function ActionButton({
- onClick,
- children,
- type = 'add', // 'add' or 'delete' or 'send'
- ...props
-}) {
- // Define color and icon based on type
- const config = {
- add: {
- color: '#0F2862',
- svg: (
-
- ),
- },
- delete: {
- color: '#9E363A',
- svg: (
-
- ),
- },
- submit: {
- color: '#3949AB',
- svg: (
-
- ),
- },
- };
-
- const { color, svg } = config[type] || config.add;
-
- return (
-
- );
-}
diff --git a/web-app/src/components/ui/button/delete-button.jsx b/web-app/src/components/ui/button/delete-button.jsx
new file mode 100644
index 0000000..53a5367
--- /dev/null
+++ b/web-app/src/components/ui/button/delete-button.jsx
@@ -0,0 +1,9 @@
+import { Flame } from "lucide-react";
+
+export default function FlameButton({ onClick }) {
+ return (
+
+ );
+}
diff --git a/web-app/src/components/ui/button/down-button.jsx b/web-app/src/components/ui/button/down-button.jsx
new file mode 100644
index 0000000..e402e8f
--- /dev/null
+++ b/web-app/src/components/ui/button/down-button.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { ArrowDown } from "lucide-react";
+
+export default function DownButton({ onClick }) {
+ return (
+
+ );
+}
diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx
index 6240539..9a329b4 100644
--- a/web-app/src/components/ui/chat/chat-header.jsx
+++ b/web-app/src/components/ui/chat/chat-header.jsx
@@ -1,46 +1,11 @@
import React from "react";
-import ActionButton from "src/components/ui/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([]);
- }
- };
+export default function ChatHeader({ title = "Title of Chat" }) {
return (
-
-
-
- AI
-
-
-
{title}
-
- Ask anything — AI is listening
-
-
-
-
-
-
- New Chat
-
-
- Delete Chat
-
-
+
);
}
diff --git a/web-app/src/components/ui/chat/chat-window.jsx b/web-app/src/components/ui/chat/chat-window.jsx
index 39a3a0a..49c689e 100644
--- a/web-app/src/components/ui/chat/chat-window.jsx
+++ b/web-app/src/components/ui/chat/chat-window.jsx
@@ -4,10 +4,10 @@ function MessageBubble({ message }) {
const isUser = message.role === "user";
return (
@@ -16,22 +16,13 @@ function MessageBubble({ message }) {
}
export default function ChatWindow({ messages }) {
- const chatRef = useRef(null);
- // Auto-scroll to bottom when new messages appear
- useEffect(() => {
- chatRef.current?.scrollTo({
- top: chatRef.current.scrollHeight,
- behavior: "smooth",
- });
- }, [messages]);
-
return (
-
-
+
+
{messages.map((m, i) => (
))}
-
+
);
}
diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx
index 3dd4f84..16dbe1c 100644
--- a/web-app/src/components/ui/chat/message-input.jsx
+++ b/web-app/src/components/ui/chat/message-input.jsx
@@ -1,5 +1,7 @@
import React, { useState } from "react";
-import ActionButton from "../Button/ActionButton";
+import DeleteButton from "src/components/ui/button/delete-button";
+import DownButton from "../button/down-button";
+
export default function MessageInput({ onSend }) {
const [text, setText] = useState("");
@@ -11,17 +13,27 @@ export default function MessageInput({ onSend }) {
}
return (
-