feat: adiciona barra de botoes de atalho rapido de modo (musica, video, imagem, chat) no rodape com validacao cruzada

public/app.js

@@ -1173,7 +1173,7 @@ const initApp = () => {
   };
 
   // Função principal de envio de mensagens
-  const handleSendMessage = async (text, skipUserAppend = false, files = null) => {
+  const handleSendMessage = async (text, skipUserAppend = false, files = null, forcedIntent = null) => {
     if (!text && (!files || files.length === 0)) return;
 
     // Se não recebe files por parâmetro, usa os anexados globalmente
@@ -1282,7 +1282,7 @@ const initApp = () => {
         headers: {
           'Content-Type': 'application/json'
         },
-        body: JSON.stringify({ messages: messagesPayload })
+        body: JSON.stringify({ messages: messagesPayload, forcedIntent: forcedIntent })
       });
 
       if (!response.ok) {
@@ -1521,6 +1521,39 @@ const initApp = () => {
     handleSendMessage(text);
   });
 
+  // Botões de Modos Rápidos de Prompt (Rodapé)
+  document.querySelectorAll('.btn-prompt-mode').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const mode = btn.dataset.mode;
+      const text = userInput.value.trim();
+      
+      // Se não houver texto digitado, insere um exemplo de prompt baseado na modalidade
+      if (!text) {
+        let suggestion = "";
+        if (mode === 'AUDIO') {
+          suggestion = "Crie uma música pedagógica alegre e animada sobre ";
+        } else if (mode === 'VIDEO') {
+          suggestion = "Crie um roteiro detalhado para um vídeo educativo sobre ";
+        } else if (mode === 'IMAGE') {
+          suggestion = "Crie uma ilustração pedagógica com cores vibrantes mostrando ";
+        } else if (mode === 'TEXT') {
+          suggestion = "Escreva uma história educativa infantil curta sobre ";
+        }
+        userInput.value = suggestion;
+        userInput.focus();
+        
+        // Ajustar altura do textarea para acomodar a sugestão
+        userInput.style.height = 'auto';
+        userInput.style.height = userInput.scrollHeight + 'px';
+        btnSend.disabled = false;
+        return;
+      }
+      
+      // Se houver texto, envia imediatamente forçando o modo correspondente
+      handleSendMessage(text, false, null, mode);
+    });
+  });
+
   // Sugestões de Prompt Rápidas
   suggestionCards.forEach(card => {
     card.addEventListener('click', () => {

public/index.html

@@ -179,6 +179,21 @@
       <!-- 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">

public/style.css

@@ -2103,3 +2103,92 @@ code {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
+
+/* ==========================================================================
+   BARRA DE MODOS DE PROMPT RÁPIDOS (RODAPÉ DO INPUT)
+   ========================================================================== */
+.prompt-modes-bar {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  overflow-x: auto;
+  padding: 4px 2px;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+.prompt-modes-bar::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.btn-prompt-mode {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: 20px;
+  padding: 6px 14px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  font-family: var(--font-sans);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn-prompt-mode:hover {
+  transform: translateY(-1.5px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background-color: var(--bg-tertiary);
+}
+
+.btn-prompt-mode:active {
+  transform: translateY(0);
+}
+
+.btn-prompt-mode .mode-icon {
+  font-size: 14px;
+}
+
+/* Modo Música: Estilos e Cores (Roxo/Violeta) */
+.btn-prompt-mode.mode-music {
+  border-color: rgba(168, 85, 247, 0.3);
+}
+.btn-prompt-mode.mode-music:hover {
+  border-color: rgb(168, 85, 247);
+  background-color: rgba(168, 85, 247, 0.06);
+  color: rgb(216, 180, 254);
+}
+
+/* Modo Vídeo: Estilos e Cores (Azul/Ciano) */
+.btn-prompt-mode.mode-video {
+  border-color: rgba(6, 182, 212, 0.3);
+}
+.btn-prompt-mode.mode-video:hover {
+  border-color: rgb(6, 182, 212);
+  background-color: rgba(6, 182, 212, 0.06);
+  color: rgb(165, 243, 252);
+}
+
+/* Modo Imagem: Estilos e Cores (Laranja/Rosa) */
+.btn-prompt-mode.mode-image {
+  border-color: rgba(249, 115, 22, 0.3);
+}
+.btn-prompt-mode.mode-image:hover {
+  border-color: rgb(249, 115, 22);
+  background-color: rgba(249, 115, 22, 0.06);
+  color: rgb(253, 186, 116);
+}
+
+/* Modo Texto/História: Estilos e Cores (Verde Kemily) */
+.btn-prompt-mode.mode-text {
+  border-color: rgba(16, 163, 127, 0.3);
+}
+.btn-prompt-mode.mode-text:hover {
+  border-color: var(--brand-green);
+  background-color: rgba(16, 163, 127, 0.06);
+  color: rgb(167, 243, 208);
+}