Update index.html

index.html

@@ -19,7 +19,7 @@
   --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(255, 255, 255, 0.4);
   --shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 8px 32px rgba(0,0,0,0.08);
   --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
-  --font-serif: 'Instrument Serif', serif; --font-sans: 'Inter', -apple-system, sans-serif;
+  --font-sans: 'Inter', -apple-system, sans-serif;
   --font-mono: 'Geist Mono', monospace;
   --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px;
 }
@@ -150,7 +150,8 @@ body:not(.show-thinking) .think-box {display: none;}
 .bubble code{font-family:var(--font-mono);background:rgba(0,0,0,0.05);padding:3px 6px;border-radius:6px;font-size:0.85em;color:#e83e8c;}
 .msg.user .bubble code{background:rgba(255,255,255,0.2);color:#fff;}
 .bubble img{max-width:100%;border-radius:12px;margin:10px 0;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);}
-.bubble pre {display: none;} 
+.bubble pre {background: #1d1d1f; color:#fff; padding:16px; border-radius:12px; overflow-x:auto;}
+.bubble pre code {background: transparent; color:#fff;} 
 
 /* Workspace Trigger Card in Chat */
 .ws-trigger-card {background: var(--bg-secondary);border: 1px solid var(--border-light);border-radius: 12px;padding: 16px;margin: 12px 0;display: flex;align-items: center;justify-content: space-between;box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);}
@@ -181,7 +182,7 @@ body:not(.show-thinking) .think-box {display: none;}
 
 .img-prev-inline{display:none;padding:12px 20px 0;align-items:center;gap:12px;}
 .img-prev-inline.show{display:flex;animation:fadeIn 0.3s;}
-.inline-th{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--border-light);}
+.inline-th{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--border-light); display:flex; justify-content:center; align-items:center; background:#f0f0f0; font-size:20px;}
 .inline-info{flex:1;}
 .inline-nm{font-size:12px;font-weight:600;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
 .inline-rm{background:rgba(0,0,0,0.05);border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:background 0.2s;}
@@ -195,6 +196,8 @@ body:not(.show-thinking) .think-box {display: none;}
 .attach-btn:hover{background:rgba(0,0,0,0.04);color:var(--text-main);}
 .attach-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;}
 .attach-btn svg{width:20px;height:20px;}
+.voice-btn.recording { color: #ff3b30; animation: pulseRecord 1.5s infinite; }
+@keyframes pulseRecord { 0% { background: rgba(255,59,48,0.1); } 50% { background: rgba(255,59,48,0.3); } 100% { background: rgba(255,59,48,0.1); } }
 
 .send-btn{width:42px;height:42px;border-radius:14px;border:none;background:linear-gradient(135deg, #FF9933 0%, #ffffff 50%, #138808 100%);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.1);}
 .send-btn svg{width:18px;height:18px;fill:#1d1d1f;transition:transform 0.2s;}
@@ -317,7 +320,7 @@ body:not(.show-thinking) .think-box {display: none;}
           <div class="status-dot"></div>
           Arjun Intelligence
         </div>
-        <div style="width:24px;"></div> <!-- Spacer for flex balance -->
+        <div style="width:24px;"></div> <!-- Spacer -->
       </header>
 
       <div class="messages" id="msgs" onscroll="checkScroll()">
@@ -350,19 +353,28 @@ body:not(.show-thinking) .think-box {display: none;}
       <div class="input-container">
         <div class="input-wrap">
           <div class="img-prev-inline" id="imgPrev">
-            <img class="inline-th" id="imgThumb" src="">
+            <img class="inline-th" id="imgThumb" src="" style="display:none;">
+            <div class="inline-th" id="fileIcon" style="display:none;">📄</div>
             <div class="inline-info">
-              <div class="inline-nm" id="imgName">image.png</div>
+              <div class="inline-nm" id="imgName">file.txt</div>
             </div>
             <button class="inline-rm" onclick="removeImg()">✕</button>
           </div>
 
           <div class="input-row">
-            <button class="attach-btn" title="Upload Image">
+            <!-- Universal File Attach -->
+            <button class="attach-btn" title="Upload Image or Document">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
-              <input type="file" accept="image/*" onchange="handleFile(this)" id="fileInput">
+              <input type="file" accept="*/*" onchange="handleFile(this)" id="fileInput">
             </button>
+            
+            <!-- Voice Input Mic -->
+            <button class="attach-btn voice-btn" id="voiceBtn" onclick="toggleVoice()" title="Voice Input">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg>
+            </button>
+
             <textarea class="chat-ta" id="chatInput" placeholder="Message Arjun Compound..." rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea>
+            
             <button class="send-btn" id="sendBtn" onclick="sendMsg()">
               <svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
             </button>
@@ -435,6 +447,7 @@ const LOGO_URL = "https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png";
 
 let currentUser = localStorage.getItem('arjun_user');
 let guestCount = parseInt(localStorage.getItem('arjun_guest') || '0');
+window.isStreamingGlobalFlag = false; // FLAG TO PREVENT PREMATURE WORKSPACE BUTTONS
 
 const S = {
   history: [],
@@ -447,7 +460,6 @@ const S = {
 
 // --- INITIALIZATION ---
 document.addEventListener('DOMContentLoaded', () => {
-    // Welcome Overlay Cache
     if(!localStorage.getItem('arjun_welcome_seen')) {
         document.getElementById('welcomeOverlay').style.display = 'flex';
     } else {
@@ -487,6 +499,30 @@ function toggleThinking(el) {
   else document.body.classList.remove('show-thinking');
 }
 
+// --- VOICE RECOGNITION (MIC FEATURE) ---
+const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+let recognition = null;
+let isRecording = false;
+
+if (SpeechRecognition) {
+    recognition = new SpeechRecognition();
+    recognition.continuous = false; recognition.interimResults = true; recognition.lang = 'en-US';
+    
+    recognition.onstart = () => { isRecording = true; document.getElementById('voiceBtn').classList.add('recording'); };
+    recognition.onresult = (event) => {
+        let transcript = '';
+        for (let i = event.resultIndex; i < event.results.length; ++i) { transcript += event.results[i][0].transcript; }
+        document.getElementById('chatInput').value = transcript; autoGrow(document.getElementById('chatInput'));
+    };
+    recognition.onend = () => { isRecording = false; document.getElementById('voiceBtn').classList.remove('recording'); };
+    recognition.onerror = () => { showToast("Voice recognition failed."); };
+}
+function toggleVoice() {
+    if(!recognition) return showToast("Voice input not supported in this browser.");
+    if(isRecording) recognition.stop(); else recognition.start();
+}
+
+
 // --- AUTHENTICATION (GAS INTEGRATION) ---
 function updateAuthUI() {
     if (currentUser) {
@@ -580,7 +616,10 @@ async function fetchHistoryFromGAS() {
             S.history = JSON.parse(data.historyJSON);
             S.history.forEach(msg => {
                 if(msg.role === 'user') appendUserDOM(msg.content, msg.badge);
-                else appendBotDOM(msg.content, true);
+                else {
+                    window.isStreamingGlobalFlag = false; // Ensure final render
+                    appendBotDOM(msg.content, true);
+                }
             });
             setTimeout(forceScrollDown, 100);
         } else {
@@ -595,18 +634,43 @@ function syncHistory() {
     }
 }
 
-// --- FILE HANDLING ---
+// --- MULTI-FILE HANDLING (Image + Text/Code/Data) ---
 function handleFile(input){
-  const f=input.files[0];if(!f)return;
-  const r=new FileReader();
-  r.onload=e=>{
-    const base64Data = e.target.result.split(',')[1];
-    S.pending={type: 'image', data: base64Data, name: f.name};
-    document.getElementById('imgThumb').src = e.target.result;
-    document.getElementById('imgName').textContent=f.name;
-    document.getElementById('imgPrev').classList.add('show');
-  };
-  r.readAsDataURL(f);
+  const file = input.files[0]; if(!file) return;
+  const reader = new FileReader();
+  
+  document.getElementById('imgThumb').style.display = 'none';
+  document.getElementById('fileIcon').style.display = 'none';
+  document.getElementById('imgName').textContent = file.name;
+  document.getElementById('imgPrev').classList.add('show');
+
+  // If Image
+  if (file.type.startsWith('image/')) {
+      reader.onload = e => {
+          const base64Data = e.target.result.split(',')[1];
+          S.pending = { type: 'image', data: base64Data, name: file.name };
+          document.getElementById('imgThumb').src = e.target.result;
+          document.getElementById('imgThumb').style.display = 'flex';
+      };
+      reader.readAsDataURL(file);
+  } 
+  // If Text or Code File
+  else if (file.type.match(/(text|json|csv|xml)/) || file.name.match(/\.(txt|md|csv|json|py|js|html|css|cpp|c)$/i)) {
+      reader.onload = e => {
+          S.pending = { type: 'text', data: e.target.result, name: file.name };
+          document.getElementById('fileIcon').style.display = 'flex';
+      };
+      reader.readAsText(file);
+  } 
+  // Other Fallback (PDF, etc)
+  else {
+      reader.onload = e => {
+          const base64Data = e.target.result.split(',')[1];
+          S.pending = { type: 'document', data: base64Data, name: file.name };
+          document.getElementById('fileIcon').style.display = 'flex';
+      };
+      reader.readAsDataURL(file);
+  }
 }
 function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';}
 
@@ -652,7 +716,7 @@ function copyWorkspaceCode() {
   }
 }
 
-// --- WORKSPACE LOGIC (MARKDOWN RENDERER) ---
+// --- WORKSPACE LOGIC (MARKDOWN RENDERER FIXED FOR STREAMING) ---
 function openWorkspace(id) {
   S.currentWorkspaceId = id;
   const block = S.codeBlocks[id];
@@ -670,6 +734,12 @@ const renderer = new marked.Renderer();
 renderer.code = function(token) {
   const codeText = typeof token === 'string' ? token : (token.text || '');
   const language = typeof token === 'string' ? arguments[1] : (token.lang || '');
+  
+  // FIXED: DO NOT SHOW WORKSPACE BUTTON WHILE STREAMING
+  if (window.isStreamingGlobalFlag) {
+      return `<pre><code class="language-${language}">${codeText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code></pre>`;
+  }
+
   const id = S.codeBlocks.length;
   S.codeBlocks.push({ code: codeText, lang: language });
   
@@ -715,17 +785,29 @@ async function sendMsg(){
   const w=document.getElementById('welcome');
   if(w)w.style.display='none';
 
+  let backendPayloadMsg = msg;
   let attachments = [];
   let badge = null;
+
+  // Multi-File Extraction Logic
   if(S.pending) {
-      attachments.push(S.pending);
-      badge = '📎 '+S.pending.name;
-      appendUserDOM(msg || '[Image Attached]', badge);
-      S.history.push({role: 'user', content: msg || '[Image Attached]', badge: badge});
+      if(S.pending.type === 'text') {
+          backendPayloadMsg = `[User attached file: ${S.pending.name}]\nFile Content:\n${S.pending.data}\n\nUser Message: ${msg}`;
+          badge = '📄 '+S.pending.name;
+      } else if(S.pending.type === 'image') {
+          attachments.push(S.pending);
+          badge = '🖼️ '+S.pending.name;
+      } else {
+          badge = '📎 '+S.pending.name;
+      }
+      
+      appendUserDOM(msg || '[File Attached]', badge);
+      S.history.push({role: 'user', content: backendPayloadMsg, badge: badge});
   } else {
       appendUserDOM(msg);
       S.history.push({role: 'user', content: msg});
   }
+  
   removeImg();
   syncHistory();
 
@@ -744,10 +826,12 @@ async function sendMsg(){
   Choose the best model based on the prompt. Example: if user says anime, use flux-anime.
   Always include this markdown tag when image generation is requested.`;
   
+  // FIXED: Memory (History) mapped inside the payload 
   const payload = {
-      message: msg,
+      message: backendPayloadMsg,
       attachments: attachments,
       system_prompt: sysPrompt,
+      history: S.history.slice(0, -1), // Sends previous memory!
       max_tokens: 4096,
       temperature: 0.7
   };
@@ -762,6 +846,8 @@ async function sendMsg(){
     const reader = res.body.getReader();
     const decoder = new TextDecoder();
     let accumulatedText = "";
+    
+    window.isStreamingGlobalFlag = true; // PREVENTS WORKSPACE BUTTON FROM SPAWNING EARLY
 
     while (true) {
         const { done, value } = await reader.read();
@@ -784,12 +870,16 @@ async function sendMsg(){
             }
         }
     }
+    
+    // STREAMING DONE - ALLOW WORKSPACE BUTTON CREATION
+    window.isStreamingGlobalFlag = false; 
     renderBotText(botDiv, accumulatedText, false);
     
     S.history.push({role: 'bot', content: accumulatedText});
     syncHistory();
 
   }catch(err){
+    window.isStreamingGlobalFlag = false;
     renderBotText(botDiv,`**Error:** Server communication failed.`, false);
   }