Chat

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

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

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

  return (
    <AiqlProvider token={token}>
      <Chat inquiryId={inquiryId} title="Explore" />
    </AiqlProvider>
  );
}

function NewChat() {
  const { token, status } = useToken();
  const [inquiryId] = useState(() => crypto.randomUUID());
  if (status !== "ready" || !token) return null;

  return (
    <AiqlProvider token={token}>
      <Chat inquiryId={inquiryId} title="Explore" />
    </AiqlProvider>
  );
}

<AiqlProvider
  token={token}
  onArtifactOpen={(event) => {
    if (event.type === "canvas") router.push(`/brainstorm/${event.id}`);
    if (event.type === "dashboard") router.push(`/analyze/${event.id}`);
    if (event.type === "presentation") router.push(`/present/${event.id}`);
  }}
>
  <Chat inquiryId={inquiryId} />
</AiqlProvider>

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

<Chat
  inquiryId={inquiryId}
  className="my-chat"
  style={{ minHeight: 720, borderRadius: 16 }}
/>