reachat 1.4.2 → 1.5.0

package/dist/index.umd.cjs

@@ -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,