botframework-webchat-fluent-theme 4.18.1-main.20240831.f4058ce → 4.18.1-main.20240912.54a6a40

package/package.json

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

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

@@ -31,16 +31,6 @@
 :global(.webchat-fluent) .activity-decorator.variant-copilot {
   --webchat__bubble--border-radius: var(--webchat-borderRadiusXLarge);
 
-  &:not(:has(:global(.webchat__bubble--from-user))) {
-    --webchat__bubble--block-padding: var(--webchat-spacingVerticalS) var(--webchat-spacingVerticalXXS);
-    --webchat__bubble--border-radius: var(--webchat-borderRadiusSmall);
-    --webchat__bubble--inline-padding: 32px var(--webchat-spacingHorizontalNone);
-  }
-
-  &:not(:has(:global(.webchat__bubble--from-user))) :global(.webchat__stacked-layout__status) {
-    display: none;
-  }
-
   :global(.webchat__activity-status) {
     margin: 0 0 var(--webchat-spacingHorizontalXXS);
   }
@@ -49,14 +39,63 @@
     order: -1;
   }
 
-  /* TODO: remove when we get decorators in and can place header directly to the bubble */
-  &:not(:has(:global(.webchat__bubble--from-user))) :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content) {
-    padding-block: calc(var(--webchat-spacingVerticalS) + 20px) var(--webchat-spacingVerticalXXS);
+  &:has(:global(.webchat__bubble--from-user)) :global(.webchat__bubble) {
+    margin-block-end: var(--webchat-spacingVerticalM);
+  }
+}
+
+/* Decorator copilot variant which has bot message */  
+:global(.webchat-fluent) .activity-decorator.variant-copilot:not(:has(:global(.webchat__bubble--from-user))) {
+  --webchat__bubble--block-padding: 0;
+  --webchat__bubble--border-radius: var(--webchat-borderRadiusMedium);
+  --webchat__bubble--inline-padding: 0;
+  --webchat__bubble--max-width: 100%;
+  --webchat__bubble--min-height: 20px;
+
+  display: flex;
+  flex-flow: column nowrap;
+  gap: var(--webchat-spacingVerticalS);
+  margin-inline: var(--webchat-spacingHorizontalM);
+  padding: var(--webchat-spacingVerticalMNudge) var(--webchat-spacingHorizontalM) var(--webchat-spacingVerticalM);
+  position: relative;
+
+  :global(.webchat__stacked-layout) {
+    margin: 0;
+    position: static;
+  }
+
+  :global(.webchat__bubble) {
+    position: static;
+    width: var(--webchat__bubble--max-width);
+  }
+
+  :global(.webchat__bubble .webchat__bubble__content) {
+    overflow: visible;
+  }
+
+  :global(.webchat__text-content) {
+    margin-inline-start: 28px;
+  }
+
+  :global(.border-loader) {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: var(--webchat-spacingVerticalS);
+    padding-inline-end: var(--webchat-spacingHorizontalM);
+    width: 500px;
+  }
+
+  :global(.border-loader__track) {
+    border-radius: inherit;
+    box-sizing: border-box;
+    clip-path: border-box;
+    margin-inline-start: 28px;
+    order: -1;
+    width: auto;
   }
 
-  &:not(:has(:global(.webchat__bubble--from-user))) :global(.webchat__stacked-layout .webchat__bubble) {
-    margin-block-start: -24px;
-    margin-inline-start: -4px;
+  :global(.webchat__stacked-layout__status) {
+    display: none;
   }
 }
 
@@ -73,6 +112,7 @@
 
 /* Stacked layout which has message bubble */
 :global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__stacked-layout__content:has(.webchat__bubble)) {
+  max-width: 100%;
   overflow: visible;
 }
 
@@ -84,7 +124,7 @@
 
 /* Message bubble */
 :global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble) {
-  max-width: var(--webchat__bubble--max-width);
+  max-width: 100%;
   overflow: visible;
 }
 
@@ -93,8 +133,10 @@
   background-color: var(--webchat__bubble--background-color);
   border-radius: var(--webchat__bubble--border-radius);
   border-width: 0;
+  box-shadow: var(--webchat__bubble--box-shadow);
   box-sizing: border-box;
   color: var(--webchat-colorNeutralForeground1);
