[editor][wip] Packaging AIConfigEditor Component with Vite

# [editor][wip] Packaging AIConfigEditor Component with Vite

This PR separates our current editor implementation into a root package containing the LocalEditor and a library package containing the AIConfigEditor and its associated code. When we want to publish the `@lastmileai/aiconfig-editor` package, just cd into the `aiconfig-editor` dir and run `yarn && yarn build` before running `npm publish`. `yarn build` will compile the react code to commonjs and esm format files & source maps (separated by specific folders) and the appropriate type declarations. This will allow the package to be used in most js projects.

We can't land this as-is because it essentially breaks the dev x, preventing HMR from working. The next couple diffs should fix that.

.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.1.15",
+  "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

@@ -141,7 +141,7 @@ export type AIConfigCallbacks = {
 
 type RequestCallbackError = { message?: string };
 
-export default function AIConfigEditor({
+export function AIConfigEditor({
   aiconfig: initialAIConfig,
   callbacks,
   mode,