✨ Add "Generate variables" actions in AI blocks

Closes #1586

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx

@@ -22,6 +22,7 @@ import { isEmpty } from '@typebot.io/lib'
 import { useGraph } from '@/features/graph/providers/GraphProvider'
 import { ButtonsItemSettings } from './ButtonsItemSettings'
 import { useTranslate } from '@tolgee/react'
+import { convertStrToList } from '@typebot.io/lib/convertStrToList'
 
 type Props = {
   item: ButtonItem
@@ -70,26 +71,18 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
 
   const handleEditableChange = (val: string) => {
     if (val.length - itemValue.length && val.endsWith('\n')) return
-    const splittedBreakLines = val.split('\n')
-    const splittedCommas = val.split(',')
-    const isPastingMultipleItems =
-      val.length - itemValue.length > 1 &&
-      (splittedBreakLines.length > 2 || splittedCommas.length > 2)
-    if (isPastingMultipleItems) {
-      const values =
-        splittedBreakLines.length > 2 ? splittedBreakLines : splittedCommas
-      return values.forEach((v, i) => {
-        if (i === 0) {
-          setItemValue(v)
-        } else {
-          createItem(
-            { content: v.trim() },
-            { ...indices, itemIndex: indices.itemIndex + i }
-          )
-        }
+    if (val.length - itemValue.length === 1) return setItemValue(val)
+    const values = convertStrToList(val)
+    if (values.length === 1) {
+      setItemValue(values[0])
+    } else {
+      values.forEach((v, i) => {
+        createItem(
+          { content: v },
+          { ...indices, itemIndex: indices.itemIndex + i }
+        )
       })
     }
-    setItemValue(val)
   }
 
   const handlePlusClick = () => {

apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx

@@ -24,10 +24,11 @@ import {
   ForgedBlockDefinition,
   ForgedBlock,
 } from '@typebot.io/forge-repository/types'
-import { PrimitiveList } from '@/components/PrimitiveList'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { getZodInnerSchema } from '../../helpers/getZodInnerSchema'
+import { TagsInput } from '@/components/TagsInput'
+import { PrimitiveList } from '@/components/PrimitiveList'
 
 const mdComponents = {
   a: ({ href, children }) => (
@@ -316,28 +317,43 @@ const ZodArrayContent = ({
   const type = schema._def.type._def.innerType?._def.typeName
   if (type === 'ZodString' || type === 'ZodNumber' || type === 'ZodEnum')
     return (
-      <Stack spacing={0}>
+      <Stack
+        spacing={0}
+        marginTop={layout?.mergeWithLastField ? '-3' : undefined}
+      >
         {layout?.label && <FormLabel>{layout.label}</FormLabel>}
-        <Stack p="4" rounded="md" flex="1" borderWidth="1px">
-          <PrimitiveList
-            onItemsChange={(items) => {
-              onDataChange(items)
-            }}
-            initialItems={data}
-            addLabel={`Add ${layout?.itemLabel ?? ''}`}
-          >
-            {({ item, onItemChange }) => (
-              <ZodFieldLayout
-                schema={schema._def.type}
-                data={item}
-                blockDef={blockDef}
-                blockOptions={blockOptions}
-                isInAccordion={isInAccordion}
-                onDataChange={onItemChange}
-                width="full"
-              />
-            )}
-          </PrimitiveList>
+        <Stack
+          p="4"
+          rounded="md"
+          flex="1"
+          borderWidth="1px"
+          borderTopWidth={layout?.mergeWithLastField ? '0' : undefined}
+          borderTopRadius={layout?.mergeWithLastField ? '0' : undefined}
+          pt={layout?.mergeWithLastField ? '5' : undefined}
+        >
+          {type === 'ZodString' ? (
+            <TagsInput items={data} onChange={onDataChange} />
+          ) : (
+            <PrimitiveList
+              onItemsChange={(items) => {
+                onDataChange(items)
+              }}
+              initialItems={data}
+              addLabel={`Add ${layout?.itemLabel ?? ''}`}
+            >
+              {({ item, onItemChange }) => (
+                <ZodFieldLayout
+                  schema={schema._def.type}
+                  data={item}
+                  blockDef={blockDef}
+                  blockOptions={blockOptions}
+                  isInAccordion={isInAccordion}
+                  onDataChange={onItemChange}
+                  width="full"
+                />
+              )}
+            </PrimitiveList>
+          )}
         </Stack>
       </Stack>
     )

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

@@ -2,10 +2,9 @@ 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'
+import { TagsInput } from '@/components/TagsInput'
+import { env } from '@typebot.io/env'
 
 type Props = {
   security: Settings['security']
@@ -30,20 +29,11 @@ export const SecurityForm = ({ security, onUpdate }: Props) => {
             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>
+        <TagsInput
+          items={security?.allowedOrigins}
+          onChange={updateItems}
+          placeholder={env.NEXT_PUBLIC_VIEWER_URL[0]}
+        />
       </FormControl>
     </Stack>
   )