Update index.html

index.html

@@ -273,9 +273,27 @@
             --accent-glow: 0 0 20px rgba(16, 163, 127, 0.2);
         }
 
-        .chat-history {
-            gap: 40px; /* More breathing room */
-            scroll-behavior: smooth;
+        .image-card, .tool-output-card {
+            min-height: 100px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            contain: content;
+        }
+
+        .img-skeleton {
+            background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
+            background-size: 200% 100%;
+            animation: skeleton-loading 1.5s infinite;
+        }
+
+        @keyframes skeleton-loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+
+        /* Fix for layout shift in chat history */
+        .message-content {
+            min-width: 0;
+            overflow-wrap: break-word;
         }
 
         /* Message Entrance Animation */
@@ -4514,9 +4532,7 @@
                     <div class="input-container-bottom" id="inputBottomRow">
                         <div class="input-actions-left">
                             <button class="action-btn" id="uploadBtn" onclick="toggleUploadMenu()">
-                                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                                </svg>
+                                <i data-lucide="plus"></i>
                             </button>
                             <div class="upload-menu" id="uploadMenu">
                                 <div class="tool-btn" data-action="search" title="Web Search">
@@ -4598,14 +4614,10 @@
                             </button>
                             <!-- FIXED: Removed inline onclick to prevent double-firing and used consistent SVG icons -->
                             <button class="send-button" id="sendBtn" title="Send message (Enter)">
-                                <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
-                                </svg>
+                                <i data-lucide="arrow-up"></i>
                             </button>
                             <button class="stop-button" id="stopBtn" title="Stop generating (Esc)">
-                                <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor" />
-                                </svg>
+                                <i data-lucide="square"></i>
                             </button>
                         </div>
                     </div>
@@ -4809,6 +4821,10 @@
                 <span id="authToggleText">Don't have an account?</span>
                 <span class="auth-toggle" id="authToggleBtn" onclick="toggleAuthMode()">Sign Up</span>
             </div>
+            <div style="margin-top: 15px; text-align: center; font-size: 13px; opacity: 0.7;">
+                <span style="color: var(--text-secondary);">Or </span>
+                <span class="auth-toggle" onclick="loginAsGuest()" style="color: #10a37f; cursor: pointer; font-weight: 600;">Continue as Guest</span>
+            </div>
         </div>
     </div>
 
@@ -6051,95 +6067,6 @@
             const thinkingDiv = showThinking();
             const messageContent = thinkingDiv.querySelector('.message-content');
             
-            // Check for video generation intent
-            const videoKeywords = ['generate video', 'create video', 'make a video', 'video about'];
-            const isVideoRequest = videoKeywords.some(k => query.toLowerCase().includes(k));
-
-            if (isVideoRequest) {
-                messageContent.innerHTML = `
-                    <div style="display:flex; align-items:center; gap:10px;">
-                        <div class="thinking"><span></span><span></span><span></span></div>
-                        <span style="font-size:13px; color:var(--text-secondary); font-weight:500;">Imagining your video...</span>
-                    </div>
-                `;
-                smoothScrollToBottom();
-
-                try {
-                    const response = await fetch('/api/video/generate', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ prompt: query })
-                    });
-                    const data = await response.json();
-
-                    if (data.status === 'success') {
-                        hideThinking(thinkingDiv);
-                        addMessage(`I've generated a video based on your request: "${query}"`, 'ai');
-                        
-                        const lastMsg = chatHistory.lastElementChild;
-                        const msgContent = lastMsg.querySelector('.message-content');
-                        const videoCard = document.createElement('div');
-                        videoCard.className = 'image-card';
-                        const videoId = 'vid-' + Date.now();
-                        
-                        if (data.is_motion_image) {
-                            videoCard.innerHTML = `
-                                <div class="video-container" style="background:none; position: relative;">
-                                    <img src="${data.video_url}" alt="${query}" class="motion-image" style="width:100%; border-radius:12px; display:block;">
-                                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.5); border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; pointer-events: none;">
-                                        <i data-lucide="play" style="width: 30px; height: 30px; color: white; fill: white;"></i>
-                                    </div>
-                                </div>
-                                <div class="image-card-actions">
-                                    <a href="${data.video_url}" class="img-btn" onclick="downloadImage(event, '${data.video_url}')"><i data-lucide="download"></i> Download</a>
-                                    <button class="img-btn" onclick="openVideoOverlayModal('${data.video_url}')"><i data-lucide="type"></i> Add Text</button>
-                                </div>
-                            `;
-                        } else {
-                            videoCard.innerHTML = `
-                                <div class="video-container" id="${videoId}-container">
-                                    <video id="${videoId}" autoplay loop muted playsinline>
-                                        <source src="${data.video_url}" type="video/mp4">
-                                    </video>
-                                    <div class="custom-video-controls">
-                                        <button class="vid-ctrl-btn play-pause">
-                                            <i data-lucide="pause"></i>
-                                        </button>
-                                        <div class="video-progress">
-                                            <div class="video-progress-filled"></div>
-                                        </div>
-                                        <div class="volume-container">
-                                            <button class="vid-ctrl-btn volume-btn">
-                                                <i data-lucide="volume-x"></i>
-                                            </button>
-                                            <div class="volume-slider-vertical">
-                                                <input type="range" min="0" max="1" step="0.1" value="0">
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="image-card-actions">
-                                    <a href="${data.video_url}" download class="img-btn"><i data-lucide="download"></i> Download Video</a>
-                                    <button class="img-btn" onclick="openVideoOverlayModal('${data.video_url}')"><i data-lucide="type"></i> Add Text</button>
-                                </div>
-                            `;
-                        }
-                        msgContent.appendChild(videoCard);
-                        if (window.lucide) lucide.createIcons();
-                        if (!data.is_motion_image) initCustomVideoPlayer(videoId);
-                        smoothScrollToBottom();
-                        return;
-                    } else {
-                        throw new Error(data.error);
-                    }
-                } catch (err) {
-                    console.error("Video generation failed:", err);
-                    hideThinking(thinkingDiv);
-                    addMessage(err.message, 'ai');
-                    return;
-                }
-            }
-
             // Task 15: Stream the AI response normally (backend handles tool detection)
             addMessage(query, 'user');
             
