@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/components/love/love.js

@@ -0,0 +1,55 @@
+import { Heart } from '@phosphor-icons/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import React__default from 'react';
+import { cn } from '../../lib/utils.js';
+
+function Love({ className, children, doAnimation = false, ...props }) {
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("relative", className), ...props }, /* @__PURE__ */ React__default.createElement(AnimatePresence, null, doAnimation && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ React__default.createElement(
+    motion.div,
+    {
+      key: i,
+      className: "absolute top-1/2 left-1/2 origin-center pointer-events-none",
+      initial: { opacity: 0, scale: 0.3, x: 0, y: 0 },
+      animate: {
+        opacity: [0, 1, 1, 0],
+        scale: [0.3, 1, 1, 0],
+        x: [0, Math.cos(i * (Math.PI / 4)) * 30],
+        y: [0, Math.sin(i * (Math.PI / 4)) * 30],
+        rotate: [0, i % 2 ? 45 : -45]
+      },
+      transition: {
+        duration: 1.2,
+        ease: [0.4, 0, 0.2, 1],
+        times: [0, 0.3, 0.7, 1],
+        delay: i * 0.1
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Heart,
+      {
+        className: "size-4 text-rose-500",
+        style: {
+          filter: "drop-shadow(0 0 3px rgba(255, 75, 110, 0.8))",
+          strokeWidth: 2.5
+        }
+      }
+    )
+  )), /* @__PURE__ */ React__default.createElement(
+    motion.div,
+    {
+      className: "absolute inset-0 rounded-full bg-primary pointer-events-none",
+      initial: { opacity: 0, scale: 0.8 },
+      animate: {
+        opacity: [0, 0.15, 0.15, 0],
+        scale: [0.8, 1.8, 1.8, 2]
+      },
+      transition: {
+        duration: 1.2,
+        ease: "easeOut",
+        times: [0, 0.3, 0.7, 1]
+      }
+    }
+  ))), children);
+}
+
+export { Love };

package/dist/esm/components/markdown/CodeBlock.js

@@ -0,0 +1,76 @@
+import React__default, { memo, useState } from 'react';
+import { CheckCircle, Clipboard, Download } from '@phosphor-icons/react';
+import { Prism } from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { Button } from '../ui/button.js';
+import { programmingLanguages, generateRandomString } from './utils/codeblock.js';
+
+const HighlighterComponent = Prism;
+const CodeBlock = memo(({ language, value }) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const copyToClipboard = async () => {
+    if (!navigator.clipboard || !navigator.clipboard.writeText) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(value);
+      setIsCopied(true);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2e3);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  };
+  const downloadAsFile = () => {
+    const fileExtension = programmingLanguages[language] || ".file";
+    const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
+    const fileName = suggestedFileName;
+    const blob = new Blob([value], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative font-sans text-sm mt-1" }, /* @__PURE__ */ React__default.createElement("div", { className: "relative rounded-t-lg bg-zinc-800/80 font-sans text-sm backdrop-blur" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex h-8 items-center justify-between px-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-xs font-medium text-zinc-400" }, language), /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "size-5 text-zinc-400 hover:bg-zinc-700/50 hover:text-zinc-100",
+      onClick: () => void copyToClipboard()
+    },
+    isCopied ? /* @__PURE__ */ React__default.createElement(CheckCircle, { size: 18 }) : /* @__PURE__ */ React__default.createElement(Clipboard, { size: 18 })
+  ), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "size-5 text-zinc-400 hover:bg-zinc-700/50 hover:text-zinc-100",
+      onClick: downloadAsFile
+    },
+    /* @__PURE__ */ React__default.createElement(Download, { size: 18 })
+  )))), /* @__PURE__ */ React__default.createElement("div", { className: "rounded-b-lg" }, /* @__PURE__ */ React__default.createElement(
+    HighlighterComponent,
+    {
+      language,
+      style: a11yDark,
+      PreTag: "div",
+      wrapLongLines: true,
+      customStyle: {
+        margin: 0,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      }
+    },
+    value
+  )));
+});
+CodeBlock.displayName = "CodeBlock";
+
+export { CodeBlock };

