Custom Chat Input Widget Announcement

[Mohammed_Bahageel]

Introducing the streamlit_chat_widget!

We’re thrilled to announce streamlit_chat_widget, a custom-built chat input component for all Streamlit enthusiasts! Designed with versatility in mind, this widget brings both text and audio input capabilities, perfect for conversational AI, voice assistants, and any chat-based applications you dream up.

Created by Mohammed Bahageel, AI Developer, streamlit_chat_widget offers a seamless and intuitive user experience in your Streamlit app:

Key Features:

• Text Input: Type and send messages effortlessly.
• Audio Recording: Built-in mic functionality for voice messages.
• Fixed Position: Just like st.chat_input, it stays anchored at the bottom for ease of access.

Installation
Get started with one line of code:

pip install streamlit-chat-widget==0.1.0

Future Releases
The package will be updated regularly and periodically to fulfill the needs of of our beloved streamlit community members and its available here !
Usage
Integrating streamlit_chat_widget into your app is easy! Here’s a quick start:

import streamlit as st
from streamlit_chat_widget import chat_input_widget

def main():
    st.title("My Custom Chat Application")
    
    if "chat_history" not in st.session_state:
        st.session_state.chat_history = []

    for message in st.session_state.chat_history:
        st.write(message)

    user_input = chat_input_widget()

    if user_input:
        if "text" in user_input:
            st.session_state.chat_history.append(f"You: {user_input['text']}")
        elif "audioFile" in user_input:
            st.audio(bytes(user_input["audioFile"]))

if __name__ == "__main__":
    main()

CSS Customization
Want to make it your own? You can add custom CSS to style the widget exactly how you like.

st.markdown("""
<style>
.chat-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
</style>
""", unsafe_allow_html=True)

Additional Customization
Use streamlit_float to position the widget in a floating container for an even more refined look.

We’d love to see how you bring streamlit_chat_widget into your projects! Share your creations and join the conversation in the Streamlit community today.
Contributions
For contribution to the project please visit my GitHub repository star the repo and feel free to make your contributions and enhancements , thank you in advance
Happy Development and Coding!

[jasonchanhku]

Hi there, cool stuff ! I tried using it just now and noticed some issues:

• The first text input doesnt show up until the second text input is submitted
• [ENTER] button does not work for text input
• The input bar keeps going lower and lower with more text

• The audio replay pops up below the chat input

Let me know if you have plans to address these ! Thanks.

Regards,
Jason Chan

[Mohammed_Bahageel]

Thanks for your feedback , I will make sure to update it to solve these issues , I showed in the community because I would like to receive feedback from the community members to get the best version , to maintain the widget in fixed position please use streamlit floating containers if you have additional notes feel free to share them
Thanks for trying the package

[Mohammed_Bahageel]

Good Morning
Thank you for your constructive feedback , I fixed the issues related to the widget and new version is available here !
as for the positioning of the widget and voice use python code to achieve that
to position the widget at the bottom use floating container:

import streamlit as st
from streamlit_float import * 
from streamlit_chat_widget import chat_input_widget
 float_init()
    footer_container = st.container()
    with footer_container:
        response = chat_input_widget()
    footer_container.float(
        "display:flex; align-items:center;justify-content:center; overflow:hidden visible;flex-direction:column; position:fixed;bottom:15px;"
    )

as for the audio , I developed the widget not to display audio files on the UI , I developed it to send both text and audio to AI models /APIs
however you can use custom CSS to achieve the desired output
please visit my GitHub repository for issues and contributions its available here !
thanks in advance
Mohammed Bahageel
Artificial Intelligence Developer