# 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
Raw data
{
"_id": null,
"home_page": "https://github.com/AI-Yash/st-chat",
"name": "streamlit-chat-media",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": "",
"keywords": "chat streamlit streamlit-component",
"author": "Intelligenza Artificiale Italia",
"author_email": "ceo@intelligenzaartificialeitalia.net",
"download_url": "https://files.pythonhosted.org/packages/d3/79/c4f2dee76ce4f07acef37b2a43a7d7bec03b40f77b80723e5652c52ae384/streamlit-chat-media-0.0.2.tar.gz",
"platform": null,
"description": "# st-chat\n\nStreamlit Component, for a Chat-bot UI, [example app](https://share.streamlit.io/ai-yash/st-chat/main/examples/chatbot.py)\n\nauthors - [@yashppawar](https://github.com/yashppawar) & [@YashVardhan-AI](https://github.com/yashvardhan-ai)\n\n## Installation\n\nInstall `streamlit-chat` with pip\n```bash\npip install streamlit-chat \n```\n\nusage, import the `message` function from `streamlit_chat`\n```py\nimport streamlit as st\nfrom streamlit_chat import message\n\nmessage(\"My message\") \nmessage(\"Hello bot!\", is_user=True) # align's the message to the right\n```\n \n### Screenshot\n\n\n\nAnother example for html in chat, and Refresh chat button\n```py\nimport streamlit as st\nfrom streamlit_chat import message\nfrom streamlit.components.v1 import html\n\ndef on_input_change():\n user_input = st.session_state.user_input\n st.session_state.past.append(user_input)\n st.session_state.generated.append(\"The messages from Bot\\nWith new line\")\n\ndef on_btn_click():\n del st.session_state.past[:]\n del st.session_state.generated[:]\n\naudio_path = \"https://docs.google.com/uc?export=open&id=16QSvoLWNxeqco_Wb2JvzaReSAw5ow6Cl\"\nimg_path = \"https://www.groundzeroweb.com/wp-content/uploads/2017/05/Funny-Cat-Memes-11.jpg\"\nyoutube_embed = '''\n<iframe width=\"400\" height=\"215\" src=\"https://www.youtube.com/embed/LMQ5Gauy17k\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; encrypted-media;\"></iframe>\n'''\n\nmarkdown = \"\"\"\n### HTML in markdown is ~quite~ **unsafe**\n<blockquote>\n However, if you are in a trusted environment (you trust the markdown). You can use allow_html props to enable support for html.\n</blockquote>\n\n* Lists\n* [ ] todo\n* [x] done\n\nMath:\n\nLift($L$) can be determined by Lift Coefficient ($C_L$) like the following\nequation.\n\n$$\nL = \\\\frac{1}{2} \\\\rho v^2 S C_L\n$$\n\n~~~py\nimport streamlit as st\n\nst.write(\"Python code block\")\n~~~\n\n~~~js\nconsole.log(\"Here is some JavaScript code\")\n~~~\n\n\"\"\"\n\ntable_markdown = '''\nA Table:\n\n| Feature | Support |\n| ----------: | :------------------- |\n| CommonMark | 100% |\n| GFM | 100% w/ `remark-gfm` |\n'''\n\nst.session_state.setdefault(\n 'past', \n ['plan text with line break',\n 'play the song \"Dancing Vegetables\"', \n 'show me image of cat', \n 'and video of it',\n 'show me some markdown sample',\n 'table in markdown']\n)\nst.session_state.setdefault(\n 'generated', \n [{'type': 'normal', 'data': 'Line 1 \\n Line 2 \\n Line 3'},\n {'type': 'normal', 'data': f'<audio controls src=\"{audio_path}\"></audio>'}, \n {'type': 'normal', 'data': f'<img width=\"100%\" height=\"200\" src=\"{img_path}\"/>'}, \n {'type': 'normal', 'data': f'{youtube_embed}'},\n {'type': 'normal', 'data': f'{markdown}'},\n {'type': 'table', 'data': f'{table_markdown}'}]\n)\n\nst.title(\"Chat placeholder\")\n\nchat_placeholder = st.empty()\n\nwith chat_placeholder.container(): \n for i in range(len(st.session_state['generated'])): \n message(st.session_state['past'][i], is_user=True, key=f\"{i}_user\")\n message(\n st.session_state['generated'][i]['data'], \n key=f\"{i}\", \n allow_html=True,\n is_table=True if st.session_state['generated'][i]['type']=='table' else False\n )\n \n st.button(\"Clear message\", on_click=on_btn_click)\n\nwith st.container():\n st.text_input(\"User Input:\", on_change=on_input_change, key=\"user_input\")\n\n```\n\n### Screenshot\n\n\n\n",
"bugtrack_url": null,
"license": "",
"summary": "A streamlit component, to make chatbots with media support",
"version": "0.0.2",
"split_keywords": [
"chat",
"streamlit",
"streamlit-component"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "91cf626bd1b06a2c8debe8ff585d181373e0ce209bfedf4532fed92121c1cd27",
"md5": "57264f104ff90bbdc03c923757f7335c",
"sha256": "ee1fe1d96805568eb0d415d3a7d85f6a3019a89a1bb59c36ef1e2fcc47bada9a"
},
"downloads": -1,
"filename": "streamlit_chat_media-0.0.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "57264f104ff90bbdc03c923757f7335c",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 2691946,
"upload_time": "2023-03-28T19:35:43",
"upload_time_iso_8601": "2023-03-28T19:35:43.892603Z",
"url": "https://files.pythonhosted.org/packages/91/cf/626bd1b06a2c8debe8ff585d181373e0ce209bfedf4532fed92121c1cd27/streamlit_chat_media-0.0.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "d379c4f2dee76ce4f07acef37b2a43a7d7bec03b40f77b80723e5652c52ae384",
"md5": "4d2938be0a8ad9aa981c1e1e09fb55d3",
"sha256": "b90d7ad19decd72a68dcb248a54dd3ebee0f6362eff92fb4ac3c962d3e35b8b6"
},
"downloads": -1,
"filename": "streamlit-chat-media-0.0.2.tar.gz",
"has_sig": false,
"md5_digest": "4d2938be0a8ad9aa981c1e1e09fb55d3",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 2649661,
"upload_time": "2023-03-28T19:35:48",
"upload_time_iso_8601": "2023-03-28T19:35:48.249049Z",
"url": "https://files.pythonhosted.org/packages/d3/79/c4f2dee76ce4f07acef37b2a43a7d7bec03b40f77b80723e5652c52ae384/streamlit-chat-media-0.0.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-03-28 19:35:48",
"github": true,
"gitlab": false,
"bitbucket": false,
"github_user": "AI-Yash",
"github_project": "st-chat",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [
{
"name": "streamlit",
"specs": []
},
{
"name": "streamlit-chat",
"specs": [
[
"==",
"0.0.2.2"
]
]
},
{
"name": "requests",
"specs": []
}
],
"lcname": "streamlit-chat-media"
}
JSON
