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

package/src/ActivityFeedback/providers/ActivityFeedbackComposer.tsx

@@ -0,0 +1,302 @@
+import { hooks } from 'botframework-webchat-api';
+import {
+  getOrgSchemaMessage,
+  parseAction,
+  type OrgSchemaAction,
+  type WebChatActivity
+} from 'botframework-webchat-core';
+import random from 'math-random';
+import React, { memo, useCallback, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+import dereferenceBlankNodes from '../../Utils/JSONLinkedData/dereferenceBlankNodes';
+import hasFeedbackLoop from '../private/hasFeedbackLoop';
+import ActivityFeedbackContext, { type ActivityFeedbackContextType } from './private/ActivityFeedbackContext';
+
+const { usePonyfill, usePostActivity } = hooks;
+
+type ActivityFeedbackComposerProps = Readonly<{
+  activity: WebChatActivity;
+  children?: ReactNode | undefined;
+}>;
+
+type ActionState = Readonly<{
+  actionId: string;
+  actionStatus: 'CompletedActionStatus' | 'ActiveActionStatus';
+}>;
+
+const DEBOUNCE_TIMEOUT = 500;
+
+function ActivityFeedbackComposer({ children, activity: activityFromProps }: ActivityFeedbackComposerProps) {
+  const [{ clearTimeout, setTimeout }] = usePonyfill();
+
+  const activity = useMemo(
+    () =>
+      // Force enable feedback loop until service fixed their issue.
+      hasFeedbackLoop(activityFromProps)
+        ? Object.freeze({
+            ...activityFromProps,
+            entities: [
+              {
+                '@context': 'https://schema.org',
+                '@id': '',
+                '@type': 'Message',
+                type: 'https://schema.org/Message',
+                keywords: [],
+                potentialAction: [
+                  { '@type': 'LikeAction', actionStatus: 'PotentialActionStatus' },
+                  { '@type': 'DislikeAction', actionStatus: 'PotentialActionStatus' }
+                ]
+              }
+            ]
+          })
+        : activityFromProps,
+    [activityFromProps]
+  );
+
+  const activityRef = useRefFrom(activity);
+
+  const actionStateRef = useRef<ActionState | undefined>(undefined);
+  const [_, setForceRefresh] = useState({});
+
+  const setActionStateWithRefresh = useCallback(
+    (actionState: ActionState | undefined) => {
+      actionStateRef.current = actionState;
+      setForceRefresh({});
+    },
+    [actionStateRef, setForceRefresh]
+  );
+
+  const rawActions = useMemo<readonly OrgSchemaAction[]>(() => {
+    function patchActions(actions: readonly OrgSchemaAction[]) {
+      return actions.map(action =>
+        // eslint-disable-next-line no-magic-numbers
+        action['@id'] ? action : Object.freeze({ ...action, '@id': `_:${random().toString(36).substring(2, 7)}` })
+      );
+    }
+
+    try {
+      const graph = dereferenceBlankNodes(activity.entities || []);
+      const messageThing = getOrgSchemaMessage(graph);
+
+      const reactActions = Object.freeze(
+        (messageThing?.potentialAction || []).filter(
+          ({ '@type': type }) => type === 'LikeAction' || type === 'DislikeAction'
+        )
+      );
+
+      if (reactActions.length) {
+        // actionStateRef.current = reactActions.
+        return patchActions(reactActions);
+      }
+
+      const voteActions = Object.freeze(
+        graph.filter(({ type }) => type === 'https://schema.org/VoteAction').map(parseAction)
+      );
+
+      if (voteActions.length) {
+        return patchActions(voteActions);
+      }
+    } catch {
+      // Intentionally left blank.
+    }
+
+    return Object.freeze([]);
+  }, [activity]);
+
+  useMemo(() => {
+    const activeOrCompletedAction = rawActions.find(
+      (action): action is OrgSchemaAction & { actionStatus: 'ActiveActionStatus' | 'CompletedActionStatus' } =>
+        action.actionStatus === 'ActiveActionStatus' || action.actionStatus === 'CompletedActionStatus'
+    );
+
+    actionStateRef.current = activeOrCompletedAction
+      ? {
+          actionId: activeOrCompletedAction['@id'],
+          actionStatus: activeOrCompletedAction.actionStatus
+        }
+      : undefined;
+  }, [rawActions]);
+
+  // Workaround ESLint on saying actionStateRef.current is redundant when using it directly.
+  const actionStateForActions = actionStateRef.current;
+
+  const actions = useMemo(
+    () =>
+      Object.freeze(
+        rawActions.map(action =>
+          actionStateForActions && actionStateForActions.actionId === action['@id']
+            ? Object.freeze({ ...action, actionStatus: actionStateForActions.actionStatus })
+            : action.actionStatus === 'PotentialActionStatus'
+              ? action
+              : Object.freeze({ ...action, actionStatus: 'PotentialActionStatus' })
+        )
+      ),
+    [actionStateForActions, rawActions]
+  );
+
+  const actionsRef = useRefFrom(actions);
+
+  const postActivity = usePostActivity();
+
+  const hasSubmitted = useMemo<boolean>(
+    () => actions.some(action => action.actionStatus === 'CompletedActionStatus'),
+    [actions]
+  );
+
+  const hasSubmittedRef = useRefFrom(hasSubmitted);
+
+  const submitCallback = useCallback(
+    (action: OrgSchemaAction, feedbackText?: string | undefined) => {
+      if (actionStateRef.current?.actionStatus === 'CompletedActionStatus') {
+        return console.warn(
+          'botframework-webchat internal: useFeedbackActions().submitCallback() must not be called after feedback is completed, ignoring the call.'
+        );
+      } else if (!actionsRef.current.includes(action)) {
+        return console.warn(
+          'botframework-webchat internal: Cannot submit an action that does not exists in the message, ignoring the call.'
+        );
+      }
+
+      setActionStateWithRefresh(Object.freeze({ actionId: action['@id'], actionStatus: 'CompletedActionStatus' }));
+
+      const { '@id': _id, actionStatus: _actionStatus, ...rest } = action;
+      const isLegacyAction = action['@type'] === 'VoteAction';
+
+      // TODO: We should update this to use W3C Hydra.1
+      if (feedbackText) {
+        postActivity({
+          name: 'message/submitAction',
+          replyToId: activityRef.current.id,
+          type: 'invoke',
+          value: {
+            actionName: 'feedback',
+            actionValue: {
+              feedback: { feedbackText },
+              reaction: action['@type'] === 'LikeAction' ? 'like' : 'dislike'
+            }
+          }
+        } as any);
+      } else {
+        postActivity({
+          entities: [isLegacyAction ? rest : action],
+          name: 'webchat:activity-status/feedback',
+          type: 'event'
+        } as any);
+      }
+    },
+    [actionsRef, actionStateRef, activityRef, postActivity, setActionStateWithRefresh]
+  );
+
+  const shouldShowFeedbackForm = hasFeedbackLoop(activity);
+  const shouldShowFeedbackFormRef = useRefFrom(shouldShowFeedbackForm);
+
+  const shouldShowFeedbackFormState = useMemo<readonly [boolean]>(
+    () => Object.freeze([shouldShowFeedbackForm] as const),
+    [shouldShowFeedbackForm]
+  );
+
+  // TODO: What's the proper logic of "allow resubmission"?
+  //       Right now, if feedback form is not shown, it will allow resubmission.
+  const shouldAllowResubmit = !shouldShowFeedbackForm;
+  const shouldAllowResubmitRef = useRefFrom(shouldAllowResubmit);
+  const shouldAllowResubmitState = useMemo<readonly [boolean]>(
+    () => Object.freeze([shouldAllowResubmit]),
+    [shouldAllowResubmit]
+  );
+
+  const selectedAction = useMemo<OrgSchemaAction | undefined>(
+    () =>
+      actions.find(
+        ({ actionStatus }) => actionStatus === 'ActiveActionStatus' || actionStatus === 'CompletedActionStatus'
+      ),
+    [actions]
+  );
+
+  const autoSubmitTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const setSelectedAction = useCallback(
+    (action: OrgSchemaAction | undefined) => {
+      if (hasSubmittedRef.current && !shouldAllowResubmitRef.current) {
+        return console.warn(
+          'botframework-webchat internal: useFeedbackActions().setSelectedAction() must not be called after feedback is completed as it does not allow resubmission, ignoring the call.'
+        );
+      } else if (action && !actionsRef.current.includes(action)) {
+        return console.warn(
+          'botframework-webchat internal: Cannot select an action that does not exists in the message, ignoring the call.'
+        );
+      }
+
+      setActionStateWithRefresh(
+        action
+          ? Object.freeze({
+              actionId: action['@id'],
+              actionStatus: 'ActiveActionStatus'
+            })
+          : undefined
+      );
+
+      if (!shouldShowFeedbackFormRef.current) {
+        clearTimeout(autoSubmitTimeoutRef.current);
+
+        if (action['@id']) {
+          autoSubmitTimeoutRef.current = setTimeout(
+            () => submitCallback(actionsRef.current.find(({ '@id': id }) => id === action['@id'])),
+            DEBOUNCE_TIMEOUT
+          );
+        }
+      }
+    },
+    [
+      actionsRef,
+      autoSubmitTimeoutRef,
+      clearTimeout,
+      hasSubmittedRef,
+      setActionStateWithRefresh,
+      setTimeout,
+      shouldAllowResubmitRef,
+      shouldShowFeedbackFormRef,
+      submitCallback
+    ]
+  );
+
+  const selectedActionState = useMemo<readonly [OrgSchemaAction, (action: OrgSchemaAction) => void]>(
+    () => Object.freeze([selectedAction, setSelectedAction]),
+    [selectedAction, setSelectedAction]
+  );
+
+  const actionsState = useMemo<ActivityFeedbackContextType['actionsState']>(
+    () => Object.freeze([actions] as const),
+    [actions]
+  );
+
+  const hasSubmittedState = useMemo<readonly [boolean]>(() => Object.freeze([hasSubmitted]), [hasSubmitted]);
+
+  const activityState = useMemo<readonly [WebChatActivity]>(() => Object.freeze([activity]), [activity]);
+
+  const context = useMemo<ActivityFeedbackContextType>(
+    () => ({
+      actionsState,
+      activityState,
+      hasSubmittedState,
+      selectedActionState,
+      shouldAllowResubmitState,
+      shouldShowFeedbackFormState,
+      submitCallback
+    }),
+    [
+      actionsState,
+      activityState,
+      hasSubmittedState,
+      selectedActionState,
+      shouldAllowResubmitState,
+      shouldShowFeedbackFormState,
+      submitCallback
+    ]
+  );
+
+  return <ActivityFeedbackContext.Provider value={context}>{children}</ActivityFeedbackContext.Provider>;
+}
+
+export default memo(ActivityFeedbackComposer);
+export { type ActivityFeedbackComposerProps };

package/src/ActivityFeedback/providers/private/ActivityFeedbackContext.ts

@@ -0,0 +1,23 @@
+import { type OrgSchemaAction, type WebChatActivity } from 'botframework-webchat-core';
+import { createContext } from 'react';
+
+type ActivityFeedbackContextType = Readonly<{
+  actionsState: readonly [readonly OrgSchemaAction[]];
+  hasSubmittedState: readonly [boolean];
+  activityState: readonly [WebChatActivity];
+  selectedActionState: readonly [OrgSchemaAction, (action: OrgSchemaAction) => void];
+  shouldAllowResubmitState: readonly [boolean];
+  shouldShowFeedbackFormState: readonly [boolean];
+  submitCallback: (action: OrgSchemaAction) => void;
+}>;
+
+const ActivityFeedbackContext = createContext<ActivityFeedbackContextType>(
+  new Proxy({} as ActivityFeedbackContextType, {
+    get() {
+      throw new Error('botframework-webchat: This hook can only be used under <ActivityFeedbackContext>');
+    }
+  })
+);
+
+export default ActivityFeedbackContext;
+export { type ActivityFeedbackContextType };

package/src/ActivityFeedback/providers/private/useActivityFeedbackContext.ts

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

package/src/ActivityFeedback/providers/useActions.ts

@@ -0,0 +1,6 @@
+import { type OrgSchemaAction } from 'botframework-webchat-core';
+import useActivityFeedbackContext from './private/useActivityFeedbackContext';
+
+export default function useActions(): readonly [readonly OrgSchemaAction[]] {
+  return useActivityFeedbackContext().actionsState;
+}

package/src/ActivityFeedback/providers/useActivity.ts

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

package/src/ActivityFeedback/providers/useHasSubmitted.ts

@@ -0,0 +1,5 @@
+import useActivityFeedbackContext from './private/useActivityFeedbackContext';
+
+export default function useHasSubmitted(): readonly [boolean] {
+  return useActivityFeedbackContext().hasSubmittedState;
+}

package/src/ActivityFeedback/providers/useSelectedAction.ts

@@ -0,0 +1,6 @@
+import { type OrgSchemaAction } from 'botframework-webchat-core';
+import useActivityFeedbackContext from './private/useActivityFeedbackContext';
+
+export default function useSelectedAction(): readonly [OrgSchemaAction, (target: OrgSchemaAction) => void] {
+  return useActivityFeedbackContext().selectedActionState;
+}

package/src/ActivityFeedback/providers/useShouldAllowResubmit.ts

@@ -0,0 +1,5 @@
+import useActivityFeedbackContext from './private/useActivityFeedbackContext';
+
+export default function useShouldAllowResubmit(): readonly [boolean] {
+  return useActivityFeedbackContext().shouldAllowResubmitState;
+}

package/src/ActivityFeedback/providers/useShouldShowFeedbackForm.ts

@@ -0,0 +1,5 @@
+import useActivityFeedbackContext from './private/useActivityFeedbackContext';
+
+export default function useShouldShowFeedbackForm(): readonly [boolean] {
+  return useActivityFeedbackContext().shouldShowFeedbackFormState;
+}

package/src/ActivityFeedback/providers/useSubmitCallback.ts

@@ -0,0 +1,6 @@
+import { type OrgSchemaAction } from 'botframework-webchat-core';
+import useActivityFeedbackContext from './private/useActivityFeedbackContext';
+
+export default function useSubmitCallback(): (target: OrgSchemaAction, message?: string | undefined) => void {
+  return useActivityFeedbackContext().submitCallback;
+}

package/src/ActivityStatus/OthersActivityStatus.tsx

@@ -1,6 +1,6 @@
+import { hooks } from 'botframework-webchat-api';
 import {
   getOrgSchemaMessage,
-  OrgSchemaAction,
   OrgSchemaProject,
   parseAction,
   parseClaim,
@@ -8,22 +8,25 @@ import {
   type WebChatActivity
 } from 'botframework-webchat-core';
 import classNames from 'classnames';
-import React, { memo, useMemo, type ReactNode } from 'react';
+import React, { memo, useMemo } from 'react';
 
+import ActivityFeedback from '../ActivityFeedback/ActivityFeedback';
 import useStyleSet from '../hooks/useStyleSet';
 import dereferenceBlankNodes from '../Utils/JSONLinkedData/dereferenceBlankNodes';
-import Feedback from './private/Feedback/Feedback';
 import Originator from './private/Originator';
-import Slotted from './Slotted';
+import StatusSlot from './StatusSlot';
 import Timestamp from './Timestamp';
 
-type Props = Readonly<{ activity: WebChatActivity }>;
+const { useStyleOptions } = hooks;
+
+type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined }>;
 
 const warnRootLevelThings = warnOnce(
   'Root-level things are being deprecated, please relate all things to `entities[@id=""]` instead. This feature will be removed in 2025-03-06.'
 );
 
-const OthersActivityStatus = memo(({ activity }: Props) => {
+const OthersActivityStatus = memo(({ activity, className }: Props) => {
+  const [{ feedbackActionsPlacement }] = useStyleOptions();
   const [{ sendStatus }] = useStyleSet();
   const { timestamp } = activity;
   const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
@@ -56,38 +59,24 @@ const OthersActivityStatus = memo(({ activity }: Props) => {
     }
   }, [graph, messageThing]);
 
-  const feedbackActions = useMemo<ReadonlySet<OrgSchemaAction> | undefined>(() => {
-    try {
-      const reactActions = (messageThing?.potentialAction || []).filter(
-        ({ '@type': type }) => type === 'LikeAction' || type === 'DislikeAction'
-      );
-
-      if (reactActions.length) {
-        return Object.freeze(new Set(reactActions));
-      }
-
-      const voteActions = graph.filter(({ type }) => type === 'https://schema.org/VoteAction').map(parseAction);
-
-      if (voteActions.length) {
-        return Object.freeze(new Set(voteActions));
-      }
-    } catch {
-      // Intentionally left blank.
-    }
-  }, [graph, messageThing]);
-
   return (
-    <Slotted className={classNames('webchat__activity-status', sendStatus + '')}>
-      {useMemo<ReactNode[]>(
-        () =>
-          [
-            timestamp && <Timestamp key="timestamp" timestamp={timestamp} />,
-            claimInterpreter && <Originator key="originator" project={claimInterpreter} />,
-            feedbackActions?.size && <Feedback actions={feedbackActions} key="feedback" />
-          ].filter(Boolean),
-        [claimInterpreter, timestamp, feedbackActions]
+    <span className={classNames('webchat__activity-status', className, sendStatus + '')}>
+      {timestamp && (
+        <StatusSlot>
+          <Timestamp key="timestamp" timestamp={timestamp} />
+        </StatusSlot>
+      )}
+      {claimInterpreter && (
+        <StatusSlot>
+          <Originator key="originator" project={claimInterpreter} />
+        </StatusSlot>
+      )}
+      {feedbackActionsPlacement === 'activity-status' && (
+        <StatusSlot>
+          <ActivityFeedback activity={activity} key="feedback" />
+        </StatusSlot>
       )}
-    </Slotted>
+    </span>
   );
 });
 

package/src/ActivityStatus/SelfActivityStatus.tsx

@@ -2,20 +2,21 @@ import { type WebChatActivity } from 'botframework-webchat-core';
 import classNames from 'classnames';
 import React, { memo } from 'react';
 
-import Slotted from './Slotted';
 import Timestamp from './Timestamp';
 import useStyleSet from '../hooks/useStyleSet';
 
-type Props = Readonly<{ activity: WebChatActivity }>;
+type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined }>;
 
-const SelftActivityStatus = memo(({ activity }: Props) => {
+const SelftActivityStatus = memo(({ activity, className }: Props) => {
   const [{ sendStatus }] = useStyleSet();
   const { timestamp } = activity;
 
   return timestamp ? (
-    <Slotted className={classNames('webchat__activity-status', 'webchat__activity-status--self', sendStatus + '')}>
+    <span
+      className={classNames('webchat__activity-status', 'webchat__activity-status--self', className, sendStatus + '')}
+    >
       <Timestamp timestamp={timestamp} />
-    </Slotted>
+    </span>
   ) : null;
 });
 

package/src/ActivityStatus/SendStatus/SendStatus.tsx

@@ -1,24 +1,29 @@
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC, useCallback } from 'react';
-import type { WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useCallback } from 'react';
+import { any, literal, object, pipe, readonly, union, type InferInput } from 'valibot';
 
-import { SENDING, SEND_FAILED, SENT } from '../../types/internal/SendStatus';
-import SendFailedRetry from './private/SendFailedRetry';
 import useFocus from '../../hooks/useFocus';
 import useStyleSet from '../../hooks/useStyleSet';
-
-import type { SendStatus as SendStatusType } from '../../types/internal/SendStatus';
+import { SENDING, SEND_FAILED, SENT } from '../../types/internal/SendStatus';
+import SendFailedRetry from './private/SendFailedRetry';
 
 const { useLocalizer, usePostActivity } = hooks;
 
-type SendStatusProps = {
-  activity: WebChatActivity;
-  sendStatus: SendStatusType;
-};
+const sendStatusPropsSchema = pipe(
+  object({
+    activity: any(),
+    sendStatus: union([literal(SENDING), literal(SEND_FAILED), literal(SENT)])
+  }),
+  readonly()
+);
+
+type SendStatusProps = InferInput<typeof sendStatusPropsSchema>;
+
+function SendStatus(props: SendStatusProps) {
+  const { activity, sendStatus } = validateProps(sendStatusPropsSchema, props);
 
-const SendStatus: FC<SendStatusProps> = ({ activity, sendStatus }) => {
   const [{ sendStatus: sendStatusStyleSet }] = useStyleSet();
   const focus = useFocus();
   const localize = useLocalizer();
@@ -46,13 +51,7 @@ const SendStatus: FC<SendStatusProps> = ({ activity, sendStatus }) => {
       </span>
     </React.Fragment>
   );
-};
-
-SendStatus.propTypes = {
-  activity: PropTypes.any.isRequired,
-  // PropTypes cannot fully capture TypeScript types.
-  // @ts-ignore
-  sendStatus: PropTypes.oneOf([SENDING, SEND_FAILED, SENT]).isRequired
-};
+}
 
-export default SendStatus;
+export default memo(SendStatus);
+export { sendStatusPropsSchema, type SendStatusProps };

package/src/ActivityStatus/StatusSlot.tsx

@@ -0,0 +1,12 @@
+import React, { memo, ReactNode } from 'react';
+import classNames from 'classnames';
+
+type Props = Readonly<{ className?: string; children?: ReactNode | undefined }>;
+
+const StatusSlot = ({ children, className }: Props) => (
+  <span className={classNames('webchat__activity-status-slot', className)}>{children}</span>
+);
+
+StatusSlot.displayName = 'StatusSlot';
+
+export default memo(StatusSlot);

package/src/ActivityStatus/Timestamp.tsx

@@ -1,24 +1,29 @@
 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 { date, number, object, pipe, readonly, string, union, type InferInput } from 'valibot';
 
 import AbsoluteTime from './AbsoluteTime';
 import RelativeTime from './private/RelativeTime';
 
 const { useStyleOptions } = hooks;
 
-type TimestampProps = {
-  timestamp: string;
-};
+const timestampPropsSchema = pipe(
+  object({
+    timestamp: union([date(), number(), string()]) // TODO: Should limit to `Date`.
+  }),
+  readonly()
+);
+
+type TimestampProps = InferInput<typeof timestampPropsSchema>;
+
+function Timestamp(props: TimestampProps) {
+  const { timestamp } = validateProps(timestampPropsSchema, props);
 
-const Timestamp: FC<TimestampProps> = ({ timestamp }) => {
   const [{ timestampFormat }] = useStyleOptions();
 
   return timestampFormat === 'relative' ? <RelativeTime value={timestamp} /> : <AbsoluteTime value={timestamp} />;
-};
-
-Timestamp.propTypes = {
-  timestamp: PropTypes.string.isRequired
-};
+}
 
-export default Timestamp;
+export default memo(Timestamp);
+export { timestampPropsSchema, type TimestampProps };

package/src/Assets/TypingAnimation.js

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import React from 'react';
 
 import ScreenReaderText from '../ScreenReaderText';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import testIds from '../testIds';
 import useStyleSet from '../hooks/useStyleSet';
 
 const { useDirection, useLocalizer } = hooks;
@@ -31,6 +32,7 @@ const TypingAnimation = () => {
           rootClassName,
           typingAnimationStyleSet + ''
         )}
+        data-testid={testIds.typingIndicator}
       />
     </React.Fragment>
   );

package/src/Attachment/Assets/DownloadIcon.tsx

@@ -0,0 +1,35 @@
+import { validateProps } from 'botframework-webchat-api/internal';
+import React, { memo } from 'react';
+import { number, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+const ICON_SIZE_FACTOR = 22;
+
+const downloadIconPropsSchema = pipe(
+  object({
+    className: optional(string()),
+    size: optional(number(), 1)
+  }),
+  readonly()
+);
+
+type DownloadIconProps = InferInput<typeof downloadIconPropsSchema>;
+
+const DownloadIcon = (props: DownloadIconProps) => {
+  const { className, size } = validateProps(downloadIconPropsSchema, props, 'strict');
+
+  return (
+    <svg
+      className={className}
+      focusable={false}
+      height={ICON_SIZE_FACTOR * size}
+      role="presentation"
+      viewBox="0 0 31.8 46"
+      width={ICON_SIZE_FACTOR * size}
+    >
+      <path d="M26.8,23.8l-10.9,11L5,23.8l1.6-1.6l8.2,8.3V5H17v25.5l8.2-8.3L26.8,23.8z M5.8,41v-2.2H26V41H5.8z" />
+    </svg>
+  );
+};
+
+export default memo(DownloadIcon);
+export { downloadIconPropsSchema, type DownloadIconProps };