ai-deployer/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add SVG icons for code and preview, implement sandbox functionality in interaction panel

Browse Source 
- Added Code.svg and Preview.svg icons to the public/icons directory.
- Refactored chat.tsx to remove duplicate import of observer from mobx-react-lite.
- Enhanced interaction-panel.tsx to include a new Sandbox component with code and preview toggling functionality using Sandpack.
- Updated styles.css to include custom styles for the new sandbox layout and file explorer. (add sandpack)
This commit is contained in:
RND332
2025-07-20 15:08:40 +03:00
committed by Talgat The Random
parent 7f1b2b9a05
commit 3953cccd0f
7 changed files with 515 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -11,6 +11,8 @@
},
"dependencies": {
"@radix-ui/react-dropdown-menu": "^2.1.15",
"@codesandbox/sandpack-react": "^2.20.0",
"@codesandbox/sandpack-themes": "^2.0.21",
"@radix-ui/react-toast": "^1.2.14",
"@radix-ui/react-tooltip": "^1.2.7",
"@tailwindcss/vite": "^4.1.11",
@@ -41,5 +43,6 @@
"vite": "^6.1.0",
"vitest": "^3.0.5",
"web-vitals": "^4.2.4"
}
},
"packageManager": "pnpm@9.15.9+sha512.68046141893c66fad01c079231128e9afb89ef87e2691d69e4d40eee228988295fd4682181bae55b58418c3a253bde65a505ec7c5f9403ece5cc3cd37dcf2531"
}

405
pnpm-lock.yaml generated
View File

