@7ots/cli 0.1.0

package/src/integrations/apumail.js

@@ -0,0 +1,88 @@
+/**
+ * Integración Apumail — dejar un mensaje / abrir un ticket por correo.
+ *
+ * Flujo:
+ *   LLM → send_email_ticket({subject, message, category, email?})
+ *       → confirmación con vista previa (el usuario ve exactamente lo que se enviará)
+ *       → POST {endpoint}/contact/apumail   (el proxy tiene la API key de apumail)
+ *       → el proxy lo envía desde tu buzón de apumail (APUMAIL_INBOX) a APUMAIL_TO, con transcript + URL + usuario.
+ *
+ * El navegador NUNCA tiene la clave de apumail. El destino (buzón de soporte) lo fija
+ * el servidor (APUMAIL_TO), así un prompt malicioso no puede enviar correos a terceros.
+ *
+ * ⚠ La forma exacta de la API de apumail.com es configurable en server/contact.mjs:
+ *   ajusta allí el payload si tu cuenta de apumail espera otros campos.
+ */
+
+import { escapeHtml } from '../ui/markdown.js';
+import { acceptLanguage } from '../llm/ProxyLLM.js';
+import { translator } from '../i18n/index.js';
+import '../i18n/messages/widget.js';
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+
+/**
+ * @param {object} o
+ * @param {string} o.endpoint              base del proxy, p. ej. "/api/agent"
+ * @param {string} [o.siteKey]
+ * @param {() => Array<{from,text}>} o.getTranscript
+ * @param {string[]} [o.categories]
+ * @param {(key: string, vars?: object) => string} [o.t]  traductor de la confirmación; su `locale`
+ *   viaja en Accept-Language para que el proxy conteste los errores en ese idioma
+ */
+export function createApumailActions({ endpoint, siteKey, getTranscript, categories = ['soporte', 'ventas', 'facturacion', 'otro'], t = translator() }) {
+  return [
+    {
+      name: 'send_email_ticket',
+      category: 'contact',
+      description:
+        'Envía un correo/ticket al equipo del sitio (vía apumail) con el resumen del caso y la conversación adjunta. ' +
+        'Úsalo cuando el usuario quiere dejar un mensaje, pedir algo que requiere a una persona sin esperar en línea, o reportar un problema. ' +
+        'Antes, asegúrate de tener un email de respuesta (el de la sesión o uno que el usuario te dé).',
+      parameters: {
+        type: 'object',
+        properties: {
+          subject: { type: 'string', description: 'Asunto breve y concreto' },
+          message: { type: 'string', description: 'Resumen claro del caso en tercera persona, con los datos relevantes' },
+          category: { type: 'string', enum: categories },
+          email: { type: 'string', description: 'Email de respuesta si el usuario no ha iniciado sesión' },
+          include_transcript: { type: 'boolean', description: 'Adjuntar la conversación (por defecto true)' },
+        },
+        required: ['subject', 'message', 'category'],
+      },
+      confirm: (args, { auth }) => {
+        const to = args.email || auth?.publicUser()?.email || t('widget.contact.noEmail');
+        return t('widget.contact.mailPreview', { subject: args.subject, to, message: args.message });
+      },
+      timeoutMs: 20000,
+      handler: async (args, { auth }) => {
+        const user = auth?.publicUser() || null;
+        const replyTo = (args.email || user?.email || '').trim();
+        if (!EMAIL_RE.test(replyTo)) {
+          return { ok: false, error: 'Falta un email de respuesta válido. Pídeselo al usuario.' };
+        }
+        const res = await fetch(`${endpoint.replace(/\/$/, '')}/contact/apumail`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', ...(siteKey ? { 'X-Site-Key': siteKey } : {}), ...acceptLanguage(t.locale) },
+          body: JSON.stringify({
+            subject: args.subject,
+            message: args.message,
+            category: args.category,
+            replyTo,
+            user,
+            page: { url: location.href, title: document.title },
+            transcript: args.include_transcript === false ? [] : getTranscript().slice(-40),
+          }),
+        });
+        const body = await res.json().catch(() => ({}));
+        if (!res.ok) return { ok: false, error: body.error || `No se pudo enviar (HTTP ${res.status})` };
+        return { ok: true, data: { sent: true, ticketId: body.ticketId || null, replyTo } };
+      },
+    },
+  ];
+}
+
+/** Plantilla opcional para mostrar el ticket enviado en un modal. */
+export function apumailTicketTemplate(data, { escape = escapeHtml, t = translator() } = {}) {
+  return `<div class="ots-ticket"><p><strong>${escape(t('widget.contact.ticket', { id: data.ticketId || '' }))}</strong></p><p>${escape(t('widget.contact.replyTo', { email: data.replyTo }))}</p></div>`;
+}

package/src/llm/ProxyLLM.js

