feat(chat): created basic chat layout

This commit is contained in:
JK-le-dev 2025-10-18 15:22:13 -05:00
commit 8ba67f1080
10 changed files with 154 additions and 26 deletions

View file

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