@uranotools/urano-social 0.0.0-stage → 0.3.0

package/dist/client/submitContactForm.d.ts

@@ -0,0 +1,61 @@
+export interface ContactFormPayload {
+    name?: string;
+    email: string;
+    message: string;
+    subject?: string;
+    phone?: string;
+    company?: string;
+    /**
+     * Honeypot value — must stay empty. Bots that fill it are silently dropped
+     * by the proxy (fake success, no AI call).
+     */
+    website?: string;
+    /** Signed ticket from GET ?action=contact-ticket (auto-fetched when omitted). */
+    contactTicket?: string;
+    /** reCAPTCHA v3 token (or pass `recaptchaSiteKey` in options to auto-execute). */
+    captchaToken?: string;
+}
+export interface ContactFormResult {
+    ok: boolean;
+    text?: string;
+    sessionId?: string;
+    turnId?: string;
+    delivered?: string;
+    error?: string;
+    status: number;
+    raw?: unknown;
+}
+export interface ContactTicketResponse {
+    ticket: string;
+    minAgeMs: number;
+    maxAgeMs: number;
+    honeypotField: string;
+    recaptchaRequired: boolean;
+    recaptchaAction: string;
+}
+export interface SubmitContactFormOptions {
+    /** Site proxy endpoint. Default `/api/urano-social`. */
+    endpoint?: string;
+    /**
+     * Prefer GET ?mode=wait&payload=…
+     * Default **false** (POST) so tickets / captcha tokens stay out of URLs and logs.
+     */
+    useGet?: boolean;
+    signal?: AbortSignal;
+    /** When set, loads grecaptcha and executes action `contact` before submit. */
+    recaptchaSiteKey?: string;
+    /** Override reCAPTCHA action (must match server). Default `contact`. */
+    recaptchaAction?: string;
+    /** Skip auto ticket fetch (tests / custom flows). */
+    skipTicket?: boolean;
+}
+/** Prefetch a signed contact ticket (call on form mount). */
+export declare function fetchContactTicket(endpoint?: string, signal?: AbortSignal): Promise<ContactTicketResponse>;
+/**
+ * Submits a contact form through the site proxy.
+ * Default transport is POST + mode=wait (signed upstream by the server).
+ *
+ * Prefer calling `fetchContactTicket` when the form mounts so humans don't
+ * wait the min-age delay at submit time.
+ */
+export declare function submitContactForm(input: ContactFormPayload, options?: SubmitContactFormOptions): Promise<ContactFormResult>;

package/dist/client/submitContactForm.js

