botframework-webchat-fluent-theme 4.17.0-main.20240416.4ff01ae → 4.17.0-main.20240416.e3f5401

package/src/components/dropZone/index.tsx

@@ -1,15 +1,40 @@
-import { hooks } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat-api';
 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 testIds from '../../testIds';
-import styles from './index.module.css';
 import { useStyles } from '../../styles';
+import testIds from '../../testIds';
 
 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();
@@ -88,15 +113,15 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
 
   return dropZoneState ? (
     <div
-      className={cx(classNames['sendbox__attachment-drop-zone'], {
-        [classNames['sendbox__attachment-drop-zone--droppable']]: dropZoneState === 'droppable'
+      className={cx(classNames['webchat-fluent__sendbox__attachment-drop-zone'], {
+        [classNames['webchat-fluent__sendbox__attachment-drop-zone--droppable']]: dropZoneState === 'droppable'
       })}
       data-testid={testIds.sendBoxDropZone}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
       ref={dropZoneRef}
     >
-      <AddDocumentIcon className={classNames['sendbox__attachment-drop-zone-icon']} />
+      <AddDocumentIcon className={classNames['webchat-fluent__sendbox__attachment-drop-zone-icon']} />
       {localize('TEXT_INPUT_DROP_ZONE')}
     </div>
   ) : null;

package/src/components/sendbox/AddAttachmentButton.tsx

@@ -1,14 +1,26 @@
-import { hooks } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat-api';
 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;
@@ -37,12 +49,12 @@ function AddAttachmentButton(
   );
 
   return (
-    <div className={classNames['sendbox__add-attachment']}>
+    <div className={classNames['webchat-fluent__sendbox__add-attachment']}>
       <input
         accept={uploadAccept}
         aria-disabled={props.disabled}
         aria-hidden="true"
-        className={classNames['sendbox__add-attachment-input']}
+        className={classNames['webchat-fluent__sendbox__add-attachment-input']}
         multiple={uploadMultiple}
         onInput={props.disabled ? undefined : handleFileChange}
         readOnly={props.disabled}

package/src/components/sendbox/Attachments.tsx

@@ -1,10 +1,19 @@
-import { hooks } from 'botframework-webchat-component';
+import { hooks } from 'botframework-webchat-api';
 import React, { memo } from 'react';
-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',
@@ -22,7 +31,7 @@ function Attachments({
   const localizeWithPlural = useLocalizer({ plural: true });
 
   return attachments.length ? (
-    <div className={classNames['sendbox__attachment']}>
+    <div className={classNames['webchat-fluent__sendbox__attachment']}>
       {localizeWithPlural(attachmentsPluralStringIds, attachments.length)}
     </div>
   ) : null;

package/src/components/sendbox/ErrorMessage.tsx

@@ -1,12 +1,23 @@
 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['sendbox__error-message']} id={props.id} role="alert">
+    <span className={classNames['webchat-fluent___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-component';
+import { hooks } from 'botframework-webchat-api';
 import { TelephoneKeypadIcon } from '../../icons/TelephoneKeypad';
 import testIds from '../../testIds';
 import { useTelephoneKeypadShown } from '../TelephoneKeypad';

package/src/components/sendbox/TextArea.tsx

@@ -1,7 +1,68 @@
 import cx from 'classnames';
 import React, { forwardRef, useCallback, type FormEventHandler, type KeyboardEventHandler } from 'react';
+
 import { useStyles } from '../../styles';
-import styles from './TextArea.module.css';
+
+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)'
+    }
+  }
+};
 
 const TextArea = forwardRef<
   HTMLTextAreaElement,
@@ -42,9 +103,9 @@ const TextArea = forwardRef<
   return (
     <div
       className={cx(
-        classNames['sendbox__text-area'],
+        classNames['webchat-fluent__sendbox__text-area'],
         {
-          [classNames['sendbox__text-area--hidden']]: props.hidden
+          [classNames['webchat-fluent__sendbox__text-area--hidden']]: props.hidden
         },
         props.className
       )}
@@ -52,9 +113,9 @@ const TextArea = forwardRef<
     >
       <div
         className={cx(
-          classNames['sendbox__text-area-doppelganger'],
-          classNames['sendbox__text-area-shared'],
-          classNames['sendbox__text-area-input--scroll']
+          classNames['webchat-fluent__sendbox__text-area-doppelganger'],
+          classNames['webchat-fluent__sendbox__text-area-shared'],
+          classNames['webchat-fluent__sendbox__text-area-input--scroll']
         )}
       >
         {props.value || props.placeholder}{' '}
@@ -62,9 +123,9 @@ const TextArea = forwardRef<
       <textarea
         aria-label={props['aria-label']}
         className={cx(
-          classNames['sendbox__text-area-input'],
-          classNames['sendbox__text-area-shared'],
-          classNames['sendbox__text-area-input--scroll']
+          classNames['webchat-fluent__sendbox__text-area-input'],
+          classNames['webchat-fluent__sendbox__text-area-shared'],
+          classNames['webchat-fluent__sendbox__text-area-input--scroll']
         )}
         data-testid={props['data-testid']}
         onInput={props.onInput}

package/src/components/sendbox/Toolbar.tsx

@@ -1,8 +1,59 @@
 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(
@@ -22,7 +73,7 @@ export const ToolbarButton = memo(
     return (
       <button
         aria-label={props['aria-label']}
-        className={cx(classNames['sendbox__toolbar-button'], props.className)}
+        className={cx(classNames['webchat-fluent__sendbox__toolbar-button'], props.className)}
         data-testid={props['data-testid']}
         onClick={props.disabled ? preventDefaultHandler : props.onClick}
         type={props.type === 'submit' ? 'submit' : 'button'}
@@ -42,7 +93,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['sendbox__toolbar'], props.className)}>{props.children}</div>;
+  return <div className={cx(classNames['webchat-fluent__sendbox__toolbar'], props.className)}>{props.children}</div>;
 });
 
 Toolbar.displayName = 'Toolbar';
@@ -54,7 +105,7 @@ export const ToolbarSeparator = memo(
     return (
       <div
         aria-orientation="vertical"
-        className={cx(classNames['sendbox__toolbar-separator'], props.className)}
+        className={cx(classNames['webchat-fluent__sendbox__toolbar-separator'], props.className)}
         role="separator"
       />
     );

package/src/components/sendbox/index.tsx

@@ -3,6 +3,7 @@ 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';
@@ -15,11 +16,70 @@ 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;
@@ -35,7 +95,7 @@ function SendBox(
   const localize = useLocalizer();
   const sendMessage = useSendMessage();
   const makeThumbnail = useMakeThumbnail();
-  const errorMessageId = useUniqueId('sendbox__error-message-id');
+  const errorMessageId = useUniqueId('webchat-fluent__sendbox__error-message-id');
   const [errorRef, errorMessage] = useSubmitError({ message, attachments });
   const [telephoneKeypadShown] = useTelephoneKeypadShown();
 
@@ -116,9 +176,9 @@ function SendBox(
   };
 
   return (
-    <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
+    <form {...aria} className={cx(classNames['webchat-fluent__sendbox'], props.className)} onSubmit={handleFormSubmit}>
       <SuggestedActions />
-      <div className={cx(classNames['sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
+      <div className={cx(classNames['webchat-fluent__sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
         <TelephoneKeypadSurrogate
           autoFocus={true}
           isHorizontal={false}
@@ -126,7 +186,7 @@ function SendBox(
         />
         <TextArea
           aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
-          className={classNames['sendbox__sendbox-text']}
+          className={classNames['webchat-fluent__sendbox__sendbox-text']}
           data-testid={testIds.sendBoxTextBox}
           hidden={telephoneKeypadShown}
           onInput={handleMessageChange}
@@ -135,11 +195,11 @@ function SendBox(
           value={message}
         />
         <Attachments attachments={attachments} />
-        <div className={cx(classNames['sendbox__sendbox-controls'])}>
+        <div className={cx(classNames['webchat-fluent__sendbox__sendbox-controls'])}>
           {maxMessageLength && (
             <div
-              className={cx(classNames['sendbox__text-counter'], {
-                [classNames['sendbox__text-counter--error']]: isMessageLengthExceeded
+              className={cx(classNames['webchat-fluent__sendbox__text-counter'], {
+                [classNames['webchat-fluent__sendbox__text-counter--error']]: isMessageLengthExceeded
               })}
             >
               {`${message.length}/${maxMessageLength}`}

package/src/components/suggestedActions/SuggestedAction.tsx

@@ -2,7 +2,6 @@ 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 styles from './SuggestedAction.module.css';
 import { useStyles } from '../../styles';
 import AccessibleButton from './AccessibleButton';
 
@@ -30,6 +29,43 @@ type SuggestedActionProps = Readonly<{
   value?: any;
 }>;
 
+const styles = {
+  'webchat-fluent__suggested-action': {
+    alignItems: 'center',
+    background: 'transparent',
+    border: '1px solid var(--webchat-colorBrandStroke2)',
+    borderRadius: '8px',
+    cursor: 'pointer',
+    display: 'flex',
+    fontSize: '12px',
+    gap: '4px',
+    padding: '4px 8px 4px',
+    textAlign: 'start',
+    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': {
+    height: '12px'
+  }
+};
+
 function SuggestedAction({
   buttonText,
   className,
@@ -72,13 +108,17 @@ function SuggestedAction({
 
   return (
     <AccessibleButton
-      className={cx(classNames['suggested-action'], suggestedActionStyleSet + '', (className || '') + '')}
+      className={cx(
+        classNames['webchat-fluent__suggested-action'],
+        suggestedActionStyleSet + '',
+        (className || '') + ''
+      )}
       disabled={disabled}
       onClick={handleClick}
       ref={focusRef}
       type="button"
     >
-      {image && <img alt={imageAlt} className={classNames['suggested-action__image']} src={image} />}
+      {image && <img alt={imageAlt} className={classNames['webchat-fluent__suggested-action__image']} src={image} />}
       <span>{buttonText}</span>
     </AccessibleButton>
   );

package/src/components/suggestedActions/index.tsx

@@ -1,13 +1,36 @@
 import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { memo, type ReactNode } from 'react';
+import { useStyles } from '../../styles';
 import SuggestedAction from './SuggestedAction';
 import computeSuggestedActionText from './private/computeSuggestedActionText';
-import styles from './index.module.css';
-import { useStyles } from '../../styles';
 
 const { useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;
 
+const styles = {
+  'webchat-fluent__suggested-actions': {
+    alignItems: 'flex-end',
+    alignSelf: 'flex-end',
+    display: 'flex',
+    gap: '8px',
+
+    '&:not(:empty)': {
+      paddingBlockEnd: '8px',
+      paddingInlineStart: '4px'
+    },
+
+    '&.webchat-fluent__suggested-actions--flow': {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'flex-end'
+    },
+
+    '&.webchat-fluent__suggested-actions--stacked': {
+      flexDirection: 'column'
+    }
+  }
+};
+
 function SuggestedActionStackedOrFlowContainer(
   props: Readonly<{
     'aria-label'?: string | undefined;
@@ -25,11 +48,11 @@ function SuggestedActionStackedOrFlowContainer(
       aria-live="polite"
       aria-orientation="vertical"
       className={cx(
-        classNames['suggested-actions'],
+        classNames['webchat-fluent__suggested-actions'],
         suggestedActionsStyleSet + '',
         {
-          [classNames['suggested-actions--flow']]: suggestedActionLayout === 'flow',
-          [classNames['suggested-actions--stacked']]: suggestedActionLayout !== 'flow'
+          'webchat-fluent__suggested-actions--flow': suggestedActionLayout === 'flow',
+          'webchat-fluent__suggested-actions--stacked': suggestedActionLayout !== 'flow'
         },
         props.className
       )}
@@ -88,7 +111,7 @@ function SuggestedActions() {
   return (
     <SuggestedActionStackedOrFlowContainer
       aria-label={localize('SUGGESTED_ACTIONS_LABEL_ALT')}
-      className={classNames['suggested-actions']}
+      className={classNames['webchat-fluent__suggested-actions']}
     >
       {children}
     </SuggestedActionStackedOrFlowContainer>