New Component: st_better_chat_input

Custom Components
, ,
1

Introducing st_better_chat_input – a custom chat input component for Streamlit

Hello Streamlit Community,
I am excited to share my first Streamlit component: st_better_chat_input. This function enhances the default chat input field by offering customization options for layout and appearance.

2788×176 7.74 KB

Features:

  • Orientation: Set the orientation of elements to either left or right.
  • Borders: Choose whether to display borders around specific containers.
  • Additional Containers: Add extra containers on the side and above the chat input.

Installation:

You can integrate st_better_chat_input into your Streamlit application in two ways:

  1. Copy the Function: Directly copy the st_better_chat_input() function from the source code and paste it into your Streamlit script.
  2. Import as a Module: Download the entire file and import it as a module in your project.

Important Notes:

  • This is my first project, so it’s not perfect. It relies on custom CSS and modifications to hidden Streamlit objects, which may cause some bugs or unexpected behavior.
  • Sometimes, on the first launch of the application, CSS styles do not apply correctly. If someone more knowledgeable knows why this happens, I’d greatly appreciate any insights!

For more details and to access the code, please visit the GitHub repository:

:link: https://github.com/miuoshdot/st_better_chat_input

I welcome any feedback or contributions to improve this component!

3 Likes