style(everything): fuck you
This commit is contained in:
parent
c4fc66e520
commit
71c87e8468
9 changed files with 19 additions and 71 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -35,7 +35,7 @@ export default function ActionButton({
|
|||
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"/>
|
||||
<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>
|
||||
),
|
||||
},
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import "tailwindcss/preflight";
|
||||
@import "tailwindcss/utilities";
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--color-primary: 15 40 98;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue