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

Prem_Gupta · September 2, 2025, 2:15pm

`🧩 ChatKaroUI`

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.

Mit AI2 Community | Kodular Community

Specifications

Use Place: An extension for MIT App Inventor 2, Kodular, Niotron, Android Builder.
Author: Prem_Gupta
Package: com.prem.chatkaroui
Size: 82 KB
Version: 3.2
Minimum API Level: 14
Built On: 2025-09-01T18:30:00Z
Updated On: 2026-03-29T18:30:00Z
Help URL: Telegram
Built & documented using: FAST v5.1.0
Latest Aix: [Download Link v3.2] from GitHub

Old Version Aix

Download Link v1 (42.0 KB)
Download Link v1.1 (42.4 KB)

Latest Aia: Download Link v1.1 (233.0 KB)

Blocks

`Total Blocks of Extension:`

`Events :`

ChatKaroUI has total 8 events.

1. ImageMenuItemClicked

Triggered when image menu item is clicked

Parameter	Type
itemText	text
imageUrl	text

2. ImageAlreadyExists

Called when the image already exists and was not re-saved.

Parameter	Type
absolutePath	text
fileName	text

3. ImageSaved

Called when an image is saved successfully. Returns absolute path and file name.

Parameter	Type
absolutePath	text
fileName	text

4. ImageSaveFailed

Called when saving an image fails. Returns the error message.

Parameter	Type
errorMessage	text

5. ProfilePictureClicked

Triggered when profile picture is clicked

Parameter	Type
name	text
avatarUrl	text

6. MessageSelected

Triggered when message is selected

Parameter	Type
message	text
index	number

7. ClipboardCopySuccess

Fires when text is successfully copied to clipboard

Parameter	Type
copiedText	text

8. ClipboardCopyFailed

Fires when copying to clipboard fails

Parameter	Type
error	text

`Method s:`

ChatKaroUI has total 25 methods.

1. Initialize

Initialize the chat UI in a VerticalArrangement. This must be called before adding any messages.

Parameter	Type
arrangement	component

2. SendSimple

Send a simple message without avatar or name

Parameter	Type
message	text
timestamp	text

3. ReceiveSimple

Receive a simple message without avatar or name

Parameter	Type
message	text
timestamp	text

4. SendWithAvatar

Send a message with avatar and sender name

Parameter	Type
message	text
avatarUrl	text
senderName	text
timestamp	text

5. ReceiveWithAvatar

Receive a message with avatar and sender name

Parameter	Type
message	text
avatarUrl	text
receiverName	text
timestamp	text

6. SendTextImage

Send a message with both text and image

Parameter	Type
message	text
imageUrl	text
avatarUrl	text
senderName	text
timestamp	text
messageOnTop	boolean

7. ReceiveTextImage

Receive a message with both text and image

Parameter	Type
message	text
imageUrl	text
avatarUrl	text
receiverName	text
timestamp	text
messageOnTop	boolean

8. AddSystemMessage

Add system systemMessage (e.g., 'User joined')

Parameter	Type
message	text

9. DownloadImage

Downloads an image from the URL, saves it to chat images folder under ASD as PNG or JPG. Fires ImageSaved, ImageAlreadyExists or ImageSaveFailed.

Parameter	Type
imageUrl	text
format	text

10. ResetTextMessageMaxWidth

Reset max width to 80% of screen width

11. ShowTypingIndicator

Show typing indicator

12. HideTypingIndicator

Hide typing indicator

13. DeleteMessage

Delete message by position (1-based index)

Parameter	Type
index	number

14. ClearAllMessages

Clear all messages

15. GetMessageCount

Get total message count

Return type: number

16. ClearSelection

Clear message selections

17. GetSelectedCount

Get number of selected messages

Return type: number

18. DeleteSelectedMessages

Delete selected messages

19. AddImageMenuItem

Add custom item to image menu

Parameter	Type
itemText	text

20. ClearImageMenuItems

Clear custom image menu items

21. ResetDateTracking

Reset date tracking for new conversations

22. GetYouTubeThumbnail

