mirror of
https://github.com/vercel/chat.git
synced 2026-09-14 18:32:29 +08:00
Ben Sabic
2a2b2c5500
Adds a first-party Instagram Direct Messages adapter backed by Meta's
Instagram API with Instagram Login.
- Verifies webhook challenges and HMAC signatures, then normalizes DMs,
story replies, media, quick replies, postbacks, and reactions.
- Sends plain text, cards, quick replies, typing indicators, URL
attachments, and uploaded media through `graph.instagram.com`.
- Maps authentication, rate-limit, and 24-hour messaging-window failures
to typed adapter errors.
- Registers Instagram in the adapter catalog, CLI scaffold, official
docs, replay suite, and Next.js example.
## Usage
```ts
import { createInstagramAdapter } from "@chat-adapter/instagram";
import { Chat } from "chat";
const bot = new Chat({
userName: "mystore",
adapters: { instagram: createInstagramAdapter() },
});
```
## Webhook
```ts
export async function POST(request: Request) {
return bot.webhooks.instagram(request);
}
```
## Verification
- `pnpm --filter @chat-adapter/instagram test`
- `pnpm --filter @chat-adapter/instagram typecheck`
- `pnpm --filter example-nextjs-chat typecheck`
- `pnpm --filter example-nextjs-chat build`
- `pnpm check`
- `pnpm konsistent`
## Live Testing
<table>
<tr>
<td><img width="1440" height="2109" alt="1000000502"
src="https://github.com/user-attachments/assets/9fdb8c3b-4e41-4c81-9426-08756a5e4201"
/></td>
<td><img width="1440" height="1995" alt="1000000503"
src="https://github.com/user-attachments/assets/8a572493-c57a-4412-9049-5737aaa9dfd0"
/></td>
</tr>
</table>
Closes #729 / Co-Authored by @ivandujaut
---------
Co-authored-by: Ben Sabic <bensabic@users.noreply.github.com>
77 lines
1.3 KiB
TypeScript
77 lines
1.3 KiB
TypeScript
import {
|
|
discord,
|
|
gchat,
|
|
github,
|
|
ioredis,
|
|
instagram,
|
|
linear,
|
|
memory,
|
|
messenger,
|
|
notion,
|
|
postgres,
|
|
redis,
|
|
slack,
|
|
teams,
|
|
telegram,
|
|
twilio,
|
|
web,
|
|
whatsapp,
|
|
x,
|
|
xchat,
|
|
} from "@/lib/logos";
|
|
|
|
const ICON_MAP: Record<
|
|
string,
|
|
(props: React.ComponentProps<"svg">) => React.ReactNode
|
|
> = {
|
|
slack,
|
|
teams,
|
|
gchat,
|
|
discord,
|
|
github,
|
|
instagram,
|
|
web,
|
|
linear,
|
|
notion,
|
|
telegram,
|
|
redis,
|
|
ioredis,
|
|
postgres,
|
|
memory,
|
|
whatsapp,
|
|
twilio,
|
|
messenger,
|
|
x,
|
|
xchat,
|
|
};
|
|
|
|
interface AdapterHeroProps {
|
|
beta?: boolean;
|
|
community?: boolean;
|
|
logo?: string;
|
|
name: string;
|
|
packageName?: string;
|
|
tagline: string;
|
|
vendorOfficial?: boolean;
|
|
}
|
|
|
|
export const AdapterHero = ({ logo, name, tagline }: AdapterHeroProps) => {
|
|
const Icon = logo ? ICON_MAP[logo] : undefined;
|
|
|
|
return (
|
|
<header className="not-prose mb-10 flex flex-col gap-4 border-b pb-8">
|
|
<div className="flex items-center gap-4">
|
|
{Icon ? (
|
|
<span className="flex size-14 shrink-0 items-center justify-center rounded-xl border bg-card">
|
|
<Icon className="size-8" />
|
|
</span>
|
|
) : null}
|
|
<h1 className="min-w-0 flex-1 text-heading-32">{name}</h1>
|
|
</div>
|
|
<p className="max-w-3xl text-balance text-[17px] text-muted-foreground leading-[1.6]">
|
|
{tagline}
|
|
</p>
|
|
</header>
|
|
);
|
|
};
|