@@ -0,0 +1,87 @@
+/**
+ * ProxyLLM — cliente del LLM desde el navegador.
+ *
+ * El navegador NUNCA tiene API keys: habla con el proxy de 7ots (`server/`) o con
+ * cualquier backend propio que implemente el mismo contrato:
+ *
+ *   POST {endpoint}/chat
+ *   body:  { system, messages, tools, session }
+ *          session: id aleatorio de la pestaña (sessionStorage); el proxy puede usarlo para
+ *          agrupar la conversación en su historial. No identifica a la persona.
+ *   resp:  { text, toolCalls: [{id, name, args}], finishReason, provider, raw? }
+ *
+ * Formato neutral de mensajes (independiente de OpenAI/Claude):
+ *   { role: 'user', content: string }
+ *   { role: 'assistant', content: string, toolCalls?: [...], raw?: any }
+ *   { role: 'tool', toolCallId, name, content: string, isError?: boolean }
+ *
+ * `raw` es el contenido original del proveedor (p. ej. bloques de Claude con
+ * thinking). El proxy lo necesita de vuelta para continuar el turno sin perder
+ * razonamiento; el navegador lo trata como opaco.
+ *
+ * Para usar otro transporte, pasa `llm: { step: async (req) => resp }` en la config.
+ */
+import { createStore } from '../core/storage.js';
+
+export class ProxyLLM {
+  /**
+   * @param {object} opt
+   * @param {string} opt.endpoint  Base del proxy, p. ej. "https://midominio.com/api/agent"
+   * @param {string} [opt.siteKey] Identificador público del sitio (el proxy lo valida)
+   * @param {number} [opt.timeoutMs]
+   * @param {string|(() => string)} [opt.locale]  idioma del visitante: va en Accept-Language para que
+   *   el proxy conteste sus errores en ese idioma
+   */
+  constructor({ endpoint, siteKey = null, timeoutMs = 60000, locale = null } = {}) {
+    if (!endpoint) throw new Error('[7ots] llm.endpoint es obligatorio');
+    this.endpoint = endpoint.replace(/\/$/, '');
+    this.siteKey = siteKey;
+    this.timeoutMs = timeoutMs;
+    this.locale = locale;
+    this.session = sessionId();
+  }
+
+  async step({ system, messages, tools, signal }) {
+    const ctrl = new AbortController();
+    const timer = setTimeout(() => ctrl.abort(), this.timeoutMs);
+    signal?.addEventListener('abort', () => ctrl.abort(), { once: true });
+    try {
+      const res = await fetch(`${this.endpoint}/chat`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(this.siteKey ? { 'X-Site-Key': this.siteKey } : {}),
+          ...acceptLanguage(this.locale),
+        },
+        body: JSON.stringify({ system, messages, tools, session: this.session }),
+        signal: ctrl.signal,
+      });
+      if (!res.ok) {
+        const detail = await res.text().catch(() => '');
+        throw new Error(`LLM proxy ${res.status}: ${detail.slice(0, 200)}`);
+      }
+      return await res.json();
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+}
+
+/** Cabecera Accept-Language a partir de un idioma (texto o función); vacía si no hay. */
+export function acceptLanguage(locale) {
+  const lang = typeof locale === 'function' ? locale() : locale;
+  return lang ? { 'Accept-Language': String(lang) } : {};
+}
+
+/** Id de la pestaña: dura lo que la conversación (sessionStorage) y es aleatorio. */
+function sessionId() {
+  const store = createStore('llm');
+  let id = store.get('session');
+  if (!id) {
+    const b = new Uint8Array(12);
+    globalThis.crypto?.getRandomValues?.(b);
+    id = [...b].map((x) => (x || Math.floor(Math.random() * 256)).toString(16).padStart(2, '0')).join('');
+    store.set('session', id);
+  }
+  return id;
+}

package/src/mcp/McpClient.js

