[F/OS] ChatKaroUI Extension - Advance Chat with text, images and messages support

[Prem_Gupta]

Update available v3.1 on github

ChatKaroUI is a customizable advanced chat component extension with text, images, reply quotes, star/bookmark, HTML/Markdown rendering, swipe-to-reply, link previews, export/import, and more — built on RecyclerView, LinearLayout, and FrameLayout.

[Prem_Gupta]

Update available v3.2 on github

Now you can hide time header like - today etc and many more features.

[Prem_Gupta]

Update available v3.3 on github

introduce some new blocks of reply and some changes in code.

[Ibrahim_Jamar (DevSphere </>)]

Sometimes messages are arranged randomly, I will provide my code when am on my desk

[Star_DZ]

Thank you very much Can you add Glide caching

[Prem_Gupta]

What do this, can you explain

[curious_singh (Ramandeep Singh)]

Hey, Great extension. Can you help me how to remove the timestamp in RED (01:35), like it should show today, yesterday or past date but not the time since its already under the messages. I used showTimeStamp to false but it hides the timestamp under the message and not the RED one.

[Vega_Star]

To replace timestamp in red, you need to use .Format Time from Clock component.

[curious_singh (Ramandeep Singh)]

Thanks a lot for suggestion. I also got in touch with the developer and he informed to uncheck “ShowDateHeaders” option from the Design which fixed it.

[Prem_Gupta]

Nice, Can you share your project block of this extension

[Vega_Star]

Well it’s great to hear. But I did try and I’m quite sure that setting show date headers to false or unchecked will remove the date header from the UI completely.

@Prem_Gupta

share your project block of this extension

Ofcourse why not… I’ll be glad. Give me a bit.
I’ll upload it here itself

Edit:
Unfortunately before heading to bed, deleted the project in my sleepy eyes and now had to redo everything. This screenshot is just the main thing i used to recreate the above conversation.

Give it a shot by right click > do it, changing the blocks of timestamp = with others.

Singh, your question was to show today, yesterday etc. As I said earlier the dateheader will not be shown in the UI, this screenshot is the result. Just curious to know, how did it got fixed miraculously.

[Prem_Gupta]

Thanks

Singh also use showDateHeader to false for not show.

I want to see how you person handle today, tomorrow etc.

[curious_singh (Ramandeep Singh)]

@Vega_Star mentioned he used GetCurrentDate instead of GetCurrentTime to show today, yesterday. I’ll try that but maybe later as I’m working on different thing. Meanwhile, he can show his blocks for the same.

[Vega_Star]

Can you mention when did

@curious_singh

@Vega_Star mentioned he used GetCurrentDate instead of GetCurrentTime to show today, yesterday.

@curious_singh

Meanwhile, he can show his blocks for the same.

Here you have it…

@Vega_Star

This screenshot is just the main thing i used to recreate the above conversation.

Give it a shot by right click > do it, changing the blocks of timestamp = with others.

PS: Don’t set date header to false.

[Saeed_R1 (Saeed R)]

Hello everyone,

I am building a group chat application using ChatKaroUI and CloudDB.

My main problem is displaying messages on the correct side. I want my own messages to appear on the right side and messages from other users to appear on the left side, similar to WhatsApp or Telegram.

I am using SendWithAvatar and ReceiveWithAvatar, and I store the following data in CloudDB:

[username, avatarUrl, message, timestamp]

When a message is received, I compare the username in the message with the current user’s username. However, the messages are not being displayed correctly on the left and right sides.

My goal is:

• Show my messages on the right side.
• Show other users’ messages on the left side.
• Display avatar, username, and timestamp correctly.
• Use CloudDB for real-time group chat.

Has anyone successfully implemented this with ChatKaroUI? Could you please share the correct blocks or an example project?

Thank you for your help.

[Ravi_Gupta1 (Ravi Gupta)]

If you’re using ChatKaroUI or a similar chat interface, the usual approach is to compare the message sender ID with the current logged-in user’s ID. Messages sent by the current user are aligned to the right, while messages from other users are aligned to the left.

For example, check whether message.senderId == currentUserId. If true, apply a right-aligned chat bubble style; otherwise, use a left-aligned style. Most chat frameworks handle this through conditional UI rendering.

If you’re facing issues, verify that the sender IDs are being passed correctly and that the alignment logic is applied consistently when rendering the message list. This is the standard method used in most messaging applications.

[Ibrahim_Jamar (DevSphere </>)]

@Ravi_Gupta1

message.senderId == currentUserId

@Saeed_R1

• Show my messages on the right side.
• Show other users’ messages on the left side.
• Display avatar, username, and timestamp correctly.
• Use CloudDB for real-time group chat.

Used Json

{
  "chat": [
    {
      "user_id": "user_001",
      "avatar_url": "https://example.com/avatars/user1.jpg",
      "message": "Hey, how are you?",
      "timestamp": "2026-06-06T12:30:00Z"
    },
    {
      "user_id": "user_002",
      "avatar_url": "https://example.com/avatars/user2.jpg",
      "message": "I'm good, thanks! How about you?",
      "timestamp": "2026-06-06T12:31:15Z"
    },
    {
      "user_id": "user_001",
      "avatar_url": "https://example.com/avatars/user1.jpg",
      "message": "Doing great. Working on a new project.",
      "timestamp": "2026-06-06T12:32:05Z"
    },
    {
      "user_id": "user_002",
      "avatar_url": "https://example.com/avatars/user2.jpg",
      "message": "Sounds interesting. Good luck!",
      "timestamp": "2026-06-06T12:33:20Z"
    }
  ]
}

All this may depend on your database structure,

[Saeed_R1 (Saeed R)]

How to with CloudDB?

[Ibrahim_Jamar (DevSphere </>)]

Could you please elaborate?

What exactly do you prefer to?

[Saeed_R1 (Saeed R)]

Excuse me, can I send you the aia file?