Add ability to add prompty app as processor (#236)

Author: vegito22

llmstack/apps/serializers.py

@@ -187,7 +187,7 @@ def get_data(self, obj):
                 )
                 if asset_data and "url" in asset_data:
                     app_data.data["config"]["assistant_image"] = asset_data["url"]
-            return app_data.data
+            return {**app_data.data, "version": app_data.version}
         return None
 
     def get_has_live_version(self, obj):

llmstack/client/src/components/ThemedJsonForm.jsx

@@ -42,6 +42,10 @@ const StreamingVoiceInputWidget = lazy(
   () => import("./form/StreamingVoiceInputWidget"),
 );
 
+const PromptlyAppSelector = lazy(
+  () => import("./form/PromptlyAppSelectorWidget"),
+);
+
 function CustomGdriveFileWidget(props) {
   return <GdriveFileSelector {...props} />;
 }
@@ -50,6 +54,10 @@ function CustomWebpageURLExtractorWidget(props) {
   return <WebpageURLExtractorWidget {...props} />;
 }
 
+function PromptlyAppSelectorWidget(props) {
+  return <PromptlyAppSelector {...props} />;
+}
+
 function FieldTemplate(props) {
   const {
     id,
@@ -391,6 +399,7 @@ const ThemedJsonForm = ({
           richtext: RichTextWidget,
           voice: VoiceWidget,
           app_version: AppVersionSelectorWidget,
+          promptlyapp_select: PromptlyAppSelectorWidget,
         },
         ...widgets,
       }}

llmstack/client/src/components/form/PromptlyAppSelectorWidget.jsx

@@ -0,0 +1,98 @@
+import { useRecoilValue } from "recoil";
+import { appsState } from "../../data/atoms";
+import { MenuItem, Select, Stack } from "@mui/material";
+import { useEffect, useState } from "react";
+import validator from "@rjsf/validator-ajv8";
+import { getJSONSchemaFromInputFields } from "../../data/utils";
+import ThemedJsonForm from "../ThemedJsonForm";
+
+export default function PromptlyAppSelectorWidget(props) {
+  const { value, onChange } = props;
+  const apps = useRecoilValue(appsState);
+  const published_apps = apps.filter((app) => app.is_published);
+
+  const [selectedApp, setSelectedApp] = useState(null);
+  const [inputSchema, setInputSchema] = useState({});
+  const [inputUiSchema, setInputUiSchema] = useState({});
+  const [jsonValue, setJsonValue] = useState({});
+
+  useEffect(() => {
+    try {
+      setJsonValue(JSON.parse(value));
+    } catch (e) {
+      console.error(e);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (jsonValue) {
+      const selectedApp = published_apps.find(
+        (app) => app.published_uuid === jsonValue?.promptly_app_published_uuid,
+      );
+      setSelectedApp(selectedApp);
+    }
+  }, [jsonValue, published_apps, setSelectedApp]);
+
+  useEffect(() => {
+    if (selectedApp) {
+      if (selectedApp.data.input_fields) {
+        const { schema, uiSchema } = getJSONSchemaFromInputFields(
+          selectedApp.data.input_fields,
+        );
+        setInputSchema(schema);
+        setInputUiSchema(uiSchema);
+      }
+    }
+  }, [selectedApp]);
+
+  return (
+    <Stack>
+      <Select
+        labelId="app-select-label"
+        id="app-select"
+        value={jsonValue?.promptly_app_published_uuid || ""}
+        label="Select an application"
+        onChange={(event) => {
+          const appData = published_apps.find(
+            (app) => app.published_uuid === event.target.value,
+          );
+          props.onChange(
+            JSON.stringify({
+              promptly_app_published_uuid: event.target.value,
+              promptly_app_input_fields: appData?.data.input_fields || [],
+              promptly_app_version: appData?.version || 0,
+              promptly_app_uuid: appData?.uuid || "",
+            }),
+          );
+        }}
+        variant="filled"
+        sx={{ lineHeight: "0.5em" }}
+      >
+        {published_apps.map((app) => (
+          <MenuItem key={app.published_uuid} value={app.published_uuid}>
+            {app.name}
+          </MenuItem>
+        ))}
+      </Select>
+      <ThemedJsonForm
+        schema={inputSchema}
+        uiSchema={inputUiSchema}
+        formData={jsonValue?.input || {}}
+        onChange={({ formData }) => {
+          onChange(
+            JSON.stringify({
+              promptly_app_published_uuid:
+                jsonValue.promptly_app_published_uuid,
+              promptly_app_input_fields: jsonValue.promptly_app_input_fields,
+              promptly_app_version: jsonValue.promptly_app_version,
+              promptly_app_uuid: jsonValue.promptly_app_uuid,
+              input: formData,
+            }),
+          );
+        }}
+        validator={validator}
+        disableAdvanced={true}
+      />
+    </Stack>
+  );
+}

llmstack/common/utils/utils.py

@@ -460,5 +460,7 @@ def get_tool_json_schema_from_input_fields(name="", input_fields=[]):
             "type": value["type"],
             "description": value.get("description", ""),
         }
+        if value["type"] == "array":
+            tool_schema["properties"][key]["items"] = value["items"]
 
     return tool_schema

llmstack/processors/providers/promptly/app.py

@@ -1,6 +1,7 @@
 import logging
 
 from asgiref.sync import async_to_sync
+from pydantic import Field
 
 from llmstack.apps.schemas import OutputTemplate
 from llmstack.processors.providers.api_processor_interface import (
@@ -12,7 +13,7 @@
 
 
 class EchoProcessorInput(ApiProcessorSchema):
-    input_str: str = "Hello World!"
+    input_str: str = Field(description="The input string to echo", widget="textarea", default="Hello, World!")
     stream: bool = False