fix(chat): limit multiple file message to a single row - #19005
Conversation
Antreesy
added
feature: frontend 🖌️
|
since we try to avoid horizontal scrolling in other places in NC, I'm wondering if we can find a way to minimize the empty space... maybe we can do a mosaic grid/masonry here too? It would look okay for images but sure about files. Also thinking about showing files differently, to give more importance to the file name instead of the thumbnail, sort of like attachments in Mail, what do you think? 
|
In general we can split showing images in first row as a grid/masonry, and files - below with a similar styling. My issue with that is - Mail uses it in a composer area, contrary to Talk, where it's the final appearance of the content |
|
I also think that splitting things up for images (masonry, first image 2x2, others 1x1) and below the other files in a list view (1 or two coloumns of files in a compact list) is a good idea. |
|
FYI: Google Chat is very disappointing here and just doesn't let you upload certain file types together: |
|
FYI @nimishavijay implementing a wrapper component for files here #19020 to allow better experience. So don't hold back with ideas and mockups =) |
|
It could look like this: 
Clicking on it could open the file and hovering over it could show whatever actions available in a 3 dot menu at the end. I would suggest "Download" to begin with. The arrangement of the files is still something I haven't figured out yet. With masonry + this new file preview in the same view, it could become complicated to effectively display everything. Ideally the file preview wouldn't be too wide, and the images won't have too few columns. |
- if await for compressImage (~100-200ms), it would produce visual disruption Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
- if messages will be combined after they shared, they should look correctly during upload as well Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
- move circle in file icon/preview area - render indeterminate state as spinner Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
FilePreviewsWrapper now splits a combined file message into two groups: images with a server-side preview (no name shown), and everything else. Images render as one row of up to 4 thumbnails; a 5th+ image collapses into a "+X more" tile. Clicking any thumbnail (including "+X more") opens the Viewer scoped to this message's own image group only, instead of every media file shared in the conversation (that behavior is kept for the SharedItemsTab/Browser via isSharedItems). Non-image files still render as a stacked column of row-layout previews. Assisted-by: ClaudeCode:claude-sonnet-4-6 Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
Row-layout FilePreview (used for non-image files in a combined message, and file/audio/other rows in SharedItemsTab) now shows the file name and a second, muted line with 'EXTENSION · size' below it, both in small font. Previously only the file name was shown. Assisted-by: ClaudeCode:claude-sonnet-4-6 Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
'Go to file'/'Download file' moved out of the message-wide action menu (MessageButtonsBar), where they only ever applied to the first file of a combined file message, into a new FilePreviewActions component. FilePreviewsWrapper renders a single FilePreviewActions instance, repositioned over whichever file tile is currently hovered, so every file in a combined message gets its own correct actions. Assisted-by: ClaudeCode:claude-sonnet-4-6 Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com> [skip ci]
7c80ca6 to
13ff9f0
Compare
|
Will continue tommorow from here:
|
3 participants
☑️ Resolves
AI (if applicable)
🖌️ UI Checklist
🖼️ Screenshots / Screencasts
🏁 Checklist