microsoft · OEvgeny · Nov 20, 2025 · Nov 20, 2025 · Nov 20, 2025 · Nov 20, 2025
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Part grouping folded (copilot) (dark)</title>
+    <script>
+      location = './folded.skip?variant=copilot&fluent-theme=dark';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Part grouping folded (copilot)</title>
+    <script>
+      location = './folded.skip?variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -64,3 +64,13 @@
     visibility 0s linear 0s;
   visibility: unset;
 }
+
+:global(.webchat) .collapsible-grouping__list {
+  display: grid;
+  gap: 0;
+  margin-block-end: calc(var(--webchat--collapsible-grouping__list--gap, var(--webchat__padding--regular)) * -1);
+
+  > * {
+    margin-block-end: var(--webchat--collapsible-grouping__list--gap, var(--webchat__padding--regular));
+  }
+}
@@ -0,0 +1,30 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { any, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import styles from './CollapsibleGrouping.module.css';
+
+const collapsibleGroupingListPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string()),
+    tag: optional(any())
+  }),
+  readonly()
+);
+
+type CollapsibleGroupingListProps = InferInput<typeof collapsibleGroupingListPropsSchema>;
+
+const CollapsibleGroupingList = (props: CollapsibleGroupingListProps) => {
+  const { className, children, tag: Tag = 'div' } = validateProps(collapsibleGroupingListPropsSchema, props);
+  const classNames = useStyles(styles);
+
+  return <Tag className={cx(classNames['collapsible-grouping__list'], className)}>{children}</Tag>;
+};
+
+CollapsibleGroupingList.displayName = 'CollapsibleGroupingList';
+
+export default memo(CollapsibleGroupingList);
+export { collapsibleGroupingListPropsSchema, type CollapsibleGroupingListProps };
@@ -1,5 +1,6 @@
 :global(.webchat) .part-grouping-activity {
   .part-grouping-activity__activities {
+    gap: 0;
     padding-block: 0 var(--webchat__padding--regular);
   }
 

@@ -37,6 +37,7 @@ import {
 import { android } from '../../../../../Utils/detectBrowser';
 import isZeroOrPositive from '../../../../../Utils/isZeroOrPositive';
 import CollapsibleGrouping from '../CollapsibleGrouping';
+import CollapsibleGroupingList from '../CollapsibleGroupingList';
 import CollapsibleGroupingTitle from '../CollapsibleGroupingTitle';
 import usePartGroupingLogicalGroup from './usePartGroupingLogicalGroup';
 
@@ -166,7 +167,7 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
   const lastActivity = activities.at(-1);
 
   const currentMessage = useMemo(
-    () => messages.toReversed().find(message => message.creativeWorkStatus === 'Incomplete') || lastMessage,
+    () => messages.find(message => message.creativeWorkStatus === 'Incomplete') || lastMessage,
     [messages, lastMessage]
   );
 
@@ -185,21 +186,33 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
     [messages]
   );
 
+  const currentGroupStatus = currentMessage?.creativeWorkStatus || defaultWorkStatus;
+
+  /**
+   * The idea behind group header is that it displays the state of the entire group:
+   * - We start by determining if the group should display a status (i.e., if any message in the group has a creativeWorkStatus).
+   * - If there is a status to display we display it.
+   * - For the title we check if the current group status is 'Incomplete'.
+   * - If it is 'Incomplete', we show the abstract of the first message with 'Incomplete' status.
+   * - If not, we fall back to a default title.
+   */
   const groupHeader = useMemo(
     () => (
       <Fragment>
         {defaultWorkStatus && (
           <StackedLayoutMessageStatus
             className={classNames['part-grouping-activity__message-status']}
-            creativeWorkStatus={currentMessage?.creativeWorkStatus ?? defaultWorkStatus}
+            creativeWorkStatus={currentGroupStatus}
           />
         )}
         <CollapsibleGroupingTitle>
-          {currentMessage?.abstract || localize('COLLAPSIBLE_GROUPING_TITLE')}
+          {currentGroupStatus === 'Incomplete'
+            ? currentMessage?.abstract || localize('COLLAPSIBLE_GROUPING_TITLE')
+            : localize('COLLAPSIBLE_GROUPING_TITLE')}
         </CollapsibleGroupingTitle>
       </Fragment>
     ),
-    [classNames, currentMessage?.abstract, currentMessage?.creativeWorkStatus, defaultWorkStatus, localize]
+    [classNames, currentGroupStatus, currentMessage?.abstract, defaultWorkStatus, localize]
   );
 
   return (
@@ -223,9 +236,12 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
             isOpen={isGroupOpen}
             onToggle={setIsGroupOpen}
           >
-            <TranscriptActivityList className={classNames['part-grouping-activity__activities']}>
+            <CollapsibleGroupingList
+              className={classNames['part-grouping-activity__activities']}
+              tag={TranscriptActivityList}
+            >
               {children}
-            </TranscriptActivityList>
+            </CollapsibleGroupingList>
           </CollapsibleGrouping>
         </StackedLayoutMain>
         {renderActivityStatus && <StackedLayoutStatus>{renderActivityStatus({ hideTimestamp })}</StackedLayoutStatus>}

@@ -1,6 +1,6 @@
 import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import cx from 'classnames';
-import React, { forwardRef, type HTMLAttributes } from 'react';
+import React, { forwardRef, memo, type HTMLAttributes } from 'react';
 
 import styles from './TranscriptFocus.module.css';
 
@@ -18,5 +18,5 @@ const TranscriptActivityList = forwardRef<HTMLDivElement, TranscriptActivityList
 
 TranscriptActivityList.displayName = 'TranscriptActivityList';
 
-export default TranscriptActivityList;
+export default memo(TranscriptActivityList);
 export { type TranscriptActivityListProps };
@@ -53,6 +53,7 @@
   .transcript-focus-area__content {
     display: grid;
     grid-template-areas: 'content';
+    min-height: 0;
     min-width: 0;
 
     > * {

@@ -339,7 +339,7 @@
   }
 
   :global(.stacked-layout .collapsible-grouping__content .part-grouping-activity__activities) {
-    gap: var(--webchat-spacingVerticalS);
+    --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalS);
     padding: var(--webchat-spacingVerticalL) var(--webchat-spacingHorizontalL);
   }
 
@@ -561,6 +561,7 @@
     --webchat-part-grouping__bubble--box-shadow: var(--webchat-shadow4);
 
     :global(.stacked-layout .transcript-focus-area__activity-list) {
+      --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalXS);
       padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone);
       gap: var(--webchat-spacingVerticalXS);
     }
