🚀 feat: Artifact Editing & Downloads (#5428)

* refactor: expand container

* chore: bump @codesandbox/sandpack-react to latest

* WIP: first pass, show editor

* feat: implement ArtifactCodeEditor and ArtifactTabs components for enhanced artifact management

* refactor: fileKey

* refactor: auto scrolling code editor and add messageId to artifact

* feat: first pass, editing artifact

* feat: first pass, robust artifact replacement

* fix: robust artifact replacement & re-render when expected

* feat: Download Artifacts

* refactor: improve artifact editing UX

* fix: layout shift of new download button

* fix: enhance missing output checks and logging in StreamRunManager
This commit is contained in:
Danny Avila 2025-01-23 18:19:04 -05:00 committed by GitHub
parent 87383fec27
commit ed57bb4711
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 1156 additions and 237 deletions

98
package-lock.json generated
View file

@ -891,7 +891,7 @@
"license": "ISC",
"dependencies": {
"@ariakit/react": "^0.4.11",
"@codesandbox/sandpack-react": "^2.18.2",
"@codesandbox/sandpack-react": "^2.19.10",
"@dicebear/collection": "^7.0.4",
"@dicebear/core": "^7.0.4",
"@headlessui/react": "^2.1.2",
@ -1005,6 +1005,54 @@
"vite-plugin-pwa": "^0.21.1"
}
},
"client/node_modules/@codesandbox/sandpack-client": {
"version": "2.19.8",
"resolved": "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.19.8.tgz",
"integrity": "sha512-CMV4nr1zgKzVpx4I3FYvGRM5YT0VaQhALMW9vy4wZRhEyWAtJITQIqZzrTGWqB1JvV7V72dVEUCUPLfYz5hgJQ==",
"dependencies": {
"@codesandbox/nodebox": "0.1.8",
"buffer": "^6.0.3",
"dequal": "^2.0.2",
"mime-db": "^1.52.0",
"outvariant": "1.4.0",
"static-browser-server": "1.0.3"
}
},
"client/node_modules/@codesandbox/sandpack-react": {
"version": "2.19.10",
"resolved": "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-2.19.10.tgz",
"integrity": "sha512-X/7NzhR7R5pp5qYS+Gc31OzJvy+EzGz++H1YN9bJlDE+VzxTBsMN9dv3adzeo5wtxUhqexVOJS7mGr//e7KP2A==",
"dependencies": {
"@codemirror/autocomplete": "^6.4.0",
"@codemirror/commands": "^6.1.3",
"@codemirror/lang-css": "^6.0.1",
"@codemirror/lang-html": "^6.4.0",
"@codemirror/lang-javascript": "^6.1.2",
"@codemirror/language": "^6.3.2",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.7.1",
"@codesandbox/sandpack-client": "^2.19.8",
"@lezer/highlight": "^1.1.3",
"@react-hook/intersection-observer": "^3.1.1",
"@stitches/core": "^1.2.6",
"anser": "^2.1.1",
"clean-set": "^1.1.2",
"dequal": "^2.0.2",
"escape-carriage": "^1.3.1",
"lz-string": "^1.4.4",
"react-devtools-inline": "4.4.0",
"react-is": "^17.0.2"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18",
"react-dom": "^16.8.0 || ^17 || ^18"
}
},
"client/node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"client/node_modules/vite": {
"version": "5.4.14",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.14.tgz",
@ -6151,54 +6199,6 @@
"strict-event-emitter": "^0.4.3"
}
},
"node_modules/@codesandbox/sandpack-client": {
"version": "2.18.2",
"resolved": "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.18.2.tgz",
"integrity": "sha512-zKSZWoCqpUFHqSbG1Q88ICqbY/nKKTY3rKKxTdNCSv0miI3JAR671kFcq6fkoCYVHFg6WIVpW7EzYwA/TYzX0w==",
"dependencies": {
"@codesandbox/nodebox": "0.1.8",
"buffer": "^6.0.3",
"dequal": "^2.0.2",
"mime-db": "^1.52.0",
"outvariant": "1.4.0",
"static-browser-server": "1.0.3"
}
},
"node_modules/@codesandbox/sandpack-react": {
"version": "2.18.2",
"resolved": "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-2.18.2.tgz",
"integrity": "sha512-OvXHAUKTjqXfjB9qd+6Pt3Pzjpk2/SRxVFUAC7cRwnSap3X7T0uBDdoRIJTlueXVrD+F1FkaGRzIE5GgGm4FEQ==",
"dependencies": {
"@codemirror/autocomplete": "^6.4.0",
"@codemirror/commands": "^6.1.3",
"@codemirror/lang-css": "^6.0.1",
"@codemirror/lang-html": "^6.4.0",
"@codemirror/lang-javascript": "^6.1.2",
"@codemirror/language": "^6.3.2",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.7.1",
"@codesandbox/sandpack-client": "^2.18.2",
"@lezer/highlight": "^1.1.3",
"@react-hook/intersection-observer": "^3.1.1",
"@stitches/core": "^1.2.6",
"anser": "^2.1.1",
"clean-set": "^1.1.2",
"dequal": "^2.0.2",
"escape-carriage": "^1.3.1",
"lz-string": "^1.4.4",
"react-devtools-inline": "4.4.0",
"react-is": "^17.0.2"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18",
"react-dom": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/@codesandbox/sandpack-react/node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/@colors/colors": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz",