36 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function ScrollArea({
9 | className,
10 | children,
11 | ...props
12 | }: React.ComponentProps
35 |
37 | );
38 | }
39 |
40 | if (loadFailed || !mediaUrl) {
41 | return (
42 |
43 |
47 | );
48 | }
49 |
50 | return (
51 | 44 | Media unavailable 45 |
46 |
52 | {messageType === 'image' && (
53 | 
59 | )}
60 |
61 | {messageType === 'video' && (
62 |
68 | )}
69 |
70 | {messageType === 'audio' && (
71 |
72 | )}
73 |
74 | {messageType === 'document' && (
75 |
81 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/src/app/api/messages/send/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from 'next/server';
2 | import { whatsappClient, PHONE_NUMBER_ID } from '@/lib/whatsapp-client';
3 |
4 | export async function POST(request: Request) {
5 | try {
6 | const formData = await request.formData();
7 | const to = formData.get('to') as string;
8 | const body = formData.get('body') as string;
9 | const file = formData.get('file') as File | null;
10 |
11 | if (!to) {
12 | return NextResponse.json(
13 | { error: 'Missing required field: to' },
14 | { status: 400 }
15 | );
16 | }
17 |
18 | let result;
19 |
20 | // Send media message
21 | if (file) {
22 | const fileType = file.type.split('/')[0]; // image, video, audio, application
23 | const mediaType = fileType === 'application' ? 'document' : fileType;
24 |
25 | // Upload media first
26 | const uploadResult = await whatsappClient.media.upload({
27 | phoneNumberId: PHONE_NUMBER_ID,
28 | type: mediaType as 'image' | 'video' | 'audio' | 'document',
29 | file: file,
30 | fileName: file.name
31 | });
32 |
33 | // Send message with media
34 | if (mediaType === 'image') {
35 | result = await whatsappClient.messages.sendImage({
36 | phoneNumberId: PHONE_NUMBER_ID,
37 | to,
38 | image: { id: uploadResult.id, caption: body || undefined }
39 | });
40 | } else if (mediaType === 'video') {
41 | result = await whatsappClient.messages.sendVideo({
42 | phoneNumberId: PHONE_NUMBER_ID,
43 | to,
44 | video: { id: uploadResult.id, caption: body || undefined }
45 | });
46 | } else if (mediaType === 'audio') {
47 | result = await whatsappClient.messages.sendAudio({
48 | phoneNumberId: PHONE_NUMBER_ID,
49 | to,
50 | audio: { id: uploadResult.id }
51 | });
52 | } else {
53 | result = await whatsappClient.messages.sendDocument({
54 | phoneNumberId: PHONE_NUMBER_ID,
55 | to,
56 | document: { id: uploadResult.id, caption: body || undefined, filename: file.name }
57 | });
58 | }
59 | } else if (body) {
60 | // Send text message
61 | result = await whatsappClient.messages.sendText({
62 | phoneNumberId: PHONE_NUMBER_ID,
63 | to,
64 | body
65 | });
66 | } else {
67 | return NextResponse.json(
68 | { error: 'Either body or file is required' },
69 | { status: 400 }
70 | );
71 | }
72 |
73 | return NextResponse.json(result);
74 | } catch (error) {
75 | console.error('Error sending message:', error);
76 | return NextResponse.json(
77 | { error: 'Failed to send message' },
78 | { status: 500 }
79 | );
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WhatsApp Inbox
2 |
3 | A WhatsApp Web-style inbox built with Next.js for the WhatsApp Cloud API. Send messages, templates, and interactive buttons with a familiar UI.
4 |
5 | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fgokapso%2Fwhatsapp-cloud-inbox&env=PHONE_NUMBER_ID,KAPSO_API_KEY,WABA_ID&envDescription=Get%20these%20credentials%20from%20app.kapso.ai&envLink=https%3A%2F%2Fapp.kapso.ai)
6 |
7 | 
8 |
9 | ## Features
10 |
11 | - **Real-time messaging** - Auto-polling keeps conversations updated
12 | - **Template messages** - Full support for WhatsApp templates with parameters (header, body, buttons)
13 | - **Interactive messages** - Send button messages with up to 3 custom actions
14 | - **Media support** - Send images, videos, documents, and audio
15 | - **24-hour window enforcement** - Automatically restricts messaging outside WhatsApp's window
16 | - **Failed message indicators** - Visual feedback for delivery failures
17 | - **WhatsApp-style UI** - Familiar interface with read receipts, timestamps, and message bubbles
18 |
19 | ## Setup
20 |
21 | ### 1. Get Kapso credentials
22 |
23 | 1. Create account at [app.kapso.ai](https://app.kapso.ai)
24 | 2. Connect a WhatsApp number
25 | 3. Get your credentials:
26 | - `PHONE_NUMBER_ID`
27 | - `KAPSO_API_KEY`
28 | - `WABA_ID`
29 |
30 | ### 2. Clone and install
31 |
32 | ```bash
33 | git clone https://github.com/gokapso/whatsapp-cloud-inbox.git
34 | cd whatsapp-cloud-inbox
35 | npm install
36 | ```
37 |
38 | ### 3. Environment variables
39 |
40 | Create `.env`:
41 |
42 | ```env
43 | PHONE_NUMBER_ID=your_phone_number_id
44 | KAPSO_API_KEY=your_kapso_api_key
45 | WABA_ID=your_business_account_id
46 | ```
47 |
48 | ### 4. Run
49 |
50 | ```bash
51 | npm run dev
52 | ```
53 |
54 | Open [http://localhost:4000](http://localhost:4000)
55 |
56 | ## Key Features
57 |
58 | ### Template Messages
59 |
60 | Send WhatsApp-approved templates with dynamic parameters:
61 | - **Header + Body + Button parameters** - Full template support
62 | - **Named and positional parameters** - Automatic detection
63 | - **Two-step flow** - Select template → Fill parameters → Send
64 |
65 | ### Interactive Messages
66 |
67 | Create button messages without templates:
68 | - **Header (optional)** + **Body (required)** + **Buttons (1-3)**
69 | - Each button gets a unique ID and title (max 20 chars)
70 | - Ideal for quick replies, confirmations, menu selections
71 |
72 | ### 24-Hour Window
73 |
74 | Automatically enforces WhatsApp's messaging policy:
75 | - **Within 24h** - Send regular messages freely
76 | - **Outside 24h** - Template-only mode with clear messaging
77 | - **No inbound messages** - Guide users to send templates
78 |
79 | ### Message Types
80 |
81 | - ✅ Text messages
82 | - ✅ Images, videos, audio, documents
83 | - ✅ Template messages (with all parameter types)
84 | - ✅ Interactive button messages
85 | - ✅ Failed message indicators
86 |
87 | ## Contributing
88 |
89 | Issues and PRs welcome. Keep it simple.
90 |
91 | ## License
92 |
93 | MIT
94 |
--------------------------------------------------------------------------------
/src/app/api/conversations/route.ts:
--------------------------------------------------------------------------------
1 | import { NextResponse } from 'next/server';
2 | import {
3 | buildKapsoFields,
4 | type ConversationKapsoExtensions,
5 | type ConversationRecord
6 | } from '@kapso/whatsapp-cloud-api';
7 | import { whatsappClient, PHONE_NUMBER_ID } from '@/lib/whatsapp-client';
8 |
9 | function parseDirection(kapso?: ConversationKapsoExtensions): 'inbound' | 'outbound' {
10 | if (!kapso) {
11 | return 'inbound';
12 | }
13 |
14 | const inboundAt = typeof kapso.lastInboundAt === 'string' ? Date.parse(kapso.lastInboundAt) : Number.NaN;
15 | const outboundAt = typeof kapso.lastOutboundAt === 'string' ? Date.parse(kapso.lastOutboundAt) : Number.NaN;
16 |
17 | if (Number.isFinite(inboundAt) && Number.isFinite(outboundAt)) {
18 | return inboundAt >= outboundAt ? 'inbound' : 'outbound';
19 | }
20 |
21 | if (Number.isFinite(inboundAt)) return 'inbound';
22 | if (Number.isFinite(outboundAt)) return 'outbound';
23 | return 'inbound';
24 | }
25 |
26 | export async function GET(request: Request) {
27 | try {
28 | const { searchParams } = new URL(request.url);
29 | const status = searchParams.get('status');
30 | const parsedLimit = Number.parseInt(searchParams.get('limit') ?? '', 10);
31 | const limit = Number.isFinite(parsedLimit) && parsedLimit > 0 ? Math.min(parsedLimit, 100) : 50;
32 |
33 | const response = await whatsappClient.conversations.list({
34 | phoneNumberId: PHONE_NUMBER_ID,
35 | ...(status && { status: status as 'active' | 'ended' }),
36 | limit,
37 | fields: buildKapsoFields([
38 | 'contact_name',
39 | 'messages_count',
40 | 'last_message_type',
41 | 'last_message_text',
42 | 'last_inbound_at',
43 | 'last_outbound_at'
44 | ])
45 | });
46 |
47 | // Transform conversations to match frontend expectations
48 | const transformedData = response.data.map((conversation: ConversationRecord) => {
49 | const kapso = conversation.kapso;
50 |
51 | const lastMessageText = typeof kapso?.lastMessageText === 'string' ? kapso.lastMessageText : undefined;
52 | const lastMessageType = typeof kapso?.lastMessageType === 'string' ? kapso.lastMessageType : undefined;
53 |
54 | return {
55 | id: conversation.id,
56 | phoneNumber: conversation.phoneNumber ?? '',
57 | status: conversation.status ?? 'unknown',
58 | lastActiveAt: typeof conversation.lastActiveAt === 'string' ? conversation.lastActiveAt : undefined,
59 | phoneNumberId: conversation.phoneNumberId ?? PHONE_NUMBER_ID,
60 | metadata: conversation.metadata ?? {},
61 | contactName: typeof kapso?.contactName === 'string' ? kapso.contactName : undefined,
62 | messagesCount: typeof kapso?.messagesCount === 'number' ? kapso.messagesCount : undefined,
63 | lastMessage: lastMessageText
64 | ? {
65 | content: lastMessageText,
66 | direction: parseDirection(kapso),
67 | type: lastMessageType
68 | }
69 | : undefined
70 | };
71 | });
72 |
73 | return NextResponse.json({
74 | data: transformedData,
75 | paging: response.paging
76 | });
77 | } catch (error) {
78 | console.error('Error fetching conversations:', error);
79 | return NextResponse.json(
80 | { error: 'Failed to fetch conversations' },
81 | { status: 500 }
82 | );
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { XIcon } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | function Dialog({
10 | ...props
11 | }: React.ComponentProps