ChatUI : Simple Chat Interface Extension

Extensions
1

Screenshot_20240802-172502
Screenshot_20240802-1725021080×2340 110 KB

MIT App Inventor
MIT App Inventor251×731 25.6 KB

ChatUI

Extension component for ChatUI. Created using Rush.

Methods:

Initialize

Initialize the chat UI in a VerticalArrangement

Parameter Type
arrangement component

Send

Send a message

Parameter Type
message text
avatarUrl text

Receive

Receive a message

Parameter Type
message text
avatarUrl text

ShowTypingIndicator

Show typing indicator

HideTypingIndicator

Hide typing indicator

AddReaction

Add reaction to a message

Parameter Type
messageIndex number
reaction text

Properties:

SentMessageColor

Set the color for sent messages

ReceivedMessageColor

Set the color for received messages

SentTextColor

Set the text color for sent messages

ReceivedTextColor

Set the text color for received messages

MessageCornerRadius

Set the corner radius for message bubbles

AvatarSize

Set the size of avatar images

MessageMaxWidth

Set the maximum width of message bubbles

ShowTimestamp

Show or hide message timestamps

ShowReadStatus

Show or hide read status for sent messages

BackgroundColor

Set the background color of the chat

FontFamily

Set the font for messages

FontSize

Set the font size for messages

This is not server based extension ,
you need to manually setup backend .

Here is simple demo

MIT App Inventor(1)
MIT App Inventor(1)1182×603 51.4 KB

Open Source

com.xtiger.chatui.aix (16.5 KB)

11 Likes
2

Looks like really good extension, I just needed it for my messaging app, I am gonna try it right now!

2 Likes
4

You should add names to appear, not just image

2 Likes
5

Does it work without an image?

2 Likes
6

Please provide some information about this extension before it listed please.

  • how does it work?
  • What server does it connect to?
  • what do individual Blocks do?
  • where is the chat stored?

Thank you

4 Likes
9

Added
Receiver name on messages
Background color and image
Vertical & Horizontal Padding

Screenshot_20240803-204617
Screenshot_20240803-2046171080×2340 108 KB

Download link updated in 1st post.

6 Likes
10

Another very Good extension. If possible can you please make it open source, I wants to contribute. Thanks

2 Likes
11

Made it open source
Get from here , however some functions aren't fully implemented yet

2 Likes
12

Added some features :-
Select messages when long clicked ,
Profile pic click event
Added sub message feature to show (someone join left chat / show date)
Added timestamp on messages send / receive function
Delete messages
Clear Selection

Removed Features :-
Reaction
Background color / image

MIT App Inventor
MIT App Inventor313×657 23.7 KB

com.xtiger.chatui.aix (17.2 KB)

1 Like
14

That was randomly selected , everyone is free to edit and create their own copies.

2 Likes
15

You didn't edit the first post

16

Hello I am interested :smiling_face: in this I want more features
• video
• photo
• audio
•.custom pack of emoji fonts for reaction by long to
do

Can you please :pleading_face: do this

17

Sorry , i cant add this ,
This project is open source so you can try yourself,
or
get this extension

18

Hello, can you please release the latest version on github. Thanks

19

You can get from here , i have modified again a bit

CUI.aia (25.3 KB)
rename to aia to zip and extract

Here is aix
com.xtiger.chatui.aix (17.6 KB)

1 Like
20

Thanks, I was trying recycler view with it. Adding, image, video and audio. I am getting problem with gravity as both send and receive messages are showing on the same side in recycler view.

21

you can send file i will check if i get time

1 Like
22

Hello, How can I make a receive-message by another user system using this extension?

23

You can't do it using this extension

24

This extension is only for showing message , use other database like clouddb, firebase , supabase

1 Like