feat: Added selected state to Web Chat log panel and auto-inspection on load by tonyanziano · Pull Request #6782 · microsoft/BotFramework-Composer

This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Composer/packages/client/src/components/WebChat/WebChatPanel.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ import { @@
     } from '@botframework-composer/types';
     import { AxiosResponse } from 'axios';
     import formatMessage from 'format-message';
+    import { v4 as uuid } from 'uuid';
     import TelemetryClient from '../../telemetry/TelemetryClient';
     import { BotStatus } from '../../constants';
@@ Expand Down Expand Up / @@ -79,6 +80,7 @@ export const WebChatPanel: React.FC<WebChatPanelProps> = ({ @@
                       projectId,
                       data.activities.map((a) => ({
                         activity: a,
+                        id: uuid(),
                         timestamp: new Date(a.timestamp || Date.now()).getTime(),
                         trafficType: data.trafficType,
                       }))
@@ Expand All / @@ -104,6 +106,7 @@ export const WebChatPanel: React.FC<WebChatPanelProps> = ({ @@
               error: {
                 message: formatMessage('An error occurred connecting initializing the DirectLine server'),
               },
+              id: uuid(),
               request: { route: 'conversations/ws/port', method: 'GET', payload: {} },
               response: { payload: response.data, statusCode: response.status },
               timestamp: Date.now(),
@@ Expand Down Expand Up / @@ -211,6 +214,7 @@ export const WebChatPanel: React.FC<WebChatPanelProps> = ({ @@
             error: {
               message: formatMessage('An error occurred saving transcripts'),
             },
+            id: uuid(),
             request: { route: 'saveTranscripts/', method: '', payload: {} },
             response: { payload: ex, statusCode: 400 },
             timestamp: Date.now(),
@@ Expand Down @@

...ackages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     import { useRecoilValue } from 'recoil';
     import { ConversationTrafficItem } from '@botframework-composer/types/src';
     import formatMessage from 'format-message';
+    import debounce from 'lodash/debounce';
     import {
       dispatcherState,
@@ Expand Down Expand Up / @@ -42,6 +43,10 @@ const logPane = css` @@
       box-sizing: border-box;
     `;
+    const itemIsSelected = (item: ConversationTrafficItem, currentInspectionData?: WebChatInspectionData) => {
+      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);
@@ Expand All @@
         }
       };
+      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]);
@@ Expand All @@
       );
       const renderLogItem = useCallback(
-        (item: ConversationTrafficItem, index: number) => {
+        (item: ConversationTrafficItem, index: number, inspectionData?: WebChatInspectionData) => {
           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;
@@ Expand All @@
       );
       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) {
@@ Expand Down @@

Composer/packages/client/src/pages/design/__tests__/WebChatLogContent.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -31,8 +31,9 @@ describe('<DebugPanel />', () => { @@
             });
             set(webChatTrafficState(rootBotId), [
               {
-                trafficType: 'activity',
                 activity: {} as any,
+                id: '',
+                trafficType: 'activity',
                 timestamp: Date.now(),
               },
             ]);
@@ Expand All / @@ -49,8 +50,9 @@ describe('<DebugPanel />', () => { @@
             });
             set(webChatTrafficState(rootBotId), [
               {
-                trafficType: 'activity',
                 activity: {} as any,
+                id: '',
+                trafficType: 'activity',
                 timestamp: Date.now(),
               },
             ]);
@@ Expand Down @@

Composer/packages/client/src/pages/design/__tests__/WebChatLogItemHeader.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,7 @@ describe('<DebugPanel />', () => { @@
                   error: {
                     message: 'Error validating Microsoft App ID and Password',
                   },
+                  id: '',
                   timestamp: Date.now(),
                   trafficType: 'networkError',
                   request: {
@@ Expand All / @@ -61,6 +62,7 @@ describe('<DebugPanel />', () => { @@
                   error: {
                     message: 'Error validating Microsoft App ID and Password',
                   },
+                  id: '',
                   timestamp: Date.now(),
                   trafficType: 'networkError',
                   request: {
@@ Expand Down Expand Up / @@ -88,6 +90,7 @@ describe('<DebugPanel />', () => { @@
                 error: {
                   message: 'Error validating Microsoft App ID and Password',
                 },
+                id: '',
                 timestamp: Date.now(),
                 trafficType: 'networkError',
                 request: {
@@ Expand Down @@

Composer/packages/client/src/recoilModel/dispatchers/__tests__/webchat.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -51,6 +51,7 @@ describe('web chat dispatcher', () => { @@
       it('should append a single web chat traffic item to the log', async () => {
         const trafficItem = {
           activity: {} as any,
+          id: '',
           timestamp: Date.now(),
           trafficType: 'activity' as 'activity',
         };
@@ Expand All / @@ -64,11 +65,13 @@ describe('web chat dispatcher', () => { @@
       it('should append multiple web chat traffic items to the log', async () => {
         const trafficItem1 = {
           activity: {} as any,
+          id: '',
           timestamp: Date.now(),
           trafficType: 'activity' as 'activity',
         };
         const trafficItem2 = {
           activity: {} as any,
+          id: '',
           timestamp: Date.now() + 5,
           trafficType: 'activity' as 'activity',
         };
@@ Expand All / @@ -82,6 +85,7 @@ describe('web chat dispatcher', () => { @@
       it('should clear traffic from the log', async () => {
         const trafficItem = {
           activity: {} as any,
+          id: '',
           timestamp: Date.now(),
           trafficType: 'activity' as 'activity',
         };
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ 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) => {
@@ Expand All / @@ -27,9 +28,9 @@ export const webChatLogDispatcher = () => { @@
           const { set } = callbackHelpers;
           set(webChatTrafficState(projectId), (currentTraffic) => {
             if (Array.isArray(traffic)) {
-              return [...currentTraffic, ...traffic];
+              return [...currentTraffic, ...traffic].sort((t1, t2) => t1.timestamp - t2.timestamp);
             } else {
-              return [...currentTraffic, traffic];
+              return [...currentTraffic, traffic].sort((t1, t2) => t1.timestamp - t2.timestamp);
             }
           });
         }
@@ Expand Down @@

Composer/packages/server/src/middleware/logNetworkTraffic.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ @@
     import { NextFunction, Request, Response } from 'express';
     import { ConversationNetworkErrorItem, ConversationNetworkTrafficItem } from '@botframework-composer/types';
+    import { v4 as uuid } from 'uuid';
     import { WebSocketServer } from '../directline/utils/webSocketServer';
@@ Expand All @@
               details: error.details,
               message: error.message,
             },
+            id: uuid(),
             request: { method: req.method, payload: req.body, route: req.originalUrl },
             response: {
               payload: JSON.parse((res as any).sentData || '{}'),
@@ Expand All @@
         } else {
           // a successful response was sent to the client
           data = {
+            id: uuid(),
             request: { method: req.method, payload: req.body, route: req.originalUrl },
             response: {
               payload: JSON.parse((res as any).sentData || '{}'),
@@ Expand Down @@

Composer/packages/types/src/server.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -65,6 +65,7 @@ export type NetworkTrafficResponse = { @@
     };
     export type ConversationNetworkTrafficItem = {
+      id: string;
       request: NetworkTrafficRequest;
       response: NetworkTrafficResponse;
       timestamp: number;
@@ Expand All / @@ -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;
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Uh oh!

Diff view

Diff view

There are no files selected for viewing