Render Types Documentation

The chatbot supports various render types for displaying different kinds of content and interactive elements. Each render type has specific metadata requirements and parameters.

Text Message

Simple text message that supports markdown formatting.

{
  "role": "assistant",
  "content": "Message content with **markdown** support",
  "type": "text",
  "metadata": {}
}

Button List

Displays a list of clickable buttons with various actions. The supported actions are:

link: Navigates to specified URL.
function: Triggers a function call.
chat: Sends a chat message based on the button text.

Examples:

Link Action:

{
  "role": "assistant",
  "content": "Click the button below to visit our website:",
  "type": "button_list",
  "metadata": {
    "buttons": [
      {
        "text": "Visit Website",
        "action": "link",
        "url": "https://example.com",
        "function_name": null,
        "style": "primary",
        "render_type": "text"
      }
    ]
  }
}

Function Action:

{
  "role": "assistant",
  "content": "Click the button below to join our waitlist:",
  "type": "button_list",
  "metadata": {
    "buttons": [
      {
        "text": "Join Waitlist",
        "action": "function",
        "url": null,
        "function_name": "joinWaitlist",
        "data": {
          "email": "user@example.com",
          "full_name": "John Doe"
        },
        "style": "secondary",
        "render_type": null
      }
    ]
  }
}

Chat Action:

{
  "role": "assistant",
  "content": "Click the button below for more details:",
  "type": "button_list",
  "metadata": {
    "buttons": [
      {
        "text": "Tell Me More",
        "action": "chat",
        "url": "Tell me more about the offering",
        "function_name": null,
        "style": "primary",
        "render_type": "text"
      }
    ]
  }
}

Carousel

Horizontal scrollable list of cards or items.

{
  "role": "assistant",
  "content": "Carousel title",
  "type": "carousel",
  "metadata": {
    "items": [
      {
        "title": "Item Title",
        "description": "Item Description",
        "image": "https://example.com/image.jpg",
        "link": "https://example.com/item"
      },
      {
        "title": "Second Item",
        "description": "Another fascinating feature",
        "image": "https://example.com/image2.jpg",
        "link": "https://example.com/item2"
      }
    ],
    "settings": {
      "auto_scroll": true,
      "show_indicators": true
    }
  }
}

Card

Single detailed card with rich content and actions.

{
  "role": "assistant",
  "content": "Card introduction",
  "type": "card",
  "metadata": {
    "title": "Card Title",
    "subtitle": "Optional Subtitle",
    "image": "https://example.com/image.jpg",
    "content": {
      "sections": [
        {
          "title": "Section Title",
          "value": "Section Value"
        }
      ]
    },
    "actions": [
      {
        "text": "Action Text",
        "url": "https://example.com/action"
      }
    ]
  }
}

Form Multi Select

Multiple choice selection form with customizable options.

{
  "role": "assistant",
  "content": "Select one or more options:",
  "type": "form_multi_select",
  "metadata": {
    "min_selections": 1,
    "max_selections": 3,
    "options": [
      {
        "id": "option-1",
        "text": "Option Text",
        "description": "Option Description"
      }
    ],
    "submit_text": "Submit Button Text"
  }
}

Form Fields

Dynamic form with various input field types.

{
  "role": "assistant",
  "content": "Form introduction",
  "type": "form_fields",
  "metadata": {
    "fields": [
      {
        "type": "text",
        "name": "firstName",
        "label": "First Name",
        "placeholder": "Enter your first name",
        "required": true,
        "options": null
      },
      {
        "type": "text",
        "name": "lastName",
        "label": "Last Name",
        "placeholder": "Enter your last name",
        "required": true,
        "options": null
      },
      {
        "type": "email",
        "name": "email",
        "label": "Email Address",
        "placeholder": "your@email.com",
        "required": true,
        "options": null
      }
    ],
    "submit_text": "Submit Button Text"
  }
}

Form Scale

Rating or scale selection form.

{
  "role": "assistant",
  "content": "Scale question",
  "type": "form_scale",
  "metadata": {
    "scale_type": "number",
    "min": 1,
    "max": 5,
    "labels": {
      "min": "Poor",
      "max": "Excellent"
    },
    "show_labels": true,
    "allow_half_values": false,
    "submit_text": "Submit Button Text"
  }
}

Usage Notes

All messages must include role, content, type, and metadata.
The content field supports markdown formatting.
Button styles follow the theme configuration (primary, secondary, outline).
Form submissions are handled by the parent component.
Images should be provided as full URLs.
All text fields support internationalization.

Type Reference

Form Fields support the following types:

text: Single line text input
email: Email input with validation
select: Dropdown selection
textarea: Multi-line text input

Button Actions

link: Navigates to the specified URL.
function: Triggers a function call.
chat: Sends a chat message based on the button text.

Button Styles

primary: Main call-to-action style.
secondary: Alternative emphasis.
outline: Minimal emphasis.