@@ -0,0 +1,133 @@
+import { executeRecaptchaV3 } from './recaptcha';
+function sleep(ms, signal) {
+    if (ms <= 0)
+        return Promise.resolve();
+    return new Promise((resolve, reject) => {
+        const timer = setTimeout(resolve, ms);
+        signal?.addEventListener('abort', () => {
+            clearTimeout(timer);
+            reject(new DOMException('Aborted', 'AbortError'));
+        }, { once: true });
+    });
+}
+/** Prefetch a signed contact ticket (call on form mount). */
+export async function fetchContactTicket(endpoint = '/api/urano-social', signal) {
+    const base = endpoint.replace(/\/$/, '');
+    const res = await fetch(`${base}?action=contact-ticket`, {
+        method: 'GET',
+        credentials: 'include',
+        signal,
+        headers: { Accept: 'application/json' },
+    });
+    const raw = await res.json().catch(() => ({}));
+    if (!res.ok || !raw?.ticket) {
+        throw new Error(String(raw?.error || 'contact_ticket_failed'));
+    }
+    const minAgeMs = Number(raw.minAgeMs);
+    const maxAgeMs = Number(raw.maxAgeMs);
+    return {
+        ticket: String(raw.ticket),
+        minAgeMs: Number.isFinite(minAgeMs) ? minAgeMs : 2500,
+        maxAgeMs: Number.isFinite(maxAgeMs) ? maxAgeMs : 30 * 60 * 1000,
+        honeypotField: String(raw.honeypotField || 'website'),
+        recaptchaRequired: Boolean(raw.recaptchaRequired),
+        recaptchaAction: String(raw.recaptchaAction || 'contact'),
+    };
+}
+/**
+ * Submits a contact form through the site proxy.
+ * Default transport is POST + mode=wait (signed upstream by the server).
+ *
+ * Prefer calling `fetchContactTicket` when the form mounts so humans don't
+ * wait the min-age delay at submit time.
+ */
+export async function submitContactForm(input, options = {}) {
+    const endpoint = (options.endpoint || '/api/urano-social').replace(/\/$/, '');
+    const email = String(input.email || '').trim();
+    const message = String(input.message || '').trim();
+    if (!email || !message) {
+        return { ok: false, status: 400, error: 'email_and_message_required' };
+    }
+    let contactTicket = input.contactTicket;
+    if (!contactTicket && !options.skipTicket) {
+        try {
+            const issued = await fetchContactTicket(endpoint, options.signal);
+            contactTicket = issued.ticket;
+            // Ticket was just minted — wait min age before POST (bot / headless path).
+            await sleep(issued.minAgeMs, options.signal);
+        }
+        catch (error) {
+            return {
+                ok: false,
+                status: 403,
+                error: error?.message || 'contact_ticket_failed',
+            };
+        }
+    }
+    let captchaToken = input.captchaToken;
+    if (!captchaToken && options.recaptchaSiteKey) {
+        try {
+            captchaToken = await executeRecaptchaV3(options.recaptchaSiteKey, options.recaptchaAction || 'contact');
+        }
+        catch (error) {
+            return {
+                ok: false,
+                status: 403,
+                error: error?.message || 'recaptcha_failed',
+            };
+        }
+    }
+    const payload = {
+        type: 'contact',
+        email,
+        name: input.name || undefined,
+        subject: input.subject || undefined,
+        message,
+        phone: input.phone || undefined,
+        company: input.company || undefined,
+        website: input.website ?? '',
+        contactTicket,
+        captchaToken: captchaToken || undefined,
+    };
+    const useGet = options.useGet === true;
+    let response;
+    if (useGet) {
+        const url = `${endpoint}?mode=wait&payload=${encodeURIComponent(JSON.stringify(payload))}`;
+        response = await fetch(url, {
+            method: 'GET',
+            credentials: 'include',
+            signal: options.signal,
+            headers: { Accept: 'application/json' },
+        });
+    }
+    else {
+        response = await fetch(`${endpoint}?mode=wait`, {
+            method: 'POST',
+            credentials: 'include',
+            signal: options.signal,
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+            },
+            body: JSON.stringify(payload),
+        });
+    }
+    const raw = await response.json().catch(() => ({}));
+    if (!response.ok) {
+        return {
+            ok: false,
+            status: response.status,
+            error: String(raw.error || raw.message || `http_${response.status}`),
+            raw,
+        };
+    }
+    return {
+        ok: true,
+        status: response.status,
+        text: String(raw.text || raw.response || ''),
+        sessionId: raw.sessionId ? String(raw.sessionId) : undefined,
+        turnId: raw.turnId ? String(raw.turnId) : undefined,
+        delivered: raw.delivered ? String(raw.delivered) : undefined,
+        raw,
+    };
+}

package/dist/crypto.d.ts

@@ -0,0 +1,5 @@
+export declare function signHmacHex(payload: string | Buffer, secret: string): string;
+export declare function verifyHmacHex(payload: string | Buffer, signature: string, secret: string): boolean;
+export declare function randomId(prefix?: string): string;
+export declare function signCookieValue(value: string, secret: string): string;
+export declare function verifyCookieValue(signed: string, secret: string): string | null;

package/dist/crypto.js

@@ -0,0 +1,35 @@
+import * as crypto from 'crypto';
+export function signHmacHex(payload, secret) {
+    return crypto.createHmac('sha256', secret).update(payload).digest('hex');
+}
+export function verifyHmacHex(payload, signature, secret) {
+    try {
+        const expected = signHmacHex(payload, secret);
+        const clean = String(signature || '').replace(/^(sha256=|sha1=)/i, '');
+        const a = Buffer.from(clean, 'hex');
+        const b = Buffer.from(expected, 'hex');
+        if (a.length !== b.length || a.length === 0)
+            return false;
+        return crypto.timingSafeEqual(a, b);
+    }
+    catch {
+        return false;
+    }
+}
+export function randomId(prefix = 'vis') {
+    return `${prefix}_${crypto.randomBytes(16).toString('hex')}`;
+}
+export function signCookieValue(value, secret) {
+    const sig = signHmacHex(value, secret);
+    return `${value}.${sig}`;
+}
+export function verifyCookieValue(signed, secret) {
+    const idx = signed.lastIndexOf('.');
+    if (idx <= 0)
+        return null;
+    const value = signed.slice(0, idx);
+    const sig = signed.slice(idx + 1);
+    if (!verifyHmacHex(value, sig, secret))
+        return null;
+    return value;
+}

