Dashboard

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

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

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

  return (
    <AiqlProvider token={token}>
      <Dashboard dashboardId={dashboardId} title="Analyze" />
    </AiqlProvider>
  );
}

import { useRef } from "react";
import type { EmbedChatHandle } from "@aiql.io/react";

const ref = useRef<EmbedChatHandle>(null);

<Dashboard
  ref={ref}
  dashboardId={dashboardId}
  onReady={() => ref.current?.sendMessage("Add a revenue card")}
/>

<Dashboard
  dashboardId={dashboardId}
  renderLoading={() => <p>Opening dashboard…</p>}
  renderError={(message) => <p role="alert">{message}</p>}
  onLoad={() => console.log("iframe loaded")}
  onError={(message) => console.error(message)}
/>

<Dashboard
  dashboardId={dashboardId}
  className="my-dashboard"
  style={{ minHeight: 720, borderRadius: 16 }}
/>