botframework-webchat-fluent-theme 4.18.1-main.20240807.dfe788c → 4.18.1-main.20240813.c50aac5

package/package.json

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

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

@@ -0,0 +1,305 @@
+
+:global(.webchat-fluent) .activity-decorator {
+  display: contents;
+
+  --webchat__bubble--inline-padding: var(--webchat-spacingHorizontalL);
+  --webchat__bubble--block-padding: var(--webchat-spacingVerticalM);
+  --webchat__bubble--min-height: var(--webchat-bubble-minHeight);
+  --webchat__bubble--max-width: var(--webchat-bubble-maxWidth);
+
+  --webchat-bubble-maxWidth: var(--bubble-maxWidth, 450px);
+  --webchat-bubble-minHeight: var(--bubble-minHeight, 36px);
+  --webchat-externalLink-mask: var(--externalLink-mask, var(--webchat__icon-url--external-link) center center / 10px 10px);
+  --webchat-externalLink-maxWidth: var(--externalLink-maxWidth, 204px);
+
+  /* Override for stacked layout message which has user message bubble props */
+  &:has(:global(.webchat__stacked-layout .webchat__bubble--from-user)) {
+    --webchat__bubble--background-color: var(--webchat-colorBrandBackground2);
+    --webchat__bubble--block-padding: var(--webchat-spacingVerticalS);
+  }
+}
+
+/* Decorator fluent variant */
+:global(.webchat-fluent) .activity-decorator.variant-fluent {
+  --webchat__bubble--background-color: var(--webchat-colorNeutralBackground1);
+  --webchat__bubble--border-radius: var(--webchat-borderRadiusXLarge);
+  --webchat__bubble--box-shadow: var(--webchat-shadow4);
+}
+
+/* Decorator copilot variant */
+: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);
+  }
+
+  :global(.webchat__stacked-layout__status) {
+    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);
+  }
+
+  &:not(:has(:global(.webchat__bubble--from-user))) :global(.webchat__stacked-layout .webchat__bubble) {
+    margin-block-start: -24px;
+    margin-inline-start: -4px;
+  }
+}
+
+/* Transcript activity non-empty */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__basic-transcript__activity-body:not(:empty)) {
+  padding-block-end: var(--webchat-spacingVerticalXL);
+}
+
+/* Stacked layout */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout) {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+/* Stacked layout which has message bubble */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__stacked-layout__content:has(.webchat__bubble)) {
+  overflow: visible;
+}
+
+/* Message status */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__stacked-layout__status) {
+  font-size: var(--webchat__font-size--small);
+  line-height: var(--webchat__line-height--small);
+}
+
+/* Message bubble */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble) {
+  max-width: var(--webchat__bubble--max-width);
+  overflow: visible;
+}
+
+/* Message bubble content */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__bubble__content) {
+  background-color: var(--webchat__bubble--background-color);
+  border-radius: var(--webchat__bubble--border-radius);
+  border-width: 0;
+  box-sizing: border-box;
+  color: var(--webchat-colorNeutralForeground1);
+  min-height: var(--webchat__bubble--min-height);
+}
+
+/* Message bubble text content */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble .webchat__text-content) {
+  font-size: var(--webchat__font-size--medium);
+  line-height: var(--webchat__line-height--medium);
+  min-height: auto;
+  padding-block: var(--webchat__bubble--block-padding);
+  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;
+}
+
+/* Markdown links and citation links */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) a[href]:not(:global(.webchat__render-markdown__pure-identifier)) {
+  color: var(--webchat-colorBrandForegroundLink);
+  text-decoration-color: transparent;
+
+  &:target {
+    color: var(--webchat-colorBrandForegroundLinkSelected);
+  }
+
+  &:hover {
+    color: var(--webchat-colorBrandForegroundLinkHover);
+    text-decoration: underline 1px currentColor;
+  }
+
+  &:active {
+    color: var(--webchat-colorBrandForegroundLinkPressed);
+  }
+
+  &:focus-visible {
+    outline: none;
+    text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);
+  }
+
+  :global(.webchat__render-markdown__external-link-icon) {
+    background: currentColor;
+    -webkit-mask: var(--webchat__icon-url--external-link) no-repeat;
+    mask: var(--webchat__icon-url--external-link) no-repeat;
+  }
+}
+
+/* Citation inline references */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) :global(.webchat__render-markdown__citation),
+:global(.webchat-fluent) .activity-decorator :global(.webchat__render-markdown) :global(.webchat__render-markdown__pure-identifier) {
+  align-items: center;
+  background-color: var(--webchat-colorNeutralBackground3);
+  border-radius: var(--webchat-borderRadiusMedium);
+  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
+  box-sizing: border-box;
+  color: var(--webchat-colorNeutralForeground2);
+  display: inline-flex;
+  font-size: var(--webchat-fontSizeBase100);
+  font-weight: var(--webchat-fontWeightSemibold);
+  height: 14px;
+  justify-content: center;
+  line-height: var(--webchat-lineHeightBase100);
+  margin-left: var(--webchat-spacingHorizontalXXS);
+  margin-right: var(--webchat-spacingHorizontalXXS);
+  min-width: 14px;
+  text-decoration: none;
+  transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  vertical-align: calc((var(--webchat-lineHeightBase100) - var(--webchat-fontSizeBase100)) / 2);
+
+  &:hover {
+    background-color: var(--webchat-colorBrandBackground2Hover);
+    border-color: var(--webchat-colorBrandStroke2Hover);
+    color: var(--webchat-colorBrandForeground2Hover);
+    cursor: pointer;
+  }
+
+  &:hover:active {
+    background-color: var(--webchat-colorBrandBackground2Pressed);
+    border-color: var(--webchat-colorBrandStroke2Pressed);
+    color: var(--webchat-colorBrandForeground2Pressed);
+  }
+
+  &::before, &::after {
+    all: unset;
+  }
+
+  &:has(:global(.webchat__render-markdown__external-link-icon)) {
+    padding-inline: 3px;
+  }
+
+  :global(.webchat__render-markdown__external-link-icon) {
+    background: currentColor;
+    height: 0.7em;
+    -webkit-mask: var(--webchat__icon-url--external-link) no-repeat;
+    mask: var(--webchat__icon-url--external-link) no-repeat;
+  }
+}
+
+/* Citation summary chevron */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__link-definitions__header) {
+  :global(.webchat__link-definitions__header-text) {
+    color: var(--webchat-colorNeutralForeground3);
+  }
+
+  :global(.webchat__link-definitions__header-chevron) {
+    fill: var(--webchat-colorNeutralForeground3);
+    font-size: var(--webchat__font-size--small);
+    width: 1em;
+  }
+}
+
+/* Citation link definitions */
+:global(.webchat-fluent) .activity-decorator :global(.webchat__link-definitions) {
+  --webchat__citation__external-link--mask: var(--webchat-externalLink-mask);
+  --webchat__citation__link--max-width: var(--webchat-externalLink-maxWidth);
+
+  :global(.webchat__link-definitions__list) {
+    color: var(--webchat__color--subtle);
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--webchat-spacingHorizontalS);
+  }
+
+  :global(.webchat__link-definitions__list-item) {
+    border-radius: var(--webchat-borderRadiusMedium);
+    max-width: var(--webchat__citation__link--max-width);
+  }
+
+  :global(.webchat__link-definitions__list-item-box) {
+    background-color: var(--webchat-colorNeutralBackground3);
+    border-radius: var(--webchat-borderRadiusMedium);
+    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
+    box-sizing: border-box;
+    color: currentColor;
+    display: inline-flex;
+    font-size: var(--webchat__font-size--small);
+    height: 24px;
+    padding-inline-end: var(--webchat-spacingHorizontalS);
+  }
+
+  :global(.webchat__link-definitions__list-item-body) {
+    font-family: inherit;
+    gap: var(--webchat-spacingHorizontalSNudge);
+    min-width: 0;
+    padding: 0;
+  }
+
+  :global(.webchat__link-definitions__badge) {
+    align-self: center;
+    background-color: transparent;
+    border-radius: 0;
+    border: none;
+    color: currentColor;
+    font-size: var(--webchat-fontSizeBase100);
+    font-weight: var(--webchat-fontWeightSemibold);
+    line-height: var(--webchat-lineHeightBase100);
+    margin: 0;
+    min-width: 20px;
+    padding: 0;
+    position: relative;
+    text-align: center;
+  }
+
+  :global(.webchat__link-definitions__badge)::after {
+    border-right: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
+    bottom: 0;
+    content: '';
+    display: block;
+    height: 16px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 0;
+  }
+
+  :global(.webchat__link-definitions__list-item-main-text) {
+    gap: var(--webchat-spacingHorizontalXS);
+  }
+
+  :global(.webchat__link-definitions__list-item-text) {
+    color: currentColor;
+    text-decoration: none;
+    text-overflow: ellipsis;
+  }
+
+  :global(.webchat__link-definitions__list-item-main-text):has(:global(.webchat__link-definitions__open-in-new-window-icon))::before {
+    align-self: center;
+    background: currentColor;
+    color: currentColor;
+    content: '';
+    flex: none;
+    font-size: var(--webchat-fontSizeBase400);
+    height: 1em;
+    -webkit-mask: var(--webchat__citation__external-link--mask) no-repeat;
+    mask: var(--webchat__citation__external-link--mask) no-repeat;
+    padding: 0;
+    width: 1em;
+  }
+
+  :global(.webchat__link-definitions__open-in-new-window-icon) {
+    display: none;
+  }
+}

package/src/components/activity/ActivityDecorator.tsx

@@ -0,0 +1,26 @@
+import { WebChatActivity } from 'botframework-webchat-component';
+import cx from 'classnames';
+import React, { ReactNode, memo } from 'react';
+import useVariants from '../../private/useVariants';
+import { useStyles, useVariantClassName } from '../../styles';
+import styles from './ActivityDecorator.module.css';
+import CopilotMessageHeader from './CopilotMessageHeader';
+
+function ActivityDecorator({ activity, children }: Readonly<{ activity: WebChatActivity; children: ReactNode }>) {
+  const classNames = useStyles(styles);
+  const variants = useVariants();
+  const variantClassName = useVariantClassName(styles);
+
+  const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role !== 'user' && !!children;
+
+  return (
+    <div className={cx(classNames['activity-decorator'], variantClassName)}>
+      {shouldRenderHeader && <CopilotMessageHeader activity={activity} />}
+      {children}
+    </div>
+  );
+}
+
+ActivityDecorator.displayName = 'ActivityDecorator';
+
+export default memo(ActivityDecorator);

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

@@ -0,0 +1,42 @@
+
+:global(.webchat-fluent) .copilot-message-header {
+  align-items: center;
+  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;
+}
+
+:global(.webchat-fluent) .copilot-message-header__avatar {
+  aspect-ratio: 1;
+  background-color: var(--background-color);
+  border-radius: var(--webchat-borderRadiusSmall);
+  width: 20px;
+}
+
+:global(.webchat-fluent) .copilot-message-header__title {
+  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;
+}
+
+:global(.webchat-fluent) .copilot-message-header__ai-generated-content {
+  align-items: center;
+  background-color: var(--webchat-colorNeutralBackground5);
+  border-radius: var(--webchat-borderRadiusMedium);
+  color: var(--webchat-colorNeutralForeground3);
+  display: flex;
+  font-size: var(--webchat-fontSizeBase100);
+  height: 20px;
+  line-height: var(--webchat-lineHeightBase100);
+  padding-inline: 4px;
+}

