♻️ Use at function instead of dangerous direct lookup array index

apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemNode.tsx

@@ -58,6 +58,10 @@ export const PictureChoiceItemNode = ({
   }
   useEventListener('wheel', handleMouseWheel, ref.current)
 
+  const blockId = typebot
+    ? typebot.groups.at(indices.groupIndex)?.blocks?.at(indices.blockIndex)?.id
+    : undefined
+
   return (
     <Popover
       placement="right"
@@ -132,15 +136,12 @@ export const PictureChoiceItemNode = ({
             shadow="lg"
             ref={ref}
           >
-            {typebot && (
+            {typebot && blockId && (
               <PictureChoiceItemSettings
                 workspaceId={typebot.workspaceId}
                 typebotId={typebot.id}
                 item={item}
-                blockId={
+                blockId={blockId}
-                  typebot.groups[indices.groupIndex].blocks[indices.blockIndex]
-                    .id
-                }
                 onItemChange={handleItemChange}
               />
             )}

apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx

@@ -88,7 +88,7 @@ export const BlockNode = ({
     previewingEdge?.to.blockId === block.id ||
     previewingBlock?.id === block.id
 
-  const groupId = typebot?.groups[indices.groupIndex].id
+  const groupId = typebot?.groups.at(indices.groupIndex)?.id
 
   const isDraggingGraph = useGroupsStore((state) => state.isDraggingGraph)
 
@@ -240,11 +240,13 @@ export const BlockNode = ({
                 transition="border-color 0.2s"
               >
                 <BlockIcon type={block.type} mt=".25rem" />
-                {typebot?.groups[indices.groupIndex].id && (
+                {typebot?.groups.at(indices.groupIndex)?.id && (
                   <BlockNodeContent
                     block={block}
                     indices={indices}
-                    groupId={typebot.groups[indices.groupIndex].id}
+                    groupId={
+                      typebot.groups.at(indices.groupIndex)?.id as string
+                    }
                   />
                 )}
                 {(hasIcomingEdge || isDefined(connectingIds)) && (

apps/builder/src/features/graph/components/nodes/item/ItemNode.tsx

@@ -70,6 +70,8 @@ export const ItemNode = ({
   const handleMouseEnter = () => setIsMouseOver(true)
   const handleMouseLeave = () => setIsMouseOver(false)
 
+  const groupId = typebot?.groups.at(indices.groupIndex)?.id
+
   return (
     <ContextMenu<HTMLDivElement>
       renderMenu={() => <ItemNodeContextMenu indices={indices} />}
@@ -114,20 +116,22 @@ export const ItemNode = ({
               isMouseOver={isMouseOver}
               indices={indices}
             />
-            {typebot && (isConnectable || pathname.endsWith('analytics')) && (
+            {typebot &&
-              <BlockSourceEndpoint
+              (isConnectable || pathname.endsWith('analytics')) &&
-                source={{
+              groupId && (
-                  blockId: block.id,
+                <BlockSourceEndpoint
-                  itemId: item.id,
+                  source={{
-                }}
+                    blockId: block.id,
-                groupId={typebot.groups[indices.groupIndex].id}
+                    itemId: item.id,
-                pos="absolute"
+                  }}
-                right="-49px"
+                  groupId={groupId}
-                bottom="9px"
+                  pos="absolute"
-                pointerEvents="all"
+                  right="-49px"
-                isHidden={!isConnectable}
+                  bottom="9px"
-              />
+                  pointerEvents="all"
-            )}
+                  isHidden={!isConnectable}
+                />
+              )}
           </Flex>
         </Stack>
       )}

apps/builder/src/features/graph/components/nodes/item/ItemNodesList.tsx

@@ -44,7 +44,7 @@ export const ItemNodesList = ({
 
   const isLastBlock =
     isDefined(typebot) &&
-    typebot.groups[groupIndex]?.blocks?.[blockIndex + 1] === undefined
+    typebot.groups.at(groupIndex)?.blocks?.at(blockIndex + 1) === undefined
 
   const someChoiceItemsAreNotConnected =
     block.type === InputBlockType.CHOICE ||
@@ -131,6 +131,8 @@ export const ItemNodesList = ({
       elem && (placeholderRefs.current[idx] = elem)
     }
 
+  const groupId = typebot?.groups.at(groupIndex)?.id
+
   return (
     <Stack flex={1} spacing={1} maxW="full" onClick={stopPropagating}>
       <PlaceholderNode
@@ -153,11 +155,8 @@ export const ItemNodesList = ({
           />
         </Stack>
       ))}
-      {isLastBlock && someChoiceItemsAreNotConnected && (
+      {isLastBlock && someChoiceItemsAreNotConnected && groupId && (
-        <DefaultItemNode
+        <DefaultItemNode block={block} groupId={groupId} />
-          block={block}
-          groupId={typebot.groups[groupIndex].id}
-        />
       )}
 
       {draggedItem && draggedItem.blockId === block.id && (

packages/bot-engine/getFirstEdgeId.ts

@@ -19,5 +19,5 @@ export const getFirstEdgeId = ({
     return event.outgoingEdgeId
   }
   if (typebot.version === '6') return typebot.events[0].outgoingEdgeId
-  return typebot.groups[0].blocks[0].outgoingEdgeId
+  return typebot.groups.at(0)?.blocks.at(0)?.outgoingEdgeId
 }

packages/lib/getBlockById.ts

@@ -7,10 +7,10 @@ export const getBlockById = (
   for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
     for (
       let blockIndex = 0;
-      blockIndex < groups[groupIndex].blocks.length;
+      blockIndex < (groups.at(groupIndex)?.blocks?.length ?? 0);
       blockIndex++
     ) {
-      if (groups[groupIndex].blocks[blockIndex].id === blockId) {
+      if (groups.at(groupIndex)?.blocks?.at(blockIndex)?.id === blockId) {
         return {
           block: groups[groupIndex].blocks[blockIndex],
           group: groups[groupIndex],