# 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",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": "",
"keywords": "chat streamlit streamlit-component",
"author": "Yash Pravin Pawar, Yash Vardhan Kapil",
"author_email": "yashpawarp@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/d8/3e/7b16dad6192dca27502a57b218424563d61154bdba97bef226cb222e97ec/streamlit-chat-0.1.1.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\n\n",
"bugtrack_url": null,
"license": "",
"summary": "A streamlit component, to make chatbots",
"version": "0.1.1",
"project_urls": {
"Homepage": "https://github.com/AI-Yash/st-chat"
},
"split_keywords": [
"chat",
"streamlit",
"streamlit-component"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "86f826d8429dea8b240f62193fdf4bd36240e2e18d01be50e8f8c0d65491f4b8",
"md5": "7fecfc16744f511bfd783609dde9ed8e",
"sha256": "bec918a6ff9d24fbc842d5a0e7c492e30e1ef71c3a72b94b0cb4be1a7300881e"
},
"downloads": -1,
"filename": "streamlit_chat-0.1.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "7fecfc16744f511bfd783609dde9ed8e",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.6",
"size": 1225206,
"upload_time": "2023-06-25T17:06:39",
"upload_time_iso_8601": "2023-06-25T17:06:39.021763Z",
"url": "https://files.pythonhosted.org/packages/86/f8/26d8429dea8b240f62193fdf4bd36240e2e18d01be50e8f8c0d65491f4b8/streamlit_chat-0.1.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "d83e7b16dad6192dca27502a57b218424563d61154bdba97bef226cb222e97ec",
"md5": "14b03b434b24801be35ce378a1fc1aed",
"sha256": "e5911c8e3d5bbdd444782a0eb46a5f0cf24247124eb165bcc2e759540767ac3c"
},
"downloads": -1,
"filename": "streamlit-chat-0.1.1.tar.gz",
"has_sig": false,
"md5_digest": "14b03b434b24801be35ce378a1fc1aed",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 1200156,
"upload_time": "2023-06-25T17:06:41",
"upload_time_iso_8601": "2023-06-25T17:06:41.421785Z",
"url": "https://files.pythonhosted.org/packages/d8/3e/7b16dad6192dca27502a57b218424563d61154bdba97bef226cb222e97ec/streamlit-chat-0.1.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-06-25 17:06:41",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": 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.1.0"
]
]
},
{
"name": "requests",
"specs": []
}
],
"lcname": "streamlit-chat"
}
JSON
