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.

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

Returns

The accumulated raw Ably messages in arrival order. Older history messages loaded later are appended after the live messages already present, so the array is not strictly chronological. The hook empties the 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 Ably SDK reference documents the full type.

Example

A toggleable debug drawer that streams every raw message arriving on the channel alongside the rendered conversation.

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>
      )}
    </>
  );
}