botframework-webchat-api 4.18.1 → 4.19.0

package/src/__tests__/addMetaTag.spec.js

@@ -0,0 +1,9 @@
+/** @jest-environment @happy-dom/jest-environment */
+/// <reference types="jest" />
+
+test('CommonJS should export matching buildInfo', () => {
+  const { buildInfo } = jest.requireActual('../../dist/botframework-webchat-api.js');
+
+  expect(buildInfo).toHaveProperty('buildTool', 'tsup');
+  expect(buildInfo).toHaveProperty('moduleFormat', 'commonjs');
+});

package/src/__tests__/addMetaTag.spec.mjs

@@ -0,0 +1,9 @@
+/** @jest-environment @happy-dom/jest-environment */
+/// <reference types="jest" />
+
+test('ESModules should export matching buildInfo', () => {
+  const { buildInfo } = jest.requireActual('../../dist/botframework-webchat-api.mjs');
+
+  expect(buildInfo).toHaveProperty('buildTool', 'tsup');
+  expect(buildInfo).toHaveProperty('moduleFormat', 'esmodules');
+});

package/src/boot/decorator.ts

@@ -0,0 +1,21 @@
+// Decorator general
+
+export { default as DecoratorComposer } from '../decorator/DecoratorComposer';
+export { type DecoratorMiddleware } from '../decorator/types';
+export { default as useDecoratorRequest, type InferDecoratorRequest } from '../decorator/useDecoratorRequest';
+
+// ActivityBorderDecorator
+
+export {
+  default as ActivityBorderDecorator,
+  createActivityBorderMiddleware,
+  ActivityBorderDecoratorRequest,
+  type ActivityBorderDecoratorProps
+} from '../decorator/ActivityBorder/ActivityBorderDecorator';
+
+// ActivityGroupingDecorator
+
+export {
+  default as ActivityGroupingDecorator,
+  createActivityGroupingMiddleware
+} from '../decorator/ActivityGrouping/ActivityGroupingDecorator';

package/src/boot/graph.ts

@@ -0,0 +1 @@
+export { useOrderedActivities } from '@msinternal/botframework-webchat-api-graph';

package/src/boot/hook.ts

@@ -0,0 +1,82 @@
+export {
+  useActiveTyping,
+  useActivities,
+  useActivityKeys,
+  useActivityKeysByRead,
+  useAvatarForBot,
+  useAvatarForUser,
+  useBuildRenderActivityCallback,
+  useByteFormatter,
+  useCapabilities,
+  useConnectivityStatus,
+  useCreateActivityRenderer,
+  useCreateActivityStatusRenderer,
+  useCreateAttachmentForScreenReaderRenderer,
+  useCreateAvatarRenderer,
+  useCreateScrollToEndButtonRenderer,
+  useDateFormatter,
+  useDebouncedNotifications,
+  useDictateInterims,
+  useDictateState,
+  useDirection,
+  useDisabled,
+  useDismissNotification,
+  useEmitTypingIndicator,
+  useGetActivitiesByKey,
+  useGetActivityByKey,
+  useGetHasAcknowledgedByActivityKey,
+  useGetKeyByActivity,
+  useGetKeyByActivityId,
+  useGetSendTimeoutForActivity,
+  useGrammars,
+  useGroupActivities,
+  useGroupActivitiesByName,
+  useGroupTimestamp,
+  useLanguage,
+  useLastAcknowledgedActivityKey,
+  useLastReadActivityKey,
+  useLocalizer,
+  useMarkActivityAsSpoken,
+  useMarkActivityKeyAsRead,
+  useMarkAllAsAcknowledged,
+  useNotifications,
+  usePerformCardAction,
+  usePonyfill,
+  usePostActivity,
+  useReferenceGrammarID,
+  useRelativeTimeFormatter,
+  useRenderAttachment,
+  useRenderToast,
+  useRenderTypingIndicator,
+  useSendBoxAttachments,
+  useSendBoxValue,
+  useSendEvent,
+  useSendFiles,
+  useSendMessage,
+  useSendMessageBack,
+  useSendPostBack,
+  useSendStatusByActivityKey,
+  useSendTimeoutForActivity,
+  useSendTypingIndicator,
+  useSetNotification,
+  useShouldSpeakIncomingActivity,
+  useStartDictate,
+  useStartVoice,
+  useStopDictate,
+  useStopVoice,
+  useStyleOptions,
+  useSubmitSendBox,
+  useSuggestedActions,
+  useSuggestedActionsHooks,
+  useTimeoutForSend,
+  useTrackDimension,
+  useTrackEvent,
+  useTrackException,
+  useTrackTiming,
+  useUIState,
+  useUserID,
+  useUsername,
+  useVoiceRecordingMuted,
+  useVoiceSelector,
+  useVoiceState
+} from '../hooks/index';

