[Free] Simple ChatBox aix Extension

[KenMorales]

ChatBox

A simple, customizable chat UI for App Inventor apps, featuring avatars, timestamps, and various bubble/button styles.

Blocks Overview

1. InitializeChatBox

• Purpose: Sets up the chat interface inside a specified Arrangement component.
• Parameter: layoutComponent (Arrangement).
• Usage: Call once, typically on Screen.Initialize.

2. SendMessage

• Purpose: Adds a message to the chat display.
• Parameters:
  • message (text): The message content.
  • isSentByMe (boolean): true for sender (right-aligned), false for receiver (left-aligned).
  • avatarUrl (text): URL for avatar image (leave empty for no avatar).

3. ChatBoxInitialized (Event)

• Purpose: Triggers when the chatbox UI is ready.
• Usage: Use for actions after setup, e.g., showing a welcome message.

4. OnMessageSent (Event)

• Purpose: Triggers when the user taps the built-in Send button.
• Parameter: message (text): The message just sent by the user.
• Usage: Use to send message to a database/server.

Designer Properties (Customization)

Avatar

• DefaultSenderAvatarUrl (text): Default avatar URL for your messages.
  

  

• DefaultReceiverAvatarUrl (text): Default avatar URL for received messages.
  

  

• AvatarSize (number): Size of avatar images (DP).
  

Bubble Colors

• SenderBubbleColor (color): Background color for your messages.
  

  

• ReceiverBubbleColor (color): Background color for received messages.
  

  

Bubble Text Colors

• SenderTextColor (color): Text color for your messages.
  

  

• ReceiverTextColor (color): Text color for received messages.
  

  

Timestamps

• TimestampColor (color): Color of the timestamp text.
  

  

• TimestampTextSize (number): Size of the timestamp text (SP).
  

  

Bubble Shapes (New!)

• BubbleShape (text): Shape of message bubbles. Use:

  • "Rectangle"
    

    

  • "Rounded"
    

    

  • "TopRounded"
    

    

  • "BottomRounded"
    

    

  • "Pill"
    

    

• BubbleCornerRadius (number): Amount of rounding for shapes (DP).

Send Button (New!)

• SendButtonText (text): Text displayed on the Send button.
  

  

• SendButtonTextColor (color): Color of the Send button text.
  

  

• SendButtonBackgroundColor (color): Background color of the Send button.
  

  

Sample Block

Sample Output

If you find this extension useful and wish to support further development, you can support us via: PayPal.Me

License: Developed by Kenneth Mark Morales using Fast builder.
You can download the aix extension provided bellow.
ChatBox aix extension Download Link:
Version: 1
com.kenmor.chatbox.aix (18.6 KB)
aia file:
chatboxtest.aia (1.8 MB)
Version: 2
com.kenmor.chatbox.aix (26.3 KB)

[Peter]

Hi, why don't you post your aix here instead of on your Google Drive?

[KenMorales]

Hi @Peter , Am I allowed to upload files here? okay I’ll just post them right here instead. Thanks for being understanding.

[Prem_Gupta]

Awesome, i want to know, is it RecyclerView or other?

[KenMorales]

Hi, @Prem_Gupta I dont't use recyclerview, instead i use Scrollview and LinearLayout inside a ScrollView.

[KenMorales]

ChatBox App Inventor Extension Documentation Update
Version: 2
This update to the ChatBox extension introduces robust message interaction features, better message management, and a shift towards utilizing App Inventor's native input components for greater flexibility.

I. Important Change: External Input Components Required

To provide developers with more control over the user input interface and align with App Inventor's design philosophy, the internal TextBox and Send Button functionality has been removed from the ChatBox extension.

Use App Inventor's built-in UI components (e.g., TextBox for input and Button for sending) in your App Inventor Designer to create the message input area. You will then connect these components to the ChatBox's SendMessage function through your App Inventor blocks. This allows for greater customization of your input field's appearance and behavior.

II. New Features & Enhancements

(Continuing from previous documentation)

A. Message Interaction Events

The extension now allows your app to respond to user gestures on individual message bubbles. The messageIndex in these events refers to the current, dynamic position of the message in the chat, which is automatically updated even after deletions.

• MessageLongPressed(messageIndex, messageText, isSentByMe)
  

  
  • Purpose: Triggers when a user performs a long press (press and hold) gesture on any message bubble in the chat. This is ideal for implementing context-sensitive actions like "copy message," "delete message," or "forward message."
  • Parameters:
    • messageIndex (number): The current 0-based index of the message that was long-pressed.
    • messageText (text): The full text content of the long-pressed message.
    • isSentByMe (boolean): True if the long-pressed message was sent by the current user, False if it was received.
  • Usage Example: Use this event to display a pop-up menu or confirm deletion.

• MessageSwipedLeft(messageIndex, messageText, isSentByMe)
  

  
  • Purpose: Triggers when a user swipes a message bubble from right to left (common for actions like "Reply" or "Delete" in some chat apps).
  • Parameters: (Same as MessageLongPressed)
    • messageIndex (number): The current 0-based index of the message that was swiped.
    • messageText (text): The full text content of the swiped message.
    • isSentByMe (boolean): True if the swiped message was sent by the current user, False if it was received.
  • Usage Example: Implement a quick reply action or a specific message status change.

• MessageSwipedRight(messageIndex, messageText, isSentByMe)
  

  
  • Purpose: Triggers when a user swipes a message bubble from left to right (can be used for "Mark as Read," "Info," or other custom actions).
  • Parameters: (Same as MessageLongPressed)
    • messageIndex (number): The current 0-based index of the message that was swiped.
    • messageText (text): The full text content of the swiped message.
    • isSentByMe (boolean): True if the swiped message was sent by the current user, False if it was received.
  • Usage Example: Provide quick access to message details or an alternative action.

B. Message Management Functions

These functions allow you to programmatically control the messages displayed in the chat.

• DeleteMessage(messageIndex)
  

  
  • Purpose: Removes a specific message from the chat display based on its current index.
  • Parameters:
    • messageIndex (number): The 0-based index of the message you wish to delete.
  • Important Note: When a message is deleted, the indices of all subsequent messages in the chat list will automatically shift down by one. Always use the messageIndex provided by the MessageLongPressed, MessageSwipedLeft, or MessageSwipedRight events for accurate deletion after a user interaction.

• ClearAllMessages()
  

  • Purpose: Removes all messages currently displayed within the chatbox, clearing the entire conversation history from the UI.
  • Parameters: None.

C. Message Management Events

These events provide feedback on the outcome of message management operations.

• MessageDeleted(deletedIndex)
  

  • Purpose: Fired immediately after a message has been successfully removed from the chat using the DeleteMessage function.
  • Parameters:
    • deletedIndex (number): The index of the message that was just deleted.
  • Usage Example: Confirm to the user that the message has been removed, or update any external data structures your app might be using.

• AllMessagesCleared()
  

  • Purpose: Fired after all messages have been successfully cleared from the chat using the ClearAllMessages function.
  • Parameters: None.
  • Usage Example: Reset other UI elements or data related to the chat session.

Version: 2
com.kenmor.chatbox.aix (26.3 KB)

[Prem_Gupta]

@KenMorales

i use Scrollview and LinearLayout inside a ScrollView.

ohh nice but i think RecyclerView is the best option for handling large amount of data,

• RecyclerView only keeps views for visible items and reuses them as you scroll. This drastically reduces memory usage and improves performance, especially with long conversations.

[KenMorales]

Thank you for suggestion. Maybe I'll try the recyclerview later for advance features purposes, basically this is what i have for now for my small project, like talk to a.i project and record the conversation for visual purpose.