Spaces:

KEXEL
/

deepsite-project-av05b

Running

App Files Files Community

KEXEL commited on Feb 27

Commit

ec8a33e

verified ·

1 Parent(s): 3e56ddd

🐳 27/02 - 21:07 - tem como colocar no formato mobile multiplataformas

Browse files

Files changed (4) hide show

capacitor.config.json +22 -0
package.json +29 -0
www/index.html +338 -0
www/js/app.js +492 -0

capacitor.config.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "appId": "com.nova.assistant",
+  "appName": "Nova Assistant",
+  "webDir": "www",
+  "bundledWebRuntime": false,
+  "plugins": {
+    "SplashScreen": {
+      "launchShowDuration": 2000,
+      "launchAutoHide": true,
+      "backgroundColor": "#667eea",
+      "androidSplashResourceName": "splash",
+      "androidScaleType": "CENTER_CROP",
+      "showSpinner": false,
+      "splashFullScreen": true,
+      "splashImmersive": true
+    },
+    "StatusBar": {
+      "style": "light",
+      "backgroundColor": "#667eea"
+    }
+  }
+}

package.json ADDED Viewed

	@@ -0,0 +1,29 @@

+{
+  "name": "nova-assistant",
+  "version": "1.0.0",
+  "description": "Assistente Virtual Nova - Mobile App",
+  "main": "index.js",
+  "scripts": {
+    "start": "npx serve www",
+    "build": "npm run copy",
+    "copy": "npx cap copy",
+    "sync": "npx cap sync",
+    "android": "npx cap open android",
+    "ios": "npx cap open ios",
+    "pwa": "npx serve www -p 8080"
+  },
+  "dependencies": {
+    "@capacitor/android": "^5.7.0",
+    "@capacitor/core": "^5.7.0",
+    "@capacitor/ios": "^5.7.0",
+    "@capacitor/splash-screen": "^5.2.0",
+    "@capacitor/status-bar": "^5.0.7",
+    "@capacitor/keyboard": "^5.0.8",
+    "@capacitor/preferences": "^5.0.7",
+    "@capacitor/speech-recognition": "^5.0.0",
+    "@capacitor/text-speech": "^5.0.0"
+  },
+  "devDependencies": {
+    "@capacitor/cli": "^5.7.0"
+  }
+}

www/index.html ADDED Viewed

	@@ -0,0 +1,338 @@

