Spaces:

Renderlib-dev
/

CodeVed

Running

App Files Files Community

Vedika commited on May 23

Commit

f3977be

verified ·

1 Parent(s): d186ca1

Update index.html

Browse files

Files changed (1) hide show

index.html +446 -220

index.html CHANGED Viewed

@@ -2,138 +2,185 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>🇮🇳 TIRANGA</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">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
 <style>
 *{margin:0;padding:0;box-sizing:border-box;}
 :root{
-  --bg-color: #ffffff; --bg-secondary: #f5f5f7; --text-main: #1d1d1f; --text-muted: #86868b;
-  --accent: #FF9933;
-  --accent-hover: #e68a2e; --border-light: rgba(0, 0, 0, 0.08);
-  --glass-bg: rgba(255, 255, 255, 0.75); --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);
-  --font-serif: 'Instrument Serif', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 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;}
-/* बेहतरीन तिरंगा बैकग्राउंड शेड (Visibility बढ़ाई गई है) */
-.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background: linear-gradient(135deg, rgba(255,153,51,0.08) 0%, rgba(255,255,255,1) 50%, rgba(19,136,8,0.08) 100%);}
-.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.6;animation:drift 25s ease-in-out infinite alternate;}
-/* केसरिया (Saffron) Orb */
-.orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(255,153,51,0.25),transparent 70%);top:-150px;left:-100px;}
-/* हरा (Green) Orb */
-.orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(19,136,8,0.22),transparent 70%);bottom:-100px;right:-100px;animation-delay:-10s;}
-@keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(80px,50px) scale(1.1);}}
-.shell{position:relative;z-index:1;display:grid;grid-template-columns:280px 1fr;height:100vh;}
-.sidebar{display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border-light);overflow:hidden;}
 .logo-area{padding:24px 20px;border-bottom:1px solid var(--border-light);}
-.logo-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
-.logo-img{width:48px;height:48px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);background:#fff;}
 .logo-text{line-height:1.2;}
 .logo-name{font-family:var(--font-sans);font-weight:800;font-size:18px;color:var(--text-main);letter-spacing:-0.5px;}
 .logo-sub{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
 .settings{padding:20px;flex:1;overflow-y:auto;display:flex;flex-direction:column;}
 .settings::-webkit-scrollbar{width:4px;}
-.settings::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:10px;}
-.section-lbl{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;}
-.brand-box {background: #ffffff;border: 1px solid var(--border-light);border-radius: var(--radius-md);padding: 20px;text-align: center;box-shadow: var(--shadow-sm);margin-bottom:auto;}
-.brand-box img {width: 80px; height: 80px; border-radius: 16px; object-fit: cover; margin-bottom: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);}
-.brand-box h3 {font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; letter-spacing: 0.5px;}
-.brand-box p {font-size: 10px; font-weight: 600; color: var(--text-muted); line-height: 1.4; letter-spacing: 0.5px;}
-.clear-btn{width:100%;padding:10px;border-radius:var(--radius-sm);background:#ffffff;border:1px solid var(--border-light);color:var(--text-main);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s;margin-top:20px;}
 .clear-btn:hover{background:#fff0f0;color:#ff3b30;border-color:#ff3b30;}
-.chat-main{display:flex;flex-direction:column;background:transparent;overflow:hidden;position:relative;}
-.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;justify-content:space-between;flex-shrink:0;z-index:10;}
-.model-badge{font-size:13px;font-weight:600;color:var(--text-main);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;}
 .messages::-webkit-scrollbar{width:6px;}
 .messages::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
-.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;flex:1;min-height:400px;animation:fadeIn 0.5s ease-out;}
 @keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
-.welcome-logo{width:80px;height:80px;border-radius:20px;object-fit:cover;box-shadow:var(--shadow-md);margin-bottom:24px;background:#fff;border:1px solid var(--border-light);}
-.welcome-title{font-family:var(--font-sans);font-size:32px;font-weight:800;color:var(--text-main);letter-spacing:-1px;margin-bottom:12px;}
-.welcome-sub{font-size:15px;color:var(--text-muted);max-width:500px;line-height:1.5;margin-bottom:32px;}
-.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:600px;}
-.ex-card{background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:16px;cursor:pointer;text-align:left;transition:all 0.2s;box-shadow:var(--shadow-sm);}
-.ex-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(255,153,51,0.4);}
-.ex-title{font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:4px;}
-.ex-desc{font-size:12px;color:var(--text-muted);line-height:1.4;}
-.msg{display:flex;gap:16px;animation:msgIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;max-width:85%;}
-@keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(0.98);}to{opacity:1;transform:none;}}
 .msg.user{flex-direction:row-reverse;align-self:flex-end;}
 .msg.bot{align-self:flex-start;}
-.avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;}
-.msg.user .avatar{background:var(--bg-secondary);color:var(--text-main);border:1px solid var(--border-light);}
-.msg.bot .avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid var(--border-light);background:#fff;}
-.body{display:flex;flex-direction:column;gap:4px;}
 .msg.user .body{align-items:flex-end;}
