@uranotools/urano-social 0.0.0-stage → 0.3.0

package/dist/flavors/styles.css

@@ -0,0 +1,257 @@
+:root, .urano-social-host {
+  --us-bg: #0f1419;
+  --us-panel: #1a2332;
+  --us-border: #2a3a4f;
+  --us-text: #e8eef6;
+  --us-muted: #8fa3b8;
+  --us-accent: #3dba9a;
+  --us-accent-contrast: #06241c;
+  --us-user-bg: #243447;
+  --us-bot-bg: #15202b;
+  --us-danger: #e35d6a;
+  --us-radius: 14px;
+  --us-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
+  --us-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  --us-z: 2147483000;
+}
+
+.urano-social-host {
+  font-family: var(--us-font);
+  color: var(--us-text);
+  box-sizing: border-box;
+}
+
+.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: "▍";
+  display: inline-block;
+  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 input,
+.urano-social-composer textarea {
+  flex: 1;
+  resize: none;
+  min-height: 42px;
+  max-height: 120px;
+  border-radius: 10px;
+  border: 1px solid var(--us-border);
+  background: var(--us-bg);
+  color: var(--us-text);
+  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: 0.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;
+}
+
+/* Contact form (light DOM / React) */
+.urano-social-contact {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  max-width: 420px;
+  background: var(--us-panel, #1a2332);
+  border: 1px solid var(--us-border, #2a3a4f);
+  border-radius: var(--us-radius, 14px);
+  color: var(--us-text, #e8eef6);
+  font-family: var(--us-font, ui-sans-serif, system-ui, sans-serif);
+}
+
+.urano-social-contact h3 {
+  margin: 0 0 4px;
+  font-size: 16px;
+}
+
+.urano-social-contact label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--us-muted, #8fa3b8);
+}
+
+.urano-social-contact input,
+.urano-social-contact textarea {
+  border: 1px solid var(--us-border, #2a3a4f);
+  border-radius: 10px;
+  background: var(--us-bg, #0f1419);
+  color: var(--us-text, #e8eef6);
+  padding: 10px 12px;
+  font: inherit;
+}
+
+.urano-social-contact button {
+  border: 0;
+  border-radius: 10px;
+  background: var(--us-accent, #3dba9a);
+  color: var(--us-accent-contrast, #06241c);
+  padding: 10px 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.urano-social-contact button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { createUranoChat } from './client/createUranoChat';
+export type { UranoChat } from './client/createUranoChat';
+export { readSseStream, parseSseChunk } from './client/sse';
+export { submitContactForm, fetchContactTicket } from './client/submitContactForm';
+export type { ContactFormPayload, ContactFormResult, ContactTicketResponse, SubmitContactFormOptions, } from './client/submitContactForm';
+export { createSocialProxy, socialProxyRoute } from './server/proxy';
+export { attachSocialWebSocket, buildWsEnvelope } from './server/websocket';
+export { registerUranoSocialChat, UranoSocialChatElement } from './flavors/UranoSocialChatElement';
+export type { SocialFlavor } from './flavors/UranoSocialChatElement';
+export { registerUranoSocialContactForm, UranoSocialContactFormElement } from './flavors/UranoSocialContactFormElement';
+export { signHmacHex, verifyHmacHex, randomId } from './crypto';
+export { DEFAULT_HONEYPOT_FIELD, DEFAULT_RECAPTCHA_ACTION, } from './types';
+export type { SocialProxyConfig, ContactAntiSpamConfig, SocialClientMessage, SocialChatEvent, CreateUranoChatOptions, SocialSendOptions, SocialTransport, } from './types';
+export { loadRecaptchaV3, executeRecaptchaV3 } from './client/recaptcha';

package/dist/index.js

@@ -0,0 +1,10 @@
+export { createUranoChat } from './client/createUranoChat';
+export { readSseStream, parseSseChunk } from './client/sse';
+export { submitContactForm, fetchContactTicket } from './client/submitContactForm';
+export { createSocialProxy, socialProxyRoute } from './server/proxy';
+export { attachSocialWebSocket, buildWsEnvelope } from './server/websocket';
+export { registerUranoSocialChat, UranoSocialChatElement } from './flavors/UranoSocialChatElement';
+export { registerUranoSocialContactForm, UranoSocialContactFormElement } from './flavors/UranoSocialContactFormElement';
+export { signHmacHex, verifyHmacHex, randomId } from './crypto';
+export { DEFAULT_HONEYPOT_FIELD, DEFAULT_RECAPTCHA_ACTION, } from './types';
+export { loadRecaptchaV3, executeRecaptchaV3 } from './client/recaptcha';

package/dist/react/UranoSocialChat.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { type UranoChat } from '../client/createUranoChat';
+import type { SocialClientMessage } from '../types';
+export type SocialFlavor = 'floating' | 'sidebar' | 'headless';
+export interface UranoSocialChatProps {
+    flavor?: SocialFlavor;
+    endpoint?: string;
+    title?: string;
+    displayName?: string;
+    className?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    renderHeader?: (props: {
+        title: string;
+        onClose: () => void;
+    }) => React.ReactNode;
+    renderMessages?: (props: {
+        messages: SocialClientMessage[];
+    }) => React.ReactNode;
+    renderMessage?: (message: SocialClientMessage) => React.ReactNode;
+    renderComposer?: (props: {
+        disabled: boolean;
+        value: string;
+        onChange: (value: string) => void;
+        onSubmit: () => void;
+    }) => React.ReactNode;
+    renderLauncher?: (props: {
+        open: boolean;
+        onToggle: () => void;
+    }) => React.ReactNode;
+    renderEmpty?: () => React.ReactNode;
+}
+export declare function UranoSocialChat(props: UranoSocialChatProps): React.JSX.Element | null;
+export declare function useUranoChat(options: {
+    endpoint?: string;
+    displayName?: string;
+}): UranoChat;

package/dist/react/UranoSocialChat.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createUranoChat } from '../client/createUranoChat';
+export function UranoSocialChat(props) {
+    const flavor = props.flavor || 'floating';
+    const [open, setOpen] = useState(props.open ?? props.defaultOpen ?? flavor === 'sidebar');
+    const [messages, setMessages] = useState([]);
+    const [streaming, setStreaming] = useState(false);
+    const [error, setError] = useState('');
+    const [draft, setDraft] = useState('');
+    const chatRef = useRef(null);
+    useEffect(() => {
+        if (props.open !== undefined)
+            setOpen(props.open);
+    }, [props.open]);
+    useEffect(() => {
+        const chat = createUranoChat({
+            endpoint: props.endpoint || '/api/urano-social',
+            displayName: props.displayName,
+            onMessages: setMessages,
+            onError: (err) => setError(err.message),
+            onStatus: (status) => setStreaming(status.streaming),
+        });
+        chatRef.current = chat;
+        return () => chat.destroy();
+    }, [props.endpoint, props.displayName]);
+    const setOpenBoth = (next) => {
+        setOpen(next);
+        props.onOpenChange?.(next);
+    };
+    const onSubmit = async () => {
+        const text = draft.trim();
+        if (!text || !chatRef.current)
+            return;
+        setDraft('');
+        setError('');
+        try {
+            await chatRef.current.send(text);
+        }
+        catch (err) {
+            setError(err?.message || 'send_failed');
+        }
+    };
+    const header = props.renderHeader
+        ? props.renderHeader({ title: props.title || 'Atención al cliente', onClose: () => setOpenBoth(false) })
+        : (_jsxs("div", { className: "urano-social-header", children: [_jsx("h2", { children: props.title || 'Atención al cliente' }), _jsx("button", { type: "button", onClick: () => setOpenBoth(false), "aria-label": "Cerrar", children: "\u00D7" })] }));
+    const messageList = props.renderMessages
+        ? props.renderMessages({ messages })
+        : (_jsx("div", { className: "urano-social-messages", children: messages.length === 0
+                ? (props.renderEmpty?.() || _jsx("div", { className: "urano-social-empty", children: "Escribe tu consulta y te atendemos." }))
+                : messages.map((m) => (props.renderMessage
+                    ? _jsx(React.Fragment, { children: props.renderMessage(m) }, m.id)
+                    : (_jsx("div", { className: "urano-social-bubble", "data-role": m.role, "data-streaming": m.streaming ? 'true' : 'false', children: m.content }, m.id)))) }));
+    const composer = props.renderComposer
+        ? props.renderComposer({
+            disabled: streaming,
+            value: draft,
+            onChange: setDraft,
+            onSubmit,
+        })
+        : (_jsxs("form", { className: "urano-social-composer", onSubmit: (e) => {
+                e.preventDefault();
+                void onSubmit();
+            }, children: [_jsx("textarea", { rows: 1, value: draft, disabled: streaming, placeholder: "Escribe un mensaje\u2026", onChange: (e) => setDraft(e.target.value) }), _jsx("button", { type: "submit", disabled: streaming || !draft.trim(), children: "Enviar" })] }));
+    const launcher = flavor === 'floating'
+        ? (props.renderLauncher
+            ? props.renderLauncher({ open, onToggle: () => setOpenBoth(!open) })
+            : _jsx("button", { type: "button", className: "urano-social-launcher", onClick: () => setOpenBoth(!open), children: "\uD83D\uDCAC" }))
+        : null;
+    if (flavor === 'headless')
+        return null;
+    return (_jsxs("div", { className: ['urano-social-host', props.className].filter(Boolean).join(' '), "data-flavor": flavor, "data-open": String(open), children: [launcher, _jsxs("div", { className: "urano-social-panel", children: [header, messageList, error ? _jsx("div", { className: "urano-social-error", children: error }) : null, composer] })] }));
+}
+export function useUranoChat(options) {
+    const chat = useMemo(() => createUranoChat({
+        endpoint: options.endpoint,
+        displayName: options.displayName,
+    }), [options.endpoint, options.displayName]);
+    useEffect(() => () => chat.destroy(), [chat]);
+    return chat;
+}

package/dist/react/UranoSocialContactForm.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface UranoSocialContactFormProps {
+    endpoint?: string;
+    title?: string;
+    submitLabel?: string;
+    className?: string;
+    /** Public reCAPTCHA v3 site key — paste from Google admin; secret stays server-side. */
+    recaptchaSiteKey?: string;
+    recaptchaAction?: string;
+    honeypotField?: string;
+    onSuccess?: (text: string) => void;
+    onError?: (error: string) => void;
+    renderFields?: (props: {
+        values: Record<string, string>;
+        setValue: (key: string, value: string) => void;
+        disabled: boolean;
+    }) => React.ReactNode;
+}
+export declare function UranoSocialContactForm(props: UranoSocialContactFormProps): React.JSX.Element;

package/dist/react/UranoSocialContactForm.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { fetchContactTicket, submitContactForm } from '../client/submitContactForm';
+import { DEFAULT_HONEYPOT_FIELD } from '../types';
+export function UranoSocialContactForm(props) {
+    const honeypotField = props.honeypotField || DEFAULT_HONEYPOT_FIELD;
+    const endpoint = props.endpoint || '/api/urano-social';
+    const [values, setValues] = useState({
+        name: '',
+        email: '',
+        subject: '',
+        message: '',
+        [honeypotField]: '',
+    });
+    const [ticket, setTicket] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+    const [success, setSuccess] = useState('');
+    useEffect(() => {
+        let cancelled = false;
+        fetchContactTicket(endpoint)
+            .then((res) => { if (!cancelled)
+            setTicket(res.ticket); })
+            .catch(() => { });
+        return () => { cancelled = true; };
+    }, [endpoint]);
+    const setValue = (key, value) => {
+        setValues((prev) => ({ ...prev, [key]: value }));
+    };
+    const onSubmit = async (ev) => {
+        ev.preventDefault();
+        if (busy)
+            return;
+        setBusy(true);
+        setError('');
+        setSuccess('');
+        try {
+            const result = await submitContactForm({
+                name: values.name,
+                email: values.email,
+                subject: values.subject,
+                message: values.message,
+                website: values[honeypotField] || '',
+                contactTicket: ticket || undefined,
+            }, {
+                endpoint,
+                recaptchaSiteKey: props.recaptchaSiteKey,
+                recaptchaAction: props.recaptchaAction,
+            });
+            if (!result.ok)
+                throw new Error(result.error || 'send_failed');
+            const msg = 'Enviado. Te responderemos por correo.';
+            setSuccess(msg);
+            props.onSuccess?.(result.text || msg);
+            setValues({
+                name: '',
+                email: '',
+                subject: '',
+                message: '',
+                [honeypotField]: '',
+            });
+            const next = await fetchContactTicket(endpoint).catch(() => null);
+            if (next)
+                setTicket(next.ticket);
+        }
+        catch (e) {
+            const msg = e?.message || 'send_failed';
+            setError(msg);
+            props.onError?.(msg);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("form", { className: ['urano-social-contact', props.className].filter(Boolean).join(' '), onSubmit: onSubmit, children: [_jsx("h3", { children: props.title || 'Contáctanos' }), props.renderFields
+                ? props.renderFields({ values, setValue, disabled: busy })
+                : (_jsxs(_Fragment, { children: [_jsxs("label", { children: ["Nombre", _jsx("input", { value: values.name, disabled: busy, onChange: (e) => setValue('name', e.target.value) })] }), _jsxs("label", { children: ["Email", _jsx("input", { type: "email", required: true, value: values.email, disabled: busy, onChange: (e) => setValue('email', e.target.value) })] }), _jsxs("label", { children: ["Asunto", _jsx("input", { value: values.subject, disabled: busy, onChange: (e) => setValue('subject', e.target.value) })] }), _jsxs("label", { children: ["Mensaje", _jsx("textarea", { required: true, rows: 4, value: values.message, disabled: busy, onChange: (e) => setValue('message', e.target.value) })] })] })), _jsxs("label", { "aria-hidden": "true", style: { position: 'absolute', left: '-10000px', top: 'auto', width: 1, height: 1, overflow: 'hidden' }, children: [honeypotField, _jsx("input", { tabIndex: -1, autoComplete: "off", name: honeypotField, value: values[honeypotField] || '', onChange: (e) => setValue(honeypotField, e.target.value) })] }), error ? _jsx("p", { className: "urano-social-error", children: error }) : null, success ? _jsx("p", { style: { color: 'var(--us-accent, #3dba9a)', fontSize: 12 }, children: success }) : null, _jsx("button", { type: "submit", disabled: busy, children: props.submitLabel || 'Enviar' })] }));
+}

package/dist/react/index.d.ts

@@ -0,0 +1,4 @@
+export { UranoSocialChat, useUranoChat } from './UranoSocialChat';
+export type { UranoSocialChatProps, SocialFlavor } from './UranoSocialChat';
+export { UranoSocialContactForm } from './UranoSocialContactForm';
+export type { UranoSocialContactFormProps } from './UranoSocialContactForm';

package/dist/react/index.js

@@ -0,0 +1,2 @@
+export { UranoSocialChat, useUranoChat } from './UranoSocialChat';
+export { UranoSocialContactForm } from './UranoSocialContactForm';

package/dist/server/antiSpam.d.ts

@@ -0,0 +1,76 @@
+import { DEFAULT_HONEYPOT_FIELD, DEFAULT_RECAPTCHA_ACTION, type ContactAntiSpamConfig } from '../types';
+export { DEFAULT_HONEYPOT_FIELD, DEFAULT_RECAPTCHA_ACTION };
+export declare const DEFAULT_RECAPTCHA_MIN_SCORE = 0.5;
+export declare const DEFAULT_CONTACT_MIN_AGE_MS = 2500;
+export declare const DEFAULT_CONTACT_MAX_AGE_MS: number;
+export declare const DEFAULT_CONTACT_MAX_PER_HOUR = 5;
+export declare const DEFAULT_CONTACT_MAX_MESSAGE_CHARS = 4000;
+export declare function resolveAntiSpamConfig(partial?: Partial<ContactAntiSpamConfig>): ContactAntiSpamConfig;
+export declare function issueContactTicket(secret: string, now?: number): string;
+export declare function verifyContactTicket(ticket: string | undefined, secret: string, opts: {
+    minAgeMs: number;
+    maxAgeMs: number;
+}, now?: number): {
+    ok: true;
+    issuedAt: number;
+} | {
+    ok: false;
+    error: string;
+};
+export declare function checkContactRateLimit(key: string, maxPerHour: number, now?: number): {
+    ok: true;
+} | {
+    ok: false;
+    error: string;
+    retryAfterSec: number;
+};
+/** Test helper — clears in-memory rate buckets. */
+export declare function resetContactRateLimits(): void;
+export declare function validateContactFields(input: {
+    email?: unknown;
+    message?: unknown;
+    maxMessageChars: number;
+}): {
+    ok: true;
+    email: string;
+    message: string;
+} | {
+    ok: false;
+    error: string;
+};
+export declare function verifyRecaptchaV3(opts: {
+    secret: string;
+    token: string;
+    minScore: number;
+    expectedAction: string;
+    remoteIp?: string | null;
+}): Promise<{
+    ok: true;
+    score: number;
+} | {
+    ok: false;
+    error: string;
+}>;
+export declare function clientIpFromRequest(request: Request): string | null;
+/**
+ * Runs contact anti-spam gates. On honeypot hit returns softOk so the proxy
+ * can fake a success without calling the AI webhook.
+ */
+export declare function enforceContactAntiSpam(opts: {
+    body: Record<string, unknown>;
+    request: Request;
+    visitorId: string;
+    ticketSecret: string;
+    config: ContactAntiSpamConfig;
+}): Promise<{
+    ok: true;
+} | {
+    ok: false;
+    softOk: true;
+    fakeText: string;
+} | {
+    ok: false;
+    status: number;
+    error: string;
+    retryAfterSec?: number;
+}>;