botframework-webchat-component 4.18.1 → 4.19.0

package/src/ActivityFeedback/private/ThumbButton.module.css

@@ -0,0 +1,91 @@
+:global(.webchat) .thumb-button {
+  align-items: center;
+  border-radius: 2px;
+  box-sizing: content-box;
+  display: grid;
+  grid-template-areas: 'main';
+  height: 16px;
+  width: 16px;
+
+  .thumb-button__input {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    grid-area: main;
+    height: 16px;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    width: 16px;
+
+    &:active {
+      background: #edebe9;
+    }
+  }
+
+  &:has(.thumb-button__input:focus-visible) {
+    outline: solid 1px #605e5c; /* <input> has opacity of 0, we need to set the outline in the container. */
+  }
+
+  .thumb-button__image {
+    color: var(--webchat__color--accent);
+    grid-area: main;
+    justify-self: center; /* Unsure why "justifyContent" doesn't work. */
+    pointer-events: none;
+    visibility: hidden;
+    width: 14px;
+
+    &.thumb-button__image--is-stroked {
+      visibility: unset;
+    }
+  }
+
+  &:has(.thumb-button__input:is(:not([aria-disabled='true']):hover, :checked, [aria-pressed='true'])) {
+    .thumb-button__image {
+      &.thumb-button__image--is-stroked {
+        visibility: hidden;
+      }
+
+      &.thumb-button__image--is-filled {
+        visibility: unset;
+      }
+    }
+  }
+
+  &.thumb-button--large {
+    border: 1px solid transparent;
+    border-radius: 4px;
+    height: 30px;
+    width: 30px;
+
+    .thumb-button__input {
+      background: currentColor;
+      height: 30px;
+      width: 30px;
+    }
+
+    .thumb-button__image {
+      color: currentColor;
+      font-size: 20px;
+      height: 1em;
+      width: 1em;
+    }
+
+    &:has(.thumb-button__input:is(:hover, :active, :checked, [aria-pressed='true'])) .thumb-button__image {
+      color: var(--webchat__color--accent);
+    }
+
+    &:has(.thumb-button__input[aria-disabled='true']) .thumb-button__image {
+      color: var(--webchat__color--subtle);
+    }
+
+    &.thumb-button--has-submitted:has(.thumb-button__input:not(:checked):not([aria-pressed='true']))
+      .thumb-button__tooltip {
+      display: none;
+    }
+
+    &.thumb-button--has-submitted .thumb-button__tooltip {
+      --webchat__tooltip-anchor-inline-start: 20%;
+    }
+  }
+}

package/src/ActivityFeedback/private/ThumbButton.tsx

