File size: 5,786 Bytes
d78b9be ccd5ef3 d78b9be ccd5ef3 d78b9be ccd5ef3 d78b9be ccd5ef3 d78b9be ccd5ef3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
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);
}
|