From 6e229b383083489c9ec575354f6812f8152512c7 Mon Sep 17 00:00:00 2001 From: marko-kraemer Date: Sat, 5 Jul 2025 15:56:09 +0200 Subject: [PATCH 1/2] fe improvements --- backend/docker-compose.yml | 8 +- .../src/components/sidebar/nav-agents.tsx | 303 +++++++----------- .../src/components/sidebar/sidebar-left.tsx | 40 ++- .../thread/chat-input/chat-input.tsx | 5 +- .../components/thread/thread-site-header.tsx | 4 +- frontend/src/lib/home.tsx | 14 +- 6 files changed, 156 insertions(+), 218 deletions(-) diff --git a/backend/docker-compose.yml b/backend/docker-compose.yml index 729e93ea..5a403fd7 100644 --- a/backend/docker-compose.yml +++ b/backend/docker-compose.yml @@ -81,8 +81,8 @@ services: redis: image: redis:8-alpine - # ports: - # - "127.0.0.1:6379:6379" + ports: + - "127.0.0.1:6379:6379" volumes: - redis_data:/data - ./services/docker/redis.conf:/usr/local/etc/redis/redis.conf:ro @@ -104,8 +104,8 @@ services: rabbitmq: image: rabbitmq - # ports: - # - "127.0.0.1:5672:5672" + ports: + - "127.0.0.1:5672:5672" volumes: - rabbitmq_data:/var/lib/rabbitmq restart: unless-stopped diff --git a/frontend/src/components/sidebar/nav-agents.tsx b/frontend/src/components/sidebar/nav-agents.tsx index 3c0b25e4..88ddcf48 100644 --- a/frontend/src/components/sidebar/nav-agents.tsx +++ b/frontend/src/components/sidebar/nav-agents.tsx @@ -7,7 +7,6 @@ import { Link as LinkIcon, MoreHorizontal, Trash2, - Plus, MessagesSquare, Loader2, Share2, @@ -383,97 +382,37 @@ export function NavAgents() { - ) : ( - - -
- - - New Agent - -
-
- New Agent -
- )} + ) : null} ) : null} - {state === 'collapsed' && ( - - - -
- - - - New Agent - - -
-
- New Agent -
-
- )} - {isLoading ? ( - // Show skeleton loaders while loading - Array.from({ length: 3 }).map((_, index) => ( - - -
-
-
-
- )) - ) : combinedThreads.length > 0 ? ( - // Show all threads with project info + + {state !== 'collapsed' && ( <> - {combinedThreads.map((thread) => { - // Check if this thread is currently active - const isActive = pathname?.includes(thread.threadId) || false; - const isThreadLoading = loadingThreadId === thread.threadId; - const isSelected = selectedThreads.has(thread.threadId); + {isLoading ? ( + // Show skeleton loaders while loading + Array.from({ length: 3 }).map((_, index) => ( + + +
+
+
+
+ )) + ) : combinedThreads.length > 0 ? ( + // Show all threads with project info + <> + {combinedThreads.map((thread) => { + // Check if this thread is currently active + const isActive = pathname?.includes(thread.threadId) || false; + const isThreadLoading = loadingThreadId === thread.threadId; + const isSelected = selectedThreads.has(thread.threadId); - return ( - - {state === 'collapsed' ? ( - - -
- - - handleThreadClick(e, thread.threadId, thread.url) - } - > - {isThreadLoading ? ( - - ) : ( - - )} - {thread.projectName} - - -
-
- {thread.projectName} -
- ) : ( -
+ return ( + - - handleThreadClick(e, thread.threadId, thread.url) - } - className="flex items-center" - > -
- {/* Show checkbox on hover or when selected, otherwise show MessagesSquare */} - {isThreadLoading ? ( - - ) : ( - <> - {/* MessagesSquare icon - hidden on hover if not selected */} - - - {/* Checkbox - appears on hover or when selected */} -
toggleThreadSelection(thread.threadId, e)} - > -
- {isSelected && } -
-
- - )} -
- {thread.projectName} - -
-
- )} - {state !== 'collapsed' && !isSelected && ( - - - { - // Ensure pointer events are enabled when dropdown opens - document.body.style.pointerEvents = 'auto'; - }} - > - - More - - - - { - setSelectedItem({ threadId: thread?.threadId, projectId: thread?.projectId }) - setShowShareModal(true) - }}> - - Share Chat - - - + + handleThreadClick(e, thread.threadId, thread.url) + } + className="flex items-center flex-1 min-w-0" > - - Open in New Tab - - - - - handleDeleteThread( - thread.threadId, - thread.projectName, - ) - } - > - - Delete - - - - )} -
- ); - })} + {isThreadLoading ? ( + + ) : null} + {thread.projectName} + + + {/* Checkbox - only visible on hover of this specific area */} +
toggleThreadSelection(thread.threadId, e)} + > +
+ {isSelected && } +
+
+ + {/* Dropdown Menu - inline with content */} + + + + + + { + setSelectedItem({ threadId: thread?.threadId, projectId: thread?.projectId }) + setShowShareModal(true) + }}> + + Share Chat + + + + + Open in New Tab + + + + + handleDeleteThread( + thread.threadId, + thread.projectName, + ) + } + > + + Delete + + + + + + + ); + })} + + ) : ( + + + No tasks yet + + + )} - ) : ( - - - - No tasks yet - - )}
diff --git a/frontend/src/components/sidebar/sidebar-left.tsx b/frontend/src/components/sidebar/sidebar-left.tsx index 62c4d133..4ea08c1a 100644 --- a/frontend/src/components/sidebar/sidebar-left.tsx +++ b/frontend/src/components/sidebar/sidebar-left.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Link from 'next/link'; -import { Bot, Menu, Store, Shield, Key, Workflow } from 'lucide-react'; +import { Bot, Menu, Store, Shield, Key, Workflow, Plus } from 'lucide-react'; import { NavAgents } from '@/components/sidebar/nav-agents'; import { NavUserWithTeams } from '@/components/sidebar/nav-user-with-teams'; @@ -132,22 +132,20 @@ export function SidebarLeft({ {!flagsLoading && (customAgentsEnabled || marketplaceEnabled) && ( - {customAgentsEnabled && ( - - - - - Agent Playground - - - - )} + + + + + New Task + + + {marketplaceEnabled && ( @@ -156,10 +154,22 @@ export function SidebarLeft({ )} + {customAgentsEnabled && ( + + + + + Agent Playground + + + + )} {customAgentsEnabled && ( diff --git a/frontend/src/components/thread/chat-input/chat-input.tsx b/frontend/src/components/thread/chat-input/chat-input.tsx index faac0c2a..339c3c05 100644 --- a/frontend/src/components/thread/chat-input/chat-input.tsx +++ b/frontend/src/components/thread/chat-input/chat-input.tsx @@ -311,7 +311,7 @@ export const ChatInput = forwardRef( - {isAgentRunning && ( + {/* {isAgentRunning && ( ( {agentName ? `${agentName} is working...` : 'Suna is working...'} - )} + )} */} + ); }, diff --git a/frontend/src/components/thread/thread-site-header.tsx b/frontend/src/components/thread/thread-site-header.tsx index d8c57aca..67044d36 100644 --- a/frontend/src/components/thread/thread-site-header.tsx +++ b/frontend/src/components/thread/thread-site-header.tsx @@ -264,7 +264,7 @@ export function SiteHeader({ - + {/*