├── .gitignore ├── LICENSE ├── MANIFEST.in ├── README.md ├── setup.py └── streamlit_chat_widget ├── __init__.py └── frontend ├── .gitignore ├── .prettierrc ├── package.json ├── public ├── bootstrap.min.css └── index.html ├── src ├── ChatInputWidget.css ├── ChatInputWidget.tsx ├── index.tsx ├── react-app-env.d.ts ├── react-dom.d.ts └── react-mic.d.ts ├── tsconfig.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | *.py[cod] 4 | *$py.class 5 | 6 | # C extensions 7 | *.so 8 | 9 | # macOS hidden files 10 | .DS_Store 11 | 12 | # Virtual environments 13 | env/ 14 | venv/ 15 | .venv/ 16 | ENV/ 17 | .ENV/ 18 | 19 | # VS Code workspace settings 20 | .vscode/ 21 | *.code-workspace 22 | 23 | # Pyre type checker 24 | .pyre/ 25 | 26 | # MyPy type checker 27 | .mypy_cache/ 28 | .dmypy.json 29 | 30 | # Pytest 31 | .pytest_cache/ 32 | 33 | # Jupyter Notebook checkpoints 34 | .ipynb_checkpoints 35 | 36 | # Coverage reports 37 | htmlcov/ 38 | .tox/ 39 | .nox/ 40 | coverage.* 41 | *.cover 42 | .hypothesis/ 43 | *.py,cover 44 | .cache 45 | nosetests.xml 46 | coverage.xml 47 | *.log 48 | 49 | # pytest 50 | .pytest_cache/ 51 | 52 | # Installer logs 53 | pip-log.txt 54 | pip-delete-this-directory.txt 55 | 56 | # Pydantic cache 57 | .pdm/ 58 | 59 | # Sphinx documentation 60 | docs/_build/ 61 | 62 | # PyInstaller 63 | *.manifest 64 | *.spec 65 | dist/ 66 | build/ 67 | *.egg-info/ 68 | 69 | # Unit test / coverage reports 70 | htmlcov/ 71 | .tox/ 72 | .nox/ 73 | .coverage 74 | .coverage.* 75 | .cache 76 | .nox/ 77 | 78 | # mypy 79 | .mypy_cache/ 80 | .dmypy.json 81 | 82 | # Environments 83 | .env 84 | .env.* 85 | 86 | # Jupyter Notebook files 87 | .ipynb_checkpoints 88 | 89 | # macOS specific files 90 | .DS_Store 91 | 92 | # Pyre type checker 93 | .pyre/ 94 | 95 | # Node and npm related 96 | node_modules/ 97 | npm-debug.log* 98 | yarn-debug.log* 99 | yarn-error.log* 100 | package-lock.json 101 | yarn.lock 102 | 103 | # Webpack and build folders 104 | frontend/build/ 105 | frontend/dist/ 106 | frontend/.cache/ 107 | 108 | # Ignore frontend environment files 109 | frontend/.env.local 110 | frontend/.env.development.local 111 | frontend/.env.test.local 112 | frontend/.env.production.local 113 | 114 | # Ignore coverage results 115 | frontend/coverage/ 116 | 117 | # Ignore lint and formatter files 118 | .eslintcache 119 | prettier.config.js 120 | .prettierignore 121 | 122 | # Log files 123 | *.log 124 | *.log.* 125 | 126 | # Miscellaneous 127 | *.swp 128 | *~ 129 | .project 130 | .idea/ 131 | *.sublime-project 132 | *.sublime-workspace 133 | 134 | # Pycharm 135 | .idea/ 136 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018-2024 Streamlit Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. -------------------------------------------------------------------------------- /MANIFEST.in: -------------------------------------------------------------------------------- 1 | include README.md 2 | recursive-include streamlit_chat_widget/frontend/build * 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # Streamlit Chat Widget 5 | 6 | ![Streamlit Chat Widget](https://i.ibb.co/dBpSmjW/chat-input-widget.png) 7 | 8 | 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. 9 | 10 | ## Features 11 | 12 | - **Text Input**: Users can type text messages and send them. 13 | - **Audio Recording**: Built-in microphone functionality to capture audio messages. 14 | - **Fixed Positioning**: The widget remains fixed at the bottom of the Streamlit app, similar to Streamlit's `st.chat_input`. 15 | 16 | ## Installation 17 | 18 | Install the package directly from PyPI: 19 | 20 | ```bash 21 | pip install streamlit-chat-widget 22 | ``` 23 | 24 | ## Setup 25 | 26 | ### Step 1: Import and Initialize the Component 27 | 28 | To use the component, import it into your Streamlit app. The widget will display at the bottom of the screen by default. 29 | 30 | ### Step 2: Set Up the Frontend Component 31 | 32 | If you want to modify or rebuild the React component, you can find the source code in the `frontend` directory. 33 | 34 | 1. **Navigate to the `frontend` folder**: 35 | ```bash 36 | cd streamlit_chat_widget/frontend 37 | ``` 38 | 2. **Install dependencies**: 39 | ```bash 40 | npm install 41 | ``` 42 | 3. **Build the frontend**: 43 | ```bash 44 | npm run build 45 | ``` 46 | 4. **Run the component locally** (for development): 47 | ```bash 48 | npm start 49 | ``` 50 | 51 | ### Usage 52 | 53 | Here’s a sample code to get you started with `streamlit_chat_widget`: 54 | 55 | ```python 56 | import streamlit as st 57 | from streamlit_chat_widget import chat_input_widget 58 | 59 | def main(): 60 | st.title("My Custom Chat Application") 61 | 62 | # Initialize chat history in Streamlit session state 63 | if "chat_history" not in st.session_state: 64 | st.session_state.chat_history = [] 65 | 66 | # Display the chat history 67 | for message in st.session_state.chat_history: 68 | st.write(message) 69 | 70 | # Display the chat input widget at the bottom 71 | user_input = chat_input_widget() 72 | 73 | # Process the user's input from the widget 74 | if user_input: 75 | if "text" in user_input: 76 | user_text =user_input["text"] 77 | st.session_state.chat_history.append(f"You: {user_text}") 78 | elif "audioFile" in user_input: 79 | audio_bytes = bytes(user_input["audioFile"]) 80 | st.audio(audio_bytes) 81 | 82 | if __name__ == "__main__": 83 | main() 84 | ``` 85 | 86 | ## Example 87 | 88 | To create a simple app with the chat widget: 89 | 90 | ```python 91 | import streamlit as st 92 | from streamlit_chat_widget import chat_input_widget 93 | from streamlit_extras.bottom_container import bottom #pip install streamlit_extras 94 | 95 | def main(): 96 | st.title("My Custom Chat Application") 97 | 98 | # Initialize chat history in Streamlit session state 99 | if "chat_history" not in st.session_state: 100 | st.session_state.chat_history = [] 101 | 102 | # Display the chat history 103 | for message in st.session_state.chat_history: 104 | st.write(message) 105 | 106 | # Display the chat input widget at the bottom 107 | with bottom(): 108 | user_input = chat_input_widget() 109 | 110 | # Process the user's input from the widget 111 | if user_input: 112 | if "text" in user_input: 113 | user_text =user_input["text"] 114 | st.session_state.chat_history.append(f"You: {user_text}") 115 | elif "audioFile" in user_input: 116 | audio_bytes = bytes(user_input["audioFile"]) 117 | st.audio(audio_bytes) 118 | 119 | if __name__ == "__main__": 120 | main() 121 | ``` 122 | 123 | ### CSS Customization 124 | 125 | To style the widget or customize its appearance, add custom CSS in your Streamlit app. Here’s a basic example: 126 | 127 | ```python 128 | st.markdown(""" 129 | 138 | """, unsafe_allow_html=True) 139 | 140 | ``` 141 | ## Additional Customization: 142 | To postion the chat input widget in a fixed postion at the bottom of streamlit application use streamlit 143 | floating containers 144 | ```python 145 | 146 | import streamlit as st 147 | from streamlit_float import * 148 | from streamlit_chat_widget import chat_input_widget 149 | 150 | def app(): 151 | float_init() 152 | footer_container = st.container() 153 | with footer_container: 154 | user_input = chat_input_widget() 155 | footer_container.float( 156 | "display:flex; align-items:center;justify-content:center; overflow:hidden visible;flex-direction:column; position:fixed;bottom:15px;" 157 | ) 158 | 159 | if __name__ == "__main__": 160 | app() 161 | ``` 162 | ### License 163 | 164 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information. 165 | 166 | 167 | -------------------------------------------------------------------------------- /setup.py: -------------------------------------------------------------------------------- 1 | from setuptools import setup, find_packages 2 | import os 3 | 4 | # Define paths for frontend build files 5 | frontend_path = os.path.join('streamlit_chat_widget', 'frontend', 'build') 6 | 7 | setup( 8 | name="streamlit_chat_widget", 9 | version="0.2.0", 10 | description="A custom chat input widget for Streamlit", 11 | long_description=open("README.md").read(), 12 | long_description_content_type="text/markdown", 13 | author="Mohammed Bahageel", 14 | author_email="youremail@example.com", 15 | url="https://github.com/yourusername/streamlit_chat_widget", 16 | packages=find_packages(), 17 | include_package_data=True, 18 | install_requires=[ 19 | "streamlit>=1.0", # Include other dependencies if needed 20 | ], 21 | package_data={ 22 | "streamlit_chat_widget": ["frontend/build/*"], 23 | }, 24 | classifiers=[ 25 | "Programming Language :: Python :: 3", 26 | "License :: OSI Approved :: MIT License", 27 | "Operating System :: OS Independent", 28 | ], 29 | python_requires=">=3.6", 30 | ) 31 | -------------------------------------------------------------------------------- /streamlit_chat_widget/__init__.py: -------------------------------------------------------------------------------- 1 | import os 2 | import streamlit.components.v1 as components 3 | 4 | _RELEASE = True 5 | 6 | if not _RELEASE: 7 | _component_func = components.declare_component( 8 | "chat_input_widget", 9 | url="http://localhost:3001", 10 | ) 11 | else: 12 | parent_dir = os.path.dirname(os.path.abspath(__file__)) 13 | build_dir = os.path.join(parent_dir, "frontend/build") 14 | _component_func = components.declare_component("chat_input_widget", path=build_dir) 15 | 16 | def chat_input_widget(key=None): 17 | component_value = _component_func(key=key, default={}) 18 | return component_value 19 | -------------------------------------------------------------------------------- /streamlit_chat_widget/frontend/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # dependencies 3 | /.pnp 4 | .pnp.js 5 | .env 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | node_modules -------------------------------------------------------------------------------- /streamlit_chat_widget/frontend/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /streamlit_chat_widget/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my_component", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.13.3", 7 | "@emotion/styled": "^11.13.0", 8 | "@mui/icons-material": "^6.1.5", 9 | "@mui/material": "^6.1.5", 10 | "ajv": "^8.17.1", 11 | "react": "^18.2.0", 12 | "react-dom": "^18.2.0", 13 | "react-media-recorder": "^1.7.1", 14 | "streamlit-component-lib": "^2.0.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | }, 37 | "homepage": ".", 38 | "devDependencies": { 39 | "@types/node": "^16.11.0", 40 | "@types/react": "^18.0.28", 41 | "@types/react-dom": "^18.0.10", 42 | "react-scripts": "^5.0.1", 43 | "typescript": "^4.2.0" 44 | } 45 | } -------------------------------------------------------------------------------- /streamlit_chat_widget/frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Streamlit Component 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /streamlit_chat_widget/frontend/src/ChatInputWidget.css: -------------------------------------------------------------------------------- 1 | /* General body styling */ 2 | body { 3 | background-color: transparent !important; 4 | border: none !important; 5 | margin: 0; 6 | padding: 0; 7 | overflow: hidden; /* Ensure no scrollbars appear if not needed */ 8 | } 9 | 10 | /* Chat container styles with glassmorphic effect */ 11 | .chat-container { 12 | backdrop-filter: blur(10px); 13 | background: rgba(255, 255, 255, 0.1); /* Glassmorphic effect */ 14 | border-radius: 30px; 15 | padding: 10px; 16 | display: flex; 17 | justify-content: space-between; 18 | align-items: center; 19 | box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2); 20 | width: 90%; 21 | max-width: 600px; 22 | position: fixed; /* Ensure it's fixed at the bottom */ 23 | bottom: 10px; 24 | left: 50%; 25 | transform: translateX(-50%); 26 | z-index: 1000; 27 | border: none; /* Remove white border */ 28 | } 29 | 30 | /* Style for the expanding multi-line textarea with glass effect */ 31 | .chat-input { 32 | border: none; 33 | background: rgba(255, 255, 255, 0.2); 34 | backdrop-filter: blur(6px); 35 | border-radius: 20px; 36 | padding: 10px; 37 | outline: none; 38 | font-size: 16px; 39 | color: black; 40 | flex-grow: 2; 41 | margin-right: 10px; 42 | box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.1); 43 | resize: none; /* Disable manual resizing */ 44 | overflow: hidden; /* Smooth height adjustment */ 45 | line-height: 1.4; 46 | min-height: 40px; /* Minimum height */ 47 | transition: height 0.2s ease; /* Smooth transition */ 48 | } 49 | 50 | .chat-input::placeholder { 51 | color: rgba(0, 0, 0, 0.7); 52 | } 53 | 54 | /* Button styles with gradient and shadow effects */ 55 | .icon-btn { 56 | background: linear-gradient(145deg, #00B0F0, #00D4FF); 57 | border: none; 58 | border-radius: 50%; 59 | color: white; 60 | width: 50px; 61 | height: 50px; 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | cursor: pointer; 66 | font-size: 20px; 67 | transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; 68 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 69 | outline: none; 70 | } 71 | 72 | /* Button hover and active effects */ 73 | .icon-btn:hover { 74 | background: linear-gradient(145deg, #ff66b2, #eb0451); 75 | box-shadow: 0 8px 20px rgba(255, 102, 178, 0.4); 76 | } 77 | 78 | .icon-btn:active { 79 | transform: scale(1.1); 80 | } 81 | 82 | /* Remove black border when button is clicked */ 83 | .icon-btn:focus { 84 | outline: none; 85 | border: none; 86 | } 87 | 88 | /* Position the widget inside Streamlit’s specified container */ 89 | [data-testid="stBottomBlockContainer"] .chat-container { 90 | position: fixed !important; 91 | bottom: 0 !important; 92 | left: 0 !important; 93 | right: 0 !important; 94 | margin: 0 auto !important; 95 | padding: 10px 20px !important; 96 | z-index: 1000 !important; 97 | background: rgba(255, 255, 255, 0.1); 98 | backdrop-filter: blur(12px); 99 | border-radius: 30px; 100 | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); 101 | } 102 | 103 | /* Media Queries */ 104 | @media (max-width: 768px) { 105 | .chat-container { 106 | max-width: 90%; 107 | padding: 8px; 108 | } 109 | 110 | .chat-input { 111 | font-size: 14px; 112 | } 113 | 114 | .icon-btn { 115 | width: 45px; 116 | height: 45px; 117 | font-size: 18px; 118 | } 119 | } 120 | 121 | @media (max-width: 480px) { 122 | .chat-container { 123 | max-width: 100%; 124 | padding: 5px; 125 | } 126 | 127 | .chat-input { 128 | font-size: 12px; 129 | } 130 | 131 | .icon-btn { 132 | width: 40px; 133 | height: 40px; 134 | font-size: 16px; 135 | } 136 | } 137 | 138 | -------------------------------------------------------------------------------- /streamlit_chat_widget/frontend/src/ChatInputWidget.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useCallback, useRef } from "react"; 2 | import { Streamlit, withStreamlitConnection } from "streamlit-component-lib"; 3 | import { useReactMediaRecorder } from "react-media-recorder"; 4 | import SendIcon from "@mui/icons-material/Send"; 5 | import MicIcon from "@mui/icons-material/Mic"; 6 | import StopIcon from "@mui/icons-material/Stop"; 7 | import './ChatInputWidget.css'; 8 | 9 | const ChatInputWidget: React.FC = () => { 10 | const [inputText, setInputText] = useState(""); 11 | const [isRecording, setIsRecording] = useState(false); 12 | const textAreaRef = useRef(null); 13 | 14 | const { startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({ audio: true }); 15 | 16 | useEffect(() => { 17 | Streamlit.setFrameHeight(650); // Set component height 18 | }, []); 19 | 20 | const sendDataToStreamlit = (data: any) => { 21 | Streamlit.setComponentValue(data); 22 | }; 23 | 24 | const sendAudioBlobAsBytes = useCallback((audioBlob: Blob) => { 25 | audioBlob.arrayBuffer().then(buffer => { 26 | const audioArray = Array.from(new Uint8Array(buffer)); // Convert ArrayBuffer to array of bytes 27 | sendDataToStreamlit({ audioFile: audioArray }); // Send as audioFile in binary format 28 | }); 29 | }, []); 30 | 31 | const fetchAudioAndSend = useCallback(async () => { 32 | if (mediaBlobUrl) { 33 | const response = await fetch(mediaBlobUrl); 34 | const audioBlob = await response.blob(); 35 | sendAudioBlobAsBytes(audioBlob); 36 | setIsRecording(false); // Stop recording after sending 37 | } 38 | }, [mediaBlobUrl, sendAudioBlobAsBytes]); 39 | 40 | useEffect(() => { 41 | if (mediaBlobUrl) { 42 | fetchAudioAndSend(); 43 | } 44 | }, [mediaBlobUrl, fetchAudioAndSend]); 45 | 46 | const adjustTextAreaHeight = (reset: boolean = false) => { 47 | if (textAreaRef.current) { 48 | textAreaRef.current.style.height = "auto"; // Reset to auto first 49 | if (!reset) { 50 | textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`; // Adjust to content 51 | } 52 | } 53 | }; 54 | 55 | const handleInputChange = (event: React.ChangeEvent) => { 56 | setInputText(event.target.value); 57 | adjustTextAreaHeight(); 58 | }; 59 | 60 | const handleKeyDown = (event: React.KeyboardEvent) => { 61 | if (event.key === 'Enter' && !event.shiftKey) { 62 | event.preventDefault(); // Prevents newline on Enter 63 | sendDataToStreamlit({ text: inputText }); 64 | setInputText(""); // Clear input after sending 65 | adjustTextAreaHeight(true); // Reset height after sending 66 | } 67 | }; 68 | 69 | const handleIconClick = () => { 70 | if (inputText.trim().length > 0) { 71 | sendDataToStreamlit({ text: inputText }); 72 | setInputText(""); // Clear input after sending 73 | adjustTextAreaHeight(true); // Reset height after sending 74 | } else { 75 | if (isRecording) { 76 | stopRecording(); 77 | setIsRecording(false); 78 | } else { 79 | startRecording(); 80 | setIsRecording(true); 81 | } 82 | } 83 | }; 84 | 85 | return ( 86 |
87 |