styling improvements

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/code.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Wand2 } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { highlight, languages } from 'prismjs'
 import 'prismjs/components/prism-javascript'
 import 'prismjs/themes/prism.css'
@@ -73,7 +74,9 @@ export function Code({
   onValidationChange,
   wandConfig,
 }: CodeProps) {
-  // Determine the AI prompt placeholder based on language
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+
   const aiPromptPlaceholder = useMemo(() => {
     switch (generationType) {
       case 'json-schema':
@@ -503,6 +506,7 @@ export function Code({
               searchTerm={searchTerm}
               inputValue={code}
               cursorPosition={cursorPosition}
+              workspaceId={workspaceId}
               onClose={() => {
                 setShowEnvVars(false)
                 setSearchTerm('')

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/combobox.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Check, ChevronDown } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { useReactFlow } from 'reactflow'
 import { Button } from '@/components/ui/button'
 import { checkEnvVarTrigger, EnvVarDropdown } from '@/components/ui/env-var-dropdown'
@@ -45,6 +46,8 @@ export function ComboBox({
   config,
   isWide = false,
 }: ComboBoxProps) {
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
   const [storeValue, setStoreValue] = useSubBlockValue<string>(blockId, subBlockId)
   const [storeInitialized, setStoreInitialized] = useState(false)
   const [open, setOpen] = useState(false)
@@ -508,6 +511,7 @@ export function ComboBox({
         searchTerm={searchTerm}
         inputValue={displayValue}
         cursorPosition={cursorPosition}
+        workspaceId={workspaceId}
         onClose={() => {
           setShowEnvVars(false)
           setSearchTerm('')

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/condition-input.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { ChevronDown, ChevronUp, Plus, Trash } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { highlight, languages } from 'prismjs'
 import 'prismjs/components/prism-javascript'
 import 'prismjs/themes/prism.css'
@@ -52,6 +53,8 @@ export function ConditionInput({
   previewValue,
   disabled = false,
 }: ConditionInputProps) {
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
   const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlockId)
 
   const emitTagSelection = useTagSelection(blockId, subBlockId)
@@ -796,6 +799,7 @@ export function ConditionInput({
                     searchTerm={block.searchTerm}
                     inputValue={block.value}
                     cursorPosition={block.cursorPosition}
+                    workspaceId={workspaceId}
                     onClose={() => {
                       setConditionalBlocks((blocks) =>
                         blocks.map((b) =>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/long-input.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { ChevronsUpDown, Wand2 } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { useReactFlow } from 'reactflow'
 import { Button } from '@/components/ui/button'
 import { checkEnvVarTrigger, EnvVarDropdown } from '@/components/ui/env-var-dropdown'
@@ -49,6 +50,8 @@ export function LongInput({
   onChange,
   disabled,
 }: LongInputProps) {
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
   // Local state for immediate UI updates during streaming
   const [localContent, setLocalContent] = useState<string>('')
 
@@ -457,6 +460,7 @@ export function LongInput({
               searchTerm={searchTerm}
               inputValue={value?.toString() ?? ''}
               cursorPosition={cursorPosition}
+              workspaceId={workspaceId}
               onClose={() => {
                 setShowEnvVars(false)
                 setSearchTerm('')

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/short-input.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Wand2 } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { useReactFlow } from 'reactflow'
 import { Button } from '@/components/ui/button'
 import { checkEnvVarTrigger, EnvVarDropdown } from '@/components/ui/env-var-dropdown'
@@ -85,6 +86,9 @@ export function ShortInput({
 
   const emitTagSelection = useTagSelection(blockId, subBlockId)
 
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+
   // Get ReactFlow instance for zoom control
   const reactFlowInstance = useReactFlow()
 
@@ -199,7 +203,7 @@ export function ShortInput({
   }, [value])
 
   // Handle paste events to ensure long values are handled correctly
-  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+  const handlePaste = (_e: React.ClipboardEvent<HTMLInputElement>) => {
     // Let the paste happen normally
     // Then ensure scroll positions are synced after the content is updated
     setTimeout(() => {
@@ -447,6 +451,7 @@ export function ShortInput({
               searchTerm={searchTerm}
               inputValue={value?.toString() ?? ''}
               cursorPosition={cursorPosition}
+              workspaceId={workspaceId}
               onClose={() => {
                 setShowEnvVars(false)
                 setSearchTerm('')

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/table.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Trash2 } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { Button } from '@/components/ui/button'
 import { checkEnvVarTrigger, EnvVarDropdown } from '@/components/ui/env-var-dropdown'
 import { formatDisplayText } from '@/components/ui/formatted-text'
@@ -30,6 +31,8 @@ export function Table({
   previewValue,
   disabled = false,
 }: TableProps) {
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
   const [storeValue, setStoreValue] = useSubBlockValue<TableRow[]>(blockId, subBlockId)
 
   // Use preview value when in preview mode, otherwise use store value
@@ -287,6 +290,7 @@ export function Table({
             searchTerm={activeCell.searchTerm}
             inputValue={rows[activeCell.rowIndex].cells[activeCell.column] || ''}
             cursorPosition={activeCell.cursorPosition}
+            workspaceId={workspaceId}
             onClose={() => {
               setActiveCell((prev) => (prev ? { ...prev, showEnvVars: false } : null))
             }}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Code, FileJson, Trash2, Wand2, X } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -66,6 +67,8 @@ export function CustomToolModal({
   blockId,
   initialValues,
 }: CustomToolModalProps) {
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
   const [activeSection, setActiveSection] = useState<ToolSection>('schema')
   const [jsonSchema, setJsonSchema] = useState('')
   const [functionCode, setFunctionCode] = useState('')
@@ -1070,6 +1073,7 @@ try {
                       searchTerm={searchTerm}
                       inputValue={functionCode}
                       cursorPosition={cursorPosition}
+                      workspaceId={workspaceId}
                       onClose={() => {
                         setShowEnvVars(false)
                         setSearchTerm('')