# Bottom Input Chat Widget
## Overview
This block 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 block is added to a page, it is placed within a group called **Blocks container 860 (do not rename)** on the page. This group contains the responsive settings for all blocks.
* **bottominput\_chat**\
This reusable element contains all of the logic and UI for threads and messages. It contains three main groups:
* **Group Main threads list\_thread**\
This group contains the list of threads that the current user is a part of. All of the threads are displayed in **RepeatingGroup t-Thread**. Clicking on **Group Main select thread\_thread** will hide **Group Main threads list\_thread** and show the messages for the selected thread.
* **Group Main message\_thread**\
This group displays all messages between users in a thread (in **RepeatingGroup t-Message**). You have two versions of message formats to choose from:
* **iMessage format**\
This is the default message format. To hide this style, select **Group Collapsible iMsg\_message** and uncheck the box for This element is visible on page load.\
\
* **Slack format**\
To use this style, hide **Group Collapsible iMsg\_message** and show **Group Collapsible Slack\_message** by checking the box for This element is visible on page load.\
Clicking on **Group Inner Back to threads** will navigate back to the list of threads.\
\
The user can enter a message in **MultilineInput message** and attach a file by clicking on the file clip icon. 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 - Website object** - This group stores the `website object` (e.g., app name, primary color, and etc.)
* **var - 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).
* **var - attached msg file** - This group temporarily stores a `file` that the current user attaches to a message (this group will be reset when the message is sent).
For more information on how to use hidden variables, click [here](https://app.gitbook.com/@airdev1/s/canvas/~/drafts/-M3h22ftTUg2MDpeUedQ/using-the-template/setup/features/hidden-variables-popup).
## How to set up
#### Customizing the chat layout by going to the b**ottominput\_chat reusable element**
* 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).
* Select a message format by showing **Group Collapsible iMsg\_message** or **Group Collapsible Slack\_message**. Hide the format that you are not using.
* \[Optional] Change the iMessage format colors. You can do this by locating the **HTML message styles** in the reusable element and updating the hex color codes. From-me styles will apply to all messages sent by you (current user). From-them styles will apply to all messages sent by the other user(s).
{% hint style="warning" %}
Make sure you save the original code before you change the hex color codes in **HTML message styles**. Sometimes it takes a few page loads to see the html updates on the page. You can preview the updated html styles by doing a hard refresh in the chrome browser (Command + Shift+ R).
{% endhint %}
#### Adding the bottom chat widget reusable to different pages in your app
{% hint style="info" %}
In Bubble, a reusable element is a way to build elements that you can replicate in more than one page without having to recreate them.
{% endhint %}
* On the page that you have your chat widget instance, set up a workflow to create a new thread and add the user(s) to the thread.
* For example, you might add a Message user button to the page and include the following workflows:\
* The **bottominput\_chat** instance has a data type of type `t-Thread`. To display all of the current user's threads that he or she is a part of, do not set a thread data source. However, if you want to display only one thread for a user (i.e, hiding the threads list view and only showing the thread conversation view, then you should pass a thread to the reusable instance).
---
# 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-pages-and-modules/modules/bottom-input-chat-widget.md?ask=
```
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.