From 02b7c44f23d7e8ce19fd9871b6b39dff8ae6589c Mon Sep 17 00:00:00 2001
From: "Ankush Pala  ankush@lastmileai.dev" <>
Date: Fri, 12 Jan 2024 16:28:56 -0500
Subject: [PATCH] [editor][client] render array objects in settings properly

Upon loading the OpenAI function calling aiconfig, the editor client does not render the function data. This is because the functions are an array, and the client does not initialize array data.

In this diff, if the Settings data is an array with an initial value, properly set/intiailize and render the array data (inside SettingsPropertyRenderer)

Also updated the object renderer/settings to render json editor for an unspecified Json

## Testplan

Load the function calling aiconfig and open the model settings drawer. Notice the functions get rendered.

![testplan](https://github.com/lastmile-ai/aiconfig/assets/141073967/db69dd24-c792-43c1-9341-84eb235c007b)
---
 .../components/SettingsPropertyRenderer.tsx   | 41 +++++++++++++++++--
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/python/src/aiconfig/editor/client/src/components/SettingsPropertyRenderer.tsx b/python/src/aiconfig/editor/client/src/components/SettingsPropertyRenderer.tsx
index 95a06482c..08f99509c 100644
--- a/python/src/aiconfig/editor/client/src/components/SettingsPropertyRenderer.tsx
+++ b/python/src/aiconfig/editor/client/src/components/SettingsPropertyRenderer.tsx
@@ -20,6 +20,7 @@ import UnionPropertyControl, {
   UnionProperty,
 } from "./property_controls/UnionPropertyControl";
 import { JSONObject, JSONValue } from "aiconfig";
+import JSONEditor from "./JSONEditor";
 
 export type StateSetFromPrevFn = (prev: JSONValue) => void;
 export type SetStateFn = (val: StateSetFromPrevFn | JSONValue) => void;
@@ -87,10 +88,28 @@ export default function SettingsPropertyRenderer({
     [propertyName, propertyValue, setValue]
   );
 
+  const itemValues = useRef(
+    Array.isArray(propertyValue) ? new Map(propertyValue.map(val => [uniqueId(), val])) : 
+    new Map<string, JSONValue>());
+
   // Used in the case the property is an array
-  // TODO: Should initialize with values from settings if available
-  const [itemControls, setItemControls] = useState<JSX.Element[]>([]);
-  const itemValues = useRef(new Map<string, JSONValue>());
+  const [itemControls, setItemControls] = useState<JSX.Element[]>(() => Array.from(itemValues.current, ([key, value]) => (
+    <Group key={key}>
+      <SettingsPropertyRenderer
+        propertyName=""
+        property={property.items}
+        initialValue={value}
+        setValue={newItem => {
+          itemValues.current.set(key, newItem);
+          setAndPropagateValue(Array.from(itemValues.current.values()));
+        }}
+     />
+     <ActionIcon onClick={() => removeItemFromList(key)}>
+       <IconTrash size={16} />
+     </ActionIcon>
+   </Group>
+  )));
+
 
   const removeItemFromList = useCallback(
     async (key: string) => {
@@ -367,8 +386,22 @@ export default function SettingsPropertyRenderer({
             <Stack>{subpropertyControls}</Stack>
           </>
         );
+      } else {
+        propertyControl = (
+          <Stack>
+            <PropertyLabel
+             propertyName={propertyName}
+             propertyDescription={propertyDescription}
+           />
+            <div style={{minWidth: "350px"}}>
+              <JSONEditor
+                content={initialValue as JSONObject}
+                onChangeContent={setAndPropagateValue}
+              />
+            </div>
+          </Stack>
+        );
       }
-
       break;
     }
     case "select": {