fix: simple-code-editor esbuild compat (#512)

examples/with-playground/app/page.tsx

@@ -7,6 +7,9 @@ import {
 import { usePlaygroundRuntime } from "@assistant-ui/react-playground";
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 
+import "prismjs/components/prism-json";
+import "prismjs/themes/prism.css";
+
 export default function Home() {
   const runtime = usePlaygroundRuntime({
     api: "/api/chat",

examples/with-playground/package.json

@@ -10,9 +10,10 @@
   },
   "dependencies": {
     "@ai-sdk/openai": "^0.0.36",
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-playground": "workspace:*",
+    "@assistant-ui/react": "^0.4.7",
+    "@assistant-ui/react-playground": "^0.0.0-alpha.1",
     "next": "14.2.5",
+    "prismjs": "^1.29.0",
     "react": "^18",
     "react-dom": "^18",
     "tailwindcss-animate": "^1.0.7"

examples/with-playground/tsconfig.json

@@ -9,8 +9,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"],
-
+      "@/*": ["./*"]
     },
     "allowJs": true,
     "strictNullChecks": true,

packages/react-playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-playground",
-  "version": "0.0.0-alpha.0",
+  "version": "0.0.0-alpha.1",
   "license": "MIT",
   "exports": {
     ".": {

packages/react-playground/src/components/ui/assistant-ui/json-editor.tsx

@@ -1,10 +1,12 @@
 import Editor from "react-simple-code-editor";
 import { highlight, languages } from "prismjs";
-import "prismjs/components/prism-json";
-import "prismjs/themes/prism.css";
 import { FC } from "react";
 import { cn } from "../../../lib/utils";
 
+// https://github.com/react-simple-code-editor/react-simple-code-editor/issues/106
+const EditorComponent =
+  (Editor as unknown as { default: typeof Editor }).default ?? Editor;
+
 type JSONEditorProps = {
   placeholder?: string;
   value: string;
@@ -14,7 +16,7 @@ type JSONEditorProps = {
 
 export const JSONEditor: FC<JSONEditorProps> = ({ className, ...props }) => {
   return (
-    <Editor
+    <EditorComponent
       {...props}
       highlight={(code) => highlight(code, languages["json"]!, "json")}
       className={cn("w-full font-mono [&>textarea]:outline-none", className)}