@cwellt_software/shared-communication-hub
v0.4.0
Published
React components, hooks, and API clients for the SharedCommunicationHub multi-channel communication backend: messenger, templates, channel admin, permission matrix, audit log, and real-time updates.
Readme
@cwellt_software/shared-communication-hub
React components, hooks, and API clients for the SharedCommunicationHub multi-channel communication backend: conversation threads, a messenger, message templates with token replacement, channel administration, a permission matrix, and an audit log — over Email (Microsoft Graph), WhatsApp/SMS/Facebook/Instagram (Twilio), in-app push, and other channels.
The library is domain-agnostic: it defines the shape of communications (threads, messages, channels, templates, real-time events) and delegates every business-specific concept — recipient categories, template tokens, filter axes, recipient resolution — to the host application through props and callbacks (see Host-supplied vocabulary).
Components
| Component | Purpose |
|---|---|
| CommMessenger | Thread list + chat view with live updates (the inbox) |
| CommThreadList / CommChatView | The messenger's halves, usable standalone |
| CommSendDialog | Template-driven multi-recipient send dialog |
| CommEntityMessages | All communications linked to one business entity (e.g. a details-page tab) |
| CommChannelConfigTable | Channel administration (add/edit/test/deactivate) |
| CommTemplateEditor | Message-template administration |
| CommPermissionMatrix | Function-category × channel access matrix |
| CommAuditLog | Server-side paged audit log with CSV export |
Plus the CommHubApi client interface (HttpCommHubApi, seedable
InMemoryCommHubApi for tests/demos), typed hooks for every endpoint, and an
optional SignalR real-time client.
Installation
npm install @cwellt_software/shared-communication-hubreact / react-dom >= 18 are peer dependencies. Import both stylesheets
once (the cwellt library CSS provides the --cw-* design tokens and icon
font; this package's CSS covers its own components):
import '@cwellt_software/cwellt-reactjs-lib/dist/index.css';
import '@cwellt_software/shared-communication-hub/dist/shared-communication-hub.css';Quick start
import {
CommHubProvider,
HttpCommHubApi,
CommMessenger,
} from '@cwellt_software/shared-communication-hub';
// Point at the backend's route prefix — the ASP.NET Core host (or a proxy
// in front of it) serving the SharedCommunicationHub.Infra controllers.
const api = new HttpCommHubApi('/api/commhub', {
// Only needed when the browser talks to the service directly; a
// server-side proxy usually injects the identity header itself.
headers: () => ({'X-CommHub-User': currentUserName}),
});
export function CommunicationsPage() {
return (
<CommHubProvider api={api}>
<CommMessenger />
</CommHubProvider>
);
}The backend is the SharedCommunicationHub.Domain / .Infra NuGet packages
(same repository): EF Core persistence, ready-made MVC controllers
(AddSharedCommHubControllers("api/commhub")), channel implementations, and
the ports the host implements (ITokenReplacer, ICommHubAccessControl,
ICommHubFunctionCategoryProvider, …).
Real-time (optional)
Pass a realtime client alongside the API to get live thread/message updates in the messenger. Without it, everything still works — components just don't update live.
import {SignalRCommHubRealtime} from '@cwellt_software/shared-communication-hub';
// The host mints short-lived connection tokens ({token, hubUrl, expiresAt});
// the provider is called on connect and on every reconnect.
const realtime = new SignalRCommHubRealtime(
async () => (await fetch('/commhub-realtime/token')).json(),
);
<CommHubProvider api={api} realtime={realtime}>...</CommHubProvider>Host-supplied vocabulary & seams
The library ships no business vocabulary. Hosts provide their own values through props; without them the components render an explanatory empty state saying who owns the list.
| Prop / callback | Where | Host supplies |
|---|---|---|
| recipientTypes | CommTemplateEditor, CommSendDialog | Routing categories for template recipients (e.g. departments, roles, partner types) |
| filterAxes (+ filtersHeading, filtersHint, noFiltersLabel) | CommTemplateEditor | Template filter axes — open {type, label, values} triples over the wire's open filterType string; each value is a plain string or {value, label} when the persisted match key differs from the display text (WinOps: svc-type code "J" vs "Passenger (J)") |
| tokens | CommTemplateEditor | The %Token% list your ITokenReplacer implementation resolves |
| functionCategories | CommPermissionMatrix | The host's user function categories (rows come from the host's own tables) |
| departments | CommChannelConfigTable | Department options for channels |
| resolveRecipients(category, channelId, entities) | CommSendDialog | Resolves a routing category to concrete recipients (name, address, kind) |
| resolveTokenPreview(text, entity) | CommSendDialog | Renders a per-entity preview of a token-bearing draft |
| templateApplies(template) | CommSendDialog | Send-side counterpart of filterAxes: whether a template may be offered for the selected entities (its filters vs their attributes); rejected templates are hidden from the picker |
| retentionDays | CommAuditLog | The host's audit retention setting, if it has one |
Testing your integration
InMemoryCommHubApi is a seedable in-memory implementation of the full
CommHubApi contract that mirrors the backend's validation rules (secret
masking, open-thread reuse, system-managed template locks, per-send audit
rows). Use it in component tests and demos without a server.
Publishing (maintainers)
This package publishes to public npm (registry.npmjs.org) as a scoped
package under the @cwellt_software npm organization. Scoped packages publish
to npm's default registry automatically, so no registry line and no
publishConfig are needed — the only per-machine setup is an auth token in
your user-level ~/.npmrc (Windows: C:\Users\<you>\.npmrc).
- Get an npm access token (
npm_…) from npmjs.com → Access Tokens (needs read/write / publish permission on@cwellt_software), or runnpm loginand let npm write the token line for you. - Put it in
~/.npmrc— a single line, nothing else://registry.npmjs.org/:_authToken=<YOUR_NPM_TOKEN> - Never commit the token.
~/.npmrcsits in your home dir, outside every repo, so git can't see it. Do not add a token-bearing.npmrcto the repo.
Verify before publishing (uploads nothing):
npm whoami # → your npm user (confirms the token works)
npm publish --dry-run # → "Publishing to https://registry.npmjs.org/"Then npm run publish:npm (install → build → pack dry-run → npm publish --access public).
Scoped packages default to a restricted (private) publish; --access public
makes the published package publicly readable, which is the convention across
the @cwellt_software libraries.
License
Proprietary and internal — UNLICENSED, © Cwellt Software. All rights
reserved; no rights are granted for use outside Cwellt Software's own projects.
This package is internal-only for now (distributed via Cwellt's private feed), so it deliberately ships no license file. A definitive license will be set if/when the library is distributed externally; it will apply to the versions published under it, not retroactively to earlier ones.