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

For now, we can still use this for publishing the package, with the following steps:

# Steps to Publish @lastmileai/aiconfig-editor

1. Rebase onto main. Fix merge conflicts and any other merge scenarios, especially:
- Handling core editor files that were added or moved (e.g. utils, components) — make sure they are properly moved to the right place under `aiconfig-editor` dir instead of being top-level alongside `LocalEditor`
- Handling `package.json` changes — this one is a huge pain to deal with. Make sure the change is in the correct `package.json` (i.e. if package added for editor core, should be in `aiconfig-editor package.json`). This might require a bit of finagling to be able to `yarn` and `yarn build` both packages afterwards. Last time this happened (due to bump of aiconfig package version), I had to hard-code the aiconfig-editor to the latest version number in the top-level `package.json` for `yarn` to work there, then `yarn` and `yarn build` in `aiconfig-editor`, then point top-level package back to local `aiconfig-editor` and then `yarn` again

If all files are good, the following order should work:

2. In `/client`, run `yarn`
3. In `client/aiconfig-editor`, run `yarn && yarn build`
4. In `/client`, run `rm -rf node_modules && yarn && yarn build`
5. Make sure there are no errors in `LocalEditor` or `AIConfigEditor`. Then, test the local editor in dev and prod mode to make sure they are still good.
6. If all is good, go back to `client/aiconfig-editor` and bump the package version number and then `yarn build`
7. Finally, can run `npm publish` from `client/aiconfig-editor`

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

@@ -1182,7 +1182,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}