@seamly/web-ui 24.3.1 → 24.4.1

package/build/dist/lib/index.js

@@ -5427,7 +5427,7 @@ class API {
     return {
       clientName: "@seamly/web-ui",
       clientVariant: this.#layoutMode,
-      clientVersion: "24.3.1",
+      clientVersion: "24.4.1",
       currentUrl: window.location.toString(),
       screenResolution: `${window.screen.width}x${window.screen.height}`,
       timezone: getTimeZone(),
@@ -12003,6 +12003,10 @@ const participantReducer = (participantInfo, action) => {
   };
 };
 const calculateNewEntryMeta = (entryMeta, channelEvent) => {
+  // Events originating from the client should leave the entry meta as is
+  if (channelEvent?.payload?.fromClient === true) {
+    return entryMeta;
+  }
   const entry = channelEvent?.type === 'message' ? channelEvent?.payload.translatedEntry || channelEvent?.payload.entry : {
     options: undefined,
     type: undefined
@@ -12224,7 +12228,7 @@ const storeSlice = createSlice({
       // Use the messages from the payload, as `events` only contains displayable ones.
       // The first participant message found is the 'last', as we receive them from newest to oldest.
       const lastParticipantEvent = messages.find(m => m.type === 'participant');
-      // @ts-ignore TypeScript incorrectly assumes that the payload can be any of info/message/participant
+      // @ts-expect-error TypeScript incorrectly assumes that the payload can be any of info/message/participant
       const lastParticipantId = lastParticipantEvent?.payload?.participant?.id;
       const {
         entry
@@ -12238,10 +12242,25 @@ const storeSlice = createSlice({
           ...(entry?.options ? entry.options : {})
         }
       }, events[events.length - 1]);
-      const newFeatures = {
+      let newFeatures = {
         ...state.options.features
       };
+      // The first service message found is the 'last', as we receive them from newest to oldest.
+      const lastServiceMessage = messages.find(m => !m.payload.fromClient && ['message', 'participant'].includes(m.type));
       const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads);
+
+      // Check for upload enabled by entry type
+      if (newFeaturesHasUpload && lastServiceMessage?.type === 'message') {
+        // @ts-expect-error TypeScript incorrectly assumes that the payload can be any of info/message/participant
+        const entryType = lastServiceMessage.payload.entry?.type || '';
+        newFeatures = {
+          ...newFeatures,
+          uploads: {
+            enabled: newFeatures.uploads?.enabled || false,
+            enabledFromEntry: entryType === entryTypes.upload
+          }
+        };
+      }
       state.unreadEvents = unreadMessageCount;
       state.userHasResponded = userResponded;
       state.events = events.filter(e => e.type !== 'participant' || !!e.payload.participant?.introduction);
@@ -15361,6 +15380,7 @@ const CarouselMessage = ({
 
 
 
+
 const useChoicePrompt = event => {
   const {
     payload
@@ -15371,6 +15391,7 @@ const useChoicePrompt = event => {
     emitEvent,
     sendAction
   } = use_seamly_commands();
+  const hasConversation = useSeamlyHasConversation();
   const {
     activeServiceSessionId
   } = useSeamlyServiceInfo();
@@ -15400,6 +15421,10 @@ const useChoicePrompt = event => {
     setShowOptions(payload.id === lastEventId);
   }, [payload, lastEventId]);
   const onChoiceClickHandler = choice => {
+    // Do not allow interaction without a conversation
+    if (!hasConversation()) {
+      return;
+    }
     const transactionId = randomId();
     const action = {
       type: actionTypes.pickChoice,
@@ -15575,6 +15600,7 @@ const SuggestionsList = ({
 
 
 
+
 const useSuggestions = event => {
   const {
     payload
@@ -15599,6 +15625,7 @@ const ConversationSuggestions = ({
     emitEvent,
     sendAction
   } = use_seamly_commands();
+  const hasConversation = useSeamlyHasConversation();
   const {
     suggestions,
     payload
@@ -15623,6 +15650,10 @@ const ConversationSuggestions = ({
     id,
     question
   }) => {
+    // Do not allow interaction without a conversation
+    if (!hasConversation()) {
+      return;
+    }
     setIsExpanded(false);
     dispatch(setHasResponded(true));
     const transactionId = randomId();
@@ -15643,7 +15674,7 @@ const ConversationSuggestions = ({
     sendAction(action);
     addMessageBubble(question, transactionId);
     emitEvent(`action.${action.type}`, action);
-  }, [addMessageBubble, dispatch, emitEvent, payload.id, sendAction]);
+  }, [addMessageBubble, dispatch, emitEvent, hasConversation, payload.id, sendAction]);
   if (!isExpanded || userHasResponded || !hasLastTransactionEvent || !showSuggestions) {
     return null;
   }
@@ -18011,8 +18042,9 @@ const UploadContent = ({
 }) => {
   if (fileId && !isDeleted) {
     return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("button", {
+      type: "button",
       onClick: onClickHandler,
-      className: css_className(['button', 'download', 'download-link']),
+      className: css_className(['download', 'download-link']),
       children: children
     });
   }
@@ -19345,9 +19377,9 @@ function useCharacterLimit(controlName) {
   const [{
     value
   }] = useFormControl(controlName);
-  const remainingChars = limit && hasLimit && value ? limit - value.length : limit;
+  const remainingChars = typeof limit === 'number' && hasLimit && value ? limit - value.length : limit;
   const reachedCharacterWarning = hasLimit && typeof remainingChars == 'number' ? remainingChars <= maxCharacterWarningLimit : false;
-  const reachedCharacterLimit = hasLimit && remainingChars ? remainingChars < 0 : false;
+  const reachedCharacterLimit = hasLimit && typeof remainingChars === 'number' ? remainingChars < 0 : false;
   (0,hooks_.useEffect)(() => {
     validateLimit(reachedCharacterWarning, remainingChars);
   }, [reachedCharacterWarning, remainingChars, validateLimit]);
@@ -19809,6 +19841,7 @@ const InOutTransition = ({
 
 
 
+
 
 
 const Suggestions = ({
@@ -19826,6 +19859,7 @@ const Suggestions = ({
     emitEvent,
     sendAction
   } = use_seamly_commands();
+  const hasConversation = useSeamlyHasConversation();
   const {
     isOpen,
     setVisibility
@@ -19888,6 +19922,10 @@ const Suggestions = ({
     id,
     question
   }) => {
+    // Do not allow interaction without a conversation
+    if (!hasConversation()) {
+      return;
+    }
     if (hasCountdown) {
       endCountdown(true);
     }
@@ -19918,7 +19956,7 @@ const Suggestions = ({
       });
     }
     focusSkiplinkTarget();
-  }, [addMessageBubble, continueChat, endCountdown, emitEvent, focusSkiplinkTarget, hasCountdown, hasPrompt, isOpen, payload, sendAction, setVisibility]);
+  }, [addMessageBubble, continueChat, endCountdown, emitEvent, focusSkiplinkTarget, hasConversation, hasCountdown, hasPrompt, isOpen, payload, sendAction, setVisibility]);
   (0,hooks_.useEffect)(() => {
     if (prevSuggestions.current !== suggestions && !hideSuggestions) {
       if (hasSuggestions) {
@@ -22085,6 +22123,19 @@ const upload_Upload = () => {
     }
     prevIsComplete.current = isComplete;
   }, [isUploading, isComplete, clearUploads, cancelEntrySelection, focusSkiplinkTarget, sendPolite, t]);
+
+  // Reset form when service no longer allows uploads
+  (0,hooks_.useEffect)(() => {
+    // If we are currently uploading, don't clear the uploads as that
+    // may be confusing to the user.
+    // When the upload completes and the user clicks the submit button,
+    // there will be an error.
+    if (!serviceAllowsUploads && !isUploading) {
+      clearUploads();
+      cancelEntrySelection();
+      focusSkiplinkTarget();
+    }
+  }, [serviceAllowsUploads, isUploading, clearUploads, cancelEntrySelection, focusSkiplinkTarget]);
   const handleSubmit = (0,hooks_.useCallback)(({
     fileList
   }) => {
@@ -22277,7 +22328,6 @@ const EntryContainer = () => {
     upload: entry_upload
   });
   const [renderEntry, setRenderEntry] = (0,hooks_.useState)(() => activeEntry);
-  const [renderEntryOptions, setRenderEntryOptions] = (0,hooks_.useState)(() => activeEntryOptions);
   const config = useConfig();
   const {
     accountAllowsUploads
@@ -22308,11 +22358,10 @@ const EntryContainer = () => {
   }, [hasCountdown, hasResumeConversationPrompt, focusFn]);
   (0,hooks_.useEffect)(() => {
     setRenderEntry(activeEntry);
-    setRenderEntryOptions(activeEntryOptions);
     // This focus action is required for auto entry changes. User driven
     // changes should be handled in the originating components.
     focusFn();
-  }, [activeEntry, activeEntryOptions, focusFn, entryContainer]);
+  }, [activeEntry, focusFn, entryContainer]);
 
   // Check if the active element is inside this container and save it.
   containedFocus.current = !!(entryContainer.current && entryContainer.current.contains(document.activeElement));
@@ -22321,7 +22370,7 @@ const EntryContainer = () => {
   // Once we do, this property should be moved to that component instead.
   const {
     allowManualInput = true
-  } = renderEntryOptions;
+  } = activeEntryOptions;
   return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsxs)("div", {
     className: css_className('chat__entry'),
     ref: entryContainer,