botframework-webchat-component 4.18.1 → 4.19.0

package/src/SendBox/TextBox.tsx

@@ -1,12 +1,12 @@
 import { hooks } from 'botframework-webchat-api';
+import { usePonyfill } from 'botframework-webchat-api/hook.js';
 import classNames from 'classnames';
 import React, { useCallback, useMemo, useRef } from 'react';
 
 import AccessibleInputText from '../Utils/AccessibleInputText';
 import navigableEvent from '../Utils/TypeFocusSink/navigableEvent';
-import { ie11 } from '../Utils/detectBrowser';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import { useRegisterFocusSendBox, type SendBoxFocusOptions } from '../hooks/sendBoxFocus';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useScrollDown from '../hooks/useScrollDown';
 import useScrollUp from '../hooks/useScrollUp';
 import useStyleSet from '../hooks/useStyleSet';
@@ -15,8 +15,11 @@ import withEmoji from '../withEmoji/withEmoji';
 import AutoResizeTextArea from './AutoResizeTextArea';
 
 import type { MutableRefObject } from 'react';
+import testIds from '../testIds';
 
-const { useDisabled, useLocalizer, usePonyfill, useSendBoxValue, useStopDictate, useStyleOptions } = hooks;
+const { useLocalizer, useSendBoxValue, useStopDictate, useStyleOptions, useUIState } = hooks;
+
+const DEFAULT_INPUT_MODE = 'text';
 
 const ROOT_STYLE = {
   '&.webchat__send-box-text-box': {
@@ -82,8 +85,7 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
   const [value, setValue] = useSendBoxValue();
   const [{ sendBoxTextBox: sendBoxTextBoxStyleSet }] = useStyleSet();
   const [{ emojiSet, sendBoxTextWrap }] = useStyleOptions();
-  const [{ setTimeout }] = usePonyfill();
-  const [disabled] = useDisabled();
+  const [uiState] = useUIState();
   const inputElementRef: MutableRefObject<HTMLInputElement & HTMLTextAreaElement> = useRef();
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
@@ -91,6 +93,7 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
   const scrollUp = useScrollUp();
   const submitTextBox = useTextBoxSubmit();
 
+  const disabled = uiState === 'disabled';
   const sendBoxString = localize('TEXT_INPUT_ALT');
   const typeYourMessageString = localize('TEXT_INPUT_PLACEHOLDER');
 
@@ -162,45 +165,56 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
     [scrollDown, scrollUp]
   );
 
+  const [{ requestAnimationFrame, requestIdleCallback }] = usePonyfill();
+  const requestIdleCallbackWithPonyfill = useMemo(
+    () => requestIdleCallback ?? ((callback: () => void) => requestAnimationFrame(callback)),
+    [requestAnimationFrame, requestIdleCallback]
+  );
+
   const focusCallback = useCallback(
-    (options: SendBoxFocusOptions) => {
-      const { noKeyboard } = options;
-      const { current } = inputElementRef;
-
-      if (current) {
-        // The "disable soft keyboard on mobile devices" logic will not work on IE11. It will cause the <input> to become read-only until next focus.
-        // Thus, no mobile devices carry IE11 so we don't need to explicitly disable soft keyboard on IE11.
-        // See #3757 for repro and details.
-        if (noKeyboard && !ie11) {
-          // To not activate the virtual keyboard while changing focus to an input, we will temporarily set it as read-only and flip it back.
-          // https://stackoverflow.com/questions/7610758/prevent-iphone-default-keyboard-when-focusing-an-input/7610923
-          const readOnly = current.getAttribute('readonly');
-
-          current.setAttribute('readonly', 'readonly');
-
-          options.waitUntil(
-            (async function () {
-              // 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`.
-              await new Promise(resolve => setTimeout(resolve, 0));
-
-              if (current) {
-                current.focus();
-                readOnly ? current.setAttribute('readonly', readOnly) : current.removeAttribute('readonly');
+    ({ noKeyboard, waitUntil }: SendBoxFocusOptions) => {
+      waitUntil(
+        (async () => {
+          const { current } = inputElementRef;
+
+          if (current) {
+            // 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.
+            if (noKeyboard) {
+              if (current.getAttribute('inputmode') !== 'none') {
+                // Collapse the virtual keybaord if it was expanded.
+                current.setAttribute('inputmode', 'none');
+
+                // iOS 26.3 quirks: `HTMLElement.focus()` does not pickup `inputmode="none"` changes immediately.
+                //                  We need to wait for next frame before calling `focus()`.
+                //                  This is a regression from iOS 26.2.
+                await new Promise<void>(resolve => requestIdleCallbackWithPonyfill(resolve));
               }
-            })()
-          );
-        } else {
-          current.focus();
-        }
-      }
+            } else if (current.hasAttribute('inputmode')) {
+              // Expanding the virtual keyboard if it was collapsed.
+              // However, we are not pausing here to workaround iOS 26.3 quirks.
+              // If we pause here, it will not able to handle this scenario: focus on an activity on the transcript, press A, the letter A should be inputted into the send box.
+              // In other words, if we pause here, the event will be send to the activity/transcript, instead of the newly focused send box.
+              // This is related to BasicTranscript.handleTranscriptKeyDownCapture().
+              current.removeAttribute('inputmode');
+            }
+
+            current?.focus();
+          }
+        })()
+      );
     },
-    [inputElementRef, setTimeout]
+    [inputElementRef, requestIdleCallbackWithPonyfill]
   );
 
   useRegisterFocusSendBox(focusCallback);
 
+  const handleClick = useCallback(
+    ({ currentTarget }) => currentTarget.setAttribute('inputmode', DEFAULT_INPUT_MODE),
+    []
+  );
+
   const emojiMap = useMemo(() => new Map<string, string>(Object.entries(emojiSet)), [emojiSet]);
 
   return (
@@ -219,11 +233,13 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
           aria-label={sendBoxString}
           className="webchat__send-box-text-box__input"
           data-id="webchat-sendbox-input"
+          data-testid={testIds.sendBoxTextBox}
           disabled={disabled}
           emojiMap={emojiMap}
           enterKeyHint="send"
-          inputMode="text"
+          inputMode={DEFAULT_INPUT_MODE}
           onChange={setValue}
+          onClick={handleClick}
           onKeyDownCapture={disabled ? undefined : handleKeyDownCapture}
           onKeyPress={disabled ? undefined : handleKeyPress}
           placeholder={typeYourMessageString}
@@ -237,11 +253,13 @@ const TextBox = ({ className = '' }: Readonly<{ className?: string | undefined }
           aria-label={sendBoxString}
           className="webchat__send-box-text-box__text-area"
           data-id="webchat-sendbox-input"
+          data-testid={testIds.sendBoxTextBox}
           disabled={disabled}
           emojiMap={emojiMap}
           enterKeyHint="send"
-          inputMode="text"
+          inputMode={DEFAULT_INPUT_MODE}
           onChange={setValue}
+          onClick={handleClick}
           onKeyDownCapture={disabled ? undefined : handleKeyDownCapture}
           onKeyPress={disabled ? undefined : handleKeyPress}
           placeholder={typeYourMessageString}

package/src/SendBoxToolbar/Assets/AttachmentIcon.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import useStyleToEmotionObject from '../../hooks/internal/useStyleToEmotionObject';
+import { ComponentIcon } from '../../Icon';
+import { useStyleToEmotionObject } from '../../hooks/internal/styleToEmotionObject';
 
 type Props = Readonly<{ checked: boolean }>;
 
@@ -42,29 +43,11 @@ const AttachmentIcon = ({ checked }: Props) => {
         rootClassName
       )}
     >
-      <svg
+      <ComponentIcon
+        appearance="text"
         className="webchat__attachment-icon__icon"
-        focusable={false}
-        height={28}
-        role="presentation"
-        viewBox="0 0 25.75 46"
-        width={28}
-      >
-        <path
-          clipRule="evenodd"
-          d="M20.75 11.75v21.37a7.69 7.69 0 0 1-.62 3.07 7.95 7.95 0 0 1-4.19 4.19 7.89 7.89 0 0 1-6.13 0 7.95 7.95 0 0 1-4.19-4.19 7.69 7.69 0 0 1-.62-3.07v-22.5a5.27 5.27 0 0 1 .45-2.17 5.69 5.69 0 0 1 3-3 5.48 5.48 0 0 1 4.35 0 5.69 5.69 0 0 1 3 3 5.27 5.27 0 0 1 .45 2.17v22.5a3.41 3.41 0 0 1-.26 1.32 3.31 3.31 0 0 1-1.8 1.8 3.46 3.46 0 0 1-2.63 0 3.31 3.31 0 0 1-1.8-1.8 3.41 3.41 0 0 1-.26-1.32V14h2.25v19.12a1.13 1.13 0 1 0 2.25 0v-22.5a3.4 3.4 0 0 0-.26-1.31 3.31 3.31 0 0 0-1.8-1.8 3.46 3.46 0 0 0-2.63 0 3.31 3.31 0 0 0-1.8 1.8 3.4 3.4 0 0 0-.26 1.31v22.5a5.32 5.32 0 0 0 .45 2.18 5.69 5.69 0 0 0 3 3 5.48 5.48 0 0 0 4.35 0 5.69 5.69 0 0 0 3-3 5.32 5.32 0 0 0 .45-2.18v-21.37z"
-        />
-      </svg>
-      <svg
-        className="webchat__attachment-icon__icon webchat__attachment-icon__checkmark-icon"
-        focusable={false}
-        height={10}
-        role="presentation"
-        viewBox="0 0 10 10"
-        width={10}
-      >
-        <path d="M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM7.10356 4.10355L4.85357 6.35356C4.65831 6.54883 4.34173 6.54883 4.14646 6.35357L3.14645 5.35357C2.95119 5.1583 2.95118 4.84172 3.14644 4.64646C3.34171 4.45119 3.65829 4.45119 3.85355 4.64645L4.50001 5.29291L6.39644 3.39645C6.59171 3.20119 6.90829 3.20118 7.10355 3.39644C7.29881 3.59171 7.29882 3.90829 7.10356 4.10355Z" />
-      </svg>
+        icon={checked ? 'attachment-checkmark' : 'attachment'}
+      />
     </div>
   );
 };

package/src/SendBoxToolbar/BasicSendBoxToolbar.tsx

@@ -5,10 +5,12 @@ import UploadButton from './UploadButton';
 
 const { useStyleOptions } = hooks;
 
+// NOTE: "hideUploadButton" is deprecated. Use "disableFileUpload" instead.
+//       Rectification logic is handled in normalizeStyleOptions.ts
 function BasicSendBoxToolbar({ className }: SendBoxToolbarMiddlewareProps) {
-  const [{ hideUploadButton }] = useStyleOptions();
+  const [{ disableFileUpload }] = useStyleOptions();
 
-  return !hideUploadButton && <UploadButton className={className} />;
+  return !disableFileUpload && <UploadButton className={className} />;
 }
 
 export default memo(BasicSendBoxToolbar);

package/src/SendBoxToolbar/UploadButton.tsx

@@ -1,18 +1,20 @@
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useCallback, useRef, type FC, type FormEventHandler, type MouseEventHandler } from 'react';
+import random from 'math-random';
+import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
+import { object, pipe, readonly, string, type InferInput } from 'valibot';
 
 import IconButton from '../SendBox/IconButton';
-import useMakeThumbnail from '../hooks/useMakeThumbnail';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useFocus from '../hooks/useFocus';
+import useMakeThumbnail from '../hooks/useMakeThumbnail';
 import useStyleSet from '../hooks/useStyleSet';
 import useSubmit from '../providers/internal/SendBox/useSubmit';
 import AttachmentIcon from './Assets/AttachmentIcon';
 
-const { useDisabled, useSendBoxAttachments, useLocalizer, useStyleOptions } = hooks;
+const { useSendBoxAttachments, useLocalizer, useStyleOptions, useUIState } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__upload-button': {
@@ -33,15 +35,23 @@ const ROOT_STYLE = {
 
 const PREVENT_DEFAULT_HANDLER = event => event.preventDefault();
 
-type UploadButtonProps = {
-  className?: string;
-};
+const uploadButtonPropsSchema = pipe(
+  object({
+    className: string()
+  }),
+  readonly()
+);
+
+type UploadButtonProps = InferInput<typeof uploadButtonPropsSchema>;
+
+function UploadButton(props: UploadButtonProps) {
+  const { className } = validateProps(uploadButtonPropsSchema, props);
 
-const UploadButton: FC<UploadButtonProps> = ({ className }) => {
   const [{ sendAttachmentOn, uploadAccept, uploadMultiple }] = useStyleOptions();
   const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
-  const [disabled] = useDisabled();
+  const [inputKey, setInputKey] = useState<number>(0);
   const [sendBoxAttachments, setSendBoxAttachments] = useSendBoxAttachments();
+  const [uiState] = useUIState();
   const focus = useFocus();
   const inputRef = useRef<HTMLInputElement>(null);
   const localize = useLocalizer();
@@ -49,7 +59,9 @@ const UploadButton: FC<UploadButtonProps> = ({ className }) => {
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const submit = useSubmit();
 
+  const disabled = uiState === 'disabled';
   const sendAttachmentOnRef = useRefFrom(sendAttachmentOn);
+  const sendBoxAttachmentsRef = useRefFrom(sendBoxAttachments);
   const uploadFileString = localize('TEXT_INPUT_UPLOAD_BUTTON_ALT');
 
   const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => inputRef.current?.click(), [inputRef]);
@@ -63,17 +75,30 @@ const UploadButton: FC<UploadButtonProps> = ({ className }) => {
       //            Otherwise, if the user click the send button too quickly, it will not attach any files.
       (async function () {
         setSendBoxAttachments(
-          Object.freeze(
-            await Promise.all(
-              [...currentTarget.files].map(blob => makeThumbnail(blob).then(thumbnailURL => ({ blob, thumbnailURL })))
-            )
-          )
+          Object.freeze([
+            ...sendBoxAttachmentsRef.current,
+            ...(await Promise.all(
+              Array.from(currentTarget.files).map(async (blob: File) => {
+                const entry = sendBoxAttachmentsRef.current.find(entry => entry.blob === blob);
+
+                if (entry) {
+                  return entry;
+                }
+
+                const thumbnailURL = await makeThumbnail(blob);
+
+                return { blob, thumbnailURL };
+              })
+            ))
+          ])
         );
 
+        setInputKey(random());
+
         sendAttachmentOnRef.current === 'attach' && submit();
       })();
     },
-    [focus, makeThumbnail, sendAttachmentOnRef, setSendBoxAttachments, submit]
+    [focus, makeThumbnail, sendBoxAttachmentsRef, sendAttachmentOnRef, setInputKey, setSendBoxAttachments, submit]
   );
 
   return (
@@ -83,6 +108,9 @@ const UploadButton: FC<UploadButtonProps> = ({ className }) => {
         aria-disabled={disabled}
         aria-hidden="true"
         className="webchat__upload-button--file-input"
+        // Recreates the <input> element after every upload to prevent issues in WebDriver.
+        // Otherwise, on second upload, WebDriver will resend files from first upload as new Blob/File instance and it will cause duplicates.
+        key={inputKey}
         multiple={uploadMultiple}
         onChange={disabled ? undefined : handleFileChange}
         onClick={disabled ? PREVENT_DEFAULT_HANDLER : undefined}
@@ -97,14 +125,7 @@ const UploadButton: FC<UploadButtonProps> = ({ className }) => {
       </IconButton>
     </div>
   );
-};
-
-UploadButton.defaultProps = {
-  className: undefined
-};
-
-UploadButton.propTypes = {
-  className: PropTypes.string
-};
+}
 
-export default UploadButton;
+export default memo(UploadButton);
+export { uploadButtonPropsSchema, type UploadButtonProps };

package/src/Styles/CSSCustomPropertiesContainer.tsx

@@ -0,0 +1,195 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { makeCreateStyles } from '@msinternal/botframework-webchat-styles';
+import { InjectStyleElements } from '@msinternal/botframework-webchat-styles/react';
+import { useStyleOptions } from 'botframework-webchat-api/hook.js';
+import classNames from 'classnames';
+import random from 'math-random';
+import React, { forwardRef, memo, useMemo, type Ref } from 'react';
+import { object, optional, pipe, readonly, string, undefinedable, type InferInput } from 'valibot';
+import CustomPropertyNames from './CustomPropertyNames';
+import { StrictStyleOptions } from 'botframework-webchat-api';
+
+const customPropertiesContainerPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string()),
+    // Intentionally undefinedable() instead of optional() to remind caller they should pass nonce.
+    nonce: undefinedable(string())
+  }),
+  readonly()
+);
+
+type CustomPropertiesContainerProps = InferInput<typeof customPropertiesContainerPropsSchema>;
+
+const webchatCustomPropertiesClass = 'webchat__css-custom-properties';
+
+function uniqueId() {
+  // eslint-disable-next-line no-magic-numbers
+  return Math.ceil(random() * Number.MAX_SAFE_INTEGER).toString(36);
+}
+
+function hasBundleStyleOptions(styleOptions: StrictStyleOptions): styleOptions is StrictStyleOptions & {
+  cardPushButtonBackgroundColor?: string;
+  cardPushButtonTextColor?: string;
+} {
+  return 'cardPushButtonBackgroundColor' in styleOptions || 'cardPushButtonTextColor' in styleOptions;
+}
+
+function CustomPropertiesContainer(props: CustomPropertiesContainerProps, ref: Ref<HTMLDivElement>) {
+  const { children, className, nonce } = validateProps(customPropertiesContainerPropsSchema, props);
+
+  const [styleOptions] = useStyleOptions();
+
+  const [styleElements, classNameState] = useMemo(() => {
+    const {
+      accent,
+      avatarSize,
+      borderAnimationColor1,
+      borderAnimationColor2,
+      borderAnimationColor3,
+      bubbleAttachmentMaxWidth,
+      bubbleAttachmentMinWidth,
+      bubbleBackground,
+      bubbleBorderColor,
+      bubbleBorderRadius,
+      bubbleBorderStyle,
+      bubbleBorderWidth,
+      bubbleFromUserBackground,
+      bubbleFromUserBorderColor,
+      bubbleFromUserBorderRadius,
+      bubbleFromUserBorderStyle,
+      bubbleFromUserBorderWidth,
+      bubbleFromUserNubOffset,
+      bubbleFromUserNubSize,
+      bubbleFromUserTextColor,
+      bubbleTextColor,
+      bubbleImageMaxHeight,
+      bubbleImageMinHeight,
+      bubbleMessageMaxWidth,
+      bubbleMessageMinWidth,
+      bubbleMinHeight,
+      bubbleNubOffset,
+      bubbleNubSize,
+      fontSizeSmall,
+      markdownExternalLinkIconImage,
+      messageActivityWordBreak,
+      monospaceFont,
+      paddingRegular,
+      primaryFont,
+      sendBoxAttachmentBarMaxHeight,
+      subtle,
+      timestampColor,
+      transcriptActivityVisualKeyboardIndicatorColor,
+      transcriptActivityVisualKeyboardIndicatorStyle,
+      transcriptActivityVisualKeyboardIndicatorWidth,
+      transcriptOverlayButtonBackground,
+      transcriptOverlayButtonBackgroundOnDisabled,
+      transcriptOverlayButtonBackgroundOnFocus,
+      transcriptOverlayButtonBackgroundOnHover,
+      transcriptOverlayButtonColor,
+      transcriptOverlayButtonColorOnDisabled,
+      transcriptOverlayButtonColorOnFocus,
+      transcriptOverlayButtonColorOnHover,
+      transcriptTerminatorBackgroundColor,
+      transcriptTerminatorBorderRadius,
+      transcriptTerminatorColor,
+      transcriptTerminatorFontSize,
+      transcriptVisualKeyboardIndicatorColor,
+      transcriptVisualKeyboardIndicatorStyle,
+      transcriptVisualKeyboardIndicatorWidth,
+      transitionDuration,
+      transitionEasing
+    } = styleOptions;
+
+    let bundleStyleProps = '';
+    if (hasBundleStyleOptions(styleOptions)) {
+      const { cardPushButtonBackgroundColor, cardPushButtonTextColor } = styleOptions;
+      bundleStyleProps = `
+  ${CustomPropertyNames.BackgroundCardPushButton}: ${cardPushButtonBackgroundColor};
+  ${CustomPropertyNames.ColorCardPushButton}: ${cardPushButtonTextColor};
+`;
+    }
+
+    const randomClass = `w${uniqueId()}_${webchatCustomPropertiesClass.replace('webchat__', '')}` as const;
+
+    const contents = `
+.${webchatCustomPropertiesClass}.${randomClass} {
+  display: contents;
+  /* From component */
+  ${CustomPropertyNames.BackgroundBubble}: ${bubbleBackground};
+  ${CustomPropertyNames.BackgroundBubbleUser}: ${bubbleFromUserBackground};
+  ${CustomPropertyNames.BackgroundTranscriptOverlayButton}: ${transcriptOverlayButtonBackground};
+  ${CustomPropertyNames.BackgroundTranscriptOverlayButtonDisabled}: ${transcriptOverlayButtonBackgroundOnDisabled};
+  ${CustomPropertyNames.BackgroundTranscriptOverlayButtonFocus}: ${transcriptOverlayButtonBackgroundOnFocus};
+  ${CustomPropertyNames.BackgroundTranscriptOverlayButtonHover}: ${transcriptOverlayButtonBackgroundOnHover};
+  ${CustomPropertyNames.BackgroundTranscriptTerminator}: ${transcriptTerminatorBackgroundColor};
+  ${CustomPropertyNames.BorderAnimationColor1}: ${borderAnimationColor1};
+  ${CustomPropertyNames.BorderAnimationColor2}: ${borderAnimationColor2};
+  ${CustomPropertyNames.BorderAnimationColor3}: ${borderAnimationColor3};
+  ${CustomPropertyNames.BorderColorBubble}: ${bubbleBorderColor};
+  ${CustomPropertyNames.BorderColorBubbleUser}: ${bubbleFromUserBorderColor};
+  ${CustomPropertyNames.BorderRadiusBubble}: ${bubbleBorderRadius}px;
+  ${CustomPropertyNames.BorderRadiusBubbleUser}: ${bubbleFromUserBorderRadius}px;
+  ${CustomPropertyNames.BorderRadiusTranscriptTerminator}: ${transcriptTerminatorBorderRadius}px;
+  ${CustomPropertyNames.BorderStyleBubble}: ${bubbleBorderStyle};
+  ${CustomPropertyNames.BorderStyleBubbleUser}: ${bubbleFromUserBorderStyle};
+  ${CustomPropertyNames.BorderStyleTranscriptActivityVisualKeyboardIndicator}: ${transcriptActivityVisualKeyboardIndicatorStyle};
+  ${CustomPropertyNames.BorderStyleTranscriptVisualKeyboardIndicator}: ${transcriptVisualKeyboardIndicatorStyle};
+  ${CustomPropertyNames.BorderWidthBubble}: ${bubbleBorderWidth}px;
+  ${CustomPropertyNames.BorderWidthBubbleUser}: ${bubbleFromUserBorderWidth}px;
+  ${CustomPropertyNames.BorderWidthTranscriptActivityVisualKeyboardIndicator}: ${transcriptActivityVisualKeyboardIndicatorWidth}px;
+  ${CustomPropertyNames.BorderWidthTranscriptVisualKeyboardIndicator}: ${transcriptVisualKeyboardIndicatorWidth}px;
+  ${CustomPropertyNames.ColorAccent}: ${accent};
+  ${CustomPropertyNames.ColorBubble}: ${bubbleTextColor};
+  ${CustomPropertyNames.ColorBubbleUser}: ${bubbleFromUserTextColor};
+  ${CustomPropertyNames.ColorSubtle}: ${subtle};
+  ${CustomPropertyNames.ColorTimestamp}: ${timestampColor || subtle};
+  ${CustomPropertyNames.ColorTranscriptActivityVisualKeyboardIndicator}: ${transcriptActivityVisualKeyboardIndicatorColor};
+  ${CustomPropertyNames.ColorTranscriptOverlayButton}: ${transcriptOverlayButtonColor};
+  ${CustomPropertyNames.ColorTranscriptOverlayButtonDisabled}: ${transcriptOverlayButtonColorOnDisabled};
+  ${CustomPropertyNames.ColorTranscriptOverlayButtonFocus}: ${transcriptOverlayButtonColorOnFocus || 'unset'};
+  ${CustomPropertyNames.ColorTranscriptOverlayButtonHover}: ${transcriptOverlayButtonColorOnHover || 'unset'};
+  ${CustomPropertyNames.ColorTranscriptTerminator}: ${transcriptTerminatorColor};
+  ${CustomPropertyNames.ColorTranscriptVisualKeyboardIndicator}: ${transcriptVisualKeyboardIndicatorColor};
+  ${CustomPropertyNames.FontMonospace}: ${monospaceFont};
+  ${CustomPropertyNames.FontPrimary}: ${primaryFont};
+  ${CustomPropertyNames.FontSizeSmall}: ${fontSizeSmall};
+  ${CustomPropertyNames.FontSizeTranscriptTerminator}: ${transcriptTerminatorFontSize}px;
+  ${CustomPropertyNames.IconURLExternalLink}: ${markdownExternalLinkIconImage};
+  ${CustomPropertyNames.MaxHeightImageBubble}: ${bubbleImageMaxHeight}px;
+  ${CustomPropertyNames.MaxHeightSendBoxAttachmentBar}: ${sendBoxAttachmentBarMaxHeight}px;
+  ${CustomPropertyNames.MaxWidthAttachmentBubble}: ${bubbleAttachmentMaxWidth}px;
+  ${CustomPropertyNames.MinWidthAttachmentBubble}: ${bubbleAttachmentMinWidth}px;
+  ${CustomPropertyNames.MaxWidthMessageBubble}: ${bubbleMessageMaxWidth}px;
+  ${CustomPropertyNames.MinWidthMessageBubble}: ${bubbleMessageMinWidth}px;
+  ${CustomPropertyNames.MinHeightBubble}: ${bubbleMinHeight}px;
+  ${CustomPropertyNames.MinHeightImageBubble}: ${bubbleImageMinHeight}px;
+  ${CustomPropertyNames.PaddingRegular}: ${paddingRegular}px;
+  ${CustomPropertyNames.SizeAvatar}: ${avatarSize}px;
+  ${CustomPropertyNames.SizeBubbleNub}: ${bubbleNubSize === undefined ? 'unset' : `${bubbleNubSize}px`};
+  ${CustomPropertyNames.SizeBubbleNubUser}: ${bubbleFromUserNubSize === undefined ? 'unset' : `${bubbleFromUserNubSize}px`};
+  ${CustomPropertyNames.SpaceBubbleNub}: ${bubbleNubOffset}px;
+  ${CustomPropertyNames.SpaceBubbleNubUser}: ${bubbleFromUserNubOffset}px;
+  ${CustomPropertyNames.TransitionDuration}: ${transitionDuration};
+  ${CustomPropertyNames.TransitionEasing}: ${transitionEasing};
+  ${CustomPropertyNames.WordBreakMessageActivity}: ${messageActivityWordBreak};
+  /* From bundle */
+  ${bundleStyleProps}
+}
+`;
+    const [style] = makeCreateStyles(contents)(`component/CustomPropertiesContainer-${uniqueId()}`);
+
+    return [Object.freeze([style]), Object.freeze([`${webchatCustomPropertiesClass} ${randomClass}`] as const)];
+  }, [styleOptions]);
+
+  return (
+    <div className={classNames(className, classNameState[0])} ref={ref}>
+      <InjectStyleElements at={styleOptions.stylesRoot} nonce={nonce} styleElements={styleElements} />
+      {children}
+    </div>
+  );
+}
+
+CustomPropertiesContainer.displayName = 'CustomPropertiesContainer';
+
+export default memo(forwardRef<HTMLDivElement, CustomPropertiesContainerProps>(CustomPropertiesContainer));

