# 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<br>
* **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*.<br>

    <figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/Y8DI8n0JDL9NUtfvgS4s/Screen%20Shot%202023-05-25%20at%2012.02.52%20PM.png" alt="" width="375"><figcaption></figcaption></figure>
  * **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*.

    <figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/k4hz1eTglIQaVI5ShPhj/Screen%20Shot%202023-05-25%20at%2011.47.44%20AM.png" alt="" width="375"><figcaption></figcaption></figure>
  * **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.<br>
* **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.&#x20;
  * **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://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/xKTA4IGIykdWSHAZlYS9/chat5.png)\
    \
    ![](https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/uhgNaOOokhM4p2XtcfH0/chat6.png)<br>
* 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.
*

```
<figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/kkTYS2aQOqb35Bu8eq6J/Screen%20Shot%202023-05-25%20at%202.18.04%20PM.png" alt="" width="334"><figcaption><p>List of attachments</p></figcaption></figure>
```

<figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/x8YkoPqhgwIq73SvyFzs/Screen%20Shot%202023-05-25%20at%202.15.50%20PM.png" alt=""><figcaption><p>This custom workflow sends the first attachment in RepeatingGroup file</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/fq47dOuuaKd2SSqgI7Gl/Screen%20Shot%202023-05-25%20at%202.17.09%20PM.png" alt=""><figcaption><p>This workflow step should be replaced by an API workflow to send multiple attachments</p></figcaption></figure>

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

<figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/arUWRSH9ijH1xza2uyL5/Screen%20Shot%202023-05-25%20at%202.27.30%20PM.png" alt=""><figcaption><p>API workflow setup</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/8TgQbXBHiyn7zeXbiXLc/Screen%20Shot%202023-05-25%20at%202.27.35%20PM.png" alt=""><figcaption><p>First workflow step</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/RUg9pisZoOoqQAzWTzR7/Screen%20Shot%202023-05-25%20at%202.27.40%20PM.png" alt=""><figcaption><p>Second workflow step</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/Bhlvy44frcfaqAPdOVlG/blobs/kLBye4TmoPQHELiUMsCK/Screen%20Shot%202023-05-25%20at%202.29.26%20PM.png" alt=""><figcaption><p>Updated workflow step on send message custom workflow</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas/canvas-library/page-templates/chat-messenger-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.