botframework-webchat-component 4.18.2 → 4.19.0

package/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.tsx

@@ -0,0 +1,258 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { hooks } from 'botframework-webchat-api';
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+import React, { Fragment, memo, useCallback, useMemo, useState, type MouseEventHandler } from 'react';
+import cx from 'classnames';
+import { array, custom, is, minLength, object, optional, pipe, readonly, string, type InferOutput } from 'valibot';
+
+import StackedLayoutMain from '../../../../../Activity/StackedLayoutMain';
+import StackedLayoutMessageStatus from '../../../../../Activity/StackedLayoutMessageStatus';
+import StackedLayoutRoot from '../../../../../Activity/StackedLayoutRoot';
+import StackedLayoutStatus from '../../../../../Activity/StackedLayoutStatus';
+import useActivityElementMapRef from '../../../../../providers/ChatHistoryDOM/useActivityElementRef';
+import useActiveDescendantId from '../../../../../providers/TranscriptFocus/useActiveDescendantId';
+import useFocusByGroupKey from '../../../../../providers/TranscriptFocus/useFocusByGroupKey';
+import useGetGroupDescendantIdByActivityKey from '../../../../../providers/TranscriptFocus/useGetGroupDescendantIdByActivityKey';
+import FocusTrap from '../../../../../Transcript/FocusTrap';
+import useRenderActivityProps from '../../../../../Transcript/hooks/useRenderActivityProps';
+import {
+  TranscriptActivityList,
+  TranscriptFocusContent,
+  TranscriptFocusContentActiveDescendant,
+  TranscriptFocusContentOverlay,
+  TranscriptFocusIndicator
+} from '../../../../../Transcript/TranscriptFocus';
+import { android } from '../../../../../Utils/detectBrowser';
+import isZeroOrPositive from '../../../../../Utils/isZeroOrPositive';
+import CollapsibleGrouping from '../CollapsibleGrouping';
+import CollapsibleGroupingList from '../CollapsibleGroupingList';
+import CollapsibleGroupingTitle from '../CollapsibleGroupingTitle';
+import usePartGroupingLogicalGroup from './usePartGroupingLogicalGroup';
+
+import styles from './PartGroupingActivity.module.css';
+
+const { useAvatarForBot, useGetKeyByActivity, useLocalizer, useStyleOptions } = hooks;
+
+const partGroupingActivityPropsSchema = pipe(
+  object({
+    activities: pipe(
+      array(pipe(custom<Readonly<WebChatActivity>>(value => is(object({}), value)))),
+      minLength(1, 'botframework-webchat: "activities" must have at least 1 activity'),
+      readonly()
+    ),
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type PartGroupingActivityProps = InferOutput<typeof partGroupingActivityPropsSchema>;
+
+const partGroupingFocusableActivityPropsSchema = pipe(
+  object({
+    activity: custom<WebChatActivity>(value => is(object({}), value)),
+    children: optional(reactNode()),
+    className: optional(string()),
+    groupKey: string()
+  }),
+  readonly()
+);
+
+type FocusablePartGroupingActivityProps = InferOutput<typeof partGroupingFocusableActivityPropsSchema>;
+
+// eslint-disable-next-line prefer-arrow-callback
+const FocusablePartGroupingActivity = memo(function FocusablePartGroupingActivity(
+  props: FocusablePartGroupingActivityProps
+) {
+  const { activity, children, className, groupKey } = validateProps(partGroupingFocusableActivityPropsSchema, props);
+
+  const [activeDescendantId] = useActiveDescendantId();
+
+  const getGroupDescendantIdByActivityKey = useGetGroupDescendantIdByActivityKey();
+  const focusByGroupKey = useFocusByGroupKey();
+
+  const getKeyByActivity = useGetKeyByActivity();
+  const groupingActivityDescendantId = getGroupDescendantIdByActivityKey(getKeyByActivity(activity));
+
+  const focusSelf = useCallback<(withFocus?: boolean) => void>(
+    (withFocus?: boolean) => focusByGroupKey(groupKey, withFocus),
+    [groupKey, focusByGroupKey]
+  );
+
+  // When a child of the group receives focus, notify the transcript to set the `aria-activedescendant` to this activity.
+  const handleDescendantFocus: () => void = useCallback(() => focusSelf(false), [focusSelf]);
+
+  // When receive Escape key from descendant, focus back to the group.
+  const handleLeaveFocusTrap = useCallback(() => focusSelf(), [focusSelf]);
+
+  // When the user press UP/DOWN arrow keys, we put a visual focus indicator around the focused group.
+  // We should do the same for mouse, when the user click on the activity, we should also put a visual focus indicator around the activity.
+  // We are doing it in event capture phase to prevent descendants from stopping event propagation to us.
+  const handleMouseDownCapture: MouseEventHandler = useCallback(() => focusSelf(false), [focusSelf]);
+
+  const isActiveDescendant = groupingActivityDescendantId === activeDescendantId;
+
+  const activityElementMapRef = useActivityElementMapRef();
+
+  const groupCallbackRef = useCallback(
+    (activityElement: HTMLElement) => {
+      activityElement
+        ? activityElementMapRef.current.set(groupKey, activityElement)
+        : activityElementMapRef.current.delete(groupKey);
+    },
+    [activityElementMapRef, groupKey]
+  );
+
+  return (
+    <TranscriptFocusContent
+      className={className}
+      focused={isActiveDescendant}
+      onMouseDownCapture={handleMouseDownCapture}
+      ref={groupCallbackRef}
+      role="article"
+    >
+      <FocusTrap
+        onFocus={handleDescendantFocus}
+        onLeave={handleLeaveFocusTrap}
+        targetClassName="webchat__basic-transcript__group-focus-target"
+      >
+        {children}
+      </FocusTrap>
+      <TranscriptFocusContentOverlay>
+        {!android && <TranscriptFocusContentActiveDescendant id={groupingActivityDescendantId} />}
+        <TranscriptFocusIndicator type="content" />
+      </TranscriptFocusContentOverlay>
+    </TranscriptFocusContent>
+  );
+});
+
+function PartGroupingActivity(props: PartGroupingActivityProps) {
+  const localize = useLocalizer();
+  const { activities, children } = validateProps(partGroupingActivityPropsSchema, props);
+
+  const classNames = useStyles(styles);
+  const getKeyByActivity = useGetKeyByActivity();
+  const [{ partGroupDefaultOpen }] = useStyleOptions();
+  const [isGroupOpen, setIsGroupOpen] = useState(partGroupDefaultOpen);
+
+  const messages = useMemo(
+    () => activities.map(activity => getOrgSchemaMessage(activity.entities)).filter(Boolean),
+    [activities]
+  );
+  // eslint-disable-next-line no-magic-numbers
+  const lastMessage = messages.at(-1);
+
+  const activityKeys = useMemo(
+    () => activities.map(activity => getKeyByActivity(activity)),
+    [activities, getKeyByActivity]
+  );
+
+  const groupKey = usePartGroupingLogicalGroup({
+    activityKeys,
+    isCollapsed: !isGroupOpen
+  });
+
+  const firstActivity = activities.at(0);
+  // eslint-disable-next-line no-magic-numbers
+  const lastActivity = activities.at(-1);
+
+  const currentMessage = useMemo(
+    () => messages.find(message => message.creativeWorkStatus[0] === 'Incomplete') || lastMessage,
+    [messages, lastMessage]
+  );
+
+  const { renderAvatar, showCallout } = useRenderActivityProps(firstActivity);
+  const { renderActivityStatus, hideTimestamp } = useRenderActivityProps(lastActivity);
+  const [{ initials: botInitials }] = useAvatarForBot();
+
+  const hasAvatar = botInitials || typeof botInitials === 'string';
+  const showAvatar = showCallout && hasAvatar && !!renderAvatar;
+  const [{ bubbleNubOffset }] = useStyleOptions();
+
+  const topAlignedCallout = isZeroOrPositive(bubbleNubOffset);
+
+  // The HowTo entity (the group root) may carry an explicit `creativeWorkStatus` and `abstract`.
+  // When present, it takes precedence over status derived from individual messages.
+  const [howToAbstract, howToStatus] = useMemo<[string | undefined, string | undefined]>(() => {
+    const howTo = messages.find(message => message.isPartOf[0]?.creativeWorkStatus[0])?.isPartOf[0];
+
+    return [howTo?.abstract[0], howTo?.creativeWorkStatus[0]];
+  }, [messages]);
+
+  const defaultWorkStatus = useMemo<'Incomplete' | undefined>(
+    () => (messages.some(message => message.creativeWorkStatus[0]) ? 'Incomplete' : undefined),
+    [messages]
+  );
+
+  // Group status resolution:
+  // 1. If the HowTo entity has an explicit `creativeWorkStatus`, use it.
+  // 2. Otherwise, derive from the active message: find the first 'Incomplete' message's status.
+  // 3. Fall back to `defaultWorkStatus` which is 'Incomplete' if any message has a `creativeWorkStatus` property.
+  const currentGroupStatus: string | undefined =
+    howToStatus || currentMessage?.creativeWorkStatus[0] || defaultWorkStatus;
+
+  /**
+   * The idea behind group header is that it displays the state of the entire group:
+   * - We first check if the HowTo entity (isPartOf) has an explicit `creativeWorkStatus`.
+   * - If it does, we use it directly as the group status.
+   * - Otherwise, we derive status from messages: find the active 'Incomplete' message.
+   * - For the title we check if the current group status is 'Incomplete'.
+   * - If it is 'Incomplete', we show the abstract of the first message with 'Incomplete' status.
+   * - If not, we fall back to a default title.
+   */
+  const groupHeader = useMemo(
+    () => (
+      <Fragment>
+        {(howToStatus || defaultWorkStatus) && (
+          <StackedLayoutMessageStatus
+            className={classNames['part-grouping-activity__message-status']}
+            creativeWorkStatus={currentGroupStatus}
+          />
+        )}
+        <CollapsibleGroupingTitle>
+          {currentGroupStatus === 'Incomplete' || howToAbstract
+            ? howToAbstract || currentMessage?.abstract[0] || localize('COLLAPSIBLE_GROUPING_TITLE')
+            : localize('COLLAPSIBLE_GROUPING_TITLE')}
+        </CollapsibleGroupingTitle>
+      </Fragment>
+    ),
+    [classNames, currentGroupStatus, currentMessage?.abstract, defaultWorkStatus, howToAbstract, howToStatus, localize]
+  );
+
+  return (
+    <FocusablePartGroupingActivity
+      activity={firstActivity}
+      className={classNames['part-grouping-activity']}
+      groupKey={groupKey}
+    >
+      <StackedLayoutRoot
+        hideAvatar={hasAvatar && !showAvatar}
+        isGroup={true}
+        showAvatar={showAvatar}
+        topCallout={topAlignedCallout}
+      >
+        <StackedLayoutMain avatar={showAvatar && renderAvatar && renderAvatar()}>
+          <CollapsibleGrouping
+            className={cx(classNames['part-grouping-activity__collapsible'], {
+              [classNames['part-grouping-activity__collapsible--open']]: isGroupOpen
+            })}
+            header={groupHeader}
+            isOpen={isGroupOpen}
+            onToggle={setIsGroupOpen}
+          >
+            <CollapsibleGroupingList
+              className={classNames['part-grouping-activity__activities']}
+              tag={TranscriptActivityList}
+            >
+              {children}
+            </CollapsibleGroupingList>
+          </CollapsibleGrouping>
+        </StackedLayoutMain>
+        {renderActivityStatus && <StackedLayoutStatus>{renderActivityStatus({ hideTimestamp })}</StackedLayoutStatus>}
+      </StackedLayoutRoot>
+    </FocusablePartGroupingActivity>
+  );
+}
+
+export default memo(PartGroupingActivity);
+export { type PartGroupingActivityProps, partGroupingActivityPropsSchema };

package/src/Middleware/ActivityGrouping/ui/PartGrouping/private/usePartGroupingLogicalGroup.ts

@@ -0,0 +1,41 @@
+import random from 'math-random';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { useStateWithRef } from 'use-state-with-ref';
+
+import { useAddLogicalGrouping, useRemoveLogicalGrouping } from '../../../../../providers/ActivityLogicalGrouping';
+
+type UsePartGroupingLogicalGroupOptions = {
+  activityKeys: readonly string[];
+  isCollapsed: boolean;
+};
+
+function usePartGroupingLogicalGroup({ activityKeys, isCollapsed }: UsePartGroupingLogicalGroupOptions): string {
+  // eslint-disable-next-line no-magic-numbers
+  const [partGroupKey, _setPartKey, partKeyRef] = useStateWithRef(() => `part-${random().toString(36).slice(2, 11)}`);
+  const addLogicalGrouping = useAddLogicalGrouping();
+  const removeLogicalGrouping = useRemoveLogicalGrouping();
+
+  const isCollapsedRef = useRefFrom(isCollapsed);
+
+  const getGroupState = useCallback(() => ({ isCollapsed: isCollapsedRef.current }), [isCollapsedRef]);
+
+  useMemo(
+    () =>
+      addLogicalGrouping({
+        key: partKeyRef.current,
+        activityKeys: Array.from(activityKeys),
+        getGroupState
+      }),
+    [activityKeys, addLogicalGrouping, getGroupState, partKeyRef]
+  );
+
+  const removeLogicalGroupingRef = useRefFrom(removeLogicalGrouping);
+
+  useEffect(() => () => removeLogicalGroupingRef.current(partKeyRef.current), [partKeyRef, removeLogicalGroupingRef]);
+
+  return partGroupKey;
+}
+
+export default usePartGroupingLogicalGroup;
+export { type UsePartGroupingLogicalGroupOptions };

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

@@ -0,0 +1,37 @@
+import { hooks } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useCallback, useMemo } from 'react';
+
+import useActivityElementMapRef from '../../../providers/ChatHistoryDOM/useActivityElementRef';
+import useActivityRendererMap from '../../../providers/RenderingActivities/useActivityRendererMap';
+import ActivityRow from '../../../Transcript/ActivityRow';
+import LegacyActivityBridgeComposer from './LegacyActivityBridgeComposer';
+
+const { useGetKeyByActivity } = hooks;
+
+function RenderActivity({ activity }: { readonly activity: WebChatActivity }) {
+  const activityElementMapRef = useActivityElementMapRef();
+  const getKeyByActivity = useGetKeyByActivity();
+
+  const activityKey: string = useMemo(() => getKeyByActivity(activity), [activity, getKeyByActivity]);
+  const activityCallbackRef = useCallback(
+    (activityElement: HTMLElement) => {
+      activityElement
+        ? activityElementMapRef.current.set(activityKey, activityElement)
+        : activityElementMapRef.current.delete(activityKey);
+    },
+    [activityElementMapRef, activityKey]
+  );
+
+  const [activityRendererMap] = useActivityRendererMap();
+
+  const activityNode = activityRendererMap.get(activity)?.({});
+
+  return (
+    <ActivityRow activity={activity} ref={activityCallbackRef}>
+      <LegacyActivityBridgeComposer activity={activity}>{activityNode}</LegacyActivityBridgeComposer>
+    </ActivityRow>
+  );
+}
+
+export default memo(RenderActivity);

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

@@ -0,0 +1,41 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { hooks } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { Fragment, memo } from 'react';
+import { array, custom, is, object, pipe, readonly, type InferInput } from 'valibot';
+
+import useActivityRendererMap from '../../../providers/RenderingActivities/useActivityRendererMap';
+import RenderActivity from './RenderActivity';
+
+const { useGetKeyByActivity } = hooks;
+
+const renderActivityGroupingPropsSchema = pipe(
+  object({
+    activities: pipe(array(custom<WebChatActivity>(value => is(object({}), value))), readonly())
+  }),
+  readonly()
+);
+
+type RenderActivityGroupingProps = Readonly<InferInput<typeof renderActivityGroupingPropsSchema>>;
+
+function RenderActivityGrouping(props: RenderActivityGroupingProps) {
+  const { activities } = validateProps(renderActivityGroupingPropsSchema, props);
+
+  const [activityRendererMap] = useActivityRendererMap();
+  const getKeyByActivity = useGetKeyByActivity();
+
+  return (
+    <Fragment>
+      {activities.map(activity => {
+        const children = activityRendererMap.get(activity)?.({});
+
+        // TODO: [P0] Activity key could be reused by multiple activities of same livestream group.
+        //            We should update ActivityKeyer to have another more unique ID.
+        return children && <RenderActivity activity={activity} key={getKeyByActivity(activity)} />;
+      })}
+    </Fragment>
+  );
+}
+
+export default memo(RenderActivityGrouping);
+export { renderActivityGroupingPropsSchema, type RenderActivityGroupingProps };

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

@@ -0,0 +1,49 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { reactNode } from '@msinternal/botframework-webchat-react-valibot';
+import React, { memo, useMemo } from 'react';
+import { any, array, minLength, object, optional, parse, pipe, readonly, transform, type InferOutput } from 'valibot';
+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 { reactNode } from '@msinternal/botframework-webchat-react-valibot';
+import React, { memo, useMemo } from 'react';
+import { any, array, minLength, object, optional, parse, pipe, readonly, transform, type InferOutput } from 'valibot';
+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} slotted={true} />;
       }
 
