# Streamlit Chat Widget

The `streamlit_chat_widget` is a custom chat input component designed for Streamlit applications, allowing users to send text and audio messages seamlessly. This widget can be integrated into Streamlit apps, making it ideal for building conversational AI interfaces, voice assistants, or any chat-based applications the component was developed by Mohammed Bahageel artificial Intelligence developer.
## Features
- **Text Input**: Users can type text messages and send them.
- **Audio Recording**: Built-in microphone functionality to capture audio messages.
- **Fixed Positioning**: The widget remains fixed at the bottom of the Streamlit app, similar to Streamlit's `st.chat_input`.
## Installation
Install the package directly from PyPI:
```bash
pip install streamlit-chat-widget
```
## Setup
### Step 1: Import and Initialize the Component
To use the component, import it into your Streamlit app. The widget will display at the bottom of the screen by default.
### Step 2: Set Up the Frontend Component
If you want to modify or rebuild the React component, you can find the source code in the `frontend` directory.
1. **Navigate to the `frontend` folder**:
```bash
cd streamlit_chat_widget/frontend
```
2. **Install dependencies**:
```bash
npm install
```
3. **Build the frontend**:
```bash
npm run build
```
4. **Run the component locally** (for development):
```bash
npm start
```
### Step 3: Publish the Package
```bash
pip install twine setuptools
python setup.py sdist bdist_wheel
twine upload dist/*
```
### Usage
Here’s a sample code to get you started with `streamlit_chat_widget`:
```python
import streamlit as st
from streamlit_chat_widget import chat_input_widget
def main():
st.title("My Custom Chat Application")
# Initialize chat history in Streamlit session state
if "chat_history" not in st.session_state:
st.session_state.chat_history = []
# Display the chat history
for message in st.session_state.chat_history:
st.write(message)
# Display the chat input widget at the bottom
user_input = chat_input_widget()
# Process the user's input from the widget
if user_input:
if "text" in user_input:
user_text =user_input["text"]
st.session_state.chat_history.append(f"You: {user_text}")
elif "audioFile" in user_input:
audio_bytes = bytes(user_input["audioFile"])
st.audio(audio_bytes)
if __name__ == "__main__":
main()
```
## Example
To create a simple app with the chat widget:
```python
import streamlit as st
from streamlit_chat_widget import chat_input_widget
from streamlit_extras.bottom_container import bottom #pip install streamlit_extras
def main():
st.title("My Custom Chat Application")
# Initialize chat history in Streamlit session state
if "chat_history" not in st.session_state:
st.session_state.chat_history = []
# Display the chat history
for message in st.session_state.chat_history:
st.write(message)
# Display the chat input widget at the bottom
with bottom():
user_input = chat_input_widget()
# Process the user's input from the widget
if user_input:
if "text" in user_input:
user_text =user_input["text"]
st.session_state.chat_history.append(f"You: {user_text}")
elif "audioFile" in user_input:
audio_bytes = bytes(user_input["audioFile"])
st.audio(audio_bytes)
if __name__ == "__main__":
main()
```
### CSS Customization
To style the widget or customize its appearance, add custom CSS in your Streamlit app. Here’s a basic example:
```python
st.markdown("""
<style>
.chat-container {
position: fixed;
bottom: 0;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
</style>
""", unsafe_allow_html=True)
```
## Additional Customization:
To postion the chat input widget in a fixed postion at the bottom of streamlit application use streamlit
floating containers
```python
import streamlit as st
from streamlit_float import *
from streamlit_chat_widget import chat_input_widget
def app():
float_init()
footer_container = st.container()
with footer_container:
user_input = chat_input_widget()
footer_container.float(
"display:flex; align-items:center;justify-content:center; overflow:hidden visible;flex-direction:column; position:fixed;bottom:15px;"
)
if __name__ == "__main__":
app()
```
### License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.
Raw data
{
"_id": null,
"home_page": "https://github.com/linancn/Chat_input_widget",
"name": "streamlit-chat-widget-tiangong",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": null,
"keywords": null,
"author": "Nan LI",
"author_email": "linanenv@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/24/ac/15ef4f122bcc4f10dbe6dcc13925f04698d0bd1d2280ba5cfa235e3e1942/streamlit_chat_widget_tiangong-0.0.3.tar.gz",
"platform": null,
"description": "\n\n\n# Streamlit Chat Widget\n\n\n\nThe `streamlit_chat_widget` is a custom chat input component designed for Streamlit applications, allowing users to send text and audio messages seamlessly. This widget can be integrated into Streamlit apps, making it ideal for building conversational AI interfaces, voice assistants, or any chat-based applications the component was developed by Mohammed Bahageel artificial Intelligence developer.\n\n## Features\n\n- **Text Input**: Users can type text messages and send them.\n- **Audio Recording**: Built-in microphone functionality to capture audio messages.\n- **Fixed Positioning**: The widget remains fixed at the bottom of the Streamlit app, similar to Streamlit's `st.chat_input`.\n\n## Installation\n\nInstall the package directly from PyPI:\n\n```bash\npip install streamlit-chat-widget\n```\n\n## Setup\n\n### Step 1: Import and Initialize the Component\n\nTo use the component, import it into your Streamlit app. The widget will display at the bottom of the screen by default.\n\n### Step 2: Set Up the Frontend Component\n\nIf you want to modify or rebuild the React component, you can find the source code in the `frontend` directory.\n\n1. **Navigate to the `frontend` folder**:\n ```bash\n cd streamlit_chat_widget/frontend\n ```\n2. **Install dependencies**:\n ```bash\n npm install\n ```\n3. **Build the frontend**:\n ```bash\n npm run build\n ```\n4. **Run the component locally** (for development):\n ```bash\n npm start\n\n ```\n\n### Step 3: Publish the Package\n```bash\npip install twine setuptools\npython setup.py sdist bdist_wheel\ntwine upload dist/*\n```\n\n### Usage\n\nHere\u2019s a sample code to get you started with `streamlit_chat_widget`:\n\n```python\nimport streamlit as st\nfrom streamlit_chat_widget import chat_input_widget\n\ndef main():\n st.title(\"My Custom Chat Application\")\n \n # Initialize chat history in Streamlit session state\n if \"chat_history\" not in st.session_state:\n st.session_state.chat_history = []\n\n # Display the chat history\n for message in st.session_state.chat_history:\n st.write(message)\n\n # Display the chat input widget at the bottom\n user_input = chat_input_widget()\n\n # Process the user's input from the widget\n if user_input:\n if \"text\" in user_input:\n user_text =user_input[\"text\"]\n st.session_state.chat_history.append(f\"You: {user_text}\")\n elif \"audioFile\" in user_input:\n audio_bytes = bytes(user_input[\"audioFile\"])\n st.audio(audio_bytes)\n\nif __name__ == \"__main__\":\n main()\n```\n\n## Example\n\nTo create a simple app with the chat widget:\n\n```python\nimport streamlit as st\nfrom streamlit_chat_widget import chat_input_widget\nfrom streamlit_extras.bottom_container import bottom #pip install streamlit_extras\n\ndef main():\n st.title(\"My Custom Chat Application\")\n \n # Initialize chat history in Streamlit session state\n if \"chat_history\" not in st.session_state:\n st.session_state.chat_history = []\n\n # Display the chat history\n for message in st.session_state.chat_history:\n st.write(message)\n\n # Display the chat input widget at the bottom\n with bottom():\n user_input = chat_input_widget()\n\n # Process the user's input from the widget\n if user_input:\n if \"text\" in user_input:\n user_text =user_input[\"text\"]\n st.session_state.chat_history.append(f\"You: {user_text}\")\n elif \"audioFile\" in user_input:\n audio_bytes = bytes(user_input[\"audioFile\"])\n st.audio(audio_bytes)\n\nif __name__ == \"__main__\":\n main()\n```\n\n### CSS Customization\n\nTo style the widget or customize its appearance, add custom CSS in your Streamlit app. Here\u2019s a basic example:\n\n```python\nst.markdown(\"\"\"\n<style>\n.chat-container {\n position: fixed;\n bottom: 0;\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n}\n</style>\n\"\"\", unsafe_allow_html=True)\n \n```\n## Additional Customization: \nTo postion the chat input widget in a fixed postion at the bottom of streamlit application use streamlit \nfloating containers\n```python\n\nimport streamlit as st\nfrom streamlit_float import *\nfrom streamlit_chat_widget import chat_input_widget\n\ndef app(): \n float_init()\n footer_container = st.container()\n with footer_container:\n user_input = chat_input_widget()\n footer_container.float(\n \"display:flex; align-items:center;justify-content:center; overflow:hidden visible;flex-direction:column; position:fixed;bottom:15px;\"\n )\n \nif __name__ == \"__main__\":\n app()\n```\n### License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.\n\n\n",
"bugtrack_url": null,
"license": null,
"summary": "A custom chat input widget for Streamlit based on Mohammed Bahageel's Chat Input Widget project",
"version": "0.0.3",
"project_urls": {
"Homepage": "https://github.com/linancn/Chat_input_widget"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "614880fd6a3ce78c236ed37b1c50589387803b944d29692d8486500f26cdf3be",
"md5": "d6581056ae32f63277f48af0bb20dabe",
"sha256": "4963f79e41ced658f3e07514b420b6a8faafddc86b21012801f8bceffa452f89"
},
"downloads": -1,
"filename": "streamlit_chat_widget_tiangong-0.0.3-py3-none-any.whl",
"has_sig": false,
"md5_digest": "d6581056ae32f63277f48af0bb20dabe",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.6",
"size": 795341,
"upload_time": "2024-12-26T12:18:33",
"upload_time_iso_8601": "2024-12-26T12:18:33.529743Z",
"url": "https://files.pythonhosted.org/packages/61/48/80fd6a3ce78c236ed37b1c50589387803b944d29692d8486500f26cdf3be/streamlit_chat_widget_tiangong-0.0.3-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "24ac15ef4f122bcc4f10dbe6dcc13925f04698d0bd1d2280ba5cfa235e3e1942",
"md5": "5028f307106d6d69bbef10183e7f30da",
"sha256": "ffc7aeebedaa3232197e6b2259e3b87584d4b4c03add5493f41717b02b018f43"
},
"downloads": -1,
"filename": "streamlit_chat_widget_tiangong-0.0.3.tar.gz",
"has_sig": false,
"md5_digest": "5028f307106d6d69bbef10183e7f30da",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 788372,
"upload_time": "2024-12-26T12:18:36",
"upload_time_iso_8601": "2024-12-26T12:18:36.711993Z",
"url": "https://files.pythonhosted.org/packages/24/ac/15ef4f122bcc4f10dbe6dcc13925f04698d0bd1d2280ba5cfa235e3e1942/streamlit_chat_widget_tiangong-0.0.3.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-26 12:18:36",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "linancn",
"github_project": "Chat_input_widget",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "streamlit-chat-widget-tiangong"
}