package/src/boot/internal.ts

@@ -0,0 +1,7 @@
+export { __INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol } from '@msinternal/botframework-webchat-api-middleware';
+export { default as LowPriorityDecoratorComposer } from '../decorator/internal/LowPriorityDecoratorComposer';
+export { default as usePostVoiceActivity } from '../hooks/internal/usePostVoiceActivity';
+export { default as useSetDictateState } from '../hooks/internal/useSetDictateState';
+export { default as useShouldShowMicrophoneButton } from '../hooks/internal/useShouldShowMicrophoneButton';
+export { LegacyActivityContextProvider, type LegacyActivityContextType } from '../legacy/LegacyActivityBridgeContext';
+export { default as StyleOptionsComposer } from '../providers/StyleOptions/StyleOptionsComposer';

package/src/boot/middleware.ts

@@ -0,0 +1,60 @@
+export { PolymiddlewareComposer, type Polymiddleware } from '@msinternal/botframework-webchat-api-middleware';
+
+// Separated import sections for easier templating.
+
+export {
+  activityComponent,
+  ActivityPolymiddlewareProxy,
+  createActivityPolymiddleware,
+  useBuildRenderActivityCallback,
+  type ActivityPolymiddleware,
+  type ActivityPolymiddlewareHandler,
+  type ActivityPolymiddlewareHandlerResult,
+  type ActivityPolymiddlewareProps,
+  type ActivityPolymiddlewareProxyProps,
+  type ActivityPolymiddlewareRenderer,
+  type ActivityPolymiddlewareRequest
+} from '@msinternal/botframework-webchat-api-middleware';
+
+export {
+  avatarComponent,
+  createAvatarPolymiddleware,
+  type AvatarPolymiddleware,
+  type AvatarPolymiddlewareHandler,
+  type AvatarPolymiddlewareHandlerResult,
+  type AvatarPolymiddlewareProps,
+  type AvatarPolymiddlewareRenderer,
+  type AvatarPolymiddlewareRequest
+} from '@msinternal/botframework-webchat-api-middleware';
+
+export {
+  default as AvatarPolymiddlewareProxy,
+  AvatarPolymiddlewareProxyProps
+} from '../middleware/AvatarPolymiddlewareProxy';
+
+export { default as useBuildRenderAvatarCallback } from '../middleware/useBuildRenderAvatarCallback';
+
+export {
+  createErrorBoxPolymiddleware,
+  errorBoxComponent,
+  ErrorBoxPolymiddlewareProxy,
+  useBuildRenderErrorBoxCallback,
+  // For type portability only.
+  type __INTERNAL_DO_NOT_USE__avatarPolymiddlewareRequestStyleOptionsSymbol,
+  type ErrorBoxPolymiddleware,
+  type ErrorBoxPolymiddlewareHandler,
+  type ErrorBoxPolymiddlewareHandlerResult,
+  type ErrorBoxPolymiddlewareProps,
+  type ErrorBoxPolymiddlewareProxyProps,
+  type ErrorBoxPolymiddlewareRenderer,
+  type ErrorBoxPolymiddlewareRequest
+} from '@msinternal/botframework-webchat-api-middleware';
+
+export {
+  type LegacyActivityMiddleware,
+  type LegacyAvatarMiddleware
+} from '@msinternal/botframework-webchat-api-middleware/legacy';
+
+export { default as createActivityPolymiddlewareFromLegacy } from '../legacy/createActivityPolymiddlewareFromLegacy';
+
+export { default as createAvatarPolymiddlewareFromLegacy } from '../legacy/createAvatarPolymiddlewareFromLegacy';

