Spaces:

Renderlib-dev
/

CodeVed

Running

App Files Files Community

Vedika commited on May 23

Commit

bf21c58

verified ·

1 Parent(s): 6f56f64

Update index.html

Browse files

Files changed (1) hide show

index.html +54 -33

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-<title>Arjun Compound - Advanced AI</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
@@ -19,11 +19,12 @@
   --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-sans: 'Inter', -apple-system, sans-serif;
   --font-mono: 'Geist Mono', monospace;
   --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px;
 }
-html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
 /* --- BACKGROUND --- */
 .bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background: linear-gradient(135deg, rgba(255,153,51,0.05) 0%, rgba(255,255,255,1) 50%, rgba(19,136,8,0.05) 100%);}
@@ -46,11 +47,11 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
 .start-btn { padding: 16px 40px; background: var(--text-main); color: #fff; border: none; border-radius: 16px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
 .start-btn:hover { background: #333; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
-/* --- MAIN LAYOUT (CHAT + WORKSPACE) --- */
-.shell{position:relative;z-index:1;display:flex;height:100vh;width:100vw;overflow:hidden;}
 .sidebar{width:280px;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-light);flex-shrink:0;z-index:100; transition: left 0.3s ease;}
 .main-wrapper{flex:1;display:flex;position:relative;overflow:hidden;}
-.chat-main{flex:1;display:flex;flex-direction:column;background:transparent;position:relative;min-width:300px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
 .workspace{width:0;background:#fafafa;border-left:1px solid var(--border-light);display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:-10px 0 30px rgba(0,0,0,0.02);z-index:25;}
 .workspace.open{width:50%;}
@@ -95,11 +96,13 @@ input:checked + .slider:before {transform: translateX(20px);}
 .clear-btn:hover{background:#fff0f0;color:#ff3b30;border-color:#ff3b30;}
 /* --- CHAT AREA --- */
-.chat-hdr{padding:14px 24px;border-bottom:1px solid var(--border-light);background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;z-index:10;}
 .mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; color: var(--text-main); cursor: pointer; margin-right: 16px; }
 .model-badge{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;}
 .status-dot{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 2px rgba(52,199,89,0.2);}
-.messages{flex:1;overflow-y:auto;padding:30px 40px;display:flex;flex-direction:column;gap:24px;scroll-behavior:smooth;position:relative;}
 .messages::-webkit-scrollbar{width:6px;}
 .messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
@@ -133,7 +136,7 @@ input:checked + .slider:before {transform: translateX(20px);}
 .msg.user .bubble{background:var(--text-main);color:#ffffff;border-radius:20px 20px 4px 20px;box-shadow:var(--shadow-sm);}
 .msg.bot .bubble{background:#ffffff;border:1px solid var(--border-light);border-radius:4px 20px 20px 20px;box-shadow:var(--shadow-sm);width:100%;}
-/* BOT ACTIONS (Copy Button below text) */
 .msg-actions{display:flex;gap:8px;margin-top:4px;padding-left:12px;opacity:0.7;transition:opacity 0.2s;}
 .msg.bot:hover .msg-actions{opacity:1;}
 .action-btn{background:var(--bg-secondary);border:1px solid var(--border-light);color:var(--text-main);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;transition:all 0.2s;}
@@ -175,8 +178,8 @@ body:not(.show-thinking) .think-box {display: none;}
 .scroll-bottom-btn.show {opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
 .scroll-bottom-btn:hover {background:#fff;transform:translateX(-50%) translateY(-3px);box-shadow:var(--shadow-lg);}
-/* --- INPUT AREA --- */
-.input-container{padding:0 40px 30px;background:linear-gradient(to top, var(--bg-color) 70%, transparent);position:relative;z-index:20;}
 .input-wrap{display:flex;flex-direction:column;background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-light);border-radius:24px;box-shadow:var(--shadow-md);transition:box-shadow 0.3s, border-color 0.3s;}
 .input-wrap:focus-within{border-color:var(--border-focus);box-shadow:0 12px 40px rgba(0,0,0,0.1), 0 0 0 3px rgba(255,153,51,0.1);}
@@ -189,7 +192,7 @@ body:not(.show-thinking) .think-box {display: none;}
 .inline-rm:hover{background:#ff3b30;color:#fff;}
 .input-row{display:flex;align-items:flex-end;gap:12px;padding:12px 16px 12px 20px;}
-.chat-ta{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-sans);font-size:15px;color:var(--text-main);line-height:1.5;resize:none;max-height:200px;min-height:24px;padding:8px 0;}
 .chat-ta::placeholder{color:var(--text-muted);}
 .attach-btn{width:38px;height:38px;border-radius:12px;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all 0.2s;position:relative;overflow:hidden;padding-bottom:4px;}
@@ -237,7 +240,7 @@ body:not(.show-thinking) .think-box {display: none;}
 .secondary-btn { width: 100%; padding: 12px; background: transparent; color: var(--text-muted); border: none; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px; }
 .secondary-btn:hover { color: var(--text-main); }
-/* --- RESPONSIVE MOBILE ADAPTIVE --- */
 @media(max-width:850px){
   .sidebar{position:absolute;left:-280px;z-index:100;height:100%;transition:left 0.3s ease;}
   .sidebar.show{left:0;box-shadow:var(--shadow-lg);}
@@ -245,7 +248,7 @@ body:not(.show-thinking) .think-box {display: none;}
   .close-sidebar-btn { display: block; }
   .workspace.open{position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;}
   .messages{padding:20px;}
-  .input-container{padding:0 20px 20px;}
   .msg{max-width:95%;}
   .scroll-bottom-btn{bottom:110px;}
 }
@@ -259,7 +262,7 @@ body:not(.show-thinking) .think-box {display: none;}
 <!-- GET STARTED WELCOME OVERLAY -->
 <div class="welcome-overlay" id="welcomeOverlay">
     <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo">
-    <h1>Welcome to Arjun Compound</h1>
     <p>Developed by Abhay Kumar. Experience advanced reasoning, secure workspace coding, and high-quality image generation in one place.</p>
     <button class="start-btn" onclick="startArjunApp()">Get Started</button>
 </div>
@@ -276,7 +279,7 @@ body:not(.show-thinking) .think-box {display: none;}
       <div class="logo-row">
         <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="logo-img">
         <div class="logo-text">
-          <div class="logo-name">ARJUN COMPOUND</div>
           <div class="logo-sub">Advanced Edition</div>
         </div>
       </div>
@@ -304,7 +307,7 @@ body:not(.show-thinking) .think-box {display: none;}
       <div class="brand-box">
           <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Identity">
-          <h3>Arjun Compound</h3>
           <p>DEVELOPED BY ABHAY KUMAR</p>
       </div>
       <button class="clear-btn" onclick="clearMemory()">🗑️ Clear Chat Memory</button>
@@ -328,7 +331,7 @@ body:not(.show-thinking) .think-box {display: none;}
         <div class="welcome" id="welcome">
           <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="welcome-logo">
           <div class="welcome-title">Welcome, User!</div>
-          <div class="welcome-sub">I am Arjun Compound, developed by Abhay Kumar. I am equipped with advanced reasoning, workspace coding, and image generation.</div>
           <div id="guestBadge" class="guest-badge">Guest Mode: <span id="guestCountDisplay">0</span>/3 Queries Used.</div>
@@ -368,19 +371,19 @@ body:not(.show-thinking) .think-box {display: none;}
               <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>
           </div>
         </div>
-        <div class="input-hint">Arjun Compound is engineered for extreme performance. Developed by Abhay Kumar.</div>
       </div>
     </main>
@@ -482,9 +485,7 @@ function startArjunApp() {
     setTimeout(() => { overlay.style.display = 'none'; }, 400);
 }
-function toggleSidebar() {
-    document.getElementById('sidebar').classList.toggle('show');
-}
 function showToast(msg) {
     const container = document.getElementById('toast-container');
@@ -499,20 +500,35 @@ 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."); };
@@ -617,7 +633,7 @@ async function fetchHistoryFromGAS() {
             S.history.forEach(msg => {
                 if(msg.role === 'user') appendUserDOM(msg.content, msg.badge);
                 else {
-                    window.isStreamingGlobalFlag = false; // Ensure final render
                     appendBotDOM(msg.content, true);
                 }
             });
@@ -816,22 +832,27 @@ async function sendMsg(){
   document.getElementById('msgs').appendChild(botDiv);
   forceScrollDown();
-  const sysPrompt = `You are Arjun Compound, a state-of-the-art AI assistant developed by Abhay Kumar.
   Always communicate respectfully.
   CRITICAL IMAGE GENERATION PROTOCOL:
   If the user asks to generate, create, or draw an image/photo, you MUST generate the image by responding with a markdown image tag using Pollinations AI.
-  Format to use: ![Arjun Compound is creating your image...](https://image.pollinations.ai/prompt/{URL_ENCODED_PROMPT}?width=1024&height=1024&nologo=true&model={MODEL})
   Available models for {MODEL}: flux, flux-realism, flux-anime, flux-3d.
   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: backendPayloadMsg,
       attachments: attachments,
       system_prompt: sysPrompt,
-      history: S.history.slice(0, -1), // Sends previous memory!
       max_tokens: 4096,
       temperature: 0.7
   };

 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>Arjun 2.O - Advanced AI</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
   --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-mono: 'Geist Mono', monospace;
   --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px;
 }
+/* Fixed UI layout hiding issue using 100dvh */
+html,body{height:100dvh;overflow:hidden;background:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
 /* --- BACKGROUND --- */
 .bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background: linear-gradient(135deg, rgba(255,153,51,0.05) 0%, rgba(255,255,255,1) 50%, rgba(19,136,8,0.05) 100%);}
 .start-btn { padding: 16px 40px; background: var(--text-main); color: #fff; border: none; border-radius: 16px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
 .start-btn:hover { background: #333; transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
+/* --- MAIN LAYOUT --- */
+.shell{position:relative;z-index:1;display:flex;height:100dvh;width:100vw;overflow:hidden;}
 .sidebar{width:280px;display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-light);flex-shrink:0;z-index:100; transition: left 0.3s ease;}
 .main-wrapper{flex:1;display:flex;position:relative;overflow:hidden;}
+.chat-main{flex:1;display:flex;flex-direction:column;background:transparent;position:relative;min-width:300px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 100%;}
 .workspace{width:0;background:#fafafa;border-left:1px solid var(--border-light);display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;box-shadow:-10px 0 30px rgba(0,0,0,0.02);z-index:25;}
 .workspace.open{width:50%;}
 .clear-btn:hover{background:#fff0f0;color:#ff3b30;border-color:#ff3b30;}
 /* --- CHAT AREA --- */
+.chat-hdr{padding:14px 24px;border-bottom:1px solid var(--border-light);background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;z-index:10;flex-shrink:0;}
 .mobile-menu-btn { display: none; background: none; border: none; font-size: 24px; color: var(--text-main); cursor: pointer; margin-right: 16px; }
 .model-badge{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;}
 .status-dot{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 2px rgba(52,199,89,0.2);}
+/* Added min-height: 0 to ensure flexbox scrolling works properly */
+.messages{flex:1;overflow-y:auto;padding:30px 40px;display:flex;flex-direction:column;gap:24px;scroll-behavior:smooth;position:relative; min-height:0;}
 .messages::-webkit-scrollbar{width:6px;}
 .messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
 .msg.user .bubble{background:var(--text-main);color:#ffffff;border-radius:20px 20px 4px 20px;box-shadow:var(--shadow-sm);}
 .msg.bot .bubble{background:#ffffff;border:1px solid var(--border-light);border-radius:4px 20px 20px 20px;box-shadow:var(--shadow-sm);width:100%;}
+/* BOT ACTIONS */
 .msg-actions{display:flex;gap:8px;margin-top:4px;padding-left:12px;opacity:0.7;transition:opacity 0.2s;}
 .msg.bot:hover .msg-actions{opacity:1;}
 .action-btn{background:var(--bg-secondary);border:1px solid var(--border-light);color:var(--text-main);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;transition:all 0.2s;}
 .scroll-bottom-btn.show {opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
 .scroll-bottom-btn:hover {background:#fff;transform:translateX(-50%) translateY(-3px);box-shadow:var(--shadow-lg);}
+/* --- INPUT AREA (Fixed Position to Avoid Overlap) --- */
+.input-container{flex-shrink:0; padding:10px 40px 24px; background:var(--bg-color); border-top:1px solid var(--border-light); position:relative; z-index:20;}
 .input-wrap{display:flex;flex-direction:column;background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-light);border-radius:24px;box-shadow:var(--shadow-md);transition:box-shadow 0.3s, border-color 0.3s;}
 .input-wrap:focus-within{border-color:var(--border-focus);box-shadow:0 12px 40px rgba(0,0,0,0.1), 0 0 0 3px rgba(255,153,51,0.1);}
 .inline-rm:hover{background:#ff3b30;color:#fff;}
 .input-row{display:flex;align-items:flex-end;gap:12px;padding:12px 16px 12px 20px;}
+.chat-ta{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-sans);font-size:15px;color:var(--text-main);line-height:1.5;resize:none;max-height:150px;min-height:24px;padding:8px 0;}
 .chat-ta::placeholder{color:var(--text-muted);}
 .attach-btn{width:38px;height:38px;border-radius:12px;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all 0.2s;position:relative;overflow:hidden;padding-bottom:4px;}
 .secondary-btn { width: 100%; padding: 12px; background: transparent; color: var(--text-muted); border: none; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px; }
 .secondary-btn:hover { color: var(--text-main); }
+/* --- RESPONSIVE MOBILE ADAPTIVE (Perfect fit fix) --- */
 @media(max-width:850px){
   .sidebar{position:absolute;left:-280px;z-index:100;height:100%;transition:left 0.3s ease;}
   .sidebar.show{left:0;box-shadow:var(--shadow-lg);}
   .close-sidebar-btn { display: block; }
   .workspace.open{position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;}
   .messages{padding:20px;}
+  .input-container{padding:10px 15px 15px;}
   .msg{max-width:95%;}
   .scroll-bottom-btn{bottom:110px;}
 }
 <!-- GET STARTED WELCOME OVERLAY -->
 <div class="welcome-overlay" id="welcomeOverlay">
     <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo">
+    <h1>Welcome to Arjun 2.O</h1>
     <p>Developed by Abhay Kumar. Experience advanced reasoning, secure workspace coding, and high-quality image generation in one place.</p>
     <button class="start-btn" onclick="startArjunApp()">Get Started</button>
 </div>
       <div class="logo-row">
         <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="logo-img">
         <div class="logo-text">
+          <div class="logo-name">ARJUN 2.O</div>
           <div class="logo-sub">Advanced Edition</div>
         </div>
       </div>
       <div class="brand-box">
           <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Identity">
+          <h3>Arjun 2.O</h3>
           <p>DEVELOPED BY ABHAY KUMAR</p>
       </div>
       <button class="clear-btn" onclick="clearMemory()">🗑️ Clear Chat Memory</button>
         <div class="welcome" id="welcome">
           <img src="https://i.ibb.co/0y2sdbq6/PT-20260523-133251-0000.png" alt="Arjun Logo" class="welcome-logo">
           <div class="welcome-title">Welcome, User!</div>
+          <div class="welcome-sub">I am Arjun 2.O, developed by Abhay Kumar. I am equipped with advanced reasoning, workspace coding, and image generation.</div>
           <div id="guestBadge" class="guest-badge">Guest Mode: <span id="guestCountDisplay">0</span>/3 Queries Used.</div>
               <input type="file" accept="*/*" onchange="handleFile(this)" id="fileInput">
             </button>
+            <!-- Voice Input Mic (Fixed Punctuation) -->
             <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 2.O..." 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>
           </div>
         </div>
+        <div class="input-hint">Arjun 2.O is engineered for extreme performance. Developed by Abhay Kumar.</div>
       </div>
     </main>
     setTimeout(() => { overlay.style.display = 'none'; }, 400);
 }
+function toggleSidebar() { document.getElementById('sidebar').classList.toggle('show'); }
 function showToast(msg) {
     const container = document.getElementById('toast-container');
   else document.body.classList.remove('show-thinking');
 }
+// --- VOICE RECOGNITION (SMART PUNCTUATION LOGIC) ---
 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 let recognition = null;
 let isRecording = false;
 if (SpeechRecognition) {
     recognition = new SpeechRecognition();
+    recognition.continuous = false; // Auto stops when paused
+    recognition.interimResults = false;
+    recognition.lang = 'hi-IN'; // Set to Hindi/English mix support usually
     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;
+        }
+        // Smart Punctuation & Capitalization Fix
+        transcript = transcript.trim();
+        if(transcript.length > 0) {
+            transcript = transcript.charAt(0).toUpperCase() + transcript.slice(1);
+            if (!/[.!?।]$/.test(transcript)) transcript += '.';
+            transcript += ' ';
+        }
+        const inp = document.getElementById('chatInput');
+        inp.value = (inp.value + ' ' + transcript).trim();
+        autoGrow(inp);
     };
     recognition.onend = () => { isRecording = false; document.getElementById('voiceBtn').classList.remove('recording'); };
     recognition.onerror = () => { showToast("Voice recognition failed."); };
             S.history.forEach(msg => {
                 if(msg.role === 'user') appendUserDOM(msg.content, msg.badge);
                 else {
+                    window.isStreamingGlobalFlag = false;
                     appendBotDOM(msg.content, true);
                 }
             });
   document.getElementById('msgs').appendChild(botDiv);
   forceScrollDown();
+  const sysPrompt = `You are Arjun 2.O, a state-of-the-art AI assistant developed by Abhay Kumar.
   Always communicate respectfully.
   CRITICAL IMAGE GENERATION PROTOCOL:
   If the user asks to generate, create, or draw an image/photo, you MUST generate the image by responding with a markdown image tag using Pollinations AI.
+  Format to use: ![Arjun 2.O is creating your image...](https://image.pollinations.ai/prompt/{URL_ENCODED_PROMPT}?width=1024&height=1024&nologo=true&model={MODEL})
   Available models for {MODEL}: flux, flux-realism, flux-anime, flux-3d.
   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 BUG: Creating a clean history map that removes custom properties like 'badge' which breaks the HuggingFace API.
+  const cleanHistory = S.history.slice(0, -1).map(item => ({
+      role: item.role,
+      content: item.content
+  }));
   const payload = {
       message: backendPayloadMsg,
       attachments: attachments,
       system_prompt: sysPrompt,
+      history: cleanHistory,
       max_tokens: 4096,
       temperature: 0.7
   };