feat: improve styles for part grouping nested stacked layouts

Author: OEvgeny

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--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 {
+        width: var(--webchat__size--avatar);
+        padding-inline-end: var(--webchat__padding--regular);
+      }
+    }
+
     .stacked-layout__bubble {
       grid-template: 'content' 1fr / 1fr;
     }

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<ReactNode, boolean | null | undefined>) | 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 (
       <StackedLayoutMain avatar={showAvatar && renderAvatar && renderAvatar()}>
         {!!(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 = ({
       <StackedLayoutInner
         activity={activity}
         fromUser={fromUser}
+        hasAvatar={hasAvatar}
         hasDisplayText={!!activityDisplayText?.length || isCollapsible}
+        hasNub={hasNub}
         id={ariaLabelId}
         renderAvatar={renderAvatar}
         renderBubbleContent={renderBubbleContent}

packages/component/src/Activity/StackedLayoutRoot.tsx

@@ -14,6 +14,7 @@ const stackedLayoutRootPropsSchema = pipe(
     fromUser: optional(boolean()),
     hideAvatar: optional(boolean()),
     hideNub: optional(boolean()),
+    isActivity: optional(boolean()),
     isGroup: optional(boolean()),
     noMessage: optional(boolean()),
     showAvatar: optional(boolean()),
@@ -33,6 +34,7 @@ const StackedLayoutRoot = memo((props: StackedLayoutRootProps) => {
     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,