package/src/buildInfo.ts

@@ -0,0 +1,9 @@
+import { createBuildInfo } from '@msinternal/botframework-webchat-base/utils';
+
+const buildInfo = createBuildInfo('botframework-webchat:api');
+
+buildInfo.set('buildTool', globalThis.WEB_CHAT_BUILD_INFO_BUILD_TOOL);
+buildInfo.set('moduleFormat', globalThis.WEB_CHAT_BUILD_INFO_MODULE_FORMAT);
+buildInfo.set('version', globalThis.WEB_CHAT_BUILD_INFO_VERSION);
+
+export default buildInfo;

package/src/decorator/ActivityBorder/ActivityBorderDecorator.tsx

@@ -0,0 +1,57 @@
+import {
+  getActivityLivestreamingMetadata,
+  getVoiceActivityRole,
+  isVoiceActivity,
+  type WebChatActivity
+} from 'botframework-webchat-core';
+import React, { memo, useMemo, type ReactNode } from 'react';
+
+import {
+  ActivityBorderDecoratorMiddlewareProxy,
+  createActivityBorderMiddleware,
+  type ActivityBorderDecoratorMiddlewareRequest
+} from './private/ActivityBorderDecoratorMiddleware';
+import ActivityBorderDecoratorRequestContext from './private/ActivityBorderDecoratorRequestContext';
+
+const supportedActivityRoles: ActivityBorderDecoratorMiddlewareRequest['from'][] = [
+  'bot',
+  'channel',
+  'user',
+  undefined
+];
+
+type ActivityBorderDecoratorProps = Readonly<{
+  activity?: WebChatActivity | undefined;
+  children?: ReactNode | undefined;
+}>;
+
+function ActivityBorderDecorator({ activity, children }: ActivityBorderDecoratorProps) {
+  const request = useMemo<ActivityBorderDecoratorMiddlewareRequest>(() => {
+    const { type } = getActivityLivestreamingMetadata(activity) || {};
+
+    return {
+      from: isVoiceActivity(activity)
+        ? getVoiceActivityRole(activity)
+        : supportedActivityRoles.includes(activity?.from?.role)
+          ? activity?.from?.role
+          : undefined,
+      modality: new Set(isVoiceActivity(activity) ? ['audio', 'text'] : ['text']),
+      livestreamingState:
+        type === 'final activity'
+          ? 'completing'
+          : type === 'informative message'
+            ? 'preparing'
+            : type === 'interim activity'
+              ? 'ongoing'
+              : type === 'contentless'
+                ? undefined // No bubble is shown for "contentless" livestream, should not decorate.
+                : undefined
+    };
+  }, [activity]);
+
+  return <ActivityBorderDecoratorMiddlewareProxy request={request}>{children}</ActivityBorderDecoratorMiddlewareProxy>;
+}
+
+export default memo(ActivityBorderDecorator);
+export { createActivityBorderMiddleware, type ActivityBorderDecoratorProps };
+export { ActivityBorderDecoratorRequestContext as ActivityBorderDecoratorRequest };

