[UI] File Attachment Added

[mulla028]

Closes #794

Description (UPDATED)

This PR improves UX in terms of file management. Previously user was only able to see the file in the PromptForm, but now he is able to use paperclip icon to see all files attached in modal window, and manage them:

• Attach files... (Same as in OptionsButton)
• Delete (using removeFile from src/lib/fs.ts)
• Download (using downloadFile from src/lib/fs.ts)

If user never attached the file(s) paperclip will trigger file attachment process without opening modal window.

Preview (UPDATED)

[cloudflare-workers-and-pages]

Deploying chatcraft-org with    Cloudflare Pages

Latest commit:	12653ae
Status:	✅  Deploy successful!
Preview URL:	https://e3431ed0.console-overthinker-dev.pages.dev
Branch Preview URL:	https://mulla028-file-attachment.console-overthinker-dev.pages.dev

View logs

[mulla028]

@humphd @tarasglek opened a draft PR to hear about UI adjustments, also I'm having trouble with + button functionality while adding files. Should I copy the code from OptionsButton for +?

[humphd]

Some initial feedback:

• thanks for doing something so quickly!
• the paperclip icon should automatically open the file chooser if there are no existing attachments vs being disabled, and do the same flow as the "Attach Files..." menu item
• don't do the animated + button only the paperclip
• In the model, have the first icon in the top-left be an empty file icon with a + sign, and "Add Files..." so the user can add more files.

[mulla028]

@humphd, made all changes based on review/feedback. I still consider it as a draft-PR, I feel that UI changes required here. Please let me know what UI changes for this PR do we need.

[mulla028]

@humphd , I found a bug in my code, but hitting my head off the wall, I don't understand how to fix it, tried different ways.
How to reproduce it:

• If you delete all the files using modal, and then close modal.
• Try to click on paperclip, it doesn't open file selector. However, debugging shows that it enters handleAttachFiles.

[humphd]

This is getting better and better. Some things I notice while testing this:

• When the app loads, there is weird flash when the paperclip seems to change state and get repositioned, or hidden/revealed? It should always be visible. Is it due to the mic icon changing state and causing reflow? Maybe we should put the paperclip to the right of the mic?
• When you attach a lot of files, the modal grows in height forever. The body of the modal should be scrollable
• the contrast on the blue and red icons for download and delete isn't great. Use high contrast (e.g., white on black, or dark gray, etc).
• let's get rid of the "download" icon and make the filename a link that does download
• let's change the trash can to an 'X' icon
• change the tooltip for the paperclip to "Attach Files..."

[mulla028]

@humphd I decided to get rid of hover background, since I couldn't find colour that fits both themes, while border colour still makes user feel interaction with the file!
By the way, I think that I didn't utilize refreshFiles properly

[uday-rana]

@humphd I decided to get rid of hover background, since I couldn't find colour that fits both themes, while border colour still makes user feel interaction with the file! By the way, I think that I didn't utilize refreshFiles properly

You can set different colours based on the current theme with useColorMode: https://v2.chakra-ui.com/docs/styled-system/color-mode#usecolormode

[mulla028]

@humphd I decided to get rid of hover background, since I couldn't find colour that fits both themes, while border colour still makes user feel interaction with the file! By the way, I think that I didn't utilize refreshFiles properly

You can set different colours based on the current theme with useColorMode: https://v2.chakra-ui.com/docs/styled-system/color-mode#usecolormode

Thank you! Will try it out!

[humphd]

There is some odd state issue with the text pop-up on the mic and paperclip icons:

It doesn't always vanish when I move my mouse. Could the text popups go above vs. below these so they don't cover the Ask button?

Let's not animate the x icon in the file icons in the modal, and let's not use a colour

Let's put the file count at the top of the modal:

8 Attached Files

Should we get rid of the Add Files icon, and instead make it a button in the footer of the modal? If so we could add a "Remove All" option too. Not sure if this is good or not, just thinking...

Another idea for a follow-up, should hovering over the icon show you the contents instead of the icon? Something to play with later, since we have the URL for each item or its text content, so we could display an image or first few lines of text, etc.

[mulla028]

@humphd may I also change mic's tooltip label placement, since it closes the ask button?
UPD: You've already mentioned that :D

[humphd]

Do it in a follow-up PR. The more we add to this, the hard it is to land.

At this point you're very close to a workable first version we can land. I'd get the outstanding issues done here, and file follow-up issues then tackle them next in subsequent PRs.

Small PRs are the way you build big software projects.

[mulla028]

Last one question before I begin. By saying:

Let's not use colour and x animation

Do you mean that I may get rid of hover effect for FileIcons at this point?

[humphd]

Do you mean that I may get rid of hover effect for FileIcons at this point?

I like the x icon showing up when you hover over the icon. I don't like how it animates and slides down. Just show/hide it.

[humphd]

• Don't use red for the x icon when deleting
• Make the buttons in the footer look more like this with a single button as the "Call to Action" (e.g., "Add files...") and the secondary button being a "ghost" variant with red for "Remove All". Get rid of the icons on the buttons. This way it's easier not to accidentally click the wrong thing:

[tarasglek]

This is cool, we can download stuff out of duckdb now =D

type the following command:

/duck copy (select 1) to 'foo.json'

2. click attachments and click download!

3. Notice UI bug that the file is seemingly of 0 bytes, but it downloads correctly.

Thoughts

I find the download UI to be unclear. I would prefer some permanent https://react-icons.github.io/react-icons/search/#q=download icon on every attachment

In general I would expect adding an attachment to popup a sidebar with list of attachments, not to have hidden modal...then we could per-file options like [include in chat, include as RAG, exclude, delete]

I think we can address these in follow up, this is good to land, awesome feature

[tarasglek]

Again, this is amazing seeing all this infrastructure code culminate in user-visible UI!

[mulla028]

I'm sorry for doing that, hope now everything looks correct. The only thing left is to catch an error and implement UI for it

[tarasglek]

Can we land this? I love this for uploading json into duckdb

[humphd]

One small fix and this is good to land.

Great work @mulla028

[tarasglek]

I noticed we can't upload .jsonl files is there a reason we don't allow all files?

[mulla028]

Input element accepts what is defined in hooks/use-file-import acceptableFileFormats, may be the cause is there

[mulla028]

@tarasglek , I made a research, and added .jsonl files upload support.

[mulla028]

It didn't work tho, this problem isn't related to current pr. We have to provide a support of .jsonl files, I will file an issue.

[humphd]

Land this and do follow-ups, please.

[tarasglek]

awesomeness!