botframework-webchat-fluent-theme 4.18.1-main.20240813.c50aac5 → 4.18.1-main.20240823.c5330cc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20240813.c50aac5",
+  "version": "4.18.1-main.20240823.c5330cc",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -69,9 +69,9 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20240813.c50aac5",
-    "botframework-webchat-component": "4.18.1-main.20240813.c50aac5",
-    "botframework-webchat-core": "4.18.1-main.20240813.c50aac5",
+    "botframework-webchat-api": "4.18.1-main.20240823.c5330cc",
+    "botframework-webchat-component": "4.18.1-main.20240823.c5330cc",
+    "botframework-webchat-core": "4.18.1-main.20240823.c5330cc",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/activity/ActivityDecorator.module.css

@@ -1,6 +1,7 @@
 
 :global(.webchat-fluent) .activity-decorator {
   display: contents;
+  font-family: var(--webchat__font--primary);
 
   --webchat__bubble--inline-padding: var(--webchat-spacingHorizontalL);
   --webchat__bubble--block-padding: var(--webchat-spacingVerticalM);

package/src/components/decorator/Decorator.tsx

@@ -10,8 +10,12 @@ import Loader from './Loader';
 export const rootClassName = 'webchat-fluent-decorator';
 
 const middleware: DecoratorMiddleware[] = [
-  init => init === 'activity border' && (next => request => (request.state === 'completion' ? Flair : next(request))),
-  init => init === 'activity border' && (next => request => (request.state === 'informative' ? Loader : next(request)))
+  init =>
+    init === 'activity border' &&
+    (next => request => (request.livestreamingState === 'completing' ? Flair : next(request))),
+  init =>
+    init === 'activity border' &&
+    (next => request => (request.livestreamingState === 'preparing' ? Loader : next(request)))
 ];
 
 function WebChatDecorator(props: Readonly<{ readonly children?: ReactNode | undefined }>) {

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

@@ -8,30 +8,35 @@
   cursor: pointer;
   display: grid;
   gap: 8px;
-  grid-template-areas: 'image title' 'image subtitle';
-  grid-template-columns: 20px 1fr;
+  grid-template-areas: 'title' 'subtitle';
+  grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
   overflow: hidden;
   padding: 16px 20px;
   text-align: left;
   user-select: none;
-}
 
-:global(.webchat-fluent) .pre-chat-message-activity__card-action-box:disabled {
-  background-color: var(--webchat-colorNeutralBackground1Disabled);
-}
+  &:has(.pre-chat-message-activity__card-action-image) {
+    grid-template-areas: 'image title' 'image subtitle';
+    grid-template-columns: 20px 1fr;
+  }
 
-:global(.webchat-fluent) .pre-chat-message-activity__card-action-box:hover {
-  background-color: var(--webchat-colorNeutralBackground1Hover);
-}
+  &:disabled {
+    background-color: var(--webchat-colorNeutralBackgroundDisabled);
+  }
 
-:global(.webchat-fluent) .pre-chat-message-activity__card-action-box:active {
-  background-color: var(--webchat-colorNeutralBackground1Pressed);
-}
+  &:hover {
+    background-color: var(--webchat-colorNeutralBackground1Hover);
+  }
+
+  &:active {
+    background-color: var(--webchat-colorNeutralBackground1Pressed);
+  }
 
-:global(.webchat-fluent) .pre-chat-message-activity__card-action-box:focus-visible {
-  outline: solid 2px var(--webchat-colorStrokeFocus2);
-  outline-offset: -2px;
+  &:focus-visible {
+    outline: solid 2px var(--webchat-colorStrokeFocus2);
+    outline-offset: -2px;
+  }
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__card-action-image {

package/src/components/preChatActivity/StarterPromptsCardAction.tsx

@@ -1,14 +1,14 @@
-import { hooks } from 'botframework-webchat-component';
+import { Components, hooks } from 'botframework-webchat-component';
 import { type DirectLineCardAction } from 'botframework-webchat-core';
 import cx from 'classnames';
 import React, { memo, useCallback, useMemo } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { useStyles } from '../../styles/index.js';
 import testIds from '../../testIds.js';
-import MonochromeImageMasker from './private/MonochromeImageMasker.js';
 import styles from './StarterPromptsCardAction.module.css';
 
 const { useFocus, useRenderMarkdownAsHTML, useSendBoxValue } = hooks;
+const { MonochromeImageMasker } = Components;
 
 type Props = Readonly<{
   className?: string | undefined;

package/src/components/preChatActivity/isPreChatMessageActivity.ts

@@ -1,26 +1,7 @@
-import type { WebChatActivity } from 'botframework-webchat-core';
-import { array, literal, object, safeParse, string, type InferOutput } from 'valibot';
-
-const messageEntity = object({
-  '@context': literal('https://schema.org'),
-  '@id': literal(''), // Must be empty string.
-  '@type': literal('Message'),
-  keywords: array(string()),
-  type: literal('https://schema.org/Message')
-});
-
-type MessageEntity = InferOutput<typeof messageEntity>;
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
 
 export default function isPreChatMessageActivity(
   activity: undefined | WebChatActivity
 ): activity is WebChatActivity & { type: 'message' } {
-  if (activity?.type !== 'message') {
-    return false;
-  }
-
-  const message = activity.entities?.find(
-    (entity): entity is MessageEntity => safeParse(messageEntity, entity).success
-  );
-
-  return !!message?.keywords.includes('PreChatMessage');
+  return !!(activity && getOrgSchemaMessage(activity?.entities || [])?.keywords?.includes('PreChatMessage'));
 }

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

@@ -1,43 +1,45 @@
 :global(.webchat-fluent).theme {
   display: contents;
 
+  --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);
   --webchat-colorNeutralForeground1: var(--colorNeutralForeground1, #242424);
+  --webchat-colorNeutralForeground1Hover: var(--colorNeutralForeground1Hover, #242424);
+  --webchat-colorNeutralForeground1Pressed: var(--colorNeutralForeground1Pressed, #242424);
   --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);
-  --webchat-colorNeutralForeground3: var(--colorNeutralForeground3, #616161);
-  --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);
-  --webchat-colorNeutralForeground5: var(--colorNeutralForeground5, #7e7e7e);
-
   --webchat-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);
   --webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);
   --webchat-colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected, #067191);
+  --webchat-colorNeutralForeground3: var(--colorNeutralForeground3, #616161);
+  --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);
+  --webchat-colorNeutralForeground5: var(--colorNeutralForeground5, #7e7e7e);
 
-  --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);
-
+  --webchat-colorNeutralBackgroundDisabled: var(--colorNeutralBackgroundDisabled, #f0f0f0);
   --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);
+  --webchat-colorNeutralBackground1Hover: var(--colorNeutralBackground1Hover, #f5f5f5);
+  --webchat-colorNeutralBackground1Pressed: var(--colorNeutralBackground1Pressed, #e0e0e0);
   --webchat-colorNeutralBackground3: var(--colorNeutralBackground3, #f5f5f5);
   --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);
   --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);
 
   --webchat-colorTransparentBackground: var(--colorTransparentBackground, rgba(0, 0, 0, 0.4));
 
-  --webchat-colorNeutralBackground1Disabled: var(--colorNeutralBackground1Disabled, #f0f0f0);
-  --webchat-colorNeutralBackground1Hover: var(--colorNeutralBackground1Pressed, #f0f0f0);
-  --webchat-colorNeutralBackground1Pressed: var(--colorNeutralBackground1Pressed, #e0e0e0);
-
+  --webchat-colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled, #e0e0e0);
   --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);
-  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);
+  --webchat-colorNeutralStroke1Hover: var(--colorNeutralStroke1Hover, #c7c7c7);
+  --webchat-colorNeutralStroke1Pressed: var(--colorNeutralStroke1Pressed, #b3b3b3);
   --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);
+  --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);
 
   --webchat-colorStrokeFocus2: var(--colorStrokeFocus2, #000000);
 
   --webchat-colorBrandStroke2: var(--colorBrandStroke2, #9edcf7);
+  --webchat-colorBrandStroke2Pressed: var(--colorBrandStroke2Pressed, #01384d);
+
   --webchat-colorTransparentStroke: var(--colorTransparentStroke, transparent);
 
   --webchat-colorBrandForeground1: var(--colorBrandForeground1, #01678c);
-
   --webchat-colorBrandForeground2Hover: var(--colorBrandForeground2Hover, #015a7a);
   --webchat-colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed, #01384d);
-  --webchat-colorBrandStroke2Pressed: var(--colorBrandStroke2Pressed, #01384d);
 
   --webchat-colorBrandForegroundLink: var(--colorBrandForegroundLink, #01678c);
   --webchat-colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover, #015a7a);
@@ -76,6 +78,8 @@
   --webchat-spacingHorizontalXL: var(--spacingHorizontalXL, 20px);
   --webchat-spacingHorizontalXXL: var(--spacingHorizontalXXL, 24px);
   --webchat-spacingHorizontalXXXL: var(--spacingHorizontalXXXL, 32px);
+
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/spacings.ts */
   --webchat-spacingVerticalNone: var(--spacingVerticalNone, 0);
   --webchat-spacingVerticalXXS: var(--spacingVerticalXXS, 2px);
   --webchat-spacingVerticalXS: var(--spacingVerticalXS, 4px);
@@ -124,13 +128,17 @@
   --webchat-borderRadiusLarge: var(--borderRadiusLarge, 6px);
   --webchat-borderRadiusXLarge: var(--borderRadiusXLarge, 8px);
 
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/strokeWidths.ts */
   --webchat-strokeWidthThin: var(--strokeWidthThin, 1px);
   --webchat-strokeWidthThick: var(--strokeWidthThicker, 2px);
   --webchat-strokeWidthThicker: var(--strokeWidthThicker, 3px);
 
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/durations.ts */
   --webchat-durationUltraFast: var(--durationUltraFast, 0);
   --webchat-durationNormal: var(--durationNormal, 200ms);
+  --webchat-durationUltraSlow: var(--durationUltraSlow, 500ms);
 
+  /* https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/curves.ts */
   --webchat-curveAccelerateMid: var(--curveAccelerateMid, cubic-bezier(1,0,1,1));
   --webchat-curveDecelerateMid: var(--curveDecelerateMid, cubic-bezier(0,0,0,1));
 }
@@ -309,3 +317,58 @@
     fill: currentColor;
   }
 }
+
+/* Activity button */
+:global(.webchat-fluent).theme :global(.webchat__activity-button) {
+  background: var(--webchat-colorNeutralBackground1);
+  border-radius: var(--webchat-borderRadiusMedium);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
+  color: var(--webchat-colorNeutralForeground1);
+  gap: var(--webchat-spacingHorizontalXS);
+  padding: 5px var(--webchat-spacingHorizontalM);
+
+  &:hover {
+    background: var(--webchat-colorNeutralBackground1Hover);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Hover);
+    color: var(--webchat-colorNeutralForeground1Hover);
+  }
+
+  &:active {
+    background: var(--webchat-colorNeutralBackground1Pressed);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Pressed);
+    color: var(--webchat-colorNeutralForeground1Pressed);
+  }
+
+  &:focus-visible {
+    background: var(--webchat-colorNeutralBackground1);
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+    outline-offset: calc(var(--webchat-strokeWidthThick) * -1);
+  }
+
+  &:disabled {
+    background: var(--webchat-colorNeutralBackgroundDisabled);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStrokeDisabled);
+    color: var(--webchat-colorNeutralForegroundDisabled);
+  }
+
+  :global(.webchat__activity-button__icon) {
+    height: 20px;
+    width: 20px;
+  }
+}
+
+/* Copy button */
+:global(.webchat-fluent).theme :global(.webchat__activity-copy-button) {
+  :global(.webchat__activity-copy-button__copied-text) {
+    background-color: var(--webchat-colorNeutralBackground1);
+  }
+
+  &:global(.webchat__activity-copy-button--copied) :global(.webchat__activity-copy-button__copied-text) {
+    animation-duration: var(--webchat-durationUltraSlow);
+  }
+}
+
+/* Monochrome image masker */
+:global(.webchat-fluent).theme :global(.webchat__monochrome-image-masker) {
+  background-color: var(--webchat-colorNeutralForeground4);
+}

package/src/private/FluentThemeProvider.tsx

@@ -13,7 +13,7 @@ const { ThemeProvider } = Components;
 
 type Props = Readonly<{ children?: ReactNode | undefined; variant?: VariantList | undefined }>;
 
-const activityMiddleware: ActivityMiddleware[] = [
+const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
   () =>
     next =>
     (...args) => {
@@ -29,7 +29,7 @@ const activityMiddleware: ActivityMiddleware[] = [
         ? (...args) => <ActivityDecorator activity={activity}>{renderActivity(...args)}</ActivityDecorator>
         : renderActivity;
     }
-];
+]);
 
 const sendBoxMiddleware = [() => () => () => PrimarySendBox];
 

package/src/components/preChatActivity/private/MonochromeImageMasker.module.css

@@ -1,7 +0,0 @@
-:global(.webchat-fluent) .pre-chat-message-activity__monochrome-image-masker {
-  background-color: var(--webchat-colorNeutralForeground4);
-  -webkit-mask-image: var(--mask-image);
-  mask-image: var(--mask-image);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-}

package/src/components/preChatActivity/private/MonochromeImageMasker.tsx

@@ -1,19 +0,0 @@
-import cx from 'classnames';
-import React, { memo, useMemo, type CSSProperties } from 'react';
-import { useStyles } from '../../../styles/index.js';
-import styles from './MonochromeImageMasker.module.css';
-
-type Props = Readonly<{ className?: string | undefined; src: string }>;
-
-const MonochromeImageMasker = ({ className, src }: Props) => {
-  const classNames = useStyles(styles);
-  const style = useMemo(() => ({ '--mask-image': `url(${src})` }) as CSSProperties, [src]);
-
-  return (
-    <div className={cx(className, classNames['pre-chat-message-activity__monochrome-image-masker'])} style={style} />
-  );
-};
-
-MonochromeImageMasker.displayName = 'MonochromeImageMasker';
-
-export default memo(MonochromeImageMasker);