package/src/decorator/ActivityBorder/private/ActivityBorderDecoratorMiddleware.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import templateDecorator, {
+  InferRequest,
+  type InferMiddleware,
+  type InferProps
+} from '../../private/templateDecorator';
+import ActivityBorderDecoratorRequestContext, {
+  type ActivityBorderDecoratorRequest
+} from './ActivityBorderDecoratorRequestContext';
+
+type Props = Readonly<{
+  children?: ReactNode | undefined;
+  showFlair?: boolean | undefined;
+  showLoader?: boolean | undefined;
+}>;
+
+const template = templateDecorator<Props, ActivityBorderDecoratorRequest>(
+  'activity border',
+  ActivityBorderDecoratorRequestContext
+);
+
+const { createMiddleware: createActivityBorderMiddleware, Proxy: ActivityBorderDecoratorMiddlewareProxy } = template;
+
+type ActivityBorderDecoratorMiddleware = InferMiddleware<typeof template>;
+type ActivityBorderDecoratorMiddlewareProps = InferProps<typeof template>;
+type ActivityBorderDecoratorMiddlewareRequest = InferRequest<typeof template>;
+
+export {
+  ActivityBorderDecoratorMiddlewareProxy,
+  createActivityBorderMiddleware,
+  type ActivityBorderDecoratorMiddleware,
+  type ActivityBorderDecoratorMiddlewareProps,
+  type ActivityBorderDecoratorMiddlewareRequest
+};

package/src/decorator/ActivityBorder/private/ActivityBorderDecoratorRequestContext.ts

@@ -0,0 +1,48 @@
+import { createContext } from 'react';
+
+type ActivityBorderDecoratorRequest = Readonly<{
+  /**
+   * Decorate the activity as it participate in a livestreaming session.
+   *
+   * - `"completing"` - decorate as the livestreaming is completing
+   * - `"ongoing"` - decorate as the livestreaming is ongoing
+   * - `"preparing"` - decorate as the livestreaming is being prepared
+   * - `undefined` - not participated in a livestreaming session
+   */
+  livestreamingState: 'completing' | 'ongoing' | 'preparing' | undefined;
+
+  /**
+   * Gets the role of the sender for the activity.
+   *
+   * - `"bot"` - the sender is a bot or other users
+   * - `"channel"` - the sender is the channel service
+   * - `"user"` - the sender is the current user
+   * - `undefined` - the sender is unknown
+   */
+  from: 'bot' | 'channel' | `user` | undefined;
+
+  /**
+   * Gets the modalities of the activity.
+   *
+   * - `'audio'` - the activity originated from audio/voice input
+   * - `'text'` - the activity originated from text input
+   */
+  modality: Set<'audio' | 'text'>;
+}>;
+
+type ActivityBorderDecoratorRequestContextType = Readonly<{
+  request: ActivityBorderDecoratorRequest;
+}>;
+
+const ActivityBorderDecoratorRequestContext = createContext<ActivityBorderDecoratorRequestContextType>(
+  Object.freeze({
+    request: Object.freeze({
+      from: undefined,
+      modality: new Set<'audio' | 'text'>(),
+      livestreamingState: undefined
+    })
+  })
+);
+
+export default ActivityBorderDecoratorRequestContext;
+export { type ActivityBorderDecoratorRequestContextType, type ActivityBorderDecoratorRequest };

package/src/decorator/ActivityGrouping/ActivityGroupingDecorator.tsx

