OSD700: How LLMs and Messengers Handling Attachments UI
Table of Contents Prefix Messaging Applications WhatsApp Telegram LLMs ChatGPT Claude Conclusion Prefix This blog post is the part of an issue for chatcraft.org. There I propose to move Attach Files... option. Currently the user has to press Options button to open actions menu, and only then select Attach Files... to choose the files he desires to share with the LLM or simply drag the file to the TextInput field: I don't consider it as a good practice for the reason, that me as a user want to have a faster access to the Attach Files... option. Further in this blog I discussed possible solutions, referencing the most popular messaging and LLM applications for both platforms: mobile and desktop. As per: Comment for #794 humphd commented on Jan 22, 2025 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. View on GitHub Messaging Applications Before I begin, I want to mention that in this blog we won't dive deep into technical solution, but UI/UX part. Let's start with messaging apps! WhatsApp As the first reference in the messaging app group, I took WhatsApp for the reason, that it statistically is the most popular messenger in the world with 2 billion of active monthly users! It would be a sin if I didn't talk about WhatsApp. Desktop Attachment Handling UI Next to the TextField we can see + button that opens actions menu that includes: Document - in other words you may attach any file from your file system. Photos & videos - opens file system, allows to attach only video or photo file types (Requires appropriate extension!) Camera - turns on camera, opens preview mode with photo button at the bottom, attaches photo taken Contact - opens modal window with all existing contacts, user may attach multiple contacts Poll - opens modal window with empty TextFields where user can set up a poll, and then attach it New sticker - opens file system, user may select only photo type files to attach, then opens review window with. However, unlike photos option, it generates transparent background. Once I've added the file, it opens preview modal window. Where we may change the order of the attached files, see the file size, and provide comments for each of them. Eventually, user sends or removes these attached files. Mobile Attachment Handling UI For some reasons, it doesn't let me upload a gif preview for this particular file, but I left embed link to it: dev-to-uploads.s3.amazonaws.com In the mobile version of WhatsApp we can see the same + button that will expand actions menu that includes two more options comparing to desktop version, these attachment options: Location - attaches live location for certain period of time. Imagine - attaches image generate by MetaAI assistant. Despite two more attachment options, it doesn't display attached files that well as the desktop version, you can see it in the gif preview. Moreover, the users have the ability to preview only the first attached file. However, the users can preview all the attached photos and videos, but aren't able to change an order. Telegram As the second reference in the messaging apps group, I took Telegram. Since it's 4th most popular messenger with 900 million active monthly users. In my opinion it's the most convenient messenger in the world with the most flexible functionality. If you aren't familiar with Telegram, I highly recommend to download it, and explore. It definitely worths your time! Desktop Attachment Handling UI In this example we can see the paper clip icon next to the TextInput field. Once user clicks on it, the actions menu expands, and we can see attachment options: Photo Or Video - opens file system for user to attach any file. Wallet - opens mini-application to either login or register crypto-wallet and send currency as an attachment. File - same logic as for Photo Or Video option. Camera - turns in-built camera on, and previews the output with camera button to take a shot. Location - attaches live location of the device for set by user period of time. I recommend to pay attention to the file review process, it opens modal window that previews all attached files, if possible. Provides the caption text input field. Crucial feature hides on the right top corner, where three dots expand. If user has multiple file
Table of Contents
Prefix
-
Messaging Applications
- Telegram
-
LLMs
- ChatGPT
- Claude
Conclusion
Prefix
This blog post is the part of an issue for chatcraft.org. There I propose to move
Attach Files...
option.
Currently the user has to press Options
button to open actions menu, and only then select Attach Files...
to choose the files he desires to share with the LLM or simply drag the file to the TextInput
field:
I don't consider it as a good practice for the reason, that me as a user want to have a faster access to the Attach Files...
option.
Further in this blog I discussed possible solutions, referencing the most popular messaging and LLM applications for both platforms: mobile and desktop.
As per:
Comment for #794
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.
Messaging Applications
Before I begin, I want to mention that in this blog we won't dive deep into technical solution, but UI/UX part.
Let's start with messaging apps!
As the first reference in the messaging app group, I took WhatsApp
for the reason, that it statistically is the most popular messenger in the world with 2 billion of active monthly users! It would be a sin if I didn't talk about WhatsApp
.
Desktop Attachment Handling UI
Next to the TextField
we can see +
button that opens actions menu that includes:
- Document - in other words you may attach any file from your file system.
- Photos & videos - opens file system, allows to attach only video or photo file types (Requires appropriate extension!)
- Camera - turns on camera, opens preview mode with photo button at the bottom, attaches photo taken
- Contact - opens modal window with all existing contacts, user may attach multiple contacts
-
Poll - opens modal window with empty
TextFields
where user can set up a poll, and then attach it - New sticker - opens file system, user may select only photo type files to attach, then opens review window with. However, unlike photos option, it generates transparent background.
Once I've added the file, it opens preview modal window. Where we may change the order of the attached files, see the file size, and provide comments for each of them. Eventually, user sends or removes these attached files.
Mobile Attachment Handling UI
For some reasons, it doesn't let me upload a gif preview for this particular file, but I left embed link to it:
In the mobile version of WhatsApp
we can see the same +
button that will expand actions menu that includes two more options comparing to desktop version, these attachment options:
- Location - attaches live location for certain period of time.
-
Imagine - attaches image generate by
MetaAI
assistant.
Despite two more attachment options, it doesn't display attached files that well as the desktop version, you can see it in the gif preview. Moreover, the users have the ability to preview only the first attached file. However, the users can preview all the attached photos and videos, but aren't able to change an order.
Telegram
As the second reference in the messaging apps group, I took Telegram
. Since it's 4th most popular messenger with 900 million active monthly users. In my opinion it's the most convenient messenger in the world with the most flexible functionality. If you aren't familiar with Telegram
, I highly recommend to download it, and explore. It definitely worths your time!
Desktop Attachment Handling UI
In this example we can see the paper clip icon next to the TextInput
field. Once user clicks on it, the actions menu expands, and we can see attachment options:
- Photo Or Video - opens file system for user to attach any file.
- Wallet - opens mini-application to either login or register crypto-wallet and send currency as an attachment.
-
File - same logic as for
Photo Or Video
option. - Camera - turns in-built camera on, and previews the output with camera button to take a shot.
- Location - attaches live location of the device for set by user period of time.
I recommend to pay attention to the file review process, it opens modal window that previews all attached files, if possible. Provides the caption text input field. Crucial feature hides on the right top corner, where three dots expand. If user has multiple files attached it will show an option to Send as ZIP Archive
. Moreover, it also provides two cool options to send With Compression
or Without Compression
.
Mobile Attachment Handling UI
Telegram's mobile application doesn't support file review, but has cool feature to pick if user wants to send photo or video from the gallery as file. Essentially, it is completely the same as desktop version with one addition. It supports attachment of contact(s) from the contacts list.
LLMs
ChatGPT
GPT has a lot of different models, but as reference I use GPT-4, free model. I provide GPT example in this blog because chatcraft.org
is developer oriented clone of ChatGPT.
Desktop Attachment Handling UI
As we can see under the text input field we have paper clip icon, if user clicks on it, it expands and shows three options:
- Connect to Google Drive
- Connect to Microsoft One Drive
- Upload from Computer
Once clicks Upload from Computer
file system opens, and user able to pick any file. However, preview of the file happens above the text input field. In the preview user sees file name, and delete button, but if we drag and drop multimedia file, user will see very small preview. Nothing fancy...
Mobile Attachment Handling UI
Since mobile gifs aren't supported, providing an embed link to the gif.
In the mobile version of the ChatGPT, developers decided to use +
to open actions menu instead of paper clip icon. Actions menu includes:
- Attach Photos - opens phone gallery to let user attach mediafiles
- Take Photo - opens camera application, so user can take a photo using both front and back cameras
- Attach Files - opens files browser to select file(s) to be attached
All the files displayed the same way as in desktop version, so it extends upper bound of the text input field. The only way to manage attached files is to delete them.
In my opinion, ChatGPT is lacking files preview.
Claude
Couldn't think of other AI provider rather than Claude
. During the last semester everyone had been praising Claude
, and I typically use it in learning purposes. Essentially, I had no choice :D
Desktop Attachments Handling
On the right from the text input field is paper clip icon, that extends two other icons if you move the mouse over it. It expends: take screenshot
and Google Drive
options. Once user clicks right on the paper clip icon, it opens the file system, and prompts to select one or more files, drag & drop works without any doubts (tested). Actually, Claude uses the best display of the attachments, for the reason that you can review contents of each file. Moreover, user able to download some of the attachments, I think it only works with pdf files.
Nevertheless, if the conversation in the single chat took a while, and user lost the files, there is always an option to find them in chat controls
:
Mobile Attachments Handling
There is interesting tendency that almost all of the LLM apps in their mobile versions replace paper clip icon to +
. As we can see here:
Once user clicks on +
drop-up menu with actions opens, it includes Response Style
picker along side with Project
picker. Project
is interesting feature by Claude, when user capable to accumulate all the responds, files etc. from different chats in single folder!
List of actions:
- Camera - to take a picture and use as an attachment
- Photos - to open a gallery and pick media-content as an attachment
- Files - to open file manager and pick file as an attachment
Almost the same content display and management:
The only difference is that user isn't able to download pdf files...
Conclusion
It was really interesting observing all of these LLMs and messaging applications in terms of how attachment handling(ui) works. Analyzing the entire process, I realize that some of the applications surprised, and some of them made you feel incomplete, in terms of user experience.
Where I am trying to get at, while applications like Telegram
, Claude
have all these little details which attract user with any background. Unfortunately, ChatGPT
didn't make me feel proud of them, they don't have any kind of preview for any kind of file.
In the conclusion, I would say that we must follow example of either Claude
or Telegram
!
What's Your Reaction?