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" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/src/index.css" rel="stylesheet" />
<title>codered-astra</title>
</head>
<body>

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

@ -25,7 +25,7 @@ export default function ChatLayout() {
}
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 />
<ChatWindow messages={messages} />
<MessageInput onSend={handleSend} />

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

12
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({
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: (
<svg
xmlns="http://www.w3.org/2000/svg"
@ -26,7 +26,7 @@ export default function ActionButton({
),
},
delete: {
color: '#9E363A',
color: "#9E363A",
svg: (
<svg
xmlns="http://www.w3.org/2000/svg"
@ -47,10 +47,10 @@ export default function ActionButton({
<button
onClick={onClick}
className="action-btn"
style={{ '--btn-color': color }}
style={{ "--btn-color": color }}
{...props}
>
{ type === 'add' ? 'New Chat' : 'Delete Chat'}
{type === "add" ? "New Chat" : "Delete Chat"}
{svg}
</button>
);

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

@ -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 (
<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">
<div className="w-10 h-10 bg-indigo-500 rounded flex items-center justify-center font-bold">
AI
</div>
<div>
<header className="flex justify-center bg-blue-600">
<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>
);
}

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

@ -1,11 +1,10 @@
import React, { useRef, useEffect } from "react";
function MessageBubble({ message }) {
const isUser = message.role === "user";
return (
<div
className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-2`}
className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-8`}
>
<div
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 }) {
const chatRef = useRef(null);
// Auto-scroll to bottom when new messages appear
useEffect(() => {
chatRef.current?.scrollTo({
top: chatRef.current.scrollHeight,
behavior: "smooth",
});
}, [messages]);
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">
{messages.map((m, i) => (
<MessageBubble key={i} message={m} />
))}
</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 (
<form onSubmit={handleSubmit} className="p-3 bg-slate-900">
<div className="flex gap-2">
<form onSubmit={handleSubmit} className="bg-black">
<div className="flex shadow-lg">
<input
value={text}
onChange={(e) => 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"
/>
<button
type="submit"
className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md"
>
<button type="submit" className="">
Send
</button>
</div>

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

@ -1,5 +1,4 @@
@import "tailwindcss/preflight";
@import "tailwindcss/utilities";
@import "tailwindcss";
:root {
--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);
}