Spaces:

Renderlib-dev
/

CodeVed

Running

App Files Files Community

Vedika commited on 21 days ago

Commit

e2f2336

verified ·

1 Parent(s): 6325348

Update index.html

Browse files

Files changed (1) hide show

index.html +94 -84

index.html CHANGED Viewed

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -149,6 +148,12 @@
         .btn-new-chat:hover { background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.08); color: var(--brand-accent); border-color: var(--border-focus);}
         .sidebar-history { flex: 1; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; }
         .history-item {
             padding: 10px 14px;
             border-radius: var(--radius-sm);
@@ -178,6 +183,7 @@
         .user-info-box { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
         .user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); line-height: 1.2; }
         .user-sub { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; cursor: pointer; }
         .btn-power { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--transition-default); }
         .btn-power:hover { background: #fce8e8; color: var(--brand-danger); }
@@ -242,7 +248,7 @@
         .bot-content-wrapper {
             flex: 1 1 0%;
-            min-width: 0; /* CRITICAL: Prevents flexbox from shrinking to character width */
             max-width: calc(100% - 50px);
             width: 100%;
             overflow: hidden;
@@ -255,7 +261,7 @@
             word-wrap: break-word;
             overflow-wrap: break-word;
             word-break: normal;
-            white-space: pre-wrap; /* Restored to pre-wrap for Markdown formatting */
             width: 100%;
             max-width: 100%;
         }
@@ -586,6 +592,9 @@
                 <div class="user-name" id="uName">Guest Session</div>
                 <div class="user-sub" id="uSub" style="cursor:pointer; color:var(--brand-accent);" onclick="Auth.openModal()">Secure Login</div>
             </div>
             <button class="btn-power" id="btnLogout" onclick="Auth.handleLogout()" style="display:none;" title="Logout">
                 <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
@@ -796,7 +805,6 @@
             cache: {},
             currentAudio: null,
             selectedVoice: "M2",
-            audioQueue: [],
             isPlaying: false,
             currentMsgId: null,
             currentBtnElement: null,
@@ -831,72 +839,39 @@
                           .replace(/[*_#`~>]/g, '')
                           .trim();
             },
-            splitIntoSentences(text) {
-                const sentences = text.match(/[^।.!?]+[।.!?]+/g) || [text];
-                return sentences.map(s => s.trim()).filter(s => s.length > 0);
-            },
-            async generateAudioChunk(text, chunkIndex) {
                 try {
                     const response = await fetch('/api/tts', {
                         method: 'POST',
                         headers: {'Content-Type':'application/json'},
                         body: JSON.stringify({
-                            text: text,
                             voice: this.selectedVoice,
                             language_name: "English"
                         })
                     });
-                    if(!response.ok) throw new Error(`Chunk ${chunkIndex} failed`);
                     const blob = await response.blob();
-                    return URL.createObjectURL(blob);
-                } catch(e) {
-                    return null;
-                }
-            },
-            async autoPrepare(msgId, fullText, btnElement) {
-                const cleanText = this.cleanTextForTTS(fullText);
-                if(!cleanText) return;
-                btnElement.style.display = 'flex';
-                btnElement.innerHTML = `<svg class="spin-icon" style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg> Preparing...`;
-                btnElement.style.pointerEvents = 'none';
-                const sentences = this.splitIntoSentences(cleanText);
-                const chunkSize = 3;
-                const chunks = [];
-                for (let i = 0; i < sentences.length; i += chunkSize) {
-                    chunks.push(sentences.slice(i, i + chunkSize).join(' '));
-                }
-                if (chunks.length === 0) {
-                    btnElement.innerHTML = `<span style="color:var(--brand-danger)">No text</span>`;
-                    setTimeout(() => { btnElement.style.display = 'none'; }, 2000);
-                    return;
-                }
-                this.cache[msgId] = [];
-                let successCount = 0;
-                for (let i = 0; i < chunks.length; i++) {
-                    const audioUrl = await this.generateAudioChunk(chunks[i], i);
-                    if (audioUrl) {
-                        this.cache[msgId].push(audioUrl);
-                        successCount++;
-                    }
-                }
-                if (successCount > 0) {
                     btnElement.innerHTML = `<svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg> Listen`;
                     btnElement.style.pointerEvents = 'auto';
-                } else {
                     btnElement.innerHTML = `<span style="color:var(--brand-danger)">Voice Error</span>`;
                     setTimeout(() => { btnElement.style.display = 'none'; }, 3000);
                 }
             },
-            async play(msgId, btnElement) {
-                const audioChunks = this.cache[msgId];
-                if(!audioChunks || audioChunks.length === 0) {
                     this.autoPrepare(msgId, document.getElementById(`bot-content-${msgId}`).innerText, btnElement);
                     return;
                 }
@@ -926,22 +901,24 @@
                 btnElement.innerHTML = `<svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg> Playing...`;
                 btnElement.style.background = 'rgba(211, 227, 253, 0.9)';
-                for (let i = 0; i < audioChunks.length; i++) {
-                    if (!this.isPlaying) break;
-                    await new Promise((resolve) => {
-                        this.currentAudio = new Audio(audioChunks[i]);
-                        this.currentAudio.playbackRate = 1.15;
-                        this.currentAudio.onended = resolve;
-                        this.currentAudio.onerror = resolve;
-                        this.currentAudio.play().catch(resolve);
-                    });
-                }
-                this.isPlaying = false;
-                this.currentMsgId = null;
-                btnElement.innerHTML = originalHTML;
-                btnElement.style.background = '';
             }
         };
@@ -977,6 +954,7 @@
                 document.getElementById('uName').innerText = dispName;
                 document.getElementById('uSub').innerText = email;
                 document.getElementById('btnLogout').style.display = 'flex';
                 document.getElementById('welcomeTitle').innerHTML = `Hello, ${dispName}!<br>How can I help you today?`;
             },
