stable
This commit is contained in:
parent
b7614eb3f8
commit
db4ce8b14f
22 changed files with 3557 additions and 823 deletions
|
|
@ -1,160 +1,148 @@
|
|||
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
|
||||
import type { AgentState, ClientMessage, LogLine, ServerMessage, ToastItem } from "../types";
|
||||
import type {
|
||||
AgentState,
|
||||
CardItem,
|
||||
CardLane,
|
||||
CardMessageMetadata,
|
||||
CardState,
|
||||
ClientMessage,
|
||||
LogLine,
|
||||
ServerMessage,
|
||||
} from "../types";
|
||||
|
||||
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL ?? "";
|
||||
|
||||
let toastIdCounter = 0;
|
||||
let cardIdCounter = 0;
|
||||
let logIdCounter = 0;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// ---------------------------------------------------------------------------
|
||||
const LANE_RANK: Record<CardLane, number> = {
|
||||
attention: 0,
|
||||
work: 1,
|
||||
context: 2,
|
||||
history: 3,
|
||||
};
|
||||
|
||||
export interface WebRTCState {
|
||||
const STATE_RANK: Record<CardState, number> = {
|
||||
active: 0,
|
||||
stale: 1,
|
||||
resolved: 2,
|
||||
superseded: 3,
|
||||
archived: 4,
|
||||
};
|
||||
|
||||
interface WebRTCState {
|
||||
connected: boolean;
|
||||
connecting: boolean;
|
||||
textOnly: boolean;
|
||||
agentState: AgentState;
|
||||
logLines: LogLine[];
|
||||
toasts: ToastItem[];
|
||||
cards: CardItem[];
|
||||
voiceStatus: string;
|
||||
statusVisible: boolean;
|
||||
remoteAudioEl: HTMLAudioElement | null;
|
||||
remoteStream: MediaStream | null;
|
||||
sendJson(msg: ClientMessage): void;
|
||||
dismissToast(id: number): void;
|
||||
sendTextMessage(text: string, metadata?: CardMessageMetadata): Promise<void>;
|
||||
dismissCard(id: number): void;
|
||||
setTextOnly(enabled: boolean): void;
|
||||
connect(): Promise<void>;
|
||||
}
|
||||
|
||||
type AppendLine = (role: string, text: string, timestamp: string) => void;
|
||||
type AddToast = (item: Omit<ToastItem, "id">) => number;
|
||||
type UpsertCard = (item: Omit<CardItem, "id">) => void;
|
||||
type SetAgentState = (updater: (prev: AgentState) => AgentState) => void;
|
||||
interface IdleFallbackControls {
|
||||
clear(): void;
|
||||
schedule(delayMs?: number): void;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Message handlers (pure functions, outside hook to reduce complexity)
|
||||
// ---------------------------------------------------------------------------
|
||||
interface RTCRefs {
|
||||
pcRef: { current: RTCPeerConnection | null };
|
||||
dcRef: { current: RTCDataChannel | null };
|
||||
remoteAudioRef: { current: HTMLAudioElement | null };
|
||||
micSendersRef: { current: RTCRtpSender[] };
|
||||
}
|
||||
|
||||
interface RTCCallbacks {
|
||||
setConnected: (v: boolean) => void;
|
||||
setConnecting: (v: boolean) => void;
|
||||
setRemoteStream: (s: MediaStream | null) => void;
|
||||
showStatus: (text: string, persistMs?: number) => void;
|
||||
appendLine: AppendLine;
|
||||
onDcMessage: (raw: string) => void;
|
||||
onDcOpen: () => void;
|
||||
closePC: () => void;
|
||||
}
|
||||
|
||||
function compareCards(a: CardItem, b: CardItem): number {
|
||||
const laneDiff = LANE_RANK[a.lane] - LANE_RANK[b.lane];
|
||||
if (laneDiff !== 0) return laneDiff;
|
||||
const stateDiff = STATE_RANK[a.state] - STATE_RANK[b.state];
|
||||
if (stateDiff !== 0) return stateDiff;
|
||||
if (a.priority !== b.priority) return b.priority - a.priority;
|
||||
const updatedDiff = b.updatedAt.localeCompare(a.updatedAt);
|
||||
if (updatedDiff !== 0) return updatedDiff;
|
||||
return b.createdAt.localeCompare(a.createdAt);
|
||||
}
|
||||
|
||||
function sortCards(items: CardItem[]): CardItem[] {
|
||||
return [...items].sort(compareCards);
|
||||
}
|
||||
|
||||
function toCardItem(msg: Extract<ServerMessage, { type: "card" }>): Omit<CardItem, "id"> {
|
||||
return {
|
||||
serverId: msg.id,
|
||||
kind: msg.kind,
|
||||
content: msg.content,
|
||||
title: msg.title,
|
||||
question: msg.question || undefined,
|
||||
choices: msg.choices.length > 0 ? msg.choices : undefined,
|
||||
responseValue: msg.response_value || undefined,
|
||||
slot: msg.slot || undefined,
|
||||
lane: msg.lane,
|
||||
priority: msg.priority,
|
||||
state: msg.state,
|
||||
templateKey: msg.template_key || undefined,
|
||||
contextSummary: msg.context_summary || undefined,
|
||||
createdAt: msg.created_at || new Date().toISOString(),
|
||||
updatedAt: msg.updated_at || new Date().toISOString(),
|
||||
};
|
||||
}
|
||||
|
||||
function handleTypedMessage(
|
||||
msg: Extract<ServerMessage, { type: string }>,
|
||||
setAgentState: SetAgentState,
|
||||
appendLine: AppendLine,
|
||||
addToast: AddToast,
|
||||
upsertCard: UpsertCard,
|
||||
idleFallback: IdleFallbackControls,
|
||||
): void {
|
||||
if (msg.type === "agent_state") {
|
||||
const s = (msg as { type: "agent_state"; state: AgentState }).state;
|
||||
setAgentState((prev) => (prev === "listening" ? prev : s));
|
||||
idleFallback.clear();
|
||||
setAgentState((prev) => (prev === "listening" ? prev : msg.state));
|
||||
return;
|
||||
}
|
||||
if (msg.type === "message") {
|
||||
const mm = msg as { type: "message"; content: string; is_progress: boolean };
|
||||
if (!mm.is_progress) appendLine("nanobot", mm.content, "");
|
||||
if (msg.is_tool_hint) {
|
||||
appendLine("tool", msg.content, msg.timestamp);
|
||||
return;
|
||||
}
|
||||
if (!msg.is_progress) {
|
||||
appendLine(msg.role, msg.content, msg.timestamp);
|
||||
idleFallback.schedule();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (msg.type === "toast") {
|
||||
const tm = msg as {
|
||||
type: "toast";
|
||||
kind: "text" | "image";
|
||||
content: string;
|
||||
title: string;
|
||||
duration_ms: number;
|
||||
};
|
||||
addToast({
|
||||
kind: tm.kind,
|
||||
content: tm.content,
|
||||
title: tm.title,
|
||||
durationMs: tm.duration_ms ?? 6000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (msg.type === "choice") {
|
||||
const cm = msg as {
|
||||
type: "choice";
|
||||
request_id: string;
|
||||
question: string;
|
||||
choices: string[];
|
||||
title: string;
|
||||
};
|
||||
addToast({
|
||||
kind: "choice",
|
||||
content: "",
|
||||
title: cm.title || "",
|
||||
durationMs: 0,
|
||||
requestId: cm.request_id,
|
||||
question: cm.question,
|
||||
choices: cm.choices,
|
||||
});
|
||||
if (msg.type === "card") {
|
||||
upsertCard(toCardItem(msg));
|
||||
idleFallback.schedule();
|
||||
return;
|
||||
}
|
||||
if (msg.type === "error") {
|
||||
appendLine("system", (msg as { type: "error"; error: string }).error, "");
|
||||
}
|
||||
// pong and rtc-* are no-ops
|
||||
}
|
||||
|
||||
function parseLegacyToast(text: string, addToast: AddToast): void {
|
||||
console.log("[toast] parseLegacyToast raw text:", text);
|
||||
try {
|
||||
const t = JSON.parse(text);
|
||||
console.log("[toast] parsed toast object:", t);
|
||||
addToast({
|
||||
kind: t.kind || "text",
|
||||
content: t.content || "",
|
||||
title: t.title || "",
|
||||
durationMs: typeof t.duration_ms === "number" ? t.duration_ms : 6000,
|
||||
});
|
||||
} catch {
|
||||
console.log("[toast] JSON parse failed, using raw text as content");
|
||||
addToast({ kind: "text", content: text, title: "", durationMs: 6000 });
|
||||
appendLine("system", msg.error, "");
|
||||
idleFallback.schedule();
|
||||
}
|
||||
}
|
||||
|
||||
function parseLegacyChoice(text: string, addToast: AddToast): void {
|
||||
try {
|
||||
const c = JSON.parse(text);
|
||||
addToast({
|
||||
kind: "choice",
|
||||
content: "",
|
||||
title: c.title || "",
|
||||
durationMs: 0,
|
||||
requestId: c.request_id || "",
|
||||
question: c.question || "",
|
||||
choices: Array.isArray(c.choices) ? c.choices : [],
|
||||
});
|
||||
} catch {
|
||||
/* ignore malformed */
|
||||
}
|
||||
}
|
||||
|
||||
function handleLegacyMessage(
|
||||
rm: { role: string; text: string; timestamp?: string },
|
||||
setAgentState: SetAgentState,
|
||||
appendLine: AppendLine,
|
||||
addToast: AddToast,
|
||||
): void {
|
||||
const role = (rm.role || "system").toString();
|
||||
const text = (rm.text || "").toString();
|
||||
const ts = rm.timestamp || "";
|
||||
|
||||
if (role === "agent-state") {
|
||||
const newState = text.trim() as AgentState;
|
||||
setAgentState((prev) => (prev === "listening" ? prev : newState));
|
||||
return;
|
||||
}
|
||||
if (role === "toast") {
|
||||
parseLegacyToast(text, addToast);
|
||||
return;
|
||||
}
|
||||
if (role === "choice") {
|
||||
parseLegacyChoice(text, addToast);
|
||||
return;
|
||||
}
|
||||
if (role === "wisper") return; // suppress debug
|
||||
appendLine(role, text, ts);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// WebRTC helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
async function acquireMicStream(): Promise<MediaStream> {
|
||||
try {
|
||||
return await navigator.mediaDevices.getUserMedia({
|
||||
|
|
@ -185,7 +173,7 @@ function waitForIceComplete(pc: RTCPeerConnection): Promise<void> {
|
|||
}
|
||||
};
|
||||
pc.addEventListener("icegatheringstatechange", check);
|
||||
setTimeout(resolve, 5000); // safety timeout
|
||||
setTimeout(resolve, 5000);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -202,28 +190,11 @@ async function exchangeSdp(
|
|||
return resp.json() as Promise<{ sdp: string; rtcType: string }>;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Hook internals
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface RTCRefs {
|
||||
pcRef: { current: RTCPeerConnection | null };
|
||||
dcRef: { current: RTCDataChannel | null };
|
||||
remoteAudioRef: { current: HTMLAudioElement | null };
|
||||
micSendersRef: { current: RTCRtpSender[] };
|
||||
}
|
||||
|
||||
interface RTCCallbacks {
|
||||
setConnected: (v: boolean) => void;
|
||||
setConnecting: (v: boolean) => void;
|
||||
setRemoteStream: (s: MediaStream | null) => void;
|
||||
showStatus: (text: string, persistMs?: number) => void;
|
||||
appendLine: AppendLine;
|
||||
onDcMessage: (raw: string) => void;
|
||||
closePC: () => void;
|
||||
}
|
||||
|
||||
async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
||||
async function runConnect(
|
||||
refs: RTCRefs,
|
||||
cbs: RTCCallbacks,
|
||||
opts: { textOnly: boolean },
|
||||
): Promise<void> {
|
||||
if (refs.pcRef.current) return;
|
||||
if (!window.RTCPeerConnection) {
|
||||
cbs.showStatus("WebRTC unavailable in this browser.", 4000);
|
||||
|
|
@ -234,10 +205,12 @@ async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
|||
|
||||
let micStream: MediaStream | null = null;
|
||||
try {
|
||||
micStream = await acquireMicStream();
|
||||
micStream.getAudioTracks().forEach((t) => {
|
||||
t.enabled = false;
|
||||
});
|
||||
if (!opts.textOnly) {
|
||||
micStream = await acquireMicStream();
|
||||
micStream.getAudioTracks().forEach((track) => {
|
||||
track.enabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
const pc = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }] });
|
||||
refs.pcRef.current = pc;
|
||||
|
|
@ -260,8 +233,9 @@ async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
|||
dc.onopen = () => {
|
||||
cbs.setConnected(true);
|
||||
cbs.setConnecting(false);
|
||||
cbs.showStatus("Hold anywhere to talk", 2500);
|
||||
cbs.showStatus(opts.textOnly ? "Text-only mode enabled" : "Hold anywhere to talk", 2500);
|
||||
cbs.appendLine("system", "Connected.", new Date().toISOString());
|
||||
cbs.onDcOpen();
|
||||
};
|
||||
dc.onclose = () => {
|
||||
cbs.appendLine("system", "Disconnected.", new Date().toISOString());
|
||||
|
|
@ -269,11 +243,13 @@ async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
|||
};
|
||||
dc.onmessage = (e) => cbs.onDcMessage(e.data as string);
|
||||
|
||||
const stream = micStream;
|
||||
stream.getAudioTracks().forEach((track) => {
|
||||
pc.addTrack(track, stream);
|
||||
});
|
||||
refs.micSendersRef.current = pc.getSenders().filter((s) => s.track?.kind === "audio");
|
||||
refs.micSendersRef.current = [];
|
||||
if (micStream) {
|
||||
micStream.getAudioTracks().forEach((track) => {
|
||||
pc.addTrack(track, micStream as MediaStream);
|
||||
});
|
||||
refs.micSendersRef.current = pc.getSenders().filter((s) => s.track?.kind === "audio");
|
||||
}
|
||||
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
|
|
@ -287,31 +263,114 @@ async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
|||
cbs.appendLine("system", `Connection failed: ${err}`, new Date().toISOString());
|
||||
cbs.showStatus("Connection failed.", 3000);
|
||||
cbs.closePC();
|
||||
if (micStream)
|
||||
micStream.getTracks().forEach((t) => {
|
||||
t.stop();
|
||||
});
|
||||
micStream?.getTracks().forEach((track) => {
|
||||
track.stop();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Message state sub-hook
|
||||
// ---------------------------------------------------------------------------
|
||||
function useBackendActions() {
|
||||
const sendTextMessage = useCallback(async (text: string, metadata?: CardMessageMetadata) => {
|
||||
const message = text.trim();
|
||||
if (!message) return;
|
||||
const url = BACKEND_URL ? `${BACKEND_URL}/message` : "/message";
|
||||
const resp = await fetch(url, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ text: message, metadata: metadata ?? {} }),
|
||||
});
|
||||
if (!resp.ok) throw new Error(`Send failed (${resp.status})`);
|
||||
}, []);
|
||||
|
||||
interface MessageState {
|
||||
agentState: AgentState;
|
||||
logLines: LogLine[];
|
||||
toasts: ToastItem[];
|
||||
appendLine: AppendLine;
|
||||
addToast: AddToast;
|
||||
dismissToast: (id: number) => void;
|
||||
onDcMessage: (raw: string) => void;
|
||||
return { sendTextMessage };
|
||||
}
|
||||
|
||||
function useMessageState(): MessageState {
|
||||
function useCardPolling(loadPersistedCards: () => Promise<void>) {
|
||||
useEffect(() => {
|
||||
loadPersistedCards().catch(() => {});
|
||||
const pollId = window.setInterval(() => {
|
||||
loadPersistedCards().catch(() => {});
|
||||
}, 10000);
|
||||
const onVisible = () => {
|
||||
if (document.visibilityState === "visible") loadPersistedCards().catch(() => {});
|
||||
};
|
||||
window.addEventListener("focus", onVisible);
|
||||
document.addEventListener("visibilitychange", onVisible);
|
||||
return () => {
|
||||
window.clearInterval(pollId);
|
||||
window.removeEventListener("focus", onVisible);
|
||||
document.removeEventListener("visibilitychange", onVisible);
|
||||
};
|
||||
}, [loadPersistedCards]);
|
||||
}
|
||||
|
||||
function useRemoteAudioBindings({
|
||||
textOnly,
|
||||
connected,
|
||||
showStatus,
|
||||
remoteAudioRef,
|
||||
micSendersRef,
|
||||
dcRef,
|
||||
textOnlyRef,
|
||||
}: {
|
||||
textOnly: boolean;
|
||||
connected: boolean;
|
||||
showStatus: (text: string, persistMs?: number) => void;
|
||||
remoteAudioRef: { current: HTMLAudioElement | null };
|
||||
micSendersRef: { current: RTCRtpSender[] };
|
||||
dcRef: { current: RTCDataChannel | null };
|
||||
textOnlyRef: { current: boolean };
|
||||
}) {
|
||||
useEffect(() => {
|
||||
textOnlyRef.current = textOnly;
|
||||
}, [textOnly, textOnlyRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const audio = new Audio();
|
||||
audio.autoplay = true;
|
||||
(audio as HTMLAudioElement & { playsInline: boolean }).playsInline = true;
|
||||
audio.muted = textOnlyRef.current;
|
||||
remoteAudioRef.current = audio;
|
||||
return () => {
|
||||
audio.srcObject = null;
|
||||
};
|
||||
}, [remoteAudioRef, textOnlyRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: Event) => {
|
||||
const enabled = (e as CustomEvent<{ enabled: boolean }>).detail?.enabled ?? false;
|
||||
micSendersRef.current.forEach((sender) => {
|
||||
if (sender.track) sender.track.enabled = enabled && !textOnlyRef.current;
|
||||
});
|
||||
};
|
||||
window.addEventListener("nanobot-mic-enable", handler);
|
||||
return () => window.removeEventListener("nanobot-mic-enable", handler);
|
||||
}, [micSendersRef, textOnlyRef]);
|
||||
|
||||
useEffect(() => {
|
||||
if (remoteAudioRef.current) {
|
||||
remoteAudioRef.current.muted = textOnly;
|
||||
if (textOnly) remoteAudioRef.current.pause();
|
||||
else remoteAudioRef.current.play().catch(() => {});
|
||||
}
|
||||
micSendersRef.current.forEach((sender) => {
|
||||
if (sender.track) sender.track.enabled = false;
|
||||
});
|
||||
if (textOnly) {
|
||||
const dc = dcRef.current;
|
||||
if (dc?.readyState === "open") {
|
||||
dc.send(JSON.stringify({ type: "voice-ptt", pressed: false } satisfies ClientMessage));
|
||||
}
|
||||
}
|
||||
if (connected) showStatus(textOnly ? "Text-only mode enabled" : "Hold anywhere to talk", 2000);
|
||||
}, [connected, dcRef, micSendersRef, remoteAudioRef, showStatus, textOnly]);
|
||||
}
|
||||
|
||||
function useMessageState() {
|
||||
const [agentState, setAgentState] = useState<AgentState>("idle");
|
||||
const [logLines, setLogLines] = useState<LogLine[]>([]);
|
||||
const [toasts, setToasts] = useState<ToastItem[]>([]);
|
||||
const [cards, setCards] = useState<CardItem[]>([]);
|
||||
const idleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const appendLine = useCallback((role: string, text: string, timestamp: string) => {
|
||||
setLogLines((prev) => {
|
||||
|
|
@ -323,144 +382,268 @@ function useMessageState(): MessageState {
|
|||
});
|
||||
}, []);
|
||||
|
||||
const addToast = useCallback((item: Omit<ToastItem, "id">) => {
|
||||
const id = toastIdCounter++;
|
||||
setToasts((prev) => [{ ...item, id }, ...prev]);
|
||||
return id;
|
||||
const upsertCard = useCallback((item: Omit<CardItem, "id">) => {
|
||||
setCards((prev) => {
|
||||
const existingIndex = item.serverId
|
||||
? prev.findIndex((card) => card.serverId === item.serverId)
|
||||
: -1;
|
||||
if (existingIndex >= 0) {
|
||||
const next = [...prev];
|
||||
next[existingIndex] = { ...next[existingIndex], ...item };
|
||||
return sortCards(next);
|
||||
}
|
||||
return sortCards([...prev, { ...item, id: cardIdCounter++ }]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const dismissToast = useCallback((id: number) => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
const dismissCard = useCallback((id: number) => {
|
||||
setCards((prev) => {
|
||||
const card = prev.find((entry) => entry.id === id);
|
||||
if (card?.serverId) {
|
||||
const url = BACKEND_URL
|
||||
? `${BACKEND_URL}/cards/${card.serverId}`
|
||||
: `/cards/${card.serverId}`;
|
||||
fetch(url, { method: "DELETE" }).catch(() => {});
|
||||
}
|
||||
return prev.filter((entry) => entry.id !== id);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const clearIdleFallback = useCallback(() => {
|
||||
if (idleTimerRef.current) {
|
||||
clearTimeout(idleTimerRef.current);
|
||||
idleTimerRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const scheduleIdleFallback = useCallback(
|
||||
(delayMs = 450) => {
|
||||
clearIdleFallback();
|
||||
idleTimerRef.current = setTimeout(() => {
|
||||
idleTimerRef.current = null;
|
||||
setAgentState((prev) => {
|
||||
if (prev === "listening" || prev === "speaking") return prev;
|
||||
return "idle";
|
||||
});
|
||||
}, delayMs);
|
||||
},
|
||||
[clearIdleFallback],
|
||||
);
|
||||
|
||||
useEffect(() => clearIdleFallback, [clearIdleFallback]);
|
||||
|
||||
const loadPersistedCards = useCallback(async () => {
|
||||
try {
|
||||
const url = BACKEND_URL ? `${BACKEND_URL}/cards` : "/cards";
|
||||
const resp = await fetch(url, { cache: "no-store" });
|
||||
if (!resp.ok) {
|
||||
console.warn(`[cards] /cards returned ${resp.status}`);
|
||||
return;
|
||||
}
|
||||
const rawCards = (await resp.json()) as Array<
|
||||
| Extract<ServerMessage, { type: "card" }>
|
||||
| (Omit<Extract<ServerMessage, { type: "card" }>, "type"> & { type?: "card" })
|
||||
>;
|
||||
setCards((prev) => {
|
||||
const byServerId = new Map(
|
||||
prev.filter((card) => card.serverId).map((card) => [card.serverId as string, card.id]),
|
||||
);
|
||||
const next = rawCards.map((raw) => {
|
||||
const card = toCardItem({
|
||||
type: "card",
|
||||
...(raw as Omit<Extract<ServerMessage, { type: "card" }>, "type">),
|
||||
});
|
||||
return {
|
||||
...card,
|
||||
id:
|
||||
card.serverId && byServerId.has(card.serverId)
|
||||
? (byServerId.get(card.serverId) as number)
|
||||
: cardIdCounter++,
|
||||
};
|
||||
});
|
||||
return sortCards(next);
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn("[cards] failed to load persisted cards", err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onDcMessage = useCallback(
|
||||
(raw: string) => {
|
||||
console.log("[dc] onDcMessage raw:", raw);
|
||||
let msg: ServerMessage;
|
||||
try {
|
||||
msg = JSON.parse(raw);
|
||||
} catch {
|
||||
console.log("[dc] JSON parse failed for raw message");
|
||||
return;
|
||||
}
|
||||
if ("type" in msg) {
|
||||
console.log("[dc] typed message, type:", (msg as { type: string }).type);
|
||||
handleTypedMessage(
|
||||
msg as Extract<ServerMessage, { type: string }>,
|
||||
setAgentState,
|
||||
appendLine,
|
||||
addToast,
|
||||
);
|
||||
} else {
|
||||
console.log("[dc] legacy message, role:", (msg as { role: string }).role);
|
||||
handleLegacyMessage(
|
||||
msg as { role: string; text: string; timestamp?: string },
|
||||
setAgentState,
|
||||
appendLine,
|
||||
addToast,
|
||||
);
|
||||
}
|
||||
if (typeof msg !== "object" || msg === null || !("type" in msg)) return;
|
||||
handleTypedMessage(
|
||||
msg as Extract<ServerMessage, { type: string }>,
|
||||
setAgentState,
|
||||
appendLine,
|
||||
upsertCard,
|
||||
{ clear: clearIdleFallback, schedule: scheduleIdleFallback },
|
||||
);
|
||||
},
|
||||
[appendLine, addToast],
|
||||
[appendLine, clearIdleFallback, scheduleIdleFallback, upsertCard],
|
||||
);
|
||||
|
||||
return { agentState, logLines, toasts, appendLine, addToast, dismissToast, onDcMessage };
|
||||
return { agentState, logLines, cards, appendLine, dismissCard, loadPersistedCards, onDcMessage };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Hook
|
||||
// ---------------------------------------------------------------------------
|
||||
function usePeerConnectionControls({
|
||||
textOnly,
|
||||
connected,
|
||||
appendLine,
|
||||
onDcMessage,
|
||||
loadPersistedCards,
|
||||
showStatus,
|
||||
refs,
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
textOnlyRef,
|
||||
}: {
|
||||
textOnly: boolean;
|
||||
connected: boolean;
|
||||
appendLine: AppendLine;
|
||||
onDcMessage: (raw: string) => void;
|
||||
loadPersistedCards: () => Promise<void>;
|
||||
showStatus: (text: string, persistMs?: number) => void;
|
||||
refs: RTCRefs;
|
||||
setConnected: (value: boolean) => void;
|
||||
setConnecting: (value: boolean) => void;
|
||||
setRemoteStream: (stream: MediaStream | null) => void;
|
||||
textOnlyRef: { current: boolean };
|
||||
}) {
|
||||
const closePC = useCallback(() => {
|
||||
refs.dcRef.current?.close();
|
||||
refs.dcRef.current = null;
|
||||
refs.pcRef.current?.close();
|
||||
refs.pcRef.current = null;
|
||||
refs.micSendersRef.current = [];
|
||||
setConnected(false);
|
||||
setConnecting(false);
|
||||
if (refs.remoteAudioRef.current) refs.remoteAudioRef.current.srcObject = null;
|
||||
setRemoteStream(null);
|
||||
}, [refs, setConnected, setConnecting, setRemoteStream]);
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
await runConnect(
|
||||
refs,
|
||||
{
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
showStatus,
|
||||
appendLine,
|
||||
onDcMessage,
|
||||
onDcOpen: () => {
|
||||
loadPersistedCards().catch(() => {});
|
||||
},
|
||||
closePC,
|
||||
},
|
||||
{ textOnly: textOnlyRef.current },
|
||||
);
|
||||
}, [
|
||||
appendLine,
|
||||
closePC,
|
||||
loadPersistedCards,
|
||||
onDcMessage,
|
||||
refs,
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
showStatus,
|
||||
textOnlyRef,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (textOnly || !connected || refs.micSendersRef.current.length > 0) return;
|
||||
closePC();
|
||||
connect().catch(() => {});
|
||||
}, [closePC, connect, connected, refs.micSendersRef, textOnly]);
|
||||
|
||||
return { closePC, connect };
|
||||
}
|
||||
|
||||
export function useWebRTC(): WebRTCState {
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [textOnly, setTextOnlyState] = useState(false);
|
||||
const [voiceStatus, setVoiceStatus] = useState("");
|
||||
const [statusVisible, setStatusVisible] = useState(false);
|
||||
const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
|
||||
|
||||
const pcRef = useRef<RTCPeerConnection | null>(null);
|
||||
const dcRef = useRef<RTCDataChannel | null>(null);
|
||||
const remoteAudioRef = useRef<HTMLAudioElement | null>(null);
|
||||
const refs: RTCRefs = {
|
||||
pcRef: useRef<RTCPeerConnection | null>(null),
|
||||
dcRef: useRef<RTCDataChannel | null>(null),
|
||||
remoteAudioRef: useRef<HTMLAudioElement | null>(null),
|
||||
micSendersRef: useRef<RTCRtpSender[]>([]),
|
||||
};
|
||||
const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const micSendersRef = useRef<RTCRtpSender[]>([]);
|
||||
const textOnlyRef = useRef(false);
|
||||
const { sendTextMessage } = useBackendActions();
|
||||
const { agentState, logLines, cards, appendLine, dismissCard, loadPersistedCards, onDcMessage } =
|
||||
useMessageState();
|
||||
|
||||
const { agentState, logLines, toasts, appendLine, dismissToast, onDcMessage } = useMessageState();
|
||||
|
||||
// Create audio element once
|
||||
useEffect(() => {
|
||||
const audio = new Audio();
|
||||
audio.autoplay = true;
|
||||
(audio as HTMLAudioElement & { playsInline: boolean }).playsInline = true;
|
||||
remoteAudioRef.current = audio;
|
||||
return () => {
|
||||
audio.srcObject = null;
|
||||
};
|
||||
const setTextOnly = useCallback((enabled: boolean) => {
|
||||
textOnlyRef.current = enabled;
|
||||
setTextOnlyState(enabled);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: Event) => {
|
||||
const enabled = (e as CustomEvent<{ enabled: boolean }>).detail?.enabled ?? false;
|
||||
micSendersRef.current.forEach((sender) => {
|
||||
if (sender.track) sender.track.enabled = enabled;
|
||||
});
|
||||
};
|
||||
window.addEventListener("nanobot-mic-enable", handler);
|
||||
return () => window.removeEventListener("nanobot-mic-enable", handler);
|
||||
}, []);
|
||||
|
||||
const showStatus = useCallback((text: string, persistMs = 0) => {
|
||||
setVoiceStatus(text);
|
||||
setStatusVisible(true);
|
||||
if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
|
||||
if (persistMs > 0) {
|
||||
if (persistMs > 0)
|
||||
statusTimerRef.current = setTimeout(() => setStatusVisible(false), persistMs);
|
||||
}
|
||||
}, []);
|
||||
const sendJson = useCallback(
|
||||
(msg: ClientMessage) => {
|
||||
const dc = refs.dcRef.current;
|
||||
if (dc?.readyState === "open") dc.send(JSON.stringify(msg));
|
||||
},
|
||||
[refs.dcRef],
|
||||
);
|
||||
|
||||
const sendJson = useCallback((msg: ClientMessage) => {
|
||||
const dc = dcRef.current;
|
||||
if (!dc || dc.readyState !== "open") return;
|
||||
dc.send(JSON.stringify(msg));
|
||||
}, []);
|
||||
|
||||
const closePC = useCallback(() => {
|
||||
dcRef.current?.close();
|
||||
dcRef.current = null;
|
||||
pcRef.current?.close();
|
||||
pcRef.current = null;
|
||||
micSendersRef.current = [];
|
||||
setConnected(false);
|
||||
setConnecting(false);
|
||||
if (remoteAudioRef.current) remoteAudioRef.current.srcObject = null;
|
||||
setRemoteStream(null);
|
||||
}, []);
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
const refs: RTCRefs = { pcRef, dcRef, remoteAudioRef, micSendersRef };
|
||||
const cbs: RTCCallbacks = {
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
showStatus,
|
||||
appendLine,
|
||||
onDcMessage,
|
||||
closePC,
|
||||
};
|
||||
await runConnect(refs, cbs);
|
||||
}, [setConnected, setConnecting, setRemoteStream, showStatus, appendLine, onDcMessage, closePC]);
|
||||
useCardPolling(loadPersistedCards);
|
||||
useRemoteAudioBindings({
|
||||
textOnly,
|
||||
connected,
|
||||
showStatus,
|
||||
remoteAudioRef: refs.remoteAudioRef,
|
||||
micSendersRef: refs.micSendersRef,
|
||||
dcRef: refs.dcRef,
|
||||
textOnlyRef,
|
||||
});
|
||||
const { connect } = usePeerConnectionControls({
|
||||
textOnly,
|
||||
connected,
|
||||
appendLine,
|
||||
onDcMessage,
|
||||
loadPersistedCards,
|
||||
showStatus,
|
||||
refs,
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
textOnlyRef,
|
||||
});
|
||||
|
||||
return {
|
||||
connected,
|
||||
connecting,
|
||||
textOnly,
|
||||
agentState,
|
||||
logLines,
|
||||
toasts,
|
||||
cards,
|
||||
voiceStatus,
|
||||
statusVisible,
|
||||
remoteAudioEl: remoteAudioRef.current,
|
||||
remoteAudioEl: refs.remoteAudioRef.current,
|
||||
remoteStream,
|
||||
sendJson,
|
||||
dismissToast,
|
||||
sendTextMessage,
|
||||
dismissCard,
|
||||
setTextOnly,
|
||||
connect,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue