botframework-webchat-fluent-theme 4.18.1-main.20250325.438c779 → 4.18.1-main.20250423.6c68093

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.6c68093",
   "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.6c68093",
+    "botframework-webchat-styles": "4.18.1-main.20250423.6c68093",
     "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.6c68093",
+    "botframework-webchat-component": "4.18.1-main.20250423.6c68093",
+    "botframework-webchat-core": "4.18.1-main.20250423.6c68093",
     "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/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 };