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
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:
@@ -1,19 +1,10 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { motion, AnimatePresence } from 'framer-motion';
|
|
||||||
import {
|
import {
|
||||||
SquarePen, MessageSquare, Bot, Search, X, Settings
|
SquarePen, MessageSquare, Bot, Search, X, Settings
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { ConversationList } from './ConversationList';
|
import { ConversationList } from './ConversationList';
|
||||||
import { CloneManager } from './CloneManager';
|
import { CloneManager } from './CloneManager';
|
||||||
import { useChatStore } from '../store/chatStore';
|
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';
|
export type MainViewType = 'chat';
|
||||||
|
|
||||||
@@ -96,18 +87,8 @@ export function Sidebar({
|
|||||||
|
|
||||||
{/* Content area */}
|
{/* Content area */}
|
||||||
<div className="flex-1 overflow-hidden">
|
<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' && (
|
{activeTab === 'conversations' && (
|
||||||
<div className="p-2">
|
<div className="p-2 h-full overflow-y-auto">
|
||||||
{/* Search in conversations */}
|
{/* Search in conversations */}
|
||||||
<div className="relative mb-2">
|
<div className="relative mb-2">
|
||||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
|
<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} />
|
<ConversationList searchQuery={searchQuery} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{activeTab === 'clones' && <CloneManager />}
|
{activeTab === 'clones' && <div className="h-full overflow-y-auto"><CloneManager /></div>}
|
||||||
</motion.div>
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bottom user bar */}
|
{/* Bottom user bar */}
|
||||||
|
|||||||
Reference in New Issue
Block a user