admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔧 feat: Sistema de identidade dinâmica do agente - modal de configurações, avatares customizáveis, nome dinâmico sincronizado com Hermes/Telegram

Browse Source
This commit is contained in:
admtracksteel
2026-05-26 19:40:28 +00:00
parent c78c4020cf
commit 6c35f7ed1b
5 changed files with 514 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+45 -3
View File
@@ -82,12 +82,17 @@
<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">
<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" />
@@ -143,10 +148,10 @@
<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">
<img src="assets/kemily.png" alt="Kemily AI" class="welcome-avatar-img" id="welcomeAvatarImg">
</div>
</div>
<h2>Olá! Sou sua assistente virtual e me chamo Kemily. Como posso ajudar?</h2>
<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.">
@@ -242,6 +247,43 @@
</main>
</div>
<!-- Modal de Configurações do Agente -->
<div id="settingsModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content">
<div class="settings-modal-header">
<h3>Configurações da Assistente</h3>
<button id="closeSettingsModal" class="close-settings-btn">&times;</button>
</div>
<div class="settings-modal-body">
<div class="settings-group">
<label for="settingAgentName">Nome da Assistente</label>
<input type="text" id="settingAgentName" placeholder="Ex: Kemily">
</div>
<div class="settings-group">
<label>Avatar da Assistente</label>
<div class="avatar-preview-container">
<img id="previewKemilyAvatar" src="assets/kemily.png" alt="Kemily 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>
<div class="settings-modal-footer">
<button id="btnSaveSettings" class="btn-save-settings">Salvar Configurações</button>
</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>