✨ Customizable allowed origins

apps/builder/src/features/settings/components/SecurityForm.tsx

@@ -0,0 +1,50 @@
+import { FormControl, FormLabel, Stack } from '@chakra-ui/react'
+import { Settings } from '@typebot.io/schemas'
+import React from 'react'
+import { isDefined } from '@typebot.io/lib'
+import { TextInput } from '@/components/inputs'
+import { env } from '@typebot.io/env'
+import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
+import { PrimitiveList } from '@/components/PrimitiveList'
+
+type Props = {
+  security: Settings['security']
+  onUpdate: (security: Settings['security']) => void
+}
+
+export const SecurityForm = ({ security, onUpdate }: Props) => {
+  const updateItems = (items: string[]) => {
+    if (items.length === 0) onUpdate(undefined)
+    onUpdate({
+      allowedOrigins: items.filter(isDefined),
+    })
+  }
+
+  return (
+    <Stack spacing={6}>
+      <FormControl>
+        <FormLabel display="flex" flexShrink={0} gap="1" mr="0" mb="4">
+          Allowed origins
+          <MoreInfoTooltip>
+            Restrict the execution of your typebot to specific website origins.
+            By default your bot can be executed on any website.
+          </MoreInfoTooltip>
+        </FormLabel>
+        <PrimitiveList
+          initialItems={security?.allowedOrigins}
+          onItemsChange={updateItems}
+          addLabel="Add URL"
+        >
+          {({ item, onItemChange }) => (
+            <TextInput
+              width="full"
+              defaultValue={item}
+              onChange={onItemChange}
+              placeholder={env.NEXT_PUBLIC_VIEWER_URL[0]}
+            />
+          )}
+        </PrimitiveList>
+      </FormControl>
+    </Stack>
+  )
+}

apps/builder/src/features/settings/components/SettingsSideMenu.tsx

@@ -8,7 +8,12 @@ import {
   HStack,
   Stack,
 } from '@chakra-ui/react'
-import { ChatIcon, CodeIcon, MoreVerticalIcon } from '@/components/icons'
+import {
+  ChatIcon,
+  CodeIcon,
+  LockedIcon,
+  MoreVerticalIcon,
+} from '@/components/icons'
 import { Settings } from '@typebot.io/schemas'
 import React from 'react'
 import { GeneralSettingsForm } from './GeneralSettingsForm'
@@ -16,6 +21,7 @@ import { MetadataForm } from './MetadataForm'
 import { TypingEmulationForm } from './TypingEmulationForm'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { headerHeight } from '@/features/editor/constants'
+import { SecurityForm } from './SecurityForm'
 
 export const SettingsSideMenu = () => {
   const { typebot, updateTypebot } = useTypebot()
@@ -28,6 +34,12 @@ export const SettingsSideMenu = () => {
       updates: { settings: { ...typebot.settings, typingEmulation } },
     })
 
+  const updateSecurity = (security: Settings['security']) =>
+    typebot &&
+    updateTypebot({
+      updates: { settings: { ...typebot.settings, security } },
+    })
+
   const handleGeneralSettingsChange = (general: Settings['general']) =>
     typebot &&
     updateTypebot({ updates: { settings: { ...typebot.settings, general } } })
@@ -85,6 +97,23 @@ export const SettingsSideMenu = () => {
             )}
           </AccordionPanel>
         </AccordionItem>
+        <AccordionItem>
+          <AccordionButton py={6}>
+            <HStack flex="1" pl={2}>
+              <LockedIcon />
+              <Heading fontSize="lg">Security</Heading>
+            </HStack>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} px="6">
+            {typebot && (
+              <SecurityForm
+                security={typebot.settings.security}
+                onUpdate={updateSecurity}
+              />
+            )}
+          </AccordionPanel>
+        </AccordionItem>
         <AccordionItem>
           <AccordionButton py={6}>
             <HStack flex="1" pl={2}>