SessionPage.tsx•1.77 kB
import { useLoaderData, useNavigate, useParams } from "react-router";
import invariant from "tiny-invariant";
import {
Dialog,
ErrorBoundary,
Modal,
ModalOverlay,
} from "@phoenix/components";
import {
DialogCloseButton,
DialogContent,
DialogHeader,
DialogTitle,
DialogTitleExtra,
} from "@phoenix/components/dialog";
import { useProjectRootPath } from "@phoenix/hooks/useProjectRootPath";
import { sessionLoader } from "@phoenix/pages/trace/sessionLoader";
import { SessionDetails } from "./SessionDetails";
/**
* A component that shows the details of a session
*/
export function SessionPage() {
const loaderData = useLoaderData<typeof sessionLoader>();
invariant(loaderData, "loaderData is required");
const { sessionId } = useParams();
const navigate = useNavigate();
const { rootPath, tab } = useProjectRootPath();
return (
<ModalOverlay
isOpen
onOpenChange={(isOpen) => {
if (!isOpen) {
navigate(`${rootPath}/${tab}`);
}
}}
>
<Modal
variant="slideover"
size="fullscreen"
onOpenChange={(isOpen) => {
if (!isOpen) {
navigate(`${rootPath}/${tab}`);
}
}}
>
<Dialog>
<DialogContent>
<DialogHeader>
<DialogTitle>
Session ID: {loaderData.session?.sessionId ?? "--"}
</DialogTitle>
<DialogTitleExtra>
<DialogCloseButton slot="close" />
</DialogTitleExtra>
</DialogHeader>
<ErrorBoundary>
<SessionDetails sessionId={sessionId as string} />
</ErrorBoundary>
</DialogContent>
</Dialog>
</Modal>
</ModalOverlay>
);
}