Persist and load chats properly

Author: Sg312

apps/sim/app/api/copilot/chat/update-messages/route.ts

@@ -17,25 +17,30 @@ const logger = createLogger('CopilotChatUpdateAPI')
 const UpdateMessagesSchema = z.object({
   chatId: z.string(),
   messages: z.array(
-    z.object({
-      id: z.string(),
-      role: z.enum(['user', 'assistant']),
-      content: z.string(),
-      timestamp: z.string(),
-      toolCalls: z.array(z.any()).optional(),
-      contentBlocks: z.array(z.any()).optional(),
-      fileAttachments: z
-        .array(
-          z.object({
-            id: z.string(),
-            key: z.string(),
-            filename: z.string(),
-            media_type: z.string(),
-            size: z.number(),
-          })
-        )
-        .optional(),
-    })
+    z
+      .object({
+        id: z.string(),
+        role: z.enum(['user', 'assistant', 'system']),
+        content: z.string(),
+        timestamp: z.string(),
+        toolCalls: z.array(z.any()).optional(),
+        contentBlocks: z.array(z.any()).optional(),
+        fileAttachments: z
+          .array(
+            z.object({
+              id: z.string(),
+              key: z.string(),
+              filename: z.string(),
+              media_type: z.string(),
+              size: z.number(),
+            })
+          )
+          .optional(),
+        contexts: z.array(z.any()).optional(),
+        citations: z.array(z.any()).optional(),
+        errorType: z.string().optional(),
+      })
+      .passthrough() // Preserve any additional fields for future compatibility
   ),
   planArtifact: z.string().nullable().optional(),
   config: z
@@ -57,6 +62,19 @@ export async function POST(req: NextRequest) {
     }
 
     const body = await req.json()
+    
+    // Debug: Log what we received
+    const lastMsg = body.messages?.[body.messages.length - 1]
+    if (lastMsg?.role === 'assistant') {
+      logger.info(`[${tracker.requestId}] Received messages to save`, {
+        messageCount: body.messages?.length,
+        lastMsgId: lastMsg.id,
+        lastMsgContentLength: lastMsg.content?.length || 0,
+        lastMsgContentBlockCount: lastMsg.contentBlocks?.length || 0,
+        lastMsgContentBlockTypes: lastMsg.contentBlocks?.map((b: any) => b?.type) || [],
+      })
+    }
+    
     const { chatId, messages, planArtifact, config } = UpdateMessagesSchema.parse(body)
 
     // Verify that the chat belongs to the user

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx

@@ -151,13 +151,28 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     }, [message.content])
 
     // Parse special tags from message content (options, plan)
-    // Only parse after streaming is complete to avoid affecting streaming smoothness
+    // Parse during streaming to show options/plan as they stream in
     const parsedTags = useMemo(() => {
-      if (isUser || isStreaming) return null
+      if (isUser) return null
+
+      // Try message.content first
+      if (message.content) {
+        const parsed = parseSpecialTags(message.content)
+        if (parsed.options || parsed.plan) return parsed
+      }
+
+      // During streaming, check content blocks for options/plan
+      if (isStreaming && message.contentBlocks && message.contentBlocks.length > 0) {
+        for (const block of message.contentBlocks) {
+          if (block.type === 'text' && block.content) {
+            const parsed = parseSpecialTags(block.content)
+            if (parsed.options || parsed.plan) return parsed
+          }
+        }
+      }
 
-      // Only parse when not streaming - options should appear after message completes
       return message.content ? parseSpecialTags(message.content) : null
-    }, [message.content, isUser, isStreaming])
+    }, [message.content, message.contentBlocks, isUser, isStreaming])
 
     // Get sendMessage from store for continuation actions
     const sendMessage = useCopilotStore((s) => s.sendMessage)
@@ -181,14 +196,12 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
         if (block.type === 'text') {
           const isLastTextBlock =
             index === message.contentBlocks!.length - 1 && block.type === 'text'
-          // During streaming, use raw content for smooth performance
-          // Only strip special tags after streaming completes
-          const cleanBlockContent = isStreaming
-            ? block.content.replace(/\n{3,}/g, '\n\n')
-            : parseSpecialTags(block.content).cleanContent.replace(/\n{3,}/g, '\n\n')
+          // Always strip special tags from display (they're rendered separately as options/plan)
+          const parsed = parseSpecialTags(block.content)
+          const cleanBlockContent = parsed.cleanContent.replace(/\n{3,}/g, '\n\n')
 
-          // Skip if no content after stripping tags (only when not streaming)
-          if (!isStreaming && !cleanBlockContent.trim()) return null
+          // Skip if no content after stripping tags
+          if (!cleanBlockContent.trim()) return null
 
           // Use smooth streaming for the last text block if we're streaming
           const shouldUseSmoothing = isStreaming && isLastTextBlock
@@ -495,14 +508,14 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               </div>
             )}
 
-            {/* Options selector when agent presents choices - only shown after streaming completes */}
-            {!isStreaming && parsedTags?.options && Object.keys(parsedTags.options).length > 0 && (
+            {/* Options selector when agent presents choices - streams in but disabled until complete */}
+            {parsedTags?.options && Object.keys(parsedTags.options).length > 0 && (
               <OptionsSelector
                 options={parsedTags.options}
                 onSelect={handleOptionSelect}
-                disabled={isSendingMessage}
-                enableKeyboardNav={isLastMessage}
-                streaming={false}
+                disabled={isSendingMessage || isStreaming}
+                enableKeyboardNav={isLastMessage && !isStreaming && parsedTags.optionsComplete === true}
+                streaming={isStreaming || !parsedTags.optionsComplete}
               />
             )}
           </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx

@@ -1943,13 +1943,23 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
   // Get current mode from store to determine if we should render integration tools
   const mode = useCopilotStore.getState().mode
 
+  // Check if this is a completed/historical tool call (not pending/executing)
+  // Use string comparison to handle both enum values and string values from DB
+  const stateStr = String(toolCall.state)
+  const isCompletedToolCall =
+    stateStr === 'success' ||
+    stateStr === 'error' ||
+    stateStr === 'rejected' ||
+    stateStr === 'aborted'
+
   // Allow rendering if:
   // 1. Tool is in CLASS_TOOL_METADATA (client tools), OR
-  // 2. We're in build mode (integration tools are executed server-side)
+  // 2. We're in build mode (integration tools are executed server-side), OR
+  // 3. Tool call is already completed (historical - should always render)
   const isClientTool = !!CLASS_TOOL_METADATA[toolCall.name]
   const isIntegrationToolInBuildMode = mode === 'build' && !isClientTool
 
-  if (!isClientTool && !isIntegrationToolInBuildMode) {
+  if (!isClientTool && !isIntegrationToolInBuildMode && !isCompletedToolCall) {
     return null
   }
   // Check if tool has params table config (meaning it's expandable)