+
{localize('FEEDBACK_FORM_TITLE')}
- {disclaimer &&
}
-
-
);
}
diff --git a/packages/component/src/ActivityFeedback/private/FeedbackLoopWithMessage.tsx b/packages/component/src/ActivityFeedback/private/FeedbackLoopWithMessage.tsx
deleted file mode 100644
index ea6fe01fb5..0000000000
--- a/packages/component/src/ActivityFeedback/private/FeedbackLoopWithMessage.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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 (
-
-
-
-
- {isExpanded &&
}
-
- );
-}
-
-export default memo(FeedbackLoopWithMessage);
diff --git a/packages/component/src/ActivityFeedback/private/FeedbackLoopWithoutMessage.tsx b/packages/component/src/ActivityFeedback/private/FeedbackLoopWithoutMessage.tsx
deleted file mode 100644
index dc172b0f7f..0000000000
--- a/packages/component/src/ActivityFeedback/private/FeedbackLoopWithoutMessage.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React, { memo } from 'react';
-import FeedbackVoteButtonBar from './FeedbackVoteButtonBar';
-
-function FeedbackLoopWithoutMessage() {
- return
;
-}
-
-export default memo(FeedbackLoopWithoutMessage);
diff --git a/packages/component/src/ActivityFeedback/private/FeedbackTextArea.tsx b/packages/component/src/ActivityFeedback/private/FeedbackTextArea.tsx
index de9b684c18..3659222006 100644
--- a/packages/component/src/ActivityFeedback/private/FeedbackTextArea.tsx
+++ b/packages/component/src/ActivityFeedback/private/FeedbackTextArea.tsx
@@ -12,6 +12,7 @@ import useStyleSet from '../../hooks/useStyleSet';
const { useUIState } = hooks;
+// TODO: Need review. Dedupe with send box text area.
const TextArea = forwardRef<
HTMLTextAreaElement,
Readonly<{
diff --git a/packages/component/src/ActivityFeedback/private/FeedbackVoteButton.tsx b/packages/component/src/ActivityFeedback/private/FeedbackVoteButton.tsx
index 1bdc521ef8..1d83973c10 100644
--- a/packages/component/src/ActivityFeedback/private/FeedbackVoteButton.tsx
+++ b/packages/component/src/ActivityFeedback/private/FeedbackVoteButton.tsx
@@ -1,28 +1,52 @@
import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
import { onErrorResumeNext, parseVoteAction, type OrgSchemaAction } from 'botframework-webchat-core';
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
import { useRefFrom } from 'use-ref-from';
+import { custom, literal, object, optional, pipe, readonly, safeParse, union, type InferInput } from 'valibot';
-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 { 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;
-type FeedbackVoteButtonProps = Readonly<{
- action: OrgSchemaAction;
-}>;
+const feedbackVoteButtonPropsSchema = pipe(
+ object({
+ action: custom
(
+ value =>
+ safeParse(
+ union([
+ object({
+ '@type': union([literal('DislikeAction'), literal('LikeAction')])
+ }),
+ object({
+ '@type': literal('VoteAction'),
+ actionOption: optional(union([literal('downvote'), literal('upvote')]))
+ })
+ ]),
+ value
+ ).success
+ ),
+ as: union([literal('button'), literal('radio')])
+ }),
+ readonly()
+);
+
+type FeedbackVoteButtonProps = InferInput;
+
+function FeedbackVoteButton(props: FeedbackVoteButtonProps) {
+ const { useHasSubmitted, useSelectedAction: useSelectedActions } = useActivityFeedbackHooks();
+
+ const { action, as } = validateProps(feedbackVoteButtonPropsSchema, props);
-function FeedbackVoteButton({ action }: FeedbackVoteButtonProps) {
const [{ feedbackActionsPlacement }] = useStyleOptions();
const [hasSubmitted] = useHasSubmitted();
- const [selectedAction, setSelectedAction] = useSelectedAction();
- const [shouldAllowResubmit] = useShouldAllowResubmit();
- const [shouldShowFeedbackForm] = useShouldShowFeedbackForm();
+ const [selectedAction, setSelectedAction] = useSelectedActions();
const actionRef = useRefFrom(action);
+ const buttonRef = useRef(null);
const direction = useMemo(() => {
if (
action['@type'] === 'DislikeAction' ||
@@ -42,22 +66,26 @@ function FeedbackVoteButton({ action }: FeedbackVoteButtonProps) {
() => setSelectedAction(actionRef.current === selectedActionRef.current ? undefined : actionRef.current),
[actionRef, selectedActionRef, setSelectedAction]
);
- const disabled = hasSubmitted && !shouldAllowResubmit;
+ const disabled = hasSubmitted && !canActionResubmit(action);
+
+ useListenToActivityFeedbackFocus(
+ useCallback(target => target === actionRef.current && buttonRef.current?.focus(), [actionRef])
+ );
return (
);
}
export default memo(FeedbackVoteButton);
-export { type FeedbackVoteButtonProps };
+export { feedbackVoteButtonPropsSchema, type FeedbackVoteButtonProps };
diff --git a/packages/component/src/ActivityFeedback/private/FeedbackVoteButtonBar.tsx b/packages/component/src/ActivityFeedback/private/FeedbackVoteButtonBar.tsx
index 111f60b4bc..ce6b408015 100644
--- a/packages/component/src/ActivityFeedback/private/FeedbackVoteButtonBar.tsx
+++ b/packages/component/src/ActivityFeedback/private/FeedbackVoteButtonBar.tsx
@@ -1,25 +1,34 @@
-import React, { Fragment, memo, type ReactNode } from 'react';
+import { validateProps } from 'botframework-webchat-api/internal';
+import React, { memo } from 'react';
+import { literal, object, pipe, readonly, union, type InferInput } from 'valibot';
-import useActions from '../providers/useActions';
+import useActivityFeedbackHooks from '../providers/useActivityFeedbackHooks';
import FeedbackVoteButton from './FeedbackVoteButton';
-type FeedbackVoteButtonBarProps = Readonly<{
- children?: ReactNode | undefined;
-}>;
+const feedbackVoteButtonBarPropsSchema = pipe(
+ object({
+ buttonAs: union([literal('button'), literal('radio')])
+ }),
+ readonly()
+);
+
+type FeedbackVoteButtonBarProps = InferInput;
+
+function FeedbackVoteButtonBar(props: FeedbackVoteButtonBarProps) {
+ const { buttonAs } = validateProps(feedbackVoteButtonBarPropsSchema, props);
+
+ const { useActions } = useActivityFeedbackHooks();
-function FeedbackVoteButtonBar() {
const [actions] = useActions();
return (
-
+
{actions.map((action, index) => (
-
+
))}
-
+
);
}
-FeedbackVoteButtonBar.displayName = 'FeedbackVoteButtonBar';
-
export default memo(FeedbackVoteButtonBar);
-export { type FeedbackVoteButtonBarProps };
+export { feedbackVoteButtonBarPropsSchema, type FeedbackVoteButtonBarProps };
diff --git a/packages/component/src/ActivityFeedback/private/ThumbButton.Image.tsx b/packages/component/src/ActivityFeedback/private/ThumbButton.Image.tsx
index 4ebf55e3de..cd84ab3e49 100644
--- a/packages/component/src/ActivityFeedback/private/ThumbButton.Image.tsx
+++ b/packages/component/src/ActivityFeedback/private/ThumbButton.Image.tsx
@@ -1,18 +1,27 @@
+import { validateProps } from 'botframework-webchat-api/internal';
import React, { memo } from 'react';
+import { boolean, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
import ThumbDislike16Filled from './ThumbDislike16Filled';
import ThumbDislike16Regular from './ThumbDislike16Regular';
import ThumbLike16Filled from './ThumbLike16Filled';
import ThumbLike16Regular from './ThumbLike16Regular';
-type Props = Readonly<{
- className?: string;
- direction: 'down' | 'up';
- filled?: boolean;
-}>;
+const thumbButtonImagePropsSchema = pipe(
+ object({
+ className: optional(string()),
+ direction: union([literal('down'), literal('up')]),
+ filled: optional(boolean())
+ }),
+ readonly()
+);
+
+type ThumbButtonImageProps = InferInput;
-const ThumbButtonImage = memo(({ className, direction, filled = false }: Props) =>
- direction === 'down' ? (
+const ThumbButtonImage = memo((props: ThumbButtonImageProps) => {
+ const { className, direction, filled = false } = validateProps(thumbButtonImagePropsSchema, props);
+
+ return direction === 'down' ? (
filled ? (
) : (
@@ -22,9 +31,10 @@ const ThumbButtonImage = memo(({ className, direction, filled = false }: Props)
) : (
- )
-);
+ );
+});
ThumbButtonImage.displayName = 'ThumbButtonImage';
export default ThumbButtonImage;
+export { thumbButtonImagePropsSchema, type ThumbButtonImageProps };
diff --git a/packages/component/src/ActivityFeedback/private/ThumbButton.tsx b/packages/component/src/ActivityFeedback/private/ThumbButton.tsx
index ac5ce993c4..2a1a0bbc66 100644
--- a/packages/component/src/ActivityFeedback/private/ThumbButton.tsx
+++ b/packages/component/src/ActivityFeedback/private/ThumbButton.tsx
@@ -1,24 +1,40 @@
import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
import classNames from 'classnames';
-import React, { memo, useCallback, useMemo } from 'react';
+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 ThumbButtonImage from './ThumbButton.Image';
import useStyleSet from '../../hooks/useStyleSet';
+import testIds from '../../testIds';
import { Tooltip } from '../../Tooltip';
+import ThumbButtonImage from './ThumbButton.Image';
const { useLocalizer } = hooks;
-type Props = Readonly<{
- className?: string | undefined;
- direction: 'down' | 'up';
- disabled?: boolean | undefined;
- onClick?: () => void;
- pressed?: boolean;
- title?: string | undefined;
-}>;
+const thumbButtonPropsSchema = pipe(
+ object({
+ as: union([literal('button'), literal('radio')]),
+ className: optional(string()),
+ direction: union([literal('down'), literal('up')]),
+ disabled: optional(boolean()),
+ onClick: optional(function_()),
+ pressed: optional(boolean()),
+ size: union([literal('small'), literal('large')]),
+ submitted: optional(boolean()),
+ title: optional(string())
+ }),
+ readonly()
+);
+
+type ThumbButtonProps = InferInput;
+
+function ThumbButton(props: ThumbButtonProps, ref: ForwardedRef) {
+ const { as, className, direction, disabled, onClick, pressed, size, submitted, title } = validateProps(
+ thumbButtonPropsSchema,
+ props
+ );
-const ThumbButton = memo(({ className, direction, disabled, onClick, pressed, title }: Props) => {
const [{ thumbButton }] = useStyleSet();
const localize = useLocalizer();
const onClickRef = useRefFrom(onClick);
@@ -28,22 +44,49 @@ const ThumbButton = memo(({ className, direction, disabled, onClick, pressed, ti
[direction, localize, title]
);
- const handleClick = useCallback(() => !disabled && onClickRef.current?.(), [disabled, onClickRef]);
+ const handleClickOrChange = useCallback(() => !disabled && onClickRef.current?.(), [disabled, onClickRef]);
+
+ const handleKeyDown = useCallback>(event => {
+ // Do not submit the