useCreateView

useCreateView creates a new View over the same conversation tree as the session's default view, then subscribes to it the same way useView does. Each created view has its own branch selections and pagination state. The view is closed automatically on unmount or when the session reference changes.

Use this hook when you need two independent renderings of the same conversation, for example, a split-pane diff between two regenerate siblings, or a secondary panel that pages older history without affecting the main scroll position.

JavaScript

import { useCreateView } from '@ably/ai-transport/react';

function Compare() {
  const left = useCreateView({ limit: 30 });
  const right = useCreateView({ limit: 30 });

  return (
    <SplitPane
      left={<MessageList messages={left.messages} />}
      right={<MessageList messages={right.messages} />}
    />
  );
}

This hook must be used within a ClientSessionProvider unless session is supplied explicitly.

Parameters

sessionoptionalClientSession<TInput, TOutput, TProjection, TMessage>

A client session to create a view from. Defaults to the nearest provider. Pass null to defer creation.

limitoptionalNumber

Maximum number of older Runs to reveal per page. When provided, auto-loads the first page on mount.

skipoptionalBoolean

When true, skip view creation and return an empty handle immediately.

Returns

Returns the same ViewHandle shape as useView, backed by a freshly created view.

messagesCodecMessage<TMessage>[]

The visible messages along the selected branch, each paired with its codecMessageId. Read the domain object from each entry's message field.

hasOlderBoolean

Whether there are older Runs that can be revealed.

loadingBoolean

Whether a page load is currently in progress.

loadErrorAbly.ErrorInfo or Undefined

Set when the most recent loadOlder call failed.

loadOlder() => Promise<void>

Reveal older Runs.

runOf(codecMessageId) => RunInfo | undefined

Look up the RunInfo for the Run that owns a codecMessageId.

run(runId) => RunInfo | undefined

Direct lookup by Run id.

runs() => RunInfo[]

Snapshot of the visible Runs along the selected branch, in chronological order.

branchSelection(codecMessageId) => BranchSelection<TMessage>

Resolve the BranchSelection bundle anchored at codecMessageId.

selectSibling(codecMessageId, index) => void

Select a sibling at the branch point anchored at codecMessageId.

send(events, options?) => Promise<ActiveRun>

Send one or more TInputs on the channel and fire a POST. Wrap a domain message via codec.createUserMessage (or build the { kind: 'user-message', message } literal) to send a fresh user message.

regenerate(messageId, options?) => Promise<ActiveRun>

Regenerate an assistant message, using this view's branch.

edit(messageId, inputs, options?) => Promise<ActiveRun>

Edit a user message, forking from this view's branch.

See useView for the field-by-field behaviour of each property. Every method behaves the same way, scoped to the view this hook created.

Example

A side-by-side comparison panel. Two useCreateView calls give the user independent branch selection for each pane while both views observe the same underlying conversation tree.

JavaScript

import { useCreateView } from '@ably/ai-transport/react';

function Compare({ messageId }: { messageId: string }) {
  const leftView = useCreateView({ limit: 30 });
  const rightView = useCreateView({ limit: 30 });

  const leftBranch = leftView.branchSelection(messageId);
  const rightBranch = rightView.branchSelection(messageId);

  return (
    <div className="grid grid-cols-2">
      <div>
        <BranchPicker
          selection={leftBranch}
          onSelect={(i) => leftView.selectSibling(messageId, i)}
        />
        <MessageList messages={leftView.messages} />
      </div>
      <div>
        <BranchPicker
          selection={rightBranch}
          onSelect={(i) => rightView.selectSibling(messageId, i)}
        />
        <MessageList messages={rightView.messages} />
      </div>
    </div>
  );
}