From c4fc66e520a6afa02091418aee38b3fa160d2c53 Mon Sep 17 00:00:00 2001 From: JK-le-dev Date: Sat, 18 Oct 2025 18:29:53 -0500 Subject: [PATCH 1/8] deleted that stupid default vite svg --- web-app/public/vite.svg | 1 - 1 file changed, 1 deletion(-) delete mode 100644 web-app/public/vite.svg diff --git a/web-app/public/vite.svg b/web-app/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/web-app/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 3bcd4087deb5cbb2993c7f5b22104ddf65177a6d Mon Sep 17 00:00:00 2001 From: yenminh269 Date: Sat, 18 Oct 2025 18:35:52 -0500 Subject: [PATCH 2/8] style send button --- web-app/src/components/ui/Button/ActionButton.jsx | 10 ++++++++-- web-app/src/components/ui/chat/chat-header.jsx | 4 ++-- web-app/src/components/ui/chat/message-input.jsx | 10 +++------- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/web-app/src/components/ui/Button/ActionButton.jsx b/web-app/src/components/ui/Button/ActionButton.jsx index a14b1fe..334f9e8 100644 --- a/web-app/src/components/ui/Button/ActionButton.jsx +++ b/web-app/src/components/ui/Button/ActionButton.jsx @@ -3,7 +3,7 @@ import './ActionButton.css'; export default function ActionButton({ onClick, children, - type = 'add', // 'add' or 'delete' + type = 'add', // 'add' or 'delete' or 'send' ...props }) { // Define color and icon based on type @@ -39,6 +39,12 @@ export default function ActionButton({ ), }, + submit: { + color: '#3949AB', + svg: ( + + ), + }, }; const { color, svg } = config[type] || config.add; @@ -50,7 +56,7 @@ export default function ActionButton({ style={{ '--btn-color': color }} {...props} > - { type === 'add' ? 'New Chat' : 'Delete Chat'} + {children} {svg} ); diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx index 2952cc6..d4a3564 100644 --- a/web-app/src/components/ui/chat/chat-header.jsx +++ b/web-app/src/components/ui/chat/chat-header.jsx @@ -31,8 +31,8 @@ export default function ChatHeader({ title = "AI Assistant" }) { Ask anything — AI is listening

- - + + diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx index 2ca272e..3dd4f84 100644 --- a/web-app/src/components/ui/chat/message-input.jsx +++ b/web-app/src/components/ui/chat/message-input.jsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; - +import ActionButton from "../Button/ActionButton"; export default function MessageInput({ onSend }) { const [text, setText] = useState(""); @@ -19,12 +19,8 @@ export default function MessageInput({ onSend }) { placeholder="Type a message..." className="flex-1 rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" /> - + + ); From 71c87e84688788180c4eae753e7d782109ef0b63 Mon Sep 17 00:00:00 2001 From: JK-le-dev Date: Sat, 18 Oct 2025 19:15:31 -0500 Subject: [PATCH 3/8] style(everything): fuck you --- web-app/index.html | 1 - .../src/components/layouts/chat-layout.jsx | 2 +- .../action-button.css} | 0 .../action-button.jsx} | 14 ++++---- .../src/components/ui/chat/chat-header.jsx | 36 ++----------------- .../src/components/ui/chat/chat-window.jsx | 16 ++------- .../src/components/ui/chat/message-input.jsx | 11 +++--- web-app/src/index.css | 3 +- web-app/src/styles/theme.css | 7 ---- 9 files changed, 19 insertions(+), 71 deletions(-) rename web-app/src/components/ui/{Button/ActionButton.css => button/action-button.css} (100%) rename web-app/src/components/ui/{Button/ActionButton.jsx => button/action-button.jsx} (86%) delete mode 100644 web-app/src/styles/theme.css diff --git a/web-app/index.html b/web-app/index.html index ddadf4a..12f80c9 100644 --- a/web-app/index.html +++ b/web-app/index.html @@ -4,7 +4,6 @@ - codered-astra diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx index fbfb5f0..5d64ed8 100644 --- a/web-app/src/components/layouts/chat-layout.jsx +++ b/web-app/src/components/layouts/chat-layout.jsx @@ -25,7 +25,7 @@ export default function ChatLayout() { } return ( -
+
diff --git a/web-app/src/components/ui/Button/ActionButton.css b/web-app/src/components/ui/button/action-button.css similarity index 100% rename from web-app/src/components/ui/Button/ActionButton.css rename to web-app/src/components/ui/button/action-button.css diff --git a/web-app/src/components/ui/Button/ActionButton.jsx b/web-app/src/components/ui/button/action-button.jsx similarity index 86% rename from web-app/src/components/ui/Button/ActionButton.jsx rename to web-app/src/components/ui/button/action-button.jsx index a14b1fe..52573a5 100644 --- a/web-app/src/components/ui/Button/ActionButton.jsx +++ b/web-app/src/components/ui/button/action-button.jsx @@ -1,15 +1,15 @@ -import './ActionButton.css'; +import "./action-button.css"; export default function ActionButton({ onClick, children, - type = 'add', // 'add' or 'delete' + type = "add", // 'add' or 'delete' ...props }) { // Define color and icon based on type const config = { add: { - color: '#0F2862', + color: "#0F2862", svg: ( - + ), }, @@ -47,10 +47,10 @@ export default function ActionButton({ ); diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx index 9b30b6c..a7d403d 100644 --- a/web-app/src/components/ui/chat/chat-header.jsx +++ b/web-app/src/components/ui/chat/chat-header.jsx @@ -1,39 +1,9 @@ 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 -

-
- - -
+
+

{title}

); } diff --git a/web-app/src/components/ui/chat/chat-window.jsx b/web-app/src/components/ui/chat/chat-window.jsx index 7e8af82..9966973 100644 --- a/web-app/src/components/ui/chat/chat-window.jsx +++ b/web-app/src/components/ui/chat/chat-window.jsx @@ -1,11 +1,10 @@ import React, { useRef, useEffect } from "react"; - function MessageBubble({ message }) { const isUser = message.role === "user"; return (
{ - 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 2ca272e..74efe54 100644 --- a/web-app/src/components/ui/chat/message-input.jsx +++ b/web-app/src/components/ui/chat/message-input.jsx @@ -11,18 +11,15 @@ export default function MessageInput({ onSend }) { } return ( -
-
+ +
setText(e.target.value)} placeholder="Type a message..." - className="flex-1 rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" + className="flex-1 rounded-md shadow-2sx" /> -
diff --git a/web-app/src/index.css b/web-app/src/index.css index 9895c36..950dd5e 100644 --- a/web-app/src/index.css +++ b/web-app/src/index.css @@ -1,5 +1,4 @@ -@import "tailwindcss/preflight"; -@import "tailwindcss/utilities"; +@import "tailwindcss"; :root { --color-primary: 15 40 98; diff --git a/web-app/src/styles/theme.css b/web-app/src/styles/theme.css deleted file mode 100644 index 5287314..0000000 --- a/web-app/src/styles/theme.css +++ /dev/null @@ -1,7 +0,0 @@ -@theme { - --color-primary: rgba(15, 40, 98); - --color-secondary: rgba(79, 95, 118); - --color-accent: rgba(158, 54, 58); - --color-paragraph: rgba(255, 255, 255); - --color-background: rgba(9, 31, 54); -} From 5e0de6e8947cc594c2ef697f6b886a1f1af813e9 Mon Sep 17 00:00:00 2001 From: JK-le-dev Date: Sat, 18 Oct 2025 20:04:02 -0500 Subject: [PATCH 4/8] style(colors): changed colors using slate and grey colors for the most part with violot bc why not --- web-app/src/app/index.jsx | 2 +- .../src/components/layouts/chat-layout.jsx | 2 +- .../components/ui/button/action-button.css | 29 --------------- .../components/ui/button/action-button.jsx | 37 ------------------- .../src/components/ui/chat/chat-header.jsx | 6 ++- .../src/components/ui/chat/chat-window.jsx | 4 +- .../src/components/ui/chat/message-input.jsx | 6 +-- web-app/src/index.css | 15 ++++---- 8 files changed, 18 insertions(+), 83 deletions(-) delete mode 100644 web-app/src/components/ui/button/action-button.css diff --git a/web-app/src/app/index.jsx b/web-app/src/app/index.jsx index 9d0b576..8ce7147 100644 --- a/web-app/src/app/index.jsx +++ b/web-app/src/app/index.jsx @@ -3,7 +3,7 @@ import ChatLayout from "src/components/layouts/chat-layout"; function App() { return ( -
+
); diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx index 5d64ed8..ebb0208 100644 --- a/web-app/src/components/layouts/chat-layout.jsx +++ b/web-app/src/components/layouts/chat-layout.jsx @@ -25,7 +25,7 @@ export default function ChatLayout() { } return ( -
+
diff --git a/web-app/src/components/ui/button/action-button.css b/web-app/src/components/ui/button/action-button.css deleted file mode 100644 index 499ef30..0000000 --- a/web-app/src/components/ui/button/action-button.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/action-button.jsx b/web-app/src/components/ui/button/action-button.jsx index 52573a5..9df9c6f 100644 --- a/web-app/src/components/ui/button/action-button.jsx +++ b/web-app/src/components/ui/button/action-button.jsx @@ -6,43 +6,6 @@ export default function ActionButton({ type = "add", // 'add' or 'delete' ...props }) { - // Define color and icon based on type - const config = { - add: { - color: "#0F2862", - svg: ( - - - - ), - }, - delete: { - color: "#9E363A", - 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/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx index 01e848c..16dbe1c 100644 --- a/web-app/src/components/ui/chat/message-input.jsx +++ b/web-app/src/components/ui/chat/message-input.jsx @@ -1,4 +1,6 @@ import React, { useState } from "react"; +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,18 +13,27 @@ export default function MessageInput({ onSend }) { } return ( - -
- setText(e.target.value)} - placeholder="Type a message..." - className="flex-1 rounded-md shadow-2sx border-none focus:border-none focus:outline-none" - /> - +
+
+ +
- +
+
+ setText(e.target.value)} + placeholder="Type a message..." + className="flex-1 mx-2 rounded-md shadow-2sx border-none focus:border-none focus:outline-none" + /> + +
+
+
); } From 4989d30ec3c97d2869ae0e672d8f39a48beacd52 Mon Sep 17 00:00:00 2001 From: yenminh269 Date: Sat, 18 Oct 2025 20:42:09 -0500 Subject: [PATCH 7/8] edit add, delete button --- web-app/src/components/layouts/chat-layout.jsx | 2 +- web-app/src/components/ui/chat/chat-header.jsx | 11 +++++++++-- web-app/src/components/ui/chat/chat-window.jsx | 1 - web-app/src/index.css | 5 +++-- 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx index fbfb5f0..e6cab2e 100644 --- a/web-app/src/components/layouts/chat-layout.jsx +++ b/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([ { diff --git a/web-app/src/components/ui/chat/chat-header.jsx b/web-app/src/components/ui/chat/chat-header.jsx index 97f561b..6240539 100644 --- a/web-app/src/components/ui/chat/chat-header.jsx +++ b/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

- - +
+ +
+ + 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 7e8af82..39a3a0a 100644 --- a/web-app/src/components/ui/chat/chat-window.jsx +++ b/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 ( diff --git a/web-app/src/index.css b/web-app/src/index.css index 9895c36..104725b 100644 --- a/web-app/src/index.css +++ b/web-app/src/index.css @@ -1,5 +1,6 @@ -@import "tailwindcss/preflight"; -@import "tailwindcss/utilities"; +@tailwind base; +@tailwind components; +@tailwind utilities; :root { --color-primary: 15 40 98; From 0f12533873846cc75d48264cb6ba457f25794944 Mon Sep 17 00:00:00 2001 From: yenminh269 Date: Sat, 18 Oct 2025 21:47:00 -0500 Subject: [PATCH 8/8] "add delete button functionality" --- web-app/src/components/layouts/chat-layout.jsx | 7 ++++++- web-app/src/components/ui/chat/message-input.jsx | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/web-app/src/components/layouts/chat-layout.jsx b/web-app/src/components/layouts/chat-layout.jsx index 72b77a9..2e5b961 100644 --- a/web-app/src/components/layouts/chat-layout.jsx +++ b/web-app/src/components/layouts/chat-layout.jsx @@ -24,11 +24,16 @@ export default function ChatLayout() { }, 600); } + function handleDeleteAll() { + if (!window.confirm("Delete all messages?")) return; + setMessages([]); + } + return (
- +
); } diff --git a/web-app/src/components/ui/chat/message-input.jsx b/web-app/src/components/ui/chat/message-input.jsx index 16dbe1c..482985a 100644 --- a/web-app/src/components/ui/chat/message-input.jsx +++ b/web-app/src/components/ui/chat/message-input.jsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import DeleteButton from "src/components/ui/button/delete-button"; import DownButton from "../button/down-button"; -export default function MessageInput({ onSend }) { +export default function MessageInput({ onSend, onDeleteAll }) { const [text, setText] = useState(""); function handleSubmit(e) { @@ -15,7 +15,7 @@ export default function MessageInput({ onSend }) { return (
- +