useAblyMessages
useAblyMessages returns the accumulated raw Ably.InboundMessage objects that the session has observed on its channel, in arrival order. It subscribes to the session's tree 'ably-message' event and appends every incoming message to internal state.
Use this hook for debugging, inspection panels, or wire-level visualisations that need to see the raw Ably payload rather than the decoded codec events.
1
2
3
4
5
6
7
8
9
10
11
import { useAblyMessages } from '@ably/ai-transport/react';
function WireInspector() {
const messages = useAblyMessages();
return (
<pre>
{messages.map((m) => JSON.stringify(m, null, 2)).join('\n')}
</pre>
);
}This hook must be used within a ClientSessionProvider unless session is supplied explicitly.
Parameters
sessionoptionalClientSession<TInput, TOutput, TProjection, TMessage>skipoptionalBooleantrue, skip all subscriptions and return an empty array.Returns
Ably.InboundMessage[]The accumulated raw Ably messages in chronological order. Resets to an empty array when the resolved session changes.
Each InboundMessage carries the wire fields you would see from channel.subscribe: name, data, serial, clientId, extras, timestamp, and so on. The full type lives in the Ably SDK reference.
Example
A toggleable debug drawer that streams every raw message arriving on the channel alongside the rendered conversation.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { useState } from 'react';
import { useAblyMessages, useView } from '@ably/ai-transport/react';
function ChatWithDebug() {
const [showDebug, setShowDebug] = useState(false);
const { messages } = useView({ limit: 30 });
const rawMessages = useAblyMessages({ skip: !showDebug });
return (
<>
<ConversationView messages={messages} />
<button onClick={() => setShowDebug((s) => !s)}>
{showDebug ? 'Hide' : 'Show'} wire log
</button>
{showDebug && (
<aside>
{rawMessages.map((m, i) => (
<pre key={i}>{JSON.stringify(m, null, 2)}</pre>
))}
</aside>
)}
</>
);
}