jiteshgaikwad / chatbot-widget

🔥 Widget 2.0 released, built using React JS & Tailwind CSS

An Open Source ChatBot widget easy to connect to RASA bot through Rest Channel.

Features

• Text
• Markdown
• Buttons
• Images
• Video
• PDF Attachment
• Dropdown
• Quick replies
• Cards carousel
• Charts
• Collapsible
• Bot typing indicator
• Location access

Instructions

• You can read the instructions here in instructions.md

Documentation

• Check out the documentation on how to send bot response from Rasa in response.md
• If you want to modify the UI elements, you can read on how to do here: modifications.md

Gallery:

• Check out the sample pics here gallyery.md

Library used:

• Materialize CSS for CSS
• Showdownjs for Markdown suppport
• Chart.js for Charts

Demo:

Check out the widget in action here demo

chatbot-widget's Issues

After accessing the user location. It's asking for the user location again and again it's not stopping. Please find the below screenshot for your reference if anyone could help me in it will be beneficial for me.

sir, it's showing me in loop, after allowing it from the browser. It asks for the user permission again. How to stop the same?

Link is not showing.

Hey everyone,
I tried to pass a link but it's not coming as a link in chatbot need your help in this.

Please find the code for the screenshot.

in link variable I have the link.

how to use defineLocale?

Setting Slots from Dropdown in RASA

I need assistance with setting slots from dropdown options in RASA. Currently I'm using the dropdown from this Chatbot Widget

However when i select the options from the webchat the slot is always set to None.

I have created slot in domain.yml,

slots:
  game_name:
    type: any

entities:
- game_name

and also created an intent

- intent: game_option
  examples: |
    - [Access Platc](game_name)
    - [Citk Platc](game_name)
    - [Diamond Platc](game_name)

and in stories.yml, I set this:

- intent: game_option
  - slot_was_set:
      - game_name

I dont understand why it's still returning None

My response is from custom actions and looks like this:

class ActionListGames(Action):
    def name(self) -> Text:
        return "action_list_games"

    def run(self, dispatcher: CollectingDispatcher,
            tracker: Tracker,
            domain: Dict[Text, Any]) -> List[Dict[Text, Any]]:

        response_games = requests.get("https://www.gamexn.com/api/v2/games")
        processed_output = json.load(io.BytesIO(response_games.content))['data']['games']

        games = [
            {
                "label": row['gameName'],
                "value": "/game_option{\"game_name\": \"" + row['gameCode'] + "\"}"
            } for row in processed_output
        ]
        message = {"payload": "dropDown", "data": games}

        dispatcher.utter_message(text="Please select a game option:", json_message=message)
        return []

I dont know why its still returning None.

how can I send customData?

I think Chatbot-Widget is an excellent tool for RASA client.
But I couldn't find out how to send message with customData or metadata such as {"language":"fr"}

Could you explain about it?
Thank you.

Want to achieve a automatic text suggestion in text bar of UI

Hi Sir,

I want that if I type something in chatbot (Text bar of UI) It should display the suggestion and by hitting on the tab it should complete that word.

Is this possible in your UI or If you already have these feature could you please let me know

Unable to render plotly charts in it, It used to render in previous versions but not here.

index.js size

Hey, I am scoping a few front ends for Rasa and came across your project. It looks promising and I see there is a v2 based on React and Tailwind in the works but I looked at the linked index.js file and it's rather large (870KB). Is there a slimmer version or this, or is that on the roadmap at least?

Handoff feature

Can we have hand off feature ?
Typical proposed solution could be as follows :

1. Human requests handoff.
2. Bot sends URL of handoff service in payload
3. Bot starts sending all the future messages to new URL.

Reference https://github.com/RasaHQ/chatroom#setting-up-handoff-capability

Deploy problem

Hey @JiteshGaikwad!

I'm having some dumb problem with the Widget 2.0. Running the app locally with npm start works fine, but when I try to deploy it, it shows some BundleAnalyzer stuff. I tried removing the plugin from webpack.config.js and the deploy shows just a black screen (does not load the bot).

Could you give me a hint on how to deploy the bot or fix the config please?

Thank you

How to connect Chatbot-Widget to a Wordpress site

