Spaces:
Running
Running
File size: 2,885 Bytes
372531f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import Image from "next/image";
import { Toaster, toast } from "react-hot-toast";
import { useEffect, useState } from 'react';
import { remark } from 'remark';
import html from 'remark-html';
import { Compatible } from "vfile";
import '@/styles/markdown.css';
export default function Answer({ answer }: { answer: string }) {
async function markdownToHtml(markdown: Compatible | undefined) {
try {
const result = await remark().use(html).process(markdown);
return result.toString();
} catch (error) {
console.error('Error converting Markdown to HTML:', error);
return ''; // Handle error gracefully, return empty string or default content
}
}
const [htmlContent, setHtmlContent] = useState('');
useEffect(() => {
markdownToHtml(answer).then((html) => setHtmlContent(html));
}, [answer]);
return (
<div className="container flex h-auto w-full shrink-0 gap-4 bg-gray-900 shadow-md rounded-lg border border-solid border-[#C2C2C2] p-5">
<div className="w-full">
<div className="flex items-center justify-between pb-3">
{answer && (
<div className="flex items-center gap-3">
<button
onClick={() => {
navigator.clipboard.writeText(answer.trim());
toast("Answer copied to clipboard", {
icon: "✂️",
});
}}
>
<Image
src="/img/copy-white.svg"
alt="footer"
width={20}
height={20}
className="cursor-pointer text-white"
/>
</button>
</div>
)}
</div>
<div className="flex flex-wrap content-center items-center gap-[15px] pl-10 pr-10">
<div className="w-full whitespace-pre-wrap text-base font-light leading-[152.5%] text-white log-message">
{answer ? (
<div className="markdown-content" dangerouslySetInnerHTML={{ __html: htmlContent }} />
) : (
<div className="flex w-full flex-col gap-2">
<div className="h-6 w-full animate-pulse rounded-md bg-gray-300" />
<div className="h-6 w-full animate-pulse rounded-md bg-gray-300" />
<div className="h-6 w-full animate-pulse rounded-md bg-gray-300" />
<div className="h-6 w-full animate-pulse rounded-md bg-gray-300" />
</div>
)}
</div>
</div>
</div>
<Toaster
position="top-center"
reverseOrder={false}
toastOptions={{ duration: 2000 }}
/>
</div>
);
}
|