@arizeai/phoenix-mcp

import { useEffect } from "react";
import { css } from "@emotion/react";

import { Flex } from "@phoenix/components";
import { useViewer } from "@phoenix/contexts/ViewerContext";

import { ViewerAPIKeys } from "./ViewerAPIKeys";
import { ViewerPreferences } from "./ViewerPreferences";
import { ViewerProfileCard } from "./ViewerProfileCard";

const profilePageCSS = css`
  overflow-y: auto;
  height: 100%;
`;

const profilePageInnerCSS = css`
  padding: var(--global-dimension-size-400);
  max-width: 800px;
  min-width: 500px;
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
`;

export function ProfilePage() {
  const { viewer, refetchViewer } = useViewer();

  useEffect(() => {
    refetchViewer();
  }, [refetchViewer]);

  return (
    <main css={profilePageCSS}>
      <div css={profilePageInnerCSS}>
        <Flex direction="column" gap="size-200">
          {viewer && <ViewerProfileCard />}
          <ViewerPreferences />
          {viewer && <ViewerAPIKeys viewer={viewer} />}
        </Flex>
      </div>
    </main>
  );
}