-.bubble{padding:14px 18px;font-size:14.5px;line-height:1.6;color:var(--text-main);}
-.msg.user .bubble{background:var(--accent);color:#ffffff;border-radius:20px 20px 4px 20px;box-shadow:0 4px 12px rgba(255,153,51,0.2);}
 .msg.bot .bubble{background:#ffffff;border:1px solid var(--border-light);border-radius:4px 20px 20px 20px;box-shadow:var(--shadow-sm);width:100%;}
-.bubble p{margin-bottom:10px;}
 .bubble p:last-child{margin-bottom:0;}
-.bubble pre{background:#f5f5f7;border:1px solid rgba(0,0,0,0.05);border-radius:12px;padding:12px;margin:10px 0;overflow-x:auto;font-family:var(--font-mono);font-size:13px;}
-.msg.user .bubble pre{background:rgba(255,255,255,0.1);border:none;color:#fff;}
-.bubble code{font-family:var(--font-mono);background:rgba(0,0,0,0.05);padding:2px 6px;border-radius:6px;font-size:0.9em;}
-.msg.user .bubble code{background:rgba(255,255,255,0.2);}
-.bubble pre code{background:transparent;padding:0;}
-.code-wrap{position:relative;margin:12px 0;}
-.code-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#e5e5ea;border-radius:12px 12px 0 0;border:1px solid rgba(0,0,0,0.05);border-bottom:none;}
-.code-lang-tag{font-size:12px;font-weight:600;color:var(--text-muted);font-family:var(--font-mono);}
-.copy-btn{padding:4px 12px;border-radius:8px;background:#ffffff;border:1px solid rgba(0,0,0,0.1);color:var(--text-main);font-size:11px;font-weight:500;cursor:pointer;transition:all 0.2s;}
-.copy-btn:hover{background:#f5f5f7;}
-.code-wrap pre{border-radius:0 0 12px 12px;margin:0;}
-.think-blk {background: rgba(0, 0, 0, 0.02);border: 1px solid rgba(0, 0, 0, 0.08);border-radius: 12px;padding: 12px 16px;margin-bottom: 14px;box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);transition: all 0.3s ease;}
-.think-blk:hover {background: rgba(0, 0, 0, 0.04);}
-.think-hdr {display: flex;align-items: center;font-size: 13px;font-weight: 600;color: var(--text-muted);cursor: pointer;user-select: none;}
-.think-hdr::before {content: '►';font-size: 10px;margin-right: 10px;transition: transform 0.2s ease;color: #a1a1a6;}
-.think-blk.open .think-hdr::before {transform: rotate(90deg);}
-.think-body {margin-top: 12px;display: none;border-top: 1px dashed rgba(0,0,0,0.1);padding-top: 12px;font-size: 13.5px;color: var(--text-muted);line-height: 1.6;font-family: var(--font-mono);white-space: pre-wrap;}
-.think-blk.open .think-body {display: block;animation: fadeInDown 0.3s ease;}
-@keyframes fadeInDown {from { opacity: 0; transform: translateY(-5px); }to { opacity: 1; transform: translateY(0); }}
-.typing{display:flex;align-items:center;gap:6px;padding:8px 4px;}
-.typing span{width:8px;height:8px;border-radius:50%;background:var(--text-muted);opacity:0.4;animation:bounce 1s ease-in-out infinite;}
-.typing span:nth-child(2){animation-delay:0.2s;}
-.typing span:nth-child(3){animation-delay:0.4s;}
-@keyframes bounce{0%,100%{transform:translateY(0);opacity:0.4;}50%{transform:translateY(-6px);opacity:1;}}
-.input-container{padding:0 40px 30px;background:linear-gradient(to top, var(--bg-color) 70%, transparent);position:relative;z-index:10;}
-.input-wrap{display:flex;align-items:flex-end;gap:12px;background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-light);border-radius:24px;padding:10px 14px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow 0.3s;}
-.input-wrap:focus-within{box-shadow:0 12px 40px rgba(0,0,0,0.12), 0 0 0 3px rgba(255,153,51,0.2);}
 .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:10px 0;}
 .chat-ta::placeholder{color:var(--text-muted);}
 .input-acts{display:flex;align-items:center;gap:8px;padding-bottom:6px;}
-.icon-btn{width:36px;height:36px;border-radius:50%;background:#f5f5f7;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);font-size:16px;transition:all 0.2s;flex-shrink:0;}
-.icon-btn:hover{background:#e5e5ea;color:var(--text-main);}
-.file-btn{position:relative;}
-.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;}
-.send-btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--text-main);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.2s, opacity 0.2s;}
-.send-btn svg{width:18px;height:18px;fill:currentColor;}
-.send-btn:hover{transform:scale(1.05);}
-.send-btn:disabled{opacity:0.3;cursor:not-allowed;transform:none;}
 .input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:12px;font-weight:500;}
-.img-prev{display:none;padding:12px 20px;background:#f5f5f7;border-radius:16px;margin:0 40px 12px;border:1px solid var(--border-light);}
-.img-prev.show{display:flex;align-items:center;gap:12px;}
-.img-th{width:48px;height:48px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow-sm);}
-.img-nm{font-size:13px;font-weight:600;color:var(--text-main);}
-.img-sz{font-size:11px;color:var(--text-muted);}
-.img-rm{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#e5e5ea;border:none;cursor:pointer;color:var(--text-muted);transition:background 0.2s;}
-.img-rm:hover{background:#ff3b30;color:#fff;}
-@media(max-width:768px){
-  .shell{grid-template-columns:1fr;}
-  .sidebar{display:none;}
   .messages{padding:20px;}
   .input-container{padding:0 20px 20px;}
   .msg{max-width:95%;}
 }
 </style>
 </head>
@@ -145,120 +192,278 @@ html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--tex
 </div>
 <div class="shell">
-  <aside class="sidebar">
     <div class="logo-area">
       <div class="logo-row">
         <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Logo" class="logo-img">
         <div class="logo-text">
           <div class="logo-name">TIRANGA</div>
-          <div class="logo-sub">Advanced AI System</div>
         </div>
       </div>
     </div>
     <div class="settings">
-      <div class="section-lbl">Brand Identity</div>
       <div class="brand-box">
           <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Identity">
           <h3>TIRANGA</h3>
           <p>ALWAYS BE FORWARD NEVER BE BACKWARD!!</p>
       </div>
-      <button class="clear-btn" onclick="clearChat()">Clear Conversation</button>
     </div>
   </aside>
-  <main class="chat-main">
-    <header class="chat-hdr">
-      <div class="model-badge">
-        <div class="status-dot"></div>
-        TIRANGA Ready
-      </div>
-    </header>
-    <div class="img-prev" id="imgPrev">
-      <img class="img-th" id="imgThumb" src="">
-      <div>
-        <div class="img-nm" id="imgName">document.pdf</div>
-        <div class="img-sz" id="imgSize">0 KB</div>
       </div>
-      <button class="img-rm" onclick="removeImg()">✕</button>
-    </div>
-    <div class="messages" id="msgs">
-      <div class="welcome" id="welcome">
-        <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Logo" class="welcome-logo">
-        <div class="welcome-title">How can I help you today?</div>
-        <div class="welcome-sub">I am TIRANGA. I specialize in coding, deep reasoning, and complex logic. Upload images or ask anything!</div>
-        <div class="ex-grid">
-          <div class="ex-card" onclick="sendEx('Write a modern React component with Tailwind CSS that displays a glass-morphism pricing card.')">
-            <div class="ex-title">Code Generation</div>
-            <div class="ex-desc">Write optimized, secure code</div>
           </div>
-          <div class="ex-card" onclick="sendEx('Explain the Model Context Protocol (MCP) and how it improves AI latency compared to standard REST APIs.')">
-            <div class="ex-title">Deep Reasoning</div>
-            <div class="ex-desc">Step-by-step technical analysis</div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="input-container">
-      <div class="input-wrap">
-        <textarea class="chat-ta" id="chatInput" placeholder="Message TIRANGA..." rows="1" onkeydown="handleKey(event)" oninput="autoGrow(this)"></textarea>
-        <div class="input-acts">
-          <label class="icon-btn file-btn" title="Upload Image or File">
-            📎<input type="file" accept="image/*,audio/*,.txt,.pdf" onchange="handleFile(this)" id="fileInput">
-          </label>
-          <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">TIRANGA AI can make mistakes. Consider verifying critical information.</div>
-    </div>
-  </main>
 </div>
 <script>
-const S={history:[],pending:null,busy:false};
 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];
-    let type = 'file';
-    if(f.type.startsWith('image/')) type = 'image';
-    else if(f.type.startsWith('audio/')) type = 'audio';
-    S.pending={type: type, data: base64Data, name: f.name, size: fmtSz(f.size)};
-    if(type === 'image') {
-        document.getElementById('imgThumb').src = e.target.result;
-        document.getElementById('imgThumb').style.display='block';
-    } else {
-        document.getElementById('imgThumb').style.display='none';
-    }
     document.getElementById('imgName').textContent=f.name;
-    document.getElementById('imgSize').textContent=fmtSz(f.size);
     document.getElementById('imgPrev').classList.add('show');
   };
   r.readAsDataURL(f);
 }
 function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';}
-function fmtSz(b){return b<1048576?`${(b/1024).toFixed(0)} KB`:`${(b/1048576).toFixed(1)} MB`;}
 function handleKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMsg();}}
 function autoGrow(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,200)+'px';}
 async function sendMsg(){
   if(S.busy)return;
   const inp=document.getElementById('chatInput');
   const msg=inp.value.trim();if(!msg && !S.pending)return;
   inp.value='';inp.style.height='auto';
   document.getElementById('sendBtn').disabled=true;
   S.busy=true;
@@ -266,26 +471,32 @@ async function sendMsg(){
   if(w)w.style.display='none';
   let attachments = [];
   if(S.pending) {
       attachments.push(S.pending);
-      appendUser(msg || '[फ़ाइल संलग्न की गई]', '📎 '+S.pending.name);
   } else {
-      appendUser(msg);
   }
   removeImg();
-  const botDiv=appendBot();
-  const sysPrompt = "You are TIRANGA, a state-of-the-art AI assistant developed by Divy Bhai. You possess world-class expertise in software engineering, advanced algorithmic logic, and complex problem-solving. Always provide highly optimized, secure, and precise solutions in English by default.";
-  const maxTokens = 4096;
-  const temp = 0.60;
   const payload = {
       message: msg,
       attachments: attachments,
       system_prompt: sysPrompt,
-      max_tokens: maxTokens,
-      temperature: temp
   };
   try{
@@ -314,77 +525,92 @@ async function sendMsg(){
                     const dataObj = JSON.parse(dataStr);
                     if (dataObj.choices && dataObj.choices[0].delta.content) {
                         accumulatedText += dataObj.choices[0].delta.content;
-                        renderBot(botDiv, accumulatedText);
-                        scrollDown();
                     }
                 } catch (e) { }
             }
         }
     }
   }catch(err){
-    renderBot(botDiv,`**Error:** सर्वर से संपर्क नहीं हो पाया। कृपया दोबारा प्रयास करें।`);
   }
   S.busy=false;
   document.getElementById('sendBtn').disabled=false;