@@ -739,7 +740,7 @@
     }
 
     :global(.stacked-layout .transcript-focus-area__activity-list) {
-      gap: var(--webchat-spacingVerticalL);
+      --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalL);
     }
 
     :global(.webchat__bubble:not(.webchat__bubble--from-user)::after) {
@@ -861,7 +862,7 @@
     }
 
     :global(.stacked-layout .transcript-focus-area__activity-list) {
-      gap: var(--webchat-spacingVerticalS);
+      --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalS);
       padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalM);
     }
 
@@ -870,6 +871,73 @@
       padding-block: var(--webchat-spacingVerticalM);
       padding-inline: var(--webchat-spacingHorizontalL);
     }
+
+    :global(.collapsible-grouping__content) {
+      height: unset;
+      opacity: unset;
+      visibility: unset;
+    }
+
+    :global(.collapsible-grouping__list) > * {
+      interpolate-size: allow-keywords;
+      transition:
+        margin calc(var(--webchat__transition-duration) / 2) var(--webchat__transition-easing),
+        height calc(var(--webchat__transition-duration) / 2) var(--webchat__transition-easing);
+    }
+
+    :global(.collapsible-grouping__content--open .collapsible-grouping__list) > * {
+      /* We use animation so we can reset needed properties immediately upon switching classes */
+      animation: collapsible-grouping__fade-in var(--webchat__transition-duration)
+        calc(var(--webchat__transition-duration) / 4) var(--webchat__transition-easing) both;
+      height: auto;
+      transition:
+        margin var(--webchat__transition-duration) var(--webchat__transition-easing),
+        height var(--webchat__transition-duration) var(--webchat__transition-easing);
+    }
+
+    :global(.collapsible-grouping__content:not(.collapsible-grouping__content--open)) {
+      /* We use animation so we can reset needed properties immediately upon switching classes */
+      animation: collapsible-grouping__fade-in var(--webchat__transition-duration) var(--webchat__transition-duration)
+        var(--webchat__transition-easing) both;
+    }
+
+    :global(.collapsible-grouping__content:not(.collapsible-grouping__content--open) .collapsible-grouping__list) {
+      padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone);
+
+      > *:not(:has(:global(.stacked-layout__message-status--incomplete))) {
+        height: 0;
+        margin: 0;
+        visibility: hidden;
+        overflow: clip;
+      }
+
+      > *:has(:global(.stacked-layout__message-status--incomplete)) {
+        /* We use animation so we can reset needed properties immediately upon switching classes */
+        animation: collapsible-grouping__fade-in var(--webchat__transition-duration) var(--webchat__transition-duration)
+          var(--webchat__transition-easing) both;
+        pointer-events: none;
+
+        :global(.stacked-layout__message-status--incomplete),
+        :global(.collapsible-content__chevron) {
+          visibility: hidden;
+        }
+      }
+
+      &:has(:global(.stacked-layout__message-status--incomplete)) {
+        padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone);
+        transform: translate(-4px, -20px);
+        margin-block-end: calc(-20px - var(--webchat--collapsible-grouping__list--gap));
+      }
+    }
   }
   /* #endregion */
 }
+
+@keyframes collapsible-grouping__fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}