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}
>
<BsPlus size={24} />
New Scenario
Add Scenario
</Button>
);
}

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

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

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

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

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