botframework-webchat-fluent-theme 4.18.1-main.20240823.c5330cc → 4.18.1-main.20240831.f4058ce

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20240823.c5330cc",
+  "version": "4.18.1-main.20240831.f4058ce",
   "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.20240823.c5330cc",
-    "botframework-webchat-component": "4.18.1-main.20240823.c5330cc",
-    "botframework-webchat-core": "4.18.1-main.20240823.c5330cc",
+    "botframework-webchat-api": "4.18.1-main.20240831.f4058ce",
+    "botframework-webchat-component": "4.18.1-main.20240831.f4058ce",
+    "botframework-webchat-core": "4.18.1-main.20240831.f4058ce",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/activity/ActivityDecorator.tsx

@@ -11,7 +11,7 @@ function ActivityDecorator({ activity, children }: Readonly<{ activity: WebChatA
   const variants = useVariants();
   const variantClassName = useVariantClassName(styles);
 
-  const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role !== 'user' && !!children;
+  const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role === 'bot' && !!children;
 
   return (
     <div className={cx(classNames['activity-decorator'], variantClassName)}>

package/src/components/decorator/index.ts

@@ -1 +1 @@
-export { default as WebChatDecorator } from './Decorator';
+export { default as FluentThemeDecorator } from './private/Decorator';

package/src/components/decorator/private/BorderFlair.module.css

@@ -0,0 +1,548 @@
+@property --webchat-decorator-borderFlair-animated-angle {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<number>';
+}
+
+@property --webchat-decorator-borderFlair-animated-color1 {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --webchat-decorator-borderFlair-animated-color2 {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --webchat-decorator-borderFlair-animated-color3 {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@keyframes borderAnimation-angle {
+  0% {
+    --webchat-decorator-borderFlair-animated-angle: 0.75;
+  }
+
+  100% {
+    --webchat-decorator-borderFlair-animated-angle: 2.75;
+  }
+}
+
+@keyframes borderAnimation-color1 {
+  0% {
+    --webchat-decorator-borderFlair-animated-color1: var(--webchat-decorator-borderFlair-color1Fade);
+  }
+
+  33% {
+    --webchat-decorator-borderFlair-animated-color1: var(--webchat-decorator-borderFlair-color1);
+  }
+
+  83% {
+    --webchat-decorator-borderFlair-animated-color1: var(--webchat-decorator-borderFlair-color1);
+  }
+
+  100% {
+    --webchat-decorator-borderFlair-animated-color1: var(--webchat-decorator-borderFlair-color1Fade);
+  }
+}
+
+@keyframes borderAnimation-color2 {
+  0% {
+    --webchat-decorator-borderFlair-animated-color2: var(--webchat-decorator-borderFlair-color2Fade);
+  }
+
+  33% {
+    --webchat-decorator-borderFlair-animated-color2: var(--webchat-decorator-borderFlair-color2);
+  }
+
+  83% {
+    --webchat-decorator-borderFlair-animated-color2: var(--webchat-decorator-borderFlair-color2);
+  }
+
+  100% {
+    --webchat-decorator-borderFlair-animated-color2: var(--webchat-decorator-borderFlair-color2Fade);
+  }
+}
+
+@keyframes borderAnimation-color3 {
+  0% {
+    --webchat-decorator-borderFlair-animated-color3: var(--webchat-decorator-borderFlair-color3Fade);
+  }
+
+  33% {
+    --webchat-decorator-borderFlair-animated-color3: var(--webchat-decorator-borderFlair-color3);
+  }
+
+  83% {
+    --webchat-decorator-borderFlair-animated-color3: var(--webchat-decorator-borderFlair-color3);
+  }
+
+  100% {
+    --webchat-decorator-borderFlair-animated-color3: var(--webchat-decorator-borderFlair-color3Fade);
+  }
+}
+
+:global(.webchat-fluent) .border-flair {
+  /* Configurable variables */
+  --webchat-decorator-borderFlair-color1: var(--webchat-borderFlair-color1, var(--webchat__border-animation--color-1));
+  --webchat-decorator-borderFlair-color2: var(--webchat-borderFlair-color2, var(--webchat__border-animation--color-2));
+  --webchat-decorator-borderFlair-color3: var(--webchat-borderFlair-color3, var(--webchat__border-animation--color-3));
+  --webchat-decorator-borderFlair-color1Fade: var(--webchat-borderFlair-color1Fade, transparent);
+  --webchat-decorator-borderFlair-color2Fade: var(--webchat-borderFlair-color2Fade, transparent);
+  --webchat-decorator-borderFlair-color3Fade: var(--webchat-borderFlair-color1Fade, transparent);
+  --webchat-decorator-borderFlair-borderSize: var(--webchat-borderFlair-borderSize, 2px);
+
+  /* Helper variables */
+  --webchat-decorator-borderFlair-backgroundSize: calc(100% + (2 * var(--webchat-decorator-borderFlair-borderSize)));
+  --webchat-decorator-borderFlair-borderGradient: linear-gradient(calc(var(--webchat-decorator-borderFlair-animated-angle) * 180deg + 45deg),
+      var(--webchat-decorator-borderFlair-animated-color1),
+      var(--webchat-decorator-borderFlair-animated-color2),
+      var(--webchat-decorator-borderFlair-animated-color3));
+  --webchat-decorator-borderFlair-borderMask: linear-gradient(hsl(0 0% 100% / 0), hsl(0 0% 100% / 0)) padding-box,
+    linear-gradient(hsl(0 0% 100%), hsl(0 0% 100%)) border-box;
+
+  animation:
+    borderAnimation-angle 2000ms linear 0ms forwards,
+    borderAnimation-color1 1200ms linear 0ms forwards,
+    borderAnimation-color2 1200ms linear 200ms forwards,
+    borderAnimation-color3 1200ms linear 400ms forwards;
+  background: var(--webchat-decorator-borderFlair-borderGradient) center center / var(--webchat-decorator-borderFlair-backgroundSize) var(--webchat-decorator-borderFlair-backgroundSize);
+  border: var(--webchat-decorator-borderFlair-borderSize) solid transparent;
+  border-radius: inherit;
+  inset: 0;
+  isolation: isolate;
+  -webkit-mask: var(--webchat-decorator-borderFlair-borderMask);
+  -webkit-mask-composite: clear;
+  mask: var(--webchat-decorator-borderFlair-borderMask);
+  mask-composite: intersect;
+  pointer-events: none;
+  position: absolute;
+}
+
+/* Firefox implementation */
+@supports (-moz-appearance: none) {
+  @keyframes borderFlair-animation {
+    0% {
+      --webchat-decorator-borderFlair-animated: 0;
+    }
+
+    1% {
+      --webchat-decorator-borderFlair-animated: 0.01;
+    }
+
+    2% {
+      --webchat-decorator-borderFlair-animated: 0.02;
+    }
+
+    3% {
+      --webchat-decorator-borderFlair-animated: 0.03;
+    }
+
+    4% {
+      --webchat-decorator-borderFlair-animated: 0.04;
+    }
+
+    5% {
+      --webchat-decorator-borderFlair-animated: 0.05;
+    }
+
+    6% {
+      --webchat-decorator-borderFlair-animated: 0.06;
+    }
+
+    7% {
+      --webchat-decorator-borderFlair-animated: 0.07;
+    }
+
+    8% {
+      --webchat-decorator-borderFlair-animated: 0.08;
+    }
+
+    9% {
+      --webchat-decorator-borderFlair-animated: 0.09;
+    }
+
+    10% {
+      --webchat-decorator-borderFlair-animated: 0.1;
+    }
+
+    11% {
+      --webchat-decorator-borderFlair-animated: 0.11;
+    }
+
+    12% {
+      --webchat-decorator-borderFlair-animated: 0.12;
+    }
+
+    13% {
+      --webchat-decorator-borderFlair-animated: 0.13;
+    }
+
+    14% {
+      --webchat-decorator-borderFlair-animated: 0.14;
+    }
+
+    15% {
+      --webchat-decorator-borderFlair-animated: 0.15;
+    }
+
+    16% {
+      --webchat-decorator-borderFlair-animated: 0.16;
+    }
+
+    17% {
+      --webchat-decorator-borderFlair-animated: 0.17;
+    }
+
+    18% {
+      --webchat-decorator-borderFlair-animated: 0.18;
+    }
+
+    19% {
+      --webchat-decorator-borderFlair-animated: 0.19;
+    }
+
+    20% {
+      --webchat-decorator-borderFlair-animated: 0.2;
+    }
+
+    21% {
+      --webchat-decorator-borderFlair-animated: 0.21;
+    }
+
+    22% {
+      --webchat-decorator-borderFlair-animated: 0.22;
+    }
+
+    23% {
+      --webchat-decorator-borderFlair-animated: 0.23;
+    }
+
+    24% {
+      --webchat-decorator-borderFlair-animated: 0.24;
+    }
+
+    25% {
+      --webchat-decorator-borderFlair-animated: 0.25;
+    }
+
+    26% {
+      --webchat-decorator-borderFlair-animated: 0.26;
+    }
+
+    27% {
+      --webchat-decorator-borderFlair-animated: 0.27;
+    }
+
+    28% {
+      --webchat-decorator-borderFlair-animated: 0.28;
+    }
+
+    29% {
+      --webchat-decorator-borderFlair-animated: 0.29;
+    }
+
+    30% {
+      --webchat-decorator-borderFlair-animated: 0.3;
+    }
+
+    31% {
+      --webchat-decorator-borderFlair-animated: 0.31;
+    }
+
+    32% {
+      --webchat-decorator-borderFlair-animated: 0.32;
+    }
+
+    33% {
+      --webchat-decorator-borderFlair-animated: 0.33;
+    }
+
+    34% {
+      --webchat-decorator-borderFlair-animated: 0.34;
+    }
+
+    35% {
+      --webchat-decorator-borderFlair-animated: 0.35;
+    }
+
+    36% {
+      --webchat-decorator-borderFlair-animated: 0.36;
+    }
+
+    37% {
+      --webchat-decorator-borderFlair-animated: 0.37;
+    }
+
+    38% {
+      --webchat-decorator-borderFlair-animated: 0.38;
+    }
+
+    39% {
+      --webchat-decorator-borderFlair-animated: 0.39;
+    }
+
+    40% {
+      --webchat-decorator-borderFlair-animated: 0.4;
+    }
+
+    41% {
+      --webchat-decorator-borderFlair-animated: 0.41;
+    }
+
+    42% {
+      --webchat-decorator-borderFlair-animated: 0.42;
+    }
+
+    43% {
+      --webchat-decorator-borderFlair-animated: 0.43;
+    }
+
+    44% {
+      --webchat-decorator-borderFlair-animated: 0.44;
+    }
+
+    45% {
+      --webchat-decorator-borderFlair-animated: 0.45;
+    }
+
+    46% {
+      --webchat-decorator-borderFlair-animated: 0.46;
+    }
+
+    47% {
+      --webchat-decorator-borderFlair-animated: 0.47;
+    }
+
+    48% {
+      --webchat-decorator-borderFlair-animated: 0.48;
+    }
+
+    49% {
+      --webchat-decorator-borderFlair-animated: 0.49;
+    }
+
+    50% {
+      --webchat-decorator-borderFlair-animated: 0.5;
+    }
+
+    51% {
+      --webchat-decorator-borderFlair-animated: 0.51;
+    }
+
+    52% {
+      --webchat-decorator-borderFlair-animated: 0.52;
+    }
+
+    53% {
+      --webchat-decorator-borderFlair-animated: 0.53;
+    }
+
+    54% {
+      --webchat-decorator-borderFlair-animated: 0.54;
+    }
+
+    55% {
+      --webchat-decorator-borderFlair-animated: 0.55;
+    }
+
+    56% {
+      --webchat-decorator-borderFlair-animated: 0.56;
+    }
+
+    57% {
+      --webchat-decorator-borderFlair-animated: 0.57;
+    }
+
+    58% {
+      --webchat-decorator-borderFlair-animated: 0.58;
+    }
+
+    59% {
+      --webchat-decorator-borderFlair-animated: 0.59;
+    }
+
+    60% {
+      --webchat-decorator-borderFlair-animated: 0.6;
+    }
+
+    61% {
+      --webchat-decorator-borderFlair-animated: 0.61;
+    }
+
+    62% {
+      --webchat-decorator-borderFlair-animated: 0.62;
+    }
+
+    63% {
+      --webchat-decorator-borderFlair-animated: 0.63;
+    }
+
+    64% {
+      --webchat-decorator-borderFlair-animated: 0.64;
+    }
+
+    65% {
+      --webchat-decorator-borderFlair-animated: 0.65;
+    }
+
+    66% {
+      --webchat-decorator-borderFlair-animated: 0.66;
+    }
+
+    67% {
+      --webchat-decorator-borderFlair-animated: 0.67;
+    }
+
+    68% {
+      --webchat-decorator-borderFlair-animated: 0.68;
+    }
+
+    69% {
+      --webchat-decorator-borderFlair-animated: 0.69;
+    }
+
+    70% {
+      --webchat-decorator-borderFlair-animated: 0.7;
+    }
+
+    71% {
+      --webchat-decorator-borderFlair-animated: 0.71;
+    }
+
+    72% {
+      --webchat-decorator-borderFlair-animated: 0.72;
+    }
+
+    73% {
+      --webchat-decorator-borderFlair-animated: 0.73;
+    }
+
+    74% {
+      --webchat-decorator-borderFlair-animated: 0.74;
+    }
+
+    75% {
+      --webchat-decorator-borderFlair-animated: 0.75;
+    }
+
+    76% {
+      --webchat-decorator-borderFlair-animated: 0.76;
+    }
+
+    77% {
+      --webchat-decorator-borderFlair-animated: 0.77;
+    }
+
+    78% {
+      --webchat-decorator-borderFlair-animated: 0.78;
+    }
+
+    79% {
+      --webchat-decorator-borderFlair-animated: 0.79;
+    }
+
+    80% {
+      --webchat-decorator-borderFlair-animated: 0.8;
+    }
+
+    81% {
+      --webchat-decorator-borderFlair-animated: 0.81;
+    }
+
+    82% {
+      --webchat-decorator-borderFlair-animated: 0.82;
+    }
+
+    83% {
+      --webchat-decorator-borderFlair-animated: 0.83;
+    }
+
+    84% {
+      --webchat-decorator-borderFlair-animated: 0.84;
+    }
+
+    85% {
+      --webchat-decorator-borderFlair-animated: 0.85;
+    }
+
+    86% {
+      --webchat-decorator-borderFlair-animated: 0.86;
+    }
+
+    87% {
+      --webchat-decorator-borderFlair-animated: 0.87;
+    }
+
+    88% {
+      --webchat-decorator-borderFlair-animated: 0.88;
+    }
+
+    89% {
+      --webchat-decorator-borderFlair-animated: 0.89;
+    }
+
+    90% {
+      --webchat-decorator-borderFlair-animated: 0.9;
+    }
+
+    91% {
+      --webchat-decorator-borderFlair-animated: 0.91;
+    }
+
+    92% {
+      --webchat-decorator-borderFlair-animated: 0.92;
+    }
+
+    93% {
+      --webchat-decorator-borderFlair-animated: 0.93;
+    }
+
+    94% {
+      --webchat-decorator-borderFlair-animated: 0.94;
+    }
+
+    95% {
+      --webchat-decorator-borderFlair-animated: 0.95;
+    }
+
+    96% {
+      --webchat-decorator-borderFlair-animated: 0.96;
+    }
+
+    97% {
+      --webchat-decorator-borderFlair-animated: 0.97;
+    }
+
+    98% {
+      --webchat-decorator-borderFlair-animated: 0.98;
+    }
+
+    99% {
+      --webchat-decorator-borderFlair-animated: 0.99;
+    }
+
+    100% {
+      --webchat-decorator-borderFlair-animated: 1;
+    }
+  }
+
+  :global(.webchat-fluent) .border-flair {
+    --webchat-decorator-borderFlair-animated-angle: calc(0.75 + 2 * var(--webchat-decorator-borderFlair-animated));
+    --webchat-decorator-borderFlair-animated-color1: color-mix(in srgb,
+        var(--webchat-decorator-borderFlair-color1) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.5)) * 100%),
+        var(--webchat-decorator-borderFlair-color1Fade));
+    --webchat-decorator-borderFlair-animated-color2: color-mix(in srgb,
+        var(--webchat-decorator-borderFlair-color2) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 1.75)) * 100%),
+        var(--webchat-decorator-borderFlair-color2Fade));
+    --webchat-decorator-borderFlair-animated-color3: color-mix(in srgb,
+        var(--webchat-decorator-borderFlair-color3) calc((1 - abs(var(--webchat-decorator-borderFlair-animated) * 3 - 2)) * 100%),
+        var(--webchat-decorator-borderFlair-color3Fade));
+
+    animation: borderFlair-animation 2000ms linear forwards;
+  }
+}

