94 lines
3.4 KiB
Markdown
94 lines
3.4 KiB
Markdown
# 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.
|