support file size limit error for chat input #10530

sfc-gh-pchiu · 2025-02-26T22:07:22Z

Describe your changes

Changed error file icon to red
Add new proto field for file size limit
Used shared utils of file uploader for chat input to show consistent error message

GitHub Issue Link (if applicable)

Testing Plan

E2E Tests

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

lukasmasuch

A couple of comments, but LGTM overall 👍

lib/streamlit/elements/widgets/chat.py

lukasmasuch · 2025-02-27T00:48:17Z

frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatUploadedFile.tsx

          content={(fileInfo.status as ErrorStatus).errorMessage}
        >
-          <Icon content={ErrorOutline} size="lg" />
+          <Icon color={themeColors.red90} content={ErrorOutline} size="lg" />


I think we should use the theme.colors.red via the useTheme hook here instead in case it also looks fine? We try to keep the usage of non-semantic static colors as low as possible so that it doesn't create any issues with custom themes.

And can you verify that it works on a dark and light background?

I was following the design spec for this color (slightly darker after I tried theme.colors.red) but would also prefer to use semantic values. Should we look into adding this to theme.colors or check with design?
red90 looks okay with me in dark mode:

How does it look with theme.colors.red? If it's not too far off and works in light & dark, it might be better to just use theme.colors.red for now and look at it again when we add advanced theming for text, alert, metric colors. E.g. we also need a red color for negative delta on metrics, and one for danger color on alerts, and one for red text color, and a couple more places... I think these should eventually be combined into one red color.

Yeah that's a good point, I agree they should have a consistent color.
Here the icon looks fine in theme.colors.red as well:

Oh, we also have theme.colors.danger which we use for the file uploader error text. Can we use this color for the icon?

streamlit/frontend/lib/src/components/widgets/FileUploader/styled-components.ts

Line 122 in eb1958b

color: theme.colors.danger,

@sfc-gh-pchiu what does it look like with theme.colors.danger?

The danger colors don't pop as much for me. Are they usually used with a red background color?

looks like a normal background for file uploader:

I also find it a bit too dimmed. Perhaps we could make danger the red90 color Jessi used for chat input file error: #bd4043 (danger currently == red10 #7d353b)

lukasmasuch · 2025-02-27T00:50:27Z

frontend/lib/src/components/widgets/ChatInput/fileUpload/createDropHandler.ts

-                .filter(err => !!err)
-                .join(", "),
+              errorMessage: getErrorMessage(
+                rejected.errors[0].code,


Is it guaranteed that there is at least one error?

Is it possible that there are multiple errors? If so, maybe add a comment that it is intended to only show info about the first error.

I think we carried this over from file uploader and there's a check here that implies some assumption about only 1 error?
I'm not sure if there won't be multiple errors (we get this from Axios I believe.)
But I think it wouldn't hurt to show all the errors? In the latest commit, I consolidated both chat input and file uploader's this handlers and concatenated all the human readable errors together. wdyt?

lukasmasuch · 2025-02-27T18:35:07Z

btw. is there a way to add an e2e test for this error? E.g. we could change the max setting to a low value in the text, upload a small file above the configured value and then do some snapshots. Do we have tests for this for file uploader?

sfc-gh-pchiu · 2025-02-27T19:43:35Z

btw. is there a way to add an e2e test for this error? E.g. we could change the max setting to a low value in the text, upload a small file above the configured value and then do some snapshots. Do we have tests for this for file uploader?

No, we currently don't have that in file uploader. I wonder how we could change the max setting in playwright? since it's consuming the config value on the backend

lukasmasuch · 2025-02-27T19:49:46Z

you can do it programmatically in the app (this might not work for all settings):

from streamlit import config

config.set_option("server.maxUploadSize", ...)

You can also change settings before server start, but thats where it gets a bit more advanced. e.g.:

streamlit/e2e_playwright/theming/snowflake_dark_theme_test.py

Lines 26 to 32 in 219e567

    
           @pytest.fixture(scope="module") 
        
           @pytest.mark.early 
        
           def configure_snowflake_dark_theme(): 
        
               """Configure snowflake dark theme.""" 
        
               os.environ["STREAMLIT_THEME_BASE"] = "dark" 
        
               os.environ["STREAMLIT_THEME_PRIMARY_COLOR"] = "#004cbe" 
        
               os.environ["STREAMLIT_THEME_BACKGROUND_COLOR"] = "#191e24"

but both options will change this setting globally in the server, affecting the other e2e tests in the same script.

e2e_playwright/st_chat_input_test.py

sfc-gh-pchiu changed the title ~~implement max file size, change error icon to red~~ support file size limit error for chat input Feb 26, 2025

sfc-gh-pchiu added security-assessment-completed Security assessment has been completed for PR change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Feb 26, 2025

sfc-gh-pchiu requested a review from lukasmasuch February 26, 2025 23:49

sfc-gh-pchiu marked this pull request as ready for review February 26, 2025 23:49

sfc-gh-pchiu requested a review from a team as a code owner February 26, 2025 23:49

lukasmasuch approved these changes Feb 27, 2025

View reviewed changes

sfc-gh-lmasuch approved these changes Feb 27, 2025

View reviewed changes

sfc-gh-pchiu requested a review from kajarenc February 27, 2025 17:42

kajarenc approved these changes Feb 27, 2025

View reviewed changes

sfc-gh-pchiu added 9 commits February 27, 2025 16:28

implement max file size, change error icon to red

4c56551

remove log

3c002e8

rename proto

8f5a557

consolidate rejected file handling, and concat all errors to display

ae79092

change color

6ec0423

e2e

e7905ce

update config, use helper func

61b38e2

add delay

2824570

snaps & text change

fb1901f

sfc-gh-pchiu force-pushed the feat/chat-file-upload-error branch from e64cc43 to fb1901f Compare February 27, 2025 21:28

lukasmasuch reviewed Feb 27, 2025

View reviewed changes

e2e_playwright/st_chat_input_test.py Show resolved Hide resolved

lukasmasuch reviewed Feb 27, 2025

View reviewed changes

e2e_playwright/st_chat_input_test.py Outdated Show resolved Hide resolved

sfc-gh-pchiu added 2 commits February 27, 2025 16:41

remove delay

3de024f

move config setter

d3a1201

sfc-gh-pchiu merged commit 725c53b into develop Feb 27, 2025
32 checks passed

sfc-gh-pchiu deleted the feat/chat-file-upload-error branch February 27, 2025 22:59

support file size limit error for chat input #10530

support file size limit error for chat input #10530

Uh oh!

Conversation

sfc-gh-pchiu commented Feb 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-pchiu Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lukasmasuch Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-pchiu Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lukasmasuch commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sfc-gh-pchiu commented Feb 27, 2025

Uh oh!

lukasmasuch commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

sfc-gh-pchiu commented Feb 26, 2025 •

edited

Loading

sfc-gh-pchiu Feb 27, 2025 •

edited

Loading

lukasmasuch Feb 27, 2025 •

edited

Loading

sfc-gh-pchiu Feb 27, 2025 •

edited

Loading

lukasmasuch commented Feb 27, 2025 •

edited

Loading

lukasmasuch commented Feb 27, 2025 •

edited

Loading