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

package/src/Styles/StyleSet/StackedLayout.ts

@@ -1,11 +1,13 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 
 import { StrictStyleOptions } from 'botframework-webchat-api';
+import CSSTokens from '../CSSTokens';
 
 export default function createStackedLayoutStyle({
-  avatarSize,
-  bubbleMaxWidth,
-  bubbleMinWidth,
+  bubbleAttachmentMaxWidth,
+  bubbleAttachmentMinWidth,
+  bubbleMessageMaxWidth,
+  bubbleMessageMinWidth,
   paddingRegular,
   transitionDuration
 }: StrictStyleOptions) {
@@ -31,8 +33,8 @@ export default function createStackedLayoutStyle({
       },
 
       '& .webchat__stacked-layout__attachment': {
-        maxWidth: bubbleMaxWidth,
-        minWidth: bubbleMinWidth,
+        maxWidth: CSSTokens.MaxWidthAttachmentBubble,
+        minWidth: CSSTokens.MinWidthAttachmentBubble,
         transitionDuration,
         transitionProperty: 'max-width, min-width'
       },
@@ -48,7 +50,8 @@ export default function createStackedLayoutStyle({
         },
 
       '& .webchat__stacked-layout__message': {
-        maxWidth: bubbleMaxWidth,
+        maxWidth: CSSTokens.MaxWidthMessageBubble,
+        minWidth: CSSTokens.MinWidthMessageBubble,
         overflow: 'hidden',
         transitionDuration,
         transitionProperty: 'max-width'
@@ -62,14 +65,20 @@ export default function createStackedLayoutStyle({
 
       '&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar': {
         '& .webchat__stacked-layout__avatar-gutter': {
-          width: avatarSize
+          width: CSSTokens.SizeAvatar
         }
       },
 
       '&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar, &.webchat__stacked-layout--hide-nub, &.webchat__stacked-layout--show-nub':
         {
-          '& .webchat__stacked-layout__attachment, & .webchat__stacked-layout__message': {
-            maxWidth: bubbleMaxWidth + paddingRegular
+          '& .webchat__stacked-layout__attachment': {
+            maxWidth: bubbleAttachmentMaxWidth + paddingRegular,
+            minWidth: bubbleAttachmentMinWidth + paddingRegular
+          },
+
+          '& .webchat__stacked-layout__message': {
+            maxWidth: bubbleMessageMaxWidth + paddingRegular,
+            minWidth: bubbleMessageMinWidth + paddingRegular
           },
 
           '& .webchat__stacked-layout__nub-pad': {

package/src/Styles/StyleSet/TextContent.ts

@@ -15,7 +15,8 @@ export default function createTextContentStyle() {
       },
 
       '& .webchat__text-content__markdown img:not(.webchat__render-markdown__external-link-icon)': {
-        maxWidth: CSSTokens.MaxWidthBubble,
+        maxWidth: CSSTokens.MaxWidthMessageBubble,
+        minWidth: CSSTokens.MinWidthMessageBubble,
         width: '100%'
       },
 
@@ -25,6 +26,17 @@ export default function createTextContentStyle() {
 
       '& .webchat__text-content__open-in-new-window-icon': {
         height: '.75em'
+      },
+
+      '& .webchat__text-content__activity-actions': {
+        alignSelf: 'flex-start',
+        display: 'flex',
+        gap: `calc(${CSSTokens.PaddingRegular} / 2)`,
+        width: '100%'
+      },
+
+      '& .webchat__text-content__activity-actions:empty': {
+        display: 'none'
       }
     }
   };

package/src/Styles/StyleSet/ThumbButton.ts

@@ -3,43 +3,81 @@ import CSSTokens from '../CSSTokens';
 export default function () {
   return {
     '&.webchat__thumb-button': {
+      alignItems: 'center',
       appearance: 'none',
-      background: 'Transparent',
+      background: 'transparent',
       border: 0,
       borderRadius: 2,
+      boxSizing: 'content-box',
+      display: 'grid',
+      gridTemplateAreas: `"icon"`,
       height: 16,
-      /* The Fluent icon is larger than the button. We need to clip it.
-      Without clipping, hover effect will appear on the edge of the button but not possible to click. */
-      overflow: 'hidden',
+      justifyContent: 'center',
       padding: 0,
       width: 16,
 
+      '&.webchat__thumb-button--large': {
+        border: '1px solid transparent',
+        borderRadius: '4px',
+        height: '20px',
+        padding: '5px',
+        width: '20px',
+
+        '& .webchat__thumb-button__image': {
+          color: 'currentColor',
+          fontSize: '20px',
+          height: '1em',
+          width: '1em'
+        },
+
+        '&:hover, &:active, &.webchat__thumb-button--is-pressed': {
+          background: 'transparent',
+          color: CSSTokens.ColorAccent
+        },
+
+        '&[aria-disabled="true"]': {
+          color: CSSTokens.ColorSubtle
+        },
+
+        '&.webchat__thumb-button--submitted:not(.webchat__thumb-button--is-pressed) .webchat__tooltip': {
+          display: 'none'
+        },
+
+        '&.webchat__thumb-button--submitted .webchat__tooltip': {
+          '--webchat__tooltip-anchor-inline-start': '20%'
+        }
+      },
+
       '&:active': {
         background: '#EDEBE9'
       },
 
-      '&:focus': {
+      '&:focus-visible': {
         outline: 'solid 1px #605E5C'
       },
 
       '& .webchat__thumb-button__image': {
         color: CSSTokens.ColorAccent,
-        width: 14
-      },
+        gridArea: 'icon',
+        visibility: 'hidden',
+        width: 14,
 
-      '&:hover .webchat__thumb-button__image:not(.webchat__thumb-button__image--is-filled)': {
-        display: 'none'
+        '&.webchat__thumb-button__image--is-stroked': {
+          visibility: 'unset'
+        }
       },
 
-      '&.webchat__thumb-button--is-pressed .webchat__thumb-button__image:not(.webchat__thumb-button__image--is-filled)':
-        {
-          display: 'none'
-        },
+      '&:not([aria-disabled="true"]):hover, &.webchat__thumb-button--is-pressed': {
+        '& .webchat__thumb-button__image': {
+          '&.webchat__thumb-button__image--is-stroked': {
+            visibility: 'hidden'
+          },
 
-      '&.webchat__thumb-button:not(:hover):not(.webchat__thumb-button--is-pressed) .webchat__thumb-button__image--is-filled':
-        {
-          display: 'none'
+          '&.webchat__thumb-button__image--is-filled': {
+            visibility: 'unset'
+          }
         }
+      }
     }
   };
 }

package/src/Styles/StyleSet/Tooltip.ts

@@ -0,0 +1,62 @@
+export default () => ({
+  '*:has(> &.webchat__tooltip)': {
+    position: 'relative',
+
+    '&:is(:hover, :focus-visible, :active) > .webchat__tooltip': {
+      opacity: 1,
+      transitionDelay: '400ms'
+    }
+  },
+  '&.webchat__tooltip': {
+    '--webchat__tooltip-tip-size': '8.484px',
+    '--webchat__tooltip-background': '#fff',
+    '--webchat__tooltip-anchor-inline-start': '50%',
+
+    background: 'var(--webchat__tooltip-background)',
+    borderRadius: '4px',
+    color: '#242424',
+    filter: `drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.14)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.12))`,
+    fontSize: '12px',
+    inlineSize: 'max-content',
+    isolation: 'isolate',
+    lineHeight: '16px',
+    margin: 0,
+    maxInlineSize: '30ch',
+    opacity: 0,
+    padding: '6px 12px',
+    pointerEvents: 'none',
+    position: 'absolute',
+    textAlign: 'start',
+    transition: 'opacity 0.2s ease',
+    userSelect: 'none',
+    willChange: 'filter',
+
+    '&::after': {
+      background: 'inherit',
+      color: 'currentColor',
+      content: `""`,
+      inset: 0,
+      position: 'absolute'
+    },
+
+    '&.webchat__tooltip--block-start, &.webchat__tooltip--block-end': {
+      textAlign: 'center'
+    },
+
+    '&.webchat__tooltip--block-start': {
+      insetBlockEnd: 'calc(100% + 7px)',
+      insetInlineStart: '50%',
+      transform: 'translate(calc(-1 * var(--webchat__tooltip-anchor-inline-start)), 0)',
+      '&::after': {
+        border: '1px solid var(--webchat__tooltip-background)',
+        borderBottomLeftRadius: '2px',
+        clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',
+        height: 'var(--webchat__tooltip-tip-size)',
+        insetBlockStart: 'calc(100% - 6px)',
+        insetInlineStart: 'calc(var(--webchat__tooltip-anchor-inline-start) - var(--webchat__tooltip-tip-size) / 2)',
+        transform: 'rotate(-45deg)',
+        width: 'var(--webchat__tooltip-tip-size)'
+      }
+    }
+  }
+});

package/src/Styles/StyleSet/ViewCodeDialog.ts

@@ -0,0 +1,70 @@
+import CSSTokens from '../CSSTokens';
+
+export default function createViewCodeDialogStyle() {
+  return {
+    '&.webchat__view-code-dialog': {
+      boxSizing: 'border-box',
+      display: 'grid',
+      height: '100%',
+      maxHeight: '100vh',
+      overflow: 'hidden',
+      padding: '1rem',
+      placeItems: 'center',
+
+      '& .webchat__modal-dialog__box': {
+        display: 'flex',
+        flexDirection: 'column',
+        maxHeight: '100%',
+        maxWidth: '100%',
+        position: 'relative'
+      },
+
+      '& .webchat__modal-dialog__close-button-layout': {
+        position: 'absolute',
+        right: 0
+      },
+
+      '& .webchat__modal-dialog__body': {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: CSSTokens.PaddingRegular,
+        overflow: 'hidden'
+      },
+
+      '& .webchat__view-code-dialog__header': {
+        alignItems: 'center',
+        display: 'flex',
+        paddingInlineEnd: '30px'
+      },
+
+      '& .webchat__view-code-dialog__title': {
+        margin: '0 auto 0 0',
+        textTransform: 'capitalize'
+      },
+
+      '& .webchat__view-code-dialog__body': {
+        border: 'none',
+        borderRadius: 0,
+        overflow: 'auto',
+        height: '100%',
+
+        '.webchat__code-block__body': {
+          display: 'block',
+          margin: 0,
+          padding: '16px 0'
+        }
+      },
+
+      '& .webchat__view-code-dialog__footer': {
+        color: CSSTokens.ColorSubtle,
+        lineHeight: '20px'
+      },
+
+      '& .webchat__view-code-dialog__copy-button': {
+        position: 'absolute',
+        right: '10px',
+        top: '10px'
+      }
+    }
+  };
+}

package/src/Styles/createStyleSet.ts

@@ -1,6 +1,8 @@
 import { normalizeStyleOptions, StyleOptions } from 'botframework-webchat-api';
 
 import createActivitiesStyle from './StyleSet/Activities';
+import createActivityButtonStyle from './StyleSet/ActivityButton';
+import createActivityCopyButtonStyle from './StyleSet/ActivityCopyButton';
 import createAudioAttachmentStyle from './StyleSet/AudioAttachment';
 import createAudioContentStyle from './StyleSet/AudioContent';
 import createAutoResizeTextAreaStyle from './StyleSet/AutoResizeTextArea';
@@ -10,19 +12,22 @@ import createBubbleStyle from './StyleSet/Bubble';
 import createCarouselFilmStrip from './StyleSet/CarouselFilmStrip';
 import createCarouselFilmStripAttachment from './StyleSet/CarouselFilmStripAttachment';
 import createCarouselFlipper from './StyleSet/CarouselFlipper';
+import createChatHistoryBoxStyleSet from './StyleSet/ChatHistoryBox';
 import createCitationModalDialogStyle from './StyleSet/CitationModalDialog';
+import createCodeBlockCopyButtonStyle from './StyleSet/CodeBlockCopyButton';
+import createCodeBlockStyle from './StyleSet/CodeBlock';
 import createConnectivityNotification from './StyleSet/ConnectivityNotification';
-import createCSSCustomPropertiesStyle from './StyleSet/CSSCustomProperties';
 import createDictationInterimsStyle from './StyleSet/DictationInterims';
 import createErrorBoxStyle from './StyleSet/ErrorBox';
 import createErrorNotificationStyle from './StyleSet/ErrorNotification';
+import createFeedbackFormStyle from './StyleSet/FeedbackForm';
 import createFileContentStyle from './StyleSet/FileContent';
 import createImageAvatarStyle from './StyleSet/ImageAvatar';
 import createInitialsAvatarStyle from './StyleSet/InitialsAvatar';
-import createKeyboardHelpStyle from './StyleSet/KeyboardHelp';
 import createLinkDefinitionsStyle from './StyleSet/LinkDefinitions';
 import createMicrophoneButtonStyle from './StyleSet/MicrophoneButton';
 import createModalDialogStyle from './StyleSet/ModalDialog';
+import createMonochromeImageMaskerStyleSet from './StyleSet/MonochromeImageMasker';
 import createRenderMarkdownStyle from './StyleSet/RenderMarkdown';
 import createRootStyle from './StyleSet/Root';
 import createScrollToEndButtonStyle from './StyleSet/ScrollToEndButton';
@@ -30,8 +35,6 @@ import createSendBoxButtonStyle from './StyleSet/SendBoxButton';
 import createSendBoxStyle from './StyleSet/SendBox';
 import createSendBoxTextBoxStyle from './StyleSet/SendBoxTextBox';
 import createSendStatusStyle from './StyleSet/SendStatus';
-import createSingleAttachmentActivityStyle from './StyleSet/SingleAttachmentActivity';
-import createSlottedActivityStatusStyle from './StyleSet/SlottedActivityStatus';
 import createSpinnerAnimationStyle from './StyleSet/SpinnerAnimation';
 import createStackedLayoutStyle from './StyleSet/StackedLayout';
 import createSuggestedActionsStyle from './StyleSet/SuggestedActions';
@@ -40,14 +43,17 @@ import createTextContentStyle from './StyleSet/TextContent';
 import createThumbButtonStyle from './StyleSet/ThumbButton';
 import createToasterStyle from './StyleSet/Toaster';
 import createToastStyle from './StyleSet/Toast';
+import createTooltipStyle from './StyleSet/Tooltip';
 import createTypingAnimationStyle from './StyleSet/TypingAnimation';
 import createTypingIndicatorStyle from './StyleSet/TypingIndicator';
 import createUploadButtonStyle from './StyleSet/UploadButton';
 import createVideoAttachmentStyle from './StyleSet/VideoAttachment';
 import createVideoContentStyle from './StyleSet/VideoContent';
+import createViewCodeDialogStyle from './StyleSet/ViewCodeDialog';
 import createVimeoContentStyle from './StyleSet/VimeoContent';
 import createWarningNotificationStyle from './StyleSet/WarningNotification';
 import createYouTubeContentStyle from './StyleSet/YouTubeContent';
+import createFeedbackTextAreaStyle from './StyleSet/FeedbackTextArea';
 
 // TODO: [P4] We should add a notice for people who want to use "styleSet" instead of "styleOptions".
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
@@ -58,7 +64,9 @@ export default function createStyleSet(styleOptions: StyleOptions) {
 
   return Object.freeze({
     activities: createActivitiesStyle(),
-    audioAttachment: createAudioAttachmentStyle(strictStyleOptions),
+    activityButton: createActivityButtonStyle(),
+    activityCopyButton: createActivityCopyButtonStyle(),
+    audioAttachment: createAudioAttachmentStyle(),
     audioContent: createAudioContentStyle(),
     autoResizeTextArea: createAutoResizeTextAreaStyle(strictStyleOptions),
     avatar: createAvatarStyle(strictStyleOptions),
@@ -67,22 +75,23 @@ export default function createStyleSet(styleOptions: StyleOptions) {
     carouselFilmStrip: createCarouselFilmStrip(strictStyleOptions),
     carouselFilmStripAttachment: createCarouselFilmStripAttachment(strictStyleOptions),
     carouselFlipper: createCarouselFlipper(strictStyleOptions),
+    codeBlock: createCodeBlockStyle(),
+    codeBlockCopyButton: createCodeBlockCopyButtonStyle(),
     connectivityNotification: createConnectivityNotification(strictStyleOptions),
     dictationInterims: createDictationInterimsStyle(strictStyleOptions),
     errorBox: createErrorBoxStyle(strictStyleOptions),
     errorNotification: createErrorNotificationStyle(strictStyleOptions),
     fileContent: createFileContentStyle(strictStyleOptions),
-    imageAvatar: createImageAvatarStyle(strictStyleOptions),
+    imageAvatar: createImageAvatarStyle(),
     initialsAvatar: createInitialsAvatarStyle(strictStyleOptions),
-    keyboardHelp: createKeyboardHelpStyle(strictStyleOptions),
     microphoneButton: createMicrophoneButtonStyle(strictStyleOptions),
+    monochromeImageMasker: createMonochromeImageMaskerStyleSet(),
     options: { ...strictStyleOptions }, // Cloned to make sure no additional modifications will propagate up.
     root: createRootStyle(strictStyleOptions),
     scrollToEndButton: createScrollToEndButtonStyle(strictStyleOptions),
     sendBox: createSendBoxStyle(strictStyleOptions),
     sendBoxButton: createSendBoxButtonStyle(strictStyleOptions),
     sendBoxTextBox: createSendBoxTextBoxStyle(strictStyleOptions),
-    singleAttachmentActivity: createSingleAttachmentActivityStyle(strictStyleOptions),
     spinnerAnimation: createSpinnerAnimationStyle(strictStyleOptions),
     stackedLayout: createStackedLayoutStyle(strictStyleOptions),
     suggestedAction: createSuggestedActionStyle(strictStyleOptions),
@@ -100,14 +109,17 @@ export default function createStyleSet(styleOptions: StyleOptions) {
 
     // Following styles follows new house rules:
     // - Use CSS var instead of strictStyleOptions
+    chatHistoryBox: createChatHistoryBoxStyleSet(),
     citationModalDialog: createCitationModalDialogStyle(),
-    cssCustomProperties: createCSSCustomPropertiesStyle(strictStyleOptions),
+    feedbackForm: createFeedbackFormStyle(),
+    feedbackTextArea: createFeedbackTextAreaStyle(),
     linkDefinitions: createLinkDefinitionsStyle(),
     modalDialog: createModalDialogStyle(),
     renderMarkdown: createRenderMarkdownStyle(),
     sendStatus: createSendStatusStyle(),
-    slottedActivityStatus: createSlottedActivityStatusStyle(),
     textContent: createTextContentStyle(),
-    thumbButton: createThumbButtonStyle()
+    thumbButton: createThumbButtonStyle(),
+    tooltip: createTooltipStyle(),
+    viewCodeDialog: createViewCodeDialogStyle()
   } as const);
 }

package/src/Styles/createStyles.ts

@@ -0,0 +1,5 @@
+import { makeCreateStyles } from 'botframework-webchat-styles';
+
+export const componentStyleContent = '@--COMPONENT-STYLES-CONTENT--@';
+
+export default makeCreateStyles(componentStyleContent);

package/src/Styles/index.ts

@@ -0,0 +1,3 @@
+import createStyles from './createStyles';
+
+export { createStyles };

package/src/Styles/useCustomPropertiesClassName.ts

@@ -0,0 +1,75 @@
+import { hooks } from 'botframework-webchat-api';
+import { makeCreateStyles } from 'botframework-webchat-styles';
+import random from 'math-random';
+import { useMemo } from 'react';
+import CustomPropertyNames from './CustomPropertyNames';
+import useInjectStyles from '../hooks/internal/useInjectStyles';
+import useNonce from '../hooks/internal/useNonce';
+
+const { useStyleOptions } = hooks;
+
+const webchatCustomPropertiesClass = 'webchat__css-custom-properties';
+
+export default function useCustomPropertiesClassName() {
+  const [styleOptions] = useStyleOptions();
+  const nonce = useNonce();
+
+  const [styles, classNameState] = useMemo(() => {
+    const {
+      accent,
+      avatarSize,
+      borderAnimationColor1,
+      borderAnimationColor2,
+      borderAnimationColor3,
+      bubbleAttachmentMaxWidth,
+      bubbleAttachmentMinWidth,
+      bubbleImageMaxHeight,
+      bubbleImageMinHeight,
+      bubbleMessageMaxWidth,
+      bubbleMessageMinWidth,
+      bubbleMinHeight,
+      fontSizeSmall,
+      markdownExternalLinkIconImage,
+      paddingRegular,
+      primaryFont,
+      subtle,
+      timestampColor
+    } = styleOptions;
+
+    // eslint-disable-next-line no-magic-numbers
+    const randomClass = `wc-${Math.ceil(random() * Number.MAX_SAFE_INTEGER).toString(36)}` as const;
+
+    const contents = `
+.${webchatCustomPropertiesClass}.${randomClass} {
+  display: contents;
+  ${CustomPropertyNames.BorderAnimationColor1}: ${borderAnimationColor1};
+  ${CustomPropertyNames.BorderAnimationColor2}: ${borderAnimationColor2};
+  ${CustomPropertyNames.BorderAnimationColor3}: ${borderAnimationColor3};
+  ${CustomPropertyNames.ColorAccent}: ${accent};
+  ${CustomPropertyNames.ColorSubtle}: ${subtle};
+  ${CustomPropertyNames.ColorTimestamp}: ${timestampColor || subtle};
+  ${CustomPropertyNames.FontPrimary}: ${primaryFont};
+  ${CustomPropertyNames.FontSizeSmall}: ${fontSizeSmall};
+  ${CustomPropertyNames.IconURLExternalLink}: ${markdownExternalLinkIconImage};
+  ${CustomPropertyNames.MaxHeightImageBubble}: ${bubbleImageMaxHeight}px;
+  ${CustomPropertyNames.MaxWidthAttachmentBubble}: ${bubbleAttachmentMaxWidth}px;
+  ${CustomPropertyNames.MinWidthAttachmentBubble}: ${bubbleAttachmentMinWidth}px;
+  ${CustomPropertyNames.MaxWidthMessageBubble}: ${bubbleMessageMaxWidth}px;
+  ${CustomPropertyNames.MinWidthMessageBubble}: ${bubbleMessageMinWidth}px;
+  ${CustomPropertyNames.MinHeightBubble}: ${bubbleMinHeight}px;
+  ${CustomPropertyNames.MinHeightImageBubble}: ${bubbleImageMinHeight}px;
+  ${CustomPropertyNames.PaddingRegular}: ${paddingRegular}px;
+  ${CustomPropertyNames.SizeAvatar}: ${avatarSize}px;
+}
+`;
+    const [style] = makeCreateStyles(contents)();
+
+    style.dataset.webchatInjected = 'component';
+
+    return [Object.freeze([style]), Object.freeze([`${webchatCustomPropertiesClass} ${randomClass}`] as const)];
+  }, [styleOptions]);
+
+  useInjectStyles(styles, nonce);
+
+  return classNameState;
+}

package/src/Tooltip/index.ts

@@ -0,0 +1 @@
+export { default as Tooltip } from './private/Tooltip';

package/src/Tooltip/private/Tooltip.tsx

@@ -0,0 +1,26 @@
+import cx from 'classnames';
+import React, { memo, type ReactNode } from 'react';
+import { useStyleSet } from '../../hooks';
+
+type TooltipProps = Readonly<{
+  children: ReactNode;
+  className?: string | undefined;
+  position?: 'block-start';
+}>;
+
+function Tooltip({ children, className, position = 'block-start' }: TooltipProps) {
+  const [{ tooltip: tooltipClassName }] = useStyleSet();
+
+  return (
+    <span
+      className={cx('webchat__tooltip', className, tooltipClassName, `webchat__tooltip--${position}`)}
+      /* @ts-expect-error: inert unknown attribute */
+      inert="true"
+      role="tooltip"
+    >
+      {children}
+    </span>
+  );
+}
+
+export default memo(Tooltip);

package/src/Transcript/ActivityRow.tsx

@@ -3,24 +3,24 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 
-import { android } from '../Utils/detectBrowser';
-import FocusTrap from './FocusTrap';
-import ScreenReaderText from '../ScreenReaderText';
 import SpeakActivity from '../Activity/Speak';
 import useActiveDescendantId from '../providers/TranscriptFocus/useActiveDescendantId';
-import useActivityAccessibleName from './useActivityAccessibleName';
 import useFocusByActivityKey from '../providers/TranscriptFocus/useFocusByActivityKey';
 import useGetDescendantIdByActivityKey from '../providers/TranscriptFocus/useGetDescendantIdByActivityKey';
+import ScreenReaderText from '../ScreenReaderText';
+import { android } from '../Utils/detectBrowser';
+import FocusTrap from './FocusTrap';
+import useActivityAccessibleName from './useActivityAccessibleName';
 
-import type { MouseEventHandler, PropsWithChildren } from 'react';
 import type { WebChatActivity } from 'botframework-webchat-core';
+import type { MouseEventHandler, PropsWithChildren } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
 const { useActivityKeysByRead, useGetHasAcknowledgedByActivityKey, useGetKeyByActivity } = hooks;
 
 type ActivityRowProps = PropsWithChildren<{ activity: WebChatActivity }>;
 
-const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, children }, ref) => {
+const ActivityRow = forwardRef<HTMLElement, ActivityRowProps>(({ activity, children }, ref) => {
   const [activeDescendantId] = useActiveDescendantId();
   const [readActivityKeys] = useActivityKeysByRead();
   const bodyRef = useRef<HTMLDivElement>();
@@ -65,6 +65,47 @@ const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, chi
     [bodyRef, children]
   );
 
+  const activityIdRef = useRefFrom(activity.id);
+
+  const handleFormData = useCallback(
+    (event: FormDataEvent & { target: HTMLFormElement }) => {
+      const { webchatIncludeActivityId, webchatIncludeActivityKey } = event.target.dataset;
+      if (webchatIncludeActivityId) {
+        event.formData.set(webchatIncludeActivityId, activityIdRef.current ?? '');
+      }
+      if (webchatIncludeActivityKey) {
+        event.formData.set(webchatIncludeActivityKey, activityKeyRef.current);
+      }
+    },
+
+    [activityKeyRef, activityIdRef]
+  );
+
+  const prevArticleRef = useRef<HTMLElement>(null);
+
+  const wrappedRef = useCallback(
+    (el: HTMLElement | null) => {
+      if (prevArticleRef.current) {
+        prevArticleRef.current.removeEventListener('formdata', handleFormData);
+      }
+
+      if (el) {
+        el.addEventListener('formdata', handleFormData);
+      }
+
+      prevArticleRef.current = el;
+
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(el);
+        } else {
+          ref.current = el;
+        }
+      }
+    },
+    [handleFormData, ref]
+  );
+
   return (
     // TODO: [P2] Add `aria-roledescription="message"` for better AX, need localization strings.
     <article
@@ -74,7 +115,7 @@ const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, chi
       })}
       // When NVDA is in browse mode, using up/down arrow key to "browse" will dispatch "click" and "mousedown" events for <article> element (inside <LiveRegionActivity>).
       onMouseDownCapture={handleMouseDownCapture}
-      ref={ref}
+      ref={wrappedRef}
     >
       {/* TODO: [P1] File a crbug for TalkBack. It should not able to read the content twice when scanning. */}
 
@@ -97,10 +138,17 @@ const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, chi
           <ScreenReaderText aria-hidden={true} id={descendantLabelId} text={accessibleName} />
         </div>
       )}
-      <FocusTrap onFocus={handleDescendantFocus} onLeave={handleLeaveFocusTrap}>
+      <FocusTrap
+        onFocus={handleDescendantFocus}
+        onLeave={handleLeaveFocusTrap}
+        targetClassName="webchat__basic-transcript__activity-focus-target"
+      >
         {focusTrapChildren}
       </FocusTrap>
-      {shouldSpeak && <SpeakActivity activity={activity} />}
+      {shouldSpeak && (
+        // TODO: Should build `webChatActivitySchema`.
+        <SpeakActivity activity={activity as WebChatActivity & { channelData: { speechSynthesisUtterance?: any } }} />
+      )}
       <div
         className={classNames('webchat__basic-transcript__activity-indicator', {
           'webchat__basic-transcript__activity-indicator--focus': isActiveDescendant