From 4db69aea24223b05f66b35bb72b3d48d74dd873b Mon Sep 17 00:00:00 2001
From: ramnique <30795890+ramnique@users.noreply.github.com>
Date: Wed, 22 Jan 2025 21:31:37 +0530
Subject: [PATCH] autosubmit mocked tool responses in editor

---
 apps/rowboat/app/lib/types.ts                 |  4 +-
 apps/rowboat/app/lib/utils.ts                 |  1 +
 .../[projectId]/playground/messages.tsx       | 52 ++++++++++++-------
 .../[projectId]/workflow/tool_config.tsx      | 12 +++++
 .../[projectId]/workflow/workflow_editor.tsx  |  1 +
 5 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/apps/rowboat/app/lib/types.ts b/apps/rowboat/app/lib/types.ts
index c24f1378..f7f11043 100644
--- a/apps/rowboat/app/lib/types.ts
+++ b/apps/rowboat/app/lib/types.ts
@@ -186,6 +186,7 @@ export const WorkflowTool = z.object({
     name: z.string(),
     description: z.string(),
     mockInPlayground: z.boolean().default(false).optional(),
+    autoSubmitMockedResponse: z.boolean().default(false).optional(),
     parameters: z.object({
         type: z.literal('object'),
         properties: z.record(z.object({
@@ -216,6 +217,7 @@ export const AgenticAPIPrompt = WorkflowPrompt;
 
 export const AgenticAPITool = WorkflowTool.omit({
     mockInPlayground: true,
+    autoSubmitMockedResponse: true,
 });
 
 export const Workflow = z.object({
@@ -433,7 +435,7 @@ export function convertWorkflowToAgenticAPI(workflow: z.infer<typeof Workflow>):
                 controlType: agent.controlType,
             })),
         tools: workflow.tools.map(tool => {
-            const { mockInPlayground, ...rest } = tool;
+            const { mockInPlayground, autoSubmitMockedResponse, ...rest } = tool;
             return {
                 ...rest,
             };
diff --git a/apps/rowboat/app/lib/utils.ts b/apps/rowboat/app/lib/utils.ts
index 62930f82..3b327793 100644
--- a/apps/rowboat/app/lib/utils.ts
+++ b/apps/rowboat/app/lib/utils.ts
@@ -177,6 +177,7 @@ export async function getAgenticApiResponse(
     rawAPIResponse: unknown,
 }> {
     // call agentic api
+    console.log(`agentic request`, JSON.stringify(request, null, 2));
     const response = await fetch(process.env.AGENTIC_API_URL + '/chat', {
         method: 'POST',
         body: JSON.stringify(request),
diff --git a/apps/rowboat/app/projects/[projectId]/playground/messages.tsx b/apps/rowboat/app/projects/[projectId]/playground/messages.tsx
index 58a49eaa..f91415ec 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/messages.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/messages.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { Button, Spinner, Textarea } from "@nextui-org/react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import z from "zod";
 import { GetInformationToolResult, WebpageCrawlResponse, Workflow, WorkflowTool } from "@/app/lib/types";
 import { executeClientTool, getInformationTool, scrapeWebpage, suggestToolResponse } from "@/app/actions";
@@ -201,6 +201,7 @@ function ToolCall({
                 projectId={projectId}
                 messages={messages}
                 sender={sender}
+                autoSubmit={matchingWorkflowTool?.autoSubmitMockedResponse}
             />;
     }
 }
@@ -504,6 +505,7 @@ function MockToolCall({
     projectId,
     messages,
     sender,
+    autoSubmit = false,
 }: {
     toolCall: z.infer<typeof apiV1.AssistantMessageWithToolCalls>['tool_calls'][number];
     result: z.infer<typeof apiV1.ToolMessage> | undefined;
@@ -511,11 +513,30 @@ function MockToolCall({
     projectId: string;
     messages: z.infer<typeof apiV1.ChatMessage>[];
     sender: string | null | undefined;
+    autoSubmit?: boolean;
 }) {
     const [result, setResult] = useState<z.infer<typeof apiV1.ToolMessage> | undefined>(availableResult);
     const [response, setResponse] = useState('');
     const [generatingResponse, setGeneratingResponse] = useState(false);
 
+    const handleSubmit = useCallback(() => {
+        let parsed;
+        try {
+            parsed = JSON.parse(response);
+        } catch (e) {
+            alert('Invalid JSON');
+            return;
+        }
+        const result: z.infer<typeof apiV1.ToolMessage> = {
+            role: 'tool',
+            tool_call_id: toolCall.id,
+            tool_name: toolCall.function.name,
+            content: JSON.stringify(parsed),
+        };
+        setResult(result);
+        handleResult(result);
+    }, [toolCall.id, toolCall.function.name, handleResult, response]);
+
     useEffect(() => {
         if (result) {
             return;
@@ -549,23 +570,18 @@ function MockToolCall({
         };
     }, [result, response, toolCall.id, projectId, messages]);
 
-    function handleSubmit() {
-        let parsed;
-        try {
-            parsed = JSON.parse(response);
-        } catch (e) {
-            alert('Invalid JSON');
+    // auto submit if autoSubmitMockedResponse is true
+    useEffect(() => {
+        if (!autoSubmit) {
             return;
         }
-        const result: z.infer<typeof apiV1.ToolMessage> = {
-            role: 'tool',
-            tool_call_id: toolCall.id,
-            tool_name: toolCall.function.name,
-            content: JSON.stringify(parsed),
-        };
-        setResult(result);
-        handleResult(result);
-    }
+        if (result) {
+            return;
+        }
+        if (response) {
+            handleSubmit();
+        }
+    }, [autoSubmit, response, handleSubmit, result]);
 
     return <div className="flex flex-col gap-1">
         {sender && <div className='text-gray-500 text-sm ml-3'>{sender}</div>}
@@ -702,8 +718,8 @@ export function Messages({
 
     return <div className="grow pt-4 overflow-auto">
         <div className="max-w-[768px] mx-auto flex flex-col gap-8">
-            <SystemMessage 
-                content={systemMessage || ''} 
+            <SystemMessage
+                content={systemMessage || ''}
                 onChange={onSystemMessageChange}
                 locked={systemMessageLocked}
             />
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/tool_config.tsx b/apps/rowboat/app/projects/[projectId]/workflow/tool_config.tsx
index 1fd05685..ea53395d 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/tool_config.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/tool_config.tsx
@@ -226,6 +226,7 @@ export function ToolConfig({
                 <Divider />
 
                 <Checkbox
+                    key="mockInPlayground"
                     size="sm"
                     isSelected={tool.mockInPlayground ?? false}
                     onValueChange={(value) => handleUpdate({
@@ -235,6 +236,17 @@ export function ToolConfig({
                 >
                     Mock tool in Playground
                 </Checkbox>
+                {tool.mockInPlayground && <Checkbox
+                    key="autoSubmitMockedResponse"
+                    size="sm"
+                    isSelected={tool.autoSubmitMockedResponse ?? false}
+                    onValueChange={(value) => handleUpdate({
+                        ...tool,
+                        autoSubmitMockedResponse: value
+                    })}
+                >
+                    Auto-submit mocked response
+                </Checkbox>}
 
                 <Divider />
 
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
index ace74661..465043fc 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/workflow_editor.tsx
@@ -273,6 +273,7 @@ function reducer(state: State, action: Action): State {
                                 description: "",
                                 parameters: undefined,
                                 mockInPlayground: true,
+                                autoSubmitMockedResponse: true,
                                 ...action.tool
                             });
                             draft.selection = {