请你根据我的给你的需求文档设计一个AI产品：AI Hacker 会话管理 ● 新建会话 ○ 会话名称 ○ 会话初始内容为空 ● 会话状态 ○ 已完成：代表会话中最新一次相应完成 ○ 进行中：代表会话中最新一次响应仍在进行中 ● 搜索会话：搜索会话名称 ● 历史会话管理：历史会话内容 输入方式（多轮对话） 文本：输入文本 + 发送 prompt剧本引用：点击之后选择prompt剧本，执行固定的调用链路 Chat对话 ● 输入：文本格式（多轮对话） ○ 编辑：编辑文本后重新发送（删除原输入和输出后重新请求） ○ 复制：复制prompt内容 ● 输出 ○ 最终输出：最终输出内容 ○ 功能： ■ 重新生成：触发一次重新请求 ● 对话状态 ○ 未开始：模型未开始工作时，允许输入内容 ○ 工作中：模型正在响应输入时，输入框无法输入内容 ● 展示模块 ○ 执行日志：用于check每个步骤的执行是否正确（输入&输出），一个output会由多个任务节点组成 ■ 工具名称：用的工具/MCP名称/执行的任务，例剧本获取、sa命令下发 ■ 状态：待开始、进行中、已完成，错误 ■ 任务结果：每个MCP工具的调用结果，比如获取到RASP巡检的反序列化剧本 ○ 真机演示：展示靶场环境模拟操作的核心步骤截图（多图片） ○ markdown展示框：最后一步对报告进行总结以markdown的格式进行总结展示出来 prompt剧本库 创建剧本 ● 剧本名称 ● 剧本内容：编辑框，展示prompt文本内容 ● 执行执行链路：展示执行的function call链路图，并且可以修改 ● 操作： ○ 保存：保存剧本内容和function call ○ 取消： 列表 ● 名称： ● 内容： ● 创建人： ● 创建时间： ● 更新时间： ● 操作：详情，点击进入查看prompt剧本 - Initial Deployment
e70c5d9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Hacker - Advanced AI Security Assistant</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> | |
| /* Custom CSS for elements that can't be easily done with Tailwind */ | |
| .chat-container { | |
| height: calc(100vh - 200px); | |
| } | |
| .sidebar { | |
| height: calc(100vh - 80px); | |
| } | |
| .markdown-output { | |
| background-color: #f8f9fa; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| font-family: 'Courier New', monospace; | |
| white-space: pre-wrap; | |
| } | |
| .execution-log-item:hover { | |
| background-color: rgba(59, 130, 246, 0.1); | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s ease-out forwards; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Main Container --> | |
| <div class="flex flex-col h-screen"> | |
| <!-- Header --> | |
| <header class="bg-indigo-900 text-white p-4 shadow-md"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-user-secret text-2xl"></i> | |
| <h1 class="text-2xl font-bold">AI Hacker</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-indigo-700 hover:bg-indigo-600 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-user mr-2"></i> Account | |
| </button> | |
| <button class="bg-indigo-700 hover:bg-indigo-600 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto"> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold mb-2 text-gray-700">Sessions</h2> | |
| <div class="flex space-x-2 mb-4"> | |
| <button id="newSessionBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> New | |
| </button> | |
| <div class="relative flex-1"> | |
| <input type="text" placeholder="Search sessions..." class="w-full border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"> | |
| <i class="fas fa-search absolute right-3 top-2 text-gray-400 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="session-item p-2 rounded-lg cursor-pointer hover:bg-gray-100 border-l-4 border-indigo-500 bg-gray-50"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-sm truncate">Security Audit Report</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Today, 10:30 AM</div> | |
| </div> | |
| <div class="session-item p-2 rounded-lg cursor-pointer hover:bg-gray-100 border-l-4 border-yellow-500"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-sm truncate">Vulnerability Scan</span> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">In Progress</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Today, 09:15 AM</div> | |
| </div> | |
| <div class="session-item p-2 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-sm truncate">Penetration Testing</span> | |
| <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">Not Started</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Yesterday, 3:45 PM</div> | |
| </div> | |
| <div class="session-item p-2 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium text-sm truncate">Network Analysis</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Yesterday, 11:20 AM</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h2 class="text-lg font-semibold mb-2 text-gray-700">Prompt Scripts</h2> | |
| <button id="newScriptBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-lg text-sm flex items-center mb-3"> | |
| <i class="fas fa-plus mr-1"></i> New Script | |
| </button> | |
| <div class="space-y-2"> | |
| <div class="script-item p-2 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <div class="font-medium text-sm">Standard Security Audit</div> | |
| <div class="text-xs text-gray-500 mt-1">Created by: admin</div> | |
| </div> | |
| <div class="script-item p-2 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <div class="font-medium text-sm">OWASP Top 10 Scan</div> | |
| <div class="text-xs text-gray-500 mt-1">Created by: security</div> | |
| </div> | |
| <div class="script-item p-2 rounded-lg cursor-pointer hover:bg-gray-100"> | |
| <div class="font-medium text-sm">RASP Inspection</div> | |
| <div class="text-xs text-gray-500 mt-1">Updated: Today</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Chat Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Chat Header --> | |
| <div class="bg-white border-b border-gray-200 p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h2 class="text-xl font-semibold">Security Audit Report</h2> | |
| <div class="flex items-center mt-1"> | |
| <span class="text-sm text-gray-600 mr-3">Status: <span class="font-medium text-green-600">Completed</span></span> | |
| <span class="text-sm text-gray-600">Created: Today, 10:30 AM</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-history mr-1"></i> History | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-share-alt mr-1"></i> Share | |
| </button> | |
| <button class="bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-trash-alt mr-1"></i> Delete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Content --> | |
| <div class="flex-1 overflow-hidden flex"> | |
| <!-- Chat Messages --> | |
| <div class="flex-1 overflow-y-auto p-4 bg-gray-50 chat-container"> | |
| <div class="space-y-4"> | |
| <!-- AI Message --> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-indigo-100 p-2 rounded-full"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="flex-1 bg-white p-4 rounded-lg shadow-sm border border-gray-200"> | |
| <div class="font-medium text-indigo-600 mb-2">AI Hacker</div> | |
| <div class="text-gray-800"> | |
| I've completed the security audit for your web application. Here's a summary of the findings: | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>3 Critical vulnerabilities found</li> | |
| <li>7 High severity issues detected</li> | |
| <li>12 Medium risk items identified</li> | |
| </ul> | |
| </div> | |
| <div class="mt-3 flex space-x-2"> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded"> | |
| <i class="fas fa-redo mr-1"></i> Regenerate | |
| </button> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Message --> | |
| <div class="flex items-start space-x-3 justify-end"> | |
| <div class="flex-1 bg-indigo-100 p-4 rounded-lg shadow-sm max-w-3xl"> | |
| <div class="font-medium text-indigo-800 mb-2">You</div> | |
| <div class="text-gray-800"> | |
| Can you provide more details about the critical vulnerabilities? | |
| </div> | |
| <div class="mt-3 flex space-x-2 justify-end"> | |
| <button class="text-xs bg-white hover:bg-gray-100 px-2 py-1 rounded"> | |
| <i class="fas fa-edit mr-1"></i> Edit | |
| </button> | |
| <button class="text-xs bg-white hover:bg-gray-100 px-2 py-1 rounded"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-200 p-2 rounded-full"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| </div> | |
| <!-- AI Message with Tabs --> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-indigo-100 p-2 rounded-full"> | |
| <i class="fas fa-robot text-indigo-600"></i> | |
| </div> | |
| <div class="flex-1 bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="font-medium text-indigo-600 mb-2">AI Hacker</div> | |
| <div class="text-gray-800"> | |
| Here are the details of the critical vulnerabilities I found: | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="border-b border-gray-200"> | |
| <div class="flex"> | |
| <button class="tab-btn active px-4 py-2 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600">Execution Log</button> | |
| <button class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Live Demo</button> | |
| <button class="tab-btn px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Report</button> | |
| </div> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="tab-content active p-4"> | |
| <div class="space-y-3"> | |
| <div class="execution-log-item p-3 rounded-lg border border-gray-200 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div class="font-medium">Script Retrieval</div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Retrieved OWASP Top 10 testing script</div> | |
| </div> | |
| <div class="execution-log-item p-3 rounded-lg border border-gray-200 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div class="font-medium">Vulnerability Scan</div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Scanned for SQL injection vulnerabilities</div> | |
| </div> | |
| <div class="execution-log-item p-3 rounded-lg border border-gray-200 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <div class="font-medium">XSS Detection</div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Completed</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Found 2 potential XSS vulnerabilities</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content hidden p-4"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <img src="https://via.placeholder.com/300x200?text=Step+1" alt="Demo Step 1" class="w-full"> | |
| <div class="p-2 bg-gray-50 text-sm">Authentication Bypass Attempt</div> | |
| </div> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <img src="https://via.placeholder.com/300x200?text=Step+2" alt="Demo Step 2" class="w-full"> | |
| <div class="p-2 bg-gray-50 text-sm">SQL Injection Detection</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content hidden p-4"> | |
| <div class="markdown-output"> | |
| # Security Audit Report | |
| ## Critical Vulnerabilities | |
| 1. **SQL Injection** | |
| - Location: `/user/profile` endpoint | |
| - Risk: High | |
| - Recommendation: Use parameterized queries | |
| 2. **Authentication Bypass** | |
| - Location: Admin panel | |
| - Risk: Critical | |
| - Recommendation: Implement proper session management | |
| 3. **Sensitive Data Exposure** | |
| - Location: API responses | |
| - Risk: High | |
| - Recommendation: Encrypt sensitive data | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel (Script Details) --> | |
| <div id="rightPanel" class="w-80 bg-white border-l border-gray-200 p-4 overflow-y-auto hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold text-lg">Script Details</h3> | |
| <button id="closePanelBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Script Name</label> | |
| <input type="text" value="OWASP Top 10 Scan" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Script Content</label> | |
| <textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 h-40 focus:outline-none focus:ring-1 focus:ring-indigo-500">Perform comprehensive scan for OWASP Top 10 vulnerabilities including: | |
| - SQL Injection | |
| - Cross-Site Scripting (XSS) | |
| - Broken Authentication | |
| - Sensitive Data Exposure | |
| - XML External Entities (XXE) | |
| - Broken Access Control | |
| - Security Misconfigurations | |
| - Cross-Site Request Forgery (CSRF) | |
| - Using Components with Known Vulnerabilities | |
| - Insufficient Logging & Monitoring</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Execution Flow</label> | |
| <div class="border border-gray-200 rounded-lg p-3"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-2">1</div> | |
| <div>Script Retrieval</div> | |
| </div> | |
| <div class="flex items-center mb-2 ml-6"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-2">2</div> | |
| <div>Vulnerability Scan</div> | |
| </div> | |
| <div class="flex items-center mb-2 ml-6"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mr-2">3</div> | |
| <div>Report Generation</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg"> | |
| Save Changes | |
| </button> | |
| <button class="flex-1 bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="bg-white border-t border-gray-200 p-4"> | |
| <div class="flex items-end space-x-2"> | |
| <div class="flex-1 relative"> | |
| <textarea id="chatInput" placeholder="Type your message here..." class="w-full border border-gray-300 rounded-lg px-4 py-3 pr-12 focus:outline-none focus:ring-1 focus:ring-indigo-500 resize-none" rows="1"></textarea> | |
| <div class="absolute right-3 bottom-3 flex space-x-1"> | |
| <button class="text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button id="scriptBtn" class="text-gray-500 hover:text-indigo-600"> | |
| <i class="fas fa-scroll"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button id="sendBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| <span id="statusIndicator" class="hidden"><span class="pulse">AI is thinking</span> <i class="fas fa-circle-notch fa-spin ml-1"></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Session Modal --> | |
| <div id="newSessionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">New Session</h3> | |
| <button id="closeSessionModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Session Name</label> | |
| <input type="text" placeholder="Enter session name" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-indigo-500"> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg"> | |
| Create Session | |
| </button> | |
| <button id="cancelSessionBtn" class="flex-1 bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab functionality | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| // Remove active class from all buttons and content | |
| document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden')); | |
| // Add active class to clicked button | |
| btn.classList.add('active'); | |
| // Show corresponding content | |
| const index = Array.from(document.querySelectorAll('.tab-btn')).indexOf(btn); | |
| document.querySelectorAll('.tab-content')[index].classList.remove('hidden'); | |
| }); | |
| }); | |
| // Right panel toggle | |
| document.getElementById('scriptBtn').addEventListener('click', () => { | |
| document.getElementById('rightPanel').classList.remove('hidden'); | |
| document.getElementById('rightPanel').classList.add('slide-in'); | |
| }); | |
| document.getElementById('closePanelBtn').addEventListener('click', () => { | |
| document.getElementById('rightPanel').classList.add('hidden'); | |
| }); | |
| // New session modal | |
| document.getElementById('newSessionBtn').addEventListener('click', () => { | |
| document.getElementById('newSessionModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('closeSessionModal').addEventListener('click', () => { | |
| document.getElementById('newSessionModal').classList.add('hidden'); | |
| }); | |
| document.getElementById('cancelSessionBtn').addEventListener('click', () => { | |
| document.getElementById('newSessionModal').classList.add('hidden'); | |
| }); | |
| // New script button | |
| document.getElementById('newScriptBtn').addEventListener('click', () => { | |
| document.getElementById('rightPanel').classList.remove('hidden'); | |
| document.getElementById('rightPanel').classList.add('slide-in'); | |
| }); | |
| // Chat input auto-resize | |
| const chatInput = document.getElementById('chatInput'); | |
| chatInput.addEventListener('input', () => { | |
| chatInput.style.height = 'auto'; | |
| chatInput.style.height = (chatInput.scrollHeight) + 'px'; | |
| }); | |
| // Simulate AI response | |
| document.getElementById('sendBtn').addEventListener('click', () => { | |
| if (chatInput.value.trim() === '') return; | |
| // Show status indicator | |
| document.getElementById('statusIndicator').classList.remove('hidden'); | |
| // Simulate AI thinking | |
| setTimeout(() => { | |
| document.getElementById('statusIndicator').classList.add('hidden'); | |
| // Here you would normally add the AI response to the chat | |
| // For demo purposes, we'll just clear the input | |
| chatInput.value = ''; | |
| chatInput.style.height = 'auto'; | |
| }, 2000); | |
| }); | |
| // Session item click | |
| document.querySelectorAll('.session-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| document.querySelectorAll('.session-item').forEach(i => i.classList.remove('bg-gray-50')); | |
| item.classList.add('bg-gray-50'); | |
| // Here you would load the session content | |
| }); | |
| }); | |
| // Script item click | |
| document.querySelectorAll('.script-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| document.querySelectorAll('.script-item').forEach(i => i.classList.remove('bg-gray-50')); | |
| item.classList.add('bg-gray-50'); | |
| document.getElementById('rightPanel').classList.remove('hidden'); | |
| document.getElementById('rightPanel').classList.add('slide-in'); | |
| // Here you would load the script content | |
| }); | |
| }); | |
| </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=capta1n/aibas" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |