@brainfish-ai/components 0.13.6 → 0.13.8

package/dist/esm/chunks/{FormattedMessage.D94rlhro.js → FormattedMessage.CpTetIzd.js}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { memo, useState, useRef, useEffect, useMemo } from 'react';
+import React__default, { memo, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import { match, compile } from 'path-to-regexp';
@@ -8,7 +8,7 @@ import { Button } from '../components/ui/button.js';
 import ReactMarkdown from 'react-markdown';
 import mermaid from 'mermaid';
 import { AnimatePresence, motion } from 'framer-motion';
-import { i as isAnswerUncertain } from './utils.DmKr1Ojo.js';
+import { i as isAnswerUncertain } from './utils.DaMF_LVC.js';
 
 function addUtmParameters(url, options) {
   if (!url) {
@@ -39112,6 +39112,35 @@ Loom.isMatch = (href) => {
   return loomRegex.test(href);
 };
 
+const NativeVideo = ({ attrs }) => {
+  const { href } = attrs;
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    /* @__PURE__ */ React.createElement(
+      "video",
+      {
+        controls: true,
+        width: "100%",
+        height: "auto",
+        src: href,
+        title: "Native Video",
+        style: { borderRadius: "8px", overflow: "hidden" },
+        controlsList: "nodownload",
+        playsInline: true
+      },
+      "Your browser does not support the video tag."
+    )
+  );
+};
+NativeVideo.isMatch = (href) => {
+  const [url] = href.split("?");
+  const videoExtensions = /\.(mp4|webm|ogg|mov|m4v|avi|flv|wmv|mkv)(?:\?.*|#.*)?$/i;
+  if (url && videoExtensions.test(url)) {
+    return true;
+  }
+  return false;
+};
+
 function Supademo(props) {
   return /* @__PURE__ */ React.createElement(Frame, { ...props, src: props.attrs.href, title: "Supademo Embed" });
 }
@@ -39191,7 +39220,7 @@ YouTube.isMatch = (href) => {
   return YOUTUBE_URL_REGEX.test(href);
 };
 
-const syncEmbedComponents = [Loom, Supademo, Typeform, YouTube, Wistia, Vimeo];
+const syncEmbedComponents = [Loom, Supademo, Typeform, YouTube, Wistia, Vimeo, NativeVideo];
 const useMatchedComponent = (href, components) => {
   return React.useMemo(() => {
     try {
@@ -39205,7 +39234,11 @@ const useMatchedComponent = (href, components) => {
 };
 const EmbedComponent = (props) => {
   const { href } = props.attrs;
+  const { isAttachmentVideo } = props;
   const matched = useMatchedComponent(href, syncEmbedComponents);
+  if (isAttachmentVideo) {
+    return /* @__PURE__ */ React.createElement(NativeVideo, { ...props });
+  }
   if (matched) {
     const { Component } = matched;
     return /* @__PURE__ */ React.createElement(Component, { ...props });
@@ -39356,8 +39389,44 @@ const ZoomableImage = ({ src, alt }) => {
 
 const stripNewLines = (content) => content.replace(/^\n+|(\n+|\\)+$/g, "");
 
-const FormattedMessage = memo(({ message, isStreaming, redirectRules = [] }) => {
+async function getContentType(attachmentId, apiHost, signal) {
+  try {
+    const host = apiHost || "https://app.brainfi.sh";
+    const response = await fetch(`${host}/api/attachments.public.contentType?id=${attachmentId}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      signal
+    }).then((res) => res.json());
+    if (!response.ok) {
+      return "unknown";
+    }
+    const contentType = response.contentType;
+    if (contentType?.startsWith("image/")) {
+      return "image";
+    }
+    if (contentType?.startsWith("video/")) {
+      return "video";
+    }
+    if (contentType?.startsWith("audio/")) {
+      return "audio";
+    }
+    if (contentType?.startsWith("application/pdf")) {
+      return "pdf";
+    }
+    return "unknown";
+  } catch (error) {
+    console.error("Error getting content type:", error);
+    return "unknown";
+  }
+}
+
+const videoContentTypePrefix = "[Content: Video]";
+const videoContentTypePrefixRegexp = new RegExp("^\\" + videoContentTypePrefix);
+const FormattedMessage = memo(({ message, isStreaming, redirectRules = [], apiUrl }) => {
   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]) {
@@ -39366,7 +39435,64 @@ const FormattedMessage = memo(({ message, isStreaming, redirectRules = [] }) =>
       setDisplayContent(message.content);
     }
   }, [message.content, message.uncertaintyFallbackText, isStreaming]);
-  const strippedContent = stripNewLines(displayContent);
+  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, apiUrl, 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, apiUrl]
+  );
+  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) => {
@@ -39431,37 +39557,43 @@ const FormattedMessage = memo(({ message, isStreaming, redirectRules = [] }) =>
         a({ children, ...props }) {
           let originalHref = props.href || "";
           const childrenText = typeof children === "string" ? children : "";
-          if (!originalHref && childrenText) {
+          const isVideoContentType = childrenText.startsWith(videoContentTypePrefix);
+          const parsedText = isVideoContentType ? childrenText.replace(videoContentTypePrefixRegexp, "").trim() : childrenText;
+          if (!originalHref && parsedText) {
             try {
-              new URL(childrenText);
-              originalHref = childrenText;
+              new URL(parsedText);
+              originalHref = parsedText;
             } catch {
             }
           }
-          const isTextSameAsHref = childrenText === originalHref;
+          const isTextSameAsHref = parsedText === originalHref;
           const rewrittenHref = originalHref ? rewriteUrl(originalHref) : originalHref;
           const newProps = { ...props, href: rewrittenHref };
           if (rewrittenHref && !isStreaming) {
             const embedComponent = EmbedComponent({
-              attrs: { href: rewrittenHref }
+              attrs: { href: rewrittenHref },
+              isAttachmentVideo: isVideoContentType
             });
             if (React__default.isValidElement(embedComponent)) {
               return embedComponent;
             }
           }
-          const displayChildren = isTextSameAsHref ? rewrittenHref : children;
+          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 ?? "" }
+            attrs: { href: src ?? "" },
+            isAttachmentVideo: isVideoContentType
           });
           if (React__default.isValidElement(embedComponent)) {
             return embedComponent;
           }
-          return /* @__PURE__ */ React__default.createElement(ZoomableImage, { src, alt, key: src });
+          return /* @__PURE__ */ React__default.createElement(ZoomableImage, { src, alt: parsedAlt, key: src });
         },
         li: ({ children, ...props }) => {
           return /* @__PURE__ */ React__default.createElement("li", { ...props }, children);
@@ -39501,4 +39633,4 @@ const FormattedMessage = memo(({ message, isStreaming, redirectRules = [] }) =>
 FormattedMessage.displayName = "FormattedMessage";
 
 export { CodeBlock as C, FormattedMessage as F, MemoizedReactMarkdown as M, ZoomableImage as Z, MermaidDiagram as a, addUtmParameters as b, addPopupWidgetUtm as c, getDefaultExportFromCjs as g };
-//# sourceMappingURL=FormattedMessage.D94rlhro.js.map
+//# sourceMappingURL=FormattedMessage.CpTetIzd.js.map