@seamly/web-ui 20.3.1 → 20.4.0

package/build/dist/lib/index.js

@@ -8941,6 +8941,7 @@ const seamlyActions = {
   CLEAR_EVENTS: 'CLEAR_EVENTS',
   SET_HISTORY: 'SET_HISTORY',
   SET_EVENTS_READ: 'SET_EVENTS_READ',
+  SET_LOADED_IMAGE_EVENT_IDS: 'SET_LOADED_IMAGE_EVENT_IDS',
   ACK_EVENT: 'ACK_EVENT',
   SET_IS_LOADING: 'SET_IS_LOADING',
   CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',
@@ -8986,6 +8987,7 @@ const {
   CLEAR_EVENTS,
   SET_HISTORY,
   SET_EVENTS_READ,
+  SET_LOADED_IMAGE_EVENT_IDS,
   ACK_EVENT,
   SET_IS_LOADING,
   CLEAR_PARTICIPANTS,
@@ -9225,6 +9227,7 @@ const seamlyStateReducer = (state, action) => {
     case CLEAR_EVENTS:
       return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
         unreadEvents: 0,
+        loadedImageEventIds: [],
         events: []
       });
 
@@ -9244,6 +9247,11 @@ const seamlyStateReducer = (state, action) => {
         })
       });
 
+    case SET_LOADED_IMAGE_EVENT_IDS:
+      return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
+        loadedImageEventIds: [...state.loadedImageEventIds, action.eventId]
+      });
+
     case SET_HISTORY:
       const {
         events: history,
@@ -9784,6 +9792,7 @@ const useEvents = () => hooks_useSelector(selectEvents, []);
 const useSeamlyIsLoading = () => useSeamlyStateContext().isLoading;
 const useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles;
 const useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents;
+const useLoadedImageEventIds = () => useSeamlyStateContext().loadedImageEventIds;
 const useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;
 const useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];
 const useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;
@@ -20118,6 +20127,11 @@ function image_objectWithoutPropertiesLoose(source, excluded) { if (source == nu
 
 
 
+
+const {
+  SET_LOADED_IMAGE_EVENT_IDS: image_SET_LOADED_IMAGE_EVENT_IDS
+} = seamlyActions;
+
 const Image = _ref => {
   let {
     event,
@@ -20132,6 +20146,16 @@ const Image = _ref => {
     isZoomable
   } = body;
   const [showLighbox, setShowLightbox] = (0,hooks_namespaceObject.useState)(false);
+  const dispatch = useStoreDispatch();
+
+  const handleOnLoad = () => {
+    dispatch({
+      type: image_SET_LOADED_IMAGE_EVENT_IDS,
+      eventId: event.payload.id
+    });
+    setShowLightbox(true);
+  };
+
   return (0,jsx_runtime_namespaceObject.jsxs)(message_container, image_objectSpread(image_objectSpread({
     event: event,
     type: "image"
@@ -20140,9 +20164,7 @@ const Image = _ref => {
       src: url,
       id: descriptorId,
       alt: description,
-      onLoad: () => {
-        setShowLightbox(true);
-      }
+      onLoad: handleOnLoad
     }), isZoomable && showLighbox && (0,jsx_runtime_namespaceObject.jsx)(image_lightbox, {
       description: description,
       url: url
@@ -21158,7 +21180,7 @@ const Conversation = () => {
   const {
     t
   } = useI18n();
-  const appBodyContainer = (0,hooks_namespaceObject.useRef)(null);
+  const chatBodyContainer = (0,hooks_namespaceObject.useRef)(null);
   const events = useEvents();
   const isLoading = useSeamlyIsLoading();
   const {
@@ -21166,13 +21188,14 @@ const Conversation = () => {
   } = useVisibility();
   const skiplinkTargetId = useSkiplink();
   const focusSkiplinkTarget = useSkiplinkTargetFocusing();
+  const loadedImageEventIds = useLoadedImageEventIds();
   (0,hooks_namespaceObject.useEffect)(() => {
-    window.requestAnimationFrame(() => {
-      if (appBodyContainer.current) {
-        appBodyContainer.current.scrollTop = appBodyContainer.current.scrollHeight;
-      }
-    });
-  }, [events, isLoading, isOpen]);
+    const containerElement = chatBodyContainer.current;
+
+    if (containerElement) {
+      containerElement.scrollTop = containerElement.scrollHeight;
+    }
+  }, [events, isLoading, isOpen, loadedImageEventIds]);
 
   const renderEvents = () => {
     let prevParticipant = null;
@@ -21217,7 +21240,7 @@ const Conversation = () => {
       children: t('skiplinkText')
     }), (0,jsx_runtime_namespaceObject.jsx)("div", {
       className: css_className('chat__body'),
-      ref: appBodyContainer,
+      ref: chatBodyContainer,
       children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
         className: css_className('conversation__container'),
         children: [(0,jsx_runtime_namespaceObject.jsx)(privacy_disclaimer, {}), (0,jsx_runtime_namespaceObject.jsxs)("ol", {
@@ -21568,6 +21591,12 @@ function TextEntryForm({
       setBlockAutoEntrySwitch(false);
     };
   }, [setBlockAutoEntrySwitch, hasValue]);
+
+  const handlePointerDown = event => {
+    // When a message is submitted, the keyboard should be prevented from closing on mobile devices
+    event.preventDefault();
+  };
+
   return (0,jsx_runtime_namespaceObject.jsxs)(form_controls_form, {
     className: css_className('entry-form'),
     disableValidationClasses: true,
@@ -21595,6 +21624,7 @@ function TextEntryForm({
     }), (0,jsx_runtime_namespaceObject.jsx)("button", {
       className: css_className('button', 'input__submit'),
       type: "submit",
+      onPointerDown: handlePointerDown,
       "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null,
       children: (0,jsx_runtime_namespaceObject.jsx)(icon, {
         name: "send",
@@ -26152,7 +26182,7 @@ class API {
     return {
       clientName: "@seamly/web-ui",
       clientVariant: this.layoutMode,
-      clientVersion: "20.3.1",
+      clientVersion: "20.4.0",
       currentUrl: window.location.toString(),
       screenResolution: `${window.screen.width}x${window.screen.height}`,
       timezone: getTimeZone(),
@@ -26234,6 +26264,7 @@ const state_reducer_initialState = {
   events: [],
   initialState: {},
   unreadEvents: 0,
+  loadedImageEventIds: [],
   isLoading: false,
   idleDetachCountdown: {
     hasCountdown: false,