sort

Author: OEvgeny

packages/api/src/providers/GroupActivities/private/createDefaultGroupActivitiesMiddleware.ts

@@ -100,10 +100,7 @@ export default function createDefaultGroupActivitiesMiddleware({
                   messages,
                   ([last], [current]) =>
                     typeof last?.isPartOf?.['@id'] === 'string' && last.isPartOf['@id'] === current?.isPartOf?.['@id']
-                ).map(bin =>
-                  // Position-based sorting is now handled at the reducer level
-                  bin.map(([, activity]) => activity)
-                )
+                ).map(bin => bin.map(([, activity]) => activity))
               };
             }
         : undefined

packages/component/src/Activity/StackedLayout.module.css

@@ -104,12 +104,12 @@
 
   .stacked-layout__message-status {
     color: var(--webchat__color--subtle);
-    margin-inline-start: var(--webchat__padding--regular);
-    margin-block: calc(var(--webchat__padding--regular) + 1px);
-    place-self: start;
-    font-size: 1.1em;
     display: grid;
+    font-size: 1.1em;
     grid-template-areas: "message-status-icon";
+    margin-block: calc(var(--webchat__padding--regular) + 1px);
+    margin-inline-start: var(--webchat__padding--regular);
+    place-self: start;
 
     > * {
       grid-area: message-status-icon;

packages/component/src/Activity/StackedLayout.tsx

@@ -13,18 +13,18 @@ import ScreenReaderText from '../ScreenReaderText';
 import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import textFormatToContentType from '../Utils/textFormatToContentType';
 import useUniqueId from '../hooks/internal/useUniqueId';
+import { ComponentIcon } from '../Icon';
 import AttachmentRow from './AttachmentRow';
 import Bubble from './Bubble';
 import CodeBlockContent from './CodeBlockContent';
 import CollapsibleContent from './CollapsibleContent';
 import StackedLayoutMain from './StackedLayoutMain';
 import StackedLayoutRoot from './StackedLayoutRoot';
 import StackedLayoutStatus from './StackedLayoutStatus';
+import MessageStatusLoader from './private/MessageStatusLoader';
 import { useGetLogicalGroupKey } from '../providers/ActivityLogicalGrouping';
 
 import styles from './StackedLayout.module.css';
-import { ComponentIcon } from '../Icon';
-import MessageStatusLoader from './private/MessageStatusLoader';
 
 const { useAvatarForBot, useAvatarForUser, useLocalizer, useGetKeyByActivity, useStyleOptions } = hooks;
 

packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/CollapsibleGrouping.module.css

@@ -46,6 +46,6 @@
 }
 
 :global(.webchat) .collapsible-grouping__content--open {
-  visibility: unset;
   height: auto;
+  visibility: unset;
 }

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

@@ -17,26 +17,26 @@ import {
   type InferOutput
 } from 'valibot';
 
-import usePartGroupingLogicalGroup from './usePartGroupingLogicalGroup';
-import CollapsibleGrouping from '../CollapsibleGrouping';
-import useActivityElementMapRef from '../../../../../providers/ChatHistoryDOM/useActivityElementRef';
 import StackedLayoutMain from '../../../../../Activity/StackedLayoutMain';
 import StackedLayoutRoot from '../../../../../Activity/StackedLayoutRoot';
 import StackedLayoutStatus from '../../../../../Activity/StackedLayoutStatus';
+import useActivityElementMapRef from '../../../../../providers/ChatHistoryDOM/useActivityElementRef';
 import useActiveDescendantId from '../../../../../providers/TranscriptFocus/useActiveDescendantId';
 import useGetGroupDescendantIdByActivityKey from '../../../../../providers/TranscriptFocus/useGetGroupDescendantIdByActivityKey';
+import useFocusByGroupKey from '../../../../../providers/TranscriptFocus/useFocusByGroupKey';
+import FocusTrap from '../../../../../Transcript/FocusTrap';
+import useRenderActivityProps from '../../../../../Transcript/hooks/useRenderActivityProps';
 import {
+  TranscriptActivityList,
   TranscriptFocusContent,
   TranscriptFocusContentOverlay,
   TranscriptFocusContentActiveDescendant,
   TranscriptFocusIndicator
 } from '../../../../../Transcript/TranscriptFocus';
-import useFocusByGroupKey from '../../../../../providers/TranscriptFocus/useFocusByGroupKey';
-import FocusTrap from '../../../../../Transcript/FocusTrap';
-import useRenderActivityProps from '../../../../../Transcript/hooks/useRenderActivityProps';
 import isZeroOrPositive from '../../../../../Utils/isZeroOrPositive';
 import { android } from '../../../../../Utils/detectBrowser';
-import TranscriptActivityList from '../../../../../Transcript/TranscriptFocus/TranscriptActivityList';
+import CollapsibleGrouping from '../CollapsibleGrouping';
+import usePartGroupingLogicalGroup from './usePartGroupingLogicalGroup';
 
 import styles from './PartGroupingActivity.module.css';
 

packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/usePartGroupingLogicalGroup.ts

@@ -1,9 +1,9 @@
+import random from 'math-random';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import random from 'math-random';
+import { useStateWithRef } from 'use-state-with-ref';
 
 import { useAddLogicalGrouping, useRemoveLogicalGrouping } from '../../../../../providers/ActivityLogicalGrouping';
-import { useStateWithRef } from 'use-state-with-ref';
 
 type UsePartGroupingLogicalGroupOptions = {
   activityKeys: readonly string[];

packages/component/src/Transcript/TranscriptFocus/TranscriptFocus.module.css

@@ -1,9 +1,9 @@
 /* Focus area container */
 
 :global(.webchat) .transcript-focus-area {
-  outline: 0;
   display: grid;
   grid-template-areas: 'content';
+  outline: 0;
 
   --webchat__transcript--spacing: 10px;
 
@@ -65,20 +65,20 @@
     To account for the differences, we use absolute/relative positioning as the rest of our code assumes so.
   */
   .transcript-focus-area__content-overlay {
-    position: relative;
+    min-height: 0;
+    grid-area: content;
     /* The bounding box is expanded to both top and bottom to scroll focus indicator into view. */
     /* We should ignore clicks to make sure this expansion don't register click as focus. */
     /* Otherwise, when clicking on the very bottom edge of the activity, it will focus on next activity instead. */
     pointer-events: none;
+    position: relative;
     width: 100%;
-    grid-area: content;
-    min-height: 0;
   }
 
   /* When the content is focused as active descendant, scrollIntoView() will scroll this invisible div into view. */
   .transcript-focus-area__content-active-descendant {
-    position: absolute;
     inset: calc(var(--webchat__transcript--spacing) / -1) 0 calc(var(--webchat__transcript--spacing) / -1) 0;
+    position: absolute;
   }
 
   .transcript-focus-area__terminator {

packages/component/src/Transcript/TranscriptFocus/TranscriptFocusArea.tsx

@@ -2,9 +2,10 @@ import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import cx from 'classnames';
 import React, { forwardRef, type HTMLAttributes } from 'react';
 
-import styles from './TranscriptFocus.module.css';
 import TranscriptFocusIndicator from './TranscriptFocusIndicator';
 
+import styles from './TranscriptFocus.module.css';
+
 type TranscriptFocusAreaProps = HTMLAttributes<HTMLDivElement>;
 
 const TranscriptFocusArea = forwardRef<HTMLDivElement, TranscriptFocusAreaProps>(

packages/component/src/Transcript/TranscriptFocus/index.ts

@@ -1,3 +1,4 @@
+export { default as TranscriptActivityList, type TranscriptActivityListProps } from './TranscriptActivityList';
 export { default as TranscriptFocusArea, type TranscriptFocusAreaProps } from './TranscriptFocusArea';
 export { default as TranscriptFocusContent, type TranscriptFocusContentProps } from './TranscriptFocusContent';
 export {

packages/component/src/providers/TranscriptFocus/private/Context.ts

@@ -6,8 +6,8 @@ type TranscriptFocusContextType = {
   focusByActivityKey: (activityKey: boolean | string | undefined, withFocus: boolean | undefined) => void;
   focusByGroupKey: (groupKey: string | undefined, withFocus: boolean | undefined) => void;
   focusedActivityKeyState: readonly [string];
-  focusedGroupKeyState: readonly [string];
   focusedExplicitlyState: readonly [boolean];
+  focusedGroupKeyState: readonly [string];
   focusRelativeActivity: (delta: number) => void;
   getDescendantIdByActivityKey: (activityKey?: string) => string | undefined;
   getGroupDescendantIdByActivityKey: (activityKey?: string) => string | undefined;