# 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

```tsx
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

```tsx
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)

```ts
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.