chat with book html:
{% extends "dashboard_layout.html" %}

{% block dashboard_content %}
<div class="flex flex-col h-screen">
    <!-- Header -->
    <div class="navbar bg-base-200">
        <div class="flex-1">
            <div class="flex items-center gap-4">
                <div class="avatar">
                    <div class="w-12 h-16 rounded">
                        <img 
                            src="{{ book.image_url }}" 
                            alt="{{ book.name }}"
                        >
                    </div>
                </div>
                <div>
                    <h1 class="text-xl font-bold">{{ book.name }}</h1>
                </div>
            </div>
        </div>
        <div class="flex-none">
            <a href="{{ url_for('books_list') }}" class="btn btn-ghost btn-circle">
                <i class="fas fa-times"></i>
            </a>
        </div>
    </div>

    <!-- Chat Messages -->
    <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4">
        {% if messages %}
            {% for message in messages %}
            <div class="chat {% if message.role == 'user' %}chat-end{% else %}chat-start{% endif %}">
                <div class="chat-image avatar placeholder">
                    <div class="bg-neutral text-neutral-content rounded-full w-10">
                        <i class="fas {% if message.role == 'user' %}fa-user{% else %}fa-book{% endif %}"></i>
                    </div>
                </div>
                <div class="chat-header">
                    {% if message.role == 'user' %}
                        أنت
                    {% else %}
                        {{ book.name }}
                    {% endif %}
                    <time class="text-xs opacity-50 mr-2">{{ message.timestamp.strftime('%I:%M %p') if message.timestamp }}</time>
                </div>
                <div class="chat-bubble {% if message.role == 'user' %}chat-bubble-primary{% endif %}">
                    {% if message.message_type == 'voice' %}
                        <div class="flex items-center gap-2">
                            <button class="btn btn-circle btn-xs" onclick="playVoiceMessage(this)" data-audio-url="{{ message.audio_url }}">
                                <i class="fas fa-play"></i>
                            </button>
                            <span class="text-sm">رسالة صوتية</span>
                        </div>
                    {% else %}
                        {{ message.content }}
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="hero min-h-[50vh]">
                <div class="hero-content text-center">
                    <div class="max-w-md">
                        <h2 class="text-2xl font-bold mb-4">ابدأ محادثة مع {{ book.name }}</h2>
                        <p class="text-base-content/70">اسأل أي سؤال عن الكتاب وسأساعدك في فهمه بشكل أفضل.</p>
                    </div>
                </div>
            </div>
        {% endif %}
        
        <!-- Loading Indicator -->
        <div id="loading-indicator" class="hidden chat chat-start">
            <div class="chat-image avatar placeholder">
                <div class="bg-neutral text-neutral-content rounded-full w-10">
                    <i class="fas fa-book"></i>
                </div>
            </div>
            <div class="chat-bubble">
                <span class="loading loading-dots loading-md"></span>
            </div>
        </div>
    </div>

    <!-- Chat Input -->
    <div class="p-4 bg-base-200">
        <form id="chat-form" class="flex gap-2 items-end">
            <button type="button" id="voice-record-btn" class="btn btn-circle btn-ghost">
                <i class="fas fa-microphone"></i>
            </button>
            <div class="form-control flex-1">
                <textarea 
                    id="message-input"
                    class="textarea textarea-bordered min-h-12"
                    placeholder="اكتب رسالتك هنا..."
                    rows="1"
                    required
                ></textarea>
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-paper-plane"></i>
            </button>
        </form>
        <!-- Recording Status -->
        <div id="recording-status" class="hidden mt-2 text-sm text-error">
            <div class="flex items-center gap-2">
                <span class="loading loading-spinner loading-sm"></span>
                <span>جاري التسجيل...</span>
                <span id="recording-time">00:00</span>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chatMessages = document.getElementById('chat-messages');
        const chatForm = document.getElementById('chat-form');
        const messageInput = document.getElementById('message-input');
        const loadingIndicator = document.getElementById('loading-indicator');
        
        function appendMessage(message, isUser = false) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `chat ${isUser ? 'chat-end' : 'chat-start'}`;
            
            const avatarDiv = document.createElement('div');
            avatarDiv.className = 'chat-image avatar placeholder';
            avatarDiv.innerHTML = `
                <div class="bg-neutral text-neutral-content rounded-full w-10">
                    <i class="fas ${isUser ? 'fa-user' : 'fa-book'}"></i>
                </div>
            `;
            
            const headerDiv = document.createElement('div');
            headerDiv.className = 'chat-header';
            headerDiv.innerHTML = `
                ${isUser ? 'أنت' : '{{ book.name }}'}
                <time class="text-xs opacity-50 mr-2">${new Date().toLocaleTimeString('ar-SA')}</time>
            `;
            
            const bubbleDiv = document.createElement('div');
            bubbleDiv.className = `chat-bubble ${isUser ? 'chat-bubble-primary' : ''}`;
            
            if (message.message_type === 'voice') {
                bubbleDiv.innerHTML = `
                    <div class="flex items-center gap-2">
                        <button class="btn btn-circle btn-xs" onclick="playVoiceMessage(this)" data-audio-url="${message.audio_url}">
                            <i class="fas fa-play"></i>
                        </button>
                        <span class="text-sm">رسالة صوتية</span>
                    </div>
                `;
            } else {
                bubbleDiv.textContent = message.content;
            }
            
            messageDiv.appendChild(avatarDiv);
            messageDiv.appendChild(headerDiv);
            messageDiv.appendChild(bubbleDiv);
            
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        chatForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const message = messageInput.value.trim();
            if (!message) return;
            
            // Clear input and show loading
            messageInput.value = '';
            loadingIndicator.classList.remove('hidden');
            
            try {
                const response = await fetch(window.location.pathname, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ message: message })
                });
                
                const data = await response.json();
                if (data.success) {
                    // Append user message
                    appendMessage({ content: message, message_type: 'text' }, true);
                    // Append AI response
                    appendMessage(data.message, false);
                } else {
                    throw new Error(data.error || 'حدث خطأ أثناء إرسال الرسالة');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('حدث خطأ أثناء إرسال الرسالة. الرجاء المحاولة مرة أخرى.');
            } finally {
                loadingIndicator.classList.add('hidden');
            }
        });
        
        // Voice recording functionality
        async function setupVoiceRecording() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                
                mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        audioChunks.push(event.data);
                    }
                };
                
                mediaRecorder.onstop = async () => {
                    const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
                    await sendVoiceMessage(audioBlob);
                    audioChunks = [];
                };
                
                return true;
            } catch (error) {
                console.error('Error accessing microphone:', error);
                return false;
            }
        }

        function updateRecordingTime() {
            if (!recordingStartTime) return;
            
            const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
            const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
            const seconds = (elapsed % 60).toString().padStart(2, '0');
            recordingTime.textContent = `${minutes}:${seconds}`;
        }

        const voiceRecordBtn = document.getElementById('voice-record-btn');
        const recordingStatus = document.getElementById('recording-status');
        const recordingTime = document.getElementById('recording-time');
        
        let mediaRecorder = null;
        let audioChunks = [];
        let recordingInterval = null;
        let recordingStartTime = null;
        let isRecording = false;
        let currentAudio = null;
        let recognition = null;

        voiceRecordBtn.addEventListener('click', async function() {
            if (isRecording) {
                // Stop recording
                if (mediaRecorder && mediaRecorder.state === 'recording') {
                    mediaRecorder.stop();
                    if (recordingInterval) {
                        clearInterval(recordingInterval);
                        recordingInterval = null;
                    }
                }
                recordingStatus.classList.add('hidden');
                voiceRecordBtn.querySelector('i').classList.remove('text-error');
                isRecording = false;
            } else {
                // Start recording
                if (!mediaRecorder && !(await setupVoiceRecording())) {
                    return;
                }
                
                audioChunks = [];
                mediaRecorder.start();
                recordingStartTime = Date.now();
                recordingInterval = setInterval(updateRecordingTime, 1000);
                recordingStatus.classList.remove('hidden');
                voiceRecordBtn.querySelector('i').classList.add('text-error');
                isRecording = true;
            }
        });

        async function sendVoiceMessage(audioBlob) {
            loadingIndicator.classList.remove('hidden');
            
            const formData = new FormData();
            formData.append('audio', audioBlob);
            
            try {
                const response = await fetch(window.location.pathname, {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                if (data.success && data.message) {
                    // Add voice message to chat
                    const messageHtml = `
                        <div class="chat chat-end">
                            <div class="chat-header">
                                أنت
                                <time class="text-xs opacity-50 mr-2">${new Date().toLocaleTimeString()}</time>
                            </div>
                            <div class="chat-bubble chat-bubble-primary">
                                <div class="flex items-center gap-2">
                                    <button class="btn btn-circle btn-xs" onclick="playVoiceMessage(this)" data-audio-url="${data.message.audio_url}">
                                        <i class="fas fa-play"></i>
                                    </button>
                                    <span class="text-sm">رسالة صوتية</span>
                                </div>
                            </div>
                        </div>
                    `;
                    chatMessages.insertAdjacentHTML('beforeend', messageHtml);
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                }
            } catch (error) {
                console.error('Error sending voice message:', error);
            } finally {
                loadingIndicator.classList.add('hidden');
            }
        }

        // Initialize speech recognition
        if ('webkitSpeechRecognition' in window) {
            console.log('Speech recognition is supported in this browser.');
            recognition = new webkitSpeechRecognition();
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.lang = 'ar-SA';

            recognition.onresult = async function(event) {
                const transcript = Array.from(event.results)
                    .map(result => result[0].transcript)
                    .join('');

                if (event.results[0].isFinal) {
                    messageInput.value = transcript;
                    try {
                        const response = await fetch(window.location.pathname, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({ message: transcript })
                        });

                        if (!response.ok) {
                            throw new Error('Failed to get AI response');
                        }

                        const data = await response.json();
                        if (data.success) {
                            appendMessage(transcript, true);
                            if (data.message && data.message.content) {
                                appendMessage(data.message, false);
                            }
                        }
                    } catch (error) {
                        console.error('Error sending transcribed text:', error);
                    }
                }
            };

            recognition.onerror = function(event) {
                console.error('Speech recognition error:', event.error);
            };
        } else {
            console.error('Speech recognition is not supported in this browser.');
        }

        // Scroll to bottom of chat
        chatMessages.scrollTop = chatMessages.scrollHeight;

        // Voice message playback
        window.playVoiceMessage = function(button) {
            const audioUrl = button.getAttribute('data-audio-url');
            const icon = button.querySelector('i');
            
            if (!audioUrl) {
                console.error('No audio URL found');
                return;
            }

            // Stop any currently playing audio
            if (currentAudio) {
                currentAudio.pause();
                currentAudio = null;
                // Reset all play buttons
                document.querySelectorAll('.btn-circle').forEach(btn => {
                    const btnIcon = btn.querySelector('i');
                    btnIcon.classList.remove('fa-pause');
                    btnIcon.classList.add('fa-play');
                });
            }

            try {
                const audio = new Audio(audioUrl);
                
                audio.onplay = function() {
                    icon.classList.remove('fa-play');
                    icon.classList.add('fa-pause');
                };
                
                audio.onpause = function() {
                    icon.classList.remove('fa-pause');
                    icon.classList.add('fa-play');
                };
                
                audio.onended = function() {
                    icon.classList.remove('fa-pause');
                    icon.classList.add('fa-play');
                    currentAudio = null;
                };

                currentAudio = audio;
                audio.play().catch(error => {
                    console.error('Error playing audio:', error);
                    icon.classList.remove('fa-pause');
                    icon.classList.add('fa-play');
                    currentAudio = null;
                });
            } catch (error) {
                console.error('Error creating audio:', error);
            }
        };
    });
</script>
{% endblock %}



please make it conmvert voice to text arabic to send it to ai and fix all bugs and add animations