How to use Fluid Chat (Pro):
1. Database Setup Ensure your Message data type has these fields:

  - Content (text)

  - Type (text: "text", "image", or "audio")

  - Media (file/image)

  - Is Read (yes/no)

  - Creator (User)

  - Creation Date (Date)

2. The Main Chat Element Place Fluid Chat on your page. IMPORTANT: Go to the Layout tab and UNCHECK "Fit height to content". Give it a fixed height or 100% height. The scroll won't work otherwise. Map the data sources (Search for Messages...). Ensure all lists follow the same sort order (Date Ascending).

3. Read Receipts (Blue Ticks) The plugin triggers a "Messages Viewed" event when the user opens the chat or scrolls to new messages. Use this workflow event to Make changes to a list of things -> Mark unread messages from the other user as Is Read = yes.

4. Audio Recorder & Image Uploader These are separate button elements so you can place them anywhere in your input group. Audio: When the user stops recording, the plugin uploads the file to S3 and triggers "Upload Complete". Use this workflow to Create a new Message (Type="audio", Media=Saved URL). Images: Same logic. The plugin supports multi-selection. It returns a List of URLs. You can run a Backend Workflow on this list to create multiple messages instantly.

5. Typing Indicator Create a boolean logic in Bubble (e.g., if Conversation Last Active > Current Time - 5sec). Pass this Yes/No value to the Show Typing? field.

6. Interactivity

Step 1: Handling Message Deletion
Go to the Workflow tab.

  - Add an event: Elements > Long Press Triggered -> When last_action is deleted.

  - Add an action: Data (Things) > Delete thing.

  - Thing to delete: Do a search for Messages where Unique ID = Fluid Chat's Selected Message ID (:first item).

  - Condition (Only When): Fluid Chat's Last Action is "delete".

Step 2: Handling Message Editing

- Add an event: Elements > Long Press Triggered -> When last_action is edited add an action: Element Actions > Show (target your "Edit Popup").

  - Display Data: Display the message data in the popup using Fluid Chat's Selected Message ID.

  - Condition (Only When): Fluid Chat's Last Action is "edit".

Step 3: Handling Reactions
When a user clicks an emoji, the plugin returns a string like react:❤️. You need to parse this.

  - Add an event: Elements > Long Press Triggered -> When       last_action is react:

  - Add an action: Data (Things) > Make changes to thing.

  - Thing to change: Search for the message using Fluid Chat's Selected Message ID.

  - Field to change (Reactions):

  - Logic depends on your database structure.

  - To show the emojis on the message you need to create a string and every item of the list should be formatted like this: "👍|2,❤️|1" (emoji|count,emoji|count) and the delimiter is ||

         


⚠️ IMPORTANT: Breaking Changes for V2.0 Please update your Element fields as follows to ensure the new features work:

A. Message Alignment (Left vs Right)

Current User ID: Pass the Current User's Unique ID.

Message Creator ID List: Pass the list of creators.

Expression: Search for Messages :each item's Creator's Unique ID

B. Message Types (Prevents bugs with empty types)

We changed this input from a "List of Texts" to a single "Text" string to handle empty values correctly.

Field: Message Type (Text)

Expression: Search for Messages :formatted as text

In the formatting window:

Content to show: This Message's Message Type

Delimiter: , (comma)

C. Read Receipts (Blue Ticks Logic)

We now calculate read status based on how many people read the message.

Field: Read By Count List (Text)

Expression: Search for Messages :formatted as text

In the formatting window:

Content to show: This Message's Read By :count

Delimiter: , (comma)

Field: Required Read Count (Number)

Set this to the number of people who need to read the message for it to turn blue.

For 1v1 Chat: Set to 2 (Me + The other person).

For Groups: Set to Search for Chat's Users :count.