# đź’¬ Chat Component: A Complete Walkthrough **URL:** \ **Category:** Community Resources\ **Tags:** ai, actions, tutorial, components, collections\ **Created:** [November 6, 2023, 8:07pm UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572 "2023-11-06T20:07:34Z")\ **Posts on this page:** 14\ **Page:** 2
**Author:** ![Maksidaa](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maksidaa/32/62648_2.png) [@Maksidaa](https://community.glideapps.com/u/Maksidaa)\ **Post date:** [January 12, 2024, 11:31pm UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/21 "2024-01-12T23:31:50Z")
I currently have my comments in “chat” style and sorted by date/time posted, with the oldest messages at the top and the newest messages at the bottom of the page. When the chats get lengthy, like 30 or 40 messages, the app defaults to the top of the chat page, which means users have to scroll all the way down to the bottom to see the newest messages. You can close the chat, wait a few seconds and then reopen the app, and usually it will open to show the bottom of the page and the newest messages. This is an annoying issue, and creates a barrier to users when engaging in chats. I could change the sort to flip the newest messages to the top, but almost every other chat app out there does the newest at the bottom, which is what users are accustomed to seeing. Is there something I could do in order to have the chats open to the bottom of the screen? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [January 13, 2024, 12:04am UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/22 "2024-01-13T00:04:23Z")
I think this is a valid concern. I don’t want to sort by newest at all, and wonder how others deal with this. As far as I’m aware, there’s no native fix for that. ---
**Author:** ![burningmikey](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/burningmikey/32/49706_2.png) [@burningmikey](https://community.glideapps.com/u/burningmikey)\ **Post date:** [January 25, 2024, 8:42pm UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/23 "2024-01-25T20:42:58Z")
> [@Maksidaa](#): > > When the chats get lengthy, like 30 or 40 messages, the app defaults to the top of the chat page, which means users have to scroll all the way down to the bottom to see the newest messages. You can close the chat, wait a few seconds and then reopen the app, and usually it will open to show the bottom of the page and the newest messages. Yes it is a big UX problem with this component. If you use the chat component alone to make it work, you cannot even put a breadcrumbs (so no way to go back to the previous page). I hope Glide will improve this component. Have you sent a feature request? ---
**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\ **Post date:** [January 25, 2024, 9:30pm UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/24 "2024-01-25T21:30:12Z")
Sharing in case of interest… I follow Bob’s tip and add buttons above the Chat component. They open a new screen with just the chat component, which helps with the formatting issues… ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/7/4741212231fcf25faf029c7c70f28ba1cfad8655.jpeg) ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [January 25, 2024, 10:06pm UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/25 "2024-01-25T22:06:34Z")
Ya. This is what I do to mitigate the scroll issue. (@tristan — UX issue that I should have mentioned yesterday) ---
**Author:** ![Maksidaa](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maksidaa/32/62648_2.png) [@Maksidaa](https://community.glideapps.com/u/Maksidaa)\ **Post date:** [January 26, 2024, 12:16am UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/26 "2024-01-26T00:16:51Z")
I’m not sure I understand the tip. When a user clicks a particular chat group, it opens a new screen, and on the new screen the only component I have is the Comments component shown in the Chat format. The Chat is arranged with the oldest comments at the top, and the newest comments at the bottom like a traditional chat app would display. With this arrangement, the very first time the app is opened and a chat is clicked, the new screen shows the top of the screen, which in my case is the very first comment ever created. Ideally it would automatically drop down the the newest comment ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [January 26, 2024, 12:25am UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/27 "2024-01-26T00:25:11Z")
> [@Maksidaa](#): > > the only component I have is the Comments component shown in the Chat format Then you have it set up as @Simon_Hill and I are suggesting. > [@Maksidaa](#): > > Ideally it would automatically drop down the the newest comment That’s how it’s supposed to work. If it’s not, submit a bug report. ---
**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\ **Post date:** [January 26, 2024, 5:55am UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/28 "2024-01-26T05:55:01Z")
I also like to limit the number of items displayed in the new window to say 5 items. Anything more will likely drop off the screen anyway. ---
**Author:** ![bfbraunlich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bfbraunlich/32/72791_2.png) [@bfbraunlich](https://community.glideapps.com/u/bfbraunlich)\ **Post date:** [April 3, 2024, 11:21pm UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/29 "2024-04-03T23:21:08Z")
Amazing walkthrough, got a chat and some comment components set up super easily. Two things I’d like to do but can’t figure out: 1. Tapping on a profile of someone who added a message to view that user’s profile – this seems like it should be doable? The data’s all there… 2. Specifically mentioning someone (@usernamewhatever this is a message to them) or reacting to a message (like/love/etc) – from what I can tell this is _not_ possible? Any ideas? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [April 4, 2024, 12:04am UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/30 "2024-04-04T00:04:31Z")
> [@bfbraunlich](#): > > Tapping on a profile of someone who added a message to view that user’s profile – this seems like it should be doable? The “image” itself isn’t clickable. You would have to create a button for that, but the action is so hideous on mobile I wouldn’t suggest you doing that (you have to right click or long press, if I recall right, for the dropdown of actions to show). > [@bfbraunlich](#): > > Specifically mentioning someone (@usernamewhatever this is a message to them) or reacting to a message (like/love/etc) – from what I can tell this is _not_ possible? > **[Mentioning / tagging in Comments Component](https://us02web.zoom.us/clips/share/pz2L7WyWH8mTBmOHLswNSTeNNoiKS9iAeYAGyXGF3XOmlf4GuaVdd7NcsDx1_BgHVLbfV-fo6cE15PJsHbIFrvSa.39_vYc2DF-8cGZ-D)** There’s a workaround here by @Dvir . ---
**Author:** ![bfbraunlich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bfbraunlich/32/72791_2.png) [@bfbraunlich](https://community.glideapps.com/u/bfbraunlich)\ **Post date:** [April 4, 2024, 1:05am UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/31 "2024-04-04T01:05:34Z")
Ahh, it’s a long press or right click when you add an action, I see. Yeah, it’s not the cleanest, but it’s better than nothing (and you have to press so long that I don’t imagine people accidentally doing it). Will take a look at mentioning/tagging, thanks! ---
**Author:** ![dorthe\_petersen](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dorthe_petersen/32/71764_2.png) [@dorthe\_petersen](https://community.glideapps.com/u/dorthe_petersen)\ **Post date:** [January 28, 2025, 11:58am UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/32 "2025-01-28T11:58:28Z")
Love your tutorials… Wondering if it is possible to add an image at the same time as text. Or is it only possible to send text and then add an image? ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [January 28, 2025, 12:53pm UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/33 "2025-01-28T12:53:26Z")
You might be able to add a url to an image and then have AI try to decipher if the link is an image link and if so output the HTML necessary. Besides that, there isn’t a built in mechanic to upload a photo at the same time. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [January 30, 2025, 2:57am UTC](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572/34 "2025-01-30T02:57:34Z")
An alternative is abandon the native mechanic to enter the message within the Chat component, and have it as a form/form container. Then you can construct the HTML yourself with the image. [Previous page](https://community.glideapps.com/t/chat-component-a-complete-walkthrough/67572.md?page=1)