feat: part grouping (#5553)

* api: add part grouping

* component: break down StackedLayout and add message status

* component: estabilish part grouping

* component: add logical grouping initial implementation

* component: fix pick to avoid reduce

* component: make transcript focus composer logical group aware

* component: update custom properties mapping

* component: move transcript activity props into hook

* component: componetize transcript focus

* component: activity row use new transcript focus components

* component: focus trap to ignore nested traps

* component: basic transcript transcript focus and logical grouping adjustments

* component: expose PartGrouping as internal

* core: add support of status to creative work

* fluent: part grouping decorator and related adjustments

* fix: small tweaks

* sync: update import names with main

* fix: lint issues

* fix: stacked layout class mapping

* fix: transcript root should shrink to width

* fix: active descendant positioning

* fix: transcript focus for fluent theme along with spacing fixes

* copilot: adjust header and flair rendering

* draft: copilot fixed spacing

* fix: text content grow in white label

* test: fix transcript focus indicator class name

* fix: pre chat activity position when more than one activity

* test: main sendbox should recieve focus as stated

* fix: preserve different styles for heading inside and outside grop for fluent

* fix: activityRender should be possible without transcript

* fix: scroll issues with transcript page scroll

* fix: correct active descendant size and use wrap position for tracking activity top

* fix: focus relative with 0 should refocus either activity or group

* fix: focus transcript on undefined activity key focus

* Revert "test: main sendbox should recieve focus as stated"

This reverts commit d9b8be5.

Not needed after fixing focus transcript on focusByActivityKey(undefined)

* draft: better layout for transcript focus

* fix: spacing in new transcript layout

* fix: allow to shrink new layout

* grouping: new grouping test layout

* fix: allow content children to shrink

* fluent: allow shrinking part grouping

* fix: scroll into view when focusing transcript

* test: fix transcript navigation calculations

* fix: move overlay to the top

* test: snapshots now have a gap

* fix: transcript should focus even if descdendant is not defined

* fix: focus target should not be clickable

* copilot: revisit spacing

* test: fix auto scroll position calculation

* test: fix scroll position calculations

* test: final side-by-side snaps

* test: fix autoscroll snap to have visual gap

* fix: collapsible white label bottom spacing

* test: autoscroll snap with visible gap

* test: adjust calc for focus clicks taking into account the gap

* test: allow slight discrepancy in scroll position

* lint

* cleanup: remove unused context

* build: relocated useMemoWithPrevious

* feat: detarmine current group message based on message entity

* opt: logical grouping static context

* opt: logical grouping should emit state updates

* test: fix grouping

* update: remove nextVisibleActivity as in main

* feat: add group focus on click

* feat: handle message positioning during part grouping

* feat: loading animation and style fixes

* fix: better Claim/CreativeWork interop

* feat: simplify grouping selectors

* fix: localize text and improve styles for collapsible grouping

* feat: fluent styles for part grouping

* fix: focus outlines

* fix: collapsible content tests

* feat: proper sorting in reducer

* fix: code block missing border

* test: update snapshot

* feat: status loader reduced motion styles

* fix: stacked layout double message status

* fix: part grouping accessibility

* test: add grouping test for white label

* fix: status message spacing

* test: fluent + copilot variants for part grouping

* fix: fluent variant focus ring cut for collapsible inside group

* Changelog

* fix: copilot test backdrop color

* remove duplicate snaps

* sort

* rename

* fix wording

Co-authored-by: William Wong <compulim@users.noreply.github.com>

* Remove starting blank line

* Add props schema

* Add schema

* Add prop schema

* Add props schema

* Use valibot custom() instead of transform()

* Export schema

* Add props schema

* Sort

* address comment

* Remove displayName

* fix don't freeze activity

* fix: missing return

* Sort

* Add prop schema

* Sort deps

* Sort

* Sort

* Sort

* Add props schema

* Add props schema

* Add props schema

* Sort

* Add props schema

* Casing

* Use validateProps

* test: cleanup and add position tests

---------

Co-authored-by: William Wong <compulim@users.noreply.github.com>

Author: OEvgeny

CHANGELOG.md

@@ -45,8 +45,14 @@
         // THEN: It should focus on the last activity.
         expect(pageElements.focusedActivity()).toBe(lastActivity);
 
-        // WHEN: Clicking on the pixel above the top left-most pixel of the last activity.
-        await host.clickAt(lastActivityClientRect.left, lastActivityClientRect.top - 1);
+        // WHEN: Clicking on the 9 pixels above the top left-most pixel of the last activity.
+        await host.clickAt(lastActivityClientRect.left, lastActivityClientRect.top - 9);
+
+        // THEN: It should still focus on the last activity.
+        expect(pageElements.focusedActivity()).toBe(lastActivity);
+
+        // WHEN: Clicking on the 10 pixels above the top left-most pixel of the last activity.
+        await host.clickAt(lastActivityClientRect.left, lastActivityClientRect.top - 10);
 
         // THEN: It should focus on the second last activity.
         expect(pageElements.focusedActivity()).toBe(secondLastActivity);

__tests__/html/transcript.navigation.focusActivity.byClick.onEdges.html

@@ -69,7 +69,7 @@
 
         await pageConditions.focusedActivityInView();
         expect(pageElements.transcriptScrollable().scrollTop + pageElements.transcriptScrollable().offsetHeight).toBe(
-          activity29.offsetTop + activity29.offsetHeight
+          activity29.offsetTop + activity29.offsetHeight + 10 // account for gap between activities
         );
         await host.snapshot();
 
@@ -99,7 +99,7 @@
         // THEN: It should scroll activity #29 in the view.
         await pageConditions.focusedActivityInView();
         expect(pageElements.transcriptScrollable().scrollTop).toBe(
-          [...pageElements.activities()].reverse()[2].offsetTop - 5 // 5px is the margin
+          [...pageElements.activities()].reverse()[2].offsetTop - 10 // account for gap between activities
         );
 
         // THEN: It should show activity #29 completely with top aligned and appropriate spacing.

__tests__/html/transcript.navigation.focusActivity.scrollIntoView.keyboard.html

@@ -102,7 +102,7 @@
 
         // THEN: It should scroll activity #2 in the view and align it to the top.
         expect(pageElements.transcriptScrollable().scrollTop).toBe(
-          pageElements.activities()[1].offsetTop - 5 // 5px is the margin
+          pageElements.activities()[1].offsetTop - 10 // 10px is the gap
         );
         await host.snapshot();
       });