⚡ (setVariable) Add client-side set variable execution

Closes #461

apps/builder/src/components/ImageUploadContent/UnsplashPicker.tsx

@@ -42,7 +42,6 @@ export const UnsplashPicker = ({ imageSize, onImageSelect }: Props) => {
   const [nextPage, setNextPage] = useState(0)
 
   const fetchNewImages = useCallback(async (query: string, page: number) => {
-    console.log('Fetch images', query, page)
     if (query === '') return searchRandomImages()
     if (query.length <= 2) return
     setError(null)
@@ -76,7 +75,6 @@ export const UnsplashPicker = ({ imageSize, onImageSelect }: Props) => {
     if (!bottomAnchor.current) return
     const observer = new IntersectionObserver(
       (entities: IntersectionObserverEntry[]) => {
-        console.log('Intersection observer', entities)
         const target = entities[0]
         if (target.isIntersecting) fetchNewImages(searchQuery, nextPage + 1)
       },

apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx

@@ -4,6 +4,7 @@ import { SetVariableOptions, Variable } from '@typebot.io/schemas'
 import React from 'react'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { Textarea } from '@/components/inputs'
+import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 
 type Props = {
   options: SetVariableOptions
@@ -11,16 +12,24 @@ type Props = {
 }
 
 export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
-  const handleVariableChange = (variable?: Variable) =>
+  const updateVariableId = (variable?: Variable) =>
     onOptionsChange({ ...options, variableId: variable?.id })
-  const handleExpressionChange = (expressionToEvaluate: string) =>
+
+  const updateExpression = (expressionToEvaluate: string) =>
     onOptionsChange({ ...options, expressionToEvaluate })
-  const handleValueTypeChange = () =>
+
+  const updateExpressionType = () =>
     onOptionsChange({
       ...options,
       isCode: options.isCode ? !options.isCode : true,
     })
 
+  const updateClientExecution = (isExecutedOnClient: boolean) =>
+    onOptionsChange({
+      ...options,
+      isExecutedOnClient,
+    })
+
   return (
     <Stack spacing={4}>
       <Stack>
@@ -28,7 +37,7 @@ export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
           Search or create variable:
         </FormLabel>
         <VariableSearchInput
-          onSelectVariable={handleVariableChange}
+          onSelectVariable={updateVariableId}
           initialVariableId={options.variableId}
           id="variable-search"
         />
@@ -43,7 +52,7 @@ export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
             <Switch
               size="sm"
               isChecked={options.isCode ?? false}
-              onChange={handleValueTypeChange}
+              onChange={updateExpressionType}
             />
             <Text fontSize="sm">Code</Text>
           </HStack>
@@ -52,17 +61,23 @@ export const SetVariableSettings = ({ options, onOptionsChange }: Props) => {
         {options.isCode ?? false ? (
           <CodeEditor
             defaultValue={options.expressionToEvaluate ?? ''}
-            onChange={handleExpressionChange}
+            onChange={updateExpression}
             lang="javascript"
           />
         ) : (
           <Textarea
             id="expression"
             defaultValue={options.expressionToEvaluate ?? ''}
-            onChange={handleExpressionChange}
+            onChange={updateExpression}
           />
         )}
       </Stack>
+      <SwitchWithLabel
+        label="Execute on client?"
+        moreInfoContent="Check this if you need access to client-only variables like `window` or `document`."
+        initialValue={options.isExecutedOnClient ?? false}
+        onCheckChange={updateClientExecution}
+      />
     </Stack>
   )
 }