package/src/components/decorator/private/BorderFlair.tsx

@@ -0,0 +1,17 @@
+import React, { Fragment, memo, type ReactNode } from 'react';
+
+import { useStyles } from '../../../styles';
+import styles from './BorderFlair.module.css';
+
+function BorderFlair({ children }: Readonly<{ children?: ReactNode | undefined }>) {
+  const classNames = useStyles(styles);
+
+  return (
+    <Fragment>
+      {children}
+      <div className={classNames['border-flair']} />
+    </Fragment>
+  );
+}
+
+export default memo(BorderFlair);

package/src/components/decorator/private/BorderLoader.module.css

@@ -0,0 +1,49 @@
+@keyframes borderAnimation-position {
+  0% {
+    left: -33%;
+    width: 33%;
+  }
+
+  100% {
+    left: 100%;
+    width: 33%;
+  }
+}
+
+:global(.webchat-fluent) .border-loader {
+  border-radius: inherit;
+}
+
+:global(.webchat-fluent) .border-loader__track {
+  --webchat-decorator-borderLoader-borderSize: var(--webchat-borderLoader-borderSize, 4px);
+
+  background-color: var(--webchat-colorNeutralBackground6);
+  height: var(--webchat-decorator-borderLoader-borderSize);
+  position: relative;
+  width: 100%;
+}
+
+
+:global(.webchat-fluent) .border-loader__loader {
+  --webchat-decorator-borderLoader-color1: var(--webchat-borderLoader-color1,
+      var(--webchat__border-animation--color-1));
+  --webchat-decorator-borderLoader-color2: var(--webchat-borderLoader-color2,
+      var(--webchat__border-animation--color-2));
+  --webchat-decorator-borderLoader-color3: var(--webchat-borderLoader-color3,
+      var(--webchat__border-animation--color-3));
+  --webchat-decorator-borderLoader-color1Fade: var(--webchat-borderLoader-color1Fade, transparent);
+  --webchat-decorator-borderLoader-color3Fade: var(--webchat-borderLoader-color1Fade, transparent);
+
+  animation: borderAnimation-position 3s linear infinite;
+  background: linear-gradient(90deg,
+      var(--webchat-decorator-borderLoader-color1Fade) 0%,
+      var(--webchat-decorator-borderLoader-color1) 35%,
+      var(--webchat-decorator-borderLoader-color2) 70%,
+      var(--webchat-decorator-borderLoader-color3) 92%,
+      var(--webchat-decorator-borderLoader-color3Fade)) no-repeat;
+  height: var(--webchat-decorator-borderLoader-borderSize);
+  inset: 0;
+  isolation: isolate;
+  position: absolute;
+  width: 100%;
+}

