AI Chat: save images to backpack + overflow menu#72558
AI Chat: save images to backpack + overflow menu#72558sanchitmalhotra126 wants to merge 3 commits intostagingfrom
Conversation
| @@ -104,33 +103,31 @@ export default class BackpackClientApi { | |||
| } | |||
|
|
|||
| async getFileList( | |||
There was a problem hiding this comment.
FYI @molly-moen @fisher-alice updated this function to return the fetched file list in addition to passing it through the success callbacks so that callers can now just do const files = await backpackApi.getFileList(). Callbacks are still called so existing behavior is unchanged.
Similarly above I converted fetchChannelId to an async function so we can just do await this.fetchChannelId() here. Still calls the callback if provided.
| <Snackbar | ||
| open | ||
| slots={{transition: React.Fragment}} | ||
| slots={{transition: SnackbarPassthrough}} |
There was a problem hiding this comment.
Fix for a react warning - not strictly related to this change.
fisher-alice
left a comment
fisher-alice
left a comment
There was a problem hiding this comment.
Looks great! A couple small styling questions, but one wonder is about the backpack error notification and whether it warrants being added as a chat event. Nice job!
There was a problem hiding this comment.
Just confirming that you'll move this and related PopUpButton files to lab2 in a follow-up?
There was a problem hiding this comment.
Yep! Maybe getFileNameWithNumberSuffix too
| const hour12 = rawHour % 12 || 12; | ||
| const hh = String(hour12).padStart(2, '0'); | ||
| const mm = String(now.getMinutes()).padStart(2, '0'); | ||
| return `${month}-${day}-${hh}${mm}${ampm}`; |
There was a problem hiding this comment.
Nit: Could add a break (maybe underscore) between hour and min for easier readability.
cc: @dju90
There was a problem hiding this comment.
Are colons not allowed characters for file names? I think underscore is fine if not.
There was a problem hiding this comment.
Colons not allowed in Web Lab 2 file names.
There was a problem hiding this comment.
MacOS uses dots (Screenshot 2026-05-05 at 3.32.15 PM). May-7-10.12am.png? or with spaces May 7 10.12 AM.png?
There was a problem hiding this comment.
Unfortunately, codebridge file names don't allow dots nor spaces. And I'm assuming these backpack images are intended to be used in Web Lab 2?
|
|
||
| const ext = extFromFilename(filename) || extFromUrl(url) || DEFAULT_EXT; | ||
|
|
||
| const showBackpackError = useCallback(() => { |
There was a problem hiding this comment.
This made me pause. In weblab2 we display errors in the backpack panel (a user attempts to add files to backpack from file browser). So I wonder if we want to be consistent across labs.
However, I do see that showing the error close to where the user is attempting to trigger the save to backpack is helpful. I do wonder about adding this kind of notification to chat history makes sense? It doesn't seem that relevant in terms of chat history with model.
There was a problem hiding this comment.
Looks like in Weblab2 we throw up an error dialog?
I could go either way, but personally find the in-chat notification a little less obtrusive? Defer to @dju90
And re: chat history, yep we filter out notifications (unless includeInChatHistory is true) so these aren't saved
There was a problem hiding this comment.
Oh thanks for sharing! then yeah I think this is fine but defer to Bryan.
There was a problem hiding this comment.
Thinking about this a little more, and still leaning towards not notifying in chat stream since it's not related to chat with model (unlike clear chat, updating model customizations, etc).
There was a problem hiding this comment.
Wondering about the visibility of button for images with dark background. Maybe add a box shadow? Or could flip the colors (white background, dark dots with box-shadow)?
There was a problem hiding this comment.
Here's what it would look like with flipped colors:
Screen.Recording.2026-05-07.at.11.01.31.AM.mov
There was a problem hiding this comment.
Cool, I'll play around with this, thanks!
There was a problem hiding this comment.
Thanks for the branch! Adapted this and tweaked some of the colors (FYI @dju90):
aichat-button-overlay.mov
3 participants
Enables saving AI Chat images to the lab's backpack (and more) through a new overflow menu accessible by a three-dot overlay button on images in the chat. The menu also includes options for copying and downloading.
The overflow menu and button are built using Codebridge's existing
PopupButtonandPopupButtonOptioncomponents.I also included a few tweaks to the Backpack Client API to make it easier to use in an async/await context (rather than having to pass in callbacks). However, callbacks are still supported so this doesn't affect existing users.
Demo (including keyboard nav):
aichat-asset-overflow-menu.mov
Error notification if saving to backpack or fetching backpack metadata fails:
Links
Testing story
Tested with AI Chat lab levels (technically this works with AI Tutor as well but only for user-added images).