import { cn } from "@/shared/ui/cn";
import { MessageResponse } from "@/shared/ai-elements/message";
import { defaultRehypePlugins } from "streamdown";
import { artifactLinkComponents, artifactLinksPlugin } from "./artifact-markdown";
import { ReadableMarkdownDiagram, ReadableMarkdownTable } from "@/shared/ai-elements/markdown-reading";

const responseRehypePlugins = [...Object.values(defaultRehypePlugins), artifactLinksPlugin];
const responseComponents = { ...artifactLinkComponents, table: ReadableMarkdownTable };
const responsePlugins = { renderers: [{ language: "mermaid", component: ReadableMarkdownDiagram }] };

type StreamingTokenResponseProps = {
  content: string;
  streaming: boolean;
  streamDone?: boolean;
  className?: string;
  messageId?: string;
};

export function StreamingTokenResponse({
  content,
  streaming,
  streamDone = !streaming,
  className,
}: StreamingTokenResponseProps) {
  if (!content) {
    return null;
  }

  const isAnimating = streaming && !streamDone;

  return (
    <MessageResponse
      className={cn("agent-streaming-response", className)}
      isAnimating={isAnimating}
      mode="streaming"
      parseIncompleteMarkdown={true}
      rehypePlugins={responseRehypePlugins}
      components={responseComponents}
      plugins={responsePlugins}
    >
      {content}
    </MessageResponse>
  );
}