botframework-webchat-fluent-theme 4.18.0 → 4.18.1-main.20240808.851825d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.0",
+  "version": "4.18.1-main.20240808.851825d",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -69,13 +69,14 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.0",
-    "botframework-webchat-component": "4.18.0",
-    "botframework-webchat-core": "4.18.0",
+    "botframework-webchat-api": "4.18.1-main.20240808.851825d",
+    "botframework-webchat-component": "4.18.1-main.20240808.851825d",
+    "botframework-webchat-core": "4.18.1-main.20240808.851825d",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",
-    "use-ref-from": "0.1.0"
+    "use-ref-from": "0.1.0",
+    "valibot": "^0.37.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.6"

package/src/components/preChatActivity/PreChatMessageActivity.module.css

@@ -0,0 +1,34 @@
+:global(.webchat-fluent) .pre-chat-message-activity {
+  display: grid;
+  grid-template-areas: 'body' 'toolbar';
+  grid-template-rows: auto auto;
+  gap: var(--webchat-spacingHorizontalXXXL);
+  padding: var(--webchat-spacingHorizontalXXXL);
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body {
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: var(--webchat-fontSizeBase300);
+  font-weight: var(--webchat-fontWeightRegular);
+  grid-area: body;
+  line-height: var(--webchat-lineHeightBase300);
+  text-align: center;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body h2 {
+  color: var(--webchat-colorNeutralForeground1);
+  font-family: inherit;
+  font-weight: var(--webchat-fontWeightSemibold);
+  font-size: var(--webchat-fontSizeHero700);
+  line-height: var(--webchat-lineHeightHero700);
+  margin: var(--webchat-spacingVerticalL) 0 0;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body img {
+  border-radius: 4px;
+  height: 64px;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__toolbar {
+  grid-area: toolbar;
+}

package/src/components/preChatActivity/PreChatMessageActivity.tsx

@@ -0,0 +1,35 @@
+import { hooks } from 'botframework-webchat-component';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo } from 'react';
+import { useStyles } from '../../styles/index.js';
+import styles from './PreChatMessageActivity.module.css';
+import StarterPromptsToolbar from './StarterPromptsToolbar.js';
+
+type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
+
+const { useRenderMarkdownAsHTML } = hooks;
+
+const PreChatMessageActivity = ({ activity }: Props) => {
+  const classNames = useStyles(styles);
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
+
+  const html = useMemo(
+    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(activity.text || '') } : { __html: '' }),
+    [activity.text, renderMarkdownAsHTML]
+  );
+
+  return (
+    <div className={classNames['pre-chat-message-activity']}>
+      {/* eslint-disable-next-line react/no-danger */}
+      <div className={classNames['pre-chat-message-activity__body']} dangerouslySetInnerHTML={html} />
+      <StarterPromptsToolbar
+        cardActions={activity.suggestedActions?.actions || []}
+        className={classNames['pre-chat-message-activity__toolbar']}
+      />
+    </div>
+  );
+};
+
+PreChatMessageActivity.displayName = 'PreChatMessageActivity';
+
+export default memo(PreChatMessageActivity);

package/src/components/preChatActivity/StarterPromptsCardAction.module.css

@@ -0,0 +1,58 @@
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-box {
+  appearance: none;
+  background-color: var(--webchat-colorNeutralBackground1);
+  border: 0;
+  border-radius: 16px;
+  box-shadow: var(--webchat-shadow2);
+  color: var(--webchat-colorNeutralForeground1);
+  cursor: pointer;
+  display: grid;
+  gap: 8px;
+  grid-template-areas: 'image title' 'image subtitle';
+  grid-template-columns: 20px 1fr;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+  padding: 16px 20px;
+  text-align: left;
+  user-select: none;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-box:disabled {
+  background-color: var(--webchat-colorNeutralBackground1Disabled);
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-box:hover {
+  background-color: var(--webchat-colorNeutralGrey94);
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-box:active {
+  background-color: var(--webchat-colorNeutralBackground1Pressed);
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-box:focus-visible {
+  outline: solid 2px var(--webchat-colorStrokeFocus2);
+  outline-offset: -2px;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-image {
+  grid-area: image;
+  height: 20px;
+  width: 20px;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-subtitle {
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: 14px;
+  font-weight: var(--webchat-fontWeightRegular);
+  grid-area: subtitle;
+  line-height: 20px;
+  pointer-events: none; /* Links in subtitle are not clickable. */
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-title {
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: 14px;
+  font-weight: var(--webchat-fontWeightSemibold);
+  grid-area: title;
+  line-height: 20px;
+}

package/src/components/preChatActivity/StarterPromptsCardAction.tsx

@@ -0,0 +1,64 @@
+import { hooks } from 'botframework-webchat-component';
+import { type DirectLineCardAction } from 'botframework-webchat-core';
+import cx from 'classnames';
+import React, { memo, useCallback, useMemo } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { useStyles } from '../../styles/index.js';
+import testIds from '../../testIds.js';
+import MonochromeImageMasker from './private/MonochromeImageMasker.js';
+import styles from './StarterPromptsCardAction.module.css';
+
+const { useFocus, useRenderMarkdownAsHTML, useSendBoxValue } = hooks;
+
+type Props = Readonly<{
+  className?: string | undefined;
+  messageBackAction: DirectLineCardAction & { type: 'messageBack' };
+}>;
+
+const StarterPromptAction = ({ className, messageBackAction }: Props) => {
+  const [_, setSendBoxValue] = useSendBoxValue();
+  const classNames = useStyles(styles);
+  const focus = useFocus();
+  const inputTextRef = useRefFrom(messageBackAction.displayText || messageBackAction.text || '');
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
+  const subtitleHTML = useMemo(
+    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(messageBackAction.text || '') } : { __html: '' }),
+    [messageBackAction.text, renderMarkdownAsHTML]
+  );
+
+  const handleClick = useCallback(() => {
+    setSendBoxValue(inputTextRef.current);
+
+    // Focus on the send box after the value is "pasted."
+    focus('sendBox');
+  }, [focus, inputTextRef, setSendBoxValue]);
+
+  return (
+    <button
+      className={cx(className, classNames['pre-chat-message-activity__card-action-box'])}
+      data-testid={testIds.preChatMessageActivityStarterPromptsCardAction}
+      onClick={handleClick}
+      type="button"
+    >
+      <div className={classNames['pre-chat-message-activity__card-action-title']}>
+        {'title' in messageBackAction && messageBackAction.title}
+      </div>
+      {'image' in messageBackAction && messageBackAction.image && (
+        <MonochromeImageMasker
+          className={classNames['pre-chat-message-activity__card-action-image']}
+          src={messageBackAction.image}
+        />
+        // <img className="pre-chat-message-activity__card-action-image" src={messageBackAction.image} />
+      )}
+      <div
+        className={classNames['pre-chat-message-activity__card-action-subtitle']}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={subtitleHTML}
+      />
+    </button>
+  );
+};
+
+StarterPromptAction.displayName = 'StarterPromptAction';
+
+export default memo(StarterPromptAction);

package/src/components/preChatActivity/StarterPromptsToolbar.module.css

@@ -0,0 +1,18 @@
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-toolbar {
+  container-name: webchat-container;
+  container-type: inline-size;
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__card-action-toolbar-grid {
+  display: grid;
+  gap: var(--webchat-spacingHorizontalM);
+  grid-template-columns: 1fr 1fr 1fr;
+  padding: 0;
+}
+
+/* TODO: What is the good width to show as 3 columns? Web Chat, by default, has a bubble max width of 480px. */
+@container webchat-container (width <= 480px) {
+  :global(.webchat-fluent) .pre-chat-message-activity__card-action-toolbar-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/src/components/preChatActivity/StarterPromptsToolbar.tsx

@@ -0,0 +1,35 @@
+import { type DirectLineCardAction } from 'botframework-webchat-core';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { useStyles } from '../../styles/index.js';
+import StarterPromptsCardAction from './StarterPromptsCardAction.js';
+import styles from './StarterPromptsToolbar.module.css';
+
+type Props = Readonly<{
+  cardActions: readonly DirectLineCardAction[];
+  className?: string | undefined;
+}>;
+
+const StarterPrompts = ({ cardActions, className }: Props) => {
+  const classNames = useStyles(styles);
+
+  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']}>
+        {cardActions
+          .filter<DirectLineCardAction & { type: 'messageBack' }>(
+            (card: DirectLineCardAction): card is DirectLineCardAction & { type: 'messageBack' } =>
+              card.type === 'messageBack'
+          )
+          .map(cardAction => (
+            <StarterPromptsCardAction key={cardAction.text} messageBackAction={cardAction} />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+StarterPrompts.displayName = 'StarterPrompts';
+
+export default memo(StarterPrompts);

package/src/components/preChatActivity/index.tsx

@@ -0,0 +1,2 @@
+export { default as isPreChatMessageActivity } from './isPreChatMessageActivity.js';
+export { default as PreChatMessageActivity } from './PreChatMessageActivity.js';

package/src/components/preChatActivity/isPreChatMessageActivity.ts

@@ -0,0 +1,26 @@
+import type { WebChatActivity } from 'botframework-webchat-core';
+import { array, literal, object, safeParse, string, type InferOutput } from 'valibot';
+
+const messageEntity = object({
+  '@context': literal('https://schema.org'),
+  '@id': literal(''), // Must be empty string.
+  '@type': literal('Message'),
+  keywords: array(string()),
+  type: literal('https://schema.org/Message')
+});
+
+type MessageEntity = InferOutput<typeof messageEntity>;
+
+export default function isPreChatMessageActivity(
+  activity: undefined | WebChatActivity
+): activity is WebChatActivity & { type: 'message' } {
+  if (activity?.type !== 'message') {
+    return false;
+  }
+
+  const message = activity.entities?.find(
+    (entity): entity is MessageEntity => safeParse(messageEntity, entity).success
+  );
+
+  return !!message?.keywords.includes('PreChatMessage');
+}

package/src/components/preChatActivity/private/MonochromeImageMasker.module.css

@@ -0,0 +1,5 @@
+:global(.webchat-fluent) .pre-chat-message-activity__monochrome-image-masker {
+  background-color: var(--webchat-colorNeutralForeground4);
+  mask-image: var(--mask-image);
+  --webkit-mask-image: var(--mask-image);
+}

package/src/components/preChatActivity/private/MonochromeImageMasker.tsx

@@ -0,0 +1,19 @@
+import cx from 'classnames';
+import React, { memo, useMemo, type CSSProperties } from 'react';
+import { useStyles } from '../../../styles/index.js';
+import styles from './MonochromeImageMasker.module.css';
+
+type Props = Readonly<{ className?: string | undefined; src: string }>;
+
+const MonochromeImageMasker = ({ className, src }: Props) => {
+  const classNames = useStyles(styles);
+  const style = useMemo(() => ({ '--mask-image': `url(${src})` }) as CSSProperties, [src]);
+
+  return (
+    <div className={cx(className, classNames['pre-chat-message-activity__monochrome-image-masker'])} style={style} />
+  );
+};
+
+MonochromeImageMasker.displayName = 'MonochromeImageMasker';
+
+export default memo(MonochromeImageMasker);

package/src/components/sendBox/SendBox.tsx

@@ -3,6 +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 testIds from '../../testIds';
 import { DropZone } from '../dropZone';
 import { SuggestedActions } from '../suggestedActions';
@@ -10,14 +11,13 @@ import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '..
 import AddAttachmentButton from './AddAttachmentButton';
 import Attachments from './Attachments';
 import ErrorMessage from './ErrorMessage';
-import TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';
-import TextArea from './TextArea';
-import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 import useSubmitError from './private/useSubmitError';
+import useTranscriptNavigation from './private/useTranscriptNavigation';
 import useUniqueId from './private/useUniqueId';
 import styles from './SendBox.module.css';
-import { useStyles } from '../../styles';
-import useTranscriptNavigation from './private/useTranscriptNavigation';
+import TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';
+import TextArea from './TextArea';
+import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 
 const {
   useFocus,
@@ -25,18 +25,23 @@ const {
   useMakeThumbnail,
   useRegisterFocusSendBox,
   useSendBoxAttachments,
+  useSendBoxValue,
   useSendMessage,
   useStyleOptions
 } = hooks;
 
-function SendBox(
-  props: Readonly<{
-    className?: string | undefined;
-    placeholder?: string | undefined;
-  }>
-) {
+type Props = Readonly<{
+  className?: string | undefined;
+  isPrimary?: boolean | undefined;
+  placeholder?: string | undefined;
+}>;
+
+function SendBox(props: Props) {
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [message, setMessage] = useState('');
+  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;
@@ -183,7 +188,7 @@ function SendBox(
         />
         <Attachments attachments={attachments} className={classNames['sendbox__attachment--in-grid']} />
         <div className={cx(classNames['sendbox__sendbox-controls'], classNames['sendbox__sendbox-controls--in-grid'])}>
-          {!telephoneKeypadShown && maxMessageLength && (
+          {!telephoneKeypadShown && maxMessageLength && isFinite(maxMessageLength) && (
             <div
               className={cx(classNames['sendbox__text-counter'], {
                 [classNames['sendbox__text-counter--error']]: isMessageLengthExceeded
@@ -213,4 +218,10 @@ function SendBox(
   );
 }
 
+const PrimarySendBox = memo((props: Exclude<Props, 'primary'>) => <SendBox {...props} isPrimary={true} />);
+
+PrimarySendBox.displayName = 'PrimarySendBox';
+
 export default memo(SendBox);
+
+export { PrimarySendBox };

package/src/components/sendBox/index.tsx

@@ -1 +1 @@
-export { default as SendBox } from './SendBox';
+export { PrimarySendBox, default as SendBox } from './SendBox';

package/src/components/suggestedActions/SuggestedActions.tsx

@@ -1,11 +1,12 @@
 import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { memo, useCallback, type ReactNode } from 'react';
-import SuggestedAction from './SuggestedAction';
-import computeSuggestedActionText from './private/computeSuggestedActionText';
-import styles from './SuggestedActions.module.css';
 import { useStyles } from '../../styles';
+import { isPreChatMessageActivity } from '../preChatActivity';
+import computeSuggestedActionText from './private/computeSuggestedActionText';
 import RovingFocusProvider from './private/rovingFocus';
+import SuggestedAction from './SuggestedAction';
+import styles from './SuggestedActions.module.css';
 
 const { useFocus, useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;
 
@@ -44,54 +45,56 @@ function SuggestedActionStackedOrFlowContainer(
 function SuggestedActions() {
   const classNames = useStyles(styles);
   const localize = useLocalizer();
-  const [suggestedActions] = useSuggestedActions();
+  const [suggestedActions, _, { activity }] = useSuggestedActions();
   const focus = useFocus();
 
   const handleEscapeKey = useCallback(() => {
     focus('sendBox');
   }, [focus]);
 
-  const children = suggestedActions.map((cardAction, index) => {
-    const { displayText, image, imageAltText, text, type, value } = cardAction as {
-      displayText?: string;
-      image?: string;
-      imageAltText?: string;
-      text?: string;
-      type:
-        | 'call'
-        | 'downloadFile'
-        | 'imBack'
-        | 'messageBack'
-        | 'openUrl'
-        | 'playAudio'
-        | 'playVideo'
-        | 'postBack'
-        | 'showImage'
-        | 'signin';
-      value?: { [key: string]: any } | string;
-    };
+  const children = isPreChatMessageActivity(activity)
+    ? [] // Do not show suggested actions for pre-chat message, suggested actions has already shown inlined.
+    : suggestedActions.map((cardAction, index) => {
+        const { displayText, image, imageAltText, text, type, value } = cardAction as {
+          displayText?: string;
+          image?: string;
+          imageAltText?: string;
+          text?: string;
+          type:
+            | 'call'
+            | 'downloadFile'
+            | 'imBack'
+            | 'messageBack'
+            | 'openUrl'
+            | 'playAudio'
+            | 'playVideo'
+            | 'postBack'
+            | 'showImage'
+            | 'signin';
+          value?: { [key: string]: any } | string;
+        };
 
-    if (!suggestedActions?.length) {
-      return null;
-    }
+        if (!suggestedActions?.length) {
+          return null;
+        }
 
-    return (
-      <SuggestedAction
-        buttonText={computeSuggestedActionText(cardAction)}
-        displayText={displayText}
-        image={image}
-        // Image alt text should use `imageAltText` field and fallback to `text` field.
-        // https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#image-alt-text
-        imageAlt={image && (imageAltText || text)}
-        itemIndex={index}
-        // eslint-disable-next-line react/no-array-index-key
-        key={index}
-        text={text}
-        type={type}
-        value={value}
-      />
-    );
-  });
+        return (
+          <SuggestedAction
+            buttonText={computeSuggestedActionText(cardAction)}
+            displayText={displayText}
+            image={image}
+            // Image alt text should use `imageAltText` field and fallback to `text` field.
+            // https://github.com/microsoft/botframework-sdk/blob/main/specs/botframework-activity/botframework-activity.md#image-alt-text
+            imageAlt={image && (imageAltText || text)}
+            itemIndex={index}
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            text={text}
+            type={type}
+            value={value}
+          />
+        );
+      });
 
   return (
     <RovingFocusProvider onEscapeKey={handleEscapeKey}>

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

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent).theme {
   display: contents;
 
@@ -16,10 +15,15 @@
   --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);
   --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);
 
+  --webchat-colorNeutralBackground1Disabled: var(--colorNeutralBackground1Disabled, #f0f0f0);
+  --webchat-colorNeutralBackground1Pressed: var(--colorNeutralBackground1Pressed, #e0e0e0);
+
+  --webchat-colorNeutralGrey94: var(--colorNeutralGrey94, #f0f0f0);
+
   --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);
   --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);
   --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);
-  
+
   --webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);
 
   --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);
@@ -30,7 +34,7 @@
   --webchat-colorBrandForegroundLink: var(--colorBrandForegroundLink, #01678c);
   --webchat-colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover, #015a7a);
   --webchat-colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed, #014259);
-  --webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);  
+  --webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);
 
   --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);
   --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);
@@ -55,14 +59,25 @@
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */
   --webchat-spacingHorizontalMNudge: var(--spacingHorizontalMNudge, 10px);
+  --webchat-spacingHorizontalM: var(--spacingHorizontalM, 12px);
+  --webchat-spacingHorizontalXXXL: var(--spacingHorizontalXXXL, 32px);
+  --webchat-spacingVerticalL: var(--spacingVerticalL, 16px);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
   --webchat-fontFamilyBase: var(--fontFamilyBase, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif);
   --webchat-fontFamilyNumeric: var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
+  --webchat-fontWeightRegular: var(--fontWeightRegular, 400);
   --webchat-fontWeightSemibold: var(--fontWeightSemibold, 600);
-  
+
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts */
+  --webchat-fontSizeBase300: var(--fontSizeBase300, 14px);
+  --webchat-fontSizeHero700: var(--fontSizeHero700, 28px);
+
+  --webchat-lineHeightBase300: var(--lineHeightBase300, 20px);
+  --webchat-lineHeightHero700: var(--lineHeightHero700, 36px);
+
   --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);
 
   --webchat-durationUltraFast: var(--durationUltraFast, 0);
@@ -70,6 +85,9 @@
 
   --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));
   --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));
+
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts */
+  --webchat-shadow2: 0 0 2px rgba(0, 0, 0, 12%), 0 1px 2px rgba(0, 0, 0, 14%);
 }
 
 @media (prefers-reduced-motion) {
@@ -77,4 +95,4 @@
     --webchat-durationUltraFast: 0.01ms;
     --webchat-durationNormal: 0.01ms;
   }
-}
+}

package/src/components/theme/Theme.tsx

@@ -5,7 +5,7 @@ import { useStyles } from '../../styles';
 
 export const rootClassName = 'webchat-fluent';
 
-export default function WebchatTheme(props: Readonly<{ readonly children: ReactNode | undefined }>) {
+export default function Theme(props: Readonly<{ readonly children: ReactNode | undefined }>) {
   const classNames = useStyles(styles);
   return <div className={cx(rootClassName, classNames['theme'])}>{props.children}</div>;
 }

package/src/private/FluentThemeProvider.tsx

@@ -1,20 +1,37 @@
 import { Components } from 'botframework-webchat-component';
 import React, { memo, type ReactNode } from 'react';
 
+import type { ActivityMiddleware } from 'botframework-webchat-api';
+import { isPreChatMessageActivity, PreChatMessageActivity } from '../components/preChatActivity';
+import { PrimarySendBox } from '../components/sendBox';
 import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
 import { WebChatTheme } from '../components/theme';
-import { SendBox } from '../components/sendBox';
 
 const { ThemeProvider } = Components;
 
 type Props = Readonly<{ children?: ReactNode | undefined }>;
 
-const sendBoxMiddleware = [() => () => () => SendBox];
+const activityMiddleware: ActivityMiddleware[] = [
+  () =>
+    next =>
+    (...args) => {
+      const activity = args[0]?.activity;
+
+      if (activity && isPreChatMessageActivity(activity)) {
+        return () => <PreChatMessageActivity activity={activity} />;
+      }
+
+      return next(...args);
+    }
+];
+const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
 const FluentThemeProvider = ({ children }: Props) => (
   <WebChatTheme>
     <TelephoneKeypadProvider>
-      <ThemeProvider sendBoxMiddleware={sendBoxMiddleware}>{children}</ThemeProvider>
+      <ThemeProvider activityMiddleware={activityMiddleware} sendBoxMiddleware={sendBoxMiddleware}>
+        {children}
+      </ThemeProvider>
     </TelephoneKeypadProvider>
   </WebChatTheme>
 );

package/src/testIds.ts

@@ -1,4 +1,5 @@
 const testIds = {
+  preChatMessageActivityStarterPromptsCardAction: 'pre-chat message activity starter prompts card action',
   sendBoxDropZone: 'send box drop zone',
   sendBoxSendButton: 'send box send button',
   sendBoxTextBox: 'send box text area',