⚡ (rating) Add start number option in Rating block

apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx

@@ -17,7 +17,9 @@ export const RatingInputContent = ({ variableId, block }: Props) => {
   ) : (
     <Text noOfLines={1} pr="6">
       {t('blocks.inputs.rating.from.label')}{' '}
-      {block.options?.buttonType === 'Icons' ? 1 : 0}{' '}
+      {block.options?.buttonType === 'Icons'
+        ? 1
+        : block.options?.startsAt ?? defaultRatingInputOptions.startsAt}{' '}
       {t('blocks.inputs.rating.to.label')}{' '}
       {block.options?.length ?? defaultRatingInputOptions.length}
     </Text>

apps/builder/src/features/blocks/inputs/rating/components/RatingInputSettings.tsx

@@ -3,7 +3,7 @@ import { DropdownList } from '@/components/DropdownList'
 import { RatingInputBlock, Variable } from '@typebot.io/schemas'
 import React from 'react'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
-import { TextInput } from '@/components/inputs'
+import { NumberInput, TextInput } from '@/components/inputs'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { defaultRatingInputOptions } from '@typebot.io/schemas/features/blocks/inputs/rating/constants'
 import { useTranslate } from '@tolgee/react'
@@ -46,11 +46,15 @@ export const RatingInputSettings = ({ options, onOptionsChange }: Props) => {
   const handleOneClickSubmitChange = (isOneClickSubmitEnabled: boolean) =>
     onOptionsChange({ ...options, isOneClickSubmitEnabled })
 
+  const updateStartsAt = (startsAt: number | `{{${string}}}` | undefined) =>
+    onOptionsChange({ ...options, startsAt })
+
   const length = options?.length ?? defaultRatingInputOptions.length
   const isOneClickSubmitEnabled =
     options?.isOneClickSubmitEnabled ??
     defaultRatingInputOptions.isOneClickSubmitEnabled
 
+  const buttonType = options?.buttonType ?? defaultRatingInputOptions.buttonType
   return (
     <Stack spacing={4}>
       <Stack>
@@ -71,13 +75,20 @@ export const RatingInputSettings = ({ options, onOptionsChange }: Props) => {
         <DropdownList
           onItemSelect={handleTypeChange}
           items={['Icons', 'Numbers'] as const}
-          currentItem={
+          currentItem={buttonType}
-            options?.buttonType ?? defaultRatingInputOptions.buttonType
-          }
         />
       </Stack>
 
-      {options?.buttonType === 'Icons' && (
+      {buttonType === 'Numbers' && (
+        <NumberInput
+          defaultValue={options?.startsAt ?? defaultRatingInputOptions.startsAt}
+          onValueChange={updateStartsAt}
+          label="Starts at"
+          direction="row"
+        />
+      )}
+
+      {buttonType === 'Icons' && (
         <SwitchWithLabel
           label={t('blocks.inputs.rating.settings.customIcon.label')}
           initialValue={
@@ -87,7 +98,7 @@ export const RatingInputSettings = ({ options, onOptionsChange }: Props) => {
           onCheckChange={handleCustomIconCheck}
         />
       )}
-      {options?.buttonType === 'Icons' && options.customIcon?.isEnabled && (
+      {buttonType === 'Icons' && options?.customIcon?.isEnabled && (
         <TextInput
           label={t('blocks.inputs.rating.settings.iconSVG.label')}
           defaultValue={options.customIcon.svg}
@@ -97,7 +108,10 @@ export const RatingInputSettings = ({ options, onOptionsChange }: Props) => {
       )}
       <TextInput
         label={t('blocks.inputs.rating.settings.rateLabel.label', {
-          rate: options?.buttonType === 'Icons' ? '1' : '0',
+          rate:
+            buttonType === 'Icons'
+              ? '1'
+              : options?.startsAt ?? defaultRatingInputOptions.startsAt,
         })}
         defaultValue={options?.labels?.left}
         onChange={handleLeftLabelChange}

apps/docs/openapi/builder.json

@@ -15946,6 +15946,14 @@
               "length": {
                 "type": "number"
               },
+              "startsAt": {
+                "anyOf": [
+                  {
+                    "type": "number"
+                  },
+                  {}
+                ]
+              },
               "labels": {
                 "type": "object",
                 "properties": {

apps/docs/openapi/viewer.json

@@ -6231,6 +6231,14 @@
               "length": {
                 "type": "number"
               },
+              "startsAt": {
+                "anyOf": [
+                  {
+                    "type": "number"
+                  },
+                  {}
+                ]
+              },
               "labels": {
                 "type": "object",
                 "properties": {

packages/bot-engine/executeGroup.ts

@@ -252,6 +252,25 @@ export const parseInput =
       case InputBlockType.DATE: {
         return parseDateInput(state)(block)
       }
+      case InputBlockType.RATING: {
+        const parsedBlock = deepParseVariables(
+          state.typebotsQueue[0].typebot.variables
+        )({
+          ...block,
+          prefilledValue: getPrefilledInputValue(
+            state.typebotsQueue[0].typebot.variables
+          )(block),
+        })
+        return {
+          ...parsedBlock,
+          options: {
+            ...parsedBlock.options,
+            startsAt: isNotEmpty(parsedBlock.options?.startsAt as string)
+              ? Number(parsedBlock.options?.startsAt)
+              : undefined,
+          },
+        }
+      }
       default: {
         return deepParseVariables(state.typebotsQueue[0].typebot.variables)({
           ...block,

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.40",
+  "version": "0.2.41",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/features/blocks/inputs/rating/components/RatingForm.tsx

@@ -45,7 +45,10 @@ export const RatingForm = (props: Props) => {
                 defaultRatingInputOptions.length) +
                 ((props.block.options?.buttonType ??
                   defaultRatingInputOptions.buttonType) === 'Numbers'
-                  ? 1
+                  ? -(
+                      ((props.block.options?.startsAt as number | undefined) ??
+                        defaultRatingInputOptions.startsAt) - 1
+                    )
                   : 0)
             )
           )}
@@ -58,7 +61,8 @@ export const RatingForm = (props: Props) => {
                 idx() +
                 ((props.block.options?.buttonType ??
                   defaultRatingInputOptions.buttonType) === 'Numbers'
-                  ? 0
+                  ? (props.block.options?.startsAt as number | undefined) ??
+                    defaultRatingInputOptions.startsAt
                   : 1)
               }
               onClick={handleClick}

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.40",
+  "version": "0.2.41",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.40",
+  "version": "0.2.41",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/schemas/features/blocks/inputs/rating/constants.ts

@@ -7,6 +7,7 @@ export const defaultRatingInputOptions = {
   labels: {
     button: defaultButtonLabel,
   },
+  startsAt: 0,
   customIcon: { isEnabled: false },
   isOneClickSubmitEnabled: false,
 } as const satisfies RatingInputBlock['options']

packages/schemas/features/blocks/inputs/rating/schema.ts

@@ -1,4 +1,5 @@
 import { z } from '../../../../zod'
+import { variableStringSchema } from '../../../utils'
 import { optionBaseSchema, blockBaseSchema } from '../../shared'
 import { InputBlockType } from '../constants'
 
@@ -6,6 +7,7 @@ export const ratingInputOptionsSchema = optionBaseSchema.merge(
   z.object({
     buttonType: z.literal('Icons').or(z.literal('Numbers')).optional(),
     length: z.number().optional(),
+    startsAt: z.number().or(variableStringSchema).optional(),
     labels: z
       .object({
         left: z.string().optional(),