Introduction

Recently, I used Streamlit to create a chatbot for an application. The use of components makes it really efficient to create simple applications, but I felt like whenever I wanted to customise more things got complicated. When using the st-chat component, I could not add quick reply buttons or a image-carousel to the bot’s replies.

So instead, I created a similar chatbot using Flask. I looked around to see if i could find some code for a chatbot UI in flask and I found this project by binary-hood. I forked it and made the changes I wanted to add:

  • Light/dark mode toogle
  • Quick reply buttons

Feautures

Light/Dark mode

This feaure wasn’t present in the original project. Here are some screenshots:

Dark Mode Light Mode

Quick reply buttons

When sending the result to the frontend, you can add a array of strings called quick_replies. In the frontend, this will create the respective buttons. If you add a “!” at the begging of the string, then the button will be a diffent color. This is useful if, for example, you want to have a “cancel” button.

@app.route("/get", methods=["GET", "POST"])
def chat():
    input = request.form["msg"]

    result = gpt.get_gpt_answer(input)
    print(result)
    quick_replies = ["Hello World", "!Goodbye"]

    return {"result": result, "quick_replies": quick_replies}

Here is what it looks like: Quick replies screenshot

You get the full code for this project here. Feel free to fork it and add even more feautures.