+  max-width: var(--webchat__bubble--max-width);
   min-height: var(--webchat__bubble--min-height);
 }
 
@@ -107,15 +149,26 @@
   padding-inline: var(--webchat__bubble--inline-padding);
 }
 
-/* Message bubble content pseudo */
-:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__bubble__content)::before {
-  border-radius: inherit;
-  box-shadow: var(--webchat__bubble--box-shadow);
-  content: '';
-  inset: 0;
-  isolation: isolate;
-  pointer-events: none;
-  position: absolute;
+/* Message bubble attachment content */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__fileContent__badge) {
+  cursor: default;
+  font-size: var(--webchat-fontSizeBase300);
+  line-height: var(--webchat-lineHeightBase300);
+
+  :global(.webchat__fileContent__fileName) {
+    color: var(--webchat-colorBrandForegroundLink);
+    font-family: inherit;
+  }
+  :global(.webchat__fileContent__size) {
+    color: var(--webchat-colorNeutralForeground2);
+    font-family: inherit;
+  }
+}
+
+/* Message bubble latency loader */
+:global(.webchat-fluent) .activity-decorator :global(.border-loader) {
+  max-width: 100%;
+  width: var(--webchat__bubble--max-width);
 }
 
 /* Markdown links and citation links */
@@ -201,6 +254,8 @@
 
 /* Citation summary chevron */
 :global(.webchat-fluent) .activity-decorator :global(.webchat__link-definitions__header) {
+  border-radius: var(--webchat-borderRadiusMedium);
+  
   :global(.webchat__link-definitions__header-text) {
     color: var(--webchat-colorNeutralForeground3);
   }
@@ -210,6 +265,11 @@
     font-size: var(--webchat__font-size--small);
     width: 1em;
   }
+
+  &:focus-visible {
+    outline-offset: 1px;
+    outline: var(--webchat-strokeWidthThin) solid var(--webchat-colorStrokeFocus2);
+  }
 }
 
 /* Citation link definitions */
@@ -300,6 +360,11 @@
     width: 1em;
   }
 
+  /* It seems Copilot does not show per-item sensitivity label, i.e. "General", etc. */
+  :global(.webchat__link-definitions__list-item-badge) {
+    display: none;
+  }
+
   :global(.webchat__link-definitions__open-in-new-window-icon) {
     display: none;
   }

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

@@ -1,15 +1,12 @@
 
 :global(.webchat-fluent) .copilot-message-header {
   align-items: center;
+  box-sizing: border-box;
   cursor: default;
   display: flex;
   flex-wrap: nowrap;
   gap: var(--webchat-spacingHorizontalS);
-  margin-inline-start: var(--webchat-spacingVerticalMNudge);
-  padding-block-start: var(--webchat-spacingVerticalXS);
-  /* TODO: remove when moved to the bubble */
-  position: relative;
-  z-index: 1;
+  max-width: var(--webchat__bubble--max-width);
 }
 
 :global(.webchat-fluent) .copilot-message-header__avatar {
@@ -23,7 +20,6 @@
   font-size: var(--webchat-fontSizeBase300);
   font-weight: var(--webchat-fontWeightSemibold);
   line-height: var(--webchat-lineHeightBase300);
-  max-width: 240px;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
@@ -35,8 +31,9 @@
   border-radius: var(--webchat-borderRadiusMedium);
   color: var(--webchat-colorNeutralForeground3);
   display: flex;
+  flex: none;
   font-size: var(--webchat-fontSizeBase100);
   height: 20px;
   line-height: var(--webchat-lineHeightBase100);
-  padding-inline: 4px;
+  padding-inline: var(--webchat-spacingHorizontalXS);
 }

package/src/components/activity/CopilotMessageHeader.tsx

@@ -1,31 +1,39 @@
-import { WebChatActivity, hooks } from 'botframework-webchat-component';
 import React, { memo, useMemo, type CSSProperties } from 'react';
+import { WebChatActivity, hooks } from 'botframework-webchat-component';
+
+import useActivityStyleOptions from './private/useActivityStyleOptions';
+import isAIGeneratedActivity from './private/isAIGeneratedActivity';
+import useActivityAuthor from './private/useActivityAuthor';
 import { useStyles } from '../../styles';
 import styles from './CopilotMessageHeader.module.css';
 
