devaine/CodeRED-Astra
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(everything): fuck you

Browse source
This commit is contained in:
JK-le-dev 2025-10-18 19:15:31 -05:00
commit 71c87e8468
9 changed files with 19 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web-app/index.html
View file

@ -4,7 +4,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/src/index.css" rel="stylesheet" />
<title>codered-astra</title> <title>codered-astra</title>
</head> </head>
<body> <body>

2
web-app/src/components/layouts/chat-layout.jsx
View file

@ -25,7 +25,7 @@ export default function ChatLayout() {
} }
return ( return (
<div className="flex flex-col h-[80vh] w-full max-w-3xl mx-auto rounded-lg overflow-hidden shadow-lg border border-slate-700"> <div className="flex flex-col h-[80vh] max-w-3xl mx-auto rounded-lg overflow-hidden shadow-lg">
<ChatHeader /> <ChatHeader />
<ChatWindow messages={messages} /> <ChatWindow messages={messages} />
<MessageInput onSend={handleSend} /> <MessageInput onSend={handleSend} />

0
web-app/src/components/ui/Button/ActionButton.css → web-app/src/components/ui/button/action-button.css
View file

14
web-app/src/components/ui/Button/ActionButton.jsx → web-app/src/components/ui/button/action-button.jsx
View file

@ -1,15 +1,15 @@
import './ActionButton.css'; import "./action-button.css";
export default function ActionButton({ export default function ActionButton({
onClick, onClick,
children, children,
type = 'add', // 'add' or 'delete' type = "add", // 'add' or 'delete'
...props ...props
}) { }) {
// Define color and icon based on type // Define color and icon based on type
const config = { const config = {
add: { add: {
color: '#0F2862', color: "#0F2862",
svg: ( svg: (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -26,7 +26,7 @@ export default function ActionButton({
), ),
}, },
delete: { delete: {
color: '#9E363A', color: "#9E363A",
svg: ( svg: (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -35,7 +35,7 @@ export default function ActionButton({
fill="currentColor" fill="currentColor"
viewBox="0 0 16 16" 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"/> <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> </svg>
), ),
}, },
@ -47,10 +47,10 @@ export default function ActionButton({
<button <button
onClick={onClick} onClick={onClick}
className="action-btn" className="action-btn"
style={{ '--btn-color': color }} style={{ "--btn-color": color }}
{...props} {...props}
> >
{ type === 'add' ? 'New Chat' : 'Delete Chat'} {type === "add" ? "New Chat" : "Delete Chat"}
{svg} {svg}
</button> </button>
); );

36
web-app/src/components/ui/chat/chat-header.jsx
View file

@ -1,39 +1,9 @@
import React from "react"; 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 ( return (
<header className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-slate-800 to-slate-900 text-white"> <header className="flex justify-center bg-blue-600">
<div className="flex items-center gap-3"> <h1 className="text-lg font-semibold">{title}</h1>
<div className="w-10 h-10 bg-indigo-500 rounded flex items-center justify-center font-bold">
AI
</div>
<div>
<h1 className="text-lg font-semibold">{title}</h1>
<p className="text-sm text-slate-300">
Ask anything — AI is listening
</p>
</div>
<ActionButton type="add" onClick={handleNewChat}></ActionButton>
<ActionButton type="delete" onClick={handleDeleteChat}></ActionButton>
</div>
</header> </header>
); );
} }

16
web-app/src/components/ui/chat/chat-window.jsx
View file

@ -1,11 +1,10 @@
import React, { useRef, useEffect } from "react"; import React, { useRef, useEffect } from "react";
function MessageBubble({ message }) { function MessageBubble({ message }) {
const isUser = message.role === "user"; const isUser = message.role === "user";
return ( return (
<div <div
className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-2`} className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-8`}
> >
<div <div
className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-slate-700 text-slate-100"}`} className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-slate-700 text-slate-100"}`}
@ -17,22 +16,13 @@ function MessageBubble({ message }) {
} }
export default function ChatWindow({ messages }) { 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 ( return (
<main className="flex-1 overflow-auto p-2 bg-gradient-to-b from-slate-900 to-slate-800"> <div className="flex-1 overflow-auto p-2">
<div className="space-y-2"> <div className="space-y-2">
{messages.map((m, i) => ( {messages.map((m, i) => (
<MessageBubble key={i} message={m} /> <MessageBubble key={i} message={m} />
))} ))}
</div> </div>
</main> </div>
); );
} }

11
web-app/src/components/ui/chat/message-input.jsx
View file

@ -11,18 +11,15 @@ export default function MessageInput({ onSend }) {
} }
return ( return (
<form onSubmit={handleSubmit} className="p-3 bg-slate-900"> <form onSubmit={handleSubmit} className="bg-black">
<div className="flex gap-2"> <div className="flex shadow-lg">
<input <input
value={text} value={text}
onChange={(e) => setText(e.target.value)} onChange={(e) => setText(e.target.value)}
placeholder="Type a message..." 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"
/> />
<button <button type="submit" className="">
type="submit"
className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md"
>
Send Send
</button> </button>
</div> </div>

3
web-app/src/index.css
View file

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

7
web-app/src/styles/theme.css
View file

@ -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);
}