@frontmcp/ui 0.12.2 → 1.0.0-beta.2

package/esm/renderer/image/index.mjs

@@ -0,0 +1,125 @@
+// libs/ui/src/renderer/image/index.ts
+import React, { useState, useCallback, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+import Alert from "@mui/material/Alert";
+import Typography from "@mui/material/Typography";
+import { styled } from "@mui/material/styles";
+var IMAGE_DATA_URI = /^data:image\/(?:png|jpeg|jpg|gif|webp|svg\+xml|avif)[;,]/;
+var IMAGE_URL = /^https?:\/\/[^?#\s]+\.(?:png|jpe?g|gif|webp|svg|avif|ico)(?:\?[^#\s]*)?$/i;
+var IMAGE_SERVICE_URL = /^https?:\/\/(?:picsum\.photos|images\.unsplash\.com|i\.imgur\.com|placekitten\.com|via\.placeholder\.com)\//i;
+function isImage(content) {
+  const trimmed = content.trim();
+  return IMAGE_DATA_URI.test(trimmed) || IMAGE_URL.test(trimmed) || IMAGE_SERVICE_URL.test(trimmed);
+}
+var ImageRoot = styled(Box, {
+  name: "FrontMcpImage",
+  slot: "Root"
+})({
+  display: "inline-block",
+  position: "relative",
+  maxWidth: "100%"
+});
+var StyledImage = styled("img", {
+  name: "FrontMcpImage",
+  slot: "Image"
+})({
+  maxWidth: "100%",
+  height: "auto",
+  display: "block",
+  cursor: "pointer",
+  borderRadius: "inherit"
+});
+var LightboxBackdrop = styled(Box, {
+  name: "FrontMcpImage",
+  slot: "Lightbox"
+})({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 16
+});
+var LightboxImage = styled("img")({
+  maxWidth: "90vw",
+  maxHeight: "90vh",
+  objectFit: "contain",
+  borderRadius: 8
+});
+function LightboxOverlay({ src, alt, onClose }) {
+  return React.createElement(
+    LightboxBackdrop,
+    {
+      onClick: onClose,
+      sx: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1300,
+        bgcolor: "rgba(0,0,0,0.8)"
+      }
+    },
+    React.createElement(LightboxImage, { src, alt })
+  );
+}
+function ImageView({ src, alt, caption, className }) {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    setError(false);
+    setLightboxOpen(false);
+  }, [src]);
+  const handleLoad = useCallback(() => setLoaded(true), []);
+  const handleError = useCallback(() => {
+    setLoaded(true);
+    setError(true);
+  }, []);
+  if (error) {
+    return React.createElement(Alert, { severity: "error" }, `Failed to load image: ${src}`);
+  }
+  return React.createElement(
+    ImageRoot,
+    { className },
+    !loaded && React.createElement(Skeleton, { variant: "rectangular", width: 400, height: 300 }),
+    React.createElement(StyledImage, {
+      src,
+      alt: alt ?? "Image",
+      onLoad: handleLoad,
+      onError: handleError,
+      onClick: () => setLightboxOpen(true),
+      style: loaded ? void 0 : { display: "none" }
+    }),
+    caption && React.createElement(
+      Typography,
+      { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: "block", textAlign: "center" } },
+      caption
+    ),
+    lightboxOpen && React.createElement(LightboxOverlay, {
+      src,
+      alt: alt ?? "Image",
+      onClose: () => setLightboxOpen(false)
+    })
+  );
+}
+var ImageRenderer = class {
+  type = "image";
+  priority = 30;
+  canHandle(content) {
+    return isImage(content);
+  }
+  render(content, options) {
+    const caption = options?.rendererOptions?.["caption"];
+    return React.createElement(ImageView, {
+      src: content.trim(),
+      alt: options?.toolName ?? "Image",
+      caption,
+      className: options?.className ?? "fmcp-image-content"
+    });
+  }
+};
+var imageRenderer = new ImageRenderer();
+export {
+  ImageRenderer,
+  imageRenderer,
+  isImage
+};