Hugging Face's logo

Spaces:
adowu
/
awwagent
Running

App Files Community
adowu commited on
Commit
276704d
·
verified ·
1 Parent(s): 29c9563

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +483 -90
index.html CHANGED
@@ -12,6 +12,7 @@
12
  }
13
  .block-item {
14
  transition: all 0.2s ease;
 
15
  }
16
  .block-item:hover {
17
  transform: translateY(-2px);
@@ -20,6 +21,8 @@
20
  .workspace {
21
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
22
  background-size: 20px 20px;
 
 
23
  }
24
  .connection-path {
25
  stroke: #6366f1;
@@ -29,6 +32,8 @@
29
  }
30
  .agent-block {
31
  transition: all 0.3s ease;
 
 
32
  }
33
  .agent-block:hover {
34
  transform: scale(1.02);
@@ -48,6 +53,33 @@
48
  33% { content: '..'; }
49
  66% { content: '...'; }
50
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  </style>
52
  </head>
53
  <body class="bg-gray-50 font-sans text-gray-800">
@@ -64,7 +96,7 @@
64
  </div>
65
 
66
  <div class="p-4 border-b border-indigo-800">
67
- <button class="w-full bg-indigo-700 hover:bg-indigo-600 text-white py-2 px-4 rounded-lg flex items-center justify-center transition">
68
  <i class="fas fa-plus mr-2"></i> New Agent
69
  </button>
70
  </div>
@@ -143,7 +175,7 @@
143
  <!-- Top Navigation -->
144
  <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
145
  <div class="flex items-center">
146
- <button class="mr-4 text-gray-500 hover:text-gray-700">
147
  <i class="fas fa-bars"></i>
148
  </button>
149
  <h2 class="text-lg font-semibold">Agent Architect</h2>
@@ -156,7 +188,7 @@
156
  <button class="text-gray-500 hover:text-gray-700">
157
  <i class="fas fa-bell"></i>
158
  </button>
159
- <button class="bg-indigo-600 text-white py-1 px-3 rounded-lg text-sm hover:bg-indigo-700 transition">
160
  <i class="fas fa-play mr-1"></i> Run Agent
161
  </button>
162
  </div>
@@ -203,7 +235,7 @@
203
  <div>
204
  <h3 class="font-medium text-gray-700 mb-3">Available Blocks</h3>
205
  <div class="space-y-3">
206
- <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
207
  <div class="flex items-center mb-2">
208
  <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
209
  <i class="fas fa-comment text-blue-500"></i>
@@ -213,7 +245,7 @@
213
  <p class="text-xs text-gray-500">Accepts user text input for processing</p>
214
  </div>
215
 
216
- <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
217
  <div class="flex items-center mb-2">
218
  <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
219
  <i class="fas fa-brain text-purple-500"></i>
@@ -223,7 +255,7 @@
223
  <p class="text-xs text-gray-500">Processes text with a large language model</p>
224
  </div>
225
 
226
- <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
227
  <div class="flex items-center mb-2">
228
  <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
229
  <i class="fas fa-database text-green-500"></i>
@@ -233,7 +265,7 @@
233
  <p class="text-xs text-gray-500">Connects to your knowledge repository</p>
234
  </div>
235
 
236
- <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
237
  <div class="flex items-center mb-2">
238
  <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
239
  <i class="fas fa-code text-yellow-500"></i>
@@ -243,7 +275,7 @@
243
  <p class="text-xs text-gray-500">Connects to external APIs</p>
244
  </div>
245
 
246
- <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
247
  <div class="flex items-center mb-2">
248
  <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2">
249
  <i class="fas fa-image text-red-500"></i>
@@ -257,26 +289,24 @@
257
  </div>
258
 
259
  <!-- Agent Workspace -->
260
- <div class="flex-1 bg-gray-50 workspace overflow-auto relative">
261
- <svg class="absolute top-0 left-0 w-full h-full pointer-events-none" style="z-index: 0;">
262
  <defs>
263
  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
264
  <polygon points="0 0, 10 3.5, 0 7" fill="#6366f1" />
265
  </marker>
266
  </defs>
267
- <path class="connection-path" d="M200,150 C300,150 400,250 500,250" />
268
- <path class="connection-path" d="M500,250 C600,250 700,350 800,350" />
269
  </svg>
270
 
271
  <div class="p-6">
272
  <div class="max-w-4xl mx-auto">
273
- <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
274
  <h3 class="text-lg font-semibold mb-4">Agent Architect</h3>
275
  <p class="text-gray-600 mb-4">Describe what you want your AI agent to do in natural language, and Agent Architect will automatically generate the workflow.</p>
276
 
277
  <div class="relative">
278
- <textarea class="w-full border border-gray-300 rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="4" placeholder="Example: Create a customer support chatbot that can answer questions about our products, check order status, and escalate to human support when needed..."></textarea>
279
- <button class="absolute bottom-4 right-4 bg-indigo-600 text-white p-2 rounded-lg hover:bg-indigo-700 transition">
280
  <i class="fas fa-magic"></i> Generate
281
  </button>
282
  </div>
@@ -284,23 +314,24 @@
284
 
285
  <div class="flex justify-center mb-6">
286
  <div class="flex items-center space-x-4">
287
- <button class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
288
  <i class="fas fa-layer-group mr-2 text-indigo-500"></i>
289
  <span>Add Layer</span>
290
  </button>
291
- <button class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
292
  <i class="fas fa-robot mr-2 text-indigo-500"></i>
293
  <span>Auto-Connect</span>
294
  </button>
295
- <button class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
296
  <i class="fas fa-bolt mr-2 text-indigo-500"></i>
297
  <span>Optimize</span>
298
  </button>
299
  </div>
300
  </div>
301
 
302
- <div class="grid grid-cols-3 gap-6">
303
- <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-blue-200 relative" style="transform: translate(200px, 150px); z-index: 10;">
 
304
  <div class="absolute -top-2 -right-2 bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
305
  <i class="fas fa-play"></i>
306
  </div>
@@ -312,10 +343,10 @@
312
  </div>
313
  <p class="text-xs text-gray-500 mb-3">Accepts user questions</p>
314
  <div class="text-xs text-gray-400">Output: <span class="text-gray-600">User query text</span></div>
315
- <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-500 rounded-full"></div>
316
  </div>
317
 
318
- <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-purple-200 relative" style="transform: translate(500px, 250px); z-index: 10;">
319
  <div class="flex items-center mb-2">
320
  <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
321
  <i class="fas fa-brain text-purple-500"></i>
@@ -325,11 +356,11 @@
325
  <p class="text-xs text-gray-500 mb-3">Processes user query with GPT-4</p>
326
  <div class="text-xs text-gray-400 mb-1">Input: <span class="text-gray-600">User query text</span></div>
327
  <div class="text-xs text-gray-400">Output: <span class="text-gray-600">Processed response</span></div>
328
- <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
329
- <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
330
  </div>
331
 
332
- <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-green-200 relative" style="transform: translate(800px, 350px); z-index: 10;">
333
  <div class="flex items-center mb-2">
334
  <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
335
  <i class="fas fa-comments text-green-500"></i>
@@ -338,7 +369,7 @@
338
  </div>
339
  <p class="text-xs text-gray-500 mb-3">Returns response to user</p>
340
  <div class="text-xs text-gray-400">Input: <span class="text-gray-600">Processed response</span></div>
341
- <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-green-500 rounded-full"></div>
342
  </div>
343
  </div>
344
  </div>
@@ -349,19 +380,19 @@
349
  <div class="w-80 bg-white border-l border-gray-200 flex flex-col">
350
  <div class="border-b border-gray-200 p-4">
351
  <div class="flex space-x-2">
352
- <button class="flex-1 py-2 px-3 rounded-lg bg-indigo-600 text-white text-sm font-medium">
353
  Configuration
354
  </button>
355
- <button class="flex-1 py-2 px-3 rounded-lg bg-white border border-gray-200 text-sm font-medium hover:bg-gray-50">
356
  Testing
357
  </button>
358
  </div>
359
  </div>
360
 
361
- <div class="flex-1 overflow-y-auto p-4">
362
  <div class="mb-6">
363
  <h3 class="font-medium text-gray-700 mb-3">Selected Block</h3>
364
- <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
365
  <div class="flex items-center mb-3">
366
  <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
367
  <i class="fas fa-brain text-purple-500"></i>
@@ -375,7 +406,7 @@
375
  <div class="space-y-4">
376
  <div>
377
  <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
378
- <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
379
  <option>GPT-4</option>
380
  <option>GPT-3.5</option>
381
  <option>Claude-2</option>
@@ -385,7 +416,7 @@
385
 
386
  <div>
387
  <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
388
- <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full">
389
  <div class="flex justify-between text-xs text-gray-500 mt-1">
390
  <span>Precise</span>
391
  <span>Creative</span>
@@ -394,12 +425,12 @@
394
 
395
  <div>
396
  <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
397
- <input type="number" value="1000" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
398
  </div>
399
 
400
  <div>
401
  <label class="block text-sm font-medium text-gray-700 mb-1">System Prompt</label>
402
- <textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" rows="3">You are a helpful customer support assistant...</textarea>
403
  </div>
404
  </div>
405
  </div>
@@ -432,10 +463,10 @@
432
  </div>
433
 
434
  <!-- Testing Chat Panel -->
435
- <div class="border-t border-gray-200 p-4 bg-gray-50">
436
  <h3 class="font-medium text-gray-700 mb-3">Test Agent</h3>
437
 
438
- <div class="bg-white rounded-lg border border-gray-200 mb-3" style="height: 200px; overflow-y: auto;">
439
  <div class="p-3 space-y-3">
440
  <div class="chat-message bg-blue-50 rounded-lg p-3 ml-auto">
441
  <div class="text-xs text-gray-500 mb-1 text-right">You</div>
@@ -452,7 +483,7 @@
452
  <p class="text-sm">What's your return policy?</p>
453
  </div>
454
 
455
- <div class="chat-message bg-gray-100 rounded-lg p-3">
456
  <div class="text-xs text-gray-500 mb-1">Agent</div>
457
  <p class="text-sm typing-indicator"></p>
458
  </div>
@@ -460,8 +491,8 @@
460
  </div>
461
 
462
  <div class="relative">
463
- <input type="text" placeholder="Type a message to test..." class="w-full border border-gray-300 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
464
- <button class="absolute right-2 top-2 text-indigo-600 hover:text-indigo-800">
465
  <i class="fas fa-paper-plane"></i>
466
  </button>
467
  </div>
@@ -472,73 +503,435 @@
472
  </div>
473
 
474
  <script>
475
- // Simple drag and drop functionality for blocks
476
  document.addEventListener('DOMContentLoaded', function() {
477
- const blocks = document.querySelectorAll('.block-item');
478
- const workspace = document.querySelector('.workspace');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
479
 
480
- blocks.forEach(block => {
481
- block.addEventListener('dragstart', function(e) {
482
- e.dataTransfer.setData('text/plain', block.innerHTML);
483
- e.dataTransfer.effectAllowed = 'copy';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
484
  });
485
- });
 
 
 
 
 
 
 
 
 
 
486
 
487
- workspace.addEventListener('dragover', function(e) {
488
  e.preventDefault();
489
  e.dataTransfer.dropEffect = 'copy';
490
- });
491
 
492
- workspace.addEventListener('drop', function(e) {
493
  e.preventDefault();
494
- const data = e.dataTransfer.getData('text/plain');
 
 
495
 
496
- const newBlock = document.createElement('div');
497
- newBlock.className = 'agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-gray-200 absolute cursor-move';
498
- newBlock.style.left = `${e.clientX - 100}px`;
499
- newBlock.style.top = `${e.clientY - 50}px`;
500
- newBlock.innerHTML = data;
501
 
502
- workspace.appendChild(newBlock);
 
503
 
504
- // Make new blocks draggable
505
- newBlock.addEventListener('mousedown', function(e) {
506
- if (e.target === newBlock || e.target.parentNode === newBlock) {
507
- let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
508
-
509
- e = e || window.event;
510
- e.preventDefault();
511
- pos3 = e.clientX;
512
- pos4 = e.clientY;
513
-
514
- document.onmouseup = closeDragElement;
515
- document.onmousemove = elementDrag;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
516
 
517
- function elementDrag(e) {
518
- e = e || window.event;
519
- e.preventDefault();
520
- pos1 = pos3 - e.clientX;
521
- pos2 = pos4 - e.clientY;
522
- pos3 = e.clientX;
523
- pos4 = e.clientY;
524
-
525
- newBlock.style.top = (newBlock.offsetTop - pos2) + "px";
526
- newBlock.style.left = (newBlock.offsetLeft - pos1) + "px";
527
- }
528
 
529
- function closeDragElement() {
530
- document.onmouseup = null;
531
- document.onmousemove = null;
532
- }
 
533
  }
534
  });
535
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
536
 
537
- // Simulate typing indicator animation
538
- setTimeout(() => {
539
- const typingIndicator = document.querySelector('.typing-indicator');
540
- typingIndicator.innerHTML = 'Our return policy allows returns within 30 days of purchase. Items must be in original condition with tags attached. Would you like me to provide more details?';
541
- }, 2000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
542
  });
543
  </script>
544
  <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=adowu/awwagent" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 
12
  }
13
  .block-item {
14
  transition: all 0.2s ease;
15
+ user-select: none;
16
  }
17
  .block-item:hover {
18
  transform: translateY(-2px);
 
21
  .workspace {
22
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
23
  background-size: 20px 20px;
24
+ position: relative;
25
+ overflow: auto;
26
  }
27
  .connection-path {
28
  stroke: #6366f1;
 
32
  }
33
  .agent-block {
34
  transition: all 0.3s ease;
35
+ position: absolute;
36
+ user-select: none;
37
  }
38
  .agent-block:hover {
39
  transform: scale(1.02);
 
53
  33% { content: '..'; }
54
  66% { content: '...'; }
55
  }
56
+ .connection-dot {
57
+ width: 12px;
58
+ height: 12px;
59
+ border-radius: 50%;
60
+ position: absolute;
61
+ cursor: pointer;
62
+ z-index: 20;
63
+ }
64
+ .connection-dot.input {
65
+ top: -6px;
66
+ left: 50%;
67
+ transform: translateX(-50%);
68
+ }
69
+ .connection-dot.output {
70
+ bottom: -6px;
71
+ left: 50%;
72
+ transform: translateX(-50%);
73
+ }
74
+ .dragging {
75
+ opacity: 0.8;
76
+ z-index: 100;
77
+ }
78
+ .connection-line {
79
+ position: absolute;
80
+ pointer-events: none;
81
+ z-index: 5;
82
+ }
83
  </style>
84
  </head>
85
  <body class="bg-gray-50 font-sans text-gray-800">
 
96
  </div>
97
 
98
  <div class="p-4 border-b border-indigo-800">
99
+ <button id="newAgentBtn" class="w-full bg-indigo-700 hover:bg-indigo-600 text-white py-2 px-4 rounded-lg flex items-center justify-center transition">
100
  <i class="fas fa-plus mr-2"></i> New Agent
101
  </button>
102
  </div>
 
175
  <!-- Top Navigation -->
176
  <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
177
  <div class="flex items-center">
178
+ <button id="toggleSidebar" class="mr-4 text-gray-500 hover:text-gray-700">
179
  <i class="fas fa-bars"></i>
180
  </button>
181
  <h2 class="text-lg font-semibold">Agent Architect</h2>
 
188
  <button class="text-gray-500 hover:text-gray-700">
189
  <i class="fas fa-bell"></i>
190
  </button>
191
+ <button id="runAgentBtn" class="bg-indigo-600 text-white py-1 px-3 rounded-lg text-sm hover:bg-indigo-700 transition">
192
  <i class="fas fa-play mr-1"></i> Run Agent
193
  </button>
194
  </div>
 
235
  <div>
236
  <h3 class="font-medium text-gray-700 mb-3">Available Blocks</h3>
237
  <div class="space-y-3">
238
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="input" data-color="blue">
239
  <div class="flex items-center mb-2">
240
  <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
241
  <i class="fas fa-comment text-blue-500"></i>
 
245
  <p class="text-xs text-gray-500">Accepts user text input for processing</p>
246
  </div>
247
 
248
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="llm" data-color="purple">
249
  <div class="flex items-center mb-2">
250
  <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
251
  <i class="fas fa-brain text-purple-500"></i>
 
255
  <p class="text-xs text-gray-500">Processes text with a large language model</p>
256
  </div>
257
 
258
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="knowledge" data-color="green">
259
  <div class="flex items-center mb-2">
260
  <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
261
  <i class="fas fa-database text-green-500"></i>
 
265
  <p class="text-xs text-gray-500">Connects to your knowledge repository</p>
266
  </div>
267
 
268
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="api" data-color="yellow">
269
  <div class="flex items-center mb-2">
270
  <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
271
  <i class="fas fa-code text-yellow-500"></i>
 
275
  <p class="text-xs text-gray-500">Connects to external APIs</p>
276
  </div>
277
 
278
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="image" data-color="red">
279
  <div class="flex items-center mb-2">
280
  <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2">
281
  <i class="fas fa-image text-red-500"></i>
 
289
  </div>
290
 
291
  <!-- Agent Workspace -->
292
+ <div id="workspace" class="flex-1 bg-gray-50 workspace overflow-auto relative">
293
+ <svg id="connections-svg" class="absolute top-0 left-0 w-full h-full pointer-events-none" style="z-index: 0;">
294
  <defs>
295
  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
296
  <polygon points="0 0, 10 3.5, 0 7" fill="#6366f1" />
297
  </marker>
298
  </defs>
 
 
299
  </svg>
300
 
301
  <div class="p-6">
302
  <div class="max-w-4xl mx-auto">
303
+ <div id="agent-description" class="bg-white rounded-xl shadow-sm p-6 mb-6">
304
  <h3 class="text-lg font-semibold mb-4">Agent Architect</h3>
305
  <p class="text-gray-600 mb-4">Describe what you want your AI agent to do in natural language, and Agent Architect will automatically generate the workflow.</p>
306
 
307
  <div class="relative">
308
+ <textarea id="agent-description-input" class="w-full border border-gray-300 rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="4" placeholder="Example: Create a customer support chatbot that can answer questions about our products, check order status, and escalate to human support when needed..."></textarea>
309
+ <button id="generate-btn" class="absolute bottom-4 right-4 bg-indigo-600 text-white p-2 rounded-lg hover:bg-indigo-700 transition">
310
  <i class="fas fa-magic"></i> Generate
311
  </button>
312
  </div>
 
314
 
315
  <div class="flex justify-center mb-6">
316
  <div class="flex items-center space-x-4">
317
+ <button id="add-layer-btn" class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
318
  <i class="fas fa-layer-group mr-2 text-indigo-500"></i>
319
  <span>Add Layer</span>
320
  </button>
321
+ <button id="auto-connect-btn" class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
322
  <i class="fas fa-robot mr-2 text-indigo-500"></i>
323
  <span>Auto-Connect</span>
324
  </button>
325
+ <button id="optimize-btn" class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
326
  <i class="fas fa-bolt mr-2 text-indigo-500"></i>
327
  <span>Optimize</span>
328
  </button>
329
  </div>
330
  </div>
331
 
332
+ <!-- Predefined blocks for demo -->
333
+ <div id="blocks-container">
334
+ <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-blue-200" style="transform: translate(200px, 150px);" data-id="block-1" data-type="input">
335
  <div class="absolute -top-2 -right-2 bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
336
  <i class="fas fa-play"></i>
337
  </div>
 
343
  </div>
344
  <p class="text-xs text-gray-500 mb-3">Accepts user questions</p>
345
  <div class="text-xs text-gray-400">Output: <span class="text-gray-600">User query text</span></div>
346
+ <div class="connection-dot output bg-blue-500" data-type="output" data-block-id="block-1"></div>
347
  </div>
348
 
349
+ <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-purple-200" style="transform: translate(500px, 250px);" data-id="block-2" data-type="llm">
350
  <div class="flex items-center mb-2">
351
  <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
352
  <i class="fas fa-brain text-purple-500"></i>
 
356
  <p class="text-xs text-gray-500 mb-3">Processes user query with GPT-4</p>
357
  <div class="text-xs text-gray-400 mb-1">Input: <span class="text-gray-600">User query text</span></div>
358
  <div class="text-xs text-gray-400">Output: <span class="text-gray-600">Processed response</span></div>
359
+ <div class="connection-dot input bg-purple-500" data-type="input" data-block-id="block-2"></div>
360
+ <div class="connection-dot output bg-purple-500" data-type="output" data-block-id="block-2"></div>
361
  </div>
362
 
363
+ <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-green-200" style="transform: translate(800px, 350px);" data-id="block-3" data-type="output">
364
  <div class="flex items-center mb-2">
365
  <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
366
  <i class="fas fa-comments text-green-500"></i>
 
369
  </div>
370
  <p class="text-xs text-gray-500 mb-3">Returns response to user</p>
371
  <div class="text-xs text-gray-400">Input: <span class="text-gray-600">Processed response</span></div>
372
+ <div class="connection-dot input bg-green-500" data-type="input" data-block-id="block-3"></div>
373
  </div>
374
  </div>
375
  </div>
 
380
  <div class="w-80 bg-white border-l border-gray-200 flex flex-col">
381
  <div class="border-b border-gray-200 p-4">
382
  <div class="flex space-x-2">
383
+ <button id="config-tab" class="flex-1 py-2 px-3 rounded-lg bg-indigo-600 text-white text-sm font-medium">
384
  Configuration
385
  </button>
386
+ <button id="test-tab" class="flex-1 py-2 px-3 rounded-lg bg-white border border-gray-200 text-sm font-medium hover:bg-gray-50">
387
  Testing
388
  </button>
389
  </div>
390
  </div>
391
 
392
+ <div id="config-panel" class="flex-1 overflow-y-auto p-4">
393
  <div class="mb-6">
394
  <h3 class="font-medium text-gray-700 mb-3">Selected Block</h3>
395
+ <div id="block-config" class="bg-gray-50 rounded-lg p-4 border border-gray-200">
396
  <div class="flex items-center mb-3">
397
  <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
398
  <i class="fas fa-brain text-purple-500"></i>
 
406
  <div class="space-y-4">
407
  <div>
408
  <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
409
+ <select id="llm-model" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
410
  <option>GPT-4</option>
411
  <option>GPT-3.5</option>
412
  <option>Claude-2</option>
 
416
 
417
  <div>
418
  <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
419
+ <input id="temperature" type="range" min="0" max="1" step="0.1" value="0.7" class="w-full">
420
  <div class="flex justify-between text-xs text-gray-500 mt-1">
421
  <span>Precise</span>
422
  <span>Creative</span>
 
425
 
426
  <div>
427
  <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
428
+ <input id="max-tokens" type="number" value="1000" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
429
  </div>
430
 
431
  <div>
432
  <label class="block text-sm font-medium text-gray-700 mb-1">System Prompt</label>
433
+ <textarea id="system-prompt" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" rows="3">You are a helpful customer support assistant...</textarea>
434
  </div>
435
  </div>
436
  </div>
 
463
  </div>
464
 
465
  <!-- Testing Chat Panel -->
466
+ <div id="test-panel" class="border-t border-gray-200 p-4 bg-gray-50 hidden">
467
  <h3 class="font-medium text-gray-700 mb-3">Test Agent</h3>
468
 
469
+ <div id="chat-container" class="bg-white rounded-lg border border-gray-200 mb-3" style="height: 200px; overflow-y: auto;">
470
  <div class="p-3 space-y-3">
471
  <div class="chat-message bg-blue-50 rounded-lg p-3 ml-auto">
472
  <div class="text-xs text-gray-500 mb-1 text-right">You</div>
 
483
  <p class="text-sm">What's your return policy?</p>
484
  </div>
485
 
486
+ <div id="typing-indicator" class="chat-message bg-gray-100 rounded-lg p-3">
487
  <div class="text-xs text-gray-500 mb-1">Agent</div>
488
  <p class="text-sm typing-indicator"></p>
489
  </div>
 
491
  </div>
492
 
493
  <div class="relative">
494
+ <input id="chat-input" type="text" placeholder="Type a message to test..." class="w-full border border-gray-300 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
495
+ <button id="send-chat-btn" class="absolute right-2 top-2 text-indigo-600 hover:text-indigo-800">
496
  <i class="fas fa-paper-plane"></i>
497
  </button>
498
  </div>
 
503
  </div>
504
 
505
  <script>
 
506
  document.addEventListener('DOMContentLoaded', function() {
507
+ // DOM elements
508
+ const workspace = document.getElementById('workspace');
509
+ const blocksContainer = document.getElementById('blocks-container');
510
+ const draggableBlocks = document.querySelectorAll('.draggable-block');
511
+ const agentBlocks = document.querySelectorAll('.agent-block');
512
+ const connectionDots = document.querySelectorAll('.connection-dot');
513
+ const connectionsSvg = document.getElementById('connections-svg');
514
+ const toggleSidebar = document.getElementById('toggleSidebar');
515
+ const sidebar = document.querySelector('.sidebar');
516
+ const configTab = document.getElementById('config-tab');
517
+ const testTab = document.getElementById('test-tab');
518
+ const configPanel = document.getElementById('config-panel');
519
+ const testPanel = document.getElementById('test-panel');
520
+ const generateBtn = document.getElementById('generate-btn');
521
+ const agentDescriptionInput = document.getElementById('agent-description-input');
522
+ const runAgentBtn = document.getElementById('runAgentBtn');
523
+ const chatInput = document.getElementById('chat-input');
524
+ const sendChatBtn = document.getElementById('send-chat-btn');
525
+ const chatContainer = document.getElementById('chat-container');
526
+ const typingIndicator = document.getElementById('typing-indicator');
527
 
528
+ // State variables
529
+ let isDragging = false;
530
+ let currentBlock = null;
531
+ let startX, startY;
532
+ let initialX, initialY;
533
+ let connections = [];
534
+ let isConnecting = false;
535
+ let startDot = null;
536
+
537
+ // Initialize the app
538
+ init();
539
+
540
+ function init() {
541
+ setupEventListeners();
542
+ drawConnections();
543
+ simulateTyping();
544
+ }
545
+
546
+ function setupEventListeners() {
547
+ // Toggle sidebar
548
+ toggleSidebar.addEventListener('click', () => {
549
+ sidebar.classList.toggle('hidden');
550
+ });
551
+
552
+ // Tab switching
553
+ configTab.addEventListener('click', () => {
554
+ configTab.classList.add('bg-indigo-600', 'text-white');
555
+ configTab.classList.remove('bg-white', 'border', 'border-gray-200');
556
+ testTab.classList.remove('bg-indigo-600', 'text-white');
557
+ testTab.classList.add('bg-white', 'border', 'border-gray-200');
558
+ configPanel.classList.remove('hidden');
559
+ testPanel.classList.add('hidden');
560
+ });
561
+
562
+ testTab.addEventListener('click', () => {
563
+ testTab.classList.add('bg-indigo-600', 'text-white');
564
+ testTab.classList.remove('bg-white', 'border', 'border-gray-200');
565
+ configTab.classList.remove('bg-indigo-600', 'text-white');
566
+ configTab.classList.add('bg-white', 'border', 'border-gray-200');
567
+ testPanel.classList.remove('hidden');
568
+ configPanel.classList.add('hidden');
569
+ });
570
+
571
+ // Generate agent from description
572
+ generateBtn.addEventListener('click', generateAgentFromDescription);
573
+
574
+ // Run agent
575
+ runAgentBtn.addEventListener('click', runAgent);
576
+
577
+ // Send chat message
578
+ sendChatBtn.addEventListener('click', sendChatMessage);
579
+ chatInput.addEventListener('keypress', (e) => {
580
+ if (e.key === 'Enter') {
581
+ sendChatMessage();
582
+ }
583
+ });
584
+
585
+ // Make library blocks draggable
586
+ draggableBlocks.forEach(block => {
587
+ block.addEventListener('dragstart', handleDragStart);
588
+ });
589
+
590
+ // Make workspace droppable
591
+ workspace.addEventListener('dragover', handleDragOver);
592
+ workspace.addEventListener('drop', handleDrop);
593
+
594
+ // Make agent blocks draggable
595
+ agentBlocks.forEach(block => {
596
+ block.addEventListener('mousedown', startDrag);
597
+ });
598
+
599
+ // Make connection dots interactive
600
+ connectionDots.forEach(dot => {
601
+ dot.addEventListener('mousedown', startConnection);
602
+ dot.addEventListener('mouseup', endConnection);
603
  });
604
+
605
+ // Handle window resize
606
+ window.addEventListener('resize', drawConnections);
607
+ }
608
+
609
+ function handleDragStart(e) {
610
+ e.dataTransfer.setData('text/plain', e.target.outerHTML);
611
+ e.dataTransfer.setData('block-type', e.target.dataset.type);
612
+ e.dataTransfer.setData('block-color', e.target.dataset.color);
613
+ e.dataTransfer.effectAllowed = 'copy';
614
+ }
615
 
616
+ function handleDragOver(e) {
617
  e.preventDefault();
618
  e.dataTransfer.dropEffect = 'copy';
619
+ }
620
 
621
+ function handleDrop(e) {
622
  e.preventDefault();
623
+ const html = e.dataTransfer.getData('text/plain');
624
+ const type = e.dataTransfer.getData('block-type');
625
+ const color = e.dataTransfer.getData('block-color');
626
 
627
+ const rect = workspace.getBoundingClientRect();
628
+ const x = e.clientX - rect.left - 100;
629
+ const y = e.clientY - rect.top - 50;
 
 
630
 
631
+ const newBlock = createBlock(html, type, color, x, y);
632
+ blocksContainer.appendChild(newBlock);
633
 
634
+ // Add event listeners to the new block
635
+ newBlock.addEventListener('mousedown', startDrag);
636
+
637
+ // Add connection dots if needed
638
+ addConnectionDots(newBlock);
639
+ }
640
+
641
+ function createBlock(html, type, color, x, y) {
642
+ const block = document.createElement('div');
643
+ block.className = `agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-${color}-200 absolute cursor-move`;
644
+ block.style.left = `${x}px`;
645
+ block.style.top = `${y}px`;
646
+ block.dataset.type = type;
647
+ block.dataset.id = `block-${Date.now()}`;
648
+ block.innerHTML = html;
649
+
650
+ // Add connection dots based on block type
651
+ if (type !== 'output') {
652
+ const outputDot = document.createElement('div');
653
+ outputDot.className = `connection-dot output bg-${color}-500`;
654
+ outputDot.dataset.type = 'output';
655
+ outputDot.dataset.blockId = block.dataset.id;
656
+ block.appendChild(outputDot);
657
+ }
658
+
659
+ if (type !== 'input') {
660
+ const inputDot = document.createElement('div');
661
+ inputDot.className = `connection-dot input bg-${color}-500`;
662
+ inputDot.dataset.type = 'input';
663
+ inputDot.dataset.blockId = block.dataset.id;
664
+ block.appendChild(inputDot);
665
+ }
666
+
667
+ return block;
668
+ }
669
+
670
+ function startDrag(e) {
671
+ if (e.target.classList.contains('connection-dot')) return;
672
+
673
+ isDragging = true;
674
+ currentBlock = e.currentTarget;
675
+ startX = e.clientX;
676
+ startY = e.clientY;
677
+ initialX = currentBlock.offsetLeft;
678
+ initialY = currentBlock.offsetTop;
679
+
680
+ currentBlock.classList.add('dragging');
681
+ document.addEventListener('mousemove', drag);
682
+ document.addEventListener('mouseup', stopDrag);
683
+ }
684
+
685
+ function drag(e) {
686
+ if (!isDragging) return;
687
+
688
+ const dx = e.clientX - startX;
689
+ const dy = e.clientY - startY;
690
+
691
+ currentBlock.style.left = `${initialX + dx}px`;
692
+ currentBlock.style.top = `${initialY + dy}px`;
693
+
694
+ drawConnections();
695
+ }
696
+
697
+ function stopDrag() {
698
+ isDragging = false;
699
+ if (currentBlock) {
700
+ currentBlock.classList.remove('dragging');
701
+ currentBlock = null;
702
+ }
703
+
704
+ document.removeEventListener('mousemove', drag);
705
+ document.removeEventListener('mouseup', stopDrag);
706
+ }
707
+
708
+ function addConnectionDots(block) {
709
+ const dots = block.querySelectorAll('.connection-dot');
710
+ dots.forEach(dot => {
711
+ dot.addEventListener('mousedown', startConnection);
712
+ dot.addEventListener('mouseup', endConnection);
713
+ });
714
+ }
715
+
716
+ function startConnection(e) {
717
+ e.stopPropagation();
718
+ isConnecting = true;
719
+ startDot = e.target;
720
+
721
+ // Create a temporary connection line
722
+ const tempLine = document.createElement('div');
723
+ tempLine.className = 'connection-line';
724
+ tempLine.id = 'temp-connection';
725
+ workspace.appendChild(tempLine);
726
+
727
+ document.addEventListener('mousemove', drawTempConnection);
728
+ document.addEventListener('mouseup', stopConnection);
729
+ }
730
+
731
+ function drawTempConnection(e) {
732
+ if (!isConnecting) return;
733
+
734
+ const startRect = startDot.getBoundingClientRect();
735
+ const workspaceRect = workspace.getBoundingClientRect();
736
+
737
+ const startX = startRect.left - workspaceRect.left + startRect.width / 2;
738
+ const startY = startRect.top - workspaceRect.top + startRect.height / 2;
739
+ const endX = e.clientX - workspaceRect.left;
740
+ const endY = e.clientY - workspaceRect.top;
741
+
742
+ const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
743
+ const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
744
+
745
+ const tempLine = document.getElementById('temp-connection');
746
+ tempLine.style.width = `${length}px`;
747
+ tempLine.style.height = '2px';
748
+ tempLine.style.backgroundColor = '#6366f1';
749
+ tempLine.style.left = `${startX}px`;
750
+ tempLine.style.top = `${startY}px`;
751
+ tempLine.style.transform = `rotate(${angle}deg)`;
752
+ tempLine.style.transformOrigin = '0 0';
753
+ }
754
+
755
+ function endConnection(e) {
756
+ if (!isConnecting) return;
757
+
758
+ const endDot = e.target;
759
+
760
+ // Check if we're connecting to a valid dot
761
+ if (endDot.classList.contains('connection-dot') &&
762
+ endDot !== startDot &&
763
+ ((startDot.dataset.type === 'output' && endDot.dataset.type === 'input') ||
764
+ (startDot.dataset.type === 'input' && endDot.dataset.type === 'output'))) {
765
+
766
+ // Create a new connection
767
+ const connection = {
768
+ from: startDot.dataset.blockId,
769
+ fromType: startDot.dataset.type,
770
+ to: endDot.dataset.blockId,
771
+ toType: endDot.dataset.type
772
+ };
773
+
774
+ connections.push(connection);
775
+ drawConnections();
776
+ }
777
+
778
+ // Clean up
779
+ const tempLine = document.getElementById('temp-connection');
780
+ if (tempLine) {
781
+ tempLine.remove();
782
+ }
783
+
784
+ isConnecting = false;
785
+ startDot = null;
786
+ document.removeEventListener('mousemove', drawTempConnection);
787
+ document.removeEventListener('mouseup', stopConnection);
788
+ }
789
+
790
+ function stopConnection() {
791
+ isConnecting = false;
792
+ const tempLine = document.getElementById('temp-connection');
793
+ if (tempLine) {
794
+ tempLine.remove();
795
+ }
796
+ document.removeEventListener('mousemove', drawTempConnection);
797
+ document.removeEventListener('mouseup', stopConnection);
798
+ }
799
+
800
+ function drawConnections() {
801
+ // Clear existing connections
802
+ while (connectionsSvg.firstChild) {
803
+ connectionsSvg.removeChild(connectionsSvg.firstChild);
804
+ }
805
+
806
+ // Redraw all connections
807
+ connections.forEach(conn => {
808
+ const fromBlock = document.querySelector(`[data-id="${conn.from}"]`);
809
+ const toBlock = document.querySelector(`[data-id="${conn.to}"]`);
810
+
811
+ if (fromBlock && toBlock) {
812
+ const fromRect = fromBlock.getBoundingClientRect();
813
+ const toRect = toBlock.getBoundingClientRect();
814
+ const workspaceRect = workspace.getBoundingClientRect();
815
 
816
+ const fromX = fromRect.left - workspaceRect.left + fromRect.width / 2;
817
+ const fromY = fromRect.bottom - workspaceRect.top;
818
+ const toX = toRect.left - workspaceRect.left + toRect.width / 2;
819
+ const toY = toRect.top - workspaceRect.top;
 
 
 
 
 
 
 
820
 
821
+ // Create a curved path
822
+ const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
823
+ path.setAttribute('class', 'connection-path');
824
+ path.setAttribute('d', `M${fromX},${fromY} C${fromX},${fromY + 100} ${toX},${toY - 100} ${toX},${toY}`);
825
+ connectionsSvg.appendChild(path);
826
  }
827
  });
828
+ }
829
+
830
+ function generateAgentFromDescription() {
831
+ const description = agentDescriptionInput.value.trim();
832
+ if (!description) return;
833
+
834
+ // In a real app, this would call an API to generate the agent
835
+ // For demo, we'll just show a success message
836
+ alert('Agent workflow generated based on your description!');
837
+
838
+ // Simulate adding some blocks
839
+ if (blocksContainer.children.length <= 3) {
840
+ const newBlock = createBlock(
841
+ `<div class="flex items-center mb-2">
842
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
843
+ <i class="fas fa-code text-yellow-500"></i>
844
+ </div>
845
+ <div class="font-medium">API Connector</div>
846
+ </div>
847
+ <p class="text-xs text-gray-500 mb-3">Connects to external APIs</p>
848
+ <div class="text-xs text-gray-400">Input: <span class="text-gray-600">User query</span></div>
849
+ <div class="text-xs text-gray-400">Output: <span class="text-gray-600">API response</span></div>`,
850
+ 'api',
851
+ 'yellow',
852
+ 600,
853
+ 400
854
+ );
855
+
856
+ blocksContainer.appendChild(newBlock);
857
+ addConnectionDots(newBlock);
858
+
859
+ // Add a connection to the LLM block
860
+ connections.push({
861
+ from: 'block-2',
862
+ fromType: 'output',
863
+ to: newBlock.dataset.id,
864
+ toType: 'input'
865
+ });
866
+
867
+ drawConnections();
868
+ }
869
+ }
870
+
871
+ function runAgent() {
872
+ alert('Agent is running! Check the testing panel to interact with it.');
873
+ testTab.click();
874
+ }
875
 
876
+ function sendChatMessage() {
877
+ const message = chatInput.value.trim();
878
+ if (!message) return;
879
+
880
+ // Add user message
881
+ const userMessage = document.createElement('div');
882
+ userMessage.className = 'chat-message bg-blue-50 rounded-lg p-3 ml-auto';
883
+ userMessage.innerHTML = `
884
+ <div class="text-xs text-gray-500 mb-1 text-right">You</div>
885
+ <p class="text-sm">${message}</p>
886
+ `;
887
+ chatContainer.appendChild(userMessage);
888
+
889
+ // Clear input
890
+ chatInput.value = '';
891
+
892
+ // Show typing indicator
893
+ typingIndicator.style.display = 'block';
894
+ typingIndicator.querySelector('p').className = 'text-sm typing-indicator';
895
+
896
+ // Simulate agent response after a delay
897
+ setTimeout(() => {
898
+ typingIndicator.style.display = 'none';
899
+
900
+ const responses = [
901
+ "I can help with that. Our standard return policy allows returns within 30 days of purchase.",
902
+ "For order tracking, please visit our order status page and enter your order number.",
903
+ "Our customer support team is available 24/7 to assist you with any issues.",
904
+ "You can find more information about our products in the documentation section."
905
+ ];
906
+
907
+ const randomResponse = responses[Math.floor(Math.random() * responses.length)];
908
+
909
+ const agentMessage = document.createElement('div');
910
+ agentMessage.className = 'chat-message bg-gray-100 rounded-lg p-3';
911
+ agentMessage.innerHTML = `
912
+ <div class="text-xs text-gray-500 mb-1">Agent</div>
913
+ <p class="text-sm">${randomResponse}</p>
914
+ `;
915
+ chatContainer.appendChild(agentMessage);
916
+
917
+ // Scroll to bottom
918
+ chatContainer.scrollTop = chatContainer.scrollHeight;
919
+ }, 1500);
920
+ }
921
+
922
+ function simulateTyping() {
923
+ setTimeout(() => {
924
+ typingIndicator.style.display = 'none';
925
+
926
+ const agentMessage = document.createElement('div');
927
+ agentMessage.className = 'chat-message bg-gray-100 rounded-lg p-3';
928
+ agentMessage.innerHTML = `
929
+ <div class="text-xs text-gray-500 mb-1">Agent</div>
930
+ <p class="text-sm">Our return policy allows returns within 30 days of purchase. Items must be in original condition with tags attached. Would you like me to provide more details?</p>
931
+ `;
932
+ chatContainer.appendChild(agentMessage);
933
+ }, 2000);
934
+ }
935
  });
936
  </script>
937
  <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=adowu/awwagent" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>