{"_id":"@agentxin-ai/chatkit-angular","name":"@agentxin-ai/chatkit-angular","dist-tags":{"latest":"0.4.1"},"versions":{"0.4.1":{"name":"@agentxin-ai/chatkit-angular","version":"0.4.1","description":"Angular bindings for AgentXin Chatkit","type":"module","sideEffects":false,"main":"./dist/fesm2022/agentxin-ai-chatkit-angular.mjs","types":"./dist/types/agentxin-ai-chatkit-angular.d.ts","dependencies":{"tslib":"^2.8.1","@agentxin-ai/chatkit-types":"~0.5.0","@agentxin-ai/chatkit-web-component":"~0.5.0"},"peerDependencies":{"@angular/core":">=17 <22"},"devDependencies":{"@angular/compiler":"21.1.4","@angular/compiler-cli":"21.1.4","@angular/core":"21.1.4","ng-packagr":"21.1.0","rxjs":"^7.8.2","typescript":"^5.8.3"},"keywords":["chatkit","angular","agentxin"],"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/agentxin-ai/chatkit-js.git"},"scripts":{"prebuild":"pnpm --filter @agentxin-ai/chatkit-web-component... build","build":"ng-packagr -p ng-package.json","predev":"pnpm --filter @agentxin-ai/chatkit-web-component... build","dev":"ng-packagr -p ng-package.json -w","pretype-check":"pnpm --filter @agentxin-ai/chatkit-web-component... build","type-check":"tsc -p tsconfig.lib.json --noEmit"},"_id":"@agentxin-ai/chatkit-angular@0.4.1","bugs":{"url":"https://github.com/agentxin-ai/chatkit-js/issues"},"homepage":"https://github.com/agentxin-ai/chatkit-js#readme","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-+y2gQdxO9jgQpIxvuLZRDIOtvO71/1wHPbTK1BqgRGxMs5KXWgzdVCqpA0/NLoWuLx2doaRVnkKv4prmG6Q5Xw==","shasum":"1686aa1702ee236266b9e22c0ae776347376dcb8","tarball":"https://registry.npmjs.org/@agentxin-ai/chatkit-angular/-/chatkit-angular-0.4.1.tgz","fileCount":7,"unpackedSize":50073,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDTJifW7asMjmiolQHXsoGADowTnHbJKHUw/w2VpMYjOQIgIEmCSg6ssMJ0MCj3N4HAhKLhMvksondxWMgD+WUJw1g="}]},"_npmUser":{"name":"agentxin-ai","email":"1304040880@qq.com"},"directories":{},"maintainers":[{"name":"agentxin-ai","email":"1304040880@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chatkit-angular_0.4.1_1787809031922_0.2966065466681782"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-27T05:37:11.795Z","0.4.1":"2026-08-27T05:37:12.069Z","modified":"2026-08-27T05:37:12.895Z"},"maintainers":[{"name":"agentxin-ai","email":"1304040880@qq.com"}],"description":"Angular bindings for AgentXin Chatkit","homepage":"https://github.com/agentxin-ai/chatkit-js#readme","keywords":["chatkit","angular","agentxin"],"repository":{"type":"git","url":"git+https://github.com/agentxin-ai/chatkit-js.git"},"bugs":{"url":"https://github.com/agentxin-ai/chatkit-js/issues"},"readme":"# @agentxin-ai/chatkit-angular\n\nAngular 17+ standalone bindings for AgentXin Chatkit.\n\n## Local Demo\n\nFrom the repository root:\n\n```bash\npnpm dev:ui\npnpm managed-chatkit-angular:dev\n```\n\nThen open `http://localhost:5175`.\n\n## Install\n\n```bash\npnpm add @agentxin-ai/chatkit-angular @angular/core\n```\n\n## Usage\n\n```ts\nimport { Component } from '@angular/core';\nimport { ChatKitElement, createChatKit } from '@agentxin-ai/chatkit-angular';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [ChatKitElement],\n  template: `\n    <agentxinai-chatkit\n      [control]=\"chatkit\"\n      style=\"display: block; height: 100vh;\"\n    ></agentxinai-chatkit>\n  `,\n})\nexport class AppComponent {\n  readonly chatkit = createChatKit({\n    frameUrl: '<url-to-chatkit-frame>',\n    api: {\n      apiUrl: 'https://api.agentxinai.cn',\n      agentxinId: 'your-assistant-id',\n      getClientSecret: async () => {\n        const response = await fetch('/api/create-session', {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n        });\n        const data = await response.json();\n        return {\n          secret: data.client_secret,\n          organizationId: data.organization_id,\n        };\n      },\n    },\n    pet: true,\n    onReady: () => {\n      console.log('ChatKit is ready');\n    },\n  });\n}\n```\n\n`getClientSecret` may return the legacy `string`, or return\n`{ secret, organizationId }` to forward `organization-id` on hosted API calls.\n\n### Pet\n\nPet is disabled by default. Users can enable or disable it from the built-in\nSettings panel or with `/pet`, `/pet on`, `/pet off`, and `/pet settings`;\nv1 stores those preferences in browser `localStorage`.\n\n`pet: true` enables the default file-backed animated pet from configuration. The\nweb component renders the pet over the host page viewport, so dragging is not\nlimited by the ChatKit iframe bounds while the chat panel itself stays in place.\nThe same `pet` option is part of the shared ChatKit options contract, so the\nconfiguration shape also works for React and future Vue bindings.\n\n```ts\nreadonly chatkit = createChatKit({\n  // ...api/frame options\n  pet: {\n    character: { type: 'sprite-atlas', src: '/pets/boba/spritesheet.webp' },\n    position: {\n      pin: 'bottom-right',\n      draggable: true,\n      persist: true,\n      scale: 0.25,\n    },\n  },\n});\n```\n\nUse `displayMode: 'pet'` to render only the pet launcher at first. Clicking the\npet opens the ChatKit iframe panel; the iframe is not placed in the host layout.\nIn this launcher mode, the pet cannot be hidden because it is the chat entry\npoint.\n\n```ts\nreadonly chatkit = createChatKit({\n  // ...api/frame options\n  displayMode: 'pet',\n  pet: true,\n});\n```\n\nThe settings UI exposes the file-backed pets bundled in\n`chatkit-ui/public/pets` as built-in choices. You can also point directly at a\nspritesheet-compatible image. Relative `src` values are resolved against the\nChatKit frame URL, not the host page URL, because the pet overlay renders in\nthe host document.\n\n```ts\npet: {\n  character: {\n    type: 'sprite-atlas',\n    src: 'https://example.com/pets/boba/spritesheet.webp',\n  },\n}\n```\n\nIf you prefer a wrapper component, `ChatKit` is also exported and renders the\nsame web component for you:\n\n```ts\nimport { ChatKit } from '@agentxin-ai/chatkit-angular';\n```\n\n## API\n\n### `createChatKit(options)`\n\nCreates a `ChatKitControl` instance that stores ChatKit options and exposes the\nweb component methods:\n\n- `setOptions(next)`\n- `focusComposer()`\n- `setThreadId(threadId)`\n- `sendUserMessage(params)`\n- `setComposerValue(params)`\n- `fetchUpdates()`\n- `sendCustomAction(action, itemId?)`\n\n### `<agentxin-chatkit />`\n\nStandalone Angular component that mounts the underlying `agentxinai-chatkit` web\ncomponent for you. No `CUSTOM_ELEMENTS_SCHEMA` setup is required.\n\n### `<agentxinai-chatkit />`\n\nImport `ChatKitElement` to use the real custom element directly in Angular\ntemplates with the same attribute surface as the React and Vue bindings.\n\n### Shared option: `pet`\n\n- `false` / omitted: disabled\n- `true`: default file-backed Boba pet\n- `{ character: { type: 'sprite-atlas', src, atlas? } }`\n","readmeFilename":"README.md","_rev":"1-a5923f0a3698ba1a9d029fcd97c30bba"}