@@ -11,6 +11,12 @@ importers:
'@radix-ui/react-dropdown-menu':
specifier: ^2.1.15
version: 2.1.15(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@codesandbox/sandpack-react':
specifier: ^2.20.0
version: 2.20.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@codesandbox/sandpack-themes':
specifier: ^2.0.21
version: 2.0.21
'@radix-ui/react-toast':
specifier: ^1.2.14
version: 1.2.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -251,6 +257,48 @@ packages:
resolution: {integrity: sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==}
engines: {node: '>=6.9.0'}
'@codemirror/autocomplete@6.18.6':
resolution: {integrity: sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==}
'@codemirror/commands@6.8.1':
resolution: {integrity: sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==}
'@codemirror/lang-css@6.3.1':
resolution: {integrity: sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==}
'@codemirror/lang-html@6.4.9':
resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
'@codemirror/lang-javascript@6.2.4':
resolution: {integrity: sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==}
'@codemirror/language@6.11.2':
resolution: {integrity: sha512-p44TsNArL4IVXDTbapUmEkAlvWs2CFQbcfc0ymDsis1kH2wh0gcY96AS29c/vp2d0y2Tquk1EDSaawpzilUiAw==}
'@codemirror/lint@6.8.5':
resolution: {integrity: sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==}
'@codemirror/state@6.5.2':
resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
'@codemirror/view@6.38.1':
resolution: {integrity: sha512-RmTOkE7hRU3OVREqFVITWHz6ocgBjv08GoePscAakgVQfciA3SGCEk7mb9IzwW61cKKmlTpHXG6DUE5Ubx+MGQ==}
'@codesandbox/nodebox@0.1.8':
resolution: {integrity: sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==}
'@codesandbox/sandpack-client@2.19.8':
resolution: {integrity: sha512-CMV4nr1zgKzVpx4I3FYvGRM5YT0VaQhALMW9vy4wZRhEyWAtJITQIqZzrTGWqB1JvV7V72dVEUCUPLfYz5hgJQ==}
'@codesandbox/sandpack-react@2.20.0':
resolution: {integrity: sha512-takd1YpW/PMQ6KPQfvseWLHWklJovGY8QYj8MtWnskGKbjOGJ6uZfyZbcJ6aCFLQMpNyjTqz9AKNbvhCOZ1TUQ==}
peerDependencies:
react: ^16.8.0 || ^17 || ^18 || ^19
react-dom: ^16.8.0 || ^17 || ^18 || ^19
'@codesandbox/sandpack-themes@2.0.21':
resolution: {integrity: sha512-CMH/MO/dh6foPYb/3eSn2Cu/J3+1+/81Fsaj7VggICkCrmRk0qG5dmgjGAearPTnRkOGORIPHuRqwNXgw0E6YQ==}
'@csstools/color-helpers@5.0.2':
resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==}
engines: {node: '>=18'}
@@ -467,6 +515,30 @@ packages:
'@jridgewell/trace-mapping@0.3.29':
resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
'@lezer/common@1.2.3':
resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
'@lezer/css@1.3.0':
resolution: {integrity: sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==}
'@lezer/highlight@1.2.1':
resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
'@lezer/html@1.3.10':
resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
'@lezer/javascript@1.5.1':
resolution: {integrity: sha512-ATOImjeVJuvgm3JQ/bpo2Tmv55HSScE2MTPnKRMRIPx2cLhHGyX2VnqpHhtIV1tVzIjZDbcWQm+NCTF40ggZVw==}
'@lezer/lr@1.4.2':
resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
'@marijn/find-cluster-break@1.0.2':
resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
'@open-draft/deferred-promise@2.2.0':
resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
'@radix-ui/number@1.1.1':
resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
@@ -1157,6 +1229,16 @@ packages:
'@radix-ui/rect@1.1.1':
resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
'@react-hook/intersection-observer@3.1.2':
resolution: {integrity: sha512-mWU3BMkmmzyYMSuhO9wu3eJVP21N8TcgYm9bZnTrMwuM818bEk+0NRM3hP+c/TqA9Ln5C7qE53p1H0QMtzYdvQ==}
peerDependencies:
react: '>=16.8'
'@react-hook/passive-layout-effect@1.2.1':
resolution: {integrity: sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==}
peerDependencies:
react: '>=16.8'
'@rolldown/pluginutils@1.0.0-beta.27':
resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
@@ -1269,6 +1351,9 @@ packages:
cpu: [x64]
os: [win32]
'@stitches/core@1.2.8':
resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
'@svgr/babel-plugin-add-jsx-attribute@8.0.0':
resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
engines: {node: '>=14'}
@@ -1610,6 +1695,9 @@ packages:
resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
engines: {node: '>= 14'}
anser@2.3.2:
resolution: {integrity: sha512-PMqBCBvrOVDRqLGooQb+z+t1Q0PiPyurUQeZRR5uHBOVZcW8B04KMmnT12USnhpNX2wCPagWzLVppQMUG3u0Dw==}
ansi-regex@5.0.1:
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
engines: {node: '>=8'}
@@ -1651,6 +1739,9 @@ packages:
babel-dead-code-elimination@1.0.10:
resolution: {integrity: sha512-DV5bdJZTzZ0zn0DC24v3jD7Mnidh6xhKa4GfKCbq3sfW8kaWhDdZjP3i81geA8T33tdYqWKw4D3fVv0CwEgKVA==}
base64-js@1.5.1:
resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
binary-extensions@2.3.0:
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
engines: {node: '>=8'}
@@ -1664,6 +1755,9 @@ packages:
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true
buffer@6.0.3:
resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
cac@6.7.14:
resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
engines: {node: '>=8'}
@@ -1702,6 +1796,9 @@ packages:
class-variance-authority@0.7.1:
resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
clean-set@1.1.2:
resolution: {integrity: sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==}
clsx@2.1.1:
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
engines: {node: '>=6'}
@@ -1728,6 +1825,9 @@ packages:
typescript:
optional: true
crelt@1.0.6:
resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
cssstyle@4.6.0:
resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
engines: {node: '>=18'}
@@ -1735,6 +1835,10 @@ packages:
csstype@3.1.3:
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
d@1.0.2:
resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
engines: {node: '>=0.12'}
data-urls@5.0.0:
resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
engines: {node: '>=18'}
@@ -1776,6 +1880,10 @@ packages:
dot-case@3.0.4:
resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
dotenv@16.6.1:
resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
engines: {node: '>=12'}
electron-to-chromium@1.5.187:
resolution: {integrity: sha512-cl5Jc9I0KGUoOoSbxvTywTa40uspGJt/BDBoDLoxJRSBpWh4FFXBsjNRHfQrONsV/OoEjDfHUmZQa2d6Ze4YgA==}
@@ -1797,6 +1905,17 @@ packages:
es-module-lexer@1.7.0:
resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
es5-ext@0.10.64:
resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
engines: {node: '>=0.10'}
es6-iterator@2.0.3:
resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
es6-symbol@3.1.4:
resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
engines: {node: '>=0.12'}
esbuild@0.25.6:
resolution: {integrity: sha512-GVuzuUwtdsghE3ocJ9Bs8PNoF13HNQ5TXbEi2AhvVb8xU1Iwt9Fos9FEamfoee+u/TOsn7GUWc04lz46n2bbTg==}
engines: {node: '>=18'}
@@ -1806,6 +1925,13 @@ packages:
resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
engines: {node: '>=6'}
escape-carriage@1.3.1:
resolution: {integrity: sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==}
esniff@2.0.1:
resolution: {integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==}
engines: {node: '>=0.10'}
esprima@4.0.1:
resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
engines: {node: '>=4'}
@@ -1817,10 +1943,16 @@ packages:
estree-walker@3.0.3:
resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
event-emitter@0.3.5:
resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
expect-type@1.2.2:
resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
engines: {node: '>=12.0.0'}
ext@1.7.0:
resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
fdir@6.4.6:
resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
peerDependencies:
@@ -1881,10 +2013,16 @@ packages:
resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
engines: {node: '>=0.10.0'}
ieee754@1.2.1:
resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
import-fresh@3.3.1:
resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
engines: {node: '>=6'}
intersection-observer@0.10.0:
resolution: {integrity: sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==}
is-arrayish@0.2.1:
resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
@@ -2033,6 +2171,10 @@ packages:
magic-string@0.30.17:
resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
mime-db@1.54.0:
resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
engines: {node: '>= 0.6'}
minipass@7.1.2:
resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
engines: {node: '>=16 || 14 >=14.17'}
@@ -2070,6 +2212,9 @@ packages:
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
next-tick@1.1.0:
resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
no-case@3.0.4:
resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
@@ -2083,6 +2228,9 @@ packages:
nwsapi@2.2.20:
resolution: {integrity: sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==}
outvariant@1.4.0:
resolution: {integrity: sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==}
parent-module@1.0.1:
resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
engines: {node: '>=6'}
@@ -2146,6 +2294,9 @@ packages:
'@types/react-dom':
optional: true
react-devtools-inline@4.4.0:
resolution: {integrity: sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==}
react-dom@19.1.0:
resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
peerDependencies:
@@ -2263,12 +2414,21 @@ packages:
stackback@0.0.2:
resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
static-browser-server@1.0.3:
resolution: {integrity: sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==}
std-env@3.9.0:
resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
strict-event-emitter@0.4.6:
resolution: {integrity: sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==}
strip-literal@3.0.0:
resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
style-mod@4.1.2:
resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
supports-color@7.2.0:
resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
engines: {node: '>=8'}
@@ -2348,6 +2508,9 @@ packages:
engines: {node: '>=18.0.0'}
hasBin: true
type@2.7.3:
resolution: {integrity: sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==}
typescript@5.8.3:
resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
engines: {node: '>=14.17'}
@@ -2469,6 +2632,9 @@ packages:
jsdom:
optional: true
w3c-keyname@2.2.8:
resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
w3c-xmlserializer@5.0.0:
resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
engines: {node: '>=18'}
@@ -2742,6 +2908,116 @@ snapshots:
'@babel/helper-string-parser': 7.27.1
'@babel/helper-validator-identifier': 7.27.1
'@codemirror/autocomplete@6.18.6':
dependencies:
'@codemirror/language': 6.11.2
'@codemirror/state': 6.5.2
'@codemirror/view': 6.38.1
'@lezer/common': 1.2.3
'@codemirror/commands@6.8.1':
dependencies:
'@codemirror/language': 6.11.2
'@codemirror/state': 6.5.2
'@codemirror/view': 6.38.1
'@lezer/common': 1.2.3
'@codemirror/lang-css@6.3.1':
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/language': 6.11.2
'@codemirror/state': 6.5.2
'@lezer/common': 1.2.3
'@lezer/css': 1.3.0
'@codemirror/lang-html@6.4.9':
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/lang-css': 6.3.1
'@codemirror/lang-javascript': 6.2.4
'@codemirror/language': 6.11.2
'@codemirror/state': 6.5.2
'@codemirror/view': 6.38.1
'@lezer/common': 1.2.3
'@lezer/css': 1.3.0
'@lezer/html': 1.3.10
'@codemirror/lang-javascript@6.2.4':
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/language': 6.11.2
'@codemirror/lint': 6.8.5
'@codemirror/state': 6.5.2
'@codemirror/view': 6.38.1
'@lezer/common': 1.2.3
'@lezer/javascript': 1.5.1
'@codemirror/language@6.11.2':
dependencies:
'@codemirror/state': 6.5.2
'@codemirror/view': 6.38.1
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
style-mod: 4.1.2
'@codemirror/lint@6.8.5':
dependencies:
'@codemirror/state': 6.5.2
'@codemirror/view': 6.38.1
crelt: 1.0.6
'@codemirror/state@6.5.2':
dependencies:
'@marijn/find-cluster-break': 1.0.2
'@codemirror/view@6.38.1':
dependencies:
'@codemirror/state': 6.5.2
crelt: 1.0.6
style-mod: 4.1.2
w3c-keyname: 2.2.8
'@codesandbox/nodebox@0.1.8':
dependencies:
outvariant: 1.4.0
strict-event-emitter: 0.4.6
'@codesandbox/sandpack-client@2.19.8':
dependencies:
'@codesandbox/nodebox': 0.1.8
buffer: 6.0.3
dequal: 2.0.3
mime-db: 1.54.0
outvariant: 1.4.0
static-browser-server: 1.0.3
'@codesandbox/sandpack-react@2.20.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@codemirror/autocomplete': 6.18.6
'@codemirror/commands': 6.8.1
'@codemirror/lang-css': 6.3.1
'@codemirror/lang-html': 6.4.9
'@codemirror/lang-javascript': 6.2.4
'@codemirror/language': 6.11.2
'@codemirror/state': 6.5.2
'@codemirror/view': 6.38.1
'@codesandbox/sandpack-client': 2.19.8
'@lezer/highlight': 1.2.1
'@react-hook/intersection-observer': 3.1.2(react@19.1.0)
'@stitches/core': 1.2.8
anser: 2.3.2
clean-set: 1.1.2
dequal: 2.0.3
escape-carriage: 1.3.1
lz-string: 1.5.0
react: 19.1.0
react-devtools-inline: 4.4.0
react-dom: 19.1.0(react@19.1.0)
react-is: 17.0.2
'@codesandbox/sandpack-themes@2.0.21': {}
'@csstools/color-helpers@5.0.2': {}
'@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
@@ -2875,6 +3151,38 @@ snapshots:
'@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.4
'@lezer/common@1.2.3': {}
'@lezer/css@1.3.0':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
'@lezer/highlight@1.2.1':
dependencies:
'@lezer/common': 1.2.3
'@lezer/html@1.3.10':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
'@lezer/javascript@1.5.1':
dependencies:
'@lezer/common': 1.2.3
'@lezer/highlight': 1.2.1
'@lezer/lr': 1.4.2
'@lezer/lr@1.4.2':
dependencies:
'@lezer/common': 1.2.3
'@marijn/find-cluster-break@1.0.2': {}
'@open-draft/deferred-promise@2.2.0': {}
'@radix-ui/number@1.1.1': {}
'@radix-ui/primitive@1.1.2': {}
@@ -3622,6 +3930,16 @@ snapshots:
'@radix-ui/rect@1.1.1': {}
'@react-hook/intersection-observer@3.1.2(react@19.1.0)':
dependencies:
'@react-hook/passive-layout-effect': 1.2.1(react@19.1.0)
intersection-observer: 0.10.0
react: 19.1.0
'@react-hook/passive-layout-effect@1.2.1(react@19.1.0)':
dependencies:
react: 19.1.0
'@rolldown/pluginutils@1.0.0-beta.27': {}
'@rollup/pluginutils@5.2.0(rollup@4.45.1)':
@@ -3692,6 +4010,8 @@ snapshots:
'@rollup/rollup-win32-x64-msvc@4.45.1':
optional: true
'@stitches/core@1.2.8': {}
'@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.28.0)':
dependencies:
'@babel/core': 7.28.0
@@ -4064,6 +4384,8 @@ snapshots:
agent-base@7.1.4: {}
anser@2.3.2: {}
ansi-regex@5.0.1: {}
ansi-styles@4.3.0:
@@ -4104,6 +4426,8 @@ snapshots:
transitivePeerDependencies:
- supports-color
base64-js@1.5.1: {}
binary-extensions@2.3.0: {}
braces@3.0.3:
@@ -4117,6 +4441,11 @@ snapshots:
node-releases: 2.0.19
update-browserslist-db: 1.1.3(browserslist@4.25.1)
buffer@6.0.3:
dependencies:
base64-js: 1.5.1
ieee754: 1.2.1
cac@6.7.14: {}
callsites@3.1.0: {}
@@ -4158,6 +4487,8 @@ snapshots:
dependencies:
clsx: 2.1.1
clean-set@1.1.2: {}
clsx@2.1.1: {}
color-convert@2.0.1:
@@ -4179,6 +4510,8 @@ snapshots:
optionalDependencies:
typescript: 5.8.3
crelt@1.0.6: {}
cssstyle@4.6.0:
dependencies:
'@asamuzakjp/css-color': 3.2.0
@@ -4186,6 +4519,11 @@ snapshots:
csstype@3.1.3: {}
d@1.0.2:
dependencies:
es5-ext: 0.10.64
type: 2.7.3
data-urls@5.0.0:
dependencies:
whatwg-mimetype: 4.0.0
@@ -4214,6 +4552,8 @@ snapshots:
no-case: 3.0.4
tslib: 2.8.1
dotenv@16.6.1: {}
electron-to-chromium@1.5.187: {}
enhanced-resolve@5.18.2:
@@ -4231,6 +4571,24 @@ snapshots:
es-module-lexer@1.7.0: {}
es5-ext@0.10.64:
dependencies:
es6-iterator: 2.0.3
es6-symbol: 3.1.4
esniff: 2.0.1
next-tick: 1.1.0
es6-iterator@2.0.3:
dependencies:
d: 1.0.2
es5-ext: 0.10.64
es6-symbol: 3.1.4
es6-symbol@3.1.4:
dependencies:
d: 1.0.2
ext: 1.7.0
esbuild@0.25.6:
optionalDependencies:
'@esbuild/aix-ppc64': 0.25.6
@@ -4262,6 +4620,15 @@ snapshots:
escalade@3.2.0: {}
escape-carriage@1.3.1: {}
esniff@2.0.1:
dependencies:
d: 1.0.2
es5-ext: 0.10.64
event-emitter: 0.3.5
type: 2.7.3
esprima@4.0.1: {}
estree-walker@2.0.2: {}
@@ -4270,8 +4637,17 @@ snapshots:
dependencies:
'@types/estree': 1.0.8
event-emitter@0.3.5:
dependencies:
d: 1.0.2
es5-ext: 0.10.64
expect-type@1.2.2: {}
ext@1.7.0:
dependencies:
type: 2.7.3
fdir@6.4.6(picomatch@4.0.3):
optionalDependencies:
picomatch: 4.0.3
@@ -4325,11 +4701,15 @@ snapshots:
dependencies:
safer-buffer: 2.1.2
ieee754@1.2.1: {}
import-fresh@3.3.1:
dependencies:
parent-module: 1.0.1
resolve-from: 4.0.0
intersection-observer@0.10.0: {}
is-arrayish@0.2.1: {}
is-binary-path@2.1.0:
@@ -4456,6 +4836,8 @@ snapshots:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.4
mime-db@1.54.0: {}
minipass@7.1.2: {}
minizlib@3.0.2:
@@ -4478,6 +4860,8 @@ snapshots:
nanoid@3.3.11: {}
next-tick@1.1.0: {}
no-case@3.0.4:
dependencies:
lower-case: 2.0.2
@@ -4489,6 +4873,8 @@ snapshots:
nwsapi@2.2.20: {}
outvariant@1.4.0: {}
parent-module@1.0.1:
dependencies:
callsites: 3.1.0
@@ -4595,6 +4981,10 @@ snapshots:
'@types/react': 19.1.8
'@types/react-dom': 19.1.6(@types/react@19.1.8)
react-devtools-inline@4.4.0:
dependencies:
es6-symbol: 3.1.4
react-dom@19.1.0(react@19.1.0):
dependencies:
react: 19.1.0
@@ -4714,12 +5104,23 @@ snapshots:
stackback@0.0.2: {}
static-browser-server@1.0.3:
dependencies:
'@open-draft/deferred-promise': 2.2.0
dotenv: 16.6.1
mime-db: 1.54.0
outvariant: 1.4.0
std-env@3.9.0: {}
strict-event-emitter@0.4.6: {}
strip-literal@3.0.0:
dependencies:
js-tokens: 9.0.1
style-mod@4.1.2: {}
supports-color@7.2.0:
dependencies:
has-flag: 4.0.0
@@ -4789,6 +5190,8 @@ snapshots:
optionalDependencies:
fsevents: 2.3.3
type@2.7.3: {}
typescript@5.8.3: {}
undici-types@7.8.0: {}
@@ -4913,6 +5316,8 @@ snapshots:
- tsx
- yaml
w3c-keyname@2.2.8: {}
w3c-xmlserializer@5.0.0:
dependencies:
xml-name-validator: 5.0.0

