botframework-webchat-component 4.18.1 → 4.19.0

package/src/Middleware/Activity/defaultActivityPolymiddleware.tsx

@@ -0,0 +1,104 @@
+/* eslint complexity: ["error", 21] */
+import { ActivityMiddleware } from 'botframework-webchat-api';
+import { createActivityPolymiddlewareFromLegacy, type Polymiddleware } from 'botframework-webchat-api/middleware.js';
+import {
+  getActivityLivestreamingMetadata,
+  getOrgSchemaMessage,
+  isVoiceTranscriptActivity,
+  type WebChatActivity
+} from 'botframework-webchat-core';
+import { type OrgSchemaCreativeWork } from 'botframework-webchat-core/org-schema.js';
+import React from 'react';
+
+import CarouselLayout from '../../Activity/CarouselLayout';
+import StackedLayout from '../../Activity/StackedLayout';
+
+// TODO: [P4] Can we simplify these if-statement to something more readable?
+function shouldFilterActivity(activity: WebChatActivity, messageThing: OrgSchemaCreativeWork): boolean {
+  const { type } = activity;
+  if (
+    type === 'conversationUpdate' ||
+    (type === 'event' && !isVoiceTranscriptActivity(activity)) ||
+    type === 'invoke' ||
+    // Do not show content for contentless livestream interims, or finalized activity without content.
+    (type === 'typing' &&
+      (getActivityLivestreamingMetadata(activity)?.type === 'contentless' ||
+        !(activity['text'] || activity.attachments?.length > 0 || messageThing?.abstract.length))) ||
+    (type === 'message' &&
+      // Do not show postback
+      (activity.channelData?.postBack ||
+        // Do not show messageBack if displayText is undefined
+        (activity.channelData?.messageBack && !activity.channelData.messageBack.displayText) ||
+        // Do not show empty bubbles (no text and attachments)
+        !(activity.text || activity.attachments?.length || messageThing?.abstract.length)))
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * @deprecated Use `defaultActivityPolymiddleware` instead. The `createCoreActivityMiddleware` will be removed on or after 2028-03-16.
+ */
+function createCoreActivityMiddleware(): readonly ActivityMiddleware[] {
+  return Object.freeze([
+    () =>
+      next =>
+      (...args) => {
+        const [{ activity }] = args;
+        const isMessageOrTyping = activity.type === 'message' || activity.type === 'typing';
+
+        const messageThing = getOrgSchemaMessage(activity.entities);
+
+        // Filter out activities that should not visible.
+        if (shouldFilterActivity(activity, messageThing)) {
+          return false;
+        } else if (isMessageOrTyping || isVoiceTranscriptActivity(activity)) {
+          if (
+            isMessageOrTyping &&
+            (activity.attachments?.length || 0) > 1 &&
+            activity.attachmentLayout === 'carousel'
+          ) {
+            // The following line is not a React functional component, it's a render function called by useCreateActivityRenderer() hook.
+            // The function signature need to be compatible with older version of activity middleware, which was:
+            //
+            // renderActivity(
+            //   renderAttachment: ({ activity, attachment }) => React.Element
+            // ) => React.Element
+
+            return function renderCarouselLayout(renderAttachment, props) {
+              typeof props === 'undefined' &&
+                console.warn(
+                  'botframework-webchat: One or more arguments were missing after passing through the activity middleware. Please check your custom activity middleware to make sure it passes all arguments.'
+                );
+
+              return <CarouselLayout activity={activity} renderAttachment={renderAttachment} {...props} />;
+            };
+          }
+
+          // The following line is not a React functional component, it's a render function called by useCreateActivityRenderer() hook.
+          return function renderStackedLayout(renderAttachment, props) {
+            typeof props === 'undefined' &&
+              console.warn(
+                'botframework-webchat: One or more arguments were missing after passing through the activity middleware. Please check your custom activity middleware to make sure it passes all arguments.'
+              );
+
+            return <StackedLayout activity={activity} renderAttachment={renderAttachment} {...props} />;
+          };
+        }
+
+        return next(...args);
+      }
+  ]);
+}
+
+const defaultActivityPolymiddleware: Polymiddleware = createActivityPolymiddlewareFromLegacy(
+  ...createCoreActivityMiddleware()
+);
+
+export default defaultActivityPolymiddleware;
+export {
+  // Exporting `createCoreActivityMiddleware()` for backward compatibility.
+  createCoreActivityMiddleware
+};

package/src/Middleware/ActivityGrouping/createDefaultActivityGroupingDecoratorMiddleware.tsx

@@ -0,0 +1,21 @@
+import { createActivityGroupingMiddleware, type DecoratorMiddleware } from 'botframework-webchat-api/decorator.js';
+import PartGrouping from './ui/PartGrouping/PartGrouping';
+import RenderActivityGrouping from './ui/RenderActivityGrouping';
+import SenderGrouping from './ui/SenderGrouping/SenderGrouping';
+import StatusGrouping from './ui/StatusGrouping/StatusGrouping';
+
+export default function createDefaultActivityGroupingDecoratorMiddleware(): readonly DecoratorMiddleware[] {
+  return Object.freeze([
+    createActivityGroupingMiddleware(
+      () =>
+        ({ groupingName }) =>
+          groupingName === 'sender'
+            ? SenderGrouping
+            : groupingName === 'status'
+              ? StatusGrouping
+              : groupingName === 'part'
+                ? PartGrouping
+                : RenderActivityGrouping
+    )
+  ]);
+}

package/src/Middleware/ActivityGrouping/ui/LegacyActivityBridgeComposer.tsx

@@ -0,0 +1,91 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { hooks } from 'botframework-webchat-api';
+import { LegacyActivityContextProvider, type LegacyActivityContextType } from 'botframework-webchat-api/internal.js';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo } from 'react';
+import { custom, is, object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import isZeroOrPositive from '../../../Utils/isZeroOrPositive';
+import useFirstActivityInSenderGroup from '../../ActivityGrouping/ui/SenderGrouping/useFirstActivity';
+import useLastActivityInSenderGroup from '../../ActivityGrouping/ui/SenderGrouping/useLastActivity';
+import useFirstActivityInStatusGroup from '../../ActivityGrouping/ui/StatusGrouping/useFirstActivity';
+import useLastActivityInStatusGroup from '../../ActivityGrouping/ui/StatusGrouping/useLastActivity';
+
+const { useStyleOptions } = hooks;
+
+const webChatActivitySchema = custom<WebChatActivity>(value => is(object({}), value));
+
+const legacyActivityComposerPropsSchema = pipe(
+  object({
+    activity: webChatActivitySchema,
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type LegacyActivityBridgeComposerProps = InferInput<typeof legacyActivityComposerPropsSchema>;
+
+/**
+ * This component is for adding props to legacy activity middleware renderer for backward compatibility.
+ * These props cannot be computed in `api` packages because they requires knowledge about activity grouping.
+ *
+ * @param props.activity The activity to be rendered by the legacy activity middleware.
+ * @param props.children Actual rendering of the activity with the legacy activity middleware.
+ * @returns A component that would add legacy props to legacy activity middleware renderer.
+ */
+function LegacyActivityBridgeComposer(props: LegacyActivityBridgeComposerProps) {
+  const { activity, children } = validateProps(legacyActivityComposerPropsSchema, props);
+
+  const [{ bubbleFromUserNubOffset, bubbleNubOffset, groupTimestamp, showAvatarInGroup }] = useStyleOptions();
+  const [firstActivityInSenderGroup] = useFirstActivityInSenderGroup();
+  const [firstActivityInStatusGroup] = useFirstActivityInStatusGroup();
+  const [lastActivityInSenderGroup] = useLastActivityInSenderGroup();
+  const [lastActivityInStatusGroup] = useLastActivityInStatusGroup();
+
+  const hideAllTimestamps = groupTimestamp === false;
+  const isFirstInSenderGroup =
+    firstActivityInSenderGroup === activity || typeof firstActivityInSenderGroup === 'undefined';
+  const isFirstInStatusGroup =
+    firstActivityInStatusGroup === activity || typeof firstActivityInStatusGroup === 'undefined';
+  const isLastInSenderGroup =
+    lastActivityInSenderGroup === activity || typeof lastActivityInSenderGroup === 'undefined';
+  const isLastInStatusGroup =
+    lastActivityInStatusGroup === activity || typeof lastActivityInStatusGroup === 'undefined';
+  const isTopSideBotNub = isZeroOrPositive(bubbleNubOffset);
+  const isTopSideUserNub = isZeroOrPositive(bubbleFromUserNubOffset);
+
+  const hideTimestamp = hideAllTimestamps || !isLastInStatusGroup;
+  const isTopSideNub = activity.from?.role === 'user' ? isTopSideUserNub : isTopSideBotNub;
+
+  let showCallout: boolean;
+
+  // Depending on the "showAvatarInGroup" setting, the avatar will render in different positions.
+  if (showAvatarInGroup === 'sender') {
+    if (isTopSideNub) {
+      showCallout = isFirstInSenderGroup && isFirstInStatusGroup;
+    } else {
+      showCallout = isLastInSenderGroup && isLastInStatusGroup;
+    }
+  } else if (showAvatarInGroup === 'status') {
+    if (isTopSideNub) {
+      showCallout = isFirstInStatusGroup;
+    } else {
+      showCallout = isLastInStatusGroup;
+    }
+  } else {
+    showCallout = true;
+  }
+
+  const context = useMemo<LegacyActivityContextType>(
+    () =>
+      Object.freeze({
+        hideTimestamp,
+        showCallout
+      }),
+    [hideTimestamp, showCallout]
+  );
+
+  return <LegacyActivityContextProvider value={context}>{children}</LegacyActivityContextProvider>;
+}
+
+export default memo(LegacyActivityBridgeComposer);

package/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css

@@ -0,0 +1,76 @@
+:global(.webchat) .collapsible-grouping {
+  border-radius: var(--webchat__border-radius--bubble);
+  border: var(--webchat__border-width--bubble) var(--webchat__border-style--bubble) var(--webchat__border-color--bubble);
+  box-sizing: border-box;
+  display: block;
+  font-family: var(--webchat__font--primary);
+  font-style: normal;
+  font-weight: 400;
+  gap: 0;
+  max-width: var(--webchat__max-width--message-bubble);
+  min-width: var(--webchat__min-width--message-bubble);
+  position: relative;
+  transition: gap var(--webchat__transition-duration) var(--webchat__transition-easing);
+}
+
+:global(.webchat) .collapsible-grouping__header {
+  align-items: center;
+  display: flex;
+  padding: var(--webchat__padding--regular);
+  position: relative;
+}
+
+:global(.webchat) .collapsible-grouping__title {
+  font-size: 1.1em;
+  margin-inline-end: var(--webchat__padding--regular);
+}
+
+:global(.webchat) .collapsible-grouping__toggle {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+:global(.webchat) .collapsible-grouping__chevron {
+  order: -1;
+  transition: transform var(--webchat__transition-duration) var(--webchat__transition-easing);
+}
+
+:global(.webchat) .collapsible-grouping--open .collapsible-grouping__chevron {
+  transform: rotate(180deg);
+}
+
+:global(.webchat) .collapsible-grouping__content {
+  display: grid;
+  height: 0;
+  interpolate-size: allow-keywords;
+  min-width: 0;
+  opacity: 0;
+  overflow: clip;
+  transition:
+    all var(--webchat__transition-duration) var(--webchat__transition-easing),
+    visibility 0s linear var(--webchat__transition-duration);
+  visibility: hidden;
+}
+
+:global(.webchat) .collapsible-grouping__content--open {
+  height: auto;
+  margin: calc(var(--webchat__padding--regular) / -2);
+  opacity: 1;
+  padding: calc(var(--webchat__padding--regular) / 2);
+  transition:
+    all var(--webchat__transition-duration) var(--webchat__transition-easing),
+    border-color var(--webchat__transition-duration) calc(var(--webchat__transition-duration) / 2)
+    var(--webchat__transition-easing),
+    visibility 0s linear 0s;
+  visibility: unset;
+}
+
+:global(.webchat) .collapsible-grouping__list {
+  display: grid;
+  gap: 0;
+  margin-block-end: calc(var(--webchat--collapsible-grouping__list--gap, var(--webchat__padding--regular)) * -1);
+
+  > * {
+    margin-block-end: var(--webchat--collapsible-grouping__list--gap, var(--webchat__padding--regular));
+  }
+}

package/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.tsx

@@ -0,0 +1,97 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { hooks } from 'botframework-webchat-api';
+import cx from 'classnames';
+import random from 'math-random';
+import React, { memo, useCallback, useRef, useState } from 'react';
+import { boolean, custom, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import { useRefFrom } from 'use-ref-from';
+
+import ActivityButton from '../../../../Attachment/Text/private/ActivityButton';
+import { ComponentIcon } from '../../../../Icon';
+
+import styles from './CollapsibleGrouping.module.css';
+
+const { useLocalizer } = hooks;
+
+const collapsibleGroupingPropsSchema = pipe(
+  object({
+    children: reactNode(),
+    className: optional(string()),
+    header: optional(reactNode()),
+    isOpen: optional(boolean()),
+    onToggle: optional(custom<(isOpen: boolean) => void>(toggle => typeof toggle === 'function'))
+  }),
+  readonly()
+);
+
+type CollapsibleGroupingProps = InferInput<typeof collapsibleGroupingPropsSchema>;
+
+function uniqueId(count = Infinity) {
+  return (
+    random()
+      // eslint-disable-next-line no-magic-numbers
+      .toString(36)
+      // eslint-disable-next-line no-magic-numbers
+      .substring(2, 2 + count)
+  );
+}
+
+function CollapsibleGrouping(props: CollapsibleGroupingProps) {
+  const { children, className, header, isOpen = true, onToggle } = validateProps(collapsibleGroupingPropsSchema, props);
+  const [id] = useState(() => `webchat-collapsible-grouping-${uniqueId()}`);
+  const classNames = useStyles(styles);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const isOpenRef = useRefFrom(isOpen);
+  const onToggleRef = useRefFrom(onToggle);
+  const localize = useLocalizer();
+
+  const handleToggle = useCallback(() => {
+    const newIsOpen = !isOpenRef.current;
+    const button = buttonRef.current;
+    if (button) {
+      button.setAttribute('aria-expanded', newIsOpen.toString());
+      button.setAttribute('aria-pressed', newIsOpen.toString());
+    }
+    onToggleRef.current?.(newIsOpen);
+  }, [isOpenRef, onToggleRef]);
+
+  const text = isOpen ? localize('COLLAPSE_BUTTON_LESS') : localize('COLLAPSE_BUTTON_MORE');
+
+  return (
+    <div
+      className={cx(
+        classNames['collapsible-grouping'],
+        { [classNames['collapsible-grouping--open']]: isOpen },
+        className
+      )}
+    >
+      <div className={cx(classNames['collapsible-grouping__header'])}>
+        {header}
+        <ActivityButton
+          aria-controls={id}
+          aria-expanded={isOpen}
+          aria-pressed={isOpen}
+          className={cx(classNames['collapsible-grouping__toggle'])}
+          onClick={handleToggle}
+          ref={buttonRef}
+          text={text}
+        >
+          <ComponentIcon appearance="text" className={classNames['collapsible-grouping__chevron']} icon="chevron" />
+        </ActivityButton>
+      </div>
+      <div
+        className={cx(classNames['collapsible-grouping__content'], {
+          [classNames['collapsible-grouping__content--open']]: isOpen
+        })}
+        // eslint-disable-next-line react/forbid-dom-props
+        id={id}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default memo(CollapsibleGrouping);
+export { collapsibleGroupingPropsSchema, type CollapsibleGroupingProps };

package/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGroupingList.tsx

@@ -0,0 +1,30 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { any, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import styles from './CollapsibleGrouping.module.css';
+
+const collapsibleGroupingListPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string()),
+    tag: optional(any())
+  }),
+  readonly()
+);
+
+type CollapsibleGroupingListProps = InferInput<typeof collapsibleGroupingListPropsSchema>;
+
+const CollapsibleGroupingList = (props: CollapsibleGroupingListProps) => {
+  const { className, children, tag: Tag = 'div' } = validateProps(collapsibleGroupingListPropsSchema, props);
+  const classNames = useStyles(styles);
+
+  return <Tag className={cx(classNames['collapsible-grouping__list'], className)}>{children}</Tag>;
+};
+
+CollapsibleGroupingList.displayName = 'CollapsibleGroupingList';
+
+export default memo(CollapsibleGroupingList);
+export { collapsibleGroupingListPropsSchema, type CollapsibleGroupingListProps };

package/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGroupingTitle.tsx

@@ -0,0 +1,29 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import styles from './CollapsibleGrouping.module.css';
+
+const collapsibleGroupingTitlePropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string())
+  }),
+  readonly()
+);
+
+type CollapsibleGroupingTitleProps = InferInput<typeof collapsibleGroupingTitlePropsSchema>;
+
+const CollapsibleGroupingTitle = (props: CollapsibleGroupingTitleProps) => {
+  const { className, children } = validateProps(collapsibleGroupingTitlePropsSchema, props);
+  const classNames = useStyles(styles);
+
+  return <div className={cx(classNames['collapsible-grouping__title'], className)}>{children}</div>;
+};
+
+CollapsibleGroupingTitle.displayName = 'CollapsibleGroupingTitle';
+
+export default memo(CollapsibleGroupingTitle);
+export { collapsibleGroupingTitlePropsSchema, type CollapsibleGroupingTitleProps };

package/src/Middleware/ActivityGrouping/ui/PartGrouping/PartGrouping.tsx

@@ -0,0 +1,52 @@
+import { reactNode } from '@msinternal/botframework-webchat-react-valibot';
+import { getActivityLivestreamingMetadata, getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+import { IdentifierSchema } from 'botframework-webchat-core/graph.js';
+import React, { Fragment, memo, useMemo } from 'react';
+import { array, custom, is, minLength, object, optional, parse, pipe, readonly, type InferOutput } from 'valibot';
+
+import PartGroupingActivity from './private/PartGroupingActivity';
+
+const partGroupingPropsSchema = pipe(
+  object({
+    activities: pipe(
+      array(custom<Readonly<WebChatActivity>>(value => is(object({}), value))),
+      minLength(1, 'botframework-webchat: "activities" must have at least 1 activity'),
+      readonly()
+    ),
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type PartGroupingProps = InferOutput<typeof partGroupingPropsSchema>;
+
+function PartGrouping(props: PartGroupingProps) {
+  const { activities, children } = parse(partGroupingPropsSchema, props);
+
+  // eslint-disable-next-line no-magic-numbers
+  const lastActivity = activities.at(-1);
+
+  const lastMessage = useMemo(
+    () =>
+      getOrgSchemaMessage(
+        (
+          activities
+            .toReversed()
+            .find(activity => getActivityLivestreamingMetadata(activity)?.type === 'informative message') ||
+          lastActivity
+        )?.entities
+      ),
+    [activities, lastActivity]
+  );
+
+  const isGroup = activities.length > 1 || is(IdentifierSchema, lastMessage?.isPartOf[0]?.['@id']);
+
+  return isGroup ? (
+    <PartGroupingActivity activities={activities}>{children}</PartGroupingActivity>
+  ) : (
+    <Fragment>{children}</Fragment>
+  );
+}
+
+export default memo(PartGrouping);
+export { partGroupingPropsSchema, type PartGroupingProps };

package/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css

@@ -0,0 +1,29 @@
+:global(.webchat) .part-grouping-activity {
+  .part-grouping-activity__activities {
+    gap: 0;
+    padding-block: 0 var(--webchat__padding--regular);
+  }
+
+  .part-grouping-activity__message-status {
+    color: currentColor;
+    margin-block: 0;
+    margin-inline-end: var(--webchat__padding--regular);
+    opacity: 1;
+    place-self: center;
+    transition:
+      all var(--webchat__transition-duration) var(--webchat__transition-easing),
+      visibility 0s linear 0s;
+    visibility: unset;
+  }
+
+  .part-grouping-activity__collapsible.part-grouping-activity__collapsible--open
+    .part-grouping-activity__message-status {
+    margin-inline: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      all var(--webchat__transition-duration) var(--webchat__transition-easing),
+      visibility 0s linear var(--webchat__transition-duration);
+    width: 0;
+  }
+}