apunkt/dograh
1
0
Fork 0
mirror of https://github.com/dograh-hq/dograh.git synced 2026-06-19 08:28:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'main' into feat/call-tags

Browse source
This commit is contained in:
Abhishek Kumar 2026-02-18 13:30:07 +05:30
commit 5c4cf14b07
117 changed files with 7365 additions and 5193 deletions
Download patch file Download diff file Expand all files Collapse all files

179
ui/package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "ui",
"version": "1.10.0",
"version": "1.13.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "ui",
"version": "1.10.0",
"version": "1.13.0",
"dependencies": {
"@dagrejs/dagre": "^1.1.4",
"@hey-api/client-fetch": "^0.10.0",
@ -777,7 +777,6 @@
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
"integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.26.2",
@ -970,6 +969,7 @@
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
"integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
"license": "MIT",
"peer": true,
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
@ -1093,6 +1093,7 @@
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
"integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/helper-module-imports": "^7.16.7",
"@babel/runtime": "^7.18.3",
@ -1111,13 +1112,15 @@
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@emotion/babel-plugin/node_modules/source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
"license": "BSD-3-Clause",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
@ -1127,6 +1130,7 @@
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
"integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@emotion/memoize": "^0.9.0",
"@emotion/sheet": "^1.4.0",
@ -1139,19 +1143,22 @@
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
"integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@emotion/memoize": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
"integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@emotion/react": {
"version": "11.14.0",
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
"integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.18.3",
"@emotion/babel-plugin": "^11.13.5",
@ -1176,6 +1183,7 @@
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
"integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@emotion/hash": "^0.9.2",
"@emotion/memoize": "^0.9.0",
@ -1188,19 +1196,22 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
"integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@emotion/unitless": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
"integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@emotion/use-insertion-effect-with-fallbacks": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
"integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
"license": "MIT",
"peer": true,
"peerDependencies": {
"react": ">=16.8.0"
}
@ -1209,13 +1220,15 @@
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
"integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@emotion/weak-memoize": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
"integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.25.2",
@ -1833,7 +1846,6 @@
"resolved": "https://registry.npmjs.org/@hey-api/openapi-ts/-/openapi-ts-0.66.2.tgz",
"integrity": "sha512-77nofk/zacBNDwVb86kjS2sMIrwbwoBgUNw10crhPPrhV7HUs6A4SzZxePLEGRyHbM54v0g+XL6P8DSr98BM+A==",
"license": "MIT",
"peer": true,
"dependencies": {
"@hey-api/json-schema-ref-parser": "1.0.4",
"c12": "2.0.1",
@ -2492,6 +2504,7 @@
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25"
@ -2749,7 +2762,6 @@
"resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
"integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
"license": "Apache-2.0",
"peer": true,
"engines": {
"node": ">=8.0.0"
}
@ -2759,6 +2771,7 @@
"resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.200.0.tgz",
"integrity": "sha512-IKJBQxh91qJ+3ssRly5hYEJ8NDHu9oY/B1PXVSCWf7zytmYO9RNLB0Ox9XQ/fJ8m6gY6Q6NtBWlmXfaXt5Uc4Q==",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"@opentelemetry/api": "^1.3.0"
},
@ -4140,6 +4153,7 @@
"resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.0.1.tgz",
"integrity": "sha512-dZOB3R6zvBwDKnHDTB4X1xtMArB/d324VsbiPkX/Yu0Q8T2xceRthoIVFhJdvgVM2QhGVUyX9tzwiNxGtoBJUw==",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"@opentelemetry/core": "2.0.1",
"@opentelemetry/semantic-conventions": "^1.29.0"
@ -4174,7 +4188,6 @@
"resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.34.0.tgz",
"integrity": "sha512-aKcOkyrorBGlajjRdVoJWHTxfxO1vCNHLJVlSDaRHDIdjU+pX8IYQPvPDkYiujKLbRnWU+1TBwEt0QRgSm4SGA==",
"license": "Apache-2.0",
"peer": true,
"engines": {
"node": ">=14"
}
@ -8924,7 +8937,6 @@
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},
@ -11069,6 +11081,7 @@
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
"integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/estree": "*",
"@types/json-schema": "*"
@ -11079,6 +11092,7 @@
"resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
"integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/eslint": "*",
"@types/estree": "*"
@ -11131,7 +11145,8 @@
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@types/pg": {
"version": "8.6.1",
@ -11158,7 +11173,6 @@
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.0.tgz",
"integrity": "sha512-UaicktuQI+9UKyA4njtDOGBD/67t8YEBt2xdfqu8+gP9hqPUPsiXlNPcpS2gVdjmis5GKPG3fCxbQLVgxsQZ8w==",
"license": "MIT",
"peer": true,
"dependencies": {
"csstype": "^3.0.2"
}
@ -11169,7 +11183,6 @@
"integrity": "sha512-jFf/woGTVTjUJsl2O7hcopJ1r0upqoq/vIOoCj0yLh3RIXxWcljlpuZ+vEBRXsymD1jhfeJrlyTy/S1UW+4y1w==",
"devOptional": true,
"license": "MIT",
"peer": true,
"peerDependencies": {
"@types/react": "^19.0.0"
}
@ -11179,6 +11192,7 @@
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
"integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
"license": "MIT",
"peer": true,
"peerDependencies": {
"@types/react": "*"
}
@ -11701,6 +11715,7 @@
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
"integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@webassemblyjs/helper-numbers": "1.13.2",
"@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@ -11710,25 +11725,29 @@
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
"integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@webassemblyjs/helper-api-error": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
"integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@webassemblyjs/helper-buffer": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
"integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@webassemblyjs/helper-numbers": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
"integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@webassemblyjs/floating-point-hex-parser": "1.13.2",
"@webassemblyjs/helper-api-error": "1.13.2",
@ -11739,13 +11758,15 @@
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
"integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@webassemblyjs/helper-wasm-section": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
"integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@webassemblyjs/ast": "1.14.1",
"@webassemblyjs/helper-buffer": "1.14.1",
@ -11758,6 +11779,7 @@
"resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
"integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@xtuc/ieee754": "^1.2.0"
}
@ -11767,6 +11789,7 @@
"resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
"integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"@xtuc/long": "4.2.2"
}
@ -11775,13 +11798,15 @@
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
"integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@webassemblyjs/wasm-edit": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
"integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@webassemblyjs/ast": "1.14.1",
"@webassemblyjs/helper-buffer": "1.14.1",
@ -11798,6 +11823,7 @@
"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
"integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@webassemblyjs/ast": "1.14.1",
"@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@ -11811,6 +11837,7 @@
"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
"integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@webassemblyjs/ast": "1.14.1",
"@webassemblyjs/helper-buffer": "1.14.1",
@ -11823,6 +11850,7 @@
"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
"integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@webassemblyjs/ast": "1.14.1",
"@webassemblyjs/helper-api-error": "1.13.2",
@ -11837,6 +11865,7 @@
"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
"integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@webassemblyjs/ast": "1.14.1",
"@xtuc/long": "4.2.2"
@ -11846,13 +11875,15 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
"integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
"license": "BSD-3-Clause"
"license": "BSD-3-Clause",
"peer": true
},
"node_modules/@xtuc/long": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
"license": "Apache-2.0"
"license": "Apache-2.0",
"peer": true
},
"node_modules/@xyflow/react": {
"version": "12.9.2",
@ -11919,7 +11950,6 @@
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@ -11980,6 +12010,7 @@
"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
"license": "MIT",
"peer": true,
"dependencies": {
"ajv": "^8.0.0"
},
@ -11997,6 +12028,7 @@
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
"license": "MIT",
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3",
"fast-uri": "^3.0.1",
@ -12012,7 +12044,8 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/ansi-regex": {
"version": "5.0.1",
@ -12330,6 +12363,7 @@
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
"integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.12.5",
"cosmiconfig": "^7.0.0",
@ -12436,7 +12470,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"caniuse-lite": "^1.0.30001688",
"electron-to-chromium": "^1.5.73",
@ -12617,6 +12650,7 @@
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
"integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=6.0"
}
@ -12837,6 +12871,7 @@
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
"integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/parse-json": "^4.0.0",
"import-fresh": "^3.2.1",
@ -12988,7 +13023,6 @@
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
"license": "ISC",
"peer": true,
"engines": {
"node": ">=12"
}
@ -13295,6 +13329,7 @@
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
@ -13386,6 +13421,7 @@
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
"license": "MIT",
"peer": true,
"dependencies": {
"is-arrayish": "^0.2.1"
}
@ -13394,7 +13430,8 @@
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/es-abstract": {
"version": "1.23.9",
@ -13512,7 +13549,8 @@
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
"integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/es-object-atoms": {
"version": "1.1.1",
@ -13661,7 +13699,6 @@
"integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.1",
@ -13835,7 +13872,6 @@
"integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.8",
@ -14123,6 +14159,7 @@
"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=0.8.x"
}
@ -14221,7 +14258,8 @@
"url": "https://opencollective.com/fastify"
}
],
"license": "BSD-3-Clause"
"license": "BSD-3-Clause",
"peer": true
},
"node_modules/fast-xml-parser": {
"version": "5.2.5",
@ -14286,7 +14324,8 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/find-up": {
"version": "5.0.0",
@ -14650,7 +14689,8 @@
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
"license": "BSD-2-Clause"
"license": "BSD-2-Clause",
"peer": true
},
"node_modules/glob/node_modules/brace-expansion": {
"version": "2.0.2",
@ -14915,7 +14955,6 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
"license": "MIT",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
@ -15482,6 +15521,7 @@
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
"integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/node": "*",
"merge-stream": "^2.0.0",
@ -15496,6 +15536,7 @@
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
"license": "MIT",
"peer": true,
"dependencies": {
"has-flag": "^4.0.0"
},
@ -15583,7 +15624,8 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/json-schema": {
"version": "0.4.0",
@ -15921,13 +15963,15 @@
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
"integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=6.11.5"
}
@ -16003,13 +16047,15 @@
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/merge2": {
"version": "1.4.1",
@ -16202,7 +16248,6 @@
"resolved": "https://registry.npmjs.org/next/-/next-15.5.9.tgz",
"integrity": "sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@next/env": "15.5.9",
"@swc/helpers": "0.5.15",
@ -16614,6 +16659,7 @@
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.0.0",
"error-ex": "^1.3.1",
@ -16672,6 +16718,7 @@
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=8"
}
@ -17084,6 +17131,7 @@
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
"integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"safe-buffer": "^5.1.0"
}
@ -17103,7 +17151,6 @@
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
@ -17134,7 +17181,6 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
"license": "MIT",
"peer": true,
"dependencies": {
"scheduler": "^0.26.0"
},
@ -17161,7 +17207,6 @@
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.4.tgz",
"integrity": "sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=18.0.0"
},
@ -17186,15 +17231,13 @@
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/react-redux": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/use-sync-external-store": "^0.0.6",
"use-sync-external-store": "^1.4.0"
@ -17334,6 +17377,7 @@
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"license": "BSD-3-Clause",
"peer": true,
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
@ -17398,8 +17442,7 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/redux-thunk": {
"version": "3.1.0",
@ -17437,7 +17480,8 @@
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/regexp.prototype.flags": {
"version": "1.5.4",
@ -17474,6 +17518,7 @@
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
@ -17573,7 +17618,6 @@
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.35.0.tgz",
"integrity": "sha512-kg6oI4g+vc41vePJyO6dHt/yl0Rz3Thv0kJeVQ3D1kS3E5XSuKbPc29G4IpT/Kv1KQwgHVcN+HtyS+HYLNSvQg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/estree": "1.0.6"
},
@ -17675,7 +17719,8 @@
"url": "https://feross.org/support"
}
],
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/safe-push-apply": {
"version": "1.0.0",
@ -17732,6 +17777,7 @@
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
"integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/json-schema": "^7.0.9",
"ajv": "^8.9.0",
@ -17768,6 +17814,7 @@
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
"license": "MIT",
"peer": true,
"dependencies": {
"fast-deep-equal": "^3.1.3"
},
@ -17779,7 +17826,8 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/secure-json-parse": {
"version": "4.0.0",
@ -17814,6 +17862,7 @@
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
"integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
"license": "BSD-3-Clause",
"peer": true,
"dependencies": {
"randombytes": "^2.1.0"
}
@ -18385,7 +18434,8 @@
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
"integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/supports-color": {
"version": "7.2.0",
@ -18425,8 +18475,7 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.1.tgz",
"integrity": "sha512-QNbdmeS979Efzim2g/bEvfuh+fTcIdp1y7gA+sb6OYSW74rt7Cr7M78AKdf6HqWT3d5AiTb7SwTT3sLQxr4/qw==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/tailwindcss-animate": {
"version": "1.0.7",
@ -18468,6 +18517,7 @@
"resolved": "https://registry.npmjs.org/terser/-/terser-5.42.0.tgz",
"integrity": "sha512-UYCvU9YQW2f/Vwl+P0GfhxJxbUGLwd+5QrrGgLajzWAtC/23AX0vcise32kkP7Eu0Wu9VlzzHAXkLObgjQfFlQ==",
"license": "BSD-2-Clause",
"peer": true,
"dependencies": {
"@jridgewell/source-map": "^0.3.3",
"acorn": "^8.14.0",
@ -18486,6 +18536,7 @@
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz",
"integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@jridgewell/trace-mapping": "^0.3.25",
"jest-worker": "^27.4.5",
@ -18519,7 +18570,8 @@
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/thread-stream": {
"version": "3.1.0",
@ -18592,7 +18644,6 @@
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},
@ -18654,8 +18705,7 @@
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD",
"peer": true
"license": "0BSD"
},
"node_modules/tsx": {
"version": "4.19.3",
@ -18793,7 +18843,6 @@
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
"integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@ -18999,6 +19048,7 @@
"resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz",
"integrity": "sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==",
"license": "MIT",
"peer": true,
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
@ -19085,6 +19135,7 @@
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
"integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
"license": "MIT",
"peer": true,
"dependencies": {
"glob-to-regexp": "^0.4.1",
"graceful-fs": "^4.1.2"
@ -19110,6 +19161,7 @@
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.99.9.tgz",
"integrity": "sha512-brOPwM3JnmOa+7kd3NsmOUOwbDAj8FT9xDsG3IW0MgbN9yZV7Oi/s/+MNQ/EcSMqw7qfoRyXPoeEWT8zLVdVGg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/eslint-scope": "^3.7.7",
"@types/estree": "^1.0.6",
@ -19172,6 +19224,7 @@
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
"license": "BSD-2-Clause",
"peer": true,
"dependencies": {
"esrecurse": "^4.3.0",
"estraverse": "^4.1.1"
@ -19185,6 +19238,7 @@
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
"license": "BSD-2-Clause",
"peer": true,
"engines": {
"node": ">=4.0"
}
@ -19448,6 +19502,7 @@
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
"license": "ISC",
"peer": true,
"engines": {
"node": ">= 6"
}
@ -19556,7 +19611,6 @@
"resolved": "https://registry.npmjs.org/yup/-/yup-1.7.1.tgz",
"integrity": "sha512-GKHFX2nXul2/4Dtfxhozv701jLQHdf6J34YDh2cEkpqoo8le5Mg6/LrdseVLrFarmFygZTlfIhHx/QKfb/QWXw==",
"license": "MIT",
"peer": true,
"dependencies": {
"property-expr": "^2.0.5",
"tiny-case": "^1.0.3",
@ -19599,7 +19653,6 @@
"resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",
"integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12.20.0"
},

2
ui/package.json
View file

@ -1,6 +1,6 @@
{
"name": "ui",
"version": "1.13.0",
"version": "1.14.0",
"private": true,
"scripts": {
"dev": "NODE_OPTIONS='--enable-source-maps' next dev --turbopack",

2
ui/src/app/api/auth/oss/route.ts
View file

@ -1,5 +1,5 @@
/*
Helps provide authentication token to LocalAuthService once its loaded
Provides authentication token to LocalProviderWrapper once loaded
in the browser
*/
import { cookies } from 'next/headers';

300
ui/src/app/campaigns/CampaignAdvancedSettings.tsx Normal file
View file

@ -0,0 +1,300 @@
"use client";
import { Plus, X } from 'lucide-react';
import { useId } from 'react';
import TimezoneSelect, { type ITimezoneOption } from 'react-timezone-select';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
export type TimeSlot = { day_of_week: number; start_time: string; end_time: string };
export interface CampaignAdvancedSettingsProps {
// Concurrency
maxConcurrency: string;
onMaxConcurrencyChange: (value: string) => void;
effectiveLimit: number;
orgConcurrentLimit: number;
fromNumbersCount: number;
// Retry config
retryEnabled: boolean;
onRetryEnabledChange: (value: boolean) => void;
maxRetries: string;
onMaxRetriesChange: (value: string) => void;
retryDelaySeconds: string;
onRetryDelaySecondsChange: (value: string) => void;
retryOnBusy: boolean;
onRetryOnBusyChange: (value: boolean) => void;
retryOnNoAnswer: boolean;
onRetryOnNoAnswerChange: (value: boolean) => void;
retryOnVoicemail: boolean;
onRetryOnVoicemailChange: (value: boolean) => void;
// Schedule config
scheduleEnabled: boolean;
onScheduleEnabledChange: (value: boolean) => void;
scheduleTimezone: ITimezoneOption | string;
onScheduleTimezoneChange: (value: ITimezoneOption | string) => void;
timeSlots: TimeSlot[];
onTimeSlotsChange: (value: TimeSlot[]) => void;
}
/** Extract the string timezone value from ITimezoneOption | string */
export function getTimezoneValue(tz: ITimezoneOption | string): string {
return typeof tz === 'string' ? tz : tz.value;
}
const timezoneSelectStyles = {
control: (base: Record<string, unknown>, state: { isFocused: boolean }) => ({
...base,
minHeight: '36px',
fontSize: '14px',
backgroundColor: 'var(--background)',
borderColor: state.isFocused ? 'var(--ring)' : 'var(--border)',
boxShadow: state.isFocused ? '0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent)' : 'none',
'&:hover': { borderColor: 'var(--border)' },
}),
menu: (base: Record<string, unknown>) => ({
...base,
zIndex: 9999,
backgroundColor: 'var(--popover)',
border: '1px solid var(--border)',
boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
}),
menuList: (base: Record<string, unknown>) => ({
...base,
backgroundColor: 'var(--popover)',
padding: 0,
}),
option: (base: Record<string, unknown>, state: { isSelected: boolean; isFocused: boolean }) => ({
...base,
backgroundColor: state.isSelected ? 'var(--accent)' : state.isFocused ? 'var(--accent)' : 'var(--popover)',
color: 'var(--foreground)',
cursor: 'pointer',
'&:active': { backgroundColor: 'var(--accent)' },
}),
singleValue: (base: Record<string, unknown>) => ({ ...base, color: 'var(--foreground)' }),
input: (base: Record<string, unknown>) => ({ ...base, color: 'var(--foreground)' }),
placeholder: (base: Record<string, unknown>) => ({ ...base, color: 'var(--muted-foreground)' }),
indicatorSeparator: (base: Record<string, unknown>) => ({ ...base, backgroundColor: 'var(--border)' }),
dropdownIndicator: (base: Record<string, unknown>) => ({
...base,
color: 'var(--muted-foreground)',
'&:hover': { color: 'var(--foreground)' },
}),
};
export default function CampaignAdvancedSettings({
maxConcurrency, onMaxConcurrencyChange, effectiveLimit, orgConcurrentLimit, fromNumbersCount,
retryEnabled, onRetryEnabledChange, maxRetries, onMaxRetriesChange,
retryDelaySeconds, onRetryDelaySecondsChange,
retryOnBusy, onRetryOnBusyChange, retryOnNoAnswer, onRetryOnNoAnswerChange,
retryOnVoicemail, onRetryOnVoicemailChange,
scheduleEnabled, onScheduleEnabledChange, scheduleTimezone, onScheduleTimezoneChange,
timeSlots, onTimeSlotsChange,
}: CampaignAdvancedSettingsProps) {
const timezoneSelectId = useId();
return (
<div className="space-y-6">
{/* Max Concurrent Calls */}
<div className="space-y-2">
<Label htmlFor="max-concurrency">Max Concurrent Calls</Label>
<Input
id="max-concurrency"
type="number"
placeholder={`Default: ${effectiveLimit}`}
value={maxConcurrency}
onChange={(e) => onMaxConcurrencyChange(e.target.value)}
min={1}
max={effectiveLimit}
/>
<p className="text-sm text-muted-foreground">
Maximum number of simultaneous calls. Leave empty to use {effectiveLimit}.
{fromNumbersCount > 0 && ` You have ${fromNumbersCount} CLI${fromNumbersCount !== 1 ? 's' : ''} and an org limit of ${orgConcurrentLimit}.`}
</p>
{fromNumbersCount > 0 && fromNumbersCount < orgConcurrentLimit && (
<p className="text-sm text-amber-600 dark:text-amber-400">
Concurrency is limited to {fromNumbersCount} by your configured phone numbers. To use the full org limit of {orgConcurrentLimit}, add more CLIs in <a href="/telephony-configurations" className="underline font-medium">Telephony Configuration</a>.
</p>
)}
{fromNumbersCount === 0 && (
<p className="text-sm text-amber-600 dark:text-amber-400">
No phone numbers configured. Add CLIs in <a href="/telephony-configurations" className="underline font-medium">Telephony Configuration</a> before running the campaign.
</p>
)}
</div>
{/* Retry Configuration */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<Label htmlFor="retry-enabled">Enable Retries</Label>
<p className="text-sm text-muted-foreground">
Automatically retry failed calls
</p>
</div>
<Switch
id="retry-enabled"
checked={retryEnabled}
onCheckedChange={onRetryEnabledChange}
/>
</div>
{retryEnabled && (
<div className="space-y-4 pl-4 border-l-2 border-muted">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="max-retries">Max Retries</Label>
<Input
id="max-retries"
type="number"
value={maxRetries}
onChange={(e) => onMaxRetriesChange(e.target.value)}
min={0}
max={10}
/>
</div>
<div className="space-y-2">
<Label htmlFor="retry-delay">Retry Delay (seconds)</Label>
<Input
id="retry-delay"
type="number"
value={retryDelaySeconds}
onChange={(e) => onRetryDelaySecondsChange(e.target.value)}
min={30}
max={3600}
/>
</div>
</div>
<div className="space-y-3">
<Label>Retry On</Label>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm">Busy Signal</span>
<Switch checked={retryOnBusy} onCheckedChange={onRetryOnBusyChange} />
</div>
<div className="flex items-center justify-between">
<span className="text-sm">No Answer</span>
<Switch checked={retryOnNoAnswer} onCheckedChange={onRetryOnNoAnswerChange} />
</div>
<div className="flex items-center justify-between">
<span className="text-sm">Voicemail</span>
<Switch checked={retryOnVoicemail} onCheckedChange={onRetryOnVoicemailChange} />
</div>
</div>
</div>
</div>
)}
</div>
<Separator />
{/* Call Schedule */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<Label htmlFor="schedule-enabled">Call Schedule</Label>
<p className="text-sm text-muted-foreground">
Restrict when calls are made
</p>
</div>
<Switch
id="schedule-enabled"
checked={scheduleEnabled}
onCheckedChange={onScheduleEnabledChange}
/>
</div>
{scheduleEnabled && (
<div className="space-y-4 pl-4 border-l-2 border-muted">
<div className="space-y-2">
<Label>Timezone</Label>
<TimezoneSelect
instanceId={timezoneSelectId}
value={scheduleTimezone}
onChange={onScheduleTimezoneChange}
styles={timezoneSelectStyles}
/>
</div>
<div className="space-y-3">
<Label>Time Slots</Label>
{timeSlots.map((slot, index) => (
<div key={index} className="flex items-center gap-2">
<Select
value={String(slot.day_of_week)}
onValueChange={(val) => {
const updated = [...timeSlots];
updated[index] = { ...updated[index], day_of_week: parseInt(val) };
onTimeSlotsChange(updated);
}}
>
<SelectTrigger className="w-[120px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, i) => (
<SelectItem key={i} value={String(i)}>{day}</SelectItem>
))}
</SelectContent>
</Select>
<Input
type="time"
value={slot.start_time}
onChange={(e) => {
const updated = [...timeSlots];
updated[index] = { ...updated[index], start_time: e.target.value };
onTimeSlotsChange(updated);
}}
className="w-[130px]"
/>
<span className="text-sm text-muted-foreground">to</span>
<Input
type="time"
value={slot.end_time}
onChange={(e) => {
const updated = [...timeSlots];
updated[index] = { ...updated[index], end_time: e.target.value };
onTimeSlotsChange(updated);
}}
className="w-[130px]"
/>
{timeSlots.length > 1 && (
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => onTimeSlotsChange(timeSlots.filter((_, i) => i !== index))}
>
<X className="h-4 w-4" />
</Button>
)}
</div>
))}
<Button
type="button"
variant="outline"
size="sm"
onClick={() => onTimeSlotsChange([...timeSlots, { day_of_week: 0, start_time: '09:00', end_time: '17:00' }])}
>
<Plus className="h-4 w-4 mr-1" />
Add Time Slot
</Button>
</div>
</div>
)}
</div>
</div>
);
}

364
ui/src/app/campaigns/[campaignId]/edit/page.tsx Normal file
View file

@ -0,0 +1,364 @@
"use client";
import { ArrowLeft } from 'lucide-react';
import { useParams, useRouter } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import type { ITimezoneOption } from 'react-timezone-select';
import { toast } from 'sonner';
import {
getCampaignApiV1CampaignCampaignIdGet,
getCampaignLimitsApiV1OrganizationsCampaignLimitsGet,
updateCampaignApiV1CampaignCampaignIdPatch,
} from '@/client/sdk.gen';
import type { CampaignResponse } from '@/client/types.gen';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { useAuth } from '@/lib/auth';
import CampaignAdvancedSettings, { getTimezoneValue, type TimeSlot } from '../../CampaignAdvancedSettings';
export default function EditCampaignPage() {
const { user, getAccessToken, redirectToLogin, loading } = useAuth();
const router = useRouter();
const params = useParams();
const campaignId = parseInt(params.campaignId as string);
// Loading state
const [isLoading, setIsLoading] = useState(true);
const [campaign, setCampaign] = useState<CampaignResponse | null>(null);
// Form state
const [campaignName, setCampaignName] = useState('');
const [maxConcurrency, setMaxConcurrency] = useState<string>('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitError, setSubmitError] = useState<string | null>(null);
// Limits state
const [orgConcurrentLimit, setOrgConcurrentLimit] = useState<number>(2);
const [fromNumbersCount, setFromNumbersCount] = useState<number>(0);
// Retry config state
const [retryEnabled, setRetryEnabled] = useState(true);
const [maxRetries, setMaxRetries] = useState<string>('2');
const [retryDelaySeconds, setRetryDelaySeconds] = useState<string>('120');
const [retryOnBusy, setRetryOnBusy] = useState(true);
const [retryOnNoAnswer, setRetryOnNoAnswer] = useState(true);
const [retryOnVoicemail, setRetryOnVoicemail] = useState(true);
// Schedule config state
const [scheduleEnabled, setScheduleEnabled] = useState(false);
const [scheduleTimezone, setScheduleTimezone] = useState<ITimezoneOption | string>('UTC');
const [timeSlots, setTimeSlots] = useState<TimeSlot[]>([
{ day_of_week: 0, start_time: '09:00', end_time: '17:00' },
]);
// Redirect if not authenticated
useEffect(() => {
if (!loading && !user) {
redirectToLogin();
}
}, [loading, user, redirectToLogin]);
// Fetch campaign and populate form
const fetchCampaign = useCallback(async () => {
if (!user) return;
try {
const accessToken = await getAccessToken();
const response = await getCampaignApiV1CampaignCampaignIdGet({
path: { campaign_id: campaignId },
headers: { 'Authorization': `Bearer ${accessToken}` },
});
if (response.data) {
const c = response.data;
// Redirect if campaign is completed or failed
if (['completed', 'failed'].includes(c.state)) {
router.replace(`/campaigns/${campaignId}`);
return;
}
setCampaign(c);
// Populate form state
setCampaignName(c.name);
setMaxConcurrency(c.max_concurrency ? String(c.max_concurrency) : '');
// Retry config
setRetryEnabled(c.retry_config.enabled);
setMaxRetries(String(c.retry_config.max_retries));
setRetryDelaySeconds(String(c.retry_config.retry_delay_seconds));
setRetryOnBusy(c.retry_config.retry_on_busy);
setRetryOnNoAnswer(c.retry_config.retry_on_no_answer);
setRetryOnVoicemail(c.retry_config.retry_on_voicemail);
// Schedule config
if (c.schedule_config) {
setScheduleEnabled(c.schedule_config.enabled);
setScheduleTimezone(c.schedule_config.timezone);
if (c.schedule_config.slots.length > 0) {
setTimeSlots(c.schedule_config.slots.map(s => ({ ...s })));
}
}
}
} catch (error) {
console.error('Failed to fetch campaign:', error);
toast.error('Failed to load campaign');
router.replace(`/campaigns/${campaignId}`);
} finally {
setIsLoading(false);
}
}, [user, getAccessToken, campaignId, router]);
// Fetch campaign limits
const fetchCampaignLimits = useCallback(async () => {
if (!user) return;
try {
const accessToken = await getAccessToken();
const response = await getCampaignLimitsApiV1OrganizationsCampaignLimitsGet({
headers: { 'Authorization': `Bearer ${accessToken}` },
});
if (response.data) {
setOrgConcurrentLimit(response.data.concurrent_call_limit);
setFromNumbersCount(response.data.from_numbers_count);
}
} catch (error) {
console.error('Failed to fetch campaign limits:', error);
}
}, [user, getAccessToken]);
// Initial load
useEffect(() => {
if (user) {
fetchCampaign();
fetchCampaignLimits();
}
}, [fetchCampaign, fetchCampaignLimits, user]);
// Effective concurrency limit
const effectiveLimit = fromNumbersCount > 0
? Math.min(orgConcurrentLimit, fromNumbersCount)
: orgConcurrentLimit;
// Handle form submission
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setSubmitError(null);
if (!campaignName.trim()) {
toast.error('Campaign name is required');
return;
}
// Validate max_concurrency if provided
const maxConcurrencyValue = maxConcurrency ? parseInt(maxConcurrency) : null;
if (maxConcurrencyValue !== null) {
if (isNaN(maxConcurrencyValue) || maxConcurrencyValue < 1 || maxConcurrencyValue > 100) {
toast.error('Max concurrent calls must be between 1 and 100');
return;
}
if (maxConcurrencyValue > effectiveLimit) {
if (fromNumbersCount > 0 && fromNumbersCount < orgConcurrentLimit) {
toast.error(`Max concurrent calls cannot exceed ${effectiveLimit}. You have ${fromNumbersCount} phone number(s) configured — add more CLIs to increase concurrency.`);
} else {
toast.error(`Max concurrent calls cannot exceed organization limit (${effectiveLimit})`);
}
return;
}
}
// Validate schedule slots if enabled
if (scheduleEnabled) {
if (timeSlots.length === 0) {
toast.error('Add at least one time slot');
return;
}
for (const slot of timeSlots) {
if (slot.start_time >= slot.end_time) {
toast.error('Start time must be before end time for each slot');
return;
}
}
}
setIsSubmitting(true);
try {
const accessToken = await getAccessToken();
const retryConfig = {
enabled: retryEnabled,
max_retries: parseInt(maxRetries) || 2,
retry_delay_seconds: parseInt(retryDelaySeconds) || 120,
retry_on_busy: retryOnBusy,
retry_on_no_answer: retryOnNoAnswer,
retry_on_voicemail: retryOnVoicemail,
};
const timezoneValue = getTimezoneValue(scheduleTimezone);
const scheduleConfig = scheduleEnabled && timeSlots.length > 0
? {
enabled: true,
timezone: timezoneValue,
slots: timeSlots,
}
: {
enabled: false,
timezone: timezoneValue,
slots: [{ day_of_week: 0, start_time: '09:00', end_time: '17:00' }],
};
const response = await updateCampaignApiV1CampaignCampaignIdPatch({
path: { campaign_id: campaignId },
body: {
name: campaignName,
retry_config: retryConfig,
max_concurrency: maxConcurrencyValue,
schedule_config: scheduleConfig,
},
headers: { 'Authorization': `Bearer ${accessToken}` },
});
if (response.error) {
const errorDetail = (response.error as { detail?: string })?.detail;
const errorMessage = errorDetail || 'Failed to update campaign';
setSubmitError(errorMessage);
toast.error(errorMessage);
return;
}
if (response.data) {
toast.success('Campaign updated successfully');
router.push(`/campaigns/${campaignId}`);
}
} catch (error) {
console.error('Failed to update campaign:', error);
const errorMessage = 'Failed to update campaign';
setSubmitError(errorMessage);
toast.error(errorMessage);
} finally {
setIsSubmitting(false);
}
};
const handleBack = () => {
router.push(`/campaigns/${campaignId}`);
};
if (isLoading) {
return (
<div className="container mx-auto p-6 space-y-6 max-w-2xl">
<div className="animate-pulse">
<div className="h-8 bg-muted rounded w-1/4 mb-4"></div>
<div className="h-64 bg-muted rounded"></div>
</div>
</div>
);
}
if (!campaign) {
return (
<div className="container mx-auto p-6 space-y-6 max-w-2xl">
<p className="text-center text-muted-foreground">Campaign not found</p>
</div>
);
}
return (
<div className="container mx-auto p-6 pb-12 space-y-6 max-w-2xl">
<div>
<Button
variant="ghost"
onClick={handleBack}
className="mb-4"
>
<ArrowLeft className="h-4 w-4 mr-2" />
Back to Campaign
</Button>
<h1 className="text-3xl font-bold mb-2">Edit Campaign</h1>
<p className="text-muted-foreground">Modify campaign settings</p>
</div>
<Card>
<CardHeader>
<CardTitle>Campaign Settings</CardTitle>
<CardDescription>
Update name, concurrency, retry, and schedule configuration
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-6">
{/* Campaign Name */}
<div className="space-y-2">
<Label htmlFor="campaign-name">Campaign Name</Label>
<Input
id="campaign-name"
placeholder="Enter campaign name"
value={campaignName}
onChange={(e) => setCampaignName(e.target.value)}
maxLength={255}
required
/>
</div>
<Separator />
<CampaignAdvancedSettings
maxConcurrency={maxConcurrency}
onMaxConcurrencyChange={setMaxConcurrency}
effectiveLimit={effectiveLimit}
orgConcurrentLimit={orgConcurrentLimit}
fromNumbersCount={fromNumbersCount}
retryEnabled={retryEnabled}
onRetryEnabledChange={setRetryEnabled}
maxRetries={maxRetries}
onMaxRetriesChange={setMaxRetries}
retryDelaySeconds={retryDelaySeconds}
onRetryDelaySecondsChange={setRetryDelaySeconds}
retryOnBusy={retryOnBusy}
onRetryOnBusyChange={setRetryOnBusy}
retryOnNoAnswer={retryOnNoAnswer}
onRetryOnNoAnswerChange={setRetryOnNoAnswer}
retryOnVoicemail={retryOnVoicemail}
onRetryOnVoicemailChange={setRetryOnVoicemail}
scheduleEnabled={scheduleEnabled}
onScheduleEnabledChange={setScheduleEnabled}
scheduleTimezone={scheduleTimezone}
onScheduleTimezoneChange={setScheduleTimezone}
timeSlots={timeSlots}
onTimeSlotsChange={setTimeSlots}
/>
{submitError && (
<div className="rounded-md bg-destructive/15 p-3 text-sm text-destructive">
{submitError}
</div>
)}
<div className="flex gap-4 pt-4">
<Button
type="submit"
disabled={isSubmitting || !campaignName.trim()}
>
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
<Button
type="button"
variant="outline"
onClick={handleBack}
disabled={isSubmitting}
>
Cancel
</Button>
</div>
</form>
</CardContent>
</Card>
</div>
);
}

92
ui/src/app/campaigns/[campaignId]/page.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { ArrowLeft, Check, Pause, Play, RefreshCw, X } from 'lucide-react';
import { ArrowLeft, Check, Clock, Pause, Pencil, Play, RefreshCw, X } from 'lucide-react';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import { toast } from 'sonner';
@ -10,7 +10,8 @@ import {
getCampaignSourceDownloadUrlApiV1CampaignCampaignIdSourceDownloadUrlGet,
pauseCampaignApiV1CampaignCampaignIdPausePost,
resumeCampaignApiV1CampaignCampaignIdResumePost,
startCampaignApiV1CampaignCampaignIdStartPost} from '@/client/sdk.gen';
startCampaignApiV1CampaignCampaignIdStartPost,
} from '@/client/sdk.gen';
import type { CampaignResponse } from '@/client/types.gen';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
@ -236,31 +237,49 @@ export default function CampaignDetailPage() {
}
};
const canEdit = campaign && ['created', 'running', 'paused'].includes(campaign.state);
// Render action button based on state
const renderActionButton = () => {
if (!campaign || isExecutingAction) return null;
const editButton = canEdit ? (
<Button variant="outline" onClick={() => router.push(`/campaigns/${campaignId}/edit`)}>
<Pencil className="h-4 w-4 mr-2" />
Edit Campaign
</Button>
) : null;
switch (campaign.state) {
case 'created':
return (
<Button onClick={handleStart} disabled={isExecutingAction}>
<Play className="h-4 w-4 mr-2" />
Start Campaign
</Button>
<div className="flex items-center gap-2">
{editButton}
<Button onClick={handleStart} disabled={isExecutingAction}>
<Play className="h-4 w-4 mr-2" />
Start Campaign
</Button>
</div>
);
case 'running':
return (
<Button onClick={handlePause} disabled={isExecutingAction}>
<Pause className="h-4 w-4 mr-2" />
Pause Campaign
</Button>
<div className="flex items-center gap-2">
{editButton}
<Button onClick={handlePause} disabled={isExecutingAction}>
<Pause className="h-4 w-4 mr-2" />
Pause Campaign
</Button>
</div>
);
case 'paused':
return (
<Button onClick={handleResume} disabled={isExecutingAction}>
<RefreshCw className="h-4 w-4 mr-2" />
Resume Campaign
</Button>
<div className="flex items-center gap-2">
{editButton}
<Button onClick={handleResume} disabled={isExecutingAction}>
<RefreshCw className="h-4 w-4 mr-2" />
Resume Campaign
</Button>
</div>
);
default:
return null;
@ -449,6 +468,51 @@ export default function CampaignDetailPage() {
</div>
)}
</div>
<Separator />
{/* Call Schedule (read-only) */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Call Schedule</span>
<div className="flex items-center gap-2">
{campaign.schedule_config?.enabled ? (
<Badge variant="default" className="flex items-center gap-1">
<Clock className="h-3 w-3" />
Enabled
</Badge>
) : (
<Badge variant="secondary" className="flex items-center gap-1">
<X className="h-3 w-3" />
Not configured
</Badge>
)}
</div>
</div>
{campaign.schedule_config?.enabled && (
<div className="pl-4 border-l-2 border-muted space-y-3">
<div>
<dt className="text-sm text-muted-foreground">Timezone</dt>
<dd className="mt-1 font-medium">{campaign.schedule_config.timezone.replace(/_/g, ' ')}</dd>
</div>
<div>
<dt className="text-sm text-muted-foreground">Time Slots</dt>
<dd className="mt-1 flex flex-wrap gap-2">
{campaign.schedule_config.slots.map((slot, index) => {
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
return (
<div key={index} className="flex items-center gap-1">
<Badge variant="outline" className="text-xs">{dayNames[slot.day_of_week]}</Badge>
<span className="text-sm">{slot.start_time} - {slot.end_time}</span>
</div>
);
})}
</dd>
</div>
</div>
)}
</div>
</CardContent>
</Card>

154
ui/src/app/campaigns/new/page.tsx
View file

@ -3,6 +3,7 @@
import { ArrowLeft, ChevronDown, ChevronRight } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';
import type { ITimezoneOption } from 'react-timezone-select';
import { toast } from 'sonner';
import {
@ -23,9 +24,9 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { useAuth } from '@/lib/auth';
import CampaignAdvancedSettings, { getTimezoneValue, type TimeSlot } from '../CampaignAdvancedSettings';
import CsvUploadSelector from '../CsvUploadSelector';
import GoogleSheetSelector from '../GoogleSheetSelector';
@ -59,6 +60,18 @@ export default function NewCampaignPage() {
const [retryOnBusy, setRetryOnBusy] = useState(true);
const [retryOnNoAnswer, setRetryOnNoAnswer] = useState(true);
const [retryOnVoicemail, setRetryOnVoicemail] = useState(true);
// Schedule config state
const [scheduleEnabled, setScheduleEnabled] = useState(false);
const [scheduleTimezone, setScheduleTimezone] = useState<ITimezoneOption | string>(() => {
try {
return Intl.DateTimeFormat().resolvedOptions().timeZone;
} catch {
return 'UTC';
}
});
const [timeSlots, setTimeSlots] = useState<TimeSlot[]>([
{ day_of_week: 0, start_time: '09:00', end_time: '17:00' },
]);
// Redirect if not authenticated
useEffect(() => {
@ -163,7 +176,6 @@ export default function NewCampaignPage() {
try {
const accessToken = await getAccessToken();
// Build retry_config only if user has modified settings from defaults
const retryConfig = {
enabled: retryEnabled,
max_retries: parseInt(maxRetries) || 2,
@ -173,6 +185,16 @@ export default function NewCampaignPage() {
retry_on_voicemail: retryOnVoicemail,
};
// Build schedule_config if enabled
const timezoneValue = getTimezoneValue(scheduleTimezone);
const scheduleConfig = scheduleEnabled && timeSlots.length > 0
? {
enabled: true,
timezone: timezoneValue,
slots: timeSlots,
}
: undefined;
const response = await createCampaignApiV1CampaignCreatePost({
body: {
name: campaignName,
@ -181,6 +203,7 @@ export default function NewCampaignPage() {
source_id: sourceId,
retry_config: retryConfig,
max_concurrency: maxConcurrencyValue,
schedule_config: scheduleConfig,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
@ -353,107 +376,32 @@ export default function NewCampaignPage() {
<ChevronRight className="h-4 w-4" />
)}
</CollapsibleTrigger>
<CollapsibleContent className="px-4 pb-4 space-y-6">
{/* Max Concurrent Calls */}
<div className="space-y-2">
<Label htmlFor="max-concurrency">Max Concurrent Calls</Label>
<Input
id="max-concurrency"
type="number"
placeholder={`Default: ${effectiveLimit}`}
value={maxConcurrency}
onChange={(e) => setMaxConcurrency(e.target.value)}
min={1}
max={effectiveLimit}
/>
<p className="text-sm text-muted-foreground">
Maximum number of simultaneous calls. Leave empty to use {effectiveLimit}.
{fromNumbersCount > 0 && ` You have ${fromNumbersCount} CLI${fromNumbersCount !== 1 ? 's' : ''} and an org limit of ${orgConcurrentLimit}.`}
</p>
{fromNumbersCount > 0 && fromNumbersCount < orgConcurrentLimit && (
<p className="text-sm text-amber-600 dark:text-amber-400">
Concurrency is limited to {fromNumbersCount} by your configured phone numbers. To use the full org limit of {orgConcurrentLimit}, add more CLIs in <a href="/telephony-configurations" className="underline font-medium">Telephony Configuration</a>.
</p>
)}
{fromNumbersCount === 0 && (
<p className="text-sm text-amber-600 dark:text-amber-400">
No phone numbers configured. Add CLIs in <a href="/telephony-configurations" className="underline font-medium">Telephony Configuration</a> before running the campaign.
</p>
)}
</div>
{/* Retry Configuration */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<Label htmlFor="retry-enabled">Enable Retries</Label>
<p className="text-sm text-muted-foreground">
Automatically retry failed calls
</p>
</div>
<Switch
id="retry-enabled"
checked={retryEnabled}
onCheckedChange={setRetryEnabled}
/>
</div>
{retryEnabled && (
<div className="space-y-4 pl-4 border-l-2 border-muted">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="max-retries">Max Retries</Label>
<Input
id="max-retries"
type="number"
value={maxRetries}
onChange={(e) => setMaxRetries(e.target.value)}
min={0}
max={10}
/>
</div>
<div className="space-y-2">
<Label htmlFor="retry-delay">Retry Delay (seconds)</Label>
<Input
id="retry-delay"
type="number"
value={retryDelaySeconds}
onChange={(e) => setRetryDelaySeconds(e.target.value)}
min={30}
max={3600}
/>
</div>
</div>
<div className="space-y-3">
<Label>Retry On</Label>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm">Busy Signal</span>
<Switch
checked={retryOnBusy}
onCheckedChange={setRetryOnBusy}
/>
</div>
<div className="flex items-center justify-between">
<span className="text-sm">No Answer</span>
<Switch
checked={retryOnNoAnswer}
onCheckedChange={setRetryOnNoAnswer}
/>
</div>
<div className="flex items-center justify-between">
<span className="text-sm">Voicemail</span>
<Switch
checked={retryOnVoicemail}
onCheckedChange={setRetryOnVoicemail}
/>
</div>
</div>
</div>
</div>
)}
</div>
<CollapsibleContent className="px-4 pb-4">
<CampaignAdvancedSettings
maxConcurrency={maxConcurrency}
onMaxConcurrencyChange={setMaxConcurrency}
effectiveLimit={effectiveLimit}
orgConcurrentLimit={orgConcurrentLimit}
fromNumbersCount={fromNumbersCount}
retryEnabled={retryEnabled}
onRetryEnabledChange={setRetryEnabled}
maxRetries={maxRetries}
onMaxRetriesChange={setMaxRetries}
retryDelaySeconds={retryDelaySeconds}
onRetryDelaySecondsChange={setRetryDelaySeconds}
retryOnBusy={retryOnBusy}
onRetryOnBusyChange={setRetryOnBusy}
retryOnNoAnswer={retryOnNoAnswer}
onRetryOnNoAnswerChange={setRetryOnNoAnswer}
retryOnVoicemail={retryOnVoicemail}
onRetryOnVoicemailChange={setRetryOnVoicemail}
scheduleEnabled={scheduleEnabled}
onScheduleEnabledChange={setScheduleEnabled}
scheduleTimezone={scheduleTimezone}
onScheduleTimezoneChange={setScheduleTimezone}
timeSlots={timeSlots}
onTimeSlotsChange={setTimeSlots}
/>
</CollapsibleContent>
</Collapsible>

13
ui/src/app/files/DocumentList.tsx
View file

@ -16,27 +16,21 @@ import { Skeleton } from '@/components/ui/skeleton';
import logger from '@/lib/logger';
interface DocumentListProps {
accessToken: string;
refreshTrigger: number;
}
export default function DocumentList({ accessToken, refreshTrigger }: DocumentListProps) {
export default function DocumentList({ refreshTrigger }: DocumentListProps) {
const [documents, setDocuments] = useState<DocumentResponseSchema[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const [error, setError] = useState<string | null>(null);
const fetchDocuments = useCallback(async () => {
if (!accessToken) return;
try {
setIsLoading(true);
setError(null);
const response = await listDocumentsApiV1KnowledgeBaseDocumentsGet({
headers: {
'Authorization': `Bearer ${accessToken}`,
},
query: {
limit: 100,
offset: 0,
@ -54,7 +48,7 @@ export default function DocumentList({ accessToken, refreshTrigger }: DocumentLi
} finally {
setIsLoading(false);
}
}, [accessToken]);
}, []);
// Fetch documents on mount and when refreshTrigger changes
useEffect(() => {
@ -85,9 +79,6 @@ export default function DocumentList({ accessToken, refreshTrigger }: DocumentLi
path: {
document_uuid: documentUuid,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
if (response.error) {

9
ui/src/app/files/DocumentUpload.tsx
View file

@ -14,14 +14,13 @@ import { Progress } from '@/components/ui/progress';
import logger from '@/lib/logger';
interface DocumentUploadProps {
accessToken: string;
onUploadSuccess: () => void;
}
const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
const ACCEPTED_FILE_TYPES = ['.pdf', '.docx', '.doc', '.txt'];
export default function DocumentUpload({ accessToken, onUploadSuccess }: DocumentUploadProps) {
export default function DocumentUpload({ onUploadSuccess }: DocumentUploadProps) {
const [uploading, setUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0);
const [dragActive, setDragActive] = useState(false);
@ -62,9 +61,6 @@ export default function DocumentUpload({ accessToken, onUploadSuccess }: Documen
uploaded_at: new Date().toISOString(),
},
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
if (uploadUrlResponse.error || !uploadUrlResponse.data) {
@ -98,9 +94,6 @@ export default function DocumentUpload({ accessToken, onUploadSuccess }: Documen
document_uuid: uploadData.document_uuid,
s3_key: uploadData.s3_key,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
if (processResponse.error) {

21
ui/src/app/files/page.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
@ -11,9 +11,8 @@ import DocumentList from "./DocumentList";
import DocumentUpload from "./DocumentUpload";
export default function FilesPage() {
const { user, getAccessToken, redirectToLogin, loading } = useAuth();
const { user, redirectToLogin, loading } = useAuth();
const [refreshKey, setRefreshKey] = useState(0);
const [accessToken, setAccessToken] = useState<string>('');
// Redirect if not authenticated
useEffect(() => {
@ -22,24 +21,12 @@ export default function FilesPage() {
}
}, [loading, user, redirectToLogin]);
// Get access token
const fetchAccessToken = useCallback(async () => {
if (user) {
const token = await getAccessToken();
setAccessToken(token);
}
}, [user, getAccessToken]);
useEffect(() => {
fetchAccessToken();
}, [fetchAccessToken]);
const handleUploadSuccess = () => {
// Trigger refresh of document list
setRefreshKey(prev => prev + 1);
};
if (loading || !user || !accessToken) {
if (loading || !user) {
return (
<div className="container mx-auto px-4 py-8">
<div className="space-y-4">
@ -75,7 +62,6 @@ export default function FilesPage() {
</CardHeader>
<CardContent>
<DocumentList
accessToken={accessToken}
refreshTrigger={refreshKey}
/>
</CardContent>
@ -92,7 +78,6 @@ export default function FilesPage() {
</CardHeader>
<CardContent>
<DocumentUpload
accessToken={accessToken}
onUploadSuccess={handleUploadSuccess}
/>
</CardContent>

23
ui/src/app/reports/page.tsx
View file

@ -16,6 +16,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Skeleton } from '@/components/ui/skeleton';
import { useUserConfig } from '@/context/UserConfigContext';
import { useAuth } from '@/lib/auth';
import { DispositionChart } from './components/DispositionChart';
import { DurationChart } from './components/DurationChart';
@ -55,20 +56,18 @@ export default function ReportsPage() {
const [report, setReport] = useState<DailyReport | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { userConfig, accessToken } = useUserConfig();
const { userConfig } = useUserConfig();
const auth = useAuth();
const timezone = userConfig?.timezone || 'America/New_York';
// Fetch workflows on mount
useEffect(() => {
const fetchWorkflows = async () => {
if (!accessToken) return;
if (!auth.isAuthenticated) return;
try {
const response = await getWorkflowOptionsApiV1OrganizationsReportsWorkflowsGet({
headers: {
Authorization: `Bearer ${accessToken}`
}
});
if (response.data) {
setWorkflows(response.data);
@ -78,12 +77,12 @@ export default function ReportsPage() {
}
};
fetchWorkflows();
}, [accessToken]);
}, [auth.isAuthenticated]);
// Fetch report data when date or workflow changes
useEffect(() => {
const fetchReport = async () => {
if (!accessToken) return;
if (!auth.isAuthenticated) return;
setLoading(true);
setError(null);
@ -98,9 +97,6 @@ export default function ReportsPage() {
timezone,
...(workflowId && { workflow_id: workflowId })
},
headers: {
Authorization: `Bearer ${accessToken}`
}
});
if (response.data) {
@ -115,7 +111,7 @@ export default function ReportsPage() {
};
fetchReport();
}, [selectedDate, selectedWorkflow, timezone, accessToken]);
}, [selectedDate, selectedWorkflow, timezone, auth.isAuthenticated]);
const handlePreviousDay = () => {
setSelectedDate(subDays(selectedDate, 1));
@ -126,7 +122,7 @@ export default function ReportsPage() {
};
const handleDownloadCSV = async () => {
if (!accessToken) return;
if (!auth.isAuthenticated) return;
try {
const dateStr = format(selectedDate, 'yyyy-MM-dd');
@ -139,9 +135,6 @@ export default function ReportsPage() {
timezone,
...(workflowId && { workflow_id: workflowId })
},
headers: {
Authorization: `Bearer ${accessToken}`
}
});
if (response.data && response.data.length > 0) {

33
ui/src/app/superadmin/runs/page.tsx
View file

@ -30,7 +30,7 @@ import {
} from "@/components/ui/table";
import { Textarea } from '@/components/ui/textarea';
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { useUserConfig } from '@/context/UserConfigContext';
import { useAuth } from '@/lib/auth';
import{ superadminFilterAttributes } from "@/lib/filterAttributes";
import { decodeFiltersFromURL, encodeFiltersToURL } from '@/lib/filters';
import { impersonateAsSuperadmin } from '@/lib/utils';
@ -107,10 +107,10 @@ export default function RunsPage() {
const [commentText, setCommentText] = useState('');
const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
const { accessToken } = useUserConfig();
const auth = useAuth();
// Media preview dialog
const mediaPreview = MediaPreviewDialog({ accessToken });
const mediaPreview = MediaPreviewDialog();
const fetchRuns = useCallback(async (
page: number,
@ -119,7 +119,7 @@ export default function RunsPage() {
sortByParam?: string | null,
sortOrderParam?: 'asc' | 'desc'
) => {
if (!accessToken) return;
if (!auth.isAuthenticated) return;
// Don't show loading state for auto-refresh to prevent UI flicker
if (!isAutoRefresh) {
@ -148,9 +148,6 @@ export default function RunsPage() {
...(sortByParam && { sort_by: sortByParam }),
...(sortOrderParam && { sort_order: sortOrderParam }),
},
headers: {
'Authorization': `Bearer ${accessToken}`,
}
});
if (response.data) {
@ -170,7 +167,7 @@ export default function RunsPage() {
setIsAutoRefreshing(false);
}
}
}, [limit, accessToken]);
}, [limit, auth.isAuthenticated]);
const updatePageInUrl = useCallback((page: number, filters?: ActiveFilter[], sortByParam?: string | null, sortOrderParam?: 'asc' | 'desc') => {
const params = new URLSearchParams();
@ -195,11 +192,11 @@ export default function RunsPage() {
}, [router]);
useEffect(() => {
// Fetch runs when token is available and when page/sort changes
if (accessToken) {
// Fetch runs when auth is available and when page/sort changes
if (auth.isAuthenticated) {
fetchRuns(currentPage, appliedFilters, false, sortBy, sortOrder);
}
}, [currentPage, accessToken, appliedFilters, fetchRuns, sortBy, sortOrder]);
}, [currentPage, auth.isAuthenticated, appliedFilters, fetchRuns, sortBy, sortOrder]);
// Auto-refresh every 5 seconds when enabled and filters are active
useEffect(() => {
@ -262,7 +259,7 @@ export default function RunsPage() {
// Save comment function declared outside JSX (requirement #2)
const saveAdminComment = useCallback(async () => {
if (commentRunId === null || !accessToken) return;
if (commentRunId === null || !auth.isAuthenticated) return;
try {
await setAdminCommentApiV1SuperuserWorkflowRunsRunIdCommentPost({
path: {
@ -271,9 +268,6 @@ export default function RunsPage() {
body: {
admin_comment: commentText,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
// Optimistically update UI
@ -284,7 +278,7 @@ export default function RunsPage() {
console.error('Failed to set admin comment', err);
alert('Failed to save comment. Please try again.');
}
}, [commentRunId, commentText, accessToken]);
}, [commentRunId, commentText, auth.isAuthenticated]);
/**
* ----------------------------------------------------------------------------------
@ -308,10 +302,11 @@ export default function RunsPage() {
*/
const impersonateAndMaybeRedirect = useCallback(
async (targetUserId: number | undefined, redirectPath?: string) => {
if (!targetUserId || !accessToken) return;
if (!targetUserId || !auth.isAuthenticated) return;
try {
const token = await auth.getAccessToken();
await impersonateAsSuperadmin({
accessToken: accessToken,
accessToken: token,
userId: targetUserId,
redirectPath,
openInNewTab: true,
@ -321,7 +316,7 @@ export default function RunsPage() {
alert('Failed to impersonate the user. Please try again.');
}
},
[accessToken],
[auth],
);
if (isLoading && runs.length === 0) {

212
ui/src/app/telephony-configurations/page.tsx
View file

@ -8,6 +8,8 @@ import { toast } from "sonner";
import { getTelephonyConfigurationApiV1OrganizationsTelephonyConfigGet, saveTelephonyConfigurationApiV1OrganizationsTelephonyConfigPost } from "@/client/sdk.gen";
import type {
AriConfigurationRequest,
AriConfigurationResponse,
CloudonixConfigurationRequest,
CloudonixConfigurationResponse,
TelephonyConfigurationResponse,
@ -51,6 +53,12 @@ interface TelephonyConfigForm {
// Cloudonix fields
bearer_token?: string;
domain_id?: string;
// ARI fields
ari_endpoint?: string;
app_name?: string;
app_password?: string;
ws_client_name?: string;
inbound_workflow_id?: number;
// Common field - multiple phone numbers
from_numbers: string[];
}
@ -140,6 +148,19 @@ export default function ConfigureTelephonyPage() {
setValue("bearer_token", cloudonixConfig.bearer_token);
setValue("domain_id", cloudonixConfig.domain_id);
setValue("from_numbers", cloudonixConfig.from_numbers?.length > 0 ? cloudonixConfig.from_numbers : [""]);
} else if ((response.data as TelephonyConfigurationResponse)?.ari) {
const ariConfig = (response.data as TelephonyConfigurationResponse).ari as AriConfigurationResponse;
setHasExistingConfig(true);
setValue("provider", "ari");
setValue("ari_endpoint", ariConfig.ari_endpoint);
setValue("app_name", ariConfig.app_name);
setValue("app_password", ariConfig.app_password);
setValue("ws_client_name", ariConfig.ws_client_name);
setValue(
"inbound_workflow_id",
typeof ariConfig.inbound_workflow_id === "number" ? ariConfig.inbound_workflow_id : undefined
);
setValue("from_numbers", ariConfig.from_numbers?.length > 0 ? ariConfig.from_numbers : [""]);
}
}
} catch (error) {
@ -161,12 +182,13 @@ export default function ConfigureTelephonyPage() {
| TwilioConfigurationRequest
| VonageConfigurationRequest
| VobizConfigurationRequest
| CloudonixConfigurationRequest;
| CloudonixConfigurationRequest
| AriConfigurationRequest;
const filteredNumbers = data.from_numbers.filter(n => n.trim() !== "");
// Validate phone numbers are provided (except for Cloudonix where optional)
if (data.provider !== "cloudonix" && filteredNumbers.length === 0) {
// Validate phone numbers are provided (except for Cloudonix/ARI where optional)
if (data.provider !== "cloudonix" && data.provider !== "ari" && filteredNumbers.length === 0) {
toast.error("At least one phone number is required");
setIsLoading(false);
return;
@ -185,6 +207,10 @@ export default function ConfigureTelephonyPage() {
} else if (data.provider === "cloudonix") {
pattern = cloudonixPattern;
formatMessage = "(e.g., +1234567890)";
} else if (data.provider === "ari") {
// ARI uses SIP extensions - skip phone number validation
pattern = /^.+$/;
formatMessage = "(SIP extension or number)";
} else {
pattern = vonageVobizPattern;
formatMessage = "without + prefix (e.g., 14155551234)";
@ -220,14 +246,24 @@ export default function ConfigureTelephonyPage() {
auth_id: data.auth_id,
auth_token: data.vobiz_auth_token,
} as VobizConfigurationRequest;
} else {
// Cloudonix
} else if (data.provider === "cloudonix") {
requestBody = {
provider: data.provider,
from_numbers: filteredNumbers,
bearer_token: data.bearer_token!,
domain_id: data.domain_id!,
} as CloudonixConfigurationRequest;
} else {
// ARI
requestBody = {
provider: data.provider,
from_numbers: filteredNumbers,
ari_endpoint: data.ari_endpoint!,
app_name: data.app_name!,
app_password: data.app_password!,
ws_client_name: data.ws_client_name || "",
inbound_workflow_id: data.inbound_workflow_id || undefined,
} as AriConfigurationRequest;
}
const response = await saveTelephonyConfigurationApiV1OrganizationsTelephonyConfigPost({
@ -276,11 +312,18 @@ export default function ConfigureTelephonyPage() {
? "Vonage"
: selectedProvider === "vobiz"
? "Vobiz"
: selectedProvider === "ari"
? "Asterisk ARI"
: "Cloudonix"}{" "}
Setup Guide
</CardTitle>
<CardDescription>
{selectedProvider === "cloudonix" ? (
{selectedProvider === "ari" ? (
<>
Connect Dograh to your Asterisk PBX using the Asterisk REST Interface (ARI).
ARI provides a WebSocket-based event model for controlling calls via Stasis applications.
</>
) : selectedProvider === "cloudonix" ? (
<>
Cloudonix is an AI Connectivity platform, enabling you to connect Dograh to any SIP product or SIP Telephony Provider.<br/><br/>
<iframe
@ -325,7 +368,27 @@ export default function ConfigureTelephonyPage() {
</CardDescription>
</CardHeader>
<CardContent>
{selectedProvider === "twilio" || selectedProvider === "vonage" ? (
{selectedProvider === "ari" ? (
<div className="space-y-4 text-sm">
<div>
<h4 className="font-semibold mb-2">Getting Started with Asterisk ARI:</h4>
<ol className="list-decimal list-inside space-y-1 text-muted-foreground">
<li>Enable the ARI module in your Asterisk configuration (ari.conf)</li>
<li>Create an ARI user with a password in ari.conf</li>
<li>Create a Stasis application in your dialplan (extensions.conf)</li>
<li>Ensure the ARI HTTP endpoint is accessible from Dograh</li>
<li>Enter your ARI endpoint URL, app name, and password below</li>
</ol>
</div>
<div className="bg-muted border border-border rounded p-3">
<p className="text-sm">
<strong>Note:</strong> ARI uses WebSocket connections for real-time
event listening. The ARI manager process will automatically connect
to your Asterisk instance once configured.
</p>
</div>
</div>
) : selectedProvider === "twilio" || selectedProvider === "vonage" ? (
<div className="aspect-video">
<iframe
style={{ border: 0 }}
@ -407,6 +470,7 @@ export default function ConfigureTelephonyPage() {
<SelectItem value="vonage">Vonage</SelectItem>
<SelectItem value="vobiz">Vobiz</SelectItem>
<SelectItem value="cloudonix">Cloudonix</SelectItem>
<SelectItem value="ari">Asterisk (ARI)</SelectItem>
</SelectContent>
</Select>
{hasExistingConfig && (
@ -771,6 +835,140 @@ export default function ConfigureTelephonyPage() {
</>
)}
{/* ARI-specific fields */}
{selectedProvider === "ari" && (
<>
<div className="space-y-2">
<Label htmlFor="ari_endpoint">ARI Endpoint URL</Label>
<Input
id="ari_endpoint"
placeholder="http://asterisk.example.com:8088"
{...register("ari_endpoint", {
required:
selectedProvider === "ari"
? "ARI endpoint URL is required"
: false,
})}
/>
{errors.ari_endpoint && (
<p className="text-sm text-red-500">
{errors.ari_endpoint.message}
</p>
)}
<p className="text-xs text-muted-foreground">
The HTTP base URL for your Asterisk ARI (e.g., http://host:8088)
</p>
</div>
<div className="space-y-2">
<Label htmlFor="app_name">Stasis App Name</Label>
<Input
id="app_name"
placeholder="dograh"
{...register("app_name", {
required:
selectedProvider === "ari"
? "Stasis app name is required"
: false,
})}
/>
{errors.app_name && (
<p className="text-sm text-red-500">
{errors.app_name.message}
</p>
)}
<p className="text-xs text-muted-foreground">
The ARI username and Stasis application name configured in ari.conf
</p>
</div>
<div className="space-y-2">
<Label htmlFor="app_password">App Password</Label>
<Input
id="app_password"
type="password"
autoComplete="current-password"
placeholder={
hasExistingConfig
? "Leave masked to keep existing"
: "Enter your ARI password"
}
{...register("app_password", {
required:
selectedProvider === "ari" && !hasExistingConfig
? "App password is required"
: false,
})}
/>
{errors.app_password && (
<p className="text-sm text-red-500">
{errors.app_password.message}
</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="ws_client_name">WebSocket Client Name</Label>
<Input
id="ws_client_name"
placeholder="dograh_staging"
{...register("ws_client_name")}
/>
<p className="text-xs text-muted-foreground">
Connection name from Asterisk&apos;s websocket_client.conf for external media streaming
</p>
</div>
<div className="space-y-2">
<Label htmlFor="inbound_workflow_id">Inbound Workflow ID (Optional)</Label>
<Input
id="inbound_workflow_id"
type="number"
placeholder="e.g. 42"
{...register("inbound_workflow_id", { valueAsNumber: true })}
/>
<p className="text-xs text-muted-foreground">
Workflow to activate for inbound calls received via ARI
</p>
</div>
<div className="space-y-2">
<Label>SIP Extensions / Numbers (Optional)</Label>
{fromNumbers.map((number, index) => (
<div key={index} className="flex gap-2">
<Input
placeholder="PJSIP/6001 or 6001"
value={number}
onChange={(e) => updatePhoneNumber(index, e.target.value)}
/>
{fromNumbers.length > 1 && (
<Button
type="button"
variant="outline"
size="icon"
onClick={() => removePhoneNumber(index)}
>
<Trash2 className="h-4 w-4" />
</Button>
)}
</div>
))}
<Button
type="button"
variant="outline"
size="sm"
onClick={addPhoneNumber}
>
<Plus className="h-4 w-4 mr-2" />
Add Extension
</Button>
<p className="text-xs text-muted-foreground">
SIP extensions or trunk numbers for outbound calls
</p>
</div>
</>
)}
<div className="pt-4 space-y-3">
<Button
type="submit"

170
ui/src/app/tools/[toolUuid]/components/TransferCallToolConfig.tsx Normal file
View file

@ -0,0 +1,170 @@
"use client";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Textarea } from "@/components/ui/textarea";
import { type EndCallMessageType } from "../../config";
export interface TransferCallToolConfigProps {
name: string;
onNameChange: (name: string) => void;
description: string;
onDescriptionChange: (description: string) => void;
destination: string;
onDestinationChange: (destination: string) => void;
messageType: EndCallMessageType;
onMessageTypeChange: (messageType: EndCallMessageType) => void;
customMessage: string;
onCustomMessageChange: (message: string) => void;
timeout?: number; // Make optional to match API type
onTimeoutChange: (timeout: number) => void;
}
export function TransferCallToolConfig({
name,
onNameChange,
description,
onDescriptionChange,
destination,
onDestinationChange,
messageType,
onMessageTypeChange,
customMessage,
onCustomMessageChange,
timeout,
onTimeoutChange,
}: TransferCallToolConfigProps) {
// Basic E.164 validation pattern
const isValidPhoneNumber = (phone: string): boolean => {
const e164Pattern = /^\+[1-9]\d{1,14}$/;
return e164Pattern.test(phone);
};
const phoneNumberError = destination && !isValidPhoneNumber(destination);
return (
<Card>
<CardHeader>
<CardTitle>Transfer Call Configuration</CardTitle>
<CardDescription>
Configure call transfer settings (Twilio only)
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid gap-2">
<Label>Tool Name</Label>
<Label className="text-xs text-muted-foreground">
A descriptive name for this tool
</Label>
<Input
value={name}
onChange={(e) => onNameChange(e.target.value)}
placeholder="e.g., Transfer Call"
/>
</div>
<div className="grid gap-2">
<Label>Description</Label>
<Label className="text-xs text-muted-foreground">
Helps the LLM understand when to use this tool
</Label>
<Textarea
value={description}
onChange={(e) => onDescriptionChange(e.target.value)}
placeholder="When should the AI transfer the call?"
rows={3}
/>
</div>
<div className="grid gap-2 pt-4 border-t">
<Label>Destination Phone Number</Label>
<Label className="text-xs text-muted-foreground">
Phone number to transfer the call to (E.164 format with country code)
</Label>
<Input
value={destination}
onChange={(e) => onDestinationChange(e.target.value)}
placeholder="+1234567890"
className={phoneNumberError ? "border-red-500 focus:border-red-500" : ""}
/>
{phoneNumberError && (
<Label className="text-xs text-red-500">
Please enter a valid phone number in E.164 format (e.g., +1234567890)
</Label>
)}
</div>
<div className="grid gap-4 pt-4 border-t">
<Label>Pre-Transfer Message</Label>
<Label className="text-xs text-muted-foreground">
Choose whether to play a message before transferring
</Label>
<RadioGroup
value={messageType}
onValueChange={(v) => onMessageTypeChange(v as EndCallMessageType)}
className="space-y-3"
>
<label
htmlFor="none"
className="flex items-center space-x-3 p-3 border rounded-lg hover:bg-muted/50 cursor-pointer"
>
<RadioGroupItem value="none" id="none" />
<div className="flex-1">
<span className="font-medium">No Message</span>
<p className="text-xs text-muted-foreground">
Transfer the call immediately without any message
</p>
</div>
</label>
<div className="flex items-start space-x-3 p-3 border rounded-lg hover:bg-muted/50">
<RadioGroupItem value="custom" id="custom" className="mt-1" />
<label htmlFor="custom" className="flex-1 space-y-2 cursor-pointer">
<span className="font-medium">Custom Message</span>
<p className="text-xs text-muted-foreground">
Play a custom message before transferring
</p>
</label>
</div>
{messageType === "custom" && (
<div className="pl-8">
<Textarea
value={customMessage}
onChange={(e) => onCustomMessageChange(e.target.value)}
placeholder="e.g., Please hold while I transfer your call."
rows={2}
/>
</div>
)}
</RadioGroup>
</div>
<div className="grid gap-2 pt-4 border-t">
<Label>Transfer Timeout</Label>
<Label className="text-xs text-muted-foreground">
Maximum time to wait for destination to answer (5-120 seconds)
</Label>
<Input
type="number"
value={timeout ?? 30}
onChange={(e) => {
const value = parseInt(e.target.value) || 30;
// Clamp value between 5 and 120 seconds
const clampedValue = Math.min(Math.max(value, 5), 120);
onTimeoutChange(clampedValue);
}}
placeholder="30"
min="5"
max="120"
className="w-32"
/>
<Label className="text-xs text-muted-foreground">
Default: 30 seconds
</Label>
</div>
</CardContent>
</Card>
);
}

1
ui/src/app/tools/[toolUuid]/components/index.ts
View file

@ -1,2 +1,3 @@
export { EndCallToolConfig, type EndCallToolConfigProps } from "./EndCallToolConfig";
export { HttpApiToolConfig, type HttpApiToolConfigProps } from "./HttpApiToolConfig";
export { TransferCallToolConfig, type TransferCallToolConfigProps } from "./TransferCallToolConfig";

120
ui/src/app/tools/[toolUuid]/page.tsx
View file

@ -8,7 +8,7 @@ import {
getToolApiV1ToolsToolUuidGet,
updateToolApiV1ToolsToolUuidPut,
} from "@/client/sdk.gen";
import type { ToolResponse } from "@/client/types.gen";
import type { ToolResponse, TransferCallConfig as APITransferCallConfig } from "@/client/types.gen";
import { type HttpMethod, type KeyValueItem, type ToolParameter, validateUrl } from "@/components/http";
import { Button } from "@/components/ui/button";
import {
@ -29,7 +29,7 @@ import {
renderToolIcon,
type ToolCategory,
} from "../config";
import { EndCallToolConfig, HttpApiToolConfig } from "./components";
import { EndCallToolConfig, HttpApiToolConfig, TransferCallToolConfig } from "./components";
// Extended HttpApiConfig with parameters (until client types are regenerated)
interface HttpApiConfigWithParams {
@ -69,6 +69,12 @@ export default function ToolDetailPage() {
const [endCallMessageType, setEndCallMessageType] = useState<EndCallMessageType>("none");
const [endCallCustomMessage, setEndCallCustomMessage] = useState("");
// Transfer Call form state
const [transferDestination, setTransferDestination] = useState("");
const [transferMessageType, setTransferMessageType] = useState<EndCallMessageType>("none");
const [transferCustomMessage, setTransferCustomMessage] = useState("");
const [transferTimeout, setTransferTimeout] = useState(30);
// Redirect if not authenticated
useEffect(() => {
if (!loading && !user) {
@ -117,6 +123,20 @@ export default function ToolDetailPage() {
setEndCallMessageType("none");
setEndCallCustomMessage("");
}
} else if (tool.category === "transfer_call") {
// Populate transfer call specific fields
const config = tool.definition?.config as APITransferCallConfig | undefined;
if (config) {
setTransferDestination(config.destination || "");
setTransferMessageType(config.messageType || "none");
setTransferCustomMessage(config.customMessage || "");
setTransferTimeout(config.timeout ?? 30);
} else {
setTransferDestination("");
setTransferMessageType("none");
setTransferCustomMessage("");
setTransferTimeout(30);
}
} else {
// Populate HTTP API specific fields
const config = tool.definition?.config as HttpApiConfigWithParams | undefined;
@ -163,7 +183,14 @@ export default function ToolDetailPage() {
if (!tool) return;
// Validation based on tool type
if (tool.category !== "end_call") {
if (tool.category === "transfer_call") {
// Validate destination phone number for Transfer Call tools
const e164Pattern = /^\+[1-9]\d{1,14}$/;
if (!transferDestination || !e164Pattern.test(transferDestination)) {
setError("Please enter a valid phone number in E.164 format (e.g., +1234567890)");
return;
}
} else if (tool.category !== "end_call") {
// Validate URL for HTTP API tools
const urlValidation = validateUrl(url);
if (!urlValidation.valid) {
@ -201,6 +228,22 @@ export default function ToolDetailPage() {
},
},
};
} else if (tool.category === "transfer_call") {
// Build transfer call request body
requestBody = {
name,
description: description || undefined,
definition: {
schema_version: 1,
type: "transfer_call",
config: {
destination: transferDestination,
messageType: transferMessageType,
customMessage: transferMessageType === "custom" ? transferCustomMessage : undefined,
timeout: transferTimeout,
},
},
};
} else {
// Build HTTP API request body
const headersObject: Record<string, string> = {};
@ -331,6 +374,7 @@ const data = await response.json();`;
}
const isEndCallTool = tool.category === "end_call";
const isTransferCallTool = tool.category === "transfer_call";
const categoryConfig = getCategoryConfig(tool.category as ToolCategory);
return (
@ -366,7 +410,7 @@ const data = await response.json();`;
</div>
</div>
<div className="flex items-center gap-2">
{!isEndCallTool && (
{!isEndCallTool && !isTransferCallTool && (
<Button
variant="outline"
onClick={() => setShowCodeDialog(true)}
@ -375,34 +419,9 @@ const data = await response.json();`;
View Code
</Button>
)}
<Button onClick={handleSave} disabled={isSaving}>
{isSaving ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
Saving...
</>
) : (
<>
<Save className="w-4 h-4 mr-2" />
Save
</>
)}
</Button>
</div>
</div>
{error && (
<div className="mb-4 p-4 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive">
{error}
</div>
)}
{saveSuccess && (
<div className="mb-4 p-4 bg-green-500/10 border border-green-500/20 rounded-lg text-green-600">
Tool saved successfully!
</div>
)}
{isEndCallTool ? (
<EndCallToolConfig
name={name}
@ -414,6 +433,21 @@ const data = await response.json();`;
customMessage={endCallCustomMessage}
onCustomMessageChange={setEndCallCustomMessage}
/>
) : isTransferCallTool ? (
<TransferCallToolConfig
name={name}
onNameChange={setName}
description={description}
onDescriptionChange={setDescription}
destination={transferDestination}
onDestinationChange={setTransferDestination}
messageType={transferMessageType}
onMessageTypeChange={setTransferMessageType}
customMessage={transferCustomMessage}
onCustomMessageChange={setTransferCustomMessage}
timeout={transferTimeout}
onTimeoutChange={setTransferTimeout}
/>
) : (
<HttpApiToolConfig
name={name}
@ -434,6 +468,34 @@ const data = await response.json();`;
onTimeoutMsChange={setTimeoutMs}
/>
)}
{error && (
<div className="mt-4 p-4 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive">
{error}
</div>
)}
{saveSuccess && (
<div className="mt-4 p-4 bg-green-500/10 border border-green-500/20 rounded-lg text-green-600">
Tool saved successfully!
</div>
)}
<div className="flex justify-end mt-6">
<Button onClick={handleSave} disabled={isSaving}>
{isSaving ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
Saving...
</>
) : (
<>
<Save className="w-4 h-4 mr-2" />
Save
</>
)}
</Button>
</div>
</div>
</div>

51
ui/src/app/tools/config.tsx
View file

@ -1,9 +1,9 @@
"use client";
import { Cog, Globe, type LucideIcon,PhoneOff, Puzzle } from "lucide-react";
import { Cog, Globe, type LucideIcon, PhoneForwarded, PhoneOff, Puzzle } from "lucide-react";
import { type ReactNode } from "react";
export type ToolCategory = "http_api" | "end_call" | "native" | "integration";
export type ToolCategory = "http_api" | "end_call" | "transfer_call" | "native" | "integration";
export type EndCallMessageType = "none" | "custom";
@ -42,6 +42,18 @@ export const TOOL_CATEGORIES: ToolCategoryConfig[] = [
description: "End the call when either user asks to disconnect the call, or when you believe its time to end the conversation",
},
},
{
value: "transfer_call",
label: "Transfer Call",
description: "Transfer the call to another phone number (Twilio only)",
icon: PhoneForwarded,
iconName: "phone-forwarded",
iconColor: "#10B981",
autoFill: {
name: "Transfer Call",
description: "Transfer the caller to another phone number when requested",
},
},
{
value: "native",
label: "Native (Coming Soon)",
@ -85,6 +97,8 @@ export function getToolTypeLabel(category: string): string {
switch (category) {
case "end_call":
return "End Call Tool";
case "transfer_call":
return "Transfer Call Tool";
case "http_api":
return "HTTP API Tool";
case "native":
@ -107,6 +121,21 @@ export const DEFAULT_END_CALL_CONFIG: EndCallConfig = {
customMessage: "",
};
// Transfer Call tool specific configuration
export interface TransferCallConfig {
destination: string;
messageType: EndCallMessageType; // Reuse the same type
customMessage?: string;
timeout: number;
}
export const DEFAULT_TRANSFER_CALL_CONFIG: TransferCallConfig = {
destination: "",
messageType: "none",
customMessage: "",
timeout: 30,
};
// Tool definition types for different categories
export interface HttpApiToolDefinition {
schema_version: number;
@ -132,7 +161,13 @@ export interface EndCallToolDefinition {
config: EndCallConfig;
}
export type ToolDefinition = HttpApiToolDefinition | EndCallToolDefinition;
export interface TransferCallToolDefinition {
schema_version: number;
type: "transfer_call";
config: TransferCallConfig;
}
export type ToolDefinition = HttpApiToolDefinition | EndCallToolDefinition | TransferCallToolDefinition;
export function createEndCallDefinition(config: EndCallConfig): EndCallToolDefinition {
return {
@ -142,6 +177,14 @@ export function createEndCallDefinition(config: EndCallConfig): EndCallToolDefin
};
}
export function createTransferCallDefinition(config: TransferCallConfig): TransferCallToolDefinition {
return {
schema_version: 1,
type: "transfer_call",
config,
};
}
export function createHttpApiDefinition(): HttpApiToolDefinition {
return {
schema_version: 1,
@ -157,6 +200,8 @@ export function createToolDefinition(category: ToolCategory): ToolDefinition {
switch (category) {
case "end_call":
return createEndCallDefinition(DEFAULT_END_CALL_CONFIG);
case "transfer_call":
return createTransferCallDefinition(DEFAULT_TRANSFER_CALL_CONFIG);
case "http_api":
default:
return createHttpApiDefinition();

40
ui/src/app/usage/page.tsx
View file

@ -23,6 +23,7 @@ import {
TableRow,
} from '@/components/ui/table';
import { useUserConfig } from '@/context/UserConfigContext';
import { useAuth } from '@/lib/auth';
import { usageFilterAttributes } from '@/lib/filterAttributes';
import { decodeFiltersFromURL, encodeFiltersToURL } from '@/lib/filters';
import { ActiveFilter, DateRangeValue } from '@/types/filters';
@ -33,7 +34,8 @@ const getLocalTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
export default function UsagePage() {
const router = useRouter();
const searchParams = useSearchParams();
const { userConfig, saveUserConfig, loading: userConfigLoading, accessToken, organizationPricing } = useUserConfig();
const { userConfig, saveUserConfig, loading: userConfigLoading, organizationPricing } = useUserConfig();
const auth = useAuth();
// Current usage state
const [currentUsage, setCurrentUsage] = useState<CurrentUsageResponse | null>(null);
@ -58,7 +60,7 @@ export default function UsagePage() {
});
// Media preview dialog
const mediaPreview = MediaPreviewDialog({ accessToken });
const mediaPreview = MediaPreviewDialog();
// Timezone state - initialize with empty string to avoid hydration mismatch
const localTimezone = getLocalTimezone();
@ -68,13 +70,9 @@ export default function UsagePage() {
// Fetch current usage
const fetchCurrentUsage = useCallback(async () => {
if (!accessToken) return;
if (!auth.isAuthenticated) return;
try {
const response = await getCurrentPeriodUsageApiV1OrganizationsUsageCurrentPeriodGet({
headers: {
'Authorization': `Bearer ${accessToken}`,
}
});
const response = await getCurrentPeriodUsageApiV1OrganizationsUsageCurrentPeriodGet();
if (response.data) {
setCurrentUsage(response.data);
@ -84,11 +82,11 @@ export default function UsagePage() {
} finally {
setIsLoadingCurrent(false);
}
}, [accessToken]);
}, [auth.isAuthenticated]);
// Fetch usage history
const fetchUsageHistory = useCallback(async (page: number, filters?: ActiveFilter[]) => {
if (!accessToken) return;
if (!auth.isAuthenticated) return;
setIsLoadingHistory(true);
try {
let filterParam = undefined;
@ -132,9 +130,6 @@ export default function UsagePage() {
...(endDate && { end_date: endDate }),
...(filterParam && { filters: filterParam })
},
headers: {
'Authorization': `Bearer ${accessToken}`,
}
});
if (response.data) {
@ -145,19 +140,16 @@ export default function UsagePage() {
} finally {
setIsLoadingHistory(false);
}
}, [accessToken]);
}, [auth.isAuthenticated]);
// Fetch daily usage breakdown
const fetchDailyUsage = useCallback(async () => {
if (!accessToken || !organizationPricing?.price_per_second_usd) return;
if (!auth.isAuthenticated || !organizationPricing?.price_per_second_usd) return;
setIsLoadingDaily(true);
try {
const response = await getDailyUsageBreakdownApiV1OrganizationsUsageDailyBreakdownGet({
query: { days: 7 },
headers: {
'Authorization': `Bearer ${accessToken}`,
}
});
if (response.data) {
@ -168,7 +160,7 @@ export default function UsagePage() {
} finally {
setIsLoadingDaily(false);
}
}, [accessToken, organizationPricing]);
}, [auth.isAuthenticated, organizationPricing]);
// Handle timezone change
const handleTimezoneChange = async (timezone: ITimezoneOption | string) => {
@ -200,20 +192,20 @@ export default function UsagePage() {
}
}, [userConfig, userConfigLoading, localTimezone]);
// Initial load - fetch when accessToken becomes available
// Initial load - fetch when auth becomes available
useEffect(() => {
if (accessToken) {
if (auth.isAuthenticated) {
fetchCurrentUsage();
fetchUsageHistory(currentPage, activeFilters);
}
}, [accessToken, currentPage, activeFilters, fetchUsageHistory, fetchCurrentUsage]);
}, [auth.isAuthenticated, currentPage, activeFilters, fetchUsageHistory, fetchCurrentUsage]);
// Fetch daily usage when organizationPricing becomes available
useEffect(() => {
if (accessToken && organizationPricing?.price_per_second_usd) {
if (auth.isAuthenticated && organizationPricing?.price_per_second_usd) {
fetchDailyUsage();
}
}, [accessToken, organizationPricing, fetchDailyUsage]);
}, [auth.isAuthenticated, organizationPricing, fetchDailyUsage]);
// Update URL with query parameters
const updateUrlParams = useCallback((params: { page?: number; filters?: ActiveFilter[] }) => {

19
ui/src/app/workflow/[workflowId]/RenderWorkflow.tsx
View file

@ -58,10 +58,9 @@ interface RenderWorkflowProps {
initialTemplateContextVariables?: Record<string, string>;
initialWorkflowConfigurations?: WorkflowConfigurations;
user: { id: string; email?: string };
getAccessToken: () => Promise<string>;
}
function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialTemplateContextVariables, initialWorkflowConfigurations, user, getAccessToken }: RenderWorkflowProps) {
function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialTemplateContextVariables, initialWorkflowConfigurations, user }: RenderWorkflowProps) {
const [isContextVarsDialogOpen, setIsContextVarsDialogOpen] = useState(false);
const [isConfigurationsDialogOpen, setIsConfigurationsDialogOpen] = useState(false);
const [isDictionaryDialogOpen, setIsDictionaryDialogOpen] = useState(false);
@ -100,18 +99,14 @@ function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialT
initialTemplateContextVariables,
initialWorkflowConfigurations,
user,
getAccessToken
});
// Fetch documents and tools once for the entire workflow
useEffect(() => {
const fetchData = async () => {
try {
const accessToken = await getAccessToken();
// Fetch documents
const documentsResponse = await listDocumentsApiV1KnowledgeBaseDocumentsGet({
headers: { Authorization: `Bearer ${accessToken}` },
query: { limit: 100 },
});
if (documentsResponse.data) {
@ -119,9 +114,7 @@ function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialT
}
// Fetch tools
const toolsResponse = await listToolsApiV1ToolsGet({
headers: { Authorization: `Bearer ${accessToken}` },
});
const toolsResponse = await listToolsApiV1ToolsGet({});
if (toolsResponse.data) {
setTools(toolsResponse.data);
}
@ -131,7 +124,7 @@ function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialT
};
fetchData();
}, [getAccessToken]);
}, []);
// Memoize defaultEdgeOptions to prevent unnecessary re-renders
const defaultEdgeOptions = useMemo(() => ({
@ -159,7 +152,6 @@ function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialT
workflowId={workflowId}
saveWorkflow={saveWorkflow}
user={user}
getAccessToken={getAccessToken}
onPhoneCallClick={() => setIsPhoneCallDialogOpen(true)}
/>
@ -388,14 +380,12 @@ function RenderWorkflow({ initialWorkflowName, workflowId, initialFlow, initialT
onOpenChange={setIsEmbedDialogOpen}
workflowId={workflowId}
workflowName={workflowName}
getAccessToken={getAccessToken}
/>
<PhoneCallDialog
open={isPhoneCallDialogOpen}
onOpenChange={setIsPhoneCallDialogOpen}
workflowId={workflowId}
getAccessToken={getAccessToken}
user={user}
/>
</div>
@ -409,8 +399,7 @@ export default React.memo(RenderWorkflow, (prevProps, nextProps) => {
return (
prevProps.workflowId === nextProps.workflowId &&
prevProps.initialWorkflowName === nextProps.initialWorkflowName &&
prevProps.user.id === nextProps.user.id &&
prevProps.getAccessToken === nextProps.getAccessToken
prevProps.user.id === nextProps.user.id
// Note: We intentionally don't compare initialFlow, initialTemplateContextVariables,
// or initialWorkflowConfigurations because they're only used for initialization
);

17
ui/src/app/workflow/[workflowId]/components/EmbedDialog.tsx
View file

@ -1,7 +1,6 @@
import { Check, Copy, Loader2, Plus, Rocket, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { client } from "@/client/client.gen";
import {
createOrUpdateEmbedTokenApiV1WorkflowWorkflowIdEmbedTokenPost,
deactivateEmbedTokenApiV1WorkflowWorkflowIdEmbedTokenDelete,
@ -32,7 +31,6 @@ interface EmbedDialogProps {
onOpenChange: (open: boolean) => void;
workflowId: number;
workflowName: string;
getAccessToken: () => Promise<string>;
}
interface EmbedToken {
@ -53,7 +51,6 @@ export function EmbedDialog({
onOpenChange,
workflowId,
workflowName,
getAccessToken,
}: EmbedDialogProps) {
const [loading, setLoading] = useState(false);
const [saving, setSaving] = useState(false);
@ -72,12 +69,6 @@ export function EmbedDialog({
const loadEmbedToken = useCallback(async () => {
setLoading(true);
try {
const token = await getAccessToken();
client.setConfig({
baseUrl: window.location.origin.replace(/:\d+$/, ':8000'),
headers: { Authorization: `Bearer ${token}` },
});
const response = await getEmbedTokenApiV1WorkflowWorkflowIdEmbedTokenGet({
path: { workflow_id: workflowId },
});
@ -105,7 +96,7 @@ export function EmbedDialog({
} finally {
setLoading(false);
}
}, [workflowId, getAccessToken]);
}, [workflowId]);
useEffect(() => {
if (open) {
@ -116,12 +107,6 @@ export function EmbedDialog({
const handleSave = async () => {
setSaving(true);
try {
const token = await getAccessToken();
client.setConfig({
baseUrl: window.location.origin.replace(/:\d+$/, ':8000'),
headers: { Authorization: `Bearer ${token}` },
});
if (!isEnabled && embedToken) {
// Deactivate token
await deactivateEmbedTokenApiV1WorkflowWorkflowIdEmbedTokenDelete({

57
ui/src/app/workflow/[workflowId]/components/PhoneCallDialog.tsx
View file

@ -21,13 +21,13 @@ import {
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { useUserConfig } from "@/context/UserConfigContext";
interface PhoneCallDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
workflowId: number;
getAccessToken: () => Promise<string>;
user: { id: string; email?: string };
}
@ -35,7 +35,6 @@ export const PhoneCallDialog = ({
open,
onOpenChange,
workflowId,
getAccessToken,
user,
}: PhoneCallDialogProps) => {
const router = useRouter();
@ -47,6 +46,7 @@ export const PhoneCallDialog = ({
const [phoneChanged, setPhoneChanged] = useState(false);
const [checkingConfig, setCheckingConfig] = useState(false);
const [needsConfiguration, setNeedsConfiguration] = useState<boolean | null>(null);
const [sipMode, setSipMode] = useState(() => /^(PJSIP|SIP)\//i.test(userConfig?.test_phone_number || ""));
// Check telephony configuration when dialog opens
useEffect(() => {
@ -55,12 +55,9 @@ export const PhoneCallDialog = ({
setCheckingConfig(true);
try {
const accessToken = await getAccessToken();
const configResponse = await getTelephonyConfigurationApiV1OrganizationsTelephonyConfigGet({
headers: { 'Authorization': `Bearer ${accessToken}` },
});
const configResponse = await getTelephonyConfigurationApiV1OrganizationsTelephonyConfigGet({});
if (configResponse.error || (!configResponse.data?.twilio && !configResponse.data?.vonage && !configResponse.data?.vobiz && !configResponse.data?.cloudonix)) {
if (configResponse.error || (!configResponse.data?.twilio && !configResponse.data?.vonage && !configResponse.data?.vobiz && !configResponse.data?.cloudonix && !configResponse.data?.ari)) {
setNeedsConfiguration(true);
} else {
setNeedsConfiguration(false);
@ -74,7 +71,7 @@ export const PhoneCallDialog = ({
};
checkConfig();
}, [open, getAccessToken]);
}, [open]);
// Reset state when dialog closes
useEffect(() => {
@ -89,7 +86,9 @@ export const PhoneCallDialog = ({
// Keep phoneNumber in sync with userConfig when dialog opens
useEffect(() => {
if (open) {
setPhoneNumber(userConfig?.test_phone_number || "");
const saved = userConfig?.test_phone_number || "";
setPhoneNumber(saved);
setSipMode(/^(PJSIP|SIP)\//i.test(saved));
setPhoneChanged(false);
setCallError(null);
setCallSuccessMsg(null);
@ -115,7 +114,6 @@ export const PhoneCallDialog = ({
setCallSuccessMsg(null);
try {
if (!user || !userConfig) return;
const accessToken = await getAccessToken();
// Save phone number if it has changed
if (phoneChanged) {
@ -128,7 +126,6 @@ export const PhoneCallDialog = ({
workflow_id: workflowId,
phone_number: phoneNumber
},
headers: { 'Authorization': `Bearer ${accessToken}` },
});
if (response.error) {
@ -189,14 +186,29 @@ export const PhoneCallDialog = ({
<DialogHeader>
<DialogTitle>Phone Call</DialogTitle>
<DialogDescription>
Enter the phone number to call. The number will be saved automatically.
Enter the phone number or SIP endpoint to call. The number will be saved automatically.
</DialogDescription>
</DialogHeader>
<PhoneInput
defaultCountry="in"
value={phoneNumber}
onChange={handlePhoneInputChange}
/>
{sipMode ? (
<Input
value={phoneNumber}
onChange={(e) => handlePhoneInputChange(e.target.value)}
placeholder="PJSIP/1234 or SIP/1234"
/>
) : (
<PhoneInput
defaultCountry="in"
value={phoneNumber}
onChange={handlePhoneInputChange}
/>
)}
<button
type="button"
className="text-xs text-muted-foreground hover:text-foreground underline"
onClick={() => { setSipMode(!sipMode); setPhoneNumber(""); setPhoneChanged(true); }}
>
{sipMode ? "Use phone number instead" : "Use SIP endpoint instead"}
</button>
<DialogFooter className="flex-col sm:flex-row gap-2">
<Button
variant="outline"
@ -219,9 +231,14 @@ export const PhoneCallDialog = ({
{callLoading ? "Calling..." : "Start Call"}
</Button>
) : (
<Button onClick={() => onOpenChange(false)}>
Close
</Button>
<>
<Button variant="outline" onClick={() => { setCallSuccessMsg(null); setCallError(null); }}>
Call Again
</Button>
<Button onClick={() => onOpenChange(false)}>
Close
</Button>
</>
)}
</div>
</DialogFooter>

1
ui/src/app/workflow/[workflowId]/components/WorkflowEditorHeader.tsx
View file

@ -30,7 +30,6 @@ interface WorkflowEditorHeaderProps {
workflowId: number;
saveWorkflow: (updateWorkflowDefinition?: boolean) => Promise<void>;
user: { id: string; email?: string };
getAccessToken: () => Promise<string>;
onPhoneCallClick: () => void;
}

17
ui/src/app/workflow/[workflowId]/components/WorkflowExecutions.tsx
View file

@ -7,7 +7,7 @@ import { getWorkflowApiV1WorkflowFetchWorkflowIdGet, getWorkflowRunsApiV1Workflo
import { WorkflowRunResponseSchema } from "@/client/types.gen";
import { WorkflowRunsTable } from "@/components/workflow-runs";
import { DISPOSITION_CODES } from "@/constants/dispositionCodes";
import { useUserConfig } from '@/context/UserConfigContext';
import { useAuth } from '@/lib/auth';
import { decodeFiltersFromURL, encodeFiltersToURL } from "@/lib/filters";
import { ActiveFilter, availableAttributes, FilterAttribute } from "@/types/filters";
@ -39,7 +39,7 @@ export function WorkflowExecutions({ workflowId, searchParams }: WorkflowExecuti
return order === 'asc' ? 'asc' : 'desc';
});
const { accessToken } = useUserConfig();
const { isAuthenticated } = useAuth();
// Initialize filters from URL
const [activeFilters, setActiveFilters] = useState<ActiveFilter[]>(() => {
@ -53,11 +53,10 @@ export function WorkflowExecutions({ workflowId, searchParams }: WorkflowExecuti
// Load disposition codes from workflow configuration
const loadDispositionCodes = useCallback(async () => {
if (!accessToken) return;
if (!isAuthenticated) return;
try {
const response = await getWorkflowApiV1WorkflowFetchWorkflowIdGet({
path: { workflow_id: Number(workflowId) },
headers: { 'Authorization': `Bearer ${accessToken}` }
});
const workflow = response.data;
@ -81,7 +80,7 @@ export function WorkflowExecutions({ workflowId, searchParams }: WorkflowExecuti
} catch (err) {
console.error("Failed to load disposition codes:", err);
}
}, [workflowId, accessToken]);
}, [workflowId, isAuthenticated]);
useEffect(() => {
loadDispositionCodes();
@ -93,7 +92,7 @@ export function WorkflowExecutions({ workflowId, searchParams }: WorkflowExecuti
sortByParam?: string | null,
sortOrderParam?: 'asc' | 'desc'
) => {
if (!accessToken) return;
if (!isAuthenticated) return;
try {
setLoading(true);
// Prepare filter data for API
@ -116,9 +115,6 @@ export function WorkflowExecutions({ workflowId, searchParams }: WorkflowExecuti
...(sortByParam && { sort_by: sortByParam }),
...(sortOrderParam && { sort_order: sortOrderParam }),
},
headers: {
'Authorization': `Bearer ${accessToken}`,
}
});
if (response.error) {
@ -138,7 +134,7 @@ export function WorkflowExecutions({ workflowId, searchParams }: WorkflowExecuti
} finally {
setLoading(false);
}
}, [workflowId, accessToken]);
}, [workflowId, isAuthenticated]);
const updatePageInUrl = useCallback((page: number, filters?: ActiveFilter[], sortByParam?: string | null, sortOrderParam?: 'asc' | 'desc') => {
const params = new URLSearchParams();
@ -234,7 +230,6 @@ export function WorkflowExecutions({ workflowId, searchParams }: WorkflowExecuti
sortOrder={sortOrder}
onSort={handleSort}
workflowId={workflowId}
accessToken={accessToken}
onReload={handleReload}
/>
</div>

36
ui/src/app/workflow/[workflowId]/hooks/useWorkflowState.ts
View file

@ -107,7 +107,6 @@ interface UseWorkflowStateProps {
initialTemplateContextVariables?: Record<string, string>;
initialWorkflowConfigurations?: WorkflowConfigurations;
user: { id: string; email?: string }; // Minimal user type needed
getAccessToken: () => Promise<string>;
}
export const useWorkflowState = ({
@ -117,7 +116,6 @@ export const useWorkflowState = ({
initialTemplateContextVariables,
initialWorkflowConfigurations,
user,
getAccessToken
}: UseWorkflowStateProps) => {
const router = useRouter();
const rfInstance = useRef<ReactFlowInstance<FlowNode, FlowEdge> | null>(null);
@ -245,14 +243,10 @@ export const useWorkflowState = ({
const validateWorkflow = useCallback(async () => {
if (!user) return;
try {
const accessToken = await getAccessToken();
const response = await validateWorkflowApiV1WorkflowWorkflowIdValidatePost({
path: {
workflow_id: workflowId,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
// Clear validation errors first
@ -305,13 +299,12 @@ export const useWorkflowState = ({
} catch (error) {
logger.error(`Unexpected validation error: ${error}`);
}
}, [workflowId, user, getAccessToken, clearValidationErrors, markNodeAsInvalid, markEdgeAsInvalid, setWorkflowValidationErrors]);
}, [workflowId, user, clearValidationErrors, markNodeAsInvalid, markEdgeAsInvalid, setWorkflowValidationErrors]);
// Save workflow function
const saveWorkflow = useCallback(async (updateWorkflowDefinition: boolean = true) => {
if (!user || !rfInstance.current) return;
const flow = rfInstance.current.toObject();
const accessToken = await getAccessToken();
try {
await updateWorkflowApiV1WorkflowWorkflowIdPut({
path: {
@ -321,9 +314,6 @@ export const useWorkflowState = ({
name: workflowName,
workflow_definition: updateWorkflowDefinition ? flow : null,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
setIsDirty(false);
} catch (error) {
@ -332,7 +322,7 @@ export const useWorkflowState = ({
// Validate after saving
await validateWorkflow();
}, [workflowId, workflowName, setIsDirty, user, getAccessToken, validateWorkflow]);
}, [workflowId, workflowName, setIsDirty, user, validateWorkflow]);
// Set up keyboard shortcut for save (Cmd/Ctrl + S)
useEffect(() => {
@ -386,7 +376,6 @@ export const useWorkflowState = ({
const onRun = async (mode: string) => {
if (!user) return;
const workflowRunName = `WR-${getRandomId()}`;
const accessToken = await getAccessToken();
const response = await createWorkflowRunApiV1WorkflowWorkflowIdRunsPost({
path: {
workflow_id: workflowId,
@ -395,9 +384,6 @@ export const useWorkflowState = ({
mode,
name: workflowRunName
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
router.push(`/workflow/${workflowId}/run/${response.data?.id}`);
};
@ -405,7 +391,6 @@ export const useWorkflowState = ({
// Save template context variables
const saveTemplateContextVariables = useCallback(async (variables: Record<string, string>) => {
if (!user) return;
const accessToken = await getAccessToken();
try {
await updateWorkflowApiV1WorkflowWorkflowIdPut({
path: {
@ -416,9 +401,6 @@ export const useWorkflowState = ({
workflow_definition: null,
template_context_variables: variables,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
setTemplateContextVariables(variables);
logger.info('Template context variables saved successfully');
@ -426,12 +408,11 @@ export const useWorkflowState = ({
logger.error(`Error saving template context variables: ${error}`);
throw error;
}
}, [workflowId, workflowName, user, getAccessToken, setTemplateContextVariables]);
}, [workflowId, workflowName, user, setTemplateContextVariables]);
// Save workflow configurations
const saveWorkflowConfigurations = useCallback(async (configurations: WorkflowConfigurations, newWorkflowName: string) => {
if (!user) return;
const accessToken = await getAccessToken();
// Preserve the current dictionary when saving other configurations
const currentDictionary = useWorkflowStore.getState().dictionary;
const configurationsWithDictionary: WorkflowConfigurations = { ...configurations, dictionary: currentDictionary };
@ -445,9 +426,6 @@ export const useWorkflowState = ({
workflow_definition: null,
workflow_configurations: configurationsWithDictionary as Record<string, unknown>,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
setWorkflowConfigurations(configurationsWithDictionary);
setWorkflowName(newWorkflowName);
@ -456,12 +434,11 @@ export const useWorkflowState = ({
logger.error(`Error saving workflow configurations: ${error}`);
throw error;
}
}, [workflowId, user, getAccessToken, setWorkflowConfigurations, setWorkflowName]);
}, [workflowId, user, setWorkflowConfigurations, setWorkflowName]);
// Save dictionary
const saveDictionary = useCallback(async (newDictionary: string) => {
if (!user) return;
const accessToken = await getAccessToken();
const currentConfigurations = useWorkflowStore.getState().workflowConfigurations ?? DEFAULT_WORKFLOW_CONFIGURATIONS;
const updatedConfigurations: WorkflowConfigurations = { ...currentConfigurations, dictionary: newDictionary };
try {
@ -474,9 +451,6 @@ export const useWorkflowState = ({
workflow_definition: null,
workflow_configurations: updatedConfigurations as Record<string, unknown>,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
setDictionary(newDictionary);
setWorkflowConfigurations(updatedConfigurations);
@ -484,7 +458,7 @@ export const useWorkflowState = ({
logger.error(`Error saving dictionary: ${error}`);
throw error;
}
}, [workflowId, workflowName, user, getAccessToken, setDictionary, setWorkflowConfigurations]);
}, [workflowId, workflowName, user, setDictionary, setWorkflowConfigurations]);
// Update rfInstance when it changes
useEffect(() => {

11
ui/src/app/workflow/[workflowId]/page.tsx
View file

@ -19,7 +19,7 @@ export default function WorkflowDetailPage() {
const [workflow, setWorkflow] = useState<WorkflowResponse | undefined>(undefined);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { user, getAccessToken, redirectToLogin, loading: authLoading } = useAuth();
const { user, redirectToLogin, loading: authLoading } = useAuth();
// Redirect if not authenticated
useEffect(() => {
@ -32,14 +32,10 @@ export default function WorkflowDetailPage() {
const fetchWorkflow = async () => {
if (!user) return;
try {
const accessToken = await getAccessToken();
const response = await getWorkflowApiV1WorkflowFetchWorkflowIdGet({
path: {
workflow_id: Number(params.workflowId)
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
const workflow = response.data;
setWorkflow(workflow);
@ -54,11 +50,9 @@ export default function WorkflowDetailPage() {
if (user) {
fetchWorkflow();
}
}, [params.workflowId, user, getAccessToken]);
}, [params.workflowId, user]);
// Memoize user and getAccessToken to prevent unnecessary re-renders
const stableUser = useMemo(() => user, [user]);
const stableGetAccessToken = useMemo(() => getAccessToken, [getAccessToken]);
if (loading) {
return (
@ -89,7 +83,6 @@ export default function WorkflowDetailPage() {
initialTemplateContextVariables={workflow.template_context_variables as Record<string, string> || {}}
initialWorkflowConfigurations={(workflow.workflow_configurations as WorkflowConfigurations) || DEFAULT_WORKFLOW_CONFIGURATIONS}
user={stableUser}
getAccessToken={stableGetAccessToken}
/>
) : null;
}

20
ui/src/app/workflow/[workflowId]/run/[runId]/BrowserCall.tsx
View file

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import { getWorkflowRunApiV1WorkflowWorkflowIdRunsRunIdGet } from "@/client/sdk.gen";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useAuth } from "@/lib/auth";
import {
ApiKeyErrorDialog,
@ -14,15 +15,23 @@ import {
} from "./components";
import { useWebSocketRTC } from "./hooks";
const BrowserCall = ({ workflowId, workflowRunId, accessToken, initialContextVariables }: {
const BrowserCall = ({ workflowId, workflowRunId, initialContextVariables }: {
workflowId: number,
workflowRunId: number,
accessToken: string | null,
initialContextVariables?: Record<string, string> | null
}) => {
const router = useRouter();
const auth = useAuth();
const [accessToken, setAccessToken] = useState<string | null>(null);
const [checkingForRecording, setCheckingForRecording] = useState(false);
// Get access token for WebSocket connection (non-SDK usage)
useEffect(() => {
if (auth.isAuthenticated && !auth.loading) {
auth.getAccessToken().then(setAccessToken);
}
}, [auth]);
const {
audioRef,
audioInputs,
@ -47,7 +56,7 @@ const BrowserCall = ({ workflowId, workflowRunId, accessToken, initialContextVar
// Poll for recording availability after call ends
useEffect(() => {
if (!isCompleted || !accessToken) return;
if (!isCompleted || !auth.isAuthenticated) return;
setCheckingForRecording(true);
const intervalId = setInterval(async () => {
@ -57,9 +66,6 @@ const BrowserCall = ({ workflowId, workflowRunId, accessToken, initialContextVar
workflow_id: workflowId,
run_id: workflowRunId,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
if (response.data?.transcript_url || response.data?.recording_url) {
@ -83,7 +89,7 @@ const BrowserCall = ({ workflowId, workflowRunId, accessToken, initialContextVar
clearInterval(intervalId);
clearTimeout(timeoutId);
};
}, [isCompleted, accessToken, workflowId, workflowRunId]);
}, [isCompleted, auth.isAuthenticated, workflowId, workflowRunId]);
const navigateToApiKeys = () => {
router.push('/api-keys');

23
ui/src/app/workflow/[workflowId]/run/[runId]/page.tsx
View file

@ -74,7 +74,6 @@ export default function WorkflowRunPage() {
const [isLoading, setIsLoading] = useState(true);
const auth = useAuth();
const [workflowRun, setWorkflowRun] = useState<WorkflowRunResponse | null>(null);
const [accessToken, setAccessToken] = useState<string | null>(null);
const { hasSeenTooltip, markTooltipSeen } = useOnboarding();
const customizeButtonRef = useRef<HTMLButtonElement>(null);
@ -85,21 +84,13 @@ export default function WorkflowRunPage() {
}
}, [auth]);
// Get access token
useEffect(() => {
if (auth.isAuthenticated && !auth.loading) {
auth.getAccessToken().then(setAccessToken);
}
}, [auth]);
const { openPreview, dialog } = MediaPreviewDialog({ accessToken });
const { openPreview, dialog } = MediaPreviewDialog();
useEffect(() => {
const fetchWorkflowRun = async () => {
if (!auth.isAuthenticated || auth.loading) return;
setIsLoading(true);
const token = await auth.getAccessToken();
const workflowId = params.workflowId;
const runId = params.runId;
const response = await getWorkflowRunApiV1WorkflowWorkflowIdRunsRunIdGet({
@ -107,9 +98,6 @@ export default function WorkflowRunPage() {
workflow_id: Number(workflowId),
run_id: Number(runId),
},
headers: {
'Authorization': `Bearer ${token}`,
},
});
setIsLoading(false);
setWorkflowRun({
@ -197,8 +185,8 @@ export default function WorkflowRunPage() {
<div className="flex items-center gap-2 border-l border-border pl-4">
<span className="text-sm text-muted-foreground">Download:</span>
<Button
onClick={() => downloadFile(workflowRun?.transcript_url, accessToken!)}
disabled={!workflowRun?.transcript_url || !accessToken}
onClick={() => downloadFile(workflowRun?.transcript_url)}
disabled={!workflowRun?.transcript_url || !auth.isAuthenticated}
size="sm"
className="gap-2"
>
@ -206,8 +194,8 @@ export default function WorkflowRunPage() {
Transcript
</Button>
<Button
onClick={() => downloadFile(workflowRun?.recording_url, accessToken!)}
disabled={!workflowRun?.recording_url || !accessToken}
onClick={() => downloadFile(workflowRun?.recording_url)}
disabled={!workflowRun?.recording_url || !auth.isAuthenticated}
size="sm"
className="gap-2"
>
@ -265,7 +253,6 @@ export default function WorkflowRunPage() {
<BrowserCall
workflowId={Number(params.workflowId)}
workflowRunId={Number(params.runId)}
accessToken={accessToken}
initialContextVariables={
workflowRun?.initial_context
? Object.fromEntries(

2
ui/src/app/workflow/page.tsx
View file

@ -16,8 +16,6 @@ async function WorkflowList() {
const authProvider = getServerAuthProvider();
const accessToken = await getServerAccessToken();
logger.debug(`In WorkflowList, authProvider: ${authProvider}, accessToken: ${accessToken}`);
if (!accessToken) {
// If no token, user needs to sign in
const { redirect } = await import('next/navigation');

49
ui/src/client/sdk.gen.ts
View file

File diff suppressed because one or more lines are too long

230
ui/src/client/types.gen.ts
View file

@ -19,6 +19,50 @@ export type ApiKeyStatusResponse = {
status: Array<ApiKeyStatus>;
};
/**
* Request schema for Asterisk ARI configuration.
*/
export type AriConfigurationRequest = {
provider?: string;
/**
* ARI base URL (e.g., http://asterisk.example.com:8088)
*/
ari_endpoint: string;
/**
* Stasis application name registered in Asterisk
*/
app_name: string;
/**
* ARI user password
*/
app_password: string;
/**
* websocket_client.conf connection name for externalMedia (e.g., dograh_staging)
*/
ws_client_name?: string;
/**
* Workflow ID for inbound calls
*/
inbound_workflow_id?: number | null;
/**
* List of SIP extensions/numbers for outbound calls (optional)
*/
from_numbers?: Array<string>;
};
/**
* Response schema for ARI configuration with masked sensitive fields.
*/
export type AriConfigurationResponse = {
provider: string;
ari_endpoint: string;
app_name: string;
app_password: string;
ws_client_name?: string;
inbound_workflow_id?: number | null;
from_numbers: Array<string>;
};
export type AccessTokenResponse = {
access_token: string | null;
refresh_token: string | null;
@ -80,6 +124,7 @@ export type CampaignResponse = {
completed_at: string | null;
retry_config: RetryConfigResponse;
max_concurrency?: number | null;
schedule_config?: ScheduleConfigResponse | null;
};
/**
@ -200,6 +245,7 @@ export type CreateCampaignRequest = {
source_id: string;
retry_config?: RetryConfigRequest | null;
max_concurrency?: number | null;
schedule_config?: ScheduleConfigRequest | null;
};
/**
@ -259,7 +305,9 @@ export type CreateToolRequest = {
type?: 'http_api';
} & HttpApiToolDefinition) | ({
type?: 'end_call';
} & EndCallToolDefinition);
} & EndCallToolDefinition) | ({
type?: 'transfer_call';
} & TransferCallToolDefinition);
};
export type CreateWorkflowRequest = {
@ -731,6 +779,18 @@ export type S3SignedUrlResponse = {
expires_in: number;
};
export type ScheduleConfigRequest = {
enabled?: boolean;
timezone?: string;
slots: Array<TimeSlotRequest>;
};
export type ScheduleConfigResponse = {
enabled: boolean;
timezone: string;
slots: Array<TimeSlotResponse>;
};
export type ServiceKeyResponse = {
name: string;
id: number;
@ -793,6 +853,7 @@ export type TelephonyConfigurationResponse = {
vonage?: VonageConfigurationResponse | null;
vobiz?: VobizConfigurationResponse | null;
cloudonix?: CloudonixConfigurationResponse | null;
ari?: AriConfigurationResponse | null;
};
export type TestSessionResponse = {
@ -815,6 +876,18 @@ export type TestSessionResponse = {
completed_at: string | null;
};
export type TimeSlotRequest = {
day_of_week: number;
start_time: string;
end_time: string;
};
export type TimeSlotResponse = {
day_of_week: number;
start_time: string;
end_time: string;
};
/**
* A parameter that the tool accepts.
*/
@ -857,6 +930,57 @@ export type ToolResponse = {
created_by?: CreatedByResponse | null;
};
/**
* Configuration for Transfer Call tools.
*/
export type TransferCallConfig = {
/**
* Phone number to transfer the call to (E.164 format, e.g., +1234567890)
*/
destination: string;
/**
* Type of message to play before transfer
*/
messageType?: 'none' | 'custom';
/**
* Custom message to play before transferring the call
*/
customMessage?: string | null;
/**
* Maximum time in seconds to wait for destination to answer (5-120 seconds)
*/
timeout?: number;
};
/**
* Request model for initiating a call transfer.
*/
export type TransferCallRequest = {
destination: string;
organization_id: number;
transfer_id: string;
conference_name: string;
timeout?: number | null;
};
/**
* Tool definition for Transfer Call tools.
*/
export type TransferCallToolDefinition = {
/**
* Schema version
*/
schema_version?: number;
/**
* Tool type
*/
type: 'transfer_call';
/**
* Transfer Call configuration
*/
config: TransferCallConfig;
};
/**
* Request model for triggering a call via API
*/
@ -915,6 +1039,13 @@ export type TwilioConfigurationResponse = {
from_numbers: Array<string>;
};
export type UpdateCampaignRequest = {
name?: string | null;
retry_config?: RetryConfigRequest | null;
max_concurrency?: number | null;
schedule_config?: ScheduleConfigRequest | null;
};
/**
* Request schema for updating a webhook credential.
*/
@ -945,7 +1076,9 @@ export type UpdateToolRequest = {
type?: 'http_api';
} & HttpApiToolDefinition) | ({
type?: 'end_call';
} & EndCallToolDefinition)) | null;
} & EndCallToolDefinition) | ({
type?: 'transfer_call';
} & TransferCallToolDefinition)) | null;
status?: string | null;
};
@ -1527,6 +1660,62 @@ export type HandleCloudonixCdrApiV1TelephonyCloudonixCdrPostResponses = {
200: unknown;
};
export type InitiateCallTransferApiV1TelephonyCallTransferPostData = {
body: TransferCallRequest;
path?: never;
query?: never;
url: '/api/v1/telephony/call-transfer';
};
export type InitiateCallTransferApiV1TelephonyCallTransferPostErrors = {
/**
* Not found
*/
404: unknown;
/**
* Validation Error
*/
422: HttpValidationError;
};
export type InitiateCallTransferApiV1TelephonyCallTransferPostError = InitiateCallTransferApiV1TelephonyCallTransferPostErrors[keyof InitiateCallTransferApiV1TelephonyCallTransferPostErrors];
export type InitiateCallTransferApiV1TelephonyCallTransferPostResponses = {
/**
* Successful Response
*/
200: unknown;
};
export type CompleteTransferFunctionCallApiV1TelephonyTransferResultTransferIdPostData = {
body?: never;
path: {
transfer_id: string;
};
query?: never;
url: '/api/v1/telephony/transfer-result/{transfer_id}';
};
export type CompleteTransferFunctionCallApiV1TelephonyTransferResultTransferIdPostErrors = {
/**
* Not found
*/
404: unknown;
/**
* Validation Error
*/
422: HttpValidationError;
};
export type CompleteTransferFunctionCallApiV1TelephonyTransferResultTransferIdPostError = CompleteTransferFunctionCallApiV1TelephonyTransferResultTransferIdPostErrors[keyof CompleteTransferFunctionCallApiV1TelephonyTransferResultTransferIdPostErrors];
export type CompleteTransferFunctionCallApiV1TelephonyTransferResultTransferIdPostResponses = {
/**
* Successful Response
*/
200: unknown;
};
export type ImpersonateApiV1SuperuserImpersonatePostData = {
body: ImpersonateRequest;
headers?: {
@ -2571,6 +2760,41 @@ export type GetCampaignApiV1CampaignCampaignIdGetResponses = {
export type GetCampaignApiV1CampaignCampaignIdGetResponse = GetCampaignApiV1CampaignCampaignIdGetResponses[keyof GetCampaignApiV1CampaignCampaignIdGetResponses];
export type UpdateCampaignApiV1CampaignCampaignIdPatchData = {
body: UpdateCampaignRequest;
headers?: {
authorization?: string | null;
'X-API-Key'?: string | null;
};
path: {
campaign_id: number;
};
query?: never;
url: '/api/v1/campaign/{campaign_id}';
};
export type UpdateCampaignApiV1CampaignCampaignIdPatchErrors = {
/**
* Not found
*/
404: unknown;
/**
* Validation Error
*/
422: HttpValidationError;
};
export type UpdateCampaignApiV1CampaignCampaignIdPatchError = UpdateCampaignApiV1CampaignCampaignIdPatchErrors[keyof UpdateCampaignApiV1CampaignCampaignIdPatchErrors];
export type UpdateCampaignApiV1CampaignCampaignIdPatchResponses = {
/**
* Successful Response
*/
200: CampaignResponse;
};
export type UpdateCampaignApiV1CampaignCampaignIdPatchResponse = UpdateCampaignApiV1CampaignCampaignIdPatchResponses[keyof UpdateCampaignApiV1CampaignCampaignIdPatchResponses];
export type StartCampaignApiV1CampaignCampaignIdStartPostData = {
body?: never;
headers?: {
@ -3350,7 +3574,7 @@ export type GetTelephonyConfigurationApiV1OrganizationsTelephonyConfigGetRespons
export type GetTelephonyConfigurationApiV1OrganizationsTelephonyConfigGetResponse = GetTelephonyConfigurationApiV1OrganizationsTelephonyConfigGetResponses[keyof GetTelephonyConfigurationApiV1OrganizationsTelephonyConfigGetResponses];
export type SaveTelephonyConfigurationApiV1OrganizationsTelephonyConfigPostData = {
body: TwilioConfigurationRequest | VonageConfigurationRequest | VobizConfigurationRequest | CloudonixConfigurationRequest;
body: TwilioConfigurationRequest | VonageConfigurationRequest | VobizConfigurationRequest | CloudonixConfigurationRequest | AriConfigurationRequest;
headers?: {
authorization?: string | null;
'X-API-Key'?: string | null;

22
ui/src/components/MediaPreviewDialog.tsx
View file

@ -14,11 +14,7 @@ import {
} from '@/components/ui/dialog';
import { downloadFile, getSignedUrl } from '@/lib/files';
interface MediaPreviewDialogProps {
accessToken: string | null;
}
export function MediaPreviewDialog({ accessToken }: MediaPreviewDialogProps) {
export function MediaPreviewDialog() {
const [isOpen, setIsOpen] = useState(false);
const [audioSignedUrl, setAudioSignedUrl] = useState<string | null>(null);
const [transcriptContent, setTranscriptContent] = useState<string | null>(null);
@ -29,7 +25,7 @@ export function MediaPreviewDialog({ accessToken }: MediaPreviewDialogProps) {
const openPreview = useCallback(
async (recordingUrl: string | null, transcriptUrl: string | null, runId: number) => {
if (!accessToken || (!recordingUrl && !transcriptUrl)) return;
if (!recordingUrl && !transcriptUrl) return;
setMediaLoading(true);
setAudioSignedUrl(null);
setTranscriptContent(null);
@ -39,8 +35,8 @@ export function MediaPreviewDialog({ accessToken }: MediaPreviewDialogProps) {
setIsOpen(true);
const [audioResult, transcriptResult] = await Promise.all([
recordingUrl ? getSignedUrl(recordingUrl, accessToken) : null,
transcriptUrl ? getSignedUrl(transcriptUrl, accessToken, true) : null,
recordingUrl ? getSignedUrl(recordingUrl) : null,
transcriptUrl ? getSignedUrl(transcriptUrl, true) : null,
]);
if (audioResult) {
@ -59,7 +55,7 @@ export function MediaPreviewDialog({ accessToken }: MediaPreviewDialogProps) {
setMediaLoading(false);
},
[accessToken],
[],
);
return {
@ -102,13 +98,13 @@ export function MediaPreviewDialog({ accessToken }: MediaPreviewDialogProps) {
<Button variant="secondary">Close</Button>
</DialogClose>
<div className="flex gap-2">
{recordingKey && accessToken && (
<Button variant="outline" onClick={() => downloadFile(recordingKey, accessToken)}>
{recordingKey && (
<Button variant="outline" onClick={() => downloadFile(recordingKey)}>
Download Recording
</Button>
)}
{transcriptKey && accessToken && (
<Button variant="outline" onClick={() => downloadFile(transcriptKey, accessToken)}>
{transcriptKey && (
<Button variant="outline" onClick={() => downloadFile(transcriptKey)}>
Download Transcript
</Button>
)}

9
ui/src/components/VoiceSelector.tsx
View file

@ -10,7 +10,6 @@ import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { useUserConfig } from "@/context/UserConfigContext";
import { cn } from "@/lib/utils";
// Providers that have MPS voice endpoints
@ -30,7 +29,6 @@ export const VoiceSelector: React.FC<VoiceSelectorProps> = ({
onChange,
className,
}) => {
const { accessToken } = useUserConfig();
const [isOpen, setIsOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [isManualInput, setIsManualInput] = useState(false);
@ -60,7 +58,7 @@ export const VoiceSelector: React.FC<VoiceSelectorProps> = ({
const fetchVoices = useCallback(async () => {
const providerKey = getProviderKey(provider);
if (!providerKey || !accessToken) {
if (!providerKey) {
setVoices([]);
return;
}
@ -71,9 +69,6 @@ export const VoiceSelector: React.FC<VoiceSelectorProps> = ({
try {
const response = await getVoicesApiV1UserConfigurationsVoicesProviderGet({
path: { provider: providerKey },
headers: {
Authorization: `Bearer ${accessToken}`,
},
});
if (response.data?.voices) {
@ -86,7 +81,7 @@ export const VoiceSelector: React.FC<VoiceSelectorProps> = ({
} finally {
setIsLoading(false);
}
}, [provider, getProviderKey, accessToken]);
}, [provider, getProviderKey]);
useEffect(() => {
if (provider) {

9
ui/src/components/http/credential-selector.tsx
View file

@ -36,7 +36,7 @@ export function CredentialSelector({
description = "Select a credential for authentication, or leave empty for no auth.",
showLabel = true,
}: CredentialSelectorProps) {
const { getAccessToken } = useAuth();
useAuth();
const [credentials, setCredentials] = useState<CredentialResponse[]>([]);
const [loading, setLoading] = useState(false);
@ -45,10 +45,7 @@ export function CredentialSelector({
const fetchCredentials = useCallback(async () => {
setLoading(true);
try {
const accessToken = await getAccessToken();
const response = await listCredentialsApiV1CredentialsGet({
headers: { Authorization: `Bearer ${accessToken}` },
});
const response = await listCredentialsApiV1CredentialsGet({});
if (response.error) {
console.error("Failed to fetch credentials:", response.error);
setCredentials([]);
@ -63,7 +60,7 @@ export function CredentialSelector({
} finally {
setLoading(false);
}
}, [getAccessToken]);
}, []);
useEffect(() => {
fetchCredentials();

69
ui/src/components/layout/AppLayout.tsx
View file

@ -28,44 +28,47 @@ const AppLayout: React.FC<AppLayoutProps> = ({
const isWorkflowEditor = /^\/workflow\/\d+/.test(pathname);
const isSuperadmin = pathname.startsWith("/superadmin");
// If no sidebar needed, just return children
if (!shouldShowSidebar) {
return <>{children}</>;
}
// Always render SidebarProvider to keep the component tree shape consistent
// across route changes (avoids React hooks ordering violations during navigation).
return (
<SidebarProvider defaultOpen={!isWorkflowEditor && !isSuperadmin}>
<div className="flex min-h-screen w-full">
<AppSidebar />
<SidebarInset className="flex-1">
{/* Optional header area for specific pages */}
{headerActions && (
<header className="sticky top-0 z-50 w-full border-b bg-background">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center justify-center">
{headerActions}
{shouldShowSidebar ? (
<div className="flex min-h-screen w-full">
<AppSidebar />
<SidebarInset className="flex-1">
{/* Optional header area for specific pages */}
{headerActions && (
<header className="sticky top-0 z-50 w-full border-b bg-background">
<div className="container mx-auto px-4 py-4">
<div className="flex items-center justify-center">
{headerActions}
</div>
</div>
</header>
)}
{/* Optional sticky tabs */}
{stickyTabs && (
<div className="sticky top-0 z-40 bg-[#2a2e39] border-b border-gray-700">
<div className="container mx-auto px-4">
<div className="flex items-center justify-center py-2">
{stickyTabs}
</div>
</div>
</div>
</header>
)}
)}
{/* Optional sticky tabs */}
{stickyTabs && (
<div className="sticky top-0 z-40 bg-[#2a2e39] border-b border-gray-700">
<div className="container mx-auto px-4">
<div className="flex items-center justify-center py-2">
{stickyTabs}
</div>
</div>
</div>
)}
{/* Main content area */}
<main className="flex-1">
{children}
</main>
</SidebarInset>
</div>
{/* Main content area */}
<main className="flex-1">
{children}
</main>
</SidebarInset>
</div>
) : (
<div className="flex-1 w-full">
{children}
</div>
)}
</SidebarProvider>
);
};

87
ui/src/components/layout/AppSidebar.tsx
View file

@ -11,9 +11,11 @@ import {
HelpCircle,
Home,
Key,
LogOut,
Megaphone,
MessageSquare,
Phone,
Settings,
Star,
TrendingUp,
Workflow,
@ -26,6 +28,14 @@ import React from "react";
import ThemeToggle from "@/components/ThemeSwitcher";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Sidebar,
SidebarContent,
@ -50,11 +60,6 @@ import { useAppConfig } from "@/context/AppConfigContext";
import { useAuth } from "@/lib/auth";
import { cn } from "@/lib/utils";
// Conditionally load Stack components only when using Stack auth
const StackUserButton = React.lazy(() =>
import("@stackframe/stack").then((mod) => ({ default: mod.UserButton }))
);
// Lazy load SelectedTeamSwitcher - we'll pass selectedTeam from our context
const StackTeamSwitcher = React.lazy(() =>
import("@stackframe/stack").then((mod) => ({
@ -66,7 +71,7 @@ export function AppSidebar() {
const pathname = usePathname();
const router = useRouter();
const { state } = useSidebar();
const { provider, getSelectedTeam } = useAuth();
const { provider, getSelectedTeam, logout, user } = useAuth();
const { config } = useAppConfig();
// Get selected team for Stack auth (cast to Team type from Stack)
@ -400,31 +405,53 @@ export function AppSidebar() {
</>
)}
{/* User Button for Stack Auth - at the bottom */}
{/* User Button - at the bottom */}
{provider === "stack" && (
<React.Suspense
fallback={
<div className={cn(
"animate-pulse bg-muted rounded",
state === "collapsed" ? "h-8 w-8" : "h-[34px] w-[34px]"
)} />
}
>
<div className={cn(
"flex",
state === "collapsed" ? "justify-center" : "justify-start"
)}>
<StackUserButton
extraItems={[
{
text: "Usage",
icon: <CircleDollarSign strokeWidth={2} size={16} />,
onClick: () => router.push("/usage"),
},
]}
/>
</div>
</React.Suspense>
<div className={cn(
"flex",
state === "collapsed" ? "justify-center" : "justify-start"
)}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="rounded-full h-8 w-8 cursor-pointer">
<span className="text-xs font-medium">
{(user?.displayName || (user as { primaryEmail?: string })?.primaryEmail || "")
.split(/[\s@]/)
.filter(Boolean)
.slice(0, 2)
.map((s: string) => s[0]?.toUpperCase())
.join("")
|| "U"}
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="top" align="start" className="w-56">
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
{user?.displayName && (
<p className="text-sm font-medium">{user.displayName}</p>
)}
{(user as { primaryEmail?: string })?.primaryEmail && (
<p className="text-xs text-muted-foreground">{(user as { primaryEmail?: string }).primaryEmail}</p>
)}
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => router.push("/handler/account-settings")} className="cursor-pointer">
<Settings className="mr-2 h-4 w-4" />
Account settings
</DropdownMenuItem>
<DropdownMenuItem onClick={() => router.push("/usage")} className="cursor-pointer">
<CircleDollarSign className="mr-2 h-4 w-4" />
Usage
</DropdownMenuItem>
<DropdownMenuItem onClick={() => logout()} className="cursor-pointer">
<LogOut className="mr-2 h-4 w-4" />
Sign out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
)}
{/* Theme Toggle - at the very bottom */}

8
ui/src/components/looptalk/ConversationsList.tsx
View file

@ -19,20 +19,16 @@ export function ConversationsList({ testSessionId }: ConversationsListProps) {
const [conversations, setConversations] = useState<Conversation[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { user, getAccessToken } = useAuth();
const { user } = useAuth();
useEffect(() => {
const fetchConversations = async () => {
if (!user) return;
try {
const accessToken = await getAccessToken();
const response = await getTestSessionConversationApiV1LooptalkTestSessionsTestSessionIdConversationGet({
path: {
test_session_id: testSessionId
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
// API returns { conversation: Conversation | null }
@ -56,7 +52,7 @@ export function ConversationsList({ testSessionId }: ConversationsListProps) {
// Poll for updates every 5 seconds
const interval = setInterval(fetchConversations, 5000);
return () => clearInterval(interval);
}, [testSessionId, user, getAccessToken]);
}, [testSessionId, user]);
if (loading && conversations.length === 0) {
return (

6
ui/src/components/looptalk/CreateTestSessionButton.tsx
View file

@ -33,7 +33,7 @@ export function CreateTestSessionButton() {
const router = useRouter();
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const { user, getAccessToken } = useAuth();
const { user } = useAuth();
const [formData, setFormData] = useState({
name: '',
description: '',
@ -49,7 +49,6 @@ export function CreateTestSessionButton() {
try {
if (!user) return;
const accessToken = await getAccessToken();
const response = await createTestSessionApiV1LooptalkTestSessionsPost({
body: {
name: formData.name,
@ -61,9 +60,6 @@ export function CreateTestSessionButton() {
concurrent_pairs: formData.test_type === 'load_test' ? formData.concurrent_pairs : undefined
}
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
toast.success('Test session created successfully');

24
ui/src/components/workflow-runs/CampaignRuns.tsx
View file

@ -18,7 +18,7 @@ interface CampaignRunsProps {
export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignRunsProps) {
const router = useRouter();
const { getAccessToken } = useAuth();
const { isAuthenticated } = useAuth();
const [runs, setRuns] = useState<WorkflowRunResponseSchema[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@ -29,7 +29,6 @@ export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignR
const [totalPages, setTotalPages] = useState(1);
const [totalCount, setTotalCount] = useState(0);
const [isExecutingFilters, setIsExecutingFilters] = useState(false);
const [accessToken, setAccessToken] = useState<string | null>(null);
// Sort state (initialized from URL)
const [sortBy, setSortBy] = useState<string | null>(() => {
@ -50,22 +49,13 @@ export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignR
return searchParams ? decodeFiltersFromURL(searchParams, availableAttributes) : [];
});
// Get access token on mount
useEffect(() => {
const fetchToken = async () => {
const token = await getAccessToken();
setAccessToken(token);
};
fetchToken();
}, [getAccessToken]);
const fetchCampaignRuns = useCallback(async (
page: number,
filters?: ActiveFilter[],
sortByParam?: string | null,
sortOrderParam?: 'asc' | 'desc'
) => {
if (!accessToken) return;
if (!isAuthenticated) return;
try {
setLoading(true);
// Prepare filter data for API
@ -88,9 +78,6 @@ export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignR
...(sortByParam && { sort_by: sortByParam }),
...(sortOrderParam && { sort_order: sortOrderParam }),
},
headers: {
'Authorization': `Bearer ${accessToken}`,
}
});
if (response.error) {
@ -111,7 +98,7 @@ export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignR
} finally {
setLoading(false);
}
}, [campaignId, accessToken]);
}, [campaignId, isAuthenticated]);
const updatePageInUrl = useCallback((page: number, filters?: ActiveFilter[], sortByParam?: string | null, sortOrderParam?: 'asc' | 'desc') => {
const params = new URLSearchParams();
@ -136,10 +123,10 @@ export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignR
}, [router, campaignId]);
useEffect(() => {
if (accessToken) {
if (isAuthenticated) {
fetchCampaignRuns(currentPage, appliedFilters, sortBy, sortOrder);
}
}, [currentPage, appliedFilters, fetchCampaignRuns, accessToken, sortBy, sortOrder]);
}, [currentPage, appliedFilters, fetchCampaignRuns, isAuthenticated, sortBy, sortOrder]);
const handleApplyFilters = useCallback(async () => {
setIsExecutingFilters(true);
@ -213,7 +200,6 @@ export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignR
sortOrder={sortOrder}
onSort={handleSort}
workflowId={workflowId}
accessToken={accessToken}
onReload={handleReload}
title="Campaign Workflow Runs"
emptyMessage="No workflow runs found for this campaign"

4
ui/src/components/workflow-runs/WorkflowRunsTable.tsx
View file

@ -47,7 +47,6 @@ export interface WorkflowRunsTableProps {
// Navigation & Actions
workflowId: number;
accessToken: string | null;
// Reload
onReload?: () => void;
@ -78,7 +77,6 @@ export function WorkflowRunsTable({
sortOrder = 'desc',
onSort,
workflowId,
accessToken,
onReload,
title = "Workflow Run History",
subtitle,
@ -88,7 +86,7 @@ export function WorkflowRunsTable({
const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
// Media preview dialog
const mediaPreview = MediaPreviewDialog({ accessToken });
const mediaPreview = MediaPreviewDialog();
const formatDate = (dateString: string) => new Date(dateString).toLocaleString();

11
ui/src/components/workflow/WorkflowTable.tsx
View file

@ -15,8 +15,6 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useUserConfig } from '@/context/UserConfigContext';
interface Workflow {
id: number;
name: string;
@ -32,7 +30,6 @@ interface WorkflowTableProps {
export function WorkflowTable({ workflows, showArchived }: WorkflowTableProps) {
const router = useRouter();
const { accessToken } = useUserConfig();
const [isPending, startTransition] = useTransition();
const [loadingWorkflowId, setLoadingWorkflowId] = useState<number | null>(null);
@ -41,11 +38,6 @@ export function WorkflowTable({ workflows, showArchived }: WorkflowTableProps) {
};
const handleArchiveToggle = async (id: number, currentStatus: string) => {
if (!accessToken) {
toast.error('Authentication required');
return;
}
const newStatus = currentStatus === 'active' ? 'archived' : 'active';
const action = currentStatus === 'active' ? 'Archive' : 'Restore';
@ -59,9 +51,6 @@ export function WorkflowTable({ workflows, showArchived }: WorkflowTableProps) {
body: {
status: newStatus,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
if (response.data) {

2
ui/src/constants/workflowRunModes.ts
View file

@ -7,9 +7,9 @@ export const WORKFLOW_RUN_MODES = {
VONAGE: 'vonage',
VOBIZ: 'vobiz',
CLOUDONIX: 'cloudonix',
STASIS: 'stasis',
WEBRTC: 'webrtc',
SMALL_WEBRTC: 'smallwebrtc',
ARI: 'ari'
} as const;
export type WorkflowRunMode = typeof WORKFLOW_RUN_MODES[keyof typeof WORKFLOW_RUN_MODES];

35
ui/src/context/UserConfigContext.tsx
View file

@ -4,6 +4,7 @@ import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, u
import { getUserConfigurationsApiV1UserConfigurationsUserGet, updateUserConfigurationsApiV1UserConfigurationsUserPut } from '@/client/sdk.gen';
import type { UserConfigurationRequestResponseSchema } from '@/client/types.gen';
import { setupAuthInterceptor } from '@/lib/apiClient';
import type { AuthUser } from '@/lib/auth';
import { useAuth } from '@/lib/auth';
@ -43,7 +44,6 @@ interface UserConfigContextType {
error: Error | null;
refreshConfig: () => Promise<void>;
permissions: TeamPermission[];
accessToken: string | null;
user: AuthUser | null;
organizationPricing: OrganizationPricing | null;
}
@ -54,7 +54,6 @@ export function UserConfigProvider({ children }: { children: ReactNode }) {
const [userConfig, setUserConfig] = useState<UserConfigurationRequestResponseSchema | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
const [accessToken, setAccessToken] = useState<string | null>(null);
const [organizationPricing, setOrganizationPricing] = useState<OrganizationPricing | null>(null);
const [permissions, setPermissions] = useState<TeamPermission[]>([]);
@ -68,6 +67,13 @@ export function UserConfigProvider({ children }: { children: ReactNode }) {
const hasFetchedConfig = useRef(false);
const hasFetchedPermissions = useRef(false);
// Register the auth interceptor synchronously during render (not in useEffect)
// so it's in place before any child effects fire API calls.
// setupAuthInterceptor is idempotent — safe for strict mode double-renders.
if (!auth.loading && auth.isAuthenticated) {
setupAuthInterceptor(auth.getAccessToken);
}
// Fetch permissions once when auth is ready
useEffect(() => {
if (auth.loading || hasFetchedPermissions.current) {
@ -107,14 +113,7 @@ export function UserConfigProvider({ children }: { children: ReactNode }) {
const fetchUserConfig = async () => {
setLoading(true);
try {
const token = await authRef.current.getAccessToken();
setAccessToken(token);
const response = await getUserConfigurationsApiV1UserConfigurationsUserGet({
headers: {
'Authorization': `Bearer ${token}`,
},
});
const response = await getUserConfigurationsApiV1UserConfigurationsUserGet();
if (response.data) {
setUserConfig(response.data);
@ -131,7 +130,6 @@ export function UserConfigProvider({ children }: { children: ReactNode }) {
setError(null);
} catch (err) {
setError(err instanceof Error ? err : new Error('Failed to fetch user configuration'));
setAccessToken(null);
} finally {
setLoading(false);
}
@ -141,13 +139,12 @@ export function UserConfigProvider({ children }: { children: ReactNode }) {
}, [auth.loading, auth.isAuthenticated]);
const saveUserConfig = useCallback(async (userConfigRequest: SaveUserConfigFunctionParams) => {
if (!accessToken) throw new Error('No authentication token available');
if (!authRef.current.isAuthenticated) throw new Error('No authentication available');
const response = await updateUserConfigurationsApiV1UserConfigurationsUserPut({
body: {
...userConfig,
...userConfigRequest
} as UserConfigurationRequestResponseSchema,
headers: { 'Authorization': `Bearer ${accessToken}` },
});
if (response.error) {
let msg = 'Failed to save user configuration';
@ -168,7 +165,7 @@ export function UserConfigProvider({ children }: { children: ReactNode }) {
billing_enabled: response.data.organization_pricing.billing_enabled as boolean || false
});
}
}, [accessToken, userConfig]);
}, [userConfig]);
const refreshConfig = useCallback(async () => {
const currentAuth = authRef.current;
@ -176,14 +173,7 @@ export function UserConfigProvider({ children }: { children: ReactNode }) {
setLoading(true);
try {
const token = await currentAuth.getAccessToken();
setAccessToken(token);
const response = await getUserConfigurationsApiV1UserConfigurationsUserGet({
headers: {
'Authorization': `Bearer ${token}`,
},
});
const response = await getUserConfigurationsApiV1UserConfigurationsUserGet();
if (response.data) {
setUserConfig(response.data);
@ -212,7 +202,6 @@ export function UserConfigProvider({ children }: { children: ReactNode }) {
error,
refreshConfig,
permissions,
accessToken,
user: auth.user,
organizationPricing,
}}

25
ui/src/lib/apiClient.ts
View file

@ -1,4 +1,5 @@
import type { CreateClientConfig } from '@/client/client.gen';
import { client } from '@/client/client.gen';
export const createClientConfig: CreateClientConfig = (config) => {
// Use different URLs for server-side vs client-side
@ -18,3 +19,27 @@ export const createClientConfig: CreateClientConfig = (config) => {
baseUrl,
};
};
let interceptorRegistered = false;
/**
* Register a request interceptor that attaches a fresh access token
* to every outgoing SDK request. Idempotent — safe for React strict mode.
*/
export function setupAuthInterceptor(getAccessToken: () => Promise<string>) {
if (interceptorRegistered) return;
interceptorRegistered = true;
client.interceptors.request.use(async (request) => {
if (request.headers.get('Authorization')) {
return request;
}
try {
const token = await getAccessToken();
request.headers.set('Authorization', `Bearer ${token}`);
} catch {
// If token retrieval fails, let the request proceed without auth
}
return request;
});
}

7
ui/src/lib/auth/hooks/useAuth.ts
View file

@ -1,7 +0,0 @@
'use client';
import { useAuthContext } from '../providers/AuthProvider';
export function useAuth() {
return useAuthContext();
}

3
ui/src/lib/auth/index.ts
View file

@ -1,5 +1,4 @@
export { useAuth } from './hooks/useAuth';
export { AuthProvider } from './providers/AuthProvider';
export { AuthProvider, useAuth } from './providers/AuthProvider';
export type {
AuthProvider as AuthProviderType,
AuthToken,

67
ui/src/lib/auth/providers/AuthProvider.tsx
View file

@ -1,9 +1,8 @@
'use client';
import { Loader2 } from 'lucide-react';
import React, { createContext, lazy, Suspense, useContext, useEffect, useMemo, useState } from 'react';
import React, { createContext, lazy, Suspense, useContext } from 'react';
import { createAuthService } from '../services';
import type { AuthUser } from '../types';
// Shared context type for both Stack and Local providers
@ -22,54 +21,18 @@ export interface AuthContextType {
export const AuthContext = createContext<AuthContextType | null>(null);
// Lazy load Stack components only when needed
// Lazy load provider wrappers only when needed
const StackProviderWrapper = lazy(() =>
import('./StackProviderWrapper').then(module => ({
default: module.StackProviderWrapper
}))
);
// Generic context provider for non-Stack providers (local/OSS)
function LocalAuthContextProvider({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<AuthUser | null>(null);
const [loading, setLoading] = useState(true);
const service = useMemo(() => createAuthService('local'), []);
useEffect(() => {
const fetchUser = async () => {
try {
const currentUser = await service.getCurrentUser();
setUser(currentUser);
} catch (error) {
console.error('Failed to fetch user:', error);
setUser(null);
} finally {
setLoading(false);
}
};
fetchUser();
}, [service]);
const getAccessToken = React.useCallback(() => service.getAccessToken(), [service]);
const redirectToLogin = React.useCallback(() => service.redirectToLogin(), [service]);
const logout = React.useCallback(() => service.logout(), [service]);
const contextValue: AuthContextType = useMemo(() => ({
user,
isAuthenticated: !!user,
loading,
getAccessToken,
redirectToLogin,
logout,
provider: 'local',
}), [user, loading, getAccessToken, redirectToLogin, logout]);
return (
<AuthContext.Provider value={contextValue}>
{children}
</AuthContext.Provider>
);
}
const LocalProviderWrapper = lazy(() =>
import('./LocalProviderWrapper').then(module => ({
default: module.LocalProviderWrapper
}))
);
export function AuthProvider({ children }: { children: React.ReactNode }) {
const authProvider = process.env.NEXT_PUBLIC_AUTH_PROVIDER || 'stack';
@ -91,16 +54,22 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
// For local/OSS provider
return (
<LocalAuthContextProvider>
{children}
</LocalAuthContextProvider>
<Suspense fallback={
<div className="flex items-center justify-center min-h-screen">
<Loader2 className="w-8 h-8 animate-spin" />
</div>
}>
<LocalProviderWrapper>
{children}
</LocalProviderWrapper>
</Suspense>
);
}
export function useAuthContext() {
export function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuthContext must be used within AuthProvider');
throw new Error('useAuth must be used within AuthProvider');
}
return context;
}

74
ui/src/lib/auth/providers/LocalProviderWrapper.tsx Normal file
View file

@ -0,0 +1,74 @@
'use client';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import logger from '@/lib/logger';
import type { AuthUser, LocalUser } from '../types';
import { AuthContext } from './AuthProvider';
export function LocalProviderWrapper({ children }: { children: React.ReactNode }) {
const [user, setUser] = useState<LocalUser | null>(null);
const [loading, setLoading] = useState(true);
const tokenRef = useRef<string | null>(null);
useEffect(() => {
if (typeof window === 'undefined') return;
const initializeAuth = async () => {
try {
const response = await fetch('/api/auth/oss');
if (response.ok) {
const data = await response.json();
tokenRef.current = data.token;
setUser(data.user);
logger.info('OSS auth initialized', { user: data.user });
} else {
logger.error('Failed to initialize OSS auth');
}
} catch (error) {
logger.error('Error initializing OSS auth', error);
} finally {
setLoading(false);
}
};
initializeAuth();
}, []);
const getAccessToken = React.useCallback(async () => {
if (typeof window === 'undefined') {
return 'ssr-placeholder-token';
}
if (!tokenRef.current) {
logger.warn('No OSS token available after initialization');
return '';
}
return tokenRef.current;
}, []);
const redirectToLogin = React.useCallback(() => {
logger.info('Login redirect not needed in local mode');
}, []);
const logout = React.useCallback(async () => {
setUser(null);
logger.info('Logout requested in OSS mode - server cookies need to be cleared');
}, []);
const contextValue = useMemo(() => ({
user: user as AuthUser,
isAuthenticated: !loading,
loading,
getAccessToken,
redirectToLogin,
logout,
provider: 'local' as const,
}), [user, loading, getAccessToken, redirectToLogin, logout]);
return (
<AuthContext.Provider value={contextValue}>
{children}
</AuthContext.Provider>
);
}

8
ui/src/lib/auth/providers/StackProviderWrapper.tsx
View file

@ -56,9 +56,11 @@ function StackAuthContextProvider({ children }: { children: React.ReactNode }) {
}, []);
const logout = React.useCallback(async () => {
const user = userRef.current;
if (user?.signOut) {
await user.signOut();
// Redirect to Stack's server-side sign-out handler instead of calling
// signOut() client-side. Client-side signOut triggers an internal
// re-render that causes a hooks ordering violation in Stack's components.
if (typeof window !== 'undefined') {
window.location.href = '/handler/sign-out';
}
}, []);

45
ui/src/lib/auth/services/index.ts
View file

@ -1,45 +0,0 @@
import logger from '@/lib/logger';
import type { AuthProvider } from '../types';
import type { IAuthService } from './interface';
import { LocalAuthService } from './localAuthService';
import { StackAuthService } from './stackAuthService';
// Singleton instances for auth services
let stackServiceInstance: StackAuthService | null = null;
let localServiceInstance: LocalAuthService | null = null;
export function createAuthService(provider?: AuthProvider | string): IAuthService {
const authProvider = provider || process.env.NEXT_PUBLIC_AUTH_PROVIDER || 'stack';
switch (authProvider) {
case 'stack':
if (!stackServiceInstance) {
logger.debug('[createAuthService] Creating singleton StackAuthService instance');
stackServiceInstance = new StackAuthService();
}
return stackServiceInstance;
case 'local':
if (!localServiceInstance) {
logger.debug('[createAuthService] Creating singleton LocalAuthService instance');
localServiceInstance = new LocalAuthService();
}
return localServiceInstance;
// Future providers can be added here
// case 'auth0':
// return new Auth0Service();
// case 'supabase':
// return new SupabaseService();
default:
console.warn(`Unknown auth provider: ${authProvider}, falling back to local`);
if (!localServiceInstance) {
localServiceInstance = new LocalAuthService();
}
return localServiceInstance;
}
}
export type { IAuthService } from './interface';
export { LocalAuthService } from './localAuthService';
export { StackAuthService } from './stackAuthService';

23
ui/src/lib/auth/services/interface.ts
View file

@ -1,23 +0,0 @@
import type { AuthUser } from '../types';
export interface IAuthService {
// Token management
getAccessToken(): Promise<string>;
refreshToken(): Promise<string>;
// User management
getCurrentUser(): Promise<AuthUser | null>;
isAuthenticated(): boolean;
// Navigation
redirectToLogin(): void;
logout(): Promise<void>;
// Team/Organization management (optional for some providers)
getSelectedTeam?(): unknown;
listPermissions?(team?: unknown): Promise<Array<{ id: string }>>;
// Provider-specific
getProviderName(): string;
}

109
ui/src/lib/auth/services/localAuthService.ts
View file

@ -1,109 +0,0 @@
'use client';
import logger from '@/lib/logger';
import type { LocalUser } from '../types';
import type { IAuthService } from './interface';
export class LocalAuthService implements IAuthService {
private currentUser: LocalUser | null = null;
private currentToken: string | null = null;
private authPromise: Promise<void> | null = null;
private static instance: LocalAuthService | null = null;
constructor() {
// Singleton pattern to ensure single initialization
if (LocalAuthService.instance) {
return LocalAuthService.instance;
}
LocalAuthService.instance = this;
// Initialize auth on creation
if (typeof window !== 'undefined') {
this.authPromise = this.initializeAuth();
}
}
private async initializeAuth(): Promise<void> {
try {
const response = await fetch('/api/auth/oss');
if (response.ok) {
const data = await response.json();
this.currentToken = data.token;
this.currentUser = data.user;
logger.info('OSS auth initialized', { user: data.user });
} else {
logger.error('Failed to initialize OSS auth');
}
} catch (error) {
logger.error('Error initializing OSS auth', error);
}
}
private async ensureAuth(): Promise<void> {
if (this.authPromise) {
await this.authPromise;
} else if (!this.currentToken && typeof window !== 'undefined') {
this.authPromise = this.initializeAuth();
await this.authPromise;
}
}
async getAccessToken(): Promise<string> {
if (typeof window === 'undefined') {
// SSR: Server will handle this
return 'ssr-placeholder-token';
}
await this.ensureAuth();
if (!this.currentToken) {
logger.warn('No OSS token available after initialization');
return '';
}
return this.currentToken;
}
async refreshToken(): Promise<string> {
// For local mode, just return the same token
return this.getAccessToken();
}
async getCurrentUser(): Promise<LocalUser | null> {
if (typeof window === 'undefined') {
// SSR: Server will handle this
return null;
}
await this.ensureAuth();
if (!this.currentUser) {
logger.warn('No OSS user available after initialization');
return null;
}
return this.currentUser;
}
isAuthenticated(): boolean {
// In local mode, always authenticated
return true;
}
redirectToLogin(): void {
// No-op for local mode
logger.info('Login redirect not needed in local mode');
}
async logout(): Promise<void> {
// In OSS mode, logout would require server-side cookie clearing
// For now, just clear the cached user
this.currentUser = null;
logger.info('Logout requested in OSS mode - server cookies need to be cleared');
}
getProviderName(): string {
return 'local';
}
}

139
ui/src/lib/auth/services/stackAuthService.ts
View file

@ -1,139 +0,0 @@
'use client';
import type { CurrentUser } from '@stackframe/stack';
import logger from '@/lib/logger';
import type { IAuthService } from './interface';
export class StackAuthService implements IAuthService {
private userInstance: CurrentUser | null = null;
private callCount = {
setUserInstance: 0,
getAccessToken: 0,
refreshToken: 0,
getCurrentUser: 0,
isAuthenticated: 0
};
// Set the user instance from the Stack useUser hook
setUserInstance(user: CurrentUser) {
this.callCount.setUserInstance++;
logger.debug('[StackAuthService] setUserInstance called', {
callCount: this.callCount.setUserInstance,
userId: user?.id,
hadPreviousUser: !!this.userInstance,
previousUserId: this.userInstance?.id,
timestamp: new Date().toISOString()
});
this.userInstance = user;
logger.debug('[StackAuthService] setUserInstance completed - user is now set');
}
async getAccessToken(): Promise<string> {
this.callCount.getAccessToken++;
logger.debug('[StackAuthService] getAccessToken called', {
callCount: this.callCount.getAccessToken,
hasUser: !!this.userInstance,
userId: this.userInstance?.id
});
if (!this.userInstance) {
logger.error('[StackAuthService] getAccessToken - User not initialized');
throw new Error('User not initialized');
}
logger.debug('[StackAuthService] Calling user.getAuthJson()');
const authJson = await this.userInstance.getAuthJson();
logger.debug('[StackAuthService] getAuthJson returned', {
hasToken: !!authJson.accessToken,
tokenLength: authJson.accessToken?.length
});
if (!authJson.accessToken) {
logger.error('[StackAuthService] No access token available');
throw new Error('No access token available');
}
return authJson.accessToken;
}
async refreshToken(): Promise<string> {
this.callCount.refreshToken++;
logger.debug('[StackAuthService] refreshToken called', {
callCount: this.callCount.refreshToken,
hasUser: !!this.userInstance
});
if (!this.userInstance) {
throw new Error('User not initialized');
}
// Stack handles token refresh internally
const authJson = await this.userInstance.getAuthJson();
if (!authJson.accessToken) {
throw new Error('No access token available');
}
return authJson.accessToken;
}
async getCurrentUser(): Promise<CurrentUser | null> {
this.callCount.getCurrentUser++;
logger.debug('[StackAuthService] getCurrentUser called', {
callCount: this.callCount.getCurrentUser,
hasUser: !!this.userInstance,
userId: this.userInstance?.id
});
// Return the actual Stack user instance
return this.userInstance;
}
isAuthenticated(): boolean {
this.callCount.isAuthenticated++;
const isAuth = !!this.userInstance;
logger.debug('[StackAuthService] isAuthenticated called', {
callCount: this.callCount.isAuthenticated,
result: isAuth,
hasUserInstance: !!this.userInstance,
userId: this.userInstance?.id,
timestamp: new Date().toISOString()
});
return isAuth;
}
redirectToLogin(): void {
if (typeof window !== 'undefined') {
window.location.href = '/handler/sign-in';
}
}
async logout(): Promise<void> {
if (this.userInstance && this.userInstance.signOut) {
await this.userInstance.signOut();
}
}
getSelectedTeam(): unknown {
return this.userInstance?.selectedTeam;
}
async listPermissions(team?: unknown): Promise<Array<{ id: string }>> {
if (!this.userInstance || !this.userInstance.listPermissions) {
return [];
}
const targetTeam = team || this.userInstance.selectedTeam;
if (!targetTeam) {
return [];
}
try {
const perms = await this.userInstance.listPermissions(targetTeam);
return Array.isArray(perms) ? perms : [];
} catch (error) {
logger.error('Error listing permissions:', error);
return [];
}
}
getProviderName(): string {
return 'stack';
}
}

14
ui/src/lib/files.ts
View file

@ -3,17 +3,14 @@ import { getSignedUrlApiV1S3SignedUrlGet } from "@/client/sdk.gen";
/**
* Get a signed URL and download a file
*/
export async function downloadFile(url: string | null, accessToken: string) {
if (!url || !accessToken) return;
export async function downloadFile(url: string | null) {
if (!url) return;
try {
const response = await getSignedUrlApiV1S3SignedUrlGet({
query: {
key: url
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
if (response.data?.url) {
@ -28,8 +25,8 @@ export async function downloadFile(url: string | null, accessToken: string) {
* Return a signed URL for a given S3 key without triggering a download.
* Useful for previewing media (audio or transcript) in-browser first.
*/
export async function getSignedUrl(url: string | null, accessToken: string, inline: boolean = false): Promise<string | null> {
if (!url || !accessToken) return null;
export async function getSignedUrl(url: string | null, inline: boolean = false): Promise<string | null> {
if (!url) return null;
try {
const response = await getSignedUrlApiV1S3SignedUrlGet({
@ -37,9 +34,6 @@ export async function getSignedUrl(url: string | null, accessToken: string, inli
key: url,
inline: inline,
},
headers: {
'Authorization': `Bearer ${accessToken}`,
},
});
if (response.data?.url) {