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
91
92
93
94
95
|
"use client";
import React, { useState, useEffect } from "react";
import TopBar from "@/components/top-bar";
import ChecklistAndConfig from "@/components/checklist-and-config";
import SessionConfigurationPanel from "@/components/session-configuration-panel";
import Transcript from "@/components/transcript";
import FunctionCallsPanel from "@/components/function-calls-panel";
import { Item } from "@/components/types";
import handleRealtimeEvent from "@/lib/handle-realtime-event";
import PhoneNumberChecklist from "@/components/phone-number-checklist";
const CallInterface = () => {
const [selectedPhoneNumber, setSelectedPhoneNumber] = useState("");
const [allConfigsReady, setAllConfigsReady] = useState(false);
const [items, setItems] = useState<Item[]>([]);
const [callStatus, setCallStatus] = useState("disconnected");
const [ws, setWs] = useState<WebSocket | null>(null);
useEffect(() => {
if (allConfigsReady && !ws) {
const newWs = new WebSocket("ws://localhost:8081/logs");
newWs.onopen = () => {
console.log("Connected to logs websocket");
setCallStatus("connected");
};
newWs.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log("Received logs event:", data);
handleRealtimeEvent(data, setItems);
};
newWs.onclose = () => {
console.log("Logs websocket disconnected");
setWs(null);
setCallStatus("disconnected");
};
setWs(newWs);
}
}, [allConfigsReady, ws]);
return (
<div className="h-screen bg-white flex flex-col">
<ChecklistAndConfig
ready={allConfigsReady}
setReady={setAllConfigsReady}
selectedPhoneNumber={selectedPhoneNumber}
setSelectedPhoneNumber={setSelectedPhoneNumber}
/>
<TopBar />
<div className="flex-grow p-4 h-full overflow-hidden flex flex-col">
<div className="grid grid-cols-12 gap-4 h-full">
{/* Left Column */}
<div className="col-span-3 flex flex-col h-full overflow-hidden">
<SessionConfigurationPanel
callStatus={callStatus}
onSave={(config) => {
if (ws && ws.readyState === WebSocket.OPEN) {
const updateEvent = {
type: "session.update",
session: {
...config,
},
};
console.log("Sending update event:", updateEvent);
ws.send(JSON.stringify(updateEvent));
}
}}
/>
</div>
{/* Middle Column: Transcript */}
<div className="col-span-6 flex flex-col gap-4 h-full overflow-hidden">
<PhoneNumberChecklist
selectedPhoneNumber={selectedPhoneNumber}
allConfigsReady={allConfigsReady}
setAllConfigsReady={setAllConfigsReady}
/>
<Transcript items={items} />
</div>
{/* Right Column: Function Calls */}
<div className="col-span-3 flex flex-col h-full overflow-hidden">
<FunctionCallsPanel items={items} ws={ws} />
</div>
</div>
</div>
</div>
);
};
export default CallInterface;
|