-      return <SelfActivityStatus activity={activity} />;
+      return <SelfActivityStatus activity={activity} slotted={true} />;
     };
 }

package/src/Middleware/Avatar/DefaultAvatar.tsx

@@ -0,0 +1,61 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+import { boolean, never, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import ImageAvatar from '../../Avatar/ImageAvatar';
+import InitialsAvatar from '../../Avatar/InitialsAvatar';
+import { useStyleToEmotionObject } from '../../hooks/internal/styleToEmotionObject';
+import useStyleSet from '../../hooks/useStyleSet';
+
+const ROOT_STYLE = {
+  overflow: ['hidden', 'clip'],
+  position: 'relative',
+
+  '> *': {
+    left: 0,
+    position: 'absolute',
+    top: 0
+  }
+};
+
+const defaultAvatarPropsSchema = pipe(
+  object({
+    'aria-hidden': optional(boolean(), true),
+    children: optional(never()),
+    className: optional(string()),
+    fromUser: boolean()
+  }),
+  readonly()
+);
+
+type DefaultAvatarProps = InferInput<typeof defaultAvatarPropsSchema>;
+
+function DefaultAvatar(props: DefaultAvatarProps) {
+  const { 'aria-hidden': ariaHidden, className, fromUser } = validateProps(defaultAvatarPropsSchema, props, 'strict');
+
+  const [{ avatar: avatarStyleSet }] = useStyleSet();
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+  return (
+    <div
+      aria-hidden={ariaHidden}
+      className={classNames(
+        'webchat__defaultAvatar',
+        { 'webchat__defaultAvatar--fromUser': fromUser },
+        rootClassName,
+        avatarStyleSet + '',
+        className
+      )}
+    >
+      <InitialsAvatar fromUser={fromUser} />
+      <ImageAvatar fromUser={fromUser} />
+    </div>
+  );
+}
+
+DefaultAvatar.displayName = 'DefaultAvatar';
+
+export default memo(DefaultAvatar);
+
+export { defaultAvatarPropsSchema, type DefaultAvatarProps };

package/src/Middleware/Avatar/createDefaultAvatarPolymiddleware.tsx

@@ -0,0 +1,22 @@
+import type { StyleOptions } from 'botframework-webchat-api';
+import {
+  avatarComponent,
+  createAvatarPolymiddleware,
+  // Required but unused, for type portability.
+  type __INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol
+} from 'botframework-webchat-api/middleware.js';
+import DefaultAvatar from './DefaultAvatar';
+
+function createDefaultAvatarMiddleware(styleOptions: StyleOptions | undefined) {
+  const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions ?? {};
+
+  return createAvatarPolymiddleware(_next => ({ activity }) => {
+    const fromUser = activity.from?.role === 'user';
+
+    return (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials)
+      ? avatarComponent(DefaultAvatar, Object.freeze({ fromUser }))
+      : undefined;
+  });
+}
+
+export default createDefaultAvatarMiddleware;