Fix rendering for step error

Author: ajhai

llmstack/client/src/components/apps/renderer/AppRenderer.jsx

@@ -83,6 +83,18 @@ export function AppRenderer({ app, ws }) {
         const template = outputTemplates[agentMessage.from_id];
         let newMessage;
 
+        if (agentMessage.type === "step_error") {
+          resolve(
+            new AgentStepErrorMessage(
+              `${message.id}/${agentMessage.id}`,
+              agentMessage.content,
+              message.reply_to,
+            ),
+          );
+
+          return;
+        }
+
         templateEngine
           .render(
             template,
@@ -106,12 +118,6 @@ export function AppRenderer({ app, ws }) {
                 message.reply_to,
                 !agentMessage.done,
               );
-            } else if (agentMessage.type === "step_error") {
-              newMessage = new AgentStepErrorMessage(
-                `${message.id}/${agentMessage.id}`,
-                response,
-                message.reply_to,
-              );
             } else {
               newMessage = new AgentMessage(
                 `${message.id}/${agentMessage.id}`,

llmstack/client/src/components/apps/renderer/LayoutRenderer.jsx

@@ -257,6 +257,12 @@ const AgentMessage = memo(
           className={
             workflow ? "layout-workflow-output" : "layout-chat_message_from_app"
           }
+          sx={{
+            color:
+              message?.subType === "agent-step-error"
+                ? "red !important"
+                : "inherit",
+          }}
         >
           <LayoutRenderer>{message.content || ""}</LayoutRenderer>
         </Box>
@@ -467,7 +473,7 @@ const PromptlyAppChatOutput = memo(
               );
             } else if (message.subType === "agent-step-error") {
               return (
-                <AgentStepMessage
+                <AgentMessage
                   message={message}
                   key={message.id}
                   processors={appRunData?.processors}