Add logout button to conversation sidebar

## Features
- **Logout button**: Added "Log Out" button at bottom of conversation sidebar
- **Confirmation dialog**: Prompts user to confirm before logging out
- **Conditional display**: Only shows when user is authenticated with a provider
- **Proper styling**: Matches sidebar design with subtle gray styling

## Implementation
- Integrated with existing InferenceContext for logout functionality
- Uses `clearProvider()` to handle complete logout process
- Added border separator between conversations and logout button
- Positioned at bottom of sidebar with fixed placement

## User Experience
- ✅ **Easy access**: Logout button always visible when authenticated
- ✅ **Safety confirmation**: Prevents accidental logout with confirm dialog
- ✅ **Clean design**: Subtle styling that doesn't distract from conversations
- ✅ **Complete logout**: Clears all authentication state and persisted data

## Technical Details
- Leverages existing clearProvider() functionality
- Automatically clears API keys, OAuth tokens, and selected models
- Maintains responsive design and dark mode compatibility
- No impact on conversation data (conversations persist locally)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jerome 2025-06-12 14:55:45 +01:00
commit c726e63353
No known key found for this signature in database

View file

@ -1,6 +1,7 @@
// Conversation sidebar with conversation list and management
import { useConversation } from '@/contexts/ConversationContext';
import { useInference } from '@/contexts/InferenceContext';
export function ConversationSidebar() {
const {
@ -11,10 +12,18 @@ export function ConversationSidebar() {
setActiveConversation,
} = useConversation();
const { clearProvider, provider } = useInference();
const handleNewConversation = () => {
createConversation();
};
const handleLogout = () => {
if (confirm('Are you sure you want to log out?')) {
clearProvider();
}
};
const formatDate = (date: Date): string => {
const now = new Date();
const diff = now.getTime() - date.getTime();
@ -115,6 +124,18 @@ export function ConversationSidebar() {
</div>
)}
</div>
{/* Logout Button */}
{provider && (
<div className="p-4 border-t border-gray-200 dark:border-gray-700">
<button
onClick={handleLogout}
className="w-full px-4 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
>
Log Out
</button>
</div>
)}
</div>
);
}