Autorun chat in playground to show greeting

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(),
 });

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>

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
+        if (messages.length > 0) {
             const last = messages[messages.length - 1];
-        if (fetchResponseError) {
+            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 && (

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];
@@ -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 (
+    return <div className="text-sm">
-        <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
+            label="Context"
             value={content}
             onChange={onChange}
+            locked={locked}
             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.`}
+            showSaveButton={true}
+            showDiscardButton={true}
         />
-        </div>
+    </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') {