devaine
d6378b8eb1
Some checks failed
Build and Deploy / Build Images and Deploy to Server (push) Has been cancelled
44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
import React, { useRef, useEffect } from "react";
|
|
import ReactMarkdown from "react-markdown";
|
|
import { MARKDOWN_COMPONENTS } from "src/config/markdown";
|
|
|
|
function MessageBubble({ message }) {
|
|
const isUser = message.role === "user";
|
|
const isError = !!message.error;
|
|
return (
|
|
<div className={`flex ${isUser ? "justify-end" : "justify-start"} py-2`}>
|
|
<div
|
|
className={`p-3 rounded-xl ${isUser ? "bg-indigo-600 text-white rounded-tr-sm" : "bg-gray-700 text-slate-100 rounded-tl-sm"} ${isError ? "border border-red-500/60 bg-red-900/50" : ""}`}
|
|
>
|
|
{isUser ? (
|
|
<div className="text-sm">{message.content}</div>
|
|
) : (
|
|
<ReactMarkdown components={MARKDOWN_COMPONENTS}>
|
|
{message.content}
|
|
</ReactMarkdown>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function ChatWindow({ messages }) {
|
|
const bottomRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (bottomRef.current) {
|
|
bottomRef.current.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}, [messages]);
|
|
|
|
return (
|
|
<div className="flex-1 overflow-auto px-2 pt-4 pb-32">
|
|
<div className="">
|
|
{messages.map((m, i) => (
|
|
<MessageBubble key={m.id ?? i} message={m} />
|
|
))}
|
|
<div ref={bottomRef} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|