package/dist/esm/components/markdown/FormattedMessage.js

@@ -0,0 +1,227 @@
+import React__default, { memo, useState, useEffect, useMemo, useCallback, Suspense, lazy } from 'react';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import { match, compile } from 'path-to-regexp';
+import { CodeBlock } from './CodeBlock.js';
+import EmbedComponent from './embeds/index.js';
+import { MemoizedReactMarkdown } from './MemoizedReactMarkdown.js';
+import { SmartImage } from './SmartImage.js';
+import { stripNewLines } from './utils/stripNewLines.js';
+import { isAnswerUncertain } from '../../lib/utils.js';
+import { addPopupWidgetUtm } from '../../lib/addUtmParams.js';
+import { getContentType } from '../../lib/getContentType.js';
+
+const MermaidDiagram = lazy(() => import('./MermaidDiagram.js').then((m) => ({ default: m.MermaidDiagram })));
+const videoContentTypePrefix = "[Content: Video]";
+const videoContentTypePrefixRegexp = new RegExp("^\\" + videoContentTypePrefix);
+const FormattedMessage = memo(({ message, isStreaming, redirectRules = [], contentTypeEndpoint }) => {
+  const [displayContent, setDisplayContent] = useState(message.content);
+  const [processedContent, setProcessedContent] = useState(message.content);
+  useEffect(() => {
+    const result = isAnswerUncertain(message.content);
+    if (result.uncertain && result.language && message.uncertaintyFallbackText?.[result.language]) {
+      setDisplayContent(message.uncertaintyFallbackText[result.language]);
+    } else {
+      setDisplayContent(message.content);
+    }
+  }, [message.content, message.uncertaintyFallbackText, isStreaming]);
+  const linkRegex = useMemo(() => /(!?\[([^\]]*)\]\(([^)]+)\))/g, []);
+  const processVideoAttachments = useCallback(
+    async (content, signal) => {
+      if (isStreaming) {
+        return content;
+      }
+      let processedText = content;
+      const matches = Array.from(content.matchAll(linkRegex));
+      for (const match2 of matches) {
+        if (signal.aborted) {
+          throw new DOMException("Aborted", "AbortError");
+        }
+        const [fullMatch, , linkText, href] = match2;
+        if (href && (href.includes("/api/attachments.public.redirect") || href.includes("/api/attachments.redirect"))) {
+          const attachmentId = href.split("id=")[1];
+          if (attachmentId) {
+            try {
+              const contentType = await getContentType(attachmentId, contentTypeEndpoint, signal);
+              if (contentType === "video") {
+                const newLinkText = `${videoContentTypePrefix} ${linkText}`;
+                const newMatch = fullMatch.replace(linkText, newLinkText);
+                processedText = processedText.replace(fullMatch, newMatch);
+              }
+            } catch (error) {
+              if (error instanceof Error && error.name === "AbortError") {
+                throw error;
+              }
+            }
+          }
+        }
+      }
+      return processedText;
+    },
+    [isStreaming, linkRegex, contentTypeEndpoint]
+  );
+  useEffect(() => {
+    const abortController = new AbortController();
+    const processContent = async () => {
+      try {
+        const processed = await processVideoAttachments(displayContent, abortController.signal);
+        if (!abortController.signal.aborted) {
+          setProcessedContent(processed);
+        }
+      } catch (error) {
+        if (error instanceof DOMException && error.name === "AbortError") {
+          return;
+        }
+        if (!abortController.signal.aborted) {
+          setProcessedContent(displayContent);
+        }
+      }
+    };
+    void processContent();
+    return () => {
+      abortController.abort();
+    };
+  }, [displayContent, processVideoAttachments]);
+  const strippedContent = stripNewLines(processedContent);
+  const memoizedRedirectRules = useMemo(() => redirectRules, [redirectRules]);
+  const rewriteUrl = useMemo(
+    () => (url) => {
+      if (!url) return url;
+      try {
+        const urlObj = new URL(url);
+        const pathname = urlObj.pathname;
+        for (const rule of memoizedRedirectRules) {
+          const matchFn = match(rule.source, { decode: decodeURIComponent });
+          const matchResult = matchFn(pathname);
+          if (matchResult) {
+            const toPath = compile(rule.destination, { encode: encodeURIComponent });
+            const newPath = toPath(matchResult.params);
+            urlObj.pathname = newPath;
+            return urlObj.toString();
+          }
+        }
+        return url;
+      } catch (e) {
+        if (!isStreaming) {
+          console.error("Error rewriting URL:", e);
+        }
+        return url;
+      }
+    },
+    [memoizedRedirectRules, isStreaming]
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    MemoizedReactMarkdown,
+    {
+      className: "dark:prose-invert prose flex-1",
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypeRaw],
+      isStreaming,
+      components: {
+        p: ({ children }) => /* @__PURE__ */ React__default.createElement("div", { className: "ptag mb-3 last:mb-0" }, children),
+        code: ({ inline, className = "", children, ...props }) => {
+          const match2 = /language-(\w+)/.exec(className || "");
+          const language = match2 && match2[1];
+          if (!inline && (language === "mermaid" || language === "mermaidjs")) {
+            return /* @__PURE__ */ React__default.createElement(Suspense, { fallback: /* @__PURE__ */ React__default.createElement("div", { className: "my-4 h-12 animate-pulse rounded bg-slate-100" }) }, /* @__PURE__ */ React__default.createElement(MermaidDiagram, { content: String(children).replace(/\n$/, "") }));
+          }
+          return !inline && language ? /* @__PURE__ */ React__default.createElement(CodeBlock, { key: Math.random(), language, value: String(children).replace(/\n$/, ""), ...props }) : /* @__PURE__ */ React__default.createElement(
+            "code",
+            {
+              className: `text-red-400 bg-slate-200 border-slate-300 border rounded p-0.5 break-words ${className}`.trim(),
+              ...props
+            },
+            children
+          );
+        },
+        marker({ children }) {
+          return /* @__PURE__ */ React__default.createElement("div", { className: "my-2" }, /* @__PURE__ */ React__default.createElement("span", { className: "highlight" }, children));
+        },
+        table({ children }) {
+          return /* @__PURE__ */ React__default.createElement("table", { className: "border-collapse border border-black px-3 py-1 dark:border-white" }, children);
+        },
+        th({ children }) {
+          return /* @__PURE__ */ React__default.createElement("th", { className: "break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white" }, children);
+        },
+        td({ children }) {
+          return /* @__PURE__ */ React__default.createElement("td", { className: "break-words border border-black px-3 py-1 dark:border-white" }, children);
+        },
+        a({ children, ...props }) {
+          let originalHref = props.href || "";
+          const childrenText = typeof children === "string" ? children : "";
+          const isVideoContentType = childrenText.startsWith(videoContentTypePrefix);
+          const parsedText = isVideoContentType ? childrenText.replace(videoContentTypePrefixRegexp, "").trim() : childrenText;
+          if (!originalHref && parsedText) {
+            try {
+              new URL(parsedText);
+              originalHref = parsedText;
+            } catch {
+            }
+          }
+          const isTextSameAsHref = parsedText === originalHref;
+          const rewrittenHref = originalHref ? rewriteUrl(originalHref) : originalHref;
+          const newProps = { ...props, href: addPopupWidgetUtm(rewrittenHref) };
+          if (rewrittenHref && !isStreaming) {
+            const embedComponent = EmbedComponent({
+              attrs: { href: rewrittenHref },
+              isAttachmentVideo: isVideoContentType
+            });
+            if (React__default.isValidElement(embedComponent)) {
+              return embedComponent;
+            }
+          }
+          const displayChildren = isTextSameAsHref ? rewrittenHref : isVideoContentType ? parsedText : children;
+          return /* @__PURE__ */ React__default.createElement("a", { className: "link text-link", target: "_blank", rel: "noopener noreferrer", ...newProps }, displayChildren);
+        },
+        pre: ({ children }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children),
+        img({ src, alt }) {
+          if (!src || isStreaming) return null;
+          const isVideoContentType = alt?.startsWith(videoContentTypePrefix) || false;
+          const parsedAlt = isVideoContentType && alt ? alt.replace(videoContentTypePrefixRegexp, "").trim() : alt;
+          const embedComponent = EmbedComponent({
+            attrs: { href: src ?? "" },
+            isAttachmentVideo: isVideoContentType
+          });
+          if (React__default.isValidElement(embedComponent)) {
+            return embedComponent;
+          }
+          return /* @__PURE__ */ React__default.createElement(SmartImage, { src, alt: parsedAlt });
+        },
+        li: ({ children, ...props }) => {
+          return /* @__PURE__ */ React__default.createElement("li", { ...props }, children);
+        },
+        ul({ children }) {
+          return /* @__PURE__ */ React__default.createElement("ul", { className: "ml-4 my-4 list-outside space-y-4 list-disc" }, children);
+        },
+        ol({ children }) {
+          return /* @__PURE__ */ React__default.createElement("ol", { className: "ml-4 my-4 list-outside space-y-4 list-decimal" }, children);
+        },
+        strong: ({ children, ...props }) => {
+          return /* @__PURE__ */ React__default.createElement("span", { className: "font-semibold", ...props }, children);
+        },
+        h1: ({ children, ...props }) => {
+          return /* @__PURE__ */ React__default.createElement("h1", { className: "text-2xl font-bold", ...props }, children);
+        },
+        h2: ({ children, ...props }) => {
+          return /* @__PURE__ */ React__default.createElement("h2", { className: "text-xl font-bold", ...props }, children);
+        },
+        h3: ({ children, ...props }) => {
+          return /* @__PURE__ */ React__default.createElement("h3", { className: "text-lg font-bold", ...props }, children);
+        },
+        h4: ({ children, ...props }) => {
+          return /* @__PURE__ */ React__default.createElement("h4", { className: "text-base font-bold", ...props }, children);
+        },
+        h5: ({ children, ...props }) => {
+          return /* @__PURE__ */ React__default.createElement("h5", { className: "text-base font-semibold", ...props }, children);
+        },
+        h6: ({ children, ...props }) => {
+          return /* @__PURE__ */ React__default.createElement("h6", { className: "text-sm font-semibold", ...props }, children);
+        }
+      }
+    },
+    strippedContent
+  );
+});
+FormattedMessage.displayName = "FormattedMessage";
+
+export { FormattedMessage };

package/dist/esm/components/markdown/Frame.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+const Frame = React.forwardRef(
+  ({ src, border, width = "100%", height = "400px", title }, ref) => {
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [iframeLoaded, setIframeLoaded] = React.useState(false);
+    React.useEffect(() => {
+      let mounted = true;
+      setTimeout(() => {
+        if (mounted) {
+          setIsLoaded(true);
+        }
+      }, 0);
+      return () => {
+        mounted = false;
+      };
+    }, []);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `overflow-hidden rounded-lg mt-4 relative ${border ? "border" : ""}`,
+        style: {
+          width,
+          height
+        }
+      },
+      isLoaded && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: `absolute w-full h-full ${!iframeLoaded ? "block" : "hidden"}` }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 bg-muted/10 rounded-lg" }, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0" }, /* @__PURE__ */ React.createElement("div", { className: "h-full w-full shimmer" }), /* @__PURE__ */ React.createElement("div", { className: "absolute left-1/2 top-1/2 -translate-1/2 flex flex-col items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "modern-spinner" }), /* @__PURE__ */ React.createElement("div", { className: "text-sm text-muted-foreground" }, "Loading..."))))), /* @__PURE__ */ React.createElement("div", { className: !iframeLoaded ? "invisible" : "visible" }, /* @__PURE__ */ React.createElement(
+        "iframe",
+        {
+          ref,
+          src,
+          sandbox: "allow-same-origin allow-scripts allow-popups allow-forms allow-downloads",
+          width,
+          height,
+          title: "embed",
+          loading: "lazy",
+          allowFullScreen: true,
+          className: "block rounded-lg",
+          onLoad: () => setIframeLoaded(true)
+        }
+      ), title && /* @__PURE__ */ React.createElement("span", { className: "block text-center text-sm font-medium" }, title)))
+    );
+  }
+);
+
+export { Frame as default };

