@faskai/ui-commons 0.0.0-alpha.28 → 0.0.0-alpha.30

package/dist/components/connections/connections-panel.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import { createFrontendClient } from '@pipedream/sdk/browser';
 import { useConnectionsApi } from './connections-api-provider';
+import { launchNangoConnect } from './launch-nango-connect';
 import { ConnectedAppsList } from './connected-apps-list';
 import { AvailableAppsList } from './available-apps-list';
 import { AppSearchGrid } from './app-search-grid';
@@ -38,22 +39,37 @@ export function ConnectionsPanel({ variant, onConnectionsLoaded, }) {
         const appKey = 'appKey' in app ? app.appKey : app.name_slug;
         setConnecting(appKey);
         try {
-            const { token, expiresAt } = await api.getConnectToken(appKey);
-            const pd = createFrontendClient({
-                externalUserId: 'user',
-                tokenCallback: async () => ({
-                    token,
-                    expiresAt: new Date(expiresAt),
-                    connectLinkUrl: '',
-                }),
-            });
-            await new Promise((resolve, reject) => {
-                pd.connectAccount({
-                    app: appKey,
-                    onSuccess: () => resolve(),
-                    onError: (err) => reject(err),
-                });
-            });
+            const info = await api.connect(appKey);
+            switch (info.provider) {
+                case 'pipedream': {
+                    const pd = createFrontendClient({
+                        externalUserId: 'user',
+                        tokenCallback: async () => ({
+                            token: info.token,
+                            expiresAt: new Date(info.expiresAt),
+                            connectLinkUrl: '',
+                        }),
+                    });
+                    await new Promise((resolve, reject) => {
+                        pd.connectAccount({
+                            app: appKey,
+                            onSuccess: () => resolve(),
+                            onError: (err) => reject(err),
+                        });
+                    });
+                    break;
+                }
+                case 'nango': {
+                    await launchNangoConnect(info.connectLink, appKey, api);
+                    break;
+                }
+                default: {
+                    // Exhaustiveness check — TypeScript will error if a new ConnectInfo
+                    // variant is added without a matching branch here.
+                    const _exhaustive = info;
+                    throw new Error(`Unknown connect provider: ${JSON.stringify(_exhaustive)}`);
+                }
+            }
             await loadData();
         }
         finally {

package/dist/components/connections/launch-nango-connect.d.ts

@@ -0,0 +1,13 @@
+import type { ConnectionsApi } from '../../types/connections-api';
+/**
+ * Open a Nango Connect popup and resolve when the connection appears in the
+ * backend (Nango calls our server-side webhook independently — polling is
+ * just how the UI discovers that). Rejects if the popup is closed before a
+ * connection is established or if the overall flow exceeds the timeout.
+ *
+ * We intentionally do not rely on Nango's `postMessage` events: those are
+ * not delivered when popup blockers interfere or when the auth flow ends on
+ * a different origin. Polling the connections list is browser-agnostic and
+ * works regardless of whether the popup ever posts back.
+ */
+export declare function launchNangoConnect(connectLink: string, appKey: string, api: ConnectionsApi): Promise<void>;

package/dist/components/connections/launch-nango-connect.js

@@ -0,0 +1,63 @@
+const POPUP_FEATURES = 'width=600,height=700,popup=yes';
+const POLL_INTERVAL_MS = 1500;
+const POLL_TIMEOUT_MS = 5 * 60 * 1000;
+/**
+ * Open a Nango Connect popup and resolve when the connection appears in the
+ * backend (Nango calls our server-side webhook independently — polling is
+ * just how the UI discovers that). Rejects if the popup is closed before a
+ * connection is established or if the overall flow exceeds the timeout.
+ *
+ * We intentionally do not rely on Nango's `postMessage` events: those are
+ * not delivered when popup blockers interfere or when the auth flow ends on
+ * a different origin. Polling the connections list is browser-agnostic and
+ * works regardless of whether the popup ever posts back.
+ */
+export async function launchNangoConnect(connectLink, appKey, api) {
+    const popup = window.open(connectLink, 'fask-connect', POPUP_FEATURES);
+    if (!popup) {
+        throw new Error('Connect popup was blocked by the browser. Allow popups for this site and try again.');
+    }
+    const startedAt = Date.now();
+    return new Promise((resolve, reject) => {
+        const finish = (action) => {
+            clearInterval(intervalId);
+            if (!popup.closed)
+                popup.close();
+            action();
+        };
+        const intervalId = window.setInterval(async () => {
+            if (Date.now() - startedAt > POLL_TIMEOUT_MS) {
+                finish(() => reject(new Error('Connect flow timed out after 5 minutes.')));
+                return;
+            }
+            try {
+                const conns = await api.getConnections();
+                const found = conns.find((c) => c.appKey === appKey && c.status === 'connected');
+                if (found) {
+                    finish(() => resolve());
+                    return;
+                }
+            }
+            catch {
+                // Transient fetch error — keep polling. A persistent failure will
+                // hit the timeout above.
+            }
+            if (popup.closed) {
+                // Popup closed without the connection appearing — treat as cancel.
+                // Run one more check first in case the connection landed between
+                // the last poll and the close.
+                try {
+                    const conns = await api.getConnections();
+                    if (conns.find((c) => c.appKey === appKey && c.status === 'connected')) {
+                        finish(() => resolve());
+                        return;
+                    }
+                }
+                catch {
+                    // Ignore — fall through to cancel.
+                }
+                finish(() => reject(new Error('Connect window was closed before authorization completed.')));
+            }
+        }, POLL_INTERVAL_MS);
+    });
+}

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { AvailableAppsList } from './components/connections/available-apps-list'
 export { AppSearchGrid } from './components/connections/app-search-grid';
 export { ConnectionsPanel } from './components/connections/connections-panel';
 export type { FaskConnection, FaskSearchableApp } from './types/connections';
-export type { ConnectionsApi } from './types/connections-api';
+export type { ConnectionsApi, ConnectInfo } from './types/connections-api';
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './components/ui/card';
 export { Badge, badgeVariants } from './components/ui/badge';
 export { Button, buttonVariants } from './components/ui/button';

package/dist/types/connections-api.d.ts

@@ -1,10 +1,35 @@
 import type { FaskConnection, FaskSearchableApp } from './connections';
+/**
+ * Information returned from `ConnectionsApi.connect()` to drive the
+ * provider-specific Connect UX in `ConnectionsPanel`.
+ *
+ * Each variant carries exactly the data its launch flow needs:
+ *   - `pipedream` → token + expiresAt, passed to Pipedream's frontend SDK
+ *     (`createFrontendClient` + `connectAccount`) which renders Pipedream's
+ *     hosted popup.
+ *   - `nango` → connectLink, a Nango Connect URL that we open in a popup and
+ *     poll the connections list to detect completion.
+ *
+ * The discriminator (`provider`) MUST be present so `ConnectionsPanel` can
+ * branch exhaustively. Adding a new provider means adding a new variant here
+ * and a new branch in the panel — TypeScript will catch missing branches.
+ */
+export type ConnectInfo = {
+    provider: 'pipedream';
+    token: string;
+    expiresAt: string;
+} | {
+    provider: 'nango';
+    connectLink: string;
+};
 export interface ConnectionsApi {
     getConnections(): Promise<FaskConnection[]>;
     searchApps(query: string): Promise<FaskSearchableApp[]>;
-    getConnectToken(appKey: string): Promise<{
-        token: string;
-        expiresAt: string;
-    }>;
+    /**
+     * Start a connect flow for `appKey`. Returns provider-specific launch info
+     * that `ConnectionsPanel` uses to render the appropriate UI (Pipedream
+     * popup vs Nango Connect popup).
+     */
+    connect(appKey: string): Promise<ConnectInfo>;
     disconnect(connectionId: string): Promise<void>;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@faskai/ui-commons",
   "author": "Fask AI <arko@fask.ai>",
-  "version": "0.0.0-alpha.28",
+  "version": "0.0.0-alpha.30",
   "description": "Common UI components for Fask applications.",
   "private": false,
   "main": "dist/index.js",

package/dist/components/index.d.ts

@@ -1,2 +0,0 @@
-export { GTMProvider } from './gtm/gtm-provider';
-export { default as BetaMarketingBanner } from './marketing/BetaMarketingBanner';

package/dist/components/index.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BetaMarketingBanner = exports.GTMProvider = void 0;
-var gtm_provider_1 = require("./gtm/gtm-provider");
-Object.defineProperty(exports, "GTMProvider", { enumerable: true, get: function () { return gtm_provider_1.GTMProvider; } });
-var BetaMarketingBanner_1 = require("./marketing/BetaMarketingBanner");
-Object.defineProperty(exports, "BetaMarketingBanner", { enumerable: true, get: function () { return __importDefault(BetaMarketingBanner_1).default; } });

package/dist/components/marketing/BetaMarketingBanner.d.ts

@@ -1,7 +0,0 @@
-interface BetaMarketingBannerProps {
-    variant?: 'full' | 'compact';
-    showBetaOffer?: boolean;
-    className?: string;
-}
-export default function BetaMarketingBanner({ variant, showBetaOffer, className, }: BetaMarketingBannerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/marketing/BetaMarketingBanner.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = BetaMarketingBanner;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const features = [
-    {
-        emoji: '⚡',
-        title: 'Fastest AI Voice Chat',
-        description: 'Industry-leading response times',
-    },
-    {
-        emoji: '🧠',
-        title: 'Self-Learning AI Agents',
-        description: 'Fine-tune with your data or bring your own LLM',
-    },
-    {
-        emoji: '👆',
-        title: 'Easiest Setup',
-        description: '1-click deployment worldwide',
-    },
-    {
-        emoji: '🌍',
-        title: 'Any Language',
-        description: 'Human-sounding in 100+ languages',
-    },
-    {
-        emoji: '🎥',
-        title: 'Truly Multi-Modal',
-        description: 'Voice, Video, and Text channels',
-    },
-    {
-        emoji: '📈',
-        title: 'Infinitely Scalable',
-        description: 'Grows with your business needs',
-    },
-];
-function BetaMarketingBanner({ variant = 'full', showBetaOffer = true, className = '', }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `relative overflow-hidden rounded-2xl bg-gradient-to-br from-gray-50 via-white to-gray-100 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-gray-600 to-gray-800" }), (0, jsx_runtime_1.jsxs)("div", { className: "max-w-6xl mx-auto px-4 py-8 md:py-12", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-8 md:mb-12", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-3xl md:text-4xl font-bold mb-4 text-gray-900", children: "Best-in-Class AI Features" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed", children: "Experience the future of customer engagement with our cutting-edge AI technology" })] }), (0, jsx_runtime_1.jsx)("div", { className: `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 ${showBetaOffer ? 'mb-12' : ''}`, children: features.map((feature, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "group bg-white/70 backdrop-blur-sm rounded-xl p-6 border border-gray-100 hover:border-gray-200 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-14 h-14 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center mx-auto mb-4 text-2xl shadow-md group-hover:shadow-lg transition-all duration-300", children: feature.emoji }), (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: feature.title }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 leading-relaxed", children: feature.description })] }, index))) }), showBetaOffer && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gradient-to-br from-green-50 to-blue-50 rounded-2xl border-2 border-green-200 p-6 md:p-8 relative overflow-hidden", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-gradient-to-r from-green-100/20 to-blue-100/20 animate-pulse" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center mb-4", children: (0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-500 text-white animate-pulse", children: "LIMITED TIME" }) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-2xl md:text-3xl font-bold text-gray-900 mb-2", children: "\uD83D\uDE80 Beta Launch Special" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-600 max-w-lg mx-auto leading-relaxed", children: "Join our exclusive Beta program and get unprecedented access to our founders and AI technology." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-white/60 backdrop-blur-sm rounded-xl p-6 border border-green-200 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl mb-3", children: "\uD83D\uDCB0" }), (0, jsx_runtime_1.jsx)("h4", { className: "text-lg font-semibold text-gray-900 mb-2", children: "50% OFF First Year" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 leading-relaxed", children: "Exclusive Beta pricing for early adopters. Save hundreds on your first year subscription." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-white/60 backdrop-blur-sm rounded-xl p-6 border border-green-200 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl mb-3", children: "\uD83E\uDD1D" }), (0, jsx_runtime_1.jsx)("h4", { className: "text-lg font-semibold text-gray-900 mb-2", children: "Priority Founder Support" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 leading-relaxed", children: "Get immediate, direct access to our founders for support, feature requests, and guidance." })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("a", { href: "https://biz.fask.ai/billing?price-tier=beta&period=year", target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center px-8 py-3 rounded-lg bg-gray-900 hover:bg-gray-800 text-white font-semibold text-lg shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-300 border border-gray-900", children: "Subscribe Now" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-500 mt-4 opacity-80", children: "* Billed annually. Beta offer valid for limited customers only." })] })] })] }))] })] }));
-}