{"id":13642271,"url":"https://github.com/ai-yash/st-chat","last_synced_at":"2025-05-14T17:10:09.165Z","repository":{"id":39903331,"uuid":"439528372","full_name":"AI-Yash/st-chat","owner":"AI-Yash","description":"Streamlit Component, for a Chatbot UI","archived":false,"fork":false,"pushed_at":"2024-08-19T04:08:17.000Z","size":14050,"stargazers_count":1038,"open_issues_count":41,"forks_count":273,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-14T17:09:29.853Z","etag":null,"topics":["chatbot","hacktoberfest","streamlit-component"],"latest_commit_sha":null,"homepage":"https://pypi.org/project/streamlit-chat/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AI-Yash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-18T04:36:01.000Z","updated_at":"2025-05-05T00:55:25.000Z","dependencies_parsed_at":"2025-01-14T20:59:57.996Z","dependency_job_id":"8de30495-43cb-4165-b132-47e149b974c2","html_url":"https://github.com/AI-Yash/st-chat","commit_stats":{"total_commits":67,"total_committers":11,"mean_commits":6.090909090909091,"dds":0.417910447761194,"last_synced_commit":"0f647f32dad43ff631a92aac87d8a17b5cb75824"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AI-Yash%2Fst-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AI-Yash%2Fst-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AI-Yash%2Fst-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AI-Yash%2Fst-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AI-Yash","download_url":"https://codeload.github.com/AI-Yash/st-chat/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254190394,"owners_count":22029632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chatbot","hacktoberfest","streamlit-component"],"created_at":"2024-08-02T01:01:29.269Z","updated_at":"2025-05-14T17:10:09.140Z","avatar_url":"https://github.com/AI-Yash.png","language":"JavaScript","funding_links":[],"categories":["Chatbots"],"sub_categories":[],"readme":"# 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) \u0026 [@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![chatbot-og](https://user-images.githubusercontent.com/90775147/210397700-5ab9e00d-a61b-4bc9-a34a-b5bd4454b084.png)\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\u0026id=16QSvoLWNxeqco_Wb2JvzaReSAw5ow6Cl\"\nimg_path = \"https://www.groundzeroweb.com/wp-content/uploads/2017/05/Funny-Cat-Memes-11.jpg\"\nyoutube_embed = '''\n\u003ciframe width=\"400\" height=\"215\" src=\"https://www.youtube.com/embed/LMQ5Gauy17k\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; encrypted-media;\"\u003e\u003c/iframe\u003e\n'''\n\nmarkdown = \"\"\"\n### HTML in markdown is ~quite~ **unsafe**\n\u003cblockquote\u003e\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\u003c/blockquote\u003e\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'\u003caudio controls src=\"{audio_path}\"\u003e\u003c/audio\u003e'}, \n     {'type': 'normal', 'data': f'\u003cimg width=\"100%\" height=\"200\" src=\"{img_path}\"/\u003e'}, \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![chatbot-markdown-sp](https://user-images.githubusercontent.com/27276267/224665635-1d9c1b8e-92ba-4f67-9e27-ad5d4eacaa43.png)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fai-yash%2Fst-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fai-yash%2Fst-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fai-yash%2Fst-chat/lists"}