From 37c781a99b94dead07a35431922df8f9b932e821 Mon Sep 17 00:00:00 2001 From: marko-kraemer Date: Thu, 10 Jul 2025 05:16:42 +0200 Subject: [PATCH] wip --- frontend/src/app/(dashboard)/agents/page.tsx | 30 -- .../components/agents/agent-config-modal.tsx | 357 +++++++++++++ .../components/agents/update-agent-dialog.tsx | 472 ------------------ .../components/dashboard/agent-selector.tsx | 329 ------------ .../thread/chat-input/chat-input.tsx | 126 +++-- 5 files changed, 443 insertions(+), 871 deletions(-) create mode 100644 frontend/src/components/agents/agent-config-modal.tsx delete mode 100644 frontend/src/components/agents/update-agent-dialog.tsx delete mode 100644 frontend/src/components/dashboard/agent-selector.tsx diff --git a/frontend/src/app/(dashboard)/agents/page.tsx b/frontend/src/app/(dashboard)/agents/page.tsx index 57da1f3a..6a6eefd3 100644 --- a/frontend/src/app/(dashboard)/agents/page.tsx +++ b/frontend/src/app/(dashboard)/agents/page.tsx @@ -23,7 +23,6 @@ import { usePipedreamProfiles } from '@/hooks/react-query/pipedream/use-pipedrea import { useFeatureFlag } from '@/lib/feature-flags'; // Import components from existing pages -import { UpdateAgentDialog } from '../../../components/agents/update-agent-dialog'; import { SearchAndFilters } from '../../../components/agents/search-and-filters'; import { ResultsInfo } from '../../../components/agents/results-info'; import { EmptyState } from '../../../components/agents/empty-state'; @@ -1508,24 +1507,6 @@ export default function AgentsPage() { className="pl-10" /> - {allTags.length > 0 && ( -
-

Filter by tags:

-
- {allTags.map(tag => ( - handleTagFilter(tag)} - > - - {tag} - - ))} -
-
- )}
@@ -1941,17 +1922,6 @@ export default function AgentsPage() { - {/* Dialogs */} - { - setEditDialogOpen(open); - if (!open) setEditingAgentId(null); - }} - onAgentUpdated={loadAgents} - /> - {/* Publish Dialog */} setPublishDialog(null)}> diff --git a/frontend/src/components/agents/agent-config-modal.tsx b/frontend/src/components/agents/agent-config-modal.tsx new file mode 100644 index 00000000..f5c2bb20 --- /dev/null +++ b/frontend/src/components/agents/agent-config-modal.tsx @@ -0,0 +1,357 @@ +'use client'; + +import React, { useState } from 'react'; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { Button } from '@/components/ui/button'; +import { X, Settings2, Brain, Database, Zap, Workflow, Bot } from 'lucide-react'; +import { AgentMCPConfiguration } from './agent-mcp-configuration'; +import { AgentTriggersConfiguration } from './triggers/agent-triggers-configuration'; +import { AgentWorkflowsConfiguration } from './workflows/agent-workflows-configuration'; +import { AgentKnowledgeBaseManager } from './knowledge-base/agent-knowledge-base-manager'; +import { AgentToolsConfiguration } from './agent-tools-configuration'; +import { useAgent, useUpdateAgent } from '@/hooks/react-query/agents/use-agents'; +import { Input } from '@/components/ui/input'; +import { Textarea } from '@/components/ui/textarea'; +import { Label } from '@/components/ui/label'; +import { toast } from 'sonner'; +import { useRouter } from 'next/navigation'; + +interface AgentConfigModalProps { + isOpen: boolean; + onOpenChange: (open: boolean) => void; + selectedAgentId?: string; + onAgentSelect?: (agentId: string | undefined) => void; + initialTab?: string; +} + +export const AgentConfigModal: React.FC = ({ + isOpen, + onOpenChange, + selectedAgentId, + onAgentSelect, + initialTab = 'integrations' +}) => { + const [activeTab, setActiveTab] = useState(initialTab); + const [editingInstructions, setEditingInstructions] = useState(false); + const [instructionsValue, setInstructionsValue] = useState(''); + const [agentName, setAgentName] = useState(''); + const [agentDescription, setAgentDescription] = useState(''); + + const { data: agent, isLoading } = useAgent(selectedAgentId || ''); + const updateAgentMutation = useUpdateAgent(); + const router = useRouter(); + + const handleAgentSelect = (agentId: string | undefined) => { + onAgentSelect?.(agentId); + }; + + // Update local state when agent data changes + React.useEffect(() => { + if (agent) { + setAgentName(agent.name || ''); + setAgentDescription(agent.description || ''); + setInstructionsValue(agent.system_prompt || ''); + } + }, [agent]); + + const handleSaveInstructions = async () => { + if (!selectedAgentId) return; + + try { + await updateAgentMutation.mutateAsync({ + agentId: selectedAgentId, + name: agentName, + description: agentDescription, + system_prompt: instructionsValue + }); + toast.success('Agent updated successfully'); + setEditingInstructions(false); + } catch (error) { + toast.error('Failed to update agent'); + } + }; + + const handleToolsChange = async (tools: Record) => { + if (!selectedAgentId) return; + + try { + await updateAgentMutation.mutateAsync({ + agentId: selectedAgentId, + agentpress_tools: tools + }); + toast.success('Tools updated successfully'); + } catch (error) { + toast.error('Failed to update tools'); + } + }; + + const handleMCPChange = async (mcps: any) => { + if (!selectedAgentId) return; + + try { + await updateAgentMutation.mutateAsync({ + agentId: selectedAgentId, + configured_mcps: mcps.configured_mcps || [], + custom_mcps: mcps.custom_mcps || [] + }); + toast.success('Integrations updated successfully'); + } catch (error) { + toast.error('Failed to update integrations'); + } + }; + + const displayName = agent?.name || 'Suna'; + + return ( + <> + + + +
+ + + Agent Configuration + + +
+ + +
+ {/* Agent Selector */} +
+
+
+ {/* */} +
+ {selectedAgentId && ( +
+ +
+ )} +
+
+ + {/* Configuration Tabs */} +
+ + + + Integrations + + + + Tools + + + + Instructions + + + + Knowledge Base + + + + Triggers + + + + Workflows + + + +
+ +
+
+

MCP Integrations

+

+ Connect your agent to external services and tools +

+ {selectedAgentId && ( + + )} +
+
+ + + +
+ {selectedAgentId ? ( +
+
+

Standard Tools

+

+ Configure the built-in tools available to your agent +

+
+ +
+ ) : ( +
+ +

Standard Tools

+

+ Select an agent to configure its tools +

+
+ )} +
+ + + +
+ {selectedAgentId ? ( +
+
+
+ + setAgentName(e.target.value)} + placeholder="Enter agent name" + /> +
+ +
+ + setAgentDescription(e.target.value)} + placeholder="Brief description of the agent" + /> +
+ +
+ +