@connectif/ui-components 2.0.2 → 2.0.4

package/dist/components/chat/Chat.d.ts

@@ -16,6 +16,10 @@ export type ChatProps = React.PropsWithChildren<{
      * Scrollbar color
      */
     scrollbarColor?: string;
+    /**
+     * Number that change to trigger scroll to class in scrollToLastClassName
+     */
+    triggerScroll?: number;
 }>;
-declare const Chat: ({ children, header, backgroundColor, scrollToLastClassName, scrollbarColor }: ChatProps) => import("react/jsx-runtime").JSX.Element;
+declare const Chat: ({ children, header, backgroundColor, scrollToLastClassName, scrollbarColor, triggerScroll }: ChatProps) => import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/dist/index.js

@@ -13901,14 +13901,17 @@ var ChatMessage_default = ChatMessage;
 import Stack5 from "@mui/material/Stack";
 import * as React36 from "react";
 import { jsx as jsx80, jsxs as jsxs36 } from "react/jsx-runtime";
+var PADDING_BOTTOM = 8;
 var Chat = ({
   children,
   header,
   backgroundColor: backgroundColor2,
   scrollToLastClassName,
-  scrollbarColor
+  scrollbarColor,
+  triggerScroll
 }) => {
   const ref = React36.useRef(null);
+  const innerRef = React36.useRef(null);
   const [isInitialize, setIsInitialize] = React36.useState(false);
   const [hasVerticalScroll, setHasVerticalScroll] = React36.useState(false);
   React36.useEffect(() => {
@@ -13931,20 +13934,31 @@ var Chat = ({
     if (!container) {
       return;
     }
-    if (scrollToLastClassName) {
-      const elements = container.querySelectorAll(
-        `.${scrollToLastClassName}`
+    if (innerRef.current && innerRef.current.style.paddingBottom !== "0px" && innerRef.current.style.paddingBottom !== `${PADDING_BOTTOM}px` && innerRef.current.style.paddingBottom !== "") {
+      const paddingBottom = parseInt(
+        innerRef.current.style.paddingBottom || "0",
+        10
       );
-      const last = elements[elements.length - 1];
-      if (last) {
-        last.scrollIntoView({ behavior: "smooth", block: "start" });
-      } else {
-        container.scrollTo(0, container.scrollHeight);
-      }
-    } else {
-      container.scrollTo(0, container.scrollHeight);
+      const childrenHeight = innerRef.current.scrollHeight - paddingBottom;
+      const childrenHeightVisible = childrenHeight - container.scrollTop;
+      innerRef.current.style.paddingBottom = childrenHeightVisible > container.clientHeight ? "0px" : `${container.clientHeight - childrenHeightVisible}px`;
+    }
+  }, [children]);
+  React36.useEffect(() => {
+    const container = ref.current;
+    if (!container || !scrollToLastClassName || !triggerScroll) {
+      return;
+    }
+    const elements = container.querySelectorAll(
+      `.${scrollToLastClassName}`
+    );
+    const last = elements[elements.length - 1];
+    if (last && innerRef.current) {
+      const paddingBottom = container.clientHeight - last.offsetHeight;
+      innerRef.current.style.paddingBottom = `${paddingBottom}px`;
+      last.scrollIntoView({ behavior: "smooth", block: "start" });
     }
-  }, [children, scrollToLastClassName]);
+  }, [scrollToLastClassName, triggerScroll]);
   return /* @__PURE__ */ jsxs36(
     Stack5,
     {
@@ -13956,7 +13970,7 @@ var Chat = ({
         height: "calc(100% - 8px)",
         visibility: !isInitialize ? "hidden" : "visible",
         width: `calc(100% - ${hasVerticalScroll ? "4px" : "8px"})`,
-        paddingBottom: "8px",
+        paddingBottom: `${PADDING_BOTTOM}px`,
         ...backgroundColor2 && { backgroundColor: backgroundColor2 },
         paddingRight: hasVerticalScroll ? "4px" : "8px",
         "::-webkit-scrollbar": {
@@ -13979,10 +13993,10 @@ var Chat = ({
         /* @__PURE__ */ jsx80(
           Stack5,
           {
-            justifyContent: "end",
+            ref: innerRef,
+            justifyContent: "start",
             ...!header && {
-              minHeight: "100%",
-              justifyContent: "end"
+              minHeight: "100%"
             },
             sx: {
               "> *": { marginTop: "12px" },