botframework-webchat-fluent-theme 4.18.1-main.20250114.cf2b542 → 4.18.1-main.20250129.b40802d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250114.cf2b542",
+  "version": "4.18.1-main.20250129.b40802d",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -68,15 +68,15 @@
     "@types/math-random": "^1.0.2",
     "@types/node": "^20.12.11",
     "@types/react": "^16.14.60",
-    "botframework-webchat-base": "4.18.1-main.20250114.cf2b542",
-    "botframework-webchat-styles": "4.18.1-main.20250114.cf2b542",
+    "botframework-webchat-base": "4.18.1-main.20250129.b40802d",
+    "botframework-webchat-styles": "4.18.1-main.20250129.b40802d",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250114.cf2b542",
-    "botframework-webchat-component": "4.18.1-main.20250114.cf2b542",
-    "botframework-webchat-core": "4.18.1-main.20250114.cf2b542",
+    "botframework-webchat-api": "4.18.1-main.20250129.b40802d",
+    "botframework-webchat-component": "4.18.1-main.20250129.b40802d",
+    "botframework-webchat-core": "4.18.1-main.20250129.b40802d",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

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

@@ -16,8 +16,7 @@
 }
 
 :global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {
-  height: 36px;
+  font-size: 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/DropZone.tsx

@@ -1,6 +1,14 @@
 import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
-import React, { memo, useCallback, useEffect, useRef, useState, type DragEventHandler } from 'react';
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type DragEvent as ReactDragEvent,
+  type DragEventHandler
+} from 'react';
 import { useRefFrom } from 'use-ref-from';
 
 import { AddDocumentIcon } from '../../icons';
@@ -10,8 +18,14 @@ import { useStyles } from '../../styles';
 
 const { useLocalizer } = hooks;
 