Get YouTube thumbnail URL from a full URL or video ID.

Return type: text

Parameter	Type
youTubeURL	text

23. GetCurrentTime

Get current timestamp formatted as hh:mm a

Return type: text

24. GetCurrentDate

Get current date formatted as yyyy-MM-dd

Return type: text

25. CopyToClipboard

Copy text to clipboard

Parameter	Type
text	text

`Setters: & Gette rs:`

ChatKaroUI has total 33 setter properties and total 31 getter properties.

1. AvatarSize

Get and Set avatar size in DP

Input type: number

2. TextMessageMaxWidth

Get and Set max width for text messages in DP

Input type: number

3. ImageMessageMaxWidth

Get and Set max width for image messages in DP

Input type: number

4. FullscreenImageBGColor

Get and Set background color for fullscreen image viewer

Input type: number

5. AvatarBackgroundColor

Get and Set background color for avatars

Input type: number

6. SentMessageTextColor

Get and Set text color for sent messages

Input type: number

7. ReceivedMessageTextColor

Get and Set text color for received messages

Input type: number

8. SentMessageBackgroundColor

Get and Set background color for sent messages

Input type: number

9. ReceivedMessageBackgroundColor

Get and Set background color for received messages

Input type: number

10. MessageFontSize

Get and Set font size for messages

Input type: number

11. SystemMessageFontSize

Get and Set font size for messages

Input type: number

12. SystemMessageTextColor

Get and Set text color for system systemMessages

Input type: number

13. SelectedMessageBgColor

Get and Set background color for message selection

Input type: number

14. TypingIndicatorTextColor

Get and Set text color for typing indicator

Input type: number

15. TimestampFontSize

Get and Set text size for timestamps

Input type: number

16. TimestampTextColor

Get and Set text color for timestamps

Input type: number

17. SentStatusTextColor

Get and Set text color for sent status

Input type: number

18. ReceivedStatusTextColor

Get and Set text color for received status

Input type: number

19. SentStatusText

Get and Set status text for sent messages

Input type: text

20. ReceivedStatusText

Get and Set status text for received messages

Input type: text

21. SentNameTextColor

Get and Set text color for sender names in sent messages

Input type: number

22. ReceivedNameTextColor

Get and Set text color for sender names in received messages

Input type: number

23. NameFontSize

Get and Set font size for sender names

Input type: number

24. MessageCornerRadius

Get and Set corner radius for message bubbles

Input type: number

25. MessageHorizontalPadding

Get and Set horizontal padding inside message bubbles

Input type: number

26. MessageVerticalPadding

Get and Set vertical padding inside message bubbles

Input type: number

27. ShowTimestamp

Get and Set whether timestamps are shown

Input type: boolean

28. ShowReadStatus

Get and Set whether read status indicators are shown

Input type: boolean

29. AutoLinkEnabledInChat

Get and Set the current state of link detection

Input type: boolean

30. ShowMetadataInsideBubble

Get and Set whether metadata is shown inside bubble

Input type: boolean

31. ImageWidthFixInTextImageMessage

Get and Set whether metadata is shown inside bubble

Input type: boolean

32. CustomFontFamily

Sets the custom font family for messages. Provide the path to the font file (e.g., 'myfont.ttf').

Input type: text

`Use Some ChatUI Extension OS C ode:`

Thank You @White_Tiger

`Want to contri bute:`

`Want to D onate:`

Thank you for reading this.
Hope this helps !

TIMAI2 · September 2, 2025, 2:15pm

Well done. Could do with a couple of simple examples and blocks usage examples.

Prem_Gupta · September 3, 2025, 2:27pm

Thank You @TIMAI2
Aix & Aia Updated in Post 1.

Prem_Gupta · September 28, 2025, 7:37pm

New update released

Prem_Gupta · February 17, 2026, 6:13pm

This is now open source , any one can send PR of feathers and update

Ahmed_Islam · March 14, 2026, 11:15am

Can you add “HTMLFormat“ Property to make it for the textview chats?

davidefa · March 14, 2026, 3:18pm

Can’t understand how “status” is working: it seems to me that the SentStatusText and the ReceivedStatusText is only used when the post is created ( and can’t be changed in a second moment ).

Also the ShowReadStatus and ShowTimestamp does not produce any affect.

Last is it possible to disable the timestamp shown below ( or collapse in one line )?

Prem_Gupta · March 14, 2026, 3:47pm

Can you show what want to add and what to show.

Prem_Gupta · March 14, 2026, 3:52pm

Status like - today, yesterday etc, and it add in code by default.

And for ShowReadStatus and ShowTimestamp, you can checkbox or use block, then send new msg, it's working

Can you share your blocks

davidefa · March 14, 2026, 4:45pm

I’m checking the capabilities of your extension.

Have modified you example aia.

I’m wondering if:

I can remove the timestamp shown in image below
I can modify the posts “on the fly”, for example modifying the icons highlighted to show that the post has been read by the receiver ( certainly I can do it regenerating the whole chat )

P.S.

What is AutoLinkEnabledInChat used for?

P.P.S

I already tried to check/uncheck ShowReadStatus and ShowTimestamp, but didn’t note any difference on the output

chatKaroUI_Ext_Ai2_01.aia (233.3 KB)

.

Prem_Gupta · March 14, 2026, 8:37pm

Update extension and test

Use v2 extension and clear cache of companion

davidefa · March 14, 2026, 11:20pm

Ok, updated aix, but still have the following:

with ShowTimestamp checked

with ShowTimestamp unchecked

Could you please post your aia?

Thx

chatKaroUI_v2.aia (239.6 KB)

Sabi · March 26, 2026, 9:48am

How do I save chats and display old chats on the screen with this extension, please?

Prem_Gupta · March 28, 2026, 6:45pm

Very important update with many feature.
Download updated v3 aix and read all details from GitHub readme.

github.com/arungupta1526/ChatKaroUI

README.md

main

<div align="center">
<h1><kbd>🧩 ChatKaroUI</kbd></h1>

ChatKaroUI is a `customizable advance chat component extension` text, images, reply, star, HTML/Markdown, export/import and more.<br>

<span><a href="https://community.appinventor.mit.edu/t/154865" target="_blank"><small><mark>Mit AI2 Community</mark></small></a></span> | <span><a href="https://community.kodular.io/t/301309" target="_blank"><small><mark>Kodular Community</mark></small></a></span>

</div>

## 📝 Specifications

---

🔎 **Use Place:** An extension for _`MIT App Inventor 2, Kodular, Niotron, Android Builder.`_ <br>
👤 **Author:** Created by: [Prem_Gupta](https://community.appinventor.mit.edu/u/prem_gupta/summary) <br>
📦 **Package:** com.prem.chatkaroui <br>
💾 **Size:** 76.74 KB <br>
⚙️ **Version:** 3.0 <br>
📱 **Minimum API Level:** 14 <br>
📅 **Built On:** [date=2025-09-02 timezone="Asia/Kolkata"] <br>

This file has been truncated. show original

@Sabi @davidefa @Ahmed_Islam pls check updated aix

Sabi · March 28, 2026, 9:41pm

Thanks you

Prem_Gupta · March 29, 2026, 9:02am

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.

davidefa · March 29, 2026, 12:20pm

Tanks, v3.1 is ok for my current use case.

Only noted that setting ShowTimestamp to true:

setting the parameter timestamp to empty string does not show any timestamp ( as in the sent message below )
setting the parameter timestamp to a value, shows both the red timestamp above message and the grey “status timestamp” below the message ( as in the received message below )

I mean it is not possible to show only the “status timestamp”

Prem_Gupta · March 29, 2026, 10:00pm

Update available v3.2 on github

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

@davidefa can you verify.

Ahmed_Islam · March 30, 2026, 1:42pm

THANKS FOR THE HTML AND MARKDOWN!!

i just wanted to say thank you for those…

davidefa · March 31, 2026, 8:38pm

Yes is working ok ( checked also reply features: great )