botframework-webchat-component 4.18.0 → 4.18.1-hotfix.20260127.b53acdf

package/src/Activity/StackedLayout.tsx

@@ -1,22 +1,21 @@
 /* eslint complexity: ["error", 50] */
 
 import { hooks } from 'botframework-webchat-api';
+import { ActivityBorderDecorator } from 'botframework-webchat-api/decorator';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, { memo } from 'react';
-import { ActivityDecorator } from 'botframework-webchat-api/decorator';
 
-import Bubble from './Bubble';
-import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import ScreenReaderText from '../ScreenReaderText';
+import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import textFormatToContentType from '../Utils/textFormatToContentType';
-import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useUniqueId from '../hooks/internal/useUniqueId';
+import useStyleSet from '../hooks/useStyleSet';
+import Bubble from './Bubble';
 
-import type { FC, ReactNode } from 'react';
 import type { RenderAttachment } from 'botframework-webchat-api';
-import type { WebChatActivity } from 'botframework-webchat-core';
+import { getActivityLivestreamingMetadata, type WebChatActivity } from 'botframework-webchat-core';
+import type { ReactNode } from 'react';
 
 const { useAvatarForBot, useAvatarForUser, useLocalizer, useStyleOptions } = hooks;
 
@@ -69,23 +68,23 @@ const ROOT_STYLE = {
   }
 };
 
-type StackedLayoutProps = {
+type StackedLayoutProps = Readonly<{
   activity: WebChatActivity;
-  hideTimestamp?: boolean;
-  renderActivityStatus?: (options: { hideTimestamp: boolean }) => ReactNode;
-  renderAttachment?: RenderAttachment;
-  renderAvatar?: false | (() => Exclude<ReactNode, boolean | null | undefined>);
-  showCallout?: boolean;
-};
-
-const StackedLayout: FC<StackedLayoutProps> = ({
+  hideTimestamp?: boolean | undefined;
+  renderActivityStatus?: ((options: { hideTimestamp: boolean }) => ReactNode) | undefined;
+  renderAttachment?: RenderAttachment | undefined;
+  renderAvatar?: false | (() => Exclude<ReactNode, boolean | null | undefined>) | undefined;
+  showCallout?: boolean | undefined;
+}>;
+
+const StackedLayout = ({
   activity,
   hideTimestamp,
   renderActivityStatus,
   renderAttachment,
   renderAvatar,
   showCallout
-}) => {
+}: StackedLayoutProps) => {
   const [styleOptions] = useStyleOptions();
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
@@ -96,13 +95,18 @@ const StackedLayout: FC<StackedLayoutProps> = ({
 
   const { bubbleNubOffset, bubbleNubSize, bubbleFromUserNubOffset, bubbleFromUserNubSize } = styleOptions;
 
-  const isMessage = activity.type === 'message';
+  const isMessageOrTyping = activity.type === 'message' || activity.type === 'typing';
 
-  const attachments = (isMessage && activity.attachments) || [];
+  const attachments = (isMessageOrTyping && activity.attachments) || [];
   const fromUser = activity.from.role === 'user';
-  const messageBackDisplayText: string = (isMessage && activity.channelData?.messageBack?.displayText) || '';
-
-  const activityDisplayText = isMessage ? messageBackDisplayText || activity.text : '';
+  const messageBackDisplayText: string = (isMessageOrTyping && activity.channelData?.messageBack?.displayText) || '';
+
+  const isLivestreaming = !!getActivityLivestreamingMetadata(activity);
+  const activityDisplayText = isMessageOrTyping
+    ? messageBackDisplayText || activity.text
+    : isLivestreaming && 'text' in activity
+      ? activity.text
+      : '';
   const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
   const greetingAlt = (
     fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
@@ -157,17 +161,15 @@ const StackedLayout: FC<StackedLayoutProps> = ({
                 fromUser={fromUser}
                 nub={showNub || (hasAvatar || hasNub ? 'hidden' : false)}
               >
-                <ActivityDecorator activity={activity}>
+                <ActivityBorderDecorator activity={activity}>
                   {renderAttachment({
                     activity,
-                    attachment: isMessage
-                      ? {
-                          content: activityDisplayText,
-                          contentType: textFormatToContentType(activity.textFormat)
-                        }
-                      : undefined
+                    attachment: {
+                      content: activityDisplayText,
+                      contentType: textFormatToContentType('textFormat' in activity ? activity.textFormat : undefined)
+                    }
                   })}
-                </ActivityDecorator>
+                </ActivityBorderDecorator>
               </Bubble>
             </div>
           )}
@@ -209,42 +211,6 @@ const StackedLayout: FC<StackedLayoutProps> = ({
   );
 };
 
-StackedLayout.defaultProps = {
-  hideTimestamp: false,
-  renderActivityStatus: () => false,
-  renderAvatar: undefined,
-  showCallout: true
-};
-
-StackedLayout.propTypes = {
-  // PropTypes cannot fully capture TypeScript types.
-  // @ts-ignore
-  activity: PropTypes.shape({
-    attachments: PropTypes.array,
-    channelData: PropTypes.shape({
-      messageBack: PropTypes.shape({
-        displayText: PropTypes.string
-      })
-    }),
-    from: PropTypes.shape({
-      role: PropTypes.string.isRequired
-    }).isRequired,
-    text: PropTypes.string,
-    textFormat: PropTypes.oneOf(['markdown', 'plain', 'xml']),
-    timestamp: PropTypes.string,
-    type: PropTypes.string.isRequired
-  }).isRequired,
-  hideTimestamp: PropTypes.bool,
-
-  // PropTypes cannot validate precisely with its TypeScript counterpart.
-  // @ts-ignore
-  renderActivityStatus: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.func]),
-  renderAttachment: PropTypes.func.isRequired,
-
-  // PropTypes cannot validate precisely with its TypeScript counterpart.
-  // @ts-ignore
-  renderAvatar: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.func]),
-  showCallout: PropTypes.bool
-};
+StackedLayout.displayName = 'StackedLayout';
 
 export default memo(StackedLayout);

package/src/ActivityFeedback/ActivityFeedback.tsx

@@ -0,0 +1,27 @@
+import { WebChatActivity } from 'botframework-webchat-core';
+import React, { memo } from 'react';
+import FeedbackLoopWithMessage from './private/FeedbackLoopWithMessage';
+import FeedbackLoopWithoutMessage from './private/FeedbackLoopWithoutMessage';
+import ActivityFeedbackComposer from './providers/ActivityFeedbackComposer';
+import useShouldShowFeedbackForm from './providers/useShouldShowFeedbackForm';
+
+const InternalActivityFeedback = memo(() =>
+  useShouldShowFeedbackForm()[0] ? <FeedbackLoopWithMessage /> : <FeedbackLoopWithoutMessage />
+);
+
+InternalActivityFeedback.displayName = 'InternalActivityFeedback';
+
+type ActivityFeedbackProps = Readonly<{
+  activity: WebChatActivity;
+}>;
+
+function ActivityFeedback({ activity }: ActivityFeedbackProps) {
+  return (
+    <ActivityFeedbackComposer activity={activity}>
+      <InternalActivityFeedback />
+    </ActivityFeedbackComposer>
+  );
+}
+
+export default memo(ActivityFeedback);
+export { type ActivityFeedbackProps };

package/src/ActivityFeedback/private/FeedbackForm.tsx

@@ -0,0 +1,88 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import React, { memo, useCallback, useEffect, useRef, useState, type FormEventHandler } from 'react';
+import { useRefFrom } from 'use-ref-from';
+import { useStateWithRef } from 'use-state-with-ref';
+
+import Markdownable from '../../Attachment/Text/private/Markdownable';
+import useStyleSet from '../../hooks/useStyleSet';
+import testIds from '../../testIds';
+import useActivity from '../providers/useActivity';
+import useSelectedAction from '../providers/useSelectedAction';
+import useSubmitCallback from '../providers/useSubmitCallback';
+import FeedbackTextArea from './FeedbackTextArea';
+import getDisclaimer from './getDisclaimer';
+
+const { useLocalizer } = hooks;
+
+function FeedbackForm() {
+  const [{ feedbackForm }] = useStyleSet();
+  const [activity] = useActivity();
+  const [hasFocus, setHasFocus] = useState(false);
+  const [selectedAction, setSelectedAction] = useSelectedAction();
+  const [userFeedback, setUserFeedback, userFeedbackRef] = useStateWithRef('');
+  const feedbackTextAreaRef = useRef<HTMLTextAreaElement>(null);
+  const localize = useLocalizer();
+  const submit = useSubmitCallback();
+
+  const disclaimer = getDisclaimer(activity);
+  const selectedActionRef = useRefFrom(selectedAction);
+
+  const handleCancelButtonClick = useCallback(() => {
+    setSelectedAction(undefined);
+  }, [setSelectedAction]);
+
+  const handleMessageChange: FormEventHandler<HTMLTextAreaElement> = useCallback(
+    ({ currentTarget: { value } }) => setUserFeedback(value),
+    [setUserFeedback]
+  );
+
+  const handleSubmit = useCallback<FormEventHandler<HTMLFormElement>>(
+    event => {
+      event.preventDefault();
+
+      submit(selectedActionRef.current, userFeedbackRef.current);
+    },
+    [selectedActionRef, submit, userFeedbackRef]
+  );
+
+  useEffect(() => {
+    // Will focus on the text area when:
+    // 1. The component is mounted initially, or
+    // 2. User clicked on the reset button
+    if (feedbackTextAreaRef.current && !hasFocus) {
+      setHasFocus(true);
+
+      feedbackTextAreaRef.current.focus();
+    }
+  }, [feedbackTextAreaRef, hasFocus, setHasFocus]);
+
+  return (
+    <form className={classNames('webchat__feedback-form', feedbackForm + '')} onSubmit={handleSubmit}>
+      <span className={classNames('webchat__feedback-form__body')}>{localize('FEEDBACK_FORM_TITLE')}</span>
+      <FeedbackTextArea
+        data-testid={testIds.feedbackSendBox}
+        onInput={handleMessageChange}
+        placeholder={localize('FEEDBACK_FORM_PLACEHOLDER')}
+        ref={feedbackTextAreaRef}
+        startRows={3}
+        value={userFeedback}
+      />
+      {disclaimer && <Markdownable className={classNames('webchat__feedback-form__caption')} text={disclaimer} />}
+      <div className={classNames('webchat__feedback-form__container')}>
+        <button className={classNames('webchat__feedback-form__submit-button')} type="submit">
+          {localize('FEEDBACK_FORM_SUBMIT_BUTTON_LABEL')}
+        </button>
+        <button
+          className={classNames('webchat__feedback-form__cancel-button')}
+          onClick={handleCancelButtonClick}
+          type="button"
+        >
+          {localize('FEEDBACK_FORM_CANCEL_BUTTON_LABEL')}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export default memo(FeedbackForm);

package/src/ActivityFeedback/private/FeedbackLoopWithMessage.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import React, { memo, useMemo } from 'react';
+
+import useStyleSet from '../../hooks/useStyleSet';
+import useHasSubmitted from '../providers/useHasSubmitted';
+import useSelectedAction from '../providers/useSelectedAction';
+import FeedbackForm from './FeedbackForm';
+import FeedbackVoteButtonBar from './FeedbackVoteButtonBar';
+
+function FeedbackLoopWithMessage() {
+  const [{ feedbackForm }] = useStyleSet();
+
+  const [hasSubmitted] = useHasSubmitted();
+  const [selectedAction] = useSelectedAction();
+
+  // Hide feedback form if feedback has already been submitted
+  const isExpanded = useMemo(() => !hasSubmitted && !!selectedAction, [hasSubmitted, selectedAction]);
+
+  return (
+    <div className={classNames('webchat__feedback-form__root-container', feedbackForm + '')}>
+      <div className={classNames('webchat__feedback-form__root-child')}>
+        <FeedbackVoteButtonBar />
+      </div>
+      {isExpanded && <FeedbackForm />}
+    </div>
+  );
+}
+
+export default memo(FeedbackLoopWithMessage);

package/src/ActivityFeedback/private/FeedbackLoopWithoutMessage.tsx

@@ -0,0 +1,8 @@
+import React, { memo } from 'react';
+import FeedbackVoteButtonBar from './FeedbackVoteButtonBar';
+
+function FeedbackLoopWithoutMessage() {
+  return <FeedbackVoteButtonBar />;
+}
+
+export default memo(FeedbackLoopWithoutMessage);

package/src/ActivityFeedback/private/FeedbackTextArea.tsx

@@ -0,0 +1,122 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import React, {
+  forwardRef,
+  Fragment,
+  useCallback,
+  useRef,
+  type FormEventHandler,
+  type KeyboardEventHandler
+} from 'react';
+import useStyleSet from '../../hooks/useStyleSet';
+
+const { useUIState } = hooks;
+
+const TextArea = forwardRef<
+  HTMLTextAreaElement,
+  Readonly<{
+    'aria-label'?: string | undefined;
+    className?: string | undefined;
+    'data-testid'?: string | undefined;
+
+    /**
+     * `true`, if the text area should be hidden but stay in the DOM, otherwise, `false`.
+     *
+     * Keeping the element in the DOM while making it invisible to users and PWDs is useful in these scenarios:
+     *
+     * - When the DTMF keypad is going away, we need to send focus to the text area before we unmount DTMF keypad,
+     *   This ensures the flow of focus did not sent to document body
+     */
+    hidden?: boolean | undefined;
+    onInput?: FormEventHandler<HTMLTextAreaElement> | undefined;
+    placeholder?: string | undefined;
+    startRows?: number | undefined;
+    value?: string | undefined;
+  }>
+>((props, ref) => {
+  const [uiState] = useUIState();
+  const [{ feedbackTextArea }] = useStyleSet();
+  const isInCompositionRef = useRef<boolean>(false);
+
+  const disabled = uiState === 'disabled';
+
+  const handleCompositionEnd = useCallback(() => {
+    isInCompositionRef.current = false;
+  }, [isInCompositionRef]);
+
+  const handleCompositionStart = useCallback(() => {
+    isInCompositionRef.current = true;
+  }, [isInCompositionRef]);
+
+  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(event => {
+    // Shift+Enter adds a new line
+    // Enter requests related form submission
+    if (!event.shiftKey && event.key === 'Enter' && !isInCompositionRef.current) {
+      event.preventDefault();
+
+      if ('form' in event.target && event.target.form instanceof HTMLFormElement) {
+        event.target?.form?.requestSubmit();
+      }
+    }
+  }, []);
+
+  return (
+    <div
+      className={classNames(
+        'webchat__feedback-form-text-area',
+        { 'webchat__feedback-form-text-area--hidden': props.hidden },
+        feedbackTextArea + ''
+      )}
+      role={props.hidden ? 'hidden' : undefined}
+    >
+      {uiState === 'blueprint' ? (
+        <div
+          className={classNames(
+            'webchat__feedback-form-text-area-doppelganger',
+            'webchat__feedback-form-text-area-input--scroll',
+            'webchat__feedback-form-text-area-shared'
+          )}
+        >
+          {' '}
+        </div>
+      ) : (
+        <Fragment>
+          <div
+            className={classNames(
+              'webchat__feedback-form-text-area-doppelganger',
+              'webchat__feedback-form-text-area-input--scroll',
+              'webchat__feedback-form-text-area-shared'
+            )}
+          >
+            {props.value || props.placeholder}{' '}
+          </div>
+          <textarea
+            aria-disabled={disabled}
+            aria-label={props['aria-label']}
+            className={classNames(
+              'webchat__feedback-form-text-area-input',
+              'webchat__feedback-form-text-area-input--scroll',
+              'webchat__feedback-form-text-area-shared'
+            )}
+            data-testid={props['data-testid']}
+            onCompositionEnd={handleCompositionEnd}
+            onCompositionStart={handleCompositionStart}
+            onInput={props.onInput}
+            onKeyDown={handleKeyDown}
+            placeholder={props.placeholder}
+            readOnly={disabled}
+            ref={ref}
+            rows={props.startRows ?? 1}
+            // eslint-disable-next-line no-magic-numbers
+            tabIndex={props.hidden || disabled ? -1 : undefined}
+            value={props.value}
+          />
+        </Fragment>
+      )}
+    </div>
+  );
+});
+
+TextArea.displayName = 'TextArea';
+
+export default TextArea;

package/src/ActivityFeedback/private/FeedbackVoteButton.tsx

@@ -0,0 +1,63 @@
+import { hooks } from 'botframework-webchat-api';
+import { onErrorResumeNext, parseVoteAction, type OrgSchemaAction } from 'botframework-webchat-core';
+import React, { memo, useCallback, useMemo } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+import classNames from 'classnames';
+import useHasSubmitted from '../providers/useHasSubmitted';
+import useSelectedAction from '../providers/useSelectedAction';
+import useShouldAllowResubmit from '../providers/useShouldAllowResubmit';
+import useShouldShowFeedbackForm from '../providers/useShouldShowFeedbackForm';
+import ThumbButton from './ThumbButton';
+
+const { useLocalizer, useStyleOptions } = hooks;
+
+type FeedbackVoteButtonProps = Readonly<{
+  action: OrgSchemaAction;
+}>;
+
+function FeedbackVoteButton({ action }: FeedbackVoteButtonProps) {
+  const [{ feedbackActionsPlacement }] = useStyleOptions();
+  const [hasSubmitted] = useHasSubmitted();
+  const [selectedAction, setSelectedAction] = useSelectedAction();
+  const [shouldAllowResubmit] = useShouldAllowResubmit();
+  const [shouldShowFeedbackForm] = useShouldShowFeedbackForm();
+  const actionRef = useRefFrom(action);
+  const direction = useMemo(() => {
+    if (
+      action['@type'] === 'DislikeAction' ||
+      (action['@type'] === 'VoteAction' &&
+        onErrorResumeNext(() => parseVoteAction(action))?.actionOption === 'downvote')
+    ) {
+      return 'down';
+    }
+
+    return 'up';
+  }, [action]);
+  const localize = useLocalizer();
+
+  const selectedActionRef = useRefFrom(selectedAction);
+
+  const handleClick = useCallback(
+    () => setSelectedAction(actionRef.current === selectedActionRef.current ? undefined : actionRef.current),
+    [actionRef, selectedActionRef, setSelectedAction]
+  );
+  const disabled = hasSubmitted && !shouldAllowResubmit;
+
+  return (
+    <ThumbButton
+      className={classNames({
+        'webchat__thumb-button--large': shouldShowFeedbackForm || feedbackActionsPlacement === 'activity-actions',
+        'webchat__thumb-button--submitted': hasSubmitted
+      })}
+      direction={direction}
+      disabled={disabled}
+      onClick={handleClick}
+      pressed={selectedAction === action}
+      title={disabled ? localize('VOTE_COMPLETE_ALT') : undefined}
+    />
+  );
+}
+
+export default memo(FeedbackVoteButton);
+export { type FeedbackVoteButtonProps };

package/src/ActivityFeedback/private/FeedbackVoteButtonBar.tsx

@@ -0,0 +1,25 @@
+import React, { Fragment, memo, type ReactNode } from 'react';
+
+import useActions from '../providers/useActions';
+import FeedbackVoteButton from './FeedbackVoteButton';
+
+type FeedbackVoteButtonBarProps = Readonly<{
+  children?: ReactNode | undefined;
+}>;
+
+function FeedbackVoteButtonBar() {
+  const [actions] = useActions();
+
+  return (
+    <Fragment>
+      {actions.map((action, index) => (
+        <FeedbackVoteButton action={action} key={action['@id'] || index} />
+      ))}
+    </Fragment>
+  );
+}
+
+FeedbackVoteButtonBar.displayName = 'FeedbackVoteButtonBar';
+
+export default memo(FeedbackVoteButtonBar);
+export { type FeedbackVoteButtonBarProps };

package/src/{ActivityStatus/private/Feedback → ActivityFeedback}/private/ThumbButton.Image.tsx

@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 
-import ThumbDislike16Filled from './icons/ThumbDislike16Filled';
-import ThumbDislike16Regular from './icons/ThumbDislike16Regular';
-import ThumbLike16Filled from './icons/ThumbLike16Filled';
-import ThumbLike16Regular from './icons/ThumbLike16Regular';
+import ThumbDislike16Filled from './ThumbDislike16Filled';
+import ThumbDislike16Regular from './ThumbDislike16Regular';
+import ThumbLike16Filled from './ThumbLike16Filled';
+import ThumbLike16Regular from './ThumbLike16Regular';
 
 type Props = Readonly<{
   className?: string;

package/src/{ActivityStatus/private/Feedback → ActivityFeedback}/private/ThumbButton.tsx

@@ -1,39 +1,51 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { memo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
+import { useRefFrom } from 'use-ref-from';
 
 import ThumbButtonImage from './ThumbButton.Image';
-import useStyleSet from '../../../../hooks/useStyleSet';
+import useStyleSet from '../../hooks/useStyleSet';
+import { Tooltip } from '../../Tooltip';
 
 const { useLocalizer } = hooks;
 
 type Props = Readonly<{
+  className?: string | undefined;
   direction: 'down' | 'up';
+  disabled?: boolean | undefined;
   onClick?: () => void;
   pressed?: boolean;
+  title?: string | undefined;
 }>;
 
-const ThumbButton = memo(({ direction, onClick, pressed }: Props) => {
+const ThumbButton = memo(({ className, direction, disabled, onClick, pressed, title }: Props) => {
   const [{ thumbButton }] = useStyleSet();
   const localize = useLocalizer();
+  const onClickRef = useRefFrom(onClick);
 
-  const title = localize(direction === 'down' ? 'VOTE_DISLIKE_ALT' : 'VOTE_LIKE_ALT');
+  const buttonTitle = useMemo(
+    () => title ?? localize(direction === 'down' ? 'VOTE_DISLIKE_ALT' : 'VOTE_LIKE_ALT'),
+    [direction, localize, title]
+  );
+
+  const handleClick = useCallback(() => !disabled && onClickRef.current?.(), [disabled, onClickRef]);
 
   return (
     <button
-      aria-label={title}
+      aria-disabled={disabled ? 'true' : undefined}
+      aria-label={buttonTitle}
       aria-pressed={pressed}
       className={classNames(
         'webchat__thumb-button',
         { 'webchat__thumb-button--is-pressed': pressed },
+        className,
         thumbButton + ''
       )}
-      onClick={onClick}
-      title={title}
+      onClick={handleClick}
       type="button"
     >
       <ThumbButtonImage
-        className={classNames('webchat__thumb-button__image', {
+        className={classNames('webchat__thumb-button__image', 'webchat__thumb-button__image--is-stroked', {
           'webchat__thumb-button__image--is-down': direction === 'down'
         })}
         direction={direction}
@@ -45,6 +57,7 @@ const ThumbButton = memo(({ direction, onClick, pressed }: Props) => {
         direction={direction}
         filled={true}
       />
+      <Tooltip>{buttonTitle}</Tooltip>
     </button>
   );
 });

package/src/ActivityFeedback/private/getDisclaimer.ts

@@ -0,0 +1,6 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { hasDisclaimer } from './hasFeedbackLoop';
+
+export default function getDisclaimer(activity: WebChatActivity): string | undefined {
+  return hasDisclaimer(activity) ? activity.channelData.feedbackLoop.disclaimer : undefined;
+}

package/src/ActivityFeedback/private/hasFeedbackLoop.ts

@@ -0,0 +1,36 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { literal, object, optional, safeParse, 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>;
+
+export function hasDisclaimer(
+  activity: WebChatActivity
+): activity is WebChatActivity & InferOutput<typeof activityWithFeedbackLoopSchemaWithDisclaimer> {
+  return safeParse(activityWithFeedbackLoopSchemaWithDisclaimer, activity).success;
+}
+
+export default function hasFeedbackLoop(activity: WebChatActivity): activity is FeedbackActivity {
+  return safeParse(feedbackLoopSchema, activity).success;
+}