package/dist/flavors/UranoSocialChatElement.d.ts

@@ -0,0 +1,13 @@
+import { type UranoChat } from '../client/createUranoChat';
+export type SocialFlavor = 'floating' | 'sidebar' | 'headless';
+export declare class UranoSocialChatElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get chat(): UranoChat | null;
+    render(): void;
+}
+export declare function registerUranoSocialChat(tagName?: string): void;

package/dist/flavors/UranoSocialChatElement.js

@@ -0,0 +1,173 @@
+import { createUranoChat } from '../client/createUranoChat';
+export class UranoSocialChatElement extends HTMLElement {
+    static get observedAttributes() {
+        return ['flavor', 'endpoint', 'title', 'open', 'displayname'];
+    }
+    #chat = null;
+    #shadow;
+    #open = false;
+    #messages = [];
+    #error = '';
+    #draft = '';
+    constructor() {
+        super();
+        this.#shadow = this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this.#open = this.getAttribute('open') === 'true' || this.getAttribute('flavor') === 'sidebar';
+        this.#chat = createUranoChat({
+            endpoint: this.getAttribute('endpoint') || '/api/urano-social',
+            displayName: this.getAttribute('displayname') || undefined,
+            onMessages: (msgs) => {
+                this.#messages = msgs;
+                this.render();
+            },
+            onError: (err) => {
+                this.#error = err.message;
+                this.render();
+            },
+            onStatus: () => this.render(),
+        });
+        this.render();
+    }
+    disconnectedCallback() {
+        this.#chat?.destroy();
+        this.#chat = null;
+    }
+    attributeChangedCallback() {
+        if (!this.#chat)
+            return;
+        const name = this.getAttribute('displayname');
+        if (name)
+            this.#chat.setDisplayName(name);
+        this.render();
+    }
+    get chat() {
+        return this.#chat;
+    }
+    render() {
+        const flavor = (this.getAttribute('flavor') || 'floating');
+        const title = this.getAttribute('title') || 'Atención al cliente';
+        const streaming = !!this.#chat?.streaming;
+        if (flavor === 'headless') {
+            this.#shadow.innerHTML = '';
+            return;
+        }
+        const bubbles = this.#messages.map((m) => `
+            <div class="urano-social-bubble" data-role="${m.role}" data-streaming="${m.streaming ? 'true' : 'false'}" part="message">
+                <slot name="message-${m.id}">${escapeHtml(m.content)}</slot>
+            </div>
+        `).join('');
+        this.#shadow.innerHTML = `
+            <link rel="stylesheet" href="">
+            <style>
+              @import url("data:text/css,");
+            </style>
+            <div class="urano-social-host" data-flavor="${flavor}" data-open="${this.#open}">
+              ${flavor === 'floating' ? `
+                <slot name="launcher">
+                  <button type="button" class="urano-social-launcher" part="launcher" aria-label="Abrir chat">💬</button>
+                </slot>` : ''}
+              <div class="urano-social-panel" part="panel">
+                <slot name="header">
+                  <div class="urano-social-header" part="header">
+                    <h2>${escapeHtml(title)}</h2>
+                    <button type="button" class="urano-social-close" aria-label="Cerrar">×</button>
+                  </div>
+                </slot>
+                <slot name="messages">
+                  <div class="urano-social-messages" part="messages">
+                    ${bubbles || `<slot name="empty"><div class="urano-social-empty" part="empty">Escribe tu consulta y te atendemos.</div></slot>`}
+                  </div>
+                </slot>
+                ${this.#error ? `<div class="urano-social-error">${escapeHtml(this.#error)}</div>` : ''}
+                <slot name="composer">
+                  <form class="urano-social-composer" part="composer">
+                    <textarea rows="1" placeholder="Escribe un mensaje…" ${streaming ? 'disabled' : ''}>${escapeHtml(this.#draft)}</textarea>
+                    <button type="submit" ${streaming ? 'disabled' : ''}>Enviar</button>
+                  </form>
+                </slot>
+              </div>
+            </div>
+        `;
+        // Inline critical CSS so the element works without a bundler CSS import.
+        const style = document.createElement('style');
+        style.textContent = getEmbeddedCss();
+        this.#shadow.prepend(style);
+        this.#shadow.querySelector('.urano-social-launcher')?.addEventListener('click', () => {
+            this.#open = !this.#open;
+            this.render();
+        });
+        this.#shadow.querySelector('.urano-social-close')?.addEventListener('click', () => {
+            this.#open = false;
+            this.render();
+        });
+        const form = this.#shadow.querySelector('form');
+        const textarea = form?.querySelector('textarea');
+        textarea?.addEventListener('input', () => {
+            this.#draft = textarea.value;
+        });
+        form?.addEventListener('submit', async (ev) => {
+            ev.preventDefault();
+            const text = (textarea?.value || '').trim();
+            if (!text || !this.#chat)
+                return;
+            this.#error = '';
+            this.#draft = '';
+            try {
+                await this.#chat.send(text);
+            }
+            catch (error) {
+                this.#error = error?.message || 'send_failed';
+                this.render();
+            }
+        });
+        const scroller = this.#shadow.querySelector('.urano-social-messages');
+        if (scroller)
+            scroller.scrollTop = scroller.scrollHeight;
+    }
+}
+function escapeHtml(value) {
+    return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+function getEmbeddedCss() {
+    // Keep a compact copy for Shadow DOM; full theme also ships as flavors.css.
+    return `
+:host { all: initial; }
+.urano-social-host{font-family:ui-sans-serif,system-ui,sans-serif;color:#e8eef6;--us-bg:#0f1419;--us-panel:#1a2332;--us-border:#2a3a4f;--us-accent:#3dba9a;--us-accent-contrast:#06241c;--us-user-bg:#243447;--us-bot-bg:#15202b;--us-danger:#e35d6a;--us-muted:#8fa3b8;--us-radius:14px;--us-shadow:0 18px 50px rgba(0,0,0,.35);--us-z:2147483000}
+.urano-social-host *,.urano-social-host *::before,.urano-social-host *::after{box-sizing:border-box}
+.urano-social-launcher{position:fixed;right:20px;bottom:20px;z-index:var(--us-z);width:56px;height:56px;border:0;border-radius:999px;background:var(--us-accent);color:var(--us-accent-contrast);font-size:22px;cursor:pointer;box-shadow:var(--us-shadow)}
+.urano-social-panel{display:flex;flex-direction:column;background:var(--us-panel);border:1px solid var(--us-border);border-radius:var(--us-radius);box-shadow:var(--us-shadow);overflow:hidden}
+.urano-social-host[data-flavor=floating] .urano-social-panel{position:fixed;right:20px;bottom:88px;z-index:var(--us-z);width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 120px))}
+.urano-social-host[data-flavor=sidebar]{position:fixed;top:0;right:0;z-index:var(--us-z);height:100vh;width:min(380px,100vw)}
+.urano-social-host[data-flavor=sidebar] .urano-social-panel{height:100%;border-radius:0;border-right:0;border-top:0;border-bottom:0}
+.urano-social-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--us-border);background:var(--us-bg)}
+.urano-social-header h2{margin:0;font-size:15px;font-weight:600}
+.urano-social-header button{border:0;background:transparent;color:var(--us-muted);cursor:pointer;font-size:18px}
+.urano-social-messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--us-bg)}
+.urano-social-empty{margin:auto;text-align:center;color:var(--us-muted);font-size:14px;padding:24px}
+.urano-social-bubble{max-width:85%;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
+.urano-social-bubble[data-role=user]{align-self:flex-end;background:var(--us-user-bg)}
+.urano-social-bubble[data-role=assistant]{align-self:flex-start;background:var(--us-bot-bg);border:1px solid var(--us-border)}
+.urano-social-bubble[data-streaming=true]::after{content:"▍";margin-left:2px;animation:us-blink 1s steps(2,jump-none) infinite}
+@keyframes us-blink{to{opacity:0}}
+.urano-social-composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--us-border);background:var(--us-panel)}
+.urano-social-composer textarea{flex:1;resize:none;min-height:42px;border-radius:10px;border:1px solid var(--us-border);background:var(--us-bg);color:#e8eef6;padding:10px 12px;font:inherit}
+.urano-social-composer button{border:0;border-radius:10px;background:var(--us-accent);color:var(--us-accent-contrast);padding:0 14px;font-weight:600;cursor:pointer}
+.urano-social-composer button:disabled{opacity:.55;cursor:not-allowed}
+.urano-social-error{color:var(--us-danger);font-size:12px;padding:0 12px 8px}
+.urano-social-host[data-open=false] .urano-social-panel{display:none}
+.urano-social-host[data-flavor=sidebar][data-open=false]{display:none}
+`;
+}
+export function registerUranoSocialChat(tagName = 'urano-social-chat') {
+    if (typeof customElements === 'undefined')
+        return;
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, UranoSocialChatElement);
+    }
+}

package/dist/flavors/UranoSocialContactFormElement.d.ts

@@ -0,0 +1,9 @@
+export declare class UranoSocialContactFormElement extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    render(): void;
+}
+export declare function registerUranoSocialContactForm(tagName?: string): void;

package/dist/flavors/UranoSocialContactFormElement.js

@@ -0,0 +1,103 @@
+import { submitContactForm } from '../client/submitContactForm';
+import { DEFAULT_HONEYPOT_FIELD } from '../types';
+export class UranoSocialContactFormElement extends HTMLElement {
+    static get observedAttributes() {
+        return ['endpoint', 'title', 'submit-label', 'recaptcha-site-key', 'honeypot-field'];
+    }
+    #shadow;
+    #busy = false;
+    #error = '';
+    #success = '';
+    constructor() {
+        super();
+        this.#shadow = this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+    render() {
+        const title = this.getAttribute('title') || 'Contáctanos';
+        const submitLabel = this.getAttribute('submit-label') || 'Enviar';
+        const honeypotField = this.getAttribute('honeypot-field') || DEFAULT_HONEYPOT_FIELD;
+        this.#shadow.innerHTML = `
+            <style>${css}</style>
+            <form class="us-contact" part="form">
+              <slot name="header"><h3 part="title">${escapeHtml(title)}</h3></slot>
+              <label>Nombre<input name="name" type="text" autocomplete="name" /></label>
+              <label>Email<input name="email" type="email" required autocomplete="email" /></label>
+              <label>Asunto<input name="subject" type="text" /></label>
+              <label>Mensaje<textarea name="message" rows="4" required></textarea></label>
+              <label class="hp" aria-hidden="true">${escapeHtml(honeypotField)}
+                <input name="${escapeHtml(honeypotField)}" type="text" tabindex="-1" autocomplete="off" />
+              </label>
+              ${this.#error ? `<p class="err" part="error">${escapeHtml(this.#error)}</p>` : ''}
+              ${this.#success ? `<p class="ok" part="success">${escapeHtml(this.#success)}</p>` : ''}
+              <button type="submit" ${this.#busy ? 'disabled' : ''} part="submit">${escapeHtml(submitLabel)}</button>
+            </form>
+        `;
+        const form = this.#shadow.querySelector('form');
+        form?.addEventListener('submit', async (ev) => {
+            ev.preventDefault();
+            if (this.#busy)
+                return;
+            const data = new FormData(form);
+            this.#busy = true;
+            this.#error = '';
+            this.#success = '';
+            this.render();
+            try {
+                const result = await submitContactForm({
+                    name: String(data.get('name') || ''),
+                    email: String(data.get('email') || ''),
+                    subject: String(data.get('subject') || ''),
+                    message: String(data.get('message') || ''),
+                    website: String(data.get(honeypotField) || ''),
+                }, {
+                    endpoint: this.getAttribute('endpoint') || '/api/urano-social',
+                    recaptchaSiteKey: this.getAttribute('recaptcha-site-key') || undefined,
+                });
+                if (!result.ok)
+                    throw new Error(result.error || 'send_failed');
+                this.#success = result.text
+                    ? 'Enviado. Te responderemos por correo.'
+                    : 'Enviado. Revisa tu bandeja de entrada.';
+            }
+            catch (e) {
+                this.#error = e?.message || 'send_failed';
+            }
+            finally {
+                this.#busy = false;
+                this.render();
+            }
+        });
+    }
+}
+function escapeHtml(value) {
+    return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+const css = `
+:host{all:initial;display:block;font-family:ui-sans-serif,system-ui,sans-serif;color:#e8eef6}
+.us-contact{display:flex;flex-direction:column;gap:10px;padding:16px;background:#1a2332;border:1px solid #2a3a4f;border-radius:14px;max-width:420px;position:relative}
+h3{margin:0 0 4px;font-size:16px}
+label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#8fa3b8}
+label.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
+input,textarea{border:1px solid #2a3a4f;border-radius:10px;background:#0f1419;color:#e8eef6;padding:10px 12px;font:inherit}
+button{border:0;border-radius:10px;background:#3dba9a;color:#06241c;padding:10px 14px;font-weight:600;cursor:pointer}
+button:disabled{opacity:.55;cursor:not-allowed}
+.err{color:#e35d6a;font-size:12px;margin:0}
+.ok{color:#3dba9a;font-size:12px;margin:0}
+`;
+export function registerUranoSocialContactForm(tagName = 'urano-social-contact') {
+    if (typeof customElements === 'undefined')
+        return;
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, UranoSocialContactFormElement);
+    }
+}