package/src/components/activity/CopilotMessageHeader.tsx

@@ -0,0 +1,41 @@
+import { WebChatActivity, hooks } from 'botframework-webchat-component';
+import React, { memo, useMemo, type CSSProperties } from 'react';
+import { useStyles } from '../../styles';
+import styles from './CopilotMessageHeader.module.css';
+
+const { useStyleOptions, useLocalizer } = hooks;
+
+function CopilotMessageHeader({ activity }: Readonly<{ activity?: WebChatActivity | undefined }>) {
+  const [{ botAvatarImage, botAvatarBackgroundColor }] = useStyleOptions();
+  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 avatarStyle = useMemo(
+    () => ({ '--background-color': botAvatarBackgroundColor }) as CSSProperties,
+    [botAvatarBackgroundColor]
+  );
+
+  return (
+    <div className={classNames['copilot-message-header']}>
+      <img
+        alt={localize('AVATAR_ALT', botTitle)}
+        className={classNames['copilot-message-header__avatar']}
+        src={botAvatarImage}
+        style={avatarStyle}
+      />
+      <span className={classNames['copilot-message-header__title']} title={botTitle}>
+        {botTitle}
+      </span>
+      {isAIGenerated && (
+        <span className={classNames['copilot-message-header__ai-generated-content']}>
+          {localize('ACTIVITY_CONTENT_CAUTION')}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default memo(CopilotMessageHeader);

package/src/components/activity/index.ts

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

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

@@ -1,9 +1,11 @@
 :global(.webchat-fluent) .pre-chat-message-activity {
+  box-sizing: border-box;
   display: grid;
+  gap: var(--webchat-spacingHorizontalXXXL);
   grid-template-areas: 'body' 'toolbar';
   grid-template-rows: auto auto;
-  gap: var(--webchat-spacingHorizontalXXXL);
-  padding: var(--webchat-spacingHorizontalXXXL);
+  padding: var(--webchat-spacingHorizontalXXXL) var(--webchat-spacingHorizontalM);
+  position: relative;
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__body {

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

@@ -22,7 +22,7 @@
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__card-action-box:hover {
-  background-color: var(--webchat-colorNeutralGrey94);
+  background-color: var(--webchat-colorNeutralBackground1Hover);
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__card-action-box:active {

package/src/components/preChatActivity/StarterPromptsCardAction.tsx

@@ -4,6 +4,7 @@ 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';
 
@@ -35,6 +36,7 @@ const StarterPromptAction = ({ className, messageBackAction }: Props) => {
   return (
     <button
       className={cx(className, classNames['pre-chat-message-activity__card-action-box'])}
+      data-testid={testIds.preChatMessageActivityStarterPromptsCardAction}
       onClick={handleClick}
       type="button"
     >

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

@@ -1,5 +1,7 @@
 :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-image: var(--mask-image);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
 }

package/src/components/sendBox/SendBox.module.css

@@ -1,7 +1,9 @@
 :global(.webchat-fluent) .sendbox {
+  --webchat__sendbox--padding: var(--webchat__padding--sendbox);
+
   color: var(--webchat-colorNeutralForeground1);
   font-family: var(--webchat-fontFamilyBase);
-  padding: 0 10px 10px;
+  padding: var(--webchat__sendbox--padding);
   text-rendering: optimizeLegibility;
 
   --webchat-sendbox-attachment-area-active: ;

package/src/components/sendBox/SendBox.tsx

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { SendIcon } from '../../icons';
+import { useStyles } from '../../styles';
 import testIds from '../../testIds';
 import { DropZone } from '../dropZone';
 import { SuggestedActions } from '../suggestedActions';
@@ -10,14 +11,13 @@ import { TelephoneKeypadSurrogate, useTelephoneKeypadShown, type DTMF } from '..
 import AddAttachmentButton from './AddAttachmentButton';
 import Attachments from './Attachments';
 import ErrorMessage from './ErrorMessage';
-import TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';
-import TextArea from './TextArea';
-import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 import useSubmitError from './private/useSubmitError';
+import useTranscriptNavigation from './private/useTranscriptNavigation';
 import useUniqueId from './private/useUniqueId';
 import styles from './SendBox.module.css';
-import { useStyles } from '../../styles';
-import useTranscriptNavigation from './private/useTranscriptNavigation';
+import TelephoneKeypadToolbarButton from './TelephoneKeypadToolbarButton';
+import TextArea from './TextArea';
+import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 
 const {
   useFocus,
@@ -25,18 +25,23 @@ const {
   useMakeThumbnail,
   useRegisterFocusSendBox,
   useSendBoxAttachments,
+  useSendBoxValue,
   useSendMessage,
   useStyleOptions
 } = hooks;
 
-function SendBox(
-  props: Readonly<{
-    className?: string | undefined;
-    placeholder?: string | undefined;
-  }>
-) {
+type Props = Readonly<{
+  className?: string | undefined;
+  isPrimary?: boolean | undefined;
+  placeholder?: string | undefined;
+}>;
+
+function SendBox(props: Props) {
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [message, setMessage] = useState('');
+  const [localMessage, setLocalMessage] = useState('');
+  const [globalMessage, setGlobalMessage] = useSendBoxValue();
+  const message = props.isPrimary ? globalMessage : localMessage;
+  const setMessage = props.isPrimary ? setGlobalMessage : setLocalMessage;
   const [attachments, setAttachments] = useSendBoxAttachments();
   const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions();
   const isMessageLengthExceeded = !!maxMessageLength && message.length > maxMessageLength;
@@ -213,4 +218,10 @@ function SendBox(
   );
 }
 
+const PrimarySendBox = memo((props: Exclude<Props, 'primary'>) => <SendBox {...props} isPrimary={true} />);
+
+PrimarySendBox.displayName = 'PrimarySendBox';
+
 export default memo(SendBox);
+
+export { PrimarySendBox };

package/src/components/sendBox/index.tsx

@@ -1 +1 @@
-export { default as SendBox } from './SendBox';
+export { PrimarySendBox, default as SendBox } from './SendBox';