How to Integrate Bolt.new with Sunshine Conversations (formerly Smooch)

1// src/lib/smooch.ts
2const APP_ID = process.env.SMOOCH_APP_ID;
3const BASE_URL = `https://api.smooch.io/v2/apps/${APP_ID}`;
4
5function getBasicAuth(): string {
6  const keyId = process.env.SMOOCH_KEY_ID;
7  const keySecret = process.env.SMOOCH_KEY_SECRET;
8  if (!keyId || !keySecret) throw new Error('Smooch API credentials not configured');
9  return 'Basic ' + Buffer.from(`${keyId}:${keySecret}`).toString('base64');
10}
11
12export async function smoochFetch<T>(
13  path: string,
14  options: RequestInit = {}
15): Promise<T> {
16  const response = await fetch(`${BASE_URL}/${path}`, {
17    ...options,
18    headers: {
19      Authorization: getBasicAuth(),
20      'Content-Type': 'application/json',
21      ...options.headers,
22    },
23  });
24
25  if (!response.ok) {
26    const error = await response.json().catch(() => ({ error: response.statusText }));
27    throw new Error(`Smooch API ${response.status}: ${JSON.stringify(error)}`);
28  }
29
30  return response.json();
31}
32
33export const SMOOCH_APP_ID = APP_ID;

1// src/components/ChatWidget.tsx
2'use client';
3import { useEffect } from 'react';
4
5declare global {
6  interface Window {
7    Smooch: {
8      init: (config: object) => Promise<void>;
9      destroy: () => void;
10      identify: (user: { externalId: string; email?: string; displayName?: string }) => void;
11    };
12  }
13}
14
15interface ChatWidgetProps {
16  userId?: string;
17  userEmail?: string;
18  userName?: string;
19}
20
21export function ChatWidget({ userId, userEmail, userName }: ChatWidgetProps) {
22  const appId = process.env.NEXT_PUBLIC_SMOOCH_APP_ID;
23
24  useEffect(() => {
25    if (!appId || document.getElementById('smooch-script')) return;
26
27    const script = document.createElement('script');
28    script.id = 'smooch-script';
29    script.src = 'https://cdn.smooch.io/smooch.min.js';
30    script.onload = async () => {
31      await window.Smooch.init({
32        appId,
33        customColors: {
34          brandColor: '2563eb',
35          conversationColor: '2563eb',
36          actionColor: '2563eb',
37        },
38        canUserSeeConversationList: false,
39        welcomeMessage: 'Hi! How can we help you today?',
40      });
41
42      // Identify the user if authenticated
43      if (userId) {
44        window.Smooch.identify({
45          externalId: userId,
46          email: userEmail,
47          displayName: userName,
48        });
49      }
50    };
51
52    document.head.appendChild(script);
53
54    return () => {
55      if (window.Smooch) window.Smooch.destroy();
56      document.getElementById('smooch-script')?.remove();
57    };
58  }, [appId, userId, userEmail, userName]);
59
60  return null; // Widget renders itself into the DOM
61}

1// app/api/smooch/message/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { smoochFetch } from '@/lib/smooch';
4
5export async function POST(request: NextRequest) {
6  const { externalUserId, text } = await request.json();
7  if (!externalUserId || !text) {
8    return NextResponse.json({ error: 'externalUserId and text are required' }, { status: 400 });
9  }
10
11  try {
12    // Step 1: Find or create user
13    let user: any;
14    try {
15      user = await smoochFetch<any>(`users/${externalUserId}`);
16    } catch {
17      user = await smoochFetch<any>('users', {
18        method: 'POST',
19        body: JSON.stringify({ externalId: externalUserId }),
20      });
21    }
22
23    const userId = user.user?.id ?? user.id;
24
25    // Step 2: Get or create conversation
26    const conversationsData = await smoochFetch<any>(`users/${userId}/conversations`);
27    let conversationId: string;
28
29    if (conversationsData.conversations?.length > 0) {
30      conversationId = conversationsData.conversations[0].id;
31    } else {
32      const newConv = await smoochFetch<any>('conversations', {
33        method: 'POST',
34        body: JSON.stringify({
35          type: 'personal',
36          participants: [{ userId, subscribeSDKClient: false }],
37        }),
38      });
39      conversationId = newConv.conversation.id;
40    }
41
42    // Step 3: Send message
43    const message = await smoochFetch<any>(`conversations/${conversationId}/messages`, {
44      method: 'POST',
45      body: JSON.stringify({
46        author: { type: 'business' },
47        content: { type: 'text', text },
48      }),
49    });
50
51    return NextResponse.json({ messageId: message.message.id, conversationId });
52  } catch (err: any) {
53    return NextResponse.json({ error: err.message }, { status: 500 });
54  }
55}

1// app/api/smooch/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  // Verify webhook is from Sunshine Conversations
6  const apiKey = request.headers.get('x-api-key');
7  const expectedSecret = process.env.SMOOCH_WEBHOOK_SECRET;
8
9  if (expectedSecret && apiKey !== expectedSecret) {
10    return new NextResponse('Unauthorized', { status: 401 });
11  }
12
13  const event = await request.json();
14
15  // Handle different event types
16  switch (event.events?.[0]?.type) {
17    case 'conversation:message': {
18      const message = event.events[0].payload.message;
19      const conversation = event.payload?.conversation;
20
21      // Only process messages from users, not from your business
22      if (message?.author?.type === 'user') {
23        console.log('New message from user:', {
24          conversationId: conversation?.id,
25          userId: message.author.userId,
26          content: message.content?.text,
27          channel: message.source?.type,
28        });
29
30        // TODO: Save to database, trigger notification, queue auto-response
31      }
32      break;
33    }
34
35    case 'conversation:read':
36      console.log('Message read by user:', event.events[0].payload);
37      break;
38
39    default:
40      console.log('Unhandled event type:', event.events?.[0]?.type);
41  }
42
43  return NextResponse.json({ ok: true });
44}