import { useMemo } from "react";

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

import { useOptions } from "../../composables";
import { aiLinkReferences } from "../../utils/aiLinks";
import type { ChatMessagePart } from "../../types";

import "./TextPart.scss";

const markdown = new MarkdownIt();

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

markdown.use(aiLinkReferences);

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

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

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

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