Samuele E. Locatelli
60 lines
1.3 KiB
React
60 lines
1.3 KiB
React
// src/UserMessage.jsx
|
|
import React from "react";
|
|
|
|
export default function UserMessage({ content, theme, timestamp }) {
|
|
return (
|
|
<div className="mb-2 d-flex flex-column align-items-end">
|
|
<div
|
|
className={`p-2 rounded ${theme.userBg}`}
|
|
style={{
|
|
maxWidth: "95%",
|
|
textAlign: "left", // ensures text inside is left-aligned
|
|
}}
|
|
>
|
|
<pre
|
|
className="m-0 p-0"
|
|
style={{
|
|
whiteSpace: "pre-wrap",
|
|
fontFamily: "inherit",
|
|
backgroundColor: "transparent",
|
|
color: "inherit",
|
|
}}
|
|
>
|
|
{content}
|
|
</pre>
|
|
</div>
|
|
{timestamp && (
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#666",
|
|
marginTop: "0.2rem",
|
|
marginRight: "0.25rem"
|
|
}}
|
|
>
|
|
{formatDateTime(timestamp)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Same helper used in AssistantMessage
|
|
function formatDateTime(dateTime) {
|
|
try {
|
|
const date = new Date(dateTime);
|
|
return date.toLocaleString(undefined, {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit"
|
|
});
|
|
} catch {
|
|
return dateTime;
|
|
}
|
|
}
|
|
|
|
|