@@ -0,0 +1,43 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useContext, useMemo, type ReactNode } from 'react';
+
+import DecoratorComposerContext from '../private/DecoratorComposerContext';
+import PassthroughFallback from '../private/PassthroughFallback';
+import {
+  ActivityGroupingDecoratorMiddlewareProvider,
+  ActivityGroupingDecoratorMiddlewareProxy,
+  createActivityGroupingMiddleware,
+  extractActivityGroupingDecoratorMiddleware,
+  type ActivityGroupingDecoratorMiddlewareRequest
+} from './private/ActivityGroupingDecoratorMiddleware';
+
+type ActivityGroupingDecoratorProps = Readonly<{
+  activities: readonly WebChatActivity[];
+  children?: ReactNode | undefined;
+  groupingName: string;
+}>;
+
+function ActivityGroupingDecorator({ activities, children, groupingName }: ActivityGroupingDecoratorProps) {
+  const request = useMemo<ActivityGroupingDecoratorMiddlewareRequest>(() => ({ groupingName }), [groupingName]);
+  const { middleware } = useContext(DecoratorComposerContext);
+
+  const activityGroupingMiddleware = useMemo(
+    () => extractActivityGroupingDecoratorMiddleware(middleware),
+    [middleware]
+  );
+
+  return (
+    <ActivityGroupingDecoratorMiddlewareProvider middleware={activityGroupingMiddleware}>
+      <ActivityGroupingDecoratorMiddlewareProxy
+        activities={activities}
+        fallbackComponent={PassthroughFallback}
+        request={request}
+      >
+        {children}
+      </ActivityGroupingDecoratorMiddlewareProxy>
+    </ActivityGroupingDecoratorMiddlewareProvider>
+  );
+}
+
+export default memo(ActivityGroupingDecorator);
+export { createActivityGroupingMiddleware, type ActivityGroupingDecoratorProps };

package/src/decorator/ActivityGrouping/private/ActivityGroupingDecoratorMiddleware.ts

@@ -0,0 +1,40 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import templateMiddleware, {
+  type InferMiddleware,
+  type InferProps,
+  type InferRequest
+} from '../../../middleware/private/templateMiddleware';
+
+type Request = Readonly<{
+  /**
+   * Name of the grouping from the result of `groupActivitesMiddleware()`.
+   */
+  groupingName: string;
+}>;
+
+type Props = Readonly<{
+  activities: readonly WebChatActivity[];
+}>;
+
+const template = templateMiddleware<Request, Props>('activity grouping');
+
+const {
+  createMiddleware: createActivityGroupingMiddleware,
+  extractMiddleware: extractActivityGroupingDecoratorMiddleware,
+  Provider: ActivityGroupingDecoratorMiddlewareProvider,
+  Proxy: ActivityGroupingDecoratorMiddlewareProxy
+} = template;
+
+type ActivityGroupingDecoratorMiddleware = InferMiddleware<typeof template>;
+type ActivityGroupingDecoratorMiddlewareProps = InferProps<typeof template>;
+type ActivityGroupingDecoratorMiddlewareRequest = InferRequest<typeof template>;
+
+export {
+  ActivityGroupingDecoratorMiddlewareProvider,
+  ActivityGroupingDecoratorMiddlewareProxy,
+  createActivityGroupingMiddleware,
+  extractActivityGroupingDecoratorMiddleware,
+  type ActivityGroupingDecoratorMiddleware,
+  type ActivityGroupingDecoratorMiddlewareProps,
+  type ActivityGroupingDecoratorMiddlewareRequest
+};

package/src/decorator/DecoratorComposer.tsx

@@ -0,0 +1,51 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import React, { Fragment, memo, useMemo } from 'react';
+import { array, custom, is, object, optional, pipe, readonly, type InferInput } from 'valibot';
+
+import { middlewareFactoryMarker } from '../middleware/private/templateMiddleware';
+import InternalDecoratorComposer from './internal/InternalDecoratorComposer';
+import { type DecoratorMiddleware } from './types';
+
+const decoratorComposerPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    middleware: optional(pipe(array(custom<DecoratorMiddleware>(value => typeof value === 'function')), readonly()))
+  }),
+  readonly()
+);
+
+const warnInvalidMiddlewarePropsSchema = optional(
+  array(custom(value => value[middlewareFactoryMarker satisfies symbol] === middlewareFactoryMarker))
+);
+
+type DecoratorComposerProps = Omit<InferInput<typeof decoratorComposerPropsSchema>, 'middleware'> & {
+  // Mark "middleware" as read-only.
+  // Otherwise, passing a read-only middleware would fail because we prefer writable.
+  // eslint-disable-next-line react/require-default-props, react/no-unused-prop-types
+  readonly middleware?: readonly DecoratorMiddleware[] | undefined;
+};
+
+function DecoratorComposer(props: DecoratorComposerProps) {
+  const { children, middleware } = validateProps(decoratorComposerPropsSchema, props);
+
+  useMemo(() => {
+    if (!is(warnInvalidMiddlewarePropsSchema, middleware)) {
+      console.warn(
+        'botframework-webchat: "middleware" props passed to <DecoratorComposer> should be created using createXXXMiddleware() functions.',
+        { middleware }
+      );
+    }
+  }, [middleware]);
+
+  return middleware ? (
+    <InternalDecoratorComposer middleware={middleware} priority="normal">
+      {children}
+    </InternalDecoratorComposer>
+  ) : (
+    // We can't return `children` unless we are not using memo().
+    <Fragment>{children}</Fragment>
+  );
+}
+
+export default memo(DecoratorComposer);
+export { decoratorComposerPropsSchema, type DecoratorComposerProps };