Hello,
I have been try to get in touch with you Jitesh, Please I need help to connect my RASA chatbot to my Wordpress site, I chose to use Chatbot-Widget because I can easily customise certain things like logo, images, etc.
I need help in connecting the dots to get chatbot running on my site.

Hi, How can I add Cards carousel feature in Chatbot-Widget, do we have any one example?

Upload Feature

I know that no app has the PDF download feature, but I would like to have the ability to upload files on the webchat. What do you think?

Sign in page popup for login.

How to integrate login page to UI.

Widgets deployed into an ms Teams rasa bot

Hello.

This looks like a great project. I am looking to implement similar widgets and tools into a bot that will be enabled in ms teams. Any tips on things I should look out for? Are these widgets transferable into other channels where a rasa bot can be deployed?

Thank you for your time and efforts.

Links not turnign to a tag in chat widget

PFA

Rasa is returning a text and the text has an HTTP URL so it should turn into a link. Please let me if there is any other way to convert URL to link ?

How to add custom welcome message in chatbot !

i.e bot -> hello, how are you !
bot -> I'm xyz chatbot, how can I help you ?

Story actions are not running after the first plot

I am able to execute the code. I have added my own custom actions to the bot. But the the bot stops executing actions after the 1st plot in the UI. The same story is executing correctly in rasa x. I believe there is some issue with the front end code. can you please help me on this. [email protected]

Hi everyone

TImestamp below messages

Is there an option to print timestamp along with username below the chat messages

Add support for Adaptive Cards to allow custom widgets

Adding support for Adaptive Cards would be an extensible way to add custom widgets. This could address all or part of issues #6, #8, #10 and #28

How to access the location.js?

Maximize and Minimize Options

Hi @JiteshGaikwad ,

Can you please also add a maximize and minimize button beside 3 dots for closing and clearing the conversation?

Currently, both of your widgets are missing this option while showing larger data.

Show how to connect to Rasa on remote server

If you're running the Rasa server on a remote server like an EC2 instance, it is necessary to modify https://github.com/JiteshGaikwad/Chatbot-Widget/blob/main/static/js/constants.js#L2 an replace localhost with the public IP address of the server, only then will it connect. Suggest updating the instructions to mention that

How could I keep the buttons permanently after clicking the buttons

When I select any option the buttons are removed and showing the text, instead I want to have the buttons appear permanently without removing them.

Before selecting the choice the buttons are displayed

After the choice is selected the buttons are removed from bot response.

Instead, I want the buttons to be displayed and clickable just like below

Use case is, user can scroll up and select the previous choices without having to create a separate buttons for Back, Home, Menu etc Please let me know if this can be achieved

Embed bot without button

Hey @JiteshGaikwad!

Is it possible to embed just the bot in the page instead of the button? I was thinking something like the embedded prop of botfront's widget.

Thank you 😄

Request for Guidance on Reducing Response Time in Frontend

I am experiencing extended response times from my chatbot in the frontend. While the backend is functioning correctly and retrieving data from the backend takes approximately 3 seconds, I am interested in finding ways to reduce the response time specifically within the frontend. I would appreciate your guidance on possible solutions to address this matter.

Thank you.

Adding widget to some other website using script tags?

Is there anyway we can share this widget using script tags? A good example would be rasa-webchat.

When will be other features like PDF Attachment, Dropdown, etc. will be added in Rasa Chatbot Widget 2.0

Features like like PDF Attachment, Dropdown, etc. will be added in Rasa Chatbot Widget 2.0 which is already present inside Chat Widget 1.0. And Inside Chatbot Widget 1.0 after pdf is render in chatbot the buttons is not showing.

actions.py

