[editor][wip] Packaging AIConfigEditor Component with Vite

.vscode/settings.json

@@ -7,7 +7,8 @@
     "**/*.code-search": true,
     "**/.next": true,
     "**/.sl": true,
-    "yarn.lock": true
+    "yarn.lock": true,
+    "**/dist": true
   },
   "editor.formatOnSave": true,
   "[javascript]": {

python/src/aiconfig/editor/client/aiconfig-editor/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ]
+  },
+  "ignorePatterns": ["dist/", "node_modules/"]
+}

python/src/aiconfig/editor/client/aiconfig-editor/README.md

@@ -0,0 +1,27 @@
+# AIConfigEditor
+
+This component library provides an AIConfigEditor React component for renderering a customizable AIConfig file editor in React.
+
+## Usage
+
+To render the editor component, simply render an AIConfigEditor within your JSX, passing in an AIConfig object:
+
+```
+<AIConfigEditor aiconfig={aiconfig} />
+```
+
+## Customization
+
+The editor component can be customized to suit different needs. The following customizations are supported:
+
+### Readonly Editor
+
+// TODO
+
+### Custom Callbacks
+
+// TODO
+
+### Custom Styles
+
+// TODO

python/src/aiconfig/editor/client/aiconfig-editor/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@lastmileai/aiconfig-editor",
+  "version": "0.2.7",
+  "description": "React component for editing aiconfig files",
+  "author": "LastMile AI",
+  "license": "UNLICENSED",
+  "keywords": [
+    "aiconfig",
+    "editor",
+    "react"
+  ],
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npx tsc && vite build",
+    "clean": "rm -rf dist",
+    "lint": "eslint . --max-warnings=0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@mantine/carousel": "^6.0.7",
+    "@mantine/core": "^6.0.7",
+    "@mantine/dates": "^6.0.16",
+    "@mantine/dropzone": "^6.0.7",
+    "@mantine/form": "^6.0.7",
+    "@mantine/hooks": "^6.0.7",
+    "@mantine/modals": "^6.0.7",
+    "@mantine/notifications": "^6.0.7",
+    "@mantine/prism": "^6.0.7",
+    "@monaco-editor/react": "^4.6.0",
+    "@tabler/icons-react": "^2.44.0",
+    "aiconfig": "^1.1.6",
+    "lodash": "^4.17.21",
+    "node-fetch": "^3.3.2",
+    "react-error-boundary": "^4.0.12",
+    "react-markdown": "^8.0.6",
+    "remark-gfm": "^3.0.1",
+    "uuid": "^9.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.202",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/uuid": "^9.0.7",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "typescript": "^5",
+    "vite": "^5.0.11",
+    "vite-plugin-dts": "^3.7.0"
+  }
+}

python/src/aiconfig/editor/client/aiconfig-editor/src/components/AIConfigContext.tsx

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+import { ClientAIConfig } from "../shared/types";
+
+/**
+ * Context for overall editor config state. This context should
+ * be memoized to prevent unnecessary re-renders
+ */
+const AIConfigContext = createContext<{
+  getState: () => ClientAIConfig;
+}>({
+  getState: () => ({ prompts: [], _ui: { isDirty: false } }),
+});
+
+export default AIConfigContext;

python/src/aiconfig/editor/client/src/components/AIConfigEditor.tsx → python/src/aiconfig/editor/client/aiconfig-editor/src/components/AIConfigEditor.tsx

@@ -122,7 +122,7 @@ export type AIConfigCallbacks = {
   ) => Promise<{ aiconfig: AIConfig }>;
   cancel: (cancellationToken: string) => Promise<void>;
   clearOutputs: () => Promise<{ aiconfig: AIConfig }>;
-  deleteOutput: (promptName: string) => Promise<{ aiconfig: AIConfig }>;
+  deleteOutput?: (promptName: string) => Promise<{ aiconfig: AIConfig }>;
   deleteModelSettings?: (modelName: string) => Promise<void>;
   deletePrompt: (promptName: string) => Promise<void>;
   download?: () => Promise<void>;
@@ -1287,7 +1287,7 @@ function AIConfigEditorBase({
 // Wrap the AIConfigEditorBase in the NotificationProvider to provide NotificationContext
 // to the AIConfigEditorBase. Wrap both NotificationProvider and AIConfigEditorBase with
 // the theme provider to ensure all components have the proper theme
-export default function AIConfigEditor(props: Props) {
+export function AIConfigEditor(props: Props) {
   return (
     <AIConfigEditorThemeProvider
       mode={props.mode}

python/src/aiconfig/editor/client/aiconfig-editor/src/components/GlobalParametersContainer.tsx

@@ -0,0 +1,71 @@
+import { Accordion, Text, createStyles } from "@mantine/core";
+import { JSONObject } from "aiconfig";
+import { memo, useContext, useState } from "react";
+import ParametersRenderer from "./ParametersRenderer";
+import AIConfigContext from "../contexts/AIConfigContext";
+import { PROMPT_CELL_LEFT_MARGIN_PX } from "../utils/constants";
+
+type Props = {
+  initialValue: JSONObject;
+  onUpdateParameters: (newParameters: JSONObject) => void;
+};
+
+const useStyles = createStyles(() => ({
+  parametersContainer: {
+    margin: `16px auto 16px ${PROMPT_CELL_LEFT_MARGIN_PX}px`,
+  },
+  parametersContainerReadonly: {
+    margin: "16px auto",
+  },
+}));
+
+export default memo(function GlobalParametersContainer({
+  initialValue,
+  onUpdateParameters,
+}: Props) {
+  const [isParametersDrawerOpen, setIsParametersDrawerOpen] = useState(false);
+
+  const { classes } = useStyles();
+  const { readOnly } = useContext(AIConfigContext);
+
+  return (
+    // Set local and global classname. Global will override if specified
+    // Local is readonly or not. Global will always have parametersContainer class
+    // and if readonly, will also have parametersContainerReadonly class (to allow overrides)
+    <div
+      className={`${
+        readOnly
+          ? classes.parametersContainerReadonly
+          : classes.parametersContainer
+      } parametersContainer ${readOnly ? "parametersContainerReadonly" : ""}`}
+    >
+      <Accordion
+        styles={{
+          item: { borderBottom: 0 },
+          label: {
+            textAlign: "center",
+            paddingTop: "0.5em",
+            paddingBottom: "0.5em",
+            fontSize: "0.85em",
+          },
+        }}
+        onChange={(value) => setIsParametersDrawerOpen(value === "parameters")}
+      >
+        <Accordion.Item value="parameters">
+          <Accordion.Control>
+            <Text color="blue">Global Parameters {"{}"}</Text>
+          </Accordion.Control>
+          <Accordion.Panel>
+            {isParametersDrawerOpen && (
+              <ParametersRenderer
+                initialValue={initialValue}
+                onUpdateParameters={onUpdateParameters}
+                maxHeight="300px"
+              />
+            )}
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    </div>
+  );
+});