♻️ Normalize data

apps/builder/services/analytics.ts

@@ -1,4 +1,4 @@
-import { Stats } from 'bot-engine'
+import { Stats } from 'models'
 import useSWR from 'swr'
 import { fetcher } from './utils'
 

apps/builder/services/graph.ts

@@ -1,5 +1,5 @@
 import { Coordinates } from '@dnd-kit/core/dist/types'
-import { Block, StartBlock } from 'bot-engine'
+import { Block } from 'models'
 import { AnchorsPositionProps } from 'components/board/graph/Edges/Edge'
 import {
   stubLength,
@@ -143,7 +143,7 @@ const computeFiveSegments = (
 }
 
 export const getAnchorsPosition = (
-  sourceBlock: Block | StartBlock,
+  sourceBlock: Block,
   targetBlock: Block,
   sourceStepIndex: number,
   targetStepIndex?: number

apps/builder/services/publicTypebot.tsx

@@ -1,11 +1,4 @@
-import {
-  Block,
-  InputStep,
-  PublicTypebot,
-  Step,
-  StepType,
-  Typebot,
-} from 'bot-engine'
+import { InputStep, PublicTypebot, Step, StepType, Typebot } from 'models'
 import { sendRequest } from './utils'
 import shortId from 'short-uuid'
 import { HStack, Text } from '@chakra-ui/react'
@@ -17,8 +10,8 @@ export const parseTypebotToPublicTypebot = (
 ): PublicTypebot => ({
   id: shortId.generate(),
   blocks: typebot.blocks,
+  steps: typebot.steps,
   name: typebot.name,
-  startBlock: typebot.startBlock,
   typebotId: typebot.id,
   theme: typebot.theme,
   settings: typebot.settings,
@@ -28,7 +21,7 @@ export const parseTypebotToPublicTypebot = (
 export const createPublishedTypebot = async (
   typebot: Omit<PublicTypebot, 'id'>
 ) =>
-  sendRequest({
+  sendRequest<PublicTypebot>({
     url: `/api/publicTypebots`,
     method: 'POST',
     body: typebot,
@@ -49,32 +42,47 @@ export const parseSubmissionsColumns = (
 ): {
   Header: JSX.Element
   accessor: string
-}[] => [
-  {
-    Header: (
-      <HStack>
-        <CalendarIcon />
-        <Text>Submitted at</Text>
-      </HStack>
-    ),
-    accessor: 'createdAt',
-  },
-  ...(typebot?.blocks ?? []).filter(blockContainsInput).map((block) => ({
-    Header: (
-      <HStack>
-        <StepIcon
-          type={
-            block.steps.find((step) => step.target)?.type ?? StepType.TEXT_INPUT
-          }
-        />
-        <Text>{block.title}</Text>
-      </HStack>
-    ),
-    accessor: block.id,
-  })),
-]
+}[] => {
+  console.log(typebot)
+  if (!typebot) return []
+  return [
+    {
+      Header: (
+        <HStack>
+          <CalendarIcon />
+          <Text>Submitted at</Text>
+        </HStack>
+      ),
+      accessor: 'createdAt',
+    },
+    ...typebot.blocks.allIds
+      .filter((blockId) => typebot && blockContainsInput(typebot, blockId))
+      .map((blockId) => {
+        const block = typebot.blocks.byId[blockId]
+        const inputStepId = block.stepIds.find((stepId) =>
+          stepIsInput(typebot.steps.byId[stepId])
+        )
+        const inputStep = typebot.steps.byId[inputStepId as string]
+        return {
+          Header: (
+            <HStack>
+              <StepIcon type={inputStep.type} />
+              <Text>{block.title}</Text>
+            </HStack>
+          ),
+          accessor: blockId,
+        }
+      }),
+  ]
+}
 
-const blockContainsInput = (block: Block) => block.steps.some(stepIsInput)
+const blockContainsInput = (
+  typebot: PublicTypebot | Typebot,
+  blockId: string
+) =>
+  typebot.blocks.byId[blockId].stepIds.some((stepId) =>
+    stepIsInput(typebot.steps.byId[stepId])
+  )
 
 const stepIsInput = (step: Step): step is InputStep =>
   step.type === StepType.TEXT_INPUT

apps/builder/services/results.ts

@@ -1,4 +1,4 @@
-import { Result } from 'bot-engine'
+import { Result } from 'models'
 import useSWRInfinite from 'swr/infinite'
 import { fetcher, sendRequest } from './utils'
 import { stringify } from 'qs'

apps/builder/services/typebots.ts

@@ -5,9 +5,13 @@ import {
   TextStep,
   TextInputStep,
   PublicTypebot,
-} from 'bot-engine'
+  BackgroundType,
+  Settings,
+  StartStep,
+  Theme,
+} from 'models'
 import shortId from 'short-uuid'
-import { Typebot } from 'bot-engine'
+import { Typebot } from 'models'
 import useSWR from 'swr'
 import { fetcher, sendRequest, toKebabCase } from './utils'
 import { deepEqual } from 'fast-equals'
@@ -85,13 +89,9 @@ export const patchTypebot = async (id: string, typebot: Partial<Typebot>) =>
   })
 
 export const parseNewBlock = ({
-  type,
   totalBlocks,
   initialCoordinates,
-  step,
 }: {
-  step?: Step
-  type?: StepType
   totalBlocks: number
   initialCoordinates: { x: number; y: number }
 }): Block => {
@@ -100,9 +100,7 @@ export const parseNewBlock = ({
     id,
     title: `Block #${totalBlocks + 1}`,
     graphCoordinates: initialCoordinates,
-    steps: [
-      step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
-    ],
+    stepIds: [],
   }
 }
 
@@ -158,11 +156,58 @@ export const checkIfPublished = (
   publicTypebot: PublicTypebot
 ) =>
   deepEqual(typebot.blocks, publicTypebot.blocks) &&
-  deepEqual(typebot.startBlock, publicTypebot.startBlock) &&
+  deepEqual(typebot.steps, publicTypebot.steps) &&
   typebot.name === publicTypebot.name &&
   typebot.publicId === publicTypebot.publicId &&
   deepEqual(typebot.settings, publicTypebot.settings) &&
   deepEqual(typebot.theme, publicTypebot.theme)
 
 export const parseDefaultPublicId = (name: string, id: string) =>
-  toKebabCase(`${name}-${id?.slice(0, 5)}`)
+  toKebabCase(name) + `-${id?.slice(-7)}`
+
+export const parseNewTypebot = ({
+  ownerId,
+  folderId,
+  name,
+}: {
+  ownerId: string
+  folderId: string | null
+  name: string
+}): Partial<Typebot> => {
+  const startBlockId = shortId.generate()
+  const startStepId = shortId.generate()
+  const startStep: StartStep = {
+    blockId: startBlockId,
+    id: startStepId,
+    label: 'Start',
+    type: StepType.START,
+  }
+  const startBlock: Block = {
+    id: startBlockId,
+    title: 'Start',
+    graphCoordinates: { x: 0, y: 0 },
+    stepIds: [startStepId],
+  }
+  const theme: Theme = {
+    general: {
+      font: 'Open Sans',
+      background: { type: BackgroundType.NONE, content: '#ffffff' },
+    },
+  }
+  const settings: Settings = {
+    typingEmulation: {
+      enabled: true,
+      speed: 300,
+      maxDelay: 1.5,
+    },
+  }
+  return {
+    folderId,
+    name,
+    ownerId,
+    blocks: { byId: { [startBlockId]: startBlock }, allIds: [startBlockId] },
+    steps: { byId: { [startStepId]: startStep }, allIds: [startStepId] },
+    theme,
+    settings,
+  }
+}