Chat Bubble Mobile

• Real-time message display with optimistic UI updates

• Support for text, images, and file attachments (with customizable size limits)

• Message reactions with customizable emoji sets

• Reply functionality for threaded conversations

• Message editing and deletion capabilities

• Multiple pre-built themes (Light, Dark, and custom options)

• Highly customizable appearance

• Avatar display and user name rendering

• Timestamp formatting options

• Copy-to-clipboard functionality

• Multi-room chat support with automatic state management

plain text
Field Name          | Field Type      | Notes
--------------------|-----------------|------------------------------------------
Messages            | Message (list)  | List of all messages in this conversation
Participants        | User (list)     | List of users with access to this chat
Background          | image           | Optional background image (set on parent element)
Title               | text            | Chat name/title for display in chat list

plain text
Field Name          | Field Type      | Notes
--------------------|-----------------|------------------------------------------
text                | text            | Message content
user                | User            | Creator of the message
created_date        | date            | Auto-set on creation
image               | image           | Optional attachment
file                | file            | Optional file attachment
reply_to_message    | Message         | Optional reply reference
temp_id             | text            | Used for optimistic UI update

plain text
Field Name          | Field Type      | Notes
--------------------|-----------------|------------------------------------------
message             | Message         | Required reference
user                | User            | User who reacted
emoji               | text            | Emoji character(s)

1. In the Bubble editor, navigate to your mobile app page

2. Drag and drop the “Chat” element from the plugin section

3. Resize the element to fit your design (recommended: full screen or most of screen height)

⚠️

Important Note: All data properties should reference messages through the Chat data type. Here’s the correct pattern:

plain text
Search for Chat:filtered (unique id = selected_chat's unique id):each item's Messages :items until #300 (recommended maximum)

• Chat Room ID: Current conversation’s unique identifier (e.g., selected_chat's unique id)

• Message IDs:

plain text
Search for Chat:filtered
  unique id = selected_chat's unique id
:each item's Messages:each item's message_id:join with ,

• Message Texts:

plain text
Search for Chat:filtered
  unique id = selected_chat's unique id
:each item's Messages:each item's text:join with ,

• User IDs:

plain text
Search for Chat:filtered
  unique id = selected_chat's unique id
:each item's Messages:each item's user's unique id:join with ,

• User Names:

plain text
Search for Chat:filtered
  unique id = selected_chat's unique id
:each item's Messages:each item's user's name:join with ,

• User Images:

plain text
Search for Chat:filtered
  unique id = selected_chat's unique id
:each item's Messages:each item's user's profile_picture:join with ,

• Message Timestamps:



plain text
Search for Chat:filtered
  unique id = selected_chat's unique id
:each item's Messages:each item's created_date:extract UNIX:join with ,

• Message Images:

plain text
Search for Chat:filtered
  unique id = selected_chat's unique id
:each item's Messages:each item's image:join with ,

• Message Files:

plain text
Search for Chat:filtered
  unique id = selected_chat's unique id
:each item's Messages:each item's file:join with ,

• Message Temp IDs:

plain text
Search for Chat:filtered
  unique id = selected_chat's unique id
:each item's Messages:each item's temp_id:join with ,

• - Reply Texts:

plain text
Search for Chat:filtered unique id = selected_chat's unique id
:each item's Messages:each item's reply_to_message's text:join with ,

• Reply From Names:

plain text
Search for Chat:filtered unique id = selected_chat's unique id
:each item's Messages:each item's reply_to_message's user's name:join with ,

• Reactions - Emoji:

plain text
Do a search for Reactions:each item's emoji:join with ,

• Reactions - User ID:

plain text
Do a search for Reactions:each item's user's unique id:join with ,

• Reactions - Message ID:

plain text
Do a search for Reactions:each item's message's message_id:join with ,

• Current User ID:

plain text
Current User's unique id

1. Place Chat element inside a Group:
• Create a Group element on your page
• Place the Chat element inside this Group
• Set the Group’s width and height to fill the desired area

2. Set Group’s background image:
• In the Group’s appearance settings
• Set “Background style” to “Image”
• Set “Dynamic image” to:

plain text
selected_chat's Background

• Adjust “Image fit” setting (Cover, Contain, etc.) as needed

3. Adjust Chat transparency (optional):
• To see the background through the chat
• Set Chat’s “Background Color” to a semi-transparent value
• Example: rgba(255,255,255,0.95) for 95% white with 5% transparency

plain text
Group (Background image = selected_chat's Background)
  └── Chat Element (with semi-transparent background color)

plain text
https://[your-app-name].bubbleapps.io/fileupload

plain text
[root domain]/fileupload

plain text
1. Navigate to page with room_id parameter
2. Set Chat's "Chat Room ID" = Get data from page URL's room_id

plain text
1. Create a custom state on the page: current_room_id (text)
2. Set Chat's "Chat Room ID" = Page's current_room_id
3. When user selects a different chat room:
   - Set state current_room_id = New room's id
   (Chat will automatically clear and reload)

plain text
1. Add a field to User data type: current_chat_room (text)
2. Set Chat's "Chat Room ID" = Current User's current_chat_room
3. When switching rooms:
   - Make changes to Current User: current_chat_room = New room id

plain text
Chat (Container)
├── unique id (used as Chat Room ID)
├── Messages (list) → All messages in this conversation
├── Participants (list) → Users who can access
├── Title → Display name for chat
└── Background → Optional background image

1. Set the “Max File Size (MB)” property (default: 10MB)

2. Plugin automatically rejects files larger than this limit

3. User sees an alert with the file size and limit

4. Consider setting different limits for different user tiers

1. Set Theme = “None”

2. Customize each color property to match your brand

3. Save color values as option sets in Bubble for consistency

4. Use dynamic expressions to apply colors: Option BrandTheme's primary_color