@app-studio/web 0.8.39 → 0.8.41

package/dist/web.esm.js

@@ -1802,7 +1802,8 @@ var AvatarView = _ref => {
     fallback = 'IM',
     styles,
     imageError,
-    setImageError
+    setImageError,
+    onClick = () => {}
   } = _ref;
   // Determines the size of the avatar by mapping the size prop to the predefined AvatarSizeMap.
   var avatarSize = AvatarSizeMap[size];
@@ -1820,7 +1821,8 @@ var AvatarView = _ref => {
     borderWidth: "1px",
     borderStyle: "solid",
     borderColor: imageError ? 'black' : 'transparent',
-    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)"
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
+    onClick: onClick
   }, styles == null ? void 0 : styles.container), !imageError ? (/*#__PURE__*/React.createElement(Image, {
     alt: "IM",
     src: src,
@@ -1839,7 +1841,8 @@ var AvatarComponent = _ref => {
     src,
     size,
     styles,
-    fallback
+    fallback,
+    onClick
   } = _ref;
   // Uses custom hook useAvatarState to manage the avatar image loading error state.
   var {
@@ -1853,7 +1856,8 @@ var AvatarComponent = _ref => {
     styles: styles,
     fallback: fallback,
     imageError: imageError,
-    setImageError: setImageError
+    setImageError: setImageError,
+    onClick: onClick
   });
   // AvatarComponent is a functional component that wraps the AvatarView with added state logic.
 };
@@ -6618,46 +6622,51 @@ var MessageLayout = _ref => {
 };
 
 var useModalStore = /*#__PURE__*/create(set => ({
-  modal: false,
-  modalProps: {
-    isVisible: false
-  },
-  overlayProps: {},
-  show: function show(modal, modalProps, overlayProps) {
+  modals: [],
+  show: function show(name, modalProps, overlayProps) {
     if (modalProps === void 0) {
       modalProps = {};
     }
     if (overlayProps === void 0) {
       overlayProps = {};
     }
-    if (modal) {
-      modalProps.isVisible = true;
-    }
-    set(state => Object.assign({}, state, {
-      modal,
-      modalProps,
-      overlayProps
+    set(state => ({
+      modals: [...state.modals, {
+        name,
+        props: Object.assign({}, modalProps, {
+          isVisible: true
+        }),
+        overlayProps
+      }]
     }));
   },
-  hide: () => {
-    set(state => Object.assign({}, state, {
-      modalProps: Object.assign({}, state.modalProps, {
-        isVisible: false
-      })
-    }));
+  hide: name => {
+    set(state => {
+      if (!name) {
+        // Hide all modals
+        return {
+          modals: []
+        };
+      }
+      // Hide specific modal by name
+      return {
+        modals: state.modals.filter(modal => modal.name !== name)
+      };
+    });
   }
 }));
-var showModal = function showModal(modal, modalProps, overlayProps) {
+var showModal = function showModal(name, modalProps, overlayProps) {
   if (modalProps === void 0) {
     modalProps = {};
   }
   if (overlayProps === void 0) {
     overlayProps = {};
   }
-  useModalStore.getState().show(modal, modalProps, overlayProps);
+  useModalStore.getState().show(name, modalProps, overlayProps);
 };
-var hideModal = () => {
-  useModalStore.getState().hide();
+var hideModal = name => {
+  console.log('hideModal', name);
+  useModalStore.getState().hide(typeof name === 'string' ? name : undefined);
 };
 
 var ContainerShapes = {
@@ -6827,33 +6836,29 @@ var ModalFooter = _ref5 => {
 
 var ModalLayout = _ref => {
   var {
-    modals
+    modals: availableModals
   } = _ref;
-  var modalStore = useModalStore(_ref2 => {
-    var {
-      modal,
-      modalProps,
-      overlayProps
-    } = _ref2;
-    return {
-      modal,
-      modalProps,
-      overlayProps
-    };
-  });
-  if (typeof modalStore.modal === 'boolean') {
-    return null;
-  }
-  var Modal = modals[modalStore.modal];
-  if (!Modal) {
-    console.error(modalStore.modal + " modal doesn't exist");
+  var activeModals = useModalStore(state => state.modals);
+  if (activeModals.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ModalOverlay, Object.assign({
-    isOpen: modalStore.modalProps.isVisible,
-    onClose: hideModal,
-    blur: 10
-  }, modalStore.overlayProps), Modal !== undefined && /*#__PURE__*/React.createElement(Modal, Object.assign({}, modalStore.modalProps))));
+  return /*#__PURE__*/React.createElement(Fragment, null, activeModals.map((modal, index) => {
+    var ModalComponent = availableModals[modal.name];
+    if (!ModalComponent) {
+      console.error(modal.name + " modal doesn't exist");
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(ModalOverlay, Object.assign({
+      key: index,
+      isOpen: modal.props.isVisible,
+      onClose: () => hideModal(modal.name),
+      blur: 5
+    }, modal.overlayProps, {
+      style: {
+        zIndex: 1000 + index
+      }
+    }), /*#__PURE__*/React.createElement(ModalComponent, Object.assign({}, modal.props)));
+  }));
 };
 
 /**