WIP: Add style option to configure default group open state

__tests__/html2/part-grouping/folded.skip.html

@@ -286,10 +286,14 @@
       // 2nd is sent with status not set to show the work is in
       directLine.emulateIncomingActivity(withCreativeWorkStatus(activities.at(1), undefined));
 
+      await pageConditions.numActivitiesShown(3);
+
+      // When (copilot): opening the group
+      await host.click(document.querySelector('.collapsible-grouping__toggle'));
+
       // Then: show both activities in the list:
       // 1st with the loading indicator
       // 2nd with an empty status indicator
-      await pageConditions.numActivitiesShown(3);
       await host.snapshot('local');
 
       // When folding the list:

__tests__/html2/part-grouping/index.html

@@ -347,6 +347,12 @@
       // 1st with the loading indicator
       // 2nd with an empty status indicator
       await pageConditions.numActivitiesShown(3);
+
+      // When (copilot): opening the group
+      if (variant === 'copilot') {
+        await host.click(document.querySelector('.collapsible-grouping__toggle'));
+      }
+
       await host.snapshot('local');
 
       // When marking the 1st activity as 'Published':

packages/api/src/StyleOptions.ts

@@ -966,6 +966,13 @@ type StyleOptions = {
    */
   speechRecognitionContinuous?: boolean | undefined;
 
+  /**
+   * Whether collapsible activity groupings ("part" groups) are open by default.
+   *
+   * @default true
+   */
+  collapsibleGroupingDefaultOpen?: boolean | undefined;
+
   /**
    * Defines how activities are being grouped by (in the order of appearance in the array). Default to `['sender', 'status', 'part']` or `sender,status` in CSS.
    *

packages/api/src/defaultStyleOptions.ts

@@ -313,6 +313,7 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   // Speech recognition
   speechRecognitionContinuous: false,
 
+  collapsibleGroupingDefaultOpen: true,
   groupActivitiesBy: ['sender', 'status', 'part'],
 
   // Send box attachment bar

packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.tsx

@@ -143,7 +143,8 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
 
   const classNames = useStyles(styles);
   const getKeyByActivity = useGetKeyByActivity();
-  const [isGroupOpen, setIsGroupOpen] = useState(true);
+  const [{ collapsibleGroupingDefaultOpen }] = useStyleOptions();
+  const [isGroupOpen, setIsGroupOpen] = useState(collapsibleGroupingDefaultOpen);
 
   const messages = useMemo(
     () => activities.map(activity => getOrgSchemaMessage(activity.entities)).filter(message => !!message),

packages/fluent-theme/src/private/FluentThemeProvider.tsx

@@ -104,10 +104,11 @@ function FluentThemeProvider(props: FluentThemeProviderProps) {
   const fluentStyleOptions = useMemo(
     () =>
       Object.freeze({
+        ...(variant === 'copilot' && { collapsibleGroupingDefaultOpen: false }),
         feedbackActionsPlacement: 'activity-actions',
         stylesRoot
       }),
-    [stylesRoot]
+    [stylesRoot, variant]
   );
 
   return (