Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chatbot Node Management System</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .node-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| position: fixed; | |
| z-index: 50; | |
| height: 100vh; | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| } | |
| .connection-line { | |
| position: relative; | |
| } | |
| .connection-line::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: -20px; | |
| width: 15px; | |
| height: 2px; | |
| background-color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h1 class="text-xl font-bold text-blue-600 flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> ChatNode Manager | |
| </h1> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-4"> | |
| <button id="createNodeBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> Create New Node | |
| </button> | |
| </div> | |
| <div class="px-4"> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Your Nodes</h3> | |
| <div id="nodeList" class="mt-2 space-y-1"> | |
| <!-- Nodes will be added here dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">Admin User</p> | |
| <p class="text-xs text-gray-500">admin@chatnode.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4"> | |
| <button id="sidebarToggle" class="md:hidden text-gray-500"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search nodes..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Dashboard View --> | |
| <div id="dashboardView"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Chatbot Nodes Dashboard</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-sort mr-1"></i> Sort | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Node cards will be added here dynamically --> | |
| <div class="node-card bg-white p-6 rounded-xl shadow-md border border-gray-200 transition-all duration-300 cursor-pointer" onclick="showNodeDetail('customer-support')"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">Customer Support</h3> | |
| <p class="text-sm text-gray-500 mt-1">Handles customer inquiries</p> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-plug mr-1 text-blue-500"></i> | |
| <span>Connected to MySQL</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-brain mr-1 text-purple-500"></i> | |
| <span>GPT-4</span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center"> | |
| <span class="text-xs text-gray-400">Last updated: 2 hours ago</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Manage</button> | |
| </div> | |
| </div> | |
| <div class="node-card bg-white p-6 rounded-xl shadow-md border border-gray-200 transition-all duration-300 cursor-pointer" onclick="showNodeDetail('hr-assistant')"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">HR Assistant</h3> | |
| <p class="text-sm text-gray-500 mt-1">Answers HR policies questions</p> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Draft</span> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-file-alt mr-1 text-blue-500"></i> | |
| <span>Connected to PDF files</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-brain mr-1 text-purple-500"></i> | |
| <span>Gemini Pro</span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center"> | |
| <span class="text-xs text-gray-400">Last updated: 1 day ago</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Manage</button> | |
| </div> | |
| </div> | |
| <div class="node-card bg-white p-6 rounded-xl shadow-md border border-gray-200 transition-all duration-300 cursor-pointer" onclick="showNodeDetail('tech-support')"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">Tech Support</h3> | |
| <p class="text-sm text-gray-500 mt-1">Technical troubleshooting</p> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-database mr-1 text-blue-500"></i> | |
| <span>Connected to MongoDB</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-brain mr-1 text-purple-500"></i> | |
| <span>Llama 2</span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between items-center"> | |
| <span class="text-xs text-gray-400">Last updated: 30 minutes ago</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Manage</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Node Detail View (hidden by default) --> | |
| <div id="nodeDetailView" class="hidden"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <button onclick="showDashboard()" class="flex items-center text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back to Dashboard | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> | |
| <i class="fas fa-save mr-2"></i> Save Changes | |
| </button> | |
| <button onclick="showExportOptions()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"> | |
| <i class="fas fa-download mr-2"></i> Export | |
| </button> | |
| <button class="px-4 py-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200"> | |
| <i class="fas fa-trash mr-2"></i> Delete Node | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h2 id="nodeDetailTitle" class="text-2xl font-bold text-gray-800">Customer Support</h2> | |
| <p class="text-gray-600 mt-1">Node ID: <span id="nodeDetailId" class="font-mono">customer-support</span></p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6"> | |
| <!-- Node Configuration --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-sliders-h mr-2 text-blue-500"></i> Node Configuration | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Node Name</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="Customer Support"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="2">Handles customer inquiries and support tickets</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Active</option> | |
| <option>Inactive</option> | |
| <option>Draft</option> | |
| <option>Maintenance</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Source Configuration --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-database mr-2 text-blue-500"></i> Data Source | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Source Type</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="sourceType" class="h-4 w-4 text-blue-600" checked> | |
| <span class="ml-2 text-gray-700">Database</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="sourceType" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Document Files</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="sourceType" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2 text-gray-700">API</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div id="databaseConfig"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Database Type</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>MySQL</option> | |
| <option>PostgreSQL</option> | |
| <option>MongoDB</option> | |
| <option>SQL Server</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Connection String</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="mysql://user:pass@localhost:3306/customer_db"> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tables/Collections</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">customers</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">tickets</span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">products</span> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="documentConfig" class="hidden"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Upload Documents</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none"> | |
| <span>Upload files</span> | |
| <input type="file" class="sr-only" multiple> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="text-xs text-gray-500">PDF, DOCX, TXT up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Uploaded Files</label> | |
| <ul class="divide-y divide-gray-200"> | |
| <li class="py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-pdf text-red-500 mr-2"></i> | |
| <span>customer_manual.pdf</span> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </li> | |
| <li class="py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-word text-blue-500 mr-2"></i> | |
| <span>faq.docx</span> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- LLM Configuration --> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-brain mr-2 text-purple-500"></i> Language Model | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Model Provider</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>OpenAI</option> | |
| <option>Google Gemini</option> | |
| <option>Anthropic Claude</option> | |
| <option>Meta Llama</option> | |
| <option>Ollama</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Model</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>GPT-4</option> | |
| <option>GPT-3.5 Turbo</option> | |
| <option>GPT-4 Turbo</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label> | |
| <div class="relative"> | |
| <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 pr-10" value="sk-123...456"> | |
| <button class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700"> | |
| <i class="far fa-eye"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label> | |
| <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>Precise</span> | |
| <span>Balanced</span> | |
| <span>Creative</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">System Prompt</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="4">You are a helpful customer support assistant for our company. Be polite, professional, and try to resolve customer issues efficiently. If you don't know the answer, escalate to human support.</textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Node Connections --> | |
| <div class="space-y-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-project-diagram mr-2 text-green-500"></i> Node Connections | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="connection-line"> | |
| <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium">HR Assistant</h4> | |
| <p class="text-xs text-gray-500">For HR policy questions</p> | |
| </div> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="connection-line"> | |
| <div class="bg-white p-3 rounded-lg border border-gray-200 shadow-sm"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h4 class="font-medium">Tech Support</h4> | |
| <p class="text-xs text-gray-500">Technical issues</p> | |
| </div> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-2 px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> Add Connection | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-chart-line mr-2 text-yellow-500"></i> Node Analytics | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="font-medium">Daily Interactions</span> | |
| <span class="text-blue-600">1,245</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="font-medium">Success Rate</span> | |
| <span class="text-green-600">89%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 89%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="font-medium">Escalation Rate</span> | |
| <span class="text-red-600">11%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-600 h-2 rounded-full" style="width: 11%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-semibold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-bolt mr-2 text-purple-500"></i> Quick Actions | |
| </h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="p-3 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 flex flex-col items-center"> | |
| <i class="fas fa-play text-green-500 mb-1"></i> | |
| <span class="text-xs">Test Node</span> | |
| </button> | |
| <button class="p-3 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 flex flex-col items-center"> | |
| <i class="fas fa-sync-alt text-blue-500 mb-1"></i> | |
| <span class="text-xs">Refresh Data</span> | |
| </button> | |
| <button class="p-3 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 flex flex-col items-center"> | |
| <i class="fas fa-history text-yellow-500 mb-1"></i> | |
| <span class="text-xs">View Logs</span> | |
| </button> | |
| <button class="p-3 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 flex flex-col items-center"> | |
| <i class="fas fa-share-alt text-purple-500 mb-1"></i> | |
| <span class="text-xs">Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Options Modal --> | |
| <div id="exportOptionsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-download mr-2 text-green-500"></i> Export Options | |
| </h3> | |
| </div> | |
| <div class="p-6 space-y-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-lg mb-3 flex items-center"> | |
| <i class="fas fa-code mr-2 text-blue-500"></i> Embed in Website | |
| </h4> | |
| <p class="text-sm text-gray-600 mb-3">Copy this code to embed the chatbot in your website:</p> | |
| <div class="relative"> | |
| <pre id="embedCode" class="bg-gray-800 text-gray-100 p-3 rounded-lg text-sm overflow-x-auto"> | |
| <script src="https://yourdomain.com/chatbot.js?id=<span id="nodeIdForEmbed"></span>"></script> | |
| <div id="chatbot-container"></div> | |
| <style> | |
| #chatbot-container { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 350px; | |
| height: 500px; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| </style></pre> | |
| <button onclick="copyToClipboard('embedCode')" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-lg mb-3 flex items-center"> | |
| <i class="fas fa-plug mr-2 text-purple-500"></i> API Integration | |
| </h4> | |
| <p class="text-sm text-gray-600 mb-3">Use these API endpoints to integrate with your application:</p> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label> | |
| <div class="relative"> | |
| <pre class="bg-gray-800 text-gray-100 p-3 rounded-lg text-sm overflow-x-auto">https://api.yourdomain.com/v1/nodes/<span id="nodeIdForApi"></span></pre> | |
| <button onclick="copyToClipboard(this.previousElementSibling)" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Example Request</label> | |
| <div class="relative"> | |
| <pre class="bg-gray-800 text-gray-100 p-3 rounded-lg text-sm overflow-x-auto"> | |
| POST /messages | |
| Content-Type: application/json | |
| Authorization: Bearer YOUR_API_KEY | |
| { | |
| "message": "Hello, how can I help you?", | |
| "context": {} | |
| }</pre> | |
| <button onclick="copyToClipboard(this.previousElementSibling)" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-end"> | |
| <button onclick="document.getElementById('exportOptionsModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Create Node Modal --> | |
| <div id="createNodeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800 flex items-center"> | |
| <i class="fas fa-plus-circle mr-2 text-blue-500"></i> Create New Chatbot Node | |
| </h3> | |
| </div> | |
| <div class="p-6 space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Node Name</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., Customer Support Bot"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="2" placeholder="Brief description of this chatbot's purpose"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Data Source</label> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-2"> | |
| <div class="data-source-option border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all"> | |
| <div class="flex flex-col items-center text-center"> | |
| <i class="fas fa-database text-3xl text-blue-500 mb-2"></i> | |
| <h4 class="font-medium">Database</h4> | |
| <p class="text-xs text-gray-500 mt-1">Connect to SQL or NoSQL databases</p> | |
| </div> | |
| </div> | |
| <div class="data-source-option border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all"> | |
| <div class="flex flex-col items-center text-center"> | |
| <i class="fas fa-file-alt text-3xl text-blue-500 mb-2"></i> | |
| <h4 class="font-medium">Documents</h4> | |
| <p class="text-xs text-gray-500 mt-1">Upload PDFs, Word, or text files</p> | |
| </div> | |
| </div> | |
| <div class="data-source-option border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-blue-500 hover:bg-blue-50 transition-all"> | |
| <div class="flex flex-col items-center text-center"> | |
| <i class="fas fa-plug text-3xl text-blue-500 mb-2"></i> | |
| <h4 class="font-medium">API</h4> | |
| <p class="text-xs text-gray-500 mt-1">Connect to external APIs</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Language Model</label> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2"> | |
| <div class="llm-option border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-purple-500 hover:bg-purple-50 transition-all"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-robot text-2xl text-purple-500 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium">OpenAI</h4> | |
| <p class="text-xs text-gray-500">GPT-4, GPT-3.5 Turbo</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="llm-option border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-purple-500 hover:bg-purple-50 transition-all"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-google text-2xl text-purple-500 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium">Google Gemini</h4> | |
| <p class="text-xs text-gray-500">Gemini Pro, Gemini Ultra</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="llm-option border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-purple-500 hover:bg-purple-50 transition-all"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-server text-2xl text-purple-500 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium">Ollama</h4> | |
| <p class="text-xs text-gray-500">Run models locally</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="llm-option border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-purple-500 hover:bg-purple-50 transition-all"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cube text-2xl text-purple-500 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium">Meta Llama</h4> | |
| <p class="text-xs text-gray-500">Llama 2, Llama 3</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-end space-x-3"> | |
| <button id="cancelCreateNode" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"> | |
| Cancel | |
| </button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center"> | |
| <i class="fas fa-check mr-2"></i> Create Node | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar on mobile | |
| document.getElementById('sidebarToggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('active'); | |
| }); | |
| // Show create node modal | |
| document.getElementById('createNodeBtn').addEventListener('click', function() { | |
| document.getElementById('createNodeModal').classList.remove('hidden'); | |
| }); | |
| // Hide create node modal | |
| document.getElementById('cancelCreateNode').addEventListener('click', function() { | |
| document.getElementById('createNodeModal').classList.add('hidden'); | |
| }); | |
| // Data source selection | |
| const dataSourceOptions = document.querySelectorAll('.data-source-option'); | |
| dataSourceOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| dataSourceOptions.forEach(opt => opt.classList.remove('border-blue-500', 'bg-blue-50')); | |
| this.classList.add('border-blue-500', 'bg-blue-50'); | |
| }); | |
| }); | |
| // LLM selection | |
| const llmOptions = document.querySelectorAll('.llm-option'); | |
| llmOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| llmOptions.forEach(opt => opt.classList.remove('border-purple-500', 'bg-purple-50')); | |
| this.classList.add('border-purple-500', 'bg-purple-50'); | |
| }); | |
| }); | |
| // Toggle between data source configs | |
| document.querySelectorAll('input[name="sourceType"]').forEach(radio => { | |
| radio.addEventListener('change', function() { | |
| if (this.value === 'Database') { | |
| document.getElementById('databaseConfig').classList.remove('hidden'); | |
| document.getElementById('documentConfig').classList.add('hidden'); | |
| } else if (this.value === 'Document Files') { | |
| document.getElementById('databaseConfig').classList.add('hidden'); | |
| document.getElementById('documentConfig').classList.remove('hidden'); | |
| } | |
| }); | |
| }); | |
| // Show node detail view | |
| function showNodeDetail(nodeId) { | |
| document.getElementById('dashboardView').classList.add('hidden'); | |
| document.getElementById('nodeDetailView').classList.remove('hidden'); | |
| // Update node details based on the selected node | |
| // In a real app, you would fetch this data from your backend | |
| const nodeDetails = { | |
| 'customer-support': { | |
| title: 'Customer Support', | |
| id: 'customer-support', | |
| status: 'Active' | |
| }, | |
| 'hr-assistant': { | |
| title: 'HR Assistant', | |
| id: 'hr-assistant', | |
| status: 'Draft' | |
| }, | |
| 'tech-support': { | |
| title: 'Tech Support', | |
| id: 'tech-support', | |
| status: 'Active' | |
| } | |
| }; | |
| const node = nodeDetails[nodeId]; | |
| document.getElementById('nodeDetailTitle').textContent = node.title; | |
| document.getElementById('nodeDetailId').textContent = node.id; | |
| } | |
| // Show dashboard view | |
| function showDashboard() { | |
| document.getElementById('dashboardView').classList.remove('hidden'); | |
| document.getElementById('nodeDetailView').classList.add('hidden'); | |
| } | |
| // Show export options modal | |
| function showExportOptions() { | |
| const modal = document.getElementById('exportOptionsModal'); | |
| const nodeId = document.getElementById('nodeDetailId').textContent; | |
| // Update node IDs in the export options | |
| document.querySelectorAll('#nodeIdForEmbed, #nodeIdForApi').forEach(el => { | |
| el.textContent = nodeId; | |
| }); | |
| modal.classList.remove('hidden'); | |
| } | |
| // Copy text to clipboard | |
| function copyToClipboard(element) { | |
| const text = element.textContent || element.innerText; | |
| navigator.clipboard.writeText(text).then(() => { | |
| const originalText = element.nextElementSibling.innerHTML; | |
| element.nextElementSibling.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!'; | |
| setTimeout(() => { | |
| element.nextElementSibling.innerHTML = originalText; | |
| }, 2000); | |
| }); | |
| } | |
| // Close modal when clicking outside | |
| document.getElementById('createNodeModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| this.classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nam1608/manager-node" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |