+
+ );
+}
diff --git a/src/app/api/webhooks/config/route.ts b/src/app/api/webhooks/config/route.ts
new file mode 100644
index 0000000000..018480f707
--- /dev/null
+++ b/src/app/api/webhooks/config/route.ts
@@ -0,0 +1,59 @@
+import { NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+
+export async function GET() {
+ try {
+ const supabase = await createClient();
+ const { data: { user } } = await supabase.auth.getUser();
+ if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+ const { data: profile } = await supabase.from('profiles').select('account_id').eq('user_id', user.id).maybeSingle();
+ if (!profile?.account_id) return NextResponse.json({ error: 'No account linked' }, { status: 403 });
+
+ const { data: config, error } = await supabase
+ .from('webhook_integrations')
+ .select('*')
+ .eq('account_id', profile.account_id)
+ .maybeSingle();
+
+ if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+ return NextResponse.json({ config });
+ } catch (e) {
+ return NextResponse.json({ error: e instanceof Error ? e.message : 'Unknown error' }, { status: 500 });
+ }
+}
+
+export async function POST(request: Request) {
+ try {
+ const supabase = await createClient();
+ const { data: { user } } = await supabase.auth.getUser();
+ if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+ const { data: profile } = await supabase.from('profiles').select('account_id').eq('user_id', user.id).maybeSingle();
+ if (!profile?.account_id) return NextResponse.json({ error: 'No account linked' }, { status: 403 });
+
+ const { name, whatsapp_config_id, hmac_secret, default_phone_prefix } = await request.json();
+ if (!name) return NextResponse.json({ error: 'Integration Name is required' }, { status: 400 });
+
+ const { data: config, error } = await supabase
+ .from('webhook_integrations')
+ .upsert(
+ {
+ account_id: profile.account_id,
+ name,
+ whatsapp_config_id: whatsapp_config_id || null,
+ hmac_secret: hmac_secret || null,
+ default_phone_prefix: default_phone_prefix || '91',
+ updated_at: new Date().toISOString()
+ },
+ { onConflict: 'account_id' }
+ )
+ .select()
+ .single();
+
+ if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+ return NextResponse.json({ config });
+ } catch (e) {
+ return NextResponse.json({ error: e instanceof Error ? e.message : 'Unknown error' }, { status: 500 });
+ }
+}
diff --git a/src/app/api/webhooks/incoming/[id]/route.ts b/src/app/api/webhooks/incoming/[id]/route.ts
new file mode 100644
index 0000000000..22aac24c16
--- /dev/null
+++ b/src/app/api/webhooks/incoming/[id]/route.ts
@@ -0,0 +1,592 @@
+import { NextResponse } from 'next/server';
+import { supabaseAdmin } from '@/lib/automations/admin-client';
+import {
+ getNestedValue,
+ evaluateConditions,
+ resolveMapping,
+ type WebhookCondition
+} from '@/lib/generic-webhooks/utils';
+import { decrypt } from '@/lib/whatsapp/encryption';
+import { sendTemplateMessage } from '@/lib/whatsapp/meta-api';
+import { findExistingContact } from '@/lib/contacts/dedupe';
+import {
+ sanitizePhoneForMeta,
+ isValidE164,
+ phoneVariants,
+ isRecipientNotAllowedError
+} from '@/lib/whatsapp/phone-utils';
+import { checkRateLimit, rateLimitResponse, RATE_LIMITS } from '@/lib/rate-limit';
+
+interface WebhookWorkflow {
+ id: string;
+ account_id: string;
+ integration_id: string;
+ name: string;
+ recipient_name_field: string;
+ recipient_phone_field: string;
+ recipient_email_field: string | null;
+ conditions: {
+ matchType?: 'all' | 'any';
+ rules?: WebhookCondition[];
+ } | null;
+ actions: {
+ type: string;
+ template_name: string;
+ language?: string;
+ mappings?: {
+ body?: import('@/lib/generic-webhooks/utils').WebhookMapping[];
+ headerText?: import('@/lib/generic-webhooks/utils').WebhookMapping;
+ headerMedia?: import('@/lib/generic-webhooks/utils').WebhookMapping;
+ buttons?: Record
+
+
+ Webhook Integration
++ Connect your account with various systems and applications to trigger WhatsApp templates in real time. +
+
+ setUseMarketingEndpoint(e.target.checked)}
+ className="size-4 rounded border-border bg-muted text-primary focus:ring-primary cursor-pointer disabled:opacity-50"
+ />
+
diff --git a/src/components/webhooks/edit-workflow-modal.tsx b/src/components/webhooks/edit-workflow-modal.tsx
new file mode 100644
index 0000000000..c6b803d186
--- /dev/null
+++ b/src/components/webhooks/edit-workflow-modal.tsx
@@ -0,0 +1,1228 @@
+"use client";
+
+import { useEffect, useState, useRef } from 'react';
+import { toast } from 'sonner';
+import { Plus, Trash2, X, Info, Paperclip, Upload, Loader2, ArrowLeft, Image as ImageIcon } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { createClient } from '@/lib/supabase/client';
+import { extractJsonPaths, getNestedValue, type WebhookCondition } from '@/lib/generic-webhooks/utils';
+
+import type { MessageTemplate } from '@/types';
+
+export interface WebhookWorkflow {
+ id?: string;
+ name: string;
+ is_active: boolean;
+ recipient_name_field: string;
+ recipient_phone_field: string;
+ recipient_email_field: string | null;
+ create_contacts: boolean;
+ conditions?: {
+ matchType?: 'all' | 'any';
+ rules?: WebhookCondition[];
+ } | null;
+ actions?: {
+ type: string;
+ template_name: string;
+ language?: string;
+ mappings?: {
+ body?: { type: 'payload' | 'static' | 'upload'; value: string }[];
+ headerText?: { type: 'payload' | 'static' | 'upload'; value: string };
+ headerMedia?: { type: 'payload' | 'static' | 'upload'; value: string; filename?: string | null };
+ buttons?: Record
+
+
+
+ Enable this if your account is enrolled in Meta's Marketing Messages Lite API (routes category Marketing templates to /marketing_messages instead of /messages).
+
+ {/* Form Header */}
+
+ );
+}
diff --git a/src/components/webhooks/webhook-configuration.tsx b/src/components/webhooks/webhook-configuration.tsx
new file mode 100644
index 0000000000..06833e95b6
--- /dev/null
+++ b/src/components/webhooks/webhook-configuration.tsx
@@ -0,0 +1,340 @@
+"use client";
+
+import { useEffect, useState, useRef } from 'react';
+import { toast } from 'sonner';
+import { Copy, RefreshCw, Radio, CheckCircle, AlertCircle, Save } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { createClient } from '@/lib/supabase/client';
+import { extractJsonPaths } from '@/lib/generic-webhooks/utils';
+
+export function WebhookConfiguration() {
+ const [integrationName, setIntegrationName] = useState('');
+ const [selectedChannel, setSelectedChannel] = useState('');
+ const [channels, setChannels] = useState<{ id: string; display_phone_number: string }[]>([]);
+ const [integrationId, setIntegrationId] = useState
+
+
+ {/* Form Body */}
+
+
+
+ + {isEditing ? `Edit Workflow: ${workflow.name}` : 'Create New Workflow'} +
+
+ {/* General Section */}
+
+
+ {/* Form Footer */}
+
+
+
+ {/* Conditions Section */}
+
+
+
+
+
+ setName(e.target.value)}
+ placeholder="e.g. Lead Alert Notification"
+ className="mt-1 bg-white dark:bg-slate-950 text-slate-900 dark:text-white border-slate-200 dark:border-slate-800 focus:border-primary"
+ />
+
+
+
+ Is Active
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + If enabled, unrecognized phone numbers are saved to the database. Existing contacts are never duplicated. +
+
+
+
+ {/* Actions / Template Mapping */}
+
+
+
+ {conditions.length > 0 ? (
+
+
+
+ Conditions
+Determine if the payload triggers this workflow.
+
+
+
+
+
+
+ {conditions.map((cond, idx) => (
+
+ ) : (
+
+
+
+
+
+ {!['exists', 'not_exists'].includes(cond.operator) && (
+ updateCondition(idx, 'value', e.target.value)}
+ placeholder="Compare value"
+ className="w-36 bg-white dark:bg-slate-950 text-slate-900 dark:text-white border-slate-200 dark:border-slate-800 py-1 h-8 text-xs focus:border-primary"
+ />
+ )}
+
+
+
+ ))}
+
+ No conditions configured. Trigger on any payload.
+
+ )}
+
+
+
+
+
+ Action: Send Template
+Choose which WhatsApp Template to send and map its variables.
+
+
+
+
+
+
+
+ {selectedTmpl && (() => {
+ const hasMediaHeader = ['image', 'video', 'document'].includes(selectedTmpl.header_type || '');
+ const hasButtons = !!(selectedTmpl.buttons && selectedTmpl.buttons.length > 0);
+
+ let previewImageUrl = '';
+ if (selectedTmpl.header_type === 'image') {
+ if (mediaSourceType === 'upload' && mediaUploadUrl) {
+ previewImageUrl = mediaUploadUrl;
+ } else if (mediaSourceType === 'static' && mediaLink) {
+ previewImageUrl = mediaLink;
+ } else if (mediaSourceType === 'payload' && mediaPayloadPath) {
+ if (lastPayload) {
+ const val = getNestedValue(lastPayload, mediaPayloadPath);
+ if (val && typeof val === 'string' && val.startsWith('http')) {
+ previewImageUrl = val;
+ }
+ }
+ }
+ if (!previewImageUrl && selectedTmpl.header_media_url) {
+ previewImageUrl = selectedTmpl.header_media_url;
+ }
+ }
+
+ return (
+
+ {/* Left Column: Live WhatsApp Preview */}
+
+ );
+ })()}
+
+
+
+ {/* Right Column: Tabbed Configurations */}
+
+ Live Preview
+ Simulated WhatsApp
+
+
+
+ {/* Chat Body */}
+
+
+ {/* Chat bubble header context */}
+
+
+
+
+ {/* Message Bubble */}
+ WA
+
+
+ WhatsApp Bot
+ Business Account
+
+ {/* Header Media Image Preview */}
+ {selectedTmpl.header_type === 'image' && (
+
+
+ {/* Interactive Buttons Preview */}
+ {hasButtons && (
+
+ {previewImageUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+ )}
+
+ {/* Header Text Preview */}
+ {selectedTmpl.header_type === 'text' && selectedTmpl.header_content && (
+
+
+ )}
+
+ {getSubstitutedHeader(selectedTmpl.header_content, headerMapping)}
+
+ )}
+
+ {/* Body Text Preview */}
+
+ {getSubstitutedText(selectedTmpl.body_text, bodyMappings)}
+
+
+ {/* Footer text */}
+ {selectedTmpl.footer_text && (
+
+ {selectedTmpl.footer_text}
+
+ )}
+
+ {/* Timestamp */}
+
+ {new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+
+
+ {selectedTmpl.buttons?.map((btn: import('@/types').TemplateButton, idx: number) => {
+ const btnMapping = buttonMappings[idx];
+ let payloadPreview = '';
+ if (btnMapping) {
+ payloadPreview = btnMapping.type === 'static'
+ ? btnMapping.value
+ : btnMapping.value
+ ? `[payload: ${btnMapping.value}]`
+ : '';
+ }
+
+ return (
+
+ )}
+
+ {btn.text}
+ {payloadPreview && (
+
+ {`Payload: ${payloadPreview}`}
+
+ )}
+
+ );
+ })}
+
+ {/* Tab Navigation */}
+
+
+
+
+
+
+
+ {/* Map Tab Content */}
+ {activeSubTab === 'map' && (
+
+ {/* Header parameters */}
+ {headerMapping && (
+
+ )}
+
+ {/* Media Tab Content */}
+ {activeSubTab === 'media' && hasMediaHeader && (
+
+
+ )}
+
+ {/* Body parameters */}
+ {bodyMappings.length > 0 && (
+
+
+
+
+ {headerMapping.type === 'payload' ? (
+
+ ) : (
+
+
+ setHeaderMapping({ ...headerMapping, value: e.target.value })}
+ placeholder="Static text (use {{path}} for variables)"
+ className="flex-1 bg-white dark:bg-slate-900 text-slate-900 dark:text-white border-slate-200 dark:border-slate-800 py-1 h-8 text-xs focus:border-primary"
+ />
+
+
+ )}
+
+ Body Parameters Variables
+ {bodyMappings.map((m) => (
+
+ )}
+
+ {`{{${m.index}}}`}
+
+ {m.type === 'payload' ? (
+
+ ) : (
+
+ ))}
+
+ updateBodyMapping(m.index, 'value', e.target.value)}
+ placeholder="Static text (use {{path}} for variables)"
+ className="flex-1 bg-white dark:bg-slate-900 text-slate-900 dark:text-white border-slate-200 dark:border-slate-800 py-1 h-8 text-xs focus:border-primary"
+ />
+
+
+ )}
+
+
+ )}
+
+ {/* Advance Tab Content */}
+ {activeSubTab === 'advance' && hasButtons && (
+ + You can personalise this template with new media (images, videos, or PDFs) or we will use the existing ones you uploaded as sample by default. +
+ +
+
+ setMediaFileName(e.target.value)}
+ placeholder="e.g. image.jpg"
+ className="bg-white dark:bg-slate-900 text-slate-900 dark:text-white border-slate-200 dark:border-slate-800 py-1 h-8 text-xs focus:border-primary"
+ />
+
+
+
+
+
+
+
+ {mediaSourceType === 'static' && (
+
+
+ setMediaLink(e.target.value)}
+ placeholder={
+ selectedTmpl.header_type === 'video'
+ ? "https://example.com/video.mp4"
+ : selectedTmpl.header_type === 'document'
+ ? "https://example.com/document.pdf"
+ : "https://example.com/image.jpg"
+ }
+ className="bg-white dark:bg-slate-900 text-slate-900 dark:text-white border-slate-200 dark:border-slate-800 py-1 h-8 text-xs focus:border-primary"
+ />
+
+ )}
+
+ {mediaSourceType === 'payload' && (
+
+
+
+
+ )}
+
+ {mediaSourceType === 'upload' && (
+
+
+ {mediaUploadUrl ? (
+
+ ) : (
+
+ )}
+ {
+ const f = e.target.files?.[0];
+ if (f) void handleMediaUpload(f);
+ e.target.value = '';
+ }}
+ />
+
+ )}
+ + {selectedTmpl.header_type === 'video' + ? "(Allowed file types: .mp4. Max file size: 10 MB)" + : selectedTmpl.header_type === 'document' + ? "(Allowed file types: .pdf. Max file size: 10 MB)" + : "(Allowed file types: .jpeg, .jpg, .png. Max file size: 5 MB)"} +
+
+
+ )}
+
+ Button Payloads
+
+
+ + In your WhatsApp Templates, if you've incorporated buttons, the payload serves as a trigger or intent for a flow, activating the flow upon selection. +
+
+ {selectedTmpl.buttons?.map((btn: import('@/types').TemplateButton, idx: number) => (
+
+
+
+ ))}
+
+ {`Button ${idx + 1}: "${btn.text}" (${btn.type})`}
+ Optional
+
+
+
+
+ {buttonMappings[idx]?.type === 'payload' ? (
+
+ ) : (
+
+
+ updateButtonMapping(idx, 'value', e.target.value)}
+ placeholder="Static payload value (use {{path}} for variables)"
+ className="flex-1 bg-white dark:bg-slate-900 text-slate-900 dark:text-white border-slate-200 dark:border-slate-800 py-1 h-8 text-xs focus:border-primary"
+ />
+
+
+ )}
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ {/* Settings Form */}
+
+ );
+}
diff --git a/src/components/webhooks/webhook-logs.tsx b/src/components/webhooks/webhook-logs.tsx
new file mode 100644
index 0000000000..e501bf889d
--- /dev/null
+++ b/src/components/webhooks/webhook-logs.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { format } from 'date-fns';
+import { RefreshCw, Play, CheckCircle, XCircle, AlertCircle, Eye, EyeOff } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface WebhookLog {
+ id: string;
+ workflow_name: string;
+ status: 'success' | 'failed' | 'no_match';
+ created_at: string;
+ customer_name?: string | null;
+ customer_phone?: string | null;
+ error_message?: string | null;
+ payload?: unknown;
+}
+
+export function WebhookLogs() {
+ const [logs, setLogs] = useState
+
+
+ {integrationId && (
+ <>
+ {/* Webhook URL Display */}
+ Integration Settings
+
+
+
+
+
+ setIntegrationName(e.target.value)}
+ placeholder="e.g. HubSpot Integration"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ setHmacSecret(e.target.value)}
+ placeholder="Leave empty to disable signature check"
+ className="font-mono text-sm"
+ />
+
+
+
+ If set, incoming requests must include a valid signature in the X-Webhook-Signature (or X-Signature) header.
+
+
+ setDefaultPhonePrefix(e.target.value.replace(/\D/g, ''))}
+ placeholder="e.g. 91"
+ />
+
+
+ Fallback country prefix prepended to 10-digit numbers (defaults to 91).
+
+
+
+
+
+
+ {/* Test Payload Capture */}
+ Webhook URL
++ Copy this URL and add it under the webhook section of the application you are integrating with. +
+
+
+
+
+
+
+
+ )}
+
+
+
+ {lastPayload ? (
+
+
+
+
+ Response Received
++ Send a test request from your external system to capture the JSON schema. +
+
+
+ ) : (
+
+
+
+
+
+
+ {flattenedPaths.map((path) => (
+
+ {path}
+
+ ))}
+
+
+ Payload Sample:
+
+
+ {JSON.stringify(lastPayload, null, 2)}
+
+
+
+ )}
+ + No sample payload captured yet. Start listening and submit a request from your system. +
+
+
+ );
+}
+
+// React import helper inside component file for Next.js compile safety
+import React from 'react';
diff --git a/src/components/webhooks/webhook-overview.tsx b/src/components/webhooks/webhook-overview.tsx
new file mode 100644
index 0000000000..1395fc48cf
--- /dev/null
+++ b/src/components/webhooks/webhook-overview.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { CheckCircle2, XCircle, ArrowRight, Webhook, Zap, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface WebhookOverviewProps {
+ onTabChange: (tab: string) => void;
+}
+
+export function WebhookOverview({ onTabChange }: WebhookOverviewProps) {
+ const [isConnected, setIsConnected] = useState(false);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ async function fetchConfig() {
+ try {
+ const res = await fetch('/api/webhooks/config');
+ if (res.ok) {
+ const data = await res.json();
+ setIsConnected(data.config?.is_connected ?? false);
+ }
+ } catch (err) {
+ console.error('Failed to load webhook connection state:', err);
+ } finally {
+ setLoading(false);
+ }
+ }
+ fetchConfig();
+ }, []);
+
+ return (
+
+
+
+ {loading && logs.length === 0 ? (
+
+
+
+
+ Execution Logs
++ View history of webhook trigger execution results and diagnostic payloads. +
+
+
+ ) : logs.length === 0 ? (
+
+
+ ) : (
+ No Logs Found
++ Webhook triggers will log execution details here when payloads hit your workflow URL. +
+
+
+ )}
+
+
+
+
+
+ | Date | +Workflow Name | +Customer Phone | +Customer Name | +Status | +Actions | +
|---|---|---|---|---|---|
| + {format(new Date(log.created_at), 'yyyy-MM-dd HH:mm:ss')} + | +{log.workflow_name} | +{log.customer_phone || '—'} | +{log.customer_name || '—'} | +{getStatusBadge(log.status)} | ++ + | +
|
+
+ {log.error_message && (
+
+
+ Error Message
+
+ )}
+ {log.error_message} +
+ Payload JSON
+
+
+ {JSON.stringify(log.payload, null, 2)}
+
+ |
+
+ {/* Hero Header */}
+
+ );
+}
diff --git a/src/components/webhooks/webhook-tabs.tsx b/src/components/webhooks/webhook-tabs.tsx
new file mode 100644
index 0000000000..a2bf9b3991
--- /dev/null
+++ b/src/components/webhooks/webhook-tabs.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { HelpCircle, Settings, Workflow, History } from 'lucide-react';
+import { WebhookOverview } from './webhook-overview';
+import { WebhookConfiguration } from './webhook-configuration';
+import { WebhookWorkflows } from './webhook-workflows';
+import { WebhookLogs } from './webhook-logs';
+
+export function WebhookTabs() {
+ const [activeTab, setActiveTab] = useState('overview');
+
+ return (
+
+
+
+ {/* Guide Cards */}
+
+
+
+
+
+
+
+
+
+
+ Generic Webhooks
++ Connect your account to various systems and applications effortlessly with Generic Webhooks. Utilize real-time updates to send customized WhatsApp messages to your customers. +
+
+ Last Updated:
+ {loading ? (
+
+ ) : isConnected ? (
+
+
+
+
+ What can I do?
+
+
+
+
+
+
+
+
+
+ Send customized template messages
++ Automatically match incoming payloads to approved WhatsApp templates and inject variables like customer name or order number. +
+
+
+
+
+
+
+ Trigger real-time triggers
++ Set up matching rules on fields like event types or lead status to fire messages precisely when users take actions. +
+
+
+ How it works
+-
+
-
+
Configure settings
++ Provide an integration name, pick your WhatsApp number/channel, and grab your unique webhook URL. +
+
+ -
+
Capture sample payload
++ Trigger a test submission from HubSpot or Shopify to your webhook URL. This parses the JSON schema for easy mapping. +
+
+ -
+
Create workflows
++ Specify conditions, map recipient fields, and choose which templates to send with matching variables. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/webhooks/webhook-workflows.tsx b/src/components/webhooks/webhook-workflows.tsx
new file mode 100644
index 0000000000..b3f6849245
--- /dev/null
+++ b/src/components/webhooks/webhook-workflows.tsx
@@ -0,0 +1,263 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { Plus, Edit2, Trash2, Copy, ToggleLeft, ToggleRight, Settings2, AlertCircle, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { EditWorkflowModal, type WebhookWorkflow } from './edit-workflow-modal';
+
+export function WebhookWorkflows() {
+ const [workflows, setWorkflows] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if (view !== 'list') {
+ return (
+
+
+ );
+}
diff --git a/src/hooks/use-auth.tsx b/src/hooks/use-auth.tsx
index c14434b7e4..b3ba01c20c 100644
--- a/src/hooks/use-auth.tsx
+++ b/src/hooks/use-auth.tsx
@@ -250,6 +250,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
const currentUser = session?.user ?? null;
setUser(currentUser);
+ if (session?.access_token) {
+ supabase.realtime.setAuth(session.access_token);
+ }
+
if (currentUser) {
// Don't block session loading on profile fetch — chrome
// (header, sidebar) can render from the user object alone,
@@ -279,6 +283,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
const currentUser = session?.user ?? null;
setUser(currentUser);
+ if (session?.access_token) {
+ supabase.realtime.setAuth(session.access_token);
+ } else {
+ supabase.realtime.setAuth(null);
+ }
+
if (currentUser) {
if (currentUser.id !== lastFetchedUserIdRef.current) {
fetchProfile(currentUser.id);
diff --git a/src/hooks/use-realtime.ts b/src/hooks/use-realtime.ts
index c123d423cd..c13f941707 100644
--- a/src/hooks/use-realtime.ts
+++ b/src/hooks/use-realtime.ts
@@ -44,8 +44,10 @@ export function useRealtime({
const supabase = createClient();
+ const uniqueChannelName = `${channelName}-${Math.random().toString(36).substring(2, 9)}`;
+
const channel = supabase
- .channel(channelName)
+ .channel(uniqueChannelName)
.on(
"postgres_changes",
{ event: "*", schema: "public", table: "messages" },
diff --git a/src/hooks/use-total-unread.ts b/src/hooks/use-total-unread.ts
index ff30ec875d..9e25998381 100644
--- a/src/hooks/use-total-unread.ts
+++ b/src/hooks/use-total-unread.ts
@@ -12,7 +12,7 @@ import type { Conversation } from "@/types";
* Lives on its own realtime channel (distinct from the inbox page's
* "inbox-realtime") so both can coexist without sharing state.
*/
-export function useTotalUnread(): number {
+export function useTotalUnread({ enabled = true }: { enabled?: boolean } = {}): number {
const [total, setTotal] = useState(0);
// Keep a live local mirror of {id: unread_count} so INSERT/UPDATE/DELETE
@@ -20,6 +20,8 @@ export function useTotalUnread(): number {
const countsRef = useRef
+
+
+ {!isConfigured ? (
+
+
+
+
+ Workflows
++ Define triggers and actions to send WhatsApp messages automatically ({workflows.length}/5 allowed). +
+
+
+ ) : !lastPayload ? (
+ Integration Not Configured
++ Configure integration settings and save under the Configuration tab before building workflows. +
+
+
+ ) : workflows.length === 0 ? (
+ Test Payload Required
++ Go to the Configuration tab and capture a test payload to map variables before setting up workflows. +
+
+
+ ) : (
+ No Workflows Configured
++ Build your first workflow to trigger WhatsApp templates on incoming JSON payloads. +
+
+ {workflows.map((wf, idx) => {
+ const templateAction = wf.actions?.find((a) => a.type === 'send_template');
+ return (
+
+ )}
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+ {wf.name}
+{getWorkflowUrl(wf.id || '')}
+
+
+
+ Action details
+
+
+ Trigger:
+ On JSON Post
+
+
+ WhatsApp Template:
+ {templateAction?.template_name || 'None'}
+
+
+
+
+
+
+
+
+
+
+