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:
parent
e5a16a1146
commit
c726e63353
1 changed files with 21 additions and 0 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue