feat(automation): complete unified automation system redesign
Phase 4 completion: - Add ApprovalQueue component for managing pending approvals - Add ExecutionResult component for displaying hand/workflow results - Update Sidebar navigation to use unified AutomationPanel - Replace separate 'hands' and 'workflow' tabs with single 'automation' tab - Fix TypeScript type safety issues with unknown types in JSX expressions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
iven
524
docs/archive/openclaw-legacy/workbuddy界面/claw.html
Normal file
524
docs/archive/openclaw-legacy/workbuddy界面/claw.html
Normal file
@@ -0,0 +1,524 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WorkBuddy - Claw</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>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
|
||||
|
||||
/* Robot floating animation */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
.robot-float { animation: float 4s ease-in-out infinite; }
|
||||
|
||||
/* Title styling */
|
||||
.claw-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.claw-icon {
|
||||
color: #dc2626;
|
||||
display: inline-block;
|
||||
transform: rotate(-15deg);
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.ideas-text {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ideas-underline {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: linear-gradient(90deg, #a78bfa 0%, #c084fc 100%);
|
||||
opacity: 0.6;
|
||||
border-radius: 4px;
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
.star-icon {
|
||||
color: #10b981;
|
||||
font-size: 0.8rem;
|
||||
vertical-align: super;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
/* Dropdown animations */
|
||||
.dropdown-menu {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
transition: all 0.15s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dropdown-menu.active {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Input area focus */
|
||||
.input-container {
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
.input-container:focus-within {
|
||||
border-color: #6366f1;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
/* Button hover effects */
|
||||
.tool-btn {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.tool-btn:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
.tool-btn.active {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Sidebar item selected state */
|
||||
.sidebar-item {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.sidebar-item:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
.sidebar-item.active {
|
||||
background-color: #f3f4f6;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Model list item */
|
||||
.model-item {
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
.model-item:hover {
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
/* Send button */
|
||||
.send-btn {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.send-btn:hover {
|
||||
background-color: #10b981;
|
||||
color: white;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white h-screen flex text-gray-800">
|
||||
|
||||
<!-- Left Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full select-none">
|
||||
<!-- App Header -->
|
||||
<div class="h-14 flex items-center px-4 border-b border-gray-100 flex-shrink-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-teal-500 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-sm">
|
||||
<i class="fas fa-code text-sm"></i>
|
||||
</div>
|
||||
<span class="font-bold text-lg text-gray-800 tracking-tight">WorkBuddy</span>
|
||||
</div>
|
||||
<button class="ml-auto p-1.5 hover:bg-gray-100 rounded-lg text-gray-400 transition-colors">
|
||||
<i class="far fa-clone text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Menu Items -->
|
||||
<nav class="flex-1 py-3 px-3 space-y-0.5 overflow-y-auto">
|
||||
<!-- Search -->
|
||||
<div class="px-1 mb-3">
|
||||
<div class="relative">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
|
||||
<input type="text" placeholder="搜索任务"
|
||||
class="w-full pl-9 pr-8 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all">
|
||||
<button class="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-200 rounded text-gray-400 transition-colors">
|
||||
<i class="fas fa-sliders-h text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New Task Button -->
|
||||
<button class="w-full flex items-center gap-3 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors mb-1">
|
||||
<i class="far fa-check-square text-emerald-600 w-5"></i>
|
||||
<span class="font-medium">新建任务</span>
|
||||
</button>
|
||||
|
||||
<!-- Claw Item (Active with icons) -->
|
||||
<div class="sidebar-item active flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer group">
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fas fa-robot text-gray-700 w-5"></i>
|
||||
<span>Claw</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="p-1 hover:bg-gray-200 rounded text-gray-500" title="打开文件夹">
|
||||
<i class="far fa-folder-open text-xs"></i>
|
||||
</button>
|
||||
<button class="p-1 hover:bg-gray-200 rounded text-gray-500" title="设置">
|
||||
<i class="fas fa-cog text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other Nav Items -->
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
|
||||
<i class="fas fa-user-tie text-gray-400 w-5"></i>
|
||||
<span>专家</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
|
||||
<i class="fas fa-wand-magic-sparkles text-gray-400 w-5"></i>
|
||||
<span>技能</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
|
||||
<i class="fas fa-puzzle-piece text-gray-400 w-5"></i>
|
||||
<span>插件</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="sidebar-item flex items-center gap-3 px-3 py-2 text-gray-600 rounded-lg transition-colors">
|
||||
<i class="far fa-clock text-gray-400 w-5"></i>
|
||||
<span>自动化</span>
|
||||
</a>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div class="mt-8 px-4 text-center">
|
||||
<p class="text-gray-900 font-medium mb-1">暂无任务</p>
|
||||
<p class="text-gray-400 text-sm">点击上方按钮开始新任务</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- User Profile -->
|
||||
<div class="p-3 border-t border-gray-200 flex-shrink-0">
|
||||
<button class="flex items-center gap-3 w-full hover:bg-gray-50 p-2 rounded-lg transition-colors">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold shadow-sm">
|
||||
<i class="fas fa-robot text-xs"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-left text-sm font-medium text-gray-700">iven</span>
|
||||
<i class="fas fa-chevron-right text-gray-400 text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 flex flex-col h-full relative bg-white">
|
||||
<!-- Top Bar -->
|
||||
<header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 flex-shrink-0">
|
||||
<div class="flex-1"></div>
|
||||
<div class="text-sm text-gray-600 font-medium">Agents</div>
|
||||
<div class="flex-1 flex justify-end items-center gap-1">
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg text-gray-500 transition-colors">
|
||||
<i class="fas fa-minus text-xs"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-lg text-gray-500 transition-colors">
|
||||
<i class="far fa-square text-xs"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center hover:bg-red-50 hover:text-red-500 rounded-lg text-gray-500 transition-colors">
|
||||
<i class="fas fa-times text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 overflow-y-auto bg-white flex flex-col items-center justify-center p-8">
|
||||
<div class="w-full max-w-3xl flex flex-col items-center">
|
||||
|
||||
<!-- Robot Mascot -->
|
||||
<div class="robot-float mb-6 relative">
|
||||
<div class="w-24 h-24 relative">
|
||||
<img src="https://api.dicebear.com/7.x/bottts/svg?seed=claw-red&backgroundColor=ffdfbf&eyes=happy"
|
||||
alt="Claw Robot"
|
||||
class="w-full h-full drop-shadow-xl">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="claw-title mb-1 text-center">
|
||||
Claw<span class="claw-icon"><i class="fas fa-paw"></i></span>Your
|
||||
<span class="ideas-text">Ideas<span class="ideas-underline"></span></span>
|
||||
</h1>
|
||||
<h2 class="claw-title mb-6 text-center">
|
||||
Into Reality<span class="star-icon"><i class="fas fa-star"></i></span>
|
||||
</h2>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="text-center text-gray-600 mb-8 space-y-1">
|
||||
<p class="text-base">通过 Claw，让 Agent 随时随地接手并推进你的工作。</p>
|
||||
<p class="text-base">前往 Claw 设置，连接企业微信、飞书、钉钉或 QQ，把任务带到每一个消息入口。</p>
|
||||
</div>
|
||||
|
||||
<!-- Input Area -->
|
||||
<div class="w-full input-container bg-white rounded-2xl shadow-sm relative">
|
||||
<!-- Input Toolbar -->
|
||||
<div class="flex items-center gap-1 px-4 pt-3 pb-2">
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="提及">
|
||||
<i class="fas fa-at"></i>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" title="附件">
|
||||
<i class="fas fa-paperclip"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Text Input -->
|
||||
<div class="px-4 pb-2">
|
||||
<textarea
|
||||
placeholder="输入消息..."
|
||||
class="w-full h-20 resize-none outline-none text-gray-700 placeholder-gray-400 text-base leading-relaxed bg-transparent"
|
||||
style="min-height: 60px;"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Toolbar -->
|
||||
<div class="px-3 pb-3 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Craft Dropdown -->
|
||||
<div class="relative" id="craftDropdown">
|
||||
<button onclick="toggleDropdown('craftDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 bg-white">
|
||||
<i class="far fa-window-maximize text-xs text-gray-500"></i>
|
||||
<span>Craft</span>
|
||||
<i class="fas fa-chevron-down text-xs text-gray-400 ml-1"></i>
|
||||
</button>
|
||||
<!-- Craft Menu -->
|
||||
<div class="dropdown-menu absolute bottom-full left-0 mb-2 w-48 bg-white border border-gray-200 rounded-xl shadow-xl py-1.5 z-50">
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="far fa-window-maximize text-gray-500"></i>
|
||||
<span>Craft</span>
|
||||
<i class="fas fa-check text-emerald-500 ml-auto text-xs"></i>
|
||||
</button>
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="far fa-calendar-check text-gray-500"></i>
|
||||
<span>Plan</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="far fa-comment-dots text-gray-500"></i>
|
||||
<span>Ask</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto Dropdown -->
|
||||
<div class="relative" id="autoDropdown">
|
||||
<button onclick="toggleDropdown('autoDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 bg-white">
|
||||
<i class="fas fa-layer-group text-xs text-gray-500"></i>
|
||||
<span>Auto</span>
|
||||
<i class="fas fa-chevron-down text-xs text-gray-400 ml-1"></i>
|
||||
</button>
|
||||
<!-- Model Menu -->
|
||||
<div class="dropdown-menu absolute bottom-full left-0 mb-2 w-64 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
||||
<div class="px-3 py-1.5 text-xs text-gray-400 font-medium uppercase tracking-wider">内置模型</div>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<i class="fas fa-layer-group text-gray-600 text-sm"></i>
|
||||
<span class="flex-1 text-sm text-gray-700">Auto</span>
|
||||
<i class="fas fa-check text-emerald-500 text-xs"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<i class="fas fa-wave-square text-pink-500 text-sm"></i>
|
||||
<span class="text-sm text-gray-700">MiniMax-M2.5</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<div class="w-5 h-5 bg-purple-600 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
|
||||
<span class="text-sm text-gray-700">GLM-5.0</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<div class="w-5 h-5 bg-purple-500 rounded flex items-center justify-center text-white text-xs font-bold">Z</div>
|
||||
<span class="text-sm text-gray-700">GLM-4.7</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<div class="w-5 h-5 bg-gray-800 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
|
||||
<span class="text-sm text-gray-700">Kimi-K2.5</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<div class="w-5 h-5 bg-gray-700 rounded flex items-center justify-center text-white text-xs font-bold">K</div>
|
||||
<span class="text-sm text-gray-700">Kimi-K2-Thinking</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
|
||||
<button class="model-item w-full flex items-center gap-3 px-4 py-2 text-left">
|
||||
<i class="fas fa-fish text-blue-500 text-sm"></i>
|
||||
<span class="text-sm text-gray-700">DeepSeek-V3.2</span>
|
||||
<i class="fas fa-snowflake text-gray-300 text-xs ml-auto"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skills Dropdown -->
|
||||
<div class="relative" id="skillsDropdown">
|
||||
<button onclick="toggleDropdown('skillsDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium text-gray-700 border border-gray-200 bg-white">
|
||||
<i class="fas fa-wand-magic-sparkles text-xs text-gray-500"></i>
|
||||
<span>Skills</span>
|
||||
</button>
|
||||
<!-- Skills Menu -->
|
||||
<div class="dropdown-menu absolute bottom-full left-0 mb-2 w-80 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
||||
<div class="px-3 pb-2">
|
||||
<div class="relative">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
|
||||
<input type="text" placeholder="搜索技能" class="w-full pl-8 pr-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-500">
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-4 text-center text-gray-400 text-sm">
|
||||
未找到技能
|
||||
</div>
|
||||
<div class="border-t border-gray-100 mt-1">
|
||||
<button class="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="fas fa-file-import text-gray-500"></i>
|
||||
<span>导入技能</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Folder Selection -->
|
||||
<div class="relative" id="folderDropdown">
|
||||
<button onclick="toggleDropdown('folderDropdown')" class="tool-btn flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-gray-600 hover:text-gray-800 transition-colors">
|
||||
<i class="far fa-folder text-xs"></i>
|
||||
<span>Claw</span>
|
||||
<i class="fas fa-chevron-down text-xs ml-1"></i>
|
||||
</button>
|
||||
<!-- Folder Menu -->
|
||||
<div class="dropdown-menu absolute bottom-full right-0 mb-2 w-72 bg-white border border-gray-200 rounded-xl shadow-xl py-2 z-50">
|
||||
<div class="px-3 pb-2">
|
||||
<div class="relative">
|
||||
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
|
||||
<input type="text" placeholder="搜索工作空间" class="w-full pl-8 pr-8 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-500">
|
||||
<i class="fas fa-search absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<span>从空文件夹开始</span>
|
||||
</button>
|
||||
|
||||
<button class="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-gray-50 text-left text-sm text-gray-700">
|
||||
<i class="far fa-folder-open text-gray-400"></i>
|
||||
<span>打开新文件夹</span>
|
||||
</button>
|
||||
|
||||
<div class="border-t border-gray-100 my-1"></div>
|
||||
|
||||
<button class="w-full flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 text-left bg-gray-50">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-sm font-medium text-gray-900">Claw</span>
|
||||
<span class="text-xs text-gray-500 truncate max-w-[200px]">c:\Users\szend\WorkBudd...</span>
|
||||
</div>
|
||||
<i class="fas fa-check text-emerald-500 text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Send Button -->
|
||||
<button class="send-btn w-9 h-9 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 hover:bg-emerald-500 hover:text-white transition-all">
|
||||
<i class="fas fa-paper-plane text-sm"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Track active dropdown
|
||||
let activeDropdown = null;
|
||||
|
||||
function toggleDropdown(id) {
|
||||
const dropdown = document.getElementById(id);
|
||||
const menu = dropdown.querySelector('.dropdown-menu');
|
||||
|
||||
// Close if clicking same dropdown
|
||||
if (activeDropdown === id) {
|
||||
menu.classList.remove('active');
|
||||
activeDropdown = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Close all others
|
||||
document.querySelectorAll('.dropdown-menu').forEach(m => {
|
||||
m.classList.remove('active');
|
||||
});
|
||||
|
||||
// Open this one
|
||||
menu.classList.add('active');
|
||||
activeDropdown = id;
|
||||
|
||||
// Prevent event bubbling
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
// Close dropdowns when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.relative')) {
|
||||
document.querySelectorAll('.dropdown-menu').forEach(m => {
|
||||
m.classList.remove('active');
|
||||
});
|
||||
activeDropdown = null;
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-resize textarea
|
||||
const textarea = document.querySelector('textarea');
|
||||
textarea.addEventListener('input', function() {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = Math.max(60, this.scrollHeight) + 'px';
|
||||
});
|
||||
|
||||
// Model selection interaction
|
||||
document.querySelectorAll('.model-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
// Remove check from all
|
||||
document.querySelectorAll('.model-item .fa-check').forEach(check => {
|
||||
check.remove();
|
||||
});
|
||||
// Add check to clicked
|
||||
const check = document.createElement('i');
|
||||
check.className = 'fas fa-check text-emerald-500 text-xs ml-auto';
|
||||
this.appendChild(check);
|
||||
});
|
||||
});
|
||||
|
||||
// Prevent dropdown close when clicking inside
|
||||
document.querySelectorAll('.dropdown-menu').forEach(menu => {
|
||||
menu.addEventListener('click', function(e) {
|
||||
if (e.target.tagName !== 'BUTTON' && !e.target.closest('button')) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user