quadis-chat-input

Streamlit Multimodal Chat Input

A multimodal chat input component for Streamlit that supports text input, image upload, and voice input.

Note: image features require HTTPS or localhost environment to function properly.

Features

• 📝 Text Input: Same usability as st.chat_input
• 🖼️ Image File Upload: Supports jpg, png, gif, webp
• 📸 Screenshot Capture: Capture and share screenshots directly
• 🎨 Streamlit Standard Theme: Fully compatible design
• 🔄 Drag & Drop: File drag and drop support
• ⌨️ Ctrl+V: Paste images from clipboard
• ⚙️ Customizable: Rich configuration options

Installation

pip install quadis-chat-input-multimodal

Basic Usage

import streamlit as st
from quadis_chat_input import quadis_chat_input

# Basic usage
result = quadis_chat_input()

if result:
    # Display text
    if result['text']:
        st.write(f"Text: {result['text']}")
    
    # Display uploaded files
    if result['files']:
        for file in result['files']:
            import base64
            base64_data = file['data'].split(',')[1]
            image_bytes = base64.b64decode(base64_data)
            st.image(image_bytes, caption=file['name'])
    

Advanced Usage

Screenshot Capture

# Enable screenshot capture (enabled by default)
result = quadis_chat_input(
    enable_screenshot=True
)

# Disable screenshot button
result = quadis_chat_input(
    enable_screenshot=False
)

Custom Configuration

result = quadis_chat_input(
    placeholder="Please enter your message...",
    max_chars=500,
    accepted_file_types=["jpg", "png", "gif", "webp"],
    max_file_size_mb=10,
    disabled=False,
    enable_screenshot=True,  # Control screenshot button visibility
    key="custom_chat_input"
)

Chat Usage

import streamlit as st
import base64
from quadis_chat_input import quadis_chat_input

# Page configuration
st.set_page_config(
    page_title="Multimodal Chat Input Demo",
    page_icon="💬",
)

st.subheader("💭 Multimodal Chat Input Demo")
st.markdown("Simulate a chat application with voice input and file upload.")

# Manage history in session state
if "chat_history" not in st.session_state:
    st.session_state.chat_history = []

# Input for new messages
chat_result = quadis_chat_input(
    placeholder="Enter chat message...",
    key="chat_input"
)
if chat_result:
    st.session_state.chat_history.append(chat_result)

# Display chat history
if st.session_state.chat_history:
    for i, message in enumerate(st.session_state.chat_history):
        with st.chat_message("user"):
            if message.get("text"):
                st.write(message["text"])
            
            if message.get("files"):
                for file in message["files"]:
                    try:
                        base64_data = file['data'].split(',')[1] if ',' in file['data'] else file['data']
                        image_bytes = base64.b64decode(base64_data)
                        st.image(image_bytes, caption=file['name'], width=200)
                    except:
                        st.write(f"📎 {file['name']}")
            
            # Display voice input information
            if message.get("audio_metadata") and message["audio_metadata"]["used_voice_input"]:
                st.caption(f"🎤 Voice input ({message['audio_metadata']['transcription_method']})")


# Clear history
if st.button("Clear History"):
    st.session_state.chat_history = []
    st.rerun()

License

MIT License

Author

Jon Goncalves - Quadis