{"_id":"@athon-labs/help-widget-react","name":"@athon-labs/help-widget-react","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@athon-labs/help-widget-react","version":"0.0.1","private":false,"type":"module","description":"React help widget that reports issues to your backend for Athon ingest.","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"publishConfig":{"access":"public"},"dependencies":{"@athon-labs/help-widget-core":"^0.0.1"},"peerDependencies":{"react":">=18"},"devDependencies":{"@types/react":"^19.1.8","react":"^19.1.0","tsup":"^8.5.0","typescript":"^5.8.3"},"scripts":{"build":"tsup","typecheck":"tsc --noEmit"},"_id":"@athon-labs/help-widget-react@0.0.1","_integrity":"sha512-q9j/Fdgy7ZJSnsoQyqcuiBJIcpWwRPGH8flMgQqDUNr/O/fMkai4zuHFXigmQQaBM1DkbhI6Py5nB8YeVTdDjQ==","_resolved":"/private/var/folders/29/mc0szw4x6370qzrffd0xbg_w0000gn/T/f7c02639c6c8b3a291583fbc83654eec/athon-labs-help-widget-react-0.0.1.tgz","_from":"file:athon-labs-help-widget-react-0.0.1.tgz","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-q9j/Fdgy7ZJSnsoQyqcuiBJIcpWwRPGH8flMgQqDUNr/O/fMkai4zuHFXigmQQaBM1DkbhI6Py5nB8YeVTdDjQ==","shasum":"002e5a276203098022df385bbf32cc22930afc70","tarball":"https://registry.npmjs.org/@athon-labs/help-widget-react/-/help-widget-react-0.0.1.tgz","fileCount":5,"unpackedSize":35359,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDCa87A/U0guAuHm0bIKoMA7Ee6gccCOi1YiDA8qYCsSAiEAvxkQWUtjNMNRINmuSZ1E+teXz5qyjO55zxU44cCE4mE="}]},"_npmUser":{"name":"thethind","email":"harminder@thind.dev"},"directories":{},"maintainers":[{"name":"thethind","email":"harminder@thind.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/help-widget-react_0.0.1_1787332126078_0.6678482071113827"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-21T17:08:45.817Z","0.0.1":"2026-08-21T17:08:46.241Z","modified":"2026-08-21T17:08:46.552Z"},"maintainers":[{"name":"thethind","email":"harminder@thind.dev"}],"description":"React help widget that reports issues to your backend for Athon ingest.","readme":"# @athon-labs/help-widget-react\n\nReact help widget. Pass the logged-in user and a URL on **your** backend. The widget POSTs title, message, reporter fields, and screenshots there. Keep the Athon `sk_live_*` key on the server.\n\n## Install\n\n```bash\nnpm install @athon-labs/help-widget-react\n```\n\n## Usage\n\n```tsx\nimport { HelpWidget } from '@athon-labs/help-widget-react';\n\nexport function AppChrome({ user }: { user: { id: string; email: string; name: string } }) {\n  return (\n    <HelpWidget\n      endpoint=\"/api/support/report\"\n      user={{ id: user.id, email: user.email, name: user.name }}\n      color=\"#3d8f78\"\n      launcher=\"help\"\n      position=\"bottom-right\"\n      metadata={{ userType: user.role, phone: user.phone, profilePicture: user.avatarUrl }}\n    />\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Notes |\n| --- | --- | --- |\n| `endpoint` | `string` | Your backend URL. Required. |\n| `user` | `{ id, email, name }` | Currently logged-in user. Required. |\n| `headers` | `Record<string, string>` | Extra request headers. |\n| `credentials` | `RequestCredentials` | Defaults to `include` so session cookies are sent. |\n| `defaultTitle` | `string` | Prefills the title field. |\n| `color` | `string` | Brand color for the launcher, header, and send button. Defaults to Athon verdigris. |\n| `launcher` | `'help' \\\\| 'bug'` | `help` shows the word Help. `bug` shows a bug icon. |\n| `position` | `'bottom-right' \\\\| 'bottom-left' \\\\| 'top-right' \\\\| 'top-left'` | Corner. Defaults to `bottom-right`. |\n| `metadata` | `Record<string, string \\\\| number \\\\| boolean \\\\| null>` | Extra key-values stored on the issue (user type, phone, avatar, …). |\n| `onSuccess` | `(result: unknown) => void` | Called with the JSON body from your endpoint. |\n| `onError` | `(error: Error) => void` | Called when capture or submit fails. |\n| `className` | `string` | Added to the launcher root. |\n\n## Screenshots\n\nUsers can capture the entire screen, the current window/tab, or attach photos. The browser will prompt for screen-share permission. Dismissing the picker is ignored. Images must be PNG, JPEG, WebP, or GIF (max 5).\n\n## Backend proxy\n\nThe widget does not talk to Athon directly. Your server receives the multipart POST, adds `appId` (or `projectId`) and `Authorization: Bearer sk_live_…`, then forwards to Athon ingest.\n\n```bash\nATHON_LIVE_KEY=sk_live_…\nATHON_APP_ID=app_…\nATHON_INGEST_URL=https://YOUR_ATHON_HOST/api/v1/ingest/issues\n```\n\n### Next.js\n\n`app/api/support/report/route.ts`:\n\n```ts\nexport async function POST(request: Request) {\n  const form = await request.formData();\n  form.set('appId', process.env.ATHON_APP_ID ?? '');\n\n  const upstream = await fetch(process.env.ATHON_INGEST_URL ?? '', {\n    method: 'POST',\n    headers: { Authorization: `Bearer ${process.env.ATHON_LIVE_KEY}` },\n    body: form,\n  });\n\n  return new Response(await upstream.text(), {\n    status: upstream.status,\n    headers: { 'content-type': upstream.headers.get('content-type') ?? 'application/json' },\n  });\n}\n```\n\nPoint `<HelpWidget endpoint=\"/api/support/report\" />` at that route.\n\n### Node.js\n\nNode 18+. Do not run a JSON body parser on this route.\n\n```js\nimport { createServer } from 'node:http';\n\nconst server = createServer(async (req, res) => {\n  if (req.method !== 'POST' || req.url !== '/api/support/report') {\n    res.writeHead(404);\n    res.end('Not found');\n    return;\n  }\n\n  const incoming = new Request('http://local/api/support/report', {\n    method: 'POST',\n    headers: req.headers,\n    body: req,\n    duplex: 'half',\n  });\n\n  const form = await incoming.formData();\n  form.set('appId', process.env.ATHON_APP_ID ?? '');\n\n  const upstream = await fetch(process.env.ATHON_INGEST_URL ?? '', {\n    method: 'POST',\n    headers: { Authorization: `Bearer ${process.env.ATHON_LIVE_KEY}` },\n    body: form,\n  });\n\n  res.writeHead(upstream.status, {\n    'content-type': upstream.headers.get('content-type') ?? 'application/json',\n  });\n  res.end(await upstream.text());\n});\n\nserver.listen(3000);\n```\n\n### SvelteKit\n\n`src/routes/api/support/report/+server.ts`:\n\n```ts\nimport { env } from '$env/dynamic/private';\nimport type { RequestHandler } from './$types';\n\nexport const POST: RequestHandler = async ({ request }) => {\n  const form = await request.formData();\n  form.set('appId', env.ATHON_APP_ID);\n\n  const upstream = await fetch(env.ATHON_INGEST_URL, {\n    method: 'POST',\n    headers: { Authorization: `Bearer ${env.ATHON_LIVE_KEY}` },\n    body: form,\n  });\n\n  return new Response(await upstream.text(), {\n    status: upstream.status,\n    headers: { 'content-type': upstream.headers.get('content-type') ?? 'application/json' },\n  });\n};\n```\n\nExpress, Next.js Pages Router, and Hono examples are in [`@athon-labs/help-widget-core` proxy docs](../help-widget-core/docs/proxy.md).\n","readmeFilename":"README.md","_rev":"1-2fdffd27c08d6e0b06c2f3d8257be8f9"}