script.js

document.addEventListener('DOMContentLoaded', () => {
    // Initialize UI elements
    initVoiceControls();
    initScreenShare();
    initChat();
});

function initVoiceControls() {
    const voiceBtn = document.getElementById('voice-btn');
    const voiceStatus = document.getElementById('voice-status');
    
    let isRecording = false;
    let mediaRecorder;
    let audioChunks = [];
    
    voiceBtn.addEventListener('click', async () => {
        if (!isRecording) {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                
                mediaRecorder.ondataavailable = (e) => {
                    audioChunks.push(e.data);
                };
                
                mediaRecorder.onstop = async () => {
                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                    await processVoiceInput(audioBlob);
                    audioChunks = [];
                };
                
                mediaRecorder.start();
                isRecording = true;
                voiceStatus.textContent = 'Recording...';
                voiceBtn.classList.add('recording');
            } catch (err) {
                console.error('Error accessing microphone:', err);
            }
        } else {
            mediaRecorder.stop();
            isRecording = false;
            voiceStatus.textContent = '';
            voiceBtn.classList.remove('recording');
        }
    });
}
async function processVoiceInput(audioBlob) {
    // Mock voice processing for preview
    const mockResponses = [
        "Hello! How can I help you today?",
        "I'm an AI assistant here to answer your questions.",
        "The weather looks nice today, isn't it?",
        "Would you like me to search for something?",
        "I can help with various topics including technology, science, and more."
    ];
    const randomResponse = mockResponses[Math.floor(Math.random() * mockResponses.length)];
    await sendMessage(randomResponse);
}
function initScreenShare() {
    const screenShareBtn = document.getElementById('screen-share-btn');
    
    screenShareBtn.addEventListener('click', async () => {
        try {
            const stream = await navigator.mediaDevices.getDisplayMedia({
                video: true,
                audio: true
            });
            
            const videoElement = document.createElement('video');
            videoElement.srcObject = stream;
            videoElement.autoplay = true;
            
            const screenContainer = document.getElementById('screen-share-container');
            screenContainer.innerHTML = '';
            screenContainer.appendChild(videoElement);
            
            stream.getVideoTracks()[0].onended = () => {
                screenContainer.innerHTML = '';
            };
        } catch (err) {
            console.error('Error sharing screen:', err);
        }
    });
}
async function initChat() {
    // Load mock chat history for preview
    const mockMessages = [
        {
            content: "Welcome to ChatVerse!",
            is_user: false,
            created_at: new Date().toISOString()
        },
        {
            content: "Try sending a message or using voice input",
            is_user: false,
            created_at: new Date().toISOString()
        }
    ];
    
    const chatContainer = document.getElementById('chat-container');
    mockMessages.forEach(msg => {
        chatContainer.appendChild(createMessageElement(msg));
    });
}
function createMessageElement(message) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message mb-4 p-3 rounded-lg max-w-3/4 ${
        message.is_user ? 'bg-blue-100 dark:bg-blue-900 ml-auto' : 'bg-gray-200 dark:bg-gray-800 mr-auto'
    }`;
    
    messageDiv.innerHTML = `
        <div class="flex items-start">
            <div class="flex-shrink-0 h-8 w-8 rounded-full ${
                message.is_user ? 'bg-blue-500' : 'bg-purple-500'
            } flex items-center justify-center text-white">
                ${message.is_user ? '<i data-feather="user"></i>' : '<i data-feather="cpu"></i>'}
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium">${message.is_user ? 'You' : 'AI Assistant'}</p>
                <p class="mt-1 text-sm">${message.content}</p>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">${new Date(message.created_at).toLocaleTimeString()}</p>
            </div>
        </div>
    `;
    
    feather.replace({ scope: messageDiv });
    return messageDiv;
}
async function sendMessage(content) {
    // Mock message sending for preview
    const chatContainer = document.getElementById('chat-container');
    
    // Add user message
    const userMsg = {
        content,
        is_user: true,
        created_at: new Date().toISOString()
    };
    chatContainer.appendChild(createMessageElement(userMsg));
    
    // Add mock AI response after delay
    setTimeout(async () => {
        const mockResponses = [
            "I understand you're asking about " + content,
            "That's an interesting question about " + content,
            "Let me think about " + content,
            "I can help with " + content,
            content + " is something I know about."
        ];
        const aiMsg = {
            content: mockResponses[Math.floor(Math.random() * mockResponses.length)],
            is_user: false,
            created_at: new Date().toISOString()
        };
        chatContainer.appendChild(createMessageElement(aiMsg));
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }, 1000);
}