SDK reference — `@lynkd/messaging-inbox-sdk`

Headless React building blocks for messaging, inbox and support. Wrap your tree in the provider, then use the hooks. Bring your own UI, or reuse the demo components in apps/web/components.

Install & provider

import { MessagingInboxProvider } from "@lynkd/messaging-inbox-sdk";

<MessagingInboxProvider
  bffBaseUrl=""                       // "" = same-origin /api/bff
  brandName="LynkedUp Pro"
  theme={{ mode: "dark", accent: "#FDA913", radiusCard: "20px" }}
  flags={{ huddles: true, support: true }}
>
  <App />
</MessagingInboxProvider>

Prefer resolving config on the server and passing a single config prop (as the demo does via getServerConfig()), so env-driven flags/theme reach the client as plain JSON.

Context hooks

Hook	Returns
`useSdk()`	`{ config, flags, client, me, users, channels, userById, channelById, scheme, setScheme, toggleScheme, theme, setThemeOverrides, resetTheme, loading, refresh }`
`useFeature(name)`	`boolean` for one flag
`useFeatureFlags()`	the whole `FeatureFlags` object
`useTheme()`	`{ scheme, setScheme, toggleScheme, theme, setThemeOverrides, resetTheme }`

Data hooks

Hook	Purpose
`useChannels()`	`{ all, starred, channels, dms, totalUnread, totalMentions, me }`
`useChannel(id)`	one `Channel`
`useMessages(channelId)`	`{ messages, pinned, send, react, pin, save, reload, loading }`
`useThread(channelId, parentId)`	`{ parent, replies, reply, reload }`
`useTyping(channelId)`	`ID[]` currently typing (mock)
`useInbox(state?)`	`{ items, state, setState, markDone, snooze, archive, reload }`
`useTickets(scope?)`	`{ tickets, patch, reload }`
`useTicket(id)`	`{ ticket, reply, setState, reload }`
`useAvailability()`	`AgentAvailability[]`
`useSearch()`	`{ query, setQuery, results, loading }` (debounced)
`useNotifications()`	`{ notifications, unread }`

Minimal chat example

import { useChannels, useMessages } from "@lynkd/messaging-inbox-sdk";

function Chat() {
  const { channels } = useChannels();
  const active = channels[0]?.id ?? null;
  const { messages, send } = useMessages(active);

  return (
    <>
      <ul>{messages.map((m) => <li key={m.id}>{m.body}</li>)}</ul>
      <form onSubmit={(e) => { e.preventDefault();
        const f = e.currentTarget.elements.namedItem("t") as HTMLInputElement;
        send(f.value); f.value = ""; }}>
        <input name="t" placeholder="Message…" />
      </form>
    </>
  );
}

Direct client (no React)

import { BffClient } from "@lynkd/messaging-inbox-sdk";
const client = new BffClient("");           // base URL
const { channels } = await client.listChannels();
await client.sendMessage(channels[0].id, "Hi");

Types

Import any domain type: User, Channel, Message, RichBlock, Attachment, Reaction, InboxItem, Ticket, CallbackRequest, AgentAvailability, Notification, SearchResult, Bootstrap, PresenceState, ChannelKind, InboxKind, InboxState, TicketState, TicketPriority — plus config types FeatureFlags, ThemeConfig, ThemeTokens, SdkConfig.

Publishing the SDK

The package is workspace-consumed as TS source. To publish standalone, add a build step (e.g. tsup src/index.ts --dts --format esm,cjs) and point main/module/types at dist/. The public surface is the index.ts barrel.

3.4 KiB Raw Blame History

SDK reference — @lynkd/messaging-inbox-sdk