fix(variables): fixed floating variables, added autcomplete off to prevent suggested values (#1908)

waleedlatif1 · web-flow · commit 96f134b127d5 · 2025-11-11T17:52:46.000-08:00
* fixed variables

* add autocomplete=off to prevent suggestions for subblock values
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Loader2, Trash2 } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
+import { Trash } from '@/components/emcn/icons/trash'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -97,7 +98,7 @@ export function DeleteChunkModal({
               </>
             ) : (
               <>
-                <Trash2 className='mr-2 h-4 w-4' />
+                <Trash className='mr-2 h-4 w-4' />
                 Delete
               </>
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -1,9 +1,10 @@
 'use client'
 
 import { Suspense, startTransition, useCallback, useEffect, useState } from 'react'
-import { ChevronLeft, ChevronRight, Circle, CircleOff, FileText, Plus, Trash2 } from 'lucide-react'
+import { ChevronLeft, ChevronRight, Circle, CircleOff, FileText, Plus } from 'lucide-react'
 import { useParams, useSearchParams } from 'next/navigation'
 import { Tooltip } from '@/components/emcn'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Button, Checkbox, SearchHighlight } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -369,7 +370,7 @@ export function Document({
                   disabled={!userPermissions.canEdit}
                   className='h-8 w-8 p-0 text-gray-500 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50'
                 >
-                  <Trash2 className='h-4 w-4' />
+                  <Trash className='h-4 w-4' />
                 </Button>
               </Tooltip.Trigger>
               <Tooltip.Content side='top'>Delete Chunk</Tooltip.Content>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -14,10 +14,10 @@ import {
   Loader2,
   Plus,
   RotateCcw,
-  Trash2,
 } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { Tooltip } from '@/components/emcn'
+import { Trash } from '@/components/emcn/icons/trash'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -1070,7 +1070,7 @@ export function KnowledgeBase({
                                         }
                                         className='h-8 w-8 p-0 text-gray-500 hover:text-red-600 disabled:opacity-50'
                                       >
-                                        <Trash2 className='h-4 w-4' />
+                                        <Trash className='h-4 w-4' />
                                       </Button>
                                     </Tooltip.Trigger>
                                     <Tooltip.Content side='top'>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import { LibraryBig, MoreHorizontal, Trash2 } from 'lucide-react'
+import { LibraryBig, MoreHorizontal } from 'lucide-react'
 import Link from 'next/link'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -107,7 +108,7 @@ export function KnowledgeHeader({ breadcrumbs, options }: KnowledgeHeaderProps)
                     onClick={options.onDeleteKnowledgeBase}
                     className='flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 font-[380] text-red-600 text-sm hover:bg-secondary/50 focus:bg-secondary/50 focus:text-red-600'
                   >
-                    <Trash2 className='h-4 w-4' />
+                    <Trash className='h-4 w-4' />
                     Delete Knowledge Base
                   </DropdownMenuItem>
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/components/auth-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/components/auth-selector.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { Check, Copy, Eye, EyeOff, Plus, RefreshCw, Trash2 } from 'lucide-react'
+import { Check, Copy, Eye, EyeOff, Plus, RefreshCw } from 'lucide-react'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Button, Card, CardContent, Input, Label } from '@/components/ui'
 import { getEnv, isTruthy } from '@/lib/env'
 import { cn, generatePassword } from '@/lib/utils'
@@ -266,7 +267,7 @@ export function AuthSelector({
                           disabled={disabled}
                           className='h-7 w-7 opacity-70'
                         >
-                          <Trash2 className='h-4 w-4' />
+                          <Trash className='h-4 w-4' />
                         </Button>
                       </div>
                     </li>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/copilot/copilot.tsx
@@ -2,7 +2,7 @@
 
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
-import { History, Plus, Trash2 } from 'lucide-react'
+import { History, Plus } from 'lucide-react'
 import {
   Button,
   Popover,
@@ -12,6 +12,7 @@ import {
   PopoverSection,
   PopoverTrigger,
 } from '@/components/emcn'
+import { Trash } from '@/components/emcn/icons/trash'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
   CopilotMessage,
@@ -387,7 +388,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                                     }}
                                     aria-label='Delete chat'
                                   >
-                                    <Trash2 className='h-[10px] w-[10px]' />
+                                    <Trash className='h-[10px] w-[10px]' />
                                   </Button>
                                 </div>
                               </PopoverItem>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useMemo, useRef, useState } from 'react'
-import { Plus, Trash2 } from 'lucide-react'
+import { Plus } from 'lucide-react'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { MAX_TAG_SLOTS } from '@/lib/knowledge/consts'
@@ -301,6 +302,7 @@ export function DocumentTagEntry({
             onFocus={handleFocus}
             onBlur={handleBlur}
             disabled={disabled}
+            autoComplete='off'
             className={cn(
               'w-full border-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0',
               isDuplicate && 'border-red-500 bg-red-50'
@@ -393,6 +395,7 @@ export function DocumentTagEntry({
             value={cellValue}
             readOnly
             disabled={disabled || isReadOnly}
+            autoComplete='off'
             className='w-full cursor-pointer border-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
             onClick={handleTypeDropdownClick}
             onFocus={handleTypeFocus}
@@ -464,6 +467,7 @@ export function DocumentTagEntry({
             onDrop={handlers.onDrop}
             onDragOver={handlers.onDragOver}
             disabled={disabled}
+            autoComplete='off'
             className='w-full border-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
           />
           <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden bg-transparent px-3 text-sm'>
@@ -507,7 +511,7 @@ export function DocumentTagEntry({
           className='-translate-y-1/2 absolute top-1/2 right-2 h-8 w-8 opacity-0 group-hover:opacity-100'
           onClick={() => handleDeleteRow(rowIndex)}
         >
-          <Trash2 className='h-4 w-4 text-muted-foreground' />
+          <Trash className='h-4 w-4 text-muted-foreground' />
         </Button>
       </td>
     ) : null
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -1,9 +1,10 @@
 import { useMemo, useRef } from 'react'
-import { Plus, Trash } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { Tooltip } from '@/components/emcn'
 import { Button } from '@/components/emcn/components/button/button'
 import { Input } from '@/components/emcn/components/input/input'
 import { Textarea } from '@/components/emcn/components/textarea/textarea'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/utils'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/formatted-text'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Plus, Trash2 } from 'lucide-react'
+import { Plus } from 'lucide-react'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -234,6 +235,7 @@ export function KnowledgeTagFilters({
             value={cellValue}
             readOnly
             disabled={disabled || isLoading}
+            autoComplete='off'
             className='w-full cursor-pointer border-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
             onClick={handleDropdownClick}
             onFocus={handleFocus}
@@ -321,6 +323,7 @@ export function KnowledgeTagFilters({
               }
             }}
             disabled={disabled}
+            autoComplete='off'
             className='w-full border-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
           />
           <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden bg-transparent px-3 text-sm'>
@@ -347,7 +350,7 @@ export function KnowledgeTagFilters({
           className='-translate-y-1/2 absolute top-1/2 right-2 h-8 w-8 opacity-0 group-hover:opacity-100'
           onClick={() => handleDeleteRow(rowIndex)}
         >
-          <Trash2 className='h-4 w-4 text-muted-foreground' />
+          <Trash className='h-4 w-4 text-muted-foreground' />
         </Button>
       </td>
     ) : null
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
@@ -113,6 +113,7 @@ function McpInputWithTags({
           onDragOver={handleDragOver}
           placeholder={placeholder}
           disabled={disabled}
+          autoComplete='off'
           className={cn(!isPassword && 'text-transparent caret-foreground')}
         />
         {!isPassword && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -1,5 +1,6 @@
 import { useRef } from 'react'
-import { Plus, Trash } from 'lucide-react'
+import { Plus } from 'lucide-react'
+import { Trash } from '@/components/emcn/icons/trash'
 import 'prismjs/components/prism-json'
 import Editor from 'react-simple-code-editor'
 import { Badge, Button, Combobox, Input } from '@/components/emcn'
@@ -330,6 +331,7 @@ export function FieldFormat({
           }
           placeholder={valuePlaceholder}
           disabled={isReadOnly}
+          autoComplete='off'
           className={cn('allow-scroll w-full overflow-auto', inputClassName)}
           style={{ overflowX: 'auto' }}
         />
@@ -378,6 +380,7 @@ export function FieldFormat({
                   onChange={(e) => updateField(field.id, 'name', e.target.value)}
                   placeholder={placeholder}
                   disabled={isReadOnly}
+                  autoComplete='off'
                 />
               </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/table/table.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useRef } from 'react'
-import { Trash2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button } from '@/components/emcn/components/button/button'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Input } from '@/components/ui/input'
 import { createLogger } from '@/lib/logs/console/logger'
 import { cn } from '@/lib/utils'
@@ -202,6 +202,7 @@ export function Table({
             onDrop={handlers.onDrop}
             onDragOver={handlers.onDragOver}
             disabled={isPreview || disabled}
+            autoComplete='off'
             className='w-full border-0 bg-transparent px-[10px] py-[8px] text-transparent caret-white placeholder:text-[#787878] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
           <div
@@ -262,7 +263,7 @@ export function Table({
           className='-translate-y-1/2 absolute top-1/2 right-[8px] opacity-0 transition-opacity group-hover:opacity-100'
           onClick={() => handleDeleteRow(rowIndex)}
         >
-          <Trash2 className='h-[14px] w-[14px]' />
+          <Trash className='h-[14px] w-[14px]' />
         </Button>
       </td>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/time-input/time-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/time-input/time-input.tsx
@@ -94,6 +94,7 @@ export function TimeInput({
             disabled={isPreview || disabled}
             value={value ? formatDisplayTime(value) : ''}
             placeholder={placeholder || 'Select time'}
+            autoComplete='off'
             className={cn('cursor-pointer', !value && 'text-muted-foreground', className)}
           />
         </div>
@@ -122,6 +123,7 @@ export function TimeInput({
               updateTime(numVal.toString())
             }}
             type='text'
+            autoComplete='off'
           />
           <span className='text-[#E6E6E6]'>:</span>
           <Input
@@ -146,6 +148,7 @@ export function TimeInput({
               updateTime(undefined, numVal.toString())
             }}
             type='text'
+            autoComplete='off'
           />
           <Button
             variant='outline'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { AlertCircle, Code, FileJson, Trash2, X } from 'lucide-react'
+import { AlertCircle, Code, FileJson, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import {
   AlertDialog,
@@ -1143,7 +1144,7 @@ try {
                   onClick={() => setShowDeleteConfirm(true)}
                   className='gap-1'
                 >
-                  <Trash2 className='h-4 w-4' />
+                  <Trash className='h-4 w-4' />
                   Delete
                 </Button>
               ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react'
-import { Plus, Trash } from 'lucide-react'
+import { Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -407,6 +408,7 @@ export function VariablesInput({
                           }
                           placeholder={`${assignment.type} value`}
                           disabled={isPreview || disabled}
+                          autoComplete='off'
                           className={cn(
                             'h-9 border border-input bg-white text-transparent caret-foreground placeholder:text-muted-foreground/50 dark:border-input/60 dark:bg-background',
                             dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/webhook/components/components/webhook-config-field.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/webhook/components/components/webhook-config-field.tsx
@@ -82,6 +82,7 @@ export function WebhookConfigField({
             value={value}
             onChange={onChange ? (e) => onChange(e.target.value) : undefined}
             placeholder={placeholder}
+            autoComplete='off'
             className={cn(
               'h-10 flex-1',
               readOnly ? 'cursor-text font-mono text-xs' : '',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/panel-new.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/panel-new.tsx
@@ -25,15 +25,15 @@ import {
 import { createLogger } from '@/lib/logs/console/logger'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { Variables } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables'
 import { useDeleteWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
 import { useChatStore } from '@/stores/chat/store'
 import { usePanelStore } from '@/stores/panel-new/store'
 import type { PanelTab } from '@/stores/panel-new/types'
-// import { useVariablesStore } from '@/stores/variables/store'
+import { useVariablesStore } from '@/stores/variables/store'
 import { useWorkflowJsonStore } from '@/stores/workflows/json/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
-// import { Variables } from '../variables/variables'
 import { Copilot, Deploy, Editor, Toolbar } from './components'
 import { usePanelResize, useRunWorkflow, useUsageLimits } from './hooks'
 
@@ -107,7 +107,7 @@ export function Panel() {
 
   // Chat state
   const { isChatOpen, setIsChatOpen } = useChatStore()
-  // const { isOpen: isVariablesOpen, setIsOpen: setVariablesOpen } = useVariablesStore()
+  const { isOpen: isVariablesOpen, setIsOpen: setVariablesOpen } = useVariablesStore()
 
   const currentWorkflow = activeWorkflowId ? workflows[activeWorkflowId] : null
 
@@ -285,10 +285,12 @@ export function Panel() {
                     <Layout className='h-3 w-3' animate={isAutoLayouting} variant='clockwise' />
                     <span>Auto layout</span>
                   </PopoverItem>
-                  {/* <PopoverItem onClick={() => setVariablesOpen(!isVariablesOpen)}>
-                    <Braces className='h-3 w-3' />
-                    <span>Variables</span>
-                  </PopoverItem> */}
+                  {
+                    <PopoverItem onClick={() => setVariablesOpen(!isVariablesOpen)}>
+                      <Braces className='h-3 w-3' />
+                      <span>Variables</span>
+                    </PopoverItem>
+                  }
                   {/* <PopoverItem>
                     <Bug className='h-3 w-3' />
                     <span>Debug</span>
@@ -469,7 +471,7 @@ export function Panel() {
       </Modal>
 
       {/* Floating Variables Modal */}
-      {/* <Variables /> */}
+      <Variables />
     </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
diff --git a/apps/sim/hooks/use-collaborative-workflow.ts b/apps/sim/hooks/use-collaborative-workflow.ts
