botframework-webchat-fluent-theme 4.18.1-main.20250528.43d5b5c → 4.18.1-main.20250703.da78356

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

@@ -172,7 +172,7 @@
   --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);
 
   /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts */
-  --webchat-durationUltraFast: var(--durationUltraFast, 0);
+  --webchat-durationUltraFast: var(--durationUltraFast, 50ms);
   --webchat-durationNormal: var(--durationNormal, 200ms);
   --webchat-durationUltraSlow: var(--durationUltraSlow, 500ms);
 
@@ -224,11 +224,12 @@
 }
 
 /* Scrollbars */
+:global(.webchat-fluent).theme :global(.send-box-attachment-bar.send-box-attachment-bar--as-list-item),
+:global(.webchat-fluent).theme :global(.text-area.text-area--scroll),
 :global(.webchat-fluent).theme :global(.webchat__basic-transcript .webchat__basic-transcript__scrollable),
-:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__code-body),
 :global(.webchat-fluent).theme :global(.webchat__render-markdown [data-math-type='block']),
-:global(.webchat-fluent).theme :global(.webchat__feedback-form-text-area-input--scroll),
-:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__body) {
+:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__body),
+:global(.webchat-fluent).theme :global(.webchat__view-code-dialog__code-body) {
   /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
   scrollbar-color: unset;
   scrollbar-width: unset;
@@ -251,7 +252,12 @@
     width: var(--webchat-spacingVerticalMNudge);
   }
 
-  &:hover::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb,
+  &:has(> :global(.text-area-input:focus))::-webkit-scrollbar-thumb {
     background-clip: padding-box;
     background-color: var(--webchat-colorNeutralForeground5);
     border-radius: 10px;
@@ -389,8 +395,8 @@
     border-color: var(--webchat-colorStrokeFocus2);
   }
 
-  :global(.webchat__modal-dialog__close-button-image) {
-    fill: currentColor;
+  :global(.webchat__modal-dialog__close-button-icon) {
+    color: currentColor;
   }
 }
 
@@ -414,7 +420,7 @@
     transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 
     :global(.webchat__code-block-copy-button__icon) {
-      background-color: currentColor;
+      --webchat__component-icon--color: currentColor;
     }
 
     &:hover {
@@ -572,6 +578,8 @@
   :global(.webchat__activity-button__icon) {
     height: 20px;
     width: 20px;
+
+    --webchat__component-icon--color: var(--webchat-colorNeutralForeground2);
   }
 }
 
@@ -624,35 +632,31 @@
 }
 
 /* Feedback Form */
