botframework-webchat-fluent-theme 4.18.1-main.20250325.438c779 → 4.18.1-main.20250423.8c9cf52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250325.438c779",
+  "version": "4.18.1-main.20250423.8c9cf52",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -72,15 +72,15 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^22.13.4",
     "@types/react": "^16.14.62",
-    "botframework-webchat-base": "4.18.1-main.20250325.438c779",
-    "botframework-webchat-styles": "4.18.1-main.20250325.438c779",
+    "botframework-webchat-base": "4.18.1-main.20250423.8c9cf52",
+    "botframework-webchat-styles": "4.18.1-main.20250423.8c9cf52",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250325.438c779",
-    "botframework-webchat-component": "4.18.1-main.20250325.438c779",
-    "botframework-webchat-core": "4.18.1-main.20250325.438c779",
+    "botframework-webchat-api": "4.18.1-main.20250423.8c9cf52",
+    "botframework-webchat-component": "4.18.1-main.20250423.8c9cf52",
+    "botframework-webchat-core": "4.18.1-main.20250423.8c9cf52",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/bundle.ts

@@ -1,8 +1,10 @@
+import { SendBox as FluentSendBox } from './components/sendBox/index';
 import { FluentThemeProvider, testIds } from './index';
 
 (globalThis as any).WebChat = {
   ...(globalThis as any).WebChat,
   FluentThemeProvider,
+  FluentSendBox,
   testIds: {
     ...(globalThis as any).WebChat?.testIds,
     ...testIds

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

@@ -85,7 +85,7 @@
   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 */

package/src/components/sendBox/SendBox.tsx

@@ -1,6 +1,14 @@
 import { hooks, type SendBoxFocusOptions } 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';
@@ -33,6 +41,7 @@ const {
 
 type Props = Readonly<{
   className?: string | undefined;
+  completion?: ReactNode | undefined;
   isPrimary?: boolean | undefined;
   placeholder?: string | undefined;
 }>;
@@ -198,6 +207,7 @@ function SendBox(props: Props) {
         <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={shouldShowTelephoneKeypad}
           onInput={handleMessageChange}

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: visible;
+  }
+
+  .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;

package/src/components/sendBox/TextArea.tsx

@@ -1,6 +1,14 @@
 import { hooks } from 'botframework-webchat-api';
 import cx from 'classnames';
-import React, { forwardRef, Fragment, useCallback, type FormEventHandler, type KeyboardEventHandler } from 'react';
+import React, {
+  forwardRef,
+  Fragment,
+  useCallback,
+  useRef,
+  type FormEventHandler,
+  type KeyboardEventHandler,
+  type ReactNode
+} from 'react';
 import { useStyles } from '../../styles';
 import styles from './TextArea.module.css';
 
@@ -11,6 +19,7 @@ const TextArea = forwardRef<
   Readonly<{
     'aria-label'?: string | undefined;
     className?: string | undefined;
+    completion?: ReactNode | undefined;
     'data-testid'?: string | undefined;
 
     /**
@@ -30,13 +39,22 @@ const TextArea = forwardRef<
 >((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) {
@@ -49,41 +67,29 @@ const TextArea = forwardRef<
     <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-input--scroll'],
-            classNames['sendbox__text-area-shared']
-          )}
-        >
+        <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-input--scroll'],
-              classNames['sendbox__text-area-shared']
-            )}
-          >
-            {props.value || props.placeholder}{' '}
+          <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-input--scroll'],
-              classNames['sendbox__text-area-shared']
-            )}
+            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}

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

@@ -21,6 +21,8 @@
   --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);
   --webchat-colorNeutralForeground5: var(--colorNeutralForeground5, #7e7e7e);
 
+  --webchat-colorNeutralForegroundOnBrand: var(--colorNeutralForegroundOnBrand, #fff);
+
   --webchat-colorNeutralBackgroundDisabled: var(--colorNeutralBackgroundDisabled, #f0f0f0);
   --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);
   --webchat-colorNeutralBackground1Hover: var(--colorNeutralBackground1Hover, #f5f5f5);
@@ -61,6 +63,9 @@
   --webchat-colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed, #014259);
   --webchat-colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected, #01678c);
 
+  --webchat-colorBrandBackground: var(--colorBrandBackground, #077fab);
+  --webchat-colorBrandBackgroundHover: var(--colorBrandBackgroundHover, #06729a);
+  --webchat-colorBrandBackgroundPressed: var(--colorBrandBackgroundPressed, #044760);
   --webchat-colorBrandBackground2: var(--colorBrandBackground2, #def2fc);
   --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);
   --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);
@@ -206,7 +211,6 @@
   --webchat__padding--regular: var(--webchat-spacingVerticalS);
   --webchat__padding--sendbox: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalMNudge)
     var(--webchat-spacingHorizontalMNudge);
-
   --webchat__border-animation--color-1: #464feb;
   --webchat__border-animation--color-2: #47cffa;
   --webchat__border-animation--color-3: #b47cf8;
@@ -231,6 +235,7 @@
 :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) {
   /* Edge uses -webkit-scrollbar if scrollbar-* is not set */
   scrollbar-color: unset;
@@ -623,3 +628,99 @@
   padding: var(--webchat-spacingVerticalSNudge) var(--webchat-spacingHorizontalM);
   transition: opacity var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 }
+
+/* Feedback Form */
+:global(.webchat-fluent).theme :global(.webchat__feedback-form__body1) {
+  font-family: var(--webchat-fontFamilyBase);
+  color: var(--webchat-colorNeutralForeground1);
+  font-size: var(--webchat-fontSizeBase300);
+  font-weight: var(--webchat-fontWeightRegular);
+  line-height: var(--webchat-lineHeightBase300);
+}
+
+:global(.webchat-fluent).theme :global(.webchat__feedback-form__caption1) {
+  font-family: var(--webchat-fontFamilyBase);
+  color: var(--webchat-colorNeutralForeground1);
+  font-size: var(--webchat-fontSizeBase100);
+  font-weight: var(--webchat-fontWeightRegular);
+  line-height: var(--webchat-lineHeightBase200);
+}
+
+:global(.webchat-fluent).theme :global(.webchat__feedback-form__button__submit) {
+  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);
+
+  &:hover {
+    background-color: var(--webchat-colorBrandBackgroundHover);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundHover);
+  }
+
+  &:focus-visible {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+  }
+
+  &:active {
+    background-color: var(--webchat-colorBrandBackgroundPressed);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorBrandBackgroundPressed);
+  }
+}
+
+:global(.webchat-fluent).theme :global(.webchat__feedback-form__button__cancel) {
+  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);
+
+  &:hover {
+    background-color: var(--webchat-colorNeutralBackground1Hover);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+  }
+
+  &:focus-visible {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    outline-offset: calc(var(--webchat-strokeWidthThin) * -1);
+  }
+
+  &:active {
+    background-color: var(--webchat-colorNeutralBackground1Pressed);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Pressed);
+  }
+}
+
+:global(.webchat-fluent).theme :global(.webchat__feedback-form-text-area) {
+  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);
+  }
+  &:focus-within::after {
+    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
+    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  }
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 import { injectMetaTag } from 'inject-meta-tag';
 
+import { SendBox as FluentSendBox } from './components/sendBox/index';
 import FluentThemeProvider from './private/FluentThemeProvider';
 import testIds from './testIds';
 
@@ -14,4 +15,4 @@ injectMetaTag(
   `version=${process.env['npm_package_version']}; build-tool=${process.env['build_tool']}; module-format=${process.env['module_format']}`
 );
 
-export { FluentThemeProvider, buildInfo, testIds };
+export { FluentThemeProvider, FluentSendBox, buildInfo, testIds };