mirror of
https://github.com/ParisNeo/lollms_hub.git
synced 2026-05-04 03:01:01 -04:00
30a6d0c6f2
Update the PLATFORM_GUIDE configuration in bots.html to provide a more comprehensive title for the Telegram bot setup instructions.
297 lines
19 KiB
HTML
297 lines
19 KiB
HTML
{% extends "admin/base.html" %}
|
|
{% block title %}Bot Mode{% endblock %}
|
|
{% block header_title %}External Bot Connectors{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-8">
|
|
<div class="card-style bg-indigo-500/10 border border-indigo-500/30">
|
|
<div class="flex items-start gap-4">
|
|
<div class="p-2 bg-indigo-500 rounded-lg flex-shrink-0">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
</div>
|
|
<div class="text-sm text-gray-300">
|
|
<p class="font-bold text-white mb-2">Bot Orchestration is Active</p>
|
|
<p class="mb-4">Bridge your AI cognitive graphs to messaging apps. Connection tokens are stored using AES-256 encryption.</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2">
|
|
<div class="bg-black/30 p-3 rounded-lg border border-white/5">
|
|
<h4 class="text-[10px] font-black text-indigo-400 uppercase tracking-widest mb-1">How it works</h4>
|
|
<p class="text-[11px] leading-relaxed">Incoming messages trigger the <strong>Target Workflow</strong>. The Hub resolves the model or graph, executes the request, and sends the final answer back to the platform.</p>
|
|
</div>
|
|
<div class="bg-black/30 p-3 rounded-lg border border-white/5">
|
|
<h4 class="text-[10px] font-black text-amber-400 uppercase tracking-widest mb-1">Telemetry</h4>
|
|
<p class="text-[11px] leading-relaxed">Bot requests appear in the <b>Live System Flow</b> with a "BOT" badge. You can monitor latency and speed as your bots interact with users.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Bot -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<div class="card-style h-full">
|
|
<h2 class="card-header text-lg font-bold mb-6">Deploy New Connector</h2>
|
|
<form action="{{ url_for('admin_add_bot') }}" method="post" class="space-y-6" autocomplete="off">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1 px-1">Friendly Name</label>
|
|
<input type="text" name="name" placeholder="e.g. Support-Bot" required
|
|
class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 focus:border-indigo-500 outline-none transition-colors"
|
|
autocomplete="off">
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1 px-1">Messaging Platform</label>
|
|
<select name="platform" id="platform-select" onchange="updateBotView()"
|
|
class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 text-indigo-400 font-bold outline-none">
|
|
<option value="telegram">Telegram</option>
|
|
<option value="discord">Discord</option>
|
|
<option value="slack">Slack (Socket Mode)</option>
|
|
<option value="whatsapp">WhatsApp (Cloud API)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1 px-1">Primary Access Token</label>
|
|
<input type="password" name="token" placeholder="Paste platform token..." required
|
|
class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 focus:border-indigo-500 outline-none transition-colors"
|
|
autocomplete="new-password">
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-black text-gray-500 uppercase tracking-widest mb-1 px-1">Target Workflow (Brains)</label>
|
|
<select name="target_workflow" class="w-full p-2.5 rounded-lg bg-black/40 border border-white/10 outline-none">
|
|
<option value="auto">auto (Intelligent Routing)</option>
|
|
{% for w in available_workflows %}
|
|
<option value="{{ w }}">{{ w }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="extra-fields" class="grid grid-cols-1 md:grid-cols-2 gap-6 hidden pt-4 border-t border-white/5">
|
|
<div id="slack-fields" class="hidden">
|
|
<label class="block text-[10px] font-black text-purple-400 uppercase tracking-widest mb-1 px-1">Slack App-Level Token (xapp-...)</label>
|
|
<input type="password" name="app_token" placeholder="Required for Socket Mode" class="w-full p-2.5 rounded-lg bg-black/40 border border-purple-500/20 outline-none" autocomplete="new-password">
|
|
</div>
|
|
<div id="whatsapp-fields" class="hidden">
|
|
<label class="block text-[10px] font-black text-green-400 uppercase tracking-widest mb-1 px-1">Phone Number ID</label>
|
|
<input type="text" name="phone_id" placeholder="From Meta Dev Portal" class="w-full p-2.5 rounded-lg bg-black/40 border border-green-500/20 outline-none" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-4">
|
|
<button type="submit" class="bg-indigo-600 hover:bg-indigo-500 px-10 py-3 rounded-xl font-black text-xs uppercase tracking-widest text-white shadow-lg transition-all transform active:scale-95">Deploy Connector</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documentation Card (Dynamic) -->
|
|
<div class="lg:col-span-1">
|
|
<div class="card-style bg-black/40 border-indigo-500/20 h-full">
|
|
<h2 id="help-title" class="text-xs font-black text-indigo-400 uppercase tracking-widest mb-4 border-b border-white/10 pb-2">Configuration Guide</h2>
|
|
<div id="help-content" class="text-xs text-gray-400 space-y-4 leading-relaxed overflow-y-auto custom-scrollbar h-[350px] pr-2">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const PLATFORM_GUIDE = {
|
|
telegram: {
|
|
title: "TELEGRAM BOT MASTERCLASS",
|
|
content: `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="text-white font-bold mb-2">🔑 Step 1: Create your Identity</h4>
|
|
<p>1. Search for <a href="https://t.me/botfather" class="text-indigo-400 underline" target="_blank">@BotFather</a> in your Telegram app.</p>
|
|
<p>2. Start a chat and send <b>/newbot</b>.</p>
|
|
<p>3. Follow the prompts to set a name and a username ending in 'bot'.</p>
|
|
<p>4. Copy the <b>HTTP API Token</b> provided.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h4 class="text-white font-bold mb-2">⚙️ Step 2: Critical Settings</h4>
|
|
<p>1. To use the bot in groups, send <b>/setprivacy</b> to BotFather.</p>
|
|
<p>2. Select your bot and set it to <b>Disabled</b>. This allows LoLLMs to "hear" every message.</p>
|
|
<p>3. Send <b>/setjoingroups</b> and ensure it is <b>Enabled</b>.</p>
|
|
</section>
|
|
|
|
<section class="bg-indigo-500/10 p-3 rounded-lg border border-indigo-500/30">
|
|
<h4 class="text-white font-bold mb-2">📱 Step 3: Install & Chat</h4>
|
|
<p>Download the official app to chat with your AI on the go:</p>
|
|
<div class="flex gap-4 mt-2">
|
|
<a href="https://apps.apple.com/app/telegram-messenger/id682253849" class="text-xs text-indigo-300 underline" target="_blank">iOS App Store</a>
|
|
<a href="https://play.google.com/store/apps/details?id=org.telegram.messenger" class="text-xs text-indigo-300 underline" target="_blank">Google Play</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
`
|
|
},
|
|
discord: {
|
|
title: "DISCORD ARCHITECT GUIDE",
|
|
content: `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="text-white font-bold mb-2">🔑 Step 1: Gateway Portal</h4>
|
|
<p>1. Go to the <a href="https://discord.com/developers/applications" class="text-indigo-400 underline" target="_blank">Discord Developer Portal</a>.</p>
|
|
<p>2. Click <b>New Application</b> and give it a name.</p>
|
|
<p>3. Navigate to the <b>Bot</b> tab in the sidebar.</p>
|
|
<p>4. Click <b>Reset Token</b> to reveal and copy your <b>Bot Token</b>.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h4 class="text-white font-bold mb-2">⚙️ Step 2: Permissions (Vital)</h4>
|
|
<p>1. Scroll down in the Bot tab to <b>Privileged Gateway Intents</b>.</p>
|
|
<p>2. Enable <b>MESSAGE CONTENT INTENT</b>. Without this, the AI will be deaf.</p>
|
|
<p>3. Go to <b>OAuth2 → URL Generator</b>.</p>
|
|
<p>4. Check <b>bot</b> and <b>Administrator</b> (or specific read/write permissions).</p>
|
|
<p>5. Copy the generated URL and paste it into your browser to invite the bot to your server.</p>
|
|
</section>
|
|
|
|
<section class="bg-indigo-500/10 p-3 rounded-lg border border-indigo-500/30">
|
|
<h4 class="text-white font-bold mb-2">📱 Step 3: Mobile Experience</h4>
|
|
<p>Add your AI to your pocket for instant logic support:</p>
|
|
<div class="flex gap-4 mt-2">
|
|
<a href="https://apps.apple.com/app/discord-chat-talk-hangout/id985746746" class="text-xs text-indigo-300 underline" target="_blank">iOS App Store</a>
|
|
<a href="https://play.google.com/store/apps/details?id=com.discord" class="text-xs text-indigo-300 underline" target="_blank">Google Play</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
`
|
|
},
|
|
slack: {
|
|
title: "SLACK ENTERPRISE DEPLOYMENT",
|
|
content: `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="text-white font-bold mb-2">🔑 Step 1: App Creation</h4>
|
|
<p>1. Open the <a href="https://api.slack.com/apps" class="text-indigo-400 underline" target="_blank">Slack API Dashboard</a>.</p>
|
|
<p>2. Click <b>Create New App</b> → <b>From Scratch</b>.</p>
|
|
<p>3. Go to <b>Settings → Basic Information</b>.</p>
|
|
<p>4. Scroll to <b>App-Level Tokens</b>, create one with <b>connections:write</b> scope, and paste it into "App-Level Token".</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h4 class="text-white font-bold mb-2">⚙️ Step 2: Socket Mode & Scopes</h4>
|
|
<p>1. Go to <b>Settings → Socket Mode</b> and enable it.</p>
|
|
<p>2. Go to <b>Features → OAuth & Permissions</b>.</p>
|
|
<p>3. Add <b>chat:write</b> and <b>app_mentions:read</b> to Bot Token Scopes.</p>
|
|
<p>4. Scroll up and <b>Install to Workspace</b> to get your <b>Bot User OAuth Token</b> (xoxb-...).</p>
|
|
<p>5. Go to <b>Features → Event Subscriptions</b>, enable, and add <b>message.channels</b> under bot events.</p>
|
|
</section>
|
|
|
|
<section class="bg-indigo-500/10 p-3 rounded-lg border border-indigo-500/30">
|
|
<h4 class="text-white font-bold mb-2">📱 Step 3: Work Anywhere</h4>
|
|
<p>Install Slack to access your workflows from mobile:</p>
|
|
<div class="flex gap-4 mt-2">
|
|
<a href="https://apps.apple.com/app/slack/id618783545" class="text-xs text-indigo-300 underline" target="_blank">iOS App Store</a>
|
|
<a href="https://play.google.com/store/apps/details?id=com.Slack" class="text-xs text-indigo-300 underline" target="_blank">Google Play</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
`
|
|
},
|
|
whatsapp: {
|
|
title: "WHATSAPP CLOUD SETUP",
|
|
content: `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="text-white font-bold mb-2">🔑 Step 1: Meta Portal</h4>
|
|
<p>1. Register at <a href="https://developers.facebook.com" class="text-indigo-400 underline" target="_blank">Meta for Developers</a>.</p>
|
|
<p>2. Create a <b>Business</b> App Type.</p>
|
|
<p>3. Add the <b>WhatsApp</b> product to your app.</p>
|
|
<p>4. Go to <b>Getting Started</b> to find your <b>Phone Number ID</b> and <b>Temporary Access Token</b>.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h4 class="text-white font-bold mb-2">⚠️ Step 2: Webhook Connectivity</h4>
|
|
<p>1. WhatsApp requires an <b>HTTPS</b> callback URL.</p>
|
|
<p>2. If you are behind a NAT, use a tool like <b>ngrok</b> or <b>Cloudflare Tunnel</b> to expose your LoLLMs Hub port (8080).</p>
|
|
<p>3. Point Meta's Webhook URL to: <code>https://your-public-url.com/api/bot/whatsapp/webhook</code></p>
|
|
</section>
|
|
|
|
<section class="bg-indigo-500/10 p-3 rounded-lg border border-indigo-500/30">
|
|
<h4 class="text-white font-bold mb-2">📱 Step 3: Mobile Access</h4>
|
|
<p>Use the standard WhatsApp messenger to talk to your bot:</p>
|
|
<div class="flex gap-4 mt-2">
|
|
<a href="https://apps.apple.com/app/whatsapp-messenger/id310633997" class="text-xs text-indigo-300 underline" target="_blank">iOS App Store</a>
|
|
<a href="https://play.google.com/store/apps/details?id=com.whatsapp" class="text-xs text-indigo-300 underline" target="_blank">Google Play</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
`
|
|
}
|
|
};
|
|
|
|
function updateBotView() {
|
|
const platform = document.getElementById('platform-select').value;
|
|
const extra = document.getElementById('extra-fields');
|
|
const slack = document.getElementById('slack-fields');
|
|
const whatsapp = document.getElementById('whatsapp-fields');
|
|
|
|
const helpTitle = document.getElementById('help-title');
|
|
const helpContent = document.getElementById('help-content');
|
|
|
|
// Toggle form fields
|
|
extra.classList.add('hidden');
|
|
slack.classList.add('hidden');
|
|
whatsapp.classList.add('hidden');
|
|
|
|
if (platform === 'slack') { extra.classList.remove('hidden'); slack.classList.remove('hidden'); }
|
|
if (platform === 'whatsapp') { extra.classList.remove('hidden'); whatsapp.classList.remove('hidden'); }
|
|
|
|
// Toggle help
|
|
const guide = PLATFORM_GUIDE[platform];
|
|
helpTitle.innerText = guide.title;
|
|
helpContent.innerHTML = guide.content;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', updateBotView);
|
|
</script>
|
|
|
|
<!-- Bot List -->
|
|
<div class="card-style">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="text-gray-500 text-xs uppercase border-b border-white/10">
|
|
<th class="p-3">Bot Name</th>
|
|
<th class="p-3">Platform</th>
|
|
<th class="p-3">Workflow Target</th>
|
|
<th class="p-3">Status</th>
|
|
<th class="p-3 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
{% for b in bots %}
|
|
<tr>
|
|
<td class="p-3 font-bold">{{ b.name }}</td>
|
|
<td class="p-3 text-xs uppercase font-black text-indigo-400">{{ b.platform }}</td>
|
|
<td class="p-3 font-mono text-xs">{{ b.target_workflow }}</td>
|
|
<td class="p-3">
|
|
{% if b.is_active %}
|
|
<span class="text-green-400 font-bold animate-pulse">● RUNNING</span>
|
|
{% else %}
|
|
<span class="text-gray-500">○ STOPPED</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="p-3 text-right">
|
|
<form action="{{ url_for('admin_toggle_bot', bot_id=b.id) }}" method="post">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
<button type="submit" class="text-xs font-bold uppercase {{ 'text-red-400' if b.is_active else 'text-green-400' }}">
|
|
{{ 'Stop' if b.is_active else 'Start' }}
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |