feat(copilot): refactor, adjusted welcome and user-input UI/UX

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback } from 'react'
 import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { createLogger } from '@/lib/logs/console/logger'
-import { useCopilotStore } from '@/stores/copilot/store'
+import { useCopilotStore } from '@/stores/panel-new/copilot/store'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { mergeSubblockState } from '@/stores/workflows/utils'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/checkpoint-panel/checkpoint-panel.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/checkpoint-panel/checkpoint-panel.tsx

@@ -4,8 +4,14 @@ import { useEffect } from 'react'
 import { formatDistanceToNow } from 'date-fns'
 import { AlertCircle, History, RotateCcw } from 'lucide-react'
 import { Button, ScrollArea, Separator } from '@/components/ui'
-import { useCopilotStore } from '@/stores/copilot/store'
+import { useCopilotStore } from '@/stores/panel-new/copilot/store'
 
+/**
+ * CheckpointPanel component displays and manages workflow checkpoints
+ * Allows users to view checkpoint history and revert to previous workflow states
+ *
+ * @returns Checkpoint panel UI with list of available checkpoints
+ */
 export function CheckpointPanel() {
   const {
     currentChat,
@@ -18,7 +24,9 @@ export function CheckpointPanel() {
     clearCheckpointError,
   } = useCopilotStore()
 
-  // Load checkpoints when chat changes
+  /**
+   * Load checkpoints when chat changes
+   */
   useEffect(() => {
     if (currentChat?.id) {
       loadCheckpoints(currentChat.id)
@@ -77,6 +85,11 @@ export function CheckpointPanel() {
     )
   }
 
+  /**
+   * Handles reverting to a specific checkpoint
+   * Prompts user for confirmation before reverting
+   * @param checkpointId - ID of the checkpoint to revert to
+   */
   const handleRevert = async (checkpointId: string) => {
     if (
       window.confirm(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/context-usage-pill/context-usage-pill.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { memo } from 'react'
+import { Plus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Threshold for high context usage warning (75%)
+ */
+const HIGH_USAGE_THRESHOLD = 75
+
+/**
+ * Color thresholds for context usage indicator
+ */
+const COLOR_THRESHOLDS = {
+  CRITICAL: 90,
+  WARNING: 75,
+  MODERATE: 50,
+} as const
+
+/**
+ * Props for the ContextUsagePill component
+ */
+interface ContextUsagePillProps {
+  /** Current context usage percentage (0-100) */
+  percentage: number
+  /** Additional CSS classes to apply */
+  className?: string
+  /** Callback to create a new chat when usage is high */
+  onCreateNewChat?: () => void
+}
+
+/**
+ * Context usage indicator pill showing percentage of context window used
+ * Displays color-coded percentage with option to start new chat when usage is high
+ *
+ * Color scheme:
+ * - Red (≥90%): Critical usage
+ * - Orange (≥75%): Warning usage
+ * - Yellow (≥50%): Moderate usage
+ * - Gray (<50%): Normal usage
+ *
+ * @param props - Component props
+ * @returns Context usage pill with percentage and optional new chat button
+ */
+export const ContextUsagePill = memo(
+  ({ percentage, className, onCreateNewChat }: ContextUsagePillProps) => {
+    if (percentage === null || percentage === undefined || Number.isNaN(percentage)) {
+      return null
+    }
+
+    const isHighUsage = percentage >= HIGH_USAGE_THRESHOLD
+
+    /**
+     * Determines the color class based on usage percentage
+     * @returns Tailwind classes for background and text color
+     */
+    const getColorClass = () => {
+      if (percentage >= COLOR_THRESHOLDS.CRITICAL) {
+        return 'bg-red-500/10 text-red-600 dark:text-red-400'
+      }
+      if (percentage >= COLOR_THRESHOLDS.WARNING) {
+        return 'bg-orange-500/10 text-orange-600 dark:text-orange-400'
+      }
+      if (percentage >= COLOR_THRESHOLDS.MODERATE) {
+        return 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400'
+      }
+      return 'bg-gray-500/10 text-gray-600 dark:text-gray-400'
+    }
+
+    /**
+     * Formats percentage for display
+     * Shows 1 decimal place for values <1%, 0 decimals otherwise
+     */
+    const formattedPercentage = percentage < 1 ? percentage.toFixed(1) : percentage.toFixed(0)
+
+    return (
+      <div
+        className={cn(
+          'inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-medium text-[11px] tabular-nums transition-colors',
+          getColorClass(),
+          isHighUsage && 'border border-red-500/50',
+          className
+        )}
+        title={`Context used in this chat: ${percentage.toFixed(2)}%`}
+      >
+        <span>{formattedPercentage}%</span>
+        {isHighUsage && onCreateNewChat && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation()
+              onCreateNewChat()
+            }}
+            className='inline-flex items-center justify-center transition-opacity hover:opacity-70'
+            title='Recommended: Start a new chat for better quality'
+            type='button'
+          >
+            <Plus className='h-3 w-3' />
+          </button>
+        )}
+      </div>
+    )
+  }
+)
+
+ContextUsagePill.displayName = 'ContextUsagePill'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/file-display.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/copilot-message/components/file-display.tsx

@@ -1,22 +1,52 @@
 import { memo, useState } from 'react'
 import { FileText, Image } from 'lucide-react'
-import type { MessageFileAttachment } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input'
+import type { MessageFileAttachment } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/components/user-input/user-input'
 
+/**
+ * File size units for formatting
+ */
+const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB'] as const
+
+/**
+ * Kilobyte multiplier
+ */
+const KILOBYTE = 1024
+
+/**
+ * Props for the FileAttachmentDisplay component
+ */
 interface FileAttachmentDisplayProps {
+  /** Array of file attachments to display */
   fileAttachments: MessageFileAttachment[]
 }
 
+/**
+ * FileAttachmentDisplay shows thumbnails or icons for attached files
+ * Displays image previews or appropriate icons based on file type
+ *
+ * @param props - Component props
+ * @returns Grid of file attachment thumbnails
+ */
 export const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDisplayProps) => {
   const [fileUrls, setFileUrls] = useState<Record<string, string>>({})
+  const [failedImages, setFailedImages] = useState<Set<string>>(new Set())
 
+  /**
+   * Formats file size in bytes to human-readable format
+   * @param bytes - File size in bytes
+   * @returns Formatted string (e.g., "2.5 MB")
+   */
   const formatFileSize = (bytes: number) => {
     if (bytes === 0) return '0 B'
-    const k = 1024
-    const sizes = ['B', 'KB', 'MB', 'GB']
-    const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return `${Math.round((bytes / k ** i) * 10) / 10} ${sizes[i]}`
+    const i = Math.floor(Math.log(bytes) / Math.log(KILOBYTE))
+    return `${Math.round((bytes / KILOBYTE ** i) * 10) / 10} ${FILE_SIZE_UNITS[i]}`
   }
 
+  /**
+   * Returns appropriate icon based on file media type
+   * @param mediaType - MIME type of the file
+   * @returns Icon component
+   */
   const getFileIcon = (mediaType: string) => {
     if (mediaType.startsWith('image/')) {
       return <Image className='h-5 w-5 text-muted-foreground' />
@@ -30,6 +60,11 @@ export const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDi
     return <FileText className='h-5 w-5 text-muted-foreground' />
   }
 
+  /**
+   * Gets or generates the file URL from cache
+   * @param file - File attachment object
+   * @returns URL to serve the file
+   */
   const getFileUrl = (file: MessageFileAttachment) => {
     const cacheKey = file.key
     if (fileUrls[cacheKey]) {
@@ -41,15 +76,32 @@ export const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDi
     return url
   }
 
+  /**
+   * Handles click on a file attachment - opens in new tab
+   * @param file - File attachment object
+   */
   const handleFileClick = (file: MessageFileAttachment) => {
     const serveUrl = getFileUrl(file)
     window.open(serveUrl, '_blank')
   }
 
+  /**
+   * Checks if a file is an image based on media type
+   * @param mediaType - MIME type of the file
+   * @returns True if file is an image
+   */
   const isImageFile = (mediaType: string) => {
     return mediaType.startsWith('image/')
   }
 
+  /**
+   * Handles image loading errors
+   * @param fileId - ID of the file that failed to load
+   */
+  const handleImageError = (fileId: string) => {
+    setFailedImages((prev) => new Set(prev).add(fileId))
+  }
+
   return (
     <>
       {fileAttachments.map((file) => (
@@ -59,29 +111,14 @@ export const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDi
           onClick={() => handleFileClick(file)}
           title={`${file.filename} (${formatFileSize(file.size)})`}
         >
-          {isImageFile(file.media_type) ? (
-            // For images, show actual thumbnail
+          {isImageFile(file.media_type) && !failedImages.has(file.id) ? (
             <img
               src={getFileUrl(file)}
               alt={file.filename}
               className='h-full w-full object-cover'
-              onError={(e) => {
-                // If image fails to load, replace with icon
-                const target = e.target as HTMLImageElement
-                target.style.display = 'none'
-                const parent = target.parentElement
-                if (parent) {
-                  const iconContainer = document.createElement('div')
-                  iconContainer.className =
-                    'flex items-center justify-center w-full h-full bg-background/50'
-                  iconContainer.innerHTML =
-                    '<svg class="h-5 w-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>'
-                  parent.appendChild(iconContainer)
-                }
-              }}
+              onError={() => handleImageError(file.id)}
             />
           ) : (
-            // For other files, show icon centered
             <div className='flex h-full w-full items-center justify-center bg-background/50'>
               {getFileIcon(file.media_type)}
             </div>