@konvo-ai/sdk-web/dist/KonvoAdView.js

KonvoAI Conversational Ad SDK for Web Applications - Intelligent contextual advertising with AI-powered decision engine

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.KonvoAdView = void 0;
const react_1 = __importStar(require("react"));
const core_1 = require("./core");
const KonvoAdView = ({ intent, placement = 'chat', style, onFill, onNoFill }) => {
    const [ad, setAd] = (0, react_1.useState)(null);
    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
    (0, react_1.useEffect)(() => {
        let mounted = true;
        const fetchAd = async () => {
            try {
                // Call the decide API with the intent
                const decision = await core_1.KonvoAIAds.decide({
                    user: {
                        anonId: core_1.KonvoAIAds.generateAnonId(),
                        country: navigator.language.split('-')[1] || 'US',
                        language: navigator.language.split('-')[0] || 'en'
                    },
                    chat: {
                        lastUserMsg: intent,
                        context: placement
                    },
                    surface: 'inline-chip'
                });
                if (!mounted)
                    return;
                if (decision.fill && decision.render) {
                    setAd(decision);
                    onFill?.(decision);
                    // Track impression automatically
                    await core_1.KonvoAIAds.handleImpression(decision);
                }
                else {
                    onNoFill?.();
                }
            }
            catch (err) {
                console.error('KonvoAdView: Failed to fetch ad', err);
                onNoFill?.();
            }
            finally {
                if (mounted) {
                    setIsLoading(false);
                }
            }
        };
        fetchAd();
        return () => {
            mounted = false;
        };
    }, [intent, placement]);
    // No ad available - render nothing
    if (!ad || !ad.fill || !ad.render) {
        return null;
    }
    const { title, desc, imageUrl, cta } = ad.render;
    // Default styles for the ad container
    const containerStyles = {
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: '#e5e7eb',
        borderRadius: 8,
        padding: 12,
        backgroundColor: '#ffffff',
        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
        ...style
    };
    const imageStyles = {
        width: '100%',
        maxWidth: 300,
        height: 150,
        objectFit: 'cover',
        borderRadius: 4,
        marginBottom: 8
    };
    const titleStyles = {
        fontWeight: 600,
        fontSize: 16,
        color: '#111827',
        marginBottom: 4,
        lineHeight: 1.4
    };
    const descStyles = {
        fontSize: 14,
        color: '#6b7280',
        marginBottom: 12,
        lineHeight: 1.5
    };
    const buttonStyles = {
        padding: '8px 16px',
        backgroundColor: '#3b82f6',
        color: '#ffffff',
        border: 'none',
        borderRadius: 6,
        fontSize: 14,
        fontWeight: 500,
        cursor: 'pointer',
        transition: 'background-color 0.2s',
        width: '100%'
    };
    const adBadgeStyles = {
        position: 'absolute',
        top: 4,
        right: 4,
        fontSize: 10,
        color: '#9ca3af',
        backgroundColor: 'rgba(255, 255, 255, 0.9)',
        padding: '2px 6px',
        borderRadius: 4,
        fontWeight: 500
    };
    return (react_1.default.createElement("div", { style: containerStyles },
        react_1.default.createElement("div", { style: { position: 'relative' } },
            react_1.default.createElement("span", { style: adBadgeStyles }, "Ad"),
            imageUrl && (react_1.default.createElement("img", { src: imageUrl, alt: title, style: imageStyles, onError: (e) => {
                    // Hide broken images
                    e.target.style.display = 'none';
                } })),
            title && react_1.default.createElement("h4", { style: titleStyles }, title),
            desc && react_1.default.createElement("p", { style: descStyles }, desc),
            cta && (react_1.default.createElement("button", { style: buttonStyles, onClick: cta.handler, onMouseEnter: (e) => {
                    e.currentTarget.style.backgroundColor = '#2563eb';
                }, onMouseLeave: (e) => {
                    e.currentTarget.style.backgroundColor = '#3b82f6';
                } }, cta.label)))));
};
exports.KonvoAdView = KonvoAdView;