refactor: ♻️ Migrate from short-uuid to cuid lib

apps/builder/.env.local.example

@@ -1,4 +1,4 @@
-DATABASE_URL=postgresql://postgres:@localhost:5432/typebot
+DATABASE_URL=postgresql://postgres:typebot@localhost:5432/typebot
 ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6 #256-bits secret (can be generated here: https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx)
 NEXTAUTH_URL=http://localhost:3000
 NEXT_PUBLIC_VIEWER_URL=http://localhost:3001
@@ -10,5 +10,8 @@ S3_PORT=9000
 S3_ENDPOINT=localhost
 S3_SSL=false
 
+# Used for Google Fonts dropdown
+NEXT_PUBLIC_GOOGLE_API_KEY=AIzaSyAWuhjY55xbR-J9Yb1nkAQ13r6A7GDCx2k
+
 # For more configuration options check out:
 https://docs.typebot.io/self-hosting/configuration

apps/builder/components/shared/Graph/Graph.tsx

@@ -9,11 +9,11 @@ import { useStepDnd } from 'contexts/GraphDndContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 import { DraggableStepType, PublicTypebot, Typebot } from 'models'
-import { generate } from 'short-uuid'
 import { AnswersCount } from 'services/analytics'
 import { useDebounce } from 'use-debounce'
 import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
 import GraphContent from './GraphContent'
+import cuid from 'cuid'
 
 declare const window: { chrome: unknown | undefined }
 
