Merge pull request #1400 from MahtabBukhari/Logs-not-being-displayed-in-a-Tab-on-HiveChat

Logs not being displayed in a Tab on HiveChat

Author: humansinstitute

src/pages/index.tsx

@@ -43,7 +43,7 @@ export const Pages = observer(({ mode }: { mode: AppMode }) => {
         </MainLayout>
         <Modals />
       </>
-    )
+    );
   }
   return (
     <>
@@ -144,5 +144,5 @@ export const Pages = observer(({ mode }: { mode: AppMode }) => {
       </Switch>
       <Modals />
     </>
-  )
+  );
 });

src/people/hiveChat/index.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useParams } from 'react-router-dom';
-import { ChatMessage, Artifact, TextContent } from 'store/interface';
+import { ChatMessage, Artifact, TextContent, SSEMessage, APIResponse } from 'store/interface';
 import { useStores } from 'store';
 import { createSocketInstance } from 'config/socket';
 import SidebarComponent from 'components/common/SidebarComponent.tsx';
@@ -555,7 +555,7 @@ const connectToLogWebSocket = (
 
 export const HiveChatView: React.FC = observer(() => {
   const { uuid, chatId } = useParams<RouteParams>();
-  const { chat, ui } = useStores();
+  const { chat, ui, main } = useStores();
   const [message, setMessage] = useState('');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -626,7 +626,7 @@ export const HiveChatView: React.FC = observer(() => {
   const [isRefreshingTitle, setIsRefreshingTitle] = useState(false);
   const [lastTitleRefreshTime, setLastTitleRefreshTime] = useState(Date.now());
   const titleRefreshIntervalRef = useRef<NodeJS.Timeout | null>(null);
-
+  const [sseLogs, setSseLogs] = useState<SSEMessage[]>([]);
   useBrowserTabTitle('Hive Chat');
 
   if (isVerboseLoggingEnabled) {
@@ -968,6 +968,32 @@ export const HiveChatView: React.FC = observer(() => {
         const res = await chat.loadArtifactsForChat(chatId);
         console.log('Artifacts for that chat', res);
         setActionArtifact({} as Artifact);
+
+        const sseArtifacts = res?.filter(
+          (artifact) =>
+            artifact &&
+            artifact.type === 'text' &&
+            artifact.content &&
+            'text_type' in artifact.content &&
+            artifact.content.text_type === 'sse_logs'
+        );
+
+        console.log('sseArtifacts', sseArtifacts);
+
+        if (sseArtifacts) {
+          setSseArtifact(sseArtifacts);
+
+          const response: APIResponse = await main.getAllSSEMessages(chatId);
+
+          if (response.success && response.data.messages) {
+            const sortedLogs = response.data.messages.sort(
+              (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+            );
+
+            setSseLogs(sortedLogs);
+          }
+        }
+
         const screenArtifacts = res?.filter(
           (artifact) =>
             artifact &&
@@ -1024,19 +1050,6 @@ export const HiveChatView: React.FC = observer(() => {
           setTextArtifact(textArtifacts);
         }
 
-        const sseArtifacts = res?.filter(
-          (artifact) =>
-            artifact &&
-            artifact.type === 'text' &&
-            artifact.content &&
-            'text_type' in artifact.content &&
-            artifact.content.text_type === 'sse_logs'
-        );
-
-        if (sseArtifacts) {
-          setSseArtifact(sseArtifacts);
-        }
-
         const systemMessages = messages?.filter((msg) => msg.role !== 'user');
         const lastSystemMessageId =
           systemMessages?.length > 0 ? systemMessages[systemMessages.length - 1].id : null;
@@ -1052,7 +1065,7 @@ export const HiveChatView: React.FC = observer(() => {
       }
     };
     logArtifacts();
-  }, [chat, chatId, isArtifactLoggingEnabled, messages]);
+  }, [chat, chatId, isArtifactLoggingEnabled, main, messages]);
 
   useEffect(() => {
     const processArtifacts = () => {
@@ -1751,7 +1764,7 @@ export const HiveChatView: React.FC = observer(() => {
                   codeArtifact={codeArtifact ?? []}
                   textArtifact={textArtifact ?? []}
                   sseArtifact={sseArtifact ?? []}
-                  chatId={chatId}
+                  sseLogs={sseLogs}
                   activeTab={artifactTab}
                 />
               </ViewerSection>

src/people/widgetViews/workspace/LogsScreenViewer.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import MaterialIcon from '@material/react-material-icon';
-import { useStores } from '../../../store';
 
 const CodeViewer = styled.div`
   flex-grow: 1;
@@ -54,48 +53,15 @@ interface SSEMessage {
   status: string;
 }
 
-interface APIResponse {
-  success: boolean;
-  message: string;
-  data: {
-    limit: number;
-    messages: SSEMessage[];
-    offset: number;
-    total: number;
-  };
-}
-
 interface LogsScreenViewerProps {
-  chatId: string;
+  sseLogs: SSEMessage[];
 }
 
-const LogsScreenViewer: React.FC<LogsScreenViewerProps> = ({ chatId }) => {
-  const { main } = useStores();
-  const [logs, setLogs] = useState<SSEMessage[]>([]);
+const LogsScreenViewer: React.FC<LogsScreenViewerProps> = ({ sseLogs }) => {
   const [copied, setCopied] = useState(false);
 
-  const fetchLogs = async () => {
-    try {
-      const response: APIResponse = await main.getAllSSEMessages(chatId);
-
-      if (response.success && response.data.messages) {
-        const sortedLogs = response.data.messages.sort(
-          (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
-        );
-
-        setLogs(sortedLogs);
-      }
-    } catch (error) {
-      console.error('Error fetching logs:', error);
-    }
-  };
-
-  useEffect(() => {
-    fetchLogs();
-  }, [chatId, fetchLogs]);
-
   const copyToClipboard = () => {
-    const logText = logs.map((log) => JSON.stringify(log.event)).join('\n');
+    const logText = sseLogs.map((log) => JSON.stringify(log.event)).join('\n');
     navigator.clipboard.writeText(logText).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
@@ -107,8 +73,8 @@ const LogsScreenViewer: React.FC<LogsScreenViewerProps> = ({ chatId }) => {
       <CopyButton onClick={copyToClipboard}>
         {copied ? <MaterialIcon icon="check" /> : <MaterialIcon icon="content_copy" />}
       </CopyButton>
-      {logs.length > 0 ? (
-        logs.map((log) => <LogItem key={log.id}>{JSON.stringify(log.event)}</LogItem>)
+      {sseLogs.length > 0 ? (
+        sseLogs.map((log) => <LogItem key={log.id}>{JSON.stringify(log.event)}</LogItem>)
       ) : (
         <LogItem>No logs available.</LogItem>
       )}

src/people/widgetViews/workspace/VisualScreenViewer.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import MaterialIcon from '@material/react-material-icon';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { Artifact, VisualContent, TextContent } from '../../../store/interface.ts';
+import { Artifact, VisualContent, TextContent, SSEMessage } from '../../../store/interface.ts';
 import { renderMarkdown } from '../../utils/RenderMarkdown.tsx';
 import LogsScreenViewer from './LogsScreenViewer.tsx';
 
@@ -243,7 +243,7 @@ interface VisualScreenViewerProps {
   codeArtifact: Artifact[];
   textArtifact: Artifact[];
   sseArtifact: Artifact[];
-  chatId: string;
+  sseLogs: SSEMessage[];
   activeTab: 'visual' | 'code' | 'text' | 'logs';
 }
 
@@ -252,7 +252,7 @@ const VisualScreenViewer: React.FC<VisualScreenViewerProps> = ({
   codeArtifact,
   textArtifact,
   sseArtifact,
-  chatId,
+  sseLogs,
   activeTab
 }) => {
   const [visualIndex, setVisualIndex] = useState(0);
@@ -393,6 +393,11 @@ const VisualScreenViewer: React.FC<VisualScreenViewerProps> = ({
 
   return (
     <ViewerContainer>
+      {activeTab === 'logs' && sseArtifact && (
+        <>
+          <LogsScreenViewer sseLogs={sseLogs} />
+        </>
+      )}
       {activeTab === 'visual' && currentVisual && (
         <>
           <IframeWrapper>
@@ -493,12 +498,6 @@ const VisualScreenViewer: React.FC<VisualScreenViewerProps> = ({
           </PaginationControls>
         </>
       )}
-
-      {activeTab === 'logs' && sseArtifact && (
-        <>
-          <LogsScreenViewer chatId={chatId} />
-        </>
-      )}
     </ViewerContainer>
   );
 };

src/store/interface.ts

@@ -582,6 +582,34 @@ export interface ChatMessage {
   artifacts?: Artifact[];
 }
 
+export interface SSEEvent {
+  event_type: string;
+  id: string;
+  raw: string;
+}
+
+export interface SSEMessage {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  event: SSEEvent;
+  chat_id: string;
+  from: string;
+  to: string;
+  status: string;
+}
+
+export interface APIResponse {
+  success: boolean;
+  message: string;
+  data: {
+    limit: number;
+    messages: SSEMessage[];
+    offset: number;
+    total: number;
+  };
+}
+
 export interface ActionResponsePayload {
   action_webhook: string;
   chatId: string;