feat(engine): ✨ Improve variables in executed codes

apps/builder/components/shared/buttons/VariablesButton.tsx

@@ -0,0 +1,46 @@
+import {
+  Popover,
+  PopoverTrigger,
+  Flex,
+  Tooltip,
+  IconButton,
+  PopoverContent,
+  IconButtonProps,
+} from '@chakra-ui/react'
+import { UserIcon } from 'assets/icons'
+import { Variable } from 'models'
+import React from 'react'
+import { VariableSearchInput } from '../VariableSearchInput'
+
+type Props = {
+  onSelectVariable: (
+    variable: Pick<Variable, 'name' | 'id'> | undefined
+  ) => void
+} & Omit<IconButtonProps, 'aria-label'>
+
+export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
+  return (
+    <Popover matchWidth isLazy>
+      <PopoverTrigger>
+        <Flex>
+          <Tooltip label="Insert a variable">
+            <IconButton
+              aria-label={'Insert a variable'}
+              icon={<UserIcon />}
+              pos="relative"
+              {...props}
+            />
+          </Tooltip>
+        </Flex>
+      </PopoverTrigger>
+      <PopoverContent w="full">
+        <VariableSearchInput
+          onSelectVariable={onSelectVariable}
+          placeholder="Search for a variable"
+          shadow="lg"
+          isDefaultOpen
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}