[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)

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;
@@ -89,8 +90,38 @@ export default function SettingsPropertyRenderer({
 
  // 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[]>(() => {
+
+ if (!Array.isArray(initialValue)){
+ return []
+ }
+
+ return initialValue.map((arrayItem) => {
+ const key = uniqueId();
+ return (
+ <Group key={key}>
+ <SettingsPropertyRenderer
+ propertyName=""
+ property={property.items}
+ initialValue={arrayItem}
+ setValue={newItem => {
+ itemValues.current.set(key, newItem);
+ setAndPropagateValue(Array.from(itemValues.current.values()));
+ }}
+ />
+ <ActionIcon onClick={() => removeItemFromList(key)}>
+ <IconTrash size={16} />
+ </ActionIcon>
+ </Group>
+ );
+ });
+
+
+
+ });
+ const itemValues = useRef(
+ Array.isArray(propertyValue) ? new Map(propertyValue.map(val => [uniqueId(), val])) : 
+ new Map<string, JSONValue>());
 
  const removeItemFromList = useCallback(
  async (key: string) => {
@@ -367,8 +398,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": {