@intranefr/superbackend 1.5.2 → 1.5.3

package/views/admin-scripts.ejs

@@ -549,11 +549,44 @@ const recentRuns = await ScriptRun.find()
         </div>
 
         <div class="mt-4 bg-white border border-gray-200 rounded-lg">
-          <div class="p-3 border-b border-gray-200 flex items-center justify-between">
-            <div class="text-sm font-medium text-gray-800">Output</div>
-            <button id="btn-clear-output" class="text-sm text-gray-600 hover:underline">Clear</button>
+          <div class="p-3 border-b border-gray-200">
+            <div class="flex items-center justify-between">
+              <nav class="flex space-x-4">
+                <button class="output-tab active" data-tab="output">Output</button>
+                <button class="output-tab" data-tab="full-logs">Full Console Logs</button>
+              </nav>
+              <div class="flex items-center gap-2">
+                <button id="btn-download-logs" class="text-sm text-gray-600 hover:underline">Download</button>
+                <button id="btn-clear-output" class="text-sm text-gray-600 hover:underline">Clear</button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Output Tab (JSON Result) -->
+          <div id="output-tab-content" class="output-tab-content">
+            <pre id="output" class="p-3 text-xs font-mono whitespace-pre-wrap max-h-[40vh] overflow-auto"></pre>
+          </div>
+          
+          <!-- Full Console Logs Tab -->
+          <div id="full-logs-tab-content" class="output-tab-content hidden">
+            <!-- Search Bar -->
+            <div class="p-3 border-b border-gray-200">
+              <div class="flex items-center gap-2">
+                <input type="text" id="log-search" placeholder="Search logs..." class="flex-1 px-2 py-1 border rounded text-sm">
+                <select id="log-filter" class="px-2 py-1 border rounded text-sm">
+                  <option value="all">All Logs</option>
+                  <option value="stdout">Stdout</option>
+                  <option value="stderr">Stderr</option>
+                </select>
+                <button id="btn-auto-scroll" class="px-2 py-1 bg-gray-100 rounded text-sm">Auto-scroll</button>
+              </div>
+            </div>
+            
+            <!-- Full Logs Display -->
+            <div class="relative">
+              <pre id="full-logs-content" class="p-3 text-xs font-mono whitespace-pre-wrap" style="height: 60vh; overflow: auto;"></pre>
+            </div>
           </div>
-          <pre id="output" class="p-3 text-xs font-mono whitespace-pre-wrap max-h-[40vh] overflow-auto"></pre>
         </div>
       </div>
     </div>
@@ -571,6 +604,8 @@ const recentRuns = await ScriptRun.find()
       es: null,
     };
 
+    let currentRunId = null;
+
     function qs(id) {
       return document.getElementById(id);
     }
