Te Reo M\u0101ori AI Chat Interface – WordPress Blocks<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n 'maori-yellow': '#FFD700',\n 'maori-dark': '#0a0a0a',\n 'maori-grey': '#1a1a1a',\n 'maori-light-grey': '#2a2a2a'\n }\n }\n }\n }\n <\/script>\n <style>\n @keyframes pulse-border {\n 0%, 100% { border-color: #FFD700; }\n 50% { border-color: #FFA500; }\n }\n .pulse-border {\n animation: pulse-border 2s ease-in-out infinite;\n }\n .scrollbar-thin {\n scrollbar-width: thin;\n scrollbar-color: #FFD700 #2a2a2a;\n }\n .scrollbar-thin::-webkit-scrollbar {\n width: 6px;\n }\n .scrollbar-thin::-webkit-scrollbar-track {\n background: #2a2a2a;\n }\n .scrollbar-thin::-webkit-scrollbar-thumb {\n background-color: #FFD700;\n border-radius: 3px;\n }\n .voice-active {\n background: linear-gradient(45deg, #FFD700, #FFA500);\n animation: pulse 1s ease-in-out infinite;\n }\n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n .tooltip {\n position: relative;\n }\n .tooltip:hover .tooltip-text {\n visibility: visible;\n opacity: 1;\n }\n .tooltip-text {\n visibility: hidden;\n opacity: 0;\n position: absolute;\n bottom: 125%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #FFD700;\n color: #0a0a0a;\n padding: 5px 10px;\n border-radius: 5px;\n font-size: 12px;\n white-space: nowrap;\n transition: opacity 0.3s;\n z-index: 1000;\n }\n .typing-indicator {\n display: flex;\n align-items: center;\n }\n .typing-indicator span {\n height: 4px;\n width: 4px;\n background-color: #FFD700;\n border-radius: 50%;\n display: inline-block;\n margin: 0 1px;\n animation: bounce 1.3s linear infinite;\n }\n .typing-indicator span:nth-child(2) {\n animation-delay: -1.1s;\n }\n .typing-indicator span:nth-child(3) {\n animation-delay: -0.9s;\n }\n @keyframes bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-10px);\n }\n }\n \/* WordPress Block Styles *\/\n .wp-block-te-reo-maori-navigation {\n background-color: #1a1a1a;\n border-bottom: 1px solid #374151;\n padding: 12px 16px;\n }\n .wp-block-te-reo-maori-sidebar {\n width: 256px;\n background-color: #1a1a1a;\n padding: 16px;\n overflow-y: auto;\n }\n .wp-block-te-reo-maori-chat-header {\n background-color: #1a1a1a;\n padding: 16px;\n border-bottom: 1px solid #374151;\n }\n .wp-block-te-reo-maori-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n .wp-block-te-reo-maori-input-area {\n background-color: #1a1a1a;\n padding: 16px;\n border-top: 1px solid #374151;\n }\n .wp-block-te-reo-maori-right-panel {\n width: 320px;\n background-color: #1a1a1a;\n padding: 16px;\n border-left: 1px solid #374151;\n overflow-y: auto;\n }\n .wp-block-te-reo-maori-modal {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 50;\n }\n .wp-block-teo-maori-settings-modal {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 50;\n }\n <\/style>\n<\/head>\n<body class=\"bg-maori-dark text-white\">\n \n <section class=\"wp-block-te-reo-maori-navigation\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-4\">\n <h1 class=\"text-xl font-bold\">\n <span class=\"text-maori-yellow\">Te Reo<\/span> M\u0101ori AI\n <\/h1>\n <div class=\"hidden md:flex space-x-3\">\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-home mr-1\"><\/i> Dashboard\n <\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-users mr-1\"><\/i> Collaboration\n <\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-chart-bar mr-1\"><\/i> Analytics\n <\/button>\n <\/div>\n <\/div>\n <div class=\"flex items-center space-x-3\">\n <button id=\"settingsBtn\" class=\"text-gray-300 hover:text-maori-yellow transition-colors\">\n <i class=\"fas fa-cog\"><\/i>\n <\/button>\n <button class=\"text-gray-300 hover:text-maori-yellow transition-colors\">\n <i class=\"fas fa-bell\"><\/i>\n <\/button>\n <div class=\"w-8 h-8 bg-maori-yellow rounded-full flex items-center justify-center text-black font-bold\">\n T\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <div class=\"flex h-screen\">\n \n <aside class=\"wp-block-te-reo-maori-sidebar\">\n <div class=\"mb-4\">\n <h2 class=\"text-maori-yellow font-semibold mb-2\">Quick Actions<\/h2>\n <div class=\"space-y-2\">\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-book mr-2\"><\/i>Learning Tools\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-book-open mr-2\"><\/i>Story Creator\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-question-circle mr-2\"><\/i>Quiz Generator\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-gamepad mr-2\"><\/i>Flip Card Game\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-image mr-2\"><\/i>Image Generator\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"mb-4\">\n <h2 class=\"text-maori-yellow font-semibold mb-2\">Templates<\/h2>\n <div class=\"space-y-2\">\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-file-alt mr-2\"><\/i>Vocabulary Builder\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-file-alt mr-2\"><\/i>Grammar Guide\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-file-alt mr-2\"><\/i>Cultural Stories\n <\/button>\n <\/div>\n <\/div>\n\n <div>\n <h2 class=\"text-maori-yellow font-semibold mb-2\">Recent Projects<\/h2>\n <div class=\"space-y-2\">\n <div class=\"px-3 py-2 bg-maori-light-grey rounded text-sm\">\n <div class=\"font-semibold\">Kiwi Story<\/div>\n <div class=\"text-xs text-gray-400\">2 hours ago<\/div>\n <\/div>\n <div class=\"px-3 py-2 bg-maori-light-grey rounded text-sm\">\n <div class=\"font-semibold\">Numbers Quiz<\/div>\n <div class=\"text-xs text-gray-400\">Yesterday<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n\n \n <main class=\"flex-1 flex flex-col\">\n \n <header class=\"wp-block-te-reo-maori-chat-header\">\n <div class=\"flex items-center justify-between\">\n <div>\n <h2 class=\"text-lg font-semibold\">Te Reo M\u0101ori Assistant<\/h2>\n <p class=\"text-sm text-gray-400\">Kia ora! How can I help you learn te reo M\u0101ori today?<\/p>\n <\/div>\n <div class=\"flex space-x-2\">\n <button class=\"px-3 py-1 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors\">\n <i class=\"fas fa-plus mr-1\"><\/i>New Chat\n <\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-share-alt\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"wp-block-te-reo-maori-chat-messages\" id=\"chatMessages\">\n <div class=\"flex items-start space-x-3\">\n <div class=\"w-8 h-8 bg-maori-yellow rounded-full flex items-center justify-center text-black font-bold\">\n AI\n <\/div>\n <div class=\"max-w-3xl\">\n <div class=\"bg-maori-light-grey rounded-lg p-4\">\n <p>Welcome to the Te Reo M\u0101ori AI Assistant! I’m here to help you create amazing learning experiences. What would you like to work on today?<\/p>\n <\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Just now<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <footer class=\"wp-block-te-reo-maori-input-area\">\n <div class=\"flex items-center space-x-2 mb-3\">\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\">\n <i class=\"fas fa-paperclip text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Attach files<\/span>\n <\/button>\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\">\n <i class=\"fas fa-link text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Add reference<\/span>\n <\/button>\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\">\n <i class=\"fas fa-search text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Search web<\/span>\n <\/button>\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\">\n <i class=\"fas fa-globe text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Language<\/span>\n <\/button>\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\" id=\"voiceBtn\">\n <i class=\"fas fa-microphone text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Voice input<\/span>\n <\/button>\n <\/div>\n <div class=\"flex space-x-2\">\n <div class=\"flex-1 relative\">\n <textarea \n class=\"w-full bg-maori-light-grey border border-gray-600 rounded-lg p-3 pr-12 resize-none focus:outline-none focus:border-maori-yellow transition-colors\"\n placeholder=\"Type your message here...\"\n rows=\"1\"\n id=\"messageInput\"\n ><\/textarea>\n <button class=\"absolute right-2 bottom-2 text-maori-yellow hover:text-yellow-400 transition-colors\">\n <i class=\"fas fa-paper-plane\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/footer>\n <\/main>\n\n \n <aside class=\"wp-block-te-reo-maori-right-panel\">\n <div class=\"mb-4\">\n <h3 class=\"text-maori-yellow font-semibold mb-2\">Current Project<\/h3>\n <div class=\"bg-maori-light-grey rounded p-3\">\n <h4 class=\"font-semibold\">Interactive M\u0101ori Vocabulary<\/h4>\n <p class=\"text-sm text-gray-400 mt-1\">Creating a flip card game for common phrases<\/p>\n <div class=\"mt-2\">\n <div class=\"w-full bg-gray-700 rounded-full h-2\">\n <div class=\"bg-maori-yellow h-2 rounded-full\" style=\"width: 65%\"><\/div>\n <\/div>\n <p class=\"text-xs text-gray-400 mt-1\">65% complete<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mb-4\">\n <h3 class=\"text-maori-yellow font-semibold mb-2\">Collaborators<\/h3>\n <div class=\"space-y-2\">\n <div class=\"flex items-center space-x-2\">\n <div class=\"w-6 h-6 bg-green-500 rounded-full\"><\/div>\n <span class=\"text-sm\">Sarah (Active)<\/span>\n <\/div>\n <div class=\"flex items-center space-x-2\">\n <div class=\"w-6 h-6 bg-yellow-500 rounded-full\"><\/div>\n <span class=\"text-sm\">Mike (Away)<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mb-4\">\n <h3 class=\"text-maori-yellow font-semibold mb-2\">Quick Export<\/h3>\n <div class=\"space-y-2\">\n <button class=\"w-full px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-download mr-2\"><\/i>Download Content\n <\/button>\n <button class=\"w-full px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-copy mr-2\"><\/i>Copy to Clipboard\n <\/button>\n <button class=\"w-full px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-wordpress mr-2\"><\/i>Apply to WordPress\n <\/button>\n <\/div>\n <\/div>\n\n <div>\n <h3 class=\"text-maori-yellow font-semibold mb-2\">Learning Analytics<\/h3>\n <div class=\"bg-maori-light-grey rounded p-3\">\n <div class=\"text-sm\">\n <div class=\"flex justify-between mb-1\">\n <span>Words Learned<\/span>\n <span class=\"text-maori-yellow\">127<\/span>\n <\/div>\n <div class=\"flex justify-between mb-1\">\n <span>Quiz Score<\/span>\n <span class=\"text-maori-yellow\">87%<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>Streak<\/span>\n <span class=\"text-maori-yellow\">12 days<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n <\/div>\n\n \n <div id=\"voiceModal\" class=\"wp-block-te-reo-maori-modal\">\n <div class=\"bg-maori-grey p-8 rounded-lg text-center\">\n <h3 class=\"text-xl font-bold mb-4\">Voice Input<\/h3>\n <div id=\"voiceIndicator\" class=\"w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center\">\n <i class=\"fas fa-microphone text-2xl\"><\/i>\n <\/div>\n <p class=\"text-gray-300 mb-4\">Listening…<\/p>\n <button id=\"stopVoice\" class=\"px-4 py-2 bg-red-500 hover:bg-red-600 rounded transition-colors\">\n Stop Recording\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"settingsModal\" class=\"wp-block-teo-maori-settings-modal\">\n <div class=\"bg-maori-grey w-full max-w-md rounded-lg p-6 mx-4\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-maori-yellow\">Settings<\/h3>\n <button id=\"closeSettings\" class=\"text-gray-400 hover:text-white\">\n <i class=\"fas fa-times text-xl\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-medium mb-2\">API Key Configuration<\/label>\n <div class=\"space-y-3\">\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">OpenAI Compatible API Key<\/label>\n <input type=\"password\" id=\"apiKey0\" placeholder=\"sk-...\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">Anthropic API Key<\/label>\n <input type=\"password\" id=\"apiKey1\" placeholder=\"sk-ant-...\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">Google AI API Key<\/label>\n <input type=\"password\" id=\"apiKey2\" placeholder=\"AIza...\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">Custom API Key<\/label>\n <input type=\"password\" id=\"apiKey3\" placeholder=\"Enter any API key...\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">Custom API Endpoint (Optional)<\/label>\n <input type=\"text\" id=\"customEndpoint\" placeholder=\"https:\/\/api.example.com\/v1\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"flex justify-end space-x-2 pt-4\">\n <button id=\"saveSettings\" class=\"px-4 py-2 bg-maori-yellow text-black rounded hover:bg-yellow-400 transition-colors\">\n Save Settings\n <\/button>\n <button id=\"cancelSettings\" class=\"px-4 py-2 bg-maori-light-grey rounded hover:bg-gray-600 transition-colors\">\n Cancel\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Voice input functionality\n const voiceBtn = document.getElementById('voiceBtn');\n const voiceModal = document.getElementById('voiceModal');\n const voiceIndicator = document.getElementById('voiceIndicator');\n const stopVoice = document.getElementById('stopVoice');\n const messageInput = document.getElementById('messageInput');\n const chatMessages = document.getElementById('chatMessages');\n\n voiceBtn.addEventListener('click', () => {\n voiceModal.style.display = 'flex';\n voiceIndicator.classList.add('voice-active');\n \n \/\/ Simulate voice recognition\n setTimeout(() => {\n messageInput.value = \"T\u0113n\u0101 koe! Can you help me create a story about M\u0101ui and the sun?\";\n voiceModal.style.display = 'none';\n voiceIndicator.classList.remove('voice-active');\n }, 3000);\n });\n\n stopVoice.addEventListener('click', () => {\n voiceModal.style.display = 'none';\n voiceIndicator.classList.remove('voice-active');\n });\n\n \/\/ Auto-resize textarea\n messageInput.addEventListener('input', function() {\n this.style.height = 'auto';\n this.style.height = this.scrollHeight + 'px';\n });\n\n \/\/ Send message functionality\n document.querySelector('.fa-paper-plane').parentElement.addEventListener('click', sendMessage);\n\n messageInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n });\n\n function sendMessage() {\n const message = messageInput.value.trim();\n if (!message) return;\n\n \/\/ Add user message\n const userMessage = document.createElement('div');\n userMessage.className = 'flex items-start space-x-3 justify-end';\n userMessage.innerHTML = `\n <div class=\"max-w-3xl\">\n <div class=\"bg-maori-yellow text-black rounded-lg p-4\">\n <p>${message}<\/p>\n <\/div>\n <div class=\"text-xs text-gray-400 mt-1 text-right\">Just now<\/div>\n <\/div>\n <div class=\"w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-white font-bold\">\n U\n <\/div>\n `;\n chatMessages.appendChild(userMessage);\n\n \/\/ Clear input\n messageInput.value = '';\n\n \/\/ Show typing indicator\n const typingDiv = document.createElement('div');\n typingDiv.className = 'flex items-start space-x-3';\n typingDiv.innerHTML = `\n <div class=\"w-8 h-8 bg-maori-yellow rounded-full flex items-center justify-center text-black font-bold\">\n AI\n <\/div>\n <div class=\"max-w-3xl\">\n <div class=\"bg-maori-light-grey rounded-lg p-4\">\n <div class=\"typing-indicator\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <\/div>\n `;\n chatMessages.appendChild(typingDiv);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n\n \/\/ Simulate AI response\n setTimeout(() => {\n typingDiv.remove();\n const aiMessage = document.createElement('div');\n aiMessage.className = 'flex items-start space-x-3';\n aiMessage.innerHTML = `\n <div class=\"w-8 h-8 bg-maori-yellow rounded-full flex items-center justify-center text-black font-bold\">\n AI\n <\/div>\n <div class=\"max-w-3xl\">\n <div class=\"bg-maori-light-grey rounded-lg p-4\">\n <p>Absolutely! I'd love to help create a story about M\u0101ui and the sun. In te reo M\u0101ori, the sun is called \"Te R\u0101\". Let me craft an engaging story that incorporates key vocabulary and cultural elements. Would you like me to create this as an interactive story with vocabulary exercises?<\/p>\n <div class=\"mt-3 space-x-2\">\n <button class=\"px-3 py-1 bg-maori-yellow text-black text-sm rounded hover:bg-yellow-400 transition-colors\">Yes, create interactive story<\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey text-sm rounded hover:bg-maori-yellow hover:text-black transition-colors\">Just the story<\/button>\n <\/div>\n <\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Just now<\/div>\n <\/div>\n `;\n chatMessages.appendChild(aiMessage);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }, 2000);\n }\n\n \/\/ Settings modal functionality\n const settingsBtn = document.getElementById('settingsBtn');\n const settingsModal = document.getElementById('settingsModal');\n const closeSettings = document.getElementById('closeSettings');\n const cancelSettings = document.getElementById('cancelSettings');\n\n settingsBtn.addEventListener('click', () => {\n settingsModal.style.display = 'flex';\n });\n\n closeSettings.addEventListener('click', () => {\n settingsModal.style.display = 'none';\n });\n\n cancelSettings.addEventListener('click', () => {\n settingsModal.style.display = 'none';\n });\n\n \/\/ Close modals when clicking outside\n window.addEventListener('click', (e) => {\n if (e.target === voiceModal) {\n voiceModal.style.display = 'none';\n voiceIndicator.classList.remove('voice-active');\n }\n if (e.target === settingsModal) {\n settingsModal.style.display = 'none';\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Te Reo M\u0101ori AI Chat Interface – WordPress Blocks Te Reo M\u0101ori AI Dashboard Collaboration Analytics T Quick Actions Learning […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-640","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Te Reo M\u0101ori AI Chat Interface – WordPress Blocks Te Reo M\u0101ori AI Dashboard Collaboration Analytics T Quick Actions Learning […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=640"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/640\/revisions"}],"predecessor-version":[{"id":641,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/640\/revisions\/641"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the astra-sites domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php on line 6131

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/functions.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 118

Warning: include_once(/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php): Failed to open stream: No such file or directory in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: include_once(): Failed opening '/home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/includes/api-settings.php' for inclusion (include_path='.:/opt/cpanel/ea-php81/root/usr/share/pear') in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/theai/theai.php on line 119

Warning: session_start(): Session cannot be started after headers have already been sent in /home/dpjrmkpe/taonga.nxfanz.com/wp-content/plugins/chatbot-ai-free-models/includes/class-chatbot-main.php on line 88

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902

Warning: Cannot modify header information - headers already sent by (output started at /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/functions.php:6131) in /home/dpjrmkpe/taonga.nxfanz.com/wp-includes/rest-api/class-wp-rest-server.php on line 1902
{"id":640,"date":"2025-08-17T07:11:06","date_gmt":"2025-08-17T07:11:06","guid":{"rendered":"https:\/\/taonga.nxfanz.com\/?page_id=640"},"modified":"2025-08-17T07:11:06","modified_gmt":"2025-08-17T07:11:06","slug":"maori-pageblocks","status":"publish","type":"page","link":"https:\/\/taonga.nxfanz.com\/?page_id=640","title":{"rendered":"maori.pageblocks"},"content":{"rendered":"\n\n\n\n \n \n Te Reo M\u0101ori AI Chat Interface – WordPress Blocks<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n 'maori-yellow': '#FFD700',\n 'maori-dark': '#0a0a0a',\n 'maori-grey': '#1a1a1a',\n 'maori-light-grey': '#2a2a2a'\n }\n }\n }\n }\n <\/script>\n <style>\n @keyframes pulse-border {\n 0%, 100% { border-color: #FFD700; }\n 50% { border-color: #FFA500; }\n }\n .pulse-border {\n animation: pulse-border 2s ease-in-out infinite;\n }\n .scrollbar-thin {\n scrollbar-width: thin;\n scrollbar-color: #FFD700 #2a2a2a;\n }\n .scrollbar-thin::-webkit-scrollbar {\n width: 6px;\n }\n .scrollbar-thin::-webkit-scrollbar-track {\n background: #2a2a2a;\n }\n .scrollbar-thin::-webkit-scrollbar-thumb {\n background-color: #FFD700;\n border-radius: 3px;\n }\n .voice-active {\n background: linear-gradient(45deg, #FFD700, #FFA500);\n animation: pulse 1s ease-in-out infinite;\n }\n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n .tooltip {\n position: relative;\n }\n .tooltip:hover .tooltip-text {\n visibility: visible;\n opacity: 1;\n }\n .tooltip-text {\n visibility: hidden;\n opacity: 0;\n position: absolute;\n bottom: 125%;\n left: 50%;\n transform: translateX(-50%);\n background-color: #FFD700;\n color: #0a0a0a;\n padding: 5px 10px;\n border-radius: 5px;\n font-size: 12px;\n white-space: nowrap;\n transition: opacity 0.3s;\n z-index: 1000;\n }\n .typing-indicator {\n display: flex;\n align-items: center;\n }\n .typing-indicator span {\n height: 4px;\n width: 4px;\n background-color: #FFD700;\n border-radius: 50%;\n display: inline-block;\n margin: 0 1px;\n animation: bounce 1.3s linear infinite;\n }\n .typing-indicator span:nth-child(2) {\n animation-delay: -1.1s;\n }\n .typing-indicator span:nth-child(3) {\n animation-delay: -0.9s;\n }\n @keyframes bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-10px);\n }\n }\n \/* WordPress Block Styles *\/\n .wp-block-te-reo-maori-navigation {\n background-color: #1a1a1a;\n border-bottom: 1px solid #374151;\n padding: 12px 16px;\n }\n .wp-block-te-reo-maori-sidebar {\n width: 256px;\n background-color: #1a1a1a;\n padding: 16px;\n overflow-y: auto;\n }\n .wp-block-te-reo-maori-chat-header {\n background-color: #1a1a1a;\n padding: 16px;\n border-bottom: 1px solid #374151;\n }\n .wp-block-te-reo-maori-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n .wp-block-te-reo-maori-input-area {\n background-color: #1a1a1a;\n padding: 16px;\n border-top: 1px solid #374151;\n }\n .wp-block-te-reo-maori-right-panel {\n width: 320px;\n background-color: #1a1a1a;\n padding: 16px;\n border-left: 1px solid #374151;\n overflow-y: auto;\n }\n .wp-block-te-reo-maori-modal {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 50;\n }\n .wp-block-teo-maori-settings-modal {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 50;\n }\n <\/style>\n<\/head>\n<body class=\"bg-maori-dark text-white\">\n \n <section class=\"wp-block-te-reo-maori-navigation\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-4\">\n <h1 class=\"text-xl font-bold\">\n <span class=\"text-maori-yellow\">Te Reo<\/span> M\u0101ori AI\n <\/h1>\n <div class=\"hidden md:flex space-x-3\">\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-home mr-1\"><\/i> Dashboard\n <\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-users mr-1\"><\/i> Collaboration\n <\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-chart-bar mr-1\"><\/i> Analytics\n <\/button>\n <\/div>\n <\/div>\n <div class=\"flex items-center space-x-3\">\n <button id=\"settingsBtn\" class=\"text-gray-300 hover:text-maori-yellow transition-colors\">\n <i class=\"fas fa-cog\"><\/i>\n <\/button>\n <button class=\"text-gray-300 hover:text-maori-yellow transition-colors\">\n <i class=\"fas fa-bell\"><\/i>\n <\/button>\n <div class=\"w-8 h-8 bg-maori-yellow rounded-full flex items-center justify-center text-black font-bold\">\n T\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <div class=\"flex h-screen\">\n \n <aside class=\"wp-block-te-reo-maori-sidebar\">\n <div class=\"mb-4\">\n <h2 class=\"text-maori-yellow font-semibold mb-2\">Quick Actions<\/h2>\n <div class=\"space-y-2\">\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-book mr-2\"><\/i>Learning Tools\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-book-open mr-2\"><\/i>Story Creator\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-question-circle mr-2\"><\/i>Quiz Generator\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-gamepad mr-2\"><\/i>Flip Card Game\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-image mr-2\"><\/i>Image Generator\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"mb-4\">\n <h2 class=\"text-maori-yellow font-semibold mb-2\">Templates<\/h2>\n <div class=\"space-y-2\">\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-file-alt mr-2\"><\/i>Vocabulary Builder\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-file-alt mr-2\"><\/i>Grammar Guide\n <\/button>\n <button class=\"w-full text-left px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-file-alt mr-2\"><\/i>Cultural Stories\n <\/button>\n <\/div>\n <\/div>\n\n <div>\n <h2 class=\"text-maori-yellow font-semibold mb-2\">Recent Projects<\/h2>\n <div class=\"space-y-2\">\n <div class=\"px-3 py-2 bg-maori-light-grey rounded text-sm\">\n <div class=\"font-semibold\">Kiwi Story<\/div>\n <div class=\"text-xs text-gray-400\">2 hours ago<\/div>\n <\/div>\n <div class=\"px-3 py-2 bg-maori-light-grey rounded text-sm\">\n <div class=\"font-semibold\">Numbers Quiz<\/div>\n <div class=\"text-xs text-gray-400\">Yesterday<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n\n \n <main class=\"flex-1 flex flex-col\">\n \n <header class=\"wp-block-te-reo-maori-chat-header\">\n <div class=\"flex items-center justify-between\">\n <div>\n <h2 class=\"text-lg font-semibold\">Te Reo M\u0101ori Assistant<\/h2>\n <p class=\"text-sm text-gray-400\">Kia ora! How can I help you learn te reo M\u0101ori today?<\/p>\n <\/div>\n <div class=\"flex space-x-2\">\n <button class=\"px-3 py-1 bg-maori-yellow text-black rounded text-sm hover:bg-yellow-400 transition-colors\">\n <i class=\"fas fa-plus mr-1\"><\/i>New Chat\n <\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-share-alt\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div class=\"wp-block-te-reo-maori-chat-messages\" id=\"chatMessages\">\n <div class=\"flex items-start space-x-3\">\n <div class=\"w-8 h-8 bg-maori-yellow rounded-full flex items-center justify-center text-black font-bold\">\n AI\n <\/div>\n <div class=\"max-w-3xl\">\n <div class=\"bg-maori-light-grey rounded-lg p-4\">\n <p>Welcome to the Te Reo M\u0101ori AI Assistant! I’m here to help you create amazing learning experiences. What would you like to work on today?<\/p>\n <\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Just now<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <footer class=\"wp-block-te-reo-maori-input-area\">\n <div class=\"flex items-center space-x-2 mb-3\">\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\">\n <i class=\"fas fa-paperclip text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Attach files<\/span>\n <\/button>\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\">\n <i class=\"fas fa-link text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Add reference<\/span>\n <\/button>\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\">\n <i class=\"fas fa-search text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Search web<\/span>\n <\/button>\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\">\n <i class=\"fas fa-globe text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Language<\/span>\n <\/button>\n <button class=\"tooltip p-2 hover:bg-maori-light-grey rounded transition-colors\" id=\"voiceBtn\">\n <i class=\"fas fa-microphone text-gray-300\"><\/i>\n <span class=\"tooltip-text\">Voice input<\/span>\n <\/button>\n <\/div>\n <div class=\"flex space-x-2\">\n <div class=\"flex-1 relative\">\n <textarea \n class=\"w-full bg-maori-light-grey border border-gray-600 rounded-lg p-3 pr-12 resize-none focus:outline-none focus:border-maori-yellow transition-colors\"\n placeholder=\"Type your message here...\"\n rows=\"1\"\n id=\"messageInput\"\n ><\/textarea>\n <button class=\"absolute right-2 bottom-2 text-maori-yellow hover:text-yellow-400 transition-colors\">\n <i class=\"fas fa-paper-plane\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/footer>\n <\/main>\n\n \n <aside class=\"wp-block-te-reo-maori-right-panel\">\n <div class=\"mb-4\">\n <h3 class=\"text-maori-yellow font-semibold mb-2\">Current Project<\/h3>\n <div class=\"bg-maori-light-grey rounded p-3\">\n <h4 class=\"font-semibold\">Interactive M\u0101ori Vocabulary<\/h4>\n <p class=\"text-sm text-gray-400 mt-1\">Creating a flip card game for common phrases<\/p>\n <div class=\"mt-2\">\n <div class=\"w-full bg-gray-700 rounded-full h-2\">\n <div class=\"bg-maori-yellow h-2 rounded-full\" style=\"width: 65%\"><\/div>\n <\/div>\n <p class=\"text-xs text-gray-400 mt-1\">65% complete<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mb-4\">\n <h3 class=\"text-maori-yellow font-semibold mb-2\">Collaborators<\/h3>\n <div class=\"space-y-2\">\n <div class=\"flex items-center space-x-2\">\n <div class=\"w-6 h-6 bg-green-500 rounded-full\"><\/div>\n <span class=\"text-sm\">Sarah (Active)<\/span>\n <\/div>\n <div class=\"flex items-center space-x-2\">\n <div class=\"w-6 h-6 bg-yellow-500 rounded-full\"><\/div>\n <span class=\"text-sm\">Mike (Away)<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mb-4\">\n <h3 class=\"text-maori-yellow font-semibold mb-2\">Quick Export<\/h3>\n <div class=\"space-y-2\">\n <button class=\"w-full px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-download mr-2\"><\/i>Download Content\n <\/button>\n <button class=\"w-full px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-copy mr-2\"><\/i>Copy to Clipboard\n <\/button>\n <button class=\"w-full px-3 py-2 bg-maori-light-grey hover:bg-maori-yellow hover:text-black rounded text-sm transition-colors\">\n <i class=\"fas fa-wordpress mr-2\"><\/i>Apply to WordPress\n <\/button>\n <\/div>\n <\/div>\n\n <div>\n <h3 class=\"text-maori-yellow font-semibold mb-2\">Learning Analytics<\/h3>\n <div class=\"bg-maori-light-grey rounded p-3\">\n <div class=\"text-sm\">\n <div class=\"flex justify-between mb-1\">\n <span>Words Learned<\/span>\n <span class=\"text-maori-yellow\">127<\/span>\n <\/div>\n <div class=\"flex justify-between mb-1\">\n <span>Quiz Score<\/span>\n <span class=\"text-maori-yellow\">87%<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <span>Streak<\/span>\n <span class=\"text-maori-yellow\">12 days<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/aside>\n <\/div>\n\n \n <div id=\"voiceModal\" class=\"wp-block-te-reo-maori-modal\">\n <div class=\"bg-maori-grey p-8 rounded-lg text-center\">\n <h3 class=\"text-xl font-bold mb-4\">Voice Input<\/h3>\n <div id=\"voiceIndicator\" class=\"w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center\">\n <i class=\"fas fa-microphone text-2xl\"><\/i>\n <\/div>\n <p class=\"text-gray-300 mb-4\">Listening…<\/p>\n <button id=\"stopVoice\" class=\"px-4 py-2 bg-red-500 hover:bg-red-600 rounded transition-colors\">\n Stop Recording\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"settingsModal\" class=\"wp-block-teo-maori-settings-modal\">\n <div class=\"bg-maori-grey w-full max-w-md rounded-lg p-6 mx-4\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-bold text-maori-yellow\">Settings<\/h3>\n <button id=\"closeSettings\" class=\"text-gray-400 hover:text-white\">\n <i class=\"fas fa-times text-xl\"><\/i>\n <\/button>\n <\/div>\n \n <div class=\"space-y-4\">\n <div>\n <label class=\"block text-sm font-medium mb-2\">API Key Configuration<\/label>\n <div class=\"space-y-3\">\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">OpenAI Compatible API Key<\/label>\n <input type=\"password\" id=\"apiKey0\" placeholder=\"sk-...\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">Anthropic API Key<\/label>\n <input type=\"password\" id=\"apiKey1\" placeholder=\"sk-ant-...\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">Google AI API Key<\/label>\n <input type=\"password\" id=\"apiKey2\" placeholder=\"AIza...\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">Custom API Key<\/label>\n <input type=\"password\" id=\"apiKey3\" placeholder=\"Enter any API key...\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <div>\n <label class=\"block text-xs text-gray-400 mb-1\">Custom API Endpoint (Optional)<\/label>\n <input type=\"text\" id=\"customEndpoint\" placeholder=\"https:\/\/api.example.com\/v1\" class=\"w-full px-3 py-2 bg-maori-light-grey border border-gray-600 rounded focus:outline-none focus:border-maori-yellow\">\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"flex justify-end space-x-2 pt-4\">\n <button id=\"saveSettings\" class=\"px-4 py-2 bg-maori-yellow text-black rounded hover:bg-yellow-400 transition-colors\">\n Save Settings\n <\/button>\n <button id=\"cancelSettings\" class=\"px-4 py-2 bg-maori-light-grey rounded hover:bg-gray-600 transition-colors\">\n Cancel\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Voice input functionality\n const voiceBtn = document.getElementById('voiceBtn');\n const voiceModal = document.getElementById('voiceModal');\n const voiceIndicator = document.getElementById('voiceIndicator');\n const stopVoice = document.getElementById('stopVoice');\n const messageInput = document.getElementById('messageInput');\n const chatMessages = document.getElementById('chatMessages');\n\n voiceBtn.addEventListener('click', () => {\n voiceModal.style.display = 'flex';\n voiceIndicator.classList.add('voice-active');\n \n \/\/ Simulate voice recognition\n setTimeout(() => {\n messageInput.value = \"T\u0113n\u0101 koe! Can you help me create a story about M\u0101ui and the sun?\";\n voiceModal.style.display = 'none';\n voiceIndicator.classList.remove('voice-active');\n }, 3000);\n });\n\n stopVoice.addEventListener('click', () => {\n voiceModal.style.display = 'none';\n voiceIndicator.classList.remove('voice-active');\n });\n\n \/\/ Auto-resize textarea\n messageInput.addEventListener('input', function() {\n this.style.height = 'auto';\n this.style.height = this.scrollHeight + 'px';\n });\n\n \/\/ Send message functionality\n document.querySelector('.fa-paper-plane').parentElement.addEventListener('click', sendMessage);\n\n messageInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n });\n\n function sendMessage() {\n const message = messageInput.value.trim();\n if (!message) return;\n\n \/\/ Add user message\n const userMessage = document.createElement('div');\n userMessage.className = 'flex items-start space-x-3 justify-end';\n userMessage.innerHTML = `\n <div class=\"max-w-3xl\">\n <div class=\"bg-maori-yellow text-black rounded-lg p-4\">\n <p>${message}<\/p>\n <\/div>\n <div class=\"text-xs text-gray-400 mt-1 text-right\">Just now<\/div>\n <\/div>\n <div class=\"w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-white font-bold\">\n U\n <\/div>\n `;\n chatMessages.appendChild(userMessage);\n\n \/\/ Clear input\n messageInput.value = '';\n\n \/\/ Show typing indicator\n const typingDiv = document.createElement('div');\n typingDiv.className = 'flex items-start space-x-3';\n typingDiv.innerHTML = `\n <div class=\"w-8 h-8 bg-maori-yellow rounded-full flex items-center justify-center text-black font-bold\">\n AI\n <\/div>\n <div class=\"max-w-3xl\">\n <div class=\"bg-maori-light-grey rounded-lg p-4\">\n <div class=\"typing-indicator\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <\/div>\n `;\n chatMessages.appendChild(typingDiv);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n\n \/\/ Simulate AI response\n setTimeout(() => {\n typingDiv.remove();\n const aiMessage = document.createElement('div');\n aiMessage.className = 'flex items-start space-x-3';\n aiMessage.innerHTML = `\n <div class=\"w-8 h-8 bg-maori-yellow rounded-full flex items-center justify-center text-black font-bold\">\n AI\n <\/div>\n <div class=\"max-w-3xl\">\n <div class=\"bg-maori-light-grey rounded-lg p-4\">\n <p>Absolutely! I'd love to help create a story about M\u0101ui and the sun. In te reo M\u0101ori, the sun is called \"Te R\u0101\". Let me craft an engaging story that incorporates key vocabulary and cultural elements. Would you like me to create this as an interactive story with vocabulary exercises?<\/p>\n <div class=\"mt-3 space-x-2\">\n <button class=\"px-3 py-1 bg-maori-yellow text-black text-sm rounded hover:bg-yellow-400 transition-colors\">Yes, create interactive story<\/button>\n <button class=\"px-3 py-1 bg-maori-light-grey text-sm rounded hover:bg-maori-yellow hover:text-black transition-colors\">Just the story<\/button>\n <\/div>\n <\/div>\n <div class=\"text-xs text-gray-400 mt-1\">Just now<\/div>\n <\/div>\n `;\n chatMessages.appendChild(aiMessage);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }, 2000);\n }\n\n \/\/ Settings modal functionality\n const settingsBtn = document.getElementById('settingsBtn');\n const settingsModal = document.getElementById('settingsModal');\n const closeSettings = document.getElementById('closeSettings');\n const cancelSettings = document.getElementById('cancelSettings');\n\n settingsBtn.addEventListener('click', () => {\n settingsModal.style.display = 'flex';\n });\n\n closeSettings.addEventListener('click', () => {\n settingsModal.style.display = 'none';\n });\n\n cancelSettings.addEventListener('click', () => {\n settingsModal.style.display = 'none';\n });\n\n \/\/ Close modals when clicking outside\n window.addEventListener('click', (e) => {\n if (e.target === voiceModal) {\n voiceModal.style.display = 'none';\n voiceIndicator.classList.remove('voice-active');\n }\n if (e.target === settingsModal) {\n settingsModal.style.display = 'none';\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Te Reo M\u0101ori AI Chat Interface – WordPress Blocks Te Reo M\u0101ori AI Dashboard Collaboration Analytics T Quick Actions Learning […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","pagelayer_contact_templates":[],"_pagelayer_content":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-640","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Taonga Admin","author_link":"https:\/\/taonga.nxfanz.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Te Reo M\u0101ori AI Chat Interface – WordPress Blocks Te Reo M\u0101ori AI Dashboard Collaboration Analytics T Quick Actions Learning […]","_links":{"self":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=640"}],"version-history":[{"count":1,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/640\/revisions"}],"predecessor-version":[{"id":641,"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=\/wp\/v2\/pages\/640\/revisions\/641"}],"wp:attachment":[{"href":"https:\/\/taonga.nxfanz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}