stable
This commit is contained in:
parent
b7614eb3f8
commit
db4ce8b14f
22 changed files with 3557 additions and 823 deletions
|
|
@ -18,6 +18,9 @@
|
|||
"enabled": true,
|
||||
"rules": {
|
||||
"recommended": true,
|
||||
"a11y": {
|
||||
"useGenericFontNames": "off"
|
||||
},
|
||||
"correctness": {
|
||||
"noUnusedVariables": "error",
|
||||
"noUnusedImports": "error",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"@biomejs/biome": "^2.4.6",
|
||||
"@preact/preset-vite": "^2.8.1",
|
||||
"@types/three": "^0.165.0",
|
||||
"knip": "^5.86.0",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.2.11",
|
||||
},
|
||||
|
|
@ -79,6 +80,12 @@
|
|||
|
||||
"@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@2.4.6", "", { "os": "win32", "cpu": "x64" }, "sha512-7++XhnsPlr1HDbor5amovPjOH6vsrFOCdp93iKXhFn6bcMUI6soodj3WWKfgEO6JosKU1W5n3uky3WW9RlRjTg=="],
|
||||
|
||||
"@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" } }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],
|
||||
|
||||
"@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
|
||||
|
||||
"@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.1.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ=="],
|
||||
|
||||
"@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.21.5", "", { "os": "aix", "cpu": "ppc64" }, "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ=="],
|
||||
|
||||
"@esbuild/android-arm": ["@esbuild/android-arm@0.21.5", "", { "os": "android", "cpu": "arm" }, "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg=="],
|
||||
|
|
@ -135,6 +142,54 @@
|
|||
|
||||
"@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
|
||||
|
||||
"@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.1", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@tybys/wasm-util": "^0.10.1" } }, "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A=="],
|
||||
|
||||
"@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
|
||||
|
||||
"@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
|
||||
|
||||
"@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
|
||||
|
||||
"@oxc-resolver/binding-android-arm-eabi": ["@oxc-resolver/binding-android-arm-eabi@11.19.1", "", { "os": "android", "cpu": "arm" }, "sha512-aUs47y+xyXHUKlbhqHUjBABjvycq6YSD7bpxSW7vplUmdzAlJ93yXY6ZR0c1o1x5A/QKbENCvs3+NlY8IpIVzg=="],
|
||||
|
||||
"@oxc-resolver/binding-android-arm64": ["@oxc-resolver/binding-android-arm64@11.19.1", "", { "os": "android", "cpu": "arm64" }, "sha512-oolbkRX+m7Pq2LNjr/kKgYeC7bRDMVTWPgxBGMjSpZi/+UskVo4jsMU3MLheZV55jL6c3rNelPl4oD60ggYmqA=="],
|
||||
|
||||
"@oxc-resolver/binding-darwin-arm64": ["@oxc-resolver/binding-darwin-arm64@11.19.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-nUC6d2i3R5B12sUW4O646qD5cnMXf2oBGPLIIeaRfU9doJRORAbE2SGv4eW6rMqhD+G7nf2Y8TTJTLiiO3Q/dQ=="],
|
||||
|
||||
"@oxc-resolver/binding-darwin-x64": ["@oxc-resolver/binding-darwin-x64@11.19.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-cV50vE5+uAgNcFa3QY1JOeKDSkM/9ReIcc/9wn4TavhW/itkDGrXhw9jaKnkQnGbjJ198Yh5nbX/Gr2mr4Z5jQ=="],
|
||||
|
||||
"@oxc-resolver/binding-freebsd-x64": ["@oxc-resolver/binding-freebsd-x64@11.19.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-xZOQiYGFxtk48PBKff+Zwoym7ScPAIVp4c14lfLxizO2LTTTJe5sx9vQNGrBymrf/vatSPNMD4FgsaaRigPkqw=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-arm-gnueabihf": ["@oxc-resolver/binding-linux-arm-gnueabihf@11.19.1", "", { "os": "linux", "cpu": "arm" }, "sha512-lXZYWAC6kaGe/ky2su94e9jN9t6M0/6c+GrSlCqL//XO1cxi5lpAhnJYdyrKfm0ZEr/c7RNyAx3P7FSBcBd5+A=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-arm-musleabihf": ["@oxc-resolver/binding-linux-arm-musleabihf@11.19.1", "", { "os": "linux", "cpu": "arm" }, "sha512-veG1kKsuK5+t2IsO9q0DErYVSw2azvCVvWHnfTOS73WE0STdLLB7Q1bB9WR+yHPQM76ASkFyRbogWo1GR1+WbQ=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-arm64-gnu": ["@oxc-resolver/binding-linux-arm64-gnu@11.19.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-heV2+jmXyYnUrpUXSPugqWDRpnsQcDm2AX4wzTuvgdlZfoNYO0O3W2AVpJYaDn9AG4JdM6Kxom8+foE7/BcSig=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-arm64-musl": ["@oxc-resolver/binding-linux-arm64-musl@11.19.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-jvo2Pjs1c9KPxMuMPIeQsgu0mOJF9rEb3y3TdpsrqwxRM+AN6/nDDwv45n5ZrUnQMsdBy5gIabioMKnQfWo9ew=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-ppc64-gnu": ["@oxc-resolver/binding-linux-ppc64-gnu@11.19.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-vLmdNxWCdN7Uo5suays6A/+ywBby2PWBBPXctWPg5V0+eVuzsJxgAn6MMB4mPlshskYbppjpN2Zg83ArHze9gQ=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-riscv64-gnu": ["@oxc-resolver/binding-linux-riscv64-gnu@11.19.1", "", { "os": "linux", "cpu": "none" }, "sha512-/b+WgR+VTSBxzgOhDO7TlMXC1ufPIMR6Vj1zN+/x+MnyXGW7prTLzU9eW85Aj7Th7CCEG9ArCbTeqxCzFWdg2w=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-riscv64-musl": ["@oxc-resolver/binding-linux-riscv64-musl@11.19.1", "", { "os": "linux", "cpu": "none" }, "sha512-YlRdeWb9j42p29ROh+h4eg/OQ3dTJlpHSa+84pUM9+p6i3djtPz1q55yLJhgW9XfDch7FN1pQ/Vd6YP+xfRIuw=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-s390x-gnu": ["@oxc-resolver/binding-linux-s390x-gnu@11.19.1", "", { "os": "linux", "cpu": "s390x" }, "sha512-EDpafVOQWF8/MJynsjOGFThcqhRHy417sRyLfQmeiamJ8qVhSKAn2Dn2VVKUGCjVB9C46VGjhNo7nOPUi1x6uA=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-x64-gnu": ["@oxc-resolver/binding-linux-x64-gnu@11.19.1", "", { "os": "linux", "cpu": "x64" }, "sha512-NxjZe+rqWhr+RT8/Ik+5ptA3oz7tUw361Wa5RWQXKnfqwSSHdHyrw6IdcTfYuml9dM856AlKWZIUXDmA9kkiBQ=="],
|
||||
|
||||
"@oxc-resolver/binding-linux-x64-musl": ["@oxc-resolver/binding-linux-x64-musl@11.19.1", "", { "os": "linux", "cpu": "x64" }, "sha512-cM/hQwsO3ReJg5kR+SpI69DMfvNCp+A/eVR4b4YClE5bVZwz8rh2Nh05InhwI5HR/9cArbEkzMjcKgTHS6UaNw=="],
|
||||
|
||||
"@oxc-resolver/binding-openharmony-arm64": ["@oxc-resolver/binding-openharmony-arm64@11.19.1", "", { "os": "none", "cpu": "arm64" }, "sha512-QF080IowFB0+9Rh6RcD19bdgh49BpQHUW5TajG1qvWHvmrQznTZZjYlgE2ltLXyKY+qs4F/v5xuX1XS7Is+3qA=="],
|
||||
|
||||
"@oxc-resolver/binding-wasm32-wasi": ["@oxc-resolver/binding-wasm32-wasi@11.19.1", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-w8UCKhX826cP/ZLokXDS6+milN8y4X7zidsAttEdWlVoamTNf6lhBJldaWr3ukTDiye7s4HRcuPEPOXNC432Vg=="],
|
||||
|
||||
"@oxc-resolver/binding-win32-arm64-msvc": ["@oxc-resolver/binding-win32-arm64-msvc@11.19.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-nJ4AsUVZrVKwnU/QRdzPCCrO0TrabBqgJ8pJhXITdZGYOV28TIYystV1VFLbQ7DtAcaBHpocT5/ZJnF78YJPtQ=="],
|
||||
|
||||
"@oxc-resolver/binding-win32-ia32-msvc": ["@oxc-resolver/binding-win32-ia32-msvc@11.19.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-EW+ND5q2Tl+a3pH81l1QbfgbF3HmqgwLfDfVithRFheac8OTcnbXt/JxqD2GbDkb7xYEqy1zNaVFRr3oeG8npA=="],
|
||||
|
||||
"@oxc-resolver/binding-win32-x64-msvc": ["@oxc-resolver/binding-win32-x64-msvc@11.19.1", "", { "os": "win32", "cpu": "x64" }, "sha512-6hIU3RQu45B+VNTY4Ru8ppFwjVS/S5qwYyGhBotmjxfEKk41I2DlGtRfGJndZ5+6lneE2pwloqunlOyZuX/XAw=="],
|
||||
|
||||
"@preact/preset-vite": ["@preact/preset-vite@2.10.3", "", { "dependencies": { "@babel/plugin-transform-react-jsx": "^7.27.1", "@babel/plugin-transform-react-jsx-development": "^7.27.1", "@prefresh/vite": "^2.4.11", "@rollup/pluginutils": "^5.0.0", "babel-plugin-transform-hook-names": "^1.0.2", "debug": "^4.4.3", "picocolors": "^1.1.1", "vite-prerender-plugin": "^0.5.8" }, "peerDependencies": { "@babel/core": "7.x", "vite": "2.x || 3.x || 4.x || 5.x || 6.x || 7.x" } }, "sha512-1SiS+vFItpkNdBs7q585PSAIln0wBeBdcpJYbzPs1qipsb/FssnkUioNXuRsb8ZnU8YEQHr+3v8+/mzWSnTQmg=="],
|
||||
|
||||
"@prefresh/babel-plugin": ["@prefresh/babel-plugin@0.5.3", "", {}, "sha512-57LX2SHs4BX2s1IwCjNzTE2OJeEepRCNf1VTEpbNcUyHfMO68eeOWGDIt4ob9aYlW6PEWZ1SuwNikuoIXANDtQ=="],
|
||||
|
|
@ -199,8 +254,12 @@
|
|||
|
||||
"@tweenjs/tween.js": ["@tweenjs/tween.js@23.1.3", "", {}, "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA=="],
|
||||
|
||||
"@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
|
||||
|
||||
"@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
|
||||
|
||||
"@types/node": ["@types/node@25.3.5", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-oX8xrhvpiyRCQkG1MFchB09f+cXftgIXb3a7UUa4Y3wpmZPw5tyZGTLWhlESOLq1Rq6oDlc8npVU2/9xiCuXMA=="],
|
||||
|
||||
"@types/stats.js": ["@types/stats.js@0.17.4", "", {}, "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA=="],
|
||||
|
||||
"@types/three": ["@types/three@0.165.0", "", { "dependencies": { "@tweenjs/tween.js": "~23.1.1", "@types/stats.js": "*", "@types/webxr": "*", "fflate": "~0.8.2", "meshoptimizer": "~0.18.1" } }, "sha512-AJK8JZAFNBF0kBXiAIl5pggYlzAGGA8geVYQXAcPCEDRbyA+oEjkpUBcJJrtNz6IiALwzGexFJGZG2yV3WsYBw=="],
|
||||
|
|
@ -213,6 +272,8 @@
|
|||
|
||||
"boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
|
||||
|
||||
"braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
|
||||
|
||||
"browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="],
|
||||
|
||||
"caniuse-lite": ["caniuse-lite@1.0.30001777", "", {}, "sha512-tmN+fJxroPndC74efCdp12j+0rk0RHwV5Jwa1zWaFVyw2ZxAuPeG8ZgWC3Wz7uSjT3qMRQ5XHZ4COgQmsCMJAQ=="],
|
||||
|
|
@ -243,20 +304,42 @@
|
|||
|
||||
"estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
|
||||
|
||||
"fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
|
||||
|
||||
"fastq": ["fastq@1.20.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw=="],
|
||||
|
||||
"fd-package-json": ["fd-package-json@2.0.0", "", { "dependencies": { "walk-up-path": "^4.0.0" } }, "sha512-jKmm9YtsNXN789RS/0mSzOC1NUq9mkVd65vbSSVsKdjGvYXBuE4oWe2QOEoFeRmJg+lPuZxpmrfFclNhoRMneQ=="],
|
||||
|
||||
"fflate": ["fflate@0.8.2", "", {}, "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="],
|
||||
|
||||
"fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
|
||||
|
||||
"formatly": ["formatly@0.3.0", "", { "dependencies": { "fd-package-json": "^2.0.0" }, "bin": { "formatly": "bin/index.mjs" } }, "sha512-9XNj/o4wrRFyhSMJOvsuyMwy8aUfBaZ1VrqHVfohyXf0Sw0e+yfKG+xZaY3arGCOMdwFsqObtzVOc1gU9KiT9w=="],
|
||||
|
||||
"fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
|
||||
|
||||
"gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
|
||||
|
||||
"glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
|
||||
|
||||
"he": ["he@1.2.0", "", { "bin": { "he": "bin/he" } }, "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="],
|
||||
|
||||
"is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
|
||||
|
||||
"is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
|
||||
|
||||
"is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
|
||||
|
||||
"jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
|
||||
|
||||
"js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
|
||||
|
||||
"jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
|
||||
|
||||
"json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
|
||||
|
||||
"knip": ["knip@5.86.0", "", { "dependencies": { "@nodelib/fs.walk": "^1.2.3", "fast-glob": "^3.3.3", "formatly": "^0.3.0", "jiti": "^2.6.0", "minimist": "^1.2.8", "oxc-resolver": "^11.19.1", "picocolors": "^1.1.1", "picomatch": "^4.0.1", "smol-toml": "^1.5.2", "strip-json-comments": "5.0.3", "unbash": "^2.2.0", "yaml": "^2.8.2", "zod": "^4.1.11" }, "peerDependencies": { "@types/node": ">=18", "typescript": ">=5.0.4 <7" }, "bin": { "knip": "bin/knip.js", "knip-bun": "bin/knip-bun.js" } }, "sha512-tGpRCbP+L+VysXnAp1bHTLQ0k/SdC3M3oX18+Cpiqax1qdS25iuCPzpK8LVmAKARZv0Ijri81Wq09Rzk0JTl+Q=="],
|
||||
|
||||
"kolorist": ["kolorist@1.8.0", "", {}, "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ=="],
|
||||
|
||||
"lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
|
||||
|
|
@ -265,8 +348,14 @@
|
|||
|
||||
"marked": ["marked@12.0.2", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q=="],
|
||||
|
||||
"merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
|
||||
|
||||
"meshoptimizer": ["meshoptimizer@0.18.1", "", {}, "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw=="],
|
||||
|
||||
"micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
|
||||
|
||||
"minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
|
||||
|
||||
"ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
|
||||
|
||||
"nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
|
||||
|
|
@ -277,6 +366,8 @@
|
|||
|
||||
"nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],
|
||||
|
||||
"oxc-resolver": ["oxc-resolver@11.19.1", "", { "optionalDependencies": { "@oxc-resolver/binding-android-arm-eabi": "11.19.1", "@oxc-resolver/binding-android-arm64": "11.19.1", "@oxc-resolver/binding-darwin-arm64": "11.19.1", "@oxc-resolver/binding-darwin-x64": "11.19.1", "@oxc-resolver/binding-freebsd-x64": "11.19.1", "@oxc-resolver/binding-linux-arm-gnueabihf": "11.19.1", "@oxc-resolver/binding-linux-arm-musleabihf": "11.19.1", "@oxc-resolver/binding-linux-arm64-gnu": "11.19.1", "@oxc-resolver/binding-linux-arm64-musl": "11.19.1", "@oxc-resolver/binding-linux-ppc64-gnu": "11.19.1", "@oxc-resolver/binding-linux-riscv64-gnu": "11.19.1", "@oxc-resolver/binding-linux-riscv64-musl": "11.19.1", "@oxc-resolver/binding-linux-s390x-gnu": "11.19.1", "@oxc-resolver/binding-linux-x64-gnu": "11.19.1", "@oxc-resolver/binding-linux-x64-musl": "11.19.1", "@oxc-resolver/binding-openharmony-arm64": "11.19.1", "@oxc-resolver/binding-wasm32-wasi": "11.19.1", "@oxc-resolver/binding-win32-arm64-msvc": "11.19.1", "@oxc-resolver/binding-win32-ia32-msvc": "11.19.1", "@oxc-resolver/binding-win32-x64-msvc": "11.19.1" } }, "sha512-qE/CIg/spwrTBFt5aKmwe3ifeDdLfA2NESN30E42X/lII5ClF8V7Wt6WIJhcGZjp0/Q+nQ+9vgxGk//xZNX2hg=="],
|
||||
|
||||
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
|
||||
|
||||
"picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
|
||||
|
|
@ -285,32 +376,58 @@
|
|||
|
||||
"preact": ["preact@10.28.4", "", {}, "sha512-uKFfOHWuSNpRFVTnljsCluEFq57OKT+0QdOiQo8XWnQ/pSvg7OpX5eNOejELXJMWy+BwM2nobz0FkvzmnpCNsQ=="],
|
||||
|
||||
"queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
|
||||
|
||||
"reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
|
||||
|
||||
"rollup": ["rollup@4.59.0", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.59.0", "@rollup/rollup-android-arm64": "4.59.0", "@rollup/rollup-darwin-arm64": "4.59.0", "@rollup/rollup-darwin-x64": "4.59.0", "@rollup/rollup-freebsd-arm64": "4.59.0", "@rollup/rollup-freebsd-x64": "4.59.0", "@rollup/rollup-linux-arm-gnueabihf": "4.59.0", "@rollup/rollup-linux-arm-musleabihf": "4.59.0", "@rollup/rollup-linux-arm64-gnu": "4.59.0", "@rollup/rollup-linux-arm64-musl": "4.59.0", "@rollup/rollup-linux-loong64-gnu": "4.59.0", "@rollup/rollup-linux-loong64-musl": "4.59.0", "@rollup/rollup-linux-ppc64-gnu": "4.59.0", "@rollup/rollup-linux-ppc64-musl": "4.59.0", "@rollup/rollup-linux-riscv64-gnu": "4.59.0", "@rollup/rollup-linux-riscv64-musl": "4.59.0", "@rollup/rollup-linux-s390x-gnu": "4.59.0", "@rollup/rollup-linux-x64-gnu": "4.59.0", "@rollup/rollup-linux-x64-musl": "4.59.0", "@rollup/rollup-openbsd-x64": "4.59.0", "@rollup/rollup-openharmony-arm64": "4.59.0", "@rollup/rollup-win32-arm64-msvc": "4.59.0", "@rollup/rollup-win32-ia32-msvc": "4.59.0", "@rollup/rollup-win32-x64-gnu": "4.59.0", "@rollup/rollup-win32-x64-msvc": "4.59.0", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg=="],
|
||||
|
||||
"run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
|
||||
|
||||
"semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
|
||||
|
||||
"simple-code-frame": ["simple-code-frame@1.3.0", "", { "dependencies": { "kolorist": "^1.6.0" } }, "sha512-MB4pQmETUBlNs62BBeRjIFGeuy/x6gGKh7+eRUemn1rCFhqo7K+4slPqsyizCbcbYLnaYqaoZ2FWsZ/jN06D8w=="],
|
||||
|
||||
"smol-toml": ["smol-toml@1.6.0", "", {}, "sha512-4zemZi0HvTnYwLfrpk/CF9LOd9Lt87kAt50GnqhMpyF9U3poDAP2+iukq2bZsO/ufegbYehBkqINbsWxj4l4cw=="],
|
||||
|
||||
"source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],
|
||||
|
||||
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
|
||||
|
||||
"stack-trace": ["stack-trace@1.0.0-pre2", "", {}, "sha512-2ztBJRek8IVofG9DBJqdy2N5kulaacX30Nz7xmkYF6ale9WBVmIy6mFBchvGX7Vx/MyjBhx+Rcxqrj+dbOnQ6A=="],
|
||||
|
||||
"strip-json-comments": ["strip-json-comments@5.0.3", "", {}, "sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw=="],
|
||||
|
||||
"three": ["three@0.165.0", "", {}, "sha512-cc96IlVYGydeceu0e5xq70H8/yoVT/tXBxV/W8A/U6uOq7DXc4/s1Mkmnu6SqoYGhSRWWYFOhVwvq6V0VtbplA=="],
|
||||
|
||||
"to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
|
||||
|
||||
"tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
|
||||
|
||||
"typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
|
||||
|
||||
"unbash": ["unbash@2.2.0", "", {}, "sha512-X2wH19RAPZE3+ldGicOkoj/SIA83OIxcJ6Cuaw23hf8Xc6fQpvZXY0SftE2JgS0QhYLUG4uwodSI3R53keyh7w=="],
|
||||
|
||||
"undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
|
||||
|
||||
"update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
|
||||
|
||||
"vite": ["vite@5.4.21", "", { "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", "rollup": "^4.20.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || >=20.0.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser"], "bin": { "vite": "bin/vite.js" } }, "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw=="],
|
||||
|
||||
"vite-prerender-plugin": ["vite-prerender-plugin@0.5.12", "", { "dependencies": { "kolorist": "^1.8.0", "magic-string": "0.x >= 0.26.0", "node-html-parser": "^6.1.12", "simple-code-frame": "^1.3.0", "source-map": "^0.7.4", "stack-trace": "^1.0.0-pre2" }, "peerDependencies": { "vite": "5.x || 6.x || 7.x" } }, "sha512-EiwhbMn+flg14EysbLTmZSzq8NGTxhytgK3bf4aGRF1evWLGwZiHiUJ1KZDvbxgKbMf2pG6fJWGEa3UZXOnR1g=="],
|
||||
|
||||
"walk-up-path": ["walk-up-path@4.0.0", "", {}, "sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A=="],
|
||||
|
||||
"yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
|
||||
|
||||
"yaml": ["yaml@2.8.2", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A=="],
|
||||
|
||||
"zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
|
||||
|
||||
"@prefresh/vite/@rollup/pluginutils": ["@rollup/pluginutils@4.2.1", "", { "dependencies": { "estree-walker": "^2.0.1", "picomatch": "^2.2.2" } }, "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ=="],
|
||||
|
||||
"micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
|
||||
|
||||
"@prefresh/vite/@rollup/pluginutils/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"@biomejs/biome": "^2.4.6",
|
||||
"@preact/preset-vite": "^2.8.1",
|
||||
"@types/three": "^0.165.0",
|
||||
"knip": "^5.86.0",
|
||||
"typescript": "^5.4.5",
|
||||
"vite": "^5.2.11"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,61 +1,275 @@
|
|||
import { useCallback, useEffect } from "preact/hooks";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
|
||||
import { AgentIndicator } from "./components/AgentIndicator";
|
||||
import { CardFeed } from "./components/CardFeed";
|
||||
import { ControlBar, VoiceStatus } from "./components/Controls";
|
||||
import { LogPanel } from "./components/LogPanel";
|
||||
import { ToastContainer } from "./components/Toast";
|
||||
import { useAudioMeter } from "./hooks/useAudioMeter";
|
||||
import { usePTT } from "./hooks/usePTT";
|
||||
import { useWebRTC } from "./hooks/useWebRTC";
|
||||
import type { CardItem, CardMessageMetadata, JsonValue } from "./types";
|
||||
|
||||
export function App() {
|
||||
const rtc = useWebRTC();
|
||||
const audioLevel = useAudioMeter(rtc.remoteStream);
|
||||
const SWIPE_THRESHOLD_PX = 64;
|
||||
const SWIPE_DIRECTION_RATIO = 1.15;
|
||||
|
||||
const { agentStateOverride, handlePointerDown, handlePointerUp } = usePTT({
|
||||
connected: rtc.connected,
|
||||
onSendPtt: (pressed) => rtc.sendJson({ type: "voice-ptt", pressed }),
|
||||
onBootstrap: rtc.connect,
|
||||
});
|
||||
interface AppRtcActions {
|
||||
connect(): Promise<void>;
|
||||
sendJson(
|
||||
msg:
|
||||
| { type: "command"; command: string }
|
||||
| { type: "card-response"; card_id: string; value: string }
|
||||
| { type: "voice-ptt"; pressed: boolean; metadata?: CardMessageMetadata },
|
||||
): void;
|
||||
setTextOnly(enabled: boolean): void;
|
||||
sendTextMessage(text: string, metadata?: CardMessageMetadata): Promise<void>;
|
||||
connected: boolean;
|
||||
connecting: boolean;
|
||||
}
|
||||
|
||||
const effectiveAgentState = agentStateOverride ?? rtc.agentState;
|
||||
function buildCardMetadata(card: CardItem): CardMessageMetadata {
|
||||
const metadata: CardMessageMetadata = {
|
||||
card_id: card.serverId,
|
||||
card_slot: card.slot,
|
||||
card_title: card.title,
|
||||
card_lane: card.lane,
|
||||
card_template_key: card.templateKey,
|
||||
card_context_summary: card.contextSummary,
|
||||
card_response_value: card.responseValue,
|
||||
};
|
||||
const liveContent = card.serverId
|
||||
? window.__nanobotGetCardLiveContent?.(card.serverId)
|
||||
: undefined;
|
||||
if (liveContent !== undefined) metadata.card_live_content = liveContent as JsonValue;
|
||||
return metadata;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("pointerdown", handlePointerDown, { passive: false });
|
||||
document.addEventListener("pointerup", handlePointerUp, { passive: false });
|
||||
document.addEventListener("pointercancel", handlePointerUp, { passive: false });
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", handlePointerDown);
|
||||
document.removeEventListener("pointerup", handlePointerUp);
|
||||
document.removeEventListener("pointercancel", handlePointerUp);
|
||||
};
|
||||
}, [handlePointerDown, handlePointerUp]);
|
||||
function AgentCardContext({ card, onClear }: { card: CardItem; onClear(): void }) {
|
||||
return (
|
||||
<div id="agent-card-context" data-no-swipe="1">
|
||||
<div class="agent-card-context-label">Using card</div>
|
||||
<div class="agent-card-context-row">
|
||||
<div class="agent-card-context-title">{card.title}</div>
|
||||
<button
|
||||
class="agent-card-context-clear"
|
||||
type="button"
|
||||
aria-label="Clear selected card context"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onClear();
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function useSwipeHandlers(
|
||||
composing: boolean,
|
||||
view: "agent" | "feed",
|
||||
setView: (view: "agent" | "feed") => void,
|
||||
isInteractiveTarget: (target: EventTarget | null) => boolean,
|
||||
) {
|
||||
const swipeStartRef = useRef<{ x: number; y: number } | null>(null);
|
||||
|
||||
const onSwipeStart = useCallback(
|
||||
(e: Event) => {
|
||||
const pe = e as PointerEvent;
|
||||
if (composing) return;
|
||||
if (pe.pointerType === "mouse" && pe.button !== 0) return;
|
||||
if (isInteractiveTarget(pe.target)) return;
|
||||
swipeStartRef.current = { x: pe.clientX, y: pe.clientY };
|
||||
},
|
||||
[composing, isInteractiveTarget],
|
||||
);
|
||||
|
||||
const onSwipeEnd = useCallback(
|
||||
(e: Event) => {
|
||||
const pe = e as PointerEvent;
|
||||
const start = swipeStartRef.current;
|
||||
swipeStartRef.current = null;
|
||||
if (!start || composing) return;
|
||||
const dx = pe.clientX - start.x;
|
||||
const dy = pe.clientY - start.y;
|
||||
if (Math.abs(dx) < SWIPE_THRESHOLD_PX) return;
|
||||
if (Math.abs(dx) < Math.abs(dy) * SWIPE_DIRECTION_RATIO) return;
|
||||
if (view === "agent" && dx < 0) setView("feed");
|
||||
if (view === "feed" && dx > 0) setView("agent");
|
||||
},
|
||||
[composing, view, setView],
|
||||
);
|
||||
|
||||
return { onSwipeStart, onSwipeEnd };
|
||||
}
|
||||
|
||||
function useCardActions(
|
||||
setView: (view: "agent" | "feed") => void,
|
||||
setSelectedCardId: (cardId: string | null) => void,
|
||||
) {
|
||||
const handleAskCard = useCallback(
|
||||
(card: CardItem) => {
|
||||
if (!card.serverId) return;
|
||||
setSelectedCardId(card.serverId);
|
||||
setView("agent");
|
||||
},
|
||||
[setSelectedCardId, setView],
|
||||
);
|
||||
|
||||
return { handleAskCard };
|
||||
}
|
||||
|
||||
function useControlActions(rtc: AppRtcActions) {
|
||||
const handleReset = useCallback(async () => {
|
||||
const confirmed = window.confirm("Clear the current conversation context and start fresh?");
|
||||
if (!confirmed) return;
|
||||
await rtc.connect();
|
||||
rtc.sendJson({ type: "command", command: "reset" });
|
||||
}, [rtc]);
|
||||
|
||||
const handleChoice = useCallback(
|
||||
(requestId: string, value: string) => {
|
||||
rtc.sendJson({ type: "ui-response", request_id: requestId, value });
|
||||
const handleToggleTextOnly = useCallback(
|
||||
async (enabled: boolean) => {
|
||||
rtc.setTextOnly(enabled);
|
||||
if (enabled && !rtc.connected && !rtc.connecting) await rtc.connect();
|
||||
},
|
||||
[rtc],
|
||||
);
|
||||
|
||||
return { handleReset, handleToggleTextOnly };
|
||||
}
|
||||
|
||||
export function App() {
|
||||
const rtc = useWebRTC();
|
||||
const remoteAudioLevel = useAudioMeter(rtc.remoteStream);
|
||||
const audioLevel = rtc.textOnly ? 0 : remoteAudioLevel;
|
||||
|
||||
const [view, setView] = useState<"agent" | "feed">("agent");
|
||||
const [composing, setComposing] = useState(false);
|
||||
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
|
||||
const autoOpenedFeedRef = useRef(false);
|
||||
|
||||
const selectedCard = useMemo(
|
||||
() =>
|
||||
selectedCardId ? (rtc.cards.find((card) => card.serverId === selectedCardId) ?? null) : null,
|
||||
[rtc.cards, selectedCardId],
|
||||
);
|
||||
const selectedCardMetadata = useCallback(
|
||||
() => (selectedCard ? buildCardMetadata(selectedCard) : undefined),
|
||||
[selectedCard],
|
||||
);
|
||||
|
||||
const { agentStateOverride, handlePointerDown, handlePointerMove, handlePointerUp } = usePTT({
|
||||
connected: rtc.connected && !rtc.textOnly,
|
||||
onSendPtt: (pressed) =>
|
||||
rtc.sendJson({ type: "voice-ptt", pressed, metadata: selectedCardMetadata() }),
|
||||
onBootstrap: rtc.connect,
|
||||
});
|
||||
const effectiveAgentState = agentStateOverride ?? rtc.agentState;
|
||||
|
||||
const isInteractiveTarget = useCallback((target: EventTarget | null): boolean => {
|
||||
if (!(target instanceof Element)) return false;
|
||||
return Boolean(target.closest("button,textarea,input,a,[data-no-swipe='1']"));
|
||||
}, []);
|
||||
const { onSwipeStart, onSwipeEnd } = useSwipeHandlers(
|
||||
composing,
|
||||
view,
|
||||
setView,
|
||||
isInteractiveTarget,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("pointerdown", handlePointerDown, { passive: false });
|
||||
document.addEventListener("pointermove", handlePointerMove, { passive: true });
|
||||
document.addEventListener("pointerup", handlePointerUp, { passive: false });
|
||||
document.addEventListener("pointercancel", handlePointerUp, { passive: false });
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", handlePointerDown);
|
||||
document.removeEventListener("pointermove", handlePointerMove);
|
||||
document.removeEventListener("pointerup", handlePointerUp);
|
||||
document.removeEventListener("pointercancel", handlePointerUp);
|
||||
};
|
||||
}, [handlePointerDown, handlePointerMove, handlePointerUp]);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoOpenedFeedRef.current || rtc.cards.length === 0) return;
|
||||
autoOpenedFeedRef.current = true;
|
||||
setView("feed");
|
||||
}, [rtc.cards.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedCardId) return;
|
||||
if (rtc.cards.some((card) => card.serverId === selectedCardId)) return;
|
||||
setSelectedCardId(null);
|
||||
}, [rtc.cards, selectedCardId]);
|
||||
|
||||
const { handleToggleTextOnly } = useControlActions(rtc);
|
||||
const { handleAskCard } = useCardActions(setView, setSelectedCardId);
|
||||
|
||||
const handleCardChoice = useCallback(
|
||||
(cardId: string, value: string) => {
|
||||
rtc.sendJson({ type: "card-response", card_id: cardId, value });
|
||||
},
|
||||
[rtc],
|
||||
);
|
||||
const handleSendMessage = useCallback(
|
||||
async (text: string) => {
|
||||
await rtc.sendTextMessage(text, selectedCardMetadata());
|
||||
},
|
||||
[rtc, selectedCardMetadata],
|
||||
);
|
||||
const handleResetWithSelection = useCallback(async () => {
|
||||
const confirmed = window.confirm("Clear the current conversation context and start fresh?");
|
||||
if (!confirmed) return;
|
||||
setSelectedCardId(null);
|
||||
await rtc.connect();
|
||||
rtc.sendJson({ type: "command", command: "reset" });
|
||||
}, [rtc]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ControlBar onReset={handleReset} />
|
||||
<LogPanel lines={rtc.logLines} />
|
||||
<AgentIndicator
|
||||
state={effectiveAgentState}
|
||||
connected={rtc.connected}
|
||||
connecting={rtc.connecting}
|
||||
audioLevel={audioLevel}
|
||||
onPointerDown={() => {}}
|
||||
onPointerUp={() => {}}
|
||||
/>
|
||||
<div id="swipe-shell" onPointerDown={onSwipeStart} onPointerUp={onSwipeEnd}>
|
||||
<div id="swipe-track" class={view === "feed" ? "feed-active" : ""}>
|
||||
<section class="workspace-panel workspace-agent">
|
||||
{view === "agent" && (
|
||||
<ControlBar
|
||||
onReset={handleResetWithSelection}
|
||||
textOnly={rtc.textOnly}
|
||||
onToggleTextOnly={handleToggleTextOnly}
|
||||
/>
|
||||
)}
|
||||
{view === "agent" && selectedCard && (
|
||||
<AgentCardContext card={selectedCard} onClear={() => setSelectedCardId(null)} />
|
||||
)}
|
||||
{view === "agent" && (
|
||||
<LogPanel
|
||||
lines={rtc.logLines}
|
||||
disabled={!rtc.connected}
|
||||
onSendMessage={handleSendMessage}
|
||||
onExpandChange={setComposing}
|
||||
/>
|
||||
)}
|
||||
<AgentIndicator
|
||||
state={effectiveAgentState}
|
||||
connected={rtc.connected}
|
||||
connecting={rtc.connecting}
|
||||
audioLevel={audioLevel}
|
||||
viewActive
|
||||
onPointerDown={() => {}}
|
||||
onPointerUp={() => {}}
|
||||
/>
|
||||
</section>
|
||||
<section class="workspace-panel workspace-feed">
|
||||
<CardFeed
|
||||
cards={rtc.cards}
|
||||
viewActive
|
||||
onDismiss={rtc.dismissCard}
|
||||
onChoice={handleCardChoice}
|
||||
onAskCard={handleAskCard}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<VoiceStatus text={rtc.voiceStatus} visible={rtc.statusVisible} />
|
||||
<ToastContainer toasts={rtc.toasts} onDismiss={rtc.dismissToast} onChoice={handleChoice} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const AudioContextCtor =
|
|||
(window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext
|
||||
: undefined;
|
||||
|
||||
export interface AudioMeter {
|
||||
interface AudioMeter {
|
||||
connect(stream: MediaStream): void;
|
||||
getLevel(): number;
|
||||
destroy(): void;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ interface Props {
|
|||
connected: boolean;
|
||||
connecting: boolean;
|
||||
audioLevel: number;
|
||||
viewActive: boolean;
|
||||
onPointerDown(): void;
|
||||
onPointerUp(): void;
|
||||
}
|
||||
|
|
@ -16,6 +17,7 @@ export function AgentIndicator({
|
|||
connected,
|
||||
connecting,
|
||||
audioLevel,
|
||||
viewActive,
|
||||
onPointerDown,
|
||||
onPointerUp,
|
||||
}: Props) {
|
||||
|
|
@ -49,7 +51,11 @@ export function AgentIndicator({
|
|||
}, [audioLevel]);
|
||||
|
||||
return (
|
||||
<div id="agentIndicator" class={`agentIndicator visible ${state}`} data-ptt="1">
|
||||
<div
|
||||
id="agentIndicator"
|
||||
class={`agentIndicator${viewActive ? " visible" : ""} ${state}`}
|
||||
data-ptt="1"
|
||||
>
|
||||
<div
|
||||
id="agentViz"
|
||||
class="agentViz"
|
||||
|
|
|
|||
353
frontend/src/components/CardFeed.tsx
Normal file
353
frontend/src/components/CardFeed.tsx
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
import { marked } from "marked";
|
||||
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
|
||||
import type { CardItem, CardLane, JsonValue } from "../types";
|
||||
|
||||
const EXECUTABLE_SCRIPT_TYPES = new Set([
|
||||
"",
|
||||
"text/javascript",
|
||||
"application/javascript",
|
||||
"module",
|
||||
]);
|
||||
const cardLiveContentStore = new Map<string, JsonValue>();
|
||||
|
||||
function readCardState(script: HTMLScriptElement | null): Record<string, unknown> {
|
||||
const root = script?.closest("[data-nanobot-card-root]");
|
||||
if (!(root instanceof HTMLElement)) return {};
|
||||
|
||||
const stateEl = root.querySelector('script[data-card-state][type="application/json"]');
|
||||
if (!(stateEl instanceof HTMLScriptElement)) return {};
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(stateEl.textContent || "{}");
|
||||
return typeof parsed === "object" && parsed !== null ? (parsed as Record<string, unknown>) : {};
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function resolveCardRoot(target: HTMLScriptElement | HTMLElement | null): HTMLElement | null {
|
||||
if (!(target instanceof HTMLElement)) return null;
|
||||
if (target.matches("[data-nanobot-card-root]")) return target;
|
||||
return target.closest("[data-nanobot-card-root]");
|
||||
}
|
||||
|
||||
function setCardLiveContent(
|
||||
target: HTMLScriptElement | HTMLElement | null,
|
||||
snapshot: JsonValue | null | undefined,
|
||||
): void {
|
||||
const root = resolveCardRoot(target);
|
||||
const cardId = root?.dataset.cardId?.trim();
|
||||
if (!cardId) return;
|
||||
if (snapshot === null || snapshot === undefined) {
|
||||
cardLiveContentStore.delete(cardId);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
cardLiveContentStore.set(cardId, JSON.parse(JSON.stringify(snapshot)) as JsonValue);
|
||||
} catch {
|
||||
cardLiveContentStore.delete(cardId);
|
||||
}
|
||||
}
|
||||
|
||||
function getCardLiveContent(cardId: string | null | undefined): JsonValue | undefined {
|
||||
const key = (cardId || "").trim();
|
||||
if (!key) return undefined;
|
||||
const value = cardLiveContentStore.get(key);
|
||||
if (value === undefined) return undefined;
|
||||
try {
|
||||
return JSON.parse(JSON.stringify(value)) as JsonValue;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function ensureCardStateHelper(): void {
|
||||
if (!window.__nanobotGetCardState) {
|
||||
window.__nanobotGetCardState = readCardState;
|
||||
}
|
||||
if (!window.__nanobotSetCardLiveContent) {
|
||||
window.__nanobotSetCardLiveContent = setCardLiveContent;
|
||||
}
|
||||
if (!window.__nanobotGetCardLiveContent) {
|
||||
window.__nanobotGetCardLiveContent = getCardLiveContent;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
__nanobotGetCardState?: (script: HTMLScriptElement | null) => Record<string, unknown>;
|
||||
__nanobotSetCardLiveContent?: (
|
||||
target: HTMLScriptElement | HTMLElement | null,
|
||||
snapshot: JsonValue | null | undefined,
|
||||
) => void;
|
||||
__nanobotGetCardLiveContent?: (cardId: string | null | undefined) => JsonValue | undefined;
|
||||
}
|
||||
}
|
||||
|
||||
const LANE_TITLES: Record<CardLane, string> = {
|
||||
attention: "Attention",
|
||||
work: "Work",
|
||||
context: "Context",
|
||||
history: "History",
|
||||
};
|
||||
const LANE_ORDER: CardLane[] = ["attention", "work", "context", "history"];
|
||||
|
||||
interface CardProps {
|
||||
card: CardItem;
|
||||
onDismiss(id: number): void;
|
||||
onChoice(cardId: string, value: string): void;
|
||||
onAskCard(card: CardItem): void;
|
||||
}
|
||||
|
||||
function MoreIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="6" cy="12" r="1.75" fill="currentColor" />
|
||||
<circle cx="12" cy="12" r="1.75" fill="currentColor" />
|
||||
<circle cx="18" cy="12" r="1.75" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function CardTextBody({ card }: { card: CardItem }) {
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
ensureCardStateHelper();
|
||||
|
||||
const root = bodyRef.current;
|
||||
if (!root) return;
|
||||
const scripts = Array.from(root.querySelectorAll("script"));
|
||||
for (const oldScript of scripts) {
|
||||
const type = (oldScript.getAttribute("type") || "").trim().toLowerCase();
|
||||
if (!EXECUTABLE_SCRIPT_TYPES.has(type)) continue;
|
||||
const runtimeScript = document.createElement("script");
|
||||
for (const attr of oldScript.attributes) runtimeScript.setAttribute(attr.name, attr.value);
|
||||
runtimeScript.text = oldScript.textContent || "";
|
||||
oldScript.replaceWith(runtimeScript);
|
||||
}
|
||||
return () => {
|
||||
window.__nanobotSetCardLiveContent?.(bodyRef.current, null);
|
||||
};
|
||||
}, [card.id, card.content]);
|
||||
|
||||
const looksLikeHtml = /^\s*<[a-zA-Z]/.test(card.content);
|
||||
const html = looksLikeHtml ? card.content : (marked.parse(card.content) as string);
|
||||
return <div ref={bodyRef} class="card-body" dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
}
|
||||
|
||||
function CardQuestionBody({
|
||||
card,
|
||||
responding,
|
||||
onChoice,
|
||||
}: {
|
||||
card: CardItem;
|
||||
responding: boolean;
|
||||
onChoice(cardId: string, value: string): void;
|
||||
}) {
|
||||
const canAnswer = card.state === "active" && !responding && !!card.serverId;
|
||||
|
||||
return (
|
||||
<>
|
||||
{card.content && <div class="card-body">{card.content}</div>}
|
||||
<div class="card-question">{card.question}</div>
|
||||
<div class="card-choices">
|
||||
{(card.choices ?? []).map((label) => (
|
||||
<button
|
||||
key={label}
|
||||
class="card-choice-btn"
|
||||
type="button"
|
||||
disabled={!canAnswer}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (!card.serverId) return;
|
||||
onChoice(card.serverId, label);
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{card.responseValue && <div class="card-response">Selected: {card.responseValue}</div>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function CardHeader({
|
||||
card,
|
||||
onDismiss,
|
||||
onAskCard,
|
||||
}: {
|
||||
card: CardItem;
|
||||
onDismiss(): void;
|
||||
onAskCard(card: CardItem): void;
|
||||
}) {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!menuOpen) return;
|
||||
|
||||
const handlePointerDown = (event: PointerEvent) => {
|
||||
if (!(event.target instanceof Node)) return;
|
||||
if (menuRef.current?.contains(event.target)) return;
|
||||
setMenuOpen(false);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") setMenuOpen(false);
|
||||
};
|
||||
|
||||
document.addEventListener("pointerdown", handlePointerDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", handlePointerDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [menuOpen]);
|
||||
|
||||
return (
|
||||
<header class={`card-header${card.kind === "text" ? " floating" : ""}`}>
|
||||
{card.kind !== "text" && (
|
||||
<div class="card-title-wrap">
|
||||
<div class="card-title-line">
|
||||
{card.title && <span class="card-title">{card.title}</span>}
|
||||
</div>
|
||||
<div class="card-meta">
|
||||
{card.state !== "active" && (
|
||||
<span class={`card-state state-${card.state}`}>{card.state}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div ref={menuRef} class="card-menu-wrap">
|
||||
<button
|
||||
class={`card-menu-trigger${menuOpen ? " open" : ""}`}
|
||||
type="button"
|
||||
aria-label="Card actions"
|
||||
aria-expanded={menuOpen}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setMenuOpen((current) => !current);
|
||||
}}
|
||||
>
|
||||
<MoreIcon />
|
||||
</button>
|
||||
{menuOpen && (
|
||||
<div class="card-menu" role="menu">
|
||||
{card.kind === "text" && (
|
||||
<button
|
||||
class="card-menu-item"
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setMenuOpen(false);
|
||||
onAskCard(card);
|
||||
}}
|
||||
>
|
||||
Ask Nanobot
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
class="card-menu-item danger"
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setMenuOpen(false);
|
||||
onDismiss();
|
||||
}}
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function Card({ card, onDismiss, onChoice, onAskCard }: CardProps) {
|
||||
const [dismissing, setDismissing] = useState(false);
|
||||
const [responding, setResponding] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (card.state !== "active") setResponding(false);
|
||||
}, [card.state]);
|
||||
|
||||
const dismiss = () => {
|
||||
if (dismissing) return;
|
||||
setDismissing(true);
|
||||
timerRef.current = setTimeout(() => onDismiss(card.id), 220);
|
||||
};
|
||||
|
||||
return (
|
||||
<article class={`card kind-${card.kind}${dismissing ? " dismissing" : ""} state-${card.state}`}>
|
||||
<CardHeader card={card} onDismiss={dismiss} onAskCard={onAskCard} />
|
||||
{card.kind === "text" ? (
|
||||
<CardTextBody card={card} />
|
||||
) : (
|
||||
<CardQuestionBody
|
||||
card={card}
|
||||
responding={responding}
|
||||
onChoice={(cardId, value) => {
|
||||
setResponding(true);
|
||||
onChoice(cardId, value);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{card.contextSummary && card.kind !== "text" && (
|
||||
<footer class="card-footer">{card.contextSummary}</footer>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
interface CardFeedProps {
|
||||
cards: CardItem[];
|
||||
viewActive: boolean;
|
||||
onDismiss(id: number): void;
|
||||
onChoice(cardId: string, value: string): void;
|
||||
onAskCard(card: CardItem): void;
|
||||
}
|
||||
|
||||
export function CardFeed({ cards, viewActive, onDismiss, onChoice, onAskCard }: CardFeedProps) {
|
||||
const groups = useMemo(
|
||||
() =>
|
||||
LANE_ORDER.map((lane) => ({
|
||||
lane,
|
||||
title: LANE_TITLES[lane],
|
||||
cards: cards.filter((card) => card.lane === lane),
|
||||
})).filter((group) => group.cards.length > 0),
|
||||
[cards],
|
||||
);
|
||||
|
||||
return (
|
||||
<div id="card-feed" class={viewActive ? "feed-view" : ""}>
|
||||
{groups.map((group) => (
|
||||
<section key={group.lane} class="card-group">
|
||||
<div class="card-group-title">{group.title}</div>
|
||||
<div class="card-group-list">
|
||||
{group.cards.map((card) => (
|
||||
<Card
|
||||
key={card.id}
|
||||
card={card}
|
||||
onDismiss={onDismiss}
|
||||
onChoice={onChoice}
|
||||
onAskCard={onAskCard}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,6 +3,63 @@ interface VoiceStatusProps {
|
|||
visible: boolean;
|
||||
}
|
||||
|
||||
function SpeakerIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M5 9v6h4l5 4V5L9 9H5Z" fill="currentColor" />
|
||||
<path
|
||||
d="M17 9.5a4 4 0 0 1 0 5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-width="1.8"
|
||||
/>
|
||||
<path
|
||||
d="M18.8 7a7 7 0 0 1 0 10"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-width="1.8"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function TextBubbleIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M6 7.5h12a2.5 2.5 0 0 1 2.5 2.5v5A2.5 2.5 0 0 1 18 17.5H11l-4.5 3v-3H6A2.5 2.5 0 0 1 3.5 15v-5A2.5 2.5 0 0 1 6 7.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path d="M8 11h8" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
|
||||
<path d="M8 14h5" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="1.5" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ResetIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M6.5 8A7 7 0 1 1 5 12"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-width="1.9"
|
||||
/>
|
||||
<path
|
||||
d="M6.5 4.5V8H10"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.9"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function VoiceStatus({ text, visible }: VoiceStatusProps) {
|
||||
return (
|
||||
<div id="voiceStatus" class={visible ? "visible" : ""}>
|
||||
|
|
@ -13,22 +70,52 @@ export function VoiceStatus({ text, visible }: VoiceStatusProps) {
|
|||
|
||||
interface ControlBarProps {
|
||||
onReset(): void;
|
||||
textOnly: boolean;
|
||||
onToggleTextOnly(enabled: boolean): void;
|
||||
}
|
||||
|
||||
export function ControlBar({ onReset }: ControlBarProps) {
|
||||
export function ControlBar({ onReset, textOnly, onToggleTextOnly }: ControlBarProps) {
|
||||
const toggleLabel = textOnly ? "Text-only mode on" : "Voice mode on";
|
||||
|
||||
return (
|
||||
<div id="controls">
|
||||
<button
|
||||
id="resetSessionBtn"
|
||||
class="control-btn"
|
||||
id="textOnlyToggleBtn"
|
||||
class={`control-switch${textOnly ? " active" : ""}`}
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={textOnly}
|
||||
aria-label={toggleLabel}
|
||||
title={toggleLabel}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onToggleTextOnly(!textOnly);
|
||||
}}
|
||||
>
|
||||
<span class="control-switch-shell" aria-hidden="true">
|
||||
<span class="control-switch-icon control-switch-icon-speaker">
|
||||
<SpeakerIcon />
|
||||
</span>
|
||||
<span class="control-switch-icon control-switch-icon-text">
|
||||
<TextBubbleIcon />
|
||||
</span>
|
||||
<span class="control-switch-thumb" />
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
id="resetSessionBtn"
|
||||
class="control-icon-btn"
|
||||
type="button"
|
||||
aria-label="Reset context"
|
||||
title="Reset context"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onReset();
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
<ResetIcon />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
45
frontend/src/components/FAB.tsx
Normal file
45
frontend/src/components/FAB.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
interface FABProps {
|
||||
view: "agent" | "feed";
|
||||
unreadCount: number;
|
||||
pttActive: boolean;
|
||||
}
|
||||
|
||||
function IconAgent() {
|
||||
return (
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="4" fill="currentColor" opacity="0.9" />
|
||||
<circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="1.5" opacity="0.45" />
|
||||
<circle cx="11" cy="11" r="10.25" stroke="currentColor" stroke-width="1.5" opacity="0.2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IconFeed() {
|
||||
return (
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
|
||||
<rect x="3" y="4" width="16" height="3.5" rx="1.75" fill="currentColor" opacity="0.9" />
|
||||
<rect x="3" y="9.25" width="16" height="3.5" rx="1.75" fill="currentColor" opacity="0.6" />
|
||||
<rect x="3" y="14.5" width="10" height="3.5" rx="1.75" fill="currentColor" opacity="0.35" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FAB({ view, unreadCount, pttActive }: FABProps) {
|
||||
const label =
|
||||
view === "agent" ? "Switch to feed (hold to talk)" : "Switch to agent (hold to talk)";
|
||||
const badgeVisible = unreadCount > 0 && view === "agent";
|
||||
|
||||
return (
|
||||
<button
|
||||
id="fab"
|
||||
type="button"
|
||||
aria-label={label}
|
||||
data-ptt="1"
|
||||
data-fab="1"
|
||||
class={pttActive ? "ptt-active" : ""}
|
||||
>
|
||||
{view === "agent" ? <IconFeed /> : <IconAgent />}
|
||||
{badgeVisible && <span id="fab-badge">{unreadCount > 99 ? "99+" : unreadCount}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,38 +1,199 @@
|
|||
import { useEffect, useRef } from "preact/hooks";
|
||||
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
|
||||
import type { LogLine } from "../types";
|
||||
|
||||
interface Props {
|
||||
lines: LogLine[];
|
||||
disabled: boolean;
|
||||
onSendMessage(text: string): Promise<void>;
|
||||
onExpandChange?(expanded: boolean): void;
|
||||
}
|
||||
|
||||
export function LogPanel({ lines }: Props) {
|
||||
const innerRef = useRef<HTMLDivElement>(null);
|
||||
interface LogViewProps {
|
||||
lines: LogLine[];
|
||||
scrollRef: { current: HTMLElement | null };
|
||||
}
|
||||
|
||||
// Scroll to top (newest line — column-reverse layout) after each update
|
||||
useEffect(() => {
|
||||
const el = innerRef.current?.parentElement;
|
||||
if (el) el.scrollTop = 0;
|
||||
}, [lines]);
|
||||
function SendIcon() {
|
||||
return (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
||||
<path d="M2 9L16 2L9.5 16L8 10.5L2 9Z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function CloseIcon() {
|
||||
return (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
||||
<path d="M14 4L4 14M4 4L14 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function formatLine(line: LogLine): string {
|
||||
const time = line.timestamp ? new Date(line.timestamp).toLocaleTimeString() : "";
|
||||
const role = line.role.trim().toLowerCase();
|
||||
if (role === "nanobot") {
|
||||
return `[${time}] ${line.text.replace(/^(?:nanobot|napbot)\b\s*[:>-]?\s*/i, "")}`;
|
||||
}
|
||||
if (role === "tool") {
|
||||
return `[${time}] tool: ${line.text}`;
|
||||
}
|
||||
return `[${time}] ${line.role}: ${line.text}`;
|
||||
}
|
||||
|
||||
function LogCompose({
|
||||
disabled,
|
||||
sending,
|
||||
text,
|
||||
setText,
|
||||
onClose,
|
||||
onSend,
|
||||
}: {
|
||||
disabled: boolean;
|
||||
sending: boolean;
|
||||
text: string;
|
||||
setText(value: string): void;
|
||||
onClose(): void;
|
||||
onSend(): void;
|
||||
}) {
|
||||
const onKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
onSend();
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[onClose, onSend],
|
||||
);
|
||||
|
||||
return (
|
||||
<div id="log">
|
||||
<div id="log-inner" ref={innerRef}>
|
||||
{lines.map((line) => {
|
||||
const time = line.timestamp ? new Date(line.timestamp).toLocaleTimeString() : "";
|
||||
const role = line.role.trim().toLowerCase();
|
||||
let text: string;
|
||||
if (role === "nanobot") {
|
||||
text = `[${time}] ${line.text.replace(/^(?:nanobot|napbot)\b\s*[:>-]?\s*/i, "")}`;
|
||||
} else {
|
||||
text = `[${time}] ${line.role}: ${line.text}`;
|
||||
}
|
||||
return (
|
||||
<div key={line.id} class={`line ${line.role}`}>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div id="log-compose">
|
||||
<textarea
|
||||
id="log-compose-input"
|
||||
placeholder="Type a message to nanobot..."
|
||||
disabled={disabled || sending}
|
||||
value={text}
|
||||
onInput={(e) => setText((e.target as HTMLTextAreaElement).value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
<div id="log-compose-actions">
|
||||
<button id="log-close-btn" type="button" aria-label="Close" onClick={onClose}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
<button
|
||||
id="log-send-btn"
|
||||
type="button"
|
||||
aria-label="Send message"
|
||||
disabled={disabled || sending || text.trim().length === 0}
|
||||
onClick={onSend}
|
||||
>
|
||||
<SendIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ExpandedLogView({ lines, scrollRef }: LogViewProps) {
|
||||
return (
|
||||
<div
|
||||
id="log-scroll"
|
||||
ref={(node) => {
|
||||
scrollRef.current = node;
|
||||
}}
|
||||
>
|
||||
<div id="log-inner">
|
||||
{lines.map((line) => (
|
||||
<div key={line.id} class={`line ${line.role}`}>
|
||||
{formatLine(line)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CollapsedLogView({ lines, scrollRef, onExpand }: LogViewProps & { onExpand(): void }) {
|
||||
return (
|
||||
<button
|
||||
id="log-collapsed"
|
||||
ref={(node) => {
|
||||
scrollRef.current = node;
|
||||
}}
|
||||
type="button"
|
||||
aria-label="Open message composer"
|
||||
onClick={onExpand}
|
||||
>
|
||||
<div id="log-inner">
|
||||
{lines.map((line) => (
|
||||
<span key={line.id} class={`line ${line.role}`}>
|
||||
{formatLine(line)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function LogPanel({ lines, disabled, onSendMessage, onExpandChange }: Props) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [text, setText] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const scrollRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => onExpandChange?.(expanded), [expanded, onExpandChange]);
|
||||
useEffect(() => () => onExpandChange?.(false), [onExpandChange]);
|
||||
useEffect(() => {
|
||||
const el = scrollRef.current;
|
||||
if (el) el.scrollTop = el.scrollHeight;
|
||||
}, [lines, expanded]);
|
||||
|
||||
const collapse = useCallback(() => {
|
||||
setExpanded(false);
|
||||
setText("");
|
||||
}, []);
|
||||
|
||||
const expand = useCallback(() => {
|
||||
if (!expanded) setExpanded(true);
|
||||
}, [expanded]);
|
||||
|
||||
const send = useCallback(async () => {
|
||||
const message = text.trim();
|
||||
if (!message || sending || disabled) return;
|
||||
setSending(true);
|
||||
try {
|
||||
await onSendMessage(message);
|
||||
setText("");
|
||||
} catch (err) {
|
||||
window.alert(`Could not send message: ${String(err)}`);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}, [disabled, onSendMessage, sending, text]);
|
||||
|
||||
return (
|
||||
<div id="log" class={expanded ? "expanded" : ""} data-no-swipe="1">
|
||||
{expanded ? (
|
||||
<ExpandedLogView lines={lines} scrollRef={scrollRef} />
|
||||
) : (
|
||||
<CollapsedLogView lines={lines} scrollRef={scrollRef} onExpand={expand} />
|
||||
)}
|
||||
{expanded && (
|
||||
<LogCompose
|
||||
disabled={disabled}
|
||||
sending={sending}
|
||||
text={text}
|
||||
setText={setText}
|
||||
onClose={collapse}
|
||||
onSend={() => {
|
||||
void send();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
188
frontend/src/components/TextInput.tsx
Normal file
188
frontend/src/components/TextInput.tsx
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
import { useCallback, useRef, useState } from "preact/hooks";
|
||||
|
||||
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL ?? "";
|
||||
|
||||
interface TextInputProps {
|
||||
disabled: boolean;
|
||||
onExpandChange?(expanded: boolean): void;
|
||||
}
|
||||
|
||||
function ComposeIcon() {
|
||||
return (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M3 13.5V15.5H5L13.5 7L11.5 5L3 13.5ZM15.2 5.3C15.6 4.9 15.6 4.3 15.2 3.9L14.1 2.8C13.7 2.4 13.1 2.4 12.7 2.8L11.9 3.6L13.9 5.6L15.2 5.3Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SendIcon() {
|
||||
return (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
||||
<path d="M2 9L16 2L9.5 16L8 10.5L2 9Z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function CloseIcon() {
|
||||
return (
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
|
||||
<path d="M14 4L4 14M4 4L14 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
interface ExpandedBarProps {
|
||||
text: string;
|
||||
disabled: boolean;
|
||||
sending: boolean;
|
||||
inputRef: { current: HTMLTextAreaElement | null };
|
||||
onInput(val: string): void;
|
||||
onKeyDown(e: KeyboardEvent): void;
|
||||
onBlur(): void;
|
||||
onSend(): void;
|
||||
onClose(): void;
|
||||
stopProp(e: Event): void;
|
||||
}
|
||||
|
||||
function ExpandedBar({
|
||||
text,
|
||||
disabled,
|
||||
sending,
|
||||
inputRef,
|
||||
onInput,
|
||||
onKeyDown,
|
||||
onBlur,
|
||||
onSend,
|
||||
onClose,
|
||||
stopProp,
|
||||
}: ExpandedBarProps) {
|
||||
return (
|
||||
<div id="text-input-bar" onPointerDown={stopProp} onPointerUp={stopProp}>
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
id="text-input"
|
||||
placeholder="Type a message…"
|
||||
disabled={disabled || sending}
|
||||
value={text}
|
||||
onInput={(e) => onInput((e.target as HTMLTextAreaElement).value)}
|
||||
onKeyDown={onKeyDown}
|
||||
onBlur={onBlur}
|
||||
/>
|
||||
<div id="text-input-actions">
|
||||
<button id="text-close-btn" type="button" aria-label="Close" onClick={onClose}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
<button
|
||||
id="text-send-btn"
|
||||
type="button"
|
||||
aria-label="Send message"
|
||||
disabled={disabled || sending || text.trim().length === 0}
|
||||
onClick={onSend}
|
||||
>
|
||||
<SendIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function useExpandState(onExpandChange?: (v: boolean) => void) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const set = useCallback(
|
||||
(val: boolean) => {
|
||||
setExpanded(val);
|
||||
onExpandChange?.(val);
|
||||
},
|
||||
[onExpandChange],
|
||||
);
|
||||
return [expanded, set] as const;
|
||||
}
|
||||
|
||||
export function TextInput({ disabled, onExpandChange }: TextInputProps) {
|
||||
const [text, setText] = useState("");
|
||||
const [expanded, setExpandedWithCb] = useExpandState(onExpandChange);
|
||||
const [sending, setSending] = useState(false);
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const collapse = useCallback(() => {
|
||||
setText("");
|
||||
setExpandedWithCb(false);
|
||||
inputRef.current?.blur();
|
||||
}, [setExpandedWithCb]);
|
||||
|
||||
const send = useCallback(async () => {
|
||||
const msg = text.trim();
|
||||
if (!msg || sending) return;
|
||||
setSending(true);
|
||||
try {
|
||||
const url = BACKEND_URL ? `${BACKEND_URL}/message` : "/message";
|
||||
await fetch(url, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ text: msg }),
|
||||
});
|
||||
collapse();
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}, [text, sending, collapse]);
|
||||
|
||||
const onKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
send();
|
||||
}
|
||||
if (e.key === "Escape") collapse();
|
||||
},
|
||||
[send, collapse],
|
||||
);
|
||||
|
||||
const onBlur = useCallback(() => {
|
||||
if (text.trim().length === 0) {
|
||||
setTimeout(() => {
|
||||
if (document.activeElement !== inputRef.current) setExpandedWithCb(false);
|
||||
}, 150);
|
||||
}
|
||||
}, [text]);
|
||||
|
||||
const stopProp = useCallback((e: Event) => e.stopPropagation(), []);
|
||||
|
||||
const expand = useCallback(() => {
|
||||
setExpandedWithCb(true);
|
||||
requestAnimationFrame(() => inputRef.current?.focus());
|
||||
}, [setExpandedWithCb]);
|
||||
|
||||
if (!expanded) {
|
||||
return (
|
||||
<button
|
||||
id="text-compose-btn"
|
||||
type="button"
|
||||
aria-label="Type a message"
|
||||
onPointerDown={stopProp}
|
||||
onPointerUp={stopProp}
|
||||
onClick={expand}
|
||||
>
|
||||
<ComposeIcon />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ExpandedBar
|
||||
text={text}
|
||||
disabled={disabled}
|
||||
sending={sending}
|
||||
inputRef={inputRef}
|
||||
onInput={setText}
|
||||
onKeyDown={onKeyDown}
|
||||
onBlur={onBlur}
|
||||
onSend={send}
|
||||
onClose={collapse}
|
||||
stopProp={stopProp}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
import { marked } from "marked";
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import type { ToastItem } from "../types";
|
||||
|
||||
interface ToastProps {
|
||||
toast: ToastItem;
|
||||
onDismiss(id: number): void;
|
||||
onChoice(requestId: string, value: string): void;
|
||||
}
|
||||
|
||||
function Toast({ toast, onDismiss, onChoice }: ToastProps) {
|
||||
const [dismissing, setDismissing] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const dismiss = () => {
|
||||
if (dismissing) return;
|
||||
setDismissing(true);
|
||||
const t = setTimeout(() => onDismiss(toast.id), 400);
|
||||
timerRef.current = t;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (toast.kind !== "choice" && toast.durationMs > 0) {
|
||||
const t = setTimeout(dismiss, toast.durationMs);
|
||||
timerRef.current = t;
|
||||
return () => clearTimeout(t);
|
||||
}
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const bodyHtml = (): string => {
|
||||
if (toast.kind === "choice") return "";
|
||||
if (toast.kind === "image") return "";
|
||||
const looksLikeHtml = /^\s*<[a-zA-Z]/.test(toast.content);
|
||||
if (looksLikeHtml) return toast.content;
|
||||
return marked.parse(toast.content) as string;
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={`toast${dismissing ? " dismissing" : ""}`}>
|
||||
<div class="toast-header">
|
||||
{toast.title && <span class="toast-title">{toast.title}</span>}
|
||||
<button
|
||||
class="toast-close"
|
||||
type="button"
|
||||
aria-label="Dismiss"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
dismiss();
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{toast.kind === "image" && (
|
||||
<img class="toast-image" src={toast.content} alt={toast.title || "image"} />
|
||||
)}
|
||||
|
||||
{toast.kind === "text" && (
|
||||
<div class="toast-body" dangerouslySetInnerHTML={{ __html: bodyHtml() }} />
|
||||
)}
|
||||
|
||||
{toast.kind === "choice" && (
|
||||
<>
|
||||
<div class="toast-body">{toast.question}</div>
|
||||
<div class="toast-choices">
|
||||
{(toast.choices ?? []).map((label) => (
|
||||
<button
|
||||
key={label}
|
||||
class="toast-choice-btn"
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onChoice(toast.requestId ?? "", label);
|
||||
dismiss();
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{toast.kind !== "choice" && toast.durationMs > 0 && (
|
||||
<div class="toast-progress" style={{ animationDuration: `${toast.durationMs}ms` }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ContainerProps {
|
||||
toasts: ToastItem[];
|
||||
onDismiss(id: number): void;
|
||||
onChoice(requestId: string, value: string): void;
|
||||
}
|
||||
|
||||
export function ToastContainer({ toasts, onDismiss, onChoice }: ContainerProps) {
|
||||
return (
|
||||
<div id="toast-container">
|
||||
{toasts.map((t) => (
|
||||
<Toast key={t.id} toast={t} onDismiss={onDismiss} onChoice={onChoice} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,15 +1,20 @@
|
|||
import { useCallback, useRef, useState } from "preact/hooks";
|
||||
import type { AgentState } from "../types";
|
||||
|
||||
const HOLD_MS = 300;
|
||||
const MOVE_CANCEL_PX = 16;
|
||||
|
||||
interface UsePTTOptions {
|
||||
connected: boolean;
|
||||
onSendPtt(pressed: boolean): void;
|
||||
onBootstrap(): Promise<void>;
|
||||
onTap?(): void; // called on a short press (< HOLD_MS) that didn't activate PTT
|
||||
}
|
||||
|
||||
interface PTTState {
|
||||
agentStateOverride: AgentState | null;
|
||||
handlePointerDown(e: Event): Promise<void>;
|
||||
handlePointerMove(e: Event): void;
|
||||
handlePointerUp(e: Event): void;
|
||||
}
|
||||
|
||||
|
|
@ -18,14 +23,18 @@ function dispatchMicEnable(enabled: boolean): void {
|
|||
}
|
||||
|
||||
/** Manages push-to-talk pointer events and mic enable/disable. */
|
||||
export function usePTT({ connected, onSendPtt, onBootstrap }: UsePTTOptions): PTTState {
|
||||
export function usePTT({ connected, onSendPtt, onBootstrap, onTap }: UsePTTOptions): PTTState {
|
||||
const [agentStateOverride, setAgentStateOverride] = useState<AgentState | null>(null);
|
||||
const activePointers = useRef(new Set<number>());
|
||||
const appStartedRef = useRef(false);
|
||||
const holdTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const pttFiredRef = useRef(false);
|
||||
const pointerStartRef = useRef<{ x: number; y: number } | null>(null);
|
||||
|
||||
const beginPTT = useCallback(() => {
|
||||
if (!connected) return;
|
||||
if (agentStateOverride === "listening") return;
|
||||
pttFiredRef.current = true;
|
||||
setAgentStateOverride("listening");
|
||||
dispatchMicEnable(true);
|
||||
onSendPtt(true);
|
||||
|
|
@ -52,19 +61,57 @@ export function usePTT({ connected, onSendPtt, onBootstrap }: UsePTTOptions): PT
|
|||
appStartedRef.current = true;
|
||||
await onBootstrap();
|
||||
}
|
||||
if (activePointers.current.size === 1) beginPTT();
|
||||
if (activePointers.current.size !== 1) return;
|
||||
|
||||
pttFiredRef.current = false;
|
||||
pointerStartRef.current = { x: pe.clientX, y: pe.clientY };
|
||||
|
||||
// Delay activation slightly so horizontal swipe gestures can cancel.
|
||||
holdTimerRef.current = setTimeout(beginPTT, HOLD_MS);
|
||||
},
|
||||
[onBootstrap, beginPTT],
|
||||
);
|
||||
|
||||
const handlePointerMove = useCallback((e: Event) => {
|
||||
if (pttFiredRef.current) return;
|
||||
if (holdTimerRef.current === null) return;
|
||||
const pe = e as PointerEvent;
|
||||
if (!activePointers.current.has(pe.pointerId)) return;
|
||||
const start = pointerStartRef.current;
|
||||
if (!start) return;
|
||||
|
||||
const dx = Math.abs(pe.clientX - start.x);
|
||||
const dy = Math.abs(pe.clientY - start.y);
|
||||
if (dx > MOVE_CANCEL_PX || dy > MOVE_CANCEL_PX) {
|
||||
clearTimeout(holdTimerRef.current);
|
||||
holdTimerRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handlePointerUp = useCallback(
|
||||
(e: Event) => {
|
||||
const pe = e as PointerEvent;
|
||||
// Ignore pointers we never tracked (didn't hit a data-ptt target on down)
|
||||
if (!activePointers.current.has(pe.pointerId)) return;
|
||||
activePointers.current.delete(pe.pointerId);
|
||||
if (activePointers.current.size === 0) endPTT();
|
||||
if (activePointers.current.size !== 0) return;
|
||||
|
||||
// Cancel hold timer if it hasn't fired yet
|
||||
if (holdTimerRef.current !== null) {
|
||||
clearTimeout(holdTimerRef.current);
|
||||
holdTimerRef.current = null;
|
||||
}
|
||||
pointerStartRef.current = null;
|
||||
|
||||
if (pttFiredRef.current) {
|
||||
endPTT();
|
||||
} else {
|
||||
// PTT never fired → short tap.
|
||||
onTap?.();
|
||||
}
|
||||
},
|
||||
[endPTT],
|
||||
[endPTT, onTap],
|
||||
);
|
||||
|
||||
return { agentStateOverride, handlePointerDown, handlePointerUp };
|
||||
return { agentStateOverride, handlePointerDown, handlePointerMove, handlePointerUp };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
import { useCallback, useRef, useState } from "preact/hooks";
|
||||
import type { AgentState } from "../types";
|
||||
|
||||
export interface PushToTalkState {
|
||||
pttPressed: boolean;
|
||||
micStream: MediaStream | null;
|
||||
beginPTT(): void;
|
||||
endPTT(): void;
|
||||
}
|
||||
|
||||
interface UsePushToTalkOptions {
|
||||
connected: boolean;
|
||||
agentState: AgentState;
|
||||
onPttChange(pressed: boolean): void;
|
||||
onSetAgentState(state: AgentState): void;
|
||||
onShowStatus(text: string, persistMs?: number): void;
|
||||
}
|
||||
|
||||
export function usePushToTalk({
|
||||
connected,
|
||||
onPttChange,
|
||||
onSetAgentState,
|
||||
onShowStatus,
|
||||
}: UsePushToTalkOptions): PushToTalkState {
|
||||
const [pttPressed, setPttPressed] = useState(false);
|
||||
const micStreamRef = useRef<MediaStream | null>(null);
|
||||
|
||||
// Attach mic stream from RTCPeerConnection tracks — caller passes it via micStream prop
|
||||
// Here we track from the parent. Mic enable/disable is done by the parent hook.
|
||||
|
||||
const beginPTT = useCallback(() => {
|
||||
if (!connected) return;
|
||||
if (pttPressed) return;
|
||||
setPttPressed(true);
|
||||
onPttChange(true);
|
||||
onSetAgentState("listening");
|
||||
onShowStatus("Listening...");
|
||||
}, [connected, pttPressed, onPttChange, onSetAgentState, onShowStatus]);
|
||||
|
||||
const endPTT = useCallback(() => {
|
||||
if (!pttPressed) return;
|
||||
setPttPressed(false);
|
||||
onPttChange(false);
|
||||
onSetAgentState("idle");
|
||||
if (connected) onShowStatus("Hold anywhere to talk", 1800);
|
||||
}, [pttPressed, onPttChange, onSetAgentState, onShowStatus, connected]);
|
||||
|
||||
return {
|
||||
pttPressed,
|
||||
micStream: micStreamRef.current,
|
||||
beginPTT,
|
||||
endPTT,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,160 +1,148 @@
|
|||
import { useCallback, useEffect, useRef, useState } from "preact/hooks";
|
||||
import type { AgentState, ClientMessage, LogLine, ServerMessage, ToastItem } from "../types";
|
||||
import type {
|
||||
AgentState,
|
||||
CardItem,
|
||||
CardLane,
|
||||
CardMessageMetadata,
|
||||
CardState,
|
||||
ClientMessage,
|
||||
LogLine,
|
||||
ServerMessage,
|
||||
} from "../types";
|
||||
|
||||
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL ?? "";
|
||||
|
||||
let toastIdCounter = 0;
|
||||
let cardIdCounter = 0;
|
||||
let logIdCounter = 0;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// ---------------------------------------------------------------------------
|
||||
const LANE_RANK: Record<CardLane, number> = {
|
||||
attention: 0,
|
||||
work: 1,
|
||||
context: 2,
|
||||
history: 3,
|
||||
};
|
||||
|
||||
export interface WebRTCState {
|
||||
const STATE_RANK: Record<CardState, number> = {
|
||||
active: 0,
|
||||
stale: 1,
|
||||
resolved: 2,
|
||||
superseded: 3,
|
||||
archived: 4,
|
||||
};
|
||||
|
||||
interface WebRTCState {
|
||||
connected: boolean;
|
||||
connecting: boolean;
|
||||
textOnly: boolean;
|
||||
agentState: AgentState;
|
||||
logLines: LogLine[];
|
||||
toasts: ToastItem[];
|
||||
cards: CardItem[];
|
||||
voiceStatus: string;
|
||||
statusVisible: boolean;
|
||||
remoteAudioEl: HTMLAudioElement | null;
|
||||
remoteStream: MediaStream | null;
|
||||
sendJson(msg: ClientMessage): void;
|
||||
dismissToast(id: number): void;
|
||||
sendTextMessage(text: string, metadata?: CardMessageMetadata): Promise<void>;
|
||||
dismissCard(id: number): void;
|
||||
setTextOnly(enabled: boolean): void;
|
||||
connect(): Promise<void>;
|
||||
}
|
||||
|
||||
type AppendLine = (role: string, text: string, timestamp: string) => void;
|
||||
type AddToast = (item: Omit<ToastItem, "id">) => number;
|
||||
type UpsertCard = (item: Omit<CardItem, "id">) => void;
|
||||
type SetAgentState = (updater: (prev: AgentState) => AgentState) => void;
|
||||
interface IdleFallbackControls {
|
||||
clear(): void;
|
||||
schedule(delayMs?: number): void;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Message handlers (pure functions, outside hook to reduce complexity)
|
||||
// ---------------------------------------------------------------------------
|
||||
interface RTCRefs {
|
||||
pcRef: { current: RTCPeerConnection | null };
|
||||
dcRef: { current: RTCDataChannel | null };
|
||||
remoteAudioRef: { current: HTMLAudioElement | null };
|
||||
micSendersRef: { current: RTCRtpSender[] };
|
||||
}
|
||||
|
||||
interface RTCCallbacks {
|
||||
setConnected: (v: boolean) => void;
|
||||
setConnecting: (v: boolean) => void;
|
||||
setRemoteStream: (s: MediaStream | null) => void;
|
||||
showStatus: (text: string, persistMs?: number) => void;
|
||||
appendLine: AppendLine;
|
||||
onDcMessage: (raw: string) => void;
|
||||
onDcOpen: () => void;
|
||||
closePC: () => void;
|
||||
}
|
||||
|
||||
function compareCards(a: CardItem, b: CardItem): number {
|
||||
const laneDiff = LANE_RANK[a.lane] - LANE_RANK[b.lane];
|
||||
if (laneDiff !== 0) return laneDiff;
|
||||
const stateDiff = STATE_RANK[a.state] - STATE_RANK[b.state];
|
||||
if (stateDiff !== 0) return stateDiff;
|
||||
if (a.priority !== b.priority) return b.priority - a.priority;
|
||||
const updatedDiff = b.updatedAt.localeCompare(a.updatedAt);
|
||||
if (updatedDiff !== 0) return updatedDiff;
|
||||
return b.createdAt.localeCompare(a.createdAt);
|
||||
}
|
||||
|
||||
function sortCards(items: CardItem[]): CardItem[] {
|
||||
return [...items].sort(compareCards);
|
||||
}
|
||||
|
||||
function toCardItem(msg: Extract<ServerMessage, { type: "card" }>): Omit<CardItem, "id"> {
|
||||
return {
|
||||
serverId: msg.id,
|
||||
kind: msg.kind,
|
||||
content: msg.content,
|
||||
title: msg.title,
|
||||
question: msg.question || undefined,
|
||||
choices: msg.choices.length > 0 ? msg.choices : undefined,
|
||||
responseValue: msg.response_value || undefined,
|
||||
slot: msg.slot || undefined,
|
||||
lane: msg.lane,
|
||||
priority: msg.priority,
|
||||
state: msg.state,
|
||||
templateKey: msg.template_key || undefined,
|
||||
contextSummary: msg.context_summary || undefined,
|
||||
createdAt: msg.created_at || new Date().toISOString(),
|
||||
updatedAt: msg.updated_at || new Date().toISOString(),
|
||||
};
|
||||
}
|
||||
|
||||
function handleTypedMessage(
|
||||
msg: Extract<ServerMessage, { type: string }>,
|
||||
setAgentState: SetAgentState,
|
||||
appendLine: AppendLine,
|
||||
addToast: AddToast,
|
||||
upsertCard: UpsertCard,
|
||||
idleFallback: IdleFallbackControls,
|
||||
): void {
|
||||
if (msg.type === "agent_state") {
|
||||
const s = (msg as { type: "agent_state"; state: AgentState }).state;
|
||||
setAgentState((prev) => (prev === "listening" ? prev : s));
|
||||
idleFallback.clear();
|
||||
setAgentState((prev) => (prev === "listening" ? prev : msg.state));
|
||||
return;
|
||||
}
|
||||
if (msg.type === "message") {
|
||||
const mm = msg as { type: "message"; content: string; is_progress: boolean };
|
||||
if (!mm.is_progress) appendLine("nanobot", mm.content, "");
|
||||
if (msg.is_tool_hint) {
|
||||
appendLine("tool", msg.content, msg.timestamp);
|
||||
return;
|
||||
}
|
||||
if (!msg.is_progress) {
|
||||
appendLine(msg.role, msg.content, msg.timestamp);
|
||||
idleFallback.schedule();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (msg.type === "toast") {
|
||||
const tm = msg as {
|
||||
type: "toast";
|
||||
kind: "text" | "image";
|
||||
content: string;
|
||||
title: string;
|
||||
duration_ms: number;
|
||||
};
|
||||
addToast({
|
||||
kind: tm.kind,
|
||||
content: tm.content,
|
||||
title: tm.title,
|
||||
durationMs: tm.duration_ms ?? 6000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (msg.type === "choice") {
|
||||
const cm = msg as {
|
||||
type: "choice";
|
||||
request_id: string;
|
||||
question: string;
|
||||
choices: string[];
|
||||
title: string;
|
||||
};
|
||||
addToast({
|
||||
kind: "choice",
|
||||
content: "",
|
||||
title: cm.title || "",
|
||||
durationMs: 0,
|
||||
requestId: cm.request_id,
|
||||
question: cm.question,
|
||||
choices: cm.choices,
|
||||
});
|
||||
if (msg.type === "card") {
|
||||
upsertCard(toCardItem(msg));
|
||||
idleFallback.schedule();
|
||||
return;
|
||||
}
|
||||
if (msg.type === "error") {
|
||||
appendLine("system", (msg as { type: "error"; error: string }).error, "");
|
||||
}
|
||||
// pong and rtc-* are no-ops
|
||||
}
|
||||
|
||||
function parseLegacyToast(text: string, addToast: AddToast): void {
|
||||
console.log("[toast] parseLegacyToast raw text:", text);
|
||||
try {
|
||||
const t = JSON.parse(text);
|
||||
console.log("[toast] parsed toast object:", t);
|
||||
addToast({
|
||||
kind: t.kind || "text",
|
||||
content: t.content || "",
|
||||
title: t.title || "",
|
||||
durationMs: typeof t.duration_ms === "number" ? t.duration_ms : 6000,
|
||||
});
|
||||
} catch {
|
||||
console.log("[toast] JSON parse failed, using raw text as content");
|
||||
addToast({ kind: "text", content: text, title: "", durationMs: 6000 });
|
||||
appendLine("system", msg.error, "");
|
||||
idleFallback.schedule();
|
||||
}
|
||||
}
|
||||
|
||||
function parseLegacyChoice(text: string, addToast: AddToast): void {
|
||||
try {
|
||||
const c = JSON.parse(text);
|
||||
addToast({
|
||||
kind: "choice",
|
||||
content: "",
|
||||
title: c.title || "",
|
||||
durationMs: 0,
|
||||
requestId: c.request_id || "",
|
||||
question: c.question || "",
|
||||
choices: Array.isArray(c.choices) ? c.choices : [],
|
||||
});
|
||||
} catch {
|
||||
/* ignore malformed */
|
||||
}
|
||||
}
|
||||
|
||||
function handleLegacyMessage(
|
||||
rm: { role: string; text: string; timestamp?: string },
|
||||
setAgentState: SetAgentState,
|
||||
appendLine: AppendLine,
|
||||
addToast: AddToast,
|
||||
): void {
|
||||
const role = (rm.role || "system").toString();
|
||||
const text = (rm.text || "").toString();
|
||||
const ts = rm.timestamp || "";
|
||||
|
||||
if (role === "agent-state") {
|
||||
const newState = text.trim() as AgentState;
|
||||
setAgentState((prev) => (prev === "listening" ? prev : newState));
|
||||
return;
|
||||
}
|
||||
if (role === "toast") {
|
||||
parseLegacyToast(text, addToast);
|
||||
return;
|
||||
}
|
||||
if (role === "choice") {
|
||||
parseLegacyChoice(text, addToast);
|
||||
return;
|
||||
}
|
||||
if (role === "wisper") return; // suppress debug
|
||||
appendLine(role, text, ts);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// WebRTC helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
async function acquireMicStream(): Promise<MediaStream> {
|
||||
try {
|
||||
return await navigator.mediaDevices.getUserMedia({
|
||||
|
|
@ -185,7 +173,7 @@ function waitForIceComplete(pc: RTCPeerConnection): Promise<void> {
|
|||
}
|
||||
};
|
||||
pc.addEventListener("icegatheringstatechange", check);
|
||||
setTimeout(resolve, 5000); // safety timeout
|
||||
setTimeout(resolve, 5000);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -202,28 +190,11 @@ async function exchangeSdp(
|
|||
return resp.json() as Promise<{ sdp: string; rtcType: string }>;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Hook internals
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface RTCRefs {
|
||||
pcRef: { current: RTCPeerConnection | null };
|
||||
dcRef: { current: RTCDataChannel | null };
|
||||
remoteAudioRef: { current: HTMLAudioElement | null };
|
||||
micSendersRef: { current: RTCRtpSender[] };
|
||||
}
|
||||
|
||||
interface RTCCallbacks {
|
||||
setConnected: (v: boolean) => void;
|
||||
setConnecting: (v: boolean) => void;
|
||||
setRemoteStream: (s: MediaStream | null) => void;
|
||||
showStatus: (text: string, persistMs?: number) => void;
|
||||
appendLine: AppendLine;
|
||||
onDcMessage: (raw: string) => void;
|
||||
closePC: () => void;
|
||||
}
|
||||
|
||||
async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
||||
async function runConnect(
|
||||
refs: RTCRefs,
|
||||
cbs: RTCCallbacks,
|
||||
opts: { textOnly: boolean },
|
||||
): Promise<void> {
|
||||
if (refs.pcRef.current) return;
|
||||
if (!window.RTCPeerConnection) {
|
||||
cbs.showStatus("WebRTC unavailable in this browser.", 4000);
|
||||
|
|
@ -234,10 +205,12 @@ async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
|||
|
||||
let micStream: MediaStream | null = null;
|
||||
try {
|
||||
micStream = await acquireMicStream();
|
||||
micStream.getAudioTracks().forEach((t) => {
|
||||
t.enabled = false;
|
||||
});
|
||||
if (!opts.textOnly) {
|
||||
micStream = await acquireMicStream();
|
||||
micStream.getAudioTracks().forEach((track) => {
|
||||
track.enabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
const pc = new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }] });
|
||||
refs.pcRef.current = pc;
|
||||
|
|
@ -260,8 +233,9 @@ async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
|||
dc.onopen = () => {
|
||||
cbs.setConnected(true);
|
||||
cbs.setConnecting(false);
|
||||
cbs.showStatus("Hold anywhere to talk", 2500);
|
||||
cbs.showStatus(opts.textOnly ? "Text-only mode enabled" : "Hold anywhere to talk", 2500);
|
||||
cbs.appendLine("system", "Connected.", new Date().toISOString());
|
||||
cbs.onDcOpen();
|
||||
};
|
||||
dc.onclose = () => {
|
||||
cbs.appendLine("system", "Disconnected.", new Date().toISOString());
|
||||
|
|
@ -269,11 +243,13 @@ async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
|||
};
|
||||
dc.onmessage = (e) => cbs.onDcMessage(e.data as string);
|
||||
|
||||
const stream = micStream;
|
||||
stream.getAudioTracks().forEach((track) => {
|
||||
pc.addTrack(track, stream);
|
||||
});
|
||||
refs.micSendersRef.current = pc.getSenders().filter((s) => s.track?.kind === "audio");
|
||||
refs.micSendersRef.current = [];
|
||||
if (micStream) {
|
||||
micStream.getAudioTracks().forEach((track) => {
|
||||
pc.addTrack(track, micStream as MediaStream);
|
||||
});
|
||||
refs.micSendersRef.current = pc.getSenders().filter((s) => s.track?.kind === "audio");
|
||||
}
|
||||
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
|
|
@ -287,31 +263,114 @@ async function runConnect(refs: RTCRefs, cbs: RTCCallbacks): Promise<void> {
|
|||
cbs.appendLine("system", `Connection failed: ${err}`, new Date().toISOString());
|
||||
cbs.showStatus("Connection failed.", 3000);
|
||||
cbs.closePC();
|
||||
if (micStream)
|
||||
micStream.getTracks().forEach((t) => {
|
||||
t.stop();
|
||||
});
|
||||
micStream?.getTracks().forEach((track) => {
|
||||
track.stop();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Message state sub-hook
|
||||
// ---------------------------------------------------------------------------
|
||||
function useBackendActions() {
|
||||
const sendTextMessage = useCallback(async (text: string, metadata?: CardMessageMetadata) => {
|
||||
const message = text.trim();
|
||||
if (!message) return;
|
||||
const url = BACKEND_URL ? `${BACKEND_URL}/message` : "/message";
|
||||
const resp = await fetch(url, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ text: message, metadata: metadata ?? {} }),
|
||||
});
|
||||
if (!resp.ok) throw new Error(`Send failed (${resp.status})`);
|
||||
}, []);
|
||||
|
||||
interface MessageState {
|
||||
agentState: AgentState;
|
||||
logLines: LogLine[];
|
||||
toasts: ToastItem[];
|
||||
appendLine: AppendLine;
|
||||
addToast: AddToast;
|
||||
dismissToast: (id: number) => void;
|
||||
onDcMessage: (raw: string) => void;
|
||||
return { sendTextMessage };
|
||||
}
|
||||
|
||||
function useMessageState(): MessageState {
|
||||
function useCardPolling(loadPersistedCards: () => Promise<void>) {
|
||||
useEffect(() => {
|
||||
loadPersistedCards().catch(() => {});
|
||||
const pollId = window.setInterval(() => {
|
||||
loadPersistedCards().catch(() => {});
|
||||
}, 10000);
|
||||
const onVisible = () => {
|
||||
if (document.visibilityState === "visible") loadPersistedCards().catch(() => {});
|
||||
};
|
||||
window.addEventListener("focus", onVisible);
|
||||
document.addEventListener("visibilitychange", onVisible);
|
||||
return () => {
|
||||
window.clearInterval(pollId);
|
||||
window.removeEventListener("focus", onVisible);
|
||||
document.removeEventListener("visibilitychange", onVisible);
|
||||
};
|
||||
}, [loadPersistedCards]);
|
||||
}
|
||||
|
||||
function useRemoteAudioBindings({
|
||||
textOnly,
|
||||
connected,
|
||||
showStatus,
|
||||
remoteAudioRef,
|
||||
micSendersRef,
|
||||
dcRef,
|
||||
textOnlyRef,
|
||||
}: {
|
||||
textOnly: boolean;
|
||||
connected: boolean;
|
||||
showStatus: (text: string, persistMs?: number) => void;
|
||||
remoteAudioRef: { current: HTMLAudioElement | null };
|
||||
micSendersRef: { current: RTCRtpSender[] };
|
||||
dcRef: { current: RTCDataChannel | null };
|
||||
textOnlyRef: { current: boolean };
|
||||
}) {
|
||||
useEffect(() => {
|
||||
textOnlyRef.current = textOnly;
|
||||
}, [textOnly, textOnlyRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const audio = new Audio();
|
||||
audio.autoplay = true;
|
||||
(audio as HTMLAudioElement & { playsInline: boolean }).playsInline = true;
|
||||
audio.muted = textOnlyRef.current;
|
||||
remoteAudioRef.current = audio;
|
||||
return () => {
|
||||
audio.srcObject = null;
|
||||
};
|
||||
}, [remoteAudioRef, textOnlyRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: Event) => {
|
||||
const enabled = (e as CustomEvent<{ enabled: boolean }>).detail?.enabled ?? false;
|
||||
micSendersRef.current.forEach((sender) => {
|
||||
if (sender.track) sender.track.enabled = enabled && !textOnlyRef.current;
|
||||
});
|
||||
};
|
||||
window.addEventListener("nanobot-mic-enable", handler);
|
||||
return () => window.removeEventListener("nanobot-mic-enable", handler);
|
||||
}, [micSendersRef, textOnlyRef]);
|
||||
|
||||
useEffect(() => {
|
||||
if (remoteAudioRef.current) {
|
||||
remoteAudioRef.current.muted = textOnly;
|
||||
if (textOnly) remoteAudioRef.current.pause();
|
||||
else remoteAudioRef.current.play().catch(() => {});
|
||||
}
|
||||
micSendersRef.current.forEach((sender) => {
|
||||
if (sender.track) sender.track.enabled = false;
|
||||
});
|
||||
if (textOnly) {
|
||||
const dc = dcRef.current;
|
||||
if (dc?.readyState === "open") {
|
||||
dc.send(JSON.stringify({ type: "voice-ptt", pressed: false } satisfies ClientMessage));
|
||||
}
|
||||
}
|
||||
if (connected) showStatus(textOnly ? "Text-only mode enabled" : "Hold anywhere to talk", 2000);
|
||||
}, [connected, dcRef, micSendersRef, remoteAudioRef, showStatus, textOnly]);
|
||||
}
|
||||
|
||||
function useMessageState() {
|
||||
const [agentState, setAgentState] = useState<AgentState>("idle");
|
||||
const [logLines, setLogLines] = useState<LogLine[]>([]);
|
||||
const [toasts, setToasts] = useState<ToastItem[]>([]);
|
||||
const [cards, setCards] = useState<CardItem[]>([]);
|
||||
const idleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const appendLine = useCallback((role: string, text: string, timestamp: string) => {
|
||||
setLogLines((prev) => {
|
||||
|
|
@ -323,144 +382,268 @@ function useMessageState(): MessageState {
|
|||
});
|
||||
}, []);
|
||||
|
||||
const addToast = useCallback((item: Omit<ToastItem, "id">) => {
|
||||
const id = toastIdCounter++;
|
||||
setToasts((prev) => [{ ...item, id }, ...prev]);
|
||||
return id;
|
||||
const upsertCard = useCallback((item: Omit<CardItem, "id">) => {
|
||||
setCards((prev) => {
|
||||
const existingIndex = item.serverId
|
||||
? prev.findIndex((card) => card.serverId === item.serverId)
|
||||
: -1;
|
||||
if (existingIndex >= 0) {
|
||||
const next = [...prev];
|
||||
next[existingIndex] = { ...next[existingIndex], ...item };
|
||||
return sortCards(next);
|
||||
}
|
||||
return sortCards([...prev, { ...item, id: cardIdCounter++ }]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const dismissToast = useCallback((id: number) => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
const dismissCard = useCallback((id: number) => {
|
||||
setCards((prev) => {
|
||||
const card = prev.find((entry) => entry.id === id);
|
||||
if (card?.serverId) {
|
||||
const url = BACKEND_URL
|
||||
? `${BACKEND_URL}/cards/${card.serverId}`
|
||||
: `/cards/${card.serverId}`;
|
||||
fetch(url, { method: "DELETE" }).catch(() => {});
|
||||
}
|
||||
return prev.filter((entry) => entry.id !== id);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const clearIdleFallback = useCallback(() => {
|
||||
if (idleTimerRef.current) {
|
||||
clearTimeout(idleTimerRef.current);
|
||||
idleTimerRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const scheduleIdleFallback = useCallback(
|
||||
(delayMs = 450) => {
|
||||
clearIdleFallback();
|
||||
idleTimerRef.current = setTimeout(() => {
|
||||
idleTimerRef.current = null;
|
||||
setAgentState((prev) => {
|
||||
if (prev === "listening" || prev === "speaking") return prev;
|
||||
return "idle";
|
||||
});
|
||||
}, delayMs);
|
||||
},
|
||||
[clearIdleFallback],
|
||||
);
|
||||
|
||||
useEffect(() => clearIdleFallback, [clearIdleFallback]);
|
||||
|
||||
const loadPersistedCards = useCallback(async () => {
|
||||
try {
|
||||
const url = BACKEND_URL ? `${BACKEND_URL}/cards` : "/cards";
|
||||
const resp = await fetch(url, { cache: "no-store" });
|
||||
if (!resp.ok) {
|
||||
console.warn(`[cards] /cards returned ${resp.status}`);
|
||||
return;
|
||||
}
|
||||
const rawCards = (await resp.json()) as Array<
|
||||
| Extract<ServerMessage, { type: "card" }>
|
||||
| (Omit<Extract<ServerMessage, { type: "card" }>, "type"> & { type?: "card" })
|
||||
>;
|
||||
setCards((prev) => {
|
||||
const byServerId = new Map(
|
||||
prev.filter((card) => card.serverId).map((card) => [card.serverId as string, card.id]),
|
||||
);
|
||||
const next = rawCards.map((raw) => {
|
||||
const card = toCardItem({
|
||||
type: "card",
|
||||
...(raw as Omit<Extract<ServerMessage, { type: "card" }>, "type">),
|
||||
});
|
||||
return {
|
||||
...card,
|
||||
id:
|
||||
card.serverId && byServerId.has(card.serverId)
|
||||
? (byServerId.get(card.serverId) as number)
|
||||
: cardIdCounter++,
|
||||
};
|
||||
});
|
||||
return sortCards(next);
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn("[cards] failed to load persisted cards", err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onDcMessage = useCallback(
|
||||
(raw: string) => {
|
||||
console.log("[dc] onDcMessage raw:", raw);
|
||||
let msg: ServerMessage;
|
||||
try {
|
||||
msg = JSON.parse(raw);
|
||||
} catch {
|
||||
console.log("[dc] JSON parse failed for raw message");
|
||||
return;
|
||||
}
|
||||
if ("type" in msg) {
|
||||
console.log("[dc] typed message, type:", (msg as { type: string }).type);
|
||||
handleTypedMessage(
|
||||
msg as Extract<ServerMessage, { type: string }>,
|
||||
setAgentState,
|
||||
appendLine,
|
||||
addToast,
|
||||
);
|
||||
} else {
|
||||
console.log("[dc] legacy message, role:", (msg as { role: string }).role);
|
||||
handleLegacyMessage(
|
||||
msg as { role: string; text: string; timestamp?: string },
|
||||
setAgentState,
|
||||
appendLine,
|
||||
addToast,
|
||||
);
|
||||
}
|
||||
if (typeof msg !== "object" || msg === null || !("type" in msg)) return;
|
||||
handleTypedMessage(
|
||||
msg as Extract<ServerMessage, { type: string }>,
|
||||
setAgentState,
|
||||
appendLine,
|
||||
upsertCard,
|
||||
{ clear: clearIdleFallback, schedule: scheduleIdleFallback },
|
||||
);
|
||||
},
|
||||
[appendLine, addToast],
|
||||
[appendLine, clearIdleFallback, scheduleIdleFallback, upsertCard],
|
||||
);
|
||||
|
||||
return { agentState, logLines, toasts, appendLine, addToast, dismissToast, onDcMessage };
|
||||
return { agentState, logLines, cards, appendLine, dismissCard, loadPersistedCards, onDcMessage };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Hook
|
||||
// ---------------------------------------------------------------------------
|
||||
function usePeerConnectionControls({
|
||||
textOnly,
|
||||
connected,
|
||||
appendLine,
|
||||
onDcMessage,
|
||||
loadPersistedCards,
|
||||
showStatus,
|
||||
refs,
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
textOnlyRef,
|
||||
}: {
|
||||
textOnly: boolean;
|
||||
connected: boolean;
|
||||
appendLine: AppendLine;
|
||||
onDcMessage: (raw: string) => void;
|
||||
loadPersistedCards: () => Promise<void>;
|
||||
showStatus: (text: string, persistMs?: number) => void;
|
||||
refs: RTCRefs;
|
||||
setConnected: (value: boolean) => void;
|
||||
setConnecting: (value: boolean) => void;
|
||||
setRemoteStream: (stream: MediaStream | null) => void;
|
||||
textOnlyRef: { current: boolean };
|
||||
}) {
|
||||
const closePC = useCallback(() => {
|
||||
refs.dcRef.current?.close();
|
||||
refs.dcRef.current = null;
|
||||
refs.pcRef.current?.close();
|
||||
refs.pcRef.current = null;
|
||||
refs.micSendersRef.current = [];
|
||||
setConnected(false);
|
||||
setConnecting(false);
|
||||
if (refs.remoteAudioRef.current) refs.remoteAudioRef.current.srcObject = null;
|
||||
setRemoteStream(null);
|
||||
}, [refs, setConnected, setConnecting, setRemoteStream]);
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
await runConnect(
|
||||
refs,
|
||||
{
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
showStatus,
|
||||
appendLine,
|
||||
onDcMessage,
|
||||
onDcOpen: () => {
|
||||
loadPersistedCards().catch(() => {});
|
||||
},
|
||||
closePC,
|
||||
},
|
||||
{ textOnly: textOnlyRef.current },
|
||||
);
|
||||
}, [
|
||||
appendLine,
|
||||
closePC,
|
||||
loadPersistedCards,
|
||||
onDcMessage,
|
||||
refs,
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
showStatus,
|
||||
textOnlyRef,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (textOnly || !connected || refs.micSendersRef.current.length > 0) return;
|
||||
closePC();
|
||||
connect().catch(() => {});
|
||||
}, [closePC, connect, connected, refs.micSendersRef, textOnly]);
|
||||
|
||||
return { closePC, connect };
|
||||
}
|
||||
|
||||
export function useWebRTC(): WebRTCState {
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [textOnly, setTextOnlyState] = useState(false);
|
||||
const [voiceStatus, setVoiceStatus] = useState("");
|
||||
const [statusVisible, setStatusVisible] = useState(false);
|
||||
const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
|
||||
|
||||
const pcRef = useRef<RTCPeerConnection | null>(null);
|
||||
const dcRef = useRef<RTCDataChannel | null>(null);
|
||||
const remoteAudioRef = useRef<HTMLAudioElement | null>(null);
|
||||
const refs: RTCRefs = {
|
||||
pcRef: useRef<RTCPeerConnection | null>(null),
|
||||
dcRef: useRef<RTCDataChannel | null>(null),
|
||||
remoteAudioRef: useRef<HTMLAudioElement | null>(null),
|
||||
micSendersRef: useRef<RTCRtpSender[]>([]),
|
||||
};
|
||||
const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const micSendersRef = useRef<RTCRtpSender[]>([]);
|
||||
const textOnlyRef = useRef(false);
|
||||
const { sendTextMessage } = useBackendActions();
|
||||
const { agentState, logLines, cards, appendLine, dismissCard, loadPersistedCards, onDcMessage } =
|
||||
useMessageState();
|
||||
|
||||
const { agentState, logLines, toasts, appendLine, dismissToast, onDcMessage } = useMessageState();
|
||||
|
||||
// Create audio element once
|
||||
useEffect(() => {
|
||||
const audio = new Audio();
|
||||
audio.autoplay = true;
|
||||
(audio as HTMLAudioElement & { playsInline: boolean }).playsInline = true;
|
||||
remoteAudioRef.current = audio;
|
||||
return () => {
|
||||
audio.srcObject = null;
|
||||
};
|
||||
const setTextOnly = useCallback((enabled: boolean) => {
|
||||
textOnlyRef.current = enabled;
|
||||
setTextOnlyState(enabled);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: Event) => {
|
||||
const enabled = (e as CustomEvent<{ enabled: boolean }>).detail?.enabled ?? false;
|
||||
micSendersRef.current.forEach((sender) => {
|
||||
if (sender.track) sender.track.enabled = enabled;
|
||||
});
|
||||
};
|
||||
window.addEventListener("nanobot-mic-enable", handler);
|
||||
return () => window.removeEventListener("nanobot-mic-enable", handler);
|
||||
}, []);
|
||||
|
||||
const showStatus = useCallback((text: string, persistMs = 0) => {
|
||||
setVoiceStatus(text);
|
||||
setStatusVisible(true);
|
||||
if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
|
||||
if (persistMs > 0) {
|
||||
if (persistMs > 0)
|
||||
statusTimerRef.current = setTimeout(() => setStatusVisible(false), persistMs);
|
||||
}
|
||||
}, []);
|
||||
const sendJson = useCallback(
|
||||
(msg: ClientMessage) => {
|
||||
const dc = refs.dcRef.current;
|
||||
if (dc?.readyState === "open") dc.send(JSON.stringify(msg));
|
||||
},
|
||||
[refs.dcRef],
|
||||
);
|
||||
|
||||
const sendJson = useCallback((msg: ClientMessage) => {
|
||||
const dc = dcRef.current;
|
||||
if (!dc || dc.readyState !== "open") return;
|
||||
dc.send(JSON.stringify(msg));
|
||||
}, []);
|
||||
|
||||
const closePC = useCallback(() => {
|
||||
dcRef.current?.close();
|
||||
dcRef.current = null;
|
||||
pcRef.current?.close();
|
||||
pcRef.current = null;
|
||||
micSendersRef.current = [];
|
||||
setConnected(false);
|
||||
setConnecting(false);
|
||||
if (remoteAudioRef.current) remoteAudioRef.current.srcObject = null;
|
||||
setRemoteStream(null);
|
||||
}, []);
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
const refs: RTCRefs = { pcRef, dcRef, remoteAudioRef, micSendersRef };
|
||||
const cbs: RTCCallbacks = {
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
showStatus,
|
||||
appendLine,
|
||||
onDcMessage,
|
||||
closePC,
|
||||
};
|
||||
await runConnect(refs, cbs);
|
||||
}, [setConnected, setConnecting, setRemoteStream, showStatus, appendLine, onDcMessage, closePC]);
|
||||
useCardPolling(loadPersistedCards);
|
||||
useRemoteAudioBindings({
|
||||
textOnly,
|
||||
connected,
|
||||
showStatus,
|
||||
remoteAudioRef: refs.remoteAudioRef,
|
||||
micSendersRef: refs.micSendersRef,
|
||||
dcRef: refs.dcRef,
|
||||
textOnlyRef,
|
||||
});
|
||||
const { connect } = usePeerConnectionControls({
|
||||
textOnly,
|
||||
connected,
|
||||
appendLine,
|
||||
onDcMessage,
|
||||
loadPersistedCards,
|
||||
showStatus,
|
||||
refs,
|
||||
setConnected,
|
||||
setConnecting,
|
||||
setRemoteStream,
|
||||
textOnlyRef,
|
||||
});
|
||||
|
||||
return {
|
||||
connected,
|
||||
connecting,
|
||||
textOnly,
|
||||
agentState,
|
||||
logLines,
|
||||
toasts,
|
||||
cards,
|
||||
voiceStatus,
|
||||
statusVisible,
|
||||
remoteAudioEl: remoteAudioRef.current,
|
||||
remoteAudioEl: refs.remoteAudioRef.current,
|
||||
remoteStream,
|
||||
sendJson,
|
||||
dismissToast,
|
||||
sendTextMessage,
|
||||
dismissCard,
|
||||
setTextOnly,
|
||||
connect,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,23 +1,62 @@
|
|||
// Shared TypeScript types for the Nanobot UI
|
||||
|
||||
export type AgentState = "idle" | "listening" | "thinking" | "speaking";
|
||||
export type CardLane = "attention" | "work" | "context" | "history";
|
||||
export type CardState = "active" | "stale" | "resolved" | "superseded" | "archived";
|
||||
export type JsonValue =
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| null
|
||||
| { [key: string]: JsonValue }
|
||||
| JsonValue[];
|
||||
|
||||
export interface CardMessageMetadata {
|
||||
card_id?: string;
|
||||
card_slot?: string;
|
||||
card_title?: string;
|
||||
card_lane?: CardLane;
|
||||
card_template_key?: string;
|
||||
card_context_summary?: string;
|
||||
card_response_value?: string;
|
||||
card_live_content?: JsonValue;
|
||||
}
|
||||
|
||||
// Messages sent FROM backend TO frontend via DataChannel
|
||||
export type ServerMessage =
|
||||
| { type: "agent_state"; state: AgentState }
|
||||
| { type: "message"; content: string; is_progress: boolean }
|
||||
| { type: "toast"; kind: "text" | "image"; content: string; title: string; duration_ms: number }
|
||||
| { type: "choice"; request_id: string; question: string; choices: string[]; title: string }
|
||||
| {
|
||||
type: "message";
|
||||
role: string;
|
||||
content: string;
|
||||
is_progress: boolean;
|
||||
is_tool_hint: boolean;
|
||||
timestamp: string;
|
||||
}
|
||||
| {
|
||||
type: "card";
|
||||
id: string;
|
||||
kind: "text" | "question";
|
||||
title: string;
|
||||
content: string;
|
||||
question: string;
|
||||
choices: string[];
|
||||
response_value: string;
|
||||
slot: string;
|
||||
lane: CardLane;
|
||||
priority: number;
|
||||
state: CardState;
|
||||
template_key: string;
|
||||
context_summary: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
| { type: "error"; error: string }
|
||||
| { type: "pong" }
|
||||
// Legacy wire format still used by backend (role-based)
|
||||
| { role: string; text: string; timestamp?: string };
|
||||
| { type: "pong" };
|
||||
|
||||
// Messages sent FROM frontend TO backend via DataChannel
|
||||
export type ClientMessage =
|
||||
| { type: "voice-ptt"; pressed: boolean }
|
||||
| { type: "voice-ptt"; pressed: boolean; metadata?: CardMessageMetadata }
|
||||
| { type: "command"; command: string }
|
||||
| { type: "ui-response"; request_id: string; value: string }
|
||||
| { type: "card-response"; card_id: string; value: string }
|
||||
| { type: "ping" };
|
||||
|
||||
export interface LogLine {
|
||||
|
|
@ -27,19 +66,21 @@ export interface LogLine {
|
|||
timestamp: string;
|
||||
}
|
||||
|
||||
export interface ToastItem {
|
||||
export interface CardItem {
|
||||
id: number;
|
||||
kind: "text" | "image" | "choice";
|
||||
serverId?: string;
|
||||
kind: "text" | "question";
|
||||
content: string;
|
||||
title: string;
|
||||
durationMs: number;
|
||||
// For choice toasts
|
||||
requestId?: string;
|
||||
question?: string;
|
||||
choices?: string[];
|
||||
}
|
||||
|
||||
export interface RTCState {
|
||||
connected: boolean;
|
||||
connecting: boolean;
|
||||
responseValue?: string;
|
||||
slot?: string;
|
||||
lane: CardLane;
|
||||
priority: number;
|
||||
state: CardState;
|
||||
templateKey?: string;
|
||||
contextSummary?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue