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

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

@@ -0,0 +1,20 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo } from 'react';
+import { useStyles } from '../../../styles/index.js';
+import styles from './LinerMessageActivity.module.css';
+
+type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
+
+const LinerMessageActivity = ({ activity }: Props) => {
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['liner-message-activity']} role="separator">
+      {activity.text}
+    </div>
+  );
+};
+
+LinerMessageActivity.displayName = 'LinerMessageActivity';
+
+export default memo(LinerMessageActivity);

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

@@ -0,0 +1,24 @@
+
+:global(.webchat-fluent) .liner-message-activity {
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--webchat-colorNeutralForeground3);
+  display: flex;
+  flex-direction: row;
+  font-family: var(--webchat__font--primary);
+  font-size: var(--webchat-fontSizeBase200);
+  font-weight: var(--webchat-fontWeightRegular);
+  gap: var(--webchat-spacingHorizontalM);
+  line-height: var(--webchat-lineHeightBase200);
+  padding: var(--webchat-spacingVerticalSNudge) var(--webchat-spacingHorizontalM);
+  text-align: center;
+  width: 100%;
+
+  &::before, &::after {
+    border-top: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
+    content: "";
+    display: flex;
+    flex: auto;
+    min-width: 8px;
+  }
+}

package/src/components/linerActivity/private/isLinerMessageActivity.ts

@@ -0,0 +1,7 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+export default function isLinerMessageActivity(
+  activity: undefined | WebChatActivity
+): activity is WebChatActivity & { type: 'message'; from: { role: 'channel' } } {
+  return !!(activity && activity.from.role === 'channel' && activity.type === 'message' && 'text' in activity);
+}

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

@@ -17,6 +17,10 @@
   text-align: center;
 }
 
+:global(.webchat-fluent) .pre-chat-message-activity__body--placeholder {
+  opacity: 60%;
+}
+
 :global(.webchat-fluent) .pre-chat-message-activity__body h2 {
   color: var(--webchat-colorNeutralForeground1);
   font-family: inherit;

package/src/components/preChatActivity/PreChatMessageActivity.tsx

@@ -1,9 +1,12 @@
+/* eslint-disable react/no-danger */
 import { hooks } from 'botframework-webchat-component';
-import { type WebChatActivity } from 'botframework-webchat-core';
-import React, { memo, useMemo } from 'react';
+import cx from 'classnames';
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+import React, { Fragment, 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';
 
 type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
 
@@ -18,14 +21,30 @@ const PreChatMessageActivity = ({ activity }: Props) => {
     [activity.text, renderMarkdownAsHTML]
   );
 
+  const entity = getOrgSchemaMessage(activity?.entities || []);
+  const isPlaceHolder = entity?.keywords?.includes('PreChatMessage') && entity.creativeWorkStatus === 'Placeholder';
+
   return (
     <div className={classNames['pre-chat-message-activity']}>
-      {/* eslint-disable-next-line react/no-danger */}
-      <div className={classNames['pre-chat-message-activity__body']} dangerouslySetInnerHTML={html} />
+      <div
+        className={cx(
+          classNames['pre-chat-message-activity__body'],
+          isPlaceHolder && classNames['pre-chat-message-activity__body--placeholder']
+        )}
+        dangerouslySetInnerHTML={html}
+      />
       <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

@@ -22,14 +22,18 @@
   }
 
   &:disabled {
+    cursor: default;
+  }
+
+  &:disabled:not(:empty) {
     background-color: var(--webchat-colorNeutralBackgroundDisabled);
   }
 
-  &:hover {
+  &:hover:not(:disabled) {
     background-color: var(--webchat-colorNeutralBackground1Hover);
   }
 
-  &:active {
+  &:active:not(:disabled) {
     background-color: var(--webchat-colorNeutralBackground1Pressed);
   }
 
@@ -37,6 +41,26 @@
     outline: solid 2px var(--webchat-colorStrokeFocus2);
     outline-offset: -2px;
   }
+
+  &:empty::before {
+    content: '';
+    display: block;
+    width: 66%;
+    height: 18px;
+    background-color: var(--webchat-colorNeutralBackground6);
+    border-radius: 18px;
+    opacity: 1;
+  }
+
+  &:empty::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 16px;
+    background-color: var(--webchat-colorNeutralBackground6);
+    border-radius: 16px;
+    opacity: 0.8;
+  }
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__card-action-image {

package/src/components/preChatActivity/StarterPromptsCardAction.tsx

@@ -12,18 +12,18 @@ const { MonochromeImageMasker } = Components;
 
 type Props = Readonly<{
   className?: string | undefined;
-  messageBackAction: DirectLineCardAction & { type: 'messageBack' };
+  messageBackAction?: (DirectLineCardAction & { type: 'messageBack' }) | undefined;
 }>;
 
-const StarterPromptAction = ({ className, messageBackAction }: Props) => {
+const StarterPromptsCardAction = ({ className, messageBackAction }: Props) => {
   const [_, setSendBoxValue] = useSendBoxValue();
   const classNames = useStyles(styles);
   const focus = useFocus();
-  const inputTextRef = useRefFrom(messageBackAction.displayText || messageBackAction.text || '');
+  const inputTextRef = useRefFrom(messageBackAction?.displayText || messageBackAction?.text || '');
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
   const subtitleHTML = useMemo(
-    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(messageBackAction.text || '') } : { __html: '' }),
-    [messageBackAction.text, renderMarkdownAsHTML]
+    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(messageBackAction?.text || '') } : { __html: '' }),
+    [messageBackAction?.text, renderMarkdownAsHTML]
   );
 
   const handleClick = useCallback(() => {
@@ -37,28 +37,33 @@ const StarterPromptAction = ({ className, messageBackAction }: Props) => {
     <button
       className={cx(className, classNames['pre-chat-message-activity__card-action-box'])}
       data-testid={testIds.preChatMessageActivityStarterPromptsCardAction}
+      disabled={!messageBackAction}
       onClick={handleClick}
       type="button"
     >
-      <div className={classNames['pre-chat-message-activity__card-action-title']}>
-        {'title' in messageBackAction && messageBackAction.title}
-      </div>
-      {'image' in messageBackAction && messageBackAction.image && (
-        <MonochromeImageMasker
-          className={classNames['pre-chat-message-activity__card-action-image']}
-          src={messageBackAction.image}
-        />
-        // <img className="pre-chat-message-activity__card-action-image" src={messageBackAction.image} />
+      {messageBackAction && (
+        <React.Fragment>
+          <div className={classNames['pre-chat-message-activity__card-action-title']}>
+            {'title' in messageBackAction && messageBackAction.title}
+          </div>
+          {'image' in messageBackAction && messageBackAction.image && (
+            <MonochromeImageMasker
+              className={classNames['pre-chat-message-activity__card-action-image']}
+              src={messageBackAction.image}
+            />
+            // <img className="pre-chat-message-activity__card-action-image" src={messageBackAction.image} />
+          )}
+          <div
+            className={classNames['pre-chat-message-activity__card-action-subtitle']}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={subtitleHTML}
+          />
+        </React.Fragment>
       )}
-      <div
-        className={classNames['pre-chat-message-activity__card-action-subtitle']}
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={subtitleHTML}
-      />
     </button>
   );
 };
 
-StarterPromptAction.displayName = 'StarterPromptAction';
+StarterPromptsCardAction.displayName = 'StarterPromptsCardAction';
 
-export default memo(StarterPromptAction);
+export default memo(StarterPromptsCardAction);

package/src/components/preChatActivity/StarterPromptsToolbar.tsx

@@ -1,6 +1,6 @@
 import { type DirectLineCardAction } from 'botframework-webchat-core';
 import cx from 'classnames';
-import React, { memo } from 'react';
+import React, { memo, type ReactNode } from 'react';
 import { useStyles } from '../../styles/index.js';
 import StarterPromptsCardAction from './StarterPromptsCardAction.js';
 import styles from './StarterPromptsToolbar.module.css';
@@ -8,23 +8,22 @@ import styles from './StarterPromptsToolbar.module.css';
 type Props = Readonly<{
   cardActions: readonly DirectLineCardAction[];
   className?: string | undefined;
+  children?: ReactNode | undefined;
 }>;
 
-const StarterPrompts = ({ cardActions, className }: Props) => {
+const StarterPrompts = ({ cardActions, children, className }: Props) => {
   const classNames = useStyles(styles);
 
   return (
     // TODO: Accessibility-wise, this should be role="toolbar" with keyboard navigation.
     <div className={cx(className, classNames['pre-chat-message-activity__card-action-toolbar'])}>
       <div className={classNames['pre-chat-message-activity__card-action-toolbar-grid']}>
-        {cardActions
-          .filter<DirectLineCardAction & { type: 'messageBack' }>(
-            (card: DirectLineCardAction): card is DirectLineCardAction & { type: 'messageBack' } =>
-              card.type === 'messageBack'
-          )
-          .map(cardAction => (
-            <StarterPromptsCardAction key={cardAction.text} messageBackAction={cardAction} />
-          ))}
+        {children ||
+          cardActions
+            .filter<
+              DirectLineCardAction & { type: 'messageBack' }
+            >((card: DirectLineCardAction): card is DirectLineCardAction & { type: 'messageBack' } => card.type === 'messageBack')
+            .map(cardAction => <StarterPromptsCardAction key={cardAction.text} messageBackAction={cardAction} />)}
       </div>
     </div>
   );

package/src/components/sendBox/ErrorMessage.tsx

@@ -1,15 +1,26 @@
+import { useLiveRegion } from 'botframework-webchat-component/internal';
 import React, { memo } from 'react';
-import styles from './ErrorMessage.module.css';
 import { useStyles } from '../../styles';
+import styles from './ErrorMessage.module.css';
+
+type ErrorMessageProps = Readonly<{
+  error?: string | undefined;
+  id: string;
+}>;
 
-function ErrorMessage(props: Readonly<{ id: string; error?: string | undefined }>) {
+function ErrorMessage({ error, id }: ErrorMessageProps) {
   const classNames = useStyles(styles);
+
+  useLiveRegion(() => error && <div className="sendbox__error-message__status">{error}</div>, [error]);
+
   return (
     // eslint-disable-next-line react/forbid-dom-props
-    <span className={classNames['sendbox__error-message']} id={props.id} role="alert">
-      {props.error}
+    <span className={classNames['sendbox__error-message']} id={id}>
+      {error}
     </span>
   );
 }
 
+ErrorMessage.displayName = 'ErrorMessage';
+
 export default memo(ErrorMessage);

package/src/components/sendBox/SendBox.tsx

@@ -50,7 +50,7 @@ function SendBox(props: Props) {
   const sendMessage = useSendMessage();
   const makeThumbnail = useMakeThumbnail();
   const errorMessageId = useUniqueId('sendbox__error-message-id');
-  const [errorRef, errorMessage] = useSubmitError({ message, attachments });
+  const [errorMessage, commitLatestError] = useSubmitError({ message, attachments });
   const [telephoneKeypadShown] = useTelephoneKeypadShown();
   const setFocus = useFocus();
 
@@ -133,8 +133,9 @@ function SendBox(props: Props) {
   const handleFormSubmit: FormEventHandler<HTMLFormElement> = useCallback(
     event => {
       event.preventDefault();
+      const error = commitLatestError();
 
-      if (errorRef.current !== 'empty' && !isMessageLengthExceeded) {
+      if (error !== 'empty' && !isMessageLengthExceeded) {
         sendMessage(messageRef.current, undefined, { attachments: attachmentsRef.current });
 
         setMessage('');
@@ -143,7 +144,16 @@ function SendBox(props: Props) {
 
       setFocus('sendBox');
     },
-    [attachmentsRef, messageRef, sendMessage, setAttachments, setMessage, isMessageLengthExceeded, errorRef, setFocus]
+    [
+      commitLatestError,
+      isMessageLengthExceeded,
+      setFocus,
+      sendMessage,
+      setMessage,
+      messageRef,
+      attachmentsRef,
+      setAttachments
+    ]
   );
 
   const handleTelephoneKeypadButtonClick = useCallback(
@@ -157,8 +167,9 @@ function SendBox(props: Props) {
   const aria = {
     'aria-invalid': 'false' as const,
     ...(errorMessage && {
-      'aria-invalid': 'true' as const,
-      'aria-errormessage': errorMessageId
+      'aria-describedby': errorMessageId,
+      'aria-errormessage': errorMessageId,
+      'aria-invalid': 'true' as const
     })
   };
 

package/src/components/sendBox/private/useSubmitError.ts

@@ -1,5 +1,5 @@
 import { hooks } from 'botframework-webchat-component';
-import { RefObject, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useRefFrom } from 'use-ref-from';
 
 const { useConnectivityStatus, useLocalizer } = hooks;
@@ -16,6 +16,7 @@ const useSubmitError = ({
   message: string;
 }>) => {
   const [connectivityStatus] = useConnectivityStatus();
+  const [error, setError] = useState<SendError | undefined>();
   const localize = useLocalizer();
 
   const submitErrorRef = useRefFrom<'empty' | 'offline' | undefined>(
@@ -37,9 +38,21 @@ const useSubmitError = ({
     [localize]
   );
 
-  return useMemo<Readonly<[RefObject<SendError | undefined>, string | undefined]>>(
-    () => Object.freeze([submitErrorRef, submitErrorRef.current && errorMessageStringMap.get(submitErrorRef.current)]),
-    [errorMessageStringMap, submitErrorRef]
+  // TODO: we may want to improve this later e.g. to avoid re-render
+  // Reset visible error if there is a value
+  const hasValue = !!message?.trim();
+  if (error === 'empty' && hasValue) {
+    setError(undefined);
+  }
+
+  const commitLatestError = useCallback(() => {
+    setError(submitErrorRef.current);
+    return submitErrorRef.current;
+  }, [submitErrorRef]);
+
+  return useMemo<Readonly<[string | undefined, () => typeof submitErrorRef.current]>>(
+    () => Object.freeze([error && errorMessageStringMap.get(error), commitLatestError]),
+    [error, errorMessageStringMap, commitLatestError]
   );
 };
 

package/src/components/suggestedActions/SuggestedActions.tsx

@@ -24,7 +24,6 @@ function SuggestedActionStackedOrFlowContainer(
   return (
     <div
       aria-label={props['aria-label']}
-      aria-live="polite"
       aria-orientation="vertical"
       className={cx(
         classNames['suggested-actions'],

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

@@ -20,6 +20,7 @@
   --webchat-colorNeutralBackground3: var(--colorNeutralBackground3, #f5f5f5);
   --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);
   --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);
+  --webchat-colorNeutralBackground6: var(--colorNeutralBackground6, #e6e6e6);
 
   --webchat-colorTransparentBackground: var(--colorTransparentBackground, rgba(0, 0, 0, 0.4));
 
@@ -167,6 +168,10 @@
     var(--webchat-spacingVerticalNone)
     var(--webchat-spacingHorizontalMNudge)
     var(--webchat-spacingHorizontalMNudge);
+
+  --webchat__border-animation--color-1: #464FEB;
+  --webchat__border-animation--color-2: #47CFFA;
+  --webchat__border-animation--color-3: #B47CF8;
 }
 
 :global(.webchat-fluent).theme.variant-copilot :global(.webchat__css-custom-properties) {
@@ -267,6 +272,12 @@
   }
 }
 
+/* Transcript filer in copilot variant */
+:global(.webchat-fluent).theme.variant-copilot :global(.webchat__basic-transcript .webchat__basic-transcript__filler) {
+  /* No filler unless pre-chat activity, see next rule */
+  flex-grow: 0;
+}
+
 /* Transcript with a single pre-chat activity */
 :global(.webchat-fluent).theme :global(.webchat__basic-transcript:has(.webchat__basic-transcript__activity:only-child):has(.pre-chat-message-activity) .webchat__basic-transcript__filler) {
   /* limit grow to half of the size to center the activity */

package/src/external.umd/botframework-webchat-component/internal.ts

@@ -0,0 +1 @@
+module.exports = (globalThis as any).WebChat.internal;

package/src/private/FluentThemeProvider.tsx

@@ -8,6 +8,8 @@ import { PrimarySendBox } from '../components/sendBox';
 import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
 import { WebChatTheme } from '../components/theme';
 import VariantComposer, { VariantList } from './VariantComposer';
+import { FluentThemeDecorator } from '../components/decorator';
+import { isLinerMessageActivity, LinerMessageActivity } from '../components/linerActivity';
 
 const { ThemeProvider } = Components;
 
@@ -19,9 +21,12 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
     (...args) => {
       const activity = args[0]?.activity;
 
-      if (activity && isPreChatMessageActivity(activity)) {
+      if (isPreChatMessageActivity(activity)) {
         return () => <PreChatMessageActivity activity={activity} />;
       }
+      if (isLinerMessageActivity(activity)) {
+        return () => <LinerMessageActivity activity={activity} />;
+      }
 
       const renderActivity = next(...args);
 
@@ -38,7 +43,7 @@ const FluentThemeProvider = ({ children, variant = 'fluent' }: Props) => (
     <WebChatTheme>
       <TelephoneKeypadProvider>
         <ThemeProvider activityMiddleware={activityMiddleware} sendBoxMiddleware={sendBoxMiddleware}>
-          {children}
+          <FluentThemeDecorator>{children}</FluentThemeDecorator>
         </ThemeProvider>
       </TelephoneKeypadProvider>
     </WebChatTheme>

package/src/components/decorator/Decorator.module.css

@@ -1,3 +0,0 @@
-:global(.webchat-fluent-decorator).decorator {
-  display: contents;
-}

package/src/components/decorator/Decorator.tsx

@@ -1,31 +0,0 @@
-import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator';
-import cx from 'classnames';
-import React, { memo, type ReactNode } from 'react';
-
-import { useStyles } from '../../styles';
-import styles from './Decorator.module.css';
-import Flair from './Flair';
-import Loader from './Loader';
-
-export const rootClassName = 'webchat-fluent-decorator';
-
-const middleware: DecoratorMiddleware[] = [
-  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 }>) {
-  const classNames = useStyles(styles);
-
-  return (
-    <div className={cx(rootClassName, classNames['decorator'])}>
-      <DecoratorComposer middleware={middleware}>{props.children}</DecoratorComposer>
-    </div>
-  );
-}
-
-export default memo(WebChatDecorator);

package/src/components/decorator/Flair.module.css

@@ -1,4 +0,0 @@
-:global(.webchat-fluent-decorator) .flair {
-  border-radius: inherit;
-  border: solid 2px red;
-}

package/src/components/decorator/Flair.tsx

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

package/src/components/decorator/Loader.module.css

@@ -1,3 +0,0 @@
-:global(.webchat-fluent-decorator) .loader {
-  border-bottom: solid 4px blue;
-}

package/src/components/decorator/Loader.tsx

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