Speed up canvas

Author: Sg312

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

@@ -1,3 +1,4 @@
+import { memo, useCallback } from 'react'
 import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -9,31 +10,51 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('DiffControls')
 
-export function DiffControls() {
-  const {
-    isShowingDiff,
-    isDiffReady,
-    diffWorkflow,
-    toggleDiffView,
-    acceptChanges,
-    rejectChanges,
-    diffMetadata,
-  } = useWorkflowDiffStore()
+export const DiffControls = memo(function DiffControls() {
+  // Optimized: Single diff store subscription
+  const { isShowingDiff, isDiffReady, diffWorkflow, toggleDiffView, acceptChanges, rejectChanges } =
+    useWorkflowDiffStore(
+      useCallback(
+        (state) => ({
+          isShowingDiff: state.isShowingDiff,
+          isDiffReady: state.isDiffReady,
+          diffWorkflow: state.diffWorkflow,
+          toggleDiffView: state.toggleDiffView,
+          acceptChanges: state.acceptChanges,
+          rejectChanges: state.rejectChanges,
+        }),
+        []
+      )
+    )
+
+  // Optimized: Single copilot store subscription for needed values
+  const { updatePreviewToolCallState, clearPreviewYaml, currentChat, messages } = useCopilotStore(
+    useCallback(
+      (state) => ({
+        updatePreviewToolCallState: state.updatePreviewToolCallState,
+        clearPreviewYaml: state.clearPreviewYaml,
+        currentChat: state.currentChat,
+        messages: state.messages,
+      }),
+      []
+    )
+  )
 
-  const { updatePreviewToolCallState, clearPreviewYaml, currentChat, messages } = useCopilotStore()
-  const { activeWorkflowId } = useWorkflowRegistry()
+  const { activeWorkflowId } = useWorkflowRegistry(
+    useCallback((state) => ({ activeWorkflowId: state.activeWorkflowId }), [])
+  )
 
   // Don't show anything if no diff is available or diff is not ready
   if (!diffWorkflow || !isDiffReady) {
     return null
   }
 
-  const handleToggleDiff = () => {
+  const handleToggleDiff = useCallback(() => {
     logger.info('Toggling diff view', { currentState: isShowingDiff })
     toggleDiffView()
-  }
+  }, [isShowingDiff, toggleDiffView])
 
-  const createCheckpoint = async () => {
+  const createCheckpoint = useCallback(async () => {
     if (!activeWorkflowId || !currentChat?.id) {
       logger.warn('Cannot create checkpoint: missing workflowId or chatId', {
         workflowId: activeWorkflowId,
@@ -184,9 +205,9 @@ export function DiffControls() {
       logger.error('Failed to create checkpoint:', error)
       return false
     }
-  }
+  }, [activeWorkflowId, currentChat, messages])
 
-  const handleAccept = async () => {
+  const handleAccept = useCallback(async () => {
     logger.info('Accepting proposed changes with backup protection')
 
     try {
@@ -239,9 +260,9 @@ export function DiffControls() {
       console.error('Workflow update failed:', errorMessage)
       alert(`Failed to save workflow changes: ${errorMessage}`)
     }
-  }
+  }, [createCheckpoint, clearPreviewYaml, updatePreviewToolCallState, acceptChanges])
 
-  const handleReject = () => {
+  const handleReject = useCallback(() => {
     logger.info('Rejecting proposed changes (optimistic)')
 
     // Clear preview YAML immediately
@@ -279,7 +300,7 @@ export function DiffControls() {
     rejectChanges().catch((error) => {
       logger.error('Failed to reject changes (background):', error)
     })
-  }
+  }, [clearPreviewYaml, updatePreviewToolCallState, rejectChanges])
 
   return (
     <div className='-translate-x-1/2 fixed bottom-20 left-1/2 z-30'>
@@ -319,4 +340,4 @@ export function DiffControls() {
       </div>
     </div>
   )
-}
+})

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

@@ -1,7 +1,7 @@
 'use client'
 
-import { Plus } from 'lucide-react'
 import { memo } from 'react'
+import { Plus } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
 interface ContextUsagePillProps {
@@ -45,11 +45,11 @@ export const ContextUsagePill = memo(
               e.stopPropagation()
               onCreateNewChat()
             }}
-            className="inline-flex items-center justify-center hover:opacity-70 transition-opacity"
-            title="Recommended: Start a new chat for better quality"
-            type="button"
+            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" />
+            <Plus className='h-3 w-3' />
           </button>
         )}
       </div>

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

@@ -183,8 +183,14 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
     const [isLoadingLogs, setIsLoadingLogs] = useState(false)
 
     const { data: session } = useSession()
-    const { currentChat, workflowId, enabledModels, setEnabledModels, contextUsage, createNewChat } =
-      useCopilotStore()
+    const {
+      currentChat,
+      workflowId,
+      enabledModels,
+      setEnabledModels,
+      contextUsage,
+      createNewChat,
+    } = useCopilotStore()
     const params = useParams()
     const workspaceId = params.workspaceId as string
 
@@ -244,7 +250,6 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
       }
     }, [enabledModels, setEnabledModels])
 
-
     // Auto-resize textarea and toggle vertical scroll when exceeding max height
     useEffect(() => {
       const textarea = textareaRef.current
@@ -1930,7 +1935,10 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           {/* Context Usage Pill - Top Right */}
           {contextUsage && contextUsage.percentage > 0 && (
             <div className='absolute top-2 right-2 z-10'>
-              <ContextUsagePill percentage={contextUsage.percentage} onCreateNewChat={createNewChat} />
+              <ContextUsagePill
+                percentage={contextUsage.percentage}
+                onCreateNewChat={createNewChat}
+              />
             </div>
           )}
           {/* Attached Files Display with Thumbnails */}