fix duplicate image when default images are supplied

tahouse · Jan 28, 2025 · ab979e6 · ab979e6
1 parent edfa3eb
commit ab979e6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,9 @@
 # Streamlit Chat Prompt
 
 [![PyPI](https://img.shields.io/pypi/v/streamlit-chat-prompt)](https://pypi.org/project/streamlit-chat-prompt/)
-[![PyPI - Downloads](https://img.shields.io/pypi/dm/streamlit-chat-prompt)](https://pypi.org/project/streamlit-chat-prompt/)
-![GitHub](https://img.shields.io/github/license/tahouse/streamlit-chat-prompt)
+[![Total Downloads](https://static.pepy.tech/badge/streamlit-chat-prompt)](https://pepy.tech/project/streamlit-chat-prompt)
+[![Monthly Downloads](https://img.shields.io/pypi/dm/streamlit-chat-prompt)](https://pypi.org/project/streamlit-chat-prompt/)
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE)
 
 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](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.
 

diff --git a/pyproject.toml b/pyproject.toml
@@ -6,7 +6,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "streamlit-chat-prompt"
-version = "0.3.6"
+version = "0.3.7"
 description = "A streamlit custom component that allows you to create a chat prompt with paste and image attachment support"
 readme = { file = "README.md", content-type = "text/markdown" }
 authors = [

diff --git a/streamlit_chat_prompt/frontend/src/Prompt.tsx b/streamlit_chat_prompt/frontend/src/Prompt.tsx
@@ -179,11 +179,10 @@ class ChatInput extends StreamlitComponentBase<State, Props> {
           navigator.userAgent.match(/Windows Phone/i))) !== null
     );
   }
-
-  private setImagesFromDefault(defaultValue: PromptData) {
+  private async setImagesFromDefault(defaultValue: PromptData) {
     if (defaultValue.images && defaultValue.images.length > 0) {
       // Convert base64 strings to Files
-      Promise.all(
+      const files = await Promise.all(
         defaultValue.images.map(async (dataUrl: string) => {
           const response = await fetch(dataUrl);
           const blob = await response.blob();
@@ -192,9 +191,38 @@ class ChatInput extends StreamlitComponentBase<State, Props> {
             .slice(2)}.${blob.type.split("/")[1]}`;
           return new File([blob], fileName, {type: blob.type});
         })
-      ).then((files) => {
-        Promise.all(files.map((file) => this.processAndAddImage(file)));
-      });
+      );
+
+      // Process images and collect them
+      const processedImages: File[] = [];
+      for (const file of files) {
+        const processedImage = await this.processImage(file);
+        if (processedImage) {
+          processedImages.push(processedImage);
+        } else {
+          Logger.warn("images", "Failed to process image", file.name);
+          this.showNotification(
+            `Could not compress "${file.name}" to under ${(
+              this.maxImageSize /
+              1024 /
+              1024
+            ).toFixed(1)} MB. Try a smaller image.`,
+            "warning"
+          );
+        }
+      }
+
+      // Replace the images in the state with the new processed images
+      this.setState(
+        {
+          images: processedImages,
+          userHasInteracted: true,
+        },
+        () => {
+          // Force frame height update after state change
+          setTimeout(() => Streamlit.setFrameHeight(), 0);
+        }
+      );
     }
   }
   // Define message handler as class method