Spaces:
Running
Running
File size: 2,744 Bytes
e470019 |
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 75 76 |
import { marked } from "marked";
import DOMPurify from "dompurify";
import { useEffect } from "react";
import BotIcon from "./icons/BotIcon";
import UserIcon from "./icons/UserIcon";
import "../styles/Chat.css";
function render(text) {
return DOMPurify.sanitize(marked.parse(text));
}
/**
* Chat component renders a chat interface with messages.
*/
export default function Chat({ messages }) {
const empty = messages.length === 0;
useEffect(() => {
window.MathJax.typeset();
}, [messages]);
return (
<div
className={`flex-1 p-6 max-w-[960px] w-full ${
empty ? "flex flex-col items-center justify-end" : "space-y-4"
}`}
>
{empty ? (
<div className="text-xl">
<span className="text-gray-500 dark:text-gray-300">
Hi there! How can I assist you with math today? 😊
</span>
</div>
) : (
messages.map((msg, i) => (
<div key={`message-${i}`} className="flex items-start space-x-4">
{msg.role === "assistant" ? (
<>
<BotIcon className="h-6 w-6 min-h-6 min-w-6 my-3 text-gray-500 dark:text-gray-300" />
<div className="bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
<p className="min-h-6 text-gray-800 dark:text-gray-200 overflow-wrap-anywhere">
{msg.content.length > 0 ? (
<span
className="markdown"
dangerouslySetInnerHTML={{
__html: render(msg.content),
}}
/>
) : (
<span className="h-6 flex items-center gap-1">
<span className="w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse"></span>
<span className="w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse animation-delay-200"></span>
<span className="w-2.5 h-2.5 bg-gray-600 dark:bg-gray-300 rounded-full animate-pulse animation-delay-400"></span>
</span>
)}
</p>
</div>
</>
) : (
<>
<UserIcon className="h-6 w-6 min-h-6 min-w-6 my-3 text-gray-500 dark:text-gray-300" />
<div className="bg-blue-500 text-white rounded-lg p-4">
<p className="min-h-6 overflow-wrap-anywhere">
{msg.content}
</p>
</div>
</>
)}
</div>
))
)}
</div>
);
}
|