refactor(♻️ Add defaults everywhere (+ settings page)):

packages/models/src/publicTypebot.ts

@@ -18,6 +18,6 @@ export type PublicTypebot = Omit<
   choiceItems: Table<ChoiceItem>
   variables: Table<Variable>
   edges: Table<Edge>
-  theme?: Theme
-  settings?: Settings
+  theme: Theme
+  settings: Settings
 }

packages/models/src/typebot/settings.ts

@@ -1,9 +1,31 @@
 export type Settings = {
-  typingEmulation?: TypingEmulationSettings
+  general: GeneralSettings
+  typingEmulation: TypingEmulation
+  metadata: Metadata
 }
 
-export type TypingEmulationSettings = {
-  enabled?: boolean
-  speed?: number
-  maxDelay?: number
+export type GeneralSettings = {
+  isBrandingEnabled: boolean
+}
+
+export type TypingEmulation = {
+  enabled: boolean
+  speed: number
+  maxDelay: number
+}
+
+export type Metadata = {
+  title?: string
+  description: string
+  imageUrl?: string
+  favIconUrl?: string
+}
+
+export const defaultSettings: Settings = {
+  general: { isBrandingEnabled: true },
+  typingEmulation: { enabled: true, speed: 300, maxDelay: 1.5 },
+  metadata: {
+    description:
+      'Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form.',
+  },
 }

packages/models/src/typebot/steps/bubble.ts

@@ -20,12 +20,12 @@ export type TextBubbleStep = StepBase & {
 
 export type ImageBubbleStep = StepBase & {
   type: BubbleStepType.IMAGE
-  content?: ImageBubbleContent
+  content: ImageBubbleContent
 }
 
 export type VideoBubbleStep = StepBase & {
   type: BubbleStepType.VIDEO
-  content?: VideoBubbleContent
+  content: VideoBubbleContent
 }
 
 export type TextBubbleContent = {
@@ -49,3 +49,13 @@ export type VideoBubbleContent = {
   url?: string
   id?: string
 }
+
+export const defaultTextBubbleContent: TextBubbleContent = {
+  html: '',
+  richText: [],
+  plainText: '',
+}
+
+export const defaultImageBubbleContent: ImageBubbleContent = {}
+
+export const defaultVideoBubbleContent: VideoBubbleContent = {}

packages/models/src/typebot/steps/inputs.ts

@@ -25,37 +25,41 @@ export type InputStepOptions =
   | EmailInputOptions
   | DateInputOptions
   | UrlInputOptions
+  | PhoneNumberInputOptions
+  | ChoiceInputOptions
 
 export type TextInputStep = StepBase & {
   type: InputStepType.TEXT
-  options?: TextInputOptions
+  options: TextInputOptions
 }
 
 export type NumberInputStep = StepBase & {
   type: InputStepType.NUMBER
-  options?: NumberInputOptions
+  options: NumberInputOptions
 }
 
 export type EmailInputStep = StepBase & {
   type: InputStepType.EMAIL
-  options?: EmailInputOptions
+  options: EmailInputOptions
 }
 
 export type UrlInputStep = StepBase & {
   type: InputStepType.URL
-  options?: UrlInputOptions
+  options: UrlInputOptions
 }
 
 export type DateInputStep = StepBase & {
   type: InputStepType.DATE
-  options?: DateInputOptions
+  options: DateInputOptions
 }
 
 export type PhoneNumberInputStep = StepBase & {
   type: InputStepType.PHONE
-  options?: OptionBase & InputTextOptionsBase
+  options: OptionBase & InputTextOptionsBase
 }
 
+export type PhoneNumberInputOptions = OptionBase & InputTextOptionsBase
+
 export type ChoiceInputStep = StepBase & {
   type: InputStepType.CHOICE
   options: ChoiceInputOptions
@@ -70,19 +74,19 @@ export type ChoiceItem = {
 
 type OptionBase = { variableId?: string }
 type InputTextOptionsBase = {
-  labels?: { placeholder?: string; button?: string }
+  labels: { placeholder: string; button: string }
 }
 
 export type ChoiceInputOptions = OptionBase & {
   itemIds: string[]
-  isMultipleChoice?: boolean
-  buttonLabel?: string
+  isMultipleChoice: boolean
+  buttonLabel: string
 }
 
 export type DateInputOptions = OptionBase & {
-  labels?: { button?: string; from?: string; to?: string }
-  hasTime?: boolean
-  isRange?: boolean
+  labels: { button: string; from: string; to: string }
+  hasTime: boolean
+  isRange: boolean
 }
 
 export type EmailInputOptions = OptionBase & InputTextOptionsBase
@@ -91,7 +95,7 @@ export type UrlInputOptions = OptionBase & InputTextOptionsBase
 
 export type TextInputOptions = OptionBase &
   InputTextOptionsBase & {
-    isLong?: boolean
+    isLong: boolean
   }
 
 export type NumberInputOptions = OptionBase &
@@ -100,3 +104,41 @@ export type NumberInputOptions = OptionBase &
     max?: number
     step?: number
   }
+
+const defaultButtonLabel = 'Send'
+
+export const defaultTextInputOptions: TextInputOptions = {
+  isLong: false,
+  labels: { button: defaultButtonLabel, placeholder: 'Type your answer...' },
+}
+
+export const defaultNumberInputOptions: NumberInputOptions = {
+  labels: { button: defaultButtonLabel, placeholder: 'Type a number...' },
+}
+
+export const defaultEmailInputOptions: EmailInputOptions = {
+  labels: { button: defaultButtonLabel, placeholder: 'Type your email...' },
+}
+
+export const defaultUrlInputOptions: UrlInputOptions = {
+  labels: { button: defaultButtonLabel, placeholder: 'Type a URL...' },
+}
+
+export const defaultDateInputOptions: DateInputOptions = {
+  hasTime: false,
+  isRange: false,
+  labels: { button: defaultButtonLabel, from: 'From:', to: 'To:' },
+}
+
+export const defaultPhoneInputOptions: PhoneNumberInputOptions = {
+  labels: {
+    button: defaultButtonLabel,
+    placeholder: 'Type your phone number...',
+  },
+}
+
+export const defaultChoiceInputOptions: ChoiceInputOptions = {
+  buttonLabel: defaultButtonLabel,
+  isMultipleChoice: false,
+  itemIds: [],
+}

packages/models/src/typebot/steps/integration.ts

@@ -19,17 +19,17 @@ export enum IntegrationStepType {
 
 export type GoogleSheetsStep = StepBase & {
   type: IntegrationStepType.GOOGLE_SHEETS
-  options?: GoogleSheetsOptions
+  options: GoogleSheetsOptions
 }
 
 export type GoogleAnalyticsStep = StepBase & {
   type: IntegrationStepType.GOOGLE_ANALYTICS
-  options?: GoogleAnalyticsOptions
+  options: GoogleAnalyticsOptions
 }
 
 export type WebhookStep = StepBase & {
   type: IntegrationStepType.WEBHOOK
-  options?: WebhookOptions
+  options: WebhookOptions
 }
 
 export type GoogleAnalyticsOptions = {
@@ -113,3 +113,9 @@ export type WebhookResponse = {
   statusCode: number
   data?: unknown
 }
+
+export const defaultGoogleSheetsOptions: GoogleSheetsOptions = {}
+
+export const defaultGoogleAnalyticsOptions: GoogleAnalyticsOptions = {}
+
+export const defaultWebhookOptions: WebhookOptions = {}

packages/models/src/typebot/steps/logic.ts

@@ -16,7 +16,7 @@ export type LogicStepOptions =
 
 export type SetVariableStep = StepBase & {
   type: LogicStepType.SET_VARIABLE
-  options?: SetVariableOptions
+  options: SetVariableOptions
 }
 
 export type ConditionStep = StepBase & {
@@ -28,7 +28,7 @@ export type ConditionStep = StepBase & {
 
 export type RedirectStep = StepBase & {
   type: LogicStepType.REDIRECT
-  options?: RedirectOptions
+  options: RedirectOptions
 }
 
 export enum LogicalOperator {
@@ -47,13 +47,13 @@ export enum ComparisonOperators {
 
 export type ConditionOptions = {
   comparisons: Table<Comparison>
-  logicalOperator?: LogicalOperator
+  logicalOperator: LogicalOperator
 }
 
 export type Comparison = {
   id: string
   variableId?: string
-  comparisonOperator: ComparisonOperators
+  comparisonOperator?: ComparisonOperators
   value?: string
 }
 
@@ -64,5 +64,14 @@ export type SetVariableOptions = {
 
 export type RedirectOptions = {
   url?: string
-  isNewTab?: boolean
+  isNewTab: boolean
 }
+
+export const defaultSetVariablesOptions: SetVariableOptions = {}
+
+export const defaultConditionOptions: ConditionOptions = {
+  comparisons: { byId: {}, allIds: [] },
+  logicalOperator: LogicalOperator.AND,
+}
+
+export const defaultRedirectOptions: RedirectOptions = { isNewTab: false }

packages/models/src/typebot/steps/steps.ts

@@ -31,6 +31,13 @@ export type DraggableStepType =
   | LogicStepType
   | IntegrationStepType
 
+export type StepWithOptions = InputStep | LogicStep | IntegrationStep
+
+export type StepWithOptionsType =
+  | InputStepType
+  | LogicStepType
+  | IntegrationStepType
+
 export type StepOptions =
   | InputStepOptions
   | LogicStepOptions

packages/models/src/typebot/theme.ts

@@ -1,28 +1,28 @@
 export type Theme = {
-  general?: GeneralTheme
-  chat?: ChatTheme
+  general: GeneralTheme
+  chat: ChatTheme
   customCss?: string
 }
 
 export type GeneralTheme = {
-  font?: string
-  background?: Background
+  font: string
+  background: Background
 }
 
 export type ChatTheme = {
-  hostBubbles?: ContainerColors
-  guestBubbles?: ContainerColors
-  buttons?: ContainerColors
-  inputs?: InputColors
+  hostBubbles: ContainerColors
+  guestBubbles: ContainerColors
+  buttons: ContainerColors
+  inputs: InputColors
 }
 
 export type ContainerColors = {
-  backgroundColor?: string
-  color?: string
+  backgroundColor: string
+  color: string
 }
 
 export type InputColors = ContainerColors & {
-  placeholderColor?: string
+  placeholderColor: string
 }
 
 export enum BackgroundType {
@@ -35,3 +35,17 @@ export type Background = {
   type: BackgroundType
   content?: string
 }
+
+export const defaultTheme: Theme = {
+  chat: {
+    hostBubbles: { backgroundColor: '#F7F8FF', color: '#303235' },
+    guestBubbles: { backgroundColor: '#FF8E21', color: '#FFFFFF' },
+    buttons: { backgroundColor: '#0042DA', color: '#FFFFFF' },
+    inputs: {
+      backgroundColor: '#FFFFFF',
+      color: '#303235',
+      placeholderColor: '#9095A0',
+    },
+  },
+  general: { font: 'Open Sans', background: { type: BackgroundType.NONE } },
+}

packages/models/src/typebot/typebot.ts

@@ -23,8 +23,8 @@ export type Typebot = Omit<
   variables: Table<Variable>
   edges: Table<Edge>
   webhooks: Table<Webhook>
-  theme?: Theme
-  settings?: Settings
+  theme: Theme
+  settings: Settings
 }
 
 export type Block = {