-/* TODO: Need review */
-:global(.webchat-fluent).theme :global(.webchat__feedback-form) {
-  :global(.webchat__feedback-form__form-header) {
+:global(.webchat-fluent).theme :global(.feedback-form) {
+  :global(.feedback-form__form-header) {
     color: var(--webchat-colorNeutralForeground1);
-    font-family: var(--webchat-fontFamilyBase);
     font-size: var(--webchat-fontSizeBase300);
     font-weight: var(--webchat-fontWeightRegular);
     line-height: var(--webchat-lineHeightBase300);
   }
 
-  :global(.webchat__feedback-form__form) {
+  :global(.feedback-form__form) {
     gap: var(--webchat-spacingVerticalXS);
   }
 
-  :global(.webchat__feedback-form__form-footer) {
+  :global(.feedback-form__form-footer) {
     color: var(--webchat-colorNeutralForeground1);
-    font-family: var(--webchat-fontFamilyBase);
     font-size: var(--webchat-fontSizeBase100);
     font-weight: var(--webchat-fontWeightRegular);
     line-height: var(--webchat-lineHeightBase200);
   }
 
-  :global(.webchat__feedback-form__submit-button) {
+  :global(.feedback-form__submit-button) {
     background-color: var(--webchat-colorBrandBackground);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackground);
     border-radius: var(--webchat-borderRadiusMedium);
     color: var(--webchat-colorNeutralForegroundOnBrand);
     cursor: pointer;
-    font-family: var(--webchat-fontFamilyBase);
     font-size: var(--webchat-fontSizeBase300);
     padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
     transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
@@ -673,13 +677,12 @@
     }
   }
 
-  :global(.webchat__feedback-form__cancel-button) {
+  :global(.feedback-form__cancel-button) {
     background-color: var(--webchat-colorNeutralBackground1);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
     border-radius: var(--webchat-borderRadiusMedium);
     color: var(--webchat-colorNeutralForeground1);
     cursor: pointer;
-    font-family: var(--webchat-fontFamilyBase);
     font-size: var(--webchat-fontSizeBase300);
     padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalS);
     transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
@@ -687,6 +690,7 @@
     &:hover {
       background-color: var(--webchat-colorNeutralBackground1Hover);
       border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+      color: currentColor;
     }
 
     &:focus-visible {
@@ -700,21 +704,20 @@
     }
   }
 
-  :global(.webchat__feedback-form-text-area) {
+  :global(.feedback-form__text-box) {
     background-color: var(--webchat-colorNeutralBackground1);
     border-radius: var(--webchat-borderRadiusMedium);
     border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
-    font-family: var(--webchat-fontFamilyBase);
     font-size: var(--webchat-fontSizeBase300);
     line-height: var(--webchat-lineHeightBase300);
     gap: var(--webchat-spacingVerticalSNudge);
     padding: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalM);
+
     &::after {
       border-bottom-left-radius: var(--webchat-borderRadiusMedium);
       border-bottom-right-radius: var(--webchat-borderRadiusMedium);
       border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorBrandForeground1);
       clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
-      transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
     }
     &:focus-within {
       border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);

package/src/components/typingIndicator/SlidingDotsTypingIndicator.module.css

@@ -3,7 +3,7 @@
   display: flex;
   flex: none;
   height: 16px;
-  margin: auto var(--webchat-spacingHorizontalMNudge);
+  margin: auto var(--webchat-spacingHorizontalMNudge) var(--webchat-spacingVerticalNone);
 }
 
 :global(.webchat-fluent) .sliding-dots-typing-indicator__image {

package/src/private/FluentThemeProvider.tsx

@@ -1,9 +1,8 @@
 import { type ActivityMiddleware, type StyleOptions, type TypingIndicatorMiddleware } from 'botframework-webchat-api';
 import {
+  createActivityBorderMiddleware,
   DecoratorComposer,
-  DecoratorMiddleware,
-  type DecoratorMiddlewareInit,
-  type DecoratorMiddlewareTypes
+  type DecoratorMiddleware
 } from 'botframework-webchat-api/decorator';
 import { Components } from 'botframework-webchat-component';
 import { WebChatDecorator } from 'botframework-webchat-component/decorator';
@@ -54,15 +53,12 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
 const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
 const decoratorMiddleware: readonly DecoratorMiddleware[] = Object.freeze([
-  (init: DecoratorMiddlewareInit) =>
-    init === 'activity border' &&
-    ((next => request =>
-      request.livestreamingState === 'preparing'
-        ? ActivityLoader
-        : next(request)) satisfies DecoratorMiddlewareTypes['activity border'])
+  createActivityBorderMiddleware(
+    next => request => (request.livestreamingState === 'preparing' ? ActivityLoader : next(request))
+  )
 ]);
 
-const styles = createStyles();
+const styles = createStyles('fluent-theme');
 
 const fluentStyleOptions: StyleOptions = Object.freeze({
   feedbackActionsPlacement: 'activity-actions'

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

@@ -1,7 +0,0 @@
-:global(.webchat-fluent) .sendbox__attachment {
-  border-radius: var(--webchat-borderRadiusLarge);
-  border: 1px solid var(--webchat-colorNeutralStroke1);
-  cursor: default;
-  padding: 6px 8px;
-  width: fit-content;
-}

package/src/components/sendBox/Attachments.tsx

@@ -1,35 +0,0 @@
-import { hooks } from 'botframework-webchat-component';
-import cx from 'classnames';
-import React, { memo } from 'react';
-import { useStyles } from '../../styles';
-import styles from './Attachments.module.css';
-
-const { useLocalizer, useUIState } = hooks;
-
-const attachmentsPluralStringIds = {
-  one: 'TEXT_INPUT_ATTACHMENTS_ONE',
-  two: 'TEXT_INPUT_ATTACHMENTS_TWO',
-  few: 'TEXT_INPUT_ATTACHMENTS_FEW',
-  many: 'TEXT_INPUT_ATTACHMENTS_MANY',
-  other: 'TEXT_INPUT_ATTACHMENTS_OTHER'
-};
-
-function Attachments({
-  attachments,
-  className
-}: Readonly<{
-  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 uiState !== 'blueprint' && attachments.length ? (
-    <div className={cx(classNames['sendbox__attachment'], className)}>
-      {localizeWithPlural(attachmentsPluralStringIds, attachments.length)}
-    </div>
-  ) : null;
-}
-
-export default memo(Attachments);

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

@@ -1,82 +0,0 @@
-:global(.webchat-fluent) .sendbox__text-area {
-  display: grid;
-  grid-template-areas: 'main';
-  max-height: 200px;
-  overflow: auto;
-  scrollbar-gutter: stable;
-}
-
-:global(.webchat-fluent) .sendbox__text-area--hidden {
-  /* TODO: Not perfect way of hiding the text box. */
-  height: 0;
-  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;
-  grid-area: main;
-  outline: inherit;
-  overflow-wrap: anywhere;
-  resize: inherit;
-}
-
-:global(.webchat-fluent) .sendbox__text-area-doppelganger {
-  overflow: visible;
-  pointer-events: none;
-  user-select: none;
-  visibility: hidden;
-  white-space: pre-wrap;
-}
-
-:global(.webchat-fluent) .sendbox__text-area-input {
-  background-color: inherit;
-  color: currentColor;
-  contain: size;
-  overflow: hidden;
-  padding: 0;
-}
-
-:global(.webchat-fluent) .sendbox__text-area--scroll {
-  /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
-  scrollbar-color: unset;
-  scrollbar-width: unset;
-  /* Firefox */
-  -moz-scrollbar-color: var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2);
-  -moz-scrollbar-width: thin;
-
-  /* Chrome, Edge, and Safari */
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: var(--webchat-colorNeutralBackground5);
-    border-radius: 16px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--webchat-colorNeutralForeground2);
-    border-radius: 16px;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: var(--webchat-colorNeutralBackground5);
-  }
-}

package/src/components/sendBox/TextArea.tsx

@@ -1,111 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import cx from 'classnames';
-import React, {
-  forwardRef,
-  Fragment,
-  useCallback,
-  useRef,
-  type FormEventHandler,
-  type KeyboardEventHandler,
-  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;
-
-    /**
-     * `true`, if the text area should be hidden but stay in the DOM, otherwise, `false`.
-     *
-     * Keeping the element in the DOM while making it invisible to users and PWDs is useful in these scenarios:
-     *
-     * - When the DTMF keypad is going away, we need to send focus to the text area before we unmount DTMF keypad,
-     *   This ensures the flow of focus did not sent to document body
-     */
-    hidden?: boolean | 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' && !isInCompositionRef.current) {
-      event.preventDefault();
-
-      if ('form' in event.target && event.target.form instanceof HTMLFormElement) {
-        event.target?.form?.requestSubmit();
-      }
-    }
-  }, []);
-
-  return (
-    <div
-      className={cx(
-        classNames['sendbox__text-area'],
-        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}
-    >
-      {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']}
-            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>
-  );
-});
-
-TextArea.displayName = 'TextArea';
-
-export default TextArea;

package/src/icons/AddDocumentIcon.tsx

@@ -1,13 +0,0 @@
-import { Components } from 'botframework-webchat-component';
-import cx from 'classnames';
-import React, { memo } from 'react';
-
-const { MonochromeImageMasker } = Components;
-
-const addDocumentIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6 2a2 2 0 0 0-2 2v5.2c.32-.08.66-.15 1-.18V4a1 1 0 0 1 1-1h4v3.5c0 .83.67 1.5 1.5 1.5H15v8a1 1 0 0 1-1 1h-3.6c-.18.36-.4.7-.66 1H14a2 2 0 0 0 2-2V7.41c0-.4-.16-.78-.44-1.06l-3.91-3.91A1.5 1.5 0 0 0 10.59 2H6Zm8.8 5h-3.3a.5.5 0 0 1-.5-.5V3.2L14.8 7ZM10 14.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5Z"/></svg>')}`;
-
-function AddDocumentIcon(props: Readonly<{ className?: string }>) {
-  return <MonochromeImageMasker className={cx('icon__add-document', props.className)} src={addDocumentIcon} />;
-}
-
-export default memo(AddDocumentIcon);

package/src/icons/AttachmentIcon.tsx

@@ -1,13 +0,0 @@
-import { Components } from 'botframework-webchat-component';
-import cx from 'classnames';
-import React, { memo } from 'react';
-
-const { MonochromeImageMasker } = Components;
-
-const attachmentIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m4.83 10.48 5.65-5.65a3 3 0 0 1 4.25 4.24L8 15.8a1.5 1.5 0 0 1-2.12-2.12l6-6.01a.5.5 0 1 0-.7-.71l-6 6.01a2.5 2.5 0 0 0 3.53 3.54l6.71-6.72a4 4 0 1 0-5.65-5.66L4.12 9.78a.5.5 0 0 0 .7.7Z"/></svg>')}`;
-
-function AttachmentIcon(props: Readonly<{ className?: string }>) {
-  return <MonochromeImageMasker className={cx('icon__attachment', props.className)} src={attachmentIcon} />;
-}
-
-export default memo(AttachmentIcon);

package/src/icons/InfoSmallIcon.tsx

@@ -1,13 +0,0 @@
-import { Components } from 'botframework-webchat-component';
-import cx from 'classnames';
-import React, { memo } from 'react';
-
-const { MonochromeImageMasker } = Components;
-
-const infoSmallIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>')}`;
-
-function InfoSmallIcon(props: Readonly<{ readonly className?: string }>) {
-  return <MonochromeImageMasker className={cx('icon__info--small', props.className)} src={infoSmallIcon} />;
-}
-
-export default memo(InfoSmallIcon);

package/src/icons/SendIcon.tsx

@@ -1,13 +0,0 @@
-import { Components } from 'botframework-webchat-component';
-import cx from 'classnames';
-import React, { memo } from 'react';
-
-const { MonochromeImageMasker } = Components;
-
-const sendIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.18 2.11a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .9l-15 7.5a.5.5 0 0 1-.7-.58L3.98 10 2.02 2.63a.5.5 0 0 1 .16-.52Zm2.7 8.39-1.61 6.06L16.38 10 3.27 3.44 4.88 9.5h6.62a.5.5 0 1 1 0 1H4.88Z"/></svg>')}`;
-
-function SendIcon(props: Readonly<{ readonly className?: string }>) {
-  return <MonochromeImageMasker className={cx('icon__send', props.className)} src={sendIcon} />;
-}
-
-export default memo(SendIcon);

package/src/icons/TelephoneKeypadIcon.tsx

@@ -1,13 +0,0 @@
-import { Components } from 'botframework-webchat-component';
-import cx from 'classnames';
-import React, { memo } from 'react';
-
-const { MonochromeImageMasker } = Components;
-
-const telephoneKeypadIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm0 4a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM7.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 16a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM15.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"/></svg>')}`;
-
-function TelephoneKeypadIcon(props: Readonly<{ readonly className?: string }>) {
-  return <MonochromeImageMasker className={cx('icon__telephone-keypad', props.className)} src={telephoneKeypadIcon} />;
-}
-
-export default memo(TelephoneKeypadIcon);

package/src/icons/index.ts

@@ -1,5 +0,0 @@
-export { default as AddDocumentIcon } from './AddDocumentIcon';
-export { default as AttachmentIcon } from './AttachmentIcon';
-export { default as InfoSmallIcon } from './InfoSmallIcon';
-export { default as SendIcon } from './SendIcon';
-export { default as TelephoneKeypadIcon } from './TelephoneKeypadIcon';