-  scrollDown();
 }
-function sendEx(t){document.getElementById('chatInput').value=t;sendMsg();}
-function appendUser(text, badgeText){
-  let bHtml = badgeText ? `<div class="pdf-badge">${esc(badgeText)}</div>` : '';
   const el=document.createElement('div');el.className='msg user';
   el.innerHTML=`<div class="avatar">U</div><div class="body">${bHtml}<div class="bubble">${esc(text)}</div></div>`;
-  document.getElementById('msgs').appendChild(el);scrollDown();
 }
-function appendBot(){
   const el=document.createElement('div');el.className='msg bot';
-  el.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" class="avatar-img"></div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div></div>`;
-  document.getElementById('msgs').appendChild(el);scrollDown();return el;
 }
-function renderBot(el, raw) {
   const b = el.querySelector('.bubble');
-  let thinkHtml = '';
-  let ans = raw;
-  const thinkRegex = /<think>([\s\S]*?)(<\/think>|$)/i;
-  let match = raw.match(thinkRegex);
-  if (match) {
-    const fullTag = match[0];
-    let chain = match[1].replace(/<[^>]+>/g, '').trim();
-    ans = raw.replace(fullTag, '').trim();
-    if (match[2] === '') {
-      thinkHtml = `<div class="think-blk open" style="border-color:var(--accent)"><div class="think-hdr">Reasoning <span class="typing" style="display:inline-flex;padding:0 4px"><span></span><span></span><span></span></span></div><div class="think-body">${esc(chain)}</div></div>`;
-      ans = '';
-    } else {
-      thinkHtml = `<div class="think-blk" onclick="this.classList.toggle('open')"><div class="think-hdr">Reasoning Process</div><div class="think-body">${esc(chain)}</div></div>`;
-    }
-  }
-  b.innerHTML = thinkHtml + md(ans);
 }
