diff --git a/frontend/src/components/agents/agent-configuration-dialog.tsx b/frontend/src/components/agents/agent-configuration-dialog.tsx index aadcd60f..05635030 100644 --- a/frontend/src/components/agents/agent-configuration-dialog.tsx +++ b/frontend/src/components/agents/agent-configuration-dialog.tsx @@ -8,9 +8,14 @@ import { DialogContent, DialogHeader, DialogTitle, - DialogDescription, DialogFooter, } from '@/components/ui/dialog'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; import { Tabs, TabsContent, @@ -35,13 +40,15 @@ import { Edit3, Save, Brain, + ChevronDown, + Search, } from 'lucide-react'; import { toast } from 'sonner'; import { cn } from '@/lib/utils'; import { KortixLogo } from '@/components/sidebar/kortix-logo'; import { useAgentVersionData } from '@/hooks/use-agent-version-data'; -import { useUpdateAgent } from '@/hooks/react-query/agents/use-agents'; +import { useUpdateAgent, useAgents } from '@/hooks/react-query/agents/use-agents'; import { useUpdateAgentMCPs } from '@/hooks/react-query/agents/use-update-agent-mcps'; import { useExportAgent } from '@/hooks/react-query/agents/use-agent-export-import'; import { ExpandableMarkdownEditor } from '@/components/ui/expandable-markdown-editor'; @@ -62,6 +69,7 @@ interface AgentConfigurationDialogProps { onOpenChange: (open: boolean) => void; agentId: string; initialTab?: 'instructions' | 'tools' | 'integrations' | 'knowledge' | 'playbooks' | 'triggers'; + onAgentChange?: (agentId: string) => void; } export function AgentConfigurationDialog({ @@ -69,12 +77,15 @@ export function AgentConfigurationDialog({ onOpenChange, agentId, initialTab = 'instructions', + onAgentChange, }: AgentConfigurationDialogProps) { const router = useRouter(); const searchParams = useSearchParams(); const queryClient = useQueryClient(); const { agent, versionData, isViewingOldVersion, isLoading, error } = useAgentVersionData({ agentId }); + const { data: agentsResponse } = useAgents({}, { enabled: !!onAgentChange }); + const agents = agentsResponse?.agents || []; const updateAgentMutation = useUpdateAgent(); const updateAgentMCPsMutation = useUpdateAgentMCPs(); @@ -341,70 +352,150 @@ export function AgentConfigurationDialog({ )} -
- {isEditingName ? ( -
- setEditName(e.target.value)} - onKeyDown={(e) => { - if (e.key === 'Enter') { - handleNameSave(); - } else if (e.key === 'Escape') { - setEditName(formData.name); - setIsEditingName(false); - } - }} - className="h-8 w-64" - maxLength={50} - /> - - -
- ) : ( -
- - {isLoading ? 'Loading...' : formData.name || 'Agent'} - - {isNameEditable && ( +
+
+ {isEditingName ? ( + // Name editing mode (takes priority over everything) +
+ setEditName(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + handleNameSave(); + } else if (e.key === 'Escape') { + setEditName(formData.name); + setIsEditingName(false); + } + }} + className="h-8 w-64" + maxLength={50} + /> + - )} -
- )} - - Configure your agent's capabilities and behavior - +
+ ) : onAgentChange ? ( + // When agent switching is enabled, show a sleek inline agent selector +
+ + + + + +
+
+ + Switch Agent +
+
+
+ {agents.map((agent: any) => ( + onAgentChange(agent.agent_id)} + className="p-3 flex items-center gap-3 cursor-pointer" + > + {agent.metadata?.is_suna_default ? ( +
+ +
+ ) : ( + + )} +
+
{agent.name}
+ {agent.description && ( +
+ {agent.description} +
+ )} +
+ {agent.agent_id === agentId && ( + + )} +
+ ))} +
+
+
+ {/* Add edit button for name editing when agent switching is enabled */} + {isNameEditable && ( + + )} +
+ ) : ( + // Static title mode (no agent switching available) +
+ + {isLoading ? 'Loading...' : formData.name || 'Agent'} + + {isNameEditable && ( + + )} +
+ )} +
diff --git a/frontend/src/components/agents/agents-grid.tsx b/frontend/src/components/agents/agents-grid.tsx index 1b2c7f5b..9433a0b9 100644 --- a/frontend/src/components/agents/agents-grid.tsx +++ b/frontend/src/components/agents/agents-grid.tsx @@ -385,6 +385,9 @@ export const AgentsGrid: React.FC = ({ open={showConfigDialog} onOpenChange={setShowConfigDialog} agentId={configAgentId} + onAgentChange={(newAgentId) => { + setConfigAgentId(newAgentId); + }} /> )} diff --git a/frontend/src/components/dashboard/dashboard-content.tsx b/frontend/src/components/dashboard/dashboard-content.tsx index c32103a7..4b56c7ef 100644 --- a/frontend/src/components/dashboard/dashboard-content.tsx +++ b/frontend/src/components/dashboard/dashboard-content.tsx @@ -433,6 +433,10 @@ export function DashboardContent() { open={showConfigDialog} onOpenChange={setShowConfigDialog} agentId={configAgentId} + onAgentChange={(newAgentId) => { + setConfigAgentId(newAgentId); + setSelectedAgent(newAgentId); + }} /> )} diff --git a/frontend/src/components/thread/chat-input/chat-input.tsx b/frontend/src/components/thread/chat-input/chat-input.tsx index 4a493032..85725438 100644 --- a/frontend/src/components/thread/chat-input/chat-input.tsx +++ b/frontend/src/components/thread/chat-input/chat-input.tsx @@ -667,6 +667,7 @@ export const ChatInput = memo(forwardRef( onOpenChange={(open) => setAgentConfigDialog({ ...agentConfigDialog, open })} agentId={selectedAgentId} initialTab={agentConfigDialog.tab} + onAgentChange={onAgentSelect} /> )} diff --git a/frontend/src/components/thread/chat-input/unified-config-menu.tsx b/frontend/src/components/thread/chat-input/unified-config-menu.tsx index 274cf1e3..9ef2d5d5 100644 --- a/frontend/src/components/thread/chat-input/unified-config-menu.tsx +++ b/frontend/src/components/thread/chat-input/unified-config-menu.tsx @@ -411,6 +411,7 @@ const LoggedInMenu: React.FC = memo(function LoggedInMen onOpenChange={(open) => setAgentConfigDialog({ ...agentConfigDialog, open })} agentId={selectedAgentId || displayAgent?.agent_id} initialTab={agentConfigDialog.tab} + onAgentChange={onAgentSelect} /> )}