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

prettier side panel

Browse Source
This commit is contained in:
Kyle Corbitt
2023-06-26 18:25:21 -07:00
parent 0646fc0ba3
commit cd9e7bce1a
5 changed files with 63 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/OutputsTable/NewScenarioButton.tsx
View File

@@ -27,7 +27,7 @@ export default function NewScenarioButton() {
onClick={onClick} onClick={onClick}
> >
<BsPlus size={24} /> <BsPlus size={24} />
New Scenario Add Scenario
</Button> </Button>
); );
} }

2
src/components/OutputsTable/NewVariantButton.tsx
View File

@@ -31,7 +31,7 @@ export default function NewVariantButton() {
minH={headerMinHeight} minH={headerMinHeight}
> >
<BsPlus size={24} /> <BsPlus size={24} />
New Variant Add Variant
</Button> </Button>
); );
} }

1
src/components/OutputsTable/ScenarioEditor.tsx
View File

@@ -143,6 +143,7 @@ export default function ScenarioEditor({
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
e.preventDefault(); e.preventDefault();
e.currentTarget.blur();
onSave(); onSave();
} }
}} }}

63
src/components/nav/AppShell.tsx
View File

@@ -1,4 +1,15 @@
import { Box, Flex, Stack, Button, Heading, VStack, Icon, HStack } from "@chakra-ui/react"; import {
Box,
Flex,
Stack,
Button,
Heading,
VStack,
Icon,
HStack,
BoxProps,
forwardRef,
} from "@chakra-ui/react";
import Head from "next/head"; import Head from "next/head";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import { BsPlusSquare } from "react-icons/bs"; import { BsPlusSquare } from "react-icons/bs";
@@ -7,24 +18,31 @@ import { useRouter } from "next/router";
import Link from "next/link"; import Link from "next/link";
import { useHandledAsyncCallback } from "~/utils/hooks"; import { useHandledAsyncCallback } from "~/utils/hooks";
const NavButton = ({ label, onClick }) => { const ExperimentLink = forwardRef<BoxProps & { active: boolean | undefined }, "a">(
return ( ({ children, active, ...props }, ref) => (
<Button <Box
variant="ghost" ref={ref}
bgColor={active ? "gray.200" : "transparent"}
_hover={{ bgColor: "gray.200" }}
borderRadius={4}
px={2}
py={2}
justifyContent="start" justifyContent="start"
onClick={onClick} cursor="pointer"
w="full" {...props}
leftIcon={<BsPlusSquare />}
> >
{label} {children}
</Button> </Box>
); )
}; );
ExperimentLink.displayName = "ExperimentLink";
export default function AppShell(props: { children: React.ReactNode; title?: string }) { export default function AppShell(props: { children: React.ReactNode; title?: string }) {
const experiments = api.experiments.list.useQuery(); const experiments = api.experiments.list.useQuery();
const router = useRouter(); const router = useRouter();
const utils = api.useContext(); const utils = api.useContext();
const currentId = router.query.id as string | undefined;
const createMutation = api.experiments.create.useMutation(); const createMutation = api.experiments.create.useMutation();
const [createExperiment] = useHandledAsyncCallback(async () => { const [createExperiment] = useHandledAsyncCallback(async () => {
@@ -38,25 +56,34 @@ export default function AppShell(props: { children: React.ReactNode; title?: str
<Head> <Head>
<title>{props.title ? `${props.title} | Prompt Lab` : "Prompt Lab"}</title> <title>{props.title ? `${props.title} | Prompt Lab` : "Prompt Lab"}</title>
</Head> </Head>
<Box bgColor="gray.100" flexShrink={0} width="220px" p={8}> <Box bgColor="gray.100" flexShrink={0} width="220px" p={4}>
<VStack align="start" spacing={4}> <VStack align="stretch">
<HStack align="center" spacing={2}> <HStack align="center" spacing={2}>
<Icon as={RiFlaskLine} boxSize={6} /> <Icon as={RiFlaskLine} boxSize={6} />
<Heading size="sm" textAlign="center"> <Heading size="sm" textAlign="center">
Experiments Experiments
</Heading> </Heading>
</HStack> </HStack>
<VStack spacing={0} align="stretch" ml={2}>
{experiments?.data?.map((exp) => ( {experiments?.data?.map((exp) => (
<Box <ExperimentLink
key={exp.id} key={exp.id}
as={Link} as={Link}
active={exp.id === currentId}
href={{ pathname: "/experiments/[id]", query: { id: exp.id } }} href={{ pathname: "/experiments/[id]", query: { id: exp.id } }}
justifyContent="start"
> >
{exp.label} {exp.label}
</Box> </ExperimentLink>
))} ))}
<NavButton label="New Experiment" onClick={createExperiment} /> <ExperimentLink onClick={createExperiment} active={false}>
<Icon as={BsPlusSquare} boxSize={4} mr={2} />
New Experiment
</ExperimentLink>
{/* <Box as={Button} leftIcon={<Icon as={BsPlusSquare} />} onClick={createExperiment}>
New Experiment
</Box> */}
{/* <NavButton label="New Experiment" onClick={createExperiment} /> */}
</VStack>
</VStack> </VStack>
</Box> </Box>
<Box flex={1} overflowX="auto" overflowY="auto" h="100vh"> <Box flex={1} overflowX="auto" overflowY="auto" h="100vh">

10
src/server/api/routers/experiments.router.ts
View File

@@ -47,7 +47,7 @@ export const experimentsRouter = createTRPCRouter({
messages: [ messages: [
{ {
role: "system", role: "system",
content: "count to three in Spanish...", content: "count to three in {{input}}...",
}, },
], ],
}, },
@@ -56,7 +56,13 @@ export const experimentsRouter = createTRPCRouter({
prisma.testScenario.create({ prisma.testScenario.create({
data: { data: {
experimentId: exp.id, experimentId: exp.id,
variableValues: {}, variableValues: { input: "Spanish" },
},
}),
prisma.templateVariable.create({
data: {
experimentId: exp.id,
label: "input",
}, },
}), }),
]); ]);