diff --git a/CHANGELOG.md b/CHANGELOG.md index ef0d2e4d95..8c635abdff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -74,7 +74,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/ - Added support for math blocks using `$$` delimiter alongside existing `\[...\]` and `\(...\)` notations, in PR [#5381](https://github.com/microsoft/BotFramework-WebChat/pull/5381), by [@OEvgeny](https://github.com/OEvgeny) - Added support for speech recognition initial silence timeout when using Azure Speech, in PR [#5400](https://github.com/microsoft/BotFramework/WebChat/pull/5400), by [@compulim](https://github.com/compulim) - Introduced syntax highlighting for markdown code blocks, in PR [#5389](https://github.com/microsoft/BotFramework-WebChat/pull/5389), by [@OEvgeny](https://github.com/OEvgeny) -- Added `feedbackActionsPlacement` style option to control feedback button placement, in PR [#5407](https://github.com/microsoft/BotFramework-WebChat/pull/5407), by [@OEvgeny](https://github.com/OEvgeny) +- (Experimental) Added `feedbackActionsPlacement` style option to control feedback button placement, in PR [#5407](https://github.com/microsoft/BotFramework-WebChat/pull/5407), by [@OEvgeny](https://github.com/OEvgeny) - New style option supports two values: `'activity-actions'` and `'activity-status'` (default) - When set to `'activity-actions'`, feedback buttons are displayed in the activity actions toolbar - When set to `'activity-status'`, feedback buttons appear in the activity status area (default behavior) diff --git a/__tests__/html2/activity/feedback.activity.html b/__tests__/html2/activity/feedback.activity.html new file mode 100644 index 0000000000..f930e1baaa --- /dev/null +++ b/__tests__/html2/activity/feedback.activity.html @@ -0,0 +1,143 @@ + + + + + + + + + + + + +
+ + + diff --git a/__tests__/html2/activity/feedback.activity.html.snap-1.png b/__tests__/html2/activity/feedback.activity.html.snap-1.png new file mode 100644 index 0000000000..fe389e042e Binary files /dev/null and b/__tests__/html2/activity/feedback.activity.html.snap-1.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-2.png b/__tests__/html2/activity/feedback.activity.html.snap-2.png new file mode 100644 index 0000000000..5f8ab84a05 Binary files /dev/null and b/__tests__/html2/activity/feedback.activity.html.snap-2.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-3.png b/__tests__/html2/activity/feedback.activity.html.snap-3.png new file mode 100644 index 0000000000..1b4a6f5974 Binary files /dev/null and b/__tests__/html2/activity/feedback.activity.html.snap-3.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-4.png b/__tests__/html2/activity/feedback.activity.html.snap-4.png new file mode 100644 index 0000000000..cba6d2efdd Binary files /dev/null and b/__tests__/html2/activity/feedback.activity.html.snap-4.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-5.png b/__tests__/html2/activity/feedback.activity.html.snap-5.png new file mode 100644 index 0000000000..1a330e4f64 Binary files /dev/null and b/__tests__/html2/activity/feedback.activity.html.snap-5.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-6.png b/__tests__/html2/activity/feedback.activity.html.snap-6.png new file mode 100644 index 0000000000..166082fd9c Binary files /dev/null and b/__tests__/html2/activity/feedback.activity.html.snap-6.png differ diff --git a/__tests__/html2/activity/feedback.status.html b/__tests__/html2/activity/feedback.status.html new file mode 100644 index 0000000000..b56f8ffaa1 --- /dev/null +++ b/__tests__/html2/activity/feedback.status.html @@ -0,0 +1,158 @@ + + + + + + + + + + + + +
+ + + diff --git a/__tests__/html2/activity/feedback.status.html.snap-1.png b/__tests__/html2/activity/feedback.status.html.snap-1.png new file mode 100644 index 0000000000..cd365c6e45 Binary files /dev/null and b/__tests__/html2/activity/feedback.status.html.snap-1.png differ diff --git a/__tests__/html2/activity/feedback.status.html.snap-2.png b/__tests__/html2/activity/feedback.status.html.snap-2.png new file mode 100644 index 0000000000..55b11b5922 Binary files /dev/null and b/__tests__/html2/activity/feedback.status.html.snap-2.png differ diff --git a/__tests__/html2/activity/feedback.status.html.snap-3.png b/__tests__/html2/activity/feedback.status.html.snap-3.png new file mode 100644 index 0000000000..26fcc14fc6 Binary files /dev/null and b/__tests__/html2/activity/feedback.status.html.snap-3.png differ diff --git a/__tests__/html2/activity/feedback.status.html.snap-4.png b/__tests__/html2/activity/feedback.status.html.snap-4.png new file mode 100644 index 0000000000..f173014f25 Binary files /dev/null and b/__tests__/html2/activity/feedback.status.html.snap-4.png differ diff --git a/__tests__/html2/activity/feedback.status.html.snap-5.png b/__tests__/html2/activity/feedback.status.html.snap-5.png new file mode 100644 index 0000000000..8f798755e1 Binary files /dev/null and b/__tests__/html2/activity/feedback.status.html.snap-5.png differ diff --git a/packages/api/src/StyleOptions.ts b/packages/api/src/StyleOptions.ts index af3ac96784..70dfb01051 100644 --- a/packages/api/src/StyleOptions.ts +++ b/packages/api/src/StyleOptions.ts @@ -930,13 +930,15 @@ type StyleOptions = { codeBlockTheme?: 'github-light-default' | 'github-dark-default'; /** - * Feedback buttons placement + * (EXPERIMENTAL) Feedback buttons placement * * - `'activity-actions'` - place feedback buttons inside activity actions * - `'activity-status'` - place feedback buttons inside activity status * * @default 'activity-status' * + * @deprecated This is an experimental style options and should not be used without understanding its risk. + * * New in 4.19.0. */ feedbackActionsPlacement?: 'activity-actions' | 'activity-status'; diff --git a/packages/component/src/Activity/ActivityFeedback.tsx b/packages/component/src/Activity/ActivityFeedback.tsx index e405c7a036..2cb7ad93a0 100644 --- a/packages/component/src/Activity/ActivityFeedback.tsx +++ b/packages/component/src/Activity/ActivityFeedback.tsx @@ -10,17 +10,16 @@ const { useStyleOptions } = hooks; type ActivityFeedbackProps = Readonly<{ activity: WebChatActivity; - placement: 'activity-status' | 'activity-actions'; }>; -function ActivityFeedback({ activity, placement }: ActivityFeedbackProps) { +function ActivityFeedback({ activity }: ActivityFeedbackProps) { const [{ feedbackActionsPlacement }] = useStyleOptions(); const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]); const messageThing = useMemo(() => getOrgSchemaMessage(graph), [graph]); - const feedbackActions = useMemo | undefined>(() => { + const feedbackActions = useMemo>(() => { try { const reactActions = (messageThing?.potentialAction || []).filter( ({ '@type': type }) => type === 'LikeAction' || type === 'DislikeAction' @@ -38,16 +37,17 @@ function ActivityFeedback({ activity, placement }: ActivityFeedbackProps) { } catch { // Intentionally left blank. } + return Object.freeze(new Set([] as OrgSchemaAction[])); }, [graph, messageThing?.potentialAction]); - return feedbackActions?.size && placement === feedbackActionsPlacement ? ( + return ( - ) : null; + ); } export default memo(ActivityFeedback); diff --git a/packages/component/src/Activity/private/Feedback.tsx b/packages/component/src/Activity/private/Feedback.tsx index 1bdd9bf1e3..feb4427e5f 100644 --- a/packages/component/src/Activity/private/Feedback.tsx +++ b/packages/component/src/Activity/private/Feedback.tsx @@ -56,7 +56,7 @@ const Feedback = memo(({ actions, className }: Props) => { return ( - {Array.from(actions).map((action, index) => ( + {[...actions].map((action, index) => ( ; const warnRootLevelThings = warnOnce( @@ -23,6 +26,7 @@ const warnRootLevelThings = warnOnce( ); const OthersActivityStatus = memo(({ activity, className }: Props) => { + const [{ feedbackActionsPlacement }] = useStyleOptions(); const [{ sendStatus }] = useStyleSet(); const { timestamp } = activity; const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]); @@ -57,11 +61,21 @@ const OthersActivityStatus = memo(({ activity, className }: Props) => { return ( - {timestamp && } - {claimInterpreter && } - - - + {timestamp && ( + + + + )} + {claimInterpreter && ( + + + + )} + {feedbackActionsPlacement === 'activity-status' && ( + + + + )} ); }); diff --git a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx index 7676cadf43..07f4b57a8a 100644 --- a/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx +++ b/packages/component/src/Attachment/Text/private/MarkdownTextContent.tsx @@ -27,7 +27,7 @@ import isBasedOnSoftwareSourceCode from './isBasedOnSoftwareSourceCode'; import isHTMLButtonElement from './isHTMLButtonElement'; import ActivityFeedback from '../../../Activity/ActivityFeedback'; -const { useLocalizer } = hooks; +const { useLocalizer, useStyleOptions } = hooks; type Entry = { claim?: OrgSchemaClaim | undefined; @@ -48,6 +48,7 @@ function isCitationURL(url: string): boolean { } const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => { + const [{ feedbackActionsPlacement }] = useStyleOptions(); const [ { citationModalDialog: citationModalDialogStyleSet, @@ -245,7 +246,9 @@ const MarkdownTextContent = memo(({ activity, children, markdown }: Props) => { {activity.type === 'message' && activity.text && messageThing?.keywords?.includes('AllowCopy') ? ( ) : null} - + {activity.type === 'message' && feedbackActionsPlacement === 'activity-actions' && ( + + )} ); diff --git a/packages/component/src/Styles/StyleSet/ThumbButton.ts b/packages/component/src/Styles/StyleSet/ThumbButton.ts index cb816fae82..85613c1d53 100644 --- a/packages/component/src/Styles/StyleSet/ThumbButton.ts +++ b/packages/component/src/Styles/StyleSet/ThumbButton.ts @@ -59,21 +59,15 @@ export default function () { } }, - '&:not([aria-disabled="true"]):hover .webchat__thumb-button__image': { - '&.webchat__thumb-button__image--is-stroked': { - visibility: 'hidden' - }, - '&.webchat__thumb-button__image--is-filled': { - visibility: 'visible' - } - }, + '&:not([aria-disabled="true"]):hover, &.webchat__thumb-button--is-pressed': { + '& .webchat__thumb-button__image': { + '&.webchat__thumb-button__image--is-stroked': { + visibility: 'hidden' + }, - '&.webchat__thumb-button--is-pressed .webchat__thumb-button__image': { - '&.webchat__thumb-button__image--is-stroked': { - visibility: 'hidden' - }, - '&.webchat__thumb-button__image--is-filled': { - visibility: 'visible' + '&.webchat__thumb-button__image--is-filled': { + visibility: 'visible' + } } } } diff --git a/packages/component/src/Tooltip/private/Tooltip.tsx b/packages/component/src/Tooltip/private/Tooltip.tsx index 1bba3119d7..6cdc2bb3b4 100644 --- a/packages/component/src/Tooltip/private/Tooltip.tsx +++ b/packages/component/src/Tooltip/private/Tooltip.tsx @@ -15,7 +15,7 @@ function Tooltip({ children, className, position = 'block-start' }: TooltipProps {children}