Spaces:
Running
Running
File size: 2,836 Bytes
372531f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import React, { useState, useEffect } from 'react';
import ResearchForm from '../Task/ResearchForm';
import Report from '../Task/Report';
import AgentLogs from '../Task/AgentLogs';
import AccessReport from '../ResearchBlocks/AccessReport';
interface ChatBoxSettings {
report_source: string;
report_type: string;
tone: string;
}
interface ChatBoxProps {
chatBoxSettings: ChatBoxSettings;
setChatBoxSettings: React.Dispatch<React.SetStateAction<ChatBoxSettings>>;
}
interface OutputData {
pdf?: string;
docx?: string;
json?: string;
}
interface WebSocketMessage {
type: 'logs' | 'report' | 'path';
output: string | OutputData;
}
export default function ChatBox({ chatBoxSettings, setChatBoxSettings }: ChatBoxProps) {
const [agentLogs, setAgentLogs] = useState<any[]>([]);
const [report, setReport] = useState("");
const [accessData, setAccessData] = useState({});
const [socket, setSocket] = useState<WebSocket | null>(null);
useEffect(() => {
if (typeof window !== 'undefined') {
const { protocol, pathname } = window.location;
let { host } = window.location;
host = host.includes('localhost') ? 'localhost:8000' : host;
const ws_uri = `${protocol === 'https:' ? 'wss:' : 'ws:'}//${host}${pathname}ws`;
const newSocket = new WebSocket(ws_uri);
setSocket(newSocket);
newSocket.onmessage = (event) => {
const data = JSON.parse(event.data) as WebSocketMessage;
if (data.type === 'logs') {
setAgentLogs((prevLogs: any[]) => [...prevLogs, data]);
} else if (data.type === 'report') {
setReport((prevReport: string) => prevReport + (data.output as string));
} else if (data.type === 'path') {
const output = data.output as OutputData;
setAccessData({
...(output.pdf && { pdf: `outputs/${output.pdf}` }),
...(output.docx && { docx: `outputs/${output.docx}` }),
...(output.json && { json: `outputs/${output.json}` })
});
}
};
return () => {
newSocket.close();
};
}
}, []);
return (
<div>
<main className="container" id="form">
<ResearchForm
chatBoxSettings={chatBoxSettings}
setChatBoxSettings={setChatBoxSettings}
/>
{agentLogs?.length > 0 ? <AgentLogs agentLogs={agentLogs} /> : ''}
<div className="margin-div">
{report ? <Report report={report} /> : ''}
{Object.keys(accessData).length > 0 &&
<AccessReport
accessData={accessData}
chatBoxSettings={chatBoxSettings}
report={report}
/>
}
</div>
</main>
</div>
);
} |