Source Preview

import { Preview } from "@aiql.io/react";

import { AiqlProvider, Preview, useToken } from "@aiql.io/react";

function SourcePreview({ documentId }: { documentId: string }) {
  const { token, status } = useToken();
  if (status !== "ready" || !token) return null;

  return (
    <AiqlProvider token={token}>
      <Preview documentId={documentId} title="Source Preview" />
    </AiqlProvider>
  );
}

<Preview
  documentId={documentId}
  page={3}
  chunkId={chunkId}
  title="Source Preview"
/>

<Preview
  documentId={documentId}
  renderLoading={() => <p>Opening source preview…</p>}
  renderError={(message) => <p role="alert">{message}</p>}
  onLoad={() => console.log("iframe loaded")}
  onError={(message) => console.error(message)}
/>

<Preview
  documentId={documentId}
  className="my-source-preview"
  style={{ minHeight: 720, borderRadius: 16 }}
/>