botframework-webchat-fluent-theme 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

package/src/components/preChatActivity/StarterPromptsCardAction.tsx

@@ -0,0 +1,75 @@
+import { Components, 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 styles from './StarterPromptsCardAction.module.css';
+
+const { useFocus, useRenderMarkdownAsHTML, useSendBoxValue, useUIState } = hooks;
+const { MonochromeImageMasker } = Components;
+
+type Props = Readonly<{
+  className?: string | undefined;
+  messageBackAction?: (DirectLineCardAction & { type: 'messageBack' }) | undefined;
+}>;
+
+const StarterPromptsCardAction = ({ className, messageBackAction }: Props) => {
+  const [_, setSendBoxValue] = useSendBoxValue();
+  const [uiState] = useUIState();
+  const classNames = useStyles(styles);
+  const focus = useFocus();
+  const inputTextRef = useRefFrom(messageBackAction?.displayText || messageBackAction?.text || '');
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
+  const subtitleHTML = useMemo<{ __html: string } | undefined>(
+    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(messageBackAction?.text || '') } : undefined),
+    [messageBackAction?.text, renderMarkdownAsHTML]
+  );
+  const disabled = uiState === 'disabled';
+  const title = messageBackAction && 'title' in messageBackAction && messageBackAction.title;
+
+  // Every starter prompt card action must have "title" field.
+  const shouldShowBlueprint = uiState === 'blueprint' || !title;
+
+  const handleClick = useCallback(() => {
+    setSendBoxValue(inputTextRef.current);
+
+    // Focus on the send box after the value is "pasted."
+    focus('sendBox');
+  }, [focus, inputTextRef, setSendBoxValue]);
+
+  return shouldShowBlueprint ? (
+    <div
+      className={cx(className, classNames['pre-chat-message-activity__card-action-box'])}
+      data-testid={testIds.preChatMessageActivityStarterPromptsCardAction}
+    />
+  ) : (
+    <button
+      aria-disabled={disabled ? true : undefined}
+      className={cx(className, classNames['pre-chat-message-activity__card-action-box'])}
+      data-testid={testIds.preChatMessageActivityStarterPromptsCardAction}
+      onClick={disabled ? undefined : handleClick}
+      // eslint-disable-next-line no-magic-numbers
+      tabIndex={disabled ? -1 : undefined}
+      type="button"
+    >
+      <div className={classNames['pre-chat-message-activity__card-action-title']}>{title}</div>
+      {'image' in messageBackAction && messageBackAction.image && (
+        <MonochromeImageMasker
+          className={classNames['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>
+  );
+};
+
+StarterPromptsCardAction.displayName = 'StarterPromptsCardAction';
+
+export default memo(StarterPromptsCardAction);

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,47 @@
+import { hooks } from 'botframework-webchat-api';
+import { type DirectLineCardAction } from 'botframework-webchat-core';
+import cx from 'classnames';
+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;
+}>;
+
+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']}>
+        {uiState === 'blueprint' ? (
+          <Fragment>
+            <StarterPromptsCardAction />
+            <StarterPromptsCardAction />
+            <StarterPromptsCardAction />
+          </Fragment>
+        ) : (
+          cardActions
+            .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>
+  );
+};
+
+StarterPromptsToolbar.displayName = 'StarterPromptsToolbar';
+
+export default memo(StarterPromptsToolbar);

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,7 @@
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+
+export default function isPreChatMessageActivity(
+  activity: undefined | WebChatActivity
+): activity is WebChatActivity & { type: 'message' } {
+  return !!(activity && getOrgSchemaMessage(activity?.entities || [])?.keywords?.includes('PreChatMessage'));
+}

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

@@ -3,5 +3,5 @@
   border: 1px solid var(--webchat-colorNeutralStroke1);
   cursor: default;
   padding: 6px 8px;
-  width: fit-content
+  width: fit-content;
 }

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

@@ -1,15 +1,26 @@
+import { useLiveRegion } from 'botframework-webchat-component/internal';
 import React, { memo } from 'react';
-import styles from './ErrorMessage.module.css';
 import { useStyles } from '../../styles';
+import styles from './ErrorMessage.module.css';
+
+type ErrorMessageProps = Readonly<{
+  error?: string | undefined;
+  id: string;
+}>;
 
-function ErrorMessage(props: Readonly<{ id: string; error?: string | undefined }>) {
+function ErrorMessage({ error, id }: ErrorMessageProps) {
   const classNames = useStyles(styles);
+
+  useLiveRegion(() => error && <div className="sendbox__error-message__status">{error}</div>, [error]);
+
   return (
     // eslint-disable-next-line react/forbid-dom-props
-    <span className={classNames['sendbox__error-message']} id={props.id} role="alert">
-      {props.error}
+    <span className={classNames['sendbox__error-message']} id={id}>
+      {error}
     </span>
   );
 }
 
+ErrorMessage.displayName = 'ErrorMessage';
+
 export default memo(ErrorMessage);

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

@@ -1,13 +1,22 @@
 :global(.webchat-fluent) .sendbox {
+  --webchat__sendbox--padding: var(--webchat__padding--sendbox);
+
   color: var(--webchat-colorNeutralForeground1);
   font-family: var(--webchat-fontFamilyBase);
-  padding: 0 10px 10px;
+  padding: var(--webchat__sendbox--padding);
   text-rendering: optimizeLegibility;
 
   --webchat-sendbox-attachment-area-active: ;
   --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);
@@ -19,14 +28,13 @@
   grid-template:
     [telephone-keypad-start] 'text-area' [telephone-keypad-end]
     var(--webchat-sendbox-attachment-area-active)
-    'controls' / [telephone-keypad] 1fr
-  ;
+    'controls' / [telephone-keypad] 1fr;
   line-height: 20px;
   padding: 8px;
   position: relative;
 
   &:has(.sendbox__attachment--in-grid) {
-    --webchat-sendbox-attachment-area-active: 'attachment'
+    --webchat-sendbox-attachment-area-active: 'attachment';
   }
 
   &:focus-within {
@@ -39,7 +47,7 @@
     border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);
     bottom: -1px;
     clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
-    content: "";
+    content: '';
     height: var(--webchat-sendbox-border-radius);
     left: -1px;
     position: absolute;
@@ -77,8 +85,15 @@
   font-size: 14px;
   line-height: 20px;
   outline: none;
-  padding: 4px 4px 0;
+  margin: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalXS) var(--webchat-spacingVerticalNone);
   resize: none;
+
+  /* Prevent zoom on focus on iOS */
+  @media only screen and (hover: none) and (pointer: coarse) {
+    &:focus-within {
+      font-size: 16px;
+    }
+  }
 }
 
 :global(.webchat-fluent) .sendbox__sendbox-controls {

package/src/components/sendBox/SendBox.tsx

@@ -1,8 +1,17 @@
-import { hooks, type SendBoxFocusOptions } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
-import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
+import React, {
+  memo,
+  ReactNode,
+  useCallback,
+  useRef,
+  useState,
+  type FormEventHandler,
+  type MouseEventHandler
+} from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { SendIcon } from '../../icons';
+import { useStyles, useVariantClassName } from '../../styles';
 import testIds from '../../testIds';
 import { DropZone } from '../dropZone';
 import { SuggestedActions } from '../suggestedActions';
@@ -10,13 +19,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 TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';
+import TextArea from './TextArea';
+import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 
 const {
   useFocus,
@@ -24,57 +33,55 @@ const {
   useMakeThumbnail,
   useRegisterFocusSendBox,
   useSendBoxAttachments,
+  useSendBoxValue,
   useSendMessage,
-  useStyleOptions
+  useStyleOptions,
+  useUIState
 } = hooks;
 
-function SendBox(
-  props: Readonly<{
-    className?: string | undefined;
-    placeholder?: string | undefined;
-  }>
-) {
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [message, setMessage] = useState('');
-  const [attachments, setAttachments] = useSendBoxAttachments();
+type Props = Readonly<{
+  className?: string | undefined;
+  completion?: ReactNode | undefined;
+  isPrimary?: boolean | undefined;
+  placeholder?: string | undefined;
+}>;
+
+function SendBox(props: Props) {
   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 [errorRef, errorMessage] = 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) => {
-        if (!inputRef.current) {
-          return;
-        }
-        if (noKeyboard) {
-          waitUntil(
-            (async () => {
-              const previousReadOnly = inputRef.current?.getAttribute('readonly');
-              inputRef.current?.setAttribute('readonly', 'true');
-              // TODO: [P2] We should update this logic to handle quickly-successive `focusCallback`.
-              //       If a succeeding `focusCallback` is being called, the `setTimeout` should run immediately.
-              //       Or the second `focusCallback` should not set `readonly` to `true`.
-              // eslint-disable-next-line no-restricted-globals
-              await new Promise(resolve => setTimeout(resolve, 0));
-              inputRef.current?.focus();
-              if (typeof previousReadOnly !== 'string') {
-                inputRef.current?.removeAttribute('readonly');
-              } else {
-                inputRef.current?.setAttribute('readonly', previousReadOnly);
-              }
-            })()
-          );
-        } else {
-          inputRef.current?.focus();
-        }
+      ({ noKeyboard }) => {
+        const { current } = inputRef;
+
+        // Setting `inputMode` to `none` temporarily to suppress soft keyboard in iOS.
+        // We will revert the change once the end-user tap on the send box.
+        // This code path is only triggered when the user press "send" button to send the message, instead of pressing ENTER key.
+        noKeyboard && current?.setAttribute('inputmode', 'none');
+        current?.focus();
       },
       [inputRef]
     )
@@ -124,11 +131,14 @@ function SendBox(
     [makeThumbnail, setAttachments]
   );
 
+  const handleClick = useCallback(({ currentTarget }) => currentTarget.removeAttribute('inputmode'), []);
+
   const handleFormSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     event => {
       event.preventDefault();
+      const error = commitLatestError();
 
-      if (errorRef.current !== 'empty' && !isMessageLengthExceeded) {
+      if (error !== 'empty' && !isMessageLengthExceeded) {
         sendMessage(messageRef.current, undefined, { attachments: attachmentsRef.current });
 
         setMessage('');
@@ -137,32 +147,55 @@ function SendBox(
 
       setFocus('sendBox');
     },
-    [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, setFocus]
+    [
+      commitLatestError,
+      isMessageLengthExceeded,
+      setFocus,
+      sendMessage,
+      setMessage,
+      messageRef,
+      attachmentsRef,
+      setAttachments
+    ]
   );
 
   const handleTelephoneKeypadButtonClick = useCallback(
     // TODO: We need more official way of sending DTMF.
-    (dtmf: DTMF) => sendMessage(`/DTMF ${dtmf}`),
+    (dtmf: DTMF) => sendMessage(`/DTMFKey ${dtmf}`),
     [sendMessage]
   );
 
+  const handleTranscriptNavigation = useTranscriptNavigation();
+
   const aria = {
     'aria-invalid': 'false' as const,
     ...(errorMessage && {
-      'aria-invalid': 'true' as const,
-      'aria-errormessage': errorMessageId
+      'aria-describedby': errorMessageId,
+      'aria-errormessage': errorMessageId,
+      'aria-invalid': 'true' as const
     })
   };
 
   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'])} onClickCapture={handleSendBoxClick}>
+      <div
+        className={cx(classNames['sendbox__sendbox'])}
+        onClickCapture={handleSendBoxClick}
+        onKeyDown={handleTranscriptNavigation}
+      >
         <TextArea
           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'])}
+          completion={props.completion}
           data-testid={testIds.sendBoxTextBox}
-          hidden={telephoneKeypadShown}
+          hidden={shouldShowTelephoneKeypad}
+          onClick={handleClick}
           onInput={handleMessageChange}
           placeholder={props.placeholder ?? localize('TEXT_INPUT_PLACEHOLDER')}
           ref={inputRef}
@@ -176,7 +209,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 && (
+          {shouldShowMessageLength && (
             <div
               className={cx(classNames['sendbox__text-counter'], {
                 [classNames['sendbox__text-counter--error']]: isMessageLengthExceeded
@@ -192,7 +225,7 @@ function SendBox(
             <ToolbarButton
               aria-label={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
               data-testid={testIds.sendBoxSendButton}
-              disabled={isMessageLengthExceeded || telephoneKeypadShown}
+              disabled={isMessageLengthExceeded || shouldShowTelephoneKeypad}
               type="submit"
             >
               <SendIcon />
@@ -206,4 +239,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/TextArea.module.css

@@ -2,7 +2,8 @@
   display: grid;
   grid-template-areas: 'main';
   max-height: 200px;
-  overflow: hidden;
+  overflow: auto;
+  scrollbar-gutter: stable;
 }
 
 :global(.webchat-fluent) .sendbox__text-area--hidden {
@@ -11,6 +12,22 @@
   visibility: collapse;
 }
 
+:global(.webchat-fluent) .sendbox__text-area--in-completion {
+  .sendbox__text-area-doppelganger {
+    visibility: unset;
+  }
+
+  .sendbox__text-area-input {
+    background-color: transparent;
+    caret-color: var(--webchat-colorNeutralForeground1);
+    color: transparent;
+  }
+
+  textarea::placeholder {
+    color: transparent;
+  }
+}
+
 :global(.webchat-fluent) .sendbox__text-area-shared {
   border: none;
   font: inherit;
@@ -18,11 +35,12 @@
   outline: inherit;
   overflow-wrap: anywhere;
   resize: inherit;
-  scrollbar-gutter: stable;
 }
 
 :global(.webchat-fluent) .sendbox__text-area-doppelganger {
-  overflow: hidden;
+  overflow: visible;
+  pointer-events: none;
+  user-select: none;
   visibility: hidden;
   white-space: pre-wrap;
 }
@@ -30,11 +48,12 @@
 :global(.webchat-fluent) .sendbox__text-area-input {
   background-color: inherit;
   color: currentColor;
-  height: 100%;
+  contain: size;
+  overflow: hidden;
   padding: 0;
 }
 
-:global(.webchat-fluent) .sendbox__text-area-input--scroll {
+:global(.webchat-fluent) .sendbox__text-area--scroll {
   /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
   scrollbar-color: unset;
   scrollbar-width: unset;
@@ -44,17 +63,17 @@
 
   /* Chrome, Edge, and Safari */
   &::-webkit-scrollbar {
-    width: 8px
+    width: 8px;
   }
 
   &::-webkit-scrollbar-track {
     background-color: var(--webchat-colorNeutralBackground5);
-    border-radius: 16px
+    border-radius: 16px;
   }
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--webchat-colorNeutralForeground2);
-    border-radius: 16px
+    border-radius: 16px;
   }
 
   &::-webkit-scrollbar-corner {