+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="theme-color" content="#667eea">
+    <meta name="mobile-web-app-capable" content="yes">
+    <title>Nova Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            font-family: 'Inter', sans-serif;
+            -webkit-tap-highlight-color: transparent;
+        }
+        /* Safe area padding for notched devices */
+        .safe-area-top {
+            padding-top: env(safe-area-inset-top, 0px);
+        }
+        .safe-area-bottom {
+            padding-bottom: env(safe-area-inset-bottom, 0px);
+        }
+        .safe-area-x {
+            padding-left: env(safe-area-inset-left, 0px);
+            padding-right: env(safe-area-inset-right, 0px);
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.98);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+        }
+        .dark .glass-effect {
+            background: rgba(30, 30, 35, 0.98);
+        }
+        .message-bubble {
+            animation: messageSlide 0.3s ease-out;
+        }
+        @keyframes messageSlide {
+            from {
+                opacity: 0;
+                transform: translateY(10px) scale(0.95);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+        .typing-dot {
+            animation: typingBounce 1.4s infinite ease-in-out both;
+        }
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+        @keyframes typingBounce {
+            0%, 80%, 100% { transform: scale(0.6); }
+            40% { transform: scale(1); }
+        }
+        .pulse-ring {
+            animation: pulseRing 2s ease-out infinite;
+        }
+        @keyframes pulseRing {
+            0% {
+                transform: scale(0.8);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(2);
+                opacity: 0;
+            }
+        }
+        .wave-animation {
+            animation: wave 1s ease-in-out infinite;
+        }
+        @keyframes wave {
+            0%, 100% { transform: scaleY(1); }
+            50% { transform: scaleY(0.4); }
+        }
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+        .scrollbar-hide {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+        .suggestion-chip {
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .suggestion-chip:hover {
+            transform: translateY(-1px);
+        }
+        .suggestion-chip:active {
+            transform: scale(0.96);
+        }
+        /* Mobile-optimized touch targets */
+        .touch-target {
+            min-height: 44px;
+            min-width: 44px;
+        }
+        /* Haptic feedback simulation */
+        .haptic:active {
+            transform: scale(0.97);
+        }
+        /* Swipe gestures */
+        .swipeable {
+            touch-action: pan-y;
+            user-select: none;
+        }
+        /* Bottom sheet animation */
+        .bottom-sheet {
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .bottom-sheet.hidden {
+            transform: translateY(100%);
+        }
+        /* Ripple effect */
+        .ripple {
+            position: relative;
+            overflow: hidden;
+        }
+        .ripple::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: rgba(255,255,255,0.3);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transition: width 0.3s, height 0.3s;
+        }
+        .ripple:active::after {
+            width: 200%;
+            height: 200%;
+        }
+    </style>
+</head>
+<body class="gradient-bg h-screen overflow-hidden">
+    <!-- Status Bar Background -->
+    <div class="fixed top-0 left-0 right-0 h-[env(safe-area-inset-top,20px)] gradient-bg z-50"></div>
+    <!-- Main Container -->
+    <div id="app" class="glass-effect h-full flex flex-col overflow-hidden safe-area-top safe-area-bottom safe-area-x">
+        <!-- Header -->
+        <header class="bg-white/90 border-b border-gray-100 px-4 pt-2 pb-3 flex items-center justify-between shrink-0">
+            <div class="flex items-center gap-3">
+                <div class="relative shrink-0">
+                    <div class="w-11 h-11 rounded-full gradient-bg flex items-center justify-center shadow-lg shadow-purple-200">
+                        <i data-lucide="bot" class="w-5 h-5 text-white"></i>
+                    </div>
+                    <div class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-400 rounded-full border-2 border-white"></div>
+                    <div class="absolute inset-0 rounded-full border-2 border-purple-400 pulse-ring"></div>
+                </div>
+                <div class="min-w-0">
+                    <h1 class="font-semibold text-gray-800 text-base truncate">Nova Assistant</h1>
+                    <p class="text-xs text-gray-500 flex items-center gap-1">
+                        <span class="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></span>
+                        Online
+                    </p>
+                </div>
+            </div>
+            <div class="flex items-center gap-1">
+                <button onclick="showMenu()" class="touch-target p-2.5 hover:bg-gray-100 rounded-xl transition-colors ripple">
+                    <i data-lucide="more-vertical" class="w-5 h-5 text-gray-600"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Chat Area -->
+        <main id="chatContainer" class="flex-1 overflow-y-auto scrollbar-hide p-4 space-y-3 bg-gradient-to-b from-gray-50/50 to-white/95">
+            <!-- Welcome Message -->
+            <div class="text-center py-6 px-2">
+                <div class="w-16 h-16 mx-auto rounded-2xl gradient-bg flex items-center justify-center mb-3 shadow-lg shadow-purple-200">
+                    <i data-lucide="sparkles" class="w-8 h-8 text-white"></i>
+                </div>
+                <h2 class="text-xl font-bold text-gray-800 mb-1">Olá! 👋</h2>
+                <p class="text-sm text-gray-500">Como posso ajudar você hoje?</p>
+            </div>
+            <!-- Suggestions Horizontal Scroll -->
+            <div class="flex gap-2 overflow-x-auto scrollbar-hide pb-2 -mx-1 px-1 snap-x">
+                <button onclick="sendSuggestion('Que horas são?')" class="suggestion-chip shrink-0 snap-start px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 shadow-sm">
+                    🕐 Horário
+                </button>
+                <button onclick="sendSuggestion('Qual a capital do Japão?')" class="suggestion-chip shrink-0 snap-start px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 shadow-sm">
+                    🌍 Geografia
+                </button>
+                <button onclick="sendSuggestion('Me conte uma piada')" class="suggestion-chip shrink-0 snap-start px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 shadow-sm">
+                    😄 Piada
+                </button>
+                <button onclick="sendSuggestion('Preciso de motivação')" class="suggestion-chip shrink-0 snap-start px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 shadow-sm">
+                    💪 Motivação
+                </button>
+                <button onclick="sendSuggestion('Ajuda')" class="suggestion-chip shrink-0 snap-start px-3 py-2 bg-white border border-gray-200 rounded-full text-xs text-gray-600 shadow-sm">
+                    ❓ Ajuda
+                </button>
+            </div>
+        </main>
+        <!-- Quick Actions Bar -->
+        <div id="quickActions" class="bg-white border-t border-gray-100 px-4 py-2 shrink-0 hidden">
+            <div class="flex gap-3 overflow-x-auto scrollbar-hide">
+                <button onclick="sendSuggestion('Calcular 15% de 200')" class="shrink-0 px-3 py-1.5 bg-purple-50 rounded-full text-xs text-purple-600 font-medium">
+                    15% de 200
+                </button>
+                <button onclick="sendSuggestion('Que dia é hoje?')" class="shrink-0 px-3 py-1.5 bg-purple-50 rounded-full text-xs text-purple-600 font-medium">
+                    Data hoje
+                </button>
+                <button onclick="sendSuggestion('Capital da França')" class="shrink-0 px-3 py-1.5 bg-purple-50 rounded-full text-xs text-purple-600 font-medium">
+                    🇫🇷 França
+                </button>
+            </div>
+        </div>
+        <!-- Input Area -->
+        <footer class="bg-white border-t border-gray-100 p-3 safe-area-bottom shrink-0">
+            <form id="messageForm" class="flex items-end gap-2">
+                <button type="button" onclick="toggleQuickActions()" class="touch-target p-3 hover:bg-gray-100 rounded-xl transition-colors shrink-0">
+                    <i data-lucide="plus" class="w-5 h-5 text-gray-400"></i>
+                </button>
+                <div class="flex-1 relative">
+                    <textarea
+                        id="messageInput"
+                        placeholder="Digite uma mensagem..."
+                        class="w-full px-3 py-2.5 pr-10 bg-gray-100 border-0 rounded-2xl resize-none focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:bg-white transition-all text-sm"
+                        rows="1"
+                        style="min-height: 40px; max-height: 100px;"
+                        oninput="autoResize(this), checkInput()"
+                        onkeydown="handleKeyDown(event)"
+                    ></textarea>
+                    <button type="button" onclick="startVoiceInput()" id="micBtn" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-lg transition-colors">
+                        <i data-lucide="mic" class="w-4 h-4 text-gray-400"></i>
+                    </button>
+                </div>
+                <button
+                    type="submit"
+                    id="sendBtn"
+                    class="touch-target p-3 gradient-bg rounded-xl text-white disabled:opacity-40 disabled:scale-100 transition-all transform active:scale-95 ripple shrink-0"
+                    disabled
+                >
+                    <i data-lucide="send" class="w-5 h-5"></i>
+                </button>
+            </form>
+        </footer>
+    </div>
+    <!-- Menu Bottom Sheet -->
+    <div id="menuSheet" class="fixed inset-0 z-50 pointer-events-none opacity-0 transition-opacity" onclick="hideMenu()">
+        <div class="absolute inset-0 bg-black/30 backdrop-blur-sm" onclick="hideMenu()"></div>
+        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 bottom-sheet hidden transform translate-y-full" onclick="event.stopPropagation()">
+            <div class="w-12 h-1 bg-gray-300 rounded-full mx-auto mb-6"></div>
+            <h3 class="text-lg font-semibold mb-4">Opções</h3>
+            <div class="space-y-2">
+                <button onclick="clearChat(); hideMenu()" class="w-full flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 transition-colors">
+                    <i data-lucide="trash-2" class="w-5 h-5 text-red-500"></i>
+                    <span class="text-gray-700">Limpar conversa</span>
+                </button>
+                <button onclick="exportChat(); hideMenu()" class="w-full flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 transition-colors">
+                    <i data-lucide="share" class="w-5 h-5 text-blue-500"></i>
+                    <span class="text-gray-700">Exportar conversa</span>
+                </button>
+                <button onclick="toggleDarkMode(); hideMenu()" class="w-full flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 transition-colors">
+                    <i data-lucide="moon" class="w-5 h-5 text-purple-500"></i>
+                    <span class="text-gray-700">Modo escuro</span>
+                </button>
+                <button onclick="showAbout(); hideMenu()" class="w-full flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 transition-colors">
+                    <i data-lucide="info" class="w-5 h-5 text-gray-500"></i>
+                    <span class="text-gray-700">Sobre</span>
+                </button>
+            </div>
+            <div class="mt-4 mb-2">
+                <button onclick="hideMenu()" class="w-full p-4 bg-gray-100 rounded-xl font-medium text-gray-700">
+                    Fechar
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Voice Input Modal -->
+    <div id="voiceModal" class="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center opacity-0 pointer-events-none transition-opacity z-50">
+        <div class="bg-white rounded-3xl p-8 text-center transform scale-90 transition-transform mx-6">
+            <div class="flex justify-center gap-1 mb-6 h-12">
+                <div class="w-2 h-10 bg-purple-500 rounded-full wave-animation" style="animation-delay: 0s;"></div>
+                <div class="w-2 h-14 bg-purple-500 rounded-full wave-animation" style="animation-delay: 0.1s;"></div>
+                <div class="w-2 h-8 bg-purple-500 rounded-full wave-animation" style="animation-delay: 0.2s;"></div>
+                <div class="w-2 h-12 bg-purple-500 rounded-full wave-animation" style="animation-delay: 0.3s;"></div>
+                <div class="w-2 h-6 bg-purple-500 rounded-full wave-animation" style="animation-delay: 0.4s;"></div>
+            </div>
+            <p class="text-gray-700 font-medium mb-1">Ouvindo...</p>
+            <p id="voiceText" class="text-xs text-gray-400">Toque para cancelar</p>
+            <button onclick="stopVoiceInput()" class="mt-6 w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto">
+                <i data-lucide="x" class="w-5 h-5 text-red-500"></i>
+            </button>
+        </div>
+    </div>
+    <script src="https://unpkg.com/@capacitor/core@latest/dist/capacitor.js"></script>
+    <script src="js/app.js"></script>
+    <script>
+        lucide.createIcons();
+    </script>
+</body>
+</html>

www/js/app.js ADDED Viewed

	@@ -0,0 +1,492 @@

+// Capacitor Plugins
+let {
+    StatusBar,
+    SplashScreen,
+    Keyboard,
+    Preferences,
+    Toast
+} = typeof Capacitor !== 'undefined' ? Capacitor.Plugins : {};
+// ==================== STATE ====================
+let isTyping = false;
+let messageHistory = [];
+let recognition = null;
+let isNative = typeof Capacitor !== 'undefined';
+let isDarkMode = false;
+// ==================== DOM ELEMENTS ====================
+const chatContainer = document.getElementById('chatContainer');
+const messageForm = document.getElementById('messageForm');
+const messageInput = document.getElementById('messageInput');
+const sendBtn = document.getElementById('sendBtn');
+const voiceModal = document.getElementById('voiceModal');
+const voiceText = document.getElementById('voiceText');
+const menuSheet = document.getElementById('menuSheet');
+const micBtn = document.getElementById('micBtn');
+// ==================== KNOWLEDGE BASE ====================
+const knowledgeBase = {
+    greetings: {
+        patterns: ['oi', 'olá', 'ola', 'hey', 'e aí', 'e ai', 'bom dia', 'boa tarde', 'boa noite', 'salve', 'hi', 'hello'],
+        responses: [
+            'Oi! Como posso ajudar? 😊',
+            'Olá! Que bom ver você! ✨',
+            'Hey! Pronto para ajudar! 🚀',
+            'Bem-vindo! O que posso fazer?'
+        ]
+    },
+    time: {
+        patterns: ['hora', 'horas', 'que horas', 'horário', 'horario'],
+        responses: () => {
+            const now = new Date();
+            return `🕐 ${now.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}`;
+        }
+    },
+    date: {
+        patterns: ['data', 'data de hoje', 'que dia é hoje', 'dia de hoje', 'hoje é que dia'],
+        responses: () => {
+            const now = new Date();
+            return `📅 ${now.toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' })}`;
+        }
+    },
+    weather: {
+        patterns: ['clima', 'tempo', 'previsão', 'previsao', 'temperatura', 'esta frio', 'esta calor', 'ta frio', 'ta calor'],
+        responses: [
+            '🌤️ Verifique o app de clima do seu celular para dados em tempo real!',
+            '☀️ Não tenho acesso ao GPS. Confira o Clima do iOS/Android!'
+        ]
+    },
+    jokes: {
+        patterns: ['piada', 'conta uma piada', 'me faça rir', 'me faz rir', 'algo engraçado'],
+        responses: [
+            '😄 Por que o computador foi ao médico? Porque tinha vírus! 🦠',
+            '😂 O que o pato disse para a pata? Vem quá! 🦆',
+            '🤣 Qual é o animal mais antigo? A zebra, preto e branco! 🦓',
+            '😅 Por que o livro de matemática se suicidou? Tinha muitos problemas! 📚'
+        ]
+    },
+    capital: {
+        patterns: ['capital', 'capital da', 'qual a capital', 'capital de'],
+        responses: {
+            'frança': '🇫🇷 Paris - Cidade Luz!',
+            'brasil': '🇧🇷 Brasília',
+            'japão': '🇯🇵 Tóquio',
+            'estados unidos': '🇺🇸 Washington, D.C.',
+            'argentina': '🇦🇷 Buenos Aires',
+            'portugal': '🇵🇹 Lisboa',
+            'espanha': '🇪🇸 Madri',
+            'itália': '🇮🇹 Roma',
+            'alemanha': '🇩🇪 Berlim',
+            'canadá': '🇨🇦 Ottawa'
+        }
+    },
+    thanks: {
+        patterns: ['obrigado', 'obrigada', 'valeu', 'agradeço', 'thanks', 'ty', 'vlw', 'tmj'],
+        responses: [
+            'Por nada! 😊',
+            'De nada! ✨',
+            'Sempre à disposição! 🙌'
+        ]
+    },
+    calculator: {
+        patterns: ['calcular', 'quanto é', 'resultado de', '+', '-', '*', '/', 'x', 'vezes', 'dividido', 'mais', 'menos'],
+        responses: (message) => {
+            try {
+                let expr = message.toLowerCase()
+                    .replace(/vezes|x/gi, '*')
+                    .replace(/dividido/gi, '/')
+                    .replace(/mais/gi, '+')
+                    .replace(/menos/gi, '-')
+                    .replace(/[^0-9+\-*/().\s]/g, '');
+                if (!expr.match(/[0-9]/)) return null;
+                const result = Function('"use strict"; return (' + expr + ')')();
+                return `🧮 ${expr.replace('*', '×').replace('/', '÷')} = ${result}`;
+            } catch {
+                return null;
+            }
+        }
+    },
+    name: {
+        patterns: ['seu nome', 'como se chama', 'quem é você', 'quem e voce', 'qual seu nome'],
+        responses: [
+            'Eu sou a Nova! 🤖✨',
+            'Me chamo Nova, prazer!',
+            'Olá! Sou a Nova 💜'
+        ]
+    },
+    help: {
+        patterns: ['ajuda', 'help', 'o que você faz', 'o que voce faz', 'capacidades', 'comandos'],
+        responses: [
+            '🛠️ **O que faço:**\n• 🕐 Hora/data\n• 🌍 Capitais\n• 😄 Piadas\n• 🧮 Cálculos\n• 💬 Conversas\n\n**Exemplos:**\n"Que horas são?"\n"Quanto é 25×4?"\n"Capital do Japão?"'
+        ]
+    },
+    motivation: {
+        patterns: ['motivação', 'motivacao', 'ânimo', 'animo', 'triste', 'deprimido', 'incentivo', 'não consigo', 'nao consigo', 'desanimado'],
+        responses: [
+            '💪 "O único limite é a sua determinação."\n\nVocê consegue! ✨',
+            '🌟 "Levanta, sacode a poeira e dá a volta por cima!"\n\nVai dar certo! 💜',
+            '⭐ "Acredite em você!"\n\nVocê é capaz de grandes conquistas! 🚀'
+        ]
+    },
+    love: {
+        patterns: ['te amo', 'amo você', 'gosto de você', 'gosto de ti', 'quer casar'],
+        responses: [
+            '💜 Ahh, que fofo! Eu também gosto muito de conversar com você!',
+            '😊 Fico muito feliz em ouvir isso! Você é especial!',
+            '💖 Obrigada! Você me faz querer ser uma assistente ainda melhor!'
+        ]
+    },
+    goodbye: {
+        patterns: ['tchau', 'adeus', 'até logo', 'ate logo', 'bye', 'goodbye', 'até mais', 'ate mais', 'flw'],
+        responses: [
+            'Até logo! 👋 Foi ótimo conversar!',
+            'Tchau! Volte sempre! ✨',
+            'Até a próxima! Cuida-se! 💜'
+        ]
+    }
+};
+// ==================== INITIALIZATION ====================
+async function initApp() {
+    // Hide splash after load
+    if (isNative && SplashScreen) {
+        setTimeout(() => SplashScreen.hide(), 1000);
+    }
+    // Set status bar style
+    if (isNative && StatusBar) {
+        StatusBar.setStyle({ style: 'Light' });
+        StatusBar.setBackgroundColor({ color: '#667eea' });
+    }
+    // Handle keyboard
+    if (isNative && Keyboard) {
+        Keyboard.addListener('keyboardWillShow', () => {
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        });
+    }
+    // Check saved preference
+    const saved = await getStorage('darkMode');
+    if (saved === 'true') toggleDarkMode(true);
+    // Focus input
+    setTimeout(() => messageInput.focus(), 300);
+    // Welcome with vibration
+    vibrate([50, 30, 50]);
+}
+// ==================== UI FUNCTIONS ====================
+function autoResize(textarea) {
+    textarea.style.height = 'auto';
+    textarea.style.height = Math.min(textarea.scrollHeight, 100) + 'px';
+}
+function checkInput() {
+    sendBtn.disabled = messageInput.value.trim().length === 0;
+    micBtn.style.opacity = messageInput.value ? '0' : '1';
+}
+function handleKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (messageInput.value.trim()) {
+            messageForm.dispatchEvent(new Event('submit'));
+        }
+    }
+}
+function toggleQuickActions() {
+    const qa = document.getElementById('quickActions');
+    qa.classList.toggle('hidden');
+    if (!qa.classList.contains('hidden')) {
+        setTimeout(() => {
+            const suggestions = qa.querySelectorAll('button');
+            suggestions[0]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }, 10);
+    }
+}
+function showMenu() {
+    menuSheet.classList.remove('opacity-0', 'pointer-events-none');
+    menuSheet.querySelector('.bottom-sheet').classList.remove('hidden', 'translate-y-full');
+    vibrate(20);
+}
+function hideMenu() {
+    menuSheet.classList.add('opacity-0', 'pointer-events-none');
+    menuSheet.querySelector('.bottom-sheet').classList.add('translate-y-full');
+    setTimeout(() => {
+        menuSheet.querySelector('.bottom-sheet').classList.add('hidden');
+    }, 300);
+}
+function createMessageElement(text, isUser = false) {
+    const wrapper = document.createElement('div');
+    wrapper.className = `flex ${isUser ? 'justify-end' : 'justify-start'} message-bubble swipeable`;
+    const content = document.createElement('div');
+    content.className = `max-w-[85%] px-3.5 py-2.5 rounded-2xl text-sm ${
+        isUser
+            ? 'gradient-bg text-white rounded-br-sm'
+            : 'bg-white border border-gray-100 text-gray-800 rounded-bl-sm shadow-sm'
+    }`;
+    content.innerHTML = text
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\n/g, '<br>');
+    wrapper.appendChild(content);
+    return wrapper;
+}
+function createTypingIndicator() {
+    const wrapper = document.createElement('div');
+    wrapper.id = 'typingIndicator';
+    wrapper.className = 'flex justify-start message-bubble';
+    const content = document.createElement('div');
+    content.className = 'bg-white border border-gray-100 px-3.5 py-3 rounded-2xl rounded-bl-sm shadow-sm';
+    content.innerHTML = `
+        <div class="flex gap-1 items-center h-4">
+            <span class="typing-dot w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
+            <span class="typing-dot w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
+            <span class="typing-dot w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
+        </div>
+    `;
+    wrapper.appendChild(content);
+    return wrapper;
+}
+// ==================== MESSAGE PROCESSING ====================
+function processMessage(message) {
+    const lowerMessage = message.toLowerCase();
+    for (const category of Object.values(knowledgeBase)) {
+        const matched = category.patterns.some(p => lowerMessage.includes(p));
+        if (matched) {
+            if (category === knowledgeBase.calculator) {
+                const result = category.responses(message);
+                if (result) return result;
+            }
+            if (category === knowledgeBase.capital) {
+                for (const [country, response] of Object.entries(category.responses)) {
+                    if (lowerMessage.includes(country)) return response;
+                }
+                return 'Diga o país! 🇫🇷🇧🇷🇯🇵🇺🇸🇦🇷🇵🇹🇪🇸🇮🇹🇩🇪🇨🇦';
+            }
+            if (typeof category.responses === 'function') {
+                return category.responses();
+            }
+            return category.responses[Math.floor(Math.random() * category.responses.length)];
+        }
+    }
+    return [
+        '🤔 Conte-me mais!',
+        '💭 Pode explicar melhor?',
+        '🌟 Interessante! O que mais?',
+        '💡 Entendi! E agora?'
+    ][Math.floor(Math.random() * 4)];
+}
+async function sendMessage(message) {
+    if (!message.trim() || isTyping) return;
+    // Hide quick actions
+    document.getElementById('quickActions').classList.add('hidden');
+    // Add user message
+    chatContainer.appendChild(createMessageElement(message, true));
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+    messageHistory.push({ role: 'user', content: message });
+    // Reset input
+    messageInput.value = '';
+    messageInput.style.height = 'auto';
+    checkInput();
+    // Typing indicator
+    isTyping = true;
+    sendBtn.disabled = true;
+    const typing = createTypingIndicator();
+    chatContainer.appendChild(typing);
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+    // Simulate thinking time
+    const delay = 600 + Math.random() * 600;
+    await new Promise(r => setTimeout(r, delay));
+    // Remove typing, show response
+    typing.remove();
+    const response = processMessage(message);
+    chatContainer.appendChild(createMessageElement(response, false));
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+    messageHistory.push({ role: 'assistant', content: response });
+    // Haptic feedback
+    vibrate(30);
+    // Try to speak response (optional)
+    if (isNative && 'speechSynthesis' in window) {
+        const utter = new SpeechSynthesisUtterance(response.replace(/[^\w\sáéíóúâêîôûãõàèìòùçÁÉÍÓÚÂÊÎÔÛÃÕÀÈÌÒÙÇ]/g, ''));
+        utter.lang = 'pt-BR';
+        utter.rate = 1.1;
+        speechSynthesis.speak(utter);
+    }
+    isTyping = false;
+    checkInput();
+}
+function sendSuggestion(text) {
+    messageInput.value = text;
+    checkInput();
+    setTimeout(() => messageForm.dispatchEvent(new Event('submit')), 100);
+}
+// ==================== VOICE INPUT ====================
+function startVoiceInput() {
+    if (isNative) {
+        // Use native speech recognition
+        showVoiceModal();
+        // Capacitor speech recognition would go here
+        // For now, use Web API as fallback
+    }
+    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
+        showToast('Voz não suportada no seu dispositivo');
+        return;
+    }
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    recognition = new SpeechRecognition();
+    recognition.lang = 'pt-BR';
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    showVoiceModal();
+    recognition.onresult = (e) => {
+        const transcript = e.results[0][0].transcript;
+        voiceText.textContent = transcript;
+        setTimeout(() => {
+            stopVoiceInput();
+            messageInput.value = transcript;
+            checkInput();
+            messageForm.dispatchEvent(new Event('submit'));
+        }, 400);
+    };
+    recognition.onerror = () => {
+        voiceText.textContent = '❌ Não entendi';
+        setTimeout(stopVoiceInput, 800);
+    };
+    recognition.onend = () => {
+        if (voiceText.textContent === 'Ouvindo...') {
+            stopVoiceInput();
+        }
+    };
+    recognition.start();
+}
+function showVoiceModal() {
+    voiceModal.classList.remove('opacity-0', 'pointer-events-none');
+    voiceModal.querySelector('div').classList.remove('scale-90');
+    voiceText.textContent = 'Ouvindo...';
+    vibrate(20);
+}
+function stopVoiceInput() {
+    if (recognition) recognition.stop();
+    voiceModal.classList.add('opacity-0', 'pointer-events-none');
+    voiceModal.querySelector('div').classList.add('scale-90');
+}
+// ==================== MENU ACTIONS ====================
+async function clearChat() {
+    if (confirm('Limpar toda a conversa?')) {
+        const welcome = chatContainer.children[0];
+        const suggestions = chatContainer.children[1];
+        chatContainer.innerHTML = '';
+        chatContainer.append(welcome, suggestions);
+        messageHistory = [];
+        vibrate([30, 50, 30]);
+    }
+}
+function exportChat() {
+    const text = messageHistory.map(m => `${m.role}: ${m.content}`).join('\n\n');
+    const blob = new Blob([text], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `conversa-nova-${Date.now()}.txt`;
+    a.click();
+    showToast('Conversa exportada! 📄');
+    vibrate(20);
+}
+function toggleDarkMode(force = null) {
+    isDarkMode = force !== null ? force : !isDarkMode;
+    document.documentElement.classList.toggle('dark', isDarkMode);
+    setStorage('darkMode', isDarkMode.toString());
+    vibrate(15);
+}
+function showAbout() {
+    alert('🤖 Nova Assistant v1.0\n\nSua assistente virtual inteligente feita com 💜\n\n© 2024');
+}
+// ==================== UTILITIES ====================
+function vibrate(pattern) {
+    if (isNative && navigator.vibrate) {
+        navigator.vibrate(pattern);
+    }
+}
+function showToast(message) {
+    if (isNative && Toast) {
+        Toast.show({ text: message, duration: 'short' });
+    } else {
+        // Web fallback
+        const toast = document.createElement('div');
+        toast.className = 'fixed bottom-32 left-1/2 -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-full text-sm z-50 animate-bounce';
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        setTimeout(() => toast.remove(), 2000);
+    }
+}
+async function setStorage(key, value) {
+    if (isNative && Preferences) {
+        await Preferences.set({ key, value });
+    } else {
+        localStorage.setItem(key, value);
+    }
+}
+async function getStorage(key) {
+    if (isNative && Preferences) {
+        const { value } = await Preferences.get({ key });
+        return value;
+    }
+    return localStorage.getItem(key);
+}
+// ==================== EVENT LISTENERS ====================
+messageForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    sendMessage(messageInput.value);
+});
+// Init
+initApp();