botframework-webchat-fluent-theme 4.18.1-main.20240831.f4058ce → 4.18.1-main.20240911.3e47786

package/src/components/preChatActivity/StarterPromptsToolbar.tsx

@@ -1,34 +1,47 @@
+import { hooks } from 'botframework-webchat-api';
 import { type DirectLineCardAction } from 'botframework-webchat-core';
 import cx from 'classnames';
-import React, { memo, type ReactNode } from 'react';
+import React, { Fragment, memo } from 'react';
 import { useStyles } from '../../styles/index.js';
 import StarterPromptsCardAction from './StarterPromptsCardAction.js';
 import styles from './StarterPromptsToolbar.module.css';
 
+const { useUIState } = hooks;
+
 type Props = Readonly<{
   cardActions: readonly DirectLineCardAction[];
   className?: string | undefined;
-  children?: ReactNode | undefined;
 }>;
 
-const StarterPrompts = ({ cardActions, children, className }: Props) => {
+const StarterPromptsToolbar = ({ cardActions, className }: Props) => {
   const classNames = useStyles(styles);
+  const [uiState] = useUIState();
 
   return (
     // TODO: Accessibility-wise, this should be role="toolbar" with keyboard navigation.
     <div className={cx(className, classNames['pre-chat-message-activity__card-action-toolbar'])}>
       <div className={classNames['pre-chat-message-activity__card-action-toolbar-grid']}>
-        {children ||
+        {uiState === 'blueprint' ? (
+          <Fragment>
+            <StarterPromptsCardAction />
+            <StarterPromptsCardAction />
+            <StarterPromptsCardAction />
+          </Fragment>
+        ) : (
           cardActions
-            .filter<
-              DirectLineCardAction & { type: 'messageBack' }
-            >((card: DirectLineCardAction): card is DirectLineCardAction & { type: 'messageBack' } => card.type === 'messageBack')
-            .map(cardAction => <StarterPromptsCardAction key={cardAction.text} messageBackAction={cardAction} />)}
+            .filter<DirectLineCardAction & { type: 'messageBack' }>(
+              (card: DirectLineCardAction): card is DirectLineCardAction & { type: 'messageBack' } =>
+                card.type === 'messageBack'
+            )
+            // There is no other usable keys in card actions.
+            // eslint-disable-next-line react/no-array-index-key
+            .map((cardAction, index) => <StarterPromptsCardAction key={index} messageBackAction={cardAction} />)
+        )}
       </div>
     </div>
   );
 };
 
-StarterPrompts.displayName = 'StarterPrompts';
+StarterPromptsToolbar.displayName = 'StarterPromptsToolbar';
 
-export default memo(StarterPrompts);
+export default memo(StarterPromptsToolbar);

package/src/components/sendBox/Attachments.tsx

@@ -1,10 +1,10 @@
 import { hooks } from 'botframework-webchat-component';
-import React, { memo } from 'react';
 import cx from 'classnames';
-import styles from './Attachments.module.css';
+import React, { memo } from 'react';
 import { useStyles } from '../../styles';
+import styles from './Attachments.module.css';
 
-const { useLocalizer } = hooks;
+const { useLocalizer, useUIState } = hooks;
 
 const attachmentsPluralStringIds = {
   one: 'TEXT_INPUT_ATTACHMENTS_ONE',
@@ -21,10 +21,11 @@ function Attachments({
   readonly attachments: readonly Readonly<{ blob: Blob | File; thumbnailURL?: URL | undefined }>[];
   readonly className?: string | undefined;
 }>) {
+  const [uiState] = useUIState();
   const classNames = useStyles(styles);
   const localizeWithPlural = useLocalizer({ plural: true });
 
-  return attachments.length ? (
+  return uiState !== 'blueprint' && attachments.length ? (
     <div className={cx(classNames['sendbox__attachment'], className)}>
       {localizeWithPlural(attachmentsPluralStringIds, attachments.length)}
     </div>

package/src/components/sendBox/SendBox.module.css

@@ -10,6 +10,13 @@
   --webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge);
 }
 
+/* Copilot variant */
+:global(.webchat-fluent) .sendbox.variant-copilot {
+  .sendbox__text-counter:not(.sendbox__text-counter--error) {
+    visibility: hidden;
+  }
+}
+
 :global(.webchat-fluent) .sendbox__sendbox {
   background-color: var(--webchat-colorNeutralBackground1);
   border-radius: var(--webchat-sendbox-border-radius);

package/src/components/sendBox/SendBox.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { SendIcon } from '../../icons';
-import { useStyles } from '../../styles';
+import { useStyles, useVariantClassName } from '../../styles';
 import testIds from '../../testIds';
 import { DropZone } from '../dropZone';
 import { SuggestedActions } from '../suggestedActions';
@@ -27,7 +27,8 @@ const {
   useSendBoxAttachments,
   useSendBoxValue,
   useSendMessage,
-  useStyleOptions
+  useStyleOptions,
+  useUIState
 } = hooks;
 
 type Props = Readonly<{
@@ -37,23 +38,31 @@ type Props = Readonly<{
 }>;
 
 function SendBox(props: Props) {
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [localMessage, setLocalMessage] = useState('');
-  const [globalMessage, setGlobalMessage] = useSendBoxValue();
-  const message = props.isPrimary ? globalMessage : localMessage;
-  const setMessage = props.isPrimary ? setGlobalMessage : setLocalMessage;
-  const [attachments, setAttachments] = useSendBoxAttachments();
   const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions();
-  const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
+  const [attachments, setAttachments] = useSendBoxAttachments();
+  const [globalMessage, setGlobalMessage] = useSendBoxValue();
+  const [localMessage, setLocalMessage] = useState('');
+  const [telephoneKeypadShown] = useTelephoneKeypadShown();
+  const [uiState] = useUIState();
   const classNames = useStyles(styles);
+  const variantClassName = useVariantClassName(styles);
+  const errorMessageId = useUniqueId('sendbox__error-message-id');
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const localize = useLocalizer();
-  const sendMessage = useSendMessage();
   const makeThumbnail = useMakeThumbnail();
-  const errorMessageId = useUniqueId('sendbox__error-message-id');
-  const [errorMessage, commitLatestError] = useSubmitError({ message, attachments });
-  const [telephoneKeypadShown] = useTelephoneKeypadShown();
+  const sendMessage = useSendMessage();
   const setFocus = useFocus();
 
+  const message = props.isPrimary ? globalMessage : localMessage;
+  const setMessage = props.isPrimary ? setGlobalMessage : setLocalMessage;
+  const isBlueprint = uiState === 'blueprint';
+
+  const [errorMessage, commitLatestError] = useSubmitError({ message, attachments });
+  const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
+  const shouldShowMessageLength =
+    !isBlueprint && !telephoneKeypadShown && maxMessageLength && isFinite(maxMessageLength);
+  const shouldShowTelephoneKeypad = !isBlueprint && telephoneKeypadShown;
+
   useRegisterFocusSendBox(
     useCallback(
       ({ noKeyboard, waitUntil }: SendBoxFocusOptions) => {
@@ -174,7 +183,12 @@ function SendBox(props: Props) {
   };
 
   return (
-    <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
+    <form
+      {...aria}
+      className={cx(classNames['sendbox'], variantClassName, props.className)}
+      data-testid={testIds.sendBoxContainer}
+      onSubmit={handleFormSubmit}
+    >
       <SuggestedActions />
       <div
         className={cx(classNames['sendbox__sendbox'])}
@@ -185,7 +199,7 @@ function SendBox(props: Props) {
           aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
           className={cx(classNames['sendbox__sendbox-text'], classNames['sendbox__text-area--in-grid'])}
           data-testid={testIds.sendBoxTextBox}
-          hidden={telephoneKeypadShown}
+          hidden={shouldShowTelephoneKeypad}
           onInput={handleMessageChange}
           placeholder={props.placeholder ?? localize('TEXT_INPUT_PLACEHOLDER')}
           ref={inputRef}
@@ -199,7 +213,7 @@ function SendBox(props: Props) {
         />
         <Attachments attachments={attachments} className={classNames['sendbox__attachment--in-grid']} />
         <div className={cx(classNames['sendbox__sendbox-controls'], classNames['sendbox__sendbox-controls--in-grid'])}>
-          {!telephoneKeypadShown && maxMessageLength && isFinite(maxMessageLength) && (
+          {shouldShowMessageLength && (
             <div
               className={cx(classNames['sendbox__text-counter'], {
                 [classNames['sendbox__text-counter--error']]: isMessageLengthExceeded
@@ -215,7 +229,7 @@ function SendBox(props: Props) {
             <ToolbarButton
               aria-label={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
               data-testid={testIds.sendBoxSendButton}
-              disabled={isMessageLengthExceeded || telephoneKeypadShown}
+              disabled={isMessageLengthExceeded || shouldShowTelephoneKeypad}
               type="submit"
             >
               <SendIcon />

package/src/components/sendBox/TextArea.tsx

@@ -1,8 +1,11 @@
+import { hooks } from 'botframework-webchat-api';
 import cx from 'classnames';
-import React, { forwardRef, useCallback, type FormEventHandler, type KeyboardEventHandler } from 'react';
+import React, { forwardRef, Fragment, useCallback, type FormEventHandler, type KeyboardEventHandler } from 'react';
 import { useStyles } from '../../styles';
 import styles from './TextArea.module.css';
 
+const { useUIState } = hooks;
+
 const TextArea = forwardRef<
   HTMLTextAreaElement,
   Readonly<{
@@ -25,8 +28,11 @@ const TextArea = forwardRef<
     value?: string | undefined;
   }>
 >((props, ref) => {
+  const [uiState] = useUIState();
   const classNames = useStyles(styles);
 
+  const disabled = uiState === 'disabled';
+
   const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(event => {
     // Shift+Enter adds a new line
     // Enter requests related form submission
@@ -43,39 +49,53 @@ const TextArea = forwardRef<
     <div
       className={cx(
         classNames['sendbox__text-area'],
-        {
-          [classNames['sendbox__text-area--hidden']]: props.hidden
-        },
+        { [classNames['sendbox__text-area--hidden']]: props.hidden },
         props.className
       )}
       role={props.hidden ? 'hidden' : undefined}
     >
-      <div
-        className={cx(
-          classNames['sendbox__text-area-doppelganger'],
-          classNames['sendbox__text-area-shared'],
-          classNames['sendbox__text-area-input--scroll']
-        )}
-      >
-        {props.value || props.placeholder}{' '}
-      </div>
-      <textarea
-        aria-label={props['aria-label']}
-        className={cx(
-          classNames['sendbox__text-area-input'],
-          classNames['sendbox__text-area-shared'],
-          classNames['sendbox__text-area-input--scroll']
-        )}
-        data-testid={props['data-testid']}
-        onInput={props.onInput}
-        onKeyDown={handleKeyDown}
-        placeholder={props.placeholder}
-        ref={ref}
-        rows={props.startRows ?? 1}
-        // eslint-disable-next-line no-magic-numbers
-        tabIndex={props.hidden ? -1 : undefined}
-        value={props.value}
-      />
+      {uiState === 'blueprint' ? (
+        <div
+          className={cx(
+            classNames['sendbox__text-area-doppelganger'],
+            classNames['sendbox__text-area-input--scroll'],
+            classNames['sendbox__text-area-shared']
+          )}
+        >
+          {' '}
+        </div>
+      ) : (
+        <Fragment>
+          <div
+            className={cx(
+              classNames['sendbox__text-area-doppelganger'],
+              classNames['sendbox__text-area-input--scroll'],
+              classNames['sendbox__text-area-shared']
+            )}
+          >
+            {props.value || props.placeholder}{' '}
+          </div>
+          <textarea
+            aria-disabled={disabled}
+            aria-label={props['aria-label']}
+            className={cx(
+              classNames['sendbox__text-area-input'],
+              classNames['sendbox__text-area-input--scroll'],
+              classNames['sendbox__text-area-shared']
+            )}
+            data-testid={props['data-testid']}
+            onInput={props.onInput}
+            onKeyDown={handleKeyDown}
+            placeholder={props.placeholder}
+            readOnly={disabled}
+            ref={ref}
+            rows={props.startRows ?? 1}
+            // eslint-disable-next-line no-magic-numbers
+            tabIndex={props.hidden ? -1 : undefined}
+            value={props.value}
+          />
+        </Fragment>
+      )}
     </div>
   );
 });

package/src/components/sendBox/Toolbar.module.css

@@ -1,6 +1,9 @@
 :global(.webchat-fluent) .sendbox__toolbar {
+  --webchat__sendbox-button-height: 32px;
+
   display: flex;
   gap: 4px;
+  height: var(--webchat__sendbox-button-height);
   margin-inline-start: auto;
 }
 
@@ -14,9 +17,9 @@
   color: currentColor;
   cursor: pointer;
   display: flex;
+  height: var(--webchat__sendbox-button-height);
   justify-content: center;
   padding: 3px;
-  width: 32px;
 
   > svg {
     font-size: 20px;
@@ -26,14 +29,17 @@
   &.sendbox__toolbar-button--selected {
     color: var(--webchat-colorNeutralForeground2BrandSelected);
   }
+
   @media (hover: hover) {
     &:not([aria-disabled="true"]):hover {
       color: var(--webchat-colorNeutralForeground2BrandHover);
     }
   }
+
   &:not([aria-disabled="true"]):active {
     color: var(--webchat-colorNeutralForeground2BrandPressed);
   }
+
   &[aria-disabled="true"] {
     color: var(--webchat-colorNeutralForegroundDisabled);
     cursor: not-allowed;

package/src/components/sendBox/Toolbar.tsx

@@ -1,7 +1,10 @@
+import { hooks } from 'botframework-webchat-api';
 import cx from 'classnames';
 import React, { memo, type MouseEventHandler, type ReactNode } from 'react';
-import styles from './Toolbar.module.css';
 import { useStyles } from '../../styles';
+import styles from './Toolbar.module.css';
+
+const { useUIState } = hooks;
 
 const preventDefaultHandler: MouseEventHandler<HTMLButtonElement> = event => event.preventDefault();
 
@@ -19,20 +22,22 @@ export const ToolbarButton = memo(
     }>
   ) => {
     const classNames = useStyles(styles);
+    const [uiState] = useUIState();
+
+    const disabled = props.disabled || uiState === 'disabled';
 
     return (
       <button
+        aria-disabled={disabled ? 'true' : undefined}
         aria-label={props['aria-label']}
         className={cx(classNames['sendbox__toolbar-button'], props.className, {
           [classNames['sendbox__toolbar-button--selected']]: props.selected
         })}
         data-testid={props['data-testid']}
-        onClick={props.disabled ? preventDefaultHandler : props.onClick}
+        onClick={disabled ? preventDefaultHandler : props.onClick}
+        // eslint-disable-next-line no-magic-numbers
+        tabIndex={disabled ? -1 : undefined}
         type={props.type === 'submit' ? 'submit' : 'button'}
-        {...(props.disabled && {
-          'aria-disabled': 'true',
-          tabIndex: -1
-        })}
       >
         {props.children}
       </button>
@@ -43,9 +48,14 @@ export const ToolbarButton = memo(
 ToolbarButton.displayName = 'ToolbarButton';
 
 export const Toolbar = memo((props: Readonly<{ children?: ReactNode | undefined; className?: string | undefined }>) => {
+  const [uiState] = useUIState();
   const classNames = useStyles(styles);
 
-  return <div className={cx(classNames['sendbox__toolbar'], props.className)}>{props.children}</div>;
+  return (
+    <div className={cx(classNames['sendbox__toolbar'], props.className)}>
+      {uiState !== 'blueprint' && props.children}
+    </div>
+  );
 });
 
 Toolbar.displayName = 'Toolbar';

package/src/components/suggestedActions/AccessibleButton.tsx

@@ -3,12 +3,13 @@ import React, { MouseEventHandler, ReactNode, forwardRef, memo, useRef } from 'r
 const preventDefaultHandler: MouseEventHandler<HTMLButtonElement> = event => event.preventDefault();
 
 type AccessibleButtonProps = Readonly<{
+  'aria-hidden'?: boolean | undefined;
+  'data-testid'?: string | undefined;
+  children?: ReactNode | undefined;
   className?: string | undefined;
-  'aria-hidden'?: boolean;
-  children?: ReactNode;
-  disabled?: boolean;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  tabIndex?: number;
+  disabled?: boolean | undefined;
+  onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+  tabIndex?: number | undefined;
   type: 'button';
 }>;
 
@@ -31,23 +32,24 @@ type AccessibleButtonProps = Readonly<{
 // - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
 
 const AccessibleButton = forwardRef<HTMLButtonElement, AccessibleButtonProps>(
-  ({ 'aria-hidden': ariaHidden, children, disabled, onClick, tabIndex, ...props }, forwardedRef) => {
+  (
+    { 'aria-hidden': ariaHidden, children, className, 'data-testid': dataTestId, disabled, onClick, tabIndex },
+    forwardedRef
+  ) => {
     const targetRef = useRef<HTMLButtonElement>(null);
 
     const ref = forwardedRef || targetRef;
 
     return (
       <button
-        aria-disabled={disabled ? 'true' : 'false'}
+        aria-disabled={disabled ? 'true' : undefined}
         aria-hidden={ariaHidden}
+        className={className}
+        data-testid={dataTestId}
         onClick={disabled ? preventDefaultHandler : onClick}
         ref={ref}
-        tabIndex={tabIndex}
-        {...(disabled && {
-          'aria-disabled': 'true',
-          tabIndex: -1
-        })}
-        {...props}
+        // eslint-disable-next-line no-magic-numbers
+        tabIndex={disabled ? -1 : tabIndex}
         type="button"
       >
         {children}

package/src/components/suggestedActions/SuggestedAction.module.css

@@ -1,16 +1,17 @@
 :global(.webchat-fluent) .suggested-action {
   align-items: center;
   background: transparent;
-  border-radius: 8px;
-  border: 1px solid var(--webchat-colorBrandStroke2);
+  border-radius: var(--webchat-borderRadiusXLarge);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandStroke2);
   color: currentColor;
   cursor: pointer;
   display: flex;
-  font-size: 12px;
-  gap: 4px;
-  padding: 4px 8px 4px;
+  font-family: var(--webchat__font--primary);
+  font-size: var(--webchat-fontSizeBase200);
+  gap: var(--webchat-spacingHorizontalXS);
+  padding: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalS);
   text-align: start;
-  transition: all .15s ease-out;
+  transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 
   @media (hover: hover) {
     &:not([aria-disabled="true"]):hover {
@@ -29,7 +30,7 @@
 }
 
 :global(.webchat-fluent) .suggested-action__image {
-  font-size: 12px;
+  font-size: var(--webchat-fontSizeBase200);
   height: 1em;
   width: 1em;
 }

package/src/components/suggestedActions/SuggestedAction.tsx

@@ -2,12 +2,14 @@ import { hooks } from 'botframework-webchat-component';
 import { type DirectLineCardAction } from 'botframework-webchat-core';
 import cx from 'classnames';
 import React, { MouseEventHandler, memo, useCallback } from 'react';
-import styles from './SuggestedAction.module.css';
+
 import { useStyles } from '../../styles';
+import testIds from '../../testIds';
 import AccessibleButton from './AccessibleButton';
 import { useRovingFocusItemRef } from './private/rovingFocus';
+import styles from './SuggestedAction.module.css';
 
-const { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = hooks;
+const { useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions, useUIState } = hooks;
 
 type SuggestedActionProps = Readonly<{
   buttonText: string | undefined;
@@ -44,7 +46,7 @@ function SuggestedAction({
 }: SuggestedActionProps) {
   const [_, setSuggestedActions] = useSuggestedActions();
   const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet();
-  const [disabled] = useDisabled();
+  const [uiState] = useUIState();
   const focus = useFocus();
   const focusRef = useRovingFocusItemRef<HTMLButtonElement>(itemIndex);
   const performCardAction = usePerformCardAction();
@@ -75,7 +77,8 @@ function SuggestedAction({
   return (
     <AccessibleButton
       className={cx(classNames['suggested-action'], suggestedActionStyleSet + '', (className || '') + '')}
-      disabled={disabled}
+      data-testid={testIds.sendBoxSuggestedAction}
+      disabled={uiState === 'disabled'}
       onClick={handleClick}
       ref={focusRef}
       type="button"

package/src/components/suggestedActions/SuggestedActions.tsx

@@ -8,7 +8,7 @@ import RovingFocusProvider from './private/rovingFocus';
 import SuggestedAction from './SuggestedAction';
 import styles from './SuggestedActions.module.css';
 
-const { useFocus, useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;
+const { useFocus, useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions, useUIState } = hooks;
 
 function SuggestedActionStackedOrFlowContainer(
   props: Readonly<{
@@ -19,6 +19,7 @@ function SuggestedActionStackedOrFlowContainer(
 ) {
   const [{ suggestedActionLayout }] = useStyleOptions();
   const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
+  const [uiState] = useUIState();
   const classNames = useStyles(styles);
 
   return (
@@ -36,7 +37,7 @@ function SuggestedActionStackedOrFlowContainer(
       )}
       role="toolbar"
     >
-      {!!props.children && !!React.Children.count(props.children) && props.children}
+      {uiState !== 'blueprint' && props.children}
     </div>
   );
 }

package/src/components/theme/Theme.module.css

@@ -22,6 +22,9 @@
   --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);
   --webchat-colorNeutralBackground6: var(--colorNeutralBackground6, #e6e6e6);
 
+  --webchat-colorNeutralStencil1: var(--colorNeutralStencil1, #e6e6e6); /* #575757 for dark mode */
+  --webchat-colorNeutralStencil2: var(--colorNeutralStencil2, #fafafa); /* #333333 for dark mode */
+
   --webchat-colorTransparentBackground: var(--colorTransparentBackground, rgba(0, 0, 0, 0.4));
 
   --webchat-colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled, #e0e0e0);
@@ -257,18 +260,26 @@
     display: none;
   }
 
-  :global(.webchat__bubble)::after, :global(.pre-chat-message-activity)::after {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    border: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+  :global(.webchat__bubble)::after, 
+  :global(.pre-chat-message-activity)::after {
     border-radius: var(--webchat__bubble--border-radius);
+    content: '';
+    inset: 0;
+    outline-offset: 0;
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
     pointer-events: none;
+    position: absolute;
   }
 
   :global(.pre-chat-message-activity)::after {
-    inset: 0;
-    border-radius: var(--webchat-borderRadiusSmall);
+    border-radius: var(--webchat-borderRadiusMedium);
+    outline-offset: -3px;
+  }
+
+  :global(.liner-message-activity__text) {
+    border-radius: 20px;
+    outline-offset: 4px;
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
   }
 }
 
@@ -356,7 +367,7 @@
     outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
   }
 
-  &:disabled {
+  &[aria-disabled="true"] {
     background: var(--webchat-colorNeutralBackgroundDisabled);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStrokeDisabled);
     color: var(--webchat-colorNeutralForegroundDisabled);

package/src/private/FluentThemeProvider.tsx

@@ -21,9 +21,11 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
     (...args) => {
       const activity = args[0]?.activity;
 
+      // TODO: Should show pre-chat only when it is the very first message in the chat history.
       if (isPreChatMessageActivity(activity)) {
         return () => <PreChatMessageActivity activity={activity} />;
       }
+
       if (isLinerMessageActivity(activity)) {
         return () => <LinerMessageActivity activity={activity} />;
       }

package/src/testIds.ts

@@ -1,7 +1,9 @@
 const testIds = {
   preChatMessageActivityStarterPromptsCardAction: 'pre-chat message activity starter prompts card action',
+  sendBoxContainer: 'send box container',
   sendBoxDropZone: 'send box drop zone',
   sendBoxSendButton: 'send box send button',
+  sendBoxSuggestedAction: 'send box suggested action',
   sendBoxTextBox: 'send box text area',
   sendBoxTelephoneKeypadButton1: `send box telephone keypad button 1`,
   sendBoxTelephoneKeypadButton2: `send box telephone keypad button 2`,