@@ -1017,10 +995,18 @@
                     document.getElementById('uName').innerText = "Guest Mode";
                     document.getElementById('uSub').innerText = `Queries: ${State.guestCount}/10`;
                     document.getElementById('btnLogout').style.display = 'none';
                     document.getElementById('welcomeTitle').innerHTML = `Hello, Guest!<br>How can I help you today?`;
                 }
             },
             handleLogout() { if(confirm("Logout?")) { localStorage.removeItem('codeved_user'); localStorage.removeItem('codeved_name'); location.reload(); } },
             openModal() { document.getElementById('authModal').style.display = 'flex'; },
             closeModal() { document.getElementById('authModal').style.display = 'none'; },
             switchTab(tab) {
@@ -1072,15 +1058,28 @@
                     const data = await res.json();
                     if(data.status === 'success') {
                         if(data.user) UI.updateUserInfo(data.user.name, data.user.email);
-                        HistoryManager.renderSidebar(data.chats || []);
                     }
                 } catch(e) {}
             },
             renderSidebar(chats) {
-                const container = document.getElementById('chatHistory'); container.innerHTML = '';
                 chats.forEach(chat => {
                     const isActive = State.currentThreadId === chat.threadId ? 'active' : '';
-                    container.innerHTML += `<div class="history-item ${isActive}" onclick="HistoryManager.loadChat('${chat.threadId}')"><span class="history-text">${UI.escape(chat.title)}</span></div>`;
                 });
             },
             async loadChat(threadId) {
@@ -1122,7 +1121,25 @@
                     const firstUser = State.history.find(m => m.role === 'user');
                     State.currentTitle = firstUser ? firstUser.content.substring(0, 25) : "New Workspace";
                 }
-                fetch(Config.GAS_URL, { method: 'POST', body: JSON.stringify({action: "save_chat", email: State.user, threadId: State.currentThreadId, title: State.currentTitle, historyJSON: JSON.stringify(State.history)})}).then(() => HistoryManager.syncAllChats()).catch(e=>{});
             }
         };
@@ -1385,14 +1402,6 @@
                                     if(json.choices && json.choices[0] && json.choices[0].delta && json.choices[0].delta.content) {
                                         fullText += json.choices[0].delta.content;
-                                        if (!firstChunkReceived) {
-                                            firstChunkReceived = true;
-                                            if(botObj.listenBtn) {
-                                                setTimeout(() => {
-                                                    TTSManager.autoPrepare(msgId, fullText, botObj.listenBtn);
-                                                }, 500);
-                                            }
-                                        }
                                     }
                                 }
                                 catch(e) {}
@@ -1405,9 +1414,6 @@
                     State.history.push({ role: 'assistant', content: fullText });
                     HistoryManager.saveCurrent();
-                    if(botObj.listenBtn && fullText.trim().length > 0) {
-                        TTSManager.autoPrepare(msgId, fullText, botObj.listenBtn);
-                    }
                 } catch(e) {
                     if (e.name === 'AbortError') {
                         botObj.contentDiv.innerHTML += `<br><span style="color:var(--text-tertiary); font-style:italic;">⏹ Generation stopped.</span>`;
@@ -1424,6 +1430,10 @@
                     document.getElementById('btnSend').style.display = 'flex';
                     document.getElementById('btnStop').classList.remove('active');
                     UI.scrollToBottom();
                 }
             }
         };

 <html lang="en">
 <head>
     <meta charset="UTF-8">
         .btn-new-chat:hover { background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.08); color: var(--brand-accent); border-color: var(--border-focus);}
         .sidebar-history { flex: 1; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; }
