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

public playground warning

Browse Source
This commit is contained in:
Kyle Corbitt
2023-06-28 07:05:51 -07:00
parent f63c23f9fb
commit dc357d7611
6 changed files with 86 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/PublicPlaygroundWarning.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Flex, Icon, Link, Text } from "@chakra-ui/react";
import { BsExclamationTriangleFill } from "react-icons/bs";
import { env } from "~/env.mjs";
export default function PublicPlaygroundWarning() {
console.log(env);
if (!env.NEXT_PUBLIC_IS_PUBLIC_PLAYGROUND) return null;
return (
<Flex bgColor="red.600" color="whiteAlpha.900" p={2} align="center">
<Icon boxSize={4} mr={2} as={BsExclamationTriangleFill} />
<Text>
Warning: this is a public playground. Anyone can see, edit or delete your experiments. For
private use,{" "}
<Link textDecor="underline" href="https://github.com/corbt/prompt-lab">
run a local copy
</Link>
.
</Text>
</Flex>
);
}

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

@@ -16,6 +16,7 @@ import { RiFlaskLine } from "react-icons/ri";
import { useRouter } from "next/router";
import Link from "next/link";
import { useHandledAsyncCallback } from "~/utils/hooks";
import PublicPlaygroundWarning from "../PublicPlaygroundWarning";
const ExperimentLink = forwardRef<BoxProps & { active: boolean | undefined }, "a">(
({ children, active, ...props }, ref) => (
@@ -51,59 +52,62 @@ export default function AppShell(props: { children: React.ReactNode; title?: str
}, [createMutation, router]);
return (
<Flex minH="100vh">
<Head>
<title>{props.title ? `${props.title} | Prompt Lab` : "Prompt Lab"}</title>
</Head>
<Box bgColor="gray.100" flexShrink={0} width="220px" p={2}>
<VStack align="stretch">
<HStack spacing={0}>
<Image
src="/flask2.svg"
alt=""
w={6}
h={6}
// filter="drop-shadow(0 0 2px rgb(0 0 0 / 0.4))"
/>
<Heading size="md" p={2}>
Prompt Lab
</Heading>
</HStack>
<Box h="1px" bgColor="gray.400" />
<HStack align="center" spacing={2} p={2} pb={0}>
<Heading size="xs" textAlign="center">
Experiments
</Heading>
</HStack>
<VStack spacing={1} align="stretch">
{experiments?.data?.map((exp) => (
<VStack align="stretch" spacing={0} h="100vh">
<PublicPlaygroundWarning />
<Flex flex={1}>
<Head>
<title>{props.title ? `${props.title} | Prompt Lab` : "Prompt Lab"}</title>
</Head>
<Box bgColor="gray.100" flexShrink={0} width="220px" p={2}>
<VStack align="stretch">
<HStack spacing={0}>
<Image
src="/flask2.svg"
alt=""
w={6}
h={6}
// filter="drop-shadow(0 0 2px rgb(0 0 0 / 0.4))"
/>
<Heading size="md" p={2}>
Prompt Lab
</Heading>
</HStack>
<Box h="1px" bgColor="gray.400" />
<HStack align="center" spacing={2} p={2} pb={0}>
<Heading size="xs" textAlign="center">
Experiments
</Heading>
</HStack>
<VStack spacing={1} align="stretch">
{experiments?.data?.map((exp) => (
<ExperimentLink
key={exp.id}
as={Link}
active={exp.id === currentId}
href={{ pathname: "/experiments/[id]", query: { id: exp.id } }}
display="flex"
alignItems="center"
>
<Icon as={RiFlaskLine} boxSize={4} mr={2} />
{exp.label}
</ExperimentLink>
))}
<ExperimentLink
key={exp.id}
as={Link}
active={exp.id === currentId}
href={{ pathname: "/experiments/[id]", query: { id: exp.id } }}
onClick={createExperiment}
active={false}
display="flex"
alignItems="center"
>
<Icon as={RiFlaskLine} boxSize={4} mr={2} />
{exp.label}
<Icon as={BsPlusSquare} boxSize={4} mr={2} />
New Experiment
</ExperimentLink>
))}
<ExperimentLink
onClick={createExperiment}
active={false}
display="flex"
alignItems="center"
>
<Icon as={BsPlusSquare} boxSize={4} mr={2} />
New Experiment
</ExperimentLink>
</VStack>
</VStack>
</VStack>
</Box>
<Box flex={1} overflowX="auto" overflowY="auto" h="100vh">
{props.children}
</Box>
</Flex>
</Box>
<Box flex={1} overflowX="auto" overflowY="auto" h="100vh">
{props.children}
</Box>
</Flex>
</VStack>
);
}