Samuele E. Locatelli
125 lines
3.0 KiB
React
125 lines
3.0 KiB
React
// src/AssistantMessage.jsx
|
|
import React, { useState } from "react";
|
|
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import remarkMath from "remark-math";
|
|
import rehypeKatex from "rehype-katex";
|
|
|
|
export default function AssistantMessage({ content, theme, timestamp }) {
|
|
return (
|
|
<div className="mb-2 text-start">
|
|
<div
|
|
className={`d-inline-block p-2 rounded ${theme.assistantBg}`}
|
|
style={{ maxWidth: "95%" }}
|
|
>
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm, remarkMath]}
|
|
rehypePlugins={[rehypeKatex]}
|
|
components={{
|
|
table: (props) => (
|
|
<table className="table table-sm table-bordered" {...props} />
|
|
),
|
|
th: (props) => <th className="bg-light" {...props} />,
|
|
code: CodeWithCopy
|
|
}}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
{timestamp && (
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
color: "#666",
|
|
marginTop: "0.2rem",
|
|
marginLeft: "0.25rem"
|
|
}}
|
|
>
|
|
{formatDateTime(timestamp)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CodeWithCopy({ inline, className = "", children, ...props }) {
|
|
const [copied, setCopied] = useState(false);
|
|
const codeText = String(children).replace(/\n$/, "");
|
|
|
|
// Only show copy button for fenced code with language
|
|
const isFencedBlock = !inline && /^language-/.test(className);
|
|
|
|
if (!isFencedBlock) {
|
|
return (
|
|
<code className={className} {...props}>
|
|
{children}
|
|
</code>
|
|
);
|
|
}
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(codeText);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1500);
|
|
} catch (err) {
|
|
console.error("Copy failed", err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ position: "relative" }}>
|
|
<pre className={className} {...props} style={{ paddingRight: "2rem" }}>
|
|
<code>{codeText}</code>
|
|
</pre>
|
|
<button
|
|
onClick={handleCopy}
|
|
style={{
|
|
position: "absolute",
|
|
top: "0.25rem",
|
|
right: "0.25rem",
|
|
border: "none",
|
|
background: "transparent",
|
|
cursor: "pointer",
|
|
fontSize: "0.85rem"
|
|
}}
|
|
title="Copy to clipboard"
|
|
>
|
|
📋
|
|
</button>
|
|
{copied && (
|
|
<span
|
|
style={{
|
|
position: "absolute",
|
|
top: "0.25rem",
|
|
right: "2rem",
|
|
fontSize: "0.8rem",
|
|
color: "green"
|
|
}}
|
|
>
|
|
Copied!
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Utility to format timestamp nicely
|
|
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;
|
|
}
|
|
}
|
|
|
|
|