Update app/static/index.html

app/static/index.html

@@ -346,6 +346,8 @@ button{font-family:inherit}
     <button class="sfbtn" onclick="toggleTheme()">🌓 Toggle Theme</button>
     <button class="sfbtn" onclick="clearAllAgents()">🗑️ Clear Agents</button>
     <button class="sfbtn" onclick="clearAllChats()">🗑️ Clear All Chats</button>
+    <button class="sfbtn" onclick="openTelegram()">📱 Telegram Bot</button>
+    <button class="sfbtn" onclick="openPkgInstaller()">📦 Install Package</button>
   </div>
 </aside>
 
@@ -453,6 +455,56 @@ button{font-family:inherit}
   </div>
 </div>
 
+<!-- ── Telegram Modal ────────────────────────────────────── -->
+<div class="overlay" id="telegram-modal" onclick="closeModalOutside(event,'telegram-modal')">
+  <div class="modal">
+    <h2>📱 Telegram Bot Setup</h2>
+    <div id="tg-status-bar" style="padding:10px 12px;border-radius:6px;font-size:12.5px;margin-bottom:14px;background:var(--bg3);border:1px solid var(--border)">
+      Checking status…
+    </div>
+    <div class="fg">
+      <label>Bot Token</label>
+      <input type="password" id="tg-token" placeholder="1234567890:ABCdefGHI..." />
+      <div class="hint">Get from <a href="https://t.me/BotFather" target="_blank" style="color:var(--acc)">@BotFather</a> on Telegram → /newbot</div>
+    </div>
+    <div class="fg">
+      <label>Your HuggingFace Space URL</label>
+      <input type="text" id="tg-base-url" placeholder="https://YOUR-USERNAME-praisonchat.hf.space" />
+      <div class="hint">This is where the webhook will point. Must be HTTPS.</div>
+    </div>
+    <div style="background:var(--bg3);border-radius:8px;padding:12px;font-size:12px;color:var(--txt2);margin-bottom:14px;line-height:1.6">
+      <strong style="color:var(--txt1)">How it works:</strong><br>
+      1. Create a bot via @BotFather → /newbot<br>
+      2. Paste the token above<br>
+      3. Enter your Space URL<br>
+      4. Click Connect — the webhook is auto-registered<br>
+      5. Open your bot in Telegram and chat!
+    </div>
+    <div class="modal-actions">
+      <button class="btn-g" onclick="disconnectTelegram()" id="tg-disconnect-btn" style="display:none;color:var(--red)">Disconnect</button>
+      <button class="btn-g" onclick="closeModal('telegram-modal')">Close</button>
+      <button class="btn-p" onclick="connectTelegram()">Connect Bot</button>
+    </div>
+  </div>
+</div>
+
+<!-- ── Package Installer Modal ────────────────────────────── -->
+<div class="overlay" id="pkg-modal" onclick="closeModalOutside(event,'pkg-modal')">
+  <div class="modal">
+    <h2>📦 Install Python Package</h2>
+    <div class="fg">
+      <label>Package Name(s)</label>
+      <input type="text" id="pkg-input" placeholder="e.g. pandas numpy yfinance" />
+      <div class="hint">Space-separated. Packages are installed into the agent environment.</div>
+    </div>
+    <div id="pkg-result" style="display:none;padding:10px;border-radius:6px;font-size:12.5px;margin-top:8px;font-family:monospace"></div>
+    <div class="modal-actions">
+      <button class="btn-g" onclick="closeModal('pkg-modal')">Close</button>
+      <button class="btn-p" onclick="installPackage()">Install</button>
+    </div>
+  </div>
+</div>
+
 <!-- ── Tool Detail Modal ─────────────────────────────────── -->
 <div class="overlay" id="tool-modal" onclick="closeModalOutside(event,'tool-modal')">
   <div class="modal">
@@ -1063,6 +1115,83 @@ function autoResize(el){el.style.height='auto';el.style.height=Math.min(el.scrol
 function useSuggestion(el){const t=el.querySelector('strong').nextSibling?.textContent?.trim()||el.textContent.trim();sendMessage(t)}
 function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2600)}
 
