Run groupActivities recursively

Author: compulim

__tests__/html2/grouping/customGrouping.html

@@ -39,18 +39,24 @@
 
         const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });
 
-        const groupActivitiesMiddleware = () => next => request => ({
-          ...next(request),
-          duo: request.activities.reduce((result, activity) => {
-            if (result.at(-1)?.length === 1) {
-              result.at(-1).push(activity);
-            } else {
-              result.push([activity]);
-            }
+        const requests = [];
+
+        const groupActivitiesMiddleware = () => next => request => {
+          requests.push(request);
+
+          return {
+            ...next(request),
+            duo: request.activities.reduce((result, activity) => {
+              if (result.at(-1)?.length === 1) {
+                result.at(-1).push(activity);
+              } else {
+                result.push([activity]);
+              }
 
-            return result;
-          }, [])
-        });
+              return result;
+            }, [])
+          };
+        };
 
         const decoratorMiddleware = [
           init =>
@@ -107,6 +113,17 @@
         }
 
         await host.snapshot('local');
+
+        expect(requests.at(-3).activities).toHaveLength(3);
+        expect(requests.at(-3).activities[0]).toEqual(expect.objectContaining({ text: 'Bot 1: t=0s' }));
+        expect(requests.at(-3).activities[1]).toEqual(expect.objectContaining({ text: 'Bot 2: t=10s' }));
+        expect(requests.at(-3).activities[2]).toEqual(expect.objectContaining({ text: 'Bot 3: t=20s' }));
+        expect(requests.at(-2).activities[0]).toEqual(expect.objectContaining({ text: 'Bot 4: t=80s' }));
+        expect(requests.at(-2).activities[1]).toEqual(expect.objectContaining({ text: 'Bot 5: t=90s' }));
+        expect(requests.at(-2).activities[2]).toEqual(expect.objectContaining({ text: 'Bot 6: t=100s' }));
+        expect(requests.at(-1).activities[0]).toEqual(expect.objectContaining({ text: 'Bot 7: t=160s' }));
+        expect(requests.at(-1).activities[1]).toEqual(expect.objectContaining({ text: 'Bot 8: t=170s' }));
+        expect(requests.at(-1).activities[2]).toEqual(expect.objectContaining({ text: 'Bot 9: t=180s' }));
       });
     </script>
   </body>

packages/api/src/providers/GroupActivities/useGroupActivities.ts

@@ -3,9 +3,6 @@ import useGroupActivitiesContext from './private/useGroupActivitiesContext';
 
 type GroupedActivities = readonly (readonly WebChatActivity[])[];
 
