From c726e6335347572c9011e3b8a551d9ddcdd309b0 Mon Sep 17 00:00:00 2001
From: Jerome <jerome@anthropic.com>
Date: Thu, 12 Jun 2025 14:55:45 +0100
Subject: [PATCH] Add logout button to conversation sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 src/components/ConversationSidebar.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/ConversationSidebar.tsx b/src/components/ConversationSidebar.tsx
index 094ef33..3568832 100644
--- a/src/components/ConversationSidebar.tsx
+++ b/src/components/ConversationSidebar.tsx
@@ -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 {
@@ -10,11 +11,19 @@ export function ConversationSidebar() {
     deleteConversation,
     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>
   );
 }
\ No newline at end of file