New Component: Streamlit-chat, a new way to create chatbots

Streamlit-Chat is a simple component, which provides a chat-app like interface, which makes a chatbot deployed on Streamlit have a cool UI.

Source code:

Authors: @yashppawar @YashVardhan-AI
Installation: pip install streamlit-chat or pip3 install streamlit-chat
Usage:

import streamlit as st
from streamlit_chat import message

message("My message") 
message("Hello bot!", is_user=True)  # align's the message to the right

Demo: https://share.streamlit.io/ai-yash/st-chat/main/examples/chatbot.py created by @YashVardhan-AI for us :slight_smile:
Thank you so much for reading :heart:.

2 Likes

This was my first time making a package and publishing it so forgive me if I made any mistakes, I am open to suggestions but might take time to act on them :sweat_smile:, even the first time making something using react. Thank you Streamlit team, it was fun making it.

Greetings, Yashppawar. You’ve got a great concept going there, however, is there any way you could put the chatbox below the prior chats, like in Whatsapp?

1 Like

Hello @KinePi, Thank you
yes, it is possible to have the text input below the prior chats, it can be achieved using st.empty() as a placeholder

import streamlit as st
from streamlit_chat import message

placeholder = st.empty()
input_ = st.text_input("you:")
message_history.append(input_)

with placeholder.container():
    for message_ in message_history:
        message(message_)

However, in this method, if there are many messages, the text_input gets out of the viewing area, maybe will have to limit the number of messages to be displayed, or maybe have the container of fixed height and a scroll bar (not sure how to do that) :slight_smile:


Edit: was just playing around and I have the following code, but there is a bit of delay between the previous messages and the latest message.

better one I think
import streamlit as st
from streamlit_chat import message

 for message_ in message_history:
        message(message_)   # display all the previous message

placeholder = st.empty()  # placeholder for latest message
input_ = st.text_input("you:")
message_history.append(input_)

with placeholder.container():
    message(message_history[-1]) # display the latest message

currently its possible but ill advised we are working on it.

1 Like

Such a great component!! Now I can make a QA system with it, thank you so much! I’m wondering will you add function of returning picture or datatable?

1 Like

And also are you planning to add support for ‘\n’ or html?

1 Like

Didn’t have any plan for adding HTML or Markdown support, not sure if ‘\n’ works, if not will add that soon. We can try to add HTML & MarkDown support I am afraid we might have to write a lot more CSS for that., will try it after January 3, 2022 (Exams)

1 Like

Thanks a lot! That would be so nice, and for datatable, pictures, html and markdown in reply, I’ve got a temporary solution

if type(output)==str:
  message(output)
else:
  message(“the result is”)
  st.columns((1,10))
  cols[1].write(output)
2 Likes

Hi @yashppawar

This looks super awesome! And I see you already managed to add it to the tracker :partying_face: thanks for your contribution

Happy Streamlitin’
Fanilo :balloon:

2 Likes

Great work. Will try this out

1 Like

Great work over here @yashppawar :sparkles:, Can’t wait to try it out

1 Like