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

package/src/ConnectivityStatus/Connecting.tsx

@@ -0,0 +1,77 @@
+import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
+import classNames from 'classnames';
+import React, { Fragment, memo, useState } from 'react';
+import { boolean, object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import useForceRender from '../hooks/internal/useForceRender';
+import useTimer from '../hooks/internal/useTimer';
+import useStyleSet from '../hooks/useStyleSet';
+import ScreenReaderText from '../ScreenReaderText';
+import SpinnerAnimation from './Assets/SpinnerAnimation';
+import WarningNotificationIcon from './Assets/WarningNotificationIcon';
+
+const { useDirection, useLocalizer, usePonyfill, useStyleOptions } = hooks;
+
+const connectivityStatusConnectingPropsSchema = pipe(
+  object({
+    reconnect: optional(boolean())
+  }),
+  readonly()
+);
+
+type ConnectivityStatusConnectingProps = InferInput<typeof connectivityStatusConnectingPropsSchema>;
+
+function ConnectivityStatusConnecting(props: ConnectivityStatusConnectingProps) {
+  const { reconnect = false } = validateProps(connectivityStatusConnectingPropsSchema, props);
+
+  const [{ Date }] = usePonyfill();
+  const [{ slowConnectionAfter }] = useStyleOptions();
+  const [
+    { connectivityNotification: connectivityNotificationStyleSet, warningNotification: warningNotificationStyleSet }
+  ] = useStyleSet();
+  const [direction] = useDirection();
+  const [initialRenderAt] = useState(() => Date.now());
+  const forceRender = useForceRender();
+  const localize = useLocalizer();
+
+  const initialConnectionText = localize('CONNECTIVITY_STATUS_ALT_CONNECTING');
+  const interruptedConnectionText = localize('CONNECTIVITY_STATUS_ALT_RECONNECTING');
+  const slowConnectionText = localize('CONNECTIVITY_STATUS_ALT_SLOW_CONNECTION');
+
+  useTimer(initialRenderAt + slowConnectionAfter, forceRender);
+
+  const now = Date.now();
+  const slow = now >= initialRenderAt + slowConnectionAfter;
+
+  return slow ? (
+    <Fragment>
+      <ScreenReaderText text={localize('CONNECTIVITY_STATUS_ALT', slowConnectionText)} />
+      <div
+        aria-hidden={true}
+        className={classNames('webchat__connectivityStatus', warningNotificationStyleSet + '')}
+        dir={direction}
+      >
+        <WarningNotificationIcon />
+        {slowConnectionText}
+      </div>
+    </Fragment>
+  ) : (
+    <Fragment>
+      <ScreenReaderText
+        text={localize('CONNECTIVITY_STATUS_ALT', reconnect ? interruptedConnectionText : initialConnectionText)}
+      />
+      <div
+        aria-hidden={true}
+        className={classNames('webchat__connectivityStatus', connectivityNotificationStyleSet + '')}
+        dir={direction}
+      >
+        <SpinnerAnimation />
+        {reconnect ? interruptedConnectionText : initialConnectionText}
+      </div>
+    </Fragment>
+  );
+}
+
+export default memo(ConnectivityStatusConnecting);
+export { connectivityStatusConnectingPropsSchema, type ConnectivityStatusConnectingProps };

package/src/Dictation.js

@@ -3,7 +3,7 @@ import { hooks } from 'botframework-webchat-api';
 import { useSetDictateState } from 'botframework-webchat-api/internal';
 import { Constants } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Composer as DictateComposer } from 'react-dictate-button';
 
 import useResumeAudioContext from './hooks/internal/useResumeAudioContext';