-/* कॉपी बटन के HTML ब्रेक होने के बग को यहीं फिक्स किया गया है (encodeURIComponent का उपयोग करके) */
-(function setupMarked(){
-  if(typeof marked==='undefined')return;
-  const renderer=new marked.Renderer();
-  renderer.code=(code,lang)=>{
-    const language=lang&&hljs.getLanguage(lang)?lang:'plaintext';
-    const rawCode = code.text||code;
-    const highlighted=hljs.highlight(rawCode,{language}).value;
-    const encoded = encodeURIComponent(rawCode).replace(/'/g, "%27");
-    return `<div class="code-wrap"><div class="code-header"><span class="code-lang-tag">${language}</span><button class="copy-btn" onclick="navigator.clipboard.writeText(decodeURIComponent('${encoded}'))">Copy</button></div><pre><code class="hljs">${highlighted}</code></pre></div>`;
-  };
-  marked.setOptions({renderer,breaks:true});
-})();
-function md(t){return marked?marked.parse(t):t;}
 function esc(t){return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
-function scrollDown(){const m=document.getElementById('msgs');m.scrollTop=m.scrollHeight;}
-function clearChat(){S.history=[];document.getElementById('msgs').innerHTML='';location.reload();}
 </script>
 </body>
-</html>

 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>🇮🇳 TIRANGA - 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">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
 <style>
+/* --- BASE RESET & VARIABLES --- */
 *{margin:0;padding:0;box-sizing:border-box;}
 :root{
+  --bg-color: #ffffff; --bg-secondary: #f9f9fb; --text-main: #1d1d1f; --text-muted: #86868b;
+  --accent: #FF9933; --accent-green: #138808; --accent-hover: #e68a2e;
+  --border-light: rgba(0, 0, 0, 0.08); --border-focus: rgba(255, 153, 51, 0.3);
+  --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;
 }
 html,body{height:100%;overflow:hidden;background:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
+/* --- TIRANGA 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%);}
+.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.5;animation:drift 25s ease-in-out infinite alternate;}
+.orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(255,153,51,0.2),transparent 70%);top:-150px;left:-100px;}
+.orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(19,136,8,0.18),transparent 70%);bottom:-100px;right:-100px;animation-delay:-10s;}
+@keyframes drift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(60px,40px) scale(1.05);}}
+/* --- 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;}
+.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);}
+.workspace.open{width:50%;}
+/* --- SIDEBAR & BRANDING --- */
 .logo-area{padding:24px 20px;border-bottom:1px solid var(--border-light);}
+.logo-row{display:flex;align-items:center;gap:12px;}
+.logo-img{width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-sm);border:1px solid var(--border-light);background:#fff;}
 .logo-text{line-height:1.2;}
 .logo-name{font-family:var(--font-sans);font-weight:800;font-size:18px;color:var(--text-main);letter-spacing:-0.5px;}
 .logo-sub{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
 .settings{padding:20px;flex:1;overflow-y:auto;display:flex;flex-direction:column;}
 .settings::-webkit-scrollbar{width:4px;}
+.settings::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:10px;}
+.brand-box {background: #ffffff;border: 1px solid var(--border-light);border-radius: var(--radius-md);padding: 24px 16px;text-align: center;box-shadow: var(--shadow-sm);margin-top:20px;}
+.brand-box img {width: 70px; height: 70px; border-radius: 16px; object-fit: cover; margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);}
+.brand-box h3 {font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 6px;}
+.brand-box p {font-size: 10px; font-weight: 600; color: var(--accent-green); line-height: 1.4; letter-spacing: 0.5px;}
+.clear-btn{width:100%;padding:12px;border-radius:var(--radius-sm);background:#ffffff;border:1px solid var(--border-light);color:var(--text-main);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;margin-top:auto;}
 .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;justify-content:space-between;z-index:10;}
+.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;}
+.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;margin:auto;animation:fadeIn 0.5s ease-out;width:100%;max-width:600px;}
 @keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
+.welcome-logo{width:80px;height:80px;border-radius:24px;object-fit:cover;box-shadow:var(--shadow-md);margin-bottom:24px;border:1px solid var(--border-light);}
+.welcome-title{font-size:32px;font-weight:800;letter-spacing:-1px;margin-bottom:12px;}
+.welcome-sub{font-size:15px;color:var(--text-muted);line-height:1.6;margin-bottom:32px;}
+.msg{display:flex;gap:16px;animation:msgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;max-width:85%;}
+@keyframes msgIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
 .msg.user{flex-direction:row-reverse;align-self:flex-end;}
 .msg.bot{align-self:flex-start;}
+.avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;overflow:hidden;}
+.msg.user .avatar{background:#f0f0f0;color:var(--text-main);border:1px solid var(--border-light);}
+.msg.bot .avatar{border:1px solid var(--border-light);background:#fff;padding:2px;}
+.msg.bot .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
+.body{display:flex;flex-direction:column;gap:6px;max-width:100%;}
 .msg.user .body{align-items:flex-end;}
+.bubble{padding:16px 20px;font-size:15px;line-height:1.6;color:var(--text-main);position:relative;}
+.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;transition:opacity 0.2s;}
+.msg.bot:hover .msg-actions{opacity:1;}
+.action-btn{background:transparent;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;transition:all 0.2s;}
+.action-btn:hover{background:var(--bg-secondary);color:var(--text-main);}
+/* Markdown inside bubble */
+.bubble p{margin-bottom:12px;}
 .bubble p:last-child{margin-bottom:0;}
+.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);}
+/* Generated Image Loader */
+.img-loader {display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,153,51,0.1);border:1px solid rgba(255,153,51,0.3);border-radius:12px;color:var(--accent);font-weight:600;font-size:14px;margin-bottom:10px;}
+.spinner {width:20px;height:20px;border:3px solid rgba(255,153,51,0.3);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;}
+@keyframes spin{to{transform:rotate(360deg);}}
+/* 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;}
+.ws-trigger-info {display: flex;align-items: center;gap: 12px;}
+.ws-trigger-icon {width: 40px;height: 40px;border-radius: 10px;background: #fff;display: flex;align-items: center;justify-content: center;font-size: 20px;box-shadow: var(--shadow-sm);border: 1px solid var(--border-light);}
+.ws-trigger-text h4 {font-size: 14px;font-weight: 600;margin-bottom: 2px;}
+.ws-trigger-text p {font-size: 12px;color: var(--text-muted);font-family: var(--font-mono);}
+.ws-btn {padding: 8px 16px;background: var(--text-main);color: #fff;border: none;border-radius: 8px;font-size: 13px;font-weight: 500;cursor: pointer;transition: transform 0.2s;}
+.ws-btn:hover {transform: scale(1.05);}
+/* Typing indicator */
+.typing{display:flex;align-items:center;gap:6px;padding:4px;}
+.typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);opacity:0.4;animation:bounce 1.4s infinite ease-in-out both;}
+.typing span:nth-child(1){animation-delay:-0.32s;}.typing span:nth-child(2){animation-delay:-0.16s;}
+@keyframes bounce{0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}}
+/* --- SCROLL TO BOTTOM BUTTON --- */
+.scroll-bottom-btn {position:absolute;bottom:100px;right:40px;width:40px;height:40px;border-radius:50%;background:var(--glass-bg);backdrop-filter:blur(10px);border:1px solid var(--border-light);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--text-main);opacity:0;pointer-events:none;transform:translateY(20px);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);z-index:20;}
+.scroll-bottom-btn.show {opacity:1;pointer-events:auto;transform:translateY(0);}
+.scroll-bottom-btn:hover {background:#fff;transform:translateY(-3px);}
+/* --- INPUT AREA (WITH INTEGRATED ATTACHMENT) --- */
+.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);}
+/* Image Preview Inside Input */
+.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-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;}
+.inline-rm:hover{background:#ff3b30;color:#fff;}
+.input-row{display:flex;align-items:flex-end;gap:12px;padding:10px 14px 10px 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:10px 0;}
 .chat-ta::placeholder{color:var(--text-muted);}
 .input-acts{display:flex;align-items:center;gap:8px;padding-bottom:6px;}
+/* Modern Attachment Button */
+.attach-btn{width:36px;height:36px;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;}
+.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;}
+/* Tiranga Gradient Send Button */
+.send-btn{width:40px;height:40px;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);position:relative;}
+.send-btn::before{content:'';position:absolute;inset:1px;background:#1d1d1f;border-radius:13px;transition:opacity 0.3s;} /* Dark inner to make icon pop, or keep gradient */
+/* Let's make the arrow black on the gradient, no dark inner needed */
+.send-btn::before{display:none;}
+.send-btn svg{width:18px;height:18px;fill:#1d1d1f;z-index:1;transition:transform 0.2s;}
+.send-btn:hover{box-shadow:0 6px 16px rgba(255,153,51,0.3);}
+.send-btn:hover svg{transform:translate(2px, -2px);}
+.send-btn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(100%);}
 .input-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-top:12px;font-weight:500;}
+/* --- WORKSPACE PANEL --- */
+.ws-hdr{padding:14px 20px;border-bottom:1px solid var(--border-light);background:#fff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
+.ws-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;}
+.ws-actions{display:flex;gap:8px;}
+.ws-icon-btn{width:32px;height:32px;border-radius:8px;background:#f5f5f7;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-main);transition:all 0.2s;font-size:13px;}
+.ws-icon-btn:hover{background:#e5e5ea;}
+.ws-close{background:transparent;color:var(--text-muted);}
+.ws-close:hover{color:#ff3b30;}
+.ws-content{flex:1;overflow-y:auto;background:#fafafa;padding:20px;}
+.ws-content pre{margin:0;padding:20px;background:#fff;border:1px solid var(--border-light);border-radius:12px;font-family:var(--font-mono);font-size:14px;line-height:1.6;overflow-x:auto;box-shadow:var(--shadow-sm);}
+/* --- RESPONSIVE MOBILE --- */
+@media(max-width:850px){
+  .sidebar{position:absolute;left:-280px;z-index:100;height:100%;transition:left 0.3s;}
+  .sidebar.show{left:0;box-shadow:var(--shadow-lg);}
+  .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{right:20px;bottom:90px;}
 }
 </style>
 </head>
 </div>
 <div class="shell">
+  <!-- Sidebar -->
+  <aside class="sidebar" id="sidebar">
     <div class="logo-area">
       <div class="logo-row">
         <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Logo" class="logo-img">
         <div class="logo-text">
           <div class="logo-name">TIRANGA</div>
+          <div class="logo-sub">Workspace Edition</div>
         </div>
       </div>
     </div>
     <div class="settings">
       <div class="brand-box">
           <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Identity">
           <h3>TIRANGA</h3>
           <p>ALWAYS BE FORWARD NEVER BE BACKWARD!!</p>
       </div>
+      <button class="clear-btn" onclick="clearMemory()">🗑️ Clear Chat Memory</button>
     </div>
   </aside>
+  <!-- Main Chat Area -->
+  <div class="main-wrapper">
+    <main class="chat-main" id="chatMain">
+      <header class="chat-hdr">
+        <div class="model-badge">
+          <div class="status-dot"></div>
+          TIRANGA Intelligence
+        </div>
+      </header>
+      <div class="messages" id="msgs" onscroll="checkScroll()">
+        <!-- Welcome Screen -->
+        <div class="welcome" id="welcome">
+          <img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png" alt="Tiranga Logo" class="welcome-logo">
+          <div class="welcome-title">नमस्ते अभय भाई!</div>
+          <div class="welcome-sub">मैं TIRANGA हूँ। आपकी सुविधा के लिए मैंने मेमोरी, वर्कस्पेस, और इमेज जनरेशन जैसे नए फीचर्स ऐड कर दिए हैं। बताइए, आज क्या बनाना है?</div>
+        </div>
       </div>
+      <!-- Scroll to bottom button -->
+      <button class="scroll-bottom-btn" id="scrollBtn" onclick="forceScrollDown()">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+      </button>
+      <!-- Input Area -->
+      <div class="input-container">
+        <div class="input-wrap">
+          <!-- Inline Image Preview -->
+          <div class="img-prev-inline" id="imgPrev">
+            <img class="inline-th" id="imgThumb" src="">
+            <div class="inline-info">
+              <div class="inline-nm" id="imgName">image.png</div>
+            </div>
+            <button class="inline-rm" onclick="removeImg()">✕</button>
           </div>
+          <div class="input-row">
+            <button class="attach-btn" title="Upload Image">
+              <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">
+            </button>
+            <textarea class="chat-ta" id="chatInput" placeholder="Message TIRANGA..." 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">TIRANGA is engineered for extreme performance. Verified by Divy Bhai.</div>
       </div>
+    </main>
+    <!-- Workspace Panel -->
+    <aside class="workspace" id="workspace">
+      <div class="ws-hdr">
+        <div class="ws-title">
+          <span id="wsLangIcon">💻</span>
+          <span id="wsTitleText">Generated Code</span>
+        </div>
+        <div class="ws-actions">
+          <button class="ws-icon-btn" onclick="copyWorkspaceCode()" title="Copy Code">📋</button>
+          <button class="ws-icon-btn ws-close" onclick="closeWorkspace()" title="Close">✕</button>
         </div>
       </div>
+      <div class="ws-content">
+        <pre><code id="wsCodeBlock" class="hljs"></code></pre>
+      </div>
+    </aside>
+  </div>
 </div>
 <script>
+// --- STATE MANAGEMENT & MEMORY ---
+const S = {
+  history: [],
+  pending: null,
+  busy: false,
+  isUserScrolling: false,
+  currentCode: "" // Holds the code currently in workspace
+};
+// Load Memory on Boot
+window.onload = () => {
+  const saved = localStorage.getItem('tiranga_chat_memory');
+  if(saved) {
+    try {
+      S.history = JSON.parse(saved);
+      if(S.history.length > 0) {
+        document.getElementById('welcome').style.display = 'none';
+        S.history.forEach(msg => {
+          if(msg.role === 'user') appendUserDOM(msg.content, msg.badge);
+          else appendBotDOM(msg.content);
+        });
+      }
+    } catch(e) { console.error("Memory load failed", e); }
+  }
+};
+function saveMemory() {
+  // Keep last 20 messages to prevent local storage overflow
+  const memToSave = S.history.slice(-20);
+  localStorage.setItem('tiranga_chat_memory', JSON.stringify(memToSave));
+}
+function clearMemory() {
+  localStorage.removeItem('tiranga_chat_memory');
+  S.history = [];
+  document.getElementById('msgs').innerHTML = '';
+  location.reload();
+}
+// --- FILE HANDLING ---
 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);
 }
 function removeImg(){S.pending=null;document.getElementById('imgPrev').classList.remove('show');document.getElementById('fileInput').value='';}
+// --- UI INTERACTIONS ---
 function handleKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMsg();}}
 function autoGrow(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,200)+'px';}
