botframework-webchat-fluent-theme 4.17.0-main.20240416.e3f5401 → 4.17.0-main.20240419.2240f2a

package/src/components/Theme.tsx

@@ -1,72 +1,11 @@
 import React, { type ReactNode } from 'react';
+import cx from 'classnames';
+import styles from './Theme.module.css';
 import { useStyles } from '../styles';
 
-const styles = {
-  'webchat-fluent__theme': {
-    display: 'contents',
-
-    '--webchat-colorNeutralForeground1': 'var(--colorNeutralForeground1, #242424)',
-    '--webchat-colorNeutralForeground2': 'var(--colorNeutralForeground2, #424242)',
-    '--webchat-colorNeutralForeground4': 'var(--colorNeutralForeground4, #707070)',
-
-    '--webchat-colorNeutralForegroundDisabled': 'var(--colorNeutralForegroundDisabled, #bdbdbd)',
-
-    '--webchat-colorNeutralBackground1': 'var(--colorNeutralBackground1, #ffffff)',
-    '--webchat-colorNeutralBackground4': 'var(--colorNeutralBackground4, #f0f0f0)',
-    '--webchat-colorNeutralBackground5': 'var(--colorNeutralBackground5, #ebebeb)',
-
-    '--webchat-colorSubtleBackgroundHover': 'var(--colorSubtleBackgroundHover, #f5f5f5)',
-    '--webchat-colorSubtleBackgroundPressed': 'var(--colorSubtleBackgroundPressed, #e0e0e0)',
-
-    '--webchat-colorNeutralStroke1': 'var(--colorNeutralStroke1, #d1d1d1)',
-    '--webchat-colorNeutralStroke2': 'var(--colorNeutralStroke2, #e0e0e0)',
-    '--webchat-colorNeutralStroke1Selected': 'var(--colorNeutralStroke1Selected, #bdbdbd)',
-
-    '--webchat-colorBrandStroke2': 'var(--colorBrandStroke2, #9edcf7)',
-
-    '--webchat-colorBrandForeground2Hover': 'var(--colorBrandForeground2Hover, #015a7a)',
-    '--webchat-colorBrandForeground2Pressed': 'var(--colorBrandForeground2Pressed, #01384d)',
-
-    '--webchat-colorBrandBackground2Hover': 'var(--colorBrandBackground2Hover, #bee7fa)',
-    '--webchat-colorBrandBackground2Pressed': 'var(--colorBrandBackground2Pressed, #7fd2f5)',
-
-    '--webchat-colorCompoundBrandForeground1': 'var(--colorCompoundBrandForeground1, #077fab)',
-
-    '--webchat-colorCompoundBrandForeground1Hover': 'var(--colorCompoundBrandForeground1Hover, #02729c)',
-    '--webchat-colorCompoundBrandForeground1Pressed': 'var(--colorCompoundBrandForeground1Pressed, #01678c)',
-
-    '--webchat-colorStatusDangerForeground1': 'var(--colorStatusDangerForeground1, #b10e1c)',
-
-    // https://github.com/microsoft/fluentui/blob/master/packages/theme/src/colors/FluentColors.ts
-    '--webchat-colorGray30': 'var(--colorGray30, #edebe9)',
-    '--webchat-colorGray160': 'var(--colorGray160, #323130)',
-    '--webchat-colorGray190': 'var(--colorGray190, #201f1e)',
-    '--webchat-colorGray200': 'var(--colorGray200, #1b1a19)',
-
-    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/borderRadius.ts
-    '--webchat-borderRadiusSmall': 'var(--borderRadiusSmall, 2px)',
-    '--webchat-borderRadiusLarge': 'var(--borderRadiusLarge, 6px)',
-    '--webchat-borderRadiusXLarge': 'var(--borderRadiusXLarge, 8px)',
-
-    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/utils/shadows.ts
-    '--webchat-shadow16':
-      'var(--shadow16, 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108))',
-
-    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts
-    '--webchat-spacingHorizontalMNudge': 'var(--spacingHorizontalMNudge, 10px)',
-
-    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
-    '--webchat-fontFamilyBase': `var(--fontFamilyBase, 'Segoe UI)', 'Segoe UI Web (West European))', -apple-system,
-      BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
-    '--webchat-fontFamilyNumeric': `var(--fontFamilyNumeric, Bahnschrift, 'Segoe UI)', 'Segoe UI Web (West European))',
-      -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue)', sans-serif)`,
-
-    // https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/fonts.ts
-    '--webchat-fontWeightSemibold': 'var(--fontWeightSemibold, 600)'
-  }
-};
+export const rootClassName = 'webchat-fluent';
 
 export default function WebchatTheme(props: Readonly<{ readonly children: ReactNode | undefined }>) {
   const classNames = useStyles(styles);
-  return <div className={classNames['webchat-fluent__theme']}>{props.children}</div>;
+  return <div className={cx(rootClassName, classNames['theme'])}>{props.children}</div>;
 }

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