package/src/components/decorator/private/BorderLoader.tsx

@@ -0,0 +1,19 @@
+import React, { memo, type ReactNode } from 'react';
+
+import { useStyles } from '../../../styles';
+import styles from './BorderLoader.module.css';
+
+function BorderLoader({ children }: Readonly<{ children?: ReactNode | undefined }>) {
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['border-loader']}>
+      {children}
+      <div className={classNames['border-loader__track']}>
+        <div className={classNames['border-loader__loader']} />
+      </div>
+    </div>
+  );
+}
+
+export default memo(BorderLoader);

package/src/components/decorator/private/Decorator.tsx

@@ -0,0 +1,20 @@
+import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator';
+import React, { memo, type ReactNode } from 'react';
+
+import BorderFlair from './BorderFlair';
+import BorderLoader from './BorderLoader';
+
+const middleware: DecoratorMiddleware[] = [
+  init =>
+    init === 'activity border' &&
+    (next => request => (request.livestreamingState === 'completing' ? BorderFlair : next(request))),
+  init =>
+    init === 'activity border' &&
+    (next => request => (request.livestreamingState === 'preparing' ? BorderLoader : next(request)))
+];
+
+function FluentThemeDecorator({ children }: Readonly<{ readonly children?: ReactNode | undefined }>) {
+  return <DecoratorComposer middleware={middleware}>{children}</DecoratorComposer>;
+}
+
+export default memo(FluentThemeDecorator);

package/src/components/linerActivity/index.ts

@@ -0,0 +1,2 @@
+export { default as isLinerMessageActivity } from './private/isLinerMessageActivity';
+export { default as LinerMessageActivity } from './private/LinerActivity';