-const handleDragOver: DragEventHandler<HTMLDivElement> = event => {
-  // This is for preventing the browser from opening the dropped file in a new tab.
+const handleDragOver = (event: ReactDragEvent<unknown> | DragEvent) => {
+  // Prevent default dragover behavior to enable drop event triggering.
+  // Browsers require this to fire subsequent drop events - without it,
+  // they would handle the drop directly (e.g., open files in new tabs).
+  // This is needed regardless of whether we prevent default drop behavior,
+  // as it ensures our dropzone receives the drop event first. If we allow
+  // default drop handling (by not calling preventDefault there), the browser
+  // will still process the drop after our event handlers complete.
   event.preventDefault();
 };
 
@@ -47,6 +61,8 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
     let entranceCounter = 0;
 
     const handleDragEnter = (event: DragEvent) => {
+      document.addEventListener('dragover', handleDragOver);
+
       entranceCounter++;
 
       if (isFilesTransferEvent(event)) {
@@ -63,18 +79,30 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
     const handleDragLeave = () => --entranceCounter <= 0 && setDropZoneState(false);
 
     const handleDragEnd = () => {
+      document.removeEventListener('dragover', handleDragOver);
+
       entranceCounter = 0;
+
       setDropZoneState(false);
     };
 
-    document.addEventListener('dragenter', handleDragEnter, false);
-    document.addEventListener('dragleave', handleDragLeave, false);
-    document.addEventListener('dragend', handleDragEnd, false);
+    const handleDocumentDrop = (event: DragEvent) => {
+      if (!dropZoneRef.current?.contains(event.target as Node)) {
+        handleDragEnd();
+      }
+    };
+
+    document.addEventListener('dragend', handleDragEnd);
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('drop', handleDocumentDrop);
 
     return () => {
+      document.removeEventListener('dragend', handleDragEnd);
       document.removeEventListener('dragenter', handleDragEnter);
       document.removeEventListener('dragleave', handleDragLeave);
-      document.removeEventListener('dragend', handleDragEnd);
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('drop', handleDocumentDrop);
     };
   }, [setDropZoneState]);
 

package/src/components/preChatActivity/StarterPromptsCardAction.module.css

@@ -103,9 +103,9 @@
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__card-action-image {
+  color: var(--webchat-colorNeutralForeground4);
+  font-size: 20px;
   grid-area: image;
-  height: 20px;
-  width: 20px;
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__card-action-subtitle {

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

@@ -21,7 +21,7 @@
   justify-content: center;
   padding: 3px;
 
-  > svg {
+  > :global(.webchat__monochrome-image-masker) {
     font-size: 20px;
     pointer-events: none;
   }

package/src/components/theme/Theme.module.css

@@ -33,6 +33,9 @@
   --webchat-colorNeutralStencil1: var(--colorNeutralStencil1, #e6e6e6); /* #575757 for dark mode */
   --webchat-colorNeutralStencil2: var(--colorNeutralStencil2, #fafafa); /* #333333 for dark mode */
 
+  --webchat-colorNeutralShadowAmbient: var(--colorNeutralShadowAmbient, rgba(0, 0, 0, 0.12));
+  --webchat-colorNeutralShadowKey: var(--colorNeutralShadowKey, rgba(0, 0, 0, 0.14));
+
   --webchat-colorTransparentBackground: var(--colorTransparentBackground, rgba(0, 0, 0, 0.4));
 
   --webchat-colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled, #e0e0e0);
@@ -588,5 +591,35 @@
 
 /* Monochrome image masker */
 :global(.webchat-fluent).theme :global(.webchat__monochrome-image-masker) {
-  background-color: var(--webchat-colorNeutralForeground4);
+  background-color: currentColor;
+  height: 1em;
+  width: 1em;
+}
+
+/* Feedback button */
+:global(.webchat-fluent).theme :global(.webchat__thumb-button) {
+  color: var(--webchat-colorNeutralForeground1);
+
+  &:focus-visible {
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+  }
+
+  &[aria-disabled='true'] {
+    color: var(--webchat-colorNeutralForegroundDisabled);
+  }
+}
+
+/* Tooltip */
+:global(.webchat-fluent).theme :global(.webchat__tooltip) {
+  --webchat__tooltip-background: var(--tooltip-background, var(--webchat-colorNeutralBackground1));
+
+  color: var(--webchat-colorNeutralForeground1);
+  filter: drop-shadow(0 0 2px var(--webchat-colorNeutralShadowAmbient))
+    drop-shadow(0 4px 8px var(--webchat-colorNeutralShadowKey));
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: var(--webchat-fontSizeBase200);
+  font-weight: var(--webchat-fontWeightRegular);
+  line-height: var(--webchat-lineHeightBase200);
+  padding: var(--webchat-spacingVerticalSNudge) var(--webchat-spacingHorizontalM);
+  transition: opacity var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 }

package/src/icons/AddDocumentIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
-function AddDocumentIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={props.className}
-      height="1em"
-      viewBox="0 0 20 20"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M6 2a2 2 0 0 0-2 2v5.2c.32-.08.66-.15 1-.18V4a1 1 0 0 1 1-1h4v3.5c0 .83.67 1.5 1.5 1.5H15v8a1 1 0 0 1-1 1h-3.6c-.18.36-.4.7-.66 1H14a2 2 0 0 0 2-2V7.41c0-.4-.16-.78-.44-1.06l-3.91-3.91A1.5 1.5 0 0 0 10.59 2H6Zm8.8 5h-3.3a.5.5 0 0 1-.5-.5V3.2L14.8 7ZM10 14.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
+const { MonochromeImageMasker } = Components;
+
+const addDocumentIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6 2a2 2 0 0 0-2 2v5.2c.32-.08.66-.15 1-.18V4a1 1 0 0 1 1-1h4v3.5c0 .83.67 1.5 1.5 1.5H15v8a1 1 0 0 1-1 1h-3.6c-.18.36-.4.7-.66 1H14a2 2 0 0 0 2-2V7.41c0-.4-.16-.78-.44-1.06l-3.91-3.91A1.5 1.5 0 0 0 10.59 2H6Zm8.8 5h-3.3a.5.5 0 0 1-.5-.5V3.2L14.8 7ZM10 14.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5Z"/></svg>')}`;
+
+function AddDocumentIcon(props: Readonly<{ className?: string }>) {
+  return <MonochromeImageMasker className={cx('icon__add-document', props.className)} src={addDocumentIcon} />;
 }
 
 export default memo(AddDocumentIcon);

package/src/icons/AttachmentIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
-function AttachmentIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={props.className}
-      height="1em"
-      viewBox="0 0 20 20"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m4.83 10.48 5.65-5.65a3 3 0 0 1 4.25 4.24L8 15.8a1.5 1.5 0 0 1-2.12-2.12l6-6.01a.5.5 0 1 0-.7-.71l-6 6.01a2.5 2.5 0 0 0 3.53 3.54l6.71-6.72a4 4 0 1 0-5.65-5.66L4.12 9.78a.5.5 0 0 0 .7.7Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
+const { MonochromeImageMasker } = Components;
+
+const attachmentIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m4.83 10.48 5.65-5.65a3 3 0 0 1 4.25 4.24L8 15.8a1.5 1.5 0 0 1-2.12-2.12l6-6.01a.5.5 0 1 0-.7-.71l-6 6.01a2.5 2.5 0 0 0 3.53 3.54l6.71-6.72a4 4 0 1 0-5.65-5.66L4.12 9.78a.5.5 0 0 0 .7.7Z"/></svg>')}`;
+
+function AttachmentIcon(props: Readonly<{ className?: string }>) {
+  return <MonochromeImageMasker className={cx('icon__attachment', props.className)} src={attachmentIcon} />;
 }
 
 export default memo(AttachmentIcon);

package/src/icons/InfoSmallIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
+const { MonochromeImageMasker } = Components;
+
+const infoSmallIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>')}`;
+
 function InfoSmallIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={props.className}
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
+  return <MonochromeImageMasker className={cx('icon__info--small', props.className)} src={infoSmallIcon} />;
 }
 
 export default memo(InfoSmallIcon);

package/src/icons/SendIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
+const { MonochromeImageMasker } = Components;
+
+const sendIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.18 2.11a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .9l-15 7.5a.5.5 0 0 1-.7-.58L3.98 10 2.02 2.63a.5.5 0 0 1 .16-.52Zm2.7 8.39-1.61 6.06L16.38 10 3.27 3.44 4.88 9.5h6.62a.5.5 0 1 1 0 1H4.88Z"/></svg>')}`;
+
 function SendIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={props.className}
-      height="1em"
-      viewBox="0 0 20 20"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M2.18 2.11a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .9l-15 7.5a.5.5 0 0 1-.7-.58L3.98 10 2.02 2.63a.5.5 0 0 1 .16-.52Zm2.7 8.39-1.61 6.06L16.38 10 3.27 3.44 4.88 9.5h6.62a.5.5 0 1 1 0 1H4.88Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
+  return <MonochromeImageMasker className={cx('icon__send', props.className)} src={sendIcon} />;
 }
 
 export default memo(SendIcon);

package/src/icons/TelephoneKeypadIcon.tsx

@@ -1,21 +1,13 @@
+import { Components } from 'botframework-webchat-component';
+import cx from 'classnames';
 import React, { memo } from 'react';
 
+const { MonochromeImageMasker } = Components;
+
+const telephoneKeypadIcon = `data:image/svg+xml;utf8,${encodeURIComponent('<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm0 4a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM7.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 16a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM15.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"/></svg>')}`;
+
 function TelephoneKeypadIcon(props: Readonly<{ readonly className?: string }>) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={props.className}
-      height="1em"
-      viewBox="0 0 20 20"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M6 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm0 4a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM7.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 16a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM15.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
+  return <MonochromeImageMasker className={cx('icon__telephone-keypad', props.className)} src={telephoneKeypadIcon} />;
 }
 
 export default memo(TelephoneKeypadIcon);

package/src/private/FluentThemeProvider.tsx

@@ -1,4 +1,4 @@
-import type { ActivityMiddleware } from 'botframework-webchat-api';
+import { type ActivityMiddleware, type StyleOptions } from 'botframework-webchat-api';
 import { Components } from 'botframework-webchat-component';
 import { WebChatDecorator } from 'botframework-webchat-component/decorator';
 import React, { memo, type ReactNode } from 'react';
@@ -43,11 +43,20 @@ const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 
 const styles = createStyles();
 
+const fluentStyleOptions: StyleOptions = Object.freeze({
+  feedbackActionsPlacement: 'activity-actions'
+});
+
 const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => (
   <VariantComposer variant={variant}>
     <WebChatTheme>
       <TelephoneKeypadProvider>
-        <ThemeProvider activityMiddleware={activityMiddleware} sendBoxMiddleware={sendBoxMiddleware} styles={styles}>
+        <ThemeProvider
+          activityMiddleware={activityMiddleware}
+          sendBoxMiddleware={sendBoxMiddleware}
+          styleOptions={fluentStyleOptions}
+          styles={styles}
+        >
           <WebChatDecorator>{children}</WebChatDecorator>
         </ThemeProvider>
       </TelephoneKeypadProvider>