yaak-mountain-loop/src-web/components/responseViewers/SvgViewer.tsx

import { useEffect, useState } from "react";

interface Props {
  text: string;
  className?: string;
}

export function SvgViewer({ text, className }: Props) {
  const [src, setSrc] = useState<string | null>(null);

  useEffect(() => {
    if (!text) {
      return setSrc(null);
    }

    const blob = new Blob([text], { type: "image/svg+xml;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    setSrc(url);

    return () => URL.revokeObjectURL(url);
  }, [text]);

  if (src == null) {
    return null;
  }

  return (
    <img src={src} alt="Response preview" className={className ?? "max-w-full max-h-full pb-2"} />
  );
}