botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

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

@@ -1,123 +0,0 @@
-:global(.webchat) .feedback-form {
-  display: contents;
-
-  .feedback-form__vote-button-bar {
-    display: flex;
-    gap: 2px;
-  }
-
-  .feedback-form__form {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    position: relative;
-    /* The form should take the full width of the flex container width. */
-    width: 100%;
-  }
-
-  .feedback-form__form-header {
-    color: #373435;
-    display: flex;
-    flex-direction: column;
-    font-family: var(--webchat__font--primary);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-  }
-
-  .feedback-form__text-box {
-    background-color: #ffffff;
-    border-radius: 4px;
-    border: 1px solid #e8e8e8;
-    font-size: 14px;
-    line-height: 20px;
-    overflow: hidden;
-    padding: 8px 12px;
-    position: relative;
-
-    &::after {
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      border-bottom: 3px solid var(--webchat__color--accent);
-      bottom: -1px;
-      clip-path: inset(calc(100% - 3px) 50% 0 50%);
-      content: '';
-      height: 4px;
-      left: -1px;
-      position: absolute;
-      right: -1px;
-      transition: none;
-    }
-
-    &:focus-within {
-      border: 1px solid #e8e8e8;
-    }
-
-    &:focus-within::after {
-      clip-path: inset(calc(100% - 3px) 0 0 0);
-      transition: clip-path 200ms cubic-bezier(0, 0, 0, 1);
-    }
-  }
-
-  .feedback-form__text-area {
-    resize: none;
-    margin-inline-end: -8px;
-  }
-
-  .feedback-form__form-footer {
-    color: var(--webchat__color--subtle);
-    font-family: var(--webchat__font--primary);
-    font-size: 10px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
-  }
-
-  .feedback-form__submission-button-bar {
-    display: flex;
-    gap: 8px;
-    margin-block-start: 6px;
-  }
-
-  .feedback-form__submit-button {
-    background-color: var(--webchat__color--accent);
-    border-radius: 4px;
-    border: 1px solid var(--webchat__color--accent);
-    color: #ffffff;
-    cursor: pointer;
-    font-family: var(--webchat__font--primary);
-    font-size: 12px;
-    height: 24px;
-    padding: 0 8px;
-  }
-
-  .feedback-form__submit-button:hover {
-    background-color: #004a98;
-    border: 1px solid #004a98;
-    color: #ffffff;
-  }
-
-  .feedback-form__submit-button:active {
-    background-color: #004a98;
-    border: 1px solid #004a98;
-    color: #ffffff;
-  }
-
-  .feedback-form__cancel-button {
-    background-color: #ffffff;
-    border-radius: 4px;
-    border: 1px solid #e8e8e8;
-    color: var(--webchat__color--subtle);
-    cursor: pointer;
-    font-family: var(--webchat__font--primary);
-    font-size: 12px;
-    height: 24px;
-    padding: 0 8px;
-  }
-
-  .feedback-form__cancel-button:hover {
-    background-color: var(--webchat__color--subtle);
-    color: #ffffff;
-  }
-}

package/src/ActivityFeedback/private/FeedbackForm.tsx

