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
+
+
+
+
+
+
+
+
+ {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}
/>
)}