From 3ea08895b89386f60bc1a9915945aad3c82030d8 Mon Sep 17 00:00:00 2001
From: ramnique <30795890+ramnique@users.noreply.github.com>
Date: Fri, 7 Mar 2025 01:23:13 +0530
Subject: [PATCH] Autorun chat in playground to show greeting

---
 apps/rowboat/app/lib/types/workflow_types.ts  |  1 +
 .../projects/[projectId]/playground/app.tsx   |  8 +++
 .../projects/[projectId]/playground/chat.tsx  | 30 ++++++------
 .../[projectId]/playground/messages.tsx       | 49 +++++++++----------
 4 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/apps/rowboat/app/lib/types/workflow_types.ts b/apps/rowboat/app/lib/types/workflow_types.ts
index 160fc645..5d9599d8 100644
--- a/apps/rowboat/app/lib/types/workflow_types.ts
+++ b/apps/rowboat/app/lib/types/workflow_types.ts
@@ -27,6 +27,7 @@ export const WorkflowPrompt = z.object({
     type: z.union([
         z.literal('base_prompt'),
         z.literal('style_prompt'),
+        z.literal('greeting'),
     ]),
     prompt: z.string(),
 });
diff --git a/apps/rowboat/app/projects/[projectId]/playground/app.tsx b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
index 2b6db148..17d304d4 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
@@ -25,6 +25,7 @@ export function App({
 }) {
     const [counter, setCounter] = useState<number>(0);
     const [testProfile, setTestProfile] = useState<z.infer<typeof TestProfile> | null>(null);
+    const [systemMessage, setSystemMessage] = useState<string>(defaultSystemMessage);
     const [chat, setChat] = useState<z.infer<typeof PlaygroundChat>>({
         projectId,
         createdAt: new Date().toISOString(),
@@ -33,6 +34,11 @@ export function App({
         systemMessage: defaultSystemMessage,
     });
 
+    function handleSystemMessageChange(message: string) {
+        setSystemMessage(message);
+        setCounter(counter + 1);
+    }
+
     function handleTestProfileChange(profile: WithStringId<z.infer<typeof TestProfile>> | null) {
         setTestProfile(profile);
         setCounter(counter + 1);
@@ -105,6 +111,8 @@ export function App({
                     testProfile={testProfile}
                     messageSubscriber={messageSubscriber}
                     onTestProfileChange={handleTestProfileChange}
+                    systemMessage={systemMessage}
+                    onSystemMessageChange={handleSystemMessageChange}
                 />
             </div>
         </Pane>
diff --git a/apps/rowboat/app/projects/[projectId]/playground/chat.tsx b/apps/rowboat/app/projects/[projectId]/playground/chat.tsx
index 8eadcd3a..01c3b5ef 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/chat.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/chat.tsx
@@ -24,6 +24,8 @@ export function Chat({
     messageSubscriber,
     testProfile=null,
     onTestProfileChange,
+    systemMessage,
+    onSystemMessageChange,
 }: {
     chat: z.infer<typeof PlaygroundChat>;
     projectId: string;
@@ -31,6 +33,8 @@ export function Chat({
     messageSubscriber?: (messages: z.infer<typeof apiV1.ChatMessage>[]) => void;
     testProfile?: z.infer<typeof TestProfile> | null;
     onTestProfileChange: (profile: WithStringId<z.infer<typeof TestProfile>> | null) => void;
+    systemMessage: string;
+    onSystemMessageChange: (message: string) => void;
 }) {
     const [messages, setMessages] = useState<z.infer<typeof apiV1.ChatMessage>[]>(chat.messages);
     const [loadingAssistantResponse, setLoadingAssistantResponse] = useState<boolean>(false);
@@ -42,7 +46,6 @@ export function Chat({
     const [fetchResponseError, setFetchResponseError] = useState<string | null>(null);
     const [lastAgenticRequest, setLastAgenticRequest] = useState<unknown | null>(null);
     const [lastAgenticResponse, setLastAgenticResponse] = useState<unknown | null>(null);
-    const [systemMessage, setSystemMessage] = useState<string | undefined>(testProfile?.context);
     const [isProfileSelectorOpen, setIsProfileSelectorOpen] = useState(false);
 
     // collect published tool call results
@@ -142,18 +145,17 @@ export function Chat({
             }
         }
 
-        // if no messages, return
-        if (messages.length === 0) {
-            return;
-        }
-
         // if last message is not from role user
         // or tool, return
-        const last = messages[messages.length - 1];
-        if (fetchResponseError) {
-            return;
+        if (messages.length > 0) {
+            const last = messages[messages.length - 1];
+            if (last.role !== 'user' && last.role !== 'tool') {
+                return;
+            }
         }
-        if (last.role !== 'user' && last.role !== 'tool') {
+
+        // if there is an error, return
+        if (fetchResponseError) {
             return;
         }
 
@@ -274,10 +276,6 @@ export function Chat({
         navigator.clipboard.writeText(jsonString);
     }
 
-    function handleSystemMessageChange(message: string) {
-        setSystemMessage(message);
-    }
-
     return <div className="relative h-full flex flex-col gap-8 pt-8 overflow-auto">
         <CopyAsJsonButton onCopy={handleCopyChat} />
         <div className="absolute top-0 left-0 flex items-center gap-1">
@@ -304,14 +302,14 @@ export function Chat({
         <Messages
             projectId={projectId}
             messages={messages}
-            systemMessage={systemMessage}
             toolCallResults={toolCallResults}
             handleToolCallResults={handleToolCallResults}
             loadingAssistantResponse={loadingAssistantResponse}
             loadingUserResponse={loadingUserResponse}
             workflow={workflow}
             testProfile={testProfile}
-            onSystemMessageChange={handleSystemMessageChange}
+            systemMessage={systemMessage}
+            onSystemMessageChange={onSystemMessageChange}
         />
         <div className="shrink-0">
             {fetchResponseError && (
diff --git a/apps/rowboat/app/projects/[projectId]/playground/messages.tsx b/apps/rowboat/app/projects/[projectId]/playground/messages.tsx
index 5b3c6045..dd8d667a 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/messages.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/messages.tsx
@@ -94,7 +94,7 @@ function ToolCalls({
     messages,
     sender,
     workflow,
-    testProfile=null,
+    testProfile = null,
     systemMessage,
 }: {
     toolCalls: z.infer<typeof apiV1.AssistantMessageWithToolCalls>['tool_calls'];
@@ -143,7 +143,7 @@ function ToolCall({
     messages,
     sender,
     workflow,
-    testProfile=null,
+    testProfile = null,
     systemMessage,
 }: {
     toolCall: z.infer<typeof apiV1.AssistantMessageWithToolCalls>['tool_calls'][number];
@@ -186,8 +186,8 @@ function ToolCall({
                     sender={sender}
                 />;
             }
-            if (!matchingWorkflowTool || 
-                matchingWorkflowTool.mockTool || 
+            if (!matchingWorkflowTool ||
+                matchingWorkflowTool.mockTool ||
                 (testProfile && testProfile.mockTools)) {
                 return <MockToolCall
                     toolCall={toolCall}
@@ -421,7 +421,7 @@ function MockToolCall({
     projectId,
     messages,
     sender,
-    testProfile=null,
+    testProfile = null,
     workflowTool,
     systemMessage,
 }: {
@@ -594,42 +594,40 @@ function ExpandableContent({
 function SystemMessage({
     content,
     onChange,
-    locked
+    locked = false,
 }: {
     content: string,
     onChange: (content: string) => void,
-    locked: boolean
+    locked?: boolean,
 }) {
-    return (
-        <div className="border border-gray-300 dark:border-gray-700 p-2 rounded-lg flex flex-col gap-2 bg-white dark:bg-gray-900">
-            <div className="text-sm text-gray-500 dark:text-gray-400 font-medium">CONTEXT</div>
-            <EditableField
-                light
-                value={content}
-                onChange={onChange}
-                multiline
-                markdown
-                locked={locked}
-                placeholder={`Provide context about the user (e.g. user ID, user name) to the assistant at the start of chat, for testing purposes.`}
-            />
-        </div>
-    );
+    return <div className="text-sm">
+        <EditableField
+            label="Context"
+            value={content}
+            onChange={onChange}
+            locked={locked}
+            multiline
+            markdown
+            placeholder={`Provide context about the user (e.g. user ID, user name) to the assistant at the start of chat, for testing purposes.`}
+            showSaveButton={true}
+            showDiscardButton={true}
+        />
+    </div>;
 }
 
 export function Messages({
     projectId,
-    systemMessage,
     messages,
     toolCallResults,
     handleToolCallResults,
     loadingAssistantResponse,
     loadingUserResponse,
     workflow,
-    testProfile=null,
+    testProfile = null,
+    systemMessage,
     onSystemMessageChange,
 }: {
     projectId: string;
-    systemMessage: string | undefined;
     messages: z.infer<typeof apiV1.ChatMessage>[];
     toolCallResults: Record<string, z.infer<typeof apiV1.ToolMessage>>;
     handleToolCallResults: (results: z.infer<typeof apiV1.ToolMessage>[]) => void;
@@ -637,6 +635,7 @@ export function Messages({
     loadingUserResponse: boolean;
     workflow: z.infer<typeof Workflow>;
     testProfile: z.infer<typeof TestProfile> | null;
+    systemMessage: string | undefined;
     onSystemMessageChange: (message: string) => void;
 }) {
     const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -652,7 +651,7 @@ export function Messages({
             <SystemMessage
                 content={testProfile?.context || systemMessage || ''}
                 onChange={onSystemMessageChange}
-                locked={testProfile !== null || messages.length > 0}
+                locked={testProfile !== null}
             />
             {messages.map((message, index) => {
                 if (message.role === 'assistant') {