t.id === sub) || {}).label}>
Define personalidade, voz e visual do widget que aparece no site.
onAction && onAction("open-preview")}>
{tabs.map((t) => (
onAction("nav:chatbot:" + t.id)}>
))}
{sub === "persona" &&
}
{sub === "chat" &&
}
{sub === "prompt" &&
{ setSystemPrompt(v); onMarkDirty(); }} />}
{sub === "handoff" &&
{persona.temperature.toFixed(1)} update("temperature", v)} format={(v) => v.toFixed(1)} />
0 = sempre igual · 1 = mais variação criativa. (afeta a resposta do LLM, não a voz)
update("ttsSpeed", v)}
format={(v) => v.toFixed(1) + "x"}
supported={caps.speed}
providerLabel={activeProvLabel}
hint={
caps.speed
? `Ritmo da fala. Faixa aplicada: ${caps.speedRange[0]}x–${caps.speedRange[1]}x (limites do provider).`
: "Ritmo da fala. 0.9–1.1 soa mais natural."
}
/>
0 ? "+" : "") + persona.ttsPitch}
min={-6} max={6} step={1}
onChange={(v) => update("ttsPitch", v)}
supported={caps.pitch}
providerLabel={activeProvLabel}
hint="Em semitons. 0 = voz original · negativo = grave · positivo = aguda."
/>
update("ttsExpressivity", v)}
format={(v) => v.toFixed(2)}
supported={caps.expressivity}
providerLabel={activeProvLabel}
hint='Mais alto = voz mais "viva". Valores baixos soam monótonos.'
/>
);
}
// Campo de slider com feedback visual quando o provider TTS ativo não honra
// o parâmetro — fica esmaecido e mostra aviso "não aplicado por ".
function SliderField({ icon, label, value, display, min, max, step, onChange, format, supported, providerLabel, hint }) {
const dimStyle = supported ? null : { opacity: 0.55 };
return (
{display}
{!supported && (
)}
{!supported
? `O provider ${providerLabel} ignora este parâmetro — troque para um provider que o suporte (ex.: Piper).`
: hint}
);
}
// Seletor inline de provider/modelo/voz TTS. Permite trocar tudo sem sair da
// tela. Configuração avançada (API keys, ping, cache) continua em Sistema.
// info e onReload vem do PersonaPane (compartilha state pra capabilities
// dos sliders recalcularem automaticamente quando troca de provider aqui).
function ActiveTtsBanner({ info, onReload }) {
const toast = useToast();
const [previewBusy, setPreviewBusy] = useState(false);
const [switching, setSwitching] = useState(false);
const load = () => (onReload ? onReload() : Promise.resolve());
const goToSystem = () => {
if (window.appNavigate) window.appNavigate('system:config');
else window.location.hash = '#system:config';
};
const selectProvider = async (providerId) => {
const p = info.providers.find((x) => x.id === providerId);
if (!p) return;
if (!p.keyConfigured) {
toast({
title: 'API key necessária',
msg: `Configure a chave do ${p.label} em Sistema → Provider de TTS antes de ativar.`,
kind: 'error',
});
return;
}
setSwitching(true);
try {
await api('/api/admin/tts/select', {
method: 'POST',
body: { provider: p.id, model: p.selectedModel, voice: p.selectedVoice },
});
toast({ title: 'Provider de voz ativo', msg: p.label, kind: 'success' });
await load();
} catch (e) { toast({ title: 'Falha ao trocar provider', msg: e.message, kind: 'error' }); }
finally { setSwitching(false); }
};
const selectVoice = async (voiceId) => {
if (!info || !info.active) return;
setSwitching(true);
try {
await api('/api/admin/tts/select', {
method: 'POST',
body: { provider: info.active.provider, model: info.active.model, voice: voiceId },
});
await load();
} catch (e) { toast({ title: 'Falha ao trocar voz', msg: e.message, kind: 'error' }); }
finally { setSwitching(false); }
};
const selectModel = async (modelId) => {
if (!info || !info.active) return;
setSwitching(true);
try {
await api('/api/admin/tts/select', {
method: 'POST',
body: { provider: info.active.provider, model: modelId, voice: info.active.voice },
});
await load();
} catch (e) { toast({ title: 'Falha ao trocar modelo', msg: e.message, kind: 'error' }); }
finally { setSwitching(false); }
};
const preview = async () => {
setPreviewBusy(true);
try {
const r = await fetch('/api/admin/tts/preview', {
method: 'POST',
headers: { 'Authorization': 'Bearer ' + Auth.token, 'Content-Type': 'application/json' },
body: JSON.stringify({}),
});
if (!r.ok) throw new Error('HTTP ' + r.status);
const blob = await r.blob();
const url = URL.createObjectURL(blob);
const audio = new Audio(url);
audio.onended = () => URL.revokeObjectURL(url);
await audio.play();
} catch (e) { toast({ title: 'Falha no preview', msg: e.message, kind: 'error' }); }
finally { setPreviewBusy(false); }
};
if (!info) {
return (
);
}
const active = info.providers.find((p) => p.id === info.active.provider) || info.providers[0];
const hasModels = (active.models || []).length > 1;
const usdBrl = 5.20;
return (
{/* Header com mark + nome + preço + preview */}
{active.mark}
{active.label}
{active.tier}
{!active.keyConfigured && active.requiresKey && (
sem API key
)}
{active.pricePer1M === 0 ? 'grátis · ilimitado' : `R$ ${(active.pricePer1M * usdBrl).toFixed(2)} / 1M characters`}
{previewBusy ? <>
{/* Selects: provider · modelo · voz */}
selectProvider(e.target.value)}
>
{info.providers.map((p) => {
const blocked = p.requiresKey && !p.keyConfigured;
const labelTxt = p.label + (p.free ? ' · grátis' : '') + (blocked ? ' · sem API key' : '');
return {labelTxt} ;
})}
{hasModels && (
selectModel(e.target.value)}
>
{(active.models || []).map((m) => {m.label || m.id} )}
)}
selectVoice(e.target.value)}
>
{(active.voices || []).length === 0 && (provider sem vozes selecionáveis) }
{(active.voices || []).map((v) => {
const desc = v.desc ? ` — ${v.desc}` : '';
const gender = v.gender ? ` (${v.gender === 'F' ? 'feminina' : v.gender === 'M' ? 'masculina' : v.gender})` : '';
return {(v.label || v.name || v.id) + gender + desc} ;
})}
Cores aplicadas atrás do mascote/vídeo no widget.
Balões de pergunta (usuário) e resposta (bot) — fundo e texto.
{/* Mini-preview ao vivo: mostra os 2 balões com as cores configuradas
antes de salvar. Mesmo padrão do "Preview ao vivo" da tipografia.
Útil pra calibrar contraste (evita fundo+texto na mesma cor). */}
Preview ao vivo
Quais são meus direitos?
Posso te ajudar com os direitos da categoria.
Imagem circular ao lado de cada balão (usuário/bot). Toggle global + 2 imagens configuráveis.
Mostrar avatares ao lado das mensagens
{chat.messageAvatarsEnabled
? "Avatares visíveis em cada balão."
: "Avatares ocultos — balões aparecem sozinhos (comportamento legado)."}
update("messageAvatarsEnabled", v)} />
update("userAvatarPath", v)}
fallback={null}
/>
update("botMessageAvatarPath", v)}
fallback={chat.mascotPath}
/>
Mascote (imagem) + 4 vídeos para cada estado do bot. Clique em "Trocar" pra enviar um arquivo.
update("mascotPath", v)}
kind="image"
/>
update("welcomeVideo", v)}
kind="video"
/>
update("idleVideo", v)}
kind="video"
/>
update("searchVideo", v)}
kind="video"
/>
update("talkVideo", v)}
kind="video"
/>
Texto narrado pela voz configurada em Persona & Voz quando a tela de saudação abre.
Útil quando o vídeo de saudação é silencioso.
Texto a ser lido (sincroniza com o vídeo de saudação)
Vazio → nenhum áudio extra. Quando o usuário clica em INICIAR , o vídeo e a narração param na hora.
Carregada automaticamente do Google Fonts.
Fonte principal
update("fontFamily", e.target.value)}>
{Data.fonts.map((f) => {f} )}
Preview ao vivo
Olá! Sou o Ramalhinho — assistente do SINTRACON.
Primeira mensagem do bot ao iniciar o chat.
Dita quando a busca semântica não encontra match.
);
}
// Campo de upload de imagem com preview + botão "Trocar".
// Reusa o endpoint /api/admin/upload-avatar-video (multer aceita imagens também,
// retorna { url: 'uploads/...' }). Pra MVP é mais simples que criar endpoint novo.
function AvatarUploadField({ label, hint, value, onChange, fallback }) {
const inputRef = useRef(null);
const [uploading, setUploading] = useState(false);
const toast = useToast();
const previewSrc = value
? (value.startsWith('http') || value.startsWith('/') ? value : '/' + value)
: (fallback || null);
const onPick = () => inputRef.current && inputRef.current.click();
const onFile = async (e) => {
const file = e.target.files && e.target.files[0];
if (!file) return;
if (!file.type.startsWith('image/')) {
toast({ title: 'Arquivo inválido', msg: 'Selecione uma imagem (PNG, JPG, WebP).', kind: 'error' });
return;
}
const fd = new FormData();
fd.append('file', file);
setUploading(true);
try {
const r = await fetch('/api/admin/upload-avatar-video', {
method: 'POST',
body: fd,
headers: { Authorization: 'Bearer ' + (Auth && Auth.token ? Auth.token : '') },
});
const data = await r.json();
if (!r.ok || !data.url) throw new Error(data.error || 'Falha no upload');
onChange(data.url);
toast({ title: 'Imagem enviada', msg: 'Lembre de clicar em Salvar.', kind: 'success' });
} catch (err) {
toast({ title: 'Falha no upload', msg: err.message, kind: 'error' });
} finally {
setUploading(false);
if (inputRef.current) inputRef.current.value = '';
}
};
return (
{label}
{previewSrc ? (
) : (
)}
{value && (
onChange('')}
disabled={uploading}
title="Remover imagem"
>
)}
{hint}
);
}
// MediaCard — card de upload de imagem OU vídeo do widget.
// Props:
// - label, hint: textos do card
// - value: caminho atual (ex: "uploads/mascot.png" ou URL completa)
// - onChange(newValue): callback ao trocar/remover (atualiza state do chat)
// - kind: "image" | "video" → define accept do input e preview
// Reusa o endpoint /api/admin/upload-avatar-video (multer aceita img + vídeo).
function MediaCard({ label, hint, value, onChange, kind }) {
const inputRef = useRef(null);
const [uploading, setUploading] = useState(false);
const toast = useToast();
const accept = kind === "video" ? "video/mp4,video/*" : "image/*";
const previewSrc = value
? (value.startsWith('http') || value.startsWith('/') ? value : '/' + value)
: null;
const fileName = value ? value.split('/').pop() : '';
const onPick = () => inputRef.current && inputRef.current.click();
const onFile = async (e) => {
const file = e.target.files && e.target.files[0];
if (!file) return;
if (kind === "video" && !file.type.startsWith('video/')) {
toast({ title: 'Arquivo inválido', msg: 'Selecione um vídeo MP4.', kind: 'error' });
return;
}
if (kind === "image" && !file.type.startsWith('image/')) {
toast({ title: 'Arquivo inválido', msg: 'Selecione uma imagem (PNG, JPG, WebP).', kind: 'error' });
return;
}
const fd = new FormData();
fd.append('file', file);
setUploading(true);
try {
const r = await fetch('/api/admin/upload-avatar-video', {
method: 'POST',
body: fd,
headers: { Authorization: 'Bearer ' + (Auth && Auth.token ? Auth.token : '') },
});
const data = await r.json();
if (!r.ok || !data.url) throw new Error(data.error || 'Falha no upload');
onChange(data.url);
toast({ title: 'Arquivo enviado', msg: 'Lembre de clicar em Salvar.', kind: 'success' });
} catch (err) {
toast({ title: 'Falha no upload', msg: err.message, kind: 'error' });
} finally {
setUploading(false);
if (inputRef.current) inputRef.current.value = '';
}
};
return (
{previewSrc ? (
kind === "video" ? (
) : (
)
) : (
{kind === "video" ? "MP4 · loop" : "PNG · 512×512"}
)}
{label}
{hint}
nenhum arquivo }
onChange('')}
disabled={uploading || !value}
title={value ? 'Remover arquivo' : 'Nada pra remover'}
>
);
}
// ---------- Prompt pane ----------
function PromptPane({ value, onChange }) {
const tokens = value.length;
const wordCount = value.split(/\s+/).filter(Boolean).length;
const [showVars, setShowVars] = useState(false);
const [showVersions, setShowVersions] = useState(false);
return (
<>
System prompt define como a IA pensa
Use {`{{voice_tone}}`}, {`{{current_date}}`} e {`{{contexts}}`} para inserir valores dinâmicos. Inicie sempre com regras de comportamento antes de fontes.
system_prompt.md
·
{wordCount} palavras · ~{Math.round(tokens / 4)} tokens
setShowVersions(true)}>
setShowVars(true)}>
{showVars && setShowVars(false)} onInsert={(v) => { onChange(value + v); setShowVars(false); }} />}
{showVersions && setShowVersions(false)} />}
);
}
// ---- Variables reference modal ----
function VariablesModal({ onClose, onInsert }) {
const vars = [
{ v: '{{voice_tone}}', d: 'Tom de voz ativo (amigavel, formal, consultivo…). Definido na aba Persona & Voz.' },
{ v: '{{current_date}}', d: 'Data atual em pt-BR (ex.: 16 de maio de 2026). Substituída a cada requisição.' },
{ v: '{{contexts}}', d: 'Bloco com todos os contextos diretos relevantes para a pergunta atual.' },
{ v: '{{user_message}}', d: 'Mensagem original do usuário (antes do query refinement).' },
{ v: '{{refined_query}}', d: 'Versão reescrita da pergunta usada para retrieval (pós-resolução de pronomes).' },
{ v: '{{retrieved_chunks}}', d: 'Trechos recuperados do RAG (já filtrados pelo reranker).' },
{ v: '{{session_history}}', d: 'Últimas N mensagens da conversa atual, para manter contexto.' },
];
return (
e.stopPropagation()}>
Tokens entre {`{{...}}`} são substituídos antes do prompt ser enviado ao LLM. Clique para inserir no editor.
{vars.map((x) => (
onInsert(' ' + x.v)}
style={{
textAlign: 'left',
padding: '12px 14px',
background: 'var(--bg1)',
border: '1px solid var(--b1)',
borderRadius: 'var(--r-input)',
cursor: 'pointer',
display: 'flex', flexDirection: 'column', gap: 4,
}}
>
{x.v}
{x.d}
))}
Fechar
);
}
// ---- Versions placeholder modal ----
function VersionsModal({ onClose }) {
return (
e.stopPropagation()}>
Histórico de versões em breve.
Cada salvamento criará uma versão com timestamp + autor.
Entendi
);
}
// ---------- Handoff pane ----------
function HandoffPane({ onAction }) {
const toast = useToast();
const confirm = useConfirm();
const [redirects, setRedirects] = useState(Data.redirects);
const [editing, setEditing] = useState(null); // null = fechado; {} = criar; {id, ...} = editar
const reload = async () => {
await DataLoader.redirects();
setRedirects([...Data.redirects]);
};
useEffect(() => {
let alive = true;
DataLoader.redirects().then(() => { if (alive) setRedirects([...Data.redirects]); });
return () => { alive = false; };
}, []);
const channelIcon = { whatsapp: "fab fa-whatsapp", phone: "fas fa-phone", email: "fas fa-envelope", rdstation: "fas fa-broadcast-tower", link: "fas fa-link" };
const channelClass = { whatsapp: "b-gr", phone: "b-bl", email: "b-or", rdstation: "b-am", link: "b-mut" };
const onDelete = async (r) => {
const ok = await confirm({
title: "Remover canal?",
message: `O canal "${r.label}" será apagado permanentemente. Essa ação não pode ser desfeita.`,
confirmLabel: "Remover",
danger: true,
});
if (!ok) return;
try {
await api(`/api/admin/support-redirects/${r.id}`, { method: 'DELETE' });
toast({ title: "Canal removido", kind: "success" });
reload();
} catch (e) {
toast({ title: "Falha ao remover", msg: e.message, kind: "error" });
}
};
const onToggleEnabled = async (r) => {
try {
await api(`/api/admin/support-redirects/${r.id}`, {
method: 'PATCH',
body: { enabled: !r.enabled },
});
reload();
} catch (e) {
toast({ title: "Falha ao atualizar status", msg: e.message, kind: "error" });
}
};
return (
<>
Oferecidos quando a IA cai em fallback ou usuário pede.
setEditing({ channel: 'whatsapp', label: '', url: '', sort_order: 100, enabled: true })}
>
{redirects.length === 0 ? (
Nenhum canal cadastrado
Clique em Adicionar canal pra criar o primeiro (WhatsApp, telefone, e-mail…).
) : (
Canal
Rótulo
URL
Ordem
Status
Ações
{redirects.map((r) => (
{r.label}
{r.url}{r.sort}
onToggleEnabled(r)}
title={r.enabled ? "Clique pra desativar" : "Clique pra ativar"}
style={{ padding: 0 }}
>
setEditing({ ...r, sort_order: r.sort })}
title="Editar canal"
>
onDelete(r)}
title="Remover canal"
>
))}
)}
{editing && (
setEditing(null)}
onSaved={() => { setEditing(null); reload(); }}
/>
)}
);
}
// Modal de criação/edição de canal de suporte. Usado pelo HandoffPane pra
// substituir o SimpleModal genérico — assim conseguimos refetch da lista
// quando salva, sem depender de prop drilling pelo handleAction global.
function HandoffEditModal({ initial, onClose, onSaved }) {
const toast = useToast();
const isEdit = !!initial.id;
const [vals, setVals] = useState({
channel: initial.channel || 'whatsapp',
label: initial.label || '',
url: initial.url || '',
sort_order: typeof initial.sort_order === 'number' ? initial.sort_order : 100,
enabled: initial.enabled !== false,
});
const [busy, setBusy] = useState(false);
const setV = (k, v) => setVals((s) => ({ ...s, [k]: v }));
const placeholderByChannel = {
whatsapp: 'https://wa.me/5511999999999',
phone: 'tel:+5511999999999',
email: 'mailto:contato@sintracon.org.br',
rdstation: 'https://...rdstation.com.br/...',
link: 'https://...',
};
const labelHintByChannel = {
whatsapp: 'Falar pelo WhatsApp',
phone: 'Ligar para o SINTRACON',
email: 'Enviar e-mail',
rdstation: 'Atendimento RD Station',
link: 'Falar pela Central',
};
const onSubmit = async (e) => {
e.preventDefault();
if (!vals.label.trim() || !vals.url.trim()) {
toast({ title: 'Preencha rótulo e URL', kind: 'info' });
return;
}
setBusy(true);
try {
if (isEdit) {
await api(`/api/admin/support-redirects/${initial.id}`, {
method: 'PATCH',
body: {
channel: vals.channel,
label: vals.label.trim(),
url: vals.url.trim(),
sort_order: parseInt(vals.sort_order, 10) || 100,
enabled: vals.enabled,
},
});
toast({ title: 'Canal atualizado', kind: 'success' });
} else {
await api('/api/admin/support-redirects', {
method: 'POST',
body: {
channel: vals.channel,
label: vals.label.trim(),
url: vals.url.trim(),
sort_order: parseInt(vals.sort_order, 10) || 100,
enabled: vals.enabled,
},
});
toast({ title: 'Canal adicionado', kind: 'success' });
}
onSaved();
} catch (err) {
toast({ title: 'Falha ao salvar', msg: err.message, kind: 'error' });
setBusy(false);
}
};
return (
);
}
window.ScreenChatbot = ScreenChatbot;
) : (
)}