feat(web): migra Conversa e Reacoes para o painel novo
- Conversa: chat empurrado por SSE, indicador de "pensando", gesto da resposta com repetir, voz com aviso claro quando o contexto nao e seguro e leitura em voz alta so de respostas novas - Memoria unificada: lembrancas da conversa + rotina/preferencias em abas; apagar tudo com confirmacao inline (sem confirm nativo) - Reacoes: biblioteca com miniaturas estaticas (sem iframe por cartao), busca, mostrar no celular, feedback, editar em <dialog>, duplicar, ativar e excluir com Desfazer no toast; criar com IA; diario; grade de gestos com estrela para favoritos; uma unica previa lateral - treinamento recarrega por evento SSE ao terminar, sem polling - corrige icones encolhidos em botoes .pequeno.icone Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
julio
@@ -1,7 +1,449 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
Copy, Download, Eye, EyeOff, Pencil, Plus, Search, Send, Sparkles, Square, ThumbsDown, ThumbsUp, Trash2, Undo2,
|
||||
} from '@lucide/svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { postar } from '../lib/api';
|
||||
import { avisos, tentar } from '../lib/avisos.svelte';
|
||||
import Abas from '../lib/componentes/Abas.svelte';
|
||||
import Card from '../lib/componentes/Card.svelte';
|
||||
import Gestos from '../lib/componentes/Gestos.svelte';
|
||||
import Miniatura from '../lib/componentes/Miniatura.svelte';
|
||||
import Modal from '../lib/componentes/Modal.svelte';
|
||||
import RostoPrevia from '../lib/componentes/RostoPrevia.svelte';
|
||||
import Selo from '../lib/componentes/Selo.svelte';
|
||||
import Toggle from '../lib/componentes/Toggle.svelte';
|
||||
import { treinamento, type ReacaoBiblioteca } from '../lib/treinamento.svelte';
|
||||
|
||||
type Aba = 'biblioteca' | 'criar' | 'gestos' | 'diario';
|
||||
let aba = $state<Aba>('biblioteca');
|
||||
let previa = $state<{ previa: (receita: unknown) => void }>();
|
||||
let busca = $state('');
|
||||
const st = $derived(treinamento.status);
|
||||
|
||||
onMount(() => {
|
||||
treinamento.carregar();
|
||||
});
|
||||
|
||||
const normal = (t: string) => t.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
|
||||
const reacoes = $derived(
|
||||
(st?.reacoes ?? []).filter((r) => !busca || normal(r.receita.nome + ' ' + r.receita.motivo).includes(normal(busca))),
|
||||
);
|
||||
const tipo = (r: ReacaoBiblioteca) => (r.receita.figurinha ? 'Desenho' : r.receita.emoji ? 'Emoji' : 'Animação');
|
||||
|
||||
// ---------- ações da biblioteca
|
||||
const mostrar = (r: ReacaoBiblioteca) => tentar(() => postar('/comando', { tipo: 'reacao', valor: r.id }), 'Enviada ao celular.');
|
||||
const pararNoCelular = () => {
|
||||
previa?.previa({ limpar: true });
|
||||
tentar(() => postar('/comando', { tipo: 'parar_reacao' }));
|
||||
};
|
||||
const biblioteca = (dados: object, sucesso?: string) => treinamento.acao('biblioteca', dados, sucesso);
|
||||
const desfazer = () => biblioteca({ acao: 'desfazer' }, 'Alteração desfeita.');
|
||||
|
||||
async function excluir(r: ReacaoBiblioteca) {
|
||||
if (await biblioteca({ acao: 'excluir', id: r.id }))
|
||||
avisos.ok(`“${r.receita.nome}” excluída.`, { rotulo: 'Desfazer', fazer: desfazer });
|
||||
}
|
||||
const feedback = (r: ReacaoBiblioteca, valor: -1 | 1) =>
|
||||
treinamento.acao('feedback', { id: r.id, valor: r.feedback === valor ? 0 : valor });
|
||||
|
||||
function exportar() {
|
||||
if (!st) return;
|
||||
const url = URL.createObjectURL(
|
||||
new Blob([JSON.stringify(st.reacoes.map((r) => r.receita), null, 2)], { type: 'application/json' }),
|
||||
);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'carinha-reacoes.json';
|
||||
a.click();
|
||||
setTimeout(() => URL.revokeObjectURL(url), 1000);
|
||||
}
|
||||
|
||||
// ---------- editor
|
||||
let editorAberto = $state(false);
|
||||
let editando = $state<ReacaoBiblioteca | null>(null);
|
||||
let form = $state({ nome: '', motivo: '', caractere: '💡', local: 'olhos' });
|
||||
function abrirEditor(r: ReacaoBiblioteca | null) {
|
||||
editando = r;
|
||||
form = {
|
||||
nome: r?.receita.nome ?? '',
|
||||
motivo: r?.receita.motivo ?? '',
|
||||
caractere: r?.receita.emoji?.caractere ?? (r ? '' : '💡'),
|
||||
local: r?.receita.emoji?.local ?? r?.receita.figurinha?.local ?? 'olhos',
|
||||
};
|
||||
editorAberto = true;
|
||||
}
|
||||
async function salvarEditor(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
const dados = { acao: editando ? 'editar' : 'criar', id: editando?.id ?? null, ...form, nome: form.nome.trim(), motivo: form.motivo.trim() };
|
||||
if (await biblioteca(dados, editando ? 'Reação atualizada.' : 'Emoji criado.')) editorAberto = false;
|
||||
}
|
||||
|
||||
// ---------- criar com IA
|
||||
let pedido = $state('');
|
||||
async function desenhar(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
if (await treinamento.acao('figurinha', { texto: pedido.trim() }, 'Pedido enviado ao Gemini. A figurinha aparece no celular quando ficar pronta.'))
|
||||
pedido = '';
|
||||
}
|
||||
let confirmarDiario = $state(false);
|
||||
const hora = (t: number) => new Date(t * 1000).toLocaleString('pt-BR', { dateStyle: 'short', timeStyle: 'short' });
|
||||
</script>
|
||||
|
||||
<Card titulo="Reações" descricao="Biblioteca e criação com IA migram na fase 3.">
|
||||
<p class="pequeno-texto">Enquanto isso, use a tela antiga: <a href="/emojis">abrir Reações (versão anterior)</a>.</p>
|
||||
</Card>
|
||||
<div class="reacoes">
|
||||
<div class="principal">
|
||||
<Abas
|
||||
rotulo="Reações"
|
||||
bind:ativa={aba}
|
||||
abas={[
|
||||
{ id: 'biblioteca', titulo: 'Biblioteca', contador: st?.reacoes.length },
|
||||
{ id: 'criar', titulo: 'Criar com IA' },
|
||||
{ id: 'gestos', titulo: 'Gestos do rosto' },
|
||||
{ id: 'diario', titulo: 'Diário' },
|
||||
]}
|
||||
/>
|
||||
|
||||
{#if aba === 'biblioteca'}
|
||||
<div class="barra">
|
||||
<label class="busca">
|
||||
<Search size={16} />
|
||||
<input type="search" bind:value={busca} placeholder="Buscar reação" aria-label="Buscar reação" />
|
||||
</label>
|
||||
<button class="btn primario" onclick={() => abrirEditor(null)} disabled={st?.ocupado}><Plus size={16} /> Novo emoji</button>
|
||||
<button class="btn" onclick={desfazer} disabled={!st?.desfazer || st?.ocupado}><Undo2 size={16} /> Desfazer</button>
|
||||
<button class="btn" onclick={pararNoCelular}><Square size={16} /> Parar no celular</button>
|
||||
<button class="btn fantasma" onclick={exportar} disabled={!st?.reacoes.length}><Download size={16} /> Exportar</button>
|
||||
</div>
|
||||
|
||||
{#if !st}
|
||||
<p class="fraco">Carregando biblioteca…</p>
|
||||
{:else}
|
||||
<ul class="grade-reacoes">
|
||||
{#each reacoes as r (r.id)}
|
||||
<li class="reacao" class:inativa={!r.ativa}>
|
||||
<button class="topo" onclick={() => previa?.previa(r.receita)} title="Ver na prévia">
|
||||
<Miniatura receita={r.receita} />
|
||||
<div class="info">
|
||||
<strong>{r.receita.nome}</strong>
|
||||
<span class="fraco pequeno-texto">{r.receita.motivo}</span>
|
||||
<span class="linha">
|
||||
<Selo>{tipo(r)}</Selo>
|
||||
{#if !r.ativa}<Selo tom="aviso">Desativada</Selo>{/if}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
<div class="acoes">
|
||||
<button class="btn pequeno primario" onclick={() => mostrar(r)}><Send size={14} /> Mostrar</button>
|
||||
<button
|
||||
class="btn pequeno icone"
|
||||
class:marcado={r.feedback === 1}
|
||||
aria-pressed={r.feedback === 1}
|
||||
aria-label="Gostei"
|
||||
onclick={() => feedback(r, 1)}><ThumbsUp size={14} /></button
|
||||
>
|
||||
<button
|
||||
class="btn pequeno icone"
|
||||
class:marcado-ruim={r.feedback === -1}
|
||||
aria-pressed={r.feedback === -1}
|
||||
aria-label="Não gostei"
|
||||
onclick={() => feedback(r, -1)}><ThumbsDown size={14} /></button
|
||||
>
|
||||
<span class="espaco"></span>
|
||||
<button class="btn pequeno icone fantasma" aria-label="Editar" title="Editar" onclick={() => abrirEditor(r)}><Pencil size={14} /></button>
|
||||
<button class="btn pequeno icone fantasma" aria-label="Duplicar" title="Duplicar" onclick={() => biblioteca({ acao: 'duplicar', id: r.id }, 'Reação duplicada.')}
|
||||
><Copy size={14} /></button
|
||||
>
|
||||
<button
|
||||
class="btn pequeno icone fantasma"
|
||||
aria-label={r.ativa ? 'Desativar' : 'Ativar'}
|
||||
title={r.ativa ? 'Desativar (a IA deixa de usar)' : 'Ativar'}
|
||||
onclick={() => biblioteca({ acao: 'ativar', id: r.id, ativa: !r.ativa })}
|
||||
>
|
||||
{#if r.ativa}<EyeOff size={14} />{:else}<Eye size={14} />{/if}
|
||||
</button>
|
||||
<button class="btn pequeno icone fantasma perigo-texto" aria-label="Excluir" title="Excluir" onclick={() => excluir(r)}><Trash2 size={14} /></button>
|
||||
</div>
|
||||
</li>
|
||||
{:else}
|
||||
<li class="fraco">{busca ? 'Nenhuma reação encontrada.' : 'Crie um emoji ou peça um desenho ao Gemini.'}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{:else if aba === 'criar'}
|
||||
<div class="grade-criar">
|
||||
<Card titulo="Desenhar figurinha" descricao="O Gemini desenha um SVG e o celular mostra assim que ficar pronto.">
|
||||
<form class="grade" onsubmit={desenhar}>
|
||||
<label class="campo">
|
||||
<span>O que desenhar</span>
|
||||
<textarea bind:value={pedido} maxlength="1000" placeholder="Ex.: um sol de óculos escuros sorrindo" required></textarea>
|
||||
</label>
|
||||
<button class="btn primario" type="submit" disabled={st?.ocupado || !pedido.trim()}>
|
||||
<Sparkles size={16} /> {st?.ocupado ? 'Gemini trabalhando…' : 'Desenhar e mostrar'}
|
||||
</button>
|
||||
</form>
|
||||
{#if st?.ultimo_prompt_figurinha}
|
||||
<details>
|
||||
<summary class="pequeno-texto fraco">Último pedido enviado</summary>
|
||||
<pre class="mono">{st.ultimo_prompt_figurinha}</pre>
|
||||
</details>
|
||||
{/if}
|
||||
</Card>
|
||||
<Card titulo="Reações automáticas" descricao="A partir da conversa e da rotina, o Gemini inventa 3 animações novas.">
|
||||
<button class="btn" onclick={() => treinamento.acao('gerar', {}, 'Gemini está criando 3 reações…')} disabled={st?.ocupado}>
|
||||
<Sparkles size={16} /> Gerar 3 agora
|
||||
</button>
|
||||
<Toggle
|
||||
rotulo="Gerar sozinho a cada hora"
|
||||
ajuda="Cada geração é uma chamada paga ao Gemini"
|
||||
checked={!!st?.automatico}
|
||||
disabled={!st}
|
||||
onchange={(v) => treinamento.acao('config', { automatico: v })}
|
||||
/>
|
||||
{#if st?.ocupado}<Selo tom="aviso">Gemini trabalhando…</Selo>{/if}
|
||||
{#if st?.erro}<p class="erro pequeno-texto">{st.erro}</p>{/if}
|
||||
</Card>
|
||||
</div>
|
||||
{:else if aba === 'gestos'}
|
||||
<Card titulo="Gestos do rosto" descricao="Toque para mandar ao celular. A estrela fixa o gesto nos favoritos (atalhos 1 a 9).">
|
||||
<Gestos completo />
|
||||
</Card>
|
||||
{:else}
|
||||
<div class="grade-criar">
|
||||
<Card titulo="Resumos">
|
||||
{#each st?.resumos ?? [] as r (r.id)}
|
||||
<article class="entrada"><time class="fraco pequeno-texto">{hora(r.horario)}</time><p>{r.texto}</p></article>
|
||||
{:else}
|
||||
<p class="fraco pequeno-texto">Os resumos aparecem quando o Gemini gera reações.</p>
|
||||
{/each}
|
||||
</Card>
|
||||
<Card titulo="Diário">
|
||||
{#snippet acoes()}
|
||||
{#if confirmarDiario}
|
||||
<button
|
||||
class="btn perigo pequeno"
|
||||
onclick={async () => {
|
||||
confirmarDiario = false;
|
||||
await treinamento.acao('limpar-diario', {}, 'Diário e resumos apagados.');
|
||||
}}>Apagar diário</button
|
||||
>
|
||||
<button class="btn pequeno" onclick={() => (confirmarDiario = false)}>Cancelar</button>
|
||||
{:else}
|
||||
<button class="btn pequeno fantasma" onclick={() => (confirmarDiario = true)} disabled={!st?.diario.length}>
|
||||
<Trash2 size={14} /> Limpar
|
||||
</button>
|
||||
{/if}
|
||||
{/snippet}
|
||||
<div class="diario">
|
||||
{#each st?.diario ?? [] as m (m.id)}
|
||||
<article class="entrada">
|
||||
<time class="fraco pequeno-texto">{hora(m.horario)} · {m.papel === 'user' ? 'Você' : 'Carinha'}</time>
|
||||
<p>{m.texto}</p>
|
||||
</article>
|
||||
{:else}
|
||||
<p class="fraco pequeno-texto">Vazio.</p>
|
||||
{/each}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<aside class="lateral">
|
||||
<div class="quadro"><RostoPrevia bind:this={previa} titulo="Prévia das reações" /></div>
|
||||
<p class="fraco pequeno-texto">Clique numa reação para ver aqui sem mandar ao celular.</p>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<Modal bind:aberto={editorAberto} titulo={editando ? 'Editar reação' : 'Novo emoji'}>
|
||||
<form class="grade" onsubmit={salvarEditor}>
|
||||
<label class="campo"><span>Nome</span><input type="text" bind:value={form.nome} maxlength="50" required /></label>
|
||||
<label class="campo"><span>Quando usar</span><input type="text" bind:value={form.motivo} maxlength="200" required /></label>
|
||||
{#if !editando?.receita.figurinha}
|
||||
<div class="campo">
|
||||
<span>Emoji</span>
|
||||
<div class="emojis" role="radiogroup" aria-label="Emoji">
|
||||
{#each st?.emojis ?? [] as e (e)}
|
||||
<button type="button" role="radio" aria-checked={form.caractere === e} onclick={() => (form.caractere = e)}>{e}</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<label class="campo">
|
||||
<span>Onde aparece</span>
|
||||
<select bind:value={form.local}>
|
||||
<option value="olhos">Nos olhos</option>
|
||||
<option value="ao_redor">Ao redor do rosto</option>
|
||||
</select>
|
||||
</label>
|
||||
{/if}
|
||||
<div class="linha">
|
||||
<button class="btn primario" type="submit" disabled={!editando && !form.caractere}>Salvar</button>
|
||||
<button class="btn" type="button" onclick={() => (editorAberto = false)}>Cancelar</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.reacoes {
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
align-items: start;
|
||||
}
|
||||
.principal {
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
min-width: 0;
|
||||
}
|
||||
.barra {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--e-2);
|
||||
}
|
||||
.busca {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--e-2);
|
||||
padding-left: var(--e-3);
|
||||
border: 1px solid var(--borda-forte);
|
||||
border-radius: var(--raio-sm);
|
||||
background: var(--fundo-2);
|
||||
color: var(--texto-3);
|
||||
}
|
||||
.busca input {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.grade-reacoes {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: var(--e-3);
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
|
||||
}
|
||||
.reacao {
|
||||
display: grid;
|
||||
gap: var(--e-3);
|
||||
padding: var(--e-3);
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-lg);
|
||||
background: var(--superficie);
|
||||
}
|
||||
.reacao.inativa {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.topo {
|
||||
display: flex;
|
||||
gap: var(--e-3);
|
||||
text-align: left;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.info {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
align-content: start;
|
||||
}
|
||||
.info strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.acoes {
|
||||
display: flex;
|
||||
gap: var(--e-1);
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.espaco {
|
||||
flex: 1;
|
||||
}
|
||||
.marcado {
|
||||
color: var(--ok);
|
||||
border-color: var(--ok);
|
||||
}
|
||||
.marcado-ruim {
|
||||
color: var(--perigo);
|
||||
border-color: var(--perigo);
|
||||
}
|
||||
.perigo-texto:hover {
|
||||
color: var(--perigo);
|
||||
}
|
||||
.grade-criar {
|
||||
display: grid;
|
||||
gap: var(--e-4);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
|
||||
align-items: start;
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
font-size: var(--t-xs);
|
||||
color: var(--texto-2);
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
.erro {
|
||||
color: var(--perigo);
|
||||
}
|
||||
.entrada {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
.diario {
|
||||
display: grid;
|
||||
gap: var(--e-3);
|
||||
max-height: 480px;
|
||||
overflow: auto;
|
||||
}
|
||||
.lateral {
|
||||
display: grid;
|
||||
gap: var(--e-2);
|
||||
}
|
||||
.quadro {
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--raio-lg);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--borda);
|
||||
background: #000;
|
||||
}
|
||||
.emojis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
|
||||
gap: 4px;
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
}
|
||||
.emojis button {
|
||||
height: 40px;
|
||||
border: 1px solid var(--borda);
|
||||
border-radius: var(--raio-sm);
|
||||
background: var(--superficie-2);
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.emojis button[aria-checked='true'] {
|
||||
border-color: var(--destaque);
|
||||
background: var(--destaque-suave);
|
||||
}
|
||||
@media (max-width: 1099px) {
|
||||
.lateral {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
.reacoes {
|
||||
grid-template-columns: 1fr 340px;
|
||||
}
|
||||
.lateral {
|
||||
position: sticky;
|
||||
top: calc(var(--topo-altura) + var(--e-4));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user