Refetch input schema on config change aka. support configurable promp…

…ts (#66)

langserve/playground/package.json

@@ -29,6 +29,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^1.14.0",
+    "use-debounce": "^9.0.4",
     "vaul": "^0.7.3"
   },
   "devDependencies": {

langserve/playground/src/App.tsx

@@ -164,14 +164,14 @@ function App() {
 
   // store form state
   const [configData, setConfigData] = useState<
-    Pick<JsonFormsCore, "data" | "errors">
-  >({ data: {}, errors: [] });
+    Pick<JsonFormsCore, "data" | "errors"> & { defaults: boolean }
+  >({ data: {}, errors: [], defaults: true });
 
   const [inputData, setInputData] = useState<
     Pick<JsonFormsCore, "data" | "errors">
   >({ data: null, errors: [] });
   // fetch input and config schemas from the server
-  const schemas = useSchemas();
+  const schemas = useSchemas(configData);
   // apply defaults defined in each schema
   useEffect(() => {
     if (schemas.config) {
@@ -182,6 +182,7 @@ function App() {
           initConfigData.current ??
           defaults(schemas.config),
         errors: [],
+        defaults: true,
       });
       setInputData({ data: null, errors: [] });
     }
@@ -204,7 +205,11 @@ function App() {
               const value: { config: JsonFormsCore["data"] } = message.value;
               if (Object.keys(value.config).length > 0) {
                 initConfigData.current = value.config;
-                setConfigData({ data: value.config, errors: [] });
+                setConfigData({
+                  data: value.config,
+                  errors: [],
+                  defaults: false,
+                });
                 break;
               }
             }
@@ -232,7 +237,9 @@ function App() {
             renderers={renderers}
             cells={cells}
             onChange={({ data, errors }) =>
-              data ? setConfigData({ data, errors }) : undefined
+              data
+                ? setConfigData({ data, errors, defaults: false })
+                : undefined
             }
           />
           {!!configData.errors?.length && configData.data && (

langserve/playground/src/useSchemas.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useState } from "react";
 import { resolveApiUrl } from "./utils/url";
 import { simplifySchema } from "./utils/simplifySchema";
+import { JsonFormsCore } from "@jsonforms/core";
+import { compressToEncodedURIComponent } from "lz-string";
+import { useDebounce } from "use-debounce";
 
 declare global {
   interface Window {
@@ -11,7 +14,9 @@ declare global {
   }
 }
 
-export function useSchemas() {
+export function useSchemas(
+  configData: Pick<JsonFormsCore, "data" | "errors"> & { defaults: boolean }
+) {
   const [schemas, setSchemas] = useState({
     config: null,
     input: null,
@@ -44,5 +49,23 @@ export function useSchemas() {
     save();
   }, []);
 
+  const [debouncedConfigData] = useDebounce(configData, 500);
+
+  useEffect(() => {
+    if (!debouncedConfigData.defaults) {
+      fetch(
+        resolveApiUrl(
+          `c/${compressToEncodedURIComponent(
+            JSON.stringify(debouncedConfigData.data)
+          )}/input_schema`
+        )
+      )
+        .then((r) => r.json())
+        .then(simplifySchema)
+        .then((input) => setSchemas((current) => ({ ...current, input })))
+        .catch(() => {}); // ignore errors, eg. due to incomplete config
+    }
+  }, [debouncedConfigData]);
+
   return schemas;
 }

langserve/playground/yarn.lock

@@ -2699,6 +2699,11 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
+use-debounce@^9.0.4:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-9.0.4.tgz#51d25d856fbdfeb537553972ce3943b897f1ac85"
+  integrity sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"