{"_id":"@aginies/webuikit","_rev":"4-e5efc21cb0f21d3de29f41a3a926925b","name":"@aginies/webuikit","dist-tags":{"latest":"0.5.0"},"versions":{"0.2.0":{"name":"@aginies/webuikit","version":"0.2.0","keywords":["aginies","ui-kit","react","chat-widget","agents","design-system"],"author":"Abra Partners","license":"MIT","_id":"@aginies/webuikit@0.2.0","maintainers":[{"name":"oguzhankarahan","email":"oguzhankarahan.tr@gmail.com"}],"homepage":"https://www.aginies.com","dist":{"shasum":"0568baa3a3fc83f3687f898ecb1f6cf4df0d18a5","tarball":"https://registry.npmjs.org/@aginies/webuikit/-/webuikit-0.2.0.tgz","fileCount":9,"integrity":"sha512-pGPYzYgD1L+LjkJ1KmxptZPd+KuJaMnAkSBsPBFcJ/2ukTDME0zIMOUMaQKbAs9yG2uLh6hYo98NY9kvRvtxDw==","signatures":[{"sig":"MEQCIHs7+a2HiS8RbJXDOnPxjlwWLyIiZW7TGWU8O1s9/IoaAiA2oPkajfZL+4R7jR1BTi3Icqmoo9c5JJ6/+BG9u4rLcg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":685581},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","shasum":"0568baa3a3fc83f3687f898ecb1f6cf4df0d18a5","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"test":"vitest run","build":"tsup && node --experimental-strip-types --no-warnings scripts/build-css.ts","type-check":"tsc --noEmit"},"_npmUser":{"name":"oguzhankarahan","email":"oguzhankarahan.tr@gmail.com"},"_integrity":"sha512-pGPYzYgD1L+LjkJ1KmxptZPd+KuJaMnAkSBsPBFcJ/2ukTDME0zIMOUMaQKbAs9yG2uLh6hYo98NY9kvRvtxDw==","repository":{"url":"https://github.com/abrapartners/agiwebuikit.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.3","description":"Aginies web UI kit: React components and widgets that embed platform agents into any site","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.3.0","dependencies":{"@aginies/tokens":"0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","react":"^19.1.0","react-dom":"^19.1.0","@types/react":"^19.1.0","@types/react-dom":"^19.1.0","@testing-library/react":"^16.3.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/webuikit_0.2.0_1789207192438_0.46020894088713105","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@aginies/webuikit","version":"0.3.0","keywords":["aginies","ui-kit","react","chat-widget","agents","design-system"],"author":"Abra Partners","license":"MIT","_id":"@aginies/webuikit@0.3.0","maintainers":[{"name":"oguzhankarahan","email":"oguzhankarahan.tr@gmail.com"}],"homepage":"https://www.aginies.com","dist":{"shasum":"7db2a1b8988ab7c2d16c9a9ee389dd97ac339961","tarball":"https://registry.npmjs.org/@aginies/webuikit/-/webuikit-0.3.0.tgz","fileCount":9,"integrity":"sha512-Ux69SZsg6dRg1YhTm7fOHiF8wxPaWZ26ICyhvGhtF1bYyyJutyifgIl3lm8DVWSZNx+8aUYUi9xljPDQZqQelg==","signatures":[{"sig":"MEUCIAg9yGhvo2PlHDghv8gJAb/qxoIc9kWKhkku7TfvxZwQAiEA7D39VnxBd+VzABRJTr5MBU4Fm3j/wtm6nHOMRC9kZvs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEYCIQCuA0qePwY4+3RdBHn9eKgz05Bd6Zk8VMuXF9eOBnF26wIhANtxVmFedXsL2lQ9VwuSy1taY9wPOjAfIBA5Pl3R+hsl","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":803037},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","shasum":"7db2a1b8988ab7c2d16c9a9ee389dd97ac339961","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"test":"vitest run","build":"tsup && node --experimental-strip-types --no-warnings scripts/build-css.ts","type-check":"tsc --noEmit"},"_npmUser":{"name":"oguzhankarahan","email":"oguzhankarahan.tr@gmail.com"},"_integrity":"sha512-Ux69SZsg6dRg1YhTm7fOHiF8wxPaWZ26ICyhvGhtF1bYyyJutyifgIl3lm8DVWSZNx+8aUYUi9xljPDQZqQelg==","repository":{"url":"https://github.com/abrapartners/agiwebuikit.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.3","description":"Aginies web UI kit: React components and widgets that embed platform agents into any site","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.3.0","dependencies":{"@aginies/tokens":"0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","react":"^19.1.0","react-dom":"^19.1.0","@types/react":"^19.1.0","@types/react-dom":"^19.1.0","@testing-library/react":"^16.3.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/webuikit_0.3.0_1789209939910_0.9950222618042659","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@aginies/webuikit","version":"0.4.0","keywords":["aginies","ui-kit","react","chat-widget","agents","design-system"],"author":"Abra Partners","license":"MIT","_id":"@aginies/webuikit@0.4.0","maintainers":[{"name":"oguzhankarahan","email":"oguzhankarahan.tr@gmail.com"}],"homepage":"https://www.aginies.com","dist":{"shasum":"88e0345ab0dc2551c148f4b2b070c03d901a33b5","tarball":"https://registry.npmjs.org/@aginies/webuikit/-/webuikit-0.4.0.tgz","fileCount":9,"integrity":"sha512-ZNslajEdijK/PbWDMeRojKsgoM3s6VvKtlVkeOmH3bxP09QQjcpdmCWvdv2TXBMcZSpbj594ses97TlRJz5MoA==","signatures":[{"sig":"MEUCIQChfbQuJYLHrtHyIbah5DjR9W1LLFBmbWZON4EhRo8gjwIgaQ8Upz8xYPriiTdth3o6O8PnMpbbnKv0uaevvnkk0NE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIBSn5UQ19j+JRVxFbGRwpPSKpG9QBItjnbT267q01jWqAiEA7iK/Mb4z9aDSFmX9dihsDXqxlWG1nGUdZmXmncjn8EY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":822364},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","shasum":"88e0345ab0dc2551c148f4b2b070c03d901a33b5","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"test":"vitest run","build":"tsup && node --experimental-strip-types --no-warnings scripts/build-css.ts","type-check":"tsc --noEmit"},"_npmUser":{"name":"oguzhankarahan","email":"oguzhankarahan.tr@gmail.com"},"_integrity":"sha512-ZNslajEdijK/PbWDMeRojKsgoM3s6VvKtlVkeOmH3bxP09QQjcpdmCWvdv2TXBMcZSpbj594ses97TlRJz5MoA==","repository":{"url":"https://github.com/abrapartners/agiwebuikit.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.3","description":"Aginies web UI kit: React components and widgets that embed platform agents into any site","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.3.0","dependencies":{"@aginies/tokens":"0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","react":"^19.1.0","react-dom":"^19.1.0","@types/react":"^19.1.0","@types/react-dom":"^19.1.0","@testing-library/react":"^16.3.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/webuikit_0.4.0_1789217521457_0.006416551210843391","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"_id":"@aginies/webuikit@0.5.0","dist":{"shasum":"1d45af0013f1c00ddb514a79c6f1ef366db8a204","tarball":"https://registry.npmjs.org/@aginies/webuikit/-/webuikit-0.5.0.tgz","fileCount":9,"integrity":"sha512-PoKrG4WUpe2qMbJKHLTFIvg//psU9iWnhO+VwSBYVdwcvlGUYXBHDiscImuLUSikBvad2ZGSAo5biiE+pHfceg==","signatures":[{"sig":"MEUCIFWx8nZbGK88gILXl7B2fWqgYqPTwqF+c4NtK15nkLPXAiEAqd9qNeHV29KjVNsuydtoWF7mfNgnQNJ+ePxWJmqStak=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDuDLjO+6K37llgrfhJdMl2tUKtlaZYGrh8yVVHCSernAIhAKqZ7B6LMSUa/GQTHcb10f94rdSZO6p39erf0sK2Y7IV"}],"unpackedSize":920549},"main":"./dist/index.cjs","name":"@aginies/webuikit","type":"module","types":"./dist/index.d.ts","author":"Abra Partners","module":"./dist/index.js","shasum":"1d45af0013f1c00ddb514a79c6f1ef366db8a204","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"license":"MIT","scripts":{"test":"vitest run","build":"tsup && node --experimental-strip-types --no-warnings scripts/build-css.ts","type-check":"tsc --noEmit"},"version":"0.5.0","_npmUser":{"name":"oguzhankarahan","email":"oguzhankarahan.tr@gmail.com"},"homepage":"https://www.aginies.com","keywords":["aginies","ui-kit","react","chat-widget","agents","design-system"],"_integrity":"sha512-PoKrG4WUpe2qMbJKHLTFIvg//psU9iWnhO+VwSBYVdwcvlGUYXBHDiscImuLUSikBvad2ZGSAo5biiE+pHfceg==","repository":{"url":"https://github.com/abrapartners/agiwebuikit.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.3","description":"Aginies web UI kit: React components and widgets that embed platform agents into any site","directories":{},"maintainers":[{"name":"oguzhankarahan","email":"oguzhankarahan.tr@gmail.com"}],"sideEffects":["*.css"],"_nodeVersion":"24.3.0","dependencies":{"@aginies/tokens":"0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^26.1.0","react":"^19.1.0","react-dom":"^19.1.0","@types/react":"^19.1.0","@types/react-dom":"^19.1.0","@testing-library/react":"^16.3.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/webuikit_0.5.0_1790619098776_0.9309752007875733"}}},"time":{"created":"2026-09-12T09:59:52.267Z","modified":"2026-09-28T18:11:39.133Z","0.2.0":"2026-09-12T09:59:52.570Z","0.3.0":"2026-09-12T10:45:40.017Z","0.4.0":"2026-09-12T12:52:01.602Z","0.5.0":"2026-09-28T18:11:38.897Z"},"author":"Abra Partners","license":"MIT","homepage":"https://www.aginies.com","keywords":["aginies","ui-kit","react","chat-widget","agents","design-system"],"repository":{"url":"https://github.com/abrapartners/agiwebuikit.git","type":"git","directory":"packages/react"},"description":"Aginies web UI kit: React components and widgets that embed platform agents into any site","maintainers":[{"name":"oguzhankarahan","email":"oguzhankarahan.tr@gmail.com"}],"readme":"# @aginies/webuikit\n\nReact components and widgets that embed Aginies agents into any site: the hosted chat as a\nbubble, an inline panel or a full page, plus the core primitives of the Aginies design\nsystem. The package is public; rendering requires an activation token issued for your\ndeployment, and the platform only answers origins listed in its configuration.\n\n```bash\nnpm install @aginies/webuikit react react-dom\n```\n\n## Quick start\n\n```tsx\nimport { init, AginiesProvider, ChatWidget } from '@aginies/webuikit'\nimport '@aginies/webuikit/styles.css'\n\ninit({ baseUrl: 'https://app.your-aginies.example', token: 'agn_…', locale: 'tr' })\n\nexport function App() {\n return (\n \n \n \n )\n}\n```\n\n`init()` runs the activation handshake (`POST /api/ui/activate`) once. Until it succeeds\nthe provider renders its `fallback`; if the platform refuses the token or the origin,\nnothing renders and one warning is logged.\n\n## Hosted pages\n\nThe platform's own chat page runs the same widget without a key: `new AginiesClient({ baseUrl, hosted: true })` (or `init({ baseUrl, hosted: true })`). The platform accepts that activation only from its own origin.\n\n## Activation keys\n\nTwo kinds of token work with `init()`:\n\n- **Tenant keys** (`agn_pk_…`) are created per tenant in the platform's admin console\n (tenant page, \"UI package keys\"), each with its own list of allowed origins\n (`https://www.example.com`, `https://*.example.com` or `*` for development), an\n optional module list and an optional expiry. The key is publishable: it identifies the\n tenant and unlocks nothing on its own. A successful activation returns a one-hour\n session that the client sends as `Authorization: Bearer …` on every platform call and\n renews on its own when it expires. Only the tenant's own chats can be reached through\n it, and only the modules the key enables render; the rest render nothing and log one\n warning. `client.getSession()` and `client.hasModule('chat')` expose both, and\n `useModule('run')` does the same inside components.\n- **The static key** from the platform's `UI_PACKAGE_ACTIVATION_KEY` works for origins\n listed in `UI_PACKAGE_ALLOWED_ORIGINS`. No session is involved: those origins are\n trusted by configuration. Meant for the platform's own sites and local development.\n\n## Platform configuration\n\n| Variable | Purpose |\n|---|---|\n| `UI_PACKAGE_ACTIVATION_KEY` | The static activation token (optional when tenant keys are used). |\n| `UI_PACKAGE_ALLOWED_ORIGINS` | Comma-separated origins trusted without a tenant key (CORS, cookies, frame-ancestors). `*` for local development. |\n| `INTERNAL_API_SECRET` | Signs tenant sessions (already required by the platform). |\n\n## Components\n\n- `ChatWidget` — `identifier`, `mode` (`bubble` | `inline` | `full`), `position`, `launcherLabel`, `theme` (`dark` | `light` | `auto`). Streams replies, renders them as Markdown (headings, emphasis, code, links, lists, quotes, tables; never raw HTML), renders structured replies (text, buttons, table, cards, pie, image), lets visitors attach up to five files of 10 MB, and handles password and e-mail protected chats. E-mail protection follows the platform's two-step flow: the address receives a six-digit code, which the widget verifies.\n- `Markdown` — the same renderer on its own: ``.\n- Voice — when the platform reports speech for the chat (`voice: { stt, tts }` in the chat configuration) and the browser can record, the composer gains a dictation button (the transcript lands in the draft) and a hands-free conversation: the widget listens, sends what it heard, reads the reply aloud and listens again; a tap interrupts. Recording uses the browser's recorder and transcription runs on the platform's own model, so it works in every browser and no audio leaves the platform. Turn it off with `voice={false}`.\n- `useVoice({ identifier, onTranscript })` — the recorder and player on their own: `state`, `level`, `startListening`, `stopListening`, `speak(text)`, `stopSpeaking`.\n- `AgentRunner` — `workflowId`, `apiKey` (an `execute`-scoped key for that agent only; it is visible to the page), `fields` (form spec) and `onResult`. Posts the form as the agent's input, streams text and steps, shows the final output. `useAgentRun(workflowId, apiKey)` for a custom UI.\n- `useChat(identifier)` — the same state for a custom UI: `messages`, `send`, `stop`, `busy`, `authNeed`, `authenticate`.\n- `ApprovalPanel` — `workflowId`, `executionId` (from the resume link a \"Human in the Loop\" block sends), optional `contextId`, `onResumed`. Shows what the agent proposes, renders the approver's form the block author configured (string, number, boolean, JSON, select), validates it and resumes the run; queued resumes are reported as such. `useApproval(workflowId, executionId)` for a custom UI; the `approval` module must be enabled on the key.\n- Observability (data-driven): `StatTiles`, `SuccessHeatmap` (per-agent success by day or hour, threshold-coloured), `RunTimeline` (steps on the run scale with tokens and cost), `CostBars` (cost by scenario, unit or channel).\n- Core: `Button`, `Tag`, `Chip`, `Panel`, `Eyebrow`, `Stat`, `Field`, `Input`, `Textarea`, `Spinner`.\n- Brand: `AginiesMark` and `AginiesLoader`, see below.\n- `useChat(identifier)` — the widget's state for a custom UI: `messages`, `send(text, files)`, `stop`, `authenticate({ password })`, `requestCode(email)`, `verifyCode(email, code)`.\n- `AginiesClient` — the underlying client (`activate`, `getChat`, `sendMessage` as an async generator, `getSession`, `hasModule`, `fetchRaw` with the session attached).\n\n## Brand\n\n`AginiesMark` is the Aginies mark as inline SVG (`size` in px, default 24; `title` for the\naccessible name, default \"Aginies\"; `decorative` hides it from assistive technology). It is\nthe one place in the kit where the brand gradients appear; the mark is identical on dark and\nlight ground and has no monochrome version. The site uses it between 22 and 44 px.\n\n`AginiesLoader` is the brand loading state: the mark animated with CSS keyframes only, no\ntimers. `tier` picks the size and placement: `page` (96 px, a full-viewport overlay with the\nwordmark and the `label` under it), `region` (40 px, centred in its container, default) or\n`inline` (16 px, in a line of text). `variant` picks the motion: `orbit` (default; the ring\nturns once per `--motion-loader-spin`, the diamond counter-turns in eased quarter pulses,\nthe crescent breathes), `pulse` (the mark stands still, a `--signal-soft` halo beats behind\nit once per `--motion-loader-pulse`) or `draw` (the ring draws itself in half a spin, then\nthe diamond, then both fade). Page and region tiers are a polite live region (`role=\"status\"`,\n`aria-busy`) named by `label` (default: the translated \"Loading\"); the inline tier is hidden\nfrom assistive technology unless it has a label. Under `prefers-reduced-motion: reduce`, or\nbelow an `.agi-motion-reduce` ancestor, the mark stands still with a slow two-step fade (and\nnot even that inline). On screens up to 640 px the page tier drops to 72 px and every\nduration shortens by a quarter. `demo/loader-variants.html` shows the three variants side by\nside without a build step.\n\n```tsx\n}>\n …\n\n```\n\n## Theming\n\nStyles come from `@aginies/tokens`: dark by default, `.light` / `[data-theme=\"light\"]` on an\nancestor (or the widget's `theme` prop) for the light palette. Override `--signal`,\n`--bg`, `--panel` and friends on a wrapper to whitelabel.\n\nA tenant's overrides can also travel with the activation: when the activation payload\ncarries `theme` (a map of custom properties, `{ \"--signal\": \"#0077C2\", \"--radius-md\": \"8px\" }`),\n`AginiesProvider` wraps its children in `
` (`display: contents`, so it\ntakes no space of its own) and sets the accepted entries on it. Accepted are keys that start\nwith `--` and values that are plain colours (hex, `rgb()` / `hsl()` / `oklch()` / `oklab()`\nwith numeric arguments, colour keywords) or lengths (`px`, `rem`, `em`, `%`, `vw`, `vh`,\nunitless numbers). `var()`, `url()`, `calc()`, font stacks and anything else are dropped.\n`themeVariables(theme)` is the filter, exported for tooling.\n\n## Localisation\n\nWidgets ship Turkish and English strings; `locale` on `init()` or `AginiesProvider` picks\none. Replace individual strings with `translations`, by section and key:\n\n```tsx\n\n```\n\n`translator(locale, overrides?)` builds the same function outside React; `useAginies().t`\nis the one the provider made, overrides included.\n","readmeFilename":"README.md"}