Components for processor_run column types in sheet

Author: ajhai

llmstack/client/src/components/sheets/ProcessorRunForm.jsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from "react";
+import { Stack, Box, Tab } from "@mui/material";
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import ApiBackendSelector from "../ApiBackendSelector";
+import ThemedJsonForm from "../ThemedJsonForm";
+import validator from "@rjsf/validator-ajv8";
+import { useRecoilValue } from "recoil";
+import { apiBackendSelectedState } from "../../data/atoms";
+import TextFieldWithVars from "../apps/TextFieldWithVars";
+
+export default function ProcessorRunForm({
+  setData,
+  providerSlug,
+  processorSlug,
+  processorInput,
+  processorConfig,
+  processorOutputTemplate,
+  columns,
+}) {
+  const apiBackendSelected = useRecoilValue(apiBackendSelectedState);
+  const [tabValue, setTabValue] = useState("input");
+
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+
+  useEffect(() => {
+    setData({
+      processor_slug: apiBackendSelected?.slug,
+      provider_slug: apiBackendSelected?.api_provider?.slug,
+    });
+  }, [apiBackendSelected, setData]);
+
+  return (
+    <Stack spacing={2}>
+      <ApiBackendSelector
+        hideDescription={true}
+        defaultProvider={providerSlug}
+        defaultProcessor={processorSlug}
+      />
+      <TabContext value={tabValue}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <TabList
+            onChange={handleTabChange}
+            aria-label="Processor run form tabs"
+          >
+            <Tab label="Input" value="input" />
+            <Tab label="Config" value="config" />
+            <Tab label="Output" value="output" />
+          </TabList>
+        </Box>
+        <TabPanel value="input">
+          <ThemedJsonForm
+            schema={apiBackendSelected ? apiBackendSelected.input_schema : {}}
+            uiSchema={
+              apiBackendSelected ? apiBackendSelected.input_ui_schema : {}
+            }
+            formData={processorInput}
+            validator={validator}
+            onChange={(e) => {
+              setData({
+                input: e.formData,
+              });
+            }}
+            disableAdvanced={true}
+          />
+        </TabPanel>
+        <TabPanel value="config">
+          <ThemedJsonForm
+            schema={apiBackendSelected ? apiBackendSelected.config_schema : {}}
+            uiSchema={
+              apiBackendSelected ? apiBackendSelected.config_ui_schema : {}
+            }
+            formData={processorConfig}
+            validator={validator}
+            onChange={(e) => {
+              setData({
+                config: e.formData,
+              });
+            }}
+          />
+        </TabPanel>
+        <TabPanel value="output">
+          <TextFieldWithVars
+            label="Output Template"
+            multiline
+            value={processorOutputTemplate?.markdown || ""}
+            onChange={(text) => {
+              setData({
+                output_template: { markdown: text },
+              });
+            }}
+            sx={{ width: "100%" }}
+            introText="Use the {{ }} syntax to reference data from the processor's own output."
+            schemas={[
+              {
+                label: apiBackendSelected?.name,
+                pillPrefix: `${apiBackendSelected?.api_provider?.name} / ${apiBackendSelected?.name} / `,
+                items: apiBackendSelected?.output_schema,
+                id: null,
+              },
+            ]}
+          />
+        </TabPanel>
+      </TabContext>
+    </Stack>
+  );
+}

llmstack/client/src/components/sheets/Sheet.jsx

@@ -72,8 +72,9 @@ function Sheet(props) {
 
       return {
         kind:
-          (cell?.kind === "app_run" ? GridCellKind.Text : cell?.kind) ||
-          columns[column].kind,
+          (cell?.kind === "app_run" || cell?.kind === "processor_run"
+            ? GridCellKind.Text
+            : cell?.kind) || columns[column].kind,
         displayData: cell?.display_data || "",
         data: cell?.display_data || "",
         allowOverlay: true,
@@ -98,7 +99,7 @@ function Sheet(props) {
         data: column.data,
         hasMenu: true,
         icon:
-          column.kind === "app_run"
+          column.kind === "app_run" || column.kind === "processor_run"
             ? GridColumnIcon.HeaderRollup
             : GridColumnIcon.HeaderString,
         width: column.width || 300,

llmstack/client/src/components/sheets/SheetColumnMenu.jsx

@@ -14,6 +14,7 @@ import {
 import { DeleteOutlined, AddOutlined } from "@mui/icons-material";
 import { GridCellKind } from "@glideapps/glide-data-grid";
 import AppRunForm from "./AppRunForm";
+import ProcessorRunForm from "./ProcessorRunForm"; // Added this import
 import "@glideapps/glide-data-grid/dist/index.css";
 
 const numberToLetters = (num) => {
@@ -37,12 +38,12 @@ export function SheetColumnMenu({
 }) {
   const [columnName, setColumnName] = useState(column?.title || "");
   const [columnType, setColumnType] = useState(GridCellKind.Text);
-  const columnAppRunData = useRef(column?.data || {});
+  const columnRunData = useRef(column?.data || {});
 
   useEffect(() => {
     setColumnType(column?.kind || GridCellKind.Text);
     setColumnName(column?.title || "");
-    columnAppRunData.current = column?.data || {};
+    columnRunData.current = column?.data || {};
   }, [column]);
 
   const handleAddOrEditColumn = () => {
@@ -51,8 +52,9 @@ export function SheetColumnMenu({
       title: columnName || "New Column",
       kind: columnType,
       data:
-        columnType === "app_run" && columnAppRunData.current
-          ? columnAppRunData.current
+        (columnType === "app_run" || columnType === "processor_run") &&
+        columnRunData.current
+          ? columnRunData.current
           : {},
     };
 
@@ -80,7 +82,12 @@ export function SheetColumnMenu({
       role={undefined}
       placement="bottom-start"
       transition
-      sx={{ width: "450px" }}
+      sx={{
+        width: "450px",
+        maxHeight: "90vh",
+        overflowY: "auto",
+        padding: "0px 2px 8px 2px",
+      }}
     >
       {({ TransitionProps, placement }) => (
         <Grow
@@ -131,14 +138,36 @@ export function SheetColumnMenu({
                 <MenuItem value={"number"}>Number</MenuItem>
                 <MenuItem value={"image"}>Image</MenuItem>
                 <MenuItem value={"app_run"}>App Run</MenuItem>
+                <MenuItem value={"processor_run"}>Processor Run</MenuItem>
               </Select>
               {columnType === "app_run" && (
                 <AppRunForm
                   setData={(data) => {
-                    columnAppRunData.current = data;
+                    columnRunData.current = {
+                      ...columnRunData.current,
+                      ...data,
+                    };
                   }}
-                  appSlug={columnAppRunData.current?.app_slug}
-                  appInput={columnAppRunData.current?.input}
+                  appSlug={columnRunData.current?.app_slug}
+                  appInput={columnRunData.current?.input}
+                  columns={columns}
+                />
+              )}
+              {columnType === "processor_run" && (
+                <ProcessorRunForm
+                  setData={(data) => {
+                    columnRunData.current = {
+                      ...columnRunData.current,
+                      ...data,
+                    };
+                  }}
+                  providerSlug={columnRunData.current?.provider_slug}
+                  processorSlug={columnRunData.current?.processor_slug}
+                  processorInput={columnRunData.current?.input}
+                  processorConfig={columnRunData.current?.config}
+                  processorOutputTemplate={
+                    columnRunData.current?.output_template
+                  }
                   columns={columns}
                 />
               )}