lkzwieder/botino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chat: layout 3 columnas + fix URL WooCommerce API

Browse Source 
- Rediseño de la vista Chat: lista de conversaciones a la izquierda,
  burbujas al centro, inspector+simulador apilados a la derecha
- chat-simulator pasa a layout vertical con config 2×2 más compacto
- Fix: construir base URL con /wp-json/{api_version} en los tres
  clientes Woo (wooSnapshot, wooOrders, woo.js) — antes llamaba a
  /products en vez de /wp-json/wc/v3/products
- Fix: syncFromWoo y syncProducts usan safeFetch (con credentials)
  en vez de fetch directo, evitando 401/404 por cookie de sesión faltante

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lucas Tettamanti
2026-05-17 22:56:50 -03:00
parent c0916c3050
commit c786e47160
7 changed files with 43 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app.js
View File

@@ -3,6 +3,7 @@ import "./components/home-dashboard.js";
import "./components/run-timeline.js"; import "./components/run-timeline.js";
import "./components/chat-simulator.js"; import "./components/chat-simulator.js";
import "./components/conversation-inspector.js"; import "./components/conversation-inspector.js";
import "./components/conversation-list.js";
import "./components/conversations-crud.js"; import "./components/conversations-crud.js";
import "./components/users-crud.js"; import "./components/users-crud.js";
import "./components/products-crud.js"; import "./components/products-crud.js";

59
public/components/chat-simulator.js
View File

