more robust sidebar layout
This commit is contained in:
Kyle Corbitt
@@ -1,5 +1,4 @@
|
||||
import { Button, type ButtonProps, Fade, HStack, Spinner, Icon } from "@chakra-ui/react";
|
||||
import { useState } from "react";
|
||||
import { Button, type ButtonProps, HStack, Spinner, Icon } from "@chakra-ui/react";
|
||||
import { BsPlus } from "react-icons/bs";
|
||||
import { api } from "~/utils/api";
|
||||
import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
|
||||
|
||||
@@ -3,7 +3,6 @@ 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 (
|
||||
@@ -12,7 +11,7 @@ export default function PublicPlaygroundWarning() {
|
||||
<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">
|
||||
<Link textDecor="underline" href="https://github.com/corbt/prompt-lab" target="_blank">
|
||||
run a local copy
|
||||
</Link>
|
||||
.
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Heading,
|
||||
VStack,
|
||||
Icon,
|
||||
@@ -8,13 +7,16 @@ import {
|
||||
type BoxProps,
|
||||
forwardRef,
|
||||
Image,
|
||||
Link,
|
||||
Grid,
|
||||
GridItem,
|
||||
} from "@chakra-ui/react";
|
||||
import Head from "next/head";
|
||||
import { api } from "~/utils/api";
|
||||
import { BsPlusSquare } from "react-icons/bs";
|
||||
import { BsGithub, BsPlusSquare, BsTwitter } from "react-icons/bs";
|
||||
import { RiFlaskLine } from "react-icons/ri";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import NextLink from "next/link";
|
||||
import { useHandledAsyncCallback } from "~/utils/hooks";
|
||||
import PublicPlaygroundWarning from "../PublicPlaygroundWarning";
|
||||
|
||||
@@ -38,7 +40,9 @@ const ExperimentLink = forwardRef<BoxProps & { active: boolean | undefined }, "a
|
||||
|
||||
ExperimentLink.displayName = "ExperimentLink";
|
||||
|
||||
export default function AppShell(props: { children: React.ReactNode; title?: string }) {
|
||||
const Separator = () => <Box h="1px" bgColor="gray.300" />;
|
||||
|
||||
const NavSidebar = () => {
|
||||
const experiments = api.experiments.list.useQuery();
|
||||
const router = useRouter();
|
||||
const utils = api.useContext();
|
||||
@@ -52,46 +56,19 @@ export default function AppShell(props: { children: React.ReactNode; title?: str
|
||||
}, [createMutation, router]);
|
||||
|
||||
return (
|
||||
<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">
|
||||
<VStack align="stretch" bgColor="gray.100" p={2} pb={0} height="100%">
|
||||
<HStack spacing={0}>
|
||||
<Image
|
||||
src="/flask2.svg"
|
||||
alt=""
|
||||
w={6}
|
||||
h={6}
|
||||
// filter="drop-shadow(0 0 2px rgb(0 0 0 / 0.4))"
|
||||
/>
|
||||
<Image src="/flask2.svg" alt="" w={6} h={6} />
|
||||
<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">
|
||||
<Separator />
|
||||
<VStack spacing={0} align="flex-start" overflowY="auto" flex={1}>
|
||||
<Heading size="xs" textAlign="center" p={2}>
|
||||
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>
|
||||
))}
|
||||
<VStack spacing={1} align="stretch" flex={1}>
|
||||
<ExperimentLink
|
||||
onClick={createExperiment}
|
||||
active={false}
|
||||
@@ -101,13 +78,66 @@ export default function AppShell(props: { children: React.ReactNode; title?: str
|
||||
<Icon as={BsPlusSquare} boxSize={4} mr={2} />
|
||||
New Experiment
|
||||
</ExperimentLink>
|
||||
|
||||
{experiments?.data?.map((exp) => (
|
||||
<ExperimentLink
|
||||
key={exp.id}
|
||||
as={NextLink}
|
||||
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>
|
||||
))}
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
<Box flex={1} overflowX="auto" overflowY="auto" h="100vh">
|
||||
{props.children}
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<Separator />
|
||||
<HStack align="center" justify="center" spacing={4} p={2}>
|
||||
<Link
|
||||
href="https://github.com/corbt/prompt-lab"
|
||||
target="_blank"
|
||||
color="gray.500"
|
||||
_hover={{ color: "gray.800" }}
|
||||
>
|
||||
<Icon as={BsGithub} boxSize={8} />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://twitter.com/corbtt"
|
||||
target="_blank"
|
||||
color="gray.500"
|
||||
_hover={{ color: "gray.800" }}
|
||||
>
|
||||
<Icon as={BsTwitter} boxSize={8} />
|
||||
</Link>
|
||||
</HStack>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default function AppShell(props: { children: React.ReactNode; title?: string }) {
|
||||
return (
|
||||
<Grid
|
||||
h="100vh"
|
||||
templateColumns="220px minmax(0, 1fr)"
|
||||
templateRows="max-content 1fr"
|
||||
templateAreas={'"warning warning"\n"sidebar main"'}
|
||||
>
|
||||
<Head>
|
||||
<title>{props.title ? `${props.title} | Prompt Lab` : "Prompt Lab"}</title>
|
||||
</Head>
|
||||
<GridItem area="warning">
|
||||
<PublicPlaygroundWarning />
|
||||
</GridItem>
|
||||
<GridItem area="sidebar" overflow="auto">
|
||||
<NavSidebar />
|
||||
</GridItem>
|
||||
<GridItem area="main" overflowY="auto">
|
||||
{props.children}
|
||||
</GridItem>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -104,23 +104,6 @@ export const autogenerateScenarioValues = async (
|
||||
return acc;
|
||||
}, {} as Record<string, { type: "string" }>);
|
||||
|
||||
console.log({
|
||||
model: "gpt-3.5-turbo-0613",
|
||||
messages,
|
||||
functions: [
|
||||
{
|
||||
name: "add_scenario",
|
||||
parameters: {
|
||||
type: "object",
|
||||
properties: variableProperties,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
function_call: { name: "add_scenario" },
|
||||
temperature: 0.5,
|
||||
});
|
||||
|
||||
try {
|
||||
const completion = await openai.createChatCompletion({
|
||||
model: "gpt-3.5-turbo-0613",
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
import { PrismaAdapter } from "@next-auth/prisma-adapter";
|
||||
import { type GetServerSidePropsContext } from "next";
|
||||
import {
|
||||
getServerSession,
|
||||
type NextAuthOptions,
|
||||
type DefaultSession,
|
||||
} from "next-auth";
|
||||
import DiscordProvider from "next-auth/providers/discord";
|
||||
import { env } from "~/env.mjs";
|
||||
import { getServerSession, type NextAuthOptions, type DefaultSession } from "next-auth";
|
||||
import { prisma } from "~/server/db";
|
||||
|
||||
/**
|
||||
@@ -47,10 +41,10 @@ export const authOptions: NextAuthOptions = {
|
||||
},
|
||||
adapter: PrismaAdapter(prisma),
|
||||
providers: [
|
||||
DiscordProvider({
|
||||
clientId: env.DISCORD_CLIENT_ID,
|
||||
clientSecret: env.DISCORD_CLIENT_SECRET,
|
||||
}),
|
||||
// DiscordProvider({
|
||||
// clientId: env.DISCORD_CLIENT_ID,
|
||||
// clientSecret: env.DISCORD_CLIENT_SECRET,
|
||||
// }),
|
||||
/**
|
||||
* ...add more providers here.
|
||||
*
|
||||
|
||||
Reference in New Issue
Block a user