Add useIsSending

Author: compulim

packages/api/src/boot/hook.ts

@@ -32,6 +32,7 @@ export {
   useGroupActivities,
   useGroupActivitiesByName,
   useGroupTimestamp,
+  useIsSending,
   useLanguage,
   useLastAcknowledgedActivityKey,
   useLastReadActivityKey,

packages/api/src/hooks/index.ts

@@ -30,6 +30,7 @@ import useGetKeyByActivityId from './useGetKeyByActivityId';
 import useGetSendTimeoutForActivity from './useGetSendTimeoutForActivity';
 import useGrammars from './useGrammars';
 import useGroupTimestamp from './useGroupTimestamp';
+import useIsSending from './useIsSending';
 import useLanguage from './useLanguage';
 import useLastAcknowledgedActivityKey from './useLastAcknowledgedActivityKey';
 import useLastReadActivityKey from './useLastReadActivityKey';
@@ -113,6 +114,7 @@ export {
   useGroupActivities,
   useGroupActivitiesByName,
   useGroupTimestamp,
+  useIsSending,
   useLanguage,
   useLastAcknowledgedActivityKey,
   useLastReadActivityKey,

packages/api/src/hooks/useIsSending.ts

@@ -0,0 +1 @@
+export { default as useIsSending } from '../providers/ActivitySendStatus/useIsSending';

packages/api/src/providers/ActivitySendStatus/ActivitySendStatusComposer.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useMemo, useRef, type ReactNode } from 'react';
 import { querySendStatusFromOutgoingActivity } from 'botframework-webchat-core/activity';
+import { isPresentational } from 'botframework-webchat-core/internal';
+import React, { useEffect, useMemo, useRef, type ReactNode } from 'react';
 
-import { useActivities, usePonyfill } from '../../hooks/index';
+import { useActivities, useGetActivityByKey, usePonyfill } from '../../hooks/index';
 import useForceRender from '../../hooks/internal/useForceRender';
 import useGetSendTimeoutForActivity from '../../hooks/useGetSendTimeoutForActivity';
 import type { SendStatus } from '../../types/SendStatus';
@@ -10,15 +11,18 @@ import useGetKeyByActivity from '../ActivityKeyer/useGetKeyByActivity';
 import type { ActivitySendStatusContextType } from './private/Context';
 import ActivitySendStatusContext from './private/Context';
 import isMapEqual from './private/isMapEqual';
+import type { ActivitySendStatusSubContextType } from './private/SubContext';
+import ActivitySendStatusSubContext from './private/SubContext';
 
 // Magic numbers for `expiryByActivityKey`.
 const EXPIRY_SEND_FAILED = -Infinity;
 const EXPIRY_SENT = Infinity;
 
 const ActivitySendStatusComposer = ({ children }: Readonly<{ children?: ReactNode | undefined }>) => {
-  const [activities] = useActivities();
   const [{ clearTimeout, Date, setTimeout }] = usePonyfill();
+  const [activities] = useActivities();
   const forceRender = useForceRender();
+  const getActivityByKey = useGetActivityByKey();
   const getKeyByActivity = useGetKeyByActivity();
   const getSendTimeoutForActivity = useGetSendTimeoutForActivity();
   const sendStatusByActivityKeyRef = useRef<ReadonlyMap<string, SendStatus>>(Object.freeze(new Map()));
@@ -93,11 +97,30 @@ const ActivitySendStatusComposer = ({ children }: Readonly<{ children?: ReactNod
     [sendStatusByActivityKey]
   );
 
+  const isSendingState = useMemo<readonly [boolean]>(
+    () =>
+      Object.freeze([
+        sendStatusByActivityKey.entries().some(([activityKey, status]) => {
+          if (status === 'sending') {
+            const activity = getActivityByKey(activityKey);
+
+            return activity && !isPresentational(activity);
+          }
+        })
+      ]),
+    [getActivityByKey, sendStatusByActivityKey]
+  );
+
   const context = useMemo<ActivitySendStatusContextType>(
-    () => ({ sendStatusByActivityKeyState }),
+    () => Object.freeze({ sendStatusByActivityKeyState }),
     [sendStatusByActivityKeyState]
   );
 
+  const subContext = useMemo<ActivitySendStatusSubContextType>(
+    () => Object.freeze({ isSendingState }),
+    [isSendingState]
+  );
+
   // Finds the closest expiry. This is the time we should recompute `sendStatusByActivityKey`.
   const nextExpiry = Array.from(expiryByActivityKey.values())
     // Ignores activities which are already marked as `"send failed"`, because the magic number its `-Infinity`.
@@ -120,7 +143,11 @@ const ActivitySendStatusComposer = ({ children }: Readonly<{ children?: ReactNod
     }
   }, [clearTimeout, Date, forceRender, nextExpiry, setTimeout]);
 
-  return <ActivitySendStatusContext.Provider value={context}>{children}</ActivitySendStatusContext.Provider>;
+  return (
+    <ActivitySendStatusContext.Provider value={context}>
+      <ActivitySendStatusSubContext.Provider value={subContext}>{children}</ActivitySendStatusSubContext.Provider>
+    </ActivitySendStatusContext.Provider>
+  );
 };
 
 export default ActivitySendStatusComposer;

packages/api/src/providers/ActivitySendStatus/private/Context.ts

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 import type { SendStatus } from '../../../types/SendStatus';
 
 type ActivitySendStatusContextType = {
-  sendStatusByActivityKeyState: readonly [ReadonlyMap<string, SendStatus>];
+  readonly sendStatusByActivityKeyState: readonly [ReadonlyMap<string, SendStatus>];
 };
 
 const ActivitySendStatusContext = createContext<ActivitySendStatusContextType>(

packages/api/src/providers/ActivitySendStatus/private/SubContext.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+
+// Smaller context for lesser chance of update.
+type ActivitySendStatusSubContextType = {
+  readonly isSendingState: readonly [boolean];
+};
+
+const ActivitySendStatusSubContext = createContext<ActivitySendStatusSubContextType>(
+  new Proxy({} as ActivitySendStatusSubContextType, {
+    get() {
+      throw new Error('botframework-webchat internal: This hook can only be used under <ActivitySendStatusComposer>.');
+    }
+  })
+);
+
+function useActivitySendStatusSubContext(): ActivitySendStatusSubContextType {
+  return useContext(ActivitySendStatusSubContext);
+}
+
+export default ActivitySendStatusSubContext;
+
+export { useActivitySendStatusSubContext, type ActivitySendStatusSubContextType };

packages/api/src/providers/ActivitySendStatus/useIsSending.ts

@@ -0,0 +1,10 @@
+import { useActivitySendStatusSubContext } from './private/SubContext';
+
+/**
+ * Returns `true` if there is at least one outgoing activity currently in the `"sending"` state, otherwise `false`.
+ *
+ * Note: presentational activities (e.g. event activity or message activity without visible contents) are excluded.
+ */
+export default function useIsSending(): readonly [boolean] {
+  return useActivitySendStatusSubContext().isSendingState;
+}

packages/component/src/Transcript/LiveRegion/LongSend.tsx

@@ -1,76 +1,38 @@
 import { hooks } from 'botframework-webchat-api';
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 import { useLiveRegion } from '../../providers/LiveRegionTwin';
-import { SENDING } from '../../types/internal/SendStatus';
-import useActivityKeysOfSendStatus from './useActivityKeysOfSendStatus';
 
-const { useLocalizer, usePonyfill } = hooks;
+const { useIsSending, useLocalizer, usePonyfill } = hooks;
 
-const SENDING_ANNOUNCEMENT_DELAY = 3000;
+const SENDING_ANNOUNCEMENT_INTERVAL = 3_000;
 
 /**
- * React component to narrate "Sending message." into the live region, but only when the
- * outgoing activity has been stuck in the `sending` state for at least 3 seconds.
+ * React component to narrate "Sending message." into the live region repeatedly every 3 seconds,
+ * but only while there are outgoing activities stuck in the `sending` state with none timed out.
  *
  * Fast sends (acknowledged by the server within 3 seconds) stay silent to avoid noisy
  * announcements. Slow or stalled sends get narrated so the user knows what is happening.
- *
- * Presentational activities (e.g. `event` or `typing`) are excluded to reduce noise.
  */
 const LiveRegionLongSend = () => {
+  const [{ clearInterval, setInterval }] = usePonyfill();
+  const [isSending] = useIsSending();
   const localize = useLocalizer();
-  const [{ clearTimeout, setTimeout }] = usePonyfill();
 
   const liveRegionSendSendingAlt = localize('TRANSCRIPT_LIVE_REGION_SEND_SENDING_ALT');
 
-  /** Keys we have already announced "Sending message." for — prevents repeated announcements. */
-  const announcedKeysRef = useRef<Set<string>>(new Set());
-
-  /** Monotonic counter; incrementing it causes `useLiveRegion` to queue the announcement. */
-  const [tick, setTick] = useState(0);
-
-  /** Keys of outgoing non-presentational activities that are currently in the sending state. */
-  const [sendingKeys] = useActivityKeysOfSendStatus(SENDING);
+  // Invalidate will queue the announcement.
+  const [tick, setTick] = useState<object | undefined>();
 
-  /**
-   * Arm a per-key timer when a key newly enters `sendingKeys`.
-   * Cancel all pending timers when a key leaves (cleanup handles this via deps change).
-   * Clean up the `announcedKeysRef` for keys that are no longer sending.
-   */
   useEffect(() => {
-    // Prune announced keys that are no longer sending.
-    for (const key of Array.from(announcedKeysRef.current)) {
-      if (!sendingKeys.has(key)) {
-        announcedKeysRef.current.delete(key);
-      }
-    }
-
-    if (!sendingKeys.size) {
+    if (!isSending) {
       return;
     }
 
-    const timeouts: ReturnType<typeof setTimeout>[] = [];
-
-    for (const key of sendingKeys) {
-      if (announcedKeysRef.current.has(key)) {
-        continue;
-      }
-
-      const timeout = setTimeout(() => {
-        if (!sendingKeys.has(key)) {
-          return;
-        }
-
-        announcedKeysRef.current.add(key);
-        setTick(t => t + 1);
-      }, SENDING_ANNOUNCEMENT_DELAY);
-
-      timeouts.push(timeout);
-    }
+    const interval = setInterval(() => setTick({}), SENDING_ANNOUNCEMENT_INTERVAL);
 
-    return () => timeouts.forEach(id => clearTimeout(id));
-  }, [clearTimeout, sendingKeys, setTimeout]);
+    return () => clearInterval(interval);
+  }, [clearInterval, isSending, setInterval]);
 
   useLiveRegion(() => (tick ? liveRegionSendSendingAlt : false), [liveRegionSendSendingAlt, tick]);
 

packages/component/src/Transcript/LiveRegion/SendFailed.tsx

@@ -1,12 +1,12 @@
 import { hooks } from 'botframework-webchat-api';
+import { isPresentational } from 'botframework-webchat-core/internal';
 import { memo, useMemo } from 'react';
 
 import usePrevious from '../../hooks/internal/usePrevious';
 import { useLiveRegion } from '../../providers/LiveRegionTwin';
 import { SEND_FAILED } from '../../types/internal/SendStatus';
-import useActivityKeysOfSendStatus from './useActivityKeysOfSendStatus';
 
-const { useLocalizer } = hooks;
+const { useGetActivityByKey, useLocalizer, useSendStatusByActivityKey } = hooks;
 
 /**
  * React component to on-demand narrate "Failed to send message" at the end of the live region.
@@ -19,6 +19,8 @@ const { useLocalizer } = hooks;
  * Thus, we need to use a live region "footnote" to indicate the message was failed to send.
  */
 const LiveRegionSendFailed = () => {
+  const [sendStatusByActivityKey] = useSendStatusByActivityKey();
+  const getActivityByKey = useGetActivityByKey();
   const localize = useLocalizer();
 
   /**
@@ -27,7 +29,21 @@ const LiveRegionSendFailed = () => {
    * Activities which are presentational, such as `event` or `typing`, are ignored to reduce confusions.
    * "Failed to send message" should not be narrated for presentational activities.
    */
-  const [activityKeysOfSendFailed] = useActivityKeysOfSendStatus(SEND_FAILED);
+  const activityKeysOfSendFailed = useMemo<Set<string>>(
+    () =>
+      Array.from(sendStatusByActivityKey).reduce((activityKeysOfSendFailed, [key, sendStatus]) => {
+        if (sendStatus === SEND_FAILED) {
+          const activity = getActivityByKey(key);
+
+          if (activity && !isPresentational(activity)) {
+            activityKeysOfSendFailed.add(key);
+          }
+        }
+
+        return activityKeysOfSendFailed;
+      }, new Set<string>()),
+    [getActivityByKey, sendStatusByActivityKey]
+  );
 
   /** Returns localized "Failed to send message." */
   const liveRegionSendFailedAlt = localize('TRANSCRIPT_LIVE_REGION_SEND_FAILED_ALT');