@@ -11,55 +11,44 @@ class ChatSimulator extends HTMLElement {
this._sending = false; this._sending = false;
this.shadowRoot.innerHTML = ` this.shadowRoot.innerHTML = `
<style> <style>
:host { display:block; height:100%; overflow:hidden; font-family: var(--font-sans); background: var(--panel); } :host { display:block; font-family: var(--font-sans); background: var(--panel); }
* { box-sizing:border-box; } * { box-sizing:border-box; }
.container { display:grid; grid-template-columns:1fr 1fr; gap:0; height:100%; min-height:0; overflow:hidden; } .container { display:flex; flex-direction:column; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
.col { .section-label { color: var(--text-muted); font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:0.06em; font-weight: var(--fw-semibold); margin-bottom: 6px; }
display:flex; flex-direction:column; .fields-grid { display:grid; grid-template-columns:1fr 1fr; gap: 6px; }
padding: var(--space-4) var(--space-5); .field { display:flex; flex-direction:column; min-width:0; }
border-right: 1px solid var(--border); .field label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 3px; font-weight: var(--fw-medium); }
min-width:0; min-height:0; overflow:hidden; input, textarea, button {
}
.col:last-child { border-right:none; }
.muted { color: var(--text-muted); font-size: var(--fs-xs); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--fw-semibold); }
.row { display:flex; gap: var(--space-2); align-items:center; }
input, textarea, button, select {
background: var(--panel); background: var(--panel);
color: var(--text); color: var(--text);
border: 1px solid var(--border-hi); border: 1px solid var(--border-hi);
border-radius: var(--r-md); border-radius: var(--r-md);
padding: 8px 12px; padding: 6px 10px;
font: 400 var(--fs-sm)/1.4 var(--font-sans); font: 400 var(--fs-sm)/1.4 var(--font-sans);
box-sizing:border-box;
transition: border-color .15s, box-shadow .15s; transition: border-color .15s, box-shadow .15s;
} }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } input:focus, textarea:focus { outline:none; border-color: var(--accent); box-shadow: var(--focus-ring); }
input { width:100%; min-width:0; } input { width:100%; min-width:0; }
textarea { textarea {
width:100%; resize:vertical; width:100%; resize:none; height:72px;
min-height:120px; max-height:60vh;
min-width:0; margin-bottom: var(--space-3);
word-break:break-word; overflow-wrap:anywhere; word-break:break-word; overflow-wrap:anywhere;
font-family: var(--font-mono); font-family: var(--font-mono); font-size: var(--fs-sm);
font-size: var(--fs-sm);
} }
button { cursor:pointer; white-space:nowrap; font-weight: var(--fw-medium); } button { cursor:pointer; white-space:nowrap; font-weight: var(--fw-medium); }
button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); } button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-acc); } button.primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-acc); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-acc); } button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-acc); }
button:disabled { opacity:.5; cursor:not-allowed; } button:disabled { opacity:.5; cursor:not-allowed; }
.status { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 8px; word-break:break-word; } .msg-row { display:flex; gap: var(--space-2); align-items:flex-end; }
.inputs-col { display:flex; flex-direction:column; gap: 10px; flex:1; min-height:0; min-width:0; overflow-y:auto; padding-right: 4px; } .msg-row textarea { flex:1; }
.field { display:flex; flex-direction:column; min-width:0; } .btn-col { display:flex; flex-direction:column; gap: 6px; }
.field label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; font-weight: var(--fw-medium); } .status { font-size: var(--fs-xs); color: var(--text-muted); word-break:break-word; }
.msg-col { display:flex; flex-direction:column; min-width:0; min-height:0; flex:1; }
.msg-bottom { display:flex; gap: var(--space-2); align-items:center; margin-top: 8px; flex-wrap:wrap; }
</style> </style>
<div class="container"> <div class="container">
<div class="col"> <div>
<div class="muted">Evolution Sim</div> <div class="section-label">Evolution Sim</div>
<div class="inputs-col"> <div class="fields-grid">
<div class="field"> <div class="field">
<label>Instance</label> <label>Instance</label>
<input id="instance" value="Piaf" placeholder="tenant" /> <input id="instance" value="Piaf" placeholder="tenant" />
@@ -78,16 +67,16 @@ class ChatSimulator extends HTMLElement {
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div>
<div class="muted">Mensaje</div> <div class="section-label">Mensaje</div>
<div class="msg-col"> <div class="msg-row">
<textarea id="evoText" placeholder="Texto a enviar..."></textarea> <textarea id="evoText" placeholder="Texto a enviar... (Enter para enviar)"></textarea>
<div class="msg-bottom"> <div class="btn-col">
<button class="primary" id="sendEvo">Send</button> <button class="primary" id="sendEvo">Send</button>
<button id="retry">Retry</button> <button id="retry">Retry</button>
<span class="status" id="status">—</span>
</div> </div>
</div> </div>
<div class="status" id="status">—</div>
</div> </div>
</div> </div>
`; `;

20
public/components/ops-shell.js
View File

@@ -75,12 +75,11 @@ class OpsShell extends HTMLElement {
box-shadow: 0 0 0 2px var(--panel); box-shadow: 0 0 0 2px var(--panel);
} }
/* Layout para chat activo (2 columnas: burbujas + inspector) */ /* Layout para chat activo (3 columnas: lista | burbujas | inspector+sim) */
.layout-chat { height:100%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 310px; min-height:0; overflow:hidden; } .layout-chat { height:100%; display:grid; grid-template-columns:280px 1fr 360px; min-height:0; overflow:hidden; }
.col { border-right:1px solid var(--border); min-height:0; overflow:hidden; } .chatLeft { border-right:1px solid var(--border); min-height:0; overflow-y:auto; }
.chatTop { grid-column:1; grid-row:1; border-bottom:1px solid var(--border); } .chatCenter { display:flex; flex-direction:column; min-height:0; overflow:hidden; border-right:1px solid var(--border); }
.chatBottom { grid-column:1 / 3; grid-row:2; overflow:hidden; border-top:1px solid var(--border); } .chatRight { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.inspectorTop { grid-column:2; grid-row:1; border-right:none; }
/* Layout para CRUDs */ /* Layout para CRUDs */
.layout-crud { height:100%; display:block; min-height:0; overflow:hidden; } .layout-crud { height:100%; display:block; min-height:0; overflow:hidden; }
@@ -126,9 +125,12 @@ class OpsShell extends HTMLElement {
<div id="viewChat" class="view"> <div id="viewChat" class="view">
<div class="layout-chat"> <div class="layout-chat">
<div class="col chatTop"><run-timeline></run-timeline></div> <div class="chatLeft"><conversation-list></conversation-list></div>
<div class="col inspectorTop"><conversation-inspector></conversation-inspector></div> <div class="chatCenter"><run-timeline></run-timeline></div>
<div class="col chatBottom"><chat-simulator></chat-simulator></div> <div class="chatRight">
<conversation-inspector style="flex:1;min-height:0;overflow:hidden;"></conversation-inspector>
<chat-simulator style="flex:0 0 auto;border-top:1px solid var(--border);"></chat-simulator>
</div>
</div> </div>
</div> </div>

4
public/lib/api.js
View File

@@ -105,7 +105,7 @@ export const api = {
}, },
async syncProducts() { async syncProducts() {
return fetch("/products/sync", { method: "POST" }).then(r => r.json()); return safeFetch("/products/sync", { method: "POST" });
}, },
async updateProductUnit(wooProductId, { sell_unit }) { async updateProductUnit(wooProductId, { sell_unit }) {
@@ -214,7 +214,7 @@ export const api = {
// Sync de emergencia desde WooCommerce // Sync de emergencia desde WooCommerce
async syncFromWoo() { async syncFromWoo() {
return fetch("/products/sync-from-woo", { method: "POST" }).then(r => r.json()); return safeFetch("/products/sync-from-woo", { method: "POST" });
}, },
// --- Orders & Stats --- // --- Orders & Stats ---

2
src/modules/2-identity/services/woo.js
View File

@@ -172,7 +172,7 @@ export async function createWooCustomer({ tenantId, wa_chat_id, phone, name }) {
throw new Error("consumer_secret not set"); throw new Error("consumer_secret not set");
})(); })();
const base = cfg.base_url.replace(/\/+$/, ""); const base = `${cfg.base_url.replace(/\/+$/, "")}/wp-json/${cfg.api_version || "wc/v3"}`;
const email = `${phone || wa_chat_id}@no-email.local`; const email = `${phone || wa_chat_id}@no-email.local`;
const username = wa_chat_id; const username = wa_chat_id;
const timeout = Math.max(cfg.timeout_ms ?? 20000, 20000); const timeout = Math.max(cfg.timeout_ms ?? 20000, 20000);

3
src/modules/4-woo-orders/wooOrders.js
View File

@@ -89,7 +89,8 @@ async function getWooClient({ tenantId }) {
(() => { (() => {
throw new Error("consumer_secret not set"); throw new Error("consumer_secret not set");
})(); })();
const base = cfg.base_url.replace(/\/+$/, ""); const apiVersion = cfg.api_version || "wc/v3";
const base = `${cfg.base_url.replace(/\/+$/, "")}/wp-json/${apiVersion}`;
const auth = Buffer.from(`${consumerKey}:${consumerSecret}`).toString("base64"); const auth = Buffer.from(`${consumerKey}:${consumerSecret}`).toString("base64");
return { return {
base, base,

3
src/modules/shared/wooSnapshot.js
View File

@@ -57,7 +57,8 @@ async function getWooClient({ tenantId }) {
(() => { (() => {
throw new Error("consumer_secret not set"); throw new Error("consumer_secret not set");
})(); })();
const base = cfg.base_url.replace(/\/+$/, ""); const apiVersion = cfg.api_version || "wc/v3";
const base = `${cfg.base_url.replace(/\/+$/, "")}/wp-json/${apiVersion}`;
const auth = Buffer.from(`${consumerKey}:${consumerSecret}`).toString("base64"); const auth = Buffer.from(`${consumerKey}:${consumerSecret}`).toString("base64");
return { return {
base, base,