4
public/icons/Code.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.48002 8.82659L2.67189 12L6.48002 15.1735C6.55787 15.2358 6.62252 15.313 6.67017 15.4006C6.71781 15.4882 6.74751 15.5845 6.75752 15.6837C6.76753 15.7829 6.75765 15.8831 6.72846 15.9785C6.69927 16.0739 6.65135 16.1624 6.58751 16.2391C6.52368 16.3157 6.4452 16.3788 6.35667 16.4247C6.26815 16.4706 6.17135 16.4984 6.07195 16.5065C5.97255 16.5146 5.87254 16.5027 5.77777 16.4717C5.683 16.4406 5.59537 16.391 5.52002 16.3256L1.02002 12.5757C0.935581 12.5053 0.867647 12.4172 0.821028 12.3176C0.774409 12.2181 0.750244 12.1095 0.750244 11.9996C0.750244 11.8896 0.774409 11.781 0.821028 11.6815C0.867647 11.5819 0.935581 11.4938 1.02002 11.4235L5.52002 7.67346C5.67293 7.54616 5.87015 7.48481 6.0683 7.50292C6.26644 7.52103 6.44928 7.61711 6.57658 7.77002C6.70389 7.92294 6.76523 8.12016 6.74712 8.3183C6.72901 8.51645 6.63293 8.69928 6.48002 8.82659ZM22.98 11.4235L18.48 7.67346C18.4043 7.61043 18.3169 7.56292 18.2228 7.53366C18.1288 7.5044 18.0299 7.49396 17.9317 7.50292C17.8336 7.51189 17.7382 7.54009 17.651 7.58592C17.5638 7.63175 17.4865 7.69431 17.4235 7.77002C17.2962 7.92294 17.2348 8.12016 17.2529 8.3183C17.271 8.51645 17.3671 8.69928 17.52 8.82659L21.3281 12L17.52 15.1735C17.4422 15.2358 17.3775 15.313 17.3299 15.4006C17.2822 15.4882 17.2525 15.5845 17.2425 15.6837C17.2325 15.7829 17.2424 15.8831 17.2716 15.9785C17.3008 16.0739 17.3487 16.1624 17.4125 16.2391C17.4764 16.3157 17.5548 16.3788 17.6434 16.4247C17.7319 16.4706 17.8287 16.4984 17.9281 16.5065C18.0275 16.5146 18.1275 16.5027 18.2223 16.4717C18.317 16.4406 18.4047 16.391 18.48 16.3256L22.98 12.5757C23.0645 12.5053 23.1324 12.4172 23.179 12.3176C23.2256 12.2181 23.2498 12.1095 23.2498 11.9996C23.2498 11.8896 23.2256 11.781 23.179 11.6815C23.1324 11.5819 23.0645 11.4938 22.98 11.4235ZM15.256 3.04502C15.1634 3.01141 15.0651 2.99636 14.9667 3.00074C14.8683 3.00512 14.7717 3.02883 14.6825 3.07053C14.5932 3.11223 14.5131 3.1711 14.4466 3.24377C14.3801 3.31645 14.3286 3.4015 14.295 3.49409L8.29502 19.9941C8.26126 20.0867 8.2461 20.1851 8.25041 20.2836C8.25471 20.3821 8.2784 20.4788 8.32011 20.5681C8.36181 20.6575 8.42073 20.7377 8.49348 20.8043C8.56623 20.8708 8.65139 20.9224 8.74408 20.956C8.82625 20.9852 8.91282 21.0001 9.00002 21C9.15404 21 9.30433 20.9526 9.43046 20.8642C9.5566 20.7758 9.65246 20.6507 9.70502 20.506L15.705 4.00596C15.7386 3.91338 15.7537 3.81508 15.7493 3.71669C15.7449 3.61829 15.7212 3.52172 15.6795 3.43249C15.6378 3.34325 15.5789 3.26311 15.5063 3.19663C15.4336 3.13015 15.3485 3.07863 15.256 3.04502Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

