113 lines
4.3 KiB
JavaScript
113 lines
4.3 KiB
JavaScript
import { api } from "../lib/api.js";
|
|
import { emit, on } from "../lib/bus.js";
|
|
|
|
class ChatSimulator extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
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; }
|
|
.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; }
|
|
button.primary { background:#1f6feb; border-color:#1f6feb; }
|
|
.chatlog { display:flex; flex-direction:column; gap:8px; max-height:280px; overflow:auto; padding-right:6px; margin-top:8px; }
|
|
.msg { max-width:90%; padding:8px 10px; border-radius:12px; border:1px solid #253245; background:#0f1520; font-size:13px; }
|
|
.msg.user { align-self:flex-end; }
|
|
.msg.bot { align-self:flex-start; border-color:#1f6feb; }
|
|
pre { white-space:pre-wrap; word-break:break-word; background:#0f1520; border:1px solid #253245; border-radius:10px; padding:10px; margin:0; font-size:12px; color:#d7e2ef; }
|
|
</style>
|
|
|
|
<div class="box">
|
|
<div class="muted">Simulador WhatsApp (local)</div>
|
|
<div class="row" style="margin-top:8px">
|
|
<input id="from" style="flex:1" value="+5491100000000" placeholder="+54911xxxxxxxx" />
|
|
</div>
|
|
<div class="row" style="margin-top:8px">
|
|
<input id="chat" style="flex:1" value="sim:+5491100000000" placeholder="chat_id" />
|
|
<button id="reset">Reset</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box">
|
|
<div class="muted">Chat</div>
|
|
<div class="chatlog" id="log"></div>
|
|
<textarea id="text" placeholder="Escribí como cliente…"></textarea>
|
|
<div class="row" style="margin-top:8px">
|
|
<button class="primary" id="send" style="flex:1">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box">
|
|
<div class="muted">Última respuesta (raw)</div>
|
|
<pre id="raw">—</pre>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
const fromEl = this.shadowRoot.getElementById("from");
|
|
const chatEl = this.shadowRoot.getElementById("chat");
|
|
const resetEl = this.shadowRoot.getElementById("reset");
|
|
const sendEl = this.shadowRoot.getElementById("send");
|
|
|
|
resetEl.onclick = () => {
|
|
this.shadowRoot.getElementById("log").innerHTML = "";
|
|
this.shadowRoot.getElementById("raw").textContent = "—";
|
|
const phone = (fromEl.value || "+5491100000000").trim();
|
|
chatEl.value = `sim:${phone}`;
|
|
this.append("bot", "Chat reseteado (solo UI). Enviá un mensaje para generar runs.");
|
|
};
|
|
|
|
sendEl.onclick = async () => {
|
|
const text = this.shadowRoot.getElementById("text").value.trim();
|
|
if (!text) return;
|
|
|
|
const from_phone = fromEl.value.trim();
|
|
const chat_id = chatEl.value.trim();
|
|
if (!from_phone || !chat_id) return alert("Falta teléfono o chat_id");
|
|
|
|
this.append("user", text);
|
|
this.shadowRoot.getElementById("text").value = "";
|
|
|
|
const data = await api.simSend({ chat_id, from_phone, text });
|
|
this.shadowRoot.getElementById("raw").textContent = JSON.stringify(data, null, 2);
|
|
|
|
if (!data.ok) {
|
|
this.append("bot", "Error en simulación.");
|
|
return;
|
|
}
|
|
|
|
this.append("bot", data.reply);
|
|
emit("ui:selectedChat", { chat_id });
|
|
};
|
|
|
|
// si querés, cuando llega un upsert de conversación simulada, podés auto-seleccionarla
|
|
this._unsub = on("conversation:upsert", (c) => {
|
|
const chat_id = this.shadowRoot.getElementById("chat").value.trim();
|
|
if (c.chat_id === chat_id) {
|
|
// no-op, pero podrías reflejar estado/intent acá si querés
|
|
}
|
|
});
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this._unsub?.();
|
|
}
|
|
|
|
append(who, text) {
|
|
const log = this.shadowRoot.getElementById("log");
|
|
const el = document.createElement("div");
|
|
el.className = "msg " + (who === "user" ? "user" : "bot");
|
|
el.textContent = text;
|
|
log.appendChild(el);
|
|
log.scrollTop = log.scrollHeight;
|
|
}
|
|
}
|
|
|
|
customElements.define("chat-simulator", ChatSimulator);
|