Skip to content

Commit d1fb3ae

Browse files
humansinstitutehumansinstitute
authored
Merge pull request #1400 from MahtabBukhari/Logs-not-being-displayed-in-a-Tab-on-HiveChat
Logs not being displayed in a Tab on HiveChat
2 parents 8bba3ea + da6cc4d commit d1fb3ae

File tree

5 files changed

+75
-69
lines changed

5 files changed

+75
-69
lines changed

‎src/pages/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const Pages = observer(({ mode }: { mode: AppMode }) => {
4343
</MainLayout>
4444
<Modals />
4545
</>
46-
)
46+
);
4747
}
4848
return (
4949
<>
@@ -144,5 +144,5 @@ export const Pages = observer(({ mode }: { mode: AppMode }) => {
144144
</Switch>
145145
<Modals />
146146
</>
147-
)
147+
);
148148
});

‎src/people/hiveChat/index.tsx

+31-18
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React, { useEffect, useState, useRef, useCallback } from 'react';
33
import { observer } from 'mobx-react-lite';
44
import { useParams } from 'react-router-dom';
5-
import { ChatMessage, Artifact, TextContent } from 'store/interface';
5+
import { ChatMessage, Artifact, TextContent, SSEMessage, APIResponse } from 'store/interface';
66
import { useStores } from 'store';
77
import { createSocketInstance } from 'config/socket';
88
import SidebarComponent from 'components/common/SidebarComponent.tsx';
@@ -555,7 +555,7 @@ const connectToLogWebSocket = (
555555

556556
export const HiveChatView: React.FC = observer(() => {
557557
const { uuid, chatId } = useParams<RouteParams>();
558-
const { chat, ui } = useStores();
558+
const { chat, ui, main } = useStores();
559559
const [message, setMessage] = useState('');
560560
const [loading, setLoading] = useState(true);
561561
const [error, setError] = useState<string | null>(null);
@@ -626,7 +626,7 @@ export const HiveChatView: React.FC = observer(() => {
626626
const [isRefreshingTitle, setIsRefreshingTitle] = useState(false);
627627
const [lastTitleRefreshTime, setLastTitleRefreshTime] = useState(Date.now());
628628
const titleRefreshIntervalRef = useRef<NodeJS.Timeout | null>(null);
629-
629+
const [sseLogs, setSseLogs] = useState<SSEMessage[]>([]);
630630
useBrowserTabTitle('Hive Chat');
631631

632632
if (isVerboseLoggingEnabled) {
@@ -968,6 +968,32 @@ export const HiveChatView: React.FC = observer(() => {
968968
const res = await chat.loadArtifactsForChat(chatId);
969969
console.log('Artifacts for that chat', res);
970970
setActionArtifact({} as Artifact);
971+
972+
const sseArtifacts = res?.filter(
973+
(artifact) =>
974+
artifact &&
975+
artifact.type === 'text' &&
976+
artifact.content &&
977+
'text_type' in artifact.content &&
978+
artifact.content.text_type === 'sse_logs'
979+
);
980+
981+
console.log('sseArtifacts', sseArtifacts);
982+
983+
if (sseArtifacts) {
984+
setSseArtifact(sseArtifacts);
985+
986+
const response: APIResponse = await main.getAllSSEMessages(chatId);
987+
988+
if (response.success && response.data.messages) {
989+
const sortedLogs = response.data.messages.sort(
990+
(a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
991+
);
992+
993+
setSseLogs(sortedLogs);
994+
}
995+
}
996+
971997
const screenArtifacts = res?.filter(
972998
(artifact) =>
973999
artifact &&
@@ -1024,19 +1050,6 @@ export const HiveChatView: React.FC = observer(() => {
10241050
setTextArtifact(textArtifacts);
10251051
}
10261052

1027-
const sseArtifacts = res?.filter(
1028-
(artifact) =>
1029-
artifact &&
1030-
artifact.type === 'text' &&
1031-
artifact.content &&
1032-
'text_type' in artifact.content &&
1033-
artifact.content.text_type === 'sse_logs'
1034-
);
1035-
1036-
if (sseArtifacts) {
1037-
setSseArtifact(sseArtifacts);
1038-
}
1039-
10401053
const systemMessages = messages?.filter((msg) => msg.role !== 'user');
10411054
const lastSystemMessageId =
10421055
systemMessages?.length > 0 ? systemMessages[systemMessages.length - 1].id : null;
@@ -1052,7 +1065,7 @@ export const HiveChatView: React.FC = observer(() => {
10521065
}
10531066
};
10541067
logArtifacts();
1055-
}, [chat, chatId, isArtifactLoggingEnabled, messages]);
1068+
}, [chat, chatId, isArtifactLoggingEnabled, main, messages]);
10561069

10571070
useEffect(() => {
10581071
const processArtifacts = () => {
@@ -1751,7 +1764,7 @@ export const HiveChatView: React.FC = observer(() => {
17511764
codeArtifact={codeArtifact ?? []}
17521765
textArtifact={textArtifact ?? []}
17531766
sseArtifact={sseArtifact ?? []}
1754-
chatId={chatId}
1767+
sseLogs={sseLogs}
17551768
activeTab={artifactTab}
17561769
/>
17571770
</ViewerSection>

‎src/people/widgetViews/workspace/LogsScreenViewer.tsx

+6-40
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState } from 'react';
22
import styled from 'styled-components';
33
import MaterialIcon from '@material/react-material-icon';
4-
import { useStores } from '../../../store';
54

65
const CodeViewer = styled.div`
76
flex-grow: 1;
@@ -54,48 +53,15 @@ interface SSEMessage {
5453
status: string;
5554
}
5655

57-
interface APIResponse {
58-
success: boolean;
59-
message: string;
60-
data: {
61-
limit: number;
62-
messages: SSEMessage[];
63-
offset: number;
64-
total: number;
65-
};
66-
}
67-
6856
interface LogsScreenViewerProps {
69-
chatId: string;
57+
sseLogs: SSEMessage[];
7058
}
7159

72-
const LogsScreenViewer: React.FC<LogsScreenViewerProps> = ({ chatId }) => {
73-
const { main } = useStores();
74-
const [logs, setLogs] = useState<SSEMessage[]>([]);
60+
const LogsScreenViewer: React.FC<LogsScreenViewerProps> = ({ sseLogs }) => {
7561
const [copied, setCopied] = useState(false);
7662

77-
const fetchLogs = async () => {
78-
try {
79-
const response: APIResponse = await main.getAllSSEMessages(chatId);
80-
81-
if (response.success && response.data.messages) {
82-
const sortedLogs = response.data.messages.sort(
83-
(a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
84-
);
85-
86-
setLogs(sortedLogs);
87-
}
88-
} catch (error) {
89-
console.error('Error fetching logs:', error);
90-
}
91-
};
92-
93-
useEffect(() => {
94-
fetchLogs();
95-
}, [chatId, fetchLogs]);
96-
9763
const copyToClipboard = () => {
98-
const logText = logs.map((log) => JSON.stringify(log.event)).join('\n');
64+
const logText = sseLogs.map((log) => JSON.stringify(log.event)).join('\n');
9965
navigator.clipboard.writeText(logText).then(() => {
10066
setCopied(true);
10167
setTimeout(() => setCopied(false), 2000);
@@ -107,8 +73,8 @@ const LogsScreenViewer: React.FC<LogsScreenViewerProps> = ({ chatId }) => {
10773
<CopyButton onClick={copyToClipboard}>
10874
{copied ? <MaterialIcon icon="check" /> : <MaterialIcon icon="content_copy" />}
10975
</CopyButton>
110-
{logs.length > 0 ? (
111-
logs.map((log) => <LogItem key={log.id}>{JSON.stringify(log.event)}</LogItem>)
76+
{sseLogs.length > 0 ? (
77+
sseLogs.map((log) => <LogItem key={log.id}>{JSON.stringify(log.event)}</LogItem>)
11278
) : (
11379
<LogItem>No logs available.</LogItem>
11480
)}

‎src/people/widgetViews/workspace/VisualScreenViewer.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from 'styled-components';
33
import MaterialIcon from '@material/react-material-icon';
44
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
55
import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
6-
import { Artifact, VisualContent, TextContent } from '../../../store/interface.ts';
6+
import { Artifact, VisualContent, TextContent, SSEMessage } from '../../../store/interface.ts';
77
import { renderMarkdown } from '../../utils/RenderMarkdown.tsx';
88
import LogsScreenViewer from './LogsScreenViewer.tsx';
99

@@ -243,7 +243,7 @@ interface VisualScreenViewerProps {
243243
codeArtifact: Artifact[];
244244
textArtifact: Artifact[];
245245
sseArtifact: Artifact[];
246-
chatId: string;
246+
sseLogs: SSEMessage[];
247247
activeTab: 'visual' | 'code' | 'text' | 'logs';
248248
}
249249

@@ -252,7 +252,7 @@ const VisualScreenViewer: React.FC<VisualScreenViewerProps> = ({
252252
codeArtifact,
253253
textArtifact,
254254
sseArtifact,
255-
chatId,
255+
sseLogs,
256256
activeTab
257257
}) => {
258258
const [visualIndex, setVisualIndex] = useState(0);
@@ -393,6 +393,11 @@ const VisualScreenViewer: React.FC<VisualScreenViewerProps> = ({
393393

394394
return (
395395
<ViewerContainer>
396+
{activeTab === 'logs' && sseArtifact && (
397+
<>
398+
<LogsScreenViewer sseLogs={sseLogs} />
399+
</>
400+
)}
396401
{activeTab === 'visual' && currentVisual && (
397402
<>
398403
<IframeWrapper>
@@ -493,12 +498,6 @@ const VisualScreenViewer: React.FC<VisualScreenViewerProps> = ({
493498
</PaginationControls>
494499
</>
495500
)}
496-
497-
{activeTab === 'logs' && sseArtifact && (
498-
<>
499-
<LogsScreenViewer chatId={chatId} />
500-
</>
501-
)}
502501
</ViewerContainer>
503502
);
504503
};

‎src/store/interface.ts

+28
Original file line numberDiff line numberDiff line change
@@ -582,6 +582,34 @@ export interface ChatMessage {
582582
artifacts?: Artifact[];
583583
}
584584

585+
export interface SSEEvent {
586+
event_type: string;
587+
id: string;
588+
raw: string;
589+
}
590+
591+
export interface SSEMessage {
592+
id: string;
593+
created_at: string;
594+
updated_at: string;
595+
event: SSEEvent;
596+
chat_id: string;
597+
from: string;
598+
to: string;
599+
status: string;
600+
}
601+
602+
export interface APIResponse {
603+
success: boolean;
604+
message: string;
605+
data: {
606+
limit: number;
607+
messages: SSEMessage[];
608+
offset: number;
609+
total: number;
610+
};
611+
}
612+
585613
export interface ActionResponsePayload {
586614
action_webhook: string;
587615
chatId: string;

0 commit comments

Comments
 (0)