+// Scroll Handling
+function checkScroll() {
+  const m = document.getElementById('msgs');
+  // If user scrolls up more than 50px from bottom, show button
+  const isAtBottom = Math.abs((m.scrollHeight - m.scrollTop) - m.clientHeight) < 50;
+  S.isUserScrolling = !isAtBottom;
+  const btn = document.getElementById('scrollBtn');
+  if(S.isUserScrolling) btn.classList.add('show');
+  else btn.classList.remove('show');
+}
+function forceScrollDown(){
+  const m=document.getElementById('msgs');
+  m.scrollTo({top: m.scrollHeight, behavior: 'smooth'});
+  S.isUserScrolling = false;
+}
+function autoScroll() {
+  if(!S.isUserScrolling) {
+    const m=document.getElementById('msgs');
+    m.scrollTop = m.scrollHeight;
+  }
+}
+// --- COPY FUNCTIONALITY ---
+function copyText(btn, text) {
+  navigator.clipboard.writeText(text);
+  const orig = btn.innerHTML;
+  btn.innerHTML = "✓ Copied!";
+  setTimeout(() => btn.innerHTML = orig, 2000);
+}
+// --- WORKSPACE LOGIC ---
+function openWorkspace(encodedCode, lang) {
+  const code = decodeURIComponent(encodedCode);
+  S.currentCode = code;
+  document.getElementById('wsTitleText').textContent = lang ? `Generated ${lang.toUpperCase()}` : "Generated Code";
+  const codeBlock = document.getElementById('wsCodeBlock');
+  codeBlock.className = `hljs language-${lang || 'plaintext'}`;
+  codeBlock.textContent = code;
+  hljs.highlightElement(codeBlock);
+  document.getElementById('workspace').classList.add('open');
+  // On mobile, close sidebar if open
+  if(window.innerWidth <= 850) {
+      document.getElementById('sidebar').classList.remove('show');
+  }
+}
+function closeWorkspace() {
+  document.getElementById('workspace').classList.remove('open');
+}
+function copyWorkspaceCode() {
+  navigator.clipboard.writeText(S.currentCode);
+  alert("Code Copied!"); // Native toast substitute
+}
+// --- IMAGE GENERATION INTERCEPTOR ---
+function isImageRequest(text) {
+  const t = text.toLowerCase();
+  const keywords = ['image', 'photo', 'picture', 'draw', 'generate', 'create', 'तस्वीर', 'चित्र', 'फोटो', 'बनाओ', 'बना'];
+  // Very basic intent check
+  if((t.includes('create') || t.includes('generate') || t.includes('draw') || t.includes('बनाओ') || t.includes('बना')) &&
+     (t.includes('image') || t.includes('photo') || t.includes('picture') || t.includes('तस्वीर') || t.includes('चित्र') || t.includes('फोटो'))) {
+      return true;
+  }
+  return false;
+}
+async function handleImageGeneration(msg) {
+  // Add User msg
+  appendUserDOM(msg);
+  S.history.push({role: 'user', content: msg});
+  // Create Bot loader
+  const botDiv = document.createElement('div');botDiv.className='msg bot';
+  botDiv.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble"><div class="img-loader"><div class="spinner"></div> 🇮🇳 TIRANGA is creating your image...</div></div></div>`;
+  document.getElementById('msgs').appendChild(botDiv);
+  forceScrollDown();
+  // Parse logic for Pollinations
+  const models = ['flux', 'flux-realism', 'flux-anime', 'flux-3d'];
+  let selectedModel = models[0]; // default
+  const tl = msg.toLowerCase();
+  if(tl.includes('real')) selectedModel = 'flux-realism';
+  if(tl.includes('anime')) selectedModel = 'flux-anime';
+  if(tl.includes('3d')) selectedModel = 'flux-3d';
+  const seed = Math.floor(Math.random() * 100000);
+  const prompt = encodeURIComponent(msg);
+  const url = `https://image.pollinations.ai/prompt/${prompt}?seed=${seed}&model=${selectedModel}&width=1024&height=1024&nologo=true`;
+  // Create Image element
+  const img = new Image();
+  img.src = url;
+  img.onload = () => {
+    // Replace loader with image
+    botDiv.querySelector('.bubble').innerHTML = `<img src="${url}" alt="Generated Image"><p>Here is your image! (Model: ${selectedModel})</p>`;
+    // Add to history
+    const finalHTML = botDiv.querySelector('.bubble').innerHTML;
+    S.history.push({role: 'bot', content: finalHTML, isRawHTML: true});
+    saveMemory();
+    forceScrollDown();
+  };
+  img.onerror = () => {
+    botDiv.querySelector('.bubble').innerHTML = `<p>Sorry, I couldn't generate the image right now.</p>`;
+    forceScrollDown();
+  };
+}
+// --- MAIN CHAT LOGIC ---
 async function sendMsg(){
   if(S.busy)return;
   const inp=document.getElementById('chatInput');
   const msg=inp.value.trim();if(!msg && !S.pending)return;
   inp.value='';inp.style.height='auto';
+  // Image Generation Intercept
+  if(!S.pending && isImageRequest(msg)) {
+      handleImageGeneration(msg);
+      return;
+  }
   document.getElementById('sendBtn').disabled=true;
   S.busy=true;
   if(w)w.style.display='none';
   let attachments = [];
+  let badge = null;
   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});
   } else {
+      appendUserDOM(msg);
+      S.history.push({role: 'user', content: msg});
   }
   removeImg();
