Templates System

Overview

The templates system provides a simple, type-safe way to manage predefined configurations for forms and HTML blocks. Templates are stored as TypeScript enums and can be easily extended without modifying multiple files. The system works across multiple components and is fully extensible.

Architecture

1. Template Definition (types.ts)

Templates are defined as an enum with human-readable display names:

export enum FormTemplate {
  LEADGEN = 'Lead Gen',
  CONTEST = 'Contest',
  SURVEY = 'Survey',
  CONTACT = 'Contact',
  EMPTY = 'Empty Form',
}

The enum value serves dual purpose:

• Registry key: Used to look up template generators
• Display label: Shown directly in the UI

2. Template Registry (src/templates/index.ts)

Each template is registered with its enum value as the key:

export const templateRegistry: TemplateRegistry = {
  [FormTemplate.LEADGEN]: leadGenFormTemplate,
  [FormTemplate.CONTEST]: contestFormTemplate,
  [FormTemplate.SURVEY]: surveyFormTemplate,
  [FormTemplate.CONTACT]: contactFormTemplate,
  [FormTemplate.EMPTY]: emptyFormTemplate,
}

3. Template Retrieval (templateHelper.ts)

Simple helper to get template data:

export const getFormTemplate = (templateName: FormTemplate) => getTemplate(templateName)

4. Component Usage (FormConfiguration.vue)

• Track current template in data() as currentTemplate
• Use computed properties to derive selected value and label
• Update on selection via handleTemplateSelect()

data() {
  return {
    currentTemplate: FormTemplate.EMPTY,
  }
},
computed: {
  selectedTemplateValue() {
    return this.currentTemplate
  },
  selectedTemplateLabel() {
    return this.currentTemplate  // Value IS the label!
  },
},
methods: {
  async handleTemplateSelect(value: FormTemplate) {
    this.currentTemplate = value
    await this.applyTemplate(value)
  },
}

Adding a New Template

Form Template

1. Add to enum in src/pages/Chatbots/components/BuilderVisuals/Blocks/data/types.ts:

   NEWSLETTER = 'Newsletter',

2. Create template file in src/templates/form/:

   export const newsletterFormTemplate = () => ({
     // template structure...
   })

3. Register template in src/templates/index.ts:

   import { newsletterFormTemplate } from './form/newsletterForm'
   
   export const templateRegistry: TemplateRegistry = {
     // ... existing templates
     [FormTemplate.NEWSLETTER]: newsletterFormTemplate,
   }

HTML Template

1. Add to enum in src/pages/Chatbots/components/BuilderVisuals/Blocks/data/types.ts:

   export enum HtmlTemplate {
     CUSTOM = 'Custom HTML',
     // Add new templates here
   }

2. Create template file in src/templates/html/:

   export const customHtmlTemplate = () => ({
     blockType: 'htmlProperties',
     html: '<div>Your HTML here</div>',
     // ... other properties
   })

3. Register template in src/templates/index.ts:

   import { customHtmlTemplate } from './html/customHtml'
   
   export const templateRegistry: TemplateRegistry = {
     // ... existing templates
     [HtmlTemplate.CUSTOM]: customHtmlTemplate,
   }

4. Done! The new template is automatically available in the UI and works across all components that use HTML blocks.

Key Benefits

• ✅ Single source of truth: Enum values are both keys and labels
• ✅ No duplication: No separate label maps needed
• ✅ Type-safe: Full TypeScript support
• ✅ Scalable: Add new templates without modifying existing code
• ✅ Simple: Minimal boilerplate, easy to understand
• ✅ Reactive: Computed properties ensure UI stays in sync

File Structure

src/
├── templates/
│   ├── index.ts                 # Central registry for all templates
│   ├── form/
│   │   ├── index.ts             # Form template exports
│   │   ├── leadGenForm.ts
│   │   ├── contestForm.ts
│   │   ├── surveyForm.ts
│   │   ├── contactForm.ts
│   │   └── emptyForm.ts
│   └── html/
│       ├── index.ts             # HTML template exports
│       ├── defaultHtml.ts
│       ├── emptyHtml.ts
│       ├── flexHtml.ts
│       ├── gridHtml.ts
│       └── ... (other HTML templates)
└── pages/Chatbots/components/BuilderVisuals/
    ├── Blocks/data/
    │   └── types.ts             # FormTemplate & HtmlTemplate enums
    └── Configuration/
        ├── helpers/templateHelper.ts
        ├── configs/
        │   ├── FormConfiguration.vue
        │   └── HtmlConfiguration.vue
        └── components/TemplateButton.vue