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

Correção de sintaxe JS e implementação do botão flutuante de ferramentas no mobile

Browse Source
This commit is contained in:
admtracksteel
2026-06-05 12:47:43 +00:00
parent 68ad4907da
commit 49add31133
3 changed files with 49 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+9 -7
View File
@@ -1087,14 +1087,14 @@ const initApp = () => {
fileInput.click(); fileInput.click();
}); });
// Botão alternador de ferramentas (recursos) // Botão alternador de ferramentas (recursos) - FAB Tools
const btnToggleTools = document.getElementById('btnToggleTools'); const fabTools = document.getElementById('fabTools');
const promptModesBar = document.querySelector('.prompt-modes-bar'); const promptModesBar = document.querySelector('.prompt-modes-bar');
if (btnToggleTools && promptModesBar) { if (fabTools && promptModesBar) {
btnToggleTools.addEventListener('click', () => { fabTools.addEventListener('click', () => {
promptModesBar.classList.toggle('show'); promptModesBar.classList.toggle('show');
btnToggleTools.classList.toggle('active'); fabTools.classList.toggle('active');
}); });
} }
@@ -1791,6 +1791,8 @@ const initApp = () => {
if (lastUserMsg && lastUserMsg.role === 'user') { if (lastUserMsg && lastUserMsg.role === 'user') {
handleSendMessage(lastUserMsg.content, true); handleSendMessage(lastUserMsg.content, true);
} }
};
const scrollToBottom = () => { const scrollToBottom = () => {
messagesContainer.scrollTop = messagesContainer.scrollHeight; messagesContainer.scrollTop = messagesContainer.scrollHeight;
}; };
@@ -1955,7 +1957,7 @@ const initApp = () => {
// Fechar barra de prompt no mobile se estiver aberta para liberar espaço // Fechar barra de prompt no mobile se estiver aberta para liberar espaço
const mobilePromptBar = document.querySelector('.prompt-modes-bar'); const mobilePromptBar = document.querySelector('.prompt-modes-bar');
const mobileToggleBtn = document.getElementById('btnToggleTools'); const mobileToggleBtn = document.getElementById('fabTools');
if (mobilePromptBar && window.innerWidth <= 768) { if (mobilePromptBar && window.innerWidth <= 768) {
mobilePromptBar.classList.remove('show'); mobilePromptBar.classList.remove('show');
if (mobileToggleBtn) mobileToggleBtn.classList.remove('active'); if (mobileToggleBtn) mobileToggleBtn.classList.remove('active');
@@ -2274,7 +2276,7 @@ const initApp = () => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
if (window.innerWidth <= 768) { if (window.innerWidth <= 768) {
if (promptModesBar) promptModesBar.classList.remove('show'); if (promptModesBar) promptModesBar.classList.remove('show');
if (btnToggleTools) btnToggleTools.classList.remove('active'); if (fabTools) fabTools.classList.remove('active');
} }
if (btn.dataset.prompt) { if (btn.dataset.prompt) {
handleSendMessage(btn.dataset.prompt); handleSendMessage(btn.dataset.prompt);
public/index.html
+7 -6
View File
@@ -148,6 +148,13 @@
</svg> </svg>
</button> </button>
<!-- FAB: Ferramentas e Recursos -->
<button class="fab-tools" id="fabTools" title="Ferramentas e Recursos">
<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.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.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.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-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-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-.086.22-.128.332-.183.582-.495.645-.869L9.594 3.94ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
</button>
<!-- Overlay para fechar sidebar clicando fora no mobile --> <!-- Overlay para fechar sidebar clicando fora no mobile -->
<div class="sidebar-overlay" id="sidebarOverlay"></div> <div class="sidebar-overlay" id="sidebarOverlay"></div>
@@ -255,12 +262,6 @@
</svg> </svg>
</button> </button>
<input type="file" id="fileInput" accept="image/*,.pdf,.doc,.docx,.txt" multiple style="display:none"> <input type="file" id="fileInput" accept="image/*,.pdf,.doc,.docx,.txt" multiple style="display:none">
<button type="button" id="btnToggleTools" class="btn-toggle-tools" aria-label="Alternar ferramentas" title="Mostrar/Ocultar ferramentas">
<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="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.098.04.197.09.294.13.38.197.839.226 1.22.062l.85-.36a1.125 1.125 0 011.37.49l.547.947a1.125 1.125 0 01-.26 1.43l-.708.583a1.125 1.125 0 00-.37.99c.004.12.006.242.006.364 0 .121-.002.242-.006.363a1.125 1.125 0 00.37.99l.708.582a1.125 1.125 0 01.26 1.43l-.547.947a1.125 1.125 0 01-1.37.491l-.85-.36a1.125 1.125 0 00-1.22.063c-.097.04-.196.09-.294.13a1.125 1.125 0 00-.78.93l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.02-.398-1.11-.94l-.148-.894a1.125 1.125 0 00-.78-.93c-.098-.04-.197-.09-.294-.13a1.125 1.125 0 00-1.22-.062l-.85.36a1.125 1.125 0 01-1.37-.49l-.546-.947a1.125 1.125 0 01.26-1.43l.707-.583a1.125 1.125 0 00.37-.99c-.003-.121-.005-.242-.005-.363 0-.122.002-.243.005-.364a1.125 1.125 0 00-.37-.99l-.707-.582a1.125 1.125 0 01-.26-1.43l.546-.947a1.125 1.125 0 011.37-.491l.85.36c.38.164.84.135 1.22-.063.097-.04.196-.09.294-.13.396-.166.71-.506.78-.93l.148-.894z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
<textarea id="userInput" placeholder="Mensagem Camila AI..." rows="1" autocomplete="off"></textarea> <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"> <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"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor">
public/style.css
+33 -17
View File
@@ -3397,34 +3397,50 @@ code {
to { transform: scale(1); opacity: 1; } to { transform: scale(1); opacity: 1; }
} }
/* Botão alternador de ferramentas (recursos) */ /* FAB: Floating Action Button para Ferramentas */
.btn-toggle-tools { .fab-tools {
background: none; position: fixed;
bottom: 24px;
left: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--brand-green, #10a37f);
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 8px;
border-radius: 8px;
color: var(--text-muted, #a3a3a3);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; box-shadow: 0 4px 20px rgba(16, 163, 127, 0.4);
flex-shrink: 0; transition: all 0.3s;
z-index: 998;
color: white;
} }
.btn-toggle-tools svg { .fab-tools svg {
width: 20px; width: 28px;
height: 20px; height: 28px;
} }
.btn-toggle-tools:hover { .fab-tools:hover {
background: var(--bg-tertiary, #1a1a1a); transform: scale(1.08);
color: var(--text-primary, #ffffff); box-shadow: 0 6px 24px rgba(16, 163, 127, 0.5);
} }
.btn-toggle-tools.active { .fab-tools:active {
color: var(--brand-green, #10a37f); transform: scale(0.95);
background: rgba(16, 163, 127, 0.1); }
.fab-tools.active {
background: var(--brand-green-dark, #0d8a6b);
box-shadow: 0 4px 20px rgba(13, 138, 107, 0.6);
}
/* Esconder em telas desktop e tablets (maiores que 768px) */
@media (min-width: 769px) {
.fab-tools {
display: none !important;
}
} }
/* Ocultar barra de ferramentas no mobile por padrão */ /* Ocultar barra de ferramentas no mobile por padrão */