@@ -1,83 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import React, { memo, useCallback, useEffect, useRef, useState, type FormEventHandler } from 'react';
-import useUniqueId from '../../hooks/internal/useUniqueId';
-import Markdownable from '../../Attachment/Text/private/Markdownable';
-import testIds from '../../testIds';
-import { TextArea } from '../../TextArea';
-import useActivityFeedbackHooks from '../providers/useActivityFeedbackHooks';
-import getDisclaimerFromReviewAction from './getDisclaimerFromReviewAction';
-
-import styles from './FeedbackForm.module.css';
-
-const { useLocalizer } = hooks;
-
-function FeedbackForm() {
-  const classNames = useStyles(styles);
-  const { useFeedbackText, useSelectedAction } = useActivityFeedbackHooks();
-  const feedbackFormHeaderId = useUniqueId('feedback-form__form-header__id');
-  const disclaimerId = useUniqueId('feedback-form__form-footer__id');
-
-  const [selectedAction] = useSelectedAction();
-  const [hasFocus, setHasFocus] = useState(false);
-  const [userFeedback, setUserFeedback] = useFeedbackText();
-  const feedbackTextAreaRef = useRef<HTMLTextAreaElement>(null);
-  const localize = useLocalizer();
-
-  const disclaimer = getDisclaimerFromReviewAction(selectedAction);
-
-  const handleMessageChange: FormEventHandler<HTMLTextAreaElement> = useCallback(
-    ({ currentTarget: { value } }) => setUserFeedback(value),
-    [setUserFeedback]
-  );
-
-  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 (
-    <div className={classNames['feedback-form__form']}>
-      <span
-        className={classNames['feedback-form__form-header']}
-        // "id" is required for "aria-labelledby"
-        // eslint-disable-next-line react/forbid-dom-props
-        id={feedbackFormHeaderId}
-      >
-        {localize('FEEDBACK_FORM_TITLE')}
-      </span>
-      <div className={classNames['feedback-form__text-box']}>
-        <TextArea
-          aria-describedby={disclaimer ? disclaimerId : undefined}
-          aria-labelledby={feedbackFormHeaderId}
-          className={classNames['feedback-form__text-area']}
-          data-testid={testIds.feedbackSendBox}
-          onInput={handleMessageChange}
-          placeholder={localize('FEEDBACK_FORM_PLACEHOLDER')}
-          ref={feedbackTextAreaRef}
-          startRows={3}
-          value={userFeedback}
-        />
-      </div>
-      {disclaimer && (
-        <Markdownable className={classNames['feedback-form__form-footer']} id={disclaimerId} text={disclaimer} />
-      )}
-      <div className={classNames['feedback-form__submission-button-bar']}>
-        <button className={classNames['feedback-form__submit-button']} type="submit">
-          {localize('FEEDBACK_FORM_SUBMIT_BUTTON_LABEL')}
-        </button>
-        <button className={classNames['feedback-form__cancel-button']} type="reset">
-          {localize('FEEDBACK_FORM_CANCEL_BUTTON_LABEL')}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default memo(FeedbackForm);

package/src/ActivityFeedback/private/FeedbackVoteButton.tsx

@@ -1,88 +0,0 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { hooks } from 'botframework-webchat-api';
-import { orgSchemaActionSchema, orgSchemaVoteActionSchema } from 'botframework-webchat-core/org-schema.js';
-import React, { memo, useCallback, useMemo, useRef } from 'react';
-import { useRefFrom } from 'use-ref-from';
-import { literal, object, pipe, readonly, string, union, type InferInput } from 'valibot';
-import { isOfType } from 'botframework-webchat-core/json-ld.js';
-
-import { useListenToActivityFeedbackFocus } from '../providers/private/FocusPropagation';
-import useActivityFeedbackHooks from '../providers/useActivityFeedbackHooks';
-import ThumbButton from './ThumbButton';
-import canActionResubmit from './canActionResubmit';
-import isActionRequireReview from './isActionRequireReview';
-
-const { useLocalizer, useStyleOptions } = hooks;
-
-const feedbackVoteButtonPropsSchema = pipe(
-  object({
-    action: union([orgSchemaActionSchema, orgSchemaVoteActionSchema]),
-    as: union([literal('button'), literal('radio')]),
-    name: string()
-  }),
-  readonly()
-);
-
-type FeedbackVoteButtonProps = InferInput<typeof feedbackVoteButtonPropsSchema>;
-
-function FeedbackVoteButton(props: FeedbackVoteButtonProps) {
-  const { useHasSubmitted, useSelectedAction: useSelectedActions } = useActivityFeedbackHooks();
-
-  const { action, as, name } = validateProps(feedbackVoteButtonPropsSchema, props);
-
-  const [{ feedbackActionsPlacement }] = useStyleOptions();
-  const [hasSubmitted] = useHasSubmitted();
-  const [selectedAction, setSelectedAction] = useSelectedActions();
-  const actionRef = useRefFrom(action);
-  const buttonRef = useRef<HTMLInputElement>(null);
-  const direction = useMemo(() => {
-    if (isOfType('DislikeAction', action)) {
-      return 'down';
-    } else if (isOfType('LikeAction', action)) {
-      return 'up';
-    } else if (isOfType('VoteAction', action)) {
-      if (action.actionOption[0] === 'downvote') {
-        return 'down';
-      } else if (action.actionOption[0] === 'upvote') {
-        return 'up';
-      }
-    }
-
-    console.warn(
-      'botframework-webchat: <FeedbackVoteButton> supports `DislikeAction`, `LikeAction`, and `VoteAction` with `actionOption` of "downvote" and "upvote" only.'
-    );
-
-    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 && !canActionResubmit(action);
-
-  useListenToActivityFeedbackFocus(
-    useCallback(target => target === actionRef.current && buttonRef.current?.focus(), [actionRef])
-  );
-
-  return (
-    <ThumbButton
-      as={as}
-      direction={direction}
-      disabled={disabled}
-      name={name}
-      onClick={handleClick}
-      pressed={selectedAction === action}
-      ref={buttonRef}
-      size={isActionRequireReview(action) || feedbackActionsPlacement === 'activity-actions' ? 'large' : 'small'}
-      submitted={hasSubmitted}
-      title={disabled ? localize('VOTE_COMPLETE_ALT') : undefined}
-    />
-  );
-}
-
-export default memo(FeedbackVoteButton);
-export { feedbackVoteButtonPropsSchema, type FeedbackVoteButtonProps };

package/src/ActivityFeedback/private/FeedbackVoteButtonBar.tsx

@@ -1,40 +0,0 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import React, { memo } from 'react';
-import { literal, object, pipe, readonly, union, type InferInput } from 'valibot';
-
-import useUniqueId from '../../hooks/internal/useUniqueId';
-import useActivityFeedbackHooks from '../providers/useActivityFeedbackHooks';
-import FeedbackVoteButton from './FeedbackVoteButton';
-
-import styles from './FeedbackForm.module.css';
-
-const feedbackVoteButtonBarPropsSchema = pipe(
-  object({
-    buttonAs: union([literal('button'), literal('radio')])
-  }),
-  readonly()
-);
-
-type FeedbackVoteButtonBarProps = InferInput<typeof feedbackVoteButtonBarPropsSchema>;
-
-function FeedbackVoteButtonBar(props: FeedbackVoteButtonBarProps) {
-  const classNames = useStyles(styles);
-  const { buttonAs } = validateProps(feedbackVoteButtonBarPropsSchema, props);
-
-  const { useActions } = useActivityFeedbackHooks();
-
-  const [actions] = useActions();
-  const name = useUniqueId('webchat__feedback-form__vote-button-bar');
-
-  return (
-    <div className={classNames['feedback-form__vote-button-bar']}>
-      {actions.map((action, index) => (
-        <FeedbackVoteButton action={action} as={buttonAs} key={action['@id'] || index} name={name} />
-      ))}
-    </div>
-  );
-}
-
-export default memo(FeedbackVoteButtonBar);
-export { feedbackVoteButtonBarPropsSchema, type FeedbackVoteButtonBarProps };

package/src/ActivityFeedback/private/ThumbButton.Image.tsx

@@ -1,35 +0,0 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import React, { memo } from 'react';
-import { boolean, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
-
-import { ComponentIcon } from '../../Icon';
-
-const thumbButtonImagePropsSchema = pipe(
-  object({
-    className: optional(string()),
-    direction: union([literal('down'), literal('up')]),
-    filled: optional(boolean())
-  }),
-  readonly()
-);
-
-type ThumbButtonImageProps = InferInput<typeof thumbButtonImagePropsSchema>;
-
-const ThumbButtonImage = memo((props: ThumbButtonImageProps) => {
-  const { className, direction, filled = false } = validateProps(thumbButtonImagePropsSchema, props);
-
-  return (
-    <ComponentIcon
-      appearance="text"
-      className={className}
-      icon={
-        direction === 'down' ? (filled ? 'thumb-down-filled' : 'thumb-down') : filled ? 'thumb-up-filled' : 'thumb-up'
-      }
-    />
-  );
-});
-
-ThumbButtonImage.displayName = 'ThumbButtonImage';
-
-export default ThumbButtonImage;
-export { thumbButtonImagePropsSchema, type ThumbButtonImageProps };

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

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

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

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

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

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

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

@@ -1,10 +0,0 @@
-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);
-}