import { useMemo } from "react";

import MarkdownIt from "markdown-it";
import markdownLink from "markdown-it-link-attributes";

import type { ChatMessagePart } from "../../types";

import "./TextPart.scss";

const markdown = new MarkdownIt();

markdown.use(markdownLink, {
	attrs: {
		target: "_blank",
		rel: "noopener",
	},
});

interface TextPartProps {
	part: Extract<ChatMessagePart, { type: "text" }>;
}

export default function TextPart({ part }: TextPartProps) {
	const html = useMemo(() => markdown.render(part.text || ""), [part.text]);

	const isStreaming = part.status === "streaming";

	return (
		<div
			className={`chat-message-part-text ${isStreaming ? "is-streaming" : ""}`.trim()}
			dangerouslySetInnerHTML={{ __html: html }}
		/>
	);
}