settings drawer

src/components/OutputsTable/EditEvaluations.tsx

@@ -0,0 +1,44 @@
+import { Text, Heading, Stack } from "@chakra-ui/react";
+import { useState } from "react";
+import { api } from "~/utils/api";
+import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
+import { useStore } from "~/utils/store";
+
+export default function EditEvaluations() {
+  const experiment = useExperiment();
+  const vars =
+    api.templateVars.list.useQuery({ experimentId: experiment.data?.id ?? "" }).data ?? [];
+
+  const [newVariable, setNewVariable] = useState<string>("");
+  const newVarIsValid = newVariable.length > 0 && !vars.map((v) => v.label).includes(newVariable);
+
+  const utils = api.useContext();
+  const addVarMutation = api.templateVars.create.useMutation();
+  const [onAddVar] = useHandledAsyncCallback(async () => {
+    if (!experiment.data?.id) return;
+    if (!newVarIsValid) return;
+    await addVarMutation.mutateAsync({
+      experimentId: experiment.data.id,
+      label: newVariable,
+    });
+    await utils.templateVars.list.invalidate();
+    setNewVariable("");
+  }, [addVarMutation, experiment.data?.id, newVarIsValid, newVariable]);
+
+  const deleteMutation = api.templateVars.delete.useMutation();
+  const [onDeleteVar] = useHandledAsyncCallback(async (id: string) => {
+    await deleteMutation.mutateAsync({ id });
+    await utils.templateVars.list.invalidate();
+  }, []);
+
+  const closeDrawer = useStore((state) => state.closeDrawer);
+
+  return (
+    <Stack>
+      <Heading size="sm">Edit Evaluations</Heading>
+      <Stack spacing={2} pt={2}>
+        <Text fontSize="sm"></Text>
+      </Stack>
+    </Stack>
+  );
+}

src/components/OutputsTable/EditScenarioVars.tsx

@@ -0,0 +1,104 @@
+import { Text, Button, HStack, Heading, Icon, Input, Stack, Code } from "@chakra-ui/react";
+import { useState } from "react";
+import { BsCheck, BsX } from "react-icons/bs";
+import { api } from "~/utils/api";
+import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
+
+export default function EditScenarioVars() {
+  const experiment = useExperiment();
+  const vars =
+    api.templateVars.list.useQuery({ experimentId: experiment.data?.id ?? "" }).data ?? [];
+
+  const [newVariable, setNewVariable] = useState<string>("");
+  const newVarIsValid = newVariable.length > 0 && !vars.map((v) => v.label).includes(newVariable);
+
+  const utils = api.useContext();
+  const addVarMutation = api.templateVars.create.useMutation();
+  const [onAddVar] = useHandledAsyncCallback(async () => {
+    if (!experiment.data?.id) return;
+    if (!newVarIsValid) return;
+    await addVarMutation.mutateAsync({
+      experimentId: experiment.data.id,
+      label: newVariable,
+    });
+    await utils.templateVars.list.invalidate();
+    setNewVariable("");
+  }, [addVarMutation, experiment.data?.id, newVarIsValid, newVariable]);
+
+  const deleteMutation = api.templateVars.delete.useMutation();
+  const [onDeleteVar] = useHandledAsyncCallback(async (id: string) => {
+    await deleteMutation.mutateAsync({ id });
+    await utils.templateVars.list.invalidate();
+  }, []);
+
+  return (
+    <Stack>
+      <Heading size="sm">Edit Scenario Variables</Heading>
+      <Stack spacing={2} pt={2}>
+        <Text fontSize="sm">
+          Scenario variables can be used in your prompt variants as well as evaluations. Reference
+          them using <Code>{"{{curly_braces}}"}</Code>.
+        </Text>
+        <HStack spacing={0}>
+          <Input
+            placeholder="Add Scenario Variable"
+            size="sm"
+            borderTopRadius={0}
+            borderRightRadius={0}
+            value={newVariable}
+            onChange={(e) => setNewVariable(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                onAddVar();
+              }
+              // If the user types a space, replace it with an underscore
+              if (e.key === " ") {
+                e.preventDefault();
+                setNewVariable((v) => v + "_");
+              }
+            }}
+          />
+          <Button
+            size="xs"
+            height="100%"
+            borderLeftRadius={0}
+            isDisabled={!newVarIsValid}
+            onClick={onAddVar}
+          >
+            <Icon as={BsCheck} boxSize={8} />
+          </Button>
+        </HStack>
+
+        <HStack spacing={2} py={4} wrap="wrap">
+          {vars.map((variable) => (
+            <HStack
+              key={variable.id}
+              spacing={0}
+              bgColor="blue.100"
+              color="blue.600"
+              pl={2}
+              pr={0}
+              fontWeight="bold"
+            >
+              <Text fontSize="sm" flex={1}>
+                {variable.label}
+              </Text>
+              <Button
+                size="xs"
+                variant="ghost"
+                colorScheme="blue"
+                p="unset"
+                minW="unset"
+                px="unset"
+                onClick={() => onDeleteVar(variable.id)}
+              >
+                <Icon as={BsX} boxSize={6} color="blue.800" />
+              </Button>
+            </HStack>
+          ))}
+        </HStack>
+      </Stack>
+    </Stack>
+  );
+}

