streamlit-chat-widget-tiangong


Namestreamlit-chat-widget-tiangong JSON
Version 0.0.3 PyPI version JSON
download
home_pagehttps://github.com/linancn/Chat_input_widget
SummaryA custom chat input widget for Streamlit based on Mohammed Bahageel's Chat Input Widget project
upload_time2024-12-26 12:18:36
maintainerNone
docs_urlNone
authorNan LI
requires_python>=3.6
licenseNone
keywords
VCS
bugtrack_url
requirements No requirements were recorded.
Travis-CI No Travis.
coveralls test coverage No coveralls.
            


# Streamlit Chat Widget

![Streamlit Chat Widget](https://i.ibb.co/dBpSmjW/chat-input-widget.png)

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![Streamlit Chat Widget](https://i.ibb.co/dBpSmjW/chat-input-widget.png)\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"
}
        
Elapsed time: 0.67389s