# useMessages hook

the `useMessages` hook is used to interface with messages belonging to a [Chat](/react-sdk/conversation-chat.md).

{% code title="add to imports section" %}

```javascript
import { useMessages } from '@minchat/react';
```

{% endcode %}

## Get Messages

Messages retrieved in a conversation are paginated to 25 messages at a time.

```javascript
const {
         messages,
         loading,
         error,
         paginate,
         paginateLoading,
         sendMessage,
         updateMessage,
         deleteMessage

      } = useMessages(chat)
```

<table><thead><tr><th width="205">Field</th><th width="135.33333333333331">Type</th><th>Description</th></tr></thead><tbody><tr><td>messages</td><td><a href="/pages/kHDmp1Ige5MDBB56e34a"><code>Message[]</code></a></td><td>the list of messages returned. this is automatically updated whenever a new message is received for the current conversation.</td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Shows the state of querying the messages, used to update your UI to show loading state.</td></tr><tr><td><code>error</code></td><td><code>object</code></td><td>an error object that is defined if an error occured while trying to query the messages.</td></tr><tr><td><code>sendMessage</code></td><td><code>function</code></td><td>function called to send a message to the conversation.</td></tr><tr><td><code>updateMessage</code></td><td><code>function</code></td><td>function called to update a specific message in a conversation.</td></tr><tr><td><code>deleteMessage</code></td><td><code>function</code></td><td>function called to delete a message in a conversation.</td></tr><tr><td><code>paginate</code></td><td><code>function</code></td><td>function called to get the next 25 messages, the messages are automatically added to the begining of the messages array.</td></tr><tr><td><code>paginateLoading</code></td><td><code>boolean</code></td><td>Shows the state of a paginated query for messages, used to update your UI to show pagination state. is true when the paginate function is called and is false when messages are returned.</td></tr></tbody></table>

## Send Message

To send a message, call the `sendMessage(...)` function from `useMessages` hook.

```javascript
const message = {
    text: "Hello World!"
}

const callback = (data)=> { /**      */}

sendMessage(message, callback) 
```

New messages received are automatically added to the `messages` variable of `useMessages(...)`

**`Message` Parameters**

<table><thead><tr><th width="140">Field</th><th width="149">Type</th><th width="98">State</th><th>Description</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td><em>optional</em></td><td>the text of the message</td></tr><tr><td><code>file</code></td><td><code>File</code></td><td><em>optional</em></td><td>upload a file as an attachment</td></tr><tr><td><code>metadata</code></td><td><code>json object</code></td><td>optional</td><td>an optional key value pair for any additional message information such as custom font size, font type, or <code>JSON</code> formatted string. accepts string,number and boolean values</td></tr></tbody></table>

**`Callback`**&#x20;

<table><thead><tr><th width="125">Field</th><th width="133">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>data</code></td><td><a href="/pages/kHDmp1Ige5MDBB56e34a"><code>Message</code></a></td><td>the message that was sent</td></tr></tbody></table>

## Update Message

To update a message, call the `updateMessage(...)` function from `useMessages` hook.

```javascript
const message = {
    text: "Updated Hello World!"
}

const callback = (data)=> { /**    
    do something
 */}

updateMessage(messageId, message, callback) 
```

messages are automatically updated in the `messages` variable of `useMessages(...)`

**Parameters**

<table><thead><tr><th width="148">Field</th><th width="149">Type</th><th width="98">State</th><th>Description</th></tr></thead><tbody><tr><td><code>messageId</code></td><td><code>string</code></td><td><em>required</em></td><td>the id of the message to be updated</td></tr></tbody></table>

**`Message` Parameters**

<table><thead><tr><th width="140">Field</th><th width="149">Type</th><th width="98">State</th><th>Description</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>string</code></td><td><em>optional</em></td><td>the text of the message</td></tr><tr><td><code>file</code></td><td><code>File</code></td><td><em>optional</em></td><td>upload a file as an attachment</td></tr><tr><td><code>metadata</code></td><td><code>json object</code></td><td>optional</td><td>an optional key value pair for any additional message information such as custom font size, font type, or <code>JSON</code> formatted string. accepts string,number and boolean values</td></tr></tbody></table>

**Callback**

<table><thead><tr><th width="125">Field</th><th width="133">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>data</code></td><td><a href="/pages/kHDmp1Ige5MDBB56e34a"><code>Message</code></a></td><td>the message that was updated</td></tr></tbody></table>

## Delete Message

To delete a message, call the `deleteMessage(...)` function from `useMessages` hook.

<pre class="language-javascript"><code class="lang-javascript"><strong>deleteMessage(messageId)  
</strong></code></pre>

**Parameters**

<table><thead><tr><th width="151">Field</th><th width="107">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>messageId</code></td><td><code>string</code></td><td>the Id of the message to delete</td></tr></tbody></table>


---

# 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.minchat.io/react-sdk/usemessages-hook.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.