+        .history-header { display:flex; justify-content:space-between; align-items:center; padding: 0 4px 8px; margin-bottom:8px; border-bottom:1px solid var(--border-light); }
+        .history-title-text { font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; }
+        .btn-clear-all { font-size:11px; font-weight:500; color:var(--text-tertiary); cursor:pointer; transition:var(--transition-default); }
+        .btn-clear-all:hover { color:var(--brand-danger); }
         .history-item {
             padding: 10px 14px;
             border-radius: var(--radius-sm);
         .user-info-box { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
         .user-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); line-height: 1.2; }
         .user-sub { font-size: 11.5px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; cursor: pointer; }
         .btn-power { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--transition-default); }
         .btn-power:hover { background: #fce8e8; color: var(--brand-danger); }
         .bot-content-wrapper {
             flex: 1 1 0%;
+            min-width: 0;
             max-width: calc(100% - 50px);
             width: 100%;
             overflow: hidden;
             word-wrap: break-word;
             overflow-wrap: break-word;
             word-break: normal;
+            white-space: pre-wrap;
             width: 100%;
             max-width: 100%;
         }
                 <div class="user-name" id="uName">Guest Session</div>
                 <div class="user-sub" id="uSub" style="cursor:pointer; color:var(--brand-accent);" onclick="Auth.openModal()">Secure Login</div>
             </div>
+            <button class="btn-power" id="btnDeleteAcc" onclick="Auth.handleDeleteAccount()" style="display:none; color:var(--brand-danger);" title="Delete Account">
+                <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path></svg>
+            </button>
             <button class="btn-power" id="btnLogout" onclick="Auth.handleLogout()" style="display:none;" title="Logout">
                 <svg style="width:18px;height:18px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
             cache: {},
             currentAudio: null,
             selectedVoice: "M2",
             isPlaying: false,
             currentMsgId: null,
             currentBtnElement: null,
                           .replace(/[*_#`~>]/g, '')
                           .trim();
             },
+            async autoPrepare(msgId, fullText, btnElement) {
+                const cleanText = this.cleanTextForTTS(fullText);
+                if(!cleanText) return;
+                btnElement.style.display = 'flex';
+                btnElement.innerHTML = `<svg class="spin-icon" style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg> Preparing...`;
+                btnElement.style.pointerEvents = 'none';
                 try {
                     const response = await fetch('/api/tts', {
                         method: 'POST',
                         headers: {'Content-Type':'application/json'},
                         body: JSON.stringify({
+                            text: cleanText,
                             voice: this.selectedVoice,
                             language_name: "English"
                         })
                     });
+                    if(!response.ok) throw new Error("TTS failed");
                     const blob = await response.blob();
+                    this.cache[msgId] = URL.createObjectURL(blob);
                     btnElement.innerHTML = `<svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg> Listen`;
                     btnElement.style.pointerEvents = 'auto';
+                } catch(e) {
                     btnElement.innerHTML = `<span style="color:var(--brand-danger)">Voice Error</span>`;
                     setTimeout(() => { btnElement.style.display = 'none'; }, 3000);
                 }
             },
+            play(msgId, btnElement) {
+                const audioUrl = this.cache[msgId];
+                if(!audioUrl) {
                     this.autoPrepare(msgId, document.getElementById(`bot-content-${msgId}`).innerText, btnElement);
                     return;
                 }
                 btnElement.innerHTML = `<svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg> Playing...`;
                 btnElement.style.background = 'rgba(211, 227, 253, 0.9)';
+                this.currentAudio = new Audio(audioUrl);
+                this.currentAudio.playbackRate = 1.15;
+                this.currentAudio.onended = () => {
+                    this.isPlaying = false;
+                    this.currentMsgId = null;
+                    btnElement.innerHTML = originalHTML;
+                    btnElement.style.background = '';
+                };
+                this.currentAudio.onerror = () => {
+                    this.isPlaying = false;
+                    this.currentMsgId = null;
+                    btnElement.innerHTML = originalHTML;
+                    btnElement.style.background = '';
+                };
+                this.currentAudio.play();
             }
         };
                 document.getElementById('uName').innerText = dispName;
                 document.getElementById('uSub').innerText = email;
                 document.getElementById('btnLogout').style.display = 'flex';
+                document.getElementById('btnDeleteAcc').style.display = 'flex';
                 document.getElementById('welcomeTitle').innerHTML = `Hello, ${dispName}!<br>How can I help you today?`;
             },
                     document.getElementById('uName').innerText = "Guest Mode";
                     document.getElementById('uSub').innerText = `Queries: ${State.guestCount}/10`;
                     document.getElementById('btnLogout').style.display = 'none';