@@ -6183,6 +6110,12 @@
                         if (!line.trim()) continue;
                         try {
                             const data = JSON.parse(line);
+
+                            if (data.error) {
+                                hideThinking(thinkingDiv);
+                                addMessage(data.error, 'ai');
+                                return;
+                            }
                             
                             // Task: Handle search results from backend synthesis
                             if (data.search_results) {
@@ -6244,6 +6177,75 @@
                     const badge = (toolsUsed.includes('search')) ? '<div class="compiled-search-badge"><i data-lucide="brain"></i> Synthesized Research Report</div>' : '';
                     aiContentEl.innerHTML = badge + marked.parse(fullResponse);
                     
+                    // If backend used video tool, call video API and append to message
+                    if (toolsUsed.includes('video')) {
+                        const videoContainer = document.createElement('div');
+                        videoContainer.className = 'image-card';
+                        videoContainer.innerHTML = `<div class="img-skeleton visible" style="height: 300px; background: rgba(255,255,255,0.05); border-radius: 12px; animation: pulse 1.5s infinite; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;">
+                            <i data-lucide="video" class="animate-pulse" style="width:40px; height:40px; color: #10a37f;"></i>
+                            <span style="font-size: 14px; color: var(--text-secondary);">Generating AI Video...</span>
+                        </div>`;
+                        aiContentEl.appendChild(videoContainer);
+                        smoothScrollToBottom();
+                        if (window.lucide) lucide.createIcons();
+
+                        try {
+                            const videoRes = await fetch('/api/video/generate', {
+                                method: 'POST',
+                                headers: {'Content-Type': 'application/json'},
+                                body: JSON.stringify({ prompt: query })
+                            });
+                            const videoData = await videoRes.json();
+                            
+                            if (videoData.status === 'success') {
+                                const videoId = 'vid-' + Date.now();
+                                if (videoData.is_motion_image) {
+                                    videoContainer.innerHTML = `
+                                        <div class="video-container" style="background:none; position: relative;">
+                                            <img src="${videoData.video_url}" alt="${query}" class="motion-image" style="width:100%; border-radius:12px; display:block;">
+                                            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.5); border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; pointer-events: none;">
+                                                <i data-lucide="play" style="width: 30px; height: 30px; color: white; fill: white;"></i>
+                                            </div>
+                                        </div>
+                                        <div class="image-card-actions">
+                                            <a href="${videoData.video_url}" class="img-btn" onclick="downloadImage(event, '${videoData.video_url}')"><i data-lucide="download"></i> Download</a>
+                                            <button class="img-btn" onclick="openVideoOverlayModal('${videoData.video_url}')"><i data-lucide="type"></i> Add Text</button>
+                                        </div>
+                                    `;
+                                } else {
+                                    videoContainer.innerHTML = `
+                                        <div class="video-container" id="${videoId}-container">
+                                            <video id="${videoId}" autoplay loop muted playsinline>
+                                                <source src="${videoData.video_url}" type="video/mp4">
+                                            </video>
+                                            <div class="custom-video-controls">
+                                                <button class="vid-ctrl-btn play-pause"><i data-lucide="pause"></i></button>
+                                                <div class="video-progress"><div class="video-progress-filled"></div></div>
+                                                <div class="volume-container">
+                                                    <button class="vid-ctrl-btn volume-btn"><i data-lucide="volume-x"></i></button>
+                                                    <div class="volume-slider-vertical"><input type="range" min="0" max="1" step="0.1" value="0"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="image-card-actions">
+                                            <a href="${videoData.video_url}" download class="img-btn"><i data-lucide="download"></i> Download Video</a>
+                                            <button class="img-btn" onclick="openVideoOverlayModal('${videoData.video_url}')"><i data-lucide="type"></i> Add Text</button>
+                                        </div>
+                                    `;
+                                }
+                                if (window.lucide) lucide.createIcons();
+                                if (!videoData.is_motion_image) initCustomVideoPlayer(videoId);
+                            } else {
+                                videoContainer.innerHTML = `<div style="padding: 20px; color: #f87171;"><i data-lucide="alert-circle"></i> Video failed: ${videoData.error}</div>`;
+                                if (window.lucide) lucide.createIcons();
+                            }
+                        } catch (vErr) {
+                            videoContainer.innerHTML = `<div style="padding: 20px; color: #f87171;"><i data-lucide="alert-circle"></i> Video connection error.</div>`;
+                            if (window.lucide) lucide.createIcons();
+                        }
+                        smoothScrollToBottom();
+                    }
+
                     // If backend used image tool, call image API and append to message
                     if (toolsUsed.includes('image')) {
                         const imageContainer = document.createElement('div');