frontend/script.js

const chatBox = document.getElementById("chat-box");
const sendBtn = document.getElementById("send-btn");
const textInput = document.getElementById("text-input");
const micBtn = document.getElementById("mic-btn");

const userId = "walid";


// =======================
// CHAT WEBSOCKET
// =======================

const chatSocket = new WebSocket("ws://127.0.0.1:8679/ws/chat");

chatSocket.onmessage = (event) => {

    const data = event.data;

    if (data === "[[END]]") {
        return;
    }

    appendMessage(data, "ai");
};


sendBtn.onclick = () => {
    sendTextMessage();
};

textInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        sendTextMessage();
    }
});


function sendTextMessage() {

    const message = textInput.value.trim();

    if (!message) return;

    appendMessage(message, "user");

    chatSocket.send(JSON.stringify({
        user_id: userId,
        user_query: message
    }));

    textInput.value = "";
}


// =======================
// VOICE WEBSOCKET
// =======================

const voiceSocket = new WebSocket("ws://127.0.0.1:8679/ws/voice");

voiceSocket.binaryType = "arraybuffer";

let mediaRecorder;
let audioChunks = [];
let isRecording = false;

voiceSocket.onmessage = async (event) => {

    // TEXT MESSAGE
    if (typeof event.data === "string") {

        const text = event.data;

        if (text.startsWith("[STT]:")) {
            appendMessage("🎤 " + text.replace("[STT]:", ""), "user");
        }

        else if (text.startsWith("[LLM]:")) {
            appendMessage(
                text.replace("[LLM]:", ""),
                "ai"
            );
        }

        return;
    }

    // AUDIO MESSAGE
    const audioBlob = new Blob([event.data], { type: "audio/mp3" });

    const audioUrl = URL.createObjectURL(audioBlob);

    const audio = new Audio(audioUrl);

    audio.play();
};


micBtn.onclick = async () => {

    if (!isRecording) {
        startRecording();
    } else {
        stopRecording();
    }
};


async function startRecording() {

    const stream = await navigator.mediaDevices.getUserMedia({
        audio: true
    });

    mediaRecorder = new MediaRecorder(stream, {
        mimeType: "audio/webm"
    });

    mediaRecorder.start(250);

    mediaRecorder.ondataavailable = async (event) => {

        if (event.data.size > 0 &&
            voiceSocket.readyState === WebSocket.OPEN) {

            const arrayBuffer = await event.data.arrayBuffer();

            voiceSocket.send(arrayBuffer);
        }
    };

    isRecording = true;

    micBtn.innerText = "⏹ Stop Voice";
    micBtn.classList.add("recording");
}


function stopRecording() {

    mediaRecorder.stop();

    isRecording = false;

    micBtn.innerText = "🎤 Start Voice";
    micBtn.classList.remove("recording");
}


// =======================
// UI
// =======================

function appendMessage(text, sender) {

    const div = document.createElement("div");

    div.classList.add("message");
    div.classList.add(sender);

    div.innerHTML = marked.parse(text);

    chatBox.appendChild(div);

    chatBox.scrollTop = chatBox.scrollHeight;
}