package/src/Styles/CustomPropertyNames.ts

@@ -1,17 +1,77 @@
 const CustomPropertyNames = Object.freeze({
   // Make sure key names does not have JavaScript forbidden names.
+  BackgroundCardPushButton: '--webchat__background--card-push-button',
+  BackgroundBubble: '--webchat__background--bubble',
+  BackgroundBubbleUser: '--webchat__background--bubble-user',
+  BackgroundCodeBlock: '--webchat__background--code-block',
+  BackgroundImageSpinnerAnimation: '--webchat__background-image--spinner-animation',
+  BackgroundImageTypingAnimation: '--webchat__background-image--typing-animation',
+  BackgroundToastError: '--webchat__background--toast-error',
+  BackgroundToastInfo: '--webchat__background--toast-info',
+  BackgroundToastSuccess: '--webchat__background--toast-success',
+  BackgroundToastWarn: '--webchat__background--toast-warn',
+  BackgroundTranscriptOverlayButton: '--webchat__background--transcript-overlay-button',
+  BackgroundTranscriptOverlayButtonDisabled: '--webchat__background--transcript-overlay-button-disabled',
+  BackgroundTranscriptOverlayButtonFocus: '--webchat__background--transcript-overlay-button-focus',
+  BackgroundTranscriptOverlayButtonHover: '--webchat__background--transcript-overlay-button-hover',
+  BackgroundTranscriptTerminator: '--webchat__background--transcript-terminator',
+  BorderAnimationColor1: '--webchat__border-animation--color-1',
+  BorderAnimationColor2: '--webchat__border-animation--color-2',
+  BorderAnimationColor3: '--webchat__border-animation--color-3',
+  BorderColorBubble: '--webchat__border-color--bubble',
+  BorderColorBubbleUser: '--webchat__border-color--bubble-user',
+  BorderRadiusAvatar: '--webchat__border-radius--avatar',
+  BorderRadiusBubble: '--webchat__border-radius--bubble',
+  BorderRadiusBubbleUser: '--webchat__border-radius--bubble-user',
+  BorderStyleBubble: '--webchat__border-style--bubble',
+  BorderStyleBubbleUser: '--webchat__border-style--bubble-user',
+  BorderStyleTranscriptActivityVisualKeyboardIndicator:
+    '--webchat__border-style--transcript-activity-visual-keyboard-indicator',
+  BorderStyleTranscriptVisualKeyboardIndicator: '--webchat__border-style--transcript-visual-keyboard-indicator',
+  BorderWidthBubble: '--webchat__border-width--bubble',
+  BorderWidthBubbleUser: '--webchat__border-width--bubble-user',
+  BorderWidthTranscriptActivityVisualKeyboardIndicator:
+    '--webchat__border-width--transcript-activity-visual-keyboard-indicator',
+  BorderRadiusTranscriptTerminator: '--webchat__border-radius--transcript-terminator',
+  BorderWidthTranscriptVisualKeyboardIndicator: '--webchat__border-width--transcript-visual-keyboard-indicator',
   ColorAccent: '--webchat__color--accent',
+  ColorBubble: '--webchat__color--bubble',
+  ColorBubbleUser: '--webchat__color--bubble-user',
+  ColorCardPushButton: '--webchat__color--card-push-button',
+  ColorCodeBlock: '--webchat__color--code-block',
+  ColorConnectivityFailed: '--webchat__color--connectivity-failed',
   ColorSubtle: '--webchat__color--subtle',
   ColorTimestamp: '--webchat__color--timestamp',
+  ColorTranscriptActivityVisualKeyboardIndicator: '--webchat__color--transcript-activity-visual-keyboard-indicator',
+  ColorTranscriptOverlayButton: '--webchat__color--transcript-overlay-button',
+  ColorTranscriptOverlayButtonDisabled: '--webchat__color--transcript-overlay-button-disabled',
+  ColorTranscriptOverlayButtonFocus: '--webchat__color--transcript-overlay-button-focus',
+  ColorTranscriptOverlayButtonHover: '--webchat__color--transcript-overlay-button-hover',
+  ColorTranscriptTerminator: '--webchat__color--transcript-terminator',
+  ColorTranscriptVisualKeyboardIndicator: '--webchat__color--transcript-visual-keyboard-indicator',
   FontPrimary: '--webchat__font--primary',
+  FontMonospace: '--webchat__font--monospace',
   FontSizeSmall: '--webchat__font-size--small',
+  FontSizeTranscriptTerminator: '--webchat__font-size--transcript-terminator',
   IconURLExternalLink: '--webchat__icon-url--external-link',
-  MaxWidthBubble: '--webchat__max-width--bubble',
+  MaxHeightImageBubble: '--webchat__max-height--image-bubble',
+  MaxHeightSendBoxAttachmentBar: '--webchat__max-height--send-box-attachment-bar',
+  MaxWidthAttachmentBubble: '--webchat__max-width--attachment-bubble',
+  MaxWidthMessageBubble: '--webchat__max-width--message-bubble',
   MinHeightBubble: '--webchat__min-height--bubble',
-  PaddingRegular: '--webchat__padding--regular'
-});
-
-// This is for type-checking only to make sure the CSS custom property names is `--webchat__${string}`.
-const _TypeChecking: Readonly<Record<string, `--webchat__${string}`>> = CustomPropertyNames;
+  MinHeightImageBubble: '--webchat__min-height--image-bubble',
+  MinWidthAttachmentBubble: '--webchat__min-width--attachment-bubble',
+  MinWidthMessageBubble: '--webchat__min-width--message-bubble',
+  PaddingConnectivityIcon: '--webchat__padding--connectivity-icon',
+  PaddingRegular: '--webchat__padding--regular',
+  SizeAvatar: '--webchat__size--avatar',
+  SizeBubbleNub: '--webchat__size--bubble-nub',
+  SizeBubbleNubUser: '--webchat__size--bubble-nub-user',
+  SpaceBubbleNub: '--webchat__space--bubble-nub',
+  SpaceBubbleNubUser: '--webchat__space--bubble-nub-user',
+  TransitionDuration: '--webchat__transition-duration',
+  TransitionEasing: '--webchat__transition-easing',
+  WordBreakMessageActivity: '--webchat__word-break--message-activity'
+}) satisfies Readonly<Record<string, `--webchat__${string}`>>;
 
 export default CustomPropertyNames;