opt: logical grouping should emit state updates

Author: OEvgeny

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

@@ -2,9 +2,21 @@ import { reactNode } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
 import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { array, minLength, object, optional, pipe, readonly, transform, any, parse, type InferOutput } from 'valibot';
-
-import usePartGroupingLogicalGroup, { getPartGropKey } from './usePartGroupingLogicalGroup';
+import {
+  any,
+  array,
+  minLength,
+  object,
+  optional,
+  parse,
+  pipe,
+  readonly,
+  string,
+  transform,
+  type InferOutput
+} from 'valibot';
+
+import usePartGroupingLogicalGroup from './usePartGroupingLogicalGroup';
 import CollapsibleGrouping from '../CollapsibleGrouping';
 import useActivityElementMapRef from '../../../../../providers/ChatHistoryDOM/useActivityElementRef';
 import StackedLayoutMain from '../../../../../Activity/StackedLayoutMain';
@@ -53,6 +65,7 @@ const partGroupingFocusableActivityPropsSchema = pipe(
       transform(value => value as WebChatActivity),
       readonly()
     ),
+    groupKey: string(),
     children: optional(reactNode())
   }),
   readonly()
@@ -62,16 +75,14 @@ type FocusablePartGroupingActivityProps = InferOutput<typeof partGroupingFocusab
 
 function FocusablePartGroupingActivity(props: FocusablePartGroupingActivityProps) {
   const [activeDescendantId] = useActiveDescendantId();
-  const { activity, children } = parse(partGroupingFocusableActivityPropsSchema, props);
+  const { activity, children, groupKey } = parse(partGroupingFocusableActivityPropsSchema, props);
 
   const getGroupDescendantIdByActivityKey = useGetGroupDescendantIdByActivityKey();
   const focusByGroupKey = useFocusByGroupKey();
 
   const getKeyByActivity = useGetKeyByActivity();
   const groupingActivityDescendantId = getGroupDescendantIdByActivityKey(getKeyByActivity(activity));
 
-  const groupKey = useMemo(() => getPartGropKey(getKeyByActivity(activity)), [getKeyByActivity, activity]);
-
   const focusSelf = useCallback<(withFocus?: boolean) => void>(
     (withFocus?: boolean) => focusByGroupKey(groupKey, withFocus),
     [groupKey, focusByGroupKey]
@@ -130,7 +141,7 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
     [activities, getKeyByActivity]
   );
 
-  usePartGroupingLogicalGroup({
+  const groupKey = usePartGroupingLogicalGroup({
     activityKeys,
     isCollapsed: !isGroupOpen
   });
@@ -155,7 +166,7 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
   const topAlignedCallout = isZeroOrPositive(bubbleNubOffset);
 
   return (
-    <FocusablePartGroupingActivity activity={firstActivity}>
+    <FocusablePartGroupingActivity activity={firstActivity} groupKey={groupKey}>
       <StackedLayoutRoot
         hideAvatar={hasAvatar && !showAvatar}
         isGroup={true}

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

@@ -1,59 +1,41 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useRefFrom } from 'use-ref-from';
+import random from 'math-random';
 
-import { useAddLogicalGrouping } from '../../../../../providers/ActivityLogicalGrouping';
-
-const getPartGropKey = (key: string) => `part-grouping-${key}`;
+import { useAddLogicalGrouping, useRemoveLogicalGrouping } from '../../../../../providers/ActivityLogicalGrouping';
+import { useStateWithRef } from 'use-state-with-ref';
 
 type UsePartGroupingLogicalGroupOptions = {
   activityKeys: readonly string[];
   isCollapsed: boolean;
 };
 
-type UsePartGroupingLogicalGroupReturn = {
-  shouldSkipRender: boolean;
-};
-
-/**
- * Custom hook for managing part grouping logical groups.
- *
- * @param options - Configuration options for the grouping
- * @returns Object containing shouldSkipRender flag
- */
-function usePartGroupingLogicalGroup({
-  activityKeys,
-  isCollapsed
-}: UsePartGroupingLogicalGroupOptions): UsePartGroupingLogicalGroupReturn {
+function usePartGroupingLogicalGroup({ activityKeys, isCollapsed }: UsePartGroupingLogicalGroupOptions): string {
+  // eslint-disable-next-line no-magic-numbers
+  const [partGroupKey, _setPartKey, partKeyRef] = useStateWithRef(() => `part-${random().toString(36).slice(2, 11)}`);
   const addLogicalGrouping = useAddLogicalGrouping();
+  const removeLogicalGrouping = useRemoveLogicalGrouping();
+
+  const isCollapsedRef = useRefFrom(isCollapsed);
+
+  const getGroupState = useCallback(() => ({ isCollapsed: isCollapsedRef.current }), [isCollapsedRef]);
 
   useMemo(
     () =>
       addLogicalGrouping({
-        // use activity key for group identifier as there should be only one logical group per activity
-        id: getPartGropKey(activityKeys.at(0)),
-        name: 'part',
-        activityKeys: [...activityKeys],
-        getGroupState: () => ({
-          isCollapsed
-        })
+        key: partKeyRef.current,
+        activityKeys: Array.from(activityKeys),
+        getGroupState
       }),
-    [activityKeys, addLogicalGrouping, isCollapsed]
+    [activityKeys, addLogicalGrouping, getGroupState, partKeyRef]
   );
 
-  const addLogicalGroupingRef = useRef(addLogicalGrouping);
-  const activityKeysRef = useRefFrom(activityKeys);
+  const removeLogicalGroupingRef = useRefFrom(removeLogicalGrouping);
 
-  useEffect(
-    () => () =>
-      addLogicalGroupingRef.current({
-        id: getPartGropKey(activityKeysRef.current.at(0)),
-        name: 'part(removed)',
-        activityKeys: [],
-        getGroupState: () => ({ isCollapsed: false })
-      }),
-    [activityKeysRef, addLogicalGroupingRef]
-  );
+  useEffect(() => () => removeLogicalGroupingRef.current(partKeyRef.current), [partKeyRef, removeLogicalGroupingRef]);
+
+  return partGroupKey;
 }
 
 export default usePartGroupingLogicalGroup;
-export { type UsePartGroupingLogicalGroupOptions, type UsePartGroupingLogicalGroupReturn, getPartGropKey };
+export { type UsePartGroupingLogicalGroupOptions };

packages/component/src/providers/ActivityLogicalGrouping/ActivityLogicalGroupingComposer.ts

@@ -5,30 +5,45 @@ import ActivityLogicalGroupingContext, {
   type LogicalGrouping,
   type GroupState
 } from './private/ActivityLogicalGroupingContext';
+import useStateWithOptimisticRef from './private/useStateWithOptimisticRef';
 
 type ActivityLogicalGroupingComposerProps = Readonly<{
   children?: ReactNode | undefined;
 }>;
 
 const ActivityLogicalGroupingComposer = ({ children }: ActivityLogicalGroupingComposerProps) => {
   const logicalGroupingsRef = useRef<Map<string, LogicalGrouping>>(new Map());
-  const activityToGroupMapRef = useRef<ReadonlyMap<string, string | undefined>>(new Map());
+  const [_activityToGroupMap, setActivityToGroupMap, activityToGroupMapRef] = useStateWithOptimisticRef<
+    ReadonlyMap<string, string | undefined>
+  >(new Map());
 
   const addLogicalGrouping = useCallback(
     (grouping: LogicalGrouping) => {
-      const prevGroupingKeys = logicalGroupingsRef.current.get(grouping.id)?.activityKeys ?? [];
+      const prevGroupingKeys = logicalGroupingsRef.current.get(grouping.key)?.activityKeys ?? [];
 
-      logicalGroupingsRef.current.set(grouping.id, grouping);
+      logicalGroupingsRef.current.set(grouping.key, grouping);
 
       const toRemoveSet = new Set(prevGroupingKeys).difference(new Set(grouping.activityKeys));
       const toAddSet = new Set(grouping.activityKeys).difference(new Set(prevGroupingKeys));
 
-      activityToGroupMapRef.current = new Map([
-        ...[...activityToGroupMapRef.current].filter(([, value]) => !!value && !toRemoveSet.has(value)),
-        ...[...toAddSet].map(activityKey => [activityKey, grouping.id] as const)
-      ]);
+      setActivityToGroupMap(
+        new Map(
+          [].concat(
+            Array.from(activityToGroupMapRef.current).filter(([, value]) => !!value && !toRemoveSet.has(value)),
+            Array.from(toAddSet).map(activityKey => [activityKey, grouping.key] as const)
+          )
+        )
+      );
     },
-    [logicalGroupingsRef]
+    [activityToGroupMapRef, setActivityToGroupMap]
+  );
+
+  const removeLogicalGrouping = useCallback(
+    (key: string) => {
+      logicalGroupingsRef.current.delete(key);
+      setActivityToGroupMap(new Map([...activityToGroupMapRef.current].filter(([, value]) => value !== key)));
+    },
+    [activityToGroupMapRef, setActivityToGroupMap]
   );
 
   const getLogicalGroupKey = useCallback(
@@ -61,9 +76,10 @@ const ActivityLogicalGroupingComposer = ({ children }: ActivityLogicalGroupingCo
       addLogicalGrouping,
       getLogicalGroupKey,
       getGroupState,
-      getGroupBoundaries
+      getGroupBoundaries,
+      removeLogicalGrouping
     }),
-    [addLogicalGrouping, getLogicalGroupKey, getGroupState, getGroupBoundaries]
+    [addLogicalGrouping, getLogicalGroupKey, getGroupState, getGroupBoundaries, removeLogicalGrouping]
   );
 
   return createElement(ActivityLogicalGroupingContext.Provider, { value: contextValue }, children);

packages/component/src/providers/ActivityLogicalGrouping/index.ts

@@ -1,5 +1,6 @@
 export { default as ActivityLogicalGroupingComposer } from './ActivityLogicalGroupingComposer';
 export { default as useAddLogicalGrouping } from './useAddLogicalGrouping';
+export { default as useRemoveLogicalGrouping } from './useRemoveLogicalGrouping';
 export { default as useGetLogicalGroupKey } from './useGetLogicalGroupKey';
 export { default as useGetGroupState } from './useGetGroupState';
 export type { ActivityLogicalGroupingComposerProps } from './ActivityLogicalGroupingComposer';

packages/component/src/providers/ActivityLogicalGrouping/private/ActivityLogicalGroupingContext.ts

@@ -5,17 +5,17 @@ type GroupState = Readonly<{
 }>;
 
 type LogicalGrouping = Readonly<{
-  id: string;
-  name: string;
+  key: string;
   activityKeys: string[];
   getGroupState?: () => GroupState;
 }>;
 
 type ActivityLogicalGroupingContextType = Readonly<{
   addLogicalGrouping: (grouping: LogicalGrouping) => void;
-  getLogicalGroupKey: (activityKey: string) => string | undefined;
-  getGroupState: (groupKey: string) => GroupState | undefined;
   getGroupBoundaries: (groupKey: string) => [string | undefined, string | undefined];
+  getGroupState: (groupKey: string) => GroupState | undefined;
+  getLogicalGroupKey: (activityKey: string) => string | undefined;
+  removeLogicalGrouping: (key: string) => void;
 }>;
 
 const { contextComponentType, useContext } = createContextAndHook<ActivityLogicalGroupingContextType>(

packages/component/src/providers/ActivityLogicalGrouping/private/useStateWithOptimisticRef.ts

@@ -0,0 +1,13 @@
+import { useCallback, useRef, useState } from 'react';
+
+export default function useStateWithOptimisticRef<T>(initialState: T | (() => T)) {
+  const [state, setState] = useState(initialState);
+  const stateRef = useRef<T>(state);
+
+  const setStateWithRefUpdate = useCallback((newState: T) => {
+    setState(newState);
+    stateRef.current = newState;
+  }, []);
+
+  return [state, setStateWithRefUpdate, stateRef] as const;
+}

packages/component/src/providers/ActivityLogicalGrouping/useRemoveLogicalGrouping.ts

@@ -0,0 +1,5 @@
+import { useActivityLogicalGroupingContext } from './private/ActivityLogicalGroupingContext';
+
+export default function useRemoveLogicalGrouping(): (key: string) => void {
+  return useActivityLogicalGroupingContext().removeLogicalGrouping;
+}