@@ -81,7 +81,7 @@ export const Graph = ({
       x: e.clientX - graphPosition.x - blockWidth / 3,
       y: e.clientY - graphPosition.y - 20 - headerHeight,
     }
-    const id = generate()
+    const id = cuid()
     updateBlockCoordinates(id, coordinates)
     createBlock({
       id,

apps/builder/components/shared/TableList.tsx

@@ -1,9 +1,9 @@
 import { Box, Button, Fade, Flex, IconButton, Stack } from '@chakra-ui/react'
 import { TrashIcon, PlusIcon } from 'assets/icons'
+import cuid from 'cuid'
 import { dequal } from 'dequal'
 import { Draft } from 'immer'
 import React, { useEffect, useState } from 'react'
-import { generate } from 'short-uuid'
 import { useImmer } from 'use-immer'
 
 type ItemWithId<T> = T & { id: string }
@@ -42,7 +42,7 @@ export const TableList = <T,>({
 
   const createItem = () => {
     setItems((items) => {
-      const id = generate()
+      const id = cuid()
       const newItem = { id } as Draft<ItemWithId<T>>
       items.push(newItem)
     })

apps/builder/components/shared/VariableSearchInput.tsx

@@ -12,9 +12,9 @@ import {
 } from '@chakra-ui/react'
 import { PlusIcon, TrashIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext'
+import cuid from 'cuid'
 import { Variable } from 'models'
 import React, { useState, useRef, ChangeEvent, useEffect } from 'react'
-import { generate } from 'short-uuid'
 import { useDebounce } from 'use-debounce'
 import { byId, isNotDefined } from 'utils'
 
@@ -89,7 +89,7 @@ export const VariableSearchInput = ({
 
   const handleCreateNewVariableClick = () => {
     if (!inputValue || inputValue === '') return
-    const id = generate()
+    const id = cuid()
     onSelectVariable({ id, name: inputValue })
     createVariable({ id, name: inputValue })
     onClose()

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -39,11 +39,11 @@ import { useRegisterActions } from 'kbar'
 import useUndo from 'services/utils/useUndo'
 import { useDebounce } from 'use-debounce'
 import { itemsAction, ItemsActions } from './actions/items'
-import { generate } from 'short-uuid'
 import { dequal } from 'dequal'
 import { User } from 'db'
 import { saveWebhook } from 'services/webhook'
 import { stringify } from 'qs'
+import cuid from 'cuid'
 const autoSaveTimeout = 10000
 
 type UpdateTypebotPayload = Partial<{
@@ -291,7 +291,7 @@ export const TypebotContext = ({
 
   const publishTypebot = async () => {
     if (!localTypebot) return
-    const publishedTypebotId = generate()
+    const publishedTypebotId = cuid()
     const newLocalTypebot = { ...localTypebot }
     if (publishedTypebot && isNotDefined(localTypebot.publishedTypebotId)) {
       updateLocalTypebot({ publishedTypebotId: publishedTypebot.id })

apps/builder/contexts/TypebotContext/actions/edges.ts

@@ -1,9 +1,9 @@
 import { Typebot, Edge, StepWithItems, StepIndices, ItemIndices } from 'models'
 import { WritableDraft } from 'immer/dist/types/types-external'
-import { generate } from 'short-uuid'
 import { SetTypebot } from '../TypebotContext'
 import { produce } from 'immer'
 import { byId, isDefined, stepHasItems } from 'utils'
+import cuid from 'cuid'
 
 export type EdgesActions = {
   createEdge: (edge: Omit<Edge, 'id'>) => void
@@ -17,7 +17,7 @@ export const edgesAction = (setTypebot: SetTypebot): EdgesActions => ({
       produce(typebot, (typebot) => {
         const newEdge = {
           ...edge,
-          id: generate(),
+          id: cuid(),
         }
         removeExistingEdge(typebot, edge)
         typebot.edges.push(newEdge)
@@ -73,11 +73,10 @@ const addEdgeIdToItem = (
   typebot: WritableDraft<Typebot>,
   edgeId: string,
   { blockIndex, stepIndex, itemIndex }: ItemIndices
-) => {
+) =>
-  ;(typebot.blocks[blockIndex].steps[stepIndex] as StepWithItems).items[
+  ((typebot.blocks[blockIndex].steps[stepIndex] as StepWithItems).items[
     itemIndex
-  ].outgoingEdgeId = edgeId
+  ].outgoingEdgeId = edgeId)
-}
 
 export const deleteEdgeDraft = (
   typebot: WritableDraft<Typebot>,
@@ -107,11 +106,10 @@ const deleteOutgoingEdgeIdProps = (
   if (fromStepIndex !== -1)
     typebot.blocks[fromBlockIndex].steps[fromStepIndex].outgoingEdgeId =
       undefined
-  if (fromItemIndex !== -1) {
+  if (fromItemIndex !== -1)
-    ;(
+    (
       typebot.blocks[fromBlockIndex].steps[fromStepIndex] as StepWithItems
     ).items[fromItemIndex].outgoingEdgeId = undefined
-  }
 }
 
 export const cleanUpEdgeDraft = (

apps/builder/contexts/TypebotContext/actions/items.ts

@@ -9,7 +9,7 @@ import { SetTypebot } from '../TypebotContext'
 import produce from 'immer'
 import { cleanUpEdgeDraft } from './edges'
 import { stepHasItems } from 'utils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 export type ItemsActions = {
   createItem: (item: Omit<ButtonItem, 'id'>, indices: ItemIndices) => void
@@ -29,7 +29,7 @@ const itemsAction = (setTypebot: SetTypebot): ItemsActions => ({
         step.items.splice(itemIndex, 0, {
           ...item,
           stepId: step.id,
-          id: generate(),
+          id: cuid(),
         })
       })
     ),

apps/builder/layouts/dashboard/TemplatesContent.tsx

@@ -14,7 +14,6 @@ import { Typebot } from 'models'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { createTypebot, importTypebot } from 'services/typebots/typebots'
-import { generate } from 'short-uuid'
 
 export type TemplateProps = { name: string; emoji: string; fileName: string }
 const templates: TemplateProps[] = [

apps/builder/package.json

@@ -64,12 +64,12 @@
     "nodemailer": "^6.7.2",
     "nprogress": "^0.2.0",
     "papaparse": "^5.3.1",
+    "prettier": "^2.5.1",
     "qs": "^6.10.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
     "react-table": "^7.7.0",
-    "short-uuid": "^4.2.0",
     "slate": "^0.73.1",
     "slate-history": "^0.66.0",
     "slate-hyperscript": "^0.67.0",
@@ -81,11 +81,9 @@
     "typebot-js": "*",
     "use-debounce": "^7.0.1",
     "use-immer": "^0.6.0",
-    "utils": "*",
+    "utils": "*"
-    "prettier": "^2.5.1"
   },
   "devDependencies": {
-    "@types/prettier": "^2.4.4",
     "@playwright/test": "^1.19.2",
     "@types/google-spreadsheet": "^3.1.5",
     "@types/jsonwebtoken": "8.5.8",
@@ -95,6 +93,7 @@
     "@types/nodemailer": "^6.4.4",
     "@types/nprogress": "^0.2.0",
     "@types/papaparse": "^5.3.2",
+    "@types/prettier": "^2.4.4",
     "@types/qs": "^6.9.7",
     "@types/react": "^17.0.40",
     "@types/react-table": "^7.7.9",

apps/builder/playwright/tests/bubbles/image.spec.ts

@@ -6,7 +6,7 @@ import {
 import { BubbleStepType, defaultImageBubbleContent } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import path from 'path'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 const unsplashImageSrc =
   'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
@@ -14,7 +14,7 @@ const unsplashImageSrc =
 test.describe.parallel('Image bubble step', () => {
   test.describe('Content settings', () => {
     test('should upload image file correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -42,7 +42,7 @@ test.describe.parallel('Image bubble step', () => {
     })
 
     test('should import image link correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -65,7 +65,7 @@ test.describe.parallel('Image bubble step', () => {
     })
 
     test('should import gifs correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -90,7 +90,7 @@ test.describe.parallel('Image bubble step', () => {
 
   test.describe('Preview', () => {
     test('should display correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,

apps/builder/playwright/tests/bubbles/text.spec.ts

@@ -5,11 +5,11 @@ import {
 } from '../../services/database'
 import { BubbleStepType, defaultTextBubbleContent } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe('Text bubble step', () => {
   test('rich text features should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/bubbles/video.spec.ts

@@ -9,7 +9,7 @@ import {
   VideoBubbleContentType,
 } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 const videoSrc =
   'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
@@ -19,7 +19,7 @@ const vimeoVideoSrc = 'https://vimeo.com/649301125'
 test.describe.parallel('Video bubble step', () => {
   test.describe('Content settings', () => {
     test('should import video url correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -43,7 +43,7 @@ test.describe.parallel('Video bubble step', () => {
 
   test.describe('Preview', () => {
     test('should display video correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -65,7 +65,7 @@ test.describe.parallel('Video bubble step', () => {
     })
 
     test('should display youtube video correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -89,7 +89,7 @@ test.describe.parallel('Video bubble step', () => {
     })
 
     test('should display vimeo video correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,

apps/builder/playwright/tests/collaboration.spec.ts

@@ -1,10 +1,10 @@
 import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
 import { InputStepType, defaultTextInputOptions } from 'models'
 import path from 'path'
-import { generate } from 'short-uuid'
 import { createTypebots, parseDefaultBlockWithStep } from '../services/database'
 
-const typebotId = generate()
+const typebotId = cuid()
 
 test.beforeAll(async () => {
   await createTypebots([

apps/builder/playwright/tests/customDomains.spec.ts

@@ -1,10 +1,10 @@
 import test, { expect } from '@playwright/test'
 import { InputStepType, defaultTextInputOptions } from 'models'
 import { createTypebots, parseDefaultBlockWithStep } from '../services/database'
-import { generate } from 'short-uuid'
 import path from 'path'
+import cuid from 'cuid'
 
-const typebotId = generate()
+const typebotId = cuid()
 test.describe('Dashboard page', () => {
   test('should be able to connect custom domain', async ({ page }) => {
     await createTypebots([

apps/builder/playwright/tests/dashboard.spec.ts

@@ -1,6 +1,6 @@
 import test, { expect, Page } from '@playwright/test'
+import cuid from 'cuid'
 import path from 'path'
-import { generate } from 'short-uuid'
 import { createFolders, createTypebots } from '../services/database'
 import { deleteButtonInConfirmDialog } from '../services/selectorUtils'
 
@@ -49,7 +49,7 @@ test.describe('Dashboard page', () => {
   })
 
   test('folders and typebots should be movable', async ({ page }) => {
-    const droppableFolderId = generate()
+    const droppableFolderId = cuid()
     await createFolders([{ id: droppableFolderId, name: 'Droppable folder' }])
     await createTypebots([{ name: 'Draggable typebot' }])
     await page.goto('/typebots')

apps/builder/playwright/tests/editor.spec.ts

@@ -5,12 +5,12 @@ import {
   parseDefaultBlockWithStep,
 } from '../services/database'
 import { defaultTextInputOptions, InputStepType } from 'models'
-import { generate } from 'short-uuid'
 import path from 'path'
+import cuid from 'cuid'
 
 test.describe.parallel('Editor', () => {
   test('Edges connection should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,
@@ -57,7 +57,7 @@ test.describe.parallel('Editor', () => {
     expect(total).toBe(1)
   })
   test('Drag and drop steps and items should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await importTypebotInDatabase(
       path.join(__dirname, '../fixtures/typebots/editor/buttonsDnd.json'),
       {
@@ -98,7 +98,7 @@ test.describe.parallel('Editor', () => {
     )
   })
   test('Undo / Redo buttons should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/inputs/buttons.spec.ts

@@ -5,11 +5,11 @@ import {
 } from '../../services/database'
 import { defaultChoiceInputOptions, InputStepType, ItemType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe.parallel('Buttons input step', () => {
   test('can edit button items', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/inputs/date.spec.ts

@@ -5,11 +5,11 @@ import {
 } from '../../services/database'
 import { defaultDateInputOptions, InputStepType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe('Date input step', () => {
   test('options should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/inputs/email.spec.ts

@@ -5,11 +5,11 @@ import {
 } from '../../services/database'
 import { defaultEmailInputOptions, InputStepType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe('Email input step', () => {
   test('options should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/inputs/number.spec.ts

@@ -5,11 +5,11 @@ import {
 } from '../../services/database'
 import { defaultNumberInputOptions, InputStepType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe('Number input step', () => {
   test('options should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/inputs/phone.spec.ts

@@ -5,11 +5,11 @@ import {
 } from '../../services/database'
 import { defaultPhoneInputOptions, InputStepType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe('Phone input step', () => {
   test('options should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/inputs/text.spec.ts

@@ -5,11 +5,11 @@ import {
 } from '../../services/database'
 import { defaultTextInputOptions, InputStepType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe.parallel('Text input step', () => {
   test('options should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,
@@ -43,7 +43,7 @@ test.describe.parallel('Text input step', () => {
   })
 
   test('variable in URL should prefill the input', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/inputs/url.spec.ts

@@ -5,11 +5,11 @@ import {
 } from '../../services/database'
 import { defaultUrlInputOptions, InputStepType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe('Url input step', () => {
   test('options should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/integrations/googleAnalytics.spec.ts

@@ -4,11 +4,11 @@ import {
   parseDefaultBlockWithStep,
 } from '../../services/database'
 import { defaultGoogleAnalyticsOptions, IntegrationStepType } from 'models'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe('Google Analytics step', () => {
   test('its configuration should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/integrations/googleSheets.spec.ts

@@ -2,11 +2,11 @@ import test, { expect, Page } from '@playwright/test'
 import { importTypebotInDatabase } from '../../services/database'
 import path from 'path'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe.parallel('Google sheets integration', () => {
   test('Insert row should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await importTypebotInDatabase(
       path.join(
         __dirname,
@@ -56,7 +56,7 @@ test.describe.parallel('Google sheets integration', () => {
   })
 
   test('Update row should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await importTypebotInDatabase(
       path.join(
         __dirname,
@@ -106,7 +106,7 @@ test.describe.parallel('Google sheets integration', () => {
   })
 
   test('Get row should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await importTypebotInDatabase(
       path.join(
         __dirname,

apps/builder/playwright/tests/integrations/sendEmail.spec.ts

@@ -1,10 +1,10 @@
 import test, { expect } from '@playwright/test'
 import { importTypebotInDatabase } from '../../services/database'
 import path from 'path'
-import { generate } from 'short-uuid'
 import { typebotViewer } from '../../services/selectorUtils'
+import cuid from 'cuid'
 
-const typebotId = generate()
+const typebotId = cuid()
 
 test.describe('Send email step', () => {
   test('its configuration should work', async ({ page }) => {

apps/builder/playwright/tests/integrations/webhook.spec.ts

@@ -1,12 +1,12 @@
 import test, { expect, Page } from '@playwright/test'
 import { createWebhook, importTypebotInDatabase } from '../../services/database'
 import path from 'path'
-import { generate } from 'short-uuid'
 import { HttpMethod } from 'models'
+import cuid from 'cuid'
 
 test.describe('Webhook step', () => {
   test('easy configuration should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await importTypebotInDatabase(
       path.join(__dirname, '../../fixtures/typebots/integrations/webhook.json'),
       {
@@ -26,7 +26,7 @@ test.describe('Webhook step', () => {
     )
   })
   test('Generated body should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await importTypebotInDatabase(
       path.join(__dirname, '../../fixtures/typebots/integrations/webhook.json'),
       {
@@ -51,7 +51,7 @@ test.describe('Webhook step', () => {
     )
   })
   test('its configuration should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await importTypebotInDatabase(
       path.join(__dirname, '../../fixtures/typebots/integrations/webhook.json'),
       {

apps/builder/playwright/tests/logic/code.spec.ts

@@ -2,9 +2,9 @@ import test, { expect } from '@playwright/test'
 import path from 'path'
 import { typebotViewer } from '../../services/selectorUtils'
 import { importTypebotInDatabase } from '../../services/database'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
-const typebotId = generate()
+const typebotId = cuid()
 
 test.describe('Code step', () => {
   test('code should trigger', async ({ page }) => {

apps/builder/playwright/tests/logic/condition.spec.ts

@@ -2,9 +2,9 @@ import test, { expect } from '@playwright/test'
 import path from 'path'
 import { typebotViewer } from '../../services/selectorUtils'
 import { importTypebotInDatabase } from '../../services/database'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
-const typebotId = generate()
+const typebotId = cuid()
 
 test.describe('Condition step', () => {
   test('its configuration should work', async ({ page }) => {

apps/builder/playwright/tests/logic/redirect.spec.ts

@@ -2,9 +2,9 @@ import test, { expect } from '@playwright/test'
 import path from 'path'
 import { typebotViewer } from '../../services/selectorUtils'
 import { importTypebotInDatabase } from '../../services/database'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
-const typebotId = generate()
+const typebotId = cuid()
 
 test.describe('Redirect step', () => {
   test('its configuration should work', async ({ page, context }) => {

apps/builder/playwright/tests/logic/setVariable.spec.ts

@@ -2,9 +2,9 @@ import test, { expect } from '@playwright/test'
 import path from 'path'
 import { typebotViewer } from '../../services/selectorUtils'
 import { importTypebotInDatabase } from '../../services/database'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
-const typebotId = generate()
+const typebotId = cuid()
 
 test.describe('Set variable step', () => {
   test('its configuration should work', async ({ page }) => {

apps/builder/playwright/tests/logic/typebotLink.spec.ts

@@ -1,12 +1,12 @@
 import test, { expect } from '@playwright/test'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
 import { importTypebotInDatabase } from '../../services/database'
 import path from 'path'
+import cuid from 'cuid'
 
 test('should be configurable', async ({ page }) => {
-  const typebotId = generate()
+  const typebotId = cuid()
-  const linkedTypebotId = generate()
+  const linkedTypebotId = cuid()
   await importTypebotInDatabase(
     path.join(__dirname, '../../fixtures/typebots/logic/linkTypebots/1.json'),
     { id: typebotId }

apps/builder/playwright/tests/results.spec.ts

@@ -1,9 +1,9 @@
 import test, { expect, Page } from '@playwright/test'
+import cuid from 'cuid'
 import { readFileSync } from 'fs'
 import { defaultTextInputOptions, InputStepType } from 'models'
 import { parse } from 'papaparse'
 import path from 'path'
-import { generate } from 'short-uuid'
 import {
   createResults,
   createTypebots,
@@ -12,13 +12,13 @@ import {
 } from '../services/database'
 import { deleteButtonInConfirmDialog } from '../services/selectorUtils'
 
-const typebotId = generate()
+const typebotId = cuid()
 
 test.describe('Results page', () => {
   test('Submission table header should be parsed correctly', async ({
     page,
   }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await importTypebotInDatabase(
       path.join(
         __dirname,

apps/builder/playwright/tests/settings.spec.ts

@@ -1,14 +1,14 @@
 import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
 import { defaultTextInputOptions } from 'models'
 import path from 'path'
-import { generate } from 'short-uuid'
 import { importTypebotInDatabase } from '../services/database'
 import { typebotViewer } from '../services/selectorUtils'
 
 test.describe.parallel('Settings page', () => {
   test.describe('General', () => {
     test('should reflect change in real-time', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await importTypebotInDatabase(
         path.join(__dirname, '../fixtures/typebots/settings.json'),
         {
@@ -48,7 +48,7 @@ test.describe.parallel('Settings page', () => {
 
   test.describe('Typing emulation', () => {
     test('should be fillable', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await importTypebotInDatabase(
         path.join(__dirname, '../fixtures/typebots/settings.json'),
         {

apps/builder/playwright/tests/theme.spec.ts

@@ -1,6 +1,6 @@
 import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
 import path from 'path'
-import { generate } from 'short-uuid'
 import { importTypebotInDatabase } from '../services/database'
 import { typebotViewer } from '../services/selectorUtils'
 
@@ -12,7 +12,7 @@ const guestAvatarUrl =
 test.describe.parallel('Theme page', () => {
   test.describe('General', () => {
     test('should reflect change in real-time', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       const chatContainer = typebotViewer(page).locator(
         '[data-testid="container"]'
       )
@@ -160,7 +160,7 @@ test.describe.parallel('Theme page', () => {
 
   test.describe('Custom CSS', () => {
     test('should reflect change in real-time', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await importTypebotInDatabase(
         path.join(__dirname, '../fixtures/typebots/theme.json'),
         {

apps/builder/services/publicTypebot.tsx

@@ -1,11 +1,11 @@
+import cuid from 'cuid'
 import { PublicTypebot, Typebot } from 'models'
-import shortId from 'short-uuid'
 import { sendRequest } from 'utils'
 
 export const parseTypebotToPublicTypebot = (
   typebot: Typebot
 ): PublicTypebot => ({
-  id: shortId.generate(),
+  id: cuid(),
   typebotId: typebot.id,
   blocks: typebot.blocks,
   edges: typebot.edges,

apps/builder/services/typebots/typebots.ts

@@ -35,7 +35,6 @@ import {
   defaultConditionContent,
   defaultSendEmailOptions,
 } from 'models'
-import shortId, { generate } from 'short-uuid'
 import { Typebot } from 'models'
 import useSWR from 'swr'
 import { fetcher, toKebabCase } from '../utils'
@@ -179,7 +178,7 @@ export const parseNewStep = (
   type: DraggableStepType,
   blockId: string
 ): DraggableStep => {
-  const id = `s${shortId.generate()}`
+  const id = cuid()
   return {
     id,
     blockId,
@@ -199,11 +198,11 @@ const parseDefaultItems = (
 ): Item[] => {
   switch (type) {
     case InputStepType.CHOICE:
-      return [{ id: generate(), stepId, type: ItemType.BUTTON }]
+      return [{ id: cuid(), stepId, type: ItemType.BUTTON }]
     case LogicStepType.CONDITION:
       return [
         {
-          id: generate(),
+          id: cuid(),
           stepId,
           type: ItemType.CONDITION,
           content: defaultConditionContent,
@@ -317,8 +316,8 @@ export const parseNewTypebot = ({
   | 'publicId'
   | 'customDomain'
 > => {
-  const startBlockId = shortId.generate()
+  const startBlockId = cuid()
-  const startStepId = shortId.generate()
+  const startStepId = cuid()
   const startStep: StartStep = {
     blockId: startBlockId,
     id: startStepId,

apps/docs/docs/self-hosting/configuration.md

@@ -48,9 +48,10 @@ Used authentication in the builder and for the Google Sheets integration step. M
 | GOOGLE_CLIENT_SECRET         | --      | The Client secret from the Google API Console |
 
 Used for Google Fonts:
-| Parameter | Default | Description |
+
-| ---------------------------- | ------- | --------------------------------------------- |
+| Parameter                  | Default | Description                             |
-| NEXT_PUBLIC_GOOGLE_API_KEY | -- | The API Key from the Google API Console |
+| -------------------------- | ------- | --------------------------------------- |
+| NEXT_PUBLIC_GOOGLE_API_KEY | --      | The API Key from the Google API Console |
 
 ## Builder
 

apps/landing-page/components/Homepage/RealTimeResults.tsx

@@ -109,7 +109,6 @@ export const RealTimeResults = () => {
               borderRadius: '0.5rem',
               border: 'none',
               backgroundColor: 'white',
-              pointerEvents: 'none',
             }}
           />
         </Stack>

apps/landing-page/public/typebots/lead-gen-lp.json

@@ -346,7 +346,8 @@
     "general": {
       "font": "Open Sans",
       "background": { "type": "Color", "content": "#171923" }
-    }
+    },
+    "customCss": ".typebot-button {box-shadow: inset 0 1px 0 0 rgb(255 255 255/0.2)}"
   },
   "settings": {
     "general": { "isBrandingEnabled": false },

apps/landing-page/public/typebots/realtime-airtable.json

@@ -300,7 +300,7 @@
         "backgroundColor": "#1e293b",
         "placeholderColor": "#9095A0"
       },
-      "buttons": { "color": "#303235", "backgroundColor": "#7ea6ff" },
+      "buttons": { "color": "#ffffff", "backgroundColor": "#1a5fff" },
       "hostBubbles": { "color": "#ffffff", "backgroundColor": "#1e293b" },
       "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" },
       "hostAvatar": {
@@ -311,7 +311,8 @@
     "general": {
       "font": "Open Sans",
       "background": { "type": "Color", "content": "#171923" }
-    }
+    },
+    "customCss": ".typebot-button {box-shadow: inset 0 1px 0 0 rgb(255 255 255/0.2)}"
   },
   "settings": {
     "general": {

apps/viewer/.env.local.example

@@ -1,6 +1,6 @@
 ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6 #256-bits secret (can be generated here: https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx)
 NEXT_PUBLIC_VIEWER_URL=http://localhost:3001
-DATABASE_URL=postgresql://postgres:@localhost:5432/typebot
+DATABASE_URL=postgresql://postgres:typebot@localhost:5432/typebot
 
 # For more configuration options check out:
 https://docs.typebot.io/self-hosting/configuration

apps/viewer/package.json

@@ -15,13 +15,14 @@
     "@sentry/nextjs": "^6.18.2",
     "bot-engine": "*",
     "cors": "^2.8.5",
+    "cuid": "^2.1.8",
     "db": "*",
     "google-spreadsheet": "^3.2.0",
     "got": "^12.0.1",
-    "qs": "^6.10.3",
     "models": "*",
     "next": "^12.1.0",
     "nodemailer": "^6.7.2",
+    "qs": "^6.10.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "utils": "*"
@@ -32,8 +33,8 @@
     "@types/google-spreadsheet": "^3.1.5",
     "@types/node": "^17.0.21",
     "@types/nodemailer": "^6.4.4",
-    "@types/react": "^17.0.40",
     "@types/qs": "^6.9.7",
+    "@types/react": "^17.0.40",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "eslint": "<8.0.0",
     "eslint-config-next": "12.1.0",

apps/viewer/playwright/tests/hugeBlock.spec.ts

@@ -2,10 +2,10 @@ import test, { expect } from '@playwright/test'
 import path from 'path'
 import { importTypebotInDatabase } from '../services/database'
 import { typebotViewer } from '../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test('should work as expected', async ({ page }) => {
-  const typebotId = generate()
+  const typebotId = cuid()
   await importTypebotInDatabase(
     path.join(__dirname, '../fixtures/typebots/hugeBlock.json'),
     { id: typebotId, publicId: `${typebotId}-public` }

apps/viewer/playwright/tests/metadata.spec.ts

@@ -1,6 +1,5 @@
 import test, { expect } from '@playwright/test'
 import { createTypebots, parseDefaultBlockWithStep } from '../services/database'
-import { generate } from 'short-uuid'
 import {
   defaultSettings,
   defaultTextInputOptions,
@@ -8,9 +7,10 @@ import {
   Metadata,
 } from 'models'
 import { typebotViewer } from '../services/selectorUtils'
+import cuid from 'cuid'
 
 test('Should correctly parse metadata', async ({ page }) => {
-  const typebotId = generate()
+  const typebotId = cuid()
   const customMetadata: Metadata = {
     description: 'My custom description',
     title: 'Custom title',

apps/viewer/playwright/tests/settings.spec.ts

@@ -1,10 +1,10 @@
 import test, { expect } from '@playwright/test'
 import { createTypebots, parseDefaultBlockWithStep } from '../services/database'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 import { defaultSettings, defaultTextInputOptions, InputStepType } from 'models'
 
 test('Result should be in storage by default', async ({ page }) => {
-  const typebotId = generate()
+  const typebotId = cuid()
   await createTypebots([
     {
       id: typebotId,
@@ -28,7 +28,7 @@ test('Result should be in storage by default', async ({ page }) => {
 
 test.describe('Create result on page refresh enabled', () => {
   test('should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

yarn.lock

@@ -5108,11 +5108,6 @@ ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
   integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
 
-any-base@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/any-base/-/any-base-1.1.0.tgz#ae101a62bc08a597b4c9ab5b7089d456630549fe"
-  integrity sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==
-
 anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -13832,14 +13827,6 @@ shelljs@^0.8.5:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-short-uuid@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/short-uuid/-/short-uuid-4.2.0.tgz#3706d9e7287ac589dc5ffe324d3e34817a07540b"
-  integrity sha512-r3cxuPPZSuF0QkKsK9bBR7u+7cwuCRzWzgjPh07F5N2iIUNgblnMHepBY16xgj5t1lG9iOP9k/TEafY1qhRzaw==
-  dependencies:
-    any-base "^1.1.0"
-    uuid "^8.3.2"
-
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"