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

Jan 23, 2025 - 05:56
 0
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:

Image description

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 avatar
humphd commented on

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!

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

Image description

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

Image description

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

Image description

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

Image description

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.

Image description

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:
Image description

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:

Image description

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:

Image description

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?

like

dislike

love

funny

angry

sad

wow