st-chat
# st-chat Streamlit Component, for a Chat-bot UI, [example app](https://share.streamlit.io/ai-yash/st-chat/main/examples/chatbot.py) authors - [@yashppawar](https://github.com/yashppawar) & [@YashVardhan-AI](https://github.com/yashvardhan-ai) ## Installation Install `streamlit-chat` with pip ```bash pip install streamlit-chat ``` usage, import the `message` function from `streamlit_chat` ```py 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 ``` ### Screenshot  Another example for html in chat, and Refresh chat button ```py import streamlit as st from streamlit_chat import message from streamlit.components.v1 import html def on_input_change(): user_input = st.session_state.user_input st.session_state.past.append(user_input) st.session_state.generated.append("The messages from Bot\nWith new line") def on_btn_click(): del st.session_state.past[:] del st.session_state.generated[:] audio_path = "https://docs.google.com/uc?export=open&id=16QSvoLWNxeqco_Wb2JvzaReSAw5ow6Cl" img_path = "https://www.groundzeroweb.com/wp-content/uploads/2017/05/Funny-Cat-Memes-11.jpg" youtube_embed = ''' <iframe width="400" height="215" src="https://www.youtube.com/embed/LMQ5Gauy17k" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media;"></iframe> ''' markdown = """ ### HTML in markdown is ~quite~ **unsafe** <blockquote> However, if you are in a trusted environment (you trust the markdown). You can use allow_html props to enable support for html. </blockquote> * Lists * [ ] todo * [x] done Math: Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation. $$ L = \\frac{1}{2} \\rho v^2 S C_L $$ ~~~py import streamlit as st st.write("Python code block") ~~~ ~~~js console.log("Here is some JavaScript code") ~~~ """ table_markdown = ''' A Table: | Feature | Support | | ----------: | :------------------- | | CommonMark | 100% | | GFM | 100% w/ `remark-gfm` | ''' st.session_state.setdefault( 'past', ['plan text with line break', 'play the song "Dancing Vegetables"', 'show me image of cat', 'and video of it', 'show me some markdown sample', 'table in markdown'] ) st.session_state.setdefault( 'generated', [{'type': 'normal', 'data': 'Line 1 \n Line 2 \n Line 3'}, {'type': 'normal', 'data': f'<audio controls src="{audio_path}"></audio>'}, {'type': 'normal', 'data': f'<img width="100%" height="200" src="{img_path}"/>'}, {'type': 'normal', 'data': f'{youtube_embed}'}, {'type': 'normal', 'data': f'{markdown}'}, {'type': 'table', 'data': f'{table_markdown}'}] ) st.title("Chat placeholder") chat_placeholder = st.empty() with chat_placeholder.container(): for i in range(len(st.session_state['generated'])): message(st.session_state['past'][i], is_user=True, key=f"{i}_user") message( st.session_state['generated'][i]['data'], key=f"{i}", allow_html=True, is_table=True if st.session_state['generated'][i]['type']=='table' else False ) st.button("Clear message", on_click=on_btn_click) with st.container(): st.text_input("User Input:", on_change=on_input_change, key="user_input") ``` ### Screenshot 