@seamly/web-ui 20.3.1 → 20.4.0

package/build/dist/lib/standalone.js

@@ -18073,6 +18073,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',
@@ -18118,6 +18119,7 @@ const {
   CLEAR_EVENTS,
   SET_HISTORY,
   SET_EVENTS_READ,
+  SET_LOADED_IMAGE_EVENT_IDS,
   ACK_EVENT,
   SET_IS_LOADING,
   CLEAR_PARTICIPANTS,
@@ -18370,6 +18372,7 @@ const seamlyStateReducer = (state, action) => {
     case CLEAR_EVENTS:
       return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
         unreadEvents: 0,
+        loadedImageEventIds: [],
         events: []
       });
 
@@ -18391,6 +18394,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,
@@ -18953,6 +18961,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;
@@ -29743,6 +29752,11 @@ function image_objectSpread(target) { for (var i = 1; i < arguments.length; i++)
 
 
 
+
+const {
+  SET_LOADED_IMAGE_EVENT_IDS: image_SET_LOADED_IMAGE_EVENT_IDS
+} = seamlyActions;
+
 const Image = _ref => {
   let {
     event,
@@ -29757,6 +29771,16 @@ const Image = _ref => {
     isZoomable
   } = body;
   const [showLighbox, setShowLightbox] = hooks_module_m(false);
+  const dispatch = useStoreDispatch();
+
+  const handleOnLoad = () => {
+    dispatch({
+      type: image_SET_LOADED_IMAGE_EVENT_IDS,
+      eventId: event.payload.id
+    });
+    setShowLightbox(true);
+  };
+
   return jsxRuntime_module_e(message_container, image_objectSpread(image_objectSpread({
     event: event,
     type: "image"
@@ -29765,9 +29789,7 @@ const Image = _ref => {
       src: url,
       id: descriptorId,
       alt: description,
-      onLoad: () => {
-        setShowLightbox(true);
-      }
+      onLoad: handleOnLoad
     }), isZoomable && showLighbox && jsxRuntime_module_e(image_lightbox, {
       description: description,
       url: url
@@ -30871,7 +30893,7 @@ const Conversation = () => {
   const {
     t
   } = useI18n();
-  const appBodyContainer = hooks_module_h(null);
+  const chatBodyContainer = hooks_module_h(null);
   const events = useEvents();
   const isLoading = useSeamlyIsLoading();
   const {
@@ -30879,13 +30901,14 @@ const Conversation = () => {
   } = useVisibility();
   const skiplinkTargetId = useSkiplink();
   const focusSkiplinkTarget = useSkiplinkTargetFocusing();
+  const loadedImageEventIds = useLoadedImageEventIds();
   hooks_module_y(() => {
-    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;
@@ -30930,7 +30953,7 @@ const Conversation = () => {
       children: t('skiplinkText')
     }), jsxRuntime_module_e("div", {
       className: css_className('chat__body'),
-      ref: appBodyContainer,
+      ref: chatBodyContainer,
       children: jsxRuntime_module_e("div", {
         className: css_className('conversation__container'),
         children: [jsxRuntime_module_e(privacy_disclaimer, {}), jsxRuntime_module_e("ol", {
@@ -31312,6 +31335,12 @@ function TextEntryForm(_ref) {
       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 jsxRuntime_module_e(form_controls_form, {
     className: css_className('entry-form'),
     disableValidationClasses: true,
@@ -31339,6 +31368,7 @@ function TextEntryForm(_ref) {
     }), jsxRuntime_module_e("button", {
       className: css_className('button', 'input__submit'),
       type: "submit",
+      onPointerDown: handlePointerDown,
       "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null,
       children: jsxRuntime_module_e(icon, {
         name: "send",
@@ -36204,7 +36234,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(),
@@ -36295,6 +36325,7 @@ const state_reducer_initialState = {
   events: [],
   initialState: {},
   unreadEvents: 0,
+  loadedImageEventIds: [],
   isLoading: false,
   idleDetachCountdown: {
     hasCountdown: false,