Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ai-yash/st-chat
Streamlit Component, for a Chatbot UI
https://github.com/ai-yash/st-chat
chatbot hacktoberfest streamlit-component
Last synced: about 4 hours ago
JSON representation
Streamlit Component, for a Chatbot UI
- Host: GitHub
- URL: https://github.com/ai-yash/st-chat
- Owner: AI-Yash
- License: mit
- Created: 2021-12-18T04:36:01.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-19T04:08:17.000Z (5 months ago)
- Last Synced: 2025-01-14T21:06:52.318Z (7 days ago)
- Topics: chatbot, hacktoberfest, streamlit-component
- Language: JavaScript
- Homepage: https://pypi.org/project/streamlit-chat/
- Size: 13.4 MB
- Stars: 972
- Watchers: 9
- Forks: 265
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Contributing: docs/contributing.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ChatGPT-repositories - st-chat - Streamlit Component, for a Chatbot UI (Chatbots)
README
# 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 = '''
'''
markdown = """
### HTML in markdown is ~quite~ **unsafe**
However, if you are in a trusted environment (you trust the markdown). You can use allow_html props to enable support for html.
* 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''},
{'type': 'normal', 'data': f'
'},
{'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
