add composio triggers (#192)

apps/rowboat/app/projects/[projectId]/tools/components/SelectComposioToolkit.tsx

@@ -10,34 +10,31 @@ import { getProjectConfig } from '@/app/actions/project_actions';
 import { z } from 'zod';
 import { ZToolkit, ZListResponse, ZTool } from '@/app/lib/composio/composio';
 import { Project } from '@/app/lib/types/project_types';
-import { ComposioToolsPanel } from './ComposioToolsPanel';
 import { ToolkitCard } from './ToolkitCard';
-import { Workflow, WorkflowTool } from '@/app/lib/types/workflow_types';
+import { Workflow } from '@/app/lib/types/workflow_types';
 
 type ToolkitType = z.infer<typeof ZToolkit>;
 type ToolkitListResponse = z.infer<ReturnType<typeof ZListResponse<typeof ZToolkit>>>;
 type ProjectType = z.infer<typeof Project>;
 
-interface ComposioProps {
+interface SelectComposioToolkitProps {
   projectId: string;
   tools: z.infer<typeof Workflow.shape.tools>;
-  onAddTool: (tool: z.infer<typeof WorkflowTool>) => void;
+  onSelectToolkit: (toolkit: ToolkitType) => void;
   initialToolkitSlug?: string | null;
 }
 
-export function Composio({
+export function SelectComposioToolkit({
   projectId,
   tools,
-  onAddTool,
+  onSelectToolkit,
   initialToolkitSlug
-}: ComposioProps) {
+}: SelectComposioToolkitProps) {
   const [toolkits, setToolkits] = useState<ToolkitType[]>([]);
   const [projectConfig, setProjectConfig] = useState<ProjectType | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedToolkit, setSelectedToolkit] = useState<ToolkitType | null>(null);
-  const [isToolsPanelOpen, setIsToolsPanelOpen] = useState(false);
 
   const loadProjectConfig = useCallback(async () => {
     try {
@@ -84,14 +81,8 @@ export function Composio({
   }, [projectId]);
 
   const handleSelectToolkit = useCallback((toolkit: ToolkitType) => {
-    setSelectedToolkit(toolkit);
-    setIsToolsPanelOpen(true);
-  }, []);
-
-  const handleCloseToolsPanel = useCallback(() => {
-    setSelectedToolkit(null);
-    setIsToolsPanelOpen(false);
-  }, []);
+    onSelectToolkit(toolkit);
+  }, [onSelectToolkit]);
 
   useEffect(() => {
     loadProjectConfig();
@@ -106,11 +97,10 @@ export function Composio({
     if (initialToolkitSlug && toolkits.length > 0) {
       const toolkit = toolkits.find(t => t.slug === initialToolkitSlug);
       if (toolkit) {
-        setSelectedToolkit(toolkit);
-        setIsToolsPanelOpen(true);
+        onSelectToolkit(toolkit);
       }
     }
-  }, [initialToolkitSlug, toolkits]);
+  }, [initialToolkitSlug, toolkits, onSelectToolkit]);
 
   const filteredToolkits = toolkits.filter(toolkit => {
     const searchLower = searchQuery.toLowerCase();
@@ -226,15 +216,6 @@ export function Composio({
           </p>
         </div>
       )}
-
-      {/* Tools Panel */}
-      {selectedToolkit && <ComposioToolsPanel
-        toolkit={selectedToolkit}
-        isOpen={isToolsPanelOpen}
-        onClose={handleCloseToolsPanel}
-        tools={tools}
-        onAddTool={onAddTool}
-      />}
     </div>
   );
 } 

apps/rowboat/app/projects/[projectId]/tools/components/ToolsConfig.tsx

@@ -3,10 +3,12 @@
 import { useState } from 'react';
 import { Tabs, Tab } from '@/components/ui/tabs';
 import { CustomMcpServers } from './CustomMcpServer';
-import { Composio } from './Composio';
+import { SelectComposioToolkit } from './SelectComposioToolkit';
+import { ComposioToolsPanel } from './ComposioToolsPanel';
 import { AddWebhookTool } from './AddWebhookTool';
 import type { Key } from 'react';
 import { Workflow, WorkflowTool } from '@/app/lib/types/workflow_types';
+import { ZToolkit } from '@/app/lib/composio/composio';
 import { z } from 'zod';
 
 interface ToolsConfigProps {
@@ -17,6 +19,8 @@ interface ToolsConfigProps {
   initialToolkitSlug?: string | null;
 }
 
+type ToolkitType = z.infer<typeof ZToolkit>;
+
 export function ToolsConfig({
   projectId,
   useComposioTools,
@@ -29,11 +33,28 @@ export function ToolsConfig({
     defaultActiveTab = 'composio';
   }
   const [activeTab, setActiveTab] = useState(defaultActiveTab);
+  const [selectedToolkit, setSelectedToolkit] = useState<ToolkitType | null>(null);
+  const [isToolsPanelOpen, setIsToolsPanelOpen] = useState(false);
 
   const handleTabChange = (key: Key) => {
     setActiveTab(key.toString());
   };
 
+  const handleSelectToolkit = (toolkit: ToolkitType) => {
+    setSelectedToolkit(toolkit);
+    setIsToolsPanelOpen(true);
+  };
+
+  const handleCloseToolsPanel = () => {
+    setSelectedToolkit(null);
+    setIsToolsPanelOpen(false);
+  };
+
+  const handleAddTool = (tool: z.infer<typeof WorkflowTool>) => {
+    onAddTool(tool);
+    handleCloseToolsPanel();
+  };
+
   return (
     <div className="h-full flex flex-col">
       <Tabs 
@@ -46,10 +67,10 @@ export function ToolsConfig({
         {useComposioTools && (
           <Tab key="composio" title="Composio">
             <div className="mt-4 p-6">
-              <Composio
+              <SelectComposioToolkit
                 projectId={projectId}
                 tools={tools}
-                onAddTool={onAddTool}
+                onSelectToolkit={handleSelectToolkit}
                 initialToolkitSlug={initialToolkitSlug}
               />
             </div>
@@ -72,6 +93,17 @@ export function ToolsConfig({
           </div>
         </Tab>
       </Tabs>
+      
+      {/* Tools Panel */}
+      {selectedToolkit && (
+        <ComposioToolsPanel
+          toolkit={selectedToolkit}
+          isOpen={isToolsPanelOpen}
+          onClose={handleCloseToolsPanel}
+          tools={tools}
+          onAddTool={handleAddTool}
+        />
+      )}
     </div>
   );
 }