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

ux improved

Browse Source
This commit is contained in:
Lucas Tettamanti
2026-01-17 04:13:35 -03:00
parent 98e3d78e3d
commit 63b9ecef61
35 changed files with 4266 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,39 +9,60 @@ class ChatSimulator extends HTMLElement {
this._sending = false;
this.shadowRoot.innerHTML = `
<style>
:host { display:block; padding:12px; }
.box { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; margin-bottom:10px; }
.muted { color:#8aa0b5; font-size:12px; }
:host { display:block; height:100%; overflow:hidden; }
* { box-sizing:border-box; }
.container { display:grid; grid-template-columns:1fr 1fr; gap:0; height:100%; overflow:hidden; }
.col { display:flex; flex-direction:column; padding:10px 12px; border-right:1px solid #1e2a3a; min-width:0; overflow:hidden; }
.col:last-child { border-right:none; }
.muted { color:#8aa0b5; font-size:11px; margin-bottom:6px; }
.row { display:flex; gap:8px; align-items:center; }
input,textarea,button { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px; font-size:13px; }
textarea { width:100%; min-height:70px; resize:vertical; }
button { cursor:pointer; }
input,textarea,button { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:6px; padding:6px 8px; font-size:12px; box-sizing:border-box; }
input { width:100%; min-width:0; }
textarea { width:100%; resize:none; height:186px; min-width:0; margin-bottom:10px;}
button { cursor:pointer; white-space:nowrap; }
button.primary { background:#1f6feb; border-color:#1f6feb; }
button:disabled { opacity:.6; cursor:not-allowed; }
.status { margin-top:8px; font-size:12px; color:#8aa0b5; }
.status { font-size:11px; color:#8aa0b5; margin-top:6px; }
.inputs-col { display:flex; flex-direction:column; gap:6px; flex:1; overflow:hidden; min-width:0; }
.field { display:flex; flex-direction:column; min-width:0; }
.field label { font-size:10px; color:#8aa0b5; margin-bottom:2px; }
.msg-col { display:flex; flex-direction:column; min-width:0; }
.msg-bottom { display:flex; gap:8px; align-items:center; margin-top:6px; }
</style>
<div class="box">
<div class="muted">Evolution Sim (único chat)</div>
<div class="row" style="margin-top:8px">
<input id="instance" style="flex:1" value="Piaf" placeholder="tenant/instance key" />
<div class="container">
<div class="col">
<div class="muted">Evolution Sim</div>
<div class="inputs-col">
<div class="field">
<label>Instance</label>
<input id="instance" value="Piaf" placeholder="tenant" />
</div>
<div class="field">
<label>From (remoteJid)</label>
<input id="evoFrom" value="5491133230322@s.whatsapp.net" placeholder="from" />
</div>
<div class="field">
<label>To</label>
<input id="evoTo" value="5491137887040@s.whatsapp.net" placeholder="to" />
</div>
<div class="field">
<label>Push Name</label>
<input id="pushName" value="test_lucas" placeholder="pushName" />
</div>
</div>
</div>
<div class="row" style="margin-top:8px">
<input id="evoFrom" style="flex:1" value="5491133230322@s.whatsapp.net" placeholder="from (remoteJid)" />
<div class="col">
<div class="muted">Mensaje</div>
<div class="msg-col">
<textarea id="evoText" placeholder="Texto a enviar..."></textarea>
<div class="msg-bottom">
<button class="primary" id="sendEvo">Send</button>
<button id="retry">Retry</button>
<span class="status" id="status">—</span>
</div>
</div>
</div>
<div class="row" style="margin-top:8px">
<input id="evoTo" style="flex:1" value="5491137887040@s.whatsapp.net" placeholder="to (destino receptor)" />
</div>
<div class="row" style="margin-top:8px">
<input id="pushName" style="flex:1" value="test_lucas" placeholder="pushName (opcional)" />
</div>
<div class="muted" style="margin-top:7px">Enviar mensaje</div>
<textarea id="evoText" style="margin-top:8px" placeholder="Texto a enviar por Evolution…"></textarea>
<div class="row" style="margin-top:8px">
<button class="primary" id="sendEvo" style="flex:1">Send</button>
<button id="retry" style="width:140px">Retry last</button>
</div>
<div class="status" id="status">—</div>
</div>
`;
}
@@ -123,6 +144,17 @@ class ChatSimulator extends HTMLElement {
last_run_id: null,
});
emit("ui:selectedChat", { chat_id: from });
// Optimistic: mostrar burbuja del usuario inmediatamente
emit("message:optimistic", {
chat_id: from,
message_id: `optimistic-${Date.now()}`,
direction: "in",
text,
ts: new Date().toISOString(),
provider: "sim",
pushName: pushName || "test_lucas",
});
const payload = payloadOverride || buildPayload({ text, from, to, instance, pushName });
this._lastPayload = { ...payload, body: { ...payload.body, data: { ...payload.body.data, key: { ...payload.body.data.key, id: genId() } } } };