1373 lines
40 KiB
JavaScript
1373 lines
40 KiB
JavaScript
const STREAM_ENDPOINT = '/v1/chat/voice/stream';
|
|
const ICONS_URL = '/static/icons.svg';
|
|
const MODELS_ENDPOINT = '/v1/models';
|
|
const MODEL_KEY = 'odidere_model';
|
|
const STORAGE_KEY = 'odidere_history';
|
|
const VOICES_ENDPOINT = '/v1/voices';
|
|
const VOICE_KEY = 'odidere_voice';
|
|
|
|
/**
|
|
* Odidere is the main application class for the voice assistant UI.
|
|
* It manages audio recording, chat history, and communication with the API.
|
|
* Creates a new instance bound to the given document.
|
|
* @param {Object} options
|
|
* @param {Document} options.document
|
|
*/
|
|
class Odidere {
|
|
constructor({ document }) {
|
|
this.document = document;
|
|
|
|
// State
|
|
this.attachments = [];
|
|
this.audioChunks = [];
|
|
this.currentAudio = null;
|
|
this.currentAudioUrl = null;
|
|
this.currentController = null;
|
|
this.history = [];
|
|
this.isProcessing = false;
|
|
this.isRecording = false;
|
|
this.isMuted = false;
|
|
this.mediaRecorder = null;
|
|
|
|
// DOM Elements
|
|
this.$attach = document.getElementById('attach');
|
|
this.$attachments = document.getElementById('attachments');
|
|
this.$chat = document.getElementById('chat');
|
|
this.$fileInput = document.getElementById('file-input');
|
|
this.$model = document.getElementById('model');
|
|
this.$ptt = document.getElementById('ptt');
|
|
this.$reset = document.getElementById('reset');
|
|
this.$send = document.getElementById('send');
|
|
this.$textInput = document.getElementById('text-input');
|
|
this.$voice = document.getElementById('voice');
|
|
this.$mute = document.getElementById('mute');
|
|
|
|
// Templates
|
|
this.$tplAssistantMessage = document.getElementById(
|
|
'tpl-assistant-message',
|
|
);
|
|
this.$tplAttachmentChip = document.getElementById('tpl-attachment-chip');
|
|
this.$tplCollapsible = document.getElementById('tpl-collapsible');
|
|
this.$tplDebugRow = document.getElementById('tpl-debug-row');
|
|
this.$tplErrorMessage = document.getElementById('tpl-error-message');
|
|
this.$tplToolCall = document.getElementById('tpl-tool-call');
|
|
this.$tplUserMessage = document.getElementById('tpl-user-message');
|
|
|
|
this.#init();
|
|
}
|
|
|
|
// ====================
|
|
// PUBLIC API
|
|
// ====================
|
|
/**
|
|
* destroy releases all resources including media streams and audio.
|
|
*/
|
|
destroy() {
|
|
for (const track of this.mediaRecorder?.stream?.getTracks() ?? []) {
|
|
track.stop();
|
|
}
|
|
this.#stopCurrentAudio();
|
|
this.currentController?.abort();
|
|
}
|
|
|
|
/**
|
|
* reset clears all state including history, attachments, and pending
|
|
* requests.
|
|
*/
|
|
reset() {
|
|
this.#stopCurrentAudio();
|
|
|
|
if (this.currentController) {
|
|
this.currentController.abort();
|
|
this.currentController = null;
|
|
}
|
|
|
|
this.#setLoadingState(false);
|
|
this.history = [];
|
|
localStorage.removeItem(STORAGE_KEY);
|
|
this.$chat.innerHTML = '';
|
|
this.#clearAttachments();
|
|
this.$textInput.value = '';
|
|
this.$textInput.style.height = 'auto';
|
|
}
|
|
|
|
// ====================
|
|
// INITIALIZATION
|
|
// ====================
|
|
/**
|
|
* #init initializes the application.
|
|
*/
|
|
#init() {
|
|
this.#loadHistory();
|
|
this.#bindEvents();
|
|
this.#fetchVoices();
|
|
this.#fetchModels();
|
|
}
|
|
|
|
/**
|
|
* #bindEvents attaches all event listeners to DOM elements.
|
|
*/
|
|
#bindEvents() {
|
|
// PTT button: touch
|
|
this.$ptt.addEventListener('touchstart', this.#handlePttTouchStart, {
|
|
passive: false,
|
|
});
|
|
this.$ptt.addEventListener('touchend', this.#handlePttTouchEnd);
|
|
this.$ptt.addEventListener('touchcancel', this.#handlePttTouchEnd);
|
|
// Prevent context menu on long press.
|
|
this.$ptt.addEventListener('contextmenu', (e) => e.preventDefault());
|
|
|
|
// PTT button: mouse
|
|
this.$ptt.addEventListener('mousedown', this.#handlePttMouseDown);
|
|
this.$ptt.addEventListener('mouseup', this.#handlePttMouseUp);
|
|
this.$ptt.addEventListener('mouseleave', this.#handlePttMouseUp);
|
|
|
|
// Keyboard: spacebar PTT (outside inputs)
|
|
this.document.addEventListener('keydown', this.#handleKeyDown);
|
|
this.document.addEventListener('keyup', this.#handleKeyUp);
|
|
|
|
// Textarea: Enter to send, Shift+Enter for newline
|
|
this.$textInput.addEventListener('keydown', this.#handleTextareaKeyDown);
|
|
this.$textInput.addEventListener('input', this.#handleTextareaInput);
|
|
|
|
// Send button
|
|
this.$send.addEventListener('click', () => this.#submitText());
|
|
|
|
// Reset button
|
|
this.$reset.addEventListener('click', () => this.reset());
|
|
|
|
// File attachment
|
|
this.$attach.addEventListener('click', () => this.$fileInput.click());
|
|
this.$fileInput.addEventListener('change', (e) =>
|
|
this.#handleAttachments(e.target.files),
|
|
);
|
|
|
|
// Save selections on change.
|
|
this.$model.addEventListener('change', () => {
|
|
localStorage.setItem(MODEL_KEY, this.$model.value);
|
|
});
|
|
this.$voice.addEventListener('change', () => {
|
|
localStorage.setItem(VOICE_KEY, this.$voice.value);
|
|
});
|
|
// Mute button
|
|
this.$mute.addEventListener('click', () => this.#toggleMute());
|
|
}
|
|
|
|
/**
|
|
* #loadHistory loads chat history from localStorage and renders it.
|
|
*/
|
|
#loadHistory() {
|
|
try {
|
|
const stored = localStorage.getItem(STORAGE_KEY);
|
|
if (!stored) return;
|
|
|
|
this.history = JSON.parse(stored);
|
|
this.#renderMessages(this.history);
|
|
} catch (e) {
|
|
console.error('failed to load history:', e);
|
|
this.history = [];
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
// EVENT HANDLERS
|
|
// ====================
|
|
/**
|
|
* #handlePttTouchStart handles touch start on the PTT button.
|
|
* @param {TouchEvent} event
|
|
*/
|
|
#handlePttTouchStart = (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.#startRecording();
|
|
};
|
|
|
|
/**
|
|
* #handlePttTouchEnd handles touch end on the PTT button.
|
|
* @param {TouchEvent} event
|
|
*/
|
|
#handlePttTouchEnd = (event) => {
|
|
event.stopPropagation();
|
|
this.#stopRecording();
|
|
};
|
|
|
|
/**
|
|
* #handlePttMouseDown handles mouse down on the PTT button.
|
|
* Ignores events that originate from touch to avoid double-firing.
|
|
* @param {MouseEvent} event
|
|
*/
|
|
#handlePttMouseDown = (event) => {
|
|
if (event.sourceCapabilities?.firesTouchEvents) return;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.#startRecording();
|
|
};
|
|
|
|
/**
|
|
* #handlePttMouseUp handles mouse up on the PTT button.
|
|
* @param {MouseEvent} event
|
|
*/
|
|
#handlePttMouseUp = (event) => {
|
|
if (event.sourceCapabilities?.firesTouchEvents) return;
|
|
event.stopPropagation();
|
|
this.#stopRecording();
|
|
};
|
|
|
|
/**
|
|
* #handleKeyDown handles keydown events for spacebar PTT.
|
|
* Only triggers when focus is not in an input element.
|
|
* @param {KeyboardEvent} event
|
|
*/
|
|
#handleKeyDown = (event) => {
|
|
if (event.code !== 'Space') return;
|
|
if (event.repeat) return;
|
|
|
|
const isInput =
|
|
event.target.tagName === 'INPUT' ||
|
|
event.target.tagName === 'TEXTAREA' ||
|
|
event.target.tagName === 'SELECT';
|
|
if (isInput) return;
|
|
|
|
event.preventDefault();
|
|
this.#startRecording();
|
|
};
|
|
|
|
/**
|
|
* #handleKeyUp handles keyup events for spacebar PTT.
|
|
* @param {KeyboardEvent} event
|
|
*/
|
|
#handleKeyUp = (event) => {
|
|
if (event.code !== 'Space') return;
|
|
|
|
const isInput =
|
|
event.target.tagName === 'INPUT' ||
|
|
event.target.tagName === 'TEXTAREA' ||
|
|
event.target.tagName === 'SELECT';
|
|
if (isInput) return;
|
|
|
|
event.preventDefault();
|
|
this.#stopRecording();
|
|
};
|
|
|
|
/**
|
|
* #handleTextareaKeyDown handles Enter key to submit text.
|
|
* Shift+Enter inserts a newline instead.
|
|
* @param {KeyboardEvent} event
|
|
*/
|
|
#handleTextareaKeyDown = (event) => {
|
|
if (event.code !== 'Enter') return;
|
|
if (event.shiftKey) return;
|
|
|
|
event.preventDefault();
|
|
this.#submitText();
|
|
};
|
|
|
|
/**
|
|
* #handleTextareaInput adjusts textarea height to fit content.
|
|
*/
|
|
#handleTextareaInput = () => {
|
|
const textarea = this.$textInput;
|
|
textarea.style.height = 'auto';
|
|
const computed = getComputedStyle(textarea);
|
|
const maxHeight = parseFloat(computed.maxHeight);
|
|
const newHeight = Math.min(textarea.scrollHeight, maxHeight);
|
|
textarea.style.height = `${newHeight}px`;
|
|
};
|
|
|
|
/**
|
|
* #handleAttachments adds files to the attachment list.
|
|
* Duplicates are ignored based on name and size.
|
|
* @param {FileList} files
|
|
*/
|
|
#handleAttachments(files) {
|
|
for (const file of files) {
|
|
const isDuplicate = this.attachments.some(
|
|
(a) =>
|
|
a.name === file.name &&
|
|
a.size === file.size &&
|
|
a.lastModified === file.lastModified,
|
|
);
|
|
if (isDuplicate) continue;
|
|
|
|
this.attachments.push(file);
|
|
}
|
|
this.#renderAttachments();
|
|
this.$fileInput.value = '';
|
|
}
|
|
|
|
// ====================
|
|
// AUDIO RECORDING
|
|
// ====================
|
|
/**
|
|
* #startRecording begins audio recording if not already recording or
|
|
* processing.
|
|
* Initializes the MediaRecorder on first use.
|
|
*/
|
|
async #startRecording() {
|
|
if (this.isRecording) return;
|
|
if (this.isProcessing) return;
|
|
|
|
this.#stopCurrentAudio();
|
|
|
|
// Initialize MediaRecorder on first use
|
|
if (!this.mediaRecorder) {
|
|
const success = await this.#initMediaRecorder();
|
|
if (!success) return;
|
|
}
|
|
|
|
this.audioChunks = [];
|
|
this.mediaRecorder.start();
|
|
this.#setRecordingState(true);
|
|
}
|
|
|
|
/**
|
|
* #stopRecording stops the current audio recording.
|
|
*/
|
|
#stopRecording() {
|
|
if (!this.isRecording) return;
|
|
if (!this.mediaRecorder) return;
|
|
|
|
this.mediaRecorder.stop();
|
|
this.#setRecordingState(false);
|
|
}
|
|
|
|
/**
|
|
* #initMediaRecorder initializes the MediaRecorder with microphone access.
|
|
* Prefers opus codec for better compression if available.
|
|
* @returns {Promise<boolean>} true if successful
|
|
*/
|
|
async #initMediaRecorder() {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
|
|
? 'audio/webm;codecs=opus'
|
|
: 'audio/webm';
|
|
|
|
this.mediaRecorder = new MediaRecorder(stream, { mimeType });
|
|
|
|
this.mediaRecorder.addEventListener('dataavailable', (event) => {
|
|
if (event.data.size > 0) {
|
|
this.audioChunks.push(event.data);
|
|
}
|
|
});
|
|
|
|
this.mediaRecorder.addEventListener('stop', async () => {
|
|
if (this.audioChunks.length === 0) return;
|
|
|
|
const audioBlob = new Blob(this.audioChunks, {
|
|
type: this.mediaRecorder.mimeType,
|
|
});
|
|
this.audioChunks = [];
|
|
|
|
// Capture and clear text input to send with audio.
|
|
const text = this.$textInput.value.trim();
|
|
this.$textInput.value = '';
|
|
this.$textInput.style.height = 'auto';
|
|
|
|
await this.#sendRequest({ audio: audioBlob, text });
|
|
});
|
|
|
|
this.mediaRecorder.addEventListener('error', (event) => {
|
|
console.error('MediaRecorder error:', event.error);
|
|
this.#setRecordingState(false);
|
|
this.audioChunks = [];
|
|
this.#renderError(
|
|
`Recording error: ${event.error?.message || 'Unknown error'}`,
|
|
);
|
|
});
|
|
|
|
return true;
|
|
} catch (e) {
|
|
console.error('failed to initialize media recorder:', e);
|
|
this.#renderError(`Microphone access denied: ${e.message}`);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
// AUDIO PLAYBACK
|
|
// ====================
|
|
/**
|
|
* #playAudio decodes and plays base64-encoded WAV audio.
|
|
* @param {string} base64Audio
|
|
*/
|
|
async #playAudio(base64Audio) {
|
|
try {
|
|
this.#stopCurrentAudio();
|
|
|
|
const audioData = Uint8Array.from(atob(base64Audio), (c) =>
|
|
c.charCodeAt(0),
|
|
);
|
|
const audioBlob = new Blob([audioData], { type: 'audio/wav' });
|
|
const audioUrl = URL.createObjectURL(audioBlob);
|
|
|
|
this.currentAudioUrl = audioUrl;
|
|
this.currentAudio = new Audio(audioUrl);
|
|
this.currentAudio.muted = !!this.isMuted;
|
|
|
|
await new Promise((resolve, reject) => {
|
|
this.currentAudio.addEventListener(
|
|
'ended',
|
|
() => {
|
|
this.#cleanupAudio();
|
|
resolve();
|
|
},
|
|
{ once: true },
|
|
);
|
|
this.currentAudio.addEventListener(
|
|
'error',
|
|
(e) => {
|
|
this.#cleanupAudio();
|
|
reject(e);
|
|
},
|
|
{ once: true },
|
|
);
|
|
this.currentAudio.play().catch(reject);
|
|
});
|
|
} catch (e) {
|
|
console.error('failed to play audio:', e);
|
|
this.#cleanupAudio();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* #stopCurrentAudio stops and cleans up any playing audio.
|
|
*/
|
|
#stopCurrentAudio() {
|
|
if (this.currentAudio) {
|
|
this.currentAudio.pause();
|
|
this.currentAudio.currentTime = 0;
|
|
}
|
|
this.#cleanupAudio();
|
|
}
|
|
|
|
/**
|
|
* #cleanupAudio revokes the object URL and clears audio references.
|
|
*/
|
|
#cleanupAudio() {
|
|
if (this.currentAudioUrl) {
|
|
URL.revokeObjectURL(this.currentAudioUrl);
|
|
this.currentAudioUrl = null;
|
|
}
|
|
this.currentAudio = null;
|
|
}
|
|
|
|
// ====================
|
|
// API: FETCH
|
|
// ====================
|
|
/**
|
|
* #fetchModels fetches available models from the API and populates selectors.
|
|
*/
|
|
async #fetchModels() {
|
|
try {
|
|
const res = await fetch(MODELS_ENDPOINT);
|
|
if (!res.ok) throw new Error(`${res.status}`);
|
|
const data = await res.json();
|
|
this.#populateModels(data.models, data.default_model);
|
|
} catch (e) {
|
|
console.error('failed to fetch models:', e);
|
|
this.#populateModelsFallback();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* #fetchVoices fetches available voices from the API and populates
|
|
* selectors.
|
|
*/
|
|
async #fetchVoices() {
|
|
try {
|
|
const res = await fetch(VOICES_ENDPOINT);
|
|
if (!res.ok) throw new Error(`${res.status}`);
|
|
const data = await res.json();
|
|
|
|
// Filter out legacy v0 voices.
|
|
const filtered = data.voices.filter((v) => !v.includes('_v0'));
|
|
this.#populateVoiceSelect(filtered);
|
|
} catch (e) {
|
|
console.error('failed to fetch voices:', e);
|
|
this.$voice.innerHTML = '';
|
|
|
|
const $opt = this.document.createElement('option');
|
|
$opt.value = '';
|
|
$opt.disabled = true;
|
|
$opt.selected = true;
|
|
$opt.textContent = 'Failed to load';
|
|
this.$voice.appendChild($opt);
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
// API: CHAT
|
|
// ====================
|
|
|
|
/**
|
|
* #submitText submits the current text input and attachments.
|
|
*/
|
|
async #submitText() {
|
|
const text = this.$textInput.value.trim();
|
|
const hasContent = text || this.attachments.length > 0;
|
|
|
|
if (!hasContent) return;
|
|
if (this.isProcessing) return;
|
|
|
|
this.#stopCurrentAudio();
|
|
this.$textInput.value = '';
|
|
this.$textInput.style.height = 'auto';
|
|
|
|
await this.#sendRequest({ text });
|
|
}
|
|
|
|
/**
|
|
* #sendRequest sends a chat request to the streaming SSE endpoint.
|
|
*
|
|
* For text-only input, renders the user message immediately for
|
|
* responsiveness.
|
|
* For audio input, waits for the server's transcription event before
|
|
* rendering the user message.
|
|
*
|
|
* Messages are rendered incrementally as SSE events arrive:
|
|
* - user (transcription), assistant (tool calls), tool (results),
|
|
* and a final assistant message with synthesized audio.
|
|
*
|
|
* @param {Object} options
|
|
* @param {Blob} [options.audio] - Recorded audio blob
|
|
* @param {string} [options.text] - Text input
|
|
*/
|
|
async #sendRequest({ audio = null, text = '' }) {
|
|
this.#setLoadingState(true);
|
|
this.currentController = new AbortController();
|
|
|
|
try {
|
|
// Build the user message with text and attachments.
|
|
const userMessage = await this.#buildUserMessage(text, this.attachments);
|
|
const hasContent = text || this.attachments.length > 0 || audio;
|
|
if (!hasContent) {
|
|
this.#setLoadingState(false);
|
|
return;
|
|
}
|
|
|
|
// Build messages array: history + current user message.
|
|
const messages = [
|
|
...this.history.map(({ id, meta, ...msg }) => msg),
|
|
userMessage,
|
|
];
|
|
|
|
const payload = {
|
|
messages,
|
|
voice: this.$voice.value,
|
|
model: this.$model.value,
|
|
};
|
|
if (audio) {
|
|
payload.audio = await this.#toBase64(audio);
|
|
}
|
|
|
|
// Clear attachments after building payload (before async operations).
|
|
this.#clearAttachments();
|
|
|
|
// For text-only requests (no audio), add to history and render
|
|
// immediately.
|
|
if (!audio) {
|
|
this.#appendHistory([userMessage]);
|
|
this.#renderMessages([userMessage]);
|
|
}
|
|
|
|
const res = await fetch(STREAM_ENDPOINT, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
signal: this.currentController.signal,
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.text();
|
|
throw new Error(`server error ${res.status}: ${err}`);
|
|
}
|
|
// Parse SSE stream from response body.
|
|
const reader = res.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let sseBuffer = '';
|
|
|
|
// Stash assistant messages with tool_calls until their results arrive.
|
|
let pendingTools = null;
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
sseBuffer += decoder.decode(value, { stream: true });
|
|
|
|
// Process complete SSE events (separated by double newlines).
|
|
const parts = sseBuffer.split('\n\n');
|
|
sseBuffer = parts.pop();
|
|
|
|
for (const part of parts) {
|
|
if (!part.trim()) continue;
|
|
|
|
// Extract data from SSE event lines.
|
|
let data = '';
|
|
for (const line of part.split('\n')) {
|
|
if (line.startsWith('data: ')) {
|
|
data += line.slice(6);
|
|
}
|
|
}
|
|
if (!data) continue;
|
|
|
|
let event;
|
|
try {
|
|
event = JSON.parse(data);
|
|
} catch {
|
|
console.error('failed to parse SSE data:', data);
|
|
continue;
|
|
}
|
|
|
|
// Handle errors sent mid-stream.
|
|
if (event.error) {
|
|
this.#renderError(event.error);
|
|
continue;
|
|
}
|
|
|
|
const message = event.message;
|
|
// Handle user message from server (audio transcription).
|
|
if (message.role === 'user' && event.transcription) {
|
|
const displayParts = [];
|
|
if (text) displayParts.push(text);
|
|
if (event.transcription) displayParts.push(event.transcription);
|
|
const displayContent = displayParts.join('\n\n');
|
|
|
|
let historyContent;
|
|
if (typeof userMessage.content === 'string') {
|
|
historyContent = displayContent;
|
|
} else {
|
|
historyContent = [...userMessage.content];
|
|
if (event.transcription) {
|
|
historyContent.push({
|
|
type: 'text',
|
|
text: event.transcription,
|
|
});
|
|
}
|
|
}
|
|
|
|
const audioUserMessage = {
|
|
id: userMessage.id,
|
|
role: 'user',
|
|
content: historyContent,
|
|
meta: { language: event.detected_language },
|
|
};
|
|
|
|
this.#appendHistory([audioUserMessage]);
|
|
this.#renderMessages([audioUserMessage]);
|
|
continue;
|
|
}
|
|
|
|
// Stash assistant messages with tool calls; don't render yet.
|
|
if (
|
|
message.role === 'assistant' &&
|
|
message.tool_calls?.length > 0 &&
|
|
!message.content
|
|
) {
|
|
pendingTools = {
|
|
assistant: message,
|
|
results: [],
|
|
expected: message.tool_calls.length,
|
|
};
|
|
// Add to history (server needs it) but don't render.
|
|
this.#appendHistory([message]);
|
|
continue;
|
|
}
|
|
|
|
// Collect tool results and render once all have arrived.
|
|
if (message.role === 'tool' && pendingTools.assistant) {
|
|
pendingTools.results.push(message);
|
|
// Add to history (server needs it) but don't render yet.
|
|
this.#appendHistory([message]);
|
|
|
|
// Once all tool results are in, render the combined message.
|
|
if (pendingTools.results.length >= pendingTools.expected) {
|
|
this.#renderMessages([
|
|
pendingTools.assistant,
|
|
...pendingTools.results,
|
|
]);
|
|
pendingTools = null;
|
|
}
|
|
continue;
|
|
}
|
|
|
|
// Regular assistant message (final reply with content).
|
|
const meta = {};
|
|
if (event.voice) meta.voice = event.voice;
|
|
|
|
this.#appendHistory([message], meta);
|
|
this.#renderMessages([message], meta);
|
|
|
|
// For the final assistant message with audio, play it.
|
|
if (event.audio) {
|
|
this.#setLoadingState(false);
|
|
await this.#playAudio(event.audio);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.#setLoadingState(false);
|
|
} catch (e) {
|
|
if (e.name === 'AbortError') {
|
|
console.debug('request aborted');
|
|
return;
|
|
}
|
|
console.error('failed to send request:', e);
|
|
this.#renderError(`Error: ${e.message}`);
|
|
this.#setLoadingState(false);
|
|
} finally {
|
|
this.currentController = null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* #buildUserMessage builds a user message object for the API.
|
|
* Text files are included as text, images as base64 data URLs.
|
|
* Returns either a simple string content or multipart array format
|
|
* depending on whether images are present.
|
|
* @param {string} text
|
|
* @param {File[]} attachments
|
|
* @returns {Promise<{id: string, role: 'user', content: string | Array}>}
|
|
*/
|
|
async #buildUserMessage(text, attachments) {
|
|
const textParts = [];
|
|
const imageParts = [];
|
|
|
|
// Process attachments.
|
|
// Images become data URLs, text files become inline text.
|
|
for (const file of attachments) {
|
|
if (file.type.startsWith('image/')) {
|
|
const base64 = await this.#toBase64(file);
|
|
const dataUrl = `data:${file.type};base64,${base64}`;
|
|
imageParts.push({
|
|
type: 'image_url',
|
|
image_url: { url: dataUrl },
|
|
});
|
|
} else {
|
|
const content = await file.text();
|
|
textParts.push(`=== File: ${file.name} ===\n\n${content}`);
|
|
}
|
|
}
|
|
|
|
// Add user's message text after files.
|
|
if (text) {
|
|
textParts.push(text);
|
|
}
|
|
|
|
const combinedText = textParts.join('\n\n');
|
|
|
|
// If no images, return simple string content.
|
|
if (imageParts.length === 0) {
|
|
return {
|
|
id: crypto.randomUUID(),
|
|
role: 'user',
|
|
content: combinedText || '',
|
|
};
|
|
}
|
|
|
|
// If images present, use multipart array format.
|
|
const parts = [];
|
|
if (combinedText) {
|
|
parts.push({ type: 'text', text: combinedText });
|
|
}
|
|
parts.push(...imageParts);
|
|
|
|
return {
|
|
id: crypto.randomUUID(),
|
|
role: 'user',
|
|
content: parts,
|
|
};
|
|
}
|
|
|
|
// ====================
|
|
// STATE & HISTORY
|
|
// ====================
|
|
/**
|
|
* #appendHistory adds multiple messages to history.
|
|
* Only the last message receives the metadata.
|
|
* @param {Object[]} messages
|
|
* @param {Object} [meta]
|
|
*/
|
|
#appendHistory(messages, meta = {}) {
|
|
for (let i = 0; i < messages.length; i++) {
|
|
const msg = { ...messages[i] };
|
|
|
|
// Generate ID if not present.
|
|
if (!msg.id) {
|
|
msg.id = crypto.randomUUID();
|
|
}
|
|
|
|
// Attach metadata only to the final message.
|
|
if (i === messages.length - 1) {
|
|
msg.meta = meta;
|
|
}
|
|
|
|
this.history.push(msg);
|
|
}
|
|
|
|
try {
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(this.history));
|
|
} catch (e) {
|
|
console.error('failed to save history:', e);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* #setLoadingState updates UI to reflect loading state.
|
|
* @param {boolean} loading
|
|
*/
|
|
#setLoadingState(loading) {
|
|
this.isProcessing = loading;
|
|
this.$send.classList.toggle('loading', loading);
|
|
this.$send.disabled = loading;
|
|
this.$ptt.disabled = loading;
|
|
}
|
|
|
|
/**
|
|
* #setRecordingState updates UI to reflect recording state.
|
|
* @param {boolean} recording
|
|
*/
|
|
#setRecordingState(recording) {
|
|
this.isRecording = recording;
|
|
this.$ptt.classList.toggle('recording', recording);
|
|
this.$ptt.setAttribute('aria-pressed', String(recording));
|
|
}
|
|
|
|
/**
|
|
* #toggleMute toggles mute state and updates button label.
|
|
*/
|
|
#toggleMute() {
|
|
this.isMuted = !this.isMuted;
|
|
if (this.$mute) {
|
|
const iconName = this.isMuted ? 'volume-off' : 'volume';
|
|
this.$mute.replaceChildren(this.#icon(iconName));
|
|
this.$mute.classList.toggle('footer__toolbar-btn--muted', this.isMuted);
|
|
this.$mute.setAttribute('aria-label', this.isMuted ? 'Unmute' : 'Mute');
|
|
}
|
|
// Apply mute state to any currently playing audio.
|
|
if (this.currentAudio) {
|
|
this.currentAudio.muted = !!this.isMuted;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
// RENDER: SELECTS
|
|
// ====================
|
|
/**
|
|
* #populateModels populates the model selector with available options.
|
|
* @param {Array<{id: string}>} models
|
|
* @param {string} defaultModel
|
|
*/
|
|
#populateModels(models, defaultModel) {
|
|
this.$model.innerHTML = '';
|
|
|
|
for (const m of models) {
|
|
const $opt = this.document.createElement('option');
|
|
$opt.value = m.id;
|
|
$opt.textContent = m.id;
|
|
this.$model.appendChild($opt);
|
|
}
|
|
|
|
this.#loadModel(defaultModel);
|
|
}
|
|
|
|
/**
|
|
* #populateModelsFallback shows an error state when models fail to load.
|
|
*/
|
|
#populateModelsFallback() {
|
|
this.$model.innerHTML = '';
|
|
|
|
const $opt = this.document.createElement('option');
|
|
$opt.value = '';
|
|
$opt.disabled = true;
|
|
$opt.selected = true;
|
|
$opt.textContent = 'Failed to load';
|
|
this.$model.appendChild($opt);
|
|
}
|
|
|
|
/**
|
|
* #loadModel restores the model selection from localStorage or uses the
|
|
* default.
|
|
* @param {string} defaultModel
|
|
*/
|
|
#loadModel(defaultModel) {
|
|
const stored = localStorage.getItem(MODEL_KEY);
|
|
const escaped = stored ? CSS.escape(stored) : null;
|
|
|
|
// Try stored value first, then default, then first available option.
|
|
let selectedValue;
|
|
if (escaped && this.$model.querySelector(`option[value="${escaped}"]`)) {
|
|
selectedValue = stored;
|
|
} else if (defaultModel) {
|
|
selectedValue = defaultModel;
|
|
} else if (this.$model.options.length > 0) {
|
|
selectedValue = this.$model.options[0].value;
|
|
}
|
|
|
|
if (selectedValue) {
|
|
this.$model.value = selectedValue;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* #populateVoiceSelect populates voice selector grouped by language.
|
|
* Voice IDs follow the pattern: {lang}{gender}_{name} (e.g., "af_bella").
|
|
* @param {string[]} voices
|
|
*/
|
|
#populateVoiceSelect(voices) {
|
|
const langLabels = {
|
|
af: '🇺🇸 American English (F)',
|
|
am: '🇺🇸 American English (M)',
|
|
bf: '🇬🇧 British English (F)',
|
|
bm: '🇬🇧 British English (M)',
|
|
jf: '🇯🇵 Japanese (F)',
|
|
jm: '🇯🇵 Japanese (M)',
|
|
zf: '🇨🇳 Mandarin Chinese (F)',
|
|
zm: '🇨🇳 Mandarin Chinese (M)',
|
|
ef: '🇪🇸 Spanish (F)',
|
|
em: '🇪🇸 Spanish (M)',
|
|
ff: '🇫🇷 French (F)',
|
|
fm: '🇫🇷 French (M)',
|
|
hf: '🇮🇳 Hindi (F)',
|
|
hm: '🇮🇳 Hindi (M)',
|
|
if: '🇮🇹 Italian (F)',
|
|
im: '🇮🇹 Italian (M)',
|
|
pf: '🇧🇷 Brazilian Portuguese (F)',
|
|
pm: '🇧🇷 Brazilian Portuguese (M)',
|
|
kf: '🇰🇷 Korean (F)',
|
|
km: '🇰🇷 Korean (M)',
|
|
};
|
|
|
|
// Group voices by their two-character prefix (language + gender)
|
|
const groups = {};
|
|
for (const voice of voices) {
|
|
const prefix = voice.substring(0, 2);
|
|
if (!groups[prefix]) groups[prefix] = [];
|
|
groups[prefix].push(voice);
|
|
}
|
|
|
|
// Clear and rebuild selector.
|
|
this.$voice.innerHTML = '';
|
|
|
|
// Add "Auto" option for automatic language detection.
|
|
const $auto = this.document.createElement('option');
|
|
$auto.value = '';
|
|
$auto.textContent = '🌐 Auto';
|
|
this.$voice.appendChild($auto);
|
|
|
|
// Sort prefixes: by language code first, then by gender.
|
|
const sortedPrefixes = Object.keys(groups).sort((a, b) => {
|
|
if (a[0] !== b[0]) return a[0].localeCompare(b[0]);
|
|
return a[1].localeCompare(b[1]);
|
|
});
|
|
|
|
// Create optgroups for each language/gender combination.
|
|
for (const prefix of sortedPrefixes) {
|
|
const label = langLabels[prefix] || prefix.toUpperCase();
|
|
|
|
const $optgroup = this.document.createElement('optgroup');
|
|
$optgroup.label = label;
|
|
|
|
for (const voice of groups[prefix].sort()) {
|
|
// Extract voice name from ID (e.g., "af_bella" -> "Bella").
|
|
const name = voice.substring(3).replace(/_/g, ' ');
|
|
const displayName = name.charAt(0).toUpperCase() + name.slice(1);
|
|
|
|
const $opt = this.document.createElement('option');
|
|
$opt.value = voice;
|
|
$opt.textContent = displayName;
|
|
$optgroup.appendChild($opt);
|
|
}
|
|
|
|
this.$voice.appendChild($optgroup);
|
|
}
|
|
|
|
this.#loadVoice();
|
|
}
|
|
|
|
/**
|
|
* #loadVoice restores the voice selection from localStorage.
|
|
*/
|
|
#loadVoice() {
|
|
const stored = localStorage.getItem(VOICE_KEY);
|
|
|
|
if (stored === null) {
|
|
this.$voice.value = '';
|
|
return;
|
|
}
|
|
|
|
// Empty string is valid ("Auto").
|
|
const escaped = stored === '' ? '' : CSS.escape(stored);
|
|
const exists =
|
|
stored === '' || this.$voice.querySelector(`option[value="${escaped}"]`);
|
|
|
|
if (!exists) {
|
|
this.$voice.value = '';
|
|
return;
|
|
}
|
|
|
|
this.$voice.value = stored;
|
|
}
|
|
|
|
// ====================
|
|
// RENDER: MESSAGES
|
|
// ====================
|
|
/**
|
|
* #renderMessages renders messages to the chat container.
|
|
* Messages already in the DOM (matched by data-id) are skipped.
|
|
* Tool results are matched to their corresponding tool calls.
|
|
* @param {Object[]} messages
|
|
* @param {Object} [meta] - Default metadata for messages without their own
|
|
*/
|
|
#renderMessages(messages, meta = {}) {
|
|
// Build tool result map for matching tool calls to their results.
|
|
const toolResultMap = new Map();
|
|
for (const msg of messages) {
|
|
if (msg.role === 'tool' && msg.tool_call_id) {
|
|
toolResultMap.set(msg.tool_call_id, msg);
|
|
}
|
|
}
|
|
|
|
for (const msg of messages) {
|
|
// Skip if already rendered.
|
|
if (msg.id && this.$chat.querySelector(`[data-id="${msg.id}"]`)) {
|
|
continue;
|
|
}
|
|
// Render user message.
|
|
if (msg.role === 'user') {
|
|
this.#renderUserMessage(msg, msg.meta ?? meta);
|
|
continue;
|
|
}
|
|
// Tool call -- already processed with the result map.
|
|
if (msg.role !== 'assistant') continue;
|
|
|
|
// Skip assistant messages with no displayable content.
|
|
const hasContent =
|
|
msg.content || msg.reasoning_content || msg.tool_calls?.length;
|
|
if (!hasContent) continue;
|
|
|
|
// Otherwise, render assistant message.
|
|
const toolResults = (msg.tool_calls ?? [])
|
|
.map((tc) => toolResultMap.get(tc.id))
|
|
.filter(Boolean);
|
|
|
|
this.#renderAssistantMessage(msg, msg.meta ?? meta, toolResults);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* #renderUserMessage renders a user message to the chat.
|
|
* @param {Object} message
|
|
* @param {Object} [meta]
|
|
*/
|
|
#renderUserMessage(message, meta = null) {
|
|
const content = (() => {
|
|
if (typeof message.content === 'string') {
|
|
return message.content;
|
|
}
|
|
if (Array.isArray(message.content)) {
|
|
return message.content
|
|
.filter((p) => p.type === 'text')
|
|
.map((p) => p.text)
|
|
.join('\n');
|
|
}
|
|
return '';
|
|
})();
|
|
|
|
const $msg = this.$tplUserMessage.content.cloneNode(true).firstElementChild;
|
|
if (message.id) $msg.dataset.id = message.id;
|
|
|
|
$msg.querySelector('.message__content').textContent = content;
|
|
|
|
// Populate debug panel.
|
|
const $dl = $msg.querySelector('.message__debug-list');
|
|
if (meta?.language) this.#appendDebugRow($dl, 'Language', meta.language);
|
|
if (meta?.voice) this.#appendDebugRow($dl, 'Voice', meta.voice);
|
|
if ($dl.children.length === 0) this.#appendDebugRow($dl, 'No data', '');
|
|
|
|
// Bind action buttons.
|
|
const $inspect = $msg.querySelector('[data-action="inspect"]');
|
|
$inspect.addEventListener('click', () => {
|
|
const isOpen = $msg.classList.toggle('message--debug-open');
|
|
$inspect.setAttribute('aria-expanded', String(isOpen));
|
|
});
|
|
|
|
const $copy = $msg.querySelector('[data-action="copy"]');
|
|
$copy.addEventListener('click', () =>
|
|
this.#copyToClipboard($copy, content),
|
|
);
|
|
|
|
this.$chat.appendChild($msg);
|
|
this.$chat.scrollTop = this.$chat.scrollHeight;
|
|
}
|
|
|
|
/**
|
|
* #renderAssistantMessage renders an assistant message with optional
|
|
* reasoning, tool calls, and their results.
|
|
* @param {Object} message
|
|
* @param {string} [message.content]
|
|
* @param {string} [message.reasoning_content]
|
|
* @param {Array} [message.tool_calls]
|
|
* @param {Object} [meta]
|
|
* @param {Object[]} [toolResults]
|
|
*/
|
|
#renderAssistantMessage(message, meta = null, toolResults = []) {
|
|
const $msg =
|
|
this.$tplAssistantMessage.content.cloneNode(true).firstElementChild;
|
|
if (message.id) $msg.dataset.id = message.id;
|
|
|
|
const $body = $msg.querySelector('.message__body');
|
|
const $content = $msg.querySelector('.message__content');
|
|
|
|
// Reasoning block (collapsible, shows LLM's chain-of-thought)
|
|
if (message.reasoning_content) {
|
|
const $reasoning = this.#createCollapsibleBlock(
|
|
'reasoning',
|
|
'Reasoning',
|
|
message.reasoning_content,
|
|
);
|
|
$body.insertBefore($reasoning, $content);
|
|
}
|
|
|
|
// Tool call blocks (collapsible, shows function name, args, and result)
|
|
if (message.tool_calls?.length > 0) {
|
|
for (const toolCall of message.tool_calls) {
|
|
const result = toolResults.find((r) => r.tool_call_id === toolCall.id);
|
|
const $toolBlock = this.#createToolCallBlock(toolCall, result);
|
|
$body.insertBefore($toolBlock, $content);
|
|
}
|
|
}
|
|
|
|
// Main content
|
|
if (message.content) {
|
|
$content.textContent = message.content;
|
|
} else {
|
|
$content.remove();
|
|
}
|
|
|
|
// Populate debug panel.
|
|
const $dl = $msg.querySelector('.message__debug-list');
|
|
if (meta?.voice) this.#appendDebugRow($dl, 'Voice', meta.voice);
|
|
if ($dl.children.length === 0) this.#appendDebugRow($dl, 'No data', '');
|
|
|
|
// Bind action buttons.
|
|
const $inspect = $msg.querySelector('[data-action="inspect"]');
|
|
$inspect.addEventListener('click', () => {
|
|
const isOpen = $msg.classList.toggle('message--debug-open');
|
|
$inspect.setAttribute('aria-expanded', String(isOpen));
|
|
});
|
|
|
|
// Assemble text from all available content.
|
|
const copyParts = [];
|
|
if (message.reasoning_content) copyParts.push(message.reasoning_content);
|
|
for (const tc of message.tool_calls ?? []) {
|
|
const name = tc.function?.name || 'unknown';
|
|
const args = tc.function?.arguments || '{}';
|
|
copyParts.push(`${name}(${args})`);
|
|
}
|
|
if (message.content) copyParts.push(message.content);
|
|
const copyText = copyParts.join('\n\n');
|
|
|
|
const $copy = $msg.querySelector('[data-action="copy"]');
|
|
$copy.addEventListener('click', () =>
|
|
this.#copyToClipboard($copy, copyText),
|
|
);
|
|
|
|
this.$chat.appendChild($msg);
|
|
this.$chat.scrollTop = this.$chat.scrollHeight;
|
|
}
|
|
|
|
/**
|
|
* #renderError renders an error message in the chat.
|
|
* @param {string} message
|
|
*/
|
|
#renderError(message) {
|
|
const $msg =
|
|
this.$tplErrorMessage.content.cloneNode(true).firstElementChild;
|
|
$msg.querySelector('.message__content').textContent = message;
|
|
|
|
this.$chat.appendChild($msg);
|
|
this.$chat.scrollTop = this.$chat.scrollHeight;
|
|
}
|
|
|
|
// ====================
|
|
// RENDER: ATTACHMENTS
|
|
// ====================
|
|
/**
|
|
* #renderAttachments renders the attachment chips in the footer.
|
|
*/
|
|
#renderAttachments() {
|
|
this.$attachments.innerHTML = '';
|
|
|
|
for (let i = 0; i < this.attachments.length; i++) {
|
|
const file = this.attachments[i];
|
|
|
|
const $chip =
|
|
this.$tplAttachmentChip.content.cloneNode(true).firstElementChild;
|
|
|
|
const $name = $chip.querySelector('.compose__attachment-name');
|
|
$name.textContent = file.name;
|
|
$name.title = file.name;
|
|
|
|
const $remove = $chip.querySelector('.compose__attachment-remove');
|
|
$remove.setAttribute('aria-label', `Remove ${file.name}`);
|
|
$remove.addEventListener('click', () => this.#removeAttachment(i));
|
|
|
|
this.$attachments.appendChild($chip);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* #removeAttachment removes the attachment at the given index.
|
|
* @param {number} index
|
|
*/
|
|
#removeAttachment(index) {
|
|
this.attachments.splice(index, 1);
|
|
this.#renderAttachments();
|
|
}
|
|
|
|
/**
|
|
* #clearAttachments removes all attachments.
|
|
*/
|
|
#clearAttachments() {
|
|
this.attachments = [];
|
|
this.#renderAttachments();
|
|
}
|
|
|
|
// ====================
|
|
// RENDER: COMPONENTS
|
|
// ====================
|
|
/**
|
|
* #createCollapsibleBlock creates a collapsible details element.
|
|
* @param {string} type - CSS modifier for styling
|
|
* @param {string} label - Summary text
|
|
* @param {string} content - Content to display when expanded
|
|
* @returns {HTMLDetailsElement}
|
|
*/
|
|
#createCollapsibleBlock(type, label, content) {
|
|
const $details =
|
|
this.$tplCollapsible.content.cloneNode(true).firstElementChild;
|
|
$details.classList.add(`collapsible--${type}`);
|
|
|
|
const $summary = $details.querySelector('.collapsible__summary');
|
|
$summary.insertBefore(this.#icon(type), $summary.firstChild);
|
|
|
|
$details.querySelector('.collapsible__label').textContent = label;
|
|
$details.querySelector('pre').textContent = content;
|
|
|
|
return $details;
|
|
}
|
|
|
|
/**
|
|
* #createToolCallBlock creates a collapsible block for a tool call.
|
|
* Shows the tool name, arguments, and optionally the result.
|
|
* @param {Object} toolCall
|
|
* @param {Object} [result]
|
|
* @returns {HTMLDetailsElement}
|
|
*/
|
|
#createToolCallBlock(toolCall, result = null) {
|
|
const $details =
|
|
this.$tplToolCall.content.cloneNode(true).firstElementChild;
|
|
|
|
$details.querySelector('.collapsible__label').textContent =
|
|
toolCall.function?.name || 'Tool Call';
|
|
|
|
// Arguments section
|
|
const $args = $details.querySelector('[data-args]');
|
|
try {
|
|
const args = JSON.parse(toolCall.function?.arguments || '{}');
|
|
$args.textContent = JSON.stringify(args, null, 2);
|
|
} catch {
|
|
$args.textContent = toolCall.function?.arguments || '';
|
|
}
|
|
|
|
// Output section (only if result is available)
|
|
if (result) {
|
|
const $outputSection = $details.querySelector(
|
|
'.collapsible__section--output',
|
|
);
|
|
$outputSection.hidden = false;
|
|
|
|
const $output = $details.querySelector('[data-output]');
|
|
try {
|
|
const output = JSON.parse(result.content || '{}');
|
|
$output.textContent = JSON.stringify(output, null, 2);
|
|
} catch {
|
|
$output.textContent = result.content || '';
|
|
}
|
|
}
|
|
|
|
return $details;
|
|
}
|
|
|
|
/**
|
|
* #appendDebugRow appends a label/value pair to a debug list.
|
|
* @param {HTMLDListElement} $dl
|
|
* @param {string} label
|
|
* @param {string} value
|
|
*/
|
|
#appendDebugRow($dl, label, value) {
|
|
const $row = this.$tplDebugRow.content.cloneNode(true);
|
|
$row.querySelector('dt').textContent = label;
|
|
$row.querySelector('dd').textContent = value;
|
|
$dl.appendChild($row);
|
|
}
|
|
|
|
// ====================
|
|
// UTILITIES
|
|
// ====================
|
|
/**
|
|
* #icon creates an SVG icon element referencing the icon sprite.
|
|
* @param {string} name
|
|
* @returns {SVGSVGElement}
|
|
*/
|
|
#icon(name) {
|
|
const svg = this.document.createElementNS(
|
|
'http://www.w3.org/2000/svg',
|
|
'svg',
|
|
);
|
|
svg.setAttribute('class', 'icon');
|
|
|
|
const use = this.document.createElementNS(
|
|
'http://www.w3.org/2000/svg',
|
|
'use',
|
|
);
|
|
use.setAttribute('href', `${ICONS_URL}#${name}`);
|
|
|
|
svg.appendChild(use);
|
|
return svg;
|
|
}
|
|
|
|
/**
|
|
* #toBase64 converts a Blob to a base64-encoded string.
|
|
* @param {Blob} blob
|
|
* @returns {Promise<string>}
|
|
*/
|
|
async #toBase64(blob) {
|
|
const buffer = await blob.arrayBuffer();
|
|
return new Uint8Array(buffer).toBase64();
|
|
}
|
|
|
|
/**
|
|
* #copyToClipboard copies text and shows a brief success indicator.
|
|
* @param {HTMLButtonElement} $button - The button to update with feedback
|
|
* @param {string} text - The text to copy
|
|
*/
|
|
async #copyToClipboard($button, text) {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
$button.replaceChildren(this.#icon('check'));
|
|
$button.classList.add('message__action-btn--success');
|
|
|
|
setTimeout(() => {
|
|
$button.replaceChildren(this.#icon('copy'));
|
|
$button.classList.remove('message__action-btn--success');
|
|
}, 1500);
|
|
} catch (e) {
|
|
console.error('failed to copy:', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize
|
|
new Odidere({ document });
|