How to create a custom component in Botpress?

4 minutes read

Botpress is an excellent bot framework, which is on-prem, and open-source, with plenty of options for customizations. This already has some built-in components like text, card, carousel, image, and dropdown, but what if we want something entirely different. Let us create a custom component in Botpress?

In this tutorial, we are going to create a chart component to visualize our data. We are going to use primefaces to build this component which internally uses Chart.js.

Note: Botpress uses Reactjs to create components. Check out What, Why and First React Code tutorial for a quick 10 minutes read on getting started with Reactjs.

Before we can jump in to create our custom component, one needs to create a custom module. Please follow along this guide to create your custom module, then come back and resume.

Ok assuming you have created a custom module named infa-module, you should get the details of your module in the modules\infa-module\src\backend\index.ts file.

In order to use primereact first add it as your dependency

yarn add primereact

A custom component needs 3 items

1. A controller
2. A content type
3. Registration of this component in your bot.

Controller

Create your component controller inside your module modules\infa-module\src\views\lite\components\InfaChart.jsx

Note: For custom css classes please refer here.

import React from 'react'
import { Chart } from 'primereact/chart';
const noAnswer = "Sorry no answer found."
const NoAnswerMessage = () => {
  return (
    <div className="infaTextMain">
      <p className="infaTextMessage">{noAnswer}</p>
      <small className="infaTextTimestamp"></small>
    </div>
  )
}
export class InfaChart extends React.Component {
  data = this.props.response.data.user.response.data;
  options = this.props.response.data.user.response.options;
  type = this.props.response.data.user.response.type;
  componentDidMount() {
    this.options = this.props.response.data.user.response.options;
  }
  getTimestamp = () => {
    let date = new Date();
    let options = {
      month: "short",
      day: "numeric", hour: "2-digit", minute: "2-digit"
    };
    return date.toLocaleTimeString("en-us", options);
  }
  render() {
    if (this.data.datasets[0].data.length > 0) {
      return (
        <Chart type={this.type} data={this.data} options={this.options} />
      )
    } else {
      return <NoAnswerMessage />;
    }
  }
}

add this component controller in your lite index file modules\infa-module\src\views\lite\index.jsx

export { InfaChart } from './components/InfaChart'

Content Type

Create a content type in modules\infa-module\src\content-types\infa-chart.js

const base = require('./_base');
function render(data) {
  const events = [];
  return [...events, {
    type: 'custom',
    module: 'infa-module',
    component: 'InfaChart',
    text: data.text,
    response: {
      data
    }
  }]
}
function renderMessenger(data) {
  return [{
    type: 'typing',
    value: data.typing
  }, {
    text: data.text
  }];
}
function renderElement(data, channel) {
  if (channel === 'web' || channel === 'api') {
    return render(data);
  } else if (channel === 'messenger') {
     return renderMessenger(data);
  }
  return [];
}
module.exports = {
  id: 'infa_chart',
  group: 'Custom Component',
  title: 'Infa Chart',
  jsonSchema: {
    description: 'Chart type is defined using the type property. Currently there are 2 options available; "doughtnut", "bar".',
    type: 'object',
    required: ['text'],
    properties: {
      text: {
        type: 'string',
        title: 'Message'
      },
      variations: {
        type: 'array',
        title: 'Alternates (optional)',
        items: {
          type: 'string',
          default: ''
        }
      },
      ...base.typingIndicators
    }
  },
  uiSchema: {
    text: {
      'ui:field': 'i18n_field',
      $subtype: 'textarea'
    },
    variations: {
      'ui:options': {
        orderable: false
      }
    }
  },
  computePreviewText: formData => formData.text && 'Infa Chart: ' + formData.text,
  renderElement: renderElement
}

Registration

Enable this component by adding the component id inside #contentTypes of out\bp\data\bots\<BOT_ID>\bot.config.json file.

That’s it, now build and start Botpress server.

yarn && yarn build && yarn start

If everything is fine you should see your new shiny custom component under the Pick Content menu.

modules\infa-module\src\actions\getsampledata.js

//const axios = require('axios');
/**
 * @title Get sample data for chart components
 * @category Utility
 * @author: Abhishek Raj Simon
 * @param {any} data - Query value you want to send in payload
 */
const defaultColor = '#42A5F5';
const color = ['#EC407A',
  '#AB47BC',
  '#42A5F5',
  '#7E57C2',
  '#66BB6A',
  '#FFCA28',
  '#26A69A'
];
const abbreviatedNumber = (value) => {
  let newValue = value;
  console.log(value);
  if (value >= 1000) {
    let suffixes = ["", "k", "m", "b", "t"];
    let suffixNum = Math.floor(("" + value).length / 3);
    let shortValue = '';
    for (let precision = 2; precision >= 1; precision--) {
      shortValue = parseFloat((suffixNum !== 0 ? (value / Math.pow(1000, suffixNum)) : value).toPrecision(precision));
      let dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g, '');
      if (dotLessShortValue.length <= 2) {
        break;
      }
    }
    if (shortValue % 1 !== 0) shortValue = shortValue.toFixed(1);
    newValue = shortValue + suffixes[suffixNum];
  }
  return newValue;
}
const noAnswer = "Sorry no answer found."
const barOptions = {
  plugins: {
    labels: {
      render: 'value',
      fontSize: 10,
      fontStyle: 'bold',
      fontColor: '#000',
      fontFamily: '"Lucida Console", Monaco, monospace'
    }
  },
  legend: {
    display: false,
    position: 'bottom'
  },
  scales: {
    xAxes: [{
      type: 'time',
      display: true,
      time: {
        unit: 'month'
      }
    }],
    yAxes: [{
      ticks: {
        callback: function (label, index, labels) {
          console.log(label);
          return this.abbreviatedNumber(label);
        }
      },
      scaleLabel: {
        display: false,
        labelString: '1k = 1000'
      }
    }]
  }
};
const barData = {
  datasets: [{
    label: "Rows Processed",
    backgroundColor: defaultColor,
    data: [{
        x: 1546300800000,
        y: 216915890
      },
      {
        x: 1548979200000,
        y: 1306458666
      },
      {
        x: 1551398400000,
        y: 1780817685
      },
      {
        x: 1554076800000,
        y: 1677704491
      },
      {
        x: 1556668800000,
        y: 2027622415
      },
      {
        x: 1559347200000,
        y: 1954768048
      },
      {
        x: 1561939200000,
        y: 683285217
      }
    ]
  }]
};
const getsampledata = async () => {
  console.log(args.data);
  const doughnut = 'doughnut';
  const bar = 'bar'
  try {
    /* Here you can extend your component to have multiple chart types
    if (args.data === doughnut) {
      user.response = {
        data: doughnutData,
        options: doughnutOptions,
        type: doughnut
      };
    } else */if (args.data === bar) {
      user.response = {
        data: barData,
        options: barOptions,
        type: bar
      };
    }
  } catch (e) {
    console.log(e);
  }
};
return getsampledata();

Result

That’s all is required to create a custom component in Botpress. Let me know in the comments section if you face any issues creating your custom component in Botpress.

Note: Using Botpress version 12.5.0