mirror of
https://github.com/hoshikawa2/agent_platform_oci.git
synced 2026-07-09 14:04:19 +00:00
First commit
This commit is contained in:
364
apps/agent_frontend/app.js
Normal file
364
apps/agent_frontend/app.js
Normal file
@@ -0,0 +1,364 @@
|
||||
const chat=document.getElementById('chat');
|
||||
const form=document.getElementById('form');
|
||||
let eventSource=null;
|
||||
let currentSessionId = null;
|
||||
|
||||
function add(role,text){
|
||||
const d=document.createElement('div');
|
||||
d.className='msg '+role;
|
||||
d.textContent=text;
|
||||
chat.appendChild(d);
|
||||
chat.scrollTop=chat.scrollHeight;
|
||||
}
|
||||
function status(text){const el=document.getElementById('status'); if(el) el.textContent=text;}
|
||||
function val(id){return (document.getElementById(id)?.value || '').trim();}
|
||||
function uuid(){return crypto.randomUUID();}
|
||||
|
||||
function buildBusinessContext(session, messageId){
|
||||
return {
|
||||
customer_key: val('customerKey') || null,
|
||||
contract_key: val('contractKey') || null,
|
||||
interaction_key: val('interactionKey') || messageId,
|
||||
account_key: val('accountKey') || null,
|
||||
resource_key: val('resourceKey') || null,
|
||||
session_key: session || null,
|
||||
metadata: {frontend: 'agent_frontend', version: 'business-context-v2'}
|
||||
};
|
||||
}
|
||||
|
||||
function syncDomainAliases(payload, businessContext){
|
||||
const agent=val('agent');
|
||||
if(agent === 'retail_orders'){
|
||||
payload.customer_id = businessContext.customer_key;
|
||||
payload.order_id = businessContext.contract_key;
|
||||
} else {
|
||||
payload.msisdn = businessContext.customer_key;
|
||||
payload.invoice_id = businessContext.contract_key;
|
||||
payload.ura_call_id = businessContext.interaction_key;
|
||||
payload.asset_id = businessContext.resource_key;
|
||||
}
|
||||
}
|
||||
|
||||
function adicionarMensagem(role, text) {
|
||||
const chat =
|
||||
document.getElementById("chat") ||
|
||||
document.getElementById("messages") ||
|
||||
document.querySelector(".chat") ||
|
||||
document.querySelector(".messages") ||
|
||||
document.querySelector("[data-chat]");
|
||||
|
||||
if (!chat) {
|
||||
console.error("Não encontrei o container do chat no HTML.");
|
||||
console.log("Mensagem que seria exibida:", role, text);
|
||||
return;
|
||||
}
|
||||
|
||||
const div = document.createElement("div");
|
||||
|
||||
if (role === "user") {
|
||||
div.className = "msg user chat-bubble--user";
|
||||
} else {
|
||||
div.className = "msg assistant chat-bubble--agent";
|
||||
}
|
||||
|
||||
div.textContent = text || "";
|
||||
|
||||
chat.appendChild(div);
|
||||
chat.scrollTop = chat.scrollHeight;
|
||||
}
|
||||
|
||||
function abrirSSE(sessionId) {
|
||||
if (!sessionId) {
|
||||
console.error("Não vou abrir SSE sem sessionId.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
}
|
||||
|
||||
const url = `${backend}/gateway/events/${sessionId}`;
|
||||
|
||||
eventSource = new EventSource(url);
|
||||
|
||||
eventSource.onopen = () => {
|
||||
console.log("SSE OPEN");
|
||||
};
|
||||
|
||||
eventSource.onerror = (err) => {
|
||||
console.error("SSE ERROR:", err);
|
||||
};
|
||||
|
||||
const eventos = [
|
||||
"connected",
|
||||
"waiting",
|
||||
"backend.selected",
|
||||
"flow.start",
|
||||
"workflow.started",
|
||||
"message.responded",
|
||||
"workflow.completed",
|
||||
"flow.end",
|
||||
"error"
|
||||
];
|
||||
|
||||
for (const nome of eventos) {
|
||||
eventSource.addEventListener(nome, (event) => {
|
||||
|
||||
if (nome === "message.responded") {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
const text =
|
||||
data.text ||
|
||||
data.message ||
|
||||
data.response ||
|
||||
data.content ||
|
||||
data.output ||
|
||||
event.data;
|
||||
|
||||
adicionarMensagem("assistant", text);
|
||||
} catch {
|
||||
adicionarMensagem("assistant", event.data);
|
||||
}
|
||||
}
|
||||
|
||||
if (nome === "error") {
|
||||
adicionarMensagem("assistant", `Erro SSE: ${event.data}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeSessionId(value) {
|
||||
if (!value) return uuid();
|
||||
|
||||
const parts = value.split(":");
|
||||
return parts[parts.length - 1]; // mantém só o UUID final
|
||||
}
|
||||
|
||||
function connectSSE(backend, sessionId) {
|
||||
if (!sessionId) {
|
||||
console.warn("SSE não aberto: sessionId ausente.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!backend) {
|
||||
console.warn("SSE não aberto: backend ausente.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (eventSource) {
|
||||
console.log("Fechando SSE anterior:", eventSource.url);
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
}
|
||||
|
||||
const url = `${backend.replace(/\/$/, "")}/gateway/events/${encodeURIComponent(sessionId)}`;
|
||||
|
||||
console.log("Abrindo SSE:", url);
|
||||
|
||||
eventSource = new EventSource(url);
|
||||
eventSource._sessionId = sessionId;
|
||||
|
||||
eventSource.onopen = () => {
|
||||
console.log("SSE OPEN:", url);
|
||||
status("SSE conectado");
|
||||
};
|
||||
|
||||
eventSource.onerror = (err) => {
|
||||
console.error("SSE ERROR raw:", err);
|
||||
console.error("SSE readyState:", eventSource?.readyState);
|
||||
console.error("SSE url:", eventSource?.url);
|
||||
|
||||
if (eventSource?.readyState === EventSource.CONNECTING) {
|
||||
status("SSE aguardando/reconectando");
|
||||
return;
|
||||
}
|
||||
|
||||
if (eventSource?.readyState === EventSource.CLOSED) {
|
||||
status("SSE fechado");
|
||||
return;
|
||||
}
|
||||
|
||||
status("SSE com erro");
|
||||
};
|
||||
|
||||
eventSource.addEventListener("connected", (event) => {
|
||||
console.log("SSE connected:", event.data);
|
||||
status("SSE conectado");
|
||||
});
|
||||
|
||||
eventSource.addEventListener("waiting", (event) => {
|
||||
console.log("SSE waiting:", event.data);
|
||||
status("SSE aguardando backend");
|
||||
});
|
||||
|
||||
eventSource.addEventListener("backend.selected", (event) => {
|
||||
console.log("SSE backend.selected:", event.data);
|
||||
status("Backend selecionado");
|
||||
});
|
||||
|
||||
eventSource.addEventListener("flow.start", (event) => {
|
||||
console.log("SSE flow.start:", event.data);
|
||||
status("Fluxo iniciado");
|
||||
});
|
||||
|
||||
eventSource.addEventListener("workflow.started", (event) => {
|
||||
console.log("SSE workflow.started:", event.data);
|
||||
status("Workflow em execução");
|
||||
});
|
||||
|
||||
eventSource.addEventListener("session.upserted", (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.business_context) {
|
||||
console.debug("business_context", data.business_context);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("Não consegui interpretar session.upserted:", event.data);
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener("message.responded", (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
const text =
|
||||
data.text ||
|
||||
data.message ||
|
||||
data.response ||
|
||||
data.content ||
|
||||
data.output ||
|
||||
event.data;
|
||||
|
||||
if (text) {
|
||||
add("assistant", text);
|
||||
}
|
||||
|
||||
if (data.metadata?.business_context) {
|
||||
console.debug("metadata.business_context", data.metadata.business_context);
|
||||
}
|
||||
|
||||
status("Resposta recebida");
|
||||
} catch (e) {
|
||||
add("assistant", event.data);
|
||||
status("Resposta recebida");
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener("workflow.completed", (event) => {
|
||||
console.log("SSE workflow.completed:", event.data);
|
||||
status("Workflow concluído");
|
||||
});
|
||||
|
||||
eventSource.addEventListener("flow.end", (event) => {
|
||||
console.log("SSE flow.end:", event.data);
|
||||
status("Fluxo finalizado");
|
||||
});
|
||||
|
||||
// Use um nome diferente de "error" para erro enviado pelo servidor.
|
||||
// "error" é reservado/conflituoso com erro nativo do EventSource.
|
||||
eventSource.addEventListener("server.error", (event) => {
|
||||
console.error("SSE server.error:", event.data);
|
||||
add("assistant", `Erro SSE: ${event.data || "erro informado pelo servidor"}`);
|
||||
status("Erro no fluxo SSE");
|
||||
});
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const input = document.getElementById('message');
|
||||
const text = input.value.trim();
|
||||
|
||||
if (!text) return;
|
||||
|
||||
adicionarMensagem('user', text);
|
||||
input.value = '';
|
||||
|
||||
const backend = val('backend').replace(/\/$/, '');
|
||||
const channel = val('channel');
|
||||
// const session = val('session') || uuid();
|
||||
const session = normalizeSessionId(val('session'));
|
||||
const messageId = uuid();
|
||||
const tenantId = val('tenant') || 'default';
|
||||
const agentId = val('agent') || 'telecom_contas';
|
||||
|
||||
document.getElementById('session').value = session;
|
||||
|
||||
const businessContext = buildBusinessContext(session, messageId);
|
||||
|
||||
const commonContext = {
|
||||
channel_id: 'browser',
|
||||
tenant_id: tenantId,
|
||||
agent_id: agentId,
|
||||
business_context: businessContext
|
||||
};
|
||||
|
||||
const payload = channel === 'voice'
|
||||
? {
|
||||
transcript: text,
|
||||
session_id: session,
|
||||
ani: businessContext.customer_key,
|
||||
message_id: messageId,
|
||||
tenant_id: tenantId,
|
||||
agent_id: agentId,
|
||||
context: commonContext
|
||||
}
|
||||
: {
|
||||
message: text,
|
||||
text: text,
|
||||
session_id: session,
|
||||
user_id: businessContext.customer_key || 'web-user',
|
||||
message_id: messageId,
|
||||
tenant_id: tenantId,
|
||||
agent_id: agentId,
|
||||
context: commonContext
|
||||
};
|
||||
|
||||
syncDomainAliases(payload, businessContext);
|
||||
|
||||
try {
|
||||
status('Enviando mensagem');
|
||||
|
||||
const res = await fetch(`${backend}/gateway/message`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
channel,
|
||||
tenant_id: tenantId,
|
||||
agent_id: agentId,
|
||||
payload
|
||||
})
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`${res.status} ${res.statusText}`);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
const returnedSessionId = data.session_id || session;
|
||||
currentSessionId = returnedSessionId;
|
||||
document.getElementById('session').value = returnedSessionId;
|
||||
|
||||
const resposta =
|
||||
data.text ||
|
||||
data.speak ||
|
||||
data.message ||
|
||||
data.response ||
|
||||
data.content ||
|
||||
data.output ||
|
||||
JSON.stringify(data);
|
||||
|
||||
adicionarMensagem('assistant', resposta);
|
||||
status('Resposta recebida');
|
||||
|
||||
} catch (err) {
|
||||
adicionarMensagem('assistant', `Erro ao chamar backend: ${err.message}`);
|
||||
status('Erro de conexão');
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user