Cavai Docs

Appearance

Specialized Block Context Menu Implementation ​

This document describes how context menus work for specialized blocks in the Cavai BuilderVisuals system.

Overview ​

In BuilderVisuals, all blocks have a context menu that becomes available when right-clicking on the block. For a specialized block (such as Form, Slider, Video, Conversation) to get full context menu functionality, it must be explicitly added to the isDeletable function in utils.ts.

How Context Menus Work ​

The context menu is generated in BlockActionsMenu.vue and displays different actions based on the block type. Specialized blocks only get all menu options if they are included in the isDeletable function.

The isDeletable Function ​

This function is located in src/pages/Chatbots/components/BuilderVisuals/Blocks/utils.ts and controls which blocks can be deleted and therefore receive the full context menu:

typescript
export const isDeletable = (blockName: string): boolean => {
  return [BLOCKS.CONVERSATION, BLOCKS.SLIDER, BLOCKS.VIDEO, BLOCKS.FORM].includes(blockName) || isVisualElement(blockName)
}

Available Context Menu Options ​

When a specialized block is added to the isDeletable function, it will get the following context menu options:

  1. Rename - Change the name of the block
  2. Bring forward - Move the block forward in stacking order
  3. Send backward - Move the block backward in stacking order
  4. Restore defaults - Reset the block to default values
  5. Delete - Delete the block

Adding a New Specialized Block to the Context Menu ​

When implementing a new specialized block, remember to add it to the isDeletable function to ensure it gets full context menu functionality:

typescript
export const isDeletable = (blockName: string): boolean => {
  return [
    BLOCKS.CONVERSATION, 
    BLOCKS.SLIDER, 
    BLOCKS.VIDEO, 
    BLOCKS.FORM,
    BLOCKS.YOUR_NEW_BLOCK
  ].includes(blockName) || isVisualElement(blockName)
}

Troubleshooting ​

If a specialized block is missing some or all context menu options, check the following:

  1. Verify that the block is added to the isDeletable function in utils.ts
  2. Check if the block has unDeletable: true as a property, which will disable the Delete option
  3. Check if the locked property is set to true, which will disable order change (Bring forward/Send backward)

Other Relevant Components ​

  • BlockItem.vue - Renders each block and handles right-click to open the context menu
  • BlockActionsMenu.vue - Defines which options are available in the context menu based on block type and state
  • BlocksList.vue - Manages the overall display and interaction with the blocks

Internal documentation

Cavai