botframework-webchat-fluent-theme 4.17.0-main.20240411.ff34969 → 4.17.0-main.20240416.4ff01ae

package/src/components/sendbox/index.tsx

@@ -3,7 +3,6 @@ import cx from 'classnames';
 import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { SendIcon } from '../../icons/SendIcon';
-import { useStyles } from '../../styles';
 import testIds from '../../testIds';
 import DropZone from '../DropZone';
 import SuggestedActions from '../SuggestedActions';
@@ -16,70 +15,11 @@ import TextArea from './TextArea';
 import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 import useSubmitError from './private/useSubmitError';
 import useUniqueId from './private/useUniqueId';
+import styles from './index.module.css';
+import { useStyles } from '../../styles';
 
 const { useStyleOptions, useMakeThumbnail, useLocalizer, useSendBoxAttachments, useSendMessage } = hooks;
 
-const styles = {
-  'webchat-fluent__sendbox': {
-    color: 'var(--webchat-colorNeutralForeground1)',
-    fontFamily: 'var(--webchat-fontFamilyBase)',
-    padding: '0 10px 10px',
-    textRendering: 'optimizeLegibility'
-  },
-
-  'webchat-fluent__sendbox__sendbox': {
-    backgroundColor: 'var(--webchat-colorNeutralBackground1)',
-    border: '1px solid var(--webchat-colorNeutralStroke1)',
-    borderRadius: 'var(--webchat-borderRadiusLarge)',
-    display: 'grid',
-    fontFamily: 'var(--webchat-fontFamilyBase)',
-    fontSize: '14px',
-    gap: '6px',
-    lineHeight: '20px',
-    padding: '8px',
-    position: 'relative',
-
-    '&:focus-within': {
-      borderColor: 'var(--webchat-colorNeutralStroke1Selected)',
-      // TODO clarify with design the color:
-      // - Teams is using colorCompoundBrandForeground1
-      // - Fluent is using colorCompoundBrandStroke
-      // - we are using colorCompoundBrandForeground1Hover
-      boxShadow: 'inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover)'
-    }
-  },
-
-  'webchat-fluent__sendbox__sendbox-text': {
-    backgroundColor: 'transparent',
-    border: 'none',
-    flex: 'auto',
-    fontFamily: 'var(--webchat-fontFamilyBase)',
-    fontSize: '14px',
-    lineHeight: '20px',
-    outline: 'none',
-    padding: '4px 4px 0',
-    resize: 'none'
-  },
-
-  'webchat-fluent__sendbox__sendbox-controls': {
-    alignItems: 'center',
-    display: 'flex',
-    paddingInlineStart: '4px'
-  },
-
-  'webchat-fluent__sendbox__text-counter': {
-    color: 'var(--webchat-colorNeutralForeground4)',
-    cursor: 'default',
-    fontFamily: 'var(--webchat-fontFamilyNumeric)',
-    fontSize: '10px',
-    lineHeight: '14px'
-  },
-
-  'webchat-fluent__sendbox__text-counter--error': {
-    color: 'var(--webchat-colorStatusDangerForeground1)'
-  }
-};
-
 function SendBox(
   props: Readonly<{
     className?: string | undefined;
@@ -89,15 +29,15 @@ function SendBox(
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [message, setMessage] = useState('');
   const [attachments, setAttachments] = useSendBoxAttachments();
-  const [{ maxMessageLength }] = useStyleOptions();
+  const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions();
   const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
   const classNames = useStyles(styles);
   const localize = useLocalizer();
   const sendMessage = useSendMessage();
   const makeThumbnail = useMakeThumbnail();
-  const errorMessageId = useUniqueId('webchat-fluent__sendbox__error-message-id');
+  const errorMessageId = useUniqueId('sendbox__error-message-id');
   const [errorRef, errorMessage] = useSubmitError({ message, attachments });
-  const [telephoneKeypadShown, setTelephoneKeypadShown] = useTelephoneKeypadShown();
+  const [telephoneKeypadShown] = useTelephoneKeypadShown();
 
   const attachmentsRef = useRefFrom(attachments);
   const messageRef = useRefFrom(message);
@@ -162,14 +102,9 @@ function SendBox(
   );
 
   const handleTelephoneKeypadButtonClick = useCallback(
-    (dtmf: DTMF) => {
-      // TODO: We need more official way of sending DTMF.
-      sendMessage(`/DTMF ${dtmf}`);
-
-      // TODO: In the future when we work on input modality, it should manage the focus in a better way.
-      setTelephoneKeypadShown(false);
-    },
-    [sendMessage, setTelephoneKeypadShown]
+    // TODO: We need more official way of sending DTMF.
+    (dtmf: DTMF) => sendMessage(`/DTMF ${dtmf}`),
+    [sendMessage]
   );
 
   const aria = {
@@ -181,9 +116,9 @@ function SendBox(
   };
 
   return (
-    <form {...aria} className={cx(classNames['webchat-fluent__sendbox'], props.className)} onSubmit={handleFormSubmit}>
+    <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
       <SuggestedActions />
-      <div className={cx(classNames['webchat-fluent__sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
+      <div className={cx(classNames['sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
         <TelephoneKeypadSurrogate
           autoFocus={true}
           isHorizontal={false}
@@ -191,7 +126,7 @@ function SendBox(
         />
         <TextArea
           aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
-          className={classNames['webchat-fluent__sendbox__sendbox-text']}
+          className={classNames['sendbox__sendbox-text']}
           data-testid={testIds.sendBoxTextBox}
           hidden={telephoneKeypadShown}
           onInput={handleMessageChange}
@@ -200,19 +135,19 @@ function SendBox(
           value={message}
         />
         <Attachments attachments={attachments} />
-        <div className={cx(classNames['webchat-fluent__sendbox__sendbox-controls'])}>
+        <div className={cx(classNames['sendbox__sendbox-controls'])}>
           {maxMessageLength && (
             <div
-              className={cx(classNames['webchat-fluent__sendbox__text-counter'], {
-                [classNames['webchat-fluent__sendbox__text-counter--error']]: isMessageLengthExceeded
+              className={cx(classNames['sendbox__text-counter'], {
+                [classNames['sendbox__text-counter--error']]: isMessageLengthExceeded
               })}
             >
               {`${message.length}/${maxMessageLength}`}
             </div>
           )}
           <Toolbar>
-            <TelephoneKeypadToolbarButton />
-            <AddAttachmentButton onFilesAdded={handleAddFiles} />
+            {!hideTelephoneKeypadButton && <TelephoneKeypadToolbarButton />}
+            {!hideUploadButton && <AddAttachmentButton onFilesAdded={handleAddFiles} />}
             <ToolbarSeparator />
             <ToolbarButton
               aria-label={localize('TEXT_INPUT_SEND_BUTTON_ALT')}

package/src/components/suggestedActions/SuggestedAction.module.css

@@ -0,0 +1,34 @@
+:global(.webchat-fluent) .suggested-action {
+  align-items: center;
+  background: transparent;
+  border-radius: 8px;
+  border: 1px solid var(--webchat-colorBrandStroke2);
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  gap: 4px;
+  padding: 4px 8px 4px;
+  text-align: start;
+  transition: all .15s ease-out;
+
+  @media (hover: hover) {
+    &:not([aria-disabled="true"]):hover {
+      background-color: var(--webchat-colorBrandBackground2Hover);
+      color: var(--webchat-colorBrandForeground2Hover)
+    }
+  }
+  &:not([aria-disabled="true"]):active {
+    background-color: var(--webchat-colorBrandBackground2Pressed);
+    color: var(--webchat-colorBrandForeground2Pressed)
+  }
+  &[aria-disabled="true"] {
+    color: var(--webchat-colorNeutralForegroundDisabled);
+    cursor: not-allowed
+  }
+}
+
+:global(.webchat-fluent) .suggested-action__image {
+  font-size: 12px;
+  height: 1em;
+  width: 1em;
+}

package/src/components/suggestedActions/SuggestedAction.tsx

@@ -2,10 +2,11 @@ import { hooks } from 'botframework-webchat-component';
 import { type DirectLineCardAction } from 'botframework-webchat-core';
 import cx from 'classnames';
 import React, { MouseEventHandler, memo, useCallback, useRef } from 'react';
-import AccessibleButton from './AccessibleButton';
+import styles from './SuggestedAction.module.css';
 import { useStyles } from '../../styles';
+import AccessibleButton from './AccessibleButton';
 
-const { useScrollToEnd, useStyleSet, usePerformCardAction, useFocus, useSuggestedActions, useDisabled } = hooks;
+const { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = hooks;
 
 type SuggestedActionProps = Readonly<{
   buttonText: string | undefined;
@@ -29,45 +30,6 @@ type SuggestedActionProps = Readonly<{
   value?: any;
 }>;
 
-const styles = {
-  'webchat-fluent__suggested-action': {
-    background: 'transparent',
-    border: '1px solid var(--webchat-colorBrandStroke2)',
-    borderRadius: '8px',
-    cursor: 'pointer',
-    fontSize: '12px',
-    lineHeight: '14px',
-    padding: '6px 8px 4px',
-    textAlign: 'start',
-    display: 'flex',
-    gap: '4px',
-    alignItems: 'center',
-    transition: 'all .15s ease-out',
-
-    '@media (hover: hover)': {
-      '&:not([aria-disabled="true"]):hover': {
-        backgroundColor: 'var(--webchat-colorBrandBackground2Hover)',
-        color: 'var(--webchat-colorBrandForeground2Hover)'
-      }
-    },
-    '&:not([aria-disabled="true"]):active': {
-      backgroundColor: 'var(--webchat-colorBrandBackground2Pressed)',
-      color: 'var(--webchat-colorBrandForeground2Pressed)'
-    },
-    '&[aria-disabled="true"]': {
-      color: ' var(--webchat-colorNeutralForegroundDisabled)',
-      cursor: 'not-allowed'
-    }
-  },
-
-  'webchat-fluent__suggested-action__image': {
-    width: '1em',
-    height: '1em',
-    fontSize: '20px',
-    translate: '0 -1px'
-  }
-};
-
 function SuggestedAction({
   buttonText,
   className,
@@ -110,17 +72,13 @@ function SuggestedAction({
 
   return (
     <AccessibleButton
-      className={cx(
-        classNames['webchat-fluent__suggested-action'],
-        suggestedActionStyleSet + '',
-        (className || '') + ''
-      )}
+      className={cx(classNames['suggested-action'], suggestedActionStyleSet + '', (className || '') + '')}
       disabled={disabled}
       onClick={handleClick}
       ref={focusRef}
       type="button"
     >
-      {image && <img alt={imageAlt} className={classNames['webchat-fluent__suggested-action__image']} src={image} />}
+      {image && <img alt={imageAlt} className={classNames['suggested-action__image']} src={image} />}
       <span>{buttonText}</span>
     </AccessibleButton>
   );

package/src/components/suggestedActions/index.module.css

@@ -0,0 +1,23 @@
+
+:global(.webchat-fluent) .suggested-actions {
+  align-items: flex-end;
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &:not(:empty) {
+    padding-block-end: 8px;
+    padding-inline-start: 4px
+  }
+
+  &.suggested-actions--flow {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  &.suggested-actions--stacked {
+    flex-direction: column
+  }
+}

package/src/components/suggestedActions/index.tsx

@@ -1,34 +1,21 @@
 import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { memo, type ReactNode } from 'react';
-import { useStyles } from '../../styles';
-import computeSuggestedActionText from './private/computeSuggestedActionText';
 import SuggestedAction from './SuggestedAction';
+import computeSuggestedActionText from './private/computeSuggestedActionText';
+import styles from './index.module.css';
+import { useStyles } from '../../styles';
 
-const { useLocalizer, useStyleSet, useSuggestedActions } = hooks;
-
-const styles = {
-  'webchat-fluent__suggested-actions': {
-    alignItems: 'flex-end',
-    alignSelf: 'flex-end',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-
-    '&:not(:empty)': {
-      paddingBlockEnd: '8px',
-      paddingInlineStart: '4px'
-    }
-  }
-};
+const { useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;
 
-function SuggestedActionStackedContainer(
+function SuggestedActionStackedOrFlowContainer(
   props: Readonly<{
     'aria-label'?: string | undefined;
     children?: ReactNode | undefined;
     className?: string | undefined;
   }>
 ) {
+  const [{ suggestedActionLayout }] = useStyleOptions();
   const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
   const classNames = useStyles(styles);
 
@@ -37,7 +24,15 @@ function SuggestedActionStackedContainer(
       aria-label={props['aria-label']}
       aria-live="polite"
       aria-orientation="vertical"
-      className={cx(classNames['webchat-fluent__suggested-actions'], suggestedActionsStyleSet + '', props.className)}
+      className={cx(
+        classNames['suggested-actions'],
+        suggestedActionsStyleSet + '',
+        {
+          [classNames['suggested-actions--flow']]: suggestedActionLayout === 'flow',
+          [classNames['suggested-actions--stacked']]: suggestedActionLayout !== 'flow'
+        },
+        props.className
+      )}
       role="toolbar"
     >
       {!!props.children && !!React.Children.count(props.children) && props.children}
@@ -91,12 +86,12 @@ function SuggestedActions() {
     );
   });
   return (
-    <SuggestedActionStackedContainer
+    <SuggestedActionStackedOrFlowContainer
       aria-label={localize('SUGGESTED_ACTIONS_LABEL_ALT')}
-      className={classNames['webchat-fluent__suggested-actions']}
+      className={classNames['suggested-actions']}
     >
       {children}
-    </SuggestedActionStackedContainer>
+    </SuggestedActionStackedOrFlowContainer>
   );
 }
 

package/src/components/telephoneKeypad/private/Button.module.css

@@ -0,0 +1,62 @@
+
+:global(.webchat-fluent) .telephone-keypad__button {
+  -webkit-user-select: none;
+  align-items: center;
+  appearance: none;
+  /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */
+  background-color: White;
+  border-radius: 100%;
+
+  /* Whitelabel styles */
+  /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */
+  /* color: inherit; */
+
+  border: solid 1px var(--webchat-colorNeutralStroke1);
+  color: var(--webchat-colorGray200);
+  font-weight: var(--webchat-fontWeightSemibold);
+
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 60px;
+  opacity: 0.7;
+  padding: 0;
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  width: 60px;
+
+  &:hover {
+    /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */
+    background-color: var(--webchat-colorGray30)
+  }
+}
+
+:global(.webchat-fluent) .telephone-keypad__button__ruby {
+  /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */
+  color: var(--webchat-colorGray190);
+  font-size: 10px;
+}
+
+:global(.webchat-fluent) .telephone-keypad__button__text {
+  font-size: 24px;
+  margin-top: 8px;
+}
+
+:global(.webchat-fluent) .telephone-keypad--horizontal {
+  & .telephone-keypad__button {
+    height: 32px;
+    justify-content: center;
+    margin: 8px 4px;
+    width: 32px;
+  };
+
+  .telephone-keypad__button__ruby {
+    display: none;
+  }
+
+  & .telephone-keypad__button__text {
+    font-size: 20px;
+    margin-top: 0;
+  }
+}

package/src/components/telephoneKeypad/private/Button.tsx

@@ -2,72 +2,10 @@ import React, { forwardRef, memo, useCallback, type Ref } from 'react';
 
 import { useRefFrom } from 'use-ref-from';
 
-import { useStyles } from '../../../styles';
 import { type DTMF } from '../types';
 
-const styles = {
-  'webchat__telephone-keypad__button': {
-    '-webkit-user-select': 'none',
-    alignItems: 'center',
-    appearance: 'none',
-    // backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white,
-    backgroundColor: 'White',
-    borderRadius: '100%',
-
-    // Whitelabel styles
-    // border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`,
-    // color: 'inherit',
-
-    border: 'solid 1px var(--webchat-colorNeutralStroke1)',
-    color: 'var(--webchat-colorNeutralForeground1)',
-    fontWeight: 'var(--webchat-fontWeightSemibold)',
-
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'column',
-    height: 60,
-    opacity: 0.7,
-    padding: 0,
-    position: 'relative',
-    touchAction: 'none',
-    userSelect: 'none',
-    width: 60,
-
-    '&:hover': {
-      // backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30
-      backgroundColor: 'var(--webchat-colorGray30)'
-    }
-  },
-
-  'webchat__telephone-keypad__button__ruby': {
-    // color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160,
-    color: 'var(--webchat-colorGray160)',
-    fontSize: 10
-  },
-
-  'webchat__telephone-keypad__button__text': {
-    fontSize: 24,
-    marginTop: 8
-  },
-
-  'webchat__telephone-keypad--horizontal': {
-    '& .webchat__telephone-keypad__button': {
-      height: 32,
-      width: 32,
-      margin: '8px 4px',
-      justifyContent: 'center'
-    },
-
-    'webchat__telephone-keypad__button__ruby': {
-      display: 'none'
-    },
-
-    '& .webchat__telephone-keypad__button__text': {
-      fontSize: 20,
-      marginTop: 0
-    }
-  }
-};
+import styles from './Button.module.css';
+import { useStyles } from '../../../styles';
 
 type Props = Readonly<{
   button: DTMF;
@@ -87,16 +25,16 @@ const Button = memo(
 
     return (
       <button
-        className={classNames['webchat__telephone-keypad__button']}
+        className={classNames['telephone-keypad__button']}
         data-testid={dataTestId}
         onClick={handleClick}
         ref={ref}
         type="button"
       >
-        <span className={classNames['webchat__telephone-keypad__button__text']}>
+        <span className={classNames['telephone-keypad__button__text']}>
           {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button}
         </span>
-        {!!ruby && <ruby className={classNames['webchat__telephone-keypad__button__ruby']}>{ruby}</ruby>}
+        {!!ruby && <ruby className={classNames['telephone-keypad__button__ruby']}>{ruby}</ruby>}
       </button>
     );
   })

package/src/components/telephoneKeypad/private/TelephoneKeypad.module.css

@@ -0,0 +1,30 @@
+
+:global(.webchat-fluent) .telephone-keypad {
+  /* Commented out whitelabel styles for now. */
+  /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */
+  /* borderRadius: '8px 8px 0px 0px; */
+  /* boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)', */
+
+  align-items: center;
+  background: var(--webchat-colorNeutralBackground1);
+  /* border: isHighContrastTheme() ? `1px solid ${white}` : none; */
+  border: none;
+  border-radius: var(--webchat-borderRadiusXLarge);
+  /* boxShadow: var(--shadow16); */
+  display: flex;
+  flex-direction: column;
+  font-family: var(--webchat-fontFamilyBase);
+  justify-content: center;
+  /* margin: var(--spacingHorizontalMNudge)' */
+}
+
+:global(.webchat-fluent) .telephone-keypad__box {
+  box-sizing: border-box;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  justify-items: center;
+  padding: 16px;
+  width: 100%;
+}

package/src/components/telephoneKeypad/private/TelephoneKeypad.tsx

@@ -1,44 +1,13 @@
 import React, { KeyboardEventHandler, memo, useCallback, useEffect, useRef, type ReactNode } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
-import { useStyles } from '../../../styles';
 import Button from './Button';
 // import HorizontalDialPadController from './HorizontalDialPadController';
 import testIds from '../../../testIds';
 import { type DTMF } from '../types';
 import useShown from '../useShown';
-
-const styles = {
-  'webchat__telephone-keypad': {
-    /* Commented out whitelabel styles for now. */
-    // background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10),
-    // borderRadius: '8px 8px 0px 0px',
-    // boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)',
-
-    alignItems: 'center',
-    background: 'var(--webchat-colorNeutralBackground1)',
-    // border: isHighContrastTheme() ? `1px solid ${white}` : 'none',
-    border: 'none',
-    borderRadius: 'var(--webchat-borderRadiusXLarge)',
-    // boxShadow: 'var(--shadow16)',
-    display: 'flex',
-    flexDirection: 'column',
-    fontFamily: 'var(--webchat-fontFamilyBase)',
-    justifyContent: 'center'
-    // margin: 'var(--spacingHorizontalMNudge)'
-  },
-
-  'webchat__telephone-keypad__box': {
-    boxSizing: 'border-box',
-    display: 'grid',
-    gap: '16px',
-    gridTemplateColumns: 'repeat(3, 1fr)',
-    gridTemplateRows: 'repeat(4, 1fr)',
-    justifyItems: 'center',
-    padding: '16px',
-    width: '100%'
-  }
-};
+import styles from './TelephoneKeypad.module.css';
+import { useStyles } from '../../../styles';
 
 type Props = Readonly<{
   autoFocus?: boolean | undefined;
@@ -54,7 +23,7 @@ const Orientation = memo(
       // <HorizontalDialPadController>{children}</HorizontalDialPadController>
       false
     ) : (
-      <div className={classNames['webchat__telephone-keypad__box']}>{children}</div>
+      <div className={classNames['telephone-keypad__box']}>{children}</div>
     );
   }
 );
@@ -95,7 +64,7 @@ const TelephoneKeypad = memo(({ autoFocus, onButtonClick, isHorizontal }: Props)
   }, [autoFocusRef, firstButtonRef]);
 
   return (
-    <div className={classNames['webchat__telephone-keypad']} onKeyDown={handleKeyDown}>
+    <div className={classNames['telephone-keypad']} onKeyDown={handleKeyDown}>
       <Orientation isHorizontal={isHorizontal}>
         <Button
           button="1"

package/src/env.d.ts

@@ -0,0 +1,7 @@
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: any };
+
+declare module '*.module.css' {
+  const classes: CSSModuleClasses;
+  export default classes;
+}

package/src/index.ts

@@ -2,9 +2,12 @@ import { injectMetaTag } from 'inject-meta-tag';
 
 import FluentThemeProvider from './private/FluentThemeProvider';
 import testIds from './testIds';
+import { injectStyle } from './styles';
 
 declare const NPM_PACKAGE_VERSION: string;
 
 injectMetaTag('botframework-webchat-fluent-theme:version', NPM_PACKAGE_VERSION);
 
+injectStyle();
+
 export { FluentThemeProvider, testIds };

package/src/styles/injectStyle.ts

@@ -0,0 +1,9 @@
+export const injectedStyles = '@--INJECTED-STYLES-CONTENT--@';
+
+export default function injectStyles() {
+  if (globalThis.document) {
+    const style = document.createElement('style');
+    style.append(document.createTextNode(injectedStyles));
+    document.head.appendChild(style);
+  }
+}

package/src/styles/useStyles.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+
+function useStyles<T extends CSSModuleClasses>(styles: T): T {
+  // @ts-expect-error: entries/fromEntries don't allow to specify keys type
+  return useMemo(
+    () =>
+      Object.freeze(
+        Object.fromEntries(
+          Object.entries(styles).map(([baseClassName, resultClassName]) => [
+            baseClassName,
+            `${baseClassName} ${resultClassName}`
+          ])
+        )
+      ),
+    [styles]
+  );
+}
+
+export default useStyles;