diff --git a/www/app/components/transcript.js b/www/app/components/transcript.js index 85a0a06f..dcd924e2 100644 --- a/www/app/components/transcript.js +++ b/www/app/components/transcript.js @@ -3,7 +3,7 @@ import axios from "axios"; const API_URL = process.env.NEXT_PUBLIC_API_URL; -const useCreateTranscript = () => { +const useTranscript = () => { const [response, setResponse] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); @@ -15,29 +15,31 @@ const useCreateTranscript = () => { name: "Weekly All-Hands", // Hardcoded for now }; - console.log("Sending POST:", data); + console.debug( + "POST - /v1/transcripts/ - Requesting new transcription creation", + data, + ); axios .post(url, data) .then((result) => { setResponse(result.data); setLoading(false); - console.log("Response:", result.data); + console.debug("New transcript created:", result.data); }) .catch((err) => { - setError(err.response || err); + const errorString = err.response || err || "Unknown error"; + setError(eerrorString); setLoading(false); - alert("Error: " + (err.response || err)); - console.log("Error occurred:", err.response || err); // Debugging line + console.error("Error creating transcript:", errorString); }); }; - // You can choose when to call createTranscript, e.g., based on some dependencies useEffect(() => { createTranscript(); - }, []); // Empty dependencies array means this effect will run once on mount + }, []); return { response, loading, error, createTranscript }; }; -export default useCreateTranscript; +export default useTranscript; diff --git a/www/app/components/webrtc.js b/www/app/components/webrtc.js index 9ea22792..42edd309 100644 --- a/www/app/components/webrtc.js +++ b/www/app/components/webrtc.js @@ -4,17 +4,16 @@ import axios from "axios"; const API_URL = process.env.NEXT_PUBLIC_API_URL; -const useWebRTC = (stream, transcript) => { +const useWebRTC = (stream, transcriptId) => { const [data, setData] = useState({ peer: null, }); useEffect(() => { - if (!stream || !transcript) { + if (!stream || !transcriptId) { return; } - const url = `${API_URL}/v1/transcripts/${transcript.id}/record/webrtc`; - console.log("Sending RTC Offer", url, transcript); + const url = `${API_URL}/v1/transcripts/${transcriptId}/record/webrtc`; let peer = new Peer({ initiator: true, stream: stream }); @@ -33,11 +32,10 @@ const useWebRTC = (stream, transcript) => { }) .then((response) => { const answer = response.data; - console.log("Answer:", answer); peer.signal(answer); }) .catch((e) => { - console.log("Error signaling:", e); + console.error("WebRTC signaling error:", e); }); } }); @@ -47,42 +45,10 @@ const useWebRTC = (stream, transcript) => { setData((prevData) => ({ ...prevData, peer: peer })); }); - peer.on("data", (data) => { - const serverData = JSON.parse(data.toString()); - console.log(serverData); - - switch (serverData.cmd) { - case "SHOW_TRANSCRIPTION": - setData((prevData) => ({ - ...prevData, - text: serverData.text, - })); - break; - case "UPDATE_TOPICS": - setData((prevData) => ({ - ...prevData, - topics: serverData.topics, - })); - break; - case "DISPLAY_FINAL_SUMMARY": - setData((prevData) => ({ - ...prevData, - finalSummary: { - duration: serverData.duration, - summary: serverData.summary, - }, - text: "", - })); - break; - default: - console.error(`Unknown command ${serverData.cmd}`); - } - }); - return () => { peer.destroy(); }; - }, [stream, transcript]); + }, [stream, transcriptId]); return data; }; diff --git a/www/app/components/websocket.js b/www/app/components/websocket.js index 9e900867..76bfa20a 100644 --- a/www/app/components/websocket.js +++ b/www/app/components/websocket.js @@ -1,15 +1,19 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; + +export const useWebSockets = (transcriptId) => { + const [transcriptText, setTranscriptText] = useState(""); + const [topics, setTopics] = useState([]); + const [finalSummary, setFinalSummary] = useState(""); + const [status, setStatus] = useState("disconnected"); -export const useWebSockets = (transcript_id) => { useEffect(() => { - if (!transcript_id) return; + if (!transcriptId) return; - const url = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/v1/transcripts/${transcript_id}/events`; + const url = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/v1/transcripts/${transcriptId}/events`; const ws = new WebSocket(url); - console.log("Opening websocket: ", url); ws.onopen = () => { - console.log("WebSocket connection opened"); + console.debug("WebSocket connection opened"); }; ws.onmessage = (event) => { @@ -17,15 +21,28 @@ export const useWebSockets = (transcript_id) => { switch (message.event) { case "TRANSCRIPT": - if (!message.data.text) break; - console.log("TRANSCRIPT event:", message.data.text); + if (message.data.text) { + setTranscriptText(message.data.text.trim()); + console.debug("TRANSCRIPT event:", message.data); + } break; + case "TOPIC": - console.log("TOPIC event:", message.data); + setTopics((prevTopics) => [...prevTopics, message.data]); + console.debug("TOPIC event:", message.data); break; + case "FINAL_SUMMARY": - console.log("FINAL_SUMMARY event:", message.data.summary); + if (message.data.summary) { + setFinalSummary(message.data.summary.trim()); + console.debug("FINAL_SUMMARY event:", message.data.summary); + } break; + + case "STATUS": + setStatus(message.data.status); + break; + default: console.error("Unknown event:", message.event); } @@ -36,11 +53,13 @@ export const useWebSockets = (transcript_id) => { }; ws.onclose = () => { - console.log("WebSocket connection closed"); + console.debug("WebSocket connection closed"); }; return () => { ws.close(); }; - }, [transcript_id]); + }, [transcriptId]); + + return { transcriptText, topics, finalSummary, status }; }; diff --git a/www/app/page.js b/www/app/page.js index 1676bd7e..1d01154e 100644 --- a/www/app/page.js +++ b/www/app/page.js @@ -3,22 +3,17 @@ import React, { useState } from "react"; import Recorder from "./components/record.js"; import { Dashboard } from "./components/dashboard.js"; import useWebRTC from "./components/webrtc.js"; -import useCreateTranscript from "./components/transcript.js"; +import useTranscript from "./components/transcript.js"; import { useWebSockets } from "./components/websocket.js"; import "../public/button.css"; const App = () => { const [stream, setStream] = useState(null); - const transcript = useCreateTranscript(); - const serverData = useWebRTC(stream, transcript.response); + const transcript = useTranscript(); + const webRTC = useWebRTC(stream, transcript.response?.id); const webSockets = useWebSockets(transcript.response?.id); - console.log("serverData", serverData); - - const sendStopCmd = () => - serverData?.peer?.send(JSON.stringify({ cmd: "STOP" })); - return (
@@ -26,11 +21,16 @@ const App = () => {

Capture The Signal, Not The Noise

- + { + setStream(null); + }} + />