Add file attachment UI

[mulla028]

Description

As a user, I want to access Attach Files option without pressing Options button. Moreover, all modern AI chats provide this option next to Text Input Field. It would improve UX. I could move it next to Start Recording button.

How It Looks Now

Examples How It Looks In Other Platforms

Claude

ChatGPT

[humphd]

Probably this is what we should do, but I want to think about it in the larger context of the changes we'll need to support the ongoing DuckDB file stuff too, see #788. We'll need some way to see the files attached to the chat, delete them, etc. as well.

[mulla028]

@humphd , now it makes sense.
I read everything in #788, and can see the PR. I would like to help land new DuckDB features support, but don't know where to begin because it's a little bit confusing. I never worked on this, but I really want to help and learn!
May be you could open small issues, since it is a big feature or tell me where I could begin.

[tarasglek]

I like the idea of unburying attachments

[mulla028]

I like the idea of unburying attachments

By saying "unburying", do you mean that you would like to move it? Or you want to keep it the way it is now? Just a little confused 🙂

[humphd]

He means that he likes the idea of moving it out of the options menu.

Let's do the following. @mulla028 I'd ask that you:

• do more research on how messaging apps handle attachment UI
• do more research on how LLM apps handle attachment UI
• how do these apps handle displaying/managing attachments once you add them?
• look at how it works on desktop
• look at how it works on mobile

Do a blog post about it all and link here, so we can come up with a design and approach for our use case.

[mulla028]

He means that he likes the idea of moving it out of the options menu.

Let's do the following. @mulla028 I'd ask that you:

• do more research on how messaging apps handle attachment UI
• do more research on how LLM apps handle attachment UI
• how do these apps handle displaying/managing attachments once you add them?
• look at how it works on desktop
• look at how it works on mobile

Do a blog post about it all and link here, so we can come up with a design and approach for our use case.

Yes, Sir 🫡
Thank you!

[mulla028]

This is what I got: a blog 🙂

[tarasglek]

I am good with either of your proposals, but I will defer to David if he has any preferences

[mulla028]

@humphd , based on the blog, which design example do you prefer?
I can open multiple issues with different designs (i.g., one issue will be called, implement Telegram-like design, second one implement claude-like design.) I could implement them both, and we could pick one of them.
While I was writing this comment, I came up with an idea. How do you look at new feature where user can choose design, we won't mention that it was inherited from certain application, we may name them. How I see it, there is going to be a picker for design of the attachment section. Not really necessary feature, but just trying to think out of the box :D

[humphd]

Let's start small and build this up piece-by-piece so we can test it and get feedback.

In #799 (comment) I've shown how to use some new React Hooks that connect to our filesystems. Let's start by adding a way to display these:

1. In Desktop mode, add a new paperclip icon button to the left of the microphone icon in the prompt area.
2. I'm not sure what to do with Mobile. Adding it beside the mic will clutter things, and make it so there is no space to type. Maybe we should begin with Desktop only?
3. Leave the Attach Files... menu option where it is, since we can continue to use that.
4. When the user clicks the paperclip, let's show them the existing files somehow, maybe in a modal? https://v2.chakra-ui.com/docs/components/modal/usage
5. In the modal, let's display icons for every file. Either in this PR or a follow-up, we can add a way to delete, rename, download, etc. (keep it simple to start)
6. Include a way to add new files (e.g., an icon with a + symbol on it), which would trigger the same code that Attach Files... does.

[mulla028]

@humphd , Got it!
However, paperclip icon will trigger modal window that will show existing files, and + will trigger a new file attachment. Interesting approach, so I will have to add two clickable icons(paperclip & +)?

[mulla028]

I will try to find a better approach, I'm not sure about modal window. Claude uses a side bar to show existing files, and imo it looks good. May be I could do it on the right side?

[humphd]

This is what I mean: keep this simple. Click the paperclip, show the modal, add things there.