src/components/OutputsTable/OutputCell.tsx

@@ -114,7 +114,8 @@ export default function OutputCell({
     );
   }
 
-  const contentToDisplay = message?.content ?? streamedContent ?? JSON.stringify(output.data?.output);
+  const contentToDisplay =
+    message?.content ?? streamedContent ?? JSON.stringify(output.data?.output);
 
   return (
     <Flex w="100%" h="100%" direction="column" justifyContent="space-between" whiteSpace="pre-wrap">

src/components/OutputsTable/SettingsDrawer.tsx

@@ -0,0 +1,32 @@
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  Heading,
+} from "@chakra-ui/react";
+import { useStore } from "~/utils/store";
+import EditScenarioVars from "./EditScenarioVars";
+
+export default function SettingsDrawer() {
+  const isOpen = useStore((state) => state.drawerOpen);
+  const closeDrawer = useStore((state) => state.closeDrawer);
+
+  return (
+    <Drawer isOpen={isOpen} placement="right" onClose={closeDrawer} size="md">
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader>
+          <Heading size="md">Settings</Heading>
+        </DrawerHeader>
+        <DrawerBody>
+          <EditScenarioVars />
+          {/* <EditEvaluations /> */}
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+}

src/components/OutputsTable/index.tsx

@@ -1,11 +1,20 @@
-import { Box, Grid, GridItem, Heading, type SystemStyleObject } from "@chakra-ui/react";
-import ScenarioHeader from "~/server/ScenarioHeader";
+import {
+  Button,
+  Grid,
+  GridItem,
+  HStack,
+  Heading,
+  type SystemStyleObject,
+} from "@chakra-ui/react";
 import { api } from "~/utils/api";
 import NewScenarioButton from "./NewScenarioButton";
 import NewVariantButton from "./NewVariantButton";
 import ScenarioRow from "./ScenarioRow";
 import VariantConfigEditor from "./VariantConfigEditor";
 import VariantHeader from "./VariantHeader";
+import { cellPadding } from "../constants";
+import { BsPencil } from "react-icons/bs";
+import { useStore } from "~/utils/store";
 
 const stickyHeaderStyle: SystemStyleObject = {
   position: "sticky",
@@ -19,6 +28,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
     { experimentId: experimentId as string },
     { enabled: !!experimentId }
   );
+  const openDrawer = useStore((s) => s.openDrawer);
 
   const scenarios = api.scenarios.list.useQuery(
     { experimentId: experimentId as string },
@@ -42,8 +52,28 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
         },
       }}
     >
-      <GridItem display="flex" alignItems="flex-end" rowSpan={2}>
-        <ScenarioHeader />
+      <GridItem
+        display="flex"
+        alignItems="flex-end"
+        rowSpan={2}
+        px={cellPadding.x}
+        py={cellPadding.y}
+      >
+        <HStack w="100%">
+          <Heading size="sm" fontWeight="bold" flex={1}>
+            Scenario
+          </Heading>
+          <Button
+            size="xs"
+            variant="ghost"
+            color="gray.500"
+            aria-label="Edit"
+            leftIcon={<BsPencil />}
+            onClick={openDrawer}
+          >
+            Edit Vars
+          </Button>
+        </HStack>
       </GridItem>
 
       {variants.data.map((variant) => (