project menu updates

app/Dockerfile

@@ -23,6 +23,7 @@ ARG NEXT_PUBLIC_SOCKET_URL
 ARG NEXT_PUBLIC_HOST
 ARG NEXT_PUBLIC_SENTRY_DSN
 ARG SENTRY_AUTH_TOKEN
+ARG NEXT_PUBLIC_FF_SHOW_LOGGED_CALLS
 
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules

app/src/components/nav/AppShell.tsx

@@ -52,7 +52,9 @@ const NavSidebar = () => {
           <>
             <ProjectMenu />
             <Divider />
+            {env.NEXT_PUBLIC_FF_SHOW_LOGGED_CALLS && (
               <IconLink icon={IoStatsChartOutline} label="Logged Calls" href="/logged-calls" beta />
+            )}
             <IconLink icon={RiFlaskLine} label="Experiments" href="/experiments" />
             {env.NEXT_PUBLIC_SHOW_DATA && (
               <IconLink icon={RiDatabase2Line} label="Data" href="/data" />

app/src/components/nav/ProjectMenu.tsx

@@ -12,9 +12,8 @@ import {
   Button,
   useDisclosure,
   Spinner,
-  useBreakpointValue,
 } from "@chakra-ui/react";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { AiFillCaretDown } from "react-icons/ai";
 import { BsGear, BsPlus } from "react-icons/bs";
@@ -44,8 +43,6 @@ export default function ProjectMenu() {
 
   const { data: selectedOrg } = useSelectedOrg();
 
-  const [expandButtonHovered, setExpandButtonHovered] = useState(false);
-
   const popover = useDisclosure();
 
   const createMutation = api.organizations.create.useMutation();
@@ -56,24 +53,7 @@ export default function ProjectMenu() {
     await router.push({ pathname: "/project/settings" });
   }, [createMutation, router]);
 
-  const openMenu = useCallback(
-    (event: React.MouseEvent<Element, MouseEvent>) => {
-      event.preventDefault();
-      popover.onToggle();
-    },
-    [popover],
-  );
-
-  const sidebarExpanded = useBreakpointValue({ base: false, md: true });
-
   return (
-    <>
-      <Popover
-        placement="bottom-start"
-        isOpen={popover.isOpen}
-        onClose={popover.onClose}
-        closeOnBlur
-      >
     <VStack w="full" alignItems="flex-start" spacing={0}>
       <Text
         pl={2}
@@ -85,10 +65,15 @@ export default function ProjectMenu() {
       >
         PROJECT
       </Text>
-          <NavSidebarOption activeHrefPattern="/home" disableHoverEffect={expandButtonHovered}>
+      <NavSidebarOption>
-            <Link href="/logged-calls">
+        <Popover
-              <HStack w="full" justifyContent="space-between">
+          placement="bottom-start"
-                <HStack>
+          isOpen={popover.isOpen}
+          onClose={popover.onClose}
+          closeOnBlur
+        >
+          <PopoverTrigger>
+            <HStack w="full" justifyContent="space-between" onClick={popover.onToggle}>
               <Flex
                 p={1}
                 borderRadius={4}
@@ -98,39 +83,21 @@ export default function ProjectMenu() {
                 m={{ base: 0, md: 1 }}
                 alignItems="center"
                 justifyContent="center"
-                    onClick={sidebarExpanded ? undefined : openMenu}
+                // onClick={sidebarExpanded ? undefined : openMenu}
               >
                 <Text>{selectedOrg?.name[0]?.toUpperCase()}</Text>
               </Flex>
               <Text fontSize="sm" display={{ base: "none", md: "block" }} py={1}>
                 {selectedOrg?.name}
               </Text>
+              <Icon as={AiFillCaretDown} boxSize={3} size="xs" color="gray.500" mr={2} />
             </HStack>
-                <PopoverTrigger>
-                  <IconButton
-                    aria-label="Open Project Menu"
-                    icon={<Icon as={AiFillCaretDown} boxSize={3} />}
-                    size="xs"
-                    colorScheme="gray"
-                    color="gray.500"
-                    variant="ghost"
-                    mr={2}
-                    borderRadius={4}
-                    onMouseEnter={() => setExpandButtonHovered(true)}
-                    onMouseLeave={() => setExpandButtonHovered(false)}
-                    _hover={{ bgColor: isActive ? "gray.300" : "gray.200", transitionDelay: 0 }}
-                    onClick={openMenu}
-                  />
           </PopoverTrigger>
-              </HStack>
-            </Link>
-          </NavSidebarOption>
-        </VStack>
           <PopoverContent
             _focusVisible={{ boxShadow: "unset" }}
             minW={0}
             borderColor="blue.400"
-          w="auto"
+            w="full"
           >
             <VStack alignItems="flex-start" spacing={2} py={4} px={2}>
               <Text color="gray.500" fontSize="xs" fontWeight="bold" pb={1}>
@@ -162,7 +129,8 @@ export default function ProjectMenu() {
             </VStack>
           </PopoverContent>
         </Popover>
-    </>
+      </NavSidebarOption>
+    </VStack>
   );
 }
 
@@ -180,7 +148,7 @@ const ProjectOption = ({
   return (
     <HStack
       as={Link}
-      href="/logged-calls"
+      href="/experiments"
       onClick={() => {
         setSelectedOrgId(org.id);
         onClose();
@@ -190,7 +158,6 @@ const ProjectOption = ({
       bgColor={isActive ? "gray.100" : "transparent"}
       _hover={gearHovered ? undefined : { bgColor: "gray.200", textDecoration: "none" }}
       p={2}
-      borderRadius={4}
     >
       <Text>{org.name}</Text>
       <IconButton

app/src/components/projectSettings/DeleteProjectDialog.tsx

@@ -36,7 +36,7 @@ export const DeleteProjectDialog = ({
     if (!selectedOrg.data?.id) return;
     await deleteMutation.mutateAsync({ id: selectedOrg.data.id });
     await utils.organizations.list.invalidate();
-    await router.push({ pathname: "/logged-calls" });
+    await router.push({ pathname: "/experiments" });
     onClose();
   }, [deleteMutation, selectedOrg, router]);
 

app/src/env.mjs

@@ -34,6 +34,7 @@ export const env = createEnv({
     NEXT_PUBLIC_HOST: z.string().url().default("http://localhost:3000"),
     NEXT_PUBLIC_SENTRY_DSN: z.string().optional(),
     NEXT_PUBLIC_SHOW_DATA: z.string().optional(),
+    NEXT_PUBLIC_FF_SHOW_LOGGED_CALLS: z.string().optional(),
   },
 
   /**
@@ -56,6 +57,7 @@ export const env = createEnv({
     NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
     SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
     OPENPIPE_API_KEY: process.env.OPENPIPE_API_KEY,
+    NEXT_PUBLIC_FF_SHOW_LOGGED_CALLS: process.env.NEXT_PUBLIC_FF_SHOW_LOGGED_CALLS,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.

app/src/pages/index.tsx

@@ -4,7 +4,7 @@ import { type GetServerSideProps } from "next";
 export const getServerSideProps: GetServerSideProps = async () => {
   return {
     redirect: {
-      destination: "/logged-calls",
+      destination: "/experiments",
       permanent: false,
     },
   };

app/src/pages/project/settings/index.tsx

@@ -111,7 +111,7 @@ export default function Settings() {
                 your code.
               </Text>
             </VStack>
-            <CopiableCode code={`OPENPIPE_API_KEY=${apiKey}`} />
+            <CopiableCode code={apiKey} />
             <Divider />
             {selectedOrg?.personalOrgUserId ? (
               <VStack alignItems="flex-start">

app/src/server/api/routers/dashboard.router.ts

@@ -34,9 +34,12 @@ export const dashboardRouter = createTRPCRouter({
 
       let originalDataIndex = periods.length - 1;
       // *SLAMS DOWN GLASS OF WHISKEY* timezones, amirite?
-      let dayToMatch = dayjs(input.startDate || new Date())
+      let dayToMatch = dayjs(input.startDate || new Date());
       // Ensure that the initial date we're matching against is never before the first period
-      if (periods[originalDataIndex] && dayToMatch.isBefore(periods[originalDataIndex]?.period, "day")) {
+      if (
+        periods[originalDataIndex] &&
+        dayToMatch.isBefore(periods[originalDataIndex]?.period, "day")
+      ) {
         dayToMatch = dayjs(periods[originalDataIndex]?.period);
       }
       const backfilledPeriods: typeof periods = [];

app/src/server/scripts/client-codegen.ts

@@ -16,7 +16,7 @@ fs.writeFileSync(schemaPath, JSON.stringify(openApiDocument, null, 2), "utf-8");
 
 console.log("Generating Typescript client");
 
-const tsClientPath = path.join(clientLibsPath, "js/codegen");
+const tsClientPath = path.join(clientLibsPath, "typescript/codegen");
 
 fs.rmSync(tsClientPath, { recursive: true, force: true });
 

app/src/server/tasks/queryModel.task.ts

@@ -1,5 +1,5 @@
 import { type Prisma } from "@prisma/client";
-import { JsonValue, type JsonObject } from "type-fest";
+import { type JsonValue, type JsonObject } from "type-fest";
 import modelProviders from "~/modelProviders/modelProviders";
 import { prisma } from "~/server/db";
 import { wsConnection } from "~/utils/wsConnection";

app/src/utils/useSocket.ts

@@ -11,7 +11,6 @@ export default function useSocket<T>(channel?: string | null) {
   useEffect(() => {
     if (!channel) return;
 
-    console.log("connecting to channel", channel);
     // Create websocket connection
     socketRef.current = io(url);