botframework-webchat-component 4.18.0 → 4.18.1-hotfix.20260127.b53acdf

package/src/ErrorBox.tsx

@@ -1,20 +1,28 @@
 /* eslint no-console: "off" */
 
 import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import { validateProps } from 'botframework-webchat-api/internal';
+import React, { memo } from 'react';
+import { instance, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
-import ScreenReaderText from './ScreenReaderText';
 import useStyleSet from './hooks/useStyleSet';
+import ScreenReaderText from './ScreenReaderText';
 
 const { useLocalizer } = hooks;
 
-type ErrorBoxProps = {
-  error: Error;
-  type?: string;
-};
+const errorBoxPropsSchema = pipe(
+  object({
+    error: instance(Error),
+    type: optional(string())
+  }),
+  readonly()
+);
+
+type ErrorBoxProps = InferInput<typeof errorBoxPropsSchema>;
+
+function ErrorBox(props: ErrorBoxProps) {
+  const { error, type = '' } = validateProps(errorBoxPropsSchema, props);
 
-const ErrorBox: FC<ErrorBoxProps> = ({ error, type }) => {
   const [{ errorBox: errorBoxStyleSet }] = useStyleSet();
   const localize = useLocalizer();
 
@@ -31,15 +39,7 @@ const ErrorBox: FC<ErrorBoxProps> = ({ error, type }) => {
       </div>
     </React.Fragment>
   );
-};
-
-ErrorBox.defaultProps = {
-  type: ''
-};
-
-ErrorBox.propTypes = {
-  error: PropTypes.instanceOf(Error).isRequired,
-  type: PropTypes.string
-};
+}
 
-export default ErrorBox;
+export default memo(ErrorBox);
+export { errorBoxPropsSchema, type ErrorBoxProps };

package/src/LinkDefinition/LinkDefinitions.tsx

@@ -1,6 +1,15 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { Children, type ComponentType, type ReactNode } from 'react';
+import random from 'math-random';
+import React, {
+  Children,
+  useCallback,
+  useRef,
+  useState,
+  type ComponentType,
+  type ReactEventHandler,
+  type ReactNode
+} from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 import Chevron from './private/Chevron';
@@ -22,27 +31,67 @@ const REFERENCE_LIST_HEADER_IDS = {
   two: 'REFERENCE_LIST_HEADER_TWO'
 };
 
-const LinkDefinitions = <TAccessoryProps extends object>({
+function uniqueId(count = Infinity) {
+  return (
+    random()
+      // eslint-disable-next-line no-magic-numbers
+      .toString(36)
+      // eslint-disable-next-line no-magic-numbers
+      .substring(2, 2 + count)
+  );
+}
+
+// Following @types/react to use {} for props.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+const LinkDefinitions = <TAccessoryProps extends {}>({
   accessoryComponentType,
   accessoryProps,
   children
 }: Props<TAccessoryProps>) => {
+  const [id] = useState(() => `webchat-link-definitions-${uniqueId()}`);
   const [{ linkDefinitions }] = useStyleSet();
   const localizeWithPlural = useLocalizer({ plural: true });
+  const summaryRef = useRef<HTMLElement>(null);
 
   const headerText = localizeWithPlural(REFERENCE_LIST_HEADER_IDS, childrenCount(children));
 
+  const handleToggle = useCallback<ReactEventHandler<HTMLDetailsElement>>(event => {
+    const summary = summaryRef.current;
+    const details = event.target;
+    if (summary && details && details instanceof HTMLDetailsElement) {
+      const isDetailsOpen = details.open.toString();
+      summary.setAttribute('aria-expanded', isDetailsOpen);
+      summary.setAttribute('aria-pressed', isDetailsOpen);
+    }
+  }, []);
+
   return (
-    <details className={classNames(linkDefinitions, 'webchat__link-definitions')} open={true}>
-      <summary className="webchat__link-definitions__header">
-        <div className="webchat__link-definitions__header-text">{headerText}</div>
-        <Chevron />
-        <div className="webchat__link-definitions__header-filler" />
-        {accessoryComponentType && (
-          <div className="webchat__link-definitions__header-accessory">
-            {React.createElement(accessoryComponentType, accessoryProps)}
-          </div>
-        )}
+    <details
+      className={classNames(linkDefinitions, 'webchat__link-definitions')}
+      // eslint-disable-next-line react/forbid-dom-props
+      id={id}
+      onToggle={handleToggle}
+      open={true}
+    >
+      <summary
+        aria-controls={id}
+        aria-expanded="true"
+        aria-pressed="true"
+        className="webchat__link-definitions__header"
+        ref={summaryRef}
+        role="button"
+      >
+        <div className="webchat__link-definitions__header-section webchat__link-definitions__header-section--left">
+          <div className="webchat__link-definitions__header-text">{headerText}</div>
+          <Chevron />
+        </div>
+        <div className="webchat__link-definitions__header-section webchat__link-definitions__header-section--right">
+          {accessoryComponentType && (
+            <div className="webchat__link-definitions__header-accessory">
+              {React.createElement(accessoryComponentType, accessoryProps)}
+            </div>
+          )}
+        </div>
       </summary>
       <div className="webchat__link-definitions__list" role="list">
         {childrenMap(children, child => (

package/src/LinkDefinition/private/extractHostnameWithSubdomain.ts

@@ -9,7 +9,7 @@ export default function extractHostnameWithSubdomain(urlString: string): string
 
       return host;
     }
-  } catch (error) {
+  } catch {
     // Intentionally left blank, will return `urlString`.
   }
 

package/src/LiveRegion/LiveRegionActivity.tsx

@@ -1,18 +1,16 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, { Fragment, useMemo } from 'react';
+import { any, object, pipe, readonly, type InferInput } from 'valibot';
 
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
 import activityAltText from '../Utils/activityAltText';
 import LiveRegionAttachments from './private/LiveRegionAttachments';
 import LiveRegionSuggestedActions from './private/LiveRegionSuggestedActions';
-import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
-
-import type { VFC } from 'react';
-import type { WebChatActivity } from 'botframework-webchat-core';
 
 const { useAvatarForBot, useLocalizer } = hooks;
 
@@ -29,11 +27,18 @@ const ROOT_STYLE = {
   }
 };
 
-type LiveRegionActivityProps = {
-  activity: WebChatActivity;
-};
+const liveRegionActivityPropsSchema = pipe(
+  object({
+    activity: any()
+  }),
+  readonly()
+);
+
+type LiveRegionActivityProps = InferInput<typeof liveRegionActivityPropsSchema>;
+
+function LiveRegionActivity(props: LiveRegionActivityProps) {
+  const { activity } = validateProps(liveRegionActivityPropsSchema, props);
 
-const LiveRegionActivity: VFC<LiveRegionActivityProps> = ({ activity }) => {
   const [{ initials: botInitials }] = useAvatarForBot();
   const {
     from: { role },
@@ -42,7 +47,7 @@ const LiveRegionActivity: VFC<LiveRegionActivityProps> = ({ activity }) => {
   const fallbackText: string | undefined =
     type === 'message' ? activity.channelData['webchat:fallback-text'] : undefined;
   const localize = useLocalizer();
-  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('accessible name');
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const textAlt = useMemo(() => activityAltText(activity, renderMarkdownAsHTML), [activity, renderMarkdownAsHTML]);
 
@@ -71,12 +76,7 @@ const LiveRegionActivity: VFC<LiveRegionActivityProps> = ({ activity }) => {
       )}
     </article>
   );
-};
-
-LiveRegionActivity.propTypes = {
-  activity: PropTypes.any.isRequired
-};
+}
 
 export default LiveRegionActivity;
-
-export type { LiveRegionActivityProps };
+export { liveRegionActivityPropsSchema, type LiveRegionActivityProps };

package/src/LiveRegion/private/LiveRegionSuggestedActions.tsx

@@ -1,32 +1,41 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import { validateProps } from 'botframework-webchat-api/internal';
+import React, { memo } from 'react';
+import { any, array, object, pipe, readonly, type InferInput } from 'valibot';
 
 import computeSuggestedActionText from '../../Utils/computeSuggestedActionText';
 
-import type { DirectLineSuggestedAction } from 'botframework-webchat-core';
-import type { VFC } from 'react';
+const liveRegionSuggestedActionsPropSchema = pipe(
+  object({
+    suggestedActions: pipe(
+      object({
+        // TODO: Should built `directLineCardActionSchema`.
+        actions: pipe(array(any()), readonly())
+      }),
+      readonly()
+    )
+  }),
+  readonly()
+);
 
-type LiveRegionSuggestedActionsProps = {
-  suggestedActions: DirectLineSuggestedAction;
-};
+type LiveRegionSuggestedActionsProps = InferInput<typeof liveRegionSuggestedActionsPropSchema>;
 
-const LiveRegionSuggestedActions: VFC<LiveRegionSuggestedActionsProps> = ({ suggestedActions }) =>
-  suggestedActions.actions?.length && (
-    <p className="webchat__live-region-activity__suggested-actions">
-      {suggestedActions.actions.map((action, index) => (
-        // Direct Line schema does not have key other than index.
-        // eslint-disable-next-line react/no-array-index-key
-        <button className="webchat__live-region-activity__suggested-action" key={index} tabIndex={-1} type="button">
-          {computeSuggestedActionText(action)}
-        </button>
-      ))}
-    </p>
-  );
+function LiveRegionSuggestedActions(props: LiveRegionSuggestedActionsProps) {
+  const { suggestedActions } = validateProps(liveRegionSuggestedActionsPropSchema, props);
 
-LiveRegionSuggestedActions.propTypes = {
-  suggestedActions: PropTypes.shape({
-    actions: PropTypes.array
-  }).isRequired
-};
+  return (
+    suggestedActions.actions?.length && (
+      <p className="webchat__live-region-activity__suggested-actions">
+        {suggestedActions.actions.map((action, index) => (
+          // Direct Line schema does not have key other than index.
+          // eslint-disable-next-line react/no-array-index-key
+          <button className="webchat__live-region-activity__suggested-action" key={index} tabIndex={-1} type="button">
+            {computeSuggestedActionText(action)}
+          </button>
+        ))}
+      </p>
+    )
+  );
+}
 
-export default LiveRegionSuggestedActions;
+export default memo(LiveRegionSuggestedActions);
+export { liveRegionSuggestedActionsPropSchema, type LiveRegionSuggestedActionsProps };

package/src/Middleware/Activity/createCoreMiddleware.tsx

@@ -1,4 +1,5 @@
 import { ActivityMiddleware } from 'botframework-webchat-api';
+import { getActivityLivestreamingMetadata } from 'botframework-webchat-core';
 import React from 'react';
 
 import CarouselLayout from '../../Activity/CarouselLayout';
@@ -15,59 +16,26 @@ export default function createCoreMiddleware(): ActivityMiddleware[] {
 
         const { type } = activity;
 
-        if (type === 'typing') {
-          if (
-            !(
-              'text' in activity &&
-              typeof activity.text === 'string' &&
-              activity.channelData.streamType !== 'informative'
-            )
-          ) {
-            // If it is an informative message, hide it until we have a design for informative message.
-            return false;
-          }
-
-          // Should show if this is useActiveTyping()[0][*].firstActivity, and render it with the content of lastActivity.
-          return function renderStackedLayout(renderAttachment, props) {
-            typeof props === 'undefined' &&
-              console.warn(
-                'botframework-webchat: One or more arguments were missing after passing through the activity middleware. Please check your custom activity middleware to make sure it passes all arguments.'
-              );
-
-            return (
-              <StackedLayout
-                activity={{ ...activity, type: 'message' } as any}
-                renderAttachment={renderAttachment}
-                {...props}
-              />
-            );
-          };
-        }
-
-        // Filter out activities that should not be visible
-        if (type === 'conversationUpdate' || type === 'event' || type === 'invoke') {
-          return false;
-        } else if (type === 'message') {
-          const { attachments, channelData, text } = activity;
-
-          if (
+        // Filter out activities that should not visible.
+        if (
+          type === 'conversationUpdate' ||
+          type === 'event' ||
+          type === 'invoke' ||
+          // Do not show content for contentless livestream interims, or finalized activity without content.
+          (type === 'typing' &&
+            (getActivityLivestreamingMetadata(activity)?.type === 'contentless' ||
+              !(activity['text'] || activity.attachments?.length > 0))) ||
+          (type === 'message' &&
             // Do not show postback
-            channelData?.postBack ||
-            // Do not show messageBack if displayText is undefined
-            (channelData?.messageBack && !channelData.messageBack.displayText) ||
-            // Do not show empty bubbles (no text and attachments, and not "typing")
-            !(text || attachments?.length)
-          ) {
-            return false;
-          }
-        }
-
-        if (type === 'message' || type === 'typing') {
-          if (
-            type === 'message' &&
-            (activity.attachments?.length || 0) > 1 &&
-            activity.attachmentLayout === 'carousel'
-          ) {
+            (activity.channelData?.postBack ||
+              // Do not show messageBack if displayText is undefined
+              (activity.channelData?.messageBack && !activity.channelData.messageBack.displayText) ||
+              // Do not show empty bubbles (no text and attachments)
+              !(activity.text || activity.attachments?.length)))
+        ) {
+          return false;
+        } else if (type === 'message' || type === 'typing') {
+          if ((activity.attachments?.length || 0) > 1 && activity.attachmentLayout === 'carousel') {
             // The following line is not a React functional component, it's a render function called by useCreateActivityRenderer() hook.
             // The function signature need to be compatible with older version of activity middleware, which was:
             //

package/src/Middleware/ActivityGrouping/createDefaultActivityGroupingDecoratorMiddleware.tsx

@@ -0,0 +1,22 @@
+import {
+  type DecoratorMiddleware,
+  type DecoratorMiddlewareInit,
+  type DecoratorMiddlewareTypes
+} from 'botframework-webchat-api/decorator';
+import RenderActivityGrouping from './ui/RenderActivityGrouping';
+import SenderGrouping from './ui/SenderGrouping/SenderGrouping';
+import StatusGrouping from './ui/StatusGrouping/StatusGrouping';
+
+export default function createDefaultActivityGroupingDecoratorMiddleware(): readonly DecoratorMiddleware[] {
+  return Object.freeze([
+    (init: DecoratorMiddlewareInit) =>
+      init === 'activity grouping' &&
+      ((() =>
+        ({ groupingName }) =>
+          groupingName === 'sender'
+            ? SenderGrouping
+            : groupingName === 'status'
+              ? StatusGrouping
+              : RenderActivityGrouping) satisfies DecoratorMiddlewareTypes['activity grouping'])
+  ]);
+}

package/src/Middleware/ActivityGrouping/ui/RenderActivityGrouping.tsx

@@ -0,0 +1,33 @@
+import { hooks } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { Fragment, memo } from 'react';
+import useGetRenderActivityCallback from '../../../providers/RenderingActivities/useGetRenderActivityCallback';
+import TranscriptActivity from '../../../Transcript/TranscriptActivity';
+
+const { useGetKeyByActivity } = hooks;
+
+type RenderActivityGroupingProps = Readonly<{
+  activities: readonly WebChatActivity[];
+}>;
+
+const RenderActivityGrouping = ({ activities }: RenderActivityGroupingProps) => {
+  const getKeyByActivity = useGetKeyByActivity();
+  const getRenderActivityCallback = useGetRenderActivityCallback();
+
+  return (
+    <Fragment>
+      {activities.map(activity => (
+        <TranscriptActivity
+          activity={activity}
+          key={getKeyByActivity(activity)}
+          renderActivity={getRenderActivityCallback(activity)}
+        />
+      ))}
+    </Fragment>
+  );
+};
+
+RenderActivityGrouping.displayName = 'RenderActivityGrouping';
+
+export default memo(RenderActivityGrouping);
+export { type RenderActivityGroupingProps };

package/src/Middleware/ActivityGrouping/ui/SenderGrouping/SenderGrouping.tsx

@@ -0,0 +1,49 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo } from 'react';
+import { any, array, minLength, object, optional, parse, pipe, readonly, transform, type InferOutput } from 'valibot';
+import reactNode from '../../../../types/internal/reactNode';
+import SenderGroupingContext, { type SenderGroupingContextType } from './private/SenderGroupingContext';
+
+const senderGroupingPropsSchema = pipe(
+  object({
+    activities: pipe(
+      array(
+        pipe(
+          any(),
+          transform(value => value as WebChatActivity)
+        )
+      ),
+      minLength(1, 'botframework-webchat: "activities" must have at least 1 activity'),
+      readonly()
+    ),
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type SenderGroupingProps = InferOutput<typeof senderGroupingPropsSchema>;
+
+const SenderGrouping = (props: SenderGroupingProps) => {
+  const { activities, children } = parse(senderGroupingPropsSchema, props);
+
+  // "activities" props must have at least 1 activity, first/last must not be undefined.
+  const firstActivity = activities[0] as WebChatActivity;
+  // eslint-disable-next-line no-magic-numbers
+  const lastActivity = activities.at(-1) as WebChatActivity;
+
+  const context = useMemo<SenderGroupingContextType>(
+    () =>
+      Object.freeze({
+        firstActivityState: Object.freeze<[WebChatActivity]>([firstActivity]),
+        lastActivityState: Object.freeze<[WebChatActivity]>([lastActivity])
+      }),
+    [firstActivity, lastActivity]
+  );
+
+  return <SenderGroupingContext.Provider value={context}>{children}</SenderGroupingContext.Provider>;
+};
+
+SenderGrouping.displayName = 'SenderGrouping';
+
+export default memo(SenderGrouping);
+export { type SenderGroupingProps };

package/src/Middleware/ActivityGrouping/ui/SenderGrouping/private/SenderGroupingContext.ts

@@ -0,0 +1,18 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { createContext } from 'react';
+
+type SenderGroupingContextType = Readonly<{
+  firstActivityState: readonly [WebChatActivity];
+  lastActivityState: readonly [WebChatActivity];
+}>;
+
+const EMPTY_STATE = Object.freeze([undefined] as const);
+
+// SenderGroupingContext may not available if `styleOptions.groupActivitiesBy` does not have `sender`.
+const SenderGroupingContext = createContext<SenderGroupingContextType>({
+  firstActivityState: EMPTY_STATE,
+  lastActivityState: EMPTY_STATE
+});
+
+export default SenderGroupingContext;
+export { type SenderGroupingContextType };

package/src/Middleware/ActivityGrouping/ui/SenderGrouping/private/useSenderGroupingContext.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import SenderGroupingContext, { type SenderGroupingContextType } from './SenderGroupingContext';
+
+export default function useSenderGroupingContext(): SenderGroupingContextType {
+  return useContext(SenderGroupingContext);
+}

package/src/Middleware/ActivityGrouping/ui/SenderGrouping/useFirstActivity.ts

@@ -0,0 +1,6 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import useSenderGroupingContext from './private/useSenderGroupingContext';
+
+export default function useFirstActivity(): readonly [WebChatActivity] {
+  return useSenderGroupingContext().firstActivityState;
+}

package/src/Middleware/ActivityGrouping/ui/SenderGrouping/useLastActivity.ts

@@ -0,0 +1,6 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import useSenderGroupingContext from './private/useSenderGroupingContext';
+
+export default function useLastActivity(): readonly [WebChatActivity] {
+  return useSenderGroupingContext().lastActivityState;
+}

package/src/Middleware/ActivityGrouping/ui/StatusGrouping/StatusGrouping.tsx

@@ -0,0 +1,49 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo } from 'react';
+import { any, array, minLength, object, optional, parse, pipe, readonly, transform, type InferOutput } from 'valibot';
+import reactNode from '../../../../types/internal/reactNode';
+import StatusGroupingContext, { type StatusGroupingContextType } from './private/StatusGroupingContext';
+
+const statusGroupingPropsSchema = pipe(
+  object({
+    activities: pipe(
+      array(
+        pipe(
+          any(),
+          transform(value => value as WebChatActivity)
+        )
+      ),
+      minLength(1, 'botframework-webchat: "activities" must have at least 1 activity'),
+      readonly()
+    ),
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type StatusGroupingProps = InferOutput<typeof statusGroupingPropsSchema>;
+
+const StatusGrouping = (props: StatusGroupingProps) => {
+  const { activities, children } = parse(statusGroupingPropsSchema, props);
+
+  // "activities" props must have at least 1 activity, first/last must not be undefined.
+  const firstActivity = activities[0] as WebChatActivity;
+  // eslint-disable-next-line no-magic-numbers
+  const lastActivity = activities.at(-1) as WebChatActivity;
+
+  const context = useMemo<StatusGroupingContextType>(
+    () =>
+      Object.freeze({
+        firstActivityState: Object.freeze<[WebChatActivity]>([firstActivity]),
+        lastActivityState: Object.freeze<[WebChatActivity]>([lastActivity])
+      }),
+    [firstActivity, lastActivity]
+  );
+
+  return <StatusGroupingContext.Provider value={context}>{children}</StatusGroupingContext.Provider>;
+};
+
+StatusGrouping.displayName = 'StatusGrouping';
+
+export default memo(StatusGrouping);
+export { type StatusGroupingProps };

package/src/Middleware/ActivityGrouping/ui/StatusGrouping/private/StatusGroupingContext.ts

@@ -0,0 +1,18 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { createContext } from 'react';
+
+type StatusGroupingContextType = Readonly<{
+  firstActivityState: readonly [WebChatActivity];
+  lastActivityState: readonly [WebChatActivity];
+}>;
+
+const EMPTY_STATE = Object.freeze([undefined] as const);
+
+// StatusGroupingContext may not available if `styleOptions.groupActivitiesBy` does not have `status`.
+const StatusGroupingContext = createContext<StatusGroupingContextType>({
+  firstActivityState: EMPTY_STATE,
+  lastActivityState: EMPTY_STATE
+});
+
+export default StatusGroupingContext;
+export { type StatusGroupingContextType };

package/src/Middleware/ActivityGrouping/ui/StatusGrouping/private/useStatusGroupingContext.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import StatusGroupingContext, { type StatusGroupingContextType } from './StatusGroupingContext';
+
+export default function useStatusGroupingContext(): StatusGroupingContextType {
+  return useContext(StatusGroupingContext);
+}

package/src/Middleware/ActivityGrouping/ui/StatusGrouping/useFirstActivity.ts

@@ -0,0 +1,6 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import useStatusGroupingContext from './private/useStatusGroupingContext';
+
+export default function useFirstActivity(): readonly [WebChatActivity] {
+  return useStatusGroupingContext().firstActivityState;
+}

package/src/Middleware/ActivityGrouping/ui/StatusGrouping/useLastActivity.ts

@@ -0,0 +1,6 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import useStatusGroupingContext from './private/useStatusGroupingContext';
+
+export default function useLastActivity(): readonly [WebChatActivity] {
+  return useStatusGroupingContext().lastActivityState;
+}

package/src/Middleware/ActivityStatus/createTimestampMiddleware.tsx

@@ -20,9 +20,9 @@ export default function createTimestampMiddleware(): ActivityStatusMiddleware {
         // If "hideTimestamp" is set, we will not render the visual timestamp. But continue to render the screen reader only version.
         return <AbsoluteTime hide={true} value={activity.timestamp} />;
       } else if (activity.from.role === 'bot') {
-        return <OthersActivityStatus activity={activity} />;
+        return <OthersActivityStatus activity={activity} className={'webchat__activity-status--slotted'} />;
       }
 
-      return <SelfActivityStatus activity={activity} />;
+      return <SelfActivityStatus activity={activity} className={'webchat__activity-status--slotted'} />;
     };
 }