reachat 1.4.2 → 1.5.0

package/dist/ChatInput/ChatInput.d.ts

@@ -18,7 +18,7 @@ interface ChatInputProps {
      */
     sendIcon?: ReactElement;
     /**
-     * Icon to show for send.
+     * Icon to show for stop.
      */
     stopIcon?: ReactElement;
     /**

package/dist/docs.json

@@ -386,7 +386,7 @@
         "defaultValue": {
           "value": "<StopIcon />"
         },
-        "description": "Icon to show for send.",
+        "description": "Icon to show for stop.",
         "name": "stopIcon",
         "parent": {
           "fileName": "src/ChatInput/ChatInput.tsx",

package/dist/index.js

@@ -1351,10 +1351,69 @@ const MessageFile = ({
 const MessageFiles = ({ files, children }) => {
   const { theme } = useContext(ChatContext);
   const Comp = children ? Slot : MessageFile;
+  const [expanded, setExpanded] = useState(false);
   if (!files || files.length === 0) {
     return null;
   }
-  return files.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(theme.messages.message.files.base), children: files.map((file, index) => /* @__PURE__ */ 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__ */ jsxs(
+      "figure",
+      {
+        className: index === 0 ? "col-span-2 row-span-2" : "relative",
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image.url,
+              alt: image.name,
+              className: "relative w-full h-full object-cover rounded-lg"
+            }
+          ),
+          index === maxImageLength - 1 && /* @__PURE__ */ 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__ */ jsx(Comp, { ...image, children }, index));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: 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__ */ jsx(Comp, { ...file, children }, index))
+      ]
+    }
+  );
 };
 const MessageQuestion = ({
   children,