feat: Added selected state to Web Chat log panel and auto-inspection on load

Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx

@@ -7,6 +7,7 @@ import React, { useMemo, useEffect, useState, useRef, useCallback } from 'react'
 import { useRecoilValue } from 'recoil';
 import { ConversationTrafficItem } from '@botframework-composer/types/src';
 import formatMessage from 'format-message';
+import debounce from 'lodash/debounce';
 
 import {
   dispatcherState,
@@ -42,6 +43,10 @@ const logPane = css`
   box-sizing: border-box;
 `;
 
+const itemIsSelected = (item: ConversationTrafficItem, currentInspectionData: WebChatInspectionData | undefined) => {
+  return item.id === currentInspectionData?.item?.id;
+};
+
 // R12: We are showing Errors from the root bot only.
 export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive }) => {
   const currentProjectId = useRecoilValue(rootBotProjectIdSelector);
@@ -59,9 +64,33 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
     }
   };
 
+  const performInspection = useRef(
+    debounce((trafficItem: ConversationTrafficItem) => {
+      if (currentProjectId) {
+        if (trafficItem?.trafficType === 'network') {
+          // default to inspecting the request body
+          setWebChatInspectionData(currentProjectId, { item: trafficItem, mode: 'request' });
+        } else {
+          setWebChatInspectionData(currentProjectId, { item: trafficItem });
+        }
+      }
+    }, 500)
+  ).current;
+
+  const inspectLatestLogMessage = () => {
+    // inspect latest log message if nothing is being inspected
+    if (!inspectionData && currentProjectId) {
+      const latestTrafficItem = [...rawWebChatTraffic].pop();
+      if (latestTrafficItem) {
+        performInspection(latestTrafficItem);
+      }
+    }
+  };
+
   useEffect(() => {
     if (navigateToLatestEntry && isActive) {
       navigateToNewestLogEntry();
+      inspectLatestLogMessage();
       navigateToLatestEntryWhenActive(false);
     }
   }, [isActive, navigateToLatestEntry]);
@@ -80,16 +109,37 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
   );
 
   const renderLogItem = useCallback(
-    (item: ConversationTrafficItem, index: number) => {
+    (item: ConversationTrafficItem, index: number, inspectionData: WebChatInspectionData | undefined) => {
       switch (item.trafficType) {
         case 'activity':
-          return <WebChatActivityLogItem index={index} item={item} onClickTraffic={onClickTraffic} />;
+          return (
+            <WebChatActivityLogItem
+              index={index}
+              isSelected={itemIsSelected(item, inspectionData)}
+              item={item}
+              onClickTraffic={onClickTraffic}
+            />
+          );
 
         case 'network':
-          return <WebChatNetworkLogItem index={index} item={item} onClickTraffic={onClickTraffic} />;
+          return (
+            <WebChatNetworkLogItem
+              index={index}
+              isSelected={itemIsSelected(item, inspectionData)}
+              item={item}
+              onClickTraffic={onClickTraffic}
+            />
+          );
 
         case 'networkError':
-          return <WebChatNetworkLogItem index={index} item={item} onClickTraffic={onClickTraffic} />;
+          return (
+            <WebChatNetworkLogItem
+              index={index}
+              isSelected={itemIsSelected(item, inspectionData)}
+              item={item}
+              onClickTraffic={onClickTraffic}
+            />
+          );
 
         default:
           return null;
@@ -99,12 +149,10 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
   );
 
   const displayedTraffic = useMemo(() => {
-    const sortedTraffic = [...rawWebChatTraffic]
-      .sort((t1, t2) => t1.timestamp - t2.timestamp)
-      .map((t, i) => renderLogItem(t, i));
-    setLogItemCount(sortedTraffic.length);
-    return sortedTraffic;
-  }, [rawWebChatTraffic, renderLogItem]);
+    const renderedTraffic = [...rawWebChatTraffic].map((t, i) => renderLogItem(t, i, inspectionData));
+    setLogItemCount(renderedTraffic.length);
+    return renderedTraffic;
+  }, [inspectionData, rawWebChatTraffic, renderLogItem]);
 
   const setInspectionData = (data: WebChatInspectionData) => {
     if (currentProjectId) {

Composer/packages/client/src/recoilModel/dispatchers/webchat.ts

@@ -4,14 +4,23 @@
 
 import { ConversationTrafficItem } from '@botframework-composer/types';
 import { useRecoilCallback, CallbackInterface } from 'recoil';
+import { v4 as uuid } from 'uuid';
 
 import { webChatTrafficState, webChatInspectionDataState, isWebChatPanelVisibleState } from '../atoms';
 import { WebChatInspectionData } from '../types';
 
+const addIdToTrafficItem = (item: ConversationTrafficItem) => {
+  if (!item.id) {
+    item.id = uuid();
+  }
+  return item;
+};
+
 export const webChatLogDispatcher = () => {
   const clearWebChatLogs = useRecoilCallback((callbackHelpers: CallbackInterface) => (projectId: string) => {
     const { set } = callbackHelpers;
     set(webChatTrafficState(projectId), []);
+    set(webChatInspectionDataState(projectId), undefined); // clear the inspection panel
   });
 
   const setWebChatPanelVisibility = useRecoilCallback((callbackHelpers: CallbackInterface) => (value: boolean) => {
@@ -27,9 +36,11 @@ export const webChatLogDispatcher = () => {
       const { set } = callbackHelpers;
       set(webChatTrafficState(projectId), (currentTraffic) => {
         if (Array.isArray(traffic)) {
-          return [...currentTraffic, ...traffic];
+          return [...currentTraffic, ...traffic.map((item) => addIdToTrafficItem(item))].sort(
+            (t1, t2) => t1.timestamp - t2.timestamp
+          );
         } else {
-          return [...currentTraffic, traffic];
+          return [...currentTraffic, addIdToTrafficItem(traffic)].sort((t1, t2) => t1.timestamp - t2.timestamp);
         }
       });
     }

Composer/packages/types/src/server.ts

@@ -65,6 +65,7 @@ export type NetworkTrafficResponse = {
 };
 
 export type ConversationNetworkTrafficItem = {
+  id?: string;
   request: NetworkTrafficRequest;
   response: NetworkTrafficResponse;
   timestamp: number;
@@ -78,11 +79,13 @@ export type ConversationActivityTraffic = {
 
 export type ConversationActivityTrafficItem = {
   activity: Activity;
+  id?: string;
   timestamp: number;
   trafficType: 'activity';
 };
 
 export type ConversationNetworkErrorItem = {
+  id?: string;
   error: {
     message: string;
     details?: string;