Custom-chatbot-widget

Requirements

• react :^17.0.2
• react-dom : ^17.0.2

Installation

npm i rasa-custom-chatbox

Usage

import Widget from 'rasa-custom-chatbox'

<Widget
    initPayload={"/get_started"}
    socketUrl={"RASA ENDPOINT"}
    customData={{"language": "en"}}
    title={"Chatbot"}
    subtitle={"Chatbot"}
    inputTextFieldHint={"Type a message..."}
/>

Custom Action

For userInput parameter in dispatcher.utter_message() function, you can use "hide" to hide the input text field or delete it from the function to show the input text field (default).

1. Datepicker

    class ActionDatePicker(Action):

        def name(self):
            return 'action_date_picker'

        def run(self, dispatcher, tracker, domain):

            ask_datepicker = {
                "type":"datepicker"
            }

            dispatcher.utter_message(text="Please pick the date", attachment=ask_datepicker, userInput="hide")

            return []

2. DateTimePicker

    class ActionDateTimePicker(Action):

        def name(self):
            return 'action_date_time_picker'

        def run(self, dispatcher, tracker, domain):

            ask_datetimepicker = {
                "type":"datetimepicker"
            }

            dispatcher.utter_message(text="Please pick the date and time", attachment=ask_datetimepicker, userInput="hide")

            return []

3. File Downloader

Note: On your my_actions.py file, you need to import json library for json.dumps() function.

class ActionFileDownloader(Action):

    def name(self):
        return 'action_file_downloader'

    def run(self, dispatcher, tracker, domain):

        headersList = {
            // put header here
        }

        bodyContent = json.dumps({
            // put body here
        })

        ask_file_downloader = {
            "type":"filedownloader",
            "endpoint": // url here,
            "body": bodyContent,
            "headers": headersList,
            "filename": // filename here,
        }

        dispatcher.utter_message(attachment=ask_file_downloader, userInput="hide")

        return []

4. (User) File Upload

    class ActionFileUploader(Action):

        def name(self):
            return 'action_file_uploader'

        def run(self, dispatcher, tracker, domain):

            ask_file_uploader = {
                "type":"fileuploader",
                "uri" : "https://xxxx",
                "uagent" : "user-agent",
                "token" : "JWT",
                "PREFIX" : "module",
                "code": "code module"
            }

            dispatcher.utter_message(text="Upload file below", attachment=ask_file_uploader)

            return []

5. action human handoff

   Note: This is a custom action to send the socketIO endpoint

class ActionHandOff(Action):
    def name(self):
        return "action_handoff"

    def run(self, dispatcher, tracker, domain):
        server_socketio = "http://localhost:3006"
        dispatcher.utter_message(
            text=server_socketio,
        )
        return []

6. action Charts

class ActionChart(Action):

    def name(self):
        return 'action_chart'

    def run(self, dispatcher, tracker, domain):

        chart_information = {
            type: "charts",
            chartType: "pie",
            title : "Leave Report",
            data : [300, 50, 100],
            labels : ["Sick Leave", "Unpaid Leave", "Annual Leave"],
            colors : ["#36a2eb", "#ffcd56", "#ff6384"] 
            NOTE: for line chart, use "colors" : "#36a2eb"
        }

        dispatcher.utter_message(attachment=chart_information, userInput="hide")

        return []

7. action Collapsible

class ActionCollapsible(Action):

    def name(self):
        return 'action_collapsible'

    def run(self, dispatcher, tracker, domain):

        data = {
            type: "collapsible",
            collapsible_payload : [
                {
                    title: "Title 1",
                    content: "<p> Content 1 is <strong>here</strong> </p>"
                },
                {
                    title: "Title 2",
                    content: "<p> Content 2 is <strong>here</strong> </p>"
                }
            ]
        }

        dispatcher.utter_message(attachment=data, userInput="hide")

        return []

8. action HTML Renderer

class ActionHTMLRenderer(Action):

    def name(self):
        return 'action_html_renderer'

    def run(self, dispatcher, tracker, domain):

        data = {
            type: "htmlrenderer",
            html_payload : "<span>Example for <strong>htmlrenderer</strong> </span>"
        }

        dispatcher.utter_message(attachment=data, userInput="hide")

        return []

9. action Suggestion

class ActionSuggestion(Action):
    
    def name(self):
        return 'action_sugggestion'

    def run(self, dispatcher, tracker, domain):

        dispatcher.utter_message(
            text="Suggestion for you",
            quick_replies=[
                {
                    "payload":'/payload',
                    "title": "Suggestion 1",
                    "type": "postback",
                },
                {
                    "payload":'/payload',
                    "title": "Suggestion 2",
                    "type": "postback",
                },
                {
                    "payload":'/payload',
                    "title": "Suggestion 3",
                    "type": "postback",
                }
            ]
        )

10. Action Show Image

class ActionSuggestion(Action):
    
    def name(self):
        return 'action_sugggestion'

    def run(self, dispatcher, tracker, domain):

        data ={
            type: "image",
            payload: {
                title: "TITLE ON IMAGE",
                src: "ENDPOINT URL IMAGE"
            }
        }
        
        css = {}

        dispatcher.utter_message(attachment=data, customCss=css)

        return []

test-rapli