fix(ui): remove AnimatePresence from sidebar tabs to fix content switching
Some checks failed
CI / Build Frontend (push) Has been cancelled
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled

The framer-motion AnimatePresence with mode="wait" caused the sidebar
content to get stuck on the conversations list when switching to the
agents tab. The React state updated correctly but the DOM did not
re-render. Replaced with simple conditional rendering which is more
reliable and removes the framer-motion dependency from this component.
This commit is contained in:
iven
2026-04-08 23:09:01 +08:00
parent d5ad07d0a7
commit 8af8d733fd

View File

@@ -1,19 +1,10 @@
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
SquarePen, MessageSquare, Bot, Search, X, Settings
} from 'lucide-react';
import { ConversationList } from './ConversationList';
import { CloneManager } from './CloneManager';
import { useChatStore } from '../store/chatStore';
import { defaultTransition } from '../lib/animations';
// Simple fade variants for sidebar tab content (no staggerChildren)
const sidebarTabVariants = {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { duration: 0.15 } },
exit: { opacity: 0, transition: { duration: 0.1 } },
};
export type MainViewType = 'chat';
@@ -96,18 +87,8 @@ export function Sidebar({
{/* Content area */}
<div className="flex-1 overflow-hidden">
<AnimatePresence mode="wait">
<motion.div
key={activeTab}
variants={sidebarTabVariants}
initial="hidden"
animate="visible"
exit="exit"
transition={defaultTransition}
className="h-full overflow-y-auto"
>
{activeTab === 'conversations' && (
<div className="p-2">
<div className="p-2 h-full overflow-y-auto">
{/* Search in conversations */}
<div className="relative mb-2">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
@@ -130,9 +111,7 @@ export function Sidebar({
<ConversationList searchQuery={searchQuery} />
</div>
)}
{activeTab === 'clones' && <CloneManager />}
</motion.div>
</AnimatePresence>
{activeTab === 'clones' && <div className="h-full overflow-y-auto"><CloneManager /></div>}
</div>
{/* Bottom user bar */}