# Chat Messenger Page ## Overview This page allows a user to manage multiple conversation threads with different users. A user can click into one of the threads and send or view messages/attachments. ## Structure When this page is added to your app, it will come with two main groups: **Group Main left threads panel**\ The top portion of this panel includes a search input where a user can search for keywords in all thread messages. Clicking on **Group Open thread actions (action)** will open a focus group with the option to view all archived threads. Clicking on **Group Create new thread (action)** will start a new thread, allowing the user to invite other users to the thread and send a message or attachment. The bottom portion of the panel includes two repeating groups: **RepeatingGroup threads** for displaying all threads that the user is a part of and **RepeatingGroup messages (search)** for displaying thread messages that contain the searched keyword(s). To display vague timestamps for the messages, we use the free plugin **Relative Time with Moment.js** by Louis Adekoya. **Group Main message\_thread**\ This group displays all messages between users in a thread in **RepeatingGroup thread messages**. * **Group Inner chat options\_thread** includes a few actions: * **Multidropdown invite user to chat** to invite users to a new thread * **Group Edit thread (action)** that will open a focus group with the option to archive or delete the thread * On mobile, a "<" chevron to return to the list of threads view
* **Group Main Messages container** contains **RepeatingGroup thread messages**. You have two message formats to choose from: * **iMessage format (default)**\ To hide this message format, select **Group Main iMessage style**, go to the Layout tab and uncheck the box for *This element is visible on page load*.

* **Slack format**\ To show this message format, select **Group Main slack style**, go to the Layout tab and check the box for *This element is visible on page load*.

* **Group Main message input** includes the UI to compose a message, attach a file, and view file attachments. When an attachment is added, it will show underneath the message input. Clicking on it will open the attachment in a new tab for previewing. Clicking on **Group Inner delete file** will delete the attachment and allow you upload a new attachment.
* **Popup Hidden Variables**\ This popup includes various variables that are referenced in workflows or conditionals on the page. * **var - ⚙️ app settings** - This group stores the `App settings` (e.g., app name, primary color, and etc.) * **var - dummy variable** - This is a placeholder group for users to add their own variable. * **var - ⚙️ current page width <1100?** - This group evaluates when the viewport view is less than 1100. It controls the display settings for when to show the tablet and mobile layout of the chat messenger. * **var - ⚙️ start new thread?** - This controls the visibility rule of **Group Inner new thread** to indicate a new thread is being created by the user. * **var - ⚙️ current chat thread** - This group stores the `thread` that the user is currently viewing. * **var - user viewing chat** - This group stores the `user` information (*Current User* who is viewing the thread and messages). There is a temporary conditional statement that you will need to remove as part of the page setup. * **var - ⚙️ view archived chats?** - This group controls the visibility rule for displaying the archived chats UI. * **var - ⚙️ chat thread exists between users** - This group checks for existing threads between the users. When the *Current User* is starting a new thread and inviting other users to the thread, if a thread between the users already exists then pressing the send button will send the message to the existing thread between the users. If a thread between the users doesn't already exist then it will compose a new thread. * **var - ⚙️ users list to check in thread** - This group stores the list of users when composing a new thread (referenced in **var - ⚙️ chat thread exists between users**). For more information on how to use hidden variables, click [here](https://docs.airdev.co/canvas/canvas-functionality/data-and-workflows#using-the-hidden-variables-popup). ## How to set up ### Customizing the message format * In **Popup Hidden Variables**, update **var - user viewing chat's** data source to include any filters for the user who is viewing the chart * You would want to keep the data source for this group here to `Current user` and remove the conditional statement (Do a search for users:first item is a placeholder for demo purposes).\ ![](https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2FggBde9lxGl72JfuYwOqP%2Fchat5.png?alt=media\&token=a743b988-b893-430c-b1c1-69368fd9e033)\ \ ![](https://2198874353-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9ObHjihY6fQvg2Mkyk5w%2Fuploads%2F8LyXEXOI7mMQd9HIoY9s%2Fchat6.png?alt=media\&token=e01574fb-e8ec-49b2-950f-4cbf1e05d1ab)
* Select a message format by showing **Group Main iMessage style** or **Group Main slack style**. Hide the format that you are not using. ### \[Optional] Enable functionality to send multiple attachments * By default, users can attach multiple attachments when composing a message. However, the workflows are currently set up to only send the first attachment in the attachments list (**RepeatingGroup file**). To send multiple attachments when you click **Group Main send msg button\_thread (action)**, it would be best to use an API workflow. Your Bubble app would need to be on a paid Bubble plan to use API workflows. * ```

```

This custom workflow sends the first attachment in RepeatingGroup file

This workflow step should be replaced by an API workflow to send multiple attachments

The updated API workflow for sending multiple attachments should look similar to this: