we're actually calling openai

src/components/OutputsTable/OutputCell.tsx

@@ -0,0 +1,19 @@
+import { api } from "~/utils/api";
+import { PromptVariant, Scenario } from "./types";
+
+export default function OutputCell({
+  scenario,
+  variant,
+}: {
+  scenario: Scenario;
+  variant: PromptVariant;
+}) {
+  const output = api.outputs.get.useQuery({
+    scenarioId: scenario.id,
+    variantId: variant.id,
+  });
+
+  if (!output.data) return null;
+
+  return <div>{JSON.stringify(output.data.output.choices[0].message.content, null, 2)}</div>;
+}

src/components/OutputsTable/VariantHeader.tsx

@@ -0,0 +1,59 @@
+import { Header, Stack, Title } from "@mantine/core";
+import { PromptVariant } from "@prisma/client";
+import { useMonaco } from "@monaco-editor/react";
+import { useEffect, useRef, useState } from "react";
+
+let isThemeDefined = false;
+
+export default function VariantHeader({ variant }: { variant: PromptVariant }) {
+  const monaco = useMonaco();
+  const editorRef = useRef(null);
+  const [editorId] = useState(() => `editor_${Math.random().toString(36).substring(7)}`);
+
+  useEffect(() => {
+    if (monaco && !isThemeDefined) {
+      monaco.editor.defineTheme("customTheme", {
+        base: "vs",
+        inherit: true,
+        rules: [],
+        colors: {
+          "editor.background": "#fafafa",
+        },
+      });
+      isThemeDefined = true;
+    }
+  }, [monaco]);
+
+  useEffect(() => {
+    if (monaco) {
+      editorRef.current = monaco.editor.create(document.getElementById(editorId), {
+        value: JSON.stringify(variant.config, null, 2),
+        language: "json",
+        theme: "customTheme",
+        lineNumbers: "off",
+        minimap: { enabled: false },
+        wrappingIndent: "indent",
+        wrappingStrategy: "advanced",
+        wordWrap: "on",
+        folding: false,
+        scrollbar: { vertical: "hidden" },
+        wordWrapBreakAfterCharacters: "",
+        wordWrapBreakBeforeCharacters: "",
+      });
+    }
+
+    // Clean up the editor instance on unmount
+    return () => {
+      if (editorRef.current) {
+        editorRef.current.dispose();
+      }
+    };
+  }, [monaco, variant, editorId]);
+
+  return (
+    <Stack w="100%">
+      <Title order={4}>{variant.label}</Title>
+      <div id={editorId} style={{ height: "300px", width: "100%" }}></div>
+    </Stack>
+  );
+}

src/components/OutputsTable/index.tsx

@@ -1,9 +1,12 @@
 import { MRT_ColumnDef, MantineReactTable } from "mantine-react-table";
 import { useMemo } from "react";
 import { RouterOutputs, api } from "~/utils/api";
+import { PromptVariant } from "./types";
+import VariantHeader from "./VariantHeader";
+import OutputCell from "./OutputCell";
 
 type CellData = {
-  variant: NonNullable<RouterOutputs["promptVariants"]["list"]>[0];
+  variant: PromptVariant;
   scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
 };
 
@@ -42,15 +45,9 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
         (variant): MRT_ColumnDef<TableRow> => ({
           id: variant.id,
           header: variant.label,
-          // size: 300,
-          Cell: ({ row }) => {
-            const cellData = row.original[variant.id];
-            return (
-              <div>
-                {row.original.scenario.id} | {variant.id}
-              </div>
-            );
-          },
+          Header: <VariantHeader variant={variant} />,
+          size: 400,
+          Cell: ({ row }) => <OutputCell scenario={row.original.scenario} variant={variant} />,
         })
       ) ?? []),
     ],
@@ -64,9 +61,11 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
           scenario,
         } as TableRow;
       }) ?? [],
-    [variants.data, scenarios.data]
+    [scenarios.data]
   );
 
+  if (!variants.data || !scenarios.data) return null;
+
   return (
     <MantineReactTable
       mantinePaperProps={{
@@ -83,8 +82,34 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
       enableDensityToggle={false}
       enableFullScreenToggle={false}
       enableHiding={false}
-      enableRowDragging
+      enableColumnActions={false}
+      enableColumnResizing
+      mantineTableProps={{
+        sx: {
+          th: {
+            verticalAlign: "bottom",
+          },
+          "& .mantine-TableHeadCell-Content": {
+            width: "100%",
+            height: "100%",
+            // display: "flex",
+
+            "& .mantine-TableHeadCell-Content-Actions": {
+              alignSelf: "flex-start",
+            },
+
+            "& > .mantine-TableHeadCell-Content-Labels": {
+              width: "100%",
+              height: "100%",
+
+              "& > .mantine-TableHeadCell-Content-Wrapper": {
+                width: "100%",
+                height: "100%",
+              },
+            },
+          },
+        },
+      }}
     />
   );
-  // return <div>OutputsTable</div>;
 }

src/components/OutputsTable/types.ts

@@ -0,0 +1,5 @@
+import { RouterOutputs } from "~/utils/api";
+
+export type PromptVariant = NonNullable<RouterOutputs["promptVariants"]["list"]>[0];
+
+export type Scenario = NonNullable<RouterOutputs["scenarios"]["list"]>[0];