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!

5 Likes
2

Hi, This seems excellent for ChatBots, you mentioned this may not be compatible with latest streamlit versions, are you working on a fix for that now?

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.