[FREE] ChatKaroUI Extension - Advance Chat with text, images and messages support

Extensions
, , , ,
1

🧩 ChatKaroUI

ChatKaroUI is a customizable advance chat component extension with text, images and messages support based on LinearLayout, FrameLayout and ScrollView.

Mit AI2 Community | Kodular Community

:memo: Specifications

:magnifying_glass_tilted_right: Use Place: An extension for MIT App Inventor 2, Kodular, Niotron, Android Builder.
:bust_in_silhouette: Author: Prem_Gupta
:package: Package: com.prem.chatkaroui
:floppy_disk: Size: 49.05 KB
:gear: Version: 2.0
:mobile_phone: Minimum API Level: 14
:date: Built On: 2025-09-01T18:30:00Z
:date: Updated On: 2025-09-28T18:30:00Z
:link: Help URL: Telegram
:laptop: Built & documented using: FAST v5.1.0
:down_arrow: Latest Aix: Download Link v2.0 (49.1 KB)

Old Version Aix

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

:down_arrow: Latest Aia: Download Link v2.0 (242.9 KB)

Old Version Aia

Download Link v1.1 (234.1 KB)

Blocks

blocks - 2025-09-03T192349.338
blocks - 2025-09-03T192349.3381353×1040 126 KB

Total Blocks of Extension:

Total Blocks of Extension
Total Blocks of Extension1980×2408 834 KB

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

Methods:

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

289×130 7.93 KB

Send a message with avatar and sender name

Parameter Type
message text
avatarUrl text
senderName text
timestamp text

5. ReceiveWithAvatar

308×130 8.33 KB

Receive a message with avatar and sender name

Parameter Type
message text
avatarUrl text
receiverName text
timestamp text

6. SendTextImage

285×180 10.1 KB

Send a message with both text and image

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

7. ReceiveTextImage

304×180 10.6 KB

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: & Getters:

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 Code:

Thank You @White_Tiger :sparkling_heart::rocket:

Want to Donate:

Thank you for reading this.
Hope this helps ! :grin:

8 Likes
2

Great plugin, please add images from the plugin

1 Like
3

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

The image is a screenshot of a text conversation where two people discuss a seemingly surreal experience involving a sunset and a mysterious figure named Eddy, with one person questioning the reality of the event and the other providing explanations and reassurances. (Captioned by AI)
The image is a screenshot of a text conversation where two people discuss a seemingly surreal experience involving a sunset and a mysterious figure named Eddy, with one person questioning the reality of the event and the other providing explanations and reassurances. (Captioned by AI)1080×4994 435 KB

4

Thanks for the great extension! One of the most useful extensions!
Can you add the following upgrades to the extension?

  1. Update an existing message
  2. Customize the typing indicator
  3. Square bubble edge like in WhatsApp (like a speech bubble)
  4. Scroll to a specific message
  5. Select messages by long pressing on any point in the bubble and not just in empty space
  6. After one message is selected by long pressing, it will be possible to select additional messages by short pressing
  7. Add an options menu to each message similar to a picture message.
    That would be perfect!!!
    By the way, I didn’t understand what this block does:
    A screenshot of a code snippet showing a method call with a dropdown selection labeled 'ChatKaroUI1' and an itemText parameter set to 'AddImageMenuItem'. (Captioned by AI)

Thank you very much!

1 Like
5

Thank you @ELAZAR , this extension help you in your application.

Ok i will try

Can u provide some screen shot

Can u mention the lists name and work

U can add more list in the image long click, like - show you custom list after Bydefault image list.

And now at this time, I am busy with other work, so when I get free time, I can release new update.

6

Thank you very much!

Like this:
image
And regarding the typing indicator, I mean that the developer will be able to replace the caption “typing…” with his own language or another word… is that possible?

  • Copy to clipboard
  • Edit
    Or it would be best if the developer could customize the list as you explained here:

Additionally, I would love for you to add full support for Markdown.

1 Like
7

Hi!
Were you able to add what I requested to your extension? It would really help me!

Thank you very much!!!

8

This time i am away from my laptop, it take may be 5 days to complete this. I try to cover it fast. :person_biking:三

9

Wow! Thank you so much!
I’m even delaying the launch of my app to get the updated extension in!

10

:backhand_index_pointing_up::backhand_index_pointing_up: These all feathers are added in new update, now you can enjoy :rocket:

1 Like
11

Wow! Simply excellent!!! It was worth the wait!

12

I loved the extension! Thank you very much!
Does it support MARKDOWN or HTML? Because I want to use it as an AI chatbot…

13

U can try, but i think it does not support for now, i will try to add these support :blush:

1 Like
14

Hie @Prem_Gupta how can I use your extension with firebase, for real time and message storing? How the structure in firebase would be looks like?

15

Here u can read about this, this is also my post regarding this question, i also try and succeed. u can try this and modify it,

firstly U read carefully some details.

i hope this help U :rocket:

16

2 posts were split to a new topic: Can you make comment ui extension