components/chat-sidebar.js

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);