@@ -0,0 +1,23 @@
+:global(.webchat-fluent) .sendbox__attachment-drop-zone {
+  background-color: var(--webchat-colorNeutralBackground4);
+  border-radius: inherit;
+  cursor: copy;
+  display: grid;
+  gap: 8px;
+  inset: 0;
+  place-content: center;
+  place-items: center;
+  position: absolute;
+}
+
+:global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {
+  background-color: #e00;
+  color: White
+}
+
+:global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {
+  height: 36px;
+  /* Set "pointer-events: none" to ignore dragging over the icon. Otherwise, when dragging over the icon; it would disable the "--droppable" modifier.*/
+  pointer-events: none;
+  width: 36px
+}

package/src/components/dropZone/index.tsx

@@ -1,40 +1,15 @@
-import { hooks } from 'botframework-webchat-api';
+import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { memo, useCallback, useEffect, useRef, useState, type DragEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
 import { AddDocumentIcon } from '../../icons/AddDocumentIcon';
-import { useStyles } from '../../styles';
 import testIds from '../../testIds';
+import styles from './index.module.css';
+import { useStyles } from '../../styles';
 
 const { useLocalizer } = hooks;
 
-const styles = {
-  'webchat-fluent__sendbox__attachment-drop-zone': {
-    backgroundColor: 'var(--webchat-colorNeutralBackground4)',
-    borderRadius: 'inherit',
-    cursor: 'copy',
-    display: 'grid',
-    gap: '8px',
-    inset: '0',
-    placeContent: 'center',
-    placeItems: 'center',
-    position: 'absolute'
-  },
-
-  'webchat-fluent__sendbox__attachment-drop-zone--droppable': {
-    backgroundColor: '#e00',
-    color: 'White'
-  },
-
-  'webchat-fluent__sendbox__attachment-drop-zone-icon': {
-    height: '36px',
-    // Set "pointer-events: none" to ignore dragging over the icon. Otherwise, when dragging over the icon, it would disable the "--droppable" modifier.
-    pointerEvents: 'none',
-    width: '36px'
-  }
-};
-
 const handleDragOver: DragEventHandler<HTMLDivElement> = event => {
   // This is for preventing the browser from opening the dropped file in a new tab.
   event.preventDefault();
@@ -113,15 +88,15 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
 
   return dropZoneState ? (
     <div
-      className={cx(classNames['webchat-fluent__sendbox__attachment-drop-zone'], {
-        [classNames['webchat-fluent__sendbox__attachment-drop-zone--droppable']]: dropZoneState === 'droppable'
+      className={cx(classNames['sendbox__attachment-drop-zone'], {
+        [classNames['sendbox__attachment-drop-zone--droppable']]: dropZoneState === 'droppable'
       })}
       data-testid={testIds.sendBoxDropZone}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
       ref={dropZoneRef}
     >
-      <AddDocumentIcon className={classNames['webchat-fluent__sendbox__attachment-drop-zone-icon']} />
+      <AddDocumentIcon className={classNames['sendbox__attachment-drop-zone-icon']} />
       {localize('TEXT_INPUT_DROP_ZONE')}
     </div>
   ) : null;

package/src/components/sendbox/AddAttachmentButton.module.css

@@ -0,0 +1,10 @@
+:global(.webchat-fluent) .sendbox__add-attachment {
+  display: grid
+}
+
+:global(.webchat-fluent) .sendbox__add-attachment-input {
+  font-size: 0;
+  height: 0;
+  opacity: 0;
+  width: 0;
+}

package/src/components/sendbox/AddAttachmentButton.tsx

@@ -1,26 +1,14 @@
-import { hooks } from 'botframework-webchat-api';
+import { hooks } from 'botframework-webchat-component';
 import React, { useCallback, useRef, type ChangeEventHandler, memo } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { AttachmentIcon } from '../../icons/AttachmentIcon';
-import { useStyles } from '../../styles';
 import testIds from '../../testIds';
 import { ToolbarButton } from './Toolbar';
+import styles from './AddAttachmentButton.module.css';
+import { useStyles } from '../../styles';
 
 const { useLocalizer, useStyleOptions } = hooks;
 
-const styles = {
-  'webchat-fluent__sendbox__add-attachment': {
-    display: 'grid'
-  },
-
-  'webchat-fluent__sendbox__add-attachment-input': {
-    fontSize: 0,
-    height: 0,
-    opacity: 0,
-    width: 0
-  }
-};
-
 function AddAttachmentButton(
   props: Readonly<{
     disabled?: boolean | undefined;
@@ -49,12 +37,12 @@ function AddAttachmentButton(
   );
 
   return (
-    <div className={classNames['webchat-fluent__sendbox__add-attachment']}>
+    <div className={classNames['sendbox__add-attachment']}>
       <input
         accept={uploadAccept}
         aria-disabled={props.disabled}
         aria-hidden="true"
-        className={classNames['webchat-fluent__sendbox__add-attachment-input']}
+        className={classNames['sendbox__add-attachment-input']}
         multiple={uploadMultiple}
         onInput={props.disabled ? undefined : handleFileChange}
         readOnly={props.disabled}

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

@@ -0,0 +1,7 @@
+: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,19 +1,11 @@
-import { hooks } from 'botframework-webchat-api';
+import { hooks } from 'botframework-webchat-component';
 import React, { memo } from 'react';
+import cx from 'classnames';
+import styles from './Attachments.module.css';
 import { useStyles } from '../../styles';
 
 const { useLocalizer } = hooks;
 
-const styles = {
-  'webchat-fluent__sendbox__attachment': {
-    border: '1px solid var(--webchat-colorNeutralStroke1)',
-    borderRadius: 'var(--webchat-borderRadiusLarge)',
-    cursor: 'default',
-    padding: '6px 8px',
-    width: 'fit-content'
-  }
-};
-
 const attachmentsPluralStringIds = {
   one: 'TEXT_INPUT_ATTACHMENTS_ONE',
   two: 'TEXT_INPUT_ATTACHMENTS_TWO',
@@ -23,15 +15,17 @@ const attachmentsPluralStringIds = {
 };
 
 function Attachments({
-  attachments
+  attachments,
+  className
 }: Readonly<{
   readonly attachments: readonly Readonly<{ blob: Blob | File; thumbnailURL?: URL | undefined }>[];
+  readonly className?: string | undefined;
 }>) {
   const classNames = useStyles(styles);
   const localizeWithPlural = useLocalizer({ plural: true });
 
   return attachments.length ? (
-    <div className={classNames['webchat-fluent__sendbox__attachment']}>
+    <div className={cx(classNames['sendbox__attachment'], className)}>
       {localizeWithPlural(attachmentsPluralStringIds, attachments.length)}
     </div>
   ) : null;

package/src/components/sendbox/ErrorMessage.module.css

@@ -0,0 +1,9 @@
+:global(.webchat-fluent) .sendbox__error-message {
+  color: transparent;
+  font-size: 0;
+  height: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 0;
+}

package/src/components/sendbox/ErrorMessage.tsx

@@ -1,23 +1,12 @@
 import React, { memo } from 'react';
+import styles from './ErrorMessage.module.css';
 import { useStyles } from '../../styles';
 
-const styles = {
-  'webchat-fluent___sendbox__error-message': {
-    fontSize: 0,
-    height: 0,
-    width: 0,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    color: 'transparent'
-  }
-};
-
 function ErrorMessage(props: Readonly<{ id: string; error?: string | undefined }>) {
   const classNames = useStyles(styles);
   return (
     // eslint-disable-next-line react/forbid-dom-props
-    <span className={classNames['webchat-fluent___sendbox__error-message']} id={props.id} role="alert">
+    <span className={classNames['sendbox__error-message']} id={props.id} role="alert">
       {props.error}
     </span>
   );

package/src/components/sendbox/TelephoneKeypadToolbarButton.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback } from 'react';
 
-import { hooks } from 'botframework-webchat-api';
+import { hooks } from 'botframework-webchat-component';
 import { TelephoneKeypadIcon } from '../../icons/TelephoneKeypad';
 import testIds from '../../testIds';
 import { useTelephoneKeypadShown } from '../TelephoneKeypad';
@@ -9,7 +9,7 @@ import { ToolbarButton } from './Toolbar';
 const { useLocalizer } = hooks;
 
 const TelephoneKeypadToolbarButton = memo(() => {
-  const [, setTelephoneKeypadShown] = useTelephoneKeypadShown();
+  const [telephoneKeypadShown, setTelephoneKeypadShown] = useTelephoneKeypadShown();
   const localize = useLocalizer();
 
   const handleClick = useCallback(() => setTelephoneKeypadShown(shown => !shown), [setTelephoneKeypadShown]);
@@ -19,6 +19,7 @@ const TelephoneKeypadToolbarButton = memo(() => {
       aria-label={localize('TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT')}
       data-testid={testIds.sendBoxTelephoneKeypadToolbarButton}
       onClick={handleClick}
+      selected={telephoneKeypadShown}
     >
       <TelephoneKeypadIcon />
     </ToolbarButton>

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

@@ -0,0 +1,63 @@
+:global(.webchat-fluent) .sendbox__text-area {
+  display: grid;
+  grid-template-areas: 'main';
+  max-height: 200px;
+  overflow: hidden;
+}
+
+: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-shared {
+  border: none;
+  font: inherit;
+  grid-area: main;
+  outline: inherit;
+  overflow-wrap: anywhere;
+  resize: inherit;
+  scrollbar-gutter: stable;
+}
+
+:global(.webchat-fluent) .sendbox__text-area-doppelganger {
+  overflow: hidden;
+  visibility: hidden;
+  white-space: pre-wrap;
+}
+
+:global(.webchat-fluent) .sendbox__text-area-input {
+  background-color: inherit;
+  color: currentColor;
+  height: 100%;
+  padding: 0;
+}
+
+:global(.webchat-fluent) .sendbox__text-area-input--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,68 +1,7 @@
 import cx from 'classnames';
 import React, { forwardRef, useCallback, type FormEventHandler, type KeyboardEventHandler } from 'react';
-
 import { useStyles } from '../../styles';
-
-const styles = {
-  'webchat-fluent__sendbox__text-area': {
-    display: 'grid',
-    gridTemplateAreas: `'main'`,
-    maxHeight: '200px',
-    overflow: 'hidden'
-  },
-
-  'webchat-fluent__sendbox__text-area--hidden': {
-    // TODO: Not perfect way of hiding the text box.
-    height: 0,
-    visibility: 'collapse'
-  },
-
-  'webchat-fluent__sendbox__text-area-shared': {
-    border: 'none',
-    font: 'inherit',
-    gridArea: 'main',
-    outline: 'inherit',
-    overflowWrap: 'anywhere',
-    resize: 'inherit',
-    scrollbarGutter: 'stable'
-  },
-
-  'webchat-fluent__sendbox__text-area-doppelganger': {
-    overflow: 'hidden',
-    visibility: 'hidden',
-    whiteSpace: 'pre-wrap'
-  },
-
-  'webchat-fluent__sendbox__text-area-input': {
-    height: '100%',
-    padding: 0
-  },
-
-  'webchat-fluent__sendbox__text-area-input--scroll': {
-    /* Firefox */
-    MozScrollbarColor: 'var(--webchat-colorNeutralBackground5) var(--webchat-colorNeutralForeground2)',
-    MozScrollbarWidth: 'thin',
-
-    /* Chrome, Edge, and Safari */
-    '&::-webkit-scrollbar': {
-      width: '8px'
-    },
-
-    '&::-webkit-scrollbar-track': {
-      backgroundColor: 'var(--webchat-colorNeutralBackground5)',
-      borderRadius: '16px'
-    },
-
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: 'var(--webchat-colorNeutralForeground2)',
-      borderRadius: '16px'
-    },
-
-    '&::-webkit-scrollbar-corner': {
-      backgroundColor: 'var(--webchat-colorNeutralBackground5)'
-    }
-  }
-};
+import styles from './TextArea.module.css';
 
 const TextArea = forwardRef<
   HTMLTextAreaElement,
@@ -103,9 +42,9 @@ const TextArea = forwardRef<
   return (
     <div
       className={cx(
-        classNames['webchat-fluent__sendbox__text-area'],
+        classNames['sendbox__text-area'],
         {
-          [classNames['webchat-fluent__sendbox__text-area--hidden']]: props.hidden
+          [classNames['sendbox__text-area--hidden']]: props.hidden
         },
         props.className
       )}
@@ -113,9 +52,9 @@ const TextArea = forwardRef<
     >
       <div
         className={cx(
-          classNames['webchat-fluent__sendbox__text-area-doppelganger'],
-          classNames['webchat-fluent__sendbox__text-area-shared'],
-          classNames['webchat-fluent__sendbox__text-area-input--scroll']
+          classNames['sendbox__text-area-doppelganger'],
+          classNames['sendbox__text-area-shared'],
+          classNames['sendbox__text-area-input--scroll']
         )}
       >
         {props.value || props.placeholder}{' '}
@@ -123,9 +62,9 @@ const TextArea = forwardRef<
       <textarea
         aria-label={props['aria-label']}
         className={cx(
-          classNames['webchat-fluent__sendbox__text-area-input'],
-          classNames['webchat-fluent__sendbox__text-area-shared'],
-          classNames['webchat-fluent__sendbox__text-area-input--scroll']
+          classNames['sendbox__text-area-input'],
+          classNames['sendbox__text-area-shared'],
+          classNames['sendbox__text-area-input--scroll']
         )}
         data-testid={props['data-testid']}
         onInput={props.onInput}

package/src/components/sendbox/Toolbar.module.css

@@ -0,0 +1,51 @@
+:global(.webchat-fluent) .sendbox__toolbar {
+  display: flex;
+  gap: 4px;
+  margin-inline-start: auto;
+}
+
+:global(.webchat-fluent) .sendbox__toolbar-button {
+  align-items: center;
+  appearance: none;
+  aspect-ratio: 1;
+  background: transparent;
+  border-radius: var(--webchat-borderRadiusSmall);
+  border: none;
+  color: currentColor;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: 3px;
+  width: 32px;
+
+  > svg {
+    font-size: 20px;
+    pointer-events: none;
+  }
+
+  &.sendbox__toolbar-button--selected {
+    color: var(--webchat-colorNeutralForeground2BrandSelected);
+  }
+  @media (hover: hover) {
+    &:not([aria-disabled="true"]):hover {
+      color: var(--webchat-colorNeutralForeground2BrandHover);
+    }
+  }
+  &:not([aria-disabled="true"]):active {
+    color: var(--webchat-colorNeutralForeground2BrandPressed);
+  }
+  &[aria-disabled="true"] {
+    color: var(--webchat-colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+  }
+}
+
+:global(.webchat-fluent) .sendbox__toolbar-separator {
+  align-self: center;
+  border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);
+  height: 28px;
+
+  &:first-child, &:last-child, &:only-child {
+    display: none
+  }
+}

package/src/components/sendbox/Toolbar.tsx

@@ -1,59 +1,8 @@
 import cx from 'classnames';
 import React, { memo, type MouseEventHandler, type ReactNode } from 'react';
+import styles from './Toolbar.module.css';
 import { useStyles } from '../../styles';
 
-const styles = {
-  'webchat-fluent__sendbox__toolbar': {
-    display: 'flex',
-    gap: '4px',
-    marginInlineStart: 'auto'
-  },
-
-  'webchat-fluent__sendbox__toolbar-button': {
-    alignItems: 'center',
-    appearance: 'none',
-    aspectRatio: '1',
-    background: 'transparent',
-    border: 'none',
-    borderRadius: 'var(--webchat-borderRadiusSmall)',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'center',
-    padding: '3px',
-    width: '32px',
-
-    '> svg': {
-      fontSize: '20px',
-      pointerEvents: 'none'
-    },
-
-    '@media (hover: hover)': {
-      '&:not([aria-disabled="true"]):hover': {
-        backgroundColor: 'var(--webchat-colorSubtleBackgroundHover)',
-        color: 'var(--webchat-colorCompoundBrandForeground1Hover)'
-      }
-    },
-    '&:not([aria-disabled="true"]):active': {
-      backgroundColor: 'var(--webchat-colorSubtleBackgroundPressed)',
-      color: 'var(--webchat-colorCompoundBrandForeground1Pressed)'
-    },
-    '&[aria-disabled="true"]': {
-      color: 'var(--webchat-colorNeutralForegroundDisabled)',
-      cursor: 'not-allowed'
-    }
-  },
-
-  'webchat-fluent__sendbox__toolbar-separator': {
-    alignSelf: 'center',
-    borderInlineEnd: '1px solid var(--webchat-colorNeutralStroke2)',
-    height: '28px',
-
-    '&:first-child, &:last-child, &:only-child': {
-      display: 'none'
-    }
-  }
-};
-
 const preventDefaultHandler: MouseEventHandler<HTMLButtonElement> = event => event.preventDefault();
 
 export const ToolbarButton = memo(
@@ -65,6 +14,7 @@ export const ToolbarButton = memo(
       'data-testid'?: string | undefined;
       disabled?: boolean | undefined;
       onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+      selected?: boolean | undefined;
       type?: 'button' | 'submit' | undefined;
     }>
   ) => {
@@ -73,7 +23,9 @@ export const ToolbarButton = memo(
     return (
       <button
         aria-label={props['aria-label']}
-        className={cx(classNames['webchat-fluent__sendbox__toolbar-button'], props.className)}
+        className={cx(classNames['sendbox__toolbar-button'], props.className, {
+          [classNames['sendbox__toolbar-button--selected']]: props.selected
+        })}
         data-testid={props['data-testid']}
         onClick={props.disabled ? preventDefaultHandler : props.onClick}
         type={props.type === 'submit' ? 'submit' : 'button'}
@@ -93,7 +45,7 @@ ToolbarButton.displayName = 'ToolbarButton';
 export const Toolbar = memo((props: Readonly<{ children?: ReactNode | undefined; className?: string | undefined }>) => {
   const classNames = useStyles(styles);
 
-  return <div className={cx(classNames['webchat-fluent__sendbox__toolbar'], props.className)}>{props.children}</div>;
+  return <div className={cx(classNames['sendbox__toolbar'], props.className)}>{props.children}</div>;
 });
 
 Toolbar.displayName = 'Toolbar';
@@ -105,7 +57,7 @@ export const ToolbarSeparator = memo(
     return (
       <div
         aria-orientation="vertical"
-        className={cx(classNames['webchat-fluent__sendbox__toolbar-separator'], props.className)}
+        className={cx(classNames['sendbox__toolbar-separator'], props.className)}
         role="separator"
       />
     );