> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

Messaging is one of the core features of CometChat. We've thoughtfully created APIs to help you send and retrieve message history.

1. Users can send messages to a user or group.
2. No limit to the number of unread messages per user.
3. No limit to the number of unread messages per group.
4. Soft deleted messages will be available in the database but permanently deleted messages will not be available.

<Info>
  **Properties and constraints:**

  1. The maximum File size that can be uploaded per message is 100MB.
  2. For a group with more than 300 members, the conversations and unread message counts are not updated.
  3. Delivery and read receipts will be sent for a group of up to 300 online users.
  4. Data is an arbitrary JSON structure. It accepts utf8mb4. It can have any user defined properties. but the below properties have meaning for CometChat: text, attachments, custome\_data, metadata\
     Note: The attachment size is separate. Here, the attachment is only the attachment properties (such as URL, size, etc.). The size must not exceed 10KB for the data object.
  5. A message can have up to 25 tags with 100 characters per tag. The tags can be in any language. The character set must be UTF8mb4.
</Info>

The following table lists the properties that the Message API supports.

| Parameters | Type   | Description                    |
| ---------- | ------ | ------------------------------ |
| `appId`    | String | Unique identifier for the app  |
| `apiKey`   | String | Authentication key for the app |
| `region`   | String | Geographic region for the app  |
| `baseUrl`  | String | Base URL for API requests      |

## Interactive Messages:

## Element List:

The following mentioned elements will come inside `formFields` key mentioned above:

## 1. LabelElement

<CodeGroup>
  ```json JSON theme={null}
  {
      "elementType": "label",
      "elementId": "",
      "text": "Something to show" 
  }
  ```
</CodeGroup>

| JSON Property | Type   | Description                                         |
| ------------- | ------ | --------------------------------------------------- |
| text          | String | Required, text to be displayed in the label element |

## 2. TextInputElement

<CodeGroup>
  ```json JSON theme={null}
  {
      "elementType": "textInput",
      "elementId": "",
      "optional": false,
      "label": "name",
      "maxLines": 5, 
      "placeholder": {
          "text": "Enter digits"
      }
  }
  ```
</CodeGroup>

| JSON Property | Type    | Description                                                         | Default Value |
| ------------- | ------- | ------------------------------------------------------------------- | ------------- |
| optional      | boolean | Optional, will be validated when doing the submission based on this | true          |

## 3. ButtonElement

<CodeGroup>
  ```javascript JSON theme={null}
  {
      "elementType": "button",
      "elementId": "",
      "buttonText": "Press it", 
  		"disableAfterInteracted": true
      "action": {
  			"url" : ""
  			"method": ""  
  			"payload": payload; 
  			"headers":"headers";
  			"dataKey":"";  
        "type": "apiAction",
        "url": "https//abc.com", 
        "payload": "", 
        "headers": ""
      }
  }
  ```
</CodeGroup>

### a. apiAction

<CodeGroup>
  ```json JSON theme={null}
  {
      "method": "",
      "payload": {},
      "headers": {},
      "dataKey": "",
      "actionType": "apiAction",
      "url": "https//abc.com"
  }
  ```
</CodeGroup>

### b. urlNavigation(both fields are mandatory)

<CodeGroup>
  ```json JSON theme={null}
  {
      "url": "<VALID URL>",
      "actionType": "urlNavigation"
  }
  ```
</CodeGroup>

| JSON Property | Type   | Description | Default Value |
| ------------- | ------ | ----------- | ------------- |
| url           | String | Required,   |               |
| actionType    | String | required    | urlNavigation |

### c. DeepLinking(both fields are mandatory)

<CodeGroup>
  ```json JSON theme={null}
  {
      "url": "<VALID URL>",
      "actionType": "deepLinkAction"
  }
  ```
</CodeGroup>

| JSON Property | Type   | Description | Default Value  |
| ------------- | ------ | ----------- | -------------- |
| url           | String | Required,   |                |
| actionType    | String | required    | deepLinkAction |

### d. CustomAction (only actionType is mandatory):

<CodeGroup>
  ```json JSON theme={null}
  {
      "actionType": "customAction"
  }
  ```
</CodeGroup>

## 4. CheckboxElement

<CodeGroup>
  ```json JSON theme={null}
  {
      "elementType": "checkbox",
      "elementId": "",
      "optional": false,
      "label": "Select multiple",
      "defaultValue": [
          "",
          ""
      ],
      "options": [
          {
              "value": "option1",
              "label": "This is option 1"
          },
          {
              "value": "option1",
              "label": "This is option 1"
          }
      ]
  }
  ```
</CodeGroup>

| JSON Property | Type            | Description | Default Value |
| ------------- | --------------- | ----------- | ------------- |
| optional      | boolean         | optional,   | true          |
| label         | String          | required    |               |
| defaultValue  | Array of string | optional    |               |

## 5. DropdownElement/SpinnerElement(Android)

<CodeGroup>
  ```json JSON theme={null}
  {
      "elementType": "dropdown",
      "elementId": "",
      "optional": true,
      "label": "Select multiple",
      "defaultValue": "option1", 
      "options": [
          {
              "value": "option1", 
              "label": "This is option 1" 
          },
          {
              "value": "option1", 
              "label": "This is option 1" 
          }
      ]
  }
  ```
</CodeGroup>

## 6. RadioButtonElement

<CodeGroup>
  ```json JSON theme={null}
  {
      "elementType": "radio", 
      "elementId": "",
      "optional": false,
      "label": "Select multiple",
      "defaultValue": "option1",
      "options": [
          {
              "value": "option1",
              "label": "This is option 1"
          },
          {
              "value": "option2",
              "label": "This is option 1"
          }
      ]
  }
  ```
</CodeGroup>

## 7. SingleSelectElement

<CodeGroup>
  ```json JSON theme={null}
  {
      "elementType": "singleSelect",
      "elementId": "",
      "optional": false,
      "label": "Select multiple", 
      "defaultValue": "option1",
      "options": [
          {
              "value": "option1", 
              "label": "This is option 1"
          },
          {
              "value": "option2", 
              "label": "This is option 1"
          }
      ]
  }
  ```
</CodeGroup>

## 8. DateTimeElement

<CodeGroup>
  ```json JSON theme={null}
  {
      "elementType": "dateTime",
      "elementId": "element1",
      "optional": false,
      "label": "Contact Number",
      "defaultValue": false,
      "dateTimeFormat": "Y-m-d H:i:ss",
      "mode": "date",
      "timezoneCode": "Asia/Kolkata",
      "from": "2024-06-23",
      "to": "2024-06-24"
  }
  ```
</CodeGroup>