+  saveMemory();
+  const botDiv = document.createElement('div');botDiv.className='msg bot';
+  botDiv.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div></div>`;
+  document.getElementById('msgs').appendChild(botDiv);
+  forceScrollDown();
+  const sysPrompt = "You are TIRANGA, a state-of-the-art AI assistant developed by Divy Bhai. Always communicate in Hindi. Be extremely respectful. Use 'आप', never use 'तू' or 'तुम'. Always show immense respect to India. Answer comprehensively.";
   const payload = {
       message: msg,
       attachments: attachments,
       system_prompt: sysPrompt,
+      max_tokens: 4096,
+      temperature: 0.6
   };
   try{
                     const dataObj = JSON.parse(dataStr);
                     if (dataObj.choices && dataObj.choices[0].delta.content) {
                         accumulatedText += dataObj.choices[0].delta.content;
+                        renderBotText(botDiv, accumulatedText);
+                        autoScroll();
                     }
                 } catch (e) { }
             }
         }
     }
+    // Save to history after complete
+    S.history.push({role: 'bot', content: accumulatedText});
+    saveMemory();
   }catch(err){
+    renderBotText(botDiv,`**Error:** सर्वर से संपर्क नहीं हो पाया। कृपया दोबारा प्रयास करें।`);
   }
   S.busy=false;
   document.getElementById('sendBtn').disabled=false;
+  autoScroll();
 }
+// --- DOM INJECTION (For rendering history and live messages) ---
+function appendUserDOM(text, badgeText){
+  let bHtml = badgeText ? `<div style="font-size:11px;color:var(--accent);margin-bottom:4px;font-weight:600;">${esc(badgeText)}</div>` : '';
   const el=document.createElement('div');el.className='msg user';
   el.innerHTML=`<div class="avatar">U</div><div class="body">${bHtml}<div class="bubble">${esc(text)}</div></div>`;
+  document.getElementById('msgs').appendChild(el);
 }
+function appendBotDOM(content) {
   const el=document.createElement('div');el.className='msg bot';
+  // Check if content is raw HTML (from image generator)
+  if(content.includes('<img src="https://image.pollinations')) {
+      el.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble">${content}</div></div>`;
+  } else {
+      el.innerHTML=`<div class="avatar"><img src="https://i.ibb.co/x8m7DbMk/TIRANGA-20260523-101648-0000.png"></div><div class="body"><div class="bubble"></div></div>`;
+      renderBotText(el, content);
+  }
+  document.getElementById('msgs').appendChild(el);
 }
