botframework-webchat-fluent-theme 4.18.1-main.20250114.4df27b8 → 4.18.1-main.20250127.e44c342

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20250114.4df27b8",
+  "version": "4.18.1-main.20250127.e44c342",
   "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.4df27b8",
-    "botframework-webchat-styles": "4.18.1-main.20250114.4df27b8",
+    "botframework-webchat-base": "4.18.1-main.20250127.e44c342",
+    "botframework-webchat-styles": "4.18.1-main.20250127.e44c342",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20250114.4df27b8",
-    "botframework-webchat-component": "4.18.1-main.20250114.4df27b8",
-    "botframework-webchat-core": "4.18.1-main.20250114.4df27b8",
+    "botframework-webchat-api": "4.18.1-main.20250127.e44c342",
+    "botframework-webchat-component": "4.18.1-main.20250127.e44c342",
+    "botframework-webchat-core": "4.18.1-main.20250127.e44c342",
     "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

@@ -67,14 +67,22 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
       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('dragenter', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('dragend', handleDragEnd);
+    document.addEventListener('drop', handleDocumentDrop);
 
     return () => {
       document.removeEventListener('dragenter', handleDragEnter);
       document.removeEventListener('dragleave', handleDragLeave);
       document.removeEventListener('dragend', handleDragEnd);
+      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

@@ -591,7 +591,9 @@
 
 /* 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 */

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);