improve coding agent

[larryro]

Summary by CodeRabbit

Release Notes

• New Features

  • Added file attachment support to chat and automation assistant, enabling users to upload and share images and documents in conversations.
  • Introduced drag-and-drop and paste image functionality for seamless attachment uploads.
  • Enhanced message display to render attached files inline with preview support and download links.

• Improvements

  • Refined workflow validation and error handling for better reliability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces multi-modal file attachment support across chat and automation assistant components, centralizes and reorganizes the workflow validation infrastructure into dedicated modules with step-type validators and constants, renames pagination result fields from page to items across numerous query functions, removes recordCreationTime parameters from workflow processing steps, and adds customer address support to the workflow customer action. The changes span UI components, backend Convex functions, type definitions, and predefined workflow configurations.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Areas requiring extra attention:

• Workflow validation refactoring (services/platform/convex/workflow/helpers/validation/): Major reorganization introduces new modules (constants.ts, types.ts, steps/, parse.ts, validate.ts), re-exports, and delegation patterns; cross-module dependencies and validator registry must be audited for completeness and correctness.
• Multi-modal content handling (attachment registration, file parsing, buildMultiModalContent): Verify proper handling of image vs. non-image files, blob registration flow, SHA-256 hashing, and error propagation across agent component integration.
• Pagination field renames (page → items): While repetitive, the rename spans 25+ files; spot-check a few critical paths (chat, customers, products, conversations) to confirm all callers updated consistently.
• Optimistic message attachment propagation (chat-input, chat-interface, message-bubble): Ensure attachments are correctly threaded through optimistic UI state, preview URLs are managed properly, and cleanup/revocation logic is consistent.
• Predefined workflow consistency (recordCreationTime removal, items array references): Verify all affected workflows (circuly_sync_, shopify_sync_, onedrive_sync, etc.) have coherent control flow after field removals.

Possibly related PRs

• tale-project/poc2#379 — Directly modifies services/platform/app/(app)/dashboard/[id]/automations/components/automation-assistant.tsx with file attachment UI changes overlapping this PR's attachment feature.
• tale-project/poc2#416 — Touches chat UI components (chat-interface, message-bubble) and optimistic message machinery that this PR also refactors for attachment support.
• feat: add file attachment support for chat agent with document parsing #12 — Adds chat file attachment and document-parsing support across similar Convex attachment registration and multi-modal content building modules.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 23

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (7)

services/platform/app/(app)/dashboard/[id]/chat/components/chat-input.tsx (2)

267-269: Use semantic colors instead of hardcoded blue colors.

As per coding guidelines, hardcoded colors should be replaced with design system semantic colors.

-                        <div className="size-full bg-gradient-to-br from-blue-100 to-blue-200 flex items-center justify-center">
-                          <span className="text-xs text-blue-600">IMG</span>
+                        <div className="size-full bg-muted flex items-center justify-center">
+                          <span className="text-xs text-muted-foreground">IMG</span>
                         </div>

---

361-365: Use CSS variable or semantic color instead of hardcoded SVG fill.

The hardcoded fill color #9CA3AF should use a semantic color. Consider using currentColor with a text utility class on the parent, or replace with an icon component that inherits color.

-                      <path
-                        d="M11.3331 0.666687V6.66669C11.3331 7.37393 11.052..."
-                        fill="#9CA3AF"
-                      />
+                      <path
+                        d="M11.3331 0.666687V6.66669C11.3331 7.37393 11.052..."
+                        fill="currentColor"
+                      />

services/platform/app/(app)/dashboard/[id]/chat/components/message-bubble.tsx (4)

35-49: Type duplication with layout.tsx.

The FileAttachment interface is defined both here and in services/platform/app/(app)/dashboard/[id]/chat/layout.tsx (Lines 12-18). Consider importing from the layout to maintain a single source of truth.

+import type { FileAttachment } from '../layout';
+
-interface FileAttachment {
-  fileId: Id<'_storage'>;
-  fileName: string;
-  fileType: string;
-  fileSize: number;
-  previewUrl?: string; // Local preview URL for optimistic display
-}

---

246-275: Use semantic colors instead of hardcoded color classes.

Per coding guidelines, avoid hardcoded colors like bg-gray-100, bg-blue-100, bg-red-100. Use design system semantic colors instead.

   const getFileTypeInfo = (type: string, name: string) => {
     if (type.startsWith('image/'))
-      return { icon: '🖼️', label: 'IMG', bgColor: 'bg-blue-100' };
+      return { icon: '🖼️', label: 'IMG', bgColor: 'bg-muted' };
     if (type === 'application/pdf')
-      return { icon: '📄', label: 'PDF', bgColor: 'bg-red-100' };
+      return { icon: '📄', label: 'PDF', bgColor: 'bg-muted' };
     if (
       type.includes('word') ||
       name.endsWith('.doc') ||
       name.endsWith('.docx')
     )
-      return { icon: '📝', label: 'DOC', bgColor: 'bg-blue-100' };
+      return { icon: '📝', label: 'DOC', bgColor: 'bg-muted' };
     if (type === 'text/plain')
-      return { icon: '📄', label: 'TXT', bgColor: 'bg-gray-100' };
-    return { icon: '📎', label: 'FILE', bgColor: 'bg-gray-100' };
+      return { icon: '📄', label: 'TXT', bgColor: 'bg-muted' };
+    return { icon: '📎', label: 'FILE', bgColor: 'bg-muted' };
   };

Similarly, update other hardcoded colors throughout the component (e.g., bg-gray-200 → bg-muted, text-gray-800 → text-foreground, text-gray-500 → text-muted-foreground).

---

292-298: Hardcoded colors in image thumbnail container.

-      <div className="size-11 rounded-lg bg-gray-200 bg-center bg-cover bg-no-repeat overflow-hidden">
+      <div className="size-11 rounded-lg bg-muted bg-center bg-cover bg-no-repeat overflow-hidden">

---

303-329: Hardcoded colors in file attachment card.

-      className="bg-gray-100 rounded-lg px-2 py-1.5 flex items-center gap-2 hover:bg-gray-200 transition-colors max-w-[216px]"
+      className="bg-muted rounded-lg px-2 py-1.5 flex items-center gap-2 hover:bg-muted/80 transition-colors max-w-[13.5rem]"
     >
       ...
-        <div className="text-sm font-medium text-gray-800 truncate">
+        <div className="text-sm font-medium text-foreground truncate">
           {attachment.fileName}
         </div>
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-muted-foreground">

services/platform/convex/workflow/actions/customer/customer_action.ts (1)

100-103: Consider aligning the TypeScript type with the validator for better IDE support.

The updates field is typed as Record<string, unknown>, but the runtime validator at line 140 uses customerUpdateValidator with specific fields. While the learnings indicate that Record<string, unknown> is acceptable when validation is at the mutation level, having a more specific type would provide better IDE support and compile-time checks.

Consider updating the type to match the validator structure:

  | {
      operation: 'update';
      customerId: string;
-      updates: Record<string, unknown>;
+      updates: {
+        name?: string;
+        email?: string;
+        status?: 'active' | 'churned' | 'potential';
+        source?: string;
+        locale?: string;
+        address?: CustomerAddress;
+        metadata?: Record<string, unknown>;
+      };
    };

Based on learnings, maintaining separate TypeScript types alongside validators provides IDE support and compile-time checking, while the validator handles runtime validation.