+// ════════════════════════════════════════════════════════
+//  TELEGRAM
+// ════════════════════════════════════════════════════════
+async function openTelegram(){
+  document.getElementById('telegram-modal').classList.add('open');
+  const bar = document.getElementById('tg-status-bar');
+  bar.textContent = 'Checking status…';
+  try{
+    const r = await fetch('/api/telegram/status');
+    const d = await r.json();
+    if(d.connected && d.bot && d.bot.username){
+      bar.style.background='rgba(79,209,160,.12)';bar.style.borderColor='var(--green)';
+      bar.innerHTML=`✅ Connected as <strong>@${d.bot.username}</strong> (${d.bot.first_name})<br>Webhook: ${d.webhook?.url||'not set'}`;
+      document.getElementById('tg-disconnect-btn').style.display='';
+    } else {
+      bar.style.background='var(--bg3)';bar.style.borderColor='var(--border)';
+      bar.textContent='Not connected. Enter your bot token below.';
+      document.getElementById('tg-disconnect-btn').style.display='none';
+    }
+  }catch(e){bar.textContent='Could not check status: '+e.message}
+}
+
+async function connectTelegram(){
+  const token = document.getElementById('tg-token').value.trim();
+  const baseUrl = document.getElementById('tg-base-url').value.trim();
+  const bar = document.getElementById('tg-status-bar');
+  if(!token){showToast('⚠️ Enter your bot token');return}
+  bar.textContent='Connecting…';
+  try{
+    const r = await fetch('/api/telegram/setup',{method:'POST',
+      headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({token,base_url:baseUrl})});
+    const d = await r.json();
+    if(d.ok){
+      bar.style.background='rgba(79,209,160,.12)';bar.style.borderColor='var(--green)';
+      bar.innerHTML=`✅ Connected as <strong>@${d.bot?.username}</strong>! <br>Open your bot in Telegram and start chatting.`;
+      document.getElementById('tg-disconnect-btn').style.display='';
+      showToast('✅ Telegram bot connected!');
+    } else {
+      bar.style.background='rgba(240,88,88,.1)';bar.style.borderColor='var(--red)';
+      bar.textContent='❌ Failed: '+(d.detail||JSON.stringify(d));
+    }
+  }catch(e){bar.textContent='Error: '+e.message}
+}
+
+async function disconnectTelegram(){
+  if(!confirm('Disconnect Telegram bot?'))return;
+  await fetch('/api/telegram/disconnect',{method:'DELETE'});
+  showToast('Telegram bot disconnected');
+  openTelegram();
+}
+
+// ════════════════════════════════════════════════════════
+//  PACKAGE INSTALLER
+// ════════════════════════════════════════════════════════
+function openPkgInstaller(){document.getElementById('pkg-modal').classList.add('open')}
+
+async function installPackage(){
+  const inp = document.getElementById('pkg-input').value.trim();
+  if(!inp){showToast('Enter package name(s)');return}
+  const packages = inp.split(/\s+/);
+  const res = document.getElementById('pkg-result');
+  res.style.display='block';res.style.background='var(--bg3)';
+  res.textContent='Installing '+packages.join(', ')+'…';
+  try{
+    const r = await fetch('/api/install-package',{method:'POST',
+      headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({packages})});
+    const d = await r.json();
+    res.style.background = d.ok?'rgba(79,209,160,.12)':'rgba(240,88,88,.1)';
+    res.style.borderColor = d.ok?'var(--green)':'var(--red)';
+    res.style.border = '1px solid';
+    res.textContent = (d.ok?'✅ ':'❌ ') + d.message;
+    if(d.ok){showToast('✅ Package installed!');addActivity({type:'tool_result',icon:'📦',html:`Installed: <code>${packages.join(', ')}</code>`})}
+  }catch(e){res.textContent='Error: '+e.message}
+}
+
 // ════════════════════════════════════════════════════════
 //  BOOT
 // ════════════════════════════════════════════════════════