4
public/icons/Preview.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5 3.75H4.5C3.90326 3.75 3.33097 3.98705 2.90901 4.40901C2.48705 4.83097 2.25 5.40326 2.25 6V16.5C2.25 17.0967 2.48705 17.669 2.90901 18.091C3.33097 18.5129 3.90326 18.75 4.5 18.75H19.5C20.0967 18.75 20.669 18.5129 21.091 18.091C21.5129 17.669 21.75 17.0967 21.75 16.5V6C21.75 5.40326 21.5129 4.83097 21.091 4.40901C20.669 3.98705 20.0967 3.75 19.5 3.75ZM20.25 16.5C20.25 16.6989 20.171 16.8897 20.0303 17.0303C19.8897 17.171 19.6989 17.25 19.5 17.25H4.5C4.30109 17.25 4.11032 17.171 3.96967 17.0303C3.82902 16.8897 3.75 16.6989 3.75 16.5V6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6V16.5ZM15.75 21C15.75 21.1989 15.671 21.3897 15.5303 21.5303C15.3897 21.671 15.1989 21.75 15 21.75H9C8.80109 21.75 8.61032 21.671 8.46967 21.5303C8.32902 21.3897 8.25 21.1989 8.25 21C8.25 20.8011 8.32902 20.6103 8.46967 20.4697C8.61032 20.329 8.80109 20.25 9 20.25H15C15.1989 20.25 15.3897 20.329 15.5303 20.4697C15.671 20.6103 15.75 20.8011 15.75 21Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