package/dist/esm/components/markdown/MemoizedReactMarkdown.js

@@ -0,0 +1,9 @@
+import { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+const MemoizedReactMarkdown = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.isStreaming === nextProps.isStreaming
+);
+
+export { MemoizedReactMarkdown };

package/dist/esm/components/markdown/MermaidDiagram.js

@@ -0,0 +1,49 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import mermaid from 'mermaid';
+
+const config = {
+  startOnLoad: false,
+  theme: "default",
+  securityLevel: "loose",
+  fontFamily: "inherit",
+  secure: ["secure", "securityLevel", "startOnLoad", "maxTextSize"]
+};
+const MermaidDiagram = ({ content }) => {
+  const [svg, setSvg] = useState("");
+  const [error, setError] = useState(null);
+  const containerRef = useRef(null);
+  const [isInitialized, setIsInitialized] = useState(false);
+  useEffect(() => {
+    const initializeMermaid = () => {
+      try {
+        mermaid.initialize(config);
+        setIsInitialized(true);
+      } catch (err) {
+        console.error("Error initializing mermaid:", err);
+        setError("Failed to initialize diagram renderer");
+      }
+    };
+    initializeMermaid();
+  }, []);
+  useEffect(() => {
+    if (!isInitialized) return;
+    const renderDiagram = async () => {
+      try {
+        const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+        const { svg: svg2 } = await mermaid.render(id, content);
+        setSvg(svg2);
+        setError(null);
+      } catch (err) {
+        console.error("Error rendering mermaid diagram:", err);
+        setError("Failed to render diagram");
+      }
+    };
+    void renderDiagram();
+  }, [content, isInitialized]);
+  if (error) {
+    return /* @__PURE__ */ React__default.createElement("div", { className: "text-red-500 bg-red-50 p-4 rounded-md" }, error, /* @__PURE__ */ React__default.createElement("pre", { className: "mt-2 text-sm" }, content));
+  }
+  return /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, className: "my-4 overflow-auto", dangerouslySetInnerHTML: { __html: svg } });
+};
+
+export { MermaidDiagram };

