alihan/OpenPipe-llm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

project menu updates

Browse Source
This commit is contained in:
Kyle Corbitt
2023-08-09 14:21:05 -07:00
parent 4feb3e5829
commit f6f04e537e
11 changed files with 92 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/components/nav/AppShell.tsx
View File

@@ -52,7 +52,9 @@ const NavSidebar = () => {
<>
<ProjectMenu />
<Divider />
<IconLink icon={IoStatsChartOutline} label="Logged Calls" href="/logged-calls" beta />
{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" />

185
app/src/components/nav/ProjectMenu.tsx
View File

@@ -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,113 +53,84 @@ 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}
pb={2}
fontSize="xs"
fontWeight="bold"
color="gray.500"
display={{ base: "none", md: "flex" }}
>
<VStack w="full" alignItems="flex-start" spacing={0}>
<Text
pl={2}
pb={2}
fontSize="xs"
fontWeight="bold"
color="gray.500"
display={{ base: "none", md: "flex" }}
>
PROJECT
</Text>
<NavSidebarOption activeHrefPattern="/home" disableHoverEffect={expandButtonHovered}>
<Link href="/logged-calls">
<HStack w="full" justifyContent="space-between">
<HStack>
<Flex
p={1}
borderRadius={4}
backgroundColor="orange.100"
minW={{ base: 10, md: 8 }}
minH={{ base: 10, md: 8 }}
m={{ base: 0, md: 1 }}
alignItems="center"
justifyContent="center"
onClick={sidebarExpanded ? undefined : openMenu}
>
<Text>{selectedOrg?.name[0]?.toUpperCase()}</Text>
</Flex>
<Text fontSize="sm" display={{ base: "none", md: "block" }} py={1}>
{selectedOrg?.name}
</Text>
</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"
PROJECT
</Text>
<NavSidebarOption>
<Popover
placement="bottom-start"
isOpen={popover.isOpen}
onClose={popover.onClose}
closeOnBlur
>
<VStack alignItems="flex-start" spacing={2} py={4} px={2}>
<Text color="gray.500" fontSize="xs" fontWeight="bold" pb={1}>
PROJECTS
</Text>
<Divider />
<VStack spacing={0} w="full">
{orgs?.map((org) => (
<ProjectOption
key={org.id}
org={org}
isActive={org.id === selectedOrgId}
onClose={popover.onClose}
/>
))}
</VStack>
<HStack
as={Button}
variant="ghost"
colorScheme="blue"
color="blue.400"
pr={8}
w="full"
onClick={createProject}
>
<Icon as={isLoading ? Spinner : BsPlus} boxSize={6} />
<Text>New project</Text>
<PopoverTrigger>
<HStack w="full" justifyContent="space-between" onClick={popover.onToggle}>
<Flex
p={1}
borderRadius={4}
backgroundColor="orange.100"
minW={{ base: 10, md: 8 }}
minH={{ base: 10, md: 8 }}
m={{ base: 0, md: 1 }}
alignItems="center"
justifyContent="center"
// 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>
</VStack>
</PopoverContent>
</Popover>
</>
</PopoverTrigger>
<PopoverContent
_focusVisible={{ boxShadow: "unset" }}
minW={0}
borderColor="blue.400"
w="full"
>
<VStack alignItems="flex-start" spacing={2} py={4} px={2}>
<Text color="gray.500" fontSize="xs" fontWeight="bold" pb={1}>
PROJECTS
</Text>
<Divider />
<VStack spacing={0} w="full">
{orgs?.map((org) => (
<ProjectOption
key={org.id}
org={org}
isActive={org.id === selectedOrgId}
onClose={popover.onClose}
/>
))}
</VStack>
<HStack
as={Button}
variant="ghost"
colorScheme="blue"
color="blue.400"
pr={8}
w="full"
onClick={createProject}
>
<Icon as={isLoading ? Spinner : BsPlus} boxSize={6} />
<Text>New project</Text>
</HStack>
</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

2
app/src/components/projectSettings/DeleteProjectDialog.tsx
View File

@@ -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]);

2
app/src/env.mjs
View File

@@ -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.

2
app/src/pages/index.tsx
View File

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

2
app/src/pages/project/settings/index.tsx
View File

@@ -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">

7
app/src/server/api/routers/dashboard.router.ts
View File

@@ -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 = [];

2
app/src/server/scripts/client-codegen.ts
View File

@@ -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 });

2
app/src/server/tasks/queryModel.task.ts
View File

@@ -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";

1
app/src/utils/useSocket.ts
View File

@@ -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);