From f7fd1296bf507132d91a6fe7a7924392c14e2ec4 Mon Sep 17 00:00:00 2001
From: Saumya <saumyadas2017@gmail.com>
Date: Mon, 28 Jul 2025 11:49:24 +0530
Subject: [PATCH] improve ux a bit

---
 .../agents/pipedream/pipedream-connector.tsx  |  1 -
 .../agents/pipedream/pipedream-registry.tsx   |  2 +-
 .../thread/chat-input/agent-selector.tsx      | 24 ++++++++++++-------
 .../content/pipedream-connect-button.tsx      |  1 -
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/agents/pipedream/pipedream-connector.tsx b/frontend/src/components/agents/pipedream/pipedream-connector.tsx
index 15af0857..78288597 100644
--- a/frontend/src/components/agents/pipedream/pipedream-connector.tsx
+++ b/frontend/src/components/agents/pipedream/pipedream-connector.tsx
@@ -280,7 +280,6 @@ export const PipedreamConnector: React.FC<PipedreamConnectorProps> = ({
           }
         </p>
       </div>
-
       {mode !== 'profile-only' && availableProfiles.length > 0 && !isCreatingProfile && (
         <div className="space-y-4">
           {connectionSuccessProfileId && (
diff --git a/frontend/src/components/agents/pipedream/pipedream-registry.tsx b/frontend/src/components/agents/pipedream/pipedream-registry.tsx
index cff30a8b..50df380e 100644
--- a/frontend/src/components/agents/pipedream/pipedream-registry.tsx
+++ b/frontend/src/components/agents/pipedream/pipedream-registry.tsx
@@ -292,7 +292,7 @@ export const PipedreamRegistry: React.FC<PipedreamRegistryProps> = ({
                   </div>
                   <div>
                     <h2 className="text-md font-semibold text-foreground">
-                      {showAgentSelector && currentAgentId ? 'Connected to Agent' : 'Connected Apps'}
+                    Your Apps
                     </h2>
                   </div>
                 </div>
diff --git a/frontend/src/components/thread/chat-input/agent-selector.tsx b/frontend/src/components/thread/chat-input/agent-selector.tsx
index 7d9eae0b..8687e164 100644
--- a/frontend/src/components/thread/chat-input/agent-selector.tsx
+++ b/frontend/src/components/thread/chat-input/agent-selector.tsx
@@ -85,12 +85,22 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
     }))
   ];
 
-  // Filter agents based on search query
   const filteredAgents = allAgents.filter((agent) =>
     agent.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
     agent.description?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const sortedFilteredAgents = React.useMemo(() => {
+    if (!selectedAgentId) {
+      return filteredAgents;
+    }
+    
+    const selectedAgent = filteredAgents.find(agent => agent.id === selectedAgentId);
+    const otherAgents = filteredAgents.filter(agent => agent.id !== selectedAgentId);
+    
+    return selectedAgent ? [selectedAgent, ...otherAgents] : filteredAgents;
+  }, [filteredAgents, selectedAgentId]);
+
   useEffect(() => {
     if (isOpen && searchInputRef.current) {
       setTimeout(() => {
@@ -114,12 +124,10 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
       };
     }
     
-    // If selectedAgentId is not undefined but no agent is found, log a warning
     if (selectedAgentId !== undefined) {
       console.warn('Agent with ID', selectedAgentId, 'not found, falling back to Suna');
     }
     
-    // Default to Suna (the first agent which has id: undefined)
     const defaultAgent = allAgents[0];
     const isDefaultAgentSuna = defaultAgent?.metadata?.is_suna_default || false;
     return {
@@ -145,16 +153,16 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
     if (e.key === 'ArrowDown') {
       e.preventDefault();
       setHighlightedIndex((prev) =>
-        prev < filteredAgents.length - 1 ? prev + 1 : 0
+        prev < sortedFilteredAgents.length - 1 ? prev + 1 : 0
       );
     } else if (e.key === 'ArrowUp') {
       e.preventDefault();
       setHighlightedIndex((prev) =>
-        prev > 0 ? prev - 1 : filteredAgents.length - 1
+        prev > 0 ? prev - 1 : sortedFilteredAgents.length - 1
       );
     } else if (e.key === 'Enter' && highlightedIndex >= 0) {
       e.preventDefault();
-      const selectedAgent = filteredAgents[highlightedIndex];
+      const selectedAgent = sortedFilteredAgents[highlightedIndex];
       if (selectedAgent) {
         handleAgentSelect(selectedAgent.id);
       }
@@ -320,7 +328,7 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
               <div className="px-4 py-6 text-sm text-muted-foreground/70 text-center">
                 <div className="animate-pulse">Loading agents...</div>
               </div>
-            ) : filteredAgents.length === 0 ? (
+            ) : sortedFilteredAgents.length === 0 ? (
               <div className="px-4 py-6 text-sm text-muted-foreground/70 text-center">
                 <Search className="h-6 w-6 mx-auto mb-2 opacity-40" />
                 <p>No agents found</p>
@@ -328,7 +336,7 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
               </div>
             ) : (
               <div className="space-y-0.5">
-                {filteredAgents.map((agent, index) => renderAgentItem(agent, index))}
+                {sortedFilteredAgents.map((agent, index) => renderAgentItem(agent, index))}
               </div>
             )}
           </div>
diff --git a/frontend/src/components/thread/content/pipedream-connect-button.tsx b/frontend/src/components/thread/content/pipedream-connect-button.tsx
index 17f5286f..3b63262a 100644
--- a/frontend/src/components/thread/content/pipedream-connect-button.tsx
+++ b/frontend/src/components/thread/content/pipedream-connect-button.tsx
@@ -130,7 +130,6 @@ export const PipedreamConnectButton: React.FC<PipedreamConnectButtonProps> = ({
           <Button 
             onClick={handleConnect}
             size="sm"
-            className='bg-blue-600 hover:bg-blue-700 text-white gap-2 flex-shrink-0'
           >
             Connect to {appName}
             <ExternalLink className="h-4 w-4" />