import React from "react";
import { AmbientBorder } from "./AmbientBorder.jsx";
import { IconButton } from "../actions/IconButton.jsx";
/* Voice input for a conversation, at the size of a module: a bar that sits
where a composer would, or a panel that holds the exchange. Controlled: the
app owns the microphone, the recognition and the reply, and says which
state the conversation is in; the component draws it, with an ambient
border that turns in the person's colour while they speak and the
assistant's while it answers, and follows the voice's level. */
/* A semantic text role, whole: family, size, line, weight and tracking. */
function voiceType(role) {
return { fontFamily: `var(--dt-text-${role}-family)`, fontSize: `var(--dt-text-${role}-size)`, lineHeight: `var(--dt-text-${role}-line)`, fontWeight: `var(--dt-text-${role}-weight)`, letterSpacing: `var(--dt-text-${role}-tracking)` };
}
const VOICE_LABELS = { idle: "Ready", listening: "Listening", thinking: "Thinking", speaking: "Speaking", error: "Didn't catch that" };
const MIC = ["M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Z", "M19 11a7 7 0 0 1-14 0", "M12 18v3"];
const STOP = ["M8 8h8v8H8z"];
const CLOSE = ["M6 6l12 12", "M18 6 6 18"];
function VoiceGlyph({ paths }) {
return (
);
}
/* The words on screen: what the person is saying while they speak, the
assistant's reply while it answers, the last thing said otherwise. */
function linesFor(state, transcript, response) {
return { you: transcript, them: state === "listening" ? "" : response };
}
export function VoiceInput({
state = "idle",
tone = "brand",
level,
inputStream,
outputStream,
transcript,
response,
placeholder = "Press the microphone and speak",
assistantName = "Assistant",
layout = "bar",
label = "Voice input",
onToggle,
onEnd,
disabled = false,
style,
...rest
}) {
const listening = state === "listening";
const active = state !== "idle";
const status = VOICE_LABELS[state] || VOICE_LABELS.idle;
const { you, them } = linesFor(state, transcript, response);
const mic = (
);
const end = onEnd && active ? (
) : null;
const statusText = (
{status}
);
if (layout === "panel") {
return (
{statusText}
{end}
{you || them ? (
<>
{you &&
You: {you}
}
{them &&
{assistantName}: {them}
}
) : (
{placeholder}
)}
{mic}
);
}
const line = listening ? you : them || you;
return (