Samuele E. Locatelli
63 lines
1.5 KiB
React
63 lines
1.5 KiB
React
// ChatWindow.jsx
|
|
import React, { useRef, useEffect } from "react";
|
|
import UserMessage from "./UserMessage";
|
|
import AssistantMessage from "./AssistantMessage";
|
|
|
|
export default function ChatWindow({ messages, loading, theme }) {
|
|
const endRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
endRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
}, [messages]);
|
|
|
|
return (
|
|
<main className={`flex-1 overflow-y-auto p-3 ${theme.bodyBg}`}>
|
|
{messages.map((msg, idx) =>
|
|
msg.role === "user" ? (
|
|
<UserMessage
|
|
key={idx}
|
|
content={msg.content}
|
|
theme={theme}
|
|
timestamp={msg.timestamp}
|
|
startedAt={msg.startedAt}
|
|
endedAt={msg.endedAt}
|
|
/>
|
|
) : (
|
|
<AssistantMessage
|
|
key={idx}
|
|
content={msg.content}
|
|
theme={theme}
|
|
timestamp={msg.timestamp}
|
|
startedAt={msg.startedAt}
|
|
endedAt={msg.endedAt}
|
|
isFinal={msg.isFinal}
|
|
/>
|
|
)
|
|
)}
|
|
{loading && (
|
|
<div
|
|
className="thinking-block text-muted small fst-italic"
|
|
style={{
|
|
maxHeight: "150px",
|
|
overflowY: "auto",
|
|
padding: "0.5rem",
|
|
border: "1px solid #ddd",
|
|
borderRadius: "4px"
|
|
}}
|
|
>
|
|
The model is processing...
|
|
</div>
|
|
)}
|
|
|
|
{loading && (
|
|
<div className="text-muted small fst-italic">
|
|
The model is processing...
|
|
</div>
|
|
)}
|
|
<div ref={endRef} />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
|