File size: 2,553 Bytes
42b93cf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
class CustomChatSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.sidebar {
width: 260px;
height: 100%;
overflow-y: auto;
}
.conversation-item:hover {
background-color: rgba(79, 70, 229, 0.1);
}
.dark .conversation-item:hover {
background-color: rgba(99, 102, 241, 0.2);
}
</style>
<aside class="sidebar border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
<div class="p-4">
<button class="w-full flex items-center justify-center space-x-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
<i data-feather="plus" class="w-4 h-4"></i>
<span>New Chat</span>
</button>
</div>
<div class="px-2">
<h3 class="px-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Recent Conversations</h3>
<div class="space-y-1">
<div class="conversation-item px-3 py-2 rounded-lg cursor-pointer flex items-center space-x-2">
<i data-feather="message-square" class="text-gray-500 dark:text-gray-400 w-4 h-4"></i>
<span class="text-sm text-gray-800 dark:text-gray-200 truncate">Website design ideas</span>
</div>
<div class="conversation-item px-3 py-2 rounded-lg cursor-pointer flex items-center space-x-2">
<i data-feather="message-square" class="text-gray-500 dark:text-gray-400 w-4 h-4"></i>
<span class="text-sm text-gray-800 dark:text-gray-200 truncate">Marketing strategy</span>
</div>
<div class="conversation-item px-3 py-2 rounded-lg cursor-pointer flex items-center space-x-2">
<i data-feather="message-square" class="text-gray-500 dark:text-gray-400 w-4 h-4"></i>
<span class="text-sm text-gray-800 dark:text-gray-200 truncate">Content calendar</span>
</div>
<div class="conversation-item px-3 py-2 rounded-lg cursor-pointer flex items-center space-x-2">
<i data-feather="message-square" class="text-gray-500 dark:text-gray-400 w-4 h-4"></i>
<span class="text-sm text-gray-800 dark:text-gray-200 truncate">Social media tips</span>
</div>
</div>
</div>
</aside>
`;
}
}
customElements.define('custom-chat-sidebar', CustomChatSidebar); |