-const { useStyleOptions, useLocalizer } = hooks;
+const { useLocalizer } = hooks;
 
 function CopilotMessageHeader({ activity }: Readonly<{ activity?: WebChatActivity | undefined }>) {
-  const [{ botAvatarImage, botAvatarBackgroundColor }] = useStyleOptions();
+  const [{ botAvatarImage, botAvatarBackgroundColor }] = useActivityStyleOptions(activity);
   const classNames = useStyles(styles);
   const localize = useLocalizer();
-  // TODO: how we determine the activity has ai-generated content
-  const isAIGenerated = useMemo(() => !!activity, [activity]);
-  const botTitle = activity?.from?.name;
+  const isAIGenerated = isAIGeneratedActivity(activity);
 
   const avatarStyle = useMemo(
     () => ({ '--background-color': botAvatarBackgroundColor }) as CSSProperties,
     [botAvatarBackgroundColor]
   );
 
+  const author = useActivityAuthor(activity);
+  const avatarImage = author?.image || botAvatarImage;
+  const botTitle = author?.name || activity?.from?.name;
+
   return (
     <div className={classNames['copilot-message-header']}>
-      <img
-        alt={localize('AVATAR_ALT', botTitle)}
-        className={classNames['copilot-message-header__avatar']}
-        src={botAvatarImage}
-        style={avatarStyle}
-      />
+      {avatarImage && (
+        <img
+          alt={localize('AVATAR_ALT', botTitle)}
+          className={classNames['copilot-message-header__avatar']}
+          src={avatarImage}
+          style={avatarStyle}
+        />
+      )}
       <span className={classNames['copilot-message-header__title']} title={botTitle}>
         {botTitle}
       </span>

package/src/components/activity/index.ts

@@ -1 +1,2 @@
 export { default as ActivityDecorator } from './ActivityDecorator';
+export { default as useActivityAuthor } from './private/useActivityAuthor';

package/src/components/activity/private/isAIGeneratedActivity.ts

@@ -0,0 +1,5 @@
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+
+export default function isAIGeneratedActivity(activity: undefined | WebChatActivity) {
+  return !!(activity && getOrgSchemaMessage(activity?.entities || [])?.keywords?.includes('AIGeneratedContent'));
+}

package/src/components/activity/private/useActivityAuthor.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+
+export default function useActivityAuthor(activity?: WebChatActivity | undefined) {
+  return useMemo(() => {
+    const entity = getOrgSchemaMessage(activity?.entities || []);
+    return typeof entity?.author === 'string'
+      ? {
+          '@type': 'Person',
+          description: undefined,
+          image: undefined,
+          name: entity?.author
+        }
+      : entity?.author;
+  }, [activity]);
+}

package/src/components/activity/private/useActivityStyleOptions.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { hooks, type WebChatActivity } from 'botframework-webchat-component';
+import { type StrictStyleOptions } from 'botframework-webchat-api';
+
+const { useStyleOptions } = hooks;
+
+export default function useActivityStyleOptions(activity?: WebChatActivity | undefined) {
+  const [styleOptions] = useStyleOptions();
+  return useMemo<readonly [Readonly<StrictStyleOptions>]>(
+    () =>
+      Object.freeze([
+        {
+          ...styleOptions,
+          ...activity?.channelData?.webChat?.styleOptions
+        }
+      ]),
+    [activity?.channelData?.webChat?.styleOptions, styleOptions]
+  );
+}

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

@@ -123,6 +123,10 @@
   position: absolute;
 }
 
+:global(.webchat-fluent) .border-flair--complete {
+  animation-play-state: paused;
+}
+
 /* Firefox implementation */
 @supports (-moz-appearance: none) {
   @keyframes borderFlair-animation {

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

@@ -1,15 +1,28 @@
-import React, { Fragment, memo, type ReactNode } from 'react';
+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={classNames['border-flair']} />
+      <div
+        className={cx(classNames['border-flair'], isComplete && classNames['border-flair--complete'])}
+        onAnimationEnd={handleAnimationEnd}
+      />
     </Fragment>
   );
 }

package/src/components/linerActivity/private/LinerActivity.tsx

@@ -10,7 +10,7 @@ const LinerMessageActivity = ({ activity }: Props) => {
 
   return (
     <div className={classNames['liner-message-activity']} role="separator">
-      {activity.text}
+      <span className={classNames['liner-message-activity__text']}>{activity.text}</span>
     </div>
   );
 };

package/src/components/linerActivity/private/LinerMessageActivity.module.css

@@ -22,3 +22,7 @@
     min-width: 8px;
   }
 }
