From baa23dd833a425ee16dce796ba2e4d3b401bee47 Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Thu, 29 Apr 2021 17:35:04 -0700
Subject: [PATCH] Check for webchat panel visibility

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 .../TabExtensions/WebChatLog/WebChatLogContent.tsx    | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
index 4f2a6c7dbd..0f04cfd72e 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
@@ -18,6 +18,7 @@ import {
   webChatTrafficState,
   webChatInspectionDataState,
   botStatusState,
+  isWebChatPanelVisibleState,
 } from '../../../../../recoilModel';
 import { DebugPanelTabHeaderProps } from '../types';
 import { WebChatInspectionData } from '../../../../../recoilModel/types';
@@ -74,8 +75,10 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
   const webChatContainerRef = useRef<HTMLDivElement | null>(null);
   const { setWebChatInspectionData, setWebChatPanelVisibility } = useRecoilValue(dispatcherState);
   const currentStatus = useRecoilValue(botStatusState(currentProjectId ?? ''));
+  const isWebChatPanelVisible = useRecoilValue(isWebChatPanelVisibleState);
   const { startAllBots } = useBotOperations();
   const isPVABot = usePVACheck(currentProjectId ?? '');
+  const [isWebChatPanelOpenedOnce, setIsWebChatPanelOpenedOnce] = useState(false);
 
   const navigateToNewestLogEntry = () => {
     if (currentLogItemCount && webChatContainerRef?.current) {
@@ -107,6 +110,12 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
     }
   };
 
+  useEffect(() => {
+    if (isWebChatPanelVisible && !isWebChatPanelOpenedOnce) {
+      setIsWebChatPanelOpenedOnce(true);
+    }
+  }, [isWebChatPanelVisible]);
+
   useEffect(() => {
     if (navigateToLatestEntry && isActive) {
       navigateToNewestLogEntry();
@@ -222,7 +231,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
   return (
     <div css={logContainer(isActive)}>
       <div ref={webChatContainerRef} css={logPane(displayedTraffic.length)} data-testid="Webchat-Logs-Container">
-        {displayedTraffic.length ? displayedTraffic : noWebChatTrafficSection}
+        {displayedTraffic.length || isWebChatPanelOpenedOnce ? displayedTraffic : noWebChatTrafficSection}
       </div>
       <WebChatInspectorPane inspectionData={inspectionData} onSetInspectionData={setInspectionData} />
     </div>