@@ -0,0 +1,153 @@
+/**
+ * McpClient — cliente MCP mínimo para el navegador (transporte Streamable HTTP).
+ *
+ * Permite que el agente use el servidor MCP que el sitio YA expone para su propio
+ * backend, autenticado con el token del usuario logueado. Así el sitio no tiene que
+ * reescribir sus capacidades como acciones del widget: se descubren solas.
+ *
+ * Protocolo (JSON-RPC 2.0 sobre POST):
+ *   initialize → notifications/initialized → tools/list → tools/call
+ * El servidor puede responder JSON o text/event-stream; soportamos ambos.
+ *
+ * Requisitos del lado del sitio:
+ *   - CORS que permita el origen de la página y exponga el header `Mcp-Session-Id`
+ *     (en same-origin no hace falta nada).
+ *   - Aceptar `Authorization: Bearer <token>` (el mismo JWT del usuario).
+ */
+
+const PROTOCOL_VERSION = '2025-06-18';
+
+export class McpClient {
+  /**
+   * @param {object} opt
+   * @param {string} opt.url
+   * @param {import('../auth/AuthManager.js').AuthManager} [opt.auth]
+   * @param {string} [opt.clientName]
+   * @param {string|(() => string)} [opt.locale]  idioma del visitante (cabecera Accept-Language)
+   */
+  constructor({ url, auth = null, clientName = '7ots-agent', locale = null }) {
+    this.url = new URL(url, location.href).href;
+    this.locale = locale;
+    this.auth = auth;
+    this.clientName = clientName;
+    this.sessionId = null;
+    this.serverInfo = null;
+    this._id = 0;
+  }
+
+  async connect() {
+    const res = await this._rpc('initialize', {
+      protocolVersion: PROTOCOL_VERSION,
+      capabilities: {},
+      clientInfo: { name: this.clientName, version: '0.1.0' },
+    });
+    this.serverInfo = res?.serverInfo || null;
+    await this._notify('notifications/initialized');
+    return res;
+  }
+
+  async listTools() {
+    const tools = [];
+    let cursor;
+    do {
+      const r = await this._rpc('tools/list', cursor ? { cursor } : {});
+      tools.push(...(r?.tools || []));
+      cursor = r?.nextCursor;
+    } while (cursor);
+    return tools;
+  }
+
+  /** @returns {Promise<{text: string, structured: any, isError: boolean}>} */
+  async callTool(name, args = {}) {
+    const r = await this._rpc('tools/call', { name, arguments: args });
+    const text = (r?.content || [])
+      .map((c) => (c.type === 'text' ? c.text : c.type === 'resource' ? c.resource?.text || '' : `[${c.type}]`))
+      .join('\n')
+      .trim();
+    return { text, structured: r?.structuredContent ?? null, isError: !!r?.isError };
+  }
+
+  close() {
+    if (!this.sessionId) return;
+    // Cierre best-effort de la sesión en el servidor.
+    this._headers().then((h) => fetch(this.url, { method: 'DELETE', headers: h, keepalive: true }).catch(() => {}));
+    this.sessionId = null;
+  }
+
+  // ───────────────────────────── transporte ─────────────────────────────
+
+  async _headers() {
+    const h = {
+      'Content-Type': 'application/json',
+      Accept: 'application/json, text/event-stream',
+      'MCP-Protocol-Version': PROTOCOL_VERSION,
+    };
+    if (this.sessionId) h['Mcp-Session-Id'] = this.sessionId;
+    const lang = typeof this.locale === 'function' ? this.locale() : this.locale;
+    if (lang) h['Accept-Language'] = lang;
+    // El token solo se adjunta si el AuthManager permite ese origen.
+    const auth = await this.auth?.headersFor(this.url);
+    return { ...h, ...(auth || {}) };
+  }
+
+  async _notify(method, params) {
+    await fetch(this.url, {
+      method: 'POST',
+      headers: await this._headers(),
+      body: JSON.stringify({ jsonrpc: '2.0', method, ...(params ? { params } : {}) }),
+    }).catch(() => {});
+  }
+
+  async _rpc(method, params, retried = false) {
+    const id = ++this._id;
+    const res = await fetch(this.url, {
+      method: 'POST',
+      headers: await this._headers(),
+      body: JSON.stringify({ jsonrpc: '2.0', id, method, params }),
+    });
+    // Sesión caducada: la especificación indica 404 → se re-inicializa y se reintenta una vez.
+    if (res.status === 404 && this.sessionId && method !== 'initialize' && !retried) {
+      this.sessionId = null;
+      await this.connect();
+      return this._rpc(method, params, true);
+    }
+    if (res.status === 401 || res.status === 403) throw new Error('MCP: no autorizado (¿sesión expirada?)');
+    if (!res.ok) throw new Error(`MCP ${method}: HTTP ${res.status}`);
+    const sid = res.headers.get('Mcp-Session-Id');
+    if (sid) this.sessionId = sid;
+
+    const type = res.headers.get('Content-Type') || '';
+    const msg = type.includes('text/event-stream') ? await readSseResponse(res, id) : await res.json();
+    if (msg?.error) throw new Error(`MCP ${method}: ${msg.error.message || 'error'}`);
+    return msg?.result;
+  }
+}
+
+/** Lee un stream SSE hasta encontrar la respuesta JSON-RPC con nuestro id. */
+async function readSseResponse(res, id) {
+  const reader = res.body.getReader();
+  const dec = new TextDecoder();
+  let buf = '';
+  for (;;) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buf += dec.decode(value, { stream: true });
+    let idx;
+    while ((idx = buf.indexOf('\n\n')) >= 0) {
+      const block = buf.slice(0, idx);
+      buf = buf.slice(idx + 2);
+      const data = block.split('\n').filter((l) => l.startsWith('data:')).map((l) => l.slice(5).trim()).join('\n');
+      if (!data) continue;
+      try {
+        const msg = JSON.parse(data);
+        if (msg.id === id) {
+          reader.cancel().catch(() => {});
+          return msg;
+        }
+      } catch {
+        /* evento no JSON: ignorar */
+      }
+    }
+  }
+  throw new Error('MCP: el stream terminó sin respuesta');
+}