@@ -772,8 +807,12 @@ const recentRuns = await ScriptRun.find()
           <div class="text-xs text-gray-500 font-mono">${String(r._id || '').slice(0, 10)} · ${String(r.createdAt || '').replace(/</g,'&lt;')}</div>
         `;
         btn.addEventListener('click', () => {
+          currentRunId = r._id; // Set the current run ID when clicking on a previous run
           setOutput('');
           if (r.outputTail) setOutput(r.outputTail, true);
+          
+          // Load programmatic output for the selected run
+          loadProgrammaticOutput(r._id);
         });
         list.appendChild(btn);
       });
@@ -894,8 +933,16 @@ const recentRuns = await ScriptRun.find()
 
       setOutput('');
       const res = await api('/api/admin/scripts/' + encodeURIComponent(state.selectedId) + '/run', { method: 'POST' });
+      currentRunId = res.runId; // Set the current run ID
       startSse(res.runId);
       await loadRuns();
+      
+      // Load programmatic output after script starts
+      setTimeout(() => {
+        if (currentRunId) {
+          loadProgrammaticOutput(currentRunId);
+        }
+      }, 1000); // Wait a bit for the script to start producing output
     }
 
     qs('btn-refresh').addEventListener('click', loadScripts);
@@ -1080,6 +1127,176 @@ const recentRuns = await ScriptRun.find()
       });
     }
 
+    // Tab switching functionality
+    function switchOutputTab(tabName) {
+      // Hide all tab contents
+      document.querySelectorAll('.output-tab-content').forEach(content => {
+        content.classList.add('hidden');
+      });
+      
+      // Remove active class from all tabs
+      document.querySelectorAll('.output-tab').forEach(tab => {
+        tab.classList.remove('active', 'border-blue-500', 'text-blue-600');
+        tab.classList.add('border-transparent', 'text-gray-500');
+      });
+      
+      // Show selected tab content
+      document.getElementById(`${tabName}-tab-content`).classList.remove('hidden');
+      
+      // Activate selected tab
+      const activeTab = document.querySelector(`[data-tab="${tabName}"]`);
+      activeTab.classList.add('active', 'border-blue-500', 'text-blue-600');
+      activeTab.classList.remove('border-transparent', 'text-gray-500');
+      
+      // Load full logs if switching to full-logs tab
+      if (tabName === 'full-logs' && currentRunId) {
+        loadFullLogs(currentRunId);
+      }
+      
+      // Load programmatic output if switching to output tab
+      if (tabName === 'output' && currentRunId) {
+        loadProgrammaticOutput(currentRunId);
+      }
+    }
+
+    // Load programmatic output from API
+    async function loadProgrammaticOutput(runId) {
+      try {
+        const response = await fetch(`${window.BASE_URL}/api/admin/scripts/runs/${runId}/programmatic-output`);
+        const data = await response.json();
+        
+        displayProgrammaticOutput(data);
+      } catch (error) {
+        console.error('Failed to load programmatic output:', error);
+        document.getElementById('output').textContent = 'Error loading programmatic output';
+      }
+    }
+
+    // Display programmatic output with smart formatting
+    function displayProgrammaticOutput(data) {
+      const outputElement = document.getElementById('output');
+      
+      if (data.isJson && data.parsedResult) {
+        // Format JSON for clean display
+        outputElement.textContent = JSON.stringify(data.parsedResult, null, 2);
+        outputElement.className = 'p-3 text-xs font-mono whitespace-pre-wrap max-h-[40vh] overflow-auto json-output';
+      } else {
+        // Display as plain text
+        outputElement.textContent = data.programmaticOutput;
+        outputElement.className = 'p-3 text-xs font-mono whitespace-pre-wrap max-h-[40vh] overflow-auto';
+      }
+    }
+
+    // Load full logs from API
+    async function loadFullLogs(runId) {
+      try {
+        const response = await fetch(`${window.BASE_URL}/api/admin/scripts/runs/${runId}/full-output`);
+        const data = await response.json();
+        
+        if (data.fullOutput) {
+          displayFullLogs(data.fullOutput);
+        } else {
+          document.getElementById('full-logs-content').textContent = 'No full logs available';
+        }
+      } catch (error) {
+        console.error('Failed to load full logs:', error);
+        document.getElementById('full-logs-content').textContent = 'Error loading full logs';
+      }
+    }
+
+    // Display full logs with filtering
+    function displayFullLogs(logs) {
+      const content = document.getElementById('full-logs-content');
+      const searchTerm = document.getElementById('log-search').value.toLowerCase();
+      const filterType = document.getElementById('log-filter').value;
+      
+      let filteredLogs = logs;
+      
+      // Apply search filter
+      if (searchTerm) {
+        filteredLogs = logs.split('\n').filter(line => 
+          line.toLowerCase().includes(searchTerm)
+        ).join('\n');
+      }
+      
+      // Apply type filter
+      if (filterType !== 'all') {
+        const lines = filteredLogs.split('\n');
+        filteredLogs = lines.filter(line => {
+          // Simple heuristic to determine log type
+          if (filterType === 'stderr') {
+            return line.includes('❌') || line.includes('🚨') || line.includes('Error') || line.includes('error');
+          }
+          return true; // stdout
+        }).join('\n');
+      }
+      
+      content.textContent = filteredLogs || 'No logs match the current filters';
+      
+      // Auto-scroll if enabled
+      if (document.getElementById('btn-auto-scroll').classList.contains('bg-blue-500')) {
+        content.scrollTop = content.scrollHeight;
+      }
+    }
+
+    // Download logs functionality
+    async function downloadLogs() {
+      if (!currentRunId) {
+        alert('No script run selected');
+        return;
+      }
+      
+      try {
+        const response = await fetch(`${window.BASE_URL}/api/admin/scripts/runs/${currentRunId}/download`);
+        const blob = await response.blob();
+        
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = response.headers.get('Content-Disposition')?.split('filename=')[1]?.replace(/"/g, '') || 'script-output.txt';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+      } catch (error) {
+        console.error('Failed to download logs:', error);
+        alert('Failed to download logs');
+      }
+    }
+
+    // Add event listeners for new functionality
+    document.querySelectorAll('.output-tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        switchOutputTab(tab.dataset.tab);
+      });
+    });
+
+    document.getElementById('btn-download-logs').addEventListener('click', downloadLogs);
+
+    document.getElementById('log-search').addEventListener('input', () => {
+      if (document.getElementById('full-logs-tab-content').classList.contains('hidden') === false) {
+        const content = document.getElementById('full-logs-content');
+        const currentLogs = content.dataset.originalLogs || content.textContent;
+        content.dataset.originalLogs = currentLogs;
+        displayFullLogs(currentLogs);
+      }
+    });
+
+    document.getElementById('log-filter').addEventListener('change', () => {
+      if (document.getElementById('full-logs-tab-content').classList.contains('hidden') === false) {
+        const content = document.getElementById('full-logs-content');
+        const currentLogs = content.dataset.originalLogs || content.textContent;
+        content.dataset.originalLogs = currentLogs;
+        displayFullLogs(currentLogs);
+      }
+    });
+
+    document.getElementById('btn-auto-scroll').addEventListener('click', function() {
+      this.classList.toggle('bg-blue-500');
+      this.classList.toggle('bg-gray-100');
+      this.textContent = this.classList.contains('bg-blue-500') ? 'Auto-scroll ON' : 'Auto-scroll';
+    });
+
     (async function init() {
       clearForm();
       normalizeRunnerOptions();

package/views/admin-telegram.ejs

@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Telegram Bots - SuperBackend</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div id="app" class="p-6 max-w-6xl mx-auto" v-cloak>
+        <div class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-2xl font-bold text-gray-800">Telegram Bots</h1>
+                <p class="text-gray-500">Manage your Telegram bot integrations</p>
+            </div>
+            <button @click="openCreateModal" class="bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-blue-700 transition">
+                <i class="ti ti-plus"></i>
+                Add New Bot
+            </button>
+        </div>
+
+        <!-- Bot List -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div v-for="bot in bots" :key="bot._id" class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <div class="flex items-center gap-3">
+                            <div :class="['w-12 h-12 rounded-full flex items-center justify-center text-2xl', bot.status === 'running' ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400']">
+                                <i class="ti ti-brand-telegram"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-bold text-gray-800">{{ bot.name }}</h3>
+                                <span :class="['text-xs px-2 py-0.5 rounded-full', statusBadgeClass(bot.status)]">
+                                    {{ bot.status }}
+                                </span>
+                            </div>
+                        </div>
+                        <div class="flex gap-2">
+                            <button @click="toggleBot(bot)" :title="bot.isActive ? 'Stop' : 'Start'" :class="['p-2 rounded-lg border transition', bot.isActive ? 'bg-red-50 text-red-600 border-red-100 hover:bg-red-100' : 'bg-green-50 text-green-600 border-green-100 hover:bg-green-100']">
+                                <i :class="['ti', bot.isActive ? 'ti-player-stop' : 'ti-player-play']"></i>
+                            </button>
+                            <button @click="editBot(bot)" class="p-2 text-gray-500 hover:bg-gray-100 rounded-lg border border-gray-200 transition">
+                                <i class="ti ti-edit"></i>
+                            </button>
+                            <button @click="confirmDelete(bot)" class="p-2 text-red-500 hover:bg-red-50 rounded-lg border border-red-100 transition">
+                                <i class="ti ti-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="space-y-3 text-sm">
+                        <div class="flex justify-between">
+                            <span class="text-gray-500">Agent:</span>
+                            <span :class="['font-medium', !bot.defaultAgentId ? 'text-amber-600' : '']">
+                                {{ bot.defaultAgentId?.name || 'Unassigned' }}
+                            </span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-500">Allowed Users:</span>
+                            <span class="font-medium">{{ bot.allowedUserIds?.length || 'Any' }}</span>
+                        </div>
+                        <div v-if="bot.lastError" class="mt-4 p-3 bg-red-50 text-red-700 rounded-lg border border-red-100 break-all">
+                            <p class="font-bold mb-1">Last Error:</p>
+                            {{ bot.lastError }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Empty State -->
+        <div v-if="bots.length === 0" class="bg-white rounded-xl border-2 border-dashed border-gray-200 p-12 text-center">
+            <i class="ti ti-brand-telegram text-6xl text-gray-200 mb-4 inline-block"></i>
+            <h3 class="text-lg font-medium text-gray-800">No bots configured</h3>
+            <p class="text-gray-500 mb-6">Start by adding your first Telegram bot</p>
+            <button @click="openCreateModal" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
+                Add Bot
+            </button>
+        </div>
+
+        <!-- Modal -->
+        <div v-if="showModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div class="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden">
+                <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
+                    <h3 class="font-bold text-gray-800">{{ editingBot ? 'Edit Bot' : 'Add New Bot' }}</h3>
+                    <button @click="showModal = false" class="text-gray-400 hover:text-gray-600">
+                        <i class="ti ti-x"></i>
+                    </button>
+                </div>
+                <form @submit.prevent="saveBot" class="p-6 space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Friendly Name</label>
+                        <input v-model="formData.name" type="text" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" placeholder="My Support Bot">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Bot Token</label>
+                        <input v-model="formData.token" type="password" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" placeholder="123456:ABC-DEF...">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Default Agent <span class="text-xs text-gray-400 font-normal">(Optional)</span></label>
+                        <select v-model="formData.defaultAgentId" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none">
+                            <option value="">No Agent (Idle)</option>
+                            <option v-for="agent in agents" :key="agent._id" :value="agent._id">{{ agent.name }}</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Allowed Telegram User IDs (comma separated)</label>
+                        <input v-model="allowedUsersInput" type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" placeholder="123456, 789012">
+                        <p class="text-xs text-gray-400 mt-1">Leave empty to allow any user (be careful!)</p>
+                    </div>
+                    <div class="flex items-center gap-2 pt-2">
+                        <input v-model="formData.isActive" type="checkbox" id="isActive" class="w-4 h-4 text-blue-600 rounded">
+                        <label for="isActive" class="text-sm font-medium text-gray-700">Enable bot on save</label>
+                    </div>
+                    
+                    <div class="flex gap-3 pt-4">
+                        <button type="button" @click="showModal = false" class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
+                            Cancel
+                        </button>
+                        <button type="submit" :disabled="saving" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50">
+                            {{ saving ? 'Saving...' : (editingBot ? 'Update' : 'Create') }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted } = Vue;
+
+        createApp({
+            setup() {
+                const bots = ref([]);
+                const agents = ref([]);
+                const showModal = ref(false);
+                const editingBot = ref(null);
+                const saving = ref(false);
+                const allowedUsersInput = ref('');
+                
+                const formData = ref({
+                    name: '',
+                    token: '',
+                    defaultAgentId: '',
+                    isActive: false,
+                    allowedUserIds: []
+                });
+
+                const baseUrl = '<%= baseUrl %>';
+
+                const fetchBots = async () => {
+                    const res = await fetch(`${baseUrl}/api/admin/telegram`);
+                    const data = await res.json();
+                    bots.value = data.items;
+                };
+
+                const fetchAgents = async () => {
+                    const res = await fetch(`${baseUrl}/api/admin/agents`);
+                    const data = await res.json();
+                    agents.value = data.items;
+                };
+
+                const openCreateModal = () => {
+                    editingBot.value = null;
+                    allowedUsersInput.value = '';
+                    formData.value = {
+                        name: '',
+                        token: '',
+                        defaultAgentId: '',
+                        isActive: false,
+                        allowedUserIds: []
+                    };
+                    showModal.value = true;
+                };
+
+                const editBot = (bot) => {
+                    editingBot.value = bot;
+                    allowedUsersInput.value = (bot.allowedUserIds || []).join(', ');
+                    formData.value = {
+                        name: bot.name,
+                        token: bot.token,
+                        defaultAgentId: bot.defaultAgentId?._id || bot.defaultAgentId || '',
+                        isActive: bot.isActive,
+                        allowedUserIds: bot.allowedUserIds || []
+                    };
+                    showModal.value = true;
+                };
+
+                const toggleBot = async (bot) => {
+                    await fetch(`${baseUrl}/api/admin/telegram/${bot._id}/toggle`, { method: 'POST' });
+                    fetchBots();
+                };
+
+                const confirmDelete = async (bot) => {
+                    if (confirm(`Are you sure you want to delete ${bot.name}?`)) {
+                        await fetch(`${baseUrl}/api/admin/telegram/${bot._id}`, { method: 'DELETE' });
+                        fetchBots();
+                    }
+                };
+
+                const saveBot = async () => {
+                    saving.value = true;
+                    try {
+                        formData.value.allowedUserIds = allowedUsersInput.value
+                            .split(',')
+                            .map(s => s.trim())
+                            .filter(s => s.length > 0);
+
+                        const url = editingBot.value 
+                            ? `${baseUrl}/api/admin/telegram/${editingBot.value._id}`
+                            : `${baseUrl}/api/admin/telegram`;
+                        
+                        const method = editingBot.value ? 'PUT' : 'POST';
+
+                        const res = await fetch(url, {
+                            method,
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(formData.value)
+                        });
+
+                        if (res.ok) {
+                            showModal.value = false;
+                            fetchBots();
+                        } else {
+                            const data = await res.json();
+                            alert(data.error || 'Failed to save bot');
+                        }
+                    } catch (err) {
+                        alert(err.message);
+                    } finally {
+                        saving.value = false;
+                    }
+                };
+
+                const statusBadgeClass = (status) => {
+                    switch (status) {
+                        case 'running': return 'bg-green-100 text-green-700';
+                        case 'error': return 'bg-red-100 text-red-700';
+                        default: return 'bg-gray-100 text-gray-700';
+                    }
+                };
+
+                onMounted(() => {
+                    fetchBots();
+                    fetchAgents();
+                });
+
+                return {
+                    bots,
+                    agents,
+                    showModal,
+                    editingBot,
+                    formData,
+                    allowedUsersInput,
+                    saving,
+                    openCreateModal,
+                    editBot,
+                    toggleBot,
+                    confirmDelete,
+                    saveBot,
+                    statusBadgeClass
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>

package/views/partials/dashboard/nav-items.ejs

@@ -24,6 +24,7 @@
           { id: 'i18n', label: 'I18n Entries', path: adminPath + '/i18n', icon: 'ti-language' },
           { id: 'locales', label: 'I18n Locales', path: adminPath + '/i18n/locales', icon: 'ti-world' },
           { id: 'json', label: 'JSON Configs', path: adminPath + '/json-configs', icon: 'ti-braces' },
+          { id: 'markdowns', label: 'Markdowns', path: adminPath + '/markdowns', icon: 'ti-file-description' },
           { id: 'seo', label: 'SEO Config', path: adminPath + '/seo-config', icon: 'ti-search' },
           { id: 'assets', label: 'Assets', path: adminPath + '/assets', icon: 'ti-photo' },
           { id: 'file-manager', label: 'File Manager', path: adminPath + '/file-manager', icon: 'ti-folder' },
@@ -70,6 +71,8 @@
       {
         title: 'Automation',
         items: [
+          { id: 'agents', label: 'AI Agents', path: adminPath + '/agents', icon: 'ti-robot' },
+          { id: 'telegram', label: 'Telegram Bots', path: adminPath + '/telegram', icon: 'ti-brand-telegram' },
           { id: 'workflows', label: 'Workflows', path: adminPath + '/workflows/all', icon: 'ti-robot' },
           { id: 'scripts', label: 'Scripts', path: adminPath + '/scripts', icon: 'ti-terminal-2' },
           { id: 'crons', label: 'Crons', path: adminPath + '/crons', icon: 'ti-clock' },