ThemerChat Extension

A powerful, non-visible component for creating a highly customizable, feature-rich chat interface in MIT App Inventor.

Introduction

ThemerChat provides the logic and UI management to build a modern chat view inside a `VerticalArrangement`. It supports various message types, media playback, reactions, replies, and persistent history, all while being highly customizable through its properties and events.

Functions

`Initialize(VerticalArrangement arrangement)` void

Initializes the chat view within a designated VerticalArrangement. This must be called first.

`AddMessageFromJson(String jsonString)` int

Appends a single message from a JSON object string without reloading the entire view. This is the most efficient method for adding messages in real-time. Returns the new message's ID, or -1 if invalid.

`ReverseMessages(boolean newestAtBottom)` void

Sets the order for new messages. Pass true to add new messages to the bottom (default), or false to add them to the top.

`Send(String message, ...)` / `Receive(String message, ...)` void

Sends or receives a simple text message. Many other functions exist for specific message types like images, files, videos, etc.

`LoadChatHistoryFromJson(String jsonString)` void

Clears the current chat and rebuilds the entire view from a JSON string containing an array of message objects.

`GetFullChatHistoryAsJson()` String

Returns the complete chat history as a single JSON string.

`DeleteMessageById(int messageId)` void

Deletes a message based on its unique ID.

`ScrollToMessage(int messageId)` void

Scrolls to and temporarily highlights the specified message.

(See the full documentation for a complete list of all 40+ functions.)

Properties

ThemerChat offers extensive customization through its properties. You can control colors, fonts, sizes, and behaviors for nearly every element.

Colors: SentMessageColor, ReceivedTextColor, TimestampIconColor, ReplyLineColorSent, etc.
Sizing & Spacing: FontSize, AvatarSize, MessageCornerRadius, MessageMaxWidth, etc.
Behavior Toggles: ShowName, ShowProfileImage, EnableSwipeMotion, RoundProfileImage, etc.
Background: BackgroundColor, BackgroundImage, BackgroundGradient.

(See the full documentation for a complete list of all 40+ properties.)

Events

Listen for user interactions and component state changes with a rich set of events.

User Interaction: OnMessageClick, OnMessageLongClick, MessageSwiped, ProfilePicClicked, ImageClicked, FileClicked, VideoClicked, ReplyPreviewClicked.
Audio Playback: AudioStartPlaying, AudioPaused, AudioStopPlaying.
Scrolling: WhenReachTop, WhenReachBottom.
Selection: MessageSelected, SelectionCleared.

(See the full documentation for a complete list of all 20+ events.)

`AddMessageFromJson` Usage and Examples

The AddMessageFromJson function is the most important for building a real-time chat app. It efficiently adds a single new message without redrawing the entire screen. Below are JSON examples for each message type.

Text Message

{
  "type": "text",
  "text": "This is a **bold** and *italic* message.",
  "isSent": true,
  "timestamp": "11:50 AM",
  "name": "Mark",
  "avatarUrl": "https://example.com/mark.png"
}

Image with Text

{
  "type": "image_with_text",
  "text": "Check out this beautiful sunset!",
  "imagePath": "https://example.com/media/sunset.jpg",
  "isSent": false,
  "timestamp": "11:52 AM",
  "name": "Sarah",
  "avatarUrl": "https://example.com/sarah.png"
}

File Message

{
  "type": "file",
  "fileName": "Project_Report.pdf",
  "fileSize": "2.1 MB",
  "fileType": "PDF Document",
  "fileSource": "https://example.com/files/report.pdf",
  "isSent": true,
  "timestamp": "11:55 AM",
  "name": "Mark",
  "avatarUrl": "https://example.com/mark.png"
}

Voice Note Message

{
  "type": "voice",
  "audioPath": "https://example.com/audio/voicemail.mp3",
  "isSent": false,
  "timestamp": "11:58 AM",
  "name": "Sarah",
  "avatarUrl": "https://example.com/sarah.png"
}

Video Message

{
  "type": "video",
  "videoPath": "https://example.com/videos/vacation.mp4",
  "thumbnailUrl": "https://example.com/thumbs/vacation_thumb.jpg",
  "isSent": true,
  "timestamp": "12:01 PM",
  "name": "Mark",
  "avatarUrl": "https://example.com/mark.png"
}

Reply Message

{
  "type": "reply_text",
  "text": "I agree, that sunset was amazing!",
  "repliedToMessageId": 15,
  "isSent": false,
  "timestamp": "11:54 AM",
  "name": "Sarah",
  "avatarUrl": "https://example.com/sarah.png"
}

Developer Notes

For optimal performance, use AddMessageFromJson for incoming messages and LoadChatHistoryFromJson only for the initial setup. Ensure that asset paths (for images, fonts, etc.) are correct for both the Companion App and the compiled APK.