+                    document.getElementById('btnDeleteAcc').style.display = 'none';
                     document.getElementById('welcomeTitle').innerHTML = `Hello, Guest!<br>How can I help you today?`;
                 }
             },
             handleLogout() { if(confirm("Logout?")) { localStorage.removeItem('codeved_user'); localStorage.removeItem('codeved_name'); location.reload(); } },
+            handleDeleteAccount() {
+                if(confirm("Are you sure you want to permanently delete your account and all data?")) {
+                    fetch(Config.GAS_URL, { method: 'POST', body: JSON.stringify({action: "delete_account", email: State.user})}).then(() => {
+                        localStorage.removeItem('codeved_user'); localStorage.removeItem('codeved_name'); location.reload();
+                    });
+                }
+            },
             openModal() { document.getElementById('authModal').style.display = 'flex'; },
             closeModal() { document.getElementById('authModal').style.display = 'none'; },
             switchTab(tab) {
                     const data = await res.json();
                     if(data.status === 'success') {
                         if(data.user) UI.updateUserInfo(data.user.name, data.user.email);
+                        this.renderSidebar(data.chats || []);
                     }
                 } catch(e) {}
             },
             renderSidebar(chats) {
+                const container = document.getElementById('chatHistory');
+                container.innerHTML = `
+                    <div class="history-header">
+                        <span class="history-title-text">Recent Workspaces</span>
+                        <span class="btn-clear-all" onclick="HistoryManager.clearAll()">Clear All</span>
+                    </div>
+                `;
                 chats.forEach(chat => {
                     const isActive = State.currentThreadId === chat.threadId ? 'active' : '';
+                    container.innerHTML += `
+                        <div class="history-item ${isActive}" onclick="HistoryManager.loadChat('${chat.threadId}')">
+                            <span class="history-text">${UI.escape(chat.title)}</span>
+                            <button class="btn-delete-chat" onclick="event.stopPropagation(); HistoryManager.deleteChat('${chat.threadId}')" title="Delete">
+                                <svg style="width:14px;height:14px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+                            </button>
+                        </div>
+                    `;
                 });
             },
             async loadChat(threadId) {
                     const firstUser = State.history.find(m => m.role === 'user');
                     State.currentTitle = firstUser ? firstUser.content.substring(0, 25) : "New Workspace";
                 }
+                fetch(Config.GAS_URL, { method: 'POST', body: JSON.stringify({action: "save_chat", email: State.user, threadId: State.currentThreadId, title: State.currentTitle, historyJSON: JSON.stringify(State.history)})}).then(() => this.syncAllChats()).catch(e=>{});
+            },
+            clearAll() {
+                if(confirm("Clear all workspaces?")) {
+                    State.history = [];
+                    State.currentThreadId = null;
+                    State.currentTitle = null;
+                    document.getElementById('chatMessages').innerHTML = '';
+                    UI.updateWelcomeScreen();
+                    fetch(Config.GAS_URL, { method: 'POST', body: JSON.stringify({action: "clear_all_chats", email: State.user})}).then(() => this.syncAllChats());
+                }
+            },
+            deleteChat(threadId) {
+                if(confirm("Delete this workspace?")) {
+                    if(State.currentThreadId === threadId) {
+                        this.startNew();
+                    }
+                    fetch(Config.GAS_URL, { method: 'POST', body: JSON.stringify({action: "delete_chat", email: State.user, threadId: threadId})}).then(() => this.syncAllChats());
+                }
             }
         };
                                     if(json.choices && json.choices[0] && json.choices[0].delta && json.choices[0].delta.content) {
                                         fullText += json.choices[0].delta.content;
                                     }
                                 }
                                 catch(e) {}
                     State.history.push({ role: 'assistant', content: fullText });
                     HistoryManager.saveCurrent();
                 } catch(e) {
                     if (e.name === 'AbortError') {
                         botObj.contentDiv.innerHTML += `<br><span style="color:var(--text-tertiary); font-style:italic;">⏹ Generation stopped.</span>`;
                     document.getElementById('btnSend').style.display = 'flex';
                     document.getElementById('btnStop').classList.remove('active');
                     UI.scrollToBottom();
+                    if(botObj.listenBtn && fullText.trim().length > 0) {
+                        TTSManager.autoPrepare(msgId, fullText, botObj.listenBtn);
+                    }
                 }
             }
         };