diff --git a/__tests__/html2/part-grouping/folded.skip.html b/__tests__/html2/part-grouping/folded.skip.html index 0a729fc598..a120b0c938 100644 --- a/__tests__/html2/part-grouping/folded.skip.html +++ b/__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: diff --git a/__tests__/html2/part-grouping/index.html b/__tests__/html2/part-grouping/index.html index 80cd5fc2dd..151b8b3d8b 100644 --- a/__tests__/html2/part-grouping/index.html +++ b/__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': diff --git a/packages/api/src/StyleOptions.ts b/packages/api/src/StyleOptions.ts index 109ae1e23a..6ca9f04333 100644 --- a/packages/api/src/StyleOptions.ts +++ b/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. * diff --git a/packages/api/src/defaultStyleOptions.ts b/packages/api/src/defaultStyleOptions.ts index a77ae7d48b..1f6fd50f0a 100644 --- a/packages/api/src/defaultStyleOptions.ts +++ b/packages/api/src/defaultStyleOptions.ts @@ -313,6 +313,7 @@ const DEFAULT_OPTIONS: Required = { // Speech recognition speechRecognitionContinuous: false, + collapsibleGroupingDefaultOpen: true, groupActivitiesBy: ['sender', 'status', 'part'], // Send box attachment bar diff --git a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.tsx b/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.tsx index 98e8876a2a..ebb1e4cd5c 100644 --- a/packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.tsx +++ b/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), diff --git a/packages/fluent-theme/src/private/FluentThemeProvider.tsx b/packages/fluent-theme/src/private/FluentThemeProvider.tsx index fcb0613a43..60ed9f04bd 100644 --- a/packages/fluent-theme/src/private/FluentThemeProvider.tsx +++ b/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 (