640 lines
39 KiB
HTML
640 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="theme-color" content="#10a37f">
|
|
<meta name="description" content="Assistente virtual da Camila - Profesora">
|
|
<!-- PWA Manifest -->
|
|
<link rel="manifest" href="/manifest.json">
|
|
<!-- iOS PWA Support -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="Camila AI">
|
|
<link rel="apple-touch-icon" href="/assets/camila_prof.png">
|
|
<title>Camila AI</title>
|
|
<!-- Google Fonts Outfit & Inter -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<!-- Highlight.js para destaque de sintaxe em códigos -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<!-- Favicon customizado -->
|
|
<link rel="icon" href="/assets/camila_prof.png" type="image/png">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Sidebar / Menu lateral (Deslizante no mobile) -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<button class="btn-new-chat" id="btnNewChat">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
<span>Novo chat</span>
|
|
</button>
|
|
<button class="btn-close-sidebar" id="btnCloseSidebar" aria-label="Fechar menu">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Busca no Histórico -->
|
|
<div class="sidebar-search">
|
|
<div class="sidebar-search-wrapper">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="search-icon">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
|
</svg>
|
|
<input type="text" id="searchInput" placeholder="Buscar conversas..." class="search-input" autocomplete="off">
|
|
<button class="search-clear" id="searchClear" aria-label="Limpar busca" style="display:none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tags de filtro -->
|
|
<div class="sidebar-tags" id="sidebarTags">
|
|
<button class="tag-filter active" data-tag="all">Todas</button>
|
|
<button class="tag-filter" data-tag="relatorios">📋 Relatórios</button>
|
|
<button class="tag-filter" data-tag="planejamento">📝 Planejamento</button>
|
|
<button class="tag-filter" data-tag="mindlab">🧠 Mind Lab</button>
|
|
<button class="tag-filter" data-tag="estudos">📚 Estudos</button>
|
|
</div>
|
|
|
|
<!-- Botão: Minhas Observações -->
|
|
<button class="btn-observacoes" id="btnObservacoes">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
|
|
</svg>
|
|
<span>Minhas Observações</span>
|
|
</button>
|
|
|
|
<!-- Botão: Emitir Relatório -->
|
|
<button class="btn-observacoes" id="btnEmitirRelatorio" style="border-color: var(--brand-green); color: var(--brand-green); background: rgba(16, 163, 127, 0.05);">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
|
</svg>
|
|
<span>Emitir Relatório</span>
|
|
</button>
|
|
|
|
<!-- Botão: Modelos de Relatório -->
|
|
<button class="btn-observacoes" id="btnModelosRelatorio">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<span>Modelos de Relatório</span>
|
|
</button>
|
|
|
|
<!-- Histórico de Conversas -->
|
|
<div class="chat-history" id="chatHistory">
|
|
<!-- Histórico filtrado/busca -->
|
|
<div class="search-results-header" id="searchResultsHeader" style="display:none">
|
|
<div class="search-results-info">
|
|
<span id="searchResultsCount"></span>
|
|
<button class="search-clear-all" id="searchClearAll">Limpar</button>
|
|
</div>
|
|
</div>
|
|
<!-- Items gerados por JS -->
|
|
<div id="historyItems"></div>
|
|
</div>
|
|
|
|
<!-- Rodapé do Menu Lateral -->
|
|
<div class="sidebar-footer">
|
|
<div class="user-profile">
|
|
<div class="avatar user-avatar sidebar-avatar-wrapper">
|
|
<img src="assets/camila_prof.png" alt="Camila Reifonas" class="sidebar-avatar-img" id="sidebarAvatarImg">
|
|
</div>
|
|
<div class="user-info">
|
|
<span class="user-name">Camila Reifonas</span>
|
|
<span class="user-status">Online</span>
|
|
</div>
|
|
<button class="btn-settings" id="btnSettings" title="Configurações do Agente" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: color var(--transition-fast), background-color var(--transition-fast); margin-right: 4px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 20px; height: 20px;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.43l-1.003.828c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.43l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.991l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.645-.869L9.594 3.94ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
|
|
</svg>
|
|
</button>
|
|
<button class="btn-logout" id="btnLogout" title="Sair">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- FAB: Nova Observação por Voz -->
|
|
<button class="fab-record" id="fabRecord" title="Nova Observação (gravar)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Overlay para fechar sidebar clicando fora no mobile -->
|
|
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
|
|
|
<!-- Área principal do Chat -->
|
|
<main class="chat-area">
|
|
<!-- Topo fixo / Header -->
|
|
<header class="chat-header">
|
|
<button class="btn-menu" id="btnMenu" aria-label="Abrir menu">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="model-badge">
|
|
<span id="modelBadgeText">GPT-4.1 Nano</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="chevron">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="header-right">
|
|
<button class="btn-theme-toggle" id="btnThemeToggle" title="Alternar tema" aria-label="Alternar entre tema claro e escuro">
|
|
<!-- Sun icon (shown in dark mode, to switch to light) -->
|
|
<svg id="iconThemeSun" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M12 6.75a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5Z" />
|
|
</svg>
|
|
<!-- Moon icon (shown in light mode, to switch to dark) -->
|
|
<svg id="iconThemeMoon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="display:none">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<button class="btn-new-chat-mobile" id="btnNewChatMobile" aria-label="Novo chat">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Mensagens da conversa -->
|
|
<div class="messages-container" id="messagesContainer">
|
|
<!-- Estado inicial / Bem-vindo (se não houver mensagens) -->
|
|
<div class="welcome-container" id="welcomeContainer">
|
|
<div class="welcome-logo">
|
|
<div class="logo-outer welcome-avatar-wrapper">
|
|
<img src="assets/kemily.png" alt="Kemily AI" class="welcome-avatar-img" id="welcomeAvatarImg">
|
|
</div>
|
|
</div>
|
|
<h2 id="welcomeTitle">Olá! Sou sua assistente virtual e me chamo Kemily. Como posso ajudar?</h2>
|
|
|
|
<div class="welcome-grid">
|
|
<div class="suggestion-card" data-prompt="Escreva um relatório de observação semanal de um aluno de educação infantil focado em socialização e interação.">
|
|
<div class="card-icon">📋</div>
|
|
<div class="card-title">Relatório Semanal</div>
|
|
<div class="card-desc">Observação de desenvolvimento e socialização na educação infantil.</div>
|
|
</div>
|
|
<div class="suggestion-card" data-prompt="Crie um planejamento de aula inspirado no Mind Lab para trabalhar educação socioemocional e cooperação.">
|
|
<div class="card-icon">🧠</div>
|
|
<div class="card-title">Planejamento Mind Lab</div>
|
|
<div class="card-desc">Atividades lúdicas para desenvolvimento de habilidades socioemocionais.</div>
|
|
</div>
|
|
<div class="suggestion-card" data-prompt="Crie uma música pedagógica infantil alegre e animada sobre animais e sons da fazenda.">
|
|
<div class="card-icon">🎵</div>
|
|
<div class="card-title">Criar Música / Cantiga</div>
|
|
<div class="card-desc">Gere músicas divertidas com melodia e letra educativa.</div>
|
|
</div>
|
|
<div class="suggestion-card" data-prompt="Crie um planejamento pedagógico de artes alinhado à BNCC para o campo 'Traços, sons, cores e formas'.">
|
|
<div class="card-icon">🎨</div>
|
|
<div class="card-title">Atividade BNCC</div>
|
|
<div class="card-desc">Planos de aula estruturados de acordo com as normas da BNCC.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lista de mensagens geradas dinamicamente -->
|
|
<div class="conversation-list" id="conversationList"></div>
|
|
</div>
|
|
|
|
<!-- Barra inferior com input de texto -->
|
|
<footer class="chat-footer">
|
|
<div class="input-container">
|
|
<!-- Barra de Modos de Prompt Rápidos -->
|
|
<div class="prompt-modes-bar">
|
|
<button type="button" class="btn-prompt-mode mode-music" data-mode="AUDIO" title="Compor e gerar uma música pedagógica">
|
|
<span class="mode-icon">🎵</span> Criar Música
|
|
</button>
|
|
<button type="button" class="btn-prompt-mode mode-video" data-mode="VIDEO" title="Criar um roteiro ou animação de vídeo">
|
|
<span class="mode-icon">🎬</span> Criar Vídeo
|
|
</button>
|
|
<button type="button" class="btn-prompt-mode mode-image" data-mode="IMAGE" title="Gerar ou desenhar uma ilustração educativa">
|
|
<span class="mode-icon">🎨</span> Criar Imagem
|
|
</button>
|
|
<button type="button" class="btn-prompt-mode mode-text" data-mode="TEXT" title="Escrever histórias, relatórios ou conversar">
|
|
<span class="mode-icon">✍️</span> Criar História / Chat
|
|
</button>
|
|
</div>
|
|
<form id="chatForm">
|
|
<div class="input-box">
|
|
<button type="button" id="btnAttach" class="btn-attach" aria-label="Anexar arquivo" title="Anexar imagem ou documento">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
|
</svg>
|
|
</button>
|
|
<input type="file" id="fileInput" accept="image/*,.pdf,.doc,.docx,.txt" multiple style="display:none">
|
|
<textarea id="userInput" placeholder="Mensagem Camila AI..." rows="1" autocomplete="off"></textarea>
|
|
<button type="button" id="btnVoice" class="btn-voice" aria-label="Usar microfone" title="Ditar mensagem">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
|
<line stroke-linecap="round" stroke-linejoin="round" x1="12" x2="12" y1="19" y2="22"/>
|
|
</svg>
|
|
</button>
|
|
<button type="submit" id="btnSend" disabled aria-label="Enviar mensagem">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M11.47 2.47a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06l-6.22-6.22V21a.75.75 0 0 1-1.5 0V4.81L5.03 11.03a.75.75 0 0 1-1.06-1.06l7.5-7.5Z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p class="disclaimer">Camila AI pode cometer erros. Considere verificar informações importantes.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Modal de Tags -->
|
|
<div class="modal-overlay" id="modalTagOverlay">
|
|
<div class="modal-tag">
|
|
<div class="modal-tag-header">
|
|
<span class="modal-tag-title">Selecionar tags</span>
|
|
<button class="modal-tag-close" id="modalTagClose" aria-label="Fechar">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="20" height="20">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="modal-tag-list" id="modalTagList"></div>
|
|
<div class="modal-tag-actions">
|
|
<button class="modal-tag-btn secondary" id="modalTagCancel">Cancelar</button>
|
|
<button class="modal-tag-btn primary" id="modalTagConfirm">Confirmar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modal de Gravação de Observação -->
|
|
<div id="recordModal" class="settings-modal" style="display: none;">
|
|
<div class="settings-modal-content record-modal-content">
|
|
<div class="record-modal-header">
|
|
<button id="btnExitRecord" class="btn-exit-record" title="Sair e descartar">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
<span>Sair</span>
|
|
</button>
|
|
<h3>🎤 Nova Observação</h3>
|
|
<div style="width: 60px;"></div>
|
|
</div>
|
|
|
|
<div class="record-modal-body">
|
|
<!-- Estado: gravando -->
|
|
<div id="recordStateRecording" class="record-state" style="display: none;">
|
|
<div class="record-timer" id="recordTimer">00:00</div>
|
|
<div class="record-waveform" id="recordWaveform">
|
|
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
|
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
|
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
|
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
|
</div>
|
|
<p class="record-hint">Fale livremente sobre a observação...</p>
|
|
<button id="btnStopRecord" class="btn-stop-record">
|
|
<div class="stop-icon"></div>
|
|
<span>Parar</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Estado: processando -->
|
|
<div id="recordStateProcessing" class="record-state" style="display: none;">
|
|
<div class="record-spinner"></div>
|
|
<p id="recordProcessingText">Analisando sua observação...</p>
|
|
<small id="recordProcessingSubtext" style="color: var(--text-muted);">Transcrevendo e gerando relatório</small>
|
|
</div>
|
|
|
|
<!-- Estado: Transcrição Concluída (Revisão) -->
|
|
<div id="recordStateTranscribed" class="record-state" style="display: none; width: 100%;">
|
|
<h4 style="margin-bottom: 8px; color: var(--text-main); display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-start;">
|
|
<span>✍️ Revisar Transcrição</span>
|
|
</h4>
|
|
<p class="record-hint" style="margin-bottom: 12px; text-align: left; width: 100%;">Você pode ajustar o texto abaixo antes da análise da IA:</p>
|
|
<textarea id="transcriptionTextarea" class="transcription-textarea" style="width: 100%; min-height: 120px; padding: 12px; border-radius: 8px; border: 1px solid var(--border-light); background-color: var(--bg-card); color: var(--text-main); font-family: inherit; font-size: 14px; line-height: 1.5; resize: vertical; margin-bottom: 16px;" placeholder="Digite ou ajuste o que foi falado..."></textarea>
|
|
<div class="preview-actions" style="display: flex; gap: 12px; width: 100%; justify-content: flex-end;">
|
|
<button id="btnDiscardTranscription" class="btn-discard" style="flex: 1; max-width: 150px;">Descartar</button>
|
|
<button id="btnAnalyzeTranscription" class="btn-save-report" style="flex: 1; max-width: 200px; display: flex; align-items: center; justify-content: center; gap: 8px;">
|
|
<span>Analisar com IA</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" style="width: 16px; height: 16px;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Estado: prévia -->
|
|
<div id="recordStatePreview" class="record-state" style="display: none;">
|
|
<div class="preview-header">
|
|
<h4>📋 Relatório Gerado</h4>
|
|
<span id="previewDateTime"></span>
|
|
</div>
|
|
<div id="reportContent" class="report-content"></div>
|
|
<div class="preview-actions">
|
|
<button id="btnDiscardReport" class="btn-discard">Descartar</button>
|
|
<button id="btnSaveReport" class="btn-save-report">Salvar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal de Configurações do Agente -->
|
|
<div id="settingsModal" class="settings-modal" style="display: none;">
|
|
<div class="settings-modal-content settings-modal-large">
|
|
<div class="settings-modal-header">
|
|
<h3>Configurações da Assistente</h3>
|
|
<button id="closeSettingsModal" class="close-settings-btn">×</button>
|
|
</div>
|
|
|
|
<!-- Tabs de navegação -->
|
|
<div class="settings-tabs">
|
|
<button class="settings-tab active" data-tab="tabIdentidade">👤 Identidade</button>
|
|
<button class="settings-tab" data-tab="tabEstilo">🎯 Estilo</button>
|
|
<button class="settings-tab" data-tab="tabConhecimento">📚 Conhecimento</button>
|
|
</div>
|
|
|
|
<div class="settings-modal-body">
|
|
<!-- Tab: Identidade -->
|
|
<div id="tabIdentidade" class="settings-tab-content active">
|
|
<div class="settings-group">
|
|
<label for="settingAgentName">Nome da Assistente</label>
|
|
<input type="text" id="settingAgentName" placeholder="Ex: Kemily">
|
|
<small style="color: var(--text-muted); margin-top: 4px; display: block;">Nome que aparece para a Camila na conversa</small>
|
|
</div>
|
|
|
|
<div class="settings-group">
|
|
<label>Avatar da Assistente</label>
|
|
<div class="avatar-preview-container">
|
|
<img id="previewKemilyAvatar" src="assets/kemily.png" alt="Assistante Preview" class="preview-avatar-img">
|
|
<input type="file" id="uploadKemilyAvatar" accept="image/*" style="display: none;">
|
|
<button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadKemilyAvatar').click()">Escolher Imagem</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-group">
|
|
<label>Avatar da Camila (Usuária)</label>
|
|
<div class="avatar-preview-container">
|
|
<img id="previewCamilaAvatar" src="assets/camila_prof.png" alt="Camila Preview" class="preview-avatar-img">
|
|
<input type="file" id="uploadCamilaAvatar" accept="image/*" style="display: none;">
|
|
<button type="button" class="btn-change-avatar" onclick="document.getElementById('uploadCamilaAvatar').click()">Escolher Imagem</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Estilo -->
|
|
<div id="tabEstilo" class="settings-tab-content">
|
|
<div class="settings-group">
|
|
<label>Modo de Resposta da IA</label>
|
|
<p style="color: var(--text-muted); margin-bottom: 16px; font-size: 13px;">Controla como a assistente se comporta nas respostas — mais técnica ou mais detalhista</p>
|
|
|
|
<div class="temperature-options" id="temperatureOptions">
|
|
<!-- Opções preenchidas via JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab: Conhecimento -->
|
|
<div id="tabConhecimento" class="settings-tab-content">
|
|
<div class="settings-group">
|
|
<label>📖 Conhecimento Adquirido</label>
|
|
<p style="color: var(--text-muted); margin-bottom: 16px; font-size: 13px;">Informações que a assistente aprendeu com você ao longo das conversas. Você pode revisar e remover o que não for mais válido.</p>
|
|
|
|
<div id="knowledgeList" class="knowledge-list" style="max-height: 300px; overflow-y: auto; margin-bottom: 16px;">
|
|
<!-- Lista de fatos preenchida via JS -->
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px; align-items: center;">
|
|
<input type="text" id="manualKnowledgeInput" placeholder="Adicionar conhecimento manualmente..." style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text);">
|
|
<button type="button" id="btnAddKnowledge" class="btn-save-settings" style="padding: 10px 16px;">+ Adicionar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="settings-modal-footer">
|
|
<button id="btnSaveSettings" class="btn-save-settings">Salvar Configurações</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Minhas Observações -->
|
|
<div id="obsModal" class="settings-modal" style="display: none;">
|
|
<div class="settings-modal-content obs-modal-content">
|
|
<div class="settings-modal-header">
|
|
<h3>📒 Minhas Observações</h3>
|
|
<button id="btnCloseObsModal" class="btn-close-modal">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="obs-modal-body">
|
|
<!-- Filtros -->
|
|
<div class="obs-filters" id="obsFilters">
|
|
<select id="obsFilterMes" class="obs-select">
|
|
<option value="">Todos os meses</option>
|
|
</select>
|
|
<select id="obsFilterTag" class="obs-select">
|
|
<option value="">Todas as tags</option>
|
|
<option value="social">Social</option>
|
|
<option value="cognitivo">Cognitivo</option>
|
|
<option value="motor">Motor</option>
|
|
<option value="linguagem">Linguagem</option>
|
|
<option value="emocional">Emocional</option>
|
|
<option value="colaborativo">Colaborativo</option>
|
|
<option value="autónomo">Autónomo</option>
|
|
</select>
|
|
<input type="text" id="obsSearchCrianca" class="obs-input" placeholder="Buscar por criança...">
|
|
</div>
|
|
<!-- Lista de observações -->
|
|
<div id="obsList" class="obs-list">
|
|
<div class="obs-empty">Carregando observações...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Modelos de Relatório (CRUD Templates) -->
|
|
<div id="modelosRelatorioModal" class="settings-modal" style="display: none;">
|
|
<div class="settings-modal-content" style="max-width: 800px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
|
|
<div class="settings-modal-header">
|
|
<h3>📋 Modelos de Relatório</h3>
|
|
<button id="btnCloseModelosModal" class="btn-close-modal">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="settings-modal-body" style="padding: 16px; overflow: hidden; display: flex; flex-direction: row; gap: 16px; flex: 1; min-height: 420px;">
|
|
<!-- Lado Esquerdo: Lista de Modelos -->
|
|
<div style="flex: 1; border-right: 1px solid var(--border-light); padding-right: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">
|
|
<h4 style="margin: 0; color: var(--text-primary);">Modelos Salvos</h4>
|
|
<button id="btnCreateTemplate" style="background: var(--brand-green); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;">+ Novo Modelo</button>
|
|
</div>
|
|
<div id="templatesList" style="display: flex; flex-direction: column; gap: 8px;">
|
|
<!-- Carregado via JS -->
|
|
<div style="color: var(--text-secondary); text-align: center; padding: 20px;">Carregando modelos...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lado Direito: Formulário de Cadastro/Edição -->
|
|
<div id="templateFormContainer" style="flex: 1.2; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-left: 4px;">
|
|
<h4 id="templateFormTitle" style="margin: 0; color: var(--text-primary); border-bottom: 1px solid var(--border-light); padding-bottom: 8px;">Editar Modelo</h4>
|
|
<input type="hidden" id="templateFormId">
|
|
|
|
<div class="settings-group" style="gap: 4px;">
|
|
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Nome do Modelo</label>
|
|
<input type="text" id="templateFormNome" placeholder="Ex: Relatório Semanal de Desenvolvimento" class="obs-input" style="width: 100%;">
|
|
</div>
|
|
|
|
<div class="settings-group" style="gap: 4px;">
|
|
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Finalidade</label>
|
|
<input type="text" id="templateFormFinalidade" placeholder="Ex: Avaliar a evolução socioemocional..." class="obs-input" style="width: 100%;">
|
|
</div>
|
|
|
|
<div class="settings-group" style="gap: 4px;">
|
|
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Periodicidade / Frequência</label>
|
|
<select id="templateFormPeriodicidade" class="obs-select" style="width: 100%;">
|
|
<option value="Semanal">Semanal</option>
|
|
<option value="Mensal">Mensal</option>
|
|
<option value="Semestral">Semestral</option>
|
|
<option value="Anual">Anual</option>
|
|
<option value="Outro">Outro</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-group" style="flex: 1; display: flex; flex-direction: column; gap: 4px;">
|
|
<label style="color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;">Estrutura do Relatório (Markdown / Diretrizes)</label>
|
|
<textarea id="templateFormEstrutura" placeholder="## Seção 1\n- Detalhe o comportamento...\n\n## Seção 2\n- Descreva a autonomia..." class="obs-input" style="width: 100%; flex: 1; min-height: 160px; font-family: monospace; resize: vertical; padding: 10px; line-height: 1.4;"></textarea>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border-light); padding-top: 12px; margin-top: auto;">
|
|
<button id="btnCancelTemplate" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9rem;">Cancelar</button>
|
|
<button id="btnSaveTemplate" style="background: var(--brand-green); border: none; color: white; padding: 8px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.9rem;">Salvar Modelo</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Emitir Relatório (Geração com filtros e exportação) -->
|
|
<div id="emitirRelatorioModal" class="settings-modal" style="display: none;">
|
|
<div class="settings-modal-content" style="max-width: 800px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
|
|
<div class="settings-modal-header">
|
|
<h3>📄 Emitir Relatório Pedagógico</h3>
|
|
<button id="btnCloseEmitirModal" class="btn-close-modal">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="settings-modal-body" style="padding: 16px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; flex: 1;">
|
|
<!-- Filtros e Controles -->
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; background: var(--bg-secondary); padding: 12px; border-radius: 12px; border: 1px solid var(--border-light);">
|
|
<div class="settings-group" style="gap: 4px;">
|
|
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Criança</label>
|
|
<select id="emitirFilterCrianca" class="obs-select" style="padding: 6px 10px;">
|
|
<option value="">Selecione a criança</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-group" style="gap: 4px;">
|
|
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Data Início</label>
|
|
<input type="date" id="emitirFilterDataInicio" class="obs-input" style="padding: 5px 8px;">
|
|
</div>
|
|
|
|
<div class="settings-group" style="gap: 4px;">
|
|
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Data Fim</label>
|
|
<input type="date" id="emitirFilterDataFim" class="obs-input" style="padding: 5px 8px;">
|
|
</div>
|
|
|
|
<div class="settings-group" style="gap: 4px;">
|
|
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Tags</label>
|
|
<select id="emitirFilterTag" class="obs-select" style="padding: 6px 10px;">
|
|
<option value="">Todas as tags</option>
|
|
<option value="social">Social</option>
|
|
<option value="cognitivo">Cognitivo</option>
|
|
<option value="motor">Motor</option>
|
|
<option value="linguagem">Linguagem</option>
|
|
<option value="emocional">Emocional</option>
|
|
<option value="colaborativo">Colaborativo</option>
|
|
<option value="autônomo">Autônomo</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-group" style="gap: 4px;">
|
|
<label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;">Modelo / Template</label>
|
|
<select id="emitirFilterTemplate" class="obs-select" style="padding: 6px 10px;">
|
|
<option value="">Selecione o modelo</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Estatísticas e Botão de Ação -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: 0 4px;">
|
|
<span id="emitirObsCountInfo" style="color: var(--text-secondary); font-size: 0.88rem; font-weight: 500;">Selecione uma criança para buscar observações...</span>
|
|
<button id="btnGenerateCompiledReport" disabled style="background: var(--brand-green); color: white; border: none; padding: 8px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: opacity 0.2s; opacity: 0.6;">
|
|
<span>Gerar Relatório com IA</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Visualizador / Pré-visualização do Relatório Gerado -->
|
|
<div style="flex: 1; border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-secondary);">
|
|
<div style="padding: 8px 16px; border-bottom: 1px solid var(--border-light); background: var(--bg-primary); display: flex; justify-content: space-between; align-items: center;">
|
|
<span style="font-weight: 600; font-size: 0.88rem; color: var(--text-primary);">Visualização do Relatório</span>
|
|
<div style="display: flex; gap: 8px;">
|
|
<button id="btnExportDocx" disabled style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 12px; border-radius: 6px; font-size: 0.8rem; cursor: not-allowed; display: flex; align-items: center; gap: 4px; font-weight: 500; transition: all 0.2s;">
|
|
💾 DOCX
|
|
</button>
|
|
<button id="btnExportPdf" disabled style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 12px; border-radius: 6px; font-size: 0.8rem; cursor: not-allowed; display: flex; align-items: center; gap: 4px; font-weight: 500; transition: all 0.2s;">
|
|
🖨️ PDF
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="emitirReportPreviewArea" style="flex: 1; padding: 16px; overflow-y: auto; color: var(--text-primary); line-height: 1.6; font-size: 0.95rem;">
|
|
<div style="color: var(--text-secondary); text-align: center; margin-top: 50px;">
|
|
Escolha uma criança e um modelo de relatório para começar.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bibliotecas externas para renderizar markdown e blocos de código -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<!-- V2 cache-busting: version timestamp -->
|
|
<script>
|
|
document.write('<script src="app.js?v=' + Date.now() + '"><\/script>');
|
|
</script>
|
|
<!-- Service Worker Registration for PWA -->
|
|
<script>
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('/sw.js')
|
|
.then((registration) => {
|
|
console.log('Camila AI SW registered:', registration.scope);
|
|
})
|
|
.catch((error) => {
|
|
console.log('Camila AI SW registration failed:', error);
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|