[React Based Rasa Chatroom] How to send onClick() events of Buttons placed in Table

Rasa Open Source
1

I’m working on a chatbot using Rasa and UI is based on the React-Based Chatroom provided by Scalable Minds GitHub - scalableminds/chatroom: React-based Chatroom Component for Rasa Stack .

As I am completely newbie to chatbot & React so I am facing some difficulties.

Chatbot has a functionality to show the number of projects on which an employee is working and by clicking on number of projects, it shows the details.

Currently chatbot shows standalone buttons & performs click operation by passing “buttons with payload” in utter_button_message.

Now, I have a requirement to show :

  1. List of Employees in Table along with a Button which will display the No. of Projects he/she is working on.chatbot

  2. Clicking on that button will display the Project Details.

By referring react-markdown documentation, In Message.js, I have set escapeHtml={false} and added support for “table” in case: “text”.

Now I can show table in the chat but I am unable to perform onClick() operation of button displayed in the table.

I’m using dispatcher.utter_message() method to pass the table, Now my problem is How & Where should I handle the onClick() events so that next conversation is triggered??

Any sample code or any blog link will be really helpful.

2

Can you please send a screenshot how the displayed table looks like? I’m having troubles imagining how this looks like :thinking:

3

It will look like below…

Currently I am not showing buttons in each row. Right now, I’m showing table using utter_message then I’m showing buttons separately below table using utter_button_message

Expected : No Separate buttons, Table should have inbuilt buttons.

4

Ok, then I recommend building your own custom connector who can output the things in your desired format.

5

@ Tobias_Wochinger Can you provide a link for this. I also want my table to be action-trigerred. thanks in advance

6

What do you mean by action-triggered?

7

The column values of the table are clickable. On clicking any item of the table , it performs an action , call another custom action

on this figure as u can see, Under column “No of Projects” ::: I want when user clicks on 2 . Deatils of the projects are shown