Allow user to create a version of their current prompt with a new model (#58)

* Add dropdown header for model switching

* Allow variant duplication

* Fix prettier

* Use env variable to restrict prisma logs

* Fix env.mjs

* Remove unnecessary scroll bar from function call output

* Properly record when 404 error occurs in queryLLM task

* Add SelectedModelInfo in SelectModelModal

* Add react-select

* Calculate new prompt after switching model

* Send newly selected model with creation request

* Get new prompt construction function back from GPT-4

* Fix prettier

* Fix prettier

src/components/OutputsTable/OutputCell/OutputCell.tsx

@@ -106,7 +106,7 @@ export default function OutputCell({
         h="100%"
         fontSize="xs"
         flexWrap="wrap"
-        overflowX="auto"
+        overflowX="hidden"
         justifyContent="space-between"
       >
         <VStack w="full" flex={1} spacing={0}>

src/components/OutputsTable/VariantHeader.tsx

@@ -1,171 +0,0 @@
-import { useState, type DragEvent } from "react";
-import { type PromptVariant } from "./types";
-import { api } from "~/utils/api";
-import { useHandledAsyncCallback } from "~/utils/hooks";
-import {
-  Button,
-  HStack,
-  Icon,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  MenuDivider,
-  Text,
-  GridItem,
-  Spinner,
-} from "@chakra-ui/react"; // Changed here
-import { BsFillTrashFill, BsGear } from "react-icons/bs";
-import { FaRegClone } from "react-icons/fa";
-import { RiDraggable, RiExchangeFundsFill } from "react-icons/ri";
-import { cellPadding, headerMinHeight } from "../constants";
-import AutoResizeTextArea from "../AutoResizeTextArea";
-import { stickyHeaderStyle } from "./styles";
-
-export default function VariantHeader(props: { variant: PromptVariant; canHide: boolean }) {
-  const utils = api.useContext();
-  const [isDragTarget, setIsDragTarget] = useState(false);
-  const [isInputHovered, setIsInputHovered] = useState(false);
-  const [label, setLabel] = useState(props.variant.label);
-
-  const updateMutation = api.promptVariants.update.useMutation();
-  const [onSaveLabel] = useHandledAsyncCallback(async () => {
-    if (label && label !== props.variant.label) {
-      await updateMutation.mutateAsync({
-        id: props.variant.id,
-        updates: { label: label },
-      });
-    }
-  }, [updateMutation, props.variant.id, props.variant.label, label]);
-
-  const hideMutation = api.promptVariants.hide.useMutation();
-  const [onHide] = useHandledAsyncCallback(async () => {
-    await hideMutation.mutateAsync({
-      id: props.variant.id,
-    });
-    await utils.promptVariants.list.invalidate();
-  }, [hideMutation, props.variant.id]);
-
-  const reorderMutation = api.promptVariants.reorder.useMutation();
-  const [onReorder] = useHandledAsyncCallback(
-    async (e: DragEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      setIsDragTarget(false);
-      const draggedId = e.dataTransfer.getData("text/plain");
-      const droppedId = props.variant.id;
-      if (!draggedId || !droppedId || draggedId === droppedId) return;
-      await reorderMutation.mutateAsync({
-        draggedId,
-        droppedId,
-      });
-      await utils.promptVariants.list.invalidate();
-    },
-    [reorderMutation, props.variant.id],
-  );
-
-  const [menuOpen, setMenuOpen] = useState(false);
-  const duplicateMutation = api.promptVariants.create.useMutation();
-
-  const [duplicateVariant, duplicationInProgress] = useHandledAsyncCallback(async () => {
-    await duplicateMutation.mutateAsync({
-      experimentId: props.variant.experimentId,
-      variantId: props.variant.id,
-    });
-    await utils.promptVariants.list.invalidate();
-  }, [duplicateMutation, props.variant.experimentId, props.variant.id]);
-
-  return (
-    <GridItem
-      padding={0}
-      sx={{
-        ...stickyHeaderStyle,
-        zIndex: menuOpen ? "dropdown" : stickyHeaderStyle.zIndex,
-      }}
-      borderTopWidth={1}
-    >
-      <HStack
-        spacing={4}
-        alignItems="flex-start"
-        minH={headerMinHeight}
-        draggable={!isInputHovered}
-        onDragStart={(e) => {
-          e.dataTransfer.setData("text/plain", props.variant.id);
-          e.currentTarget.style.opacity = "0.4";
-        }}
-        onDragEnd={(e) => {
-          e.currentTarget.style.opacity = "1";
-        }}
-        onDragOver={(e) => {
-          e.preventDefault();
-          setIsDragTarget(true);
-        }}
-        onDragLeave={() => {
-          setIsDragTarget(false);
-        }}
-        onDrop={onReorder}
-        backgroundColor={isDragTarget ? "gray.100" : "transparent"}
-      >
-        <Icon
-          as={RiDraggable}
-          boxSize={6}
-          mt={2}
-          color="gray.400"
-          _hover={{ color: "gray.800", cursor: "pointer" }}
-        />
-        <AutoResizeTextArea
-          size="sm"
-          value={label}
-          onChange={(e) => setLabel(e.target.value)}
-          onBlur={onSaveLabel}
-          placeholder="Variant Name"
-          borderWidth={1}
-          borderColor="transparent"
-          fontWeight="bold"
-          fontSize={16}
-          _hover={{ borderColor: "gray.300" }}
-          _focus={{ borderColor: "blue.500", outline: "none" }}
-          flex={1}
-          px={cellPadding.x}
-          onMouseEnter={() => setIsInputHovered(true)}
-          onMouseLeave={() => setIsInputHovered(false)}
-        />
-
-        <Menu
-          z-index="dropdown"
-          onOpen={() => setMenuOpen(true)}
-          onClose={() => setMenuOpen(false)}
-        >
-          {duplicationInProgress ? (
-            <Spinner boxSize={4} mx={3} my={3} />
-          ) : (
-            <MenuButton>
-              <Button variant="ghost">
-                <Icon as={BsGear} />
-              </Button>
-            </MenuButton>
-          )}
-
-          <MenuList mt={-3} fontSize="md">
-            <MenuItem icon={<Icon as={FaRegClone} boxSize={4} w={5} />} onClick={duplicateVariant}>
-              Duplicate
-            </MenuItem>
-            <MenuItem icon={<Icon as={RiExchangeFundsFill} boxSize={5} />}>Change Model</MenuItem>
-            {props.canHide && (
-              <>
-                <MenuDivider />
-                <MenuItem
-                  onClick={onHide}
-                  icon={<Icon as={BsFillTrashFill} boxSize={5} />}
-                  color="red.600"
-                  _hover={{ backgroundColor: "red.50" }}
-                >
-                  <Text>Hide</Text>
-                </MenuItem>
-              </>
-            )}
-          </MenuList>
-        </Menu>
-      </HStack>
-    </GridItem>
-  );
-}

src/components/OutputsTable/index.tsx

@@ -4,7 +4,7 @@ import NewScenarioButton from "./NewScenarioButton";
 import NewVariantButton from "./NewVariantButton";
 import ScenarioRow from "./ScenarioRow";
 import VariantEditor from "./VariantEditor";
-import VariantHeader from "./VariantHeader";
+import VariantHeader from "../VariantHeader/VariantHeader";
 import VariantStats from "./VariantStats";
 import { ScenariosHeader } from "./ScenariosHeader";
 import { stickyHeaderStyle } from "./styles";