♻️ Introduce typebot v6 with events (#1013)

Closes #885

apps/builder/src/components/DropdownList.tsx

@@ -10,7 +10,7 @@ import {
   Stack,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from '@/components/icons'
-import React, { ReactNode } from 'react'
+import React from 'react'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Props<T extends readonly any[]> = {
@@ -42,7 +42,7 @@ export const DropdownList = <T extends readonly any[]>({
         {...props}
       >
         <chakra.span noOfLines={1} display="block">
-          {(currentItem ?? placeholder) as unknown as ReactNode}
+          {currentItem ?? placeholder}
         </chakra.span>
       </MenuButton>
       <Portal>
@@ -57,7 +57,7 @@ export const DropdownList = <T extends readonly any[]>({
                 textOverflow="ellipsis"
                 onClick={handleMenuItemClick(item)}
               >
-                {item as unknown as ReactNode}
+                {item}
               </MenuItem>
             ))}
           </Stack>

apps/builder/src/components/TableList.tsx

@@ -11,6 +11,10 @@ import { TrashIcon, PlusIcon } from '@/components/icons'
 import { createId } from '@paralleldrive/cuid2'
 import React, { useEffect, useState } from 'react'
 
+const defaultItem = {
+  id: createId(),
+}
+
 type ItemWithId<T> = T & { id: string }
 
 export type TableListItemProps<T> = {
@@ -19,10 +23,11 @@ export type TableListItemProps<T> = {
 }
 
 type Props<T> = {
-  initialItems: ItemWithId<T>[]
+  initialItems?: ItemWithId<T>[]
   isOrdered?: boolean
   addLabel?: string
   newItemDefaultProps?: Partial<T>
+  hasDefaultItem?: boolean
   Item: (props: TableListItemProps<T>) => JSX.Element
   ComponentBetweenItems?: (props: unknown) => JSX.Element
   onItemsChange: (items: ItemWithId<T>[]) => void
@@ -33,15 +38,19 @@ export const TableList = <T,>({
   isOrdered,
   addLabel = 'Add',
   newItemDefaultProps,
+  hasDefaultItem,
   Item,
   ComponentBetweenItems,
   onItemsChange,
 }: Props<T>) => {
-  const [items, setItems] = useState(initialItems)
+  const [items, setItems] = useState(
+    initialItems ?? hasDefaultItem ? ([defaultItem] as ItemWithId<T>[]) : []
+  )
   const [showDeleteIndex, setShowDeleteIndex] = useState<number | null>(null)
 
   useEffect(() => {
-    if (items.length && initialItems.length === 0) setItems(initialItems)
+    if (items.length && initialItems && initialItems?.length === 0)
+      setItems(initialItems)
   }, [initialItems, items.length])
 
   const createItem = () => {

apps/builder/src/components/inputs/AutocompleteInput.tsx

@@ -9,9 +9,8 @@ import {
   Input,
   HStack,
   FormControl,
-  FormLabel,
 } from '@chakra-ui/react'
-import { useState, useRef, useEffect, ReactNode } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { isDefined } from '@typebot.io/lib'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
@@ -20,7 +19,6 @@ import { VariablesButton } from '@/features/variables/components/VariablesButton
 import { Variable } from '@typebot.io/schemas'
 import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
 import { focusInput } from '@/helpers/focusInput'
-import { MoreInfoTooltip } from '../MoreInfoTooltip'
 import { env } from '@typebot.io/env'
 
 type Props = {
@@ -30,7 +28,6 @@ type Props = {
   debounceTimeout?: number
   placeholder?: string
   withVariableButton?: boolean
-  label?: ReactNode
   moreInfoTooltip?: string
   isRequired?: boolean
   onChange: (value: string) => void
@@ -44,8 +41,6 @@ export const AutocompleteInput = ({
   withVariableButton = true,
   value,
   defaultValue,
-  label,
-  moreInfoTooltip,
   isRequired,
 }: Props) => {
   const bg = useColorModeValue('gray.200', 'gray.700')
@@ -161,14 +156,6 @@ export const AutocompleteInput = ({
 
   return (
     <FormControl isRequired={isRequired}>
-      {label && (
-        <FormLabel>
-          {label}{' '}
-          {moreInfoTooltip && (
-            <MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>
-          )}
-        </FormLabel>
-      )}
       <HStack ref={dropdownRef} spacing={0} w="full">
         <Popover
           isOpen={isOpen}

apps/builder/src/components/inputs/Select.tsx

@@ -168,7 +168,7 @@ export const Select = <T extends Item>({
               pr={selectedItem ? 16 : 8}
               w="full"
             >
-              {!isTouched && (
+              {!isTouched && items && (
                 <Text noOfLines={1} data-testid="selected-item-label">
                   {inputValue}
                 </Text>