diff --git a/CHANGELOG.md b/CHANGELOG.md index 83129e759d..d46386b384 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -121,7 +121,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/ - `@msinternal/botframework-webchat-react-hooks` for helpers for React hooks - Added link sanitization and ESLint rules, in PR [#5564](https://github.com/microsoft/BotFramework-WebChat/pull/5564), by [@compulim](https://github.com/compulim) - Added blob URL sanitization and ESLint rules, in PR [#5568](https://github.com/microsoft/BotFramework-WebChat/pull/5568), by [@compulim](https://github.com/compulim) -- Added visual message grouping following the `isPartOf` property of the `Message` entity, in PR [#5553](https://github.com/microsoft/BotFramework-WebChat/pull/5553), by [@OEvgeny](https://github.com/OEvgeny) +- Added visual message grouping following the `isPartOf` property of the `Message` entity, in PR [#5553](https://github.com/microsoft/BotFramework-WebChat/pull/5553), in PR [#5585](https://github.com/microsoft/BotFramework-WebChat/pull/5585), by [@OEvgeny](https://github.com/OEvgeny) - The mode is suitable for providing chain-of-thought reasoning - Added visual indication of `creativeWorkStatus` property in `Message` entity: - `undefined` - no indicator is shown diff --git a/__tests__/html2/part-grouping/avatar.html b/__tests__/html2/part-grouping/avatar.html new file mode 100644 index 0000000000..f03a09e3a7 --- /dev/null +++ b/__tests__/html2/part-grouping/avatar.html @@ -0,0 +1,102 @@ + + + + + Avatar layout: grouped + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/__tests__/html2/part-grouping/avatar.html.snap-1.png b/__tests__/html2/part-grouping/avatar.html.snap-1.png new file mode 100644 index 0000000000..5d199b9290 Binary files /dev/null and b/__tests__/html2/part-grouping/avatar.html.snap-1.png differ diff --git a/__tests__/html2/part-grouping/avatar.html.snap-2.png b/__tests__/html2/part-grouping/avatar.html.snap-2.png new file mode 100644 index 0000000000..e83cf74dd9 Binary files /dev/null and b/__tests__/html2/part-grouping/avatar.html.snap-2.png differ diff --git a/__tests__/html2/part-grouping/avatar.html.snap-3.png b/__tests__/html2/part-grouping/avatar.html.snap-3.png new file mode 100644 index 0000000000..6c365a7f6d Binary files /dev/null and b/__tests__/html2/part-grouping/avatar.html.snap-3.png differ diff --git a/__tests__/html2/part-grouping/avatar.html.snap-4.png b/__tests__/html2/part-grouping/avatar.html.snap-4.png new file mode 100644 index 0000000000..289ed59a35 Binary files /dev/null and b/__tests__/html2/part-grouping/avatar.html.snap-4.png differ diff --git a/__tests__/html2/part-grouping/avatar.html.snap-5.png b/__tests__/html2/part-grouping/avatar.html.snap-5.png new file mode 100644 index 0000000000..d9a1e6b3f7 Binary files /dev/null and b/__tests__/html2/part-grouping/avatar.html.snap-5.png differ diff --git a/__tests__/html2/part-grouping/navigation.html b/__tests__/html2/part-grouping/navigation.html new file mode 100644 index 0000000000..7a37478b49 --- /dev/null +++ b/__tests__/html2/part-grouping/navigation.html @@ -0,0 +1,319 @@ + + + + Part grouping: navigation + + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/__tests__/html2/part-grouping/navigation.html.snap-1.png b/__tests__/html2/part-grouping/navigation.html.snap-1.png new file mode 100644 index 0000000000..da4cb138e6 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-1.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-10.png b/__tests__/html2/part-grouping/navigation.html.snap-10.png new file mode 100644 index 0000000000..11dc944ccf Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-10.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-11.png b/__tests__/html2/part-grouping/navigation.html.snap-11.png new file mode 100644 index 0000000000..e0a5ad4f6d Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-11.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-12.png b/__tests__/html2/part-grouping/navigation.html.snap-12.png new file mode 100644 index 0000000000..989d8c765a Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-12.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-13.png b/__tests__/html2/part-grouping/navigation.html.snap-13.png new file mode 100644 index 0000000000..b84fa861a2 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-13.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-14.png b/__tests__/html2/part-grouping/navigation.html.snap-14.png new file mode 100644 index 0000000000..7acea04105 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-14.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-15.png b/__tests__/html2/part-grouping/navigation.html.snap-15.png new file mode 100644 index 0000000000..e9335daf4d Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-15.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-16.png b/__tests__/html2/part-grouping/navigation.html.snap-16.png new file mode 100644 index 0000000000..d0dfc5f414 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-16.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-17.png b/__tests__/html2/part-grouping/navigation.html.snap-17.png new file mode 100644 index 0000000000..f2c856b9b5 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-17.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-18.png b/__tests__/html2/part-grouping/navigation.html.snap-18.png new file mode 100644 index 0000000000..af29d6a2c2 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-18.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-19.png b/__tests__/html2/part-grouping/navigation.html.snap-19.png new file mode 100644 index 0000000000..dcb0ec9308 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-19.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-2.png b/__tests__/html2/part-grouping/navigation.html.snap-2.png new file mode 100644 index 0000000000..1001c79b91 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-2.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-20.png b/__tests__/html2/part-grouping/navigation.html.snap-20.png new file mode 100644 index 0000000000..105a193bc7 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-20.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-21.png b/__tests__/html2/part-grouping/navigation.html.snap-21.png new file mode 100644 index 0000000000..2f9946f935 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-21.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-22.png b/__tests__/html2/part-grouping/navigation.html.snap-22.png new file mode 100644 index 0000000000..0160c940f4 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-22.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-23.png b/__tests__/html2/part-grouping/navigation.html.snap-23.png new file mode 100644 index 0000000000..37b4ac3d0d Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-23.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-24.png b/__tests__/html2/part-grouping/navigation.html.snap-24.png new file mode 100644 index 0000000000..65b54c121d Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-24.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-25.png b/__tests__/html2/part-grouping/navigation.html.snap-25.png new file mode 100644 index 0000000000..82ca8410bf Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-25.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-26.png b/__tests__/html2/part-grouping/navigation.html.snap-26.png new file mode 100644 index 0000000000..d0dfc5f414 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-26.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-3.png b/__tests__/html2/part-grouping/navigation.html.snap-3.png new file mode 100644 index 0000000000..7f59aea044 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-3.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-4.png b/__tests__/html2/part-grouping/navigation.html.snap-4.png new file mode 100644 index 0000000000..166ff98cdf Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-4.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-5.png b/__tests__/html2/part-grouping/navigation.html.snap-5.png new file mode 100644 index 0000000000..a131e5cda0 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-5.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-6.png b/__tests__/html2/part-grouping/navigation.html.snap-6.png new file mode 100644 index 0000000000..439546173a Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-6.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-7.png b/__tests__/html2/part-grouping/navigation.html.snap-7.png new file mode 100644 index 0000000000..82c68e5ed1 Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-7.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-8.png b/__tests__/html2/part-grouping/navigation.html.snap-8.png new file mode 100644 index 0000000000..239a67384f Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-8.png differ diff --git a/__tests__/html2/part-grouping/navigation.html.snap-9.png b/__tests__/html2/part-grouping/navigation.html.snap-9.png new file mode 100644 index 0000000000..e9335daf4d Binary files /dev/null and b/__tests__/html2/part-grouping/navigation.html.snap-9.png differ diff --git a/__tests__/html2/part-grouping/status.html b/__tests__/html2/part-grouping/status.html new file mode 100644 index 0000000000..cfc26f010e --- /dev/null +++ b/__tests__/html2/part-grouping/status.html @@ -0,0 +1,254 @@ + + + + + Part grouping: status + + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/__tests__/html2/part-grouping/status.html.snap-1.png b/__tests__/html2/part-grouping/status.html.snap-1.png new file mode 100644 index 0000000000..36b829d063 Binary files /dev/null and b/__tests__/html2/part-grouping/status.html.snap-1.png differ diff --git a/__tests__/html2/part-grouping/status.html.snap-2.png b/__tests__/html2/part-grouping/status.html.snap-2.png new file mode 100644 index 0000000000..f482140c32 Binary files /dev/null and b/__tests__/html2/part-grouping/status.html.snap-2.png differ diff --git a/__tests__/html2/part-grouping/status.html.snap-3.png b/__tests__/html2/part-grouping/status.html.snap-3.png new file mode 100644 index 0000000000..4c98ab7118 Binary files /dev/null and b/__tests__/html2/part-grouping/status.html.snap-3.png differ diff --git a/__tests__/html2/part-grouping/status.html.snap-4.png b/__tests__/html2/part-grouping/status.html.snap-4.png new file mode 100644 index 0000000000..560616b2ea Binary files /dev/null and b/__tests__/html2/part-grouping/status.html.snap-4.png differ diff --git a/__tests__/html2/part-grouping/status.html.snap-5.png b/__tests__/html2/part-grouping/status.html.snap-5.png new file mode 100644 index 0000000000..e6d906d854 Binary files /dev/null and b/__tests__/html2/part-grouping/status.html.snap-5.png differ diff --git a/__tests__/html2/part-grouping/status.html.snap-6.png b/__tests__/html2/part-grouping/status.html.snap-6.png new file mode 100644 index 0000000000..c4c54bde07 Binary files /dev/null and b/__tests__/html2/part-grouping/status.html.snap-6.png differ diff --git a/__tests__/html2/part-grouping/status.html.snap-7.png b/__tests__/html2/part-grouping/status.html.snap-7.png new file mode 100644 index 0000000000..ce46919682 Binary files /dev/null and b/__tests__/html2/part-grouping/status.html.snap-7.png differ diff --git a/__tests__/html2/part-grouping/status.html.snap-8.png b/__tests__/html2/part-grouping/status.html.snap-8.png new file mode 100644 index 0000000000..c30f4645f2 Binary files /dev/null and b/__tests__/html2/part-grouping/status.html.snap-8.png differ diff --git a/__tests__/html2/part-grouping/status.html.snap-9.png b/__tests__/html2/part-grouping/status.html.snap-9.png new file mode 100644 index 0000000000..6c771c06fe Binary files /dev/null and b/__tests__/html2/part-grouping/status.html.snap-9.png differ diff --git a/packages/component/src/Activity/StackedLayout.module.css b/packages/component/src/Activity/StackedLayout.module.css index 20690bdd2e..388a0f4b6b 100644 --- a/packages/component/src/Activity/StackedLayout.module.css +++ b/packages/component/src/Activity/StackedLayout.module.css @@ -158,7 +158,7 @@ &.stacked-layout--hide-avatar, &.stacked-layout--show-avatar { - .stacked-layout__avatar-gutter { + &.stacked-layout--activity .stacked-layout__avatar-gutter { width: var(--webchat__size--avatar); } } @@ -167,17 +167,17 @@ &.stacked-layout--show-avatar, &.stacked-layout--hide-nub, &.stacked-layout--show-nub { - .stacked-layout__attachment { + &.stacked-layout--activity .stacked-layout__attachment { max-width: calc(var(--webchat__max-width--attachment-bubble) + var(--webchat__padding--regular)); min-width: calc(var(--webchat__min-width--attachment-bubble) + var(--webchat__padding--regular)); } - .stacked-layout__message { + &.stacked-layout--activity .stacked-layout__message { max-width: calc(var(--webchat__max-width--message-bubble) + var(--webchat__padding--regular)); min-width: calc(var(--webchat__min-width--message-bubble) + var(--webchat__padding--regular)); } - .stacked-layout__nub-pad { + &.stacked-layout--activity .stacked-layout__nub-pad { width: var(--webchat__padding--regular); } } @@ -190,6 +190,14 @@ } &.stacked-layout--group { + &.stacked-layout--hide-avatar, + &.stacked-layout--show-avatar { + > .stacked-layout__main > .stacked-layout__avatar-gutter { + margin-inline-end: var(--webchat__padding--regular); + width: var(--webchat__size--avatar); + } + } + .stacked-layout__bubble { grid-template: 'content' 1fr / 1fr; } diff --git a/packages/component/src/Activity/StackedLayout.tsx b/packages/component/src/Activity/StackedLayout.tsx index d0faa133a2..693d9f3864 100644 --- a/packages/component/src/Activity/StackedLayout.tsx +++ b/packages/component/src/Activity/StackedLayout.tsx @@ -32,7 +32,9 @@ type StackedLayoutInnerProps = Readonly<{ activity: WebChatActivity; children?: ReactNode | undefined; fromUser: boolean; + hasAvatar: boolean; hasDisplayText: boolean; + hasNub: boolean; id: string; renderAvatar?: false | (() => Exclude) | undefined; renderBubbleContent: (title?: string | undefined, showStatus?: boolean) => ReactNode; @@ -45,31 +47,24 @@ const StackedLayoutInner = memo( activity, children, fromUser, + hasAvatar, hasDisplayText, + hasNub, id, renderAvatar, renderBubbleContent, showAvatar, showNub }: StackedLayoutInnerProps) => { - const [styleOptions] = useStyleOptions(); const [{ initials: botInitials }] = useAvatarForBot(); - const [{ initials: userInitials }] = useAvatarForUser(); const localize = useLocalizer(); const classNames = useStyles(styles); const messageThing = useMemo(() => getOrgSchemaMessage(activity.entities), [activity]); - const { bubbleNubSize, bubbleFromUserNubSize } = styleOptions; const greetingAlt = ( fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '') ).replace(/\s{2,}/gu, ' '); - const initials = fromUser ? userInitials : botInitials; - const nubSize = fromUser ? bubbleFromUserNubSize : bubbleNubSize; - - const hasAvatar = initials || typeof initials === 'string'; - const hasNub = typeof nubSize === 'number'; - return ( {!!(hasDisplayText || messageThing?.abstract) && ( @@ -147,18 +142,18 @@ const StackedLayout = ({ const nubSize = fromUser ? bubbleFromUserNubSize : bubbleNubSize; const otherInitials = fromUser ? botInitials : userInitials; const otherNubSize = fromUser ? bubbleNubSize : bubbleFromUserNubSize; + const activityKey = useGetKeyByActivity()(activity); + const isInGroup = !!useGetLogicalGroupKey()(activityKey); - const hasAvatar = initials || typeof initials === 'string'; + const hasAvatar = (initials || typeof initials === 'string') && !isInGroup; const hasOtherAvatar = otherInitials || typeof otherInitials === 'string'; const hasNub = typeof nubSize === 'number'; const hasOtherNub = typeof otherNubSize === 'number'; const topAlignedCallout = isZeroOrPositive(nubOffset); - const activityKey = useGetKeyByActivity()(activity); - const isInGroup = !!useGetLogicalGroupKey()(activityKey); const extraTrailing = !hasOtherAvatar && hasOtherNub; // This is for bot message with user nub and no user avatar. And vice versa. - const showAvatar = !isInGroup && showCallout && hasAvatar && !!renderAvatar; + const showAvatar = showCallout && hasAvatar && !!renderAvatar; const showNub = !isInGroup && showCallout && hasNub && (topAlignedCallout || !attachments?.length); const showStatus = !!messageThing?.creativeWorkStatus || isInGroup; @@ -304,6 +299,7 @@ const StackedLayout = ({ fromUser={fromUser} hideAvatar={hasAvatar && !showAvatar} hideNub={hasNub && !showNub} + isActivity={true} noMessage={!activityDisplayText && !isCollapsible} showAvatar={showAvatar} showNub={showNub} @@ -312,7 +308,9 @@ const StackedLayout = ({ { fromUser, hideAvatar, hideNub, + isActivity, isGroup, noMessage, showAvatar, @@ -50,6 +52,7 @@ const StackedLayoutRoot = memo((props: StackedLayoutRootProps) => { [classNames['stacked-layout--extra-trailing']]: extraTrailing, [classNames['stacked-layout--hide-avatar']]: hideAvatar, [classNames['stacked-layout--hide-nub']]: hideNub, + [classNames['stacked-layout--activity']]: isActivity, [classNames['stacked-layout--group']]: isGroup, [classNames['stacked-layout--no-message']]: noMessage, [classNames['stacked-layout--show-avatar']]: showAvatar,