[UI/UX] Improve image upload experience — add preview & drag-to-reorder in chat section

[riyo264]

Description:

Currently, when uploading images in the chat section

• Only the filename is shown (no preview).
• There is no way to reorder uploaded images before sending.

These improvements would make the chat experience smoother, especially for multimodal queries.

Proposed Features

1. Image Preview (UX Improvement)

   Display a thumbnail preview of each uploaded image next to the input box.

   Allow users to see what they’ve uploaded before sending.

2. Drag-to-Reorder (Usability Improvement)

   When multiple images are uploaded, allow users to drag and reorder them before sending.

   This helps users control the order in which images are processed by the model.

The drag to reorder feature is not available in many famous models like gpt or gemini but I believe implementing it would enhance the user experience, it can help users to navigate the model through the uploaded documents in the prompt. The drag feature would also need some backend work.

If you think these enhancements are worth making then I would like to work on them.

[dartpain]

I like the 2nd suggestion. Im not sure If I want to display preview tbh, think it looks cleaner without preview for now, also does not overload frontend as much.

also we have a planned drag and drop functionality if you can add it as 3. would be much appreciated. (just change source text to attachments)

[techieadi4703]

I'm interested in this issue can you assign me this issue to me under hacktoberfest label.

[riyo264]

@dartpain sure I would work on the drag and drop attachment