+
+:global(.webchat-fluent) .liner-message-activity__text {
+  text-align: center;
+}

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

@@ -9,30 +9,44 @@
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__body {
+  align-items: center;
+  display: flex;
+  flex-flow: column nowrap;
   font-family: var(--webchat-fontFamilyBase);
   font-size: var(--webchat-fontSizeBase300);
   font-weight: var(--webchat-fontWeightRegular);
+  gap: var(--webchat-spacingVerticalXS);
   grid-area: body;
   line-height: var(--webchat-lineHeightBase300);
   text-align: center;
 }
 
-:global(.webchat-fluent) .pre-chat-message-activity__body--placeholder {
+:global(.webchat-fluent) .pre-chat-message-activity__body--blueprint {
   opacity: 60%;
+
+  .pre-chat-message-activity__body-avatar {
+    filter: grayscale(1);
+  }
 }
 
-:global(.webchat-fluent) .pre-chat-message-activity__body h2 {
+:global(.webchat-fluent) .pre-chat-message-activity__body-avatar {
+  border-radius: var(--webchat-borderRadiusMedium);
+  height: 64px;
+  margin-block-end: var(--webchat-spacingVerticalM);
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body-title {
   color: var(--webchat-colorNeutralForeground1);
   font-family: inherit;
-  font-weight: var(--webchat-fontWeightSemibold);
   font-size: var(--webchat-fontSizeHero700);
+  font-weight: var(--webchat-fontWeightSemibold);
   line-height: var(--webchat-lineHeightHero700);
-  margin: var(--webchat-spacingVerticalL) 0 0;
+  margin: 0;
 }
 
-:global(.webchat-fluent) .pre-chat-message-activity__body img {
-  border-radius: 4px;
-  height: 64px;
+:global(.webchat-fluent) .pre-chat-message-activity__body-subtitle {
+  font-size: var(--webchat-fontSizeBase300);
+  line-height: var(--webchat-lineHeightBase300);
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__toolbar {

package/src/components/preChatActivity/PreChatMessageActivity.tsx

@@ -1,50 +1,56 @@
-/* eslint-disable react/no-danger */
 import { hooks } from 'botframework-webchat-component';
+import { type WebChatActivity } from 'botframework-webchat-core';
 import cx from 'classnames';
-import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
-import React, { Fragment, memo, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { useStyles } from '../../styles/index.js';
 import styles from './PreChatMessageActivity.module.css';
 import StarterPromptsToolbar from './StarterPromptsToolbar.js';
-import StarterPromptsCardAction from './StarterPromptsCardAction.js';
+import { useActivityAuthor } from '../activity/index.js';
 
 type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
 
-const { useRenderMarkdownAsHTML } = hooks;
+const { useLocalizer, useRenderMarkdownAsHTML, useUIState } = hooks;
 
 const PreChatMessageActivity = ({ activity }: Props) => {
+  const [uiState] = useUIState();
   const classNames = useStyles(styles);
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
+  const localize = useLocalizer();
+
+  const author = useActivityAuthor(activity);
 
   const html = useMemo(
-    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(activity.text || '') } : { __html: '' }),
-    [activity.text, renderMarkdownAsHTML]
+    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(author?.description || '') } : { __html: '' }),
+    [author?.description, renderMarkdownAsHTML]
   );
 
-  const entity = getOrgSchemaMessage(activity?.entities || []);
-  const isPlaceHolder = entity?.keywords?.includes('PreChatMessage') && entity.creativeWorkStatus === 'Placeholder';
-
   return (
     <div className={classNames['pre-chat-message-activity']}>
-      <div
-        className={cx(
-          classNames['pre-chat-message-activity__body'],
-          isPlaceHolder && classNames['pre-chat-message-activity__body--placeholder']
-        )}
-        dangerouslySetInnerHTML={html}
-      />
+      {author && (
+        <div
+          className={cx(
+            classNames['pre-chat-message-activity__body'],
+            uiState === 'blueprint' && classNames['pre-chat-message-activity__body--blueprint']
+          )}
+        >
+          {author.image && (
+            <img
+              alt={localize('AVATAR_ALT', author.name)}
+              className={classNames['pre-chat-message-activity__body-avatar']}
+              src={author.image}
+            />
+          )}
+          {author.name && <h2 className={classNames['pre-chat-message-activity__body-title']}>{author.name}</h2>}
+          {author.description && (
+            // eslint-disable-next-line react/no-danger
+            <div className={classNames['pre-chat-message-activity__body-subtitle']} dangerouslySetInnerHTML={html} />
+          )}
+        </div>
+      )}
       <StarterPromptsToolbar
         cardActions={activity.suggestedActions?.actions || []}
         className={classNames['pre-chat-message-activity__toolbar']}
-      >
-        {isPlaceHolder && (
-          <Fragment>
-            <StarterPromptsCardAction />
-            <StarterPromptsCardAction />
-            <StarterPromptsCardAction />
-          </Fragment>
-        )}
-      </StarterPromptsToolbar>
+      />
     </div>
   );
 };

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

@@ -7,13 +7,14 @@
   color: var(--webchat-colorNeutralForeground1);
   cursor: pointer;
   display: grid;
-  gap: 8px;
+  gap: var(--webchat-spacingVerticalS);
   grid-template-areas: 'title' 'subtitle';
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
   overflow: hidden;
   padding: 16px 20px;
   text-align: left;
+  transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
   user-select: none;
 
   &:has(.pre-chat-message-activity__card-action-image) {
@@ -21,19 +22,24 @@
     grid-template-columns: 20px 1fr;
   }
 
-  &:disabled {
+  &:empty {
+    row-gap: 14px;
+  }
+
+  &[aria-disabled='true'],
+  &:empty {
     cursor: default;
   }
 
-  &:disabled:not(:empty) {
+  &[aria-disabled='true']:not(:empty) {
     background-color: var(--webchat-colorNeutralBackgroundDisabled);
   }
 
-  &:hover:not(:disabled) {
+  &:hover:not([aria-disabled='true'], :empty) {
     background-color: var(--webchat-colorNeutralBackground1Hover);
   }
 
-  &:active:not(:disabled) {
+  &:active:not([aria-disabled='true'], :empty) {
     background-color: var(--webchat-colorNeutralBackground1Pressed);
   }
 
@@ -42,24 +48,57 @@
     outline-offset: -2px;
   }
 
+  &:empty::after,
   &:empty::before {
+    animation: blueprintAnimation 3s linear infinite;
+    background-attachment: fixed;
+    background-image: linear-gradient(
+      -90deg,
+      var(--webchat-colorNeutralStencil1) 0%,
+      var(--webchat-colorNeutralStencil2) 50%,
+      var(--webchat-colorNeutralStencil1) 100%
+    );
+    background-size: 300% 100%;
     content: '';
     display: block;
-    width: 66%;
-    height: 18px;
-    background-color: var(--webchat-colorNeutralBackground6);
-    border-radius: 18px;
-    opacity: 1;
+  }
+
+  /* animation-* needs to position after animation shorthand. */
+  @media (prefers-reduced-motion: reduce) {
+    &:empty::after,
+    &:empty::before {
+      animation-delay: -1s;
+      animation-play-state: paused;
+    }
+  }
+
+  &:dir(rtl) {
+    &:empty::after,
+    &:empty::before {
+      animation-direction: reverse;
+    }
   }
 
   &:empty::after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 16px;
-    background-color: var(--webchat-colorNeutralBackground6);
     border-radius: 16px;
-    opacity: 0.8;
+    height: 16px;
+    width: 100%;
+  }
+
+  &:empty::before {
+    border-radius: 18px;
+    height: 18px;
+    width: 66%;
+  }
+}
+
+@keyframes blueprintAnimation {
+  from {
+    background-position-x: 0%;
+  }
+
+  to {
+    background-position-x: -300%;
   }
 }