Read a session channel in React

"use client";

import { useSessionStream } from "@trigger.dev/react-hooks";

export function SessionViewer({
  sessionId,
  accessToken,
}: {
  sessionId: string;
  accessToken: string;
}) {
  const { records, error } = useSessionStream<string>(sessionId, { accessToken });

  if (error) return <div>Error: {error.message}</div>;

  return <div>{records.join("")}</div>;
}

const { records, lastEventId, lastControl, error, stop } = useSessionStream(sessionId, {
  accessToken: "pk_...", // Required: public access token with read:sessions:{id}
  io: "out", // Optional: "out" (default) or "in"
  from: "beginning", // Optional: "beginning" (default) or "latest"
  maxRecords: 100, // Optional: keep only the most recent N records (default: unbounded)
  lastEventId: undefined, // Optional: resume cursor
  timeoutInSeconds: 60, // Optional: close after this long with no new data (default: 60)
  throttleInMs: 16, // Optional: throttle record updates (default: 16ms)
  onRecords: (batch) => {}, // Optional: callback per throttled batch, each with its event id
  onControl: (event) => {}, // Optional: callback for control records (e.g. turn-complete)
});

const { records } = useSessionStream<{ url: string }>(sessionId, {
  accessToken,
  io: "out",
  from: "latest", // start at the latest record, then live updates
  maxRecords: 1, // keep just the most recent record
});

const cursorKey = `session-cursor:${sessionId}:out`; // scope the key to this session and channel
const saved = localStorage.getItem(cursorKey) ?? undefined;

const { records, lastEventId } = useSessionStream<string>(sessionId, {
  accessToken,
  lastEventId: saved,
  onRecords: (batch) => localStorage.setItem(cursorKey, batch.at(-1)!.id),
});

const { records, lastControl } = useSessionStream<string>(sessionId, {
  accessToken,
  onControl: (event) => {
    if (event.subtype === "turn-complete") {
      console.log("The turn is complete");
    }
  },
});