@@ -0,0 +1,103 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { hooks } from 'botframework-webchat-api';
+import cx from 'classnames';
+import React, { forwardRef, memo, useCallback, useMemo, type ForwardedRef, type KeyboardEventHandler } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { boolean, function_, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
+
+import testIds from '../../testIds';
+import { Tooltip } from '../../Tooltip';
+import ThumbButtonImage from './ThumbButton.Image';
+
+import styles from './ThumbButton.module.css';
+
+const { useLocalizer } = hooks;
+
+const thumbButtonPropsSchema = pipe(
+  object({
+    as: union([literal('button'), literal('radio')]),
+    className: optional(string()),
+    direction: union([literal('down'), literal('up')]),
+    disabled: optional(boolean()),
+    name: string(),
+    onClick: optional(function_()),
+    pressed: optional(boolean()),
+    size: union([literal('small'), literal('large')]),
+    submitted: optional(boolean()),
+    title: optional(string())
+  }),
+  readonly()
+);
+
+type ThumbButtonProps = InferInput<typeof thumbButtonPropsSchema>;
+
+function ThumbButton(props: ThumbButtonProps, ref: ForwardedRef<HTMLInputElement>) {
+  const { as, className, direction, disabled, name, onClick, pressed, size, submitted, title } = validateProps(
+    thumbButtonPropsSchema,
+    props
+  );
+
+  const localize = useLocalizer();
+  const onClickRef = useRefFrom(onClick);
+  const classNames = useStyles(styles);
+
+  const buttonTitle = useMemo(
+    () => title ?? localize(direction === 'down' ? 'VOTE_DISLIKE_ALT' : 'VOTE_LIKE_ALT'),
+    [direction, localize, title]
+  );
+
+  const handleClickOrChange = useCallback(() => !disabled && onClickRef.current?.(), [disabled, onClickRef]);
+
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(event => {
+    // Do not submit the <form> via ENTER key.
+    event.key === 'Enter' && event.preventDefault();
+  }, []);
+
+  return (
+    <div
+      className={cx(
+        classNames['thumb-button'],
+        {
+          [classNames['thumb-button--large']]: size === 'large',
+          [classNames['thumb-button--has-submitted']]: submitted
+        },
+        className
+      )}
+    >
+      <input
+        aria-disabled={disabled ? 'true' : undefined}
+        aria-label={buttonTitle}
+        className={cx(classNames['thumb-button__input'], className)}
+        data-testid={testIds.feedbackButton}
+        name={name}
+        onKeyDown={handleKeyDown}
+        ref={ref}
+        {...(as === 'radio'
+          ? {
+              checked: pressed,
+              onChange: handleClickOrChange,
+              type: 'radio'
+            }
+          : {
+              'aria-pressed': pressed,
+              onClick: handleClickOrChange,
+              type: 'button'
+            })}
+      />
+      <ThumbButtonImage
+        className={cx(classNames['thumb-button__image'], classNames['thumb-button__image--is-stroked'])}
+        direction={direction}
+      />
+      <ThumbButtonImage
+        className={cx(classNames['thumb-button__image'], classNames['thumb-button__image--is-filled'])}
+        direction={direction}
+        filled={true}
+      />
+      <Tooltip className={classNames['thumb-button__tooltip']}>{buttonTitle}</Tooltip>
+    </div>
+  );
+}
+
+export default memo(forwardRef<HTMLInputElement, ThumbButtonProps>(ThumbButton));
+export { thumbButtonPropsSchema, type ThumbButtonProps };

package/src/ActivityFeedback/private/canActionResubmit.ts

@@ -0,0 +1,6 @@
+import { type OrgSchemaAction } from 'botframework-webchat-core/org-schema.js';
+import isActionRequireReview from './isActionRequireReview';
+
+export default function canActionResubmit(action: OrgSchemaAction | undefined): boolean {
+  return !isActionRequireReview(action);
+}

package/src/ActivityFeedback/private/getDisclaimerFromFeedbackLoop.ts

@@ -0,0 +1,10 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+import { hasDisclaimer } from './hasFeedbackLoop';
+
+/**
+ * @deprecated This helper function should only use for patching the service. After patching, should use `getDisclaimerFromReviewAction` instead.
+ */
+export default function getDisclaimerFromFeedbackLoop(activity: WebChatActivity): string | undefined {
+  return hasDisclaimer(activity) ? activity.channelData.feedbackLoop.disclaimer : undefined;
+}

package/src/ActivityFeedback/private/getDisclaimerFromReviewAction.ts

@@ -0,0 +1,12 @@
+import {
+  orgSchemaUserReviewSchema,
+  type OrgSchemaAction,
+  type OrgSchemaThing
+} from 'botframework-webchat-core/org-schema.js';
+import { safeParse } from 'valibot';
+
+export default function getDisclaimerFromActivity(action: OrgSchemaAction): string | undefined {
+  const parseResult = safeParse(orgSchemaUserReviewSchema, action.result[0] satisfies OrgSchemaThing);
+
+  return parseResult.success ? parseResult.output.reviewAspect[0] : undefined;
+}

package/src/ActivityFeedback/private/hasFeedbackLoop.ts

@@ -0,0 +1,42 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { is, literal, object, optional, string, union, type InferOutput } from 'valibot';
+
+const activityWithFeedbackLoopSchemaWithDisclaimer = object({
+  channelData: object({
+    feedbackLoop: object({
+      disclaimer: optional(string()),
+      type: literal('default')
+    })
+  })
+});
+
+const activityWithFeedbackLoopSchemaWithoutDisclaimer = object({
+  channelData: object({
+    feedbackLoop: object({
+      type: literal('default')
+    })
+  })
+});
+
+const feedbackLoopSchema = union([
+  activityWithFeedbackLoopSchemaWithDisclaimer,
+  activityWithFeedbackLoopSchemaWithoutDisclaimer
+]);
+
+type FeedbackActivity = WebChatActivity & InferOutput<typeof feedbackLoopSchema>;
+
+/**
+ * @deprecated This helper function should only use for patching the service. After patching, should use `getDisclaimerFormReviewAction` instead.
+ */
+export function hasDisclaimer(
+  activity: WebChatActivity
+): activity is WebChatActivity & InferOutput<typeof activityWithFeedbackLoopSchemaWithDisclaimer> {
+  return is(activityWithFeedbackLoopSchemaWithDisclaimer, activity);
+}
+
+/**
+ * @deprecated This helper function should only use for patching the service. After patching, should use `isActionRequireReview` instead.
+ */
+export default function hasFeedbackLoop(activity: WebChatActivity): activity is FeedbackActivity {
+  return is(feedbackLoopSchema, activity);
+}

package/src/ActivityFeedback/private/isActionRequireReview.ts

@@ -0,0 +1,10 @@
+import { type OrgSchemaAction } from 'botframework-webchat-core/org-schema.js';
+import { isOfType } from 'botframework-webchat-core/json-ld.js';
+
+export default function isActionRequireReview(
+  action: OrgSchemaAction | undefined
+): action is OrgSchemaAction & { result: { '@type': 'UserReview'[] } } {
+  const [firstResult] = action?.result ?? [];
+
+  return isOfType('UserReview', firstResult);
+}

package/src/ActivityFeedback/providers/ActivityFeedbackComposer.tsx

@@ -0,0 +1,372 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { hooks } from 'botframework-webchat-api';
+import { orgSchemaActionSchema, type OrgSchemaAction } from 'botframework-webchat-core/org-schema.js';
+import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
+import { isOfType } from 'botframework-webchat-core/json-ld.js';
+import random from 'math-random';
+import React, { memo, useCallback, useMemo, useRef, useState, type Dispatch, type SetStateAction } from 'react';
+import { wrapWith } from 'react-wrap-with';
+import { useRefFrom } from 'use-ref-from';
+import { useStateWithRef } from 'use-state-with-ref';
+import { custom, is, object, optional, parse, pipe, readonly, safeParse, type InferInput } from 'valibot';
+
+import dereferenceBlankNodes from '../../Utils/JSONLinkedData/dereferenceBlankNodes';
+import canActionResubmit from '../private/canActionResubmit';
+import getDisclaimerFromFeedbackLoop from '../private/getDisclaimerFromFeedbackLoop';
+import hasFeedbackLoop from '../private/hasFeedbackLoop';
+import isActionRequireReview from '../private/isActionRequireReview';
+import ActivityFeedbackContext, { type ActivityFeedbackContextType } from './private/ActivityFeedbackContext';
+import { ActivityFeedbackFocusPropagationScope, usePropagateActivityFeedbackFocus } from './private/FocusPropagation';
+
+const { usePonyfill, usePostActivity } = hooks;
+
+const activityFeedbackComposerPropsSchema = pipe(
+  object({
+    activity: custom<WebChatActivity>(value => is(object({}), value)),
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type ActivityFeedbackComposerProps = InferInput<typeof activityFeedbackComposerPropsSchema>;
+
+type ActionState = Readonly<{
+  actionId: string;
+  actionStatus: 'CompletedActionStatus' | 'ActiveActionStatus';
+}>;
+
+const DEBOUNCE_TIMEOUT = 500;
+
+/**
+ * Patch `OrgSchemaAction` for simpler logic down the road:
+ *
+ * 1. If no `@id`, generate a random `@id`
+ * 2. If `channelData.feedbackLoop.disclaimer` presents (a deprecated property), move it to `action.result.description`
+ *
+ * @param activity Activity to read `channelData`
+ * @param actions Actions to patch
+ * @returns New instances of patched actions
+ */
+function patchActions(activity: WebChatActivity, actions: readonly OrgSchemaAction[]): readonly OrgSchemaAction[] {
+  actions = actions.map(action =>
+    // eslint-disable-next-line no-magic-numbers
+    action['@id'] ? action : Object.freeze({ ...action, '@id': `_:${random().toString(36).substring(2, 7)}` })
+  );
+
+  const deprecatedFeedbackLoopChannelData = activity.channelData?.feedbackLoop;
+
+  if (deprecatedFeedbackLoopChannelData) {
+    // TODO: Find the date we deprecated the channelData.
+    console.warn(
+      'botframework-webchat: `channelData.feedbackLoop` is deprecated, use `entities[@type="Message"][@id=""].potentialAction[@type="Action"].result[@type="UserReview"].description instead. It will be removed on or after YYYY-MM-DD.'
+    );
+
+    actions = actions.map(action =>
+      action.result
+        ? action
+        : parse(orgSchemaActionSchema, {
+            ...action,
+            result: {
+              '@type': 'UserReview',
+              reviewAspect: deprecatedFeedbackLoopChannelData.disclaimer
+            }
+          })
+    );
+  }
+
+  return Object.freeze(actions);
+}
+
+function ActivityFeedbackComposer(props: ActivityFeedbackComposerProps) {
+  const { children, activity: activityFromProps } = validateProps(activityFeedbackComposerPropsSchema, props);
+
+  const [{ clearTimeout, setTimeout }] = usePonyfill();
+  const [feedbackText, setFeedbackText, feedbackTextRef] = useStateWithRef<string | undefined>();
+  const activity: WebChatActivity = useMemo(
+    () =>
+      // Force enable feedback loop until service fixed their issue.
+      hasFeedbackLoop(activityFromProps)
+        ? Object.freeze({
+            ...activityFromProps,
+            entities: [
+              {
+                '@context': 'https://schema.org',
+                '@id': '',
+                '@type': 'Message',
+                type: 'https://schema.org/Message',
+                keywords: [],
+                potentialAction: [
+                  {
+                    '@type': 'LikeAction',
+                    actionStatus: 'PotentialActionStatus',
+                    result: [
+                      {
+                        '@type': 'UserReview',
+                        reviewAspect: getDisclaimerFromFeedbackLoop(activityFromProps)
+                      }
+                    ]
+                  },
+                  {
+                    '@type': 'DislikeAction',
+                    actionStatus: 'PotentialActionStatus',
+                    result: [
+                      {
+                        '@type': 'UserReview',
+                        reviewAspect: getDisclaimerFromFeedbackLoop(activityFromProps)
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          })
+        : activityFromProps,
+    [activityFromProps]
+  );
+
+  const activityRef = useRefFrom(activity);
+
+  const actionStateRef = useRef<ActionState | undefined>(undefined);
+  const [_, setForceRefresh] = useState({});
+
+  const setActionStateWithRefresh = useCallback(
+    (actionState: ActionState | undefined) => {
+      actionStateRef.current = actionState;
+      setForceRefresh({});
+    },
+    [actionStateRef, setForceRefresh]
+  );
+
+  const rawActions = useMemo<readonly OrgSchemaAction[]>(() => {
+    try {
+      const graph = dereferenceBlankNodes(activity.entities || []);
+      const messageThing = getOrgSchemaMessage(graph);
+
+      const reactActions: readonly OrgSchemaAction[] = Object.freeze(
+        messageThing?.potentialAction.filter(
+          action => isOfType('LikeAction', action) || isOfType('DislikeAction', action)
+        ) ?? []
+      );
+
+      if (reactActions.length) {
+        return patchActions(activity, reactActions);
+      }
+
+      const voteActions = Object.freeze(
+        graph.reduce<OrgSchemaAction[]>((result, item) => {
+          const parseResult = safeParse(orgSchemaActionSchema, item);
+
+          if (parseResult.success) {
+            const { output } = parseResult;
+
+            output.actionOption[0] && result.push(output);
+          }
+
+          return result;
+        }, [])
+        // TODO: Instead of processing VoteAction, convert it to LikeAction/DislikeAction.
+        // .map(action => ({
+        //   ...action,
+        //   '@type': action.actionOption === 'downvote' ? 'DislikeAction' : 'LikeAction'
+        // }))
+      );
+
+      if (voteActions.length) {
+        // VoteAction is deprecated and was never published publicly.
+        return patchActions(activity, voteActions);
+      }
+    } catch (error) {
+      // Intentionally left blank.
+      console.warn('botframework-webchat: Internal error in <ActivityFeedbackComposer>', error);
+    }
+
+    return Object.freeze([]);
+  }, [activity]);
+
+  useMemo(() => {
+    const activeOrCompletedAction = rawActions.find(
+      (action): action is OrgSchemaAction & { actionStatus: ['ActiveActionStatus' | 'CompletedActionStatus'] } =>
+        action.actionStatus[0] === 'ActiveActionStatus' || action.actionStatus[0] === 'CompletedActionStatus'
+    );
+
+    actionStateRef.current = activeOrCompletedAction
+      ? {
+          actionId: activeOrCompletedAction['@id'],
+          actionStatus: activeOrCompletedAction.actionStatus[0]
+        }
+      : undefined;
+  }, [rawActions]);
+
+  // Workaround ESLint on saying actionStateRef.current is redundant when using it directly.
+  const actionStateForActions = actionStateRef.current;
+
+  const actions = useMemo<readonly OrgSchemaAction[]>(
+    () =>
+      Object.freeze(
+        rawActions.map(action =>
+          actionStateForActions && actionStateForActions.actionId === action['@id']
+            ? Object.freeze({ ...action, actionStatus: [actionStateForActions.actionStatus] } satisfies OrgSchemaAction)
+            : action.actionStatus[0] === 'PotentialActionStatus'
+              ? action
+              : Object.freeze({ ...action, actionStatus: ['PotentialActionStatus'] } satisfies OrgSchemaAction)
+        )
+      ),
+    [actionStateForActions, rawActions]
+  );
+
+  const actionsRef = useRefFrom(actions);
+
+  const postActivity = usePostActivity();
+
+  const hasSubmitted = useMemo<boolean>(
+    () => actions.some(action => action.actionStatus[0] === 'CompletedActionStatus'),
+    [actions]
+  );
+
+  const hasSubmittedRef = useRefFrom(hasSubmitted);
+
+  const submit = useCallback(
+    (action: OrgSchemaAction) => {
+      if (actionStateRef.current?.actionStatus === 'CompletedActionStatus') {
+        return console.warn(
+          'botframework-webchat internal: useFeedbackActions().submitCallback() must not be called after feedback is completed, ignoring the call.'
+        );
+      } else if (!actionsRef.current.includes(action)) {
+        return console.warn(
+          'botframework-webchat internal: Cannot submit an action that does not exists in the message, ignoring the call.'
+        );
+      }
+
+      setActionStateWithRefresh(Object.freeze({ actionId: action['@id'], actionStatus: 'CompletedActionStatus' }));
+
+      const { '@id': _id, actionStatus: _actionStatus, ...rest } = action;
+      const { current: feedbackText } = feedbackTextRef;
+      const isLegacyAction = isOfType('VoteAction', action);
+
+      // TODO: We should update this to use W3C Hydra.1
+      if (isActionRequireReview(action)) {
+        postActivity({
+          name: 'message/submitAction',
+          replyToId: activityRef.current.id,
+          type: 'invoke',
+          value: {
+            actionName: 'feedback',
+            actionValue: {
+              feedback: { feedbackText: feedbackText || '' },
+              reaction: isOfType('LikeAction', action) ? 'like' : 'dislike'
+            }
+          }
+        } as any);
+      } else {
+        const entity = isLegacyAction ? rest : action;
+
+        postActivity({
+          entities: [
+            {
+              ...entity,
+              actionOption: entity.actionOption[0], // TODO: Service should accept plural.
+              type: new URL(entity['@type'][0] ?? '', entity['@context'] ?? 'https://schema.org').href
+            }
+          ],
+          name: 'webchat:activity-status/feedback',
+          type: 'event'
+        } as any);
+      }
+    },
+    [actionsRef, actionStateRef, activityRef, feedbackTextRef, postActivity, setActionStateWithRefresh]
+  );
+
+  const selectedAction = useMemo<OrgSchemaAction | undefined>(
+    () =>
+      actions.find(
+        ({ actionStatus }) => actionStatus[0] === 'ActiveActionStatus' || actionStatus[0] === 'CompletedActionStatus'
+      ),
+    [actions]
+  );
+
+  const autoSubmitTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const setSelectedAction = useCallback(
+    (action: OrgSchemaAction | undefined) => {
+      // If the action require a UserReview, do not allow resubmit.
+      const shouldAllowResubmit = canActionResubmit(action);
+
+      if (hasSubmittedRef.current && !shouldAllowResubmit) {
+        return console.warn(
+          'botframework-webchat internal: useFeedbackActions().setSelectedAction() must not be called after feedback is completed as it does not allow resubmission, ignoring the call.'
+        );
+      } else if (action && !actionsRef.current.includes(action)) {
+        return console.warn(
+          'botframework-webchat internal: Cannot select an action that does not exists in the message, ignoring the call.'
+        );
+      }
+
+      setActionStateWithRefresh(
+        action
+          ? Object.freeze({
+              actionId: action['@id'],
+              actionStatus: 'ActiveActionStatus'
+            })
+          : undefined
+      );
+
+      if (shouldAllowResubmit) {
+        clearTimeout(autoSubmitTimeoutRef.current);
+
+        if (action?.['@id']) {
+          autoSubmitTimeoutRef.current = setTimeout(
+            () => submit(actionsRef.current.find(({ '@id': id }) => id === action['@id'])),
+            DEBOUNCE_TIMEOUT
+          );
+        }
+      }
+    },
+    [actionsRef, autoSubmitTimeoutRef, clearTimeout, hasSubmittedRef, setActionStateWithRefresh, setTimeout, submit]
+  );
+
+  const selectedActionState = useMemo<readonly [OrgSchemaAction, (action: OrgSchemaAction) => void]>(
+    () => Object.freeze([selectedAction, setSelectedAction]),
+    [selectedAction, setSelectedAction]
+  );
+
+  const actionsState = useMemo<readonly [readonly OrgSchemaAction[]]>(
+    () => Object.freeze([actions] as const),
+    [actions]
+  );
+
+  const feedbackTextState = useMemo<readonly [string, Dispatch<SetStateAction<string>>]>(
+    () => Object.freeze([feedbackText, setFeedbackText]),
+    [feedbackText, setFeedbackText]
+  );
+
+  const hasSubmittedState = useMemo<readonly [boolean]>(() => Object.freeze([hasSubmitted]), [hasSubmitted]);
+
+  const activityState = useMemo<readonly [WebChatActivity]>(() => Object.freeze([activity]), [activity]);
+  const focusFeedbackButton = usePropagateActivityFeedbackFocus();
+
+  const useActions = useCallback(() => actionsState, [actionsState]);
+  const useActivity = useCallback(() => activityState, [activityState]);
+  const useFeedbackText = useCallback(() => feedbackTextState, [feedbackTextState]);
+  const useFocusFeedbackButton = useCallback(() => focusFeedbackButton, [focusFeedbackButton]);
+  const useHasSubmitted = useCallback(() => hasSubmittedState, [hasSubmittedState]);
+  const useSelectedActions = useCallback(() => selectedActionState, [selectedActionState]);
+  const useSubmit = useCallback(() => submit, [submit]);
+
+  const context = useMemo<ActivityFeedbackContextType>(
+    () => ({
+      useActions,
+      useActivity,
+      useFeedbackText,
+      useFocusFeedbackButton,
+      useHasSubmitted,
+      useSelectedAction: useSelectedActions,
+      useSubmit
+    }),
+    [useActions, useActivity, useFeedbackText, useFocusFeedbackButton, useHasSubmitted, useSelectedActions, useSubmit]
+  );
+
+  return <ActivityFeedbackContext.Provider value={context}>{children}</ActivityFeedbackContext.Provider>;
+}
+
+export default memo(wrapWith(ActivityFeedbackFocusPropagationScope)(ActivityFeedbackComposer));
+export { activityFeedbackComposerPropsSchema, type ActivityFeedbackComposerProps };

package/src/ActivityFeedback/providers/private/ActivityFeedbackContext.ts

@@ -0,0 +1,24 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { type OrgSchemaAction } from 'botframework-webchat-core/org-schema.js';
+import { createContext, type Dispatch, type SetStateAction } from 'react';
+
+type ActivityFeedbackContextType = Readonly<{
+  useActions: () => readonly [readonly OrgSchemaAction[]];
+  useActivity: () => readonly [WebChatActivity];
+  useFeedbackText: () => readonly [string, Dispatch<SetStateAction<string>>];
+  useFocusFeedbackButton: () => (action: OrgSchemaAction) => void;
+  useHasSubmitted: () => readonly [boolean];
+  useSelectedAction: () => readonly [OrgSchemaAction, (action: OrgSchemaAction) => void];
+  useSubmit: () => (action: OrgSchemaAction) => void;
+}>;
+
+const ActivityFeedbackContext = createContext<ActivityFeedbackContextType>(
+  new Proxy({} as ActivityFeedbackContextType, {
+    get() {
+      throw new Error('botframework-webchat: This hook can only be used under <ActivityFeedbackContext>');
+    }
+  })
+);
+
+export default ActivityFeedbackContext;
+export { type ActivityFeedbackContextType };

package/src/ActivityFeedback/providers/private/FocusPropagation.ts

@@ -0,0 +1,10 @@
+import { type OrgSchemaAction } from 'botframework-webchat-core/org-schema.js';
+import { createPropagation } from 'use-propagate';
+
+const {
+  PropagationScope: ActivityFeedbackFocusPropagationScope,
+  useListen: useListenToActivityFeedbackFocus,
+  usePropagate: usePropagateActivityFeedbackFocus
+} = createPropagation<OrgSchemaAction>();
+
+export { ActivityFeedbackFocusPropagationScope, useListenToActivityFeedbackFocus, usePropagateActivityFeedbackFocus };