brainable commited on
Commit
a2d4a72
·
verified ·
1 Parent(s): b241def

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1369 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Se4
3
- emoji: 💻
4
- colorFrom: pink
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: se4
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1369 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MCP Configuration | AgentBuilder</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#00ff9d',
16
+ secondary: '#00b4ff',
17
+ dark: '#0a0a0a',
18
+ darker: '#050505',
19
+ light: '#f0f0f0',
20
+ gray: {
21
+ 800: '#1e1e1e',
22
+ 700: '#2d2d2d',
23
+ 600: '#3a3a3a',
24
+ }
25
+ },
26
+ fontFamily: {
27
+ sans: ['Inter', 'sans-serif'],
28
+ mono: ['Roboto Mono', 'monospace'],
29
+ },
30
+ animation: {
31
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
32
+ 'blink': 'blink 1s step-end infinite',
33
+ },
34
+ keyframes: {
35
+ blink: {
36
+ '0%, 100%': { opacity: '1' },
37
+ '50%': { opacity: '0' },
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+ </script>
44
+ <style>
45
+ .terminal-input::before {
46
+ content: '> ';
47
+ color: #00ff9d;
48
+ }
49
+ .code-block {
50
+ position: relative;
51
+ }
52
+ .code-block::before {
53
+ content: '';
54
+ position: absolute;
55
+ top: 0;
56
+ left: 0;
57
+ width: 4px;
58
+ height: 100%;
59
+ background: linear-gradient(to bottom, #00ff9d, #00b4ff);
60
+ }
61
+ .glow-effect {
62
+ box-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
63
+ }
64
+ .glow-effect:hover {
65
+ box-shadow: 0 0 15px rgba(0, 255, 157, 0.7);
66
+ }
67
+ .sidebar-item:hover {
68
+ background: linear-gradient(90deg, rgba(0, 255, 157, 0.1) 0%, rgba(0, 255, 157, 0) 100%);
69
+ border-left: 2px solid #00ff9d;
70
+ }
71
+ .sidebar-item.active {
72
+ background: linear-gradient(90deg, rgba(0, 255, 157, 0.2) 0%, rgba(0, 255, 157, 0) 100%);
73
+ border-left: 2px solid #00ff9d;
74
+ }
75
+ .tab-item {
76
+ position: relative;
77
+ }
78
+ .tab-item.active::after {
79
+ content: '';
80
+ position: absolute;
81
+ bottom: 0;
82
+ left: 0;
83
+ width: 100%;
84
+ height: 2px;
85
+ background-color: #00ff9d;
86
+ }
87
+ .status-active {
88
+ background-color: rgba(0, 255, 157, 0.1);
89
+ color: #00ff9d;
90
+ }
91
+ .status-draft {
92
+ background-color: rgba(0, 180, 255, 0.1);
93
+ color: #00b4ff;
94
+ }
95
+ .status-paused {
96
+ background-color: rgba(255, 165, 0, 0.1);
97
+ color: #ffa500;
98
+ }
99
+ .status-error {
100
+ background-color: rgba(255, 0, 0, 0.1);
101
+ color: #ff5555;
102
+ }
103
+ .dropdown-content {
104
+ display: none;
105
+ position: absolute;
106
+ right: 0;
107
+ background-color: #1e1e1e;
108
+ min-width: 160px;
109
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
110
+ z-index: 1;
111
+ border: 1px solid #2d2d2d;
112
+ border-radius: 6px;
113
+ }
114
+ .dropdown:hover .dropdown-content {
115
+ display: block;
116
+ }
117
+ .dropdown-content a {
118
+ color: #f0f0f0;
119
+ padding: 10px 16px;
120
+ text-decoration: none;
121
+ display: block;
122
+ font-size: 14px;
123
+ }
124
+ .dropdown-content a:hover {
125
+ background-color: #2d2d2d;
126
+ }
127
+ .config-section {
128
+ border: 1px solid #2d2d2d;
129
+ border-radius: 8px;
130
+ overflow: hidden;
131
+ }
132
+ .config-header {
133
+ background-color: #1e1e1e;
134
+ padding: 12px 16px;
135
+ border-bottom: 1px solid #2d2d2d;
136
+ cursor: pointer;
137
+ }
138
+ .config-content {
139
+ background-color: #1a1a1a;
140
+ padding: 16px;
141
+ }
142
+ .channel-indicator {
143
+ width: 12px;
144
+ height: 12px;
145
+ border-radius: 50%;
146
+ display: inline-block;
147
+ margin-right: 6px;
148
+ }
149
+ .channel-1 { background-color: #00ff9d; }
150
+ .channel-2 { background-color: #00b4ff; }
151
+ .channel-3 { background-color: #ff00ff; }
152
+ .channel-4 { background-color: #ffaa00; }
153
+ .channel-5 { background-color: #ff5555; }
154
+ .channel-6 { background-color: #aa00ff; }
155
+ .slider-thumb::-webkit-slider-thumb {
156
+ -webkit-appearance: none;
157
+ appearance: none;
158
+ width: 16px;
159
+ height: 16px;
160
+ border-radius: 50%;
161
+ background: #00ff9d;
162
+ cursor: pointer;
163
+ }
164
+ .slider-thumb::-moz-range-thumb {
165
+ width: 16px;
166
+ height: 16px;
167
+ border-radius: 50%;
168
+ background: #00ff9d;
169
+ cursor: pointer;
170
+ }
171
+ .toggle-checkbox:checked {
172
+ right: 0;
173
+ border-color: #00ff9d;
174
+ background-color: #00ff9d;
175
+ }
176
+ .toggle-checkbox:checked + .toggle-label {
177
+ background-color: rgba(0, 255, 157, 0.2);
178
+ }
179
+ </style>
180
+ </head>
181
+ <body class="bg-dark text-light font-sans flex h-screen overflow-hidden">
182
+ <!-- Sidebar -->
183
+ <div class="w-64 bg-darker border-r border-gray-800 flex flex-col">
184
+ <div class="p-4 border-b border-gray-800 flex items-center">
185
+ <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3">
186
+ <i class="fas fa-robot text-dark"></i>
187
+ </div>
188
+ <h1 class="text-xl font-bold">
189
+ <span class="text-primary">Agent</span>Builder
190
+ </h1>
191
+ </div>
192
+
193
+ <div class="p-4 border-b border-gray-800">
194
+ <button class="w-full bg-primary hover:bg-opacity-90 text-dark font-semibold py-2 px-4 rounded-md flex items-center justify-center transition-all">
195
+ <i class="fas fa-save mr-2"></i> Save Configuration
196
+ </button>
197
+ </div>
198
+
199
+ <nav class="flex-1 overflow-y-auto">
200
+ <div class="p-2">
201
+ <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Configuration Sections</h3>
202
+ <a href="#general" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
203
+ <i class="fas fa-cog mr-3 text-gray-400"></i>
204
+ <span>General Settings</span>
205
+ </a>
206
+ <a href="#channels" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
207
+ <i class="fas fa-sliders-h mr-3 text-gray-400"></i>
208
+ <span>Channel Configuration</span>
209
+ </a>
210
+ <a href="#routing" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
211
+ <i class="fas fa-random mr-3 text-gray-400"></i>
212
+ <span>Routing Rules</span>
213
+ </a>
214
+ <a href="#processing" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
215
+ <i class="fas fa-microchip mr-3 text-gray-400"></i>
216
+ <span>Processing Pipeline</span>
217
+ </a>
218
+ <a href="#monitoring" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
219
+ <i class="fas fa-chart-line mr-3 text-gray-400"></i>
220
+ <span>Monitoring & Alerts</span>
221
+ </a>
222
+ <a href="#api" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
223
+ <i class="fas fa-code mr-3 text-gray-400"></i>
224
+ <span>API Integration</span>
225
+ </a>
226
+ <a href="#security" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
227
+ <i class="fas fa-lock mr-3 text-gray-400"></i>
228
+ <span>Security Settings</span>
229
+ </a>
230
+ </div>
231
+
232
+ <div class="p-2 mt-4">
233
+ <h3 class="text-xs uppercase text-gray-500 font-mono tracking-wider mb-2 px-3">Quick Actions</h3>
234
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
235
+ <i class="fas fa-clone mr-3 text-gray-400"></i>
236
+ <span>Clone Configuration</span>
237
+ </a>
238
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
239
+ <i class="fas fa-file-export mr-3 text-gray-400"></i>
240
+ <span>Export Config</span>
241
+ </a>
242
+ <a href="#" class="sidebar-item flex items-center py-2 px-3 rounded-md mb-1 transition-all">
243
+ <i class="fas fa-history mr-3 text-gray-400"></i>
244
+ <span>Version History</span>
245
+ </a>
246
+ </div>
247
+ </nav>
248
+
249
+ <div class="p-4 border-t border-gray-800">
250
+ <div class="flex items-center">
251
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-3">
252
+ <i class="fas fa-user text-gray-400"></i>
253
+ </div>
254
+ <div>
255
+ <div class="text-sm font-medium">John Doe</div>
256
+ <div class="text-xs text-gray-500">Admin</div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Main Content -->
263
+ <div class="flex-1 flex flex-col overflow-hidden">
264
+ <!-- Top Bar -->
265
+ <div class="bg-darker border-b border-gray-800 p-4 flex items-center justify-between">
266
+ <div class="flex items-center">
267
+ <h2 class="text-xl font-bold">
268
+ <span class="text-primary">MCP</span> Configuration
269
+ </h2>
270
+ <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded font-mono">
271
+ <span class="text-primary">Multi-Channel Processor</span> v2.4.1
272
+ </div>
273
+ <div class="ml-4 text-sm bg-gray-800 text-gray-400 px-2 py-1 rounded">
274
+ <span class="text-primary">Status:</span> <span class="status-active px-2 py-0.5 rounded-full text-xs">Active</span>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="flex items-center">
279
+ <button class="bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md px-4 py-2 text-sm mr-3 transition-all">
280
+ <i class="fas fa-play mr-2 text-green-500"></i> Start Processor
281
+ </button>
282
+ <button class="bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md px-4 py-2 text-sm mr-3 transition-all">
283
+ <i class="fas fa-stop mr-2 text-red-500"></i> Stop
284
+ </button>
285
+ <button class="bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md px-4 py-2 text-sm transition-all">
286
+ <i class="fas fa-redo mr-2 text-secondary"></i> Restart
287
+ </button>
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Content Area -->
292
+ <div class="flex-1 overflow-auto p-6">
293
+ <div class="max-w-7xl mx-auto">
294
+ <!-- General Settings -->
295
+ <div id="general" class="config-section mb-6">
296
+ <div class="config-header flex items-center justify-between">
297
+ <h3 class="font-medium flex items-center">
298
+ <i class="fas fa-cog mr-2 text-primary"></i> General Settings
299
+ </h3>
300
+ <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
301
+ </div>
302
+ <div class="config-content">
303
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
304
+ <div>
305
+ <label class="block text-sm font-medium mb-1">Processor Name</label>
306
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="Customer Support MCP">
307
+ </div>
308
+ <div>
309
+ <label class="block text-sm font-medium mb-1">Processor ID</label>
310
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="MCP-CC-2023-001" disabled>
311
+ </div>
312
+ <div>
313
+ <label class="block text-sm font-medium mb-1">Description</label>
314
+ <textarea class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent h-24">Multi-channel processor for handling customer support across email, chat, and social media platforms.</textarea>
315
+ </div>
316
+ <div>
317
+ <label class="block text-sm font-medium mb-1">Owner</label>
318
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
319
+ <option>Support Team</option>
320
+ <option>Marketing Team</option>
321
+ <option>Operations Team</option>
322
+ </select>
323
+ </div>
324
+ <div>
325
+ <label class="block text-sm font-medium mb-1">Execution Mode</label>
326
+ <div class="flex space-x-4">
327
+ <label class="inline-flex items-center">
328
+ <input type="radio" class="form-radio text-primary" name="execution_mode" checked>
329
+ <span class="ml-2">Real-time</span>
330
+ </label>
331
+ <label class="inline-flex items-center">
332
+ <input type="radio" class="form-radio text-primary" name="execution_mode">
333
+ <span class="ml-2">Batch</span>
334
+ </label>
335
+ <label class="inline-flex items-center">
336
+ <input type="radio" class="form-radio text-primary" name="execution_mode">
337
+ <span class="ml-2">Hybrid</span>
338
+ </label>
339
+ </div>
340
+ </div>
341
+ <div>
342
+ <label class="block text-sm font-medium mb-1">Logging Level</label>
343
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
344
+ <option>Debug</option>
345
+ <option selected>Info</option>
346
+ <option>Warning</option>
347
+ <option>Error</option>
348
+ <option>Critical</option>
349
+ </select>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Channel Configuration -->
356
+ <div id="channels" class="config-section mb-6">
357
+ <div class="config-header flex items-center justify-between">
358
+ <h3 class="font-medium flex items-center">
359
+ <i class="fas fa-sliders-h mr-2 text-primary"></i> Channel Configuration
360
+ </h3>
361
+ <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
362
+ </div>
363
+ <div class="config-content">
364
+ <div class="mb-6">
365
+ <div class="flex justify-between items-center mb-4">
366
+ <h4 class="font-medium">Input Channels</h4>
367
+ <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
368
+ <i class="fas fa-plus mr-1"></i> Add Channel
369
+ </button>
370
+ </div>
371
+
372
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
373
+ <!-- Channel 1 -->
374
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
375
+ <div class="flex items-center justify-between mb-3">
376
+ <div class="flex items-center">
377
+ <span class="channel-indicator channel-1"></span>
378
+ <span class="font-medium">Email</span>
379
+ </div>
380
+ <div class="flex items-center space-x-2">
381
+ <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span>
382
+ <button class="text-gray-500 hover:text-light">
383
+ <i class="fas fa-ellipsis-v"></i>
384
+ </button>
385
+ </div>
386
+ </div>
387
+ <div class="text-sm text-gray-400 mb-3">
388
+ <div class="flex justify-between mb-1">
389
+ <span>Type:</span>
390
+ <span>SMTP</span>
391
+ </div>
392
+ <div class="flex justify-between mb-1">
393
+ <span>Status:</span>
394
+ <span>Connected</span>
395
+ </div>
396
+ <div class="flex justify-between">
397
+ <span>Throughput:</span>
398
+ <span>12 msg/min</span>
399
+ </div>
400
+ </div>
401
+ <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all">
402
+ Configure
403
+ </button>
404
+ </div>
405
+
406
+ <!-- Channel 2 -->
407
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
408
+ <div class="flex items-center justify-between mb-3">
409
+ <div class="flex items-center">
410
+ <span class="channel-indicator channel-2"></span>
411
+ <span class="font-medium">Web Chat</span>
412
+ </div>
413
+ <div class="flex items-center space-x-2">
414
+ <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span>
415
+ <button class="text-gray-500 hover:text-light">
416
+ <i class="fas fa-ellipsis-v"></i>
417
+ </button>
418
+ </div>
419
+ </div>
420
+ <div class="text-sm text-gray-400 mb-3">
421
+ <div class="flex justify-between mb-1">
422
+ <span>Type:</span>
423
+ <span>WebSocket</span>
424
+ </div>
425
+ <div class="flex justify-between mb-1">
426
+ <span>Status:</span>
427
+ <span>Connected</span>
428
+ </div>
429
+ <div class="flex justify-between">
430
+ <span>Throughput:</span>
431
+ <span>24 msg/min</span>
432
+ </div>
433
+ </div>
434
+ <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all">
435
+ Configure
436
+ </button>
437
+ </div>
438
+
439
+ <!-- Channel 3 -->
440
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
441
+ <div class="flex items-center justify-between mb-3">
442
+ <div class="flex items-center">
443
+ <span class="channel-indicator channel-3"></span>
444
+ <span class="font-medium">Twitter</span>
445
+ </div>
446
+ <div class="flex items-center space-x-2">
447
+ <span class="status-paused text-xs px-2 py-0.5 rounded-full">Paused</span>
448
+ <button class="text-gray-500 hover:text-light">
449
+ <i class="fas fa-ellipsis-v"></i>
450
+ </button>
451
+ </div>
452
+ </div>
453
+ <div class="text-sm text-gray-400 mb-3">
454
+ <div class="flex justify-between mb-1">
455
+ <span>Type:</span>
456
+ <span>API</span>
457
+ </div>
458
+ <div class="flex justify-between mb-1">
459
+ <span>Status:</span>
460
+ <span>Disconnected</span>
461
+ </div>
462
+ <div class="flex justify-between">
463
+ <span>Throughput:</span>
464
+ <span>0 msg/min</span>
465
+ </div>
466
+ </div>
467
+ <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all">
468
+ Configure
469
+ </button>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <div>
475
+ <div class="flex justify-between items-center mb-4">
476
+ <h4 class="font-medium">Output Channels</h4>
477
+ <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
478
+ <i class="fas fa-plus mr-1"></i> Add Channel
479
+ </button>
480
+ </div>
481
+
482
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
483
+ <!-- Channel 4 -->
484
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
485
+ <div class="flex items-center justify-between mb-3">
486
+ <div class="flex items-center">
487
+ <span class="channel-indicator channel-4"></span>
488
+ <span class="font-medium">CRM System</span>
489
+ </div>
490
+ <div class="flex items-center space-x-2">
491
+ <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span>
492
+ <button class="text-gray-500 hover:text-light">
493
+ <i class="fas fa-ellipsis-v"></i>
494
+ </button>
495
+ </div>
496
+ </div>
497
+ <div class="text-sm text-gray-400 mb-3">
498
+ <div class="flex justify-between mb-1">
499
+ <span>Type:</span>
500
+ <span>REST API</span>
501
+ </div>
502
+ <div class="flex justify-between mb-1">
503
+ <span>Status:</span>
504
+ <span>Connected</span>
505
+ </div>
506
+ <div class="flex justify-between">
507
+ <span>Throughput:</span>
508
+ <span>18 msg/min</span>
509
+ </div>
510
+ </div>
511
+ <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all">
512
+ Configure
513
+ </button>
514
+ </div>
515
+
516
+ <!-- Channel 5 -->
517
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
518
+ <div class="flex items-center justify-between mb-3">
519
+ <div class="flex items-center">
520
+ <span class="channel-indicator channel-5"></span>
521
+ <span class="font-medium">Database</span>
522
+ </div>
523
+ <div class="flex items-center space-x-2">
524
+ <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span>
525
+ <button class="text-gray-500 hover:text-light">
526
+ <i class="fas fa-ellipsis-v"></i>
527
+ </button>
528
+ </div>
529
+ </div>
530
+ <div class="text-sm text-gray-400 mb-3">
531
+ <div class="flex justify-between mb-1">
532
+ <span>Type:</span>
533
+ <span>SQL</span>
534
+ </div>
535
+ <div class="flex justify-between mb-1">
536
+ <span>Status:</span>
537
+ <span>Connected</span>
538
+ </div>
539
+ <div class="flex justify-between">
540
+ <span>Throughput:</span>
541
+ <span>32 msg/min</span>
542
+ </div>
543
+ </div>
544
+ <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all">
545
+ Configure
546
+ </button>
547
+ </div>
548
+
549
+ <!-- Channel 6 -->
550
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
551
+ <div class="flex items-center justify-between mb-3">
552
+ <div class="flex items-center">
553
+ <span class="channel-indicator channel-6"></span>
554
+ <span class="font-medium">Analytics</span>
555
+ </div>
556
+ <div class="flex items-center space-x-2">
557
+ <span class="status-error text-xs px-2 py-0.5 rounded-full">Error</span>
558
+ <button class="text-gray-500 hover:text-light">
559
+ <i class="fas fa-ellipsis-v"></i>
560
+ </button>
561
+ </div>
562
+ </div>
563
+ <div class="text-sm text-gray-400 mb-3">
564
+ <div class="flex justify-between mb-1">
565
+ <span>Type:</span>
566
+ <span>Webhook</span>
567
+ </div>
568
+ <div class="flex justify-between mb-1">
569
+ <span>Status:</span>
570
+ <span>Connection Failed</span>
571
+ </div>
572
+ <div class="flex justify-between">
573
+ <span>Throughput:</span>
574
+ <span>0 msg/min</span>
575
+ </div>
576
+ </div>
577
+ <button class="w-full text-xs bg-gray-700 hover:bg-gray-600 text-light px-3 py-1 rounded transition-all">
578
+ Configure
579
+ </button>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+
586
+ <!-- Routing Rules -->
587
+ <div id="routing" class="config-section mb-6">
588
+ <div class="config-header flex items-center justify-between">
589
+ <h3 class="font-medium flex items-center">
590
+ <i class="fas fa-random mr-2 text-primary"></i> Routing Rules
591
+ </h3>
592
+ <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
593
+ </div>
594
+ <div class="config-content">
595
+ <div class="mb-6">
596
+ <div class="flex justify-between items-center mb-4">
597
+ <h4 class="font-medium">Routing Table</h4>
598
+ <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-3 py-1 rounded transition-all">
599
+ <i class="fas fa-plus mr-1"></i> Add Rule
600
+ </button>
601
+ </div>
602
+
603
+ <div class="overflow-x-auto">
604
+ <table class="min-w-full bg-gray-800 border border-gray-700 rounded-lg">
605
+ <thead>
606
+ <tr class="border-b border-gray-700">
607
+ <th class="px-4 py-2 text-left text-sm font-medium">Priority</th>
608
+ <th class="px-4 py-2 text-left text-sm font-medium">Condition</th>
609
+ <th class="px-4 py-2 text-left text-sm font-medium">Input Channel</th>
610
+ <th class="px-4 py-2 text-left text-sm font-medium">Output Channel</th>
611
+ <th class="px-4 py-2 text-left text-sm font-medium">Actions</th>
612
+ </tr>
613
+ </thead>
614
+ <tbody>
615
+ <tr class="border-b border-gray-700">
616
+ <td class="px-4 py-3 text-sm">1</td>
617
+ <td class="px-4 py-3 text-sm">Content contains "billing"</td>
618
+ <td class="px-4 py-3 text-sm">Email, Web Chat</td>
619
+ <td class="px-4 py-3 text-sm">Billing Team Queue</td>
620
+ <td class="px-4 py-3 text-sm">
621
+ <button class="text-gray-500 hover:text-primary mr-2">
622
+ <i class="fas fa-edit"></i>
623
+ </button>
624
+ <button class="text-gray-500 hover:text-red-500">
625
+ <i class="fas fa-trash"></i>
626
+ </button>
627
+ </td>
628
+ </tr>
629
+ <tr class="border-b border-gray-700">
630
+ <td class="px-4 py-3 text-sm">2</td>
631
+ <td class="px-4 py-3 text-sm">Language is "Spanish"</td>
632
+ <td class="px-4 py-3 text-sm">All</td>
633
+ <td class="px-4 py-3 text-sm">Spanish Support Team</td>
634
+ <td class="px-4 py-3 text-sm">
635
+ <button class="text-gray-500 hover:text-primary mr-2">
636
+ <i class="fas fa-edit"></i>
637
+ </button>
638
+ <button class="text-gray-500 hover:text-red-500">
639
+ <i class="fas fa-trash"></i>
640
+ </button>
641
+ </td>
642
+ </tr>
643
+ <tr class="border-b border-gray-700">
644
+ <td class="px-4 py-3 text-sm">3</td>
645
+ <td class="px-4 py-3 text-sm">Sentiment is "Negative"</td>
646
+ <td class="px-4 py-3 text-sm">Twitter, Email</td>
647
+ <td class="px-4 py-3 text-sm">Escalation Team</td>
648
+ <td class="px-4 py-3 text-sm">
649
+ <button class="text-gray-500 hover:text-primary mr-2">
650
+ <i class="fas fa-edit"></i>
651
+ </button>
652
+ <button class="text-gray-500 hover:text-red-500">
653
+ <i class="fas fa-trash"></i>
654
+ </button>
655
+ </td>
656
+ </tr>
657
+ <tr>
658
+ <td class="px-4 py-3 text-sm">4</td>
659
+ <td class="px-4 py-3 text-sm">Default Route</td>
660
+ <td class="px-4 py-3 text-sm">All</td>
661
+ <td class="px-4 py-3 text-sm">General Support Queue</td>
662
+ <td class="px-4 py-3 text-sm">
663
+ <button class="text-gray-500 hover:text-primary mr-2">
664
+ <i class="fas fa-edit"></i>
665
+ </button>
666
+ <button class="text-gray-500 hover:text-red-500">
667
+ <i class="fas fa-trash"></i>
668
+ </button>
669
+ </td>
670
+ </tr>
671
+ </tbody>
672
+ </table>
673
+ </div>
674
+ </div>
675
+
676
+ <div>
677
+ <h4 class="font-medium mb-4">Advanced Routing Options</h4>
678
+
679
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
680
+ <div>
681
+ <label class="block text-sm font-medium mb-2">Load Balancing Strategy</label>
682
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
683
+ <option>Round Robin</option>
684
+ <option selected>Least Connections</option>
685
+ <option>Weighted Distribution</option>
686
+ <option>Priority Based</option>
687
+ </select>
688
+ </div>
689
+
690
+ <div>
691
+ <label class="block text-sm font-medium mb-2">Failover Strategy</label>
692
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
693
+ <option selected>Automatic Retry</option>
694
+ <option>Fallback Channel</option>
695
+ <option>Dead Letter Queue</option>
696
+ <option>Notify Admin</option>
697
+ </select>
698
+ </div>
699
+
700
+ <div>
701
+ <label class="block text-sm font-medium mb-2">Timeout (ms)</label>
702
+ <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="5000">
703
+ </div>
704
+
705
+ <div>
706
+ <label class="block text-sm font-medium mb-2">Max Retries</label>
707
+ <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="3">
708
+ </div>
709
+ </div>
710
+ </div>
711
+ </div>
712
+ </div>
713
+
714
+ <!-- Processing Pipeline -->
715
+ <div id="processing" class="config-section mb-6">
716
+ <div class="config-header flex items-center justify-between">
717
+ <h3 class="font-medium flex items-center">
718
+ <i class="fas fa-microchip mr-2 text-primary"></i> Processing Pipeline
719
+ </h3>
720
+ <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
721
+ </div>
722
+ <div class="config-content">
723
+ <div class="mb-6">
724
+ <h4 class="font-medium mb-4">Pipeline Stages</h4>
725
+
726
+ <div class="space-y-4">
727
+ <!-- Stage 1 -->
728
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
729
+ <div class="flex items-center justify-between mb-3">
730
+ <div class="flex items-center">
731
+ <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
732
+ <span class="text-primary font-mono">1</span>
733
+ </div>
734
+ <span class="font-medium">Message Validation</span>
735
+ </div>
736
+ <div class="flex items-center space-x-2">
737
+ <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span>
738
+ <button class="text-gray-500 hover:text-light">
739
+ <i class="fas fa-ellipsis-v"></i>
740
+ </button>
741
+ </div>
742
+ </div>
743
+ <div class="text-sm text-gray-400 mb-3 pl-11">
744
+ Validates incoming messages for required fields and format compliance.
745
+ </div>
746
+ <div class="flex items-center space-x-4 pl-11">
747
+ <div class="text-xs text-gray-500">
748
+ <i class="fas fa-clock mr-1"></i> Avg: 12ms
749
+ </div>
750
+ <div class="text-xs text-gray-500">
751
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 98% success
752
+ </div>
753
+ </div>
754
+ </div>
755
+
756
+ <!-- Stage 2 -->
757
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
758
+ <div class="flex items-center justify-between mb-3">
759
+ <div class="flex items-center">
760
+ <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
761
+ <span class="text-primary font-mono">2</span>
762
+ </div>
763
+ <span class="font-medium">Language Detection</span>
764
+ </div>
765
+ <div class="flex items-center space-x-2">
766
+ <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span>
767
+ <button class="text-gray-500 hover:text-light">
768
+ <i class="fas fa-ellipsis-v"></i>
769
+ </button>
770
+ </div>
771
+ </div>
772
+ <div class="text-sm text-gray-400 mb-3 pl-11">
773
+ Identifies the language of the message content for proper routing.
774
+ </div>
775
+ <div class="flex items-center space-x-4 pl-11">
776
+ <div class="text-xs text-gray-500">
777
+ <i class="fas fa-clock mr-1"></i> Avg: 45ms
778
+ </div>
779
+ <div class="text-xs text-gray-500">
780
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 94% accuracy
781
+ </div>
782
+ </div>
783
+ </div>
784
+
785
+ <!-- Stage 3 -->
786
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
787
+ <div class="flex items-center justify-between mb-3">
788
+ <div class="flex items-center">
789
+ <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
790
+ <span class="text-primary font-mono">3</span>
791
+ </div>
792
+ <span class="font-medium">Sentiment Analysis</span>
793
+ </div>
794
+ <div class="flex items-center space-x-2">
795
+ <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span>
796
+ <button class="text-gray-500 hover:text-light">
797
+ <i class="fas fa-ellipsis-v"></i>
798
+ </button>
799
+ </div>
800
+ </div>
801
+ <div class="text-sm text-gray-400 mb-3 pl-11">
802
+ Analyzes the emotional tone of messages for priority handling.
803
+ </div>
804
+ <div class="flex items-center space-x-4 pl-11">
805
+ <div class="text-xs text-gray-500">
806
+ <i class="fas fa-clock mr-1"></i> Avg: 78ms
807
+ </div>
808
+ <div class="text-xs text-gray-500">
809
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 89% accuracy
810
+ </div>
811
+ </div>
812
+ </div>
813
+
814
+ <!-- Stage 4 -->
815
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
816
+ <div class="flex items-center justify-between mb-3">
817
+ <div class="flex items-center">
818
+ <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
819
+ <span class="text-primary font-mono">4</span>
820
+ </div>
821
+ <span class="font-medium">Content Classification</span>
822
+ </div>
823
+ <div class="flex items-center space-x-2">
824
+ <span class="status-active text-xs px-2 py-0.5 rounded-full">Active</span>
825
+ <button class="text-gray-500 hover:text-light">
826
+ <i class="fas fa-ellipsis-v"></i>
827
+ </button>
828
+ </div>
829
+ </div>
830
+ <div class="text-sm text-gray-400 mb-3 pl-11">
831
+ Categorizes messages into predefined topics for routing.
832
+ </div>
833
+ <div class="flex items-center space-x-4 pl-11">
834
+ <div class="text-xs text-gray-500">
835
+ <i class="fas fa-clock mr-1"></i> Avg: 112ms
836
+ </div>
837
+ <div class="text-xs text-gray-500">
838
+ <i class="fas fa-bolt mr-1 text-yellow-500"></i> 92% accuracy
839
+ </div>
840
+ </div>
841
+ </div>
842
+
843
+ <!-- Add Stage Button -->
844
+ <div class="flex justify-center">
845
+ <button class="text-sm bg-primary hover:bg-opacity-90 text-dark px-4 py-2 rounded transition-all flex items-center">
846
+ <i class="fas fa-plus mr-2"></i> Add Processing Stage
847
+ </button>
848
+ </div>
849
+ </div>
850
+ </div>
851
+
852
+ <div>
853
+ <h4 class="font-medium mb-4">Advanced Processing Options</h4>
854
+
855
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
856
+ <div>
857
+ <label class="block text-sm font-medium mb-2">Max Processing Time (ms)</label>
858
+ <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="500">
859
+ </div>
860
+
861
+ <div>
862
+ <label class="block text-sm font-medium mb-2">Batch Size</label>
863
+ <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="50">
864
+ </div>
865
+
866
+ <div>
867
+ <label class="block text-sm font-medium mb-2">Concurrency Limit</label>
868
+ <div class="flex items-center">
869
+ <input type="range" min="1" max="100" value="20" class="slider-thumb w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
870
+ <span class="ml-3 text-sm">20</span>
871
+ </div>
872
+ </div>
873
+
874
+ <div>
875
+ <label class="block text-sm font-medium mb-2">Error Handling</label>
876
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
877
+ <option>Continue on error</option>
878
+ <option selected>Skip to next stage</option>
879
+ <option>Stop processing</option>
880
+ <option>Retry with backoff</option>
881
+ </select>
882
+ </div>
883
+
884
+ <div class="md:col-span-2">
885
+ <label class="block text-sm font-medium mb-2">Custom Processing Script</label>
886
+ <div class="code-block bg-gray-900 border border-gray-700 rounded-md p-4 font-mono text-sm">
887
+ <div class="text-gray-500 mb-2">// Add custom JavaScript processing logic here</div>
888
+ <div class="text-gray-400">
889
+ <span class="text-purple-500">function</span> <span class="text-primary">processMessage</span>(message) {<br>
890
+ &nbsp;&nbsp;<span class="text-gray-500">// Your custom logic</span><br>
891
+ &nbsp;&nbsp;<span class="text-purple-500">return</span> message;<br>
892
+ }
893
+ </div>
894
+ </div>
895
+ </div>
896
+ </div>
897
+ </div>
898
+ </div>
899
+ </div>
900
+
901
+ <!-- Monitoring & Alerts -->
902
+ <div id="monitoring" class="config-section mb-6">
903
+ <div class="config-header flex items-center justify-between">
904
+ <h3 class="font-medium flex items-center">
905
+ <i class="fas fa-chart-line mr-2 text-primary"></i> Monitoring & Alerts
906
+ </h3>
907
+ <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
908
+ </div>
909
+ <div class="config-content">
910
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
911
+ <div>
912
+ <h4 class="font-medium mb-4">Performance Metrics</h4>
913
+
914
+ <div class="space-y-4">
915
+ <div class="flex items-center justify-between">
916
+ <label class="text-sm font-medium">Enable Real-time Monitoring</label>
917
+ <label class="relative inline-flex items-center cursor-pointer">
918
+ <input type="checkbox" class="sr-only peer" checked>
919
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
920
+ </label>
921
+ </div>
922
+
923
+ <div>
924
+ <label class="block text-sm font-medium mb-2">Metrics Collection Interval</label>
925
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
926
+ <option>1 second</option>
927
+ <option>5 seconds</option>
928
+ <option selected>15 seconds</option>
929
+ <option>30 seconds</option>
930
+ <option>1 minute</option>
931
+ </select>
932
+ </div>
933
+
934
+ <div>
935
+ <label class="block text-sm font-medium mb-2">Retention Period</label>
936
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
937
+ <option>1 day</option>
938
+ <option>7 days</option>
939
+ <option selected>30 days</option>
940
+ <option>90 days</option>
941
+ <option>1 year</option>
942
+ </select>
943
+ </div>
944
+ </div>
945
+ </div>
946
+
947
+ <div>
948
+ <h4 class="font-medium mb-4">Alert Configuration</h4>
949
+
950
+ <div class="space-y-4">
951
+ <div>
952
+ <label class="block text-sm font-medium mb-2">Error Threshold</label>
953
+ <div class="flex items-center">
954
+ <input type="range" min="0" max="100" value="10" class="slider-thumb w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
955
+ <span class="ml-3 text-sm">10%</span>
956
+ </div>
957
+ </div>
958
+
959
+ <div>
960
+ <label class="block text-sm font-medium mb-2">Latency Threshold (ms)</label>
961
+ <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="500">
962
+ </div>
963
+
964
+ <div>
965
+ <label class="block text-sm font-medium mb-2">Notification Channels</label>
966
+ <div class="space-y-2">
967
+ <label class="inline-flex items-center">
968
+ <input type="checkbox" class="form-checkbox text-primary" checked>
969
+ <span class="ml-2">Email</span>
970
+ </label>
971
+ <label class="inline-flex items-center">
972
+ <input type="checkbox" class="form-checkbox text-primary" checked>
973
+ <span class="ml-2">Slack</span>
974
+ </label>
975
+ <label class="inline-flex items-center">
976
+ <input type="checkbox" class="form-checkbox text-primary">
977
+ <span class="ml-2">SMS</span>
978
+ </label>
979
+ <label class="inline-flex items-center">
980
+ <input type="checkbox" class="form-checkbox text-primary">
981
+ <span class="ml-2">Webhook</span>
982
+ </label>
983
+ </div>
984
+ </div>
985
+ </div>
986
+ </div>
987
+
988
+ <div class="md:col-span-2">
989
+ <h4 class="font-medium mb-4">Current Performance</h4>
990
+
991
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
992
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
993
+ <div class="text-sm text-gray-400 mb-1">Message Throughput</div>
994
+ <div class="text-xl font-bold">1,248 <span class="text-sm text-gray-500">msg/min</span></div>
995
+ <div class="text-xs text-green-500 mt-1">
996
+ <i class="fas fa-arrow-up mr-1"></i> 12% from last hour
997
+ </div>
998
+ </div>
999
+
1000
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
1001
+ <div class="text-sm text-gray-400 mb-1">Avg Processing Time</div>
1002
+ <div class="text-xl font-bold">142 <span class="text-sm text-gray-500">ms</span></div>
1003
+ <div class="text-xs text-red-500 mt-1">
1004
+ <i class="fas fa-arrow-up mr-1"></i> 8% from last hour
1005
+ </div>
1006
+ </div>
1007
+
1008
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
1009
+ <div class="text-sm text-gray-400 mb-1">Error Rate</div>
1010
+ <div class="text-xl font-bold">2.4 <span class="text-sm text-gray-500">%</span></div>
1011
+ <div class="text-xs text-green-500 mt-1">
1012
+ <i class="fas fa-arrow-down mr-1"></i> 0.6% from last hour
1013
+ </div>
1014
+ </div>
1015
+ </div>
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+
1021
+ <!-- API Integration -->
1022
+ <div id="api" class="config-section mb-6">
1023
+ <div class="config-header flex items-center justify-between">
1024
+ <h3 class="font-medium flex items-center">
1025
+ <i class="fas fa-code mr-2 text-primary"></i> API Integration
1026
+ </h3>
1027
+ <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
1028
+ </div>
1029
+ <div class="config-content">
1030
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1031
+ <div>
1032
+ <h4 class="font-medium mb-4">REST API Configuration</h4>
1033
+
1034
+ <div class="space-y-4">
1035
+ <div>
1036
+ <label class="block text-sm font-medium mb-2">API Base URL</label>
1037
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="https://api.agentbuilder.com/v1/mcp">
1038
+ </div>
1039
+
1040
+ <div>
1041
+ <label class="block text-sm font-medium mb-2">Authentication Method</label>
1042
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
1043
+ <option>API Key</option>
1044
+ <option selected>OAuth 2.0</option>
1045
+ <option>JWT</option>
1046
+ <option>Basic Auth</option>
1047
+ </select>
1048
+ </div>
1049
+
1050
+ <div>
1051
+ <label class="block text-sm font-medium mb-2">API Key</label>
1052
+ <div class="flex">
1053
+ <input type="password" class="flex-1 bg-gray-800 border border-gray-700 rounded-l-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="sk_live_1234567890abcdef">
1054
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 rounded-r-md">
1055
+ <i class="fas fa-eye"></i>
1056
+ </button>
1057
+ </div>
1058
+ </div>
1059
+
1060
+ <div>
1061
+ <label class="block text-sm font-medium mb-2">Rate Limit</label>
1062
+ <div class="flex items-center space-x-2">
1063
+ <input type="number" class="w-20 bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="100">
1064
+ <span class="text-sm text-gray-500">requests per minute</span>
1065
+ </div>
1066
+ </div>
1067
+ </div>
1068
+ </div>
1069
+
1070
+ <div>
1071
+ <h4 class="font-medium mb-4">Webhook Configuration</h4>
1072
+
1073
+ <div class="space-y-4">
1074
+ <div>
1075
+ <label class="block text-sm font-medium mb-2">Webhook URL</label>
1076
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="https://webhook.agentbuilder.com/callback">
1077
+ </div>
1078
+
1079
+ <div>
1080
+ <label class="block text-sm font-medium mb-2">Events to Subscribe</label>
1081
+ <div class="space-y-2">
1082
+ <label class="inline-flex items-center">
1083
+ <input type="checkbox" class="form-checkbox text-primary" checked>
1084
+ <span class="ml-2">Message Received</span>
1085
+ </label>
1086
+ <label class="inline-flex items-center">
1087
+ <input type="checkbox" class="form-checkbox text-primary" checked>
1088
+ <span class="ml-2">Message Processed</span>
1089
+ </label>
1090
+ <label class="inline-flex items-center">
1091
+ <input type="checkbox" class="form-checkbox text-primary">
1092
+ <span class="ml-2">Error Occurred</span>
1093
+ </label>
1094
+ <label class="inline-flex items-center">
1095
+ <input type="checkbox" class="form-checkbox text-primary">
1096
+ <span class="ml-2">Status Change</span>
1097
+ </label>
1098
+ </div>
1099
+ </div>
1100
+
1101
+ <div>
1102
+ <label class="block text-sm font-medium mb-2">Retry Policy</label>
1103
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
1104
+ <option>No retry</option>
1105
+ <option selected>Linear (3 attempts)</option>
1106
+ <option>Exponential backoff</option>
1107
+ </select>
1108
+ </div>
1109
+
1110
+ <div>
1111
+ <label class="block text-sm font-medium mb-2">Secret Token</label>
1112
+ <input type="password" class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" value="secret_token_123">
1113
+ </div>
1114
+ </div>
1115
+ </div>
1116
+
1117
+ <div class="md:col-span-2">
1118
+ <h4 class="font-medium mb-4">API Documentation</h4>
1119
+
1120
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
1121
+ <div class="flex items-center justify-between mb-3">
1122
+ <div class="flex items-center">
1123
+ <i class="fas fa-book text-primary mr-2"></i>
1124
+ <span class="font-medium">MCP API Reference</span>
1125
+ </div>
1126
+ <a href="#" class="text-sm text-primary hover:underline">View Full Documentation</a>
1127
+ </div>
1128
+ <div class="text-sm text-gray-400 mb-3">
1129
+ Complete API reference for integrating with this MCP instance programmatically.
1130
+ </div>
1131
+ <div class="flex flex-wrap gap-2">
1132
+ <a href="#" class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">
1133
+ <i class="fas fa-code mr-1"></i> cURL Examples
1134
+ </a>
1135
+ <a href="#" class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">
1136
+ <i class="fab fa-js mr-1"></i> JavaScript SDK
1137
+ </a>
1138
+ <a href="#" class="text-xs bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">
1139
+ <i class="fab fa-python mr-1"></i> Python Library
1140
+ </a>
1141
+ </div>
1142
+ </div>
1143
+ </div>
1144
+ </div>
1145
+ </div>
1146
+ </div>
1147
+
1148
+ <!-- Security Settings -->
1149
+ <div id="security" class="config-section mb-6">
1150
+ <div class="config-header flex items-center justify-between">
1151
+ <h3 class="font-medium flex items-center">
1152
+ <i class="fas fa-lock mr-2 text-primary"></i> Security Settings
1153
+ </h3>
1154
+ <i class="fas fa-chevron-down text-gray-500 transition-transform duration-200"></i>
1155
+ </div>
1156
+ <div class="config-content">
1157
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1158
+ <div>
1159
+ <h4 class="font-medium mb-4">Authentication</h4>
1160
+
1161
+ <div class="space-y-4">
1162
+ <div>
1163
+ <label class="block text-sm font-medium mb-2">Require Authentication</label>
1164
+ <label class="relative inline-flex items-center cursor-pointer">
1165
+ <input type="checkbox" class="sr-only peer" checked>
1166
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
1167
+ </label>
1168
+ </div>
1169
+
1170
+ <div>
1171
+ <label class="block text-sm font-medium mb-2">Allowed IP Ranges</label>
1172
+ <textarea class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent h-24">192.168.1.0/24
1173
+ 10.0.0.0/8
1174
+ 172.16.0.0/12</textarea>
1175
+ <div class="text-xs text-gray-500 mt-1">Enter one IP range per line</div>
1176
+ </div>
1177
+
1178
+ <div>
1179
+ <label class="block text-sm font-medium mb-2">Session Timeout</label>
1180
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
1181
+ <option>15 minutes</option>
1182
+ <option>30 minutes</option>
1183
+ <option selected>1 hour</option>
1184
+ <option>4 hours</option>
1185
+ <option>Never</option>
1186
+ </select>
1187
+ </div>
1188
+ </div>
1189
+ </div>
1190
+
1191
+ <div>
1192
+ <h4 class="font-medium mb-4">Data Protection</h4>
1193
+
1194
+ <div class="space-y-4">
1195
+ <div>
1196
+ <label class="block text-sm font-medium mb-2">Data Encryption</label>
1197
+ <label class="relative inline-flex items-center cursor-pointer">
1198
+ <input type="checkbox" class="sr-only peer" checked>
1199
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
1200
+ </label>
1201
+ </div>
1202
+
1203
+ <div>
1204
+ <label class="block text-sm font-medium mb-2">Encryption Method</label>
1205
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent" disabled>
1206
+ <option selected>AES-256</option>
1207
+ <option>RSA-4096</option>
1208
+ </select>
1209
+ </div>
1210
+
1211
+ <div>
1212
+ <label class="block text-sm font-medium mb-2">Data Retention</label>
1213
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent">
1214
+ <option>7 days</option>
1215
+ <option selected>30 days</option>
1216
+ <option>90 days</option>
1217
+ <option>1 year</option>
1218
+ <option>Indefinitely</option>
1219
+ </select>
1220
+ </div>
1221
+ </div>
1222
+ </div>
1223
+
1224
+ <div class="md:col-span-2">
1225
+ <h4 class="font-medium mb-4">Audit Log</h4>
1226
+
1227
+ <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
1228
+ <div class="flex items-center justify-between mb-3">
1229
+ <div class="flex items-center">
1230
+ <i class="fas fa-history text-primary mr-2"></i>
1231
+ <span class="font-medium">Recent Activity</span>
1232
+ </div>
1233
+ <a href="#" class="text-sm text-primary hover:underline">View Full Log</a>
1234
+ </div>
1235
+
1236
+ <div class="overflow-x-auto">
1237
+ <table class="min-w-full">
1238
+ <thead>
1239
+ <tr class="text-left text-xs text-gray-500">
1240
+ <th class="pb-2">Timestamp</th>
1241
+ <th class="pb-2">User</th>
1242
+ <th class="pb-2">Action</th>
1243
+ <th class="pb-2">Details</th>
1244
+ </tr>
1245
+ </thead>
1246
+ <tbody class="text-sm">
1247
+ <tr class="border-b border-gray-700">
1248
+ <td class="py-2">2023-06-15 14:32:10</td>
1249
+ <td class="py-2">john.doe</td>
1250
+ <td class="py-2">Configuration Updated</td>
1251
+ <td class="py-2">Changed routing rules</td>
1252
+ </tr>
1253
+ <tr class="border-b border-gray-700">
1254
+ <td class="py-2">2023-06-15 13:45:22</td>
1255
+ <td class="py-2">system</td>
1256
+ <td class="py-2">Processor Restarted</td>
1257
+ <td class="py-2">Manual restart</td>
1258
+ </tr>
1259
+ <tr class="border-b border-gray-700">
1260
+ <td class="py-2">2023-06-15 11:20:05</td>
1261
+ <td class="py-2">jane.smith</td>
1262
+ <td class="py-2">Channel Added</td>
1263
+ <td class="py-2">Twitter input channel</td>
1264
+ </tr>
1265
+ <tr>
1266
+ <td class="py-2">2023-06-15 09:15:33</td>
1267
+ <td class="py-2">john.doe</td>
1268
+ <td class="py-2">Security Settings Updated</td>
1269
+ <td class="py-2">Enabled data encryption</td>
1270
+ </tr>
1271
+ </tbody>
1272
+ </table>
1273
+ </div>
1274
+ </div>
1275
+ </div>
1276
+ </div>
1277
+ </div>
1278
+ </div>
1279
+
1280
+ <!-- Save/Cancel Buttons -->
1281
+ <div class="flex justify-end space-x-4 mt-8">
1282
+ <button class="bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-md px-6 py-2 text-sm transition-all">
1283
+ Cancel
1284
+ </button>
1285
+ <button class="bg-primary hover:bg-opacity-90 text-dark font-medium rounded-md px-6 py-2 transition-all">
1286
+ <i class="fas fa-save mr-2"></i> Save Configuration
1287
+ </button>
1288
+ </div>
1289
+ </div>
1290
+ </div>
1291
+ </div>
1292
+
1293
+ <script>
1294
+ // Toggle config sections
1295
+ document.querySelectorAll('.config-header').forEach(header => {
1296
+ header.addEventListener('click', function() {
1297
+ const content = this.nextElementSibling;
1298
+ const icon = this.querySelector('.fa-chevron-down');
1299
+
1300
+ if (content.style.display === 'none') {
1301
+ content.style.display = 'block';
1302
+ icon.classList.remove('rotate-180');
1303
+ } else {
1304
+ content.style.display = 'none';
1305
+ icon.classList.add('rotate-180');
1306
+ }
1307
+ });
1308
+ });
1309
+
1310
+ // Initialize all sections as open
1311
+ document.querySelectorAll('.config-content').forEach(content => {
1312
+ content.style.display = 'block';
1313
+ });
1314
+
1315
+ // Toggle password visibility
1316
+ document.querySelectorAll('.fa-eye').forEach(eye => {
1317
+ eye.addEventListener('click', function() {
1318
+ const input = this.parentNode.querySelector('input');
1319
+ if (input.type === 'password') {
1320
+ input.type = 'text';
1321
+ this.classList.remove('fa-eye');
1322
+ this.classList.add('fa-eye-slash');
1323
+ } else {
1324
+ input.type = 'password';
1325
+ this.classList.remove('fa-eye-slash');
1326
+ this.classList.add('fa-eye');
1327
+ }
1328
+ });
1329
+ });
1330
+
1331
+ // Update slider value display
1332
+ document.querySelectorAll('input[type="range"]').forEach(slider => {
1333
+ const valueDisplay = slider.nextElementSibling;
1334
+ slider.addEventListener('input', function() {
1335
+ valueDisplay.textContent = this.value + (this.getAttribute('min') === '0' ? '%' : '');
1336
+ });
1337
+ });
1338
+
1339
+ // Sidebar navigation
1340
+ const sidebarItems = document.querySelectorAll('.sidebar-item');
1341
+ sidebarItems.forEach(item => {
1342
+ item.addEventListener('click', function(e) {
1343
+ e.preventDefault();
1344
+ const targetId = this.getAttribute('href');
1345
+ const targetSection = document.querySelector(targetId);
1346
+
1347
+ if (targetSection) {
1348
+ // Close all sections first
1349
+ document.querySelectorAll('.config-content').forEach(content => {
1350
+ content.style.display = 'none';
1351
+ content.previousElementSibling.querySelector('.fa-chevron-down').classList.remove('rotate-180');
1352
+ });
1353
+
1354
+ // Open target section
1355
+ targetSection.querySelector('.config-content').style.display = 'block';
1356
+ targetSection.querySelector('.fa-chevron-down').classList.add('rotate-180');
1357
+
1358
+ // Scroll to section
1359
+ targetSection.scrollIntoView({ behavior: 'smooth' });
1360
+ }
1361
+
1362
+ // Update active sidebar item
1363
+ sidebarItems.forEach(i => i.classList.remove('active'));
1364
+ this.classList.add('active');
1365
+ });
1366
+ });
1367
+ </script>
1368
+ <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=brainable/se4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1369
+ </html>