apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-06-03 19:25:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #176 from rowboatlabs/copilot_tools_improvements

Browse source 
Copilot tools improvements
This commit is contained in:
Ramnique Singh 2025-07-23 16:30:29 +05:30 • committed by GitHub
commit 775a64c5a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
42 changed files with 1930 additions and 1488 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/rowboat/app/actions/actions.ts
View file

@ -60,7 +60,6 @@ export async function scrapeWebpage(url: string): Promise<z.infer<typeof Webpage
export async function getAssistantResponseStreamId(
projectId: string,
workflow: z.infer<typeof Workflow>,
projectTools: z.infer<typeof WorkflowTool>[],
messages: z.infer<typeof Message>[],
): Promise<{ streamId: string } | { billingError: string }> {
await projectAuthCheck(projectId);
@ -83,6 +82,6 @@ export async function getAssistantResponseStreamId(
return { billingError: error || 'Billing error' };
}
const response = await getAgenticResponseStreamId(projectId, workflow, projectTools, messages);
const response = await getAgenticResponseStreamId(projectId, workflow, messages);
return response;
}

11
apps/rowboat/app/actions/composio_actions.ts
View file

@ -42,9 +42,9 @@ export async function getToolkit(projectId: string, toolkitSlug: string): Promis
return await libGetToolkit(toolkitSlug);
}
export async function listTools(projectId: string, toolkitSlug: string, cursor: string | null = null): Promise<z.infer<ReturnType<typeof ZListResponse<typeof ZTool>>>> {
export async function listTools(projectId: string, toolkitSlug: string, searchQuery: string | null, cursor: string | null = null): Promise<z.infer<ReturnType<typeof ZListResponse<typeof ZTool>>>> {
await projectAuthCheck(projectId);
return await libListTools(toolkitSlug, cursor);
return await libListTools(toolkitSlug, searchQuery, cursor);
}
export async function createComposioManagedOauth2ConnectedAccount(projectId: string, toolkitSlug: string, callbackUrl: string): Promise<z.infer<typeof ZCreateConnectedAccountResponse>> {
@ -216,11 +216,4 @@ export async function deleteConnectedAccount(projectId: string, toolkitSlug: str
await projectsCollection.updateOne({ _id: projectId }, { $unset: { [key]: "" } });
return true;
}
export async function updateComposioSelectedTools(projectId: string, tools: z.infer<typeof ZTool>[]): Promise<void> {
await projectAuthCheck(projectId);
// update project with new selected tools
await projectsCollection.updateOne({ _id: projectId }, { $set: { composioSelectedTools: tools } });
}

24
apps/rowboat/app/actions/copilot_actions.ts
View file

@ -11,8 +11,6 @@ import { check_query_limit } from "../lib/rate_limiting";
import { QueryLimitError } from "../lib/client_utils";
import { projectAuthCheck } from "./project_actions";
import { redisClient } from "../lib/redis";
import { collectProjectTools } from "../lib/project_tools";
import { mergeProjectTools } from "../lib/types/project_types";
import { authorizeUserAction, logUsage } from "./billing_actions";
import { USE_BILLING } from "../lib/feature_flags";
import { WithStringId } from "../lib/types/types";
@ -44,21 +42,12 @@ export async function getCopilotResponseStream(
if (!await check_query_limit(projectId)) {
throw new QueryLimitError();
}
// Get MCP tools from project and merge with workflow tools
const projectTools = await collectProjectTools(projectId);
// Convert workflow to copilot format with both workflow and project tools
const wflow = {
...current_workflow_config,
tools: mergeProjectTools(current_workflow_config.tools, projectTools)
};
// prepare request
const request: z.infer<typeof CopilotAPIRequest> = {
projectId,
messages,
workflow: wflow,
workflow: current_workflow_config,
context,
dataSources: dataSources,
};
@ -97,20 +86,11 @@ export async function getCopilotAgentInstructions(
return { billingError: authResponse.error || 'Billing error' };
}
// Get MCP tools from project and merge with workflow tools
const projectTools = await collectProjectTools(projectId);
// Convert workflow to copilot format with both workflow and project tools
const wflow = {
...current_workflow_config,
tools: mergeProjectTools(current_workflow_config.tools, projectTools)
};
// prepare request
const request: z.infer<typeof CopilotAPIRequest> = {
projectId,
messages,
workflow: wflow,
workflow: current_workflow_config,
context: {
type: 'agent',
name: agentName,

67
apps/rowboat/app/actions/custom_mcp_server_actions.ts Normal file
View file

@ -0,0 +1,67 @@
'use server';
import { projectsCollection } from '../lib/mongodb';
import { z } from 'zod';
import { projectAuthCheck } from './project_actions';
import { CustomMcpServer } from '../lib/types/project_types';
import { getMcpClient } from '../lib/mcp';
import { WorkflowTool } from '../lib/types/workflow_types';
import { authCheck } from './auth_actions';
type McpServerType = z.infer<typeof CustomMcpServer>;
function validateUrl(url: string): string {
try {
const parsedUrl = new URL(url);
if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
throw new Error('Invalid protocol');
}
return parsedUrl.toString();
} catch (error) {
throw new Error('Invalid URL');
}
}
export async function addServer(projectId: string, name: string, server: McpServerType): Promise<void> {
await projectAuthCheck(projectId);
// Validate the server URL
validateUrl(server.serverUrl);
// Update the customMcpServers record with the server
await projectsCollection.updateOne(
{ _id: projectId },
{ $set: { [`customMcpServers.${name}`]: server } }
);
}
export async function removeServer(projectId: string, name: string): Promise<void> {
await projectAuthCheck(projectId);
await projectsCollection.updateOne(
{ _id: projectId },
{ $unset: { [`customMcpServers.${name}`]: "" } }
);
}
export async function fetchTools(serverUrl: string, serverName: string): Promise<z.infer<typeof WorkflowTool>[]> {
await authCheck();
const client = await getMcpClient(serverUrl, serverName);
const result = await client.listTools();
return result.tools.map(tool => {
return {
name: tool.name,
description: tool.description || '',
parameters: {
type: 'object',
properties: tool.inputSchema?.properties || {},
required: tool.inputSchema?.required || [],
additionalProperties: true,
},
isMcp: true,
mcpServerName: serverName,
mcpServerURL: serverUrl,
};
});
}

93
apps/rowboat/app/actions/custom_server_actions.ts
View file

@ -1,93 +0,0 @@
'use server';
import { projectsCollection } from '../lib/mongodb';
import { MCPServer } from '../lib/types/types';
import { z } from 'zod';
import { projectAuthCheck } from './project_actions';
type McpServerType = z.infer<typeof MCPServer>;
function formatServerUrl(url: string): string {
// Ensure URL starts with http:// or https://
if (!url.startsWith('http://') && !url.startsWith('https://')) {
url = 'http://' + url;
}
// Remove trailing slash if present
return url.replace(/\/$/, '');
}
export async function fetchCustomServers(projectId: string) {
await projectAuthCheck(projectId);
const project = await projectsCollection.findOne({ _id: projectId });
return (project?.mcpServers || [])
.filter(server => server.serverType === 'custom')
.map(server => ({
...server,
serverType: 'custom' as const,
isReady: true // Custom servers are always ready
}));
}
export async function addCustomServer(projectId: string, server: McpServerType) {
await projectAuthCheck(projectId);
// Format the server URL and ensure isReady is true for custom servers
const formattedServer = {
...server,
serverUrl: formatServerUrl(server.serverUrl || ''),
isReady: true // Custom servers are always ready
};
await projectsCollection.updateOne(
{ _id: projectId },
{ $push: { mcpServers: formattedServer } }
);
return formattedServer;
}
export async function removeCustomServer(projectId: string, serverName: string) {
await projectAuthCheck(projectId);
await projectsCollection.updateOne(
{ _id: projectId },
{ $pull: { mcpServers: { name: serverName } } }
);
}
export async function toggleCustomServer(projectId: string, serverName: string, isActive: boolean) {
await projectAuthCheck(projectId);
await projectsCollection.updateOne(
{ _id: projectId, "mcpServers.name": serverName },
{
$set: {
"mcpServers.$.isActive": isActive,
"mcpServers.$.isReady": isActive // Update isReady along with isActive
}
}
);
}
export async function updateCustomServerTools(
projectId: string,
serverName: string,
tools: McpServerType['tools'],
availableTools?: McpServerType['availableTools']
) {
await projectAuthCheck(projectId);
const update: Record<string, any> = {
"mcpServers.$.tools": tools
};
if (availableTools) {
update["mcpServers.$.availableTools"] = availableTools;
}
await projectsCollection.updateOne(
{ _id: projectId, "mcpServers.name": serverName },
{ $set: update }
);
}

7
apps/rowboat/app/actions/project_actions.ts
View file

@ -14,8 +14,6 @@ import { USE_AUTH } from "../lib/feature_flags";
import { deleteMcpServerInstance, listActiveServerInstances } from "./klavis_actions";
import { authorizeUserAction } from "./billing_actions";
import { Workflow } from "../lib/types/workflow_types";
import { WorkflowTool } from "../lib/types/workflow_types";
import { collectProjectTools as libCollectProjectTools } from "../lib/project_tools";
const KLAVIS_API_KEY = process.env.KLAVIS_API_KEY || '';
@ -330,11 +328,6 @@ export async function createProjectFromWorkflowJson(formData: FormData): Promise
return { id: projectId };
}
export async function collectProjectTools(projectId: string): Promise<z.infer<typeof WorkflowTool>[]> {
await projectAuthCheck(projectId);
return libCollectProjectTools(projectId);
}
export async function saveWorkflow(projectId: string, workflow: z.infer<typeof Workflow>) {
await projectAuthCheck(projectId);

4
apps/rowboat/app/api/stream-response/[streamId]/route.ts
View file

@ -13,7 +13,7 @@ export async function GET(request: Request, props: { params: Promise<{ streamId:
}
// parse the payload
const { projectId, workflow, projectTools, messages } = ZStreamAgentResponsePayload.parse(JSON.parse(payload));
const { projectId, workflow, messages } = ZStreamAgentResponsePayload.parse(JSON.parse(payload));
console.log('payload', payload);
// fetch billing customer id
@ -29,7 +29,7 @@ export async function GET(request: Request, props: { params: Promise<{ streamId:
async start(controller) {
try {
// Iterate over the generator
for await (const event of streamResponse(projectId, workflow, projectTools, messages)) {
for await (const event of streamResponse(projectId, workflow, messages)) {
// Check if this is a message event (has role property)
if ('role' in event) {
if (event.role === 'assistant') {

6
apps/rowboat/app/api/twilio/inbound_call/route.ts
View file

@ -1,6 +1,5 @@
import { getResponse } from "@/app/lib/agents";
import { projectsCollection, twilioConfigsCollection, twilioInboundCallsCollection } from "@/app/lib/mongodb";
import { collectProjectTools } from "@/app/lib/project_tools";
import { PrefixLogger } from "@/app/lib/utils";
import VoiceResponse from "twilio/lib/twiml/VoiceResponse";
import { z } from "zod";
@ -78,12 +77,9 @@ export async function POST(request: Request) {
return reject('rejected');
}
// fetch project tools
const projectTools = await collectProjectTools(projectId);
// this is the first turn, get the initial assistant response
// and validate it
const { messages } = await getResponse(projectId, workflow, projectTools, []);
const { messages } = await getResponse(projectId, workflow, []);
if (messages.length === 0) {
logger.log('Agent response is empty');
return hangup();

6
apps/rowboat/app/api/twilio/turn/[callSid]/route.ts
View file

@ -1,6 +1,5 @@
import { getResponse } from "@/app/lib/agents";
import { projectsCollection, twilioInboundCallsCollection } from "@/app/lib/mongodb";
import { collectProjectTools } from "@/app/lib/project_tools";
import { PrefixLogger } from "@/app/lib/utils";
import VoiceResponse from "twilio/lib/twiml/VoiceResponse";
import { z } from "zod";
@ -50,9 +49,6 @@ export async function POST(
return hangup();
}
// fetch project tools
const projectTools = await collectProjectTools(projectId);
// add user speech as user message, and get assistant response
const reqMessages: z.infer<typeof Message>[] = [
...call.messages,
@ -61,7 +57,7 @@ export async function POST(
content: data.SpeechResult,
}
];
const { messages } = await getResponse(projectId, workflow, projectTools, reqMessages);
const { messages } = await getResponse(projectId, workflow, reqMessages);
if (messages.length === 0) {
logger.log('Agent response is empty');
return hangup();

6
apps/rowboat/app/api/v1/[projectId]/chat/route.ts
View file

@ -6,7 +6,6 @@ import { authCheck } from "../../utils";
import { ApiRequest, ApiResponse } from "../../../../lib/types/types";
import { check_query_limit } from "../../../../lib/rate_limiting";
import { PrefixLogger } from "../../../../lib/utils";
import { collectProjectTools } from "@/app/lib/project_tools";
import { authorize, getCustomerIdForProject, logUsage } from "@/app/lib/billing";
import { USE_BILLING } from "@/app/lib/feature_flags";
import { getResponse } from "@/app/lib/agents";
@ -61,9 +60,6 @@ export async function POST(
return Response.json({ error: "Project not found" }, { status: 404 });
}
// fetch project tools
const projectTools = await collectProjectTools(projectId);
// fetch workflow
const workflow = project.liveWorkflow;
if (!workflow) {
@ -94,7 +90,7 @@ export async function POST(
}
// get assistant response
const { messages } = await getResponse(projectId, workflow, projectTools, reqMessages);
const { messages } = await getResponse(projectId, workflow, reqMessages);
// log billing usage
if (USE_BILLING && billingCustomerId) {

6
apps/rowboat/app/api/widget/v1/chats/[chatId]/turn/route.ts
View file

@ -6,7 +6,6 @@ import { ObjectId, WithId } from "mongodb";
import { authCheck } from "../../../utils";
import { check_query_limit } from "../../../../../../lib/rate_limiting";
import { PrefixLogger } from "../../../../../../lib/utils";
import { collectProjectTools } from "@/app/lib/project_tools";
import { authorize, getCustomerIdForProject, logUsage } from "@/app/lib/billing";
import { USE_BILLING } from "@/app/lib/feature_flags";
import { getResponse } from "@/app/lib/agents";
@ -181,9 +180,6 @@ export async function POST(
throw new Error("Project settings not found");
}
// fetch project tools
const projectTools = await collectProjectTools(session.projectId);
// fetch workflow
const workflow = projectSettings.liveWorkflow;
if (!workflow) {
@ -211,7 +207,7 @@ export async function POST(
const inMessages: z.infer<typeof Message>[] = convert(messages);
inMessages.push(userMessage);
const { messages: responseMessages } = await getResponse(session.projectId, workflow, projectTools, [systemMessage, ...inMessages]);
const { messages: responseMessages } = await getResponse(session.projectId, workflow, [systemMessage, ...inMessages]);
const convertedResponseMessages = convertBack(responseMessages);
const unsavedMessages = [
userMessage,

46
apps/rowboat/app/lib/agents.ts
View file

@ -253,17 +253,27 @@ async function invokeMcpTool(
projectId: string,
name: string,
input: any,
mcpServerURL: string,
mcpServerName: string
) {
logger = logger.child(`invokeMcpTool`);
logger.log(`projectId: ${projectId}`);
logger.log(`name: ${name}`);
logger.log(`input: ${JSON.stringify(input)}`);
logger.log(`mcpServerURL: ${mcpServerURL}`);
logger.log(`mcpServerName: ${mcpServerName}`);
const client = await getMcpClient(mcpServerURL, mcpServerName || '');
// Get project configuration
const project = await projectsCollection.findOne({ _id: projectId });
if (!project) {
throw new Error(`project ${projectId} not found`);
}
// get server url from project data
const mcpServerURL = project.customMcpServers?.[mcpServerName]?.serverUrl;
if (!mcpServerURL) {
throw new Error(`mcp server url not found for project ${projectId} and server ${mcpServerName}`);
}
const client = await getMcpClient(mcpServerURL, mcpServerName);
const result = await client.callTool({
name,
arguments: input,
@ -420,7 +430,7 @@ function createMcpTool(
config: z.infer<typeof WorkflowTool>,
projectId: string
): Tool {
const { name, description, parameters, mcpServerName, mcpServerURL } = config;
const { name, description, parameters, mcpServerName } = config;
return tool({
name,
@ -434,7 +444,7 @@ function createMcpTool(
},
async execute(input: any) {
try {
const result = await invokeMcpTool(logger, projectId, name, input, mcpServerURL || '', mcpServerName || '');
const result = await invokeMcpTool(logger, projectId, name, input, mcpServerName || '');
return JSON.stringify({
result,
});
@ -492,7 +502,6 @@ function createAgent(
projectId: string,
config: z.infer<typeof WorkflowAgent>,
tools: Record<string, Tool>,
projectTools: z.infer<typeof WorkflowTool>[],
workflow: z.infer<typeof Workflow>,
promptConfig: Record<string, z.infer<typeof WorkflowPrompt>>,
): { agent: Agent, entities: z.infer<typeof ConnectedEntity>[] } {
@ -522,7 +531,7 @@ ${'-'.repeat(100)}
${CHILD_TRANSFER_RELATED_INSTRUCTIONS}
`;
let { sanitized, entities } = sanitizeTextWithMentions(instructions, workflow, projectTools);
let { sanitized, entities } = sanitizeTextWithMentions(instructions, workflow);
agentLogger.log(`instructions: ${JSON.stringify(sanitized)}`);
agentLogger.log(`mentions: ${JSON.stringify(entities)}`);
@ -755,7 +764,7 @@ Basic context:
}
}
function mapConfig(workflow: z.infer<typeof Workflow>, projectTools: z.infer<typeof WorkflowTool>[]): {
function mapConfig(workflow: z.infer<typeof Workflow>): {
agentConfig: Record<string, z.infer<typeof WorkflowAgent>>;
toolConfig: Record<string, z.infer<typeof WorkflowTool>>;
promptConfig: Record<string, z.infer<typeof WorkflowPrompt>>;
@ -764,10 +773,7 @@ function mapConfig(workflow: z.infer<typeof Workflow>, projectTools: z.infer<typ
...acc,
[agent.name]: agent
}), {});
const toolConfig: Record<string, z.infer<typeof WorkflowTool>> = [
...workflow.tools,
...projectTools,
].reduce((acc, tool) => ({
const toolConfig: Record<string, z.infer<typeof WorkflowTool>> = workflow.tools.reduce((acc, tool) => ({
...acc,
[tool.name]: tool
}), {});
@ -809,15 +815,15 @@ function createTools(
mockInstructions: workflow.mockTools?.[toolName], // override mock instructions
});
logger.log(`created mock tool: ${toolName}`);
} else if (config.mockTool) {
tools[toolName] = createMockTool(logger, config);
logger.log(`created mock tool: ${toolName}`);
} else if (config.isMcp) {
tools[toolName] = createMcpTool(logger, config, projectId);
logger.log(`created mcp tool: ${toolName}`);
} else if (config.isComposio) {
tools[toolName] = createComposioTool(logger, config, projectId);
logger.log(`created composio tool: ${toolName}`);
} else if (config.mockTool) {
tools[toolName] = createMockTool(logger, config);
logger.log(`created mock tool: ${toolName}`);
} else {
tools[toolName] = createWebhookTool(logger, config, projectId);
logger.log(`created webhook tool: ${toolName}`);
@ -832,7 +838,6 @@ function createAgents(
workflow: z.infer<typeof Workflow>,
agentConfig: Record<string, z.infer<typeof WorkflowAgent>>,
tools: Record<string, Tool>,
projectTools: z.infer<typeof WorkflowTool>[],
promptConfig: Record<string, z.infer<typeof WorkflowPrompt>>,
): { agents: Record<string, Agent>, mentions: Record<string, z.infer<typeof ConnectedEntity>[]>, originalInstructions: Record<string, string>, originalHandoffs: Record<string, Agent[]> } {
const agents: Record<string, Agent> = {};
@ -847,7 +852,6 @@ function createAgents(
projectId,
config,
tools,
projectTools,
workflow,
promptConfig,
);
@ -928,7 +932,6 @@ function maybeInjectGiveUpControlInstructions(
export async function* streamResponse(
projectId: string,
workflow: z.infer<typeof Workflow>,
projectTools: z.infer<typeof WorkflowTool>[],
messages: z.infer<typeof Message>[],
): AsyncIterable<z.infer<typeof ZOutMessage> | z.infer<typeof ZUsage>> {
// Divider log for tracking agent loop start
@ -947,7 +950,7 @@ export async function* streamResponse(
}
// create map of agent, tool and prompt configs
const { agentConfig, toolConfig, promptConfig } = mapConfig(workflow, projectTools);
const { agentConfig, toolConfig, promptConfig } = mapConfig(workflow);
const stack: string[] = [];
@ -957,7 +960,7 @@ export async function* streamResponse(
const tools = createTools(logger, projectId, workflow, toolConfig);
// create agents
const { agents, originalInstructions, originalHandoffs } = createAgents(logger, projectId, workflow, agentConfig, tools, projectTools, promptConfig);
const { agents, originalInstructions, originalHandoffs } = createAgents(logger, projectId, workflow, agentConfig, tools, promptConfig);
// track agent to agent calls
const transferCounter = new AgentTransferCounter();
@ -1213,7 +1216,6 @@ export async function* streamResponse(
export async function getResponse(
projectId: string,
workflow: z.infer<typeof Workflow>,
projectTools: z.infer<typeof WorkflowTool>[],
messages: z.infer<typeof Message>[],
): Promise<{
messages: z.infer<typeof ZOutMessage>[],
@ -1227,7 +1229,7 @@ export async function getResponse(
completion: 0,
},
};
for await (const event of streamResponse(projectId, workflow, projectTools, messages)) {
for await (const event of streamResponse(projectId, workflow, messages)) {
if ('role' in event) {
out.push(event);
}

5
apps/rowboat/app/lib/composio/composio.ts
View file

@ -278,11 +278,14 @@ export async function getToolkit(toolkitSlug: string): Promise<z.infer<typeof ZG
return composioApiCall(ZGetToolkitResponse, url.toString());
}
export async function listTools(toolkitSlug: string, cursor: string | null = null): Promise<z.infer<ReturnType<typeof ZListResponse<typeof ZTool>>>> {
export async function listTools(toolkitSlug: string, searchQuery: string | null = null, cursor: string | null = null): Promise<z.infer<ReturnType<typeof ZListResponse<typeof ZTool>>>> {
const url = new URL(`${BASE_URL}/tools`);
// set params
url.searchParams.set("toolkit_slug", toolkitSlug);
if (searchQuery) {
url.searchParams.set("search", searchQuery);
}
if (cursor) {
url.searchParams.set("cursor", cursor);
}

60
apps/rowboat/app/lib/project_tools.ts
View file

@ -1,60 +0,0 @@
import { z } from "zod";
import { projectsCollection } from "./mongodb";
import { WorkflowTool } from "./types/workflow_types";
export async function collectProjectTools(projectId: string): Promise<z.infer<typeof WorkflowTool>[]> {
const tools: z.infer<typeof WorkflowTool>[] = [];
// Get project data
const project = await projectsCollection.findOne({ _id: projectId });
if (!project) {
throw new Error(`Project ${projectId} not found`);
}
// Convert MCP tools to workflow tools format, but only from ready servers
if (project.mcpServers) {
for (const server of project.mcpServers) {
if (server.isReady) {
for (const tool of server.tools) {
tools.push({
name: tool.name,
description: tool.description || "",
parameters: {
type: 'object' as const,
properties: tool.parameters?.properties || {},
required: tool.parameters?.required || []
},
isMcp: true,
mcpServerName: server.name,
mcpServerURL: server.serverUrl,
});
}
}
}
}
// Add Composio tools
if (project.composioSelectedTools) {
for (const tool of project.composioSelectedTools) {
tools.push({
name: tool.slug,
description: tool.description || "",
parameters: {
type: 'object' as const,
properties: tool.input_parameters?.properties || {},
required: tool.input_parameters?.required || []
},
isComposio: true,
composioData: {
slug: tool.slug,
noAuth: tool.no_auth,
toolkitName: tool.toolkit.name,
toolkitSlug: tool.toolkit.slug,
logo: tool.toolkit.logo,
},
});
}
}
return tools;
}

25
apps/rowboat/app/lib/types/project_types.ts
View file

@ -1,7 +1,6 @@
import { z } from "zod";
import { MCPServer } from "./types";
import { Workflow, WorkflowTool } from "./workflow_types";
import { ZTool } from "../composio/composio";
export const ComposioConnectedAccount = z.object({
id: z.string(),
@ -15,6 +14,10 @@ export const ComposioConnectedAccount = z.object({
lastUpdatedAt: z.string().datetime(),
});
export const CustomMcpServer = z.object({
serverUrl: z.string(),
});
export const Project = z.object({
_id: z.string().uuid(),
name: z.string(),
@ -30,7 +33,7 @@ export const Project = z.object({
testRunCounter: z.number().default(0),
mcpServers: z.array(MCPServer).optional(),
composioConnectedAccounts: z.record(z.string(), ComposioConnectedAccount).optional(),
composioSelectedTools: z.array(ZTool).optional(),
customMcpServers: z.record(z.string(), CustomMcpServer).optional(),
});
export const ProjectMember = z.object({
@ -45,20 +48,4 @@ export const ApiKey = z.object({
key: z.string(),
createdAt: z.string().datetime(),
lastUsedAt: z.string().datetime().optional(),
});
export function mergeProjectTools(
workflowTools: z.infer<typeof WorkflowTool>[],
projectTools: z.infer<typeof WorkflowTool>[]
): z.infer<typeof WorkflowTool>[] {
// Filter out any existing MCP tools from workflow tools
const nonMcpTools = workflowTools.filter(t => !t.isMcp);
// Merge with project tools
const merged = [
...nonMcpTools,
...projectTools
];
return merged;
}
});

1
apps/rowboat/app/lib/types/types.ts
View file

@ -210,6 +210,5 @@ export function convertMcpServerToolToWorkflowTool(
export const ZStreamAgentResponsePayload = z.object({
projectId: z.string(),
workflow: Workflow,
projectTools: z.array(WorkflowTool),
messages: z.array(Message),
});

8
apps/rowboat/app/lib/types/workflow_types.ts
View file

@ -39,7 +39,6 @@ export const WorkflowTool = z.object({
name: z.string(),
description: z.string(),
mockTool: z.boolean().default(false).optional(),
autoSubmitMockedResponse: z.boolean().default(false).optional(),
mockInstructions: z.string().optional(),
parameters: z.object({
type: z.literal('object'),
@ -48,10 +47,9 @@ export const WorkflowTool = z.object({
additionalProperties: z.boolean().optional(),
}),
isMcp: z.boolean().default(false).optional(),
isLibrary: z.boolean().default(false).optional(),
mcpServerName: z.string().optional(),
mcpServerURL: z.string().optional(),
isComposio: z.boolean().optional(), // whether this is a Composio tool
isLibrary: z.boolean().default(false).optional(), // whether this is a library tool
composioData: z.object({
slug: z.string(), // the slug for the Composio tool e.g. "GITHUB_CREATE_AN_ISSUE"
noAuth: z.boolean(), // whether the tool requires no authentication
@ -89,7 +87,6 @@ export function sanitizeTextWithMentions(
tools: z.infer<typeof WorkflowTool>[],
prompts: z.infer<typeof WorkflowPrompt>[],
},
projectTools: z.infer<typeof WorkflowTool>[] = []
): {
sanitized: string;
entities: z.infer<typeof ConnectedEntity>[];
@ -119,8 +116,7 @@ export function sanitizeTextWithMentions(
if (entity.type === 'agent') {
return workflow.agents.some(a => a.name === entity.name);
} else if (entity.type === 'tool') {
return workflow.tools.some(t => t.name === entity.name) ||
projectTools.some(t => t.name === entity.name);
return workflow.tools.some(t => t.name === entity.name);
} else if (entity.type === 'prompt') {
return workflow.prompts.some(p => p.name === entity.name);
}

2
apps/rowboat/app/lib/utils.ts
View file

@ -8,7 +8,6 @@ import { Message, ZStreamAgentResponsePayload } from "./types/types";
export async function getAgenticResponseStreamId(
projectId: string,
workflow: z.infer<typeof Workflow>,
projectTools: z.infer<typeof WorkflowTool>[],
messages: z.infer<typeof Message>[],
): Promise<{
streamId: string,
@ -16,7 +15,6 @@ export async function getAgenticResponseStreamId(
const payload: z.infer<typeof ZStreamAgentResponsePayload> = {
projectId,
workflow,
projectTools,
messages,
}
// serialize the request

4
apps/rowboat/app/projects/[projectId]/entities/agent_config.tsx
View file

@ -42,7 +42,6 @@ export function AgentConfig({
usedAgentNames,
agents,
tools,
projectTools,
prompts,
dataSources,
handleUpdate,
@ -57,7 +56,6 @@ export function AgentConfig({
usedAgentNames: Set<string>,
agents: z.infer<typeof WorkflowAgent>[],
tools: z.infer<typeof WorkflowTool>[],
projectTools: z.infer<typeof WorkflowTool>[],
prompts: z.infer<typeof WorkflowPrompt>[],
dataSources: WithStringId<z.infer<typeof DataSource>>[],
handleUpdate: (agent: z.infer<typeof WorkflowAgent>) => void,
@ -172,7 +170,7 @@ export function AgentConfig({
const atMentions = createAtMentions({
agents,
prompts,
tools: [...tools, ...projectTools],
tools,
currentAgentName: agent.name
});

139
apps/rowboat/app/projects/[projectId]/entities/tool_config.tsx
View file

@ -1,9 +1,10 @@
"use client";
import { WorkflowTool } from "../../../lib/types/workflow_types";
import { Checkbox, Select, SelectItem, RadioGroup, Radio } from "@heroui/react";
import { Checkbox, Select, SelectItem, Switch } from "@heroui/react";
import { z } from "zod";
import { ImportIcon, XIcon, PlusIcon, FolderIcon} from "lucide-react";
import { ImportIcon, XIcon, PlusIcon, FolderIcon, Globe, Zap, ExternalLink } from "lucide-react";
import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import { Textarea } from "@/components/ui/textarea";
import { Panel } from "@/components/common/panel-common";
import { Button } from "@/components/ui/button";
@ -12,6 +13,7 @@ import { SectionCard } from "@/components/common/section-card";
import { ToolParamCard } from "@/components/common/tool-param-card";
import { UserIcon, Settings, Settings2 } from "lucide-react";
import { EditableField } from "@/app/lib/components/editable-field";
import Link from "next/link";
// Update textarea styles with improved states
const textareaStyles = "rounded-lg p-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 focus:shadow-inner focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 placeholder:text-gray-400 dark:placeholder:text-gray-500";
@ -173,8 +175,11 @@ export function ToolConfig({
required: tool.parameters?.required || []
});
const params = useParams();
const projectId = params.projectId as string;
const [selectedParams, setSelectedParams] = useState(new Set([]));
const isReadOnly = tool.isMcp || tool.isLibrary || tool.isComposio;
const isReadOnly = tool.isMcp || tool.isComposio;
const isWebhookTool = !tool.isMcp && !tool.isComposio;
const [nameError, setNameError] = useState<string | null>(null);
// Log when parameters are being rendered
@ -337,6 +342,57 @@ export function ToolConfig({
}
>
<div className="flex flex-col gap-4 pb-4 pt-4 p-4">
{/* Tool Type Section */}
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
<div className="flex items-start gap-3">
<div className="flex-shrink-0 mt-1">
{tool.isMcp ? (
<ImportIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
) : tool.isComposio ? (
<Zap className="w-5 h-5 text-purple-600 dark:text-purple-400" />
) : (
<Globe className="w-5 h-5 text-green-600 dark:text-green-400" />
)}
</div>
<div className="flex-1">
<h3 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-2">
How this tool runs
</h3>
{tool.isMcp ? (
<div className="text-sm text-gray-700 dark:text-gray-300">
<p>This tool is powered by the <span className="font-medium text-blue-700 dark:text-blue-300">{tool.mcpServerName}</span> MCP server.</p>
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
MCP (Model Context Protocol) tools are external services that provide additional capabilities to your agent.
</p>
</div>
) : tool.isComposio ? (
<div className="text-sm text-gray-700 dark:text-gray-300">
<div className="flex items-center gap-2 mb-1">
<p>This tool is powered by <span className="font-medium text-purple-700 dark:text-purple-300">Composio</span></p>
{tool.composioData?.toolkitName && (
<span className="text-xs bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300 px-2 py-1 rounded-full">
{tool.composioData.toolkitName}
</span>
)}
</div>
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
Composio provides pre-built integrations with popular services and APIs.
</p>
</div>
) : (
<div className="text-sm text-gray-700 dark:text-gray-300">
<div className="flex items-center gap-1 mb-1">
<p>This tool is invoked using the webhook configured in <Link href={`/projects/${projectId}/config`} className="text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 font-medium underline decoration-green-300 hover:decoration-green-500 transition-colors">project settings</Link></p>
</div>
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
Webhook tools make HTTP requests to your configured endpoint when called by the agent.
</p>
</div>
)}
</div>
</div>
</div>
{/* Identity Section */}
<SectionCard
icon={<UserIcon className="w-5 h-5 text-indigo-500" />}
@ -350,6 +406,7 @@ export function ToolConfig({
<div className="flex-1">
<EditableField
value={tool.name}
locked={isReadOnly}
onChange={(value) => {
setNameError(validateToolName(value));
if (!validateToolName(value)) {
@ -375,6 +432,7 @@ export function ToolConfig({
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 md:w-32 mb-1 md:mb-0 md:pr-4">Description</label>
<div className="flex-1">
<EditableField
locked={isReadOnly}
value={tool.description || ""}
onChange={(value) => handleUpdate({ ...tool, description: value })}
multiline={true}
@ -385,56 +443,37 @@ export function ToolConfig({
</div>
</div>
</SectionCard>
{/* Behavior Section */}
{/* Mock Section */}
<SectionCard
icon={<Settings className="w-5 h-5 text-indigo-500" />}
title="Behavior"
labelWidth="md:w-32"
title="Mock responses"
labelWidth="md:w-64"
className="mb-1"
>
<div className="flex flex-col gap-4">
{!isReadOnly && (
<div className="flex flex-col gap-2">
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Tool Mode</label>
<RadioGroup
defaultValue="mock"
value={tool.mockTool ? "mock" : "api"}
<div className="flex flex-col gap-2">
<div className="flex items-center gap-3">
<Switch
isSelected={tool.mockTool}
onValueChange={(value) => handleUpdate({
...tool,
mockTool: value === "mock",
autoSubmitMockedResponse: value === "mock" ? true : undefined
mockTool: value,
})}
orientation="horizontal"
classNames={{
wrapper: "flex flex-col md:flex-row gap-2 md:gap-8 pl-0 md:pl-3",
label: "text-sm"
}}
>
<Radio
value="mock"
classNames={{
base: "px-2 py-1 rounded-lg transition-colors",
label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
}}
>
Mock tool responses
</Radio>
<Radio
value="api"
classNames={{
base: "px-2 py-1 rounded-lg transition-colors",
label: "text-sm font-normal text-gray-900 dark:text-gray-100 px-3 py-1"
}}
>
Connect tool to your API
</Radio>
</RadioGroup>
size="sm"
color="primary"
/>
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300">
Mock tool responses
</label>
</div>
)}
<span className="text-xs text-gray-500 dark:text-gray-400 ml-12">
When enabled, this tool will be mocked.
</span>
</div>
{tool.mockTool && (
<div className="flex flex-col gap-2 pl-0 md:pl-3 mt-2">
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Mock Response Schema</label>
<span className="text-xs text-gray-500 dark:text-gray-400 mb-1">Describe the response the mock tool should return. This will be shown in the chat when the tool is called. You can also provide a JSON schema for the response.</span>
<div className="flex flex-col gap-2 ml-12">
<label className="text-sm font-semibold text-gray-600 dark:text-gray-300 mb-1">Mock Response Instructions</label>
<span className="text-xs text-gray-500 dark:text-gray-400 mb-1">Describe the response the mock tool should return. This will be shown in the chat when the tool is called.</span>
<EditableField
value={tool.mockInstructions || ''}
onChange={(value) => handleUpdate({
@ -445,20 +484,6 @@ export function ToolConfig({
placeholder="Mock response instructions..."
className="w-full text-xs p-2 bg-white dark:bg-gray-900"
/>
<Checkbox
size="sm"
isSelected={tool.autoSubmitMockedResponse ?? true}
onValueChange={(value) => handleUpdate({
...tool,
autoSubmitMockedResponse: value
})}
disabled={isReadOnly}
className="mt-2"
>
<span className="text-sm text-gray-600 dark:text-gray-300">
Automatically send mock response in chat
</span>
</Checkbox>
</div>
)}
</div>

6
apps/rowboat/app/projects/[projectId]/playground/app.tsx
View file

@ -19,10 +19,8 @@ export function App({
workflow,
messageSubscriber,
mcpServerUrls,
toolWebhookUrl,
isInitialState = false,
onPanelClick,
projectTools,
triggerCopilotChat,
}: {
hidden?: boolean;
@ -30,10 +28,8 @@ export function App({
workflow: z.infer<typeof Workflow>;
messageSubscriber?: (messages: z.infer<typeof Message>[]) => void;
mcpServerUrls: Array<z.infer<typeof MCPServer>>;
toolWebhookUrl: string;
isInitialState?: boolean;
onPanelClick?: () => void;
projectTools: z.infer<typeof WorkflowTool>[];
triggerCopilotChat?: (message: string) => void;
}) {
const [counter, setCounter] = useState<number>(0);
@ -153,10 +149,8 @@ export function App({
systemMessage={systemMessage}
onSystemMessageChange={handleSystemMessageChange}
mcpServerUrls={mcpServerUrls}
toolWebhookUrl={toolWebhookUrl}
onCopyClick={(fn) => { getCopyContentRef.current = fn; }}
showDebugMessages={showDebugMessages}
projectTools={projectTools}
triggerCopilotChat={triggerCopilotChat}
/>
</div>

7
apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
View file

@ -22,11 +22,9 @@ export function Chat({
systemMessage,
onSystemMessageChange,
mcpServerUrls,
toolWebhookUrl,
onCopyClick,
showDebugMessages = true,
showJsonMode = false,
projectTools,
triggerCopilotChat,
}: {
chat: z.infer<typeof PlaygroundChat>;
@ -36,11 +34,9 @@ export function Chat({
systemMessage: string;
onSystemMessageChange: (message: string) => void;
mcpServerUrls: Array<z.infer<typeof MCPServer>>;
toolWebhookUrl: string;
onCopyClick: (fn: () => string) => void;
showDebugMessages?: boolean;
showJsonMode?: boolean;
projectTools: z.infer<typeof WorkflowTool>[];
triggerCopilotChat?: (message: string) => void;
}) {
const [messages, setMessages] = useState<z.infer<typeof Message>[]>(chat.messages);
@ -210,7 +206,6 @@ export function Chat({
const response = await getAssistantResponseStreamId(
projectId,
workflow,
projectTools,
[
{
role: 'system',
@ -336,9 +331,7 @@ export function Chat({
workflow,
systemMessage,
mcpServerUrls,
toolWebhookUrl,
fetchResponseError,
projectTools,
]);
// Add a stop handler function

42
apps/rowboat/app/projects/[projectId]/tools/components/AddWebhookTool.tsx Normal file
View file

@ -0,0 +1,42 @@
'use client';
import React from 'react';
import { WebhookConfig } from './WebhookConfig';
import { Button } from '@heroui/react';
import { WorkflowTool } from '@/app/lib/types/workflow_types';
import { z } from 'zod';
interface AddWebhookToolProps {
projectId: string;
onAddTool: (tool: Partial<z.infer<typeof WorkflowTool>>) => void;
}
export function AddWebhookTool({ projectId, onAddTool }: AddWebhookToolProps) {
function handleAddTool() {
onAddTool({
description: 'Webhook tool',
mockTool: false,
});
}
return (
<div className="space-y-6">
<div className="mb-4">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
Add webhook tool
</h2>
</div>
<WebhookConfig projectId={projectId} />
<div>
Click here to add a webhook tool:
</div>
<Button
size="lg"
color="primary"
onPress={handleAddTool}
>Add webhook tool</Button>
</div>
);
}

100
apps/rowboat/app/projects/[projectId]/tools/components/Composio.tsx
View file

@ -3,25 +3,30 @@
import { useState, useEffect, useCallback } from 'react';
import { useParams } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Info, RefreshCw, Search } from 'lucide-react';
import { RefreshCw, Search } from 'lucide-react';
import clsx from 'clsx';
import { listToolkits, listTools, updateComposioSelectedTools } from '@/app/actions/composio_actions';
import { listToolkits } from '@/app/actions/composio_actions';
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';
type ToolkitType = z.infer<typeof ZToolkit>;
type ToolkitListResponse = z.infer<ReturnType<typeof ZListResponse<typeof ZToolkit>>>;
type ProjectType = z.infer<typeof Project>;
export function Composio() {
const params = useParams();
const projectId = typeof params.projectId === 'string' ? params.projectId : params.projectId?.[0];
if (!projectId) throw new Error('Project ID is required');
export function Composio({
projectId,
tools,
onAddTool
}: {
projectId: string;
tools: z.infer<typeof Workflow.shape.tools>;
onAddTool: (tool: z.infer<typeof WorkflowTool>) => void;
}) {
const [toolkits, setToolkits] = useState<ToolkitType[]>([]);
const [projectConfig, setProjectConfig] = useState<ProjectType | null>(null);
const [loading, setLoading] = useState(true);
@ -29,7 +34,6 @@ export function Composio() {
const [searchQuery, setSearchQuery] = useState('');
const [selectedToolkit, setSelectedToolkit] = useState<ToolkitType | null>(null);
const [isToolsPanelOpen, setIsToolsPanelOpen] = useState(false);
const [savingTools, setSavingTools] = useState(false);
const loadProjectConfig = useCallback(async () => {
try {
@ -75,7 +79,7 @@ export function Composio() {
}
}, [projectId]);
const handleManageTools = useCallback((toolkit: ToolkitType) => {
const handleSelectToolkit = useCallback((toolkit: ToolkitType) => {
setSelectedToolkit(toolkit);
setIsToolsPanelOpen(true);
}, []);
@ -85,64 +89,6 @@ export function Composio() {
setIsToolsPanelOpen(false);
}, []);
const handleProjectConfigUpdate = useCallback(() => {
loadProjectConfig();
}, [loadProjectConfig]);
const handleUpdateToolsSelection = useCallback(async (selectedToolObjects: z.infer<typeof ZTool>[]) => {
if (!projectId) return;
setSavingTools(true);
try {
// Get existing selected tools from project config
const existingSelectedTools = projectConfig?.composioSelectedTools || [];
// Create a map of existing tools by slug for easy lookup
const existingToolsMap = new Map(existingSelectedTools.map(tool => [tool.slug, tool]));
// Add or update the new selections
for (const tool of selectedToolObjects) {
existingToolsMap.set(tool.slug, tool);
}
// Convert back to array
const mergedSelectedTools = Array.from(existingToolsMap.values());
await updateComposioSelectedTools(projectId, mergedSelectedTools);
// Refresh project config to get updated data
await loadProjectConfig();
} catch (error) {
console.error('Error saving tool selection:', error);
} finally {
setSavingTools(false);
}
}, [projectId, projectConfig, loadProjectConfig]);
const handleRemoveToolkitTools = useCallback(async (toolkitSlug: string) => {
if (!projectId) return;
setSavingTools(true);
try {
// Get existing selected tools from project config
const existingSelectedTools = projectConfig?.composioSelectedTools || [];
// Filter out all tools from the specified toolkit
const filteredSelectedTools = existingSelectedTools.filter(tool =>
tool.toolkit.slug !== toolkitSlug
);
await updateComposioSelectedTools(projectId, filteredSelectedTools);
// Refresh project config to get updated data
await loadProjectConfig();
} catch (error) {
console.error('Error removing toolkit tools:', error);
} finally {
setSavingTools(false);
}
}, [projectId, projectConfig, loadProjectConfig]);
useEffect(() => {
loadProjectConfig();
}, [loadProjectConfig]);
@ -245,19 +191,14 @@ export function Composio() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredToolkits.map((toolkit) => {
const isConnected = toolkit.no_auth || projectConfig?.composioConnectedAccounts?.[toolkit.slug]?.status === 'ACTIVE';
const connectedAccountId = projectConfig?.composioConnectedAccounts?.[toolkit.slug]?.id;
return (
<ToolkitCard
key={toolkit.slug}
toolkit={toolkit}
projectId={projectId}
isConnected={isConnected}
connectedAccountId={connectedAccountId}
projectConfig={projectConfig}
onManageTools={() => handleManageTools(toolkit)}
onProjectConfigUpdate={handleProjectConfigUpdate}
onRemoveToolkitTools={handleRemoveToolkitTools}
workflowTools={tools}
onSelectToolkit={() => handleSelectToolkit(toolkit)}
/>
);
})}
@ -272,16 +213,13 @@ export function Composio() {
)}
{/* Tools Panel */}
<ComposioToolsPanel
{selectedToolkit && <ComposioToolsPanel
toolkit={selectedToolkit}
isOpen={isToolsPanelOpen}
onClose={handleCloseToolsPanel}
projectConfig={projectConfig}
onUpdateToolsSelection={handleUpdateToolsSelection}
onProjectConfigUpdate={handleProjectConfigUpdate}
onRemoveToolkitTools={handleRemoveToolkitTools}
isSaving={savingTools}
/>
tools={tools}
onAddTool={onAddTool}
/>}
</div>
);
}

447
apps/rowboat/app/projects/[projectId]/tools/components/ComposioToolsPanel.tsx
View file

@ -1,20 +1,18 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { useState, useEffect, useCallback, useMemo } from 'react';
import { useParams } from 'next/navigation';
import { PictureImg } from '@/components/ui/picture-img';
import { Button, Checkbox } from '@heroui/react';
import { ChevronLeft, ChevronRight, LinkIcon, Loader2, UnlinkIcon } from 'lucide-react';
import { listTools, deleteConnectedAccount } from '@/app/actions/composio_actions';
import { Button, Checkbox, Input } from '@heroui/react';
import { ChevronLeft, ChevronRight, Search, X } from 'lucide-react';
import { Workflow, WorkflowTool } from '@/app/lib/types/workflow_types';
import { listTools } from '@/app/actions/composio_actions';
import { z } from 'zod';
import { ZTool, ZListResponse } from '@/app/lib/composio/composio';
import { SlidePanel } from '@/components/ui/slide-panel';
import { Project } from '@/app/lib/types/project_types';
import { ToolkitAuthModal } from './ToolkitAuthModal';
type ToolType = z.infer<typeof ZTool>;
type ToolListResponse = z.infer<ReturnType<typeof ZListResponse<typeof ZTool>>>;
type ProjectType = z.infer<typeof Project>;
interface ComposioToolsPanelProps {
toolkit: {
@ -24,25 +22,19 @@ interface ComposioToolsPanelProps {
logo: string;
};
no_auth?: boolean;
} | null;
};
isOpen: boolean;
onClose: () => void;
projectConfig: ProjectType | null;
onUpdateToolsSelection: (selectedToolObjects: ToolType[]) => void;
onProjectConfigUpdate: () => void;
onRemoveToolkitTools: (toolkitSlug: string) => void;
isSaving: boolean;
tools: z.infer<typeof Workflow.shape.tools>;
onAddTool: (tool: z.infer<typeof WorkflowTool>) => void;
}
export function ComposioToolsPanel({
toolkit,
isOpen,
onClose,
projectConfig,
onUpdateToolsSelection,
onProjectConfigUpdate,
onRemoveToolkitTools,
isSaving
tools: workflowTools,
onAddTool,
}: ComposioToolsPanelProps) {
const params = useParams();
const projectId = typeof params.projectId === 'string' ? params.projectId : params.projectId?.[0];
@ -55,14 +47,30 @@ export function ComposioToolsPanel({
const [cursorHistory, setCursorHistory] = useState<string[]>([]);
const [selectedTools, setSelectedTools] = useState<Set<string>>(new Set());
const [hasChanges, setHasChanges] = useState(false);
const [showAuthModal, setShowAuthModal] = useState(false);
const [isProcessingAuth, setIsProcessingAuth] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
const loadToolsForToolkit = useCallback(async (toolkitSlug: string, cursor: string | null = null) => {
const selectedToolSlugs = workflowTools
.filter(tool => tool.isComposio && tool.composioData?.toolkitSlug === toolkit.slug)
.map(tool => tool.composioData!.slug);
// Filter out already selected tools
const availableTools = tools.filter(tool => !selectedToolSlugs.includes(tool.slug));
// Debounce search query
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedSearchQuery(searchQuery);
}, 300);
return () => clearTimeout(timer);
}, [searchQuery]);
const loadToolsForToolkit = useCallback(async (toolkitSlug: string, cursor: string | null = null, search: string | null = null) => {
try {
setToolsLoading(true);
const response: ToolListResponse = await listTools(projectId, toolkitSlug, cursor);
const response: ToolListResponse = await listTools(projectId, toolkitSlug, search, cursor);
setTools(response.items);
setNextCursor(response.next_cursor);
@ -80,18 +88,25 @@ export function ComposioToolsPanel({
}
}, [projectId]);
// Load tools when search query changes
useEffect(() => {
if (toolkit && isOpen) {
loadToolsForToolkit(toolkit.slug, null, debouncedSearchQuery || null);
}
}, [toolkit, isOpen, debouncedSearchQuery, loadToolsForToolkit]);
const handleNextPage = useCallback(async () => {
if (!nextCursor || !toolkit) return;
if (!nextCursor) return;
// Add current cursor to history
setCursorHistory(prev => [...prev, currentCursor || '']);
setCurrentCursor(nextCursor);
await loadToolsForToolkit(toolkit.slug, nextCursor);
}, [nextCursor, toolkit, currentCursor, loadToolsForToolkit]);
await loadToolsForToolkit(toolkit.slug, nextCursor, debouncedSearchQuery || null);
}, [nextCursor, toolkit, currentCursor, debouncedSearchQuery, loadToolsForToolkit]);
const handlePreviousPage = useCallback(async () => {
if (cursorHistory.length === 0 || !toolkit) return;
if (cursorHistory.length === 0) return;
// Get the previous cursor from history
const previousCursor = cursorHistory[cursorHistory.length - 1];
@ -100,8 +115,8 @@ export function ComposioToolsPanel({
setCursorHistory(newHistory);
setCurrentCursor(previousCursor);
await loadToolsForToolkit(toolkit.slug, previousCursor);
}, [cursorHistory, toolkit, loadToolsForToolkit]);
await loadToolsForToolkit(toolkit.slug, previousCursor, debouncedSearchQuery || null);
}, [cursorHistory, toolkit, debouncedSearchQuery, loadToolsForToolkit]);
const handleToolSelectionChange = useCallback((toolSlug: string, selected: boolean) => {
setSelectedTools(prev => {
@ -116,239 +131,195 @@ export function ComposioToolsPanel({
});
}, []);
const handleSaveTools = useCallback(async () => {
// Convert selected tool slugs to actual tool objects
const handleAddSelectedTools = useCallback(() => {
// Convert selected tool slugs to actual tool objects and add them
const selectedToolObjects = tools.filter(tool => selectedTools.has(tool.slug));
await onUpdateToolsSelection(selectedToolObjects);
setHasChanges(false);
}, [onUpdateToolsSelection, selectedTools, tools]);
const handleConnect = useCallback(() => {
setShowAuthModal(true);
}, []);
const handleDisconnect = useCallback(async () => {
if (!toolkit) return;
const connectedAccountId = projectConfig?.composioConnectedAccounts?.[toolkit.slug]?.id;
selectedToolObjects.forEach(tool => {
const toolToAdd = {
name: tool.name,
description: tool.description,
parameters: {
type: 'object' as const,
properties: tool.input_parameters?.properties || {},
required: tool.input_parameters?.required || [],
},
isComposio: true,
composioData: {
slug: tool.slug,
noAuth: toolkit.no_auth || false,
toolkitName: toolkit.name,
toolkitSlug: toolkit.slug,
logo: toolkit.meta.logo,
},
};
onAddTool(toolToAdd);
});
setIsProcessingAuth(true);
try {
if (connectedAccountId) {
await deleteConnectedAccount(projectId, toolkit.slug, connectedAccountId);
onProjectConfigUpdate();
onRemoveToolkitTools(toolkit.slug);
}
} catch (err: any) {
console.error('Disconnect failed:', err);
} finally {
setIsProcessingAuth(false);
}
}, [projectId, toolkit, projectConfig, onProjectConfigUpdate, onRemoveToolkitTools]);
const handleAuthComplete = useCallback(() => {
setShowAuthModal(false);
onProjectConfigUpdate();
}, [onProjectConfigUpdate]);
onClose();
}, [selectedTools, tools, toolkit, onAddTool, onClose]);
const handleClose = useCallback(() => {
setTools([]);
setSelectedTools(new Set());
setHasChanges(false);
if (hasChanges) {
if (window.confirm('You have unsaved changes. Are you sure you want to close?')) {
onClose();
}
} else {
onClose();
}
}, [onClose, hasChanges]);
setSearchQuery('');
setDebouncedSearchQuery('');
onClose();
}, [onClose]);
// Initialize selected tools from project config when opening the panel
useEffect(() => {
if (toolkit && isOpen && projectConfig?.composioSelectedTools) {
const toolSlugs = new Set(projectConfig.composioSelectedTools.map(tool => tool.slug));
setSelectedTools(toolSlugs);
setHasChanges(false);
}
}, [toolkit, isOpen, projectConfig]);
useEffect(() => {
if (toolkit && isOpen) {
loadToolsForToolkit(toolkit.slug, null);
}
}, [toolkit, isOpen, loadToolsForToolkit]);
const handleClearSearch = useCallback(() => {
setSearchQuery('');
}, []);
if (!toolkit) return null;
// Check if the toolkit is connected (has an active connected account) or doesn't require auth
const isToolkitConnected = toolkit.no_auth || projectConfig?.composioConnectedAccounts?.[toolkit.slug]?.status === 'ACTIVE';
return (
<>
<SlidePanel
isOpen={isOpen}
onClose={handleClose}
title={
<div className="flex items-center gap-3">
{toolkit.meta.logo && (
<PictureImg
src={toolkit.meta.logo}
alt={`${toolkit.name} logo`}
width={24}
height={24}
className="rounded-md object-cover"
/>
)}
<span>{toolkit.name}</span>
</div>
}
>
<div className="flex flex-col h-full">
{/* Connection Status Banner */}
{!toolkit.no_auth && (
<div className={`mb-6 p-4 rounded-lg border-2 ${
isToolkitConnected
? 'bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800'
: 'bg-orange-50 dark:bg-orange-900/20 border-orange-200 dark:border-orange-800'
}`}>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className={`w-3 h-3 rounded-full ${
isToolkitConnected ? 'bg-emerald-500' : 'bg-orange-500'
}`}></div>
<div>
<h3 className={`font-semibold text-sm ${
isToolkitConnected
? 'text-emerald-800 dark:text-emerald-200'
: 'text-orange-800 dark:text-orange-200'
}`}>
{isToolkitConnected ? 'Toolkit Connected' : 'Authentication Required'}
</h3>
<p className={`text-xs mt-0.5 ${
isToolkitConnected
? 'text-emerald-700 dark:text-emerald-300'
: 'text-orange-700 dark:text-orange-300'
}`}>
{isToolkitConnected
? 'You can select and use tools from this toolkit'
: 'Connect your account to access and use tools'
}
</p>
</div>
</div>
<Button
variant="solid"
size="sm"
onPress={isToolkitConnected ? handleDisconnect : handleConnect}
disabled={isProcessingAuth}
color={isToolkitConnected ? "danger" : "primary"}
isLoading={isProcessingAuth}
startContent={isToolkitConnected ? <UnlinkIcon className="h-4 w-4" /> : <LinkIcon className="h-4 w-4" />}
>
{isToolkitConnected ? 'Disconnect' : 'Connect Now'}
</Button>
</div>
</div>
<SlidePanel
isOpen={isOpen}
onClose={handleClose}
title={
<div className="flex items-center gap-3">
{toolkit.meta.logo && (
<PictureImg
src={toolkit.meta.logo}
alt={`${toolkit.name} logo`}
width={24}
height={24}
className="rounded-md object-cover"
/>
)}
{/* Header */}
<div className="mb-6">
<div className="flex items-center justify-between">
<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Available Tools</h4>
<div className="flex items-center gap-2">
{hasChanges && (
<Button
variant="solid"
size="sm"
color="primary"
onPress={handleSaveTools}
disabled={isSaving || !isToolkitConnected}
isLoading={isSaving}
>
Save Changes
</Button>
)}
</div>
<span>{toolkit.name}</span>
</div>
}
>
<div className="flex flex-col h-full">
{/* Header */}
<div className="mb-6">
<div className="flex items-center justify-between mb-4">
<div>
<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Select Tools</h4>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
Check the tools you want to add to your workflow
</p>
</div>
{hasChanges && (
<Button
variant="solid"
size="sm"
color="primary"
onPress={handleAddSelectedTools}
>
Add Selected ({selectedTools.size})
</Button>
)}
</div>
{/* Scrollable Tools List */}
<div className="flex-1 overflow-y-auto">
{toolsLoading ? (
<div className="text-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-800 dark:border-gray-200 mx-auto"></div>
<p className="mt-4 text-sm text-gray-600 dark:text-gray-400">Loading tools...</p>
</div>
) : (
<div className="space-y-4">
{tools.map((tool) => (
<div key={tool.slug} className={`group p-4 rounded-lg transition-all duration-200 border border-transparent ${
isToolkitConnected
? 'bg-gray-50/50 dark:bg-gray-800/50 hover:bg-gray-100/50 dark:hover:bg-gray-700/50 hover:border-gray-200 dark:hover:border-gray-600'
: 'bg-gray-100/50 dark:bg-gray-900/50 opacity-60'
}`}>
<div className="flex items-start gap-3">
<Checkbox
isSelected={selectedTools.has(tool.slug)}
onValueChange={(selected) => handleToolSelectionChange(tool.slug, selected)}
size="sm"
isDisabled={!isToolkitConnected}
/>
<div className="flex-1">
<h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">
{tool.name}
</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
{tool.description}
</p>
{/* Search Box */}
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search className="h-4 w-4 text-gray-400" />
</div>
<Input
type="text"
placeholder="Search tools..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 pr-10"
size="sm"
/>
{searchQuery && (
<button
onClick={handleClearSearch}
className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
>
<X className="h-4 w-4" />
</button>
)}
</div>
</div>
{/* Scrollable Tools List */}
<div className="flex-1 overflow-y-auto">
{toolsLoading ? (
<div className="text-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-800 dark:border-gray-200 mx-auto"></div>
<p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
{searchQuery ? 'Searching tools...' : 'Loading tools...'}
</p>
</div>
) : tools.length === 0 ? (
<div className="text-center py-8">
<p className="text-sm text-gray-600 dark:text-gray-400">
{searchQuery ? 'No tools found matching your search.' : 'No tools available.'}
</p>
</div>
) : (
<div className="space-y-3">
{availableTools.map((tool) => (
<div
key={tool.slug}
className="group p-4 rounded-lg transition-all duration-200 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
>
<div className="flex items-start gap-3">
<Checkbox
isSelected={selectedTools.has(tool.slug)}
onValueChange={(selected) => handleToolSelectionChange(tool.slug, selected)}
size="sm"
/>
<div className="flex-1 text-left flex flex-col gap-1">
<h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors text-left">
{tool.name}
</h4>
<div className="font-mono text-xs text-gray-500 dark:text-gray-400 text-left truncate max-w-[300px] bg-gray-100 dark:bg-gray-700 p-1 rounded-md" title={tool.slug}>
{tool.slug}
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 text-left">
{tool.description}
</p>
</div>
</div>
))}
</div>
)}
</div>
</div>
))}
</div>
)}
</div>
{/* Fixed Pagination Controls */}
<div className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
<div className="flex items-center justify-end">
<div className="flex items-center gap-2">
<Button
variant="bordered"
size="sm"
onClick={handlePreviousPage}
disabled={cursorHistory.length === 0 || toolsLoading}
>
<ChevronLeft className="h-4 w-4 mr-1" />
Previous
</Button>
<Button
variant="bordered"
size="sm"
onClick={handleNextPage}
disabled={!nextCursor || toolsLoading}
>
Next
<ChevronRight className="h-4 w-4 ml-1" />
</Button>
</div>
{/* Fixed Pagination Controls */}
<div className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
<div className="flex items-center justify-between">
<div className="text-sm text-gray-500 dark:text-gray-400">
{availableTools.length > 0 && (
<span>
{availableTools.length} tool{availableTools.length !== 1 ? 's' : ''} found
{searchQuery && ` for "${searchQuery}"`}
</span>
)}
</div>
<div className="flex items-center gap-2">
<Button
variant="bordered"
size="sm"
onClick={handlePreviousPage}
disabled={cursorHistory.length === 0 || toolsLoading}
>
<ChevronLeft className="h-4 w-4 mr-1" />
Previous
</Button>
<Button
variant="bordered"
size="sm"
onClick={handleNextPage}
disabled={!nextCursor || toolsLoading}
>
Next
<ChevronRight className="h-4 w-4 ml-1" />
</Button>
</div>
</div>
</div>
</SlidePanel>
{/* Auth Modal */}
{toolkit && (
<ToolkitAuthModal
key={toolkit.slug}
isOpen={showAuthModal}
onClose={() => setShowAuthModal(false)}
toolkitSlug={toolkit.slug}
projectId={projectId}
onComplete={handleAuthComplete}
/>
)}
</>
</div>
</SlidePanel>
);
}

220
apps/rowboat/app/projects/[projectId]/tools/components/CustomMcpServer.tsx Normal file
View file

@ -0,0 +1,220 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { useParams } from 'next/navigation';
import { Button } from '@heroui/react';
import { Input } from '@/components/ui/input';
import { Info, Plus, Trash2 } from 'lucide-react';
import { z } from 'zod';
import { Workflow, WorkflowTool } from '@/app/lib/types/workflow_types';
import { getProjectConfig } from '@/app/actions/project_actions';
import { addServer, removeServer } from '@/app/actions/custom_mcp_server_actions';
import { fetchTools } from "@/app/actions/custom_mcp_server_actions";
import { ServerCard } from './ServerCard';
import { McpToolsPanel } from './McpToolsPanel';
import { ProjectWideChangeConfirmationModal } from '@/components/common/project-wide-change-confirmation-modal';
// Types
const CustomMcpServerType = z.object({ serverUrl: z.string() });
type CustomMcpServer = z.infer<typeof CustomMcpServerType>;
type ServerList = Record<string, CustomMcpServer>;
type CustomMcpServersProps = {
tools: z.infer<typeof Workflow.shape.tools>;
onAddTool: (tool: z.infer<typeof WorkflowTool>) => void;
};
export function CustomMcpServers({ tools: workflowTools, onAddTool }: CustomMcpServersProps) {
const params = useParams();
const projectId = typeof params.projectId === 'string' ? params.projectId : params.projectId?.[0];
if (!projectId) throw new Error('Project ID is required');
// State
const [servers, setServers] = useState<ServerList>({});
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [addName, setAddName] = useState('');
const [addUrl, setAddUrl] = useState('');
const [addLoading, setAddLoading] = useState(false);
const [addError, setAddError] = useState<string | null>(null);
const [panelServer, setPanelServer] = useState<{ name: string; url: string } | null>(null);
const [toolsLoading, setToolsLoading] = useState(false);
const [toolsError, setToolsError] = useState<string | null>(null);
const [serverTools, setServerTools] = useState<z.infer<typeof WorkflowTool>[]>([]);
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
const [serverToDelete, setServerToDelete] = useState<string | null>(null);
// Fetch servers on mount
const fetchServers = useCallback(async () => {
setLoading(true);
setError(null);
try {
const project = await getProjectConfig(projectId);
setServers(project.customMcpServers || {});
} catch (err: any) {
setError(err?.message || 'Failed to load servers');
setServers({});
} finally {
setLoading(false);
}
}, [projectId]);
useEffect(() => {
fetchServers();
}, [fetchServers]);
// Add server
const handleAddServer = async (e: React.FormEvent) => {
e.preventDefault();
if (!addName || !addUrl) return;
setAddLoading(true);
setAddError(null);
try {
await addServer(projectId, addName, { serverUrl: addUrl });
setAddName('');
setAddUrl('');
await fetchServers();
} catch (err: any) {
setAddError(err?.message || 'Failed to add server');
} finally {
setAddLoading(false);
}
};
// Open delete modal
const handleDeleteClick = (name: string) => {
setServerToDelete(name);
setDeleteModalOpen(true);
};
// Delete server
const handleDeleteServer = async () => {
if (!serverToDelete) return;
try {
await removeServer(projectId, serverToDelete);
await fetchServers();
setDeleteModalOpen(false);
setServerToDelete(null);
} catch (err: any) {
alert(err?.message || 'Failed to delete server');
}
};
// Open panel and fetch tools
const handleOpenPanel = async (name: string, url: string) => {
setPanelServer({ name, url });
setToolsLoading(true);
setToolsError(null);
setServerTools([]);
try {
const fetched = await fetchTools(url, name);
setServerTools(fetched);
} catch (err: any) {
setToolsError(err?.message || 'Failed to fetch tools');
} finally {
setToolsLoading(false);
}
};
// Close panel
const handleClosePanel = () => {
setPanelServer(null);
setServerTools([]);
};
// UI
return (
<div className="space-y-6">
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 rounded-lg p-4">
<div className="flex gap-3">
<div className="shrink-0">
<Info className="h-5 w-5 text-blue-600 dark:text-blue-400" />
</div>
<p className="text-sm text-blue-700 dark:text-blue-300">
Add your own MCP servers here. Enter the server details and select tools to add to your workflow.
</p>
</div>
</div>
{/* Add server form */}
<form onSubmit={handleAddServer} className="space-y-4">
<div className="flex gap-4">
<Input
type="text"
value={addName}
onChange={e => setAddName(e.target.value)}
placeholder="Server Name"
required
className="flex-1"
/>
<Input
type="text"
value={addUrl}
onChange={e => setAddUrl(e.target.value)}
placeholder="Server URL"
required
className="flex-1"
/>
<Button
type="submit"
disabled={!addName || !addUrl || addLoading}
startContent={<Plus className="h-4 w-4" />}
>
Add
</Button>
</div>
{addError && <div className="text-red-500 text-sm mt-1">{addError}</div>}
</form>
{/* Server cards */}
{loading ? (
<div className="text-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-800 dark:border-gray-200 mx-auto"></div>
<p className="mt-4 text-sm text-gray-600 dark:text-gray-400">Loading servers...</p>
</div>
) : error ? (
<div className="text-center py-8 text-red-500 dark:text-red-400">{error}</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{Object.entries(servers).length === 0 ? (
<div className="col-span-full text-gray-500 text-sm">No custom MCP servers added yet.</div>
) : (
Object.entries(servers).map(([name, { serverUrl }]) => (
<ServerCard
key={name}
serverName={name}
serverUrl={serverUrl}
workflowTools={workflowTools}
onSelectServer={() => handleOpenPanel(name, serverUrl)}
onDeleteServer={() => handleDeleteClick(name)}
/>
))
)}
</div>
)}
{/* Delete confirmation modal */}
<ProjectWideChangeConfirmationModal
isOpen={deleteModalOpen}
onClose={() => setDeleteModalOpen(false)}
onConfirm={handleDeleteServer}
title="Delete Server"
confirmationQuestion={`Are you sure you want to delete "${serverToDelete}"? This will delete the server from the project.`}
confirmButtonText="Delete"
/>
{/* MCP Tools Panel */}
<McpToolsPanel
server={panelServer}
isOpen={!!panelServer}
onClose={handleClosePanel}
tools={workflowTools}
onAddTool={onAddTool}
serverTools={serverTools}
toolsLoading={toolsLoading}
toolsError={toolsError}
/>
</div>
);
}

460
apps/rowboat/app/projects/[projectId]/tools/components/CustomServers.tsx
View file

@ -1,460 +0,0 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { useParams } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Info, Plus, Search } from 'lucide-react';
import { clsx } from 'clsx';
import { z } from 'zod';
import { MCPServer } from '@/app/lib/types/types';
import {
ServerCard,
ToolManagementPanel
} from './MCPServersCommon';
import { fetchMcpToolsForServer } from '@/app/actions/mcp_actions';
import {
fetchCustomServers,
addCustomServer,
removeCustomServer,
toggleCustomServer,
updateCustomServerTools
} from '@/app/actions/custom_server_actions';
import { Modal } from '@/components/ui/modal';
type McpServerType = z.infer<typeof MCPServer>;
type McpToolType = z.infer<typeof MCPServer>['tools'][number];
export function CustomServers() {
const params = useParams();
const projectId = typeof params.projectId === 'string' ? params.projectId : params.projectId?.[0];
if (!projectId) throw new Error('Project ID is required');
const [servers, setServers] = useState<McpServerType[]>([]);
const [selectedServer, setSelectedServer] = useState<McpServerType | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [togglingServers, setTogglingServers] = useState<Set<string>>(new Set());
const [serverOperations, setServerOperations] = useState<Map<string, 'setup' | 'delete'>>(new Map());
const [selectedTools, setSelectedTools] = useState<Set<string>>(new Set());
const [hasToolChanges, setHasToolChanges] = useState(false);
const [savingTools, setSavingTools] = useState(false);
const [syncingServers, setSyncingServers] = useState<Set<string>>(new Set());
const [showAddServer, setShowAddServer] = useState(false);
const [newServerName, setNewServerName] = useState('');
const [newServerUrl, setNewServerUrl] = useState('');
const fetchServers = useCallback(async () => {
try {
setLoading(true);
const customServers = await fetchCustomServers(projectId);
setServers(customServers);
setError(null);
} catch (err: any) {
setError(err?.message || 'Failed to load custom MCP servers');
console.error('Error fetching servers:', err);
setServers([]);
} finally {
setLoading(false);
}
}, [projectId]);
useEffect(() => {
fetchServers();
}, [fetchServers]);
const handleToggleServer = async (server: McpServerType) => {
try {
const serverKey = server.name;
setTogglingServers(prev => {
const next = new Set(prev);
next.add(serverKey);
return next;
});
setServerOperations(prev => {
const next = new Map(prev);
next.set(serverKey, server.isActive ? 'delete' : 'setup');
return next;
});
await toggleCustomServer(projectId, server.name, !server.isActive);
// Update local state
setServers(prevServers => {
return prevServers.map(s => {
if (s.name === serverKey) {
return {
...s,
isActive: !s.isActive
};
}
return s;
});
});
} catch (err) {
console.error('Toggle failed:', { server: server.name, error: err });
} finally {
const serverKey = server.name;
setTogglingServers(prev => {
const next = new Set(prev);
next.delete(serverKey);
return next;
});
setServerOperations(prev => {
const next = new Map(prev);
next.delete(serverKey);
return next;
});
}
};
const handleSyncServer = async (server: McpServerType) => {
if (!projectId || !server.isActive) return;
try {
setSyncingServers(prev => {
const next = new Set(prev);
next.add(server.name);
return next;
});
const enrichedTools = await fetchMcpToolsForServer(projectId, server.name);
const updatedAvailableTools = enrichedTools.map(tool => ({
id: tool.name,
name: tool.name,
description: tool.description,
parameters: tool.parameters
}));
await updateCustomServerTools(
projectId,
server.name,
updatedAvailableTools, // Auto-select all tools for custom servers
updatedAvailableTools
);
// Update servers state
setServers(prevServers => {
return prevServers.map(s => {
if (s.name === server.name) {
return {
...s,
availableTools: updatedAvailableTools,
tools: updatedAvailableTools
};
}
return s;
});
});
// If this server is currently selected, update the selectedTools state
if (selectedServer?.name === server.name) {
setSelectedServer(prev => {
if (!prev) return null;
return {
...prev,
availableTools: updatedAvailableTools,
tools: updatedAvailableTools
};
});
// Update selectedTools to include all tools for the custom server
setSelectedTools(new Set(updatedAvailableTools.map(tool => tool.id)));
}
} finally {
setSyncingServers(prev => {
const next = new Set(prev);
next.delete(server.name);
return next;
});
}
};
// Add effect to sync selectedTools when selectedServer changes
useEffect(() => {
if (selectedServer) {
setSelectedTools(new Set(selectedServer.tools.map(tool => tool.id)));
setHasToolChanges(false);
}
}, [selectedServer]);
const handleAddServer = async () => {
if (!newServerName || !newServerUrl) return;
try {
const newServer: McpServerType = {
id: `custom-${Date.now()}`,
name: newServerName,
description: `Custom MCP server at ${newServerUrl}`,
serverUrl: newServerUrl,
tools: [],
availableTools: [],
isActive: true,
isReady: true,
serverType: 'custom',
authNeeded: false,
isAuthenticated: false
};
// Add to MongoDB and get back the formatted server
const formattedServer = await addCustomServer(projectId, newServer);
// Update local state with the formatted server
setServers(prev => [...prev, formattedServer]);
setShowAddServer(false);
setNewServerName('');
setNewServerUrl('');
// Fetch tools for the new server using the formatted URL
await handleSyncServer(formattedServer);
} catch (err) {
console.error('Error adding server:', err);
setError('Failed to add server. Please try again.');
}
};
const handleRemoveServer = async (server: McpServerType) => {
// Show confirmation dialog
const shouldRemove = window.confirm(
"Are you sure you want to delete this server? Alternatively, you can toggle it OFF if you'd like to retain the configuration but not make it available to agents."
);
if (!shouldRemove) return;
try {
await removeCustomServer(projectId, server.name);
// Update local state
setServers(prev => prev.filter(s => s.name !== server.name));
// If this server was selected, close the tool management panel
if (selectedServer?.name === server.name) {
setSelectedServer(null);
}
} catch (err) {
console.error('Error removing server:', err);
setError('Failed to remove server. Please try again.');
}
};
const handleSaveToolSelection = async () => {
if (!selectedServer || !projectId) return;
setSavingTools(true);
try {
const availableTools = selectedServer.availableTools || [];
const selectedToolsList = availableTools.filter(tool => selectedTools.has(tool.id));
await updateCustomServerTools(
projectId,
selectedServer.name,
selectedToolsList,
availableTools
);
setServers(prevServers => {
return prevServers.map(s => {
if (s.name === selectedServer.name) {
return {
...s,
tools: selectedToolsList
};
}
return s;
});
});
setSelectedServer(prev => {
if (!prev) return null;
return {
...prev,
tools: selectedToolsList
};
});
setHasToolChanges(false);
} catch (error) {
console.error('Error saving tool selection:', error);
} finally {
setSavingTools(false);
}
};
const filteredServers = servers.filter(server => {
const searchLower = searchQuery.toLowerCase();
const serverTools = server.tools || [];
return (
server.name.toLowerCase().includes(searchLower) ||
server.description.toLowerCase().includes(searchLower) ||
serverTools.some(tool =>
tool.name.toLowerCase().includes(searchLower) ||
tool.description.toLowerCase().includes(searchLower)
)
);
});
return (
<div className="space-y-6">
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 rounded-lg p-4">
<div className="flex gap-3">
<div className="shrink-0">
<Info className="h-5 w-5 text-blue-600 dark:text-blue-400" />
</div>
<p className="text-sm text-blue-700 dark:text-blue-300">
Add your own MCP servers here. These servers will be available to agents in the Build view once toggled ON.
</p>
</div>
</div>
<div className="flex items-center justify-between gap-4">
<Button
size="sm"
variant="primary"
onClick={() => setShowAddServer(true)}
>
<div className="inline-flex items-center">
<Plus className="h-4 w-4" />
<span className="ml-2">Add Server</span>
</div>
</Button>
<div className="flex-1 flex items-center gap-4">
<div className="relative flex-1">
<div className="absolute inset-y-0 left-2 flex items-center pointer-events-none">
<Search className="h-4 w-4 text-gray-400 dark:text-gray-500" />
</div>
<input
type="text"
placeholder="Search servers or tools..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-8 pr-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-md
bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100
placeholder-gray-400 dark:placeholder-gray-500
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400
hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
/>
</div>
<div className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
{filteredServers.length} {filteredServers.length === 1 ? 'server' : 'servers'} • {
filteredServers.reduce((total, server) => total + (server.availableTools?.length || 0), 0)
} tools
</div>
</div>
</div>
<Modal
isOpen={showAddServer}
onClose={() => {
setShowAddServer(false);
setNewServerName('');
setNewServerUrl('');
}}
title="Add Custom MCP Server"
>
<div className="space-y-4">
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
Server Name
</label>
<input
type="text"
value={newServerName}
onChange={(e) => setNewServerName(e.target.value)}
placeholder="e.g., My Custom Server"
className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-md
bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
/>
</div>
<div className="space-y-2">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
Server URL
</label>
<input
type="text"
value={newServerUrl}
onChange={(e) => setNewServerUrl(e.target.value)}
placeholder="e.g., http://localhost:3000"
className="w-full px-3 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-md
bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
/>
</div>
<div className="flex justify-end gap-2 pt-4">
<Button
size="sm"
variant="secondary"
onClick={() => {
setShowAddServer(false);
setNewServerName('');
setNewServerUrl('');
}}
>
Cancel
</Button>
<Button
size="sm"
variant="primary"
onClick={handleAddServer}
disabled={!newServerName || !newServerUrl}
>
Add Server
</Button>
</div>
</div>
</Modal>
{loading ? (
<div className="text-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-800 dark:border-gray-200 mx-auto"></div>
<p className="mt-4 text-sm text-gray-600 dark:text-gray-400">Loading servers...</p>
</div>
) : error ? (
<div className="text-center py-8 text-red-500 dark:text-red-400">{error}</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredServers.map((server) => (
<ServerCard
key={server.id}
server={server}
onToggle={() => handleToggleServer(server)}
onManageTools={() => setSelectedServer(server)}
onSync={() => handleSyncServer(server)}
onRemove={() => handleRemoveServer(server)}
isToggling={togglingServers.has(server.name)}
isSyncing={syncingServers.has(server.name)}
operation={serverOperations.get(server.name)}
error={error && error.includes(server.name) ? { message: error } : undefined}
showAuth={false}
/>
))}
</div>
)}
<ToolManagementPanel
server={selectedServer}
onClose={() => {
setSelectedServer(null);
setSelectedTools(new Set());
setHasToolChanges(false);
}}
selectedTools={selectedTools}
onToolSelectionChange={(toolId, selected) => {
setSelectedTools(prev => {
const next = new Set(prev);
if (selected) {
next.add(toolId);
} else {
next.delete(toolId);
}
setHasToolChanges(true);
return next;
});
}}
onSaveTools={handleSaveToolSelection}
onSyncTools={selectedServer ? () => handleSyncServer(selectedServer) : undefined}
hasChanges={hasToolChanges}
isSaving={savingTools}
isSyncing={selectedServer ? syncingServers.has(selectedServer.name) : false}
/>
</div>
);
}

240
apps/rowboat/app/projects/[projectId]/tools/components/McpToolsPanel.tsx Normal file
View file

@ -0,0 +1,240 @@
'use client';
import { useState, useEffect, useCallback, useMemo } from 'react';
import { Button, Checkbox, Input } from '@heroui/react';
import { Search, X } from 'lucide-react';
import { Workflow, WorkflowTool } from '@/app/lib/types/workflow_types';
import { z } from 'zod';
import { SlidePanel } from '@/components/ui/slide-panel';
interface McpToolsPanelProps {
server: {
name: string;
url: string;
} | null;
isOpen: boolean;
onClose: () => void;
tools: z.infer<typeof Workflow.shape.tools>;
onAddTool: (tool: z.infer<typeof WorkflowTool>) => void;
serverTools: z.infer<typeof WorkflowTool>[];
toolsLoading: boolean;
toolsError: string | null;
}
export function McpToolsPanel({
server,
isOpen,
onClose,
tools: workflowTools,
onAddTool,
serverTools,
toolsLoading,
toolsError,
}: McpToolsPanelProps) {
const [selectedTools, setSelectedTools] = useState<Set<string>>(new Set());
const [hasChanges, setHasChanges] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
// Filter out already selected tools
const selectedToolNames = workflowTools
.filter(tool => tool.isMcp && tool.mcpServerName === server?.name)
.map(tool => tool.name);
// Debounce search query
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedSearchQuery(searchQuery);
}, 300);
return () => clearTimeout(timer);
}, [searchQuery]);
// Filter tools based on search query
const filteredTools = useMemo(() => {
if (!debouncedSearchQuery) return serverTools;
const query = debouncedSearchQuery.toLowerCase();
return serverTools.filter(tool =>
tool.name.toLowerCase().includes(query) ||
tool.description.toLowerCase().includes(query)
);
}, [serverTools, debouncedSearchQuery]);
// Filter out already added tools
const availableTools = filteredTools.filter(tool => !selectedToolNames.includes(tool.name));
const handleToolSelectionChange = useCallback((toolName: string, selected: boolean) => {
setSelectedTools(prev => {
const next = new Set(prev);
if (selected) {
next.add(toolName);
} else {
next.delete(toolName);
}
setHasChanges(true);
return next;
});
}, []);
const handleAddSelectedTools = useCallback(() => {
// Convert selected tool names to actual tool objects and add them
const selectedToolObjects = serverTools.filter(tool => selectedTools.has(tool.name));
selectedToolObjects.forEach(tool => {
onAddTool(tool);
});
onClose();
}, [selectedTools, serverTools, onAddTool, onClose]);
const handleClose = useCallback(() => {
setSelectedTools(new Set());
setHasChanges(false);
setSearchQuery('');
setDebouncedSearchQuery('');
onClose();
}, [onClose]);
const handleClearSearch = useCallback(() => {
setSearchQuery('');
}, []);
if (!server) return null;
return (
<SlidePanel
isOpen={isOpen}
onClose={handleClose}
title={
<div className="flex items-center gap-3">
<div className="w-6 h-6 bg-blue-500 rounded-md flex items-center justify-center">
<span className="text-white text-xs font-bold">MCP</span>
</div>
<span>{server.name}</span>
</div>
}
>
<div className="flex flex-col h-full">
{/* Header */}
<div className="mb-6">
<div className="flex items-center justify-between mb-4">
<div>
<h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Select Tools</h4>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
Check the tools you want to add to your workflow
</p>
</div>
{hasChanges && (
<Button
variant="solid"
size="sm"
color="primary"
onPress={handleAddSelectedTools}
>
Add Selected ({selectedTools.size})
</Button>
)}
</div>
{/* Search Box */}
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search className="h-4 w-4 text-gray-400" />
</div>
<Input
type="text"
placeholder="Search tools..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 pr-10"
size="sm"
/>
{searchQuery && (
<button
onClick={handleClearSearch}
className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
>
<X className="h-4 w-4" />
</button>
)}
</div>
</div>
{/* Error Display */}
{toolsError && (
<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
<p className="text-sm text-red-700 dark:text-red-300">{toolsError}</p>
</div>
)}
{/* Scrollable Tools List */}
<div className="flex-1 overflow-y-auto">
{toolsLoading ? (
<div className="text-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-800 dark:border-gray-200 mx-auto"></div>
<p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
{searchQuery ? 'Searching tools...' : 'Loading tools...'}
</p>
</div>
) : availableTools.length === 0 ? (
<div className="text-center py-8">
<p className="text-sm text-gray-600 dark:text-gray-400">
{searchQuery ? 'No tools found matching your search.' : 'No tools available.'}
</p>
</div>
) : (
<div className="space-y-3">
{availableTools.map((tool) => (
<div
key={tool.name}
className="group p-4 rounded-lg transition-all duration-200 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
>
<div className="flex items-start gap-3">
<Checkbox
isSelected={selectedTools.has(tool.name)}
onValueChange={(selected) => handleToolSelectionChange(tool.name, selected)}
size="sm"
/>
<div className="flex-1 text-left flex flex-col gap-1">
<h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors text-left">
{tool.name}
</h4>
<p className="text-sm text-gray-500 dark:text-gray-400 text-left">
{tool.description}
</p>
</div>
</div>
</div>
))}
</div>
)}
</div>
{/* Fixed Footer */}
<div className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
<div className="flex items-center justify-between">
<div className="text-sm text-gray-500 dark:text-gray-400">
{availableTools.length > 0 && (
<span>
{availableTools.length} tool{availableTools.length !== 1 ? 's' : ''} found
{searchQuery && ` for "${searchQuery}"`}
</span>
)}
</div>
<div className="flex items-center gap-2">
<Button
variant="bordered"
size="sm"
onPress={handleAddSelectedTools}
disabled={selectedTools.size === 0}
>
Add Selected ({selectedTools.size})
</Button>
</div>
</div>
</div>
</div>
</SlidePanel>
);
}

168
apps/rowboat/app/projects/[projectId]/tools/components/ServerCard.tsx Normal file
View file

@ -0,0 +1,168 @@
'use client';
import { useCallback, useEffect, useState } from 'react';
import { PictureImg } from '@/components/ui/picture-img';
import clsx from 'clsx';
import { z } from 'zod';
import { Chip } from '@heroui/react';
import { Server, MoreVertical } from 'lucide-react';
import { Workflow, WorkflowTool } from '@/app/lib/types/workflow_types';
import { fetchTools } from "@/app/actions/custom_mcp_server_actions";
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@heroui/react';
import { Button } from '@heroui/react';
type ServerCardProps = {
serverName: string;
serverUrl: string;
workflowTools: z.infer<typeof Workflow.shape.tools>;
onSelectServer: () => void;
onDeleteServer: () => void;
};
const serverCardStyles = {
base: clsx(
"group p-6 rounded-xl transition-all duration-200 cursor-pointer",
"bg-white dark:bg-gray-900",
"border border-gray-200 dark:border-gray-700",
"shadow-md dark:shadow-gray-900/20",
"hover:shadow-lg dark:hover:shadow-gray-900/30",
"hover:border-blue-300 dark:hover:border-blue-600",
"hover:bg-gray-50/50 dark:hover:bg-gray-800/50",
"hover:-translate-y-1",
"min-h-[200px] flex flex-col"
),
};
export function ServerCard({
serverName,
serverUrl,
workflowTools,
onSelectServer,
onDeleteServer,
}: ServerCardProps) {
const [tools, setTools] = useState<z.infer<typeof WorkflowTool>[]>([]);
const [toolsLoading, setToolsLoading] = useState(true);
const [toolsError, setToolsError] = useState<string | null>(null);
// Fetch tools on mount
useEffect(() => {
const fetchServerTools = async () => {
setToolsLoading(true);
setToolsError(null);
try {
const fetched = await fetchTools(serverUrl, serverName);
setTools(fetched);
} catch (err: any) {
setToolsError(err?.message || 'Failed to fetch tools');
setTools([]);
} finally {
setToolsLoading(false);
}
};
fetchServerTools();
}, [serverUrl, serverName]);
const handleCardClick = useCallback(() => {
onSelectServer();
}, [onSelectServer]);
// Calculate selected tools count for this server
const selectedToolsCount = workflowTools
.filter(tool => tool.isMcp && tool.mcpServerName === serverName)
.length;
return (
<div className={serverCardStyles.base} onClick={handleCardClick}>
<div className="flex flex-col h-full">
{/* Header */}
<div className="flex items-start gap-3 mb-4">
<div className="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center flex-shrink-0">
<Server className="w-4 h-4 text-white" />
</div>
<div className="flex-1 min-w-0">
<h3 className="font-semibold text-lg text-gray-900 dark:text-gray-100 truncate">
{serverName}
</h3>
<div className="flex items-center gap-2 mt-1 flex-wrap">
{toolsLoading ? (
<Chip
color="secondary"
variant="faded"
size="sm"
>
Loading tools...
</Chip>
) : toolsError ? (
<Chip
color="danger"
variant="faded"
size="sm"
>
Error loading tools
</Chip>
) : (
<Chip
color="secondary"
variant="faded"
size="sm"
>
{selectedToolsCount > 0
? `${tools.length} tools, ${selectedToolsCount} selected`
: `${tools.length} tools`
}
</Chip>
)}
</div>
</div>
<Dropdown>
<DropdownTrigger>
<Button
variant="light"
size="sm"
isIconOnly
title="More options"
aria-label="More options"
onClick={(e) => e.stopPropagation()}
>
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Server actions">
<DropdownItem
key="delete"
color="danger"
startContent={<MoreVertical className="h-4 w-4" />}
onPress={onDeleteServer}
>
Delete
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
{/* Description */}
<div className="flex-1">
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-3">
Custom MCP server at {serverUrl}
</p>
</div>
{/* Footer */}
<div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Chip
color='success'
variant='flat'
size="sm"
>
Custom Server
</Chip>
</div>
</div>
</div>
</div>
</div>
);
}

29
apps/rowboat/app/projects/[projectId]/tools/components/ToolkitCard.tsx
View file

@ -5,12 +5,11 @@ import { PictureImg } from '@/components/ui/picture-img';
import clsx from 'clsx';
import { z } from 'zod';
import { ZToolkit } from '@/app/lib/composio/composio';
import { Project } from '@/app/lib/types/project_types';
import { Chip } from '@heroui/react';
import { LinkIcon } from 'lucide-react';
import { Workflow } from '@/app/lib/types/workflow_types';
type ToolkitType = z.infer<typeof ZToolkit>;
type ProjectType = z.infer<typeof Project>;
const toolkitCardStyles = {
base: clsx(
@ -28,33 +27,25 @@ const toolkitCardStyles = {
interface ToolkitCardProps {
toolkit: ToolkitType;
projectId: string;
isConnected: boolean;
connectedAccountId?: string;
projectConfig: ProjectType | null;
onManageTools: () => void;
onProjectConfigUpdate: () => void;
onRemoveToolkitTools: (toolkitSlug: string) => void;
onSelectToolkit: () => void;
workflowTools: z.infer<typeof Workflow.shape.tools>;
}
export function ToolkitCard({
toolkit,
projectId,
isConnected,
connectedAccountId,
projectConfig,
onManageTools,
onProjectConfigUpdate,
onRemoveToolkitTools
onSelectToolkit,
workflowTools,
}: ToolkitCardProps) {
const handleCardClick = useCallback(() => {
onManageTools();
}, [onManageTools]);
onSelectToolkit();
}, [onSelectToolkit]);
// Calculate selected tools count for this toolkit
const selectedToolsCount = projectConfig?.composioSelectedTools?.filter(tool =>
tool.toolkit.slug === toolkit.slug
).length || 0;
const selectedToolsCount = workflowTools
.filter(tool => tool.isComposio && tool.composioData?.toolkitSlug === toolkit.slug)
.length;
return (
<div className={toolkitCardStyles.base} onClick={handleCardClick}>

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

@ -2,23 +2,25 @@
import { useState } from 'react';
import { Tabs, Tab } from '@/components/ui/tabs';
import { HostedServers } from './HostedServers';
import { CustomServers } from './CustomServers';
import { WebhookConfig } from './WebhookConfig';
import { CustomMcpServers } from './CustomMcpServer';
import { Composio } from './Composio';
import { AddWebhookTool } from './AddWebhookTool';
import type { Key } from 'react';
import { Workflow, WorkflowTool } from '@/app/lib/types/workflow_types';
import { z } from 'zod';
export function ToolsConfig({
projectId,
useComposioTools,
useKlavisTools
tools,
onAddTool,
}: {
projectId: string;
useComposioTools: boolean;
useKlavisTools: boolean;
tools: z.infer<typeof Workflow.shape.tools>;
onAddTool: (tool: Partial<z.infer<typeof WorkflowTool>>) => void;
}) {
let defaultActiveTab = 'custom';
if (useKlavisTools) {
defaultActiveTab = 'hosted';
}
let defaultActiveTab = 'mcp';
if (useComposioTools) {
defaultActiveTab = 'composio';
}
@ -40,32 +42,28 @@ export function ToolsConfig({
{useComposioTools && (
<Tab key="composio" title="Composio">
<div className="mt-4 p-6">
<Composio />
<Composio
projectId={projectId}
tools={tools}
onAddTool={onAddTool}
/>
</div>
</Tab>
)}
{useKlavisTools && (
<Tab key="hosted" title={
<div className="flex items-center gap-2">
<span>Klavis</span>
<span className="leading-none px-1.5 py-[2px] text-[9px] font-medium bg-linear-to-r from-pink-500 to-violet-500 text-white rounded-full">
BETA
</span>
</div>
}>
<div className="mt-4 p-6">
<HostedServers onSwitchTab={key => setActiveTab(key)} />
</div>
</Tab>
)}
<Tab key="custom" title="Custom MCP Servers">
<Tab key="mcp" title="Custom MCP Servers">
<div className="mt-4 p-6">
<CustomServers />
<CustomMcpServers
tools={tools}
onAddTool={onAddTool}
/>
</div>
</Tab>
<Tab key="webhook" title="Webhook">
<div className="mt-4 p-6">
<WebhookConfig />
<AddWebhookTool
projectId={projectId}
onAddTool={onAddTool}
/>
</div>
</Tab>
</Tabs>

198
apps/rowboat/app/projects/[projectId]/tools/components/WebhookConfig.tsx
View file

@ -1,42 +1,20 @@
'use client';
import { useState, useEffect } from "react";
import { useParams } from 'next/navigation';
import { Spinner } from "@heroui/react";
import { Spinner, Button, Input } from "@heroui/react";
import { getProjectConfig, updateWebhookUrl } from "@/app/actions/project_actions";
import { Textarea } from "@/components/ui/textarea";
import { clsx } from "clsx";
import { ProjectWideChangeConfirmationModal } from '@/components/common/project-wide-change-confirmation-modal';
const sectionHeaderStyles = "block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2";
const sectionDescriptionStyles = "text-sm text-gray-500 dark:text-gray-400 mb-4";
const textareaStyles = "rounded-lg p-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 focus:shadow-inner focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20 placeholder:text-gray-400 dark:placeholder:text-gray-500";
const inputStyles = "rounded-lg px-3 py-2 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-750 focus:shadow-inner focus:ring-2 focus:ring-indigo-500/20 dark:focus:ring-indigo-400/20";
function Section({ title, children, description }: {
title: string;
children: React.ReactNode;
description?: string;
}) {
return (
<div className="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
<div className="px-6 pt-4">
<h2 className={sectionHeaderStyles}>{title}</h2>
{description && (
<p className={sectionDescriptionStyles}>{description}</p>
)}
</div>
<div className="px-6 pb-6">{children}</div>
</div>
);
}
export function WebhookConfig() {
const params = useParams();
const projectId = params.projectId ? (typeof params.projectId === 'string' ? params.projectId : params.projectId[0]) : '';
export function WebhookConfig({ projectId }: { projectId: string }) {
const [loading, setLoading] = useState(true);
const [webhookUrl, setWebhookUrl] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [showConfirmModal, setShowConfirmModal] = useState(false);
const [saving, setSaving] = useState(false);
const [isEditMode, setIsEditMode] = useState(false);
const [editValue, setEditValue] = useState<string>('');
useEffect(() => {
let mounted = true;
@ -46,6 +24,7 @@ export function WebhookConfig() {
const project = await getProjectConfig(projectId);
if (mounted) {
setWebhookUrl(project.webhookUrl || null);
setEditValue(project.webhookUrl || '');
setError(null);
}
} catch (err) {
@ -67,59 +46,138 @@ export function WebhookConfig() {
};
}, [projectId]);
function validate(url: string) {
if (!url.trim()) {
return { valid: true };
}
// validate on change in webhook
useEffect(() => {
if (!isEditMode) return;
setError(null);
try {
new URL(url);
setError(null);
return { valid: true };
new URL(editValue || '');
} catch {
setError('Please enter a valid URL');
return { valid: false, errorMessage: 'Please enter a valid URL' };
}
}, [editValue, isEditMode]);
const handleEdit = () => {
setIsEditMode(true);
setEditValue(webhookUrl || '');
setError(null);
};
const handleCancel = () => {
setIsEditMode(false);
setEditValue(webhookUrl || '');
setError(null);
};
async function handleSave() {
setSaving(true);
try {
await updateWebhookUrl(projectId, editValue);
setWebhookUrl(editValue);
setIsEditMode(false);
setShowConfirmModal(false);
} catch (err) {
console.error('Failed to update webhook URL:', err);
setError('Failed to update webhook URL');
} finally {
setSaving(false);
}
}
return (
<div className="space-y-6">
<Section
title="Webhook URL"
description="In workflow editor, tool calls will be posted to this URL, unless they are mocked."
>
<div className="space-y-2">
<div className={clsx(
"border rounded-lg focus-within:ring-2",
error
? "border-red-500 focus-within:ring-red-500/20"
: "border-gray-200 dark:border-gray-700 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
)}>
<Textarea
value={webhookUrl || ''}
useValidation={true}
updateOnBlur={true}
validate={validate}
onValidatedChange={(value) => {
setWebhookUrl(value);
updateWebhookUrl(projectId, value);
}}
placeholder="Enter webhook URL..."
className="w-full text-sm bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-4 py-3"
autoResize
disabled={loading}
/>
if (loading) {
return (
<div className="space-y-6">
<div className="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
<div className="px-6 pt-4">
<h2 className="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Webhook URL</h2>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">In workflow editor, tool calls will be posted to this URL, unless they are mocked.</p>
</div>
{loading && (
<div className="px-6 pb-6">
<div className="flex items-center gap-2 text-sm text-gray-500">
<Spinner size="sm" />
<span>Loading...</span>
</div>
)}
{error && (
<p className="text-sm text-red-500">{error}</p>
)}
</div>
</div>
</Section>
</div>
);
}
return (
<div className="space-y-6">
<div className="rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
<div className="px-6 pt-4">
<h2 className="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Webhook URL</h2>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4">Tool calls will be posted to this URL, unless they are mocked.</p>
</div>
<div className="px-6 pb-6">
<div className="space-y-4">
{isEditMode ? (
<>
<div className={clsx(
"border rounded-lg focus-within:ring-2",
error
? "border-red-500 focus-within:ring-red-500/20"
: "border-gray-200 dark:border-gray-700 focus-within:ring-indigo-500/20 dark:focus-within:ring-indigo-400/20"
)}>
<Input
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
placeholder="Enter webhook URL..."
className="w-full text-sm bg-transparent focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors px-4 py-3"
/>
</div>
{error && (
<p className="text-sm text-red-500">{error}</p>
)}
<div className="flex gap-2 justify-end">
<Button
variant="light"
onPress={handleCancel}
disabled={saving}
>
Cancel
</Button>
<Button
color="primary"
onPress={() => setShowConfirmModal(true)}
disabled={!!error || saving}
>
Update Webhook URL
</Button>
</div>
</>
) : (
<>
<div className="flex items-center justify-between">
<div className="flex-1">
<p className="text-sm text-gray-600 dark:text-gray-400">
{webhookUrl || 'No webhook URL configured'}
</p>
</div>
<Button
variant="light"
onPress={handleEdit}
>
Edit
</Button>
</div>
</>
)}
</div>
</div>
</div>
<ProjectWideChangeConfirmationModal
isOpen={showConfirmModal}
onClose={() => setShowConfirmModal(false)}
onConfirm={handleSave}
title="Update Webhook URL"
confirmationQuestion="Are you sure you want to update the webhook URL? This will affect all workflow tool calls."
confirmButtonText="Update"
isLoading={saving}
/>
</div>
);
}

26
apps/rowboat/app/projects/[projectId]/tools/page.tsx
View file

@ -1,26 +0,0 @@
import { Suspense } from 'react';
import { ToolsConfig } from './components/ToolsConfig';
import { PageHeader } from '@/components/ui/page-header';
import { requireActiveBillingSubscription } from '@/app/lib/billing';
import { USE_COMPOSIO_TOOLS, USE_KLAVIS_TOOLS } from '@/app/lib/feature_flags';
export default async function ToolsPage() {
await requireActiveBillingSubscription();
return (
<div className="flex flex-col h-full">
<PageHeader
title="Tools"
description="Configure and manage your project's tool integrations"
/>
<div className="flex-1 p-6">
<Suspense fallback={<div>Loading...</div>}>
<ToolsConfig
useComposioTools={USE_COMPOSIO_TOOLS}
useKlavisTools={USE_KLAVIS_TOOLS}
/>
</Suspense>
</div>
</div>
);
}

31
apps/rowboat/app/projects/[projectId]/workflow/app.tsx
View file

@ -1,17 +1,17 @@
"use client";
import { MCPServer, WithStringId } from "../../../lib/types/types";
import { DataSource } from "../../../lib/types/datasource_types";
import { Project } from "../../../lib/types/project_types";
import { z } from "zod";
import { useCallback, useEffect, useState } from "react";
import { WorkflowEditor } from "./workflow_editor";
import { Spinner } from "@heroui/react";
import { listDataSources } from "../../../actions/datasource_actions";
import { collectProjectTools, revertToLiveWorkflow } from "@/app/actions/project_actions";
import { revertToLiveWorkflow } from "@/app/actions/project_actions";
import { getProjectConfig } from "@/app/actions/project_actions";
import { Workflow, WorkflowTool } from "@/app/lib/types/workflow_types";
import { getEligibleModels } from "@/app/actions/billing_actions";
import { ModelsResponse } from "@/app/lib/types/billing_types";
import { Project } from "@/app/lib/types/project_types";
export function App({
projectId,
@ -25,11 +25,10 @@ export function App({
const [mode, setMode] = useState<'draft' | 'live'>('draft');
const [project, setProject] = useState<WithStringId<z.infer<typeof Project>> | null>(null);
const [dataSources, setDataSources] = useState<WithStringId<z.infer<typeof DataSource>>[] | null>(null);
const [projectTools, setProjectTools] = useState<z.infer<typeof WorkflowTool>[] | null>(null);
const [projectConfig, setProjectConfig] = useState<z.infer<typeof Project> | null>(null);
const [loading, setLoading] = useState(false);
const [eligibleModels, setEligibleModels] = useState<z.infer<typeof ModelsResponse> | "*">("*");
const [projectMcpServers, setProjectMcpServers] = useState<Array<z.infer<typeof MCPServer>>>([]);
const [webhookUrl, setWebhookUrl] = useState<string>('');
console.log('workflow app.tsx render');
@ -44,28 +43,34 @@ export function App({
const [
project,
dataSources,
projectTools,
eligibleModels,
] = await Promise.all([
getProjectConfig(projectId),
listDataSources(projectId),
collectProjectTools(projectId),
getEligibleModels(),
]);
setProject(project);
setDataSources(dataSources);
setProjectTools(projectTools);
setEligibleModels(eligibleModels);
if (project.mcpServers) {
setProjectMcpServers(project.mcpServers);
}
if (project.webhookUrl) {
setWebhookUrl(project.webhookUrl);
}
setLoading(false);
}, [projectId]);
const handleProjectToolsUpdate = useCallback(async () => {
// Lightweight refresh for tool-only updates
const projectConfig = await getProjectConfig(projectId);
setProject(projectConfig);
setProjectConfig(projectConfig);
// Update MCP servers if they changed
if (projectConfig.mcpServers) {
setProjectMcpServers(projectConfig.mcpServers);
}
}, [projectId]);
// Add this useEffect for initial load
useEffect(() => {
loadData();
@ -89,19 +94,19 @@ export function App({
<div>Loading workflow...</div>
</div>}
{!loading && !workflow && <div>No workflow found!</div>}
{!loading && project && workflow && (dataSources !== null) && (projectTools !== null) && <WorkflowEditor
{!loading && project && workflow && (dataSources !== null) && <WorkflowEditor
projectId={projectId}
isLive={mode == 'live'}
workflow={workflow}
dataSources={dataSources}
projectTools={projectTools}
projectConfig={projectConfig || project}
useRag={useRag}
mcpServerUrls={projectMcpServers}
toolWebhookUrl={webhookUrl}
defaultModel={defaultModel}
eligibleModels={eligibleModels}
onChangeMode={handleSetMode}
onRevertToLive={handleRevertToLive}
onProjectToolsUpdated={handleProjectToolsUpdate}
/>}
</>
}

53
apps/rowboat/app/projects/[projectId]/workflow/components/ToolsModal.tsx Normal file
View file

@ -0,0 +1,53 @@
'use client';
import React from 'react';
import { Modal, ModalContent, ModalHeader, ModalBody } from '@heroui/react';
import { ToolsConfig } from '../../tools/components/ToolsConfig';
import { z } from 'zod';
import { Workflow, WorkflowTool } from '@/app/lib/types/workflow_types';
interface ToolsModalProps {
isOpen: boolean;
onClose: () => void;
projectId: string;
tools: z.infer<typeof Workflow.shape.tools>;
onAddTool: (tool: Partial<z.infer<typeof WorkflowTool>>) => void;
}
export function ToolsModal({
isOpen,
onClose,
projectId,
tools,
onAddTool
}: ToolsModalProps) {
function handleAddTool(tool: Partial<z.infer<typeof WorkflowTool>>) {
onAddTool(tool);
onClose();
}
return (
<Modal
isOpen={isOpen}
onClose={onClose}
size="5xl"
scrollBehavior="inside"
>
<ModalContent>
<ModalHeader>
<h3 className="text-lg font-semibold">
Add tools
</h3>
</ModalHeader>
<ModalBody>
<ToolsConfig
useComposioTools={true}
projectId={projectId}
tools={tools}
onAddTool={handleAddTool}
/>
</ModalBody>
</ModalContent>
</Modal>
);
}

490
apps/rowboat/app/projects/[projectId]/workflow/entity_list.tsx
View file

@ -1,8 +1,10 @@
import { z } from "zod";
import { WorkflowPrompt, WorkflowAgent, WorkflowTool } from "../../../lib/types/workflow_types";
import { WorkflowPrompt, WorkflowAgent, WorkflowTool, Workflow } from "../../../lib/types/workflow_types";
import { Project } from "../../../lib/types/project_types";
import { Dropdown, DropdownItem, DropdownTrigger, DropdownMenu } from "@heroui/react";
import { useRef, useEffect, useState } from "react";
import { EllipsisVerticalIcon, ImportIcon, PlusIcon, Brain, Boxes, Wrench, PenLine, Library, ChevronDown, ChevronRight, ServerIcon, Component, ScrollText, GripVertical, Users, Cog, CheckCircle2, Eye } from "lucide-react";
import { EllipsisVerticalIcon, ImportIcon, PlusIcon, Brain, Boxes, Wrench, PenLine, Library, ChevronDown, ChevronRight, ServerIcon, Component, ScrollText, GripVertical, Users, Cog, CheckCircle2, LinkIcon, UnlinkIcon, MoreVertical, Eye } from "lucide-react";
import { Tooltip } from "@heroui/react";
import { DndContext, DragEndEvent, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
@ -13,6 +15,10 @@ import { clsx } from "clsx";
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable";
import { ServerLogo } from '../tools/components/MCPServersCommon';
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/react";
import { ToolsModal } from './components/ToolsModal';
import { ToolkitAuthModal } from '../tools/components/ToolkitAuthModal';
import { deleteConnectedAccount } from '@/app/actions/composio_actions';
import { ProjectWideChangeConfirmationModal } from '@/components/common/project-wide-change-confirmation-modal';
// Reduced gap size to match Cursor's UI
const GAP_SIZE = 4; // 1 unit * 4px (tailwind's default spacing unit)
@ -33,8 +39,8 @@ const buttonClasses = "text-sm px-3 py-1.5 bg-indigo-50 hover:bg-indigo-100 text
interface EntityListProps {
agents: z.infer<typeof WorkflowAgent>[];
tools: z.infer<typeof WorkflowTool>[];
projectTools: z.infer<typeof WorkflowTool>[];
prompts: z.infer<typeof WorkflowPrompt>[];
workflow: z.infer<typeof Workflow>;
selectedEntity: {
type: "agent" | "tool" | "prompt" | "visualise";
name: string;
@ -52,6 +58,8 @@ interface EntityListProps {
onDeleteTool: (name: string) => void;
onDeletePrompt: (name: string) => void;
onShowVisualise: (name: string) => void;
onProjectToolsUpdated?: () => void;
projectConfig?: z.infer<typeof Project>;
}
interface EmptyStateProps {
@ -80,6 +88,7 @@ const ListItemWithMenu = ({
iconClassName,
mcpServerName,
dragHandle,
isMocked,
}: {
name: string;
isSelected?: boolean;
@ -92,10 +101,11 @@ const ListItemWithMenu = ({
iconClassName?: string;
mcpServerName?: string;
dragHandle?: React.ReactNode;
isMocked?: boolean;
}) => {
return (
<div className={clsx(
"group flex items-center gap-2 px-2 py-1.5 rounded-md",
"group flex items-center gap-2 px-2 py-0.5 rounded-md min-h-[24px]",
{
"bg-indigo-50 dark:bg-indigo-950/30": isSelected,
"hover:bg-zinc-50 dark:hover:bg-zinc-800": !isSelected
@ -116,22 +126,27 @@ const ListItemWithMenu = ({
}}
disabled={disabled}
>
<div className={clsx("shrink-0 flex items-center justify-center w-4 h-4", iconClassName)}>
<div className={clsx("shrink-0 flex items-center justify-center w-3 h-3", iconClassName)}>
{mcpServerName ? (
<ServerLogo
serverName={mcpServerName}
className="h-4 w-4"
fallback={<ImportIcon className="w-4 h-4 text-blue-600 dark:text-blue-500" />}
className="h-3 w-3"
fallback={<ImportIcon className="w-3 h-3 text-blue-600 dark:text-blue-500" />}
/>
) : icon}
</div>
{name}
<span className="text-xs">{name}</span>
</button>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
{statusLabel}
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
{menuContent}
</div>
{isMocked && (
<Tooltip content="Mocked" size="sm" delay={500}>
<div className="w-4 h-4 rounded-full bg-purple-500 flex items-center justify-center text-xs font-medium text-white">
M
</div>
</Tooltip>
)}
{menuContent}
</div>
</div>
);
@ -166,44 +181,58 @@ const ServerCard = ({
const [isExpanded, setIsExpanded] = useState(false);
return (
<div className="mb-2">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="w-full flex items-center gap-2 px-2 py-1.5 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md text-sm text-left"
>
{isExpanded ? (
<ChevronDown className="w-4 h-4 text-gray-500" />
) : (
<ChevronRight className="w-4 h-4 text-gray-500" />
)}
<div className="flex items-center gap-1">
<ServerLogo
serverName={serverName}
className="h-4 w-4"
fallback={<ImportIcon className="w-4 h-4 text-blue-600 dark:text-blue-500" />}
/>
<span>{serverName}</span>
</div>
</button>
{isExpanded && (
<div className="ml-6 mt-1 space-y-1">
{tools.map((tool, index) => (
<ListItemWithMenu
key={`tool-${index}`}
name={tool.name}
isSelected={selectedEntity?.type === "tool" && selectedEntity.name === tool.name}
onClick={() => onSelectTool(tool.name)}
selectedRef={selectedEntity?.type === "tool" && selectedEntity.name === tool.name ? selectedRef : undefined}
mcpServerName={serverName}
menuContent={
<EntityDropdown
name={tool.name}
onDelete={onDeleteTool}
isLocked={tool.isMcp || tool.isLibrary}
/>
}
<div className="mb-1 group">
<div className="flex items-center gap-2 px-2 py-1 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md transition-colors">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="flex-1 flex items-center gap-2 text-sm text-left min-h-[28px]"
>
{/* Chevron - only show when has tools and on hover */}
<div className={`w-4 h-4 flex items-center justify-center transition-opacity ${
tools.length > 0 ? 'group-hover:opacity-100 opacity-60' : 'opacity-0'
}`}>
{tools.length > 0 && (isExpanded ? (
<ChevronDown className="w-3 h-3 text-gray-500" />
) : (
<ChevronRight className="w-3 h-3 text-gray-500" />
))}
</div>
<div className="flex items-center gap-2">
<ServerLogo
serverName={serverName}
className="h-4 w-4"
fallback={<ImportIcon className="w-4 h-4 text-blue-600 dark:text-blue-500" />}
/>
))}
<span className="text-sm">{serverName}</span>
</div>
</button>
</div>
{isExpanded && (
<div className="ml-6 mt-0.5 space-y-0.5 border-l border-gray-200 dark:border-gray-700 pl-3">
{tools.map((tool, index) => (
<div key={`tool-${index}`} className="group/tool">
<ListItemWithMenu
name={tool.name}
isSelected={selectedEntity?.type === "tool" && selectedEntity.name === tool.name}
onClick={() => onSelectTool(tool.name)}
selectedRef={selectedEntity?.type === "tool" && selectedEntity.name === tool.name ? selectedRef : undefined}
mcpServerName={serverName}
isMocked={tool.mockTool}
menuContent={
<div className="opacity-0 group-hover/tool:opacity-100 transition-opacity">
<EntityDropdown
name={tool.name}
onDelete={onDeleteTool}
isLocked={tool.isMcp || tool.isLibrary}
/>
</div>
}
/>
</div>
))}
</div>
)}
</div>
@ -220,8 +249,8 @@ type ComposioToolkit = {
export function EntityList({
agents,
tools,
projectTools,
prompts,
workflow,
selectedEntity,
startAgentName,
onSelectAgent,
@ -235,7 +264,9 @@ export function EntityList({
onDeleteAgent,
onDeleteTool,
onDeletePrompt,
onProjectToolsUpdated,
projectId,
projectConfig,
onReorderAgents,
onShowVisualise,
}: EntityListProps & {
@ -243,21 +274,20 @@ export function EntityList({
onReorderAgents: (agents: z.infer<typeof WorkflowAgent>[]) => void
}) {
const [showAgentTypeModal, setShowAgentTypeModal] = useState(false);
const [showToolsModal, setShowToolsModal] = useState(false);
const handleAddAgentWithType = (agentType: 'internal' | 'user_facing') => {
onAddAgent({
outputVisibility: agentType
});
};
// Merge workflow tools with project tools
const mergedTools = [...tools, ...projectTools];
const selectedRef = useRef<HTMLButtonElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [containerHeight, setContainerHeight] = useState<number>(0);
// collect composio tools
const composioTools: Record<string, ComposioToolkit> = {};
for (const tool of mergedTools) {
for (const tool of tools) {
if (tool.isComposio) {
if (!composioTools[tool.composioData?.toolkitSlug || '']) {
composioTools[tool.composioData?.toolkitSlug || ''] = {
@ -496,35 +526,37 @@ export function EntityList({
<Wrench className="w-4 h-4" />
<span>Tools</span>
</div>
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, tools: true }));
onAddTool({});
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Tool"
>
<PlusIcon className="w-4 h-4" />
</Button>
<div className="flex items-center gap-1">
<Button
variant="secondary"
size="sm"
onClick={(e) => {
e.stopPropagation();
setExpandedPanels(prev => ({ ...prev, tools: true }));
setShowToolsModal(true);
}}
className={`group ${buttonClasses}`}
showHoverContent={true}
hoverContent="Add Tool"
>
<PlusIcon className="w-4 h-4" />
</Button>
</div>
</div>
}
>
{expandedPanels.tools && (
<div className="h-full overflow-y-auto">
<div className="p-2">
{mergedTools.length > 0 ? (
{tools.length > 0 ? (
<div className="space-y-1">
{/* Group tools by server */}
{(() => {
// Get custom tools (non-MCP tools)
const customTools = mergedTools.filter(tool => !tool.isMcp && !tool.isComposio);
const customTools = tools.filter(tool => !tool.isMcp && !tool.isComposio);
// Group MCP tools by server
const serverTools = mergedTools.reduce((acc, tool) => {
const serverTools = tools.reduce((acc, tool) => {
if (tool.isMcp && tool.mcpServerName) {
if (!acc[tool.mcpServerName]) {
acc[tool.mcpServerName] = [];
@ -532,21 +564,26 @@ export function EntityList({
acc[tool.mcpServerName].push(tool);
}
return acc;
}, {} as Record<string, typeof mergedTools>);
}, {} as Record<string, typeof tools>);
return (
<>
{/* Show composio cards */}
{Object.values(composioTools).map((card) => (
<ComposioCard
key={card.slug}
card={card}
selectedEntity={selectedEntity}
onSelectTool={handleToolSelection}
onDeleteTool={onDeleteTool}
selectedRef={selectedRef}
/>
))}
{/* Show composio cards - ordered by status */}
{Object.values(composioTools)
.map((card) => (
<ComposioCard
key={card.slug}
card={card}
selectedEntity={selectedEntity}
onSelectTool={handleToolSelection}
onDeleteTool={onDeleteTool}
selectedRef={selectedRef}
projectConfig={projectConfig}
projectId={projectId}
workflow={workflow}
onProjectToolsUpdated={onProjectToolsUpdated}
/>
))}
{/* Show MCP server cards */}
{Object.entries(serverTools).map(([serverName, tools]) => (
@ -564,23 +601,24 @@ export function EntityList({
{/* Show custom tools */}
{customTools.length > 0 && (
<div className="mt-2">
{customTools.map((tool, index) => (
<ListItemWithMenu
key={`custom-tool-${index}`}
name={tool.name}
isSelected={selectedEntity?.type === "tool" && selectedEntity.name === tool.name}
onClick={() => handleToolSelection(tool.name)}
selectedRef={selectedEntity?.type === "tool" && selectedEntity.name === tool.name ? selectedRef : undefined}
icon={<Boxes className="w-4 h-4 text-blue-600/70 dark:text-blue-500/70" />}
menuContent={
<EntityDropdown
name={tool.name}
onDelete={onDeleteTool}
isLocked={tool.isLibrary}
/>
}
{customTools.map((tool, index) => (
<ListItemWithMenu
key={`custom-tool-${index}`}
name={tool.name}
isSelected={selectedEntity?.type === "tool" && selectedEntity.name === tool.name}
onClick={() => handleToolSelection(tool.name)}
selectedRef={selectedEntity?.type === "tool" && selectedEntity.name === tool.name ? selectedRef : undefined}
icon={<Boxes className="w-4 h-4 text-blue-600/70 dark:text-blue-500/70" />}
isMocked={tool.mockTool}
menuContent={
<EntityDropdown
name={tool.name}
onDelete={onDeleteTool}
isLocked={tool.isLibrary}
/>
))}
}
/>
))}
</div>
)}
</>
@ -682,6 +720,13 @@ export function EntityList({
onClose={() => setShowAgentTypeModal(false)}
onConfirm={handleAddAgentWithType}
/>
<ToolsModal
isOpen={showToolsModal}
onClose={() => setShowToolsModal(false)}
projectId={projectId}
tools={tools}
onAddTool={onAddTool}
/>
</div>
);
}
@ -769,6 +814,10 @@ interface ComposioCardProps {
onSelectTool: (name: string) => void;
onDeleteTool: (name: string) => void;
selectedRef: React.RefObject<HTMLButtonElement | null>;
projectConfig?: z.infer<typeof Project>;
projectId: string;
workflow: z.infer<typeof Workflow>;
onProjectToolsUpdated?: () => void;
}
const ComposioCard = ({
@ -777,70 +826,215 @@ const ComposioCard = ({
onSelectTool,
onDeleteTool,
selectedRef,
projectConfig,
projectId,
workflow,
onProjectToolsUpdated,
}: ComposioCardProps) => {
const [isExpanded, setIsExpanded] = useState(false);
const [showAuthModal, setShowAuthModal] = useState(false);
const [showDisconnectModal, setShowDisconnectModal] = useState(false);
const [isProcessingAuth, setIsProcessingAuth] = useState(false);
// Check if the toolkit requires authentication
const hasToolkitWithAuth = card.tools.some(tool => tool.composioData && !tool.composioData.noAuth);
// Check if toolkit is connected
const isToolkitConnected = !hasToolkitWithAuth || projectConfig?.composioConnectedAccounts?.[card.slug]?.status === 'ACTIVE';
const handleConnect = () => {
setShowAuthModal(true);
};
const handleDisconnect = () => {
setShowDisconnectModal(true);
};
const handleConfirmDisconnect = async () => {
const connectedAccountId = projectConfig?.composioConnectedAccounts?.[card.slug]?.id;
setIsProcessingAuth(true);
try {
if (connectedAccountId) {
await deleteConnectedAccount(projectId, card.slug, connectedAccountId);
onProjectToolsUpdated?.();
}
} catch (err: any) {
console.error('Disconnect failed:', err);
} finally {
setIsProcessingAuth(false);
setShowDisconnectModal(false);
}
};
const handleAuthComplete = () => {
setShowAuthModal(false);
onProjectToolsUpdated?.();
};
return (
<div className="mb-2">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="w-full flex items-center gap-2 px-2 py-1.5 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md text-sm text-left"
>
{isExpanded ? (
<ChevronDown className="w-4 h-4 text-gray-500" />
) : (
<ChevronRight className="w-4 h-4 text-gray-500" />
)}
<div className="flex items-center gap-1">
{card.logo ? (
<div className="relative w-4 h-4">
<PictureImg
src={card.logo}
alt={`${card.name} logo`}
className="w-full h-full object-contain rounded"
/>
<>
<div className="mb-1 group">
<div className="flex items-center gap-2 px-2 py-1 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-md transition-colors">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="flex-1 flex items-center gap-2 text-sm text-left min-h-[28px]"
>
{/* Chevron - only show on hover or when has tools */}
<div className={`w-4 h-4 flex items-center justify-center transition-opacity ${
card.tools.length > 0 ? 'group-hover:opacity-100 opacity-60' : 'opacity-0'
}`}>
{card.tools.length > 0 && (isExpanded ? (
<ChevronDown className="w-3 h-3 text-gray-500" />
) : (
<ChevronRight className="w-3 h-3 text-gray-500" />
))}
</div>
) : (
<ImportIcon className="w-4 h-4 text-blue-600 dark:text-blue-500" />
<div className="flex items-center gap-2">
{card.logo ? (
<div className="relative w-4 h-4">
<PictureImg
src={card.logo}
alt={`${card.name} logo`}
className="w-full h-full object-contain rounded"
/>
</div>
) : (
<ImportIcon className="w-4 h-4 text-blue-600 dark:text-blue-500" />
)}
<span className="text-sm">{card.name}</span>
</div>
</button>
{/* Status Badge - only show orange when requires auth and not connected */}
{hasToolkitWithAuth && !isToolkitConnected && (
<Tooltip
content="Disconnected"
size="sm"
delay={500}
>
<div className="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center text-xs font-medium text-white">
○
</div>
</Tooltip>
)}
{/* Actions Dropdown - only show when requires auth */}
{hasToolkitWithAuth && (
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
<Dropdown>
<DropdownTrigger>
<button className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors">
<MoreVertical className="h-3 w-3 text-gray-500" />
</button>
</DropdownTrigger>
<DropdownMenu
onAction={(key) => {
switch (key) {
case 'connect':
handleConnect();
break;
case 'disconnect':
handleDisconnect();
break;
}
}}
disabledKeys={[
...(isProcessingAuth ? ['connect', 'disconnect'] : []),
...(hasToolkitWithAuth && isToolkitConnected ? [] : ['disconnect']),
...(hasToolkitWithAuth && !isToolkitConnected ? [] : ['connect'])
]}
>
<DropdownItem
key="disconnect"
startContent={
isProcessingAuth ? (
<div className="animate-spin rounded-full h-3 w-3 border-b-2 border-gray-600"></div>
) : (
<UnlinkIcon className="h-3 w-3" />
)
}
>
{isProcessingAuth ? 'Disconnecting...' : 'Disconnect'}
</DropdownItem>
<DropdownItem
key="connect"
startContent={
isProcessingAuth ? (
<div className="animate-spin rounded-full h-3 w-3 border-b-2 border-gray-600"></div>
) : (
<LinkIcon className="h-3 w-3" />
)
}
>
{isProcessingAuth ? 'Connecting...' : 'Connect'}
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
)}
<span>{card.name}</span>
</div>
</button>
{isExpanded && (
<div className="ml-6 mt-1 space-y-1">
<div className="ml-6 mt-0.5 space-y-0.5 border-l border-gray-200 dark:border-gray-700 pl-3">
{card.tools.map((tool, index) => (
<ListItemWithMenu
key={`composio-tool-${index}`}
name={tool.name}
isSelected={selectedEntity?.type === "tool" && selectedEntity.name === tool.name}
onClick={() => onSelectTool(tool.name)}
disabled={tool.isLibrary}
selectedRef={selectedEntity?.type === "tool" && selectedEntity.name === tool.name ? selectedRef : undefined}
icon={
card.logo ? (
<div className="relative w-4 h-4">
<PictureImg
src={card.logo}
alt={`${card.name} logo`}
className="w-full h-full object-contain rounded"
<div key={`composio-tool-${index}`} className="group/tool">
<ListItemWithMenu
name={tool.name}
isSelected={selectedEntity?.type === "tool" && selectedEntity.name === tool.name}
onClick={() => onSelectTool(tool.name)}
disabled={tool.isLibrary}
selectedRef={selectedEntity?.type === "tool" && selectedEntity.name === tool.name ? selectedRef : undefined}
icon={
<div className="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600"></div>
}
isMocked={tool.mockTool}
menuContent={
<div className="opacity-0 group-hover/tool:opacity-100 transition-opacity">
<EntityDropdown
name={tool.name}
onDelete={onDeleteTool}
isLocked={tool.isComposio}
/>
</div>
) : (
<ImportIcon className="w-4 h-4 text-blue-600 dark:text-blue-500" />
)
}
menuContent={
<EntityDropdown
name={tool.name}
onDelete={onDeleteTool}
isLocked={tool.isComposio}
/>
}
/>
}
/>
</div>
))}
</div>
)}
</div>
</div>
{/* Auth Modal */}
{hasToolkitWithAuth && (
<ToolkitAuthModal
key={card.slug}
isOpen={showAuthModal}
onClose={() => setShowAuthModal(false)}
toolkitSlug={card.slug}
projectId={projectId}
onComplete={handleAuthComplete}
/>
)}
{/* Disconnect Confirmation Modal */}
<ProjectWideChangeConfirmationModal
isOpen={showDisconnectModal}
onClose={() => setShowDisconnectModal(false)}
onConfirm={handleConfirmDisconnect}
title={`Disconnect ${card.name}`}
confirmationQuestion={`Are you sure you want to disconnect the ${card.name} toolkit?`}
confirmButtonText="Disconnect"
isLoading={isProcessingAuth}
/>
</>
);
};

151
apps/rowboat/app/projects/[projectId]/workflow/mcp_imports.tsx Normal file
View file

@ -0,0 +1,151 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { Button, Spinner, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Checkbox } from "@heroui/react";
import { z } from "zod";
import { WorkflowTool } from "@/app/lib/types/workflow_types";
import { RefreshCwIcon } from "lucide-react";
import { fetchMcpTools } from "@/app/actions/mcp_actions";
interface McpImportToolsProps {
projectId: string;
isOpen: boolean;
onOpenChange: (open: boolean) => void;
onImport: (tools: z.infer<typeof WorkflowTool>[]) => void;
}
export function McpImportTools({ projectId, isOpen, onOpenChange, onImport }: McpImportToolsProps) {
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [tools, setTools] = useState<z.infer<typeof WorkflowTool>[]>([]);
const [selectedTools, setSelectedTools] = useState<Set<number>>(new Set());
const process = useCallback(async () => {
setLoading(true);
setError(null);
setSelectedTools(new Set());
try {
const result = await fetchMcpTools(projectId);
setTools(result);
// Select all tools by default
setSelectedTools(new Set(result.map((_, index) => index)));
} catch (error) {
setError(`Unable to fetch tools: ${error}`);
} finally {
setLoading(false);
}
}, [projectId]);
useEffect(() => {
console.log("mcp import tools useEffect", isOpen);
if (isOpen) {
process();
}
}, [isOpen, process]);
return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange} size="xl">
<ModalContent>
{(onClose) => (
<>
<ModalHeader>Import from MCP servers</ModalHeader>
<ModalBody>
{loading && <div className="flex gap-2 items-center">
<Spinner size="sm" />
Fetching tools...
</div>}
{error && <div className="bg-red-100 p-2 rounded-md text-red-800 flex items-center gap-2 text-sm">
{error}
<Button size="sm" color="danger" onPress={() => process()}>Retry</Button>
</div>}
{!loading && !error && <>
<div className="flex items-center justify-between mb-4">
<div className="text-gray-600">
{tools.length === 0 ? "No tools found" : `Found ${tools.length} tools:`}
</div>
<Button
size="sm"
variant="flat"
onPress={() => {
setTools([]);
process();
}}
startContent={<RefreshCwIcon className="w-4 h-4" />}
>
Refresh
</Button>
</div>
{tools.length > 0 && <div className="flex flex-col w-full mt-4">
<div className="flex items-center gap-4 px-4 py-2 bg-gray-50 rounded-t-lg border-b text-sm text-gray-700 font-medium">
<div className="w-8">
<Checkbox
size="sm"
isSelected={selectedTools.size === tools.length}
isIndeterminate={selectedTools.size > 0 && selectedTools.size < tools.length}
onValueChange={(checked) => {
if (checked) {
setSelectedTools(new Set(tools.map((_, i) => i)));
} else {
setSelectedTools(new Set());
}
}}
/>
</div>
<div className="w-36">Server</div>
<div className="flex-1">Tool Name</div>
</div>
<div className="border rounded-b-lg divide-y overflow-y-auto max-h-[300px]">
{tools.map((t, index) => (
<div
key={index}
className="flex items-center gap-4 px-4 py-2 hover:bg-gray-50 transition-colors"
>
<div className="w-8">
<Checkbox
size="sm"
isSelected={selectedTools.has(index)}
onValueChange={(checked) => {
const newSelected = new Set(selectedTools);
if (checked) {
newSelected.add(index);
} else {
newSelected.delete(index);
}
setSelectedTools(newSelected);
}}
/>
</div>
<div className="w-36">
<div className="bg-blue-50 px-2 py-1 rounded text-blue-700 text-sm font-medium border border-blue-100">
{t.mcpServerName}
</div>
</div>
<div className="flex-1 truncate text-gray-700">{t.name}</div>
</div>
))}
</div>
</div>}
{tools.length > 0 && (
<div className="mt-4 text-sm text-gray-600">
{selectedTools.size} of {tools.length} tools selected
</div>
)}
</>}
</ModalBody>
<ModalFooter>
<Button size="sm" variant="flat" onPress={onClose}>
Cancel
</Button>
{tools.length > 0 && <Button size="sm" onPress={() => {
const selectedToolsList = tools.filter((_, index) => selectedTools.has(index));
onImport(selectedToolsList);
onClose();
}}>
Import
</Button>}
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
);
}

21
apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
View file

@ -3,6 +3,7 @@ import React, { useReducer, Reducer, useState, useCallback, useEffect, useRef, c
import { MCPServer, Message, WithStringId } from "../../../lib/types/types";
import { Workflow, WorkflowTool, WorkflowPrompt, WorkflowAgent } from "../../../lib/types/workflow_types";
import { DataSource } from "../../../lib/types/datasource_types";
import { Project } from "../../../lib/types/project_types";
import { produce, applyPatches, enablePatches, produceWithPatches, Patch } from 'immer';
import { AgentConfig } from "../entities/agent_config";
import { ToolConfig } from "../entities/tool_config";
@ -315,7 +316,6 @@ function reducer(state: State, action: Action): State {
required: []
},
mockTool: true,
autoSubmitMockedResponse: true,
...action.tool
});
draft.selection = {
@ -576,26 +576,26 @@ export function WorkflowEditor({
workflow,
useRag,
mcpServerUrls,
toolWebhookUrl,
defaultModel,
projectTools,
projectConfig,
eligibleModels,
isLive,
onChangeMode,
onRevertToLive,
onProjectToolsUpdated,
}: {
projectId: string;
dataSources: WithStringId<z.infer<typeof DataSource>>[];
workflow: z.infer<typeof Workflow>;
useRag: boolean;
mcpServerUrls: Array<z.infer<typeof MCPServer>>;
toolWebhookUrl: string;
defaultModel: string;
projectTools: z.infer<typeof WorkflowTool>[];
projectConfig: z.infer<typeof Project>;
eligibleModels: z.infer<typeof ModelsResponse> | "*";
isLive: boolean;
onChangeMode: (mode: 'draft' | 'live') => void;
onRevertToLive: () => void;
onProjectToolsUpdated?: () => void;
}) {
const [state, dispatch] = useReducer(reducer, {
@ -615,6 +615,7 @@ export function WorkflowEditor({
isLive,
}
});
const [chatMessages, setChatMessages] = useState<z.infer<typeof Message>[]>([]);
const updateChatMessages = useCallback((messages: z.infer<typeof Message>[]) => {
setChatMessages(messages);
@ -978,8 +979,8 @@ export function WorkflowEditor({
<EntityList
agents={state.present.workflow.agents}
tools={state.present.workflow.tools}
projectTools={projectTools}
prompts={state.present.workflow.prompts}
workflow={state.present.workflow}
selectedEntity={
state.present.selection &&
(state.present.selection.type === "agent" ||
@ -1002,6 +1003,8 @@ export function WorkflowEditor({
onDeletePrompt={handleDeletePrompt}
onShowVisualise={handleShowVisualise}
projectId={projectId}
onProjectToolsUpdated={onProjectToolsUpdated}
projectConfig={projectConfig}
onReorderAgents={handleReorderAgents}
/>
</div>
@ -1019,10 +1022,8 @@ export function WorkflowEditor({
workflow={state.present.workflow}
messageSubscriber={updateChatMessages}
mcpServerUrls={mcpServerUrls}
toolWebhookUrl={toolWebhookUrl}
isInitialState={isInitialState}
onPanelClick={handlePlaygroundClick}
projectTools={projectTools}
triggerCopilotChat={triggerCopilotChat}
/>
{state.present.selection?.type === "agent" && <AgentConfig
@ -1033,7 +1034,6 @@ export function WorkflowEditor({
usedAgentNames={new Set(state.present.workflow.agents.filter((agent) => agent.name !== state.present.selection!.name).map((agent) => agent.name))}
agents={state.present.workflow.agents}
tools={state.present.workflow.tools}
projectTools={projectTools}
prompts={state.present.workflow.prompts}
dataSources={dataSources}
handleUpdate={handleUpdateAgent.bind(null, state.present.selection.name)}
@ -1045,15 +1045,12 @@ export function WorkflowEditor({
{state.present.selection?.type === "tool" && (() => {
const selectedTool = state.present.workflow.tools.find(
(tool) => tool.name === state.present.selection!.name
) || projectTools.find(
(tool) => tool.name === state.present.selection!.name
);
return <ToolConfig
key={state.present.selection.name}
tool={selectedTool!}
usedToolNames={new Set([
...state.present.workflow.tools.filter((tool) => tool.name !== state.present.selection!.name).map((tool) => tool.name),
...projectTools.filter((tool) => tool.name !== state.present.selection!.name).map((tool) => tool.name)
])}
handleUpdate={handleUpdateTool.bind(null, state.present.selection.name)}
handleClose={handleUnselectTool}

19
apps/rowboat/app/projects/layout/components/sidebar.tsx
View file

@ -14,8 +14,7 @@ import {
ChevronRightIcon,
Moon,
Sun,
HelpCircle,
Wrench
HelpCircle
} from "lucide-react";
import { getProjectConfig } from "@/app/actions/project_actions";
import { useTheme } from "@/app/providers/theme-provider";
@ -69,13 +68,6 @@ export default function Sidebar({ projectId, useRag, useAuth, collapsed = false,
icon: DatabaseIcon,
requiresProject: true
}] : []),
{
href: 'tools',
label: 'Tools',
icon: Wrench,
requiresProject: true,
beta: true
},
{
href: 'config',
label: 'Settings',
@ -162,14 +154,7 @@ export default function Sidebar({ projectId, useRag, useAuth, collapsed = false,
`}
/>
{!collapsed && (
<>
<span>{item.label}</span>
{item.beta && (
<span className="ml-1.5 leading-none px-1.5 py-[2px] text-[9px] font-medium bg-linear-to-r from-pink-500 to-violet-500 text-white rounded-full">
BETA
</span>
)}
</>
<span>{item.label}</span>
)}
</Link>
</Tooltip>

76
apps/rowboat/components/common/project-wide-change-confirmation-modal.tsx Normal file
View file

@ -0,0 +1,76 @@
'use client';
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from "@heroui/react";
import { AlertTriangle } from "lucide-react";
export interface ProjectWideChangeConfirmationModalProps {
isOpen: boolean;
onClose: () => void;
onConfirm: () => void;
title: string;
confirmationQuestion: string;
confirmButtonText?: string;
isLoading?: boolean;
disabled?: boolean;
}
export function ProjectWideChangeConfirmationModal({
isOpen,
onClose,
onConfirm,
title,
confirmationQuestion,
confirmButtonText = "Confirm",
isLoading = false,
disabled = false,
}: ProjectWideChangeConfirmationModalProps) {
return (
<Modal isOpen={isOpen} onClose={onClose} size="md">
<ModalContent>
<ModalHeader>
<div className="flex items-center gap-2">
<AlertTriangle className="w-5 h-5 text-orange-600" />
<span>{title}</span>
</div>
</ModalHeader>
<ModalBody>
<div className="space-y-4">
<p className="text-sm text-gray-600 dark:text-gray-400">
{confirmationQuestion}
</p>
<div className="bg-orange-50 dark:bg-orange-950/30 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
<div className="flex items-start gap-3">
<div className="w-5 h-5 rounded-full bg-orange-500 flex items-center justify-center text-xs font-medium text-white mt-0.5">
⚠️
</div>
<div className="text-sm">
<p className="font-medium text-orange-800 dark:text-orange-200 mb-1">
This change will affect the deployed (Live) workflow as well!
</p>
</div>
</div>
</div>
</div>
</ModalBody>
<ModalFooter>
<Button
variant="light"
onPress={onClose}
disabled={isLoading}
>
Cancel
</Button>
<Button
color="primary"
onPress={onConfirm}
disabled={disabled || isLoading}
isLoading={isLoading}
>
{confirmButtonText}
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
}

57
apps/rowboat/package-lock.json generated
View file

@ -43,7 +43,7 @@
"ioredis": "^5.6.1",
"jose": "^5.9.6",
"lucide-react": "^0.465.0",
"mermaid": "^11.8.1",
"mermaid": "^11.9.0",
"mongodb": "^6.8.0",
"next": "15.3.4",
"openai": "^4.67.2",
@ -1396,7 +1396,6 @@
"version": "11.0.3",
"resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz",
"integrity": "sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==",
"license": "Apache-2.0",
"dependencies": {
"@chevrotain/gast": "11.0.3",
"@chevrotain/types": "11.0.3",
@ -1407,7 +1406,6 @@
"version": "11.0.3",
"resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.0.3.tgz",
"integrity": "sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==",
"license": "Apache-2.0",
"dependencies": {
"@chevrotain/types": "11.0.3",
"lodash-es": "4.17.21"
@ -1416,20 +1414,17 @@
"node_modules/@chevrotain/regexp-to-ast": {
"version": "11.0.3",
"resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.0.3.tgz",
"integrity": "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==",
"license": "Apache-2.0"
"integrity": "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA=="
},
"node_modules/@chevrotain/types": {
"version": "11.0.3",
"resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.0.3.tgz",
"integrity": "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==",
"license": "Apache-2.0"
"integrity": "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ=="
},
"node_modules/@chevrotain/utils": {
"version": "11.0.3",
"resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz",
"integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==",
"license": "Apache-2.0"
"integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ=="
},
"node_modules/@composio/client": {
"version": "0.1.0-alpha.26",
@ -4582,10 +4577,9 @@
}
},
"node_modules/@mermaid-js/parser": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-0.6.1.tgz",
"integrity": "sha512-lCQNpV8R4lgsGcjX5667UiuDLk2micCtjtxR1YKbBXvN5w2v+FeLYoHrTSSrjwXdMcDYvE4ZBPvKT31dfeSmmA==",
"license": "MIT",
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-0.6.2.tgz",
"integrity": "sha512-+PO02uGF6L6Cs0Bw8RpGhikVvMWEysfAyl27qTlroUB8jSWr1lL0Sf6zi78ZxlSnmgSY2AMMKVgghnN9jTtwkQ==",
"dependencies": {
"langium": "3.3.1"
}
@ -9222,7 +9216,6 @@
"version": "11.0.3",
"resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
"integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
"license": "Apache-2.0",
"dependencies": {
"@chevrotain/cst-dts-gen": "11.0.3",
"@chevrotain/gast": "11.0.3",
@ -9236,7 +9229,6 @@
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/chevrotain-allstar/-/chevrotain-allstar-0.3.1.tgz",
"integrity": "sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==",
"license": "MIT",
"dependencies": {
"lodash-es": "^4.17.21"
},
@ -12928,7 +12920,6 @@
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/langium/-/langium-3.3.1.tgz",
"integrity": "sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==",
"license": "MIT",
"dependencies": {
"chevrotain": "~11.0.3",
"chevrotain-allstar": "~0.3.0",
@ -13440,15 +13431,14 @@
}
},
"node_modules/marked": {
"version": "15.0.12",
"resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
"integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
"license": "MIT",
"version": "16.1.0",
"resolved": "https://registry.npmjs.org/marked/-/marked-16.1.0.tgz",
"integrity": "sha512-Me7BNa1aqrxVinDnFfvCgHh2yHvLbFvILBs899MhuBpbE5VPzpSqv7alaESfkqkgc9JNvUGH4gqwZeOzLnY8Jg==",
"bin": {
"marked": "bin/marked.js"
},
"engines": {
"node": ">= 18"
"node": ">= 20"
}
},
"node_modules/math-intrinsics": {
@ -13781,14 +13771,13 @@
}
},
"node_modules/mermaid": {
"version": "11.8.1",
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.8.1.tgz",
"integrity": "sha512-VSXJLqP1Sqw5sGr273mhvpPRhXwE6NlmMSqBZQw+yZJoAJkOIPPn/uT3teeCBx60Fkt5zEI3FrH2eVT0jXRDzw==",
"license": "MIT",
"version": "11.9.0",
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.9.0.tgz",
"integrity": "sha512-YdPXn9slEwO0omQfQIsW6vS84weVQftIyyTGAZCwM//MGhPzL1+l6vO6bkf0wnP4tHigH1alZ5Ooy3HXI2gOag==",
"dependencies": {
"@braintree/sanitize-url": "^7.0.4",
"@iconify/utils": "^2.1.33",
"@mermaid-js/parser": "^0.6.1",
"@mermaid-js/parser": "^0.6.2",
"@types/d3": "^7.4.3",
"cytoscape": "^3.29.3",
"cytoscape-cose-bilkent": "^4.1.0",
@ -13798,10 +13787,10 @@
"dagre-d3-es": "7.0.11",
"dayjs": "^1.11.13",
"dompurify": "^3.2.5",
"katex": "^0.16.9",
"katex": "^0.16.22",
"khroma": "^2.1.0",
"lodash-es": "^4.17.21",
"marked": "^15.0.7",
"marked": "^16.0.0",
"roughjs": "^4.6.6",
"stylis": "^4.3.6",
"ts-dedent": "^2.2.0",
@ -17797,7 +17786,6 @@
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
"integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
"license": "MIT",
"engines": {
"node": ">=14.0.0"
}
@ -17806,7 +17794,6 @@
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz",
"integrity": "sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==",
"license": "MIT",
"dependencies": {
"vscode-languageserver-protocol": "3.17.5"
},
@ -17818,7 +17805,6 @@
"version": "3.17.5",
"resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
"integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
"license": "MIT",
"dependencies": {
"vscode-jsonrpc": "8.2.0",
"vscode-languageserver-types": "3.17.5"
@ -17827,20 +17813,17 @@
"node_modules/vscode-languageserver-textdocument": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
"integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
"license": "MIT"
"integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA=="
},
"node_modules/vscode-languageserver-types": {
"version": "3.17.5",
"resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
"integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
"license": "MIT"
"integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg=="
},
"node_modules/vscode-uri": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
"integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
"license": "MIT"
"integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw=="
},
"node_modules/web-streams-polyfill": {
"version": "4.0.0-beta.3",

2
apps/rowboat/package.json
View file

@ -50,7 +50,7 @@
"ioredis": "^5.6.1",
"jose": "^5.9.6",
"lucide-react": "^0.465.0",
"mermaid": "^11.8.1",
"mermaid": "^11.9.0",
"mongodb": "^6.8.0",
"next": "15.3.4",
"openai": "^4.67.2",