From 1b64d97f8917b17db789c8f5be26da662e0ea2a9 Mon Sep 17 00:00:00 2001 From: Nahiyan Khan Date: Tue, 24 Jun 2025 06:43:38 -0400 Subject: [PATCH] iteration --- ui/desktop/src/components/ChatView.tsx | 2 +- .../components/GooseSidebar/AppSidebar.tsx | 367 ++++++------------ .../src/components/bottom_menu/BottomMenu.tsx | 2 +- .../models/bottom_bar/ModelsBottomBar.tsx | 4 +- ui/desktop/src/suspense-loader.tsx | 4 +- 5 files changed, 127 insertions(+), 252 deletions(-) diff --git a/ui/desktop/src/components/ChatView.tsx b/ui/desktop/src/components/ChatView.tsx index c235060bb8..9e86260026 100644 --- a/ui/desktop/src/components/ChatView.tsx +++ b/ui/desktop/src/components/ChatView.tsx @@ -816,7 +816,7 @@ function ChatContentWithSidebar({ )}
- {isLoading && } + {/* {isLoading && } */} {/* Splash component at the bottom when no messages {messages.length === 0 && ( diff --git a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx b/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx index b86a757b08..73fc0af1fa 100644 --- a/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx +++ b/ui/desktop/src/components/GooseSidebar/AppSidebar.tsx @@ -22,7 +22,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/Tooltip'; import ThemeSelector from './ThemeSelector'; import GooseLogo from '../GooseLogo'; import { useChatContext } from '../../contexts/ChatContext'; -import { fetchSessions, type Session } from '../../sessions'; interface SidebarProps { onSelectSession: (sessionId: string) => void; @@ -41,12 +40,9 @@ const AppSidebar: React.FC = ({ setIsGoosehintsModalOpen, setView, const [saveRecipeName, setSaveRecipeName] = useState(''); const [saveGlobal, setSaveGlobal] = useState(true); const [saving, setSaving] = useState(false); - const [recentSessions, setRecentSessions] = useState([]); const { remove } = useConfig(); const { hasActiveSession, resetChat } = useChatContext(); - const refreshTimeoutRef = useRef(null); - useEffect(() => { // Trigger animation after a small delay const timer = setTimeout(() => { @@ -55,74 +51,6 @@ const AppSidebar: React.FC = ({ setIsGoosehintsModalOpen, setView, return () => clearTimeout(timer); }, []); - // Debounced refresh function - const debouncedRefresh = useCallback(() => { - console.log('AppSidebar: Debounced refresh triggered'); - // Clear any existing timeout - if (refreshTimeoutRef.current) { - clearTimeout(refreshTimeoutRef.current); - } - - // Set new timeout - reduced to 200ms for faster response - refreshTimeoutRef.current = setTimeout(() => { - console.log('AppSidebar: Executing debounced refresh'); - loadRecentSessions(); - refreshTimeoutRef.current = null; - }, 200); - }, []); - - // Cleanup timeout on unmount - useEffect(() => { - return () => { - if (refreshTimeoutRef.current) { - clearTimeout(refreshTimeoutRef.current); - } - }; - }, []); - - // Load recent sessions - const loadRecentSessions = async () => { - try { - const sessions = await fetchSessions(); - // Take only the last 5 sessions - setRecentSessions(sessions.slice(0, 5)); - } catch (error) { - console.error('Failed to load recent sessions:', error); - setRecentSessions([]); - } - }; - - useEffect(() => { - console.log('AppSidebar: Initial load'); - loadRecentSessions(); - }, []); - - // Add effect to listen for session creation events - useEffect(() => { - const handleSessionCreated = () => { - console.log('AppSidebar: Session created event received'); - // Immediately refresh to show the new session - loadRecentSessions(); - }; - - const handleMessageStreamFinish = () => { - console.log('AppSidebar: Message stream finished event received'); - // Always refresh when message stream finishes - debouncedRefresh(); - }; - - // Listen for custom events that indicate a session was created - window.addEventListener('session-created', handleSessionCreated); - - // Also listen for message stream finish events - window.addEventListener('message-stream-finished', handleMessageStreamFinish); - - return () => { - window.removeEventListener('session-created', handleSessionCreated); - window.removeEventListener('message-stream-finished', handleMessageStreamFinish); - }; - }, [debouncedRefresh]); - const handleSaveRecipe = async () => { if (!saveRecipeName.trim()) { return; @@ -198,51 +126,63 @@ const AppSidebar: React.FC = ({ setIsGoosehintsModalOpen, setView, {/* Menu */}
- - { - // If we're not on the chat page and have an active session, just navigate back to chat - if (currentPath !== '/' && hasActiveSession) { - navigate('/'); - } else if (hasActiveSession) { - // If we're already on the chat page and have an active session, create a new session - resetChat(); - navigate('/'); - } else { - // Navigate to home if no active session - navigate('/'); + + + { + // If we're not on the chat page and have an active session, just navigate back to chat + if (currentPath !== '/' && hasActiveSession) { + navigate('/'); + } else if (hasActiveSession) { + // If we're already on the chat page and have an active session, create a new session + resetChat(); + navigate('/'); + } else { + // Navigate to home if no active session + navigate('/'); + } + }} + isActive={isActivePath('/')} + tooltip={ + currentPath !== '/' && hasActiveSession + ? 'Return to chat' + : hasActiveSession + ? 'Create a new session' + : 'Go back to the main chat screen' } - }} - isActive={isActivePath('/')} - tooltip={ - currentPath !== '/' && hasActiveSession - ? 'Return to chat' - : hasActiveSession - ? 'Create a new session' - : 'Go back to the main chat screen' - } - className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" - > - - Home - - + className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" + > + + Home + + + - - { - window.electron.createChatWindow( - undefined, - window.appConfig.get('GOOSE_WORKING_DIR') as string | undefined - ); - }} - tooltip="Start a new session in a new window" - className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" - > - - New window - - + + + { + window.electron.createChatWindow( + undefined, + window.appConfig.get('GOOSE_WORKING_DIR') as string | undefined + ); + }} + tooltip="Start a new session in a new window" + className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" + > + + New window + + + {/* = ({ setIsGoosehintsModalOpen, setView, */} - - navigate('/sessions')} - isActive={isActivePath('/sessions')} - tooltip="View and share previous sessions" - className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" - > - - - - {process.env.ALPHA && ( + navigate('/schedules')} - isActive={isActivePath('/schedules')} - tooltip="Manage scheduled runs" + onClick={() => navigate('/sessions')} + isActive={isActivePath('/sessions')} + tooltip="View and share previous sessions" className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" > - - Scheduler + + + + {process.env.ALPHA && ( + + + navigate('/schedules')} + isActive={isActivePath('/schedules')} + tooltip="Manage scheduled runs" + className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" + > + + Scheduler + + + )} - - navigate('/recipes')} - isActive={isActivePath('/recipes')} - tooltip="Browse your saved recipes" - className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" - > - - Recipe library - - + + + navigate('/recipes')} + isActive={isActivePath('/recipes')} + tooltip="Browse your saved recipes" + className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" + > + + Recipe library + + + - - navigate('/settings')} - isActive={isActivePath('/settings')} - tooltip="View all settings and options" - className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" - > - - Settings - - + + + navigate('/settings')} + isActive={isActivePath('/settings')} + tooltip="View all settings and options" + className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" + > + + Settings + + +
- {/* Recent Sessions */} - {recentSessions.length > 0 && ( -
- - - Recent - - - - - {recentSessions.map((session, index) => { - const hasDescription = - session.metadata.description && session.metadata.description.trim() !== ''; - const isNewSession = session.id.match(/^\d{8}_\d{6}$/); - const messageCount = session.metadata.message_count || 0; - // Show loading for new sessions with few messages and no description - // Only show loading for sessions created in the last 5 minutes - // Backend generates descriptions for sessions with < 4 user messages - const sessionDate = new Date(session.modified); - const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000); - const isRecentSession = sessionDate > fiveMinutesAgo; - const shouldShowLoading = - !hasDescription && isNewSession && messageCount <= 3 && isRecentSession; - - return ( - - - { - const workingDir = session.metadata.working_dir; - if (workingDir) { - window.electron.createChatWindow( - undefined, - workingDir, - undefined, - session.id - ); - } - }} - tooltip={`Resume session: ${session.metadata.description || session.id}`} - className="w-full justify-start px-3 rounded-lg h-fit hover:bg-neutral-200 transition-all duration-200" - > - - - {shouldShowLoading ? ( -
- - Generating description... -
- ) : ( - session.metadata.description || session.id - )} - - - - - ); - })} - - - - -
- )} - {/* Theme Selector */}
@@ -404,12 +279,12 @@ const AppSidebar: React.FC = ({ setIsGoosehintsModalOpen, setView, -
+
codename goose
-
+
diff --git a/ui/desktop/src/components/bottom_menu/BottomMenu.tsx b/ui/desktop/src/components/bottom_menu/BottomMenu.tsx index 8e0034c353..f21faef9d4 100644 --- a/ui/desktop/src/components/bottom_menu/BottomMenu.tsx +++ b/ui/desktop/src/components/bottom_menu/BottomMenu.tsx @@ -203,7 +203,7 @@ export default function BottomMenu({ }, [isModelMenuOpen]); return ( -
+
0} />
diff --git a/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx b/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx index 8124e5638e..e1be9ed829 100644 --- a/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx +++ b/ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx @@ -130,10 +130,10 @@ export default function ModelsBottomBar({ dropdownRef, setView }: ModelsBottomBa {isModelMenuOpen && (
-
Current:
+ {/*
Current:
{currentModel} -- {displayProvider} -
+
*/}
-
+ {/*
Loading... -
+
*/} );