botframework-webchat-component 4.18.1-main.20260511.8fcd02a → 4.18.1

package/src/Middleware/Activity/defaultActivityPolymiddleware.tsx

@@ -1,104 +0,0 @@
-/* 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

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

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

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

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

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

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

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

@@ -1,29 +0,0 @@
-: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;
-  }
-}