package/src/decorator/internal/InternalDecoratorComposer.tsx

@@ -0,0 +1,33 @@
+import React, { memo, useContext, useMemo, type ReactNode } from 'react';
+import DecoratorComposerContext from '../private/DecoratorComposerContext';
+import { type DecoratorMiddleware } from '../types';
+
+type InternalDecoratorComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  middleware: readonly DecoratorMiddleware[];
+  priority: 'low' | 'normal';
+}>;
+
+const EMPTY_ARRAY = Object.freeze([]);
+
+function InternalDecoratorComposer({
+  children,
+  middleware: middlewareFromProps = EMPTY_ARRAY,
+  priority
+}: InternalDecoratorComposerProps) {
+  const existingContext = useContext(DecoratorComposerContext);
+  const middleware = useMemo(
+    () =>
+      priority === 'low'
+        ? Object.freeze([...existingContext.middleware, ...middlewareFromProps])
+        : Object.freeze([...middlewareFromProps, ...existingContext.middleware]),
+    [existingContext, middlewareFromProps, priority]
+  );
+
+  const context = useMemo(() => ({ middleware }), [middleware]);
+
+  return <DecoratorComposerContext.Provider value={context}>{children}</DecoratorComposerContext.Provider>;
+}
+
+export default memo(InternalDecoratorComposer);
+export { type InternalDecoratorComposerProps };

package/src/decorator/internal/LowPriorityDecoratorComposer.tsx

@@ -0,0 +1,19 @@
+import React, { memo, type ReactNode } from 'react';
+import { type DecoratorMiddleware } from '../types';
+import InternalDecoratorComposer from './InternalDecoratorComposer';
+
+type LowPriorityDecoratorComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  middleware: readonly DecoratorMiddleware[];
+}>;
+
+function LowPriorityDecoratorDecomposer({ children, middleware }: LowPriorityDecoratorComposerProps) {
+  return (
+    <InternalDecoratorComposer middleware={middleware} priority="low">
+      {children}
+    </InternalDecoratorComposer>
+  );
+}
+
+export default memo(LowPriorityDecoratorDecomposer);
+export { type LowPriorityDecoratorComposerProps };

package/src/decorator/private/DecoratorComposerContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+import { type DecoratorMiddleware } from '../types';
+
+type DecoratorComposerContextType = Readonly<{
+  middleware: readonly DecoratorMiddleware[];
+}>;
+
+const DecoratorComposerContext = createContext<DecoratorComposerContextType>(
+  Object.freeze({
+    middleware: Object.freeze([])
+  })
+);
+
+export default DecoratorComposerContext;
+export { type DecoratorComposerContextType };

package/src/decorator/private/PassthroughFallback.tsx

@@ -0,0 +1,12 @@
+import React, { Fragment, memo, type ReactNode } from 'react';
+
+type PassthroughFallbackProps = Readonly<{
+  children?: ReactNode | undefined;
+}>;
+
+function PassthroughFallback({ children }: PassthroughFallbackProps) {
+  return <Fragment>{children}</Fragment>;
+}
+
+export default memo(PassthroughFallback);
+export { type PassthroughFallbackProps };