package/dist/esm/components/markdown/SmartImage.js

@@ -0,0 +1,25 @@
+import React__default, { useState } from 'react';
+import { ZoomableImage } from './ZoomableImage.js';
+
+const SmartImageInner = ({ src, alt }) => {
+  const [isSmallImage, setIsSmallImage] = useState(null);
+  const handleLoad = (e) => {
+    const img = e.currentTarget;
+    setIsSmallImage(img.naturalWidth < 100);
+  };
+  const handleError = () => {
+    setIsSmallImage(false);
+  };
+  if (isSmallImage === null) {
+    return /* @__PURE__ */ React__default.createElement("img", { src, alt: "", onLoad: handleLoad, onError: handleError, className: "hidden", "aria-hidden": "true" });
+  }
+  if (isSmallImage) {
+    return /* @__PURE__ */ React__default.createElement("img", { src, alt, className: "w-auto h-auto inline-block px-1" });
+  }
+  return /* @__PURE__ */ React__default.createElement(ZoomableImage, { src, alt });
+};
+const SmartImage = ({ src, alt }) => {
+  return /* @__PURE__ */ React__default.createElement(SmartImageInner, { key: src, src, alt });
+};
+
+export { SmartImage };

package/dist/esm/components/markdown/ZoomableImage.js

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ArrowsOut } from '@phosphor-icons/react';
+
+const ZoomableImage = ({ src, alt }) => {
+  const [isZoomed, setIsZoomed] = React.useState(false);
+  const [showFullCaption, setShowFullCaption] = React.useState(false);
+  const [imageError, setImageError] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+  const imgRef = React.useRef(null);
+  const toggleZoom = () => {
+    setIsZoomed(!isZoomed);
+  };
+  const handleImageError = () => {
+    setIsLoading(false);
+    setImageError(true);
+  };
+  const handleImageLoad = () => {
+    setIsLoading(true);
+    if (imgRef.current) {
+      const { naturalWidth, naturalHeight } = imgRef.current;
+      const maxHeight = 300;
+      const aspectRatio = naturalWidth / naturalHeight;
+      const height = Math.min(maxHeight, naturalHeight);
+      const width = height * aspectRatio;
+      setDimensions({ width, height });
+    }
+    setIsLoading(false);
+  };
+  if (!src || imageError) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("figure", { className: "relative block my-4 px-4 w-full sm:w-auto" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center min-h-[100px]" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: toggleZoom,
+      className: "border-0 p-0 bg-transparent relative group",
+      "aria-label": isZoomed ? "Zoom out image" : "Zoom in image"
+    },
+    isLoading && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "rounded-md bg-dark-300 animate-pulse",
+        style: {
+          width: dimensions.width || 300,
+          height: dimensions.height || 200,
+          maxHeight: 300
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        ref: imgRef,
+        src,
+        alt,
+        onError: handleImageError,
+        onLoad: handleImageLoad,
+        className: `max-h-[300px] w-auto object-contain cursor-zoom-in hover:opacity-90 transition-opacity ${isLoading ? "opacity-0 absolute" : "opacity-100 relative"}`
+      }
+    ),
+    !isLoading && /* @__PURE__ */ React.createElement("div", { className: "absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity" }, /* @__PURE__ */ React.createElement("div", { className: "bg-black/50 text-white p-1.5 rounded-lg" }, /* @__PURE__ */ React.createElement(ArrowsOut, { size: 16 })))
+  )), alt && !isLoading && /* @__PURE__ */ React.createElement("div", { className: "relative mt-1" }, /* @__PURE__ */ React.createElement(
+    "figcaption",
+    {
+      className: "text-sm text-dark-700 text-center group cursor-default",
+      onMouseEnter: () => setShowFullCaption(true),
+      onMouseLeave: () => setShowFullCaption(false)
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "line-clamp-2 hover:text-dark-800" }, alt)
+  ), showFullCaption && /* @__PURE__ */ React.createElement("div", { className: "absolute bottom-full left-0 right-0 mb-1 p-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-border text-sm text-dark-700 z-10" }, alt)), /* @__PURE__ */ React.createElement(AnimatePresence, null, isZoomed && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    motion.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      className: "fixed inset-0 bg-black/80 z-50",
+      onClick: toggleZoom
+    }
+  ), /* @__PURE__ */ React.createElement(
+    motion.div,
+    {
+      initial: { scale: 0.5, opacity: 0 },
+      animate: { scale: 1, opacity: 1 },
+      exit: { scale: 0.5, opacity: 0 },
+      className: "fixed inset-0 z-50 flex flex-col items-center justify-center cursor-zoom-out gap-4 p-4 sm:p-8",
+      onClick: toggleZoom
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "max-w-[95vw] sm:max-w-[90vw] max-h-[80vh]" }, /* @__PURE__ */ React.createElement("img", { src, alt, className: "w-full h-full object-contain" })),
+    alt && /* @__PURE__ */ React.createElement("div", { className: "max-w-[95vw] sm:max-w-[90vw] text-white text-center text-sm" }, alt)
+  ))));
+};
+
+export { ZoomableImage };

package/dist/esm/components/markdown/embeds/Loom.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Frame from '../Frame.js';
+
+function Loom(props) {
+  const normalizedUrl = props.attrs.href.replace("share", "embed");
+  return /* @__PURE__ */ React.createElement(Frame, { ...props, src: normalizedUrl, title: "Loom Embed" });
+}
+Loom.isMatch = (href) => {
+  const loomRegex = /^https:\/\/(www\.)?(use)?loom\.com\/(embed|share)\/(.*)$/;
+  return loomRegex.test(href);
+};
+
+export { Loom as default };