{"id":21427864,"url":"https://github.com/tahouse/streamlit-chat-prompt","last_synced_at":"2025-07-14T10:31:39.855Z","repository":{"id":262219321,"uuid":"886554653","full_name":"tahouse/streamlit-chat-prompt","owner":"tahouse","description":"A Streamlit component that provides a modern chat-style prompt with image attachment and paste support. This component was built to mimic the style of streamlit.chat_input while expanding functionality with images. Future work may include addition of speech-to-text input.","archived":false,"fork":false,"pushed_at":"2025-04-30T02:18:17.000Z","size":101947,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-30T02:41:12.719Z","etag":null,"topics":["python","streamlit","streamlit-component","streamlit-components","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tahouse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-11T07:26:26.000Z","updated_at":"2025-04-30T02:21:50.000Z","dependencies_parsed_at":"2024-12-08T02:17:41.344Z","dependency_job_id":"6e266e6a-7b8b-4b2f-9a24-f8939096ed2c","html_url":"https://github.com/tahouse/streamlit-chat-prompt","commit_stats":{"total_commits":40,"total_committers":1,"mean_commits":40.0,"dds":0.0,"last_synced_commit":"829f032d9b5a0eb511b5915bf42bcf14f7436c06"},"previous_names":["tahouse/streamlit-chat-prompt"],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/tahouse/streamlit-chat-prompt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tahouse%2Fstreamlit-chat-prompt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tahouse%2Fstreamlit-chat-prompt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tahouse%2Fstreamlit-chat-prompt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tahouse%2Fstreamlit-chat-prompt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tahouse","download_url":"https://codeload.github.com/tahouse/streamlit-chat-prompt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tahouse%2Fstreamlit-chat-prompt/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265280615,"owners_count":23739851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["python","streamlit","streamlit-component","streamlit-components","typescript"],"created_at":"2024-11-22T22:07:32.843Z","updated_at":"2025-07-14T10:31:34.840Z","avatar_url":"https://github.com/tahouse.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Streamlit Chat Prompt\n\n[![PyPI](https://img.shields.io/pypi/v/streamlit-chat-prompt)](https://pypi.org/project/streamlit-chat-prompt/)\n[![PyPI - Downloads](https://img.shields.io/pypi/dm/streamlit-chat-prompt)](https://pypi.org/project/streamlit-chat-prompt/)\n![GitHub](https://img.shields.io/github/license/tahouse/streamlit-chat-prompt)\n\nA Streamlit component that provides a modern chat-style prompt with image attachment and paste support. This component was built to mimic the style of [streamlit.chat_input](https://docs.streamlit.io/develop/api-reference/chat/st.chat_input) while expanding functionality with images. Future work may include addition of speech-to-text input.\n\n**Author:** Tyler House ([@tahouse](https://github.com/tahouse))\n\n![Demo](https://raw.githubusercontent.com/tahouse/streamlit-chat-prompt/main/docs/demo.gif)\n\n## Features\n\n- 📝 Chat-style text input with multi-line support\n- 📎 Image attachment support via button or drag-and-drop\n- 📋 Paste image support (paste images directly from clipboard)\n- 🖼️ Image preview with ability to remove attached images\n- ⌨️ Submit with Enter key (Shift+Enter for new line)\n- 🎨 Automatic theme integration with Streamlit\n- 📱 Responsive design that works well on mobile and desktop\n- 🗜️ Automatic image compression/scaling to stay under size limits (customizable, default 5MB)\n- 📌 Optional pinned-to-bottom placement for main chat interface (one per app)\n- 🔄 Flexible positioning for use in dialogs, sidebars, or anywhere in the app flow\n- ✏️ Support for default/editable content - perfect for message editing workflows\n- 🔤 Smart focus management - automatically returns to text input after interactions\n\n## Installation\n\n```bash\npip install streamlit-chat-prompt\n```\n\n## Usage\n\n```python\nimport streamlit as st\nfrom streamlit_chat_prompt import prompt\n\n# Create a chat prompt\nresponse = prompt(\n    name=\"chat\",  # Unique name for the prompt\n    key=\"chat\",   # Unique key for the component instance\n    placeholder=\"Hi there! What should we talk about?\",  # Optional placeholder text\n    main_bottom=True,  # Pin prompt to bottom of main area\n    max_image_size=5 * 1024 * 1024,  # Maximum image size (5MB default)\n    disabled=False,  # Optionally disable the prompt\n)\n\n# Handle the response\nif response:\n    if response.text:\n        st.write(f\"Message: {response.text}\")\n    \n    if response.images:\n        for i, img in enumerate(response.images):\n            st.write(f\"Image {i+1}: {img.type} ({img.format})\")\n```\n\n## Examples\n\nHere are some usage patterns, or check out [rocktalk](https://github.com/tahouse/rocktalk) for a full working example.\n\n1. Main Chat Interface ![Main Chat Interface](https://raw.githubusercontent.com/tahouse/streamlit-chat-prompt/main/docs/main-chat.png)\n\n    ```python\n    import base64\n    from io import BytesIO\n    import streamlit as st\n    from streamlit_chat_prompt import PromptReturn, prompt, ImageData\n    from PIL import Image\n\n\n    st.chat_message(\"assistant\").write(\"Hi there! What should we chat about?\")\n\n    prompt_return: PromptReturn | None = prompt(\n        name=\"foo\",\n        key=\"chat_prompt\",\n        placeholder=\"Hi there! What should we chat about?\",\n        main_bottom=True,\n    )\n\n    if prompt_return:\n        with st.chat_message(\"user\"):\n            st.write(prompt_return.text)\n            if prompt_return.images:\n                for image in prompt_return.images:\n                    st.divider()\n                    image_data: bytes = base64.b64decode(image.data)\n                    st.markdown(\"Using `st.image`\")\n                    st.image(Image.open(BytesIO(image_data)))\n\n                    # or use markdown\n                    st.divider()\n                    st.markdown(\"Using `st.markdown`\")\n                    st.markdown(f\"![Image example](data:image/png;base64,{image.data})\")\n\n    ```\n\n2. Dialog Usage and Starting From Existing Message ![Dialog Interface](https://raw.githubusercontent.com/tahouse/streamlit-chat-prompt/main/docs/dialog.png)\n\n    ```python\n    if st.button(\n        \"Dialog Prompt with Default Value\", key=f\"dialog_prompt_with_default_button\"\n    ):\n        with open(\"example_images/vangogh.png\", \"rb\") as f:\n            image_data = f.read()\n            image = Image.open(BytesIO(image_data))\n            base64_image = base64.b64encode(image_data).decode(\"utf-8\")\n            test_dg(\n                default_input=PromptReturn(\n                    text=\"This is a test message with an image\",\n                    images=[\n                        ImageData(data=base64_image, type=\"image/png\", format=\"base64\")\n                    ],\n                ),\n                key=\"dialog_with_default\",\n            )\n    ```\n\n## Component API\n\n### prompt()\n\nMain function to create a chat prompt.\n\nParameters:\n\n- `name` (str): Unique name for this prompt instance\n- `key` (str): Unique key for the component instance\n- `placeholder` (str, optional): Placeholder text shown in input field\n- `default` (Union[str, PromptReturn], optional): Default value for the prompt. Can include text and images using the `PromptReturn` object type.\n- `main_bottom` (bool, optional): Pin prompt to bottom of main area (default: True)\n- `max_image_size` (int, optional): Maximum image size in bytes (default: 5MB)\n- `disabled` (bool, optional): Disable the prompt (default: False)\n\nReturns:\n\n`Optional[PromptReturn]`: Object containing message and images if submitted, None otherwise\n\n### PromptReturn\n\nObject returned when user submits the prompt.\n\nProperties:\n\n- `text` (Optional[str]): Text message entered by user\n- `images` (Optional[List[ImageData]]): List of attached images\n\n### ImageData\n\nObject representing an attached image.\n\nProperties:\n\n- `type` (str): Image MIME type (e.g. \"image/jpeg\")\n- `format` (str): Image format (e.g. \"base64\")\n- `data` (str): Image data as base64 string\n\n## Development\n\nThis repository is based on the [Streamlit Component template system](https://github.com/streamlit/component-template). If you want to modify or develop the component:\n\n1. Clone the repository\n2. Install development dependencies:\n\n    ```sh\n    pip install -e \".[devel]\"\n    ```\n\n3. Start the frontend development server:\n\n    ```sh\n    cd streamlit_chat_prompt/frontend\n    npm install\n    npm run start\n    ```\n\n4. In a separate terminal, run your Streamlit app:\n\n    ```sh\n    streamlit run your_app.py\n    ```\n\n## License\n\nThis project is licensed under the Apache License 2.0 - see the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftahouse%2Fstreamlit-chat-prompt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftahouse%2Fstreamlit-chat-prompt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftahouse%2Fstreamlit-chat-prompt/lists"}