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

package/src/components/sendBox/TextArea.tsx

@@ -1,13 +1,26 @@
+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,
+  useRef,
+  type FormEventHandler,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type ReactNode
+} from 'react';
 import { useStyles } from '../../styles';
 import styles from './TextArea.module.css';
 
+const { useUIState } = hooks;
+
 const TextArea = forwardRef<
   HTMLTextAreaElement,
   Readonly<{
     'aria-label'?: string | undefined;
     className?: string | undefined;
+    completion?: ReactNode | undefined;
     'data-testid'?: string | undefined;
 
     /**
@@ -19,18 +32,31 @@ const TextArea = forwardRef<
      *   This ensures the flow of focus did not sent to document body
      */
     hidden?: boolean | undefined;
+    onClick?: MouseEventHandler<HTMLTextAreaElement> | undefined;
     onInput?: FormEventHandler<HTMLTextAreaElement> | undefined;
     placeholder?: string | undefined;
     startRows?: number | undefined;
     value?: string | undefined;
   }>
 >((props, ref) => {
+  const [uiState] = useUIState();
   const classNames = useStyles(styles);
+  const isInCompositionRef = useRef<boolean>(false);
+
+  const disabled = uiState === 'disabled';
+
+  const handleCompositionEnd = useCallback(() => {
+    isInCompositionRef.current = false;
+  }, [isInCompositionRef]);
+
+  const handleCompositionStart = useCallback(() => {
+    isInCompositionRef.current = true;
+  }, [isInCompositionRef]);
 
   const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(event => {
     // Shift+Enter adds a new line
     // Enter requests related form submission
-    if (!event.shiftKey && event.key === 'Enter') {
+    if (!event.shiftKey && event.key === 'Enter' && !isInCompositionRef.current) {
       event.preventDefault();
 
       if ('form' in event.target && event.target.form instanceof HTMLFormElement) {
@@ -43,39 +69,42 @@ const TextArea = forwardRef<
     <div
       className={cx(
         classNames['sendbox__text-area'],
-        {
-          [classNames['sendbox__text-area--hidden']]: props.hidden
-        },
+        classNames['sendbox__text-area--scroll'],
+        { [classNames['sendbox__text-area--hidden']]: props.hidden },
+        { [classNames['sendbox__text-area--in-completion']]: props.completion },
         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-shared'])}>
+          {' '}
+        </div>
+      ) : (
+        <Fragment>
+          <div className={cx(classNames['sendbox__text-area-doppelganger'], classNames['sendbox__text-area-shared'])}>
+            {props.completion ? props.completion : 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-shared'])}
+            data-testid={props['data-testid']}
+            onClick={props.onClick}
+            onCompositionEnd={handleCompositionEnd}
+            onCompositionStart={handleCompositionStart}
+            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,11 +17,11 @@
   color: currentColor;
   cursor: pointer;
   display: flex;
+  height: var(--webchat__sendbox-button-height);
   justify-content: center;
   padding: 3px;
-  width: 32px;
 
-  > svg {
+  > :global(.webchat__monochrome-image-masker) {
     font-size: 20px;
     pointer-events: none;
   }
@@ -26,15 +29,18 @@
   &.sendbox__toolbar-button--selected {
     color: var(--webchat-colorNeutralForeground2BrandSelected);
   }
+
   @media (hover: hover) {
-    &:not([aria-disabled="true"]):hover {
+    &:not([aria-disabled='true']):hover {
       color: var(--webchat-colorNeutralForeground2BrandHover);
     }
   }
-  &:not([aria-disabled="true"]):active {
+
+  &:not([aria-disabled='true']):active {
     color: var(--webchat-colorNeutralForeground2BrandPressed);
   }
-  &[aria-disabled="true"] {
+
+  &[aria-disabled='true'] {
     color: var(--webchat-colorNeutralForegroundDisabled);
     cursor: not-allowed;
   }
@@ -45,7 +51,9 @@
   border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);
   height: 28px;
 
-  &:first-child, &:last-child, &:only-child {
-    display: none
+  &:first-child,
+  &:last-child,
+  &:only-child {
+    display: none;
   }
 }

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/sendBox/index.tsx

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

package/src/components/sendBox/private/useSubmitError.ts

@@ -1,5 +1,5 @@
 import { hooks } from 'botframework-webchat-component';
-import { RefObject, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
 const { useConnectivityStatus, useLocalizer } = hooks;
@@ -16,6 +16,7 @@ const useSubmitError = ({
   message: string;
 }>) => {
   const [connectivityStatus] = useConnectivityStatus();
+  const [error, setError] = useState<SendError | undefined>();
   const localize = useLocalizer();
 
   const submitErrorRef = useRefFrom<'empty' | 'offline' | undefined>(
@@ -37,9 +38,21 @@ const useSubmitError = ({
     [localize]
   );
 
-  return useMemo<Readonly<[RefObject<SendError | undefined>, string | undefined]>>(
-    () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),
-    [errorMessageStringMap, submitErrorRef]
+  // TODO: we may want to improve this later e.g. to avoid re-render
+  // Reset visible error if there is a value
+  const hasValue = !!message?.trim();
+  if (error === 'empty' && hasValue) {
+    setError(undefined);
+  }
+
+  const commitLatestError = useCallback(() => {
+    setError(submitErrorRef.current);
+    return submitErrorRef.current;
+  }, [submitErrorRef]);
+
+  return useMemo<Readonly<[string | undefined, () => typeof submitErrorRef.current]>>(
+    () => Object.freeze([error && errorMessageStringMap.get(error), commitLatestError]),
+    [error, errorMessageStringMap, commitLatestError]
   );
 };
 

package/src/components/sendBox/private/useTranscriptNavigation.ts

@@ -0,0 +1,53 @@
+import { useCallback, type KeyboardEvent } from 'react';
+import { hooks } from 'botframework-webchat-component';
+
+const { useScrollDown, useScrollUp } = hooks;
+
+export default function useTranscriptNavigation() {
+  const scrollDown = useScrollDown();
+  const scrollUp = useScrollUp();
+
+  return useCallback(
+    (event: KeyboardEvent<unknown>) => {
+      if (event.target instanceof HTMLTextAreaElement && event.target.value) {
+        return;
+      }
+
+      const { ctrlKey, metaKey, shiftKey } = event;
+
+      if (ctrlKey || metaKey || shiftKey) {
+        return;
+      }
+
+      let handled = true;
+
+      switch (event.key) {
+        case 'End':
+          scrollDown({ displacement: Infinity });
+          break;
+
+        case 'Home':
+          scrollUp({ displacement: Infinity });
+          break;
+
+        case 'PageDown':
+          scrollDown();
+          break;
+
+        case 'PageUp':
+          scrollUp();
+          break;
+
+        default:
+          handled = false;
+          break;
+      }
+
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [scrollDown, scrollUp]
+  );
+}

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,35 +1,36 @@
 :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 {
+    &:not([aria-disabled='true']):hover {
       background-color: var(--webchat-colorBrandBackground2Hover);
-      color: var(--webchat-colorBrandForeground2Hover)
+      color: var(--webchat-colorBrandForeground2Hover);
     }
   }
-  &:not([aria-disabled="true"]):active {
+  &:not([aria-disabled='true']):active {
     background-color: var(--webchat-colorBrandBackground2Pressed);
-    color: var(--webchat-colorBrandForeground2Pressed)
+    color: var(--webchat-colorBrandForeground2Pressed);
   }
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     color: var(--webchat-colorNeutralForegroundDisabled);
-    cursor: not-allowed
+    cursor: not-allowed;
   }
 }
 
 :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.module.css

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent) .suggested-actions {
   align-items: flex-end;
   align-self: flex-end;
@@ -8,7 +7,7 @@
 
   &:not(:empty) {
     padding-block-end: 8px;
-    padding-inline-start: 4px
+    padding-inline-start: 4px;
   }
 
   &.suggested-actions--flow {
@@ -18,6 +17,6 @@
   }
 
   &.suggested-actions--stacked {
-    flex-direction: column
+    flex-direction: column;
   }
 }

package/src/components/suggestedActions/SuggestedActions.tsx

@@ -1,13 +1,14 @@
 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;
+const { useFocus, useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions, useUIState } = hooks;
 
 function SuggestedActionStackedOrFlowContainer(
   props: Readonly<{
@@ -18,12 +19,12 @@ function SuggestedActionStackedOrFlowContainer(
 ) {
   const [{ suggestedActionLayout }] = useStyleOptions();
   const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
+  const [uiState] = useUIState();
   const classNames = useStyles(styles);
 
   return (
     <div
       aria-label={props['aria-label']}
-      aria-live="polite"
       aria-orientation="vertical"
       className={cx(
         classNames['suggested-actions'],
@@ -36,7 +37,7 @@ function SuggestedActionStackedOrFlowContainer(
       )}
       role="toolbar"
     >
-      {!!props.children && !!React.Children.count(props.children) && props.children}
+      {uiState !== 'blueprint' && props.children}
     </div>
   );
 }
@@ -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/telephoneKeypad/private/Button.module.css

@@ -1,4 +1,3 @@
-
 :global(.webchat-fluent) .telephone-keypad__button {
   -webkit-user-select: none;
   align-items: center;
@@ -28,7 +27,7 @@
 
   &:hover {
     /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */
-    background-color: var(--webchat-colorGray30)
+    background-color: var(--webchat-colorGray30);
   }
 }
 
@@ -49,7 +48,7 @@
     justify-content: center;
     margin: 8px 4px;
     width: 32px;
-  };
+  }
 
   .telephone-keypad__button__ruby {
     display: none;