feat(chat): created basic chat layout
This commit is contained in:
parent
7d26bd750c
commit
8ba67f1080
10 changed files with 154 additions and 26 deletions
28
src/components/ui/ChatWindow.jsx
Normal file
28
src/components/ui/ChatWindow.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue