Files
vercel__chat/apps/docs/lib/adapter-features.ts
Ben Sabic 79227ae991 docs: refresh adapter pages with hand-authored MDX (#474)
## Summary

Refreshes the adapter docs end-to-end so every adapter — official,
vendor-official, and community — now ships hand-authored MDX, lives
under a clean URL structure, and renders on a polished
sidebar/right-rail layout dedicated to `/adapters` (the shared `/docs`
chrome is untouched).

```mermaid
flowchart LR
  subgraph Before
    direction TB
    OB[official] --> CB[community<br/>incl. 5 vendor pages]
  end
  subgraph After
    direction TB
    OA[official] --> VA[vendor-official<br/>5 pages] --> CA[community]
  end
  Before -.-> After
```

### Content & routing

- **New `/adapters/vendor-official/<slug>` route** for vendor-maintained
adapters (Beeper Matrix, Photon iMessage, Liveblocks, Resend, Zernio).
Sidebar gets a third labelled group ("Vendor-Official Adapters") between
Official and Community, with a top divider matching the existing
Community treatment.
- **All 13 vendor-official + community adapters migrated** from runtime
README fetching to hand-authored MDX with rich `features:` matrices and
full body content (install, quick start, configuration, auth,
gateway/streaming, troubleshooting). README fetch stays as a fallback
for any future community adapter that hasn't been migrated yet, gated by
a new `mdxBody: true` frontmatter flag.
- **Messenger filter pages removed** (`/adapters/for/<messenger>` + the
"Browse by messenger" chip row on `/adapters`). Existing URLs
308-redirect to `/adapters`.
- **Permanent redirects** from
`/adapters/community/{matrix,imessage,resend,zernio,liveblocks}` to
their new `/adapters/vendor-official/...` paths.
- **Fixed** `/docs/adapters` and `/docs/state` so the bare pages are
accessible again — the previous catch-all redirect (`:slug*`) was
swallowing them. Switched to `:slug+` so subpath URLs still 308 while
the bare pages render.

### Visual polish

- **Adapter-only sidebar variant** (`AdaptersDocsLayout` +
`AdaptersSidebar`) with uppercase eyebrow separators, tighter rows, and
a thin themed scrollbar utility class. The shared `/docs` sidebar is
untouched.
- **Restyled `AdapterHero`**: drops the badges row + packageName, sits
the title inline with the logo, larger 17 px tagline, horizontal divider
beneath the block.
- **Restyled `PackageInstall`** as a tabbed dark single-line snippet
with a `$` prompt prefix and a copy button — replaces the previous
multi-line `CodeBlock` layout.
- **New "Deploy your chat app on Vercel" upsell card** (`<Upsell />`)
replaces the old `EditSource / ScrollTop / Feedback / CopyPage` footer
cluster on every adapter detail page.
- **Listing & messenger pages**: align the H1 to a tighter `text-4xl
sm:text-[44px]`, and the section headers to `text-base font-medium
tracking-tight` with a one-line muted lede.

### Tooling & tests

- Added `mdxBody: true` opt-in to the adapter frontmatter schema
(`source.config.ts`), and updated both detail-page handlers
(`community/[slug]` and the new `vendor-official/[slug]`) to render the
MDX body when present, falling back to README fetch otherwise.
- Refactored both detail-page handlers to flatten the body-render
branches into a `renderBody()` helper, removing the nested ternaries
that were tripping `lint/style/noNestedTernary`.
- New test file
[`packages/integration-tests/src/docs-adapters.test.ts`](https://github.com/vercel/chat/blob/docs/refresh-adapters/packages/integration-tests/src/docs-adapters.test.ts)
— **220 new assertions** covering:
- Adapter MDX frontmatter completeness, slug ↔ filename consistency, and
`type ∈ {platform, state}`.
- Vendor-official invariants: exactly the expected slugs,
`vendorOfficial: true`, `community: true`, `author`, `mdxBody: true`,
`<FeatureSupport />` rendered.
- Community invariants: `community: true` (never vendor-official),
`mdxBody: true`, `<FeatureSupport />`.
- Official invariants: never flagged, `packageName` always under
`@chat-adapter/*`.
- `adapters.json` ↔ MDX sync on `packageName` / `type` / `community` /
`vendorOfficial`.
- Extended `VALID_DOC_PACKAGES` so `docs-content.test.ts` accepts the
new vendor-official + community packages, plus `@chat-adapter/web`,
`@chat-adapter/web/react`, and `@chat-adapter/messenger`.

### Per-package AGENTS.md

- Added `AGENTS.md` to every official adapter and state adapter (14
packages), each tailored to that adapter's surface — overview, directory
layout, build/test commands, public exports, thread ID format, webhook
flow, authentication, format conversion, cards/streaming, platform
quirks, testing approach, coding conventions, and release rules.
- Added a one-line `CLAUDE.md` (`@AGENTS.md`) beside each so Claude Code
picks up the same instructions through its built-in resolver — same
convention as the root.

### Web adapter copy

- Cleaned up the Web adapter tagline (removed inline backticks) and
dropped the now-redundant "v1 scope" section from the body.

---------

Co-authored-by: Ben Sabic <bensabic@users.noreply.github.com>
2026-05-12 16:01:19 +10:00

116 lines
3.7 KiB
TypeScript

export type AdapterFeatureStatus = "yes" | "no" | "partial";
export type AdapterFeatureValue =
| AdapterFeatureStatus
| {
status: AdapterFeatureStatus;
label?: string;
};
export interface AdapterFeature {
key: string;
label: string;
}
export interface AdapterFeatureCategory {
features: AdapterFeature[];
id: string;
label: string;
}
export const PLATFORM_FEATURE_CATEGORIES: AdapterFeatureCategory[] = [
{
id: "messaging",
label: "Messaging",
features: [
{ key: "postMessage", label: "Post message" },
{ key: "editMessage", label: "Edit message" },
{ key: "deleteMessage", label: "Delete message" },
{ key: "fileUploads", label: "File uploads" },
{ key: "streaming", label: "Streaming" },
{ key: "scheduledMessages", label: "Scheduled messages" },
],
},
{
id: "richContent",
label: "Rich content",
features: [
{ key: "cardFormat", label: "Card format" },
{ key: "buttons", label: "Buttons" },
{ key: "linkButtons", label: "Link buttons" },
{ key: "selectMenus", label: "Select menus" },
{ key: "tables", label: "Tables" },
{ key: "fields", label: "Fields" },
{ key: "imagesInCards", label: "Images in cards" },
{ key: "modals", label: "Modals" },
],
},
{
id: "conversations",
label: "Conversations",
features: [
{ key: "slashCommands", label: "Slash commands" },
{ key: "mentions", label: "Mentions" },
{ key: "addReactions", label: "Add reactions" },
{ key: "removeReactions", label: "Remove reactions" },
{ key: "typingIndicator", label: "Typing indicator" },
{ key: "directMessages", label: "DMs" },
{ key: "ephemeralMessages", label: "Ephemeral messages" },
{ key: "userLookup", label: "User lookup" },
{ key: "parentSubject", label: "Parent subject" },
{ key: "nativeClient", label: "Native client" },
{ key: "customApiEndpoint", label: "Custom API endpoint" },
],
},
{
id: "messageHistory",
label: "Message history",
features: [
{ key: "fetchMessages", label: "Fetch messages" },
{ key: "fetchSingleMessage", label: "Fetch single message" },
{ key: "fetchThreadInfo", label: "Fetch thread info" },
{ key: "fetchChannelMessages", label: "Fetch channel messages" },
{ key: "listThreads", label: "List threads" },
{ key: "fetchChannelInfo", label: "Fetch channel info" },
{ key: "postChannelMessage", label: "Post channel message" },
],
},
];
export const STATE_FEATURE_CATEGORIES: AdapterFeatureCategory[] = [
{
id: "capabilities",
label: "Capabilities",
features: [
{ key: "persistence", label: "Persistence" },
{ key: "multiInstance", label: "Multi-instance" },
{ key: "subscriptions", label: "Subscriptions" },
{ key: "distributedLocking", label: "Distributed locking" },
{ key: "keyValueCache", label: "Key-value caching" },
{ key: "lists", label: "Lists" },
{ key: "queues", label: "Queues" },
{ key: "automaticReconnect", label: "Automatic reconnect" },
{ key: "cluster", label: "Cluster support" },
{ key: "sentinel", label: "Sentinel support" },
{ key: "keyPrefix", label: "Key prefix namespacing" },
],
},
];
export const getFeatureCategories = (
type: "platform" | "state"
): AdapterFeatureCategory[] =>
type === "platform" ? PLATFORM_FEATURE_CATEGORIES : STATE_FEATURE_CATEGORIES;
export const normalizeFeatureValue = (
value: AdapterFeatureValue | undefined
): { status: AdapterFeatureStatus; label?: string } => {
if (!value) {
return { status: "no" };
}
if (typeof value === "string") {
return { status: value };
}
return value;
};