class ActionGetCertificate(Action):
    def name(self) -> Text:
        return "action_get_certificate"

    def run(self, dispatcher: CollectingDispatcher, tracker: Tracker, domain: Dict[Text, Any]) -> List[Dict[Text, Any]]:
        # Extract the application_number from the user input
        application_number = next(tracker.get_latest_entity_values("application_number"), None)
        if application_number:
            if len(application_number) == 12 or len(application_number) == 13:
                certificate_data = self.get_certificate(application_number)
                if certificate_data:
                    # Convert byte array into PDF
                    pdf_data = io.BytesIO(certificate_data)
                
                    # Save the PDF file into a folder
                    folder_path = "ui/static/pdf/"  # Set the path to the folder
                    file_name = f"{application_number}.pdf"  # Set the desired file name
                    file_path = os.path.join(folder_path, file_name)

                    with open(file_path, "wb") as wfile:
                        wfile.write(pdf_data.getvalue())
                    
                    # Pdf URL
                    pdf_url = f'static/pdf/{application_number}.pdf'

                    data = {
                        "payload": "pdf_attachment",
                        "title": application_number,  # Set the title as the application number
                        "url": pdf_url,  # Set the url as the pdf_data object
                    }
                    dispatcher.utter_message(text="Here is your pdf", json_message=data)
                else:
                    dispatcher.utter_message(text="Invalid application number. Please try again.")
            else:
                dispatcher.utter_message(text="The application number should be exactly 12 or 13 characters long.")
        else:
            dispatcher.utter_message(text="I'm sorry, I didn't get the application number. Please try again.")
        return []
    
    def get_certificate(self, application_number: str) -> bytes:
        wsdl_url = "http://localhost:42512/test?WSDL"  # Replace with your web service WSDL URL
        client = Client(wsdl_url)
        response = client.service.GetCertificate(ApplicationNo=application_number)
        return response

stories.yml

• story: application_status
  steps:

  • intent: greet
  • action: utter_greet
  • intent: ask_for_application_details
  • action: utter_ask_for_application_no
  • intent: provide_application_number
    entities:
    • application_number
  • action: action_get_certificate
  • action: utter_yes_no

• story: Greet and continue if user selects "yes"
  steps:

  • action: utter_yes_no
  • intent: affirm
  • action: utter_greet

• story: Greet and say goodbye if user selects "no"
  steps:

  • action: utter_yes_no
  • intent: deny
  • action: utter_goodbye

domain.yml

intents:

• greet
• goodbye
• affirm
• deny
• mood_great
• mood_unhappy
• bot_challenge
• ask_for_application_details
• provide_application_number

entities:

• application_number

actions:

• action_get_certificate

responses:
utter_greet:

• text: "Hey! How can I assist you today?"

utter_yes_no:

• text: "Do you want to continue?"
  buttons:
  • title: Yes
    payload: /affirm
  • title: No
    payload: /deny

utter_ask_for_application_no:

• text: "Please provide your application number"

utter_cheer_up:

• text: "Here is something to cheer you up:"
  image: "static/cub.jpg"

utter_did_that_help:

• text: "Did that help you?"

utter_happy:

• text: "Great, carry on!"

utter_goodbye:

• text: "Bye"

utter_iamabot:

• text: "I am a bot, powered by Rasa."

session_config:
session_expiration_time: 60
carry_over_slots_to_new_session: true

How to add HTML link as a Bot Response.

Could you please let me know how to add HTML as the bot response in this widget?

I have created html_attachment file, similar to pdf_attachment file, and modified the code wherever required. But I'm not getting any response.

For reference:

---

HTML Attachment

• sending response from domain.yml

  responses:
    utter_html:
      - text: "Here is the HTML link."
        custom: 
          payload: html_attachment
          title: "HTML Title"
          url: "URL to HTML link"
  

• sending response from actions.py

    data = {
      "payload":"html_attachment",
      "title": "HTML Title",
      "url": "URL to HTML link"
    }
  dispatcher.utter_message(json_message=data)
  
  

---

Also, created a file html_link.js:

/**

• renders html link on to the chat screen

• @param {Object} html_data json object
  */
  function renderhtmllink(html_data) {
  const { url: html_url } = html_data.custom;
  const { title: html_title } = html_data.custom;
  const html_attachment = <div class="html_attachment"><div class="row"><div class="col s3 html_icon"> <i class="fa fa-file-pdf-o" aria-hidden="true"></i></div><div class="col s9 html_link"><a href="${html_url}" target="_blank"> ${html_title} </a></div></div></div>;

  $(".chats").append(html_attachment);
  scrollToBottomOfResults();
  }

---

Added the above changes in chat.js as well:

// check if the custom payload type is "html_attachment"
if (payload === "html_attachment") {
renderhtmllink(response[i]);
return;

Please let me know if i am missing anything here. Appreciate your help. Thanks in Advance :)