chat: layout 3 columnas + fix URL WooCommerce API
- 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
@@ -11,55 +11,44 @@ class ChatSimulator extends HTMLElement {
|
||||
this._sending = false;
|
||||
this.shadowRoot.innerHTML = `
|
||||
<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; }
|
||||
.container { display:grid; grid-template-columns:1fr 1fr; gap:0; height:100%; min-height:0; overflow:hidden; }
|
||||
.col {
|
||||
display:flex; flex-direction:column;
|
||||
padding: var(--space-4) var(--space-5);
|
||||
border-right: 1px solid var(--border);
|
||||
min-width:0; min-height:0; overflow:hidden;
|
||||
}
|
||||
.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 {
|
||||
.container { display:flex; flex-direction:column; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
|
||||
.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; }
|
||||
.fields-grid { display:grid; grid-template-columns:1fr 1fr; gap: 6px; }
|
||||
.field { display:flex; flex-direction:column; min-width:0; }
|
||||
.field label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 3px; font-weight: var(--fw-medium); }
|
||||
input, textarea, button {
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border-hi);
|
||||
border-radius: var(--r-md);
|
||||
padding: 8px 12px;
|
||||
padding: 6px 10px;
|
||||
font: 400 var(--fs-sm)/1.4 var(--font-sans);
|
||||
box-sizing:border-box;
|
||||
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; }
|
||||
textarea {
|
||||
width:100%; resize:vertical;
|
||||
min-height:120px; max-height:60vh;
|
||||
min-width:0; margin-bottom: var(--space-3);
|
||||
width:100%; resize:none; height:72px;
|
||||
word-break:break-word; overflow-wrap:anywhere;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--fs-sm);
|
||||
font-family: var(--font-mono); font-size: var(--fs-sm);
|
||||
}
|
||||
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.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:disabled { opacity:.5; cursor:not-allowed; }
|
||||
.status { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 8px; word-break:break-word; }
|
||||
.inputs-col { display:flex; flex-direction:column; gap: 10px; flex:1; min-height:0; min-width:0; overflow-y:auto; padding-right: 4px; }
|
||||
.field { display:flex; flex-direction:column; min-width:0; }
|
||||
.field label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; font-weight: var(--fw-medium); }
|
||||
.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; }
|
||||
.msg-row { display:flex; gap: var(--space-2); align-items:flex-end; }
|
||||
.msg-row textarea { flex:1; }
|
||||
.btn-col { display:flex; flex-direction:column; gap: 6px; }
|
||||
.status { font-size: var(--fs-xs); color: var(--text-muted); word-break:break-word; }
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="col">
|
||||
<div class="muted">Evolution Sim</div>
|
||||
<div class="inputs-col">
|
||||
<div>
|
||||
<div class="section-label">Evolution Sim</div>
|
||||
<div class="fields-grid">
|
||||
<div class="field">
|
||||
<label>Instance</label>
|
||||
<input id="instance" value="Piaf" placeholder="tenant" />
|
||||
@@ -78,16 +67,16 @@ class ChatSimulator extends HTMLElement {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="muted">Mensaje</div>
|
||||
<div class="msg-col">
|
||||
<textarea id="evoText" placeholder="Texto a enviar..."></textarea>
|
||||
<div class="msg-bottom">
|
||||
<div>
|
||||
<div class="section-label">Mensaje</div>
|
||||
<div class="msg-row">
|
||||
<textarea id="evoText" placeholder="Texto a enviar... (Enter para enviar)"></textarea>
|
||||
<div class="btn-col">
|
||||
<button class="primary" id="sendEvo">Send</button>
|
||||
<button id="retry">Retry</button>
|
||||
<span class="status" id="status">—</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" id="status">—</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user