@seamly/web-ui 24.3.0-alpha.1 → 24.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "24.3.0-alpha.1",
+  "version": "24.3.0-beta.1",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "exports": {

package/src/javascripts/core/index.ts

@@ -67,6 +67,7 @@ export { default as Engine } from 'lib/engine'
 export { default as ExternalApi } from 'lib/external-api'
 export { default as SeamlyFileUpload } from 'ui/components/core/seamly-file-upload'
 export { default as SeamlyActivityMonitor } from 'ui/components/core/seamly-activity-monitor'
+export { default as SeamlyActivityEventContext } from 'ui/components/core/seamly-activity-event-context'
 export { timeout } from 'ui/hooks/focus-helper-hooks'
 
 export { default as appReducer } from 'domains/app/slice'
@@ -92,9 +93,11 @@ export type {
 export { default as translationReducer } from 'domains/translations/slice'
 export { default as visibilityReducer } from 'domains/visibility/slice'
 export {
+  getSearchParamsByKeys,
   getUrlSearchParams,
   getUrlSearchString,
-  getSearchParamsByKeys,
+  initResetSearchParams,
+  replaceSearchParams,
 } from 'lib/url-helpers'
 
 // Used by: Client

package/src/javascripts/core/ui/components/conversation/event/choice-prompt.tsx

@@ -20,7 +20,8 @@ import type { MessageChoicePrompt } from 'domains/store/store.types'
 export const useChoicePrompt = (event: MessageChoicePrompt) => {
   const { payload } = event
   const [showOptions, setShowOptions] = useState(false)
-  const { sendAction, addMessageBubble, addDivider } = useSeamlyCommands()
+  const { addMessageBubble, addDivider, emitEvent, sendAction } =
+    useSeamlyCommands()
   const { activeServiceSessionId } = useSeamlyServiceInfo()
   const lastEventId = useLastMessageEventId()
   const { body } = useTranslatedEventData(event)
@@ -53,21 +54,26 @@ export const useChoicePrompt = (event: MessageChoicePrompt) => {
 
   const onChoiceClickHandler = (choice) => {
     const transactionId = randomId()
-
-    if (chooseAgain) {
-      addDivider('new_topic', transactionId)
-    }
-    addMessageBubble(choice.text, transactionId)
-    sendAction({
+    const action = {
       type: actionTypes.pickChoice,
       originMessage: payload.id,
       choice: {
-        id: choice.id,
         chooseAgain,
+        id: choice.id,
       },
       transactionId,
-    })
+    }
+
+    if (chooseAgain) {
+      addDivider('new_topic', transactionId)
+    }
+    addMessageBubble(choice.text, transactionId)
+    sendAction(action)
     setShowOptions(false)
+    emitEvent(`action.${action.type}`, {
+      ...action,
+      choice: { ...action.choice, text: choice.text },
+    })
   }
 
   const onChooseAgainClickHandler = () => {

package/src/javascripts/core/ui/components/conversation/event/conversation-suggestions.tsx

@@ -26,7 +26,7 @@ const ConversationSuggestions = ({ event, ...props }) => {
   const [isExpanded, setIsExpanded] = useState(true)
   const dispatch = useAppDispatch()
   const userHasResponded = useUserHasResponded()
-  const { sendAction, addMessageBubble } = useSeamlyCommands()
+  const { addMessageBubble, emitEvent, sendAction } = useSeamlyCommands()
   const { suggestions, payload } = useSuggestions(event)
   const { showSuggestions } = useConfig()
   const events = useEvents()
@@ -58,9 +58,7 @@ const ConversationSuggestions = ({ event, ...props }) => {
       dispatch(setHasResponded(true))
 
       const transactionId = randomId()
-
-      // @todo Refactor to 'suggestionclick'
-      sendAction({
+      const action = {
         type: actionTypes.custom,
         originMessage: payload.id,
         body: {
@@ -71,10 +69,14 @@ const ConversationSuggestions = ({ event, ...props }) => {
           },
         },
         transactionId,
-      })
+      }
+
+      // @todo Refactor to 'suggestionclick'
+      sendAction(action)
       addMessageBubble(question, transactionId)
+      emitEvent(`action.${action.type}`, action)
     },
-    [dispatch, sendAction, payload.id, addMessageBubble],
+    [addMessageBubble, dispatch, emitEvent, payload.id, sendAction],
   )
 
   if (

package/src/javascripts/core/ui/components/conversation/event/hooks/use-event-link-click-handler.ts

@@ -2,11 +2,11 @@ import { useSeamlyCommands } from 'ui/hooks/seamly-hooks'
 import { actionTypes } from 'ui/utils/seamly-utils'
 
 const useEventLinkClickHandler = ({ originMessage, transactionId }) => {
-  const { sendAction } = useSeamlyCommands()
+  const { emitEvent, sendAction } = useSeamlyCommands()
 
   const eventClick = (e) => {
     if (e.target && e.target.dataset.linkId) {
-      sendAction({
+      const action = {
         type: actionTypes.navigate,
         originMessage,
         transactionId,
@@ -14,7 +14,9 @@ const useEventLinkClickHandler = ({ originMessage, transactionId }) => {
           id: e.target.dataset.linkId,
           url: e.target.getAttribute('href'),
         },
-      })
+      }
+      sendAction(action)
+      emitEvent(`action.${action.type}`, action)
     }
   }
 

package/src/javascripts/core/ui/components/core/seamly-instance-functions-loader.ts

@@ -40,7 +40,8 @@ function useSeamlyInstanceFunction(functionName, fn, deps: any[] = []) {
 
 const SeamlyInstanceFunctionsLoader = () => {
   const config = useConfig()
-  const { sendMessage, sendContext, sendAction } = useSeamlyCommands()
+  const { emitEvent, sendAction, sendContext, sendMessage } =
+    useSeamlyCommands()
   const dispatch = useAppDispatch()
   const { setVisibility, visible } = useVisibility()
   const currentVisibility = useRef(visible)
@@ -105,7 +106,9 @@ const SeamlyInstanceFunctionsLoader = () => {
   useSeamlyInstanceFunction(
     'sendCustomAction',
     (actionType, body) => {
-      sendAction({ type: 'custom', body: { type: actionType, body } })
+      const action = { type: 'custom', body: { type: actionType, body } }
+      sendAction(action)
+      emitEvent(`action.${action.type}`, action)
     },
     [api.send],
   )

package/src/javascripts/core/ui/components/suggestions/index.tsx

@@ -31,7 +31,7 @@ const Suggestions = ({ isAside = false }) => {
   // generic hooks
   const { isInline } = useSeamlyLayoutMode()
   const { t } = useI18n()
-  const { sendAction, addMessageBubble } = useSeamlyCommands()
+  const { addMessageBubble, emitEvent, sendAction } = useSeamlyCommands()
   const { isOpen, setVisibility } = useVisibility()
   const { showSuggestions } = useConfig()
   // a11y hooks
@@ -104,9 +104,7 @@ const Suggestions = ({ isAside = false }) => {
       }
 
       const transactionId = randomId()
-
-      // @todo Refactor to 'suggestionclick'
-      sendAction({
+      const action = {
         type: actionTypes.custom,
         originMessage: payload.id,
         body: {
@@ -117,8 +115,12 @@ const Suggestions = ({ isAside = false }) => {
           },
         },
         transactionId,
-      })
+      }
+
+      // @todo Refactor to 'suggestionclick'
+      sendAction(action)
       addMessageBubble(question, transactionId)
+      emitEvent(`action.${action.type}`, action)
 
       if (!isOpen) {
         setVisibility({ visibility: visibilityStates.open })
@@ -129,13 +131,14 @@ const Suggestions = ({ isAside = false }) => {
       addMessageBubble,
       continueChat,
       endCountdown,
+      emitEvent,
       focusSkiplinkTarget,
       hasCountdown,
       hasPrompt,
+      isOpen,
       payload,
       sendAction,
       setVisibility,
-      isOpen,
     ],
   )
 

package/src/javascripts/core/ui/hooks/use-seamly-commands.ts

@@ -8,7 +8,6 @@ import { addEvent, setEvents, setInitialState } from 'domains/store/slice'
 import { visibilityStates } from 'domains/visibility/constants'
 import { useVisibility } from 'domains/visibility/hooks'
 import { randomId } from 'lib/id'
-import { actionTypes } from 'ui/utils/seamly-utils'
 import useSeamlyEventBusContext from './event-bus-hooks'
 import {
   useSeamlyApiContext,
@@ -192,13 +191,8 @@ const useSeamlyCommands = () => {
       }
 
       api.send('action', body)
-
-      const { type } = body
-      if (type !== actionTypes.typing && type !== actionTypes.read) {
-        emitEvent(`action.${type}`, body)
-      }
     },
-    [api, emitEvent],
+    [api],
   )
 
   const sendContext = useCallback(

package/src/javascripts/style-guide/components/static-core.tsx

@@ -7,7 +7,6 @@ import {
   SeamlyEventBusContext,
   SeamlyLiveRegionContext,
   SeamlyStoreProvider,
-  SeamlyActivityMonitor,
   SeamlyFileUpload,
   API,
   configReducer,
@@ -27,6 +26,7 @@ import {
   ReduxStore,
   translationReducer,
   visibilityReducer,
+  SeamlyActivityEventContext,
 } from '@seamly/web-ui'
 
 const bareApi = {
@@ -137,9 +137,9 @@ const SeamlyStaticCore: FC<StaticCoreProps> = ({
           <SeamlyApiContext.Provider value={bareApi}>
             <SeamlyLiveRegionContext.Provider value={liveMsgRef.current}>
               <ComponentFilter>
-                <SeamlyActivityMonitor>
+                <SeamlyActivityEventContext.Provider value={() => {}}>
                   <SeamlyFileUpload>{children}</SeamlyFileUpload>
-                </SeamlyActivityMonitor>
+                </SeamlyActivityEventContext.Provider>
               </ComponentFilter>
             </SeamlyLiveRegionContext.Provider>
           </SeamlyApiContext.Provider>