reachat 1.4.2 → 1.5.1

package/dist/index.umd.cjs

@@ -11,8 +11,8 @@
   }
 })();
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("reablocks"), require("@radix-ui/react-slot"), require("framer-motion"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "reablocks", "@radix-ui/react-slot", "framer-motion", "react-markdown", "react-syntax-highlighter", "rehype-katex", "mdast-util-find-and-replace", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.React, global.reablocks, global.reactSlot, global.framerMotion, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns));
-})(this, function(exports2, jsxRuntime, React, reablocks, reactSlot, framerMotion, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, mdastUtilFindAndReplace, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("reablocks"), require("@radix-ui/react-slot"), require("motion/react"), require("react-markdown"), require("react-syntax-highlighter"), require("rehype-katex"), require("mdast-util-find-and-replace"), require("reakeys"), require("remark-gfm"), require("remark-youtube"), require("remark-math"), require("date-fns")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "reablocks", "@radix-ui/react-slot", "motion/react", "react-markdown", "react-syntax-highlighter", "rehype-katex", "mdast-util-find-and-replace", "reakeys", "remark-gfm", "remark-youtube", "remark-math", "date-fns"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reachat = {}, global.jsxRuntime, global.React, global.reablocks, global.reactSlot, global.react, global.ReactMarkdown, global.reactSyntaxHighlighter, global.rehypeKatex, global.mdastUtilFindAndReplace, global.reakeys, global.remarkGfm, global.remarkYoutube, global.remarkMath, global.dateFns));
+})(this, function(exports2, jsxRuntime, React, reablocks, reactSlot, react, ReactMarkdown, reactSyntaxHighlighter, rehypeKatex, mdastUtilFindAndReplace, reakeys, remarkGfm, remarkYoutube, remarkMath, dateFns) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -193,7 +193,7 @@
     const { activeSessionId, theme, isCompact, selectSession, viewType } = React.useContext(ChatContext);
     const isVisible = isCompact && activeSessionId || viewType === "chat" || !isCompact;
     return isVisible && /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.div,
+      react.motion.div,
       {
         initial: { translateX: "200%" },
         animate: {
@@ -1357,10 +1357,69 @@
   const MessageFiles = ({ files, children }) => {
     const { theme } = React.useContext(ChatContext);
     const Comp = children ? reactSlot.Slot : MessageFile;
+    const [expanded, setExpanded] = React.useState(false);
     if (!files || files.length === 0) {
       return null;
     }
-    return files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: reablocks.cn(theme.messages.message.files.base), children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...file, children }, index)) });
+    const { imageFiles, otherFiles } = files.reduce(
+      (acc, file) => {
+        if (file.type.startsWith("image/")) {
+          acc.imageFiles.push(file);
+        } else {
+          acc.otherFiles.push(file);
+        }
+        return acc;
+      },
+      {
+        imageFiles: [],
+        otherFiles: []
+      }
+    );
+    const maxImageLength = 3;
+    const truncateImages = !expanded && imageFiles.length > maxImageLength;
+    const renderImageFiles = (images) => {
+      return truncateImages ? images.slice(0, maxImageLength).map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "figure",
+        {
+          className: index === 0 ? "col-span-2 row-span-2" : "relative",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: image.url,
+                alt: image.name,
+                className: "relative w-full h-full object-cover rounded-lg"
+              }
+            ),
+            index === maxImageLength - 1 && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "absolute top-0 left-0 w-full h-full flex justify-center items-center bg-black bg-opacity-50 rounded-lg cursor-pointer",
+                onClick: () => setExpanded(true),
+                children: [
+                  "+",
+                  (imageFiles.length - maxImageLength).toLocaleString()
+                ]
+              }
+            )
+          ]
+        },
+        index
+      )) : images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...image, children }, index));
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: reablocks.cn(
+          theme.messages.message.files.base,
+          truncateImages ? "grid grid-rows-2 grid-flow-col gap-2 w-1/3" : ""
+        ),
+        children: [
+          imageFiles.length > 0 && renderImageFiles(imageFiles),
+          otherFiles.length > 0 && otherFiles.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...file, children }, index))
+        ]
+      }
+    );
   };
   const MessageQuestion = ({
     children,
@@ -1414,7 +1473,7 @@
         children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Markdown, { remarkPlugins, children: response }),
           isLoading && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
+            react.motion.div,
             {
               className: reablocks.cn(theme.messages.message.cursor),
               animate: { opacity: [1, 0] },
@@ -1558,7 +1617,7 @@ ${response}`),
     children
   }) => {
     const { theme, isLoading } = React.useContext(ChatContext);
-    return /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { variants: messageVariants, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.motion.div, { variants: messageVariants, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reablocks.Card, { className: reablocks.cn(theme.messages.message.base), children: children || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(MessageQuestion, { question: conversation.question, files: conversation.files }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1633,8 +1692,8 @@ ${response}`),
           children: showMoreText
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.motion.div,
+      /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        react.motion.div,
         {
           variants: containerVariants,
           initial: "hidden",
@@ -1884,7 +1943,7 @@ ${response}`),
         onFileUpload
       ]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref: observe,
@@ -1901,7 +1960,7 @@ ${response}`),
     const { theme, isCompact, activeSessionId } = React.useContext(ChatContext);
     const isVisible = isCompact && !activeSessionId;
     return (!isCompact || isVisible) && /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.div,
+      react.motion.div,
       {
         initial: { translateX: "-100%" },
         animate: {