Spaces:

Renderlib-dev
/

CodeVed

Running

File size: 25,462 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧬 Aura Gen 2.0</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>
/* आपका पूरा CSS यहाँ है (बिना किसी बदलाव के) */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg-color: #ffffff; --bg-secondary: #f5f5f7; --text-main: #1d1d1f; --text-muted: #86868b;
  --accent: #0071e3; --accent-hover: #0077ed; --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;}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background: #fafafa;}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.4;animation:drift 25s ease-in-out infinite alternate;}
.orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,113,227,0.15),transparent 70%);top:-150px;left:-100px;}
.orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(52,199,89,0.12),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);}
.logo-text{line-height:1.2;}
.logo-name{font-family:var(--font-sans);font-weight:700;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;}
.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;}
.field{margin-bottom:20px;}
.field-lbl{font-size:12px;font-weight:500;color:var(--text-main);margin-bottom:8px;display:block;}
.field textarea{width:100%;background:#ffffff;border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-main);font-family:var(--font-sans);font-size:13px;line-height:1.5;padding:12px;resize:none;outline:none;transition:border-color 0.2s, box-shadow 0.2s;height:80px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.02);}
.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,113,227,0.15);}
.sl-wrap{margin-bottom:16px;}
.sl-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.sl-title{font-size:12px;font-weight:500;color:var(--text-main);}
.sl-val{font-size:11px;font-weight:500;font-family:var(--font-mono);background:#ffffff;color:var(--text-muted);padding:2px 8px;border-radius:6px;border:1px solid var(--border-light);}
input[type=range]{width:100%;height:4px;appearance:none;background:rgba(0,0,0,0.1);border-radius:2px;outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,0.2);border:1px solid var(--border-light);cursor:pointer;transition:transform 0.1s;}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.1);}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.chip{font-size:11px;font-weight:500;padding:4px 10px;border-radius:14px;background:#ffffff;border:1px solid var(--border-light);color:var(--text-muted);cursor:pointer;transition:all 0.2s;}
.chip:hover{background:var(--accent);color:#ffffff;border-color:var(--accent);}
.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:10px;}
.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;}
.welcome-title{font-family:var(--font-sans);font-size:32px;font-weight:700;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(0,113,227,0.3);}
.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);}
.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(0,113,227,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(0,113,227,0.1);}
.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>
<body>

<div class="bg">
  <div class="orb orb1"></div>
  <div class="orb orb2"></div>
</div>

<div class="shell">
  <aside class="sidebar">
    <div class="logo-area">
      <div class="logo-row">
        <img src="https://i.ibb.co/5hkfdYHz/Clean-Elegant-Typography-Brand-Logo-20260519-212839-0000.png" alt="Aura Logo" class="logo-img">
        <div class="logo-text">
          <div class="logo-name">Aura Gen 2.0</div>
          <div class="logo-sub">Advanced AI System</div>
        </div>
      </div>
    </div>

    <div class="settings">
      <div class="section-lbl">Preferences</div>
      
      <div class="field">
        <span class="field-lbl">System Prompt (Instructions)</span>
        <div class="presets">
          <span class="chip" onclick="setPreset('general')">General</span>
          <span class="chip" onclick="setPreset('code')">Code</span>
          <span class="chip" onclick="setPreset('math')">Math</span>
        </div>
        <textarea id="sysPrompt">You are Aura Gen 2.0, 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.</textarea>
      </div>

      <div class="sl-wrap">
        <div class="sl-meta"><span class="sl-title">Max Tokens</span><span class="sl-val" id="tokVal">4096</span></div>
        <input type="range" id="tokSl" min="64" max="16384" value="4096" step="64" oninput="document.getElementById('tokVal').textContent=this.value">
      </div>

      <div class="sl-wrap">
        <div class="sl-meta"><span class="sl-title">Temperature</span><span class="sl-val" id="tempVal">0.60</span></div>
        <input type="range" id="tempSl" min="0" max="1.5" value="0.6" step="0.05" oninput="document.getElementById('tempVal').textContent=parseFloat(this.value).toFixed(2)">
      </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>
        Aura Gen 2.0 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/5hkfdYHz/Clean-Elegant-Typography-Brand-Logo-20260519-212839-0000.png" alt="Aura Logo" class="welcome-logo">
        <div class="welcome-title">How can I help you today?</div>
        <div class="welcome-sub">I am Aura Gen 2.0. 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 Aura Gen 2.0..." 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">Aura Gen 2.0 can make mistakes. Consider verifying critical information.</div>
    </div>
  </main>
</div>

<script>
const S={history:[],pending:null,busy:false,
  presets:{
    general:'You are Aura Gen 2.0, 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.',
    code:'You are an expert software engineer. Write clean, efficient, well-commented code. Explain your approach before writing. Use modern best practices.',
    math:'You are a world-class mathematician. Break problems step-by-step. Show full working. Use LaTeX where helpful.'
  }
};

function setPreset(k){document.getElementById('sysPrompt').value=S.presets[k];}

// मल्टीमोडल फ़ाइल हैंडलिंग
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';}

// 🌐 नई API कॉलिंग लॉजिक (Flask Backend के लिए)
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;
  
  const w=document.getElementById('welcome');
  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 = document.getElementById('sysPrompt').value.trim();
  const maxTokens = parseInt(document.getElementById('tokSl').value);
  const temp = parseFloat(document.getElementById('tempSl').value);

  const payload = {
      message: msg,
      attachments: attachments,
      system_prompt: sysPrompt,
      max_tokens: maxTokens,
      temperature: temp
  };

  try{
    const res = await fetch('/api/chat', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload)
    });

    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let accumulatedText = "";

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        const chunk = decoder.decode(value, {stream: true});
        const lines = chunk.split('\n');
        
        for (let line of lines) {
            if (line.startsWith('data: ')) {
                const dataStr = line.substring(6);
                if (dataStr.trim() === '[DONE]') continue;
                try {
                    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/5hkfdYHz/Clean-Elegant-Typography-Brand-Logo-20260519-212839-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);
}

(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 highlighted=hljs.highlight(code.text||code,{language}).value;
    const escaped=(code.text||code).replace(/'/g,"\\'").replace(/\\n/g,"\\\\n");
    return `<div class="code-wrap"><div class="code-header"><span class="code-lang-tag">${language}</span><button class="copy-btn" onclick="navigator.clipboard.writeText('${escaped}')">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>