Framework guide

Comments for React

Install @bootstrapware/comments, import the stylesheet, and render <Comments /> with user and scope. Bootstrapware does not authenticate end users.

Install

pnpm add @bootstrapware/comments

Import @bootstrapware/comments/styles.css once near the feature. The component uses hooks, so it belongs in a client boundary.

Local

import { Comments, createLocalAdapter } from "@bootstrapware/comments";
import "@bootstrapware/comments/styles.css";

<Comments
  user={{ id: session.user.id, name: session.user.name, avatarUrl: session.user.image }}
  scope={{ tenantKey: workspace.id, resourceType: "task", resourceId: task.id }}
  adapter={createLocalAdapter({ storageKey: "demo-comments" })}
  searchMentionCandidates={async ({ query }) =>
    members.filter((member) => member.name.toLowerCase().includes(query.toLowerCase())).slice(0, 20)
  }
  resolveUsers={async ({ ids }) => members.filter((member) => ids.includes(member.id))}
/>

members is your own list for this resource. Cap it at 20. Local storage is not a production access check.

Optional layout is "threads" (default), "section", or "forum". Threads keeps flat replies. Section is the comment stream under one record. Forum is topics on that record. Nested replies stop at depth 5. Chat remains a different product.

Hosted

<Comments
  appId="cma_demo"
  publishableKey={process.env.NEXT_PUBLIC_BSW_COMMENTS_PUBLISHABLE_KEY}
  user={{ id: session.user.id, name: session.user.name }}
  scope={{ tenantKey: "acme", resourceType: "task", resourceId: "task_1842" }}
  authorToken={authorTokenFromYourServer}
  renewAuthorToken={renewFromYourServer}
  searchMentionCandidates={searchPeople}
  resolveUsers={resolvePeople}
/>

Replace cma_demo with the cma_ id from get_comment_install_snippet. The publishable env value comes from ensure_comment_test_publishable. authorTokenFromYourServer is the string your server route returned. Optional apiBaseUrl defaults to https://comments.bootstrapware.co.

BYO

Pass createByoAdapter(customerAdapter) as adapter. Discussion text stays on your API. Keep the mention callbacks on the host. Contract: adapter.

Pitfalls

Passing viewerId as a widget prop. The prop is user.
Treating user.id or the permissions prop as authorization.
Minting authorToken in the browser.
Forgetting the stylesheet.
Putting bsw_live_sec_ or bsw_test_sec_ in client code.