+// Custom Markdown rendering to extract code for Workspace
+function renderBotText(el, raw) {
   const b = el.querySelector('.bubble');
+  // Custom parsing for code blocks to convert to Workspace Triggers
+  let processText = raw;
+  const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
+  processText = processText.replace(codeBlockRegex, (match, lang, code) => {
+      const encoded = encodeURIComponent(code).replace(/'/g, "%27");
+      return `
+      <div class="ws-trigger-card">
+        <div class="ws-trigger-info">
+          <div class="ws-trigger-icon">💻</div>
+          <div class="ws-trigger-text">
+            <h4>Code Generated</h4>
+            <p>${lang || 'snippet'}</p>
+          </div>
+        </div>
+        <button class="ws-btn" onclick="openWorkspace('${encoded}', '${lang}')">View in Workspace</button>
+      </div>`;
+  });
+  const html = marked.parse(processText);
+  // Adding the copy button below the bubble text
+  const cleanRaw = raw.replace(/"/g, '&quot;').replace(/'/g, "\\'");
+  const actionsHTML = `
+    <div class="msg-actions">
+      <button class="action-btn" onclick="copyText(this, \`${cleanRaw}\`)">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+        Copy
+      </button>
+    </div>
+  `;
+  b.innerHTML = html;
+  // Append actions to the body (outside bubble)
+  let actionsDiv = el.querySelector('.msg-actions');
+  if(!actionsDiv) {
+      const body = el.querySelector('.body');
+      body.insertAdjacentHTML('beforeend', actionsHTML);
+  }
 }
 function esc(t){return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
 </script>
 </body>
+</html>