@tapo44ek/messenger-widget

Embeddable chat window for messenger_module's backend (affair_id-based REST + WebSocket messaging). Ships as a React component with all styling pre-bundled — no Tailwind setup required in the host app.

Install

npm install @tapo44ek/messenger-widget

Usage

import { ChatWindow } from '@tapo44ek/messenger-widget';
import '@tapo44ek/messenger-widget/style.css';

function TaskChat() {
  return (
    <ChatWindow
      affairId={123}
      apiUrl="https://api.example.com"
      token={currentUserJwt}
      permissions={{ canDeleteAny: false }}
      className="h-[600px] w-[400px]"
      showHeader
      title="Чат по заявке #123"
      onClose={() => setOpen(false)}
    />
  );
}

Props

| Prop | Type | Required | Default | | ------------------------ | -------------------- | -------- | ------------------------------------------------------------ | | affairId | number | yes | — | | unom | number | no | — | | apiUrl | string | yes | — | | socketUrl | string | no | apiUrl | | socketPath | string | no | Socket.IO default (/socket.io) | | token | string | yes | — | | permissions | ChatPermissions | no | { canEditOwn: true, canDeleteOwn: true, canDeleteAny: false } | | editWindowMinutes | number | no | 120 | | className | string | no | — | | showHeader | boolean | no | false | | title | string | no | — | | onClose | () => void | no | — | | backgroundImageLight | string \| null | no | built-in topographic artwork; null disables the image | | backgroundImageDark | string \| null | no | built-in topographic artwork; null disables the image | | backgroundColorLight | string (hex) | no | #f9fafb | | backgroundColorDark | string (hex) | no | #241f21 | | maskColorLight | 'black' \| 'white' | no | 'black' | | maskOpacityLight | number (0–1) | no | 0 (no mask) | | maskColorDark | 'black' \| 'white' | no | 'black' | | maskOpacityDark | number (0–1) | no | 0 (no mask) | | accentColorLight | string (hex) | no | #2563eb | | accentColorDark | string (hex) | no | #ea580c | | quoteAccentOpacityLight | number (0–1) | no | 0.08 | | quoteAccentOpacityDark | number (0–1) | no | 0.3 | | lineAccentOpacityLight | number (0–1) | no | 0.55 | | lineAccentOpacityDark | number (0–1) | no | 0.65 |

editWindowMinutes controls how long after creation an author can still edit/delete their own message via the context menu; it's UI-only — the backend always enforces a fixed 2-hour window no matter what this prop is set to, so values above 120 will show the menu item past 2 hours but the backend will still reject the request.

The component does not read cookies or localStorage — the host app owns the JWT and passes it explicitly via token.

Theme follows the host page: wrap <ChatWindow /> (or any ancestor) in a dark class to switch to dark mode. There is no in-widget theme toggle.

backgroundImageLight/backgroundImageDark set a custom cover-fit background image for the message-list area, per theme; omit to keep the built-in artwork, or pass null to show a flat backgroundColorLight/backgroundColorDark with no image at all. maskColorLight/maskColorDark + maskOpacityLight/maskOpacityDark overlay a black or white layer under the messages, over the background, for dimming/lightening it (opacity 0 = no mask). accentColorLight/accentColorDark recolor the send button, the sender's own message bubble, the unread-count badge, the file-upload progress bar, the reply-quote accent bar, the message-input border/focus ring, and (mixed with white/black via quoteAccentOpacityLight/quoteAccentOpacityDark) the quote-plate backgrounds. lineAccentOpacityLight/lineAccentOpacityDark recolor the line layers of the built-in default message-background artwork (mixed into white/black the same way as the quote-plate opacity props, preserving its 3-layer depth via fixed relative opacity tiers); they have no effect when a custom backgroundImageLight/backgroundImageDark is passed for that theme — there's no line art to recolor in a custom image.

quoteAccentOpacityLight/quoteAccentOpacityDark set how much accent color is mixed into white (light theme) / black (dark theme) for the reply-banner, edit-banner, and in-bubble quote plate backgrounds (own-message quotes are unaffected). The message-input border and focus ring also follow accentColorLight/accentColorDark now.

Breaking visual change: own-message bubbles in light mode now use accentColorLight (#2563eb) as their background instead of the previous dark gray (#111827). Pass accentColorLight="#111827" to restore the old look.

Quote-plate backgrounds (reply banner, edit banner, in-bubble quotes on non-own messages) and the message-input border/focus ring now derive from the accent color instead of the previous hardcoded blue-50/orange-950/gray-300/blue-500. The default quoteAccentOpacityLight/quoteAccentOpacityDark (0.08/0.3) already reproduce the previous blue-50/orange-950 look at the default accent colors; pass quoteAccentOpacityLight={0} / quoteAccentOpacityDark={0} instead if you want a flat white/black quote plate (not the old look), or override accentColorLight/accentColorDark to retint.

The built-in default background artwork is now rendered as an inline SVG instead of a CSS background image, so its own opaque background rectangle is hidden and backgroundColorLight/backgroundColorDark now actually shows through underneath it — previously that rectangle covered those colors completely whenever the default artwork was in use, so they were effectively ignored in that case. Out-of-the-box appearance is unchanged (the defaults match the artwork's original rectangle color), but if you were already passing a custom backgroundColorLight/backgroundColorDark together with the default artwork, it will now be visible where it previously wasn't.

Local development

npm install
npm run dev

Opens a demo page (src/dev/) with a form for apiUrl/token/affairId/permissions, a dark-mode toggle, and controls for all the theming props (background images/colors, masks, accent colors), mounting the real component against a live messenger_module/backend instance.

Build

npm run build

Produces dist/messenger-widget.js (ESM), dist/messenger-widget.cjs (CJS), dist/index.d.ts, and dist/style.css.