|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AutomaForge - AI Agent Creation Platform</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.block-item { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.block-item:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.workspace { |
|
|
background-image: radial-gradient(#e5e7eb 1px, transparent 1px); |
|
|
background-size: 20px 20px; |
|
|
} |
|
|
.connection-path { |
|
|
stroke: #6366f1; |
|
|
stroke-width: 3; |
|
|
fill: none; |
|
|
marker-end: url(#arrowhead); |
|
|
} |
|
|
.agent-block { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.agent-block:hover { |
|
|
transform: scale(1.02); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.chat-message { |
|
|
max-width: 80%; |
|
|
} |
|
|
.typing-indicator::after { |
|
|
content: '...'; |
|
|
animation: typing 1.5s infinite; |
|
|
display: inline-block; |
|
|
width: 0; |
|
|
} |
|
|
@keyframes typing { |
|
|
0% { content: '.'; } |
|
|
33% { content: '..'; } |
|
|
66% { content: '...'; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans text-gray-800"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-indigo-900 text-white w-64 flex-shrink-0 flex flex-col"> |
|
|
<div class="p-4 border-b border-indigo-800 flex items-center"> |
|
|
<div class="bg-white rounded-lg p-2 mr-3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-indigo-600"> |
|
|
<path fill-rule="evenodd" d="M12.963 2.286a.75.75 0 00-1.071-.136 9.742 9.742 0 00-3.539 6.176 7.547 7.547 0 01-1.705-1.715.75.75 0 00-1.152-.082A9 9 0 1015.68 4.534a7.46 7.46 0 01-2.717-2.248zM15.75 14.25a3.75 3.75 0 11-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 011.925-3.546 3.75 3.75 0 013.255 3.718z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold">AutomaForge</h1> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-b border-indigo-800"> |
|
|
<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"> |
|
|
<i class="fas fa-plus mr-2"></i> New Agent |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Recent Agents</h3> |
|
|
<ul> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-400 mr-3"></div> |
|
|
<span>Customer Support Bot</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition"> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-400 mr-3"></div> |
|
|
<span>Data Analyzer</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-400 mr-3"></div> |
|
|
<span>Image Processor</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-400 mr-3"></div> |
|
|
<span>Document Summarizer</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-indigo-800"> |
|
|
<h3 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Templates</h3> |
|
|
<ul> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition"> |
|
|
<i class="fas fa-comments mr-3 text-indigo-300"></i> |
|
|
<span>Chatbot</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition"> |
|
|
<i class="fas fa-chart-line mr-3 text-indigo-300"></i> |
|
|
<span>Data Analysis</span> |
|
|
</a> |
|
|
</li> |
|
|
<li class="mb-2"> |
|
|
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition"> |
|
|
<i class="fas fa-image mr-3 text-indigo-300"></i> |
|
|
<span>Image Processing</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-indigo-800"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">John Doe</div> |
|
|
<div class="text-xs text-indigo-300">Admin</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<button class="mr-4 text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h2 class="text-lg font-semibold">Agent Architect</h2> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-question-circle"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<button class="bg-indigo-600 text-white py-1 px-3 rounded-lg text-sm hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-play mr-1"></i> Run Agent |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex overflow-hidden"> |
|
|
|
|
|
<div class="w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto"> |
|
|
<div class="mb-6"> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Search Blocks</h3> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search blocks..." class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Categories</h3> |
|
|
<div class="space-y-2"> |
|
|
<button class="w-full text-left px-3 py-2 rounded-lg bg-indigo-50 text-indigo-700 flex items-center justify-between"> |
|
|
<span>All Blocks</span> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">42</span> |
|
|
</button> |
|
|
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between"> |
|
|
<span>NLP</span> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">12</span> |
|
|
</button> |
|
|
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between"> |
|
|
<span>Image Processing</span> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">8</span> |
|
|
</button> |
|
|
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between"> |
|
|
<span>API Integration</span> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">6</span> |
|
|
</button> |
|
|
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between"> |
|
|
<span>Data Processing</span> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">10</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Available Blocks</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-comment text-blue-500"></i> |
|
|
</div> |
|
|
<div class="font-medium">Text Input</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">Accepts user text input for processing</p> |
|
|
</div> |
|
|
|
|
|
<div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-brain text-purple-500"></i> |
|
|
</div> |
|
|
<div class="font-medium">LLM Processor</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">Processes text with a large language model</p> |
|
|
</div> |
|
|
|
|
|
<div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-database text-green-500"></i> |
|
|
</div> |
|
|
<div class="font-medium">Knowledge Base</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">Connects to your knowledge repository</p> |
|
|
</div> |
|
|
|
|
|
<div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-code text-yellow-500"></i> |
|
|
</div> |
|
|
<div class="font-medium">API Connector</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">Connects to external APIs</p> |
|
|
</div> |
|
|
|
|
|
<div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-image text-red-500"></i> |
|
|
</div> |
|
|
<div class="font-medium">Image Analyzer</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">Analyzes and processes images</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 bg-gray-50 workspace overflow-auto relative"> |
|
|
<svg class="absolute top-0 left-0 w-full h-full pointer-events-none" style="z-index: 0;"> |
|
|
<defs> |
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> |
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="#6366f1" /> |
|
|
</marker> |
|
|
</defs> |
|
|
<path class="connection-path" d="M200,150 C300,150 400,250 500,250" /> |
|
|
<path class="connection-path" d="M500,250 C600,250 700,350 800,350" /> |
|
|
</svg> |
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Agent Architect</h3> |
|
|
<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> |
|
|
|
|
|
<div class="relative"> |
|
|
<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> |
|
|
<button class="absolute bottom-4 right-4 bg-indigo-600 text-white p-2 rounded-lg hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-magic"></i> Generate |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50"> |
|
|
<i class="fas fa-layer-group mr-2 text-indigo-500"></i> |
|
|
<span>Add Layer</span> |
|
|
</button> |
|
|
<button class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50"> |
|
|
<i class="fas fa-robot mr-2 text-indigo-500"></i> |
|
|
<span>Auto-Connect</span> |
|
|
</button> |
|
|
<button class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50"> |
|
|
<i class="fas fa-bolt mr-2 text-indigo-500"></i> |
|
|
<span>Optimize</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-3 gap-6"> |
|
|
<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;"> |
|
|
<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"> |
|
|
<i class="fas fa-play"></i> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-comment text-blue-500"></i> |
|
|
</div> |
|
|
<div class="font-medium">User Input</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mb-3">Accepts user questions</p> |
|
|
<div class="text-xs text-gray-400">Output: <span class="text-gray-600">User query text</span></div> |
|
|
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-500 rounded-full"></div> |
|
|
</div> |
|
|
|
|
|
<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;"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-brain text-purple-500"></i> |
|
|
</div> |
|
|
<div class="font-medium">LLM Processor</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mb-3">Processes user query with GPT-4</p> |
|
|
<div class="text-xs text-gray-400 mb-1">Input: <span class="text-gray-600">User query text</span></div> |
|
|
<div class="text-xs text-gray-400">Output: <span class="text-gray-600">Processed response</span></div> |
|
|
<div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div> |
|
|
<div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div> |
|
|
</div> |
|
|
|
|
|
<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;"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-comments text-green-500"></i> |
|
|
</div> |
|
|
<div class="font-medium">Response Output</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mb-3">Returns response to user</p> |
|
|
<div class="text-xs text-gray-400">Input: <span class="text-gray-600">Processed response</span></div> |
|
|
<div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-green-500 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-80 bg-white border-l border-gray-200 flex flex-col"> |
|
|
<div class="border-b border-gray-200 p-4"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex-1 py-2 px-3 rounded-lg bg-indigo-600 text-white text-sm font-medium"> |
|
|
Configuration |
|
|
</button> |
|
|
<button class="flex-1 py-2 px-3 rounded-lg bg-white border border-gray-200 text-sm font-medium hover:bg-gray-50"> |
|
|
Testing |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto p-4"> |
|
|
<div class="mb-6"> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Selected Block</h3> |
|
|
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-brain text-purple-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-medium">LLM Processor</div> |
|
|
<div class="text-xs text-gray-500">Processes text with a large language model</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Model</label> |
|
|
<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"> |
|
|
<option>GPT-4</option> |
|
|
<option>GPT-3.5</option> |
|
|
<option>Claude-2</option> |
|
|
<option>Llama 2</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label> |
|
|
<input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full"> |
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1"> |
|
|
<span>Precise</span> |
|
|
<span>Creative</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label> |
|
|
<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"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">System Prompt</label> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Optimization Suggestions</h3> |
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4"> |
|
|
<div class="flex items-start mb-3"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<i class="fas fa-lightbulb text-yellow-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-yellow-800">Add Knowledge Base</h4> |
|
|
<p class="text-xs text-yellow-700">Consider connecting a knowledge base to improve response accuracy.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 mt-1"> |
|
|
<i class="fas fa-lightbulb text-yellow-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h4 class="text-sm font-medium text-yellow-800">Add Sentiment Analysis</h4> |
|
|
<p class="text-xs text-yellow-700">Adding sentiment analysis could help route frustrated customers to human support.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-gray-200 p-4 bg-gray-50"> |
|
|
<h3 class="font-medium text-gray-700 mb-3">Test Agent</h3> |
|
|
|
|
|
<div class="bg-white rounded-lg border border-gray-200 mb-3" style="height: 200px; overflow-y: auto;"> |
|
|
<div class="p-3 space-y-3"> |
|
|
<div class="chat-message bg-blue-50 rounded-lg p-3 ml-auto"> |
|
|
<div class="text-xs text-gray-500 mb-1 text-right">You</div> |
|
|
<p class="text-sm">How can I track my order?</p> |
|
|
</div> |
|
|
|
|
|
<div class="chat-message bg-gray-100 rounded-lg p-3"> |
|
|
<div class="text-xs text-gray-500 mb-1">Agent</div> |
|
|
<p class="text-sm">You can track your order by visiting the order status page...</p> |
|
|
</div> |
|
|
|
|
|
<div class="chat-message bg-blue-50 rounded-lg p-3 ml-auto"> |
|
|
<div class="text-xs text-gray-500 mb-1 text-right">You</div> |
|
|
<p class="text-sm">What's your return policy?</p> |
|
|
</div> |
|
|
|
|
|
<div class="chat-message bg-gray-100 rounded-lg p-3"> |
|
|
<div class="text-xs text-gray-500 mb-1">Agent</div> |
|
|
<p class="text-sm typing-indicator"></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<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"> |
|
|
<button class="absolute right-2 top-2 text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const blocks = document.querySelectorAll('.block-item'); |
|
|
const workspace = document.querySelector('.workspace'); |
|
|
|
|
|
blocks.forEach(block => { |
|
|
block.addEventListener('dragstart', function(e) { |
|
|
e.dataTransfer.setData('text/plain', block.innerHTML); |
|
|
e.dataTransfer.effectAllowed = 'copy'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
workspace.addEventListener('dragover', function(e) { |
|
|
e.preventDefault(); |
|
|
e.dataTransfer.dropEffect = 'copy'; |
|
|
}); |
|
|
|
|
|
workspace.addEventListener('drop', function(e) { |
|
|
e.preventDefault(); |
|
|
const data = e.dataTransfer.getData('text/plain'); |
|
|
|
|
|
const newBlock = document.createElement('div'); |
|
|
newBlock.className = 'agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-gray-200 absolute cursor-move'; |
|
|
newBlock.style.left = `${e.clientX - 100}px`; |
|
|
newBlock.style.top = `${e.clientY - 50}px`; |
|
|
newBlock.innerHTML = data; |
|
|
|
|
|
workspace.appendChild(newBlock); |
|
|
|
|
|
|
|
|
newBlock.addEventListener('mousedown', function(e) { |
|
|
if (e.target === newBlock || e.target.parentNode === newBlock) { |
|
|
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; |
|
|
|
|
|
e = e || window.event; |
|
|
e.preventDefault(); |
|
|
pos3 = e.clientX; |
|
|
pos4 = e.clientY; |
|
|
|
|
|
document.onmouseup = closeDragElement; |
|
|
document.onmousemove = elementDrag; |
|
|
|
|
|
function elementDrag(e) { |
|
|
e = e || window.event; |
|
|
e.preventDefault(); |
|
|
pos1 = pos3 - e.clientX; |
|
|
pos2 = pos4 - e.clientY; |
|
|
pos3 = e.clientX; |
|
|
pos4 = e.clientY; |
|
|
|
|
|
newBlock.style.top = (newBlock.offsetTop - pos2) + "px"; |
|
|
newBlock.style.left = (newBlock.offsetLeft - pos1) + "px"; |
|
|
} |
|
|
|
|
|
function closeDragElement() { |
|
|
document.onmouseup = null; |
|
|
document.onmousemove = null; |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const typingIndicator = document.querySelector('.typing-indicator'); |
|
|
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?'; |
|
|
}, 2000); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=adowu/awwagent" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