-/**
- * @deprecated
- */
 export default function useGroupActivities(): ({
   activities
 }: Readonly<{ activities: readonly WebChatActivity[] }>) => Readonly<{

packages/component/src/BasicTranscript.tsx

@@ -53,7 +53,7 @@ import useFocus from './hooks/useFocus';
 import useStyleSet from './hooks/useStyleSet';
 import ChatHistoryDOMComposer from './providers/ChatHistoryDOM/ChatHistoryDOMComposer';
 import useActivityElementMapRef from './providers/ChatHistoryDOM/useActivityElementRef';
-import GroupedRenderingActivitiesComposer from './providers/GroupedRenderingActivities/GroupedRenderingActivitiesComposer';
+import GroupedRenderingActivitiesComposer from './providers/GroupedRenderingActivities/GroupedRenderingActivitiesComposer2';
 import useNumRenderingActivities from './providers/GroupedRenderingActivities/useNumRenderingActivities';
 import RenderingActivitiesComposer from './providers/RenderingActivities/RenderingActivitiesComposer';
 import TranscriptFocusComposer from './providers/TranscriptFocus/TranscriptFocusComposer';

packages/component/src/providers/GroupedRenderingActivities/GroupedRenderingActivitiesComposer2.tsx

@@ -0,0 +1,109 @@
+import { hooks } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo } from 'react';
+import { object, optional, parse, pipe, readonly, type InferOutput } from 'valibot';
+
+import reactNode from '../../types/internal/reactNode';
+import useRenderingActivities from '../RenderingActivities/useRenderingActivities';
+import { type GroupedRenderingActivities } from './GroupedRenderingActivities';
+import GroupedRenderingActivitiesContext, {
+  type GroupedRenderingActivitiesContextType
+} from './private/GroupedRenderingActivitiesContext';
+
+const { useGetKeyByActivity, useGroupActivities, useStyleOptions } = hooks;
+
+const groupedRenderingActivitiesComposerPropsSchema = pipe(
+  object({
+    children: optional(reactNode())
+  }),
+  readonly()
+);
+
+type GroupedRenderingActivitiesComposerProps = InferOutput<typeof groupedRenderingActivitiesComposerPropsSchema>;
+
+function validateAllEntriesTagged<T>(entries: readonly T[], bins: readonly (readonly T[])[]): boolean {
+  return entries.every(entry => bins.some(bin => bin.includes(entry)));
+}
+
+const GroupedRenderingActivitiesComposer = (props: GroupedRenderingActivitiesComposerProps) => {
+  const { children } = parse(groupedRenderingActivitiesComposerPropsSchema, props);
+
+  const [{ groupActivitiesBy }] = useStyleOptions();
+  const [activities] = useRenderingActivities();
+  const getKeyByActivity = useGetKeyByActivity();
+  const groupActivities = useGroupActivities();
+
+  const numRenderingActivitiesState = useMemo<readonly [number]>(
+    () => Object.freeze([activities.length] as const),
+    [activities]
+  );
+
+  const groupedRenderingActivitiesState = useMemo<readonly [readonly GroupedRenderingActivities[]]>(() => {
+    const run = (
+      activities: readonly WebChatActivity[],
+      groups: readonly string[]
+    ): readonly GroupedRenderingActivities[] => {
+      const [name, ...nextNames] = groups;
+
+      if (typeof name === 'undefined') {
+        return Object.freeze([
+          Object.freeze({
+            activities,
+            children: Object.freeze([]),
+            key: getKeyByActivity(activities[0]),
+            groupingName: undefined
+          })
+        ]);
+      }
+
+      const result = new Map(Object.entries(groupActivities({ activities })));
+
+      let groupings: readonly (readonly WebChatActivity[])[];
+
+      if (result.has(name)) {
+        groupings = result.get(name);
+      } else {
+        console.warn(
+          `botframework-webchat: styleOptions.groupActivitiesBy has "${name}" but groupActivitiesMiddleware does not return such result, assuming all activities are grouped by themselves`
+        );
+
+        groupings = Object.freeze(activities.map(activity => Object.freeze([activity])));
+      }
+
+      if (!validateAllEntriesTagged<WebChatActivity>(activities, groupings)) {
+        `botframework-webchat: Not every activities are grouped in the "${name}" property. Please fix "groupActivitiesMiddleware" and group every activities`;
+      }
+
+      return Object.freeze(
+        groupings.map(grouping =>
+          Object.freeze({
+            activities: grouping,
+            children: run(grouping, nextNames),
+            groupingName: name,
+            key: getKeyByActivity(grouping[0])
+          } satisfies GroupedRenderingActivities)
+        )
+      );
+    };
+
+    return Object.freeze([run(activities, groupActivitiesBy)]);
+  }, [activities, getKeyByActivity, groupActivities, groupActivitiesBy]);
+
+  const context = useMemo<GroupedRenderingActivitiesContextType>(
+    () =>
+      Object.freeze({
+        groupedRenderingActivitiesState,
+        numRenderingActivitiesState
+      }),
+    [groupedRenderingActivitiesState, numRenderingActivitiesState]
+  );
+
+  return (
+    <GroupedRenderingActivitiesContext.Provider value={context}>{children}</GroupedRenderingActivitiesContext.Provider>
+  );
+};
+
+GroupedRenderingActivitiesComposer.displayName = 'GroupedRenderingActivitiesComposer';
+
+export default memo(GroupedRenderingActivitiesComposer);
+export { type GroupedRenderingActivitiesComposerProps };