@@ -11,17 +11,17 @@ import useSettableDictateAbortable from './hooks/internal/useSettableDictateAbor
 import useWebSpeechPonyfill from './hooks/useWebSpeechPonyfill';
 
 const {
-  useActivities,
   useDictateInterims,
   useDictateState,
-  useDisabled,
   useEmitTypingIndicator,
   useLanguage,
   useSendBoxValue,
   useSendTypingIndicator,
   useShouldSpeakIncomingActivity,
   useStopDictate,
-  useSubmitSendBox
+  useStyleOptions,
+  useSubmitSendBox,
+  useUIState
 } = hooks;
 
 const {
@@ -34,28 +34,21 @@ const Dictation = ({ onError }) => {
   const [, setSendBox] = useSendBoxValue();
   const [, setShouldSpeakIncomingActivity] = useShouldSpeakIncomingActivity();
   const [{ SpeechGrammarList, SpeechRecognition } = {}] = useWebSpeechPonyfill();
-  const [activities] = useActivities();
+  const [{ speechRecognitionContinuous }] = useStyleOptions();
   const [dictateState] = useDictateState();
-  const [disabled] = useDisabled();
   const [sendTypingIndicator] = useSendTypingIndicator();
   const [speechLanguage] = useLanguage('speech');
+  const [uiState] = useUIState();
   const emitTypingIndicator = useEmitTypingIndicator();
   const resumeAudioContext = useResumeAudioContext();
   const setDictateState = useSetDictateState();
   const stopDictate = useStopDictate();
   const submitSendBox = useSubmitSendBox();
 
-  const numSpeakingActivities = useMemo(
-    () => activities.filter(({ channelData: { speak } = {} }) => speak).length,
-    [activities]
-  );
-
   const handleDictate = useCallback(
     ({ result: { confidence, transcript } = {} }) => {
       if (dictateState === DICTATING || dictateState === STARTING) {
         setDictateInterims([]);
-        setDictateState(IDLE);
-        stopDictate();
 
         if (transcript) {
           setSendBox(transcript);
@@ -64,15 +57,7 @@ const Dictation = ({ onError }) => {
         }
       }
     },
-    [
-      dictateState,
-      setDictateInterims,
-      setDictateState,
-      stopDictate,
-      setSendBox,
-      submitSendBox,
-      setShouldSpeakIncomingActivity
-    ]
+    [dictateState, setDictateInterims, setSendBox, submitSendBox, setShouldSpeakIncomingActivity]
   );
 
   const handleDictating = useCallback(
@@ -89,6 +74,11 @@ const Dictation = ({ onError }) => {
     [dictateState, emitTypingIndicator, sendTypingIndicator, setDictateAbortable, setDictateInterims, setDictateState]
   );
 
+  const handleEnd = useCallback(() => {
+    dictateState !== IDLE && setDictateState(IDLE);
+    (dictateState === DICTATING || dictateState === STARTING) && stopDictate();
+  }, [dictateState, setDictateState, stopDictate]);
+
   const handleError = useCallback(
     event => {
       dictateState !== IDLE && setDictateState(IDLE);
@@ -107,13 +97,15 @@ const Dictation = ({ onError }) => {
 
   return (
     <DictateComposer
+      continuous={speechRecognitionContinuous}
       lang={speechLanguage}
       onDictate={handleDictate}
+      onEnd={handleEnd}
       onError={handleError}
       onProgress={handleDictating}
       speechGrammarList={SpeechGrammarList}
       speechRecognition={SpeechRecognition}
-      started={!disabled && (dictateState === STARTING || dictateState === DICTATING) && !numSpeakingActivities}
+      started={uiState !== 'disabled' && (dictateState === STARTING || dictateState === DICTATING)}
     />
   );
 };

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/LinkDefinitionItem.tsx

@@ -5,12 +5,22 @@ import ItemBody from './private/ItemBody';
 import extractHostnameWithSubdomain from './private/extractHostnameWithSubdomain';
 
 type Props = Readonly<{
-  badgeName?: string;
-  badgeTitle?: string;
+  // The text (usually a number) displayed to the left of the item (e.g. "1")
   identifier?: string;
-  onClick?: (event: Pick<CustomEvent, 'defaultPrevented' | 'preventDefault' | 'type'>) => void;
+
+  // The main text of the citation. This will be formatted as if it were a link. If this is nullish and a URL exists, its host will be displayed instead.
   text?: string;
+
+  // Displayed beneath the main link of the citation if it exists
+  badgeName?: string;
+
+  // Used as a tooltip and ARIA label for the item's displayed badgeName
+  badgeTitle?: string;
+
+  // If the citation is an external link, this is its destination.
   url?: string;
+
+  onClick?: (event: Pick<CustomEvent, 'defaultPrevented' | 'preventDefault' | 'type'>) => void;
 }>;
 
 const LinkDefinitionItem = memo(({ badgeName, badgeTitle, identifier, onClick, text, url }: Props) => {

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/ItemBody.tsx

@@ -4,11 +4,20 @@ import Badge from './Badge';
 import OpenInNewWindowIcon from './OpenInNewWindowIcon';
 
 type Props = Readonly<{
-  badgeName?: string;
-  badgeTitle?: string;
+  // The text (usually a number) displayed at the head of the citation
   identifier?: string;
-  isExternal?: boolean;
+
+  // The text displayed as the main link of the citation
   text: string;
+
+  // If this is true, we show the "external link" icon after the link
+  isExternal?: boolean;
+
+  // The text displayed beneath the link as a description
+  badgeName?: string;
+
+  // The title of the badge, displayed as a tooltip on the item's description as well as the description's screen-reader content
+  badgeTitle?: string;
 }>;
 
 const ItemBody = memo(({ badgeName, badgeTitle, identifier, isExternal, text }: Props) => (

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,30 +16,26 @@ export default function createCoreMiddleware(): ActivityMiddleware[] {
 
         const { type } = activity;
 
-        // Filter out activities that should not be visible
-        if (type === 'conversationUpdate' || type === 'event' || type === 'invoke' || type === 'typing') {
-          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 };