🚀 Init preview and typebot cotext in editor

apps/builder/services/graph.ts

@@ -1,13 +1,5 @@
 import { Coordinates } from '@dnd-kit/core/dist/types'
-import {
-  StepType,
-  Block,
-  Step,
-  TextStep,
-  ImageStep,
-  DatePickerStep,
-  StartBlock,
-} from 'bot-engine'
+import { Block, StartBlock } from 'bot-engine'
 import { AnchorsPositionProps } from 'components/board/graph/Edges/Edge'
 import {
   stubLength,
@@ -16,54 +8,9 @@ import {
   spaceBetweenSteps,
   firstStepOffsetY,
 } from 'contexts/GraphContext'
-import shortId from 'short-uuid'
 import { roundCorners } from 'svg-round-corners'
 import { isDefined } from './utils'
 
-export const parseNewBlock = ({
-  type,
-  totalBlocks,
-  initialCoordinates,
-  step,
-}: {
-  step?: Step
-  type?: StepType
-  totalBlocks: number
-  initialCoordinates: { x: number; y: number }
-}): Block => {
-  const id = `b${shortId.generate()}`
-  return {
-    id,
-    title: `Block #${totalBlocks + 1}`,
-    graphCoordinates: initialCoordinates,
-    steps: [
-      step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
-    ],
-  }
-}
-
-export const parseNewStep = (type: StepType, blockId: string): Step => {
-  const id = `s${shortId.generate()}`
-  switch (type) {
-    case StepType.TEXT: {
-      const textStep: TextStep = { type, content: '' }
-      return { blockId, id, ...textStep }
-    }
-    case StepType.IMAGE: {
-      const imageStep: ImageStep = { type, content: { url: '' } }
-      return { blockId, id, ...imageStep }
-    }
-    case StepType.DATE_PICKER: {
-      const imageStep: DatePickerStep = { type, content: '' }
-      return { blockId, id, ...imageStep }
-    }
-    default: {
-      const textStep: TextStep = { type: StepType.TEXT, content: '' }
-      return { blockId, id, ...textStep }
-    }
-  }
-}
-
 export const computeFlowChartConnectorPath = ({
   sourcePosition,
   targetPosition,

apps/builder/services/typebots.ts

@@ -1,6 +1,16 @@
-import { Typebot } from 'db'
+import {
+  Step,
+  StepType,
+  Block,
+  TextStep,
+  PublicTypebot,
+  TextInputStep,
+} from 'bot-engine'
+import shortId from 'short-uuid'
+import { Typebot } from 'bot-engine'
 import useSWR from 'swr'
 import { fetcher, sendRequest } from './utils'
+import { deepEqual } from 'fast-equals'
 
 export const useTypebots = ({
   folderId,
@@ -67,3 +77,82 @@ export const updateTypebot = async (id: string, typebot: Partial<Typebot>) =>
     method: 'PATCH',
     body: typebot,
   })
+
+export const parseNewBlock = ({
+  type,
+  totalBlocks,
+  initialCoordinates,
+  step,
+}: {
+  step?: Step
+  type?: StepType
+  totalBlocks: number
+  initialCoordinates: { x: number; y: number }
+}): Block => {
+  const id = `b${shortId.generate()}`
+  return {
+    id,
+    title: `Block #${totalBlocks + 1}`,
+    graphCoordinates: initialCoordinates,
+    steps: [
+      step ? { ...step, blockId: id } : parseNewStep(type as StepType, id),
+    ],
+  }
+}
+
+export const parseNewStep = (type: StepType, blockId: string): Step => {
+  const id = `s${shortId.generate()}`
+  switch (type) {
+    case StepType.TEXT: {
+      const textStep: Pick<TextStep, 'type' | 'content'> = {
+        type,
+        content: { html: '', richText: [], plainText: '' },
+      }
+      return {
+        id,
+        blockId,
+        ...textStep,
+      }
+    }
+    case StepType.TEXT_INPUT: {
+      const textStep: Pick<TextInputStep, 'type'> = {
+        type,
+      }
+      return {
+        id,
+        blockId,
+        ...textStep,
+      }
+    }
+    default: {
+      const textStep: Pick<TextStep, 'type' | 'content'> = {
+        type: StepType.TEXT,
+        content: { html: '', richText: [], plainText: '' },
+      }
+      return { blockId, id, ...textStep }
+    }
+  }
+}
+
+export const checkIfTypebotsAreEqual = (
+  firstChatbot: Typebot,
+  secondChatbot: Typebot
+) =>
+  deepEqual(
+    {
+      ...firstChatbot,
+    },
+    {
+      ...secondChatbot,
+    }
+  )
+
+export const parseTypebotToPublicTypebot = (
+  typebot: Typebot
+): PublicTypebot => ({
+  id: shortId.generate(),
+  blocks: typebot.blocks,
+  name: typebot.name,
+  startBlock: typebot.startBlock,
+  typebotId: typebot.id,
+})

apps/builder/services/utils.ts

@@ -1,3 +1,5 @@
+import { Parser } from 'htmlparser2'
+
 export const fetcher = async (input: RequestInfo, init?: RequestInit) => {
   const res = await fetch(input, init)
   return res.json()
@@ -44,3 +46,20 @@ export const isDefined = <T>(value: T | undefined | null): value is T => {
 export const isNotDefined = <T>(value: T | undefined | null): value is T => {
   return <T>value === undefined || <T>value === null
 }
+
+export const preventUserFromRefreshing = (e: BeforeUnloadEvent) => {
+  e.preventDefault()
+  e.returnValue = ''
+}
+
+export const parseHtmlStringToPlainText = (html: string): string => {
+  let label = ''
+  const parser = new Parser({
+    ontext(text) {
+      label += `${text}`
+    },
+  })
+  parser.write(html)
+  parser.end()
+  return label
+}