5
src/components/interaction-panel/chat.tsx
View File

@@ -5,6 +5,7 @@ import Paperclip from "@/icons/paperclip.svg?react";
import { cn } from "@/lib/utils";
import { useNavigate, useParams } from "@tanstack/react-router";
import { observer } from "mobx-react-lite";
import { useAccountStore } from "@/contexts/AccountContext";
import { Button } from "../ui/button";
@@ -39,6 +40,10 @@ const ChatInput = () => {
setShowShadow(el.scrollTop + el.clientHeight < el.scrollHeight);
};
export const Chat = observer(() => {
const { isSandboxOpen, setIsSandboxOpen, isMainMenuOpen, setIsMainMenuOpen } =
useAccountStore();
return (
<div
className="relative border border-[#E8E8E8] rounded-[16px] pt-4 pb-2 pl-4 pr-2 flex flex-col justify-between transition-all duration-200"

80
src/routes/interaction-panel/$id.tsx
View File

@@ -1,6 +1,17 @@
import { Chat } from "@/components/interaction-panel/chat";
import { Sandbox } from "@/components/interaction-panel/sandbox";
import { createFileRoute } from "@tanstack/react-router";
import {
SandpackCodeEditor,
SandpackCodeViewer,
SandpackFileExplorer,
SandpackLayout,
SandpackPreview,
SandpackProvider,
} from "@codesandbox/sandpack-react";
import { useAccountStore } from "@/contexts/AccountContext";
import { observer } from "mobx-react-lite";
import { useState } from "react";
export const Route = createFileRoute("/interaction-panel/$id")({
component: RouteComponent,
@@ -14,3 +25,70 @@ function RouteComponent() {
</div>
);
}
const Sandbox = observer(() => {
const { isSandboxOpen } = useAccountStore();
const [previewState, setPreviewState] = useState<"preview" | "code">(
"preview",
);
const togglePreviewState = () => {
setPreviewState((prev) => (prev === "preview" ? "code" : "preview"));
};
const files = {
"/test.js": `const test = "content"`,
};
return (
<div
data-open={isSandboxOpen}
className="w-0 border-l-1 p-0 px-2 pt-4 pb-2 font-work transition-all data-[open=true]:w-[40svw]"
>
<div className="flex h-full flex-col gap-4">
<div className="flex min-h-[42px] flex-row items-center justify-between">
<div className="flex h-full flex-row gap-0.5 rounded-lg bg-[#F5F5F5] p-0.5">
<button
type="button"
data-active={previewState === "preview"}
onClick={togglePreviewState}
className="group inline-flex cursor-pointer flex-row items-center justify-between gap-1 rounded-lg px-4 transition-all data-[active=true]:bg-[#D6D6D6]"
>
<div className="mask-[url('/icons/Preview.svg')] size-6 bg-[#939393] bg-center bg-cover transition-colors group-data-[active=true]:bg-black" />
Preview
</button>
<button
type="button"
data-active={previewState === "code"}
onClick={togglePreviewState}
className="group inline-flex cursor-pointer flex-row items-center justify-between gap-1 rounded-lg px-4 transition-all data-[active=true]:bg-[#D6D6D6]"
>
<div className="mask-[url('/icons/Code.svg')] size-6 bg-[#939393] bg-center bg-cover transition-colors group-data-[active=true]:bg-black" />
Code
</button>
</div>
</div>
<SandpackProvider files={{}} theme="light" template="react">
<SandpackLayout>
<div
data-active={previewState === "code"}
className="hidden w-full data-[active=true]:block"
>
<SandpackFileExplorer style={{ height: "100svh" }} />
<SandpackCodeEditor
closableTabs
showTabs
style={{ height: "100svh" }}
/>
</div>
<div
data-active={previewState === "preview"}
className="hidden w-full data-[active=true]:block"
>
<SandpackPreview style={{ height: "100svh" }} />
</div>
</SandpackLayout>
</SandpackProvider>
</div>
</div>
);
});

13
src/styles.css
View File

@@ -159,3 +159,16 @@ input:focus {
.toast-progress-animation {
animation: toast-progress 5s linear forwards;
}
.custom-wrapper {
height: 100%;
}
.custom-layout {
height: 100%;
}
.custom-file-explorer .custom-file-explorer-list {
height: 100%;
overflow: visible;
}