[Saifjafri212213]

Summary

Adds the @chatcops/react package with a <ChatCops> component and useChatCops() hook for React and Next.js applications (F-12 tasks 2 to 4).

Closes #573

What was done

• New package @chatcops/react:
  • Follows CONTRIBUTING.md:244 ("private": true, "type": "module", package exports, build, typecheck, and test scripts).
  • Configures @chatcops/widget (workspace:^) and react (>=18) as peer dependencies.
• <ChatCops {...props} />:
  • Renders null, safe for Server-Side Rendering (SSR).
  • Dynamically loads @chatcops/widget on mount inside useEffect without touching window during SSR.
  • Subscribes to widget events (open, close, message, error, leadCaptured, preChatSubmit) using ChatCops.on(), keeping callbacks in a ref to avoid resubscribing on re-render.
  • Automatically handles StrictMode unmount/remount cycles leaving exactly one widget instance and one set of listeners.
  • Routes prop updates accepted by ChatCops.update() (branding, welcomeMessage, suggestions, placeholder, strings, theme, privacyUrl, disclosure) through update().
  • Re-initializes cleanly on structural prop changes (apiUrl, mode, container, or theme.position).
• useChatCops() hook:
  • Returns { open, close, toggle, send, update } controlling the widget instance.
  • Before the widget bundle loads on the client, all calls safely no-op (send() returns a resolved promise).
• Size Budget:
  • Configured in .size-limit.json with a 1 kB gzipped budget.
  • Package builds at 999 B gzipped.
• Documentation:
  • Added website/src/content/docs/widget/react.mdx documenting setup, props, updates, and useChatCops().
  • Registered under Widget in website/astro.config.mjs.
  • Passes pnpm docs:check.

How I tested this

• Unit tests: Ran Vitest unit tests in packages/react/tests/react.test.tsx (13 tests) using React Testing Library and react-dom/server covering mount, StrictMode, unmount cleanup, update diffing, reinit diffing, ref callback persistence, handle controls, and SSR renderToString.
• Coverage: Ran pnpm test:coverage verifying 100% statements, 93.75% branches, and 100% lines on @chatcops/react (exceeding the 85/80 threshold).
• Checks and linters: Ran and verified:
  • pnpm lint (0 errors)
  • pnpm publint (All good)
  • pnpm api:check (Snapshots up to date)
  • pnpm size (999 B gzipped vs 1 kB limit)
  • pnpm docs:check (All 204 doc samples validated)
  • pnpm -r build (Full workspace built clean)

AI assistance

AI-assisted with code implementation, test authoring, and documentation generation.