botframework-webchat-fluent-theme 4.18.1-main.20240924.f09c8c5 → 4.18.1-main.20240927.ea7a875

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

@@ -1,552 +0,0 @@
-@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;
-}
-
-:global(.webchat-fluent) .border-flair--complete {
-  animation-play-state: paused;
-}
-
-/* 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

@@ -1,30 +0,0 @@
-import React, { Fragment, memo, useCallback, useState, type ReactNode } from 'react';
-import cx from 'classnames';
-
-import { useStyles } from '../../../styles';
-import styles from './BorderFlair.module.css';
-
-function BorderFlair({ children }: Readonly<{ children?: ReactNode | undefined }>) {
-  const classNames = useStyles(styles);
-  const [isComplete, setComplete] = useState(false);
-
-  const handleAnimationEnd = useCallback(
-    event =>
-      (event.animationName === styles['borderAnimation-angle'] ||
-        event.animationName === styles['borderFlair-animation']) &&
-      setComplete(true),
-    []
-  );
-
-  return (
-    <Fragment>
-      {children}
-      <div
-        className={cx(classNames['border-flair'], isComplete && classNames['border-flair--complete'])}
-        onAnimationEnd={handleAnimationEnd}
-      />
-    </Fragment>
-  );
-}
-
-export default memo(BorderFlair);

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

@@ -1,49 +0,0 @@
-@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

@@ -1,19 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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/styles/injectStyle.ts

@@ -1,9 +0,0 @@
-export const injectedStyles = '@--INJECTED-STYLES-CONTENT--@';
-
-export default function injectStyles() {
-  if (globalThis.document) {
-    const style = document.createElement('style');
-    style.append(document.createTextNode(injectedStyles));
-    document.head.appendChild(style);
-  }
-}