diff --git a/frontend/src/pages/app/ui/components/chat/MessagePanelRenderer.tsx b/frontend/src/pages/app/ui/components/chat/MessagePanelRenderer.tsx index 0b4a38a..260d0c0 100644 --- a/frontend/src/pages/app/ui/components/chat/MessagePanelRenderer.tsx +++ b/frontend/src/pages/app/ui/components/chat/MessagePanelRenderer.tsx @@ -89,12 +89,18 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen // Handle chat switching animation useEffect(() => { + console.log("🎬 [DEBUG] MessagePanelRenderer: isChatSwitching changed to:", isChatSwitching); if (isChatSwitching) { + console.log("🎬 [DEBUG] MessagePanelRenderer: Starting switch-out animation"); setSwitchOut(true); setTimeout(() => { + console.log("🎬 [DEBUG] MessagePanelRenderer: Starting switch-in animation"); setSwitchOut(false); setSwitchIn(true); - setTimeout(() => setSwitchIn(false), 200); + setTimeout(() => { + console.log("🎬 [DEBUG] MessagePanelRenderer: Ending switch-in animation"); + setSwitchIn(false); + }, 200); }, 250); } }, [isChatSwitching]); diff --git a/frontend/src/pages/app/ui/hooks/useChat.ts b/frontend/src/pages/app/ui/hooks/useChat.ts index 45fa822..58996c5 100644 --- a/frontend/src/pages/app/ui/hooks/useChat.ts +++ b/frontend/src/pages/app/ui/hooks/useChat.ts @@ -4,7 +4,6 @@ import { request } from "../../core/websocket"; import { API_BASE_URL } from "../../core/config"; import type { Message } from "../../core/types"; import { getAuthHeaders } from "../../auth/api"; -import { delay } from "../../utils/utils"; export function useChat() { const { @@ -82,14 +81,12 @@ export function useChat() { // Reset messages loaded flag and clear messages when chat changes useEffect(() => { - (async () => { - setIsChatSwitching(true); - await delay(250); - messagesLoadedRef.current = false; - clearMessages(); // Clear messages when switching chats - loadMessages(); - setIsChatSwitching(false); - })(); + console.log("πŸ”„ [DEBUG] useChat useEffect triggered for chat change:", chat.currentChat); + console.log("πŸ“ [DEBUG] useChat: Resetting messages loaded flag and clearing messages"); + messagesLoadedRef.current = false; + clearMessages(); // Clear messages when switching chats + console.log("πŸ“₯ [DEBUG] useChat: Loading messages for new chat"); + loadMessages(); }, [chat.currentChat, clearMessages]); return { diff --git a/frontend/src/pages/app/ui/state.ts b/frontend/src/pages/app/ui/state.ts index c5db87e..058e626 100644 --- a/frontend/src/pages/app/ui/state.ts +++ b/frontend/src/pages/app/ui/state.ts @@ -72,12 +72,15 @@ export const useAppState = create((set, get) => ({ publicChatPanel: null, dmPanel: null }, - setIsChatSwitching: (value: boolean) => set((state) => ({ - chat: { - ...state.chat, - isChatSwitching: value - } - })), + setIsChatSwitching: (value: boolean) => { + console.log("🎬 [DEBUG] setIsChatSwitching called with:", value); + set((state) => ({ + chat: { + ...state.chat, + isChatSwitching: value + } + })); + }, addMessage: (message: Message) => set((state) => { // Check if message already exists to prevent duplicates const messageExists = state.chat.messages.some(msg => msg.id === message.id); @@ -257,10 +260,17 @@ export const useAppState = create((set, get) => ({ })), switchToPublicChat: async (chatName: string) => { + console.log("πŸ”„ [DEBUG] switchToPublicChat called with:", chatName); const state = get(); const { user, chat } = state; - if (!user.authToken) return; + if (!user.authToken) { + console.log("❌ [DEBUG] No auth token, returning early"); + return; + } + + console.log("🎬 [DEBUG] Starting chat switching animation for:", chatName); + console.log("🎬 [DEBUG] Current isChatSwitching state:", chat.isChatSwitching); // Start chat switching animation state.setIsChatSwitching(true); @@ -268,18 +278,23 @@ export const useAppState = create((set, get) => ({ // Create or get public chat panel let publicChatPanel = chat.publicChatPanel; if (!publicChatPanel) { + console.log("πŸ†• [DEBUG] Creating new PublicChatPanel for:", chatName); publicChatPanel = new PublicChatPanel(chatName, user); } else { + console.log("♻️ [DEBUG] Reusing existing PublicChatPanel, setting chat name to:", chatName); publicChatPanel.setChatName(chatName); publicChatPanel.setAuthToken(user.authToken); } + console.log("⏳ [DEBUG] Waiting 250ms for animation..."); // Wait for animation await new Promise(resolve => setTimeout(resolve, 250)); + console.log("πŸš€ [DEBUG] Activating panel..."); // Activate panel await publicChatPanel.activate(); + console.log("πŸ“ [DEBUG] Updating state with new panel and chat name"); // Update state set((state) => ({ chat: { @@ -291,15 +306,23 @@ export const useAppState = create((set, get) => ({ } })); + console.log("βœ… [DEBUG] Ending chat switching animation"); // End animation state.setIsChatSwitching(false); }, switchToDM: async (dmData: DMPanelData) => { + console.log("πŸ”„ [DEBUG] switchToDM called with:", dmData); const state = get(); const { user, chat } = state; - if (!user.authToken) return; + if (!user.authToken) { + console.log("❌ [DEBUG] No auth token, returning early"); + return; + } + + console.log("🎬 [DEBUG] Starting DM switching animation for user:", dmData.username); + console.log("🎬 [DEBUG] Current isChatSwitching state:", chat.isChatSwitching); // Start chat switching animation state.setIsChatSwitching(true); @@ -307,20 +330,26 @@ export const useAppState = create((set, get) => ({ // Create or get DM panel let dmPanel = chat.dmPanel; if (!dmPanel) { + console.log("πŸ†• [DEBUG] Creating new DMPanel for user:", dmData.username); dmPanel = new DMPanel(user); } else { + console.log("♻️ [DEBUG] Reusing existing DMPanel, updating auth token"); dmPanel.setAuthToken(user.authToken); } // Set DM data + console.log("πŸ“ [DEBUG] Setting DM data for user:", dmData.username); dmPanel.setDMData(dmData); + console.log("⏳ [DEBUG] Waiting 250ms for animation..."); // Wait for animation await new Promise(resolve => setTimeout(resolve, 250)); + console.log("πŸš€ [DEBUG] Activating DM panel..."); // Activate panel await dmPanel.activate(); + console.log("πŸ“ [DEBUG] Updating state with new DM panel"); // Update state set((state) => ({ chat: { @@ -336,17 +365,22 @@ export const useAppState = create((set, get) => ({ } })); + console.log("βœ… [DEBUG] Ending DM switching animation"); // End animation state.setIsChatSwitching(false); }, switchToTab: async (tab: ChatTabs) => { + console.log("πŸ”„ [DEBUG] switchToTab called with:", tab); const state = get(); + console.log("πŸ“ [DEBUG] Setting active tab to:", tab); state.setActiveTab(tab); if (tab === "chats") { + console.log("πŸ’¬ [DEBUG] Switching to chats tab, calling switchToPublicChat"); await state.switchToPublicChat("ΠžΠ±Ρ‰ΠΈΠΉ Ρ‡Π°Ρ‚"); } else if (tab === "dms") { + console.log("πŸ’¬ [DEBUG] Switching to DMs tab, clearing active panel"); // DM tab - no specific panel until user is selected state.setActivePanel(null); }