AI Assistant Chat<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@600&display=swap\" rel=\"stylesheet\">\n<style>\n\/* Loading spinner animation *\/\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.loading-spinner {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #ED6B06;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin: 20px auto;\n}\n<\/style>\n<\/head>\n<body>\n\n<div id=\"n8n-chat-container\" style=\"width: 800px; height: 600px; margin: 0 auto; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-family: 'Poppins', sans-serif; font-weight: 600; position: relative; display: flex; flex-direction: column;\">\n \n \n <div style=\"padding: 20px; background: #ED6B06; color: white; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;\">\n <h3 style=\"margin: 0; font-size: 20px;\">AI Assistant<\/h3>\n <\/div>\n \n \n <div id=\"resize-handle\" style=\"position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: nwse-resize; z-index: 10;\">\n <svg width=\"20\" height=\"20\" style=\"opacity: 0.5;\">\n <path d=\"M 20 0 L 20 20 L 0 20 Z\" fill=\"#ED6B06\"\/>\n <\/svg>\n <\/div>\n \n \n <div id=\"auth-screen\" style=\"flex: 1; padding: 40px; background: #F4F0ED; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;\">\n <h2 style=\"color: #333; margin-bottom: 20px;\">Welcome! Please choose an option:<\/h2>\n <button \n onclick=\"showSignUp()\" \n style=\"padding: 15px 50px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; min-width: 200px;\"\n >\n Sign Up\n <\/button>\n <button \n onclick=\"showSignIn()\" \n style=\"padding: 15px 50px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; min-width: 200px;\"\n >\n Sign In\n <\/button>\n <\/div>\n \n \n <div id=\"chat-messages\" style=\"flex: 1; overflow-y: auto; padding: 20px; background: #F4F0ED; display: none;\">\n <div style=\"text-align: center; color: #999; padding: 20px;\">\n Start a conversation…\n <\/div>\n <\/div>\n \n \n <div id=\"options-container\" style=\"padding: 15px; background: #F4F0ED; border-top: 1px solid #ddd; display: none; flex-wrap: wrap; gap: 10px; flex-shrink: 0;\"><\/div>\n \n \n <div id=\"input-area\" style=\"padding: 15px; background: white; border-top: 1px solid #ddd; display: none; flex-direction: row; gap: 10px; flex-shrink: 0;\">\n <input \n type=\"text\" \n id=\"chat-input\" \n placeholder=\"Type your message...\" \n style=\"flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px;\"\n >\n <button \n onclick=\"sendMessage()\" \n style=\"padding: 12px 30px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold;\"\n >\n Send\n <\/button>\n <\/div>\n<\/div>\n\n<script>\nconst webhookUrl = 'https:\/\/n8n.srv1160565.hstgr.cloud\/webhook\/5fd03d40-2d8f-480e-9e1e-38f9cdca5c8e';\nlet sessionId = null;\nlet currentUsername = '';\n\n\/\/ Resize functionality\nlet isResizing = false;\nlet startX, startY, startWidth, startHeight;\n\n\/\/ Convert Markdown to HTML with sanitization\nfunction markdownToHtml(text) {\n if (!text) return '';\n \n \/\/ Escape any HTML first to prevent XSS\n let escaped = text\n .replace(\/&\/g, '&')\n .replace(\/<\/g, '<')\n .replace(\/>\/g, '>')\n .replace(\/\"\/g, '"')\n .replace(\/'\/g, ''');\n \n \/\/ Now apply markdown formatting\n return escaped\n \/\/ Links: [text](url)\n .replace(\/\\[([^\\]]+)\\]\$([^)]+)\$\/g, '<a href=\"$2\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color: #ED6B06; text-decoration: underline;\">$1<\/a>')\n \/\/ Bold: **text** or __text__\n .replace(\/\\*\\*([^*]+)\\*\\*\/g, '<strong>$1<\/strong>')\n .replace(\/__([^_]+)__\/g, '<strong>$1<\/strong>')\n \/\/ Italic: *text* or _text_ (but not in URLs)\n .replace(\/\\*([^*]+)\\*\/g, '<em>$1<\/em>')\n .replace(\/_([^_]+)_\/g, '<em>$1<\/em>')\n \/\/ Underline: <u>text<\/u> (already escaped, so use < and >)\n .replace(\/<u>([^&]+)<\\\/u>\/g, '<u>$1<\/u>')\n \/\/ Line breaks\n .replace(\/\\n\/g, '<br>');\n}\n\nfunction showLoadingScreen(message) {\n const authScreen = document.getElementById('auth-screen');\n authScreen.innerHTML = `\n <div style=\"text-align: center;\">\n <div class=\"loading-spinner\"><\/div>\n <p style=\"color: #666; margin-top: 20px; font-size: 16px;\">${message}<\/p>\n <\/div>\n `;\n}\n\nfunction showSignUp() {\n const authScreen = document.getElementById('auth-screen');\n authScreen.innerHTML = `\n <div style=\"text-align: center; max-width: 400px; margin: 0 auto;\">\n <h2 style=\"color: #333; margin-bottom: 30px;\">Create Your Account<\/h2>\n <p style=\"color: #666; margin-bottom: 20px; font-size: 16px;\">Please fill in your details to get started:<\/p>\n \n <div style=\"text-align: left; margin-bottom: 15px;\">\n <label style=\"display: block; color: #333; margin-bottom: 5px; font-size: 14px;\">Username<\/label>\n <input \n type=\"text\" \n id=\"username-input\" \n placeholder=\"Enter your username...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 100%; box-sizing: border-box;\"\n >\n <\/div>\n \n <div style=\"text-align: left; margin-bottom: 15px;\">\n <label style=\"display: block; color: #333; margin-bottom: 5px; font-size: 14px;\">Full Name<\/label>\n <input \n type=\"text\" \n id=\"fullname-input\" \n placeholder=\"Enter your full name...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 100%; box-sizing: border-box;\"\n >\n <\/div>\n \n <div style=\"text-align: left; margin-bottom: 15px;\">\n <label style=\"display: block; color: #333; margin-bottom: 5px; font-size: 14px;\">Support Worker<\/label>\n <input \n type=\"text\" \n id=\"support-worker-input\" \n placeholder=\"Enter your support worker's name...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 100%; box-sizing: border-box;\"\n >\n <\/div>\n \n <div style=\"text-align: left; margin-bottom: 25px;\">\n <label style=\"display: block; color: #333; margin-bottom: 5px; font-size: 14px;\">Support Service<\/label>\n <input \n type=\"text\" \n id=\"support-service-input\" \n placeholder=\"Enter your support service...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 100%; box-sizing: border-box;\"\n >\n <\/div>\n \n <button \n onclick=\"completeSignUp()\" \n style=\"padding: 12px 40px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold; width: 100%;\"\n >\n Create Account\n <\/button>\n <br>\n <button \n onclick=\"showAuthButtons()\" \n style=\"padding: 8px 20px; background: transparent; color: #ED6B06; border: none; cursor: pointer; font-size: 14px; margin-top: 15px;\"\n >\n Back\n <\/button>\n <\/div>\n `;\n document.getElementById('username-input').focus();\n}\n\nfunction showSignIn() {\n const authScreen = document.getElementById('auth-screen');\n authScreen.innerHTML = `\n <div style=\"text-align: center;\">\n <h2 style=\"color: #333; margin-bottom: 30px;\">Welcome Back!<\/h2>\n <p style=\"color: #666; margin-bottom: 20px; font-size: 16px;\">Please enter your username to continue:<\/p>\n <input \n type=\"text\" \n id=\"username-input\" \n placeholder=\"Enter your username...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 300px; margin-bottom: 20px;\"\n >\n <br>\n <button \n onclick=\"completeSignIn()\" \n style=\"padding: 12px 40px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold;\"\n >\n Sign In\n <\/button>\n <br>\n <button \n onclick=\"showAuthButtons()\" \n style=\"padding: 8px 20px; background: transparent; color: #ED6B06; border: none; cursor: pointer; font-size: 14px; margin-top: 15px;\"\n >\n Back\n <\/button>\n <\/div>\n `;\n document.getElementById('username-input').focus();\n document.getElementById('username-input').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') completeSignIn();\n });\n}\n\nfunction showAuthButtons() {\n const authScreen = document.getElementById('auth-screen');\n authScreen.innerHTML = `\n <h2 style=\"color: #333; margin-bottom: 20px;\">Welcome! Please choose an option:<\/h2>\n <button \n onclick=\"showSignUp()\" \n style=\"padding: 15px 50px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; min-width: 200px;\"\n >\n Sign Up\n <\/button>\n <button \n onclick=\"showSignIn()\" \n style=\"padding: 15px 50px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; min-width: 200px;\"\n >\n Sign In\n <\/button>\n `;\n}\n\nasync function completeSignUp() {\n const username = document.getElementById('username-input').value.trim();\n const fullName = document.getElementById('fullname-input').value.trim();\n const supportWorker = document.getElementById('support-worker-input').value.trim();\n const supportService = document.getElementById('support-service-input').value.trim();\n \n \/\/ Validate all fields\n if (!username) {\n alert('Please enter a username');\n return;\n }\n if (!fullName) {\n alert('Please enter your full name');\n return;\n }\n if (!supportWorker) {\n alert('Please enter your support worker');\n return;\n }\n if (!supportService) {\n alert('Please enter your support service');\n return;\n }\n \n showLoadingScreen('Creating your account...');\n \n try {\n const response = await fetch(webhookUrl, {\n method: 'POST',\n headers: {'Content-Type': 'application\/json'},\n body: JSON.stringify({\n action: 'signup',\n username: username,\n fullName: fullName,\n supportWorker: supportWorker,\n supportService: supportService,\n sessionId: 'session_' + Date.now()\n })\n });\n \n let data = await response.json();\n console.log('Sign up response:', data);\n \n \/\/ Handle if response is an array, take first element\n if (Array.isArray(data) && data.length > 0) {\n data = data[0];\n }\n \n if (data.success) {\n currentUsername = username;\n sessionId = data.sessionId;\n console.log('Session ID set to:', sessionId);\n startChat(data.welcomeMessage, data.options);\n } else {\n showAuthButtons();\n alert(data.message || 'Sign up failed. Please try again.');\n }\n } catch (error) {\n showAuthButtons();\n alert('Error: Could not connect to server');\n console.error('Sign up error:', error);\n }\n}\n\nasync function completeSignIn() {\n const username = document.getElementById('username-input').value.trim();\n if (!username) {\n alert('Please enter a username');\n return;\n }\n \n showLoadingScreen('Signing you in...');\n \n try {\n const response = await fetch(webhookUrl, {\n method: 'POST',\n headers: {'Content-Type': 'application\/json'},\n body: JSON.stringify({\n action: 'signin',\n username: username,\n sessionId: 'session_' + Date.now()\n })\n });\n \n let data = await response.json();\n console.log('Sign in response:', data);\n \n \/\/ Handle if response is an array, take first element\n if (Array.isArray(data) && data.length > 0) {\n data = data[0];\n }\n \n if (data.success) {\n currentUsername = username;\n sessionId = data.sessionId;\n console.log('Session ID set to:', sessionId);\n startChat(data.welcomeMessage, data.options);\n } else {\n showAuthButtons();\n alert(data.message || 'Sign in failed. Please check your username.');\n }\n } catch (error) {\n showAuthButtons();\n alert('Error: Could not connect to server');\n console.error(error);\n }\n}\n\nasync function startChat(welcomeMessage, options) {\n document.getElementById('auth-screen').style.display = 'none';\n document.getElementById('chat-messages').style.display = 'block';\n document.getElementById('input-area').style.display = 'flex';\n \n \/\/ Clear the \"Start a conversation...\" placeholder\n const messagesDiv = document.getElementById('chat-messages');\n messagesDiv.innerHTML = '';\n \n \/\/ Display welcome message if provided\n if (welcomeMessage) {\n \/\/ Parse response for buttons in [BUTTONS:...] format\n const parsed = parseResponse(welcomeMessage);\n addMessage(parsed.text, 'bot');\n \n \/\/ Display buttons if found in text OR if provided in options array\n if (parsed.buttons && parsed.buttons.length > 0) {\n console.log('Displaying parsed buttons from welcome:', parsed.buttons);\n displayOptions(parsed.buttons);\n } else if (options && Array.isArray(options) && options.length > 0) {\n console.log('Displaying welcome options:', options);\n displayOptions(options);\n }\n }\n \n document.getElementById('chat-input').focus();\n}\n\n\/\/ Display options as buttons from web response\nfunction displayOptions(options) {\n console.log('=== displayOptions called ===');\n console.log('Options received:', options);\n console.log('Options type:', typeof options);\n console.log('Is array:', Array.isArray(options));\n \n const optionsContainer = document.getElementById('options-container');\n \n if (!optionsContainer) {\n console.error('Options container not found!');\n return;\n }\n \n \/\/ Clear any existing buttons\n optionsContainer.innerHTML = '';\n \n if (!options || !Array.isArray(options) || options.length === 0) {\n console.log('No valid options - hiding container');\n optionsContainer.style.display = 'none';\n return;\n }\n \n console.log('Creating', options.length, 'buttons');\n \n \/\/ Create buttons first\n const buttons = [];\n options.forEach((option, index) => {\n console.log(`Creating button ${index}:`, option);\n const btn = document.createElement('button');\n btn.textContent = option;\n btn.onclick = () => {\n console.log('Button clicked:', option);\n document.getElementById('chat-input').value = option;\n sendMessage();\n };\n btn.style.padding = '12px 24px';\n btn.style.background = '#ED6B06';\n btn.style.color = 'white';\n btn.style.border = '2px solid #ED6B06';\n btn.style.borderRadius = '8px';\n btn.style.cursor = 'pointer';\n btn.style.fontSize = '16px';\n btn.style.fontWeight = 'bold';\n btn.style.fontFamily = \"'Poppins', sans-serif\";\n btn.style.transition = 'all 0.2s';\n \n btn.onmouseover = function() {\n this.style.background = '#d45f05';\n this.style.borderColor = '#d45f05';\n };\n btn.onmouseout = function() {\n this.style.background = '#ED6B06';\n this.style.borderColor = '#ED6B06';\n };\n \n buttons.push(btn);\n });\n \n \/\/ Now add all buttons and show container\n buttons.forEach(btn => optionsContainer.appendChild(btn));\n optionsContainer.style.display = 'flex';\n \n console.log('Buttons added. Container display:', optionsContainer.style.display);\n console.log('Container children count:', optionsContainer.children.length);\n}\n\n\/\/ Parse buttons from AI response\n\/\/ Expected format: [BUTTONS:option1|option2|option3]\nfunction parseResponse(text) {\n const buttonRegex = \/\\[BUTTONS:(.*?)\\]\/;\n const match = text.match(buttonRegex);\n \n if (match) {\n const buttons = match[1].split('|').map(b => b.trim());\n const cleanText = text.replace(buttonRegex, '').trim();\n return { text: cleanText, buttons };\n }\n \n return { text, buttons: null };\n}\n\nasync function sendMessage() {\n const input = document.getElementById('chat-input');\n const message = input.value.trim();\n \n console.log('=== sendMessage called ===');\n console.log('Message:', message);\n \n if (!message) {\n console.log('Empty message, returning');\n return;\n }\n \n \/\/ Add user message\n console.log('Adding user message to chat');\n addMessage(message, 'user');\n input.value = '';\n \n \/\/ Hide options when user sends a message\n document.getElementById('options-container').style.display = 'none';\n \n const typingId = addMessage('Typing...', 'typing');\n \n try {\n console.log('Sending request to webhook...');\n const response = await fetch(webhookUrl, {\n method: 'POST',\n headers: {'Content-Type': 'application\/json'},\n body: JSON.stringify({\n message: message,\n sessionId: sessionId,\n username: currentUsername\n })\n });\n \n let data = await response.json();\n console.log('=== Raw bot response ===');\n console.log(data);\n \n \/\/ Handle if response is an array, take first element\n if (Array.isArray(data) && data.length > 0) {\n data = data[0];\n console.log('=== Unwrapped data ===');\n console.log(data);\n }\n \n document.getElementById(typingId).remove();\n \n \/\/ Try multiple possible field names for the message\n const botMessage = data.output || data.response || data.message || data.messageHtml || 'No response';\n console.log('Bot message:', botMessage);\n \n \/\/ Parse response for buttons in [BUTTONS:...] format\n const parsed = parseResponse(botMessage);\n console.log('Parsed text:', parsed.text);\n console.log('Parsed buttons:', parsed.buttons);\n \n addMessage(parsed.text, 'bot');\n \n \/\/ Display buttons if found in text OR if provided in options array\n console.log('=== Checking for options ===');\n console.log('parsed.buttons:', parsed.buttons);\n console.log('data.options:', data.options);\n console.log('data:', JSON.stringify(data, null, 2));\n \n if (parsed.buttons && parsed.buttons.length > 0) {\n console.log('Displaying parsed buttons from message');\n displayOptions(parsed.buttons);\n } else if (data.options) {\n console.log('data.options exists, checking if array...');\n console.log('Is array?', Array.isArray(data.options));\n console.log('Length:', data.options.length);\n if (Array.isArray(data.options) && data.options.length > 0) {\n console.log('Displaying options from data.options');\n displayOptions(data.options);\n } else {\n console.log('data.options is not a valid array or is empty');\n }\n } else {\n console.log('No options found in response');\n console.log('Full data object keys:', Object.keys(data));\n }\n } catch (error) {\n console.error('=== Error in sendMessage ===');\n console.error(error);\n document.getElementById(typingId).remove();\n addMessage('Error: Could not connect to chat service', 'error');\n }\n}\n\nfunction addMessage(text, sender) {\n console.log('=== addMessage called ===');\n console.log('Text:', text);\n console.log('Sender:', sender);\n \n const messagesDiv = document.getElementById('chat-messages');\n \n if (messagesDiv.children.length === 1 && messagesDiv.children[0].textContent.includes('Start a conversation')) {\n messagesDiv.innerHTML = '';\n }\n \n const msgDiv = document.createElement('div');\n const msgId = 'msg_' + Date.now() + '_' + Math.random();\n msgDiv.id = msgId;\n msgDiv.style.marginBottom = '15px';\n msgDiv.style.padding = '12px 15px';\n msgDiv.style.borderRadius = '8px';\n msgDiv.style.maxWidth = '80%';\n msgDiv.style.wordWrap = 'break-word';\n msgDiv.style.clear = 'both';\n \n if (sender === 'user') {\n msgDiv.style.background = '#ED6B06';\n msgDiv.style.color = 'white';\n msgDiv.style.marginLeft = 'auto';\n msgDiv.style.marginRight = '0';\n msgDiv.style.textAlign = 'right';\n msgDiv.style.float = 'right';\n msgDiv.textContent = text;\n } else if (sender === 'typing') {\n msgDiv.style.background = '#f0f0f0';\n msgDiv.style.color = '#666';\n msgDiv.style.fontStyle = 'italic';\n msgDiv.style.float = 'left';\n msgDiv.textContent = text;\n } else if (sender === 'error') {\n msgDiv.style.background = '#ffebee';\n msgDiv.style.color = '#c62828';\n msgDiv.style.float = 'left';\n msgDiv.textContent = text;\n } else {\n msgDiv.style.background = '#fff';\n msgDiv.style.color = '#333';\n msgDiv.style.border = '1px solid #e0e0e0';\n msgDiv.style.float = 'left';\n \n \/\/ Check if text already contains HTML (like <br> tags)\n if (text.includes('<br>') || text.includes('<strong>')) {\n msgDiv.innerHTML = text;\n } else {\n msgDiv.innerHTML = markdownToHtml(text);\n }\n }\n \n messagesDiv.appendChild(msgDiv);\n \n \/\/ Add a clearing div after each message\n const clearDiv = document.createElement('div');\n clearDiv.style.clear = 'both';\n messagesDiv.appendChild(clearDiv);\n \n messagesDiv.scrollTop = messagesDiv.scrollHeight;\n \n console.log('Message added with ID:', msgId);\n return msgId;\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n console.log('=== DOM Loaded ===');\n \n const container = document.getElementById('n8n-chat-container');\n const handle = document.getElementById('resize-handle');\n \n handle.addEventListener('mousedown', function(e) {\n isResizing = true;\n startX = e.clientX;\n startY = e.clientY;\n startWidth = parseInt(document.defaultView.getComputedStyle(container).width, 10);\n startHeight = parseInt(document.defaultView.getComputedStyle(container).height, 10);\n e.preventDefault();\n });\n \n document.addEventListener('mousemove', function(e) {\n if (!isResizing) return;\n const width = startWidth + (e.clientX - startX);\n const height = startHeight + (e.clientY - startY);\n container.style.width = Math.max(400, width) + 'px';\n container.style.height = Math.max(400, height) + 'px';\n });\n \n document.addEventListener('mouseup', function() {\n isResizing = false;\n });\n \n const chatInput = document.getElementById('chat-input');\n if (chatInput) {\n chatInput.addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n sendMessage();\n }\n });\n }\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>AI Assistant Chat AI Assistant Welcome! Please choose an option: Sign Up Sign In Start a conversation… Send<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"set","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":""}},"footnotes":""},"class_list":["post-5951","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/comments?post=5951"}],"version-history":[{"count":10,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5951\/revisions"}],"predecessor-version":[{"id":6035,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5951\/revisions\/6035"}],"wp:attachment":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/media?parent=5951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5951,"date":"2025-12-02T11:07:31","date_gmt":"2025-12-02T11:07:31","guid":{"rendered":"https:\/\/access4all.uk\/?page_id=5951"},"modified":"2026-01-20T15:34:22","modified_gmt":"2026-01-20T15:34:22","slug":"wip-ai","status":"publish","type":"page","link":"https:\/\/access4all.uk\/index.php\/wip-ai\/","title":{"rendered":"WIP AI"},"content":{"rendered":"\n\n\n\n\n\nAI Assistant Chat<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@600&display=swap\" rel=\"stylesheet\">\n<style>\n\/* Loading spinner animation *\/\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.loading-spinner {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #ED6B06;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin: 20px auto;\n}\n<\/style>\n<\/head>\n<body>\n\n<div id=\"n8n-chat-container\" style=\"width: 800px; height: 600px; margin: 0 auto; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-family: 'Poppins', sans-serif; font-weight: 600; position: relative; display: flex; flex-direction: column;\">\n \n \n <div style=\"padding: 20px; background: #ED6B06; color: white; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;\">\n <h3 style=\"margin: 0; font-size: 20px;\">AI Assistant<\/h3>\n <\/div>\n \n \n <div id=\"resize-handle\" style=\"position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: nwse-resize; z-index: 10;\">\n <svg width=\"20\" height=\"20\" style=\"opacity: 0.5;\">\n <path d=\"M 20 0 L 20 20 L 0 20 Z\" fill=\"#ED6B06\"\/>\n <\/svg>\n <\/div>\n \n \n <div id=\"auth-screen\" style=\"flex: 1; padding: 40px; background: #F4F0ED; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;\">\n <h2 style=\"color: #333; margin-bottom: 20px;\">Welcome! Please choose an option:<\/h2>\n <button \n onclick=\"showSignUp()\" \n style=\"padding: 15px 50px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; min-width: 200px;\"\n >\n Sign Up\n <\/button>\n <button \n onclick=\"showSignIn()\" \n style=\"padding: 15px 50px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; min-width: 200px;\"\n >\n Sign In\n <\/button>\n <\/div>\n \n \n <div id=\"chat-messages\" style=\"flex: 1; overflow-y: auto; padding: 20px; background: #F4F0ED; display: none;\">\n <div style=\"text-align: center; color: #999; padding: 20px;\">\n Start a conversation…\n <\/div>\n <\/div>\n \n \n <div id=\"options-container\" style=\"padding: 15px; background: #F4F0ED; border-top: 1px solid #ddd; display: none; flex-wrap: wrap; gap: 10px; flex-shrink: 0;\"><\/div>\n \n \n <div id=\"input-area\" style=\"padding: 15px; background: white; border-top: 1px solid #ddd; display: none; flex-direction: row; gap: 10px; flex-shrink: 0;\">\n <input \n type=\"text\" \n id=\"chat-input\" \n placeholder=\"Type your message...\" \n style=\"flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px;\"\n >\n <button \n onclick=\"sendMessage()\" \n style=\"padding: 12px 30px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold;\"\n >\n Send\n <\/button>\n <\/div>\n<\/div>\n\n<script>\nconst webhookUrl = 'https:\/\/n8n.srv1160565.hstgr.cloud\/webhook\/5fd03d40-2d8f-480e-9e1e-38f9cdca5c8e';\nlet sessionId = null;\nlet currentUsername = '';\n\n\/\/ Resize functionality\nlet isResizing = false;\nlet startX, startY, startWidth, startHeight;\n\n\/\/ Convert Markdown to HTML with sanitization\nfunction markdownToHtml(text) {\n if (!text) return '';\n \n \/\/ Escape any HTML first to prevent XSS\n let escaped = text\n .replace(\/&\/g, '&')\n .replace(\/<\/g, '<')\n .replace(\/>\/g, '>')\n .replace(\/\"\/g, '"')\n .replace(\/'\/g, ''');\n \n \/\/ Now apply markdown formatting\n return escaped\n \/\/ Links: [text](url)\n .replace(\/\\[([^\\]]+)\\]\$([^)]+)\$\/g, '<a href=\"$2\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color: #ED6B06; text-decoration: underline;\">$1<\/a>')\n \/\/ Bold: **text** or __text__\n .replace(\/\\*\\*([^*]+)\\*\\*\/g, '<strong>$1<\/strong>')\n .replace(\/__([^_]+)__\/g, '<strong>$1<\/strong>')\n \/\/ Italic: *text* or _text_ (but not in URLs)\n .replace(\/\\*([^*]+)\\*\/g, '<em>$1<\/em>')\n .replace(\/_([^_]+)_\/g, '<em>$1<\/em>')\n \/\/ Underline: <u>text<\/u> (already escaped, so use < and >)\n .replace(\/<u>([^&]+)<\\\/u>\/g, '<u>$1<\/u>')\n \/\/ Line breaks\n .replace(\/\\n\/g, '<br>');\n}\n\nfunction showLoadingScreen(message) {\n const authScreen = document.getElementById('auth-screen');\n authScreen.innerHTML = `\n <div style=\"text-align: center;\">\n <div class=\"loading-spinner\"><\/div>\n <p style=\"color: #666; margin-top: 20px; font-size: 16px;\">${message}<\/p>\n <\/div>\n `;\n}\n\nfunction showSignUp() {\n const authScreen = document.getElementById('auth-screen');\n authScreen.innerHTML = `\n <div style=\"text-align: center; max-width: 400px; margin: 0 auto;\">\n <h2 style=\"color: #333; margin-bottom: 30px;\">Create Your Account<\/h2>\n <p style=\"color: #666; margin-bottom: 20px; font-size: 16px;\">Please fill in your details to get started:<\/p>\n \n <div style=\"text-align: left; margin-bottom: 15px;\">\n <label style=\"display: block; color: #333; margin-bottom: 5px; font-size: 14px;\">Username<\/label>\n <input \n type=\"text\" \n id=\"username-input\" \n placeholder=\"Enter your username...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 100%; box-sizing: border-box;\"\n >\n <\/div>\n \n <div style=\"text-align: left; margin-bottom: 15px;\">\n <label style=\"display: block; color: #333; margin-bottom: 5px; font-size: 14px;\">Full Name<\/label>\n <input \n type=\"text\" \n id=\"fullname-input\" \n placeholder=\"Enter your full name...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 100%; box-sizing: border-box;\"\n >\n <\/div>\n \n <div style=\"text-align: left; margin-bottom: 15px;\">\n <label style=\"display: block; color: #333; margin-bottom: 5px; font-size: 14px;\">Support Worker<\/label>\n <input \n type=\"text\" \n id=\"support-worker-input\" \n placeholder=\"Enter your support worker's name...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 100%; box-sizing: border-box;\"\n >\n <\/div>\n \n <div style=\"text-align: left; margin-bottom: 25px;\">\n <label style=\"display: block; color: #333; margin-bottom: 5px; font-size: 14px;\">Support Service<\/label>\n <input \n type=\"text\" \n id=\"support-service-input\" \n placeholder=\"Enter your support service...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 100%; box-sizing: border-box;\"\n >\n <\/div>\n \n <button \n onclick=\"completeSignUp()\" \n style=\"padding: 12px 40px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold; width: 100%;\"\n >\n Create Account\n <\/button>\n <br>\n <button \n onclick=\"showAuthButtons()\" \n style=\"padding: 8px 20px; background: transparent; color: #ED6B06; border: none; cursor: pointer; font-size: 14px; margin-top: 15px;\"\n >\n Back\n <\/button>\n <\/div>\n `;\n document.getElementById('username-input').focus();\n}\n\nfunction showSignIn() {\n const authScreen = document.getElementById('auth-screen');\n authScreen.innerHTML = `\n <div style=\"text-align: center;\">\n <h2 style=\"color: #333; margin-bottom: 30px;\">Welcome Back!<\/h2>\n <p style=\"color: #666; margin-bottom: 20px; font-size: 16px;\">Please enter your username to continue:<\/p>\n <input \n type=\"text\" \n id=\"username-input\" \n placeholder=\"Enter your username...\" \n style=\"padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; width: 300px; margin-bottom: 20px;\"\n >\n <br>\n <button \n onclick=\"completeSignIn()\" \n style=\"padding: 12px 40px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: bold;\"\n >\n Sign In\n <\/button>\n <br>\n <button \n onclick=\"showAuthButtons()\" \n style=\"padding: 8px 20px; background: transparent; color: #ED6B06; border: none; cursor: pointer; font-size: 14px; margin-top: 15px;\"\n >\n Back\n <\/button>\n <\/div>\n `;\n document.getElementById('username-input').focus();\n document.getElementById('username-input').addEventListener('keypress', function(e) {\n if (e.key === 'Enter') completeSignIn();\n });\n}\n\nfunction showAuthButtons() {\n const authScreen = document.getElementById('auth-screen');\n authScreen.innerHTML = `\n <h2 style=\"color: #333; margin-bottom: 20px;\">Welcome! Please choose an option:<\/h2>\n <button \n onclick=\"showSignUp()\" \n style=\"padding: 15px 50px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; min-width: 200px;\"\n >\n Sign Up\n <\/button>\n <button \n onclick=\"showSignIn()\" \n style=\"padding: 15px 50px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; min-width: 200px;\"\n >\n Sign In\n <\/button>\n `;\n}\n\nasync function completeSignUp() {\n const username = document.getElementById('username-input').value.trim();\n const fullName = document.getElementById('fullname-input').value.trim();\n const supportWorker = document.getElementById('support-worker-input').value.trim();\n const supportService = document.getElementById('support-service-input').value.trim();\n \n \/\/ Validate all fields\n if (!username) {\n alert('Please enter a username');\n return;\n }\n if (!fullName) {\n alert('Please enter your full name');\n return;\n }\n if (!supportWorker) {\n alert('Please enter your support worker');\n return;\n }\n if (!supportService) {\n alert('Please enter your support service');\n return;\n }\n \n showLoadingScreen('Creating your account...');\n \n try {\n const response = await fetch(webhookUrl, {\n method: 'POST',\n headers: {'Content-Type': 'application\/json'},\n body: JSON.stringify({\n action: 'signup',\n username: username,\n fullName: fullName,\n supportWorker: supportWorker,\n supportService: supportService,\n sessionId: 'session_' + Date.now()\n })\n });\n \n let data = await response.json();\n console.log('Sign up response:', data);\n \n \/\/ Handle if response is an array, take first element\n if (Array.isArray(data) && data.length > 0) {\n data = data[0];\n }\n \n if (data.success) {\n currentUsername = username;\n sessionId = data.sessionId;\n console.log('Session ID set to:', sessionId);\n startChat(data.welcomeMessage, data.options);\n } else {\n showAuthButtons();\n alert(data.message || 'Sign up failed. Please try again.');\n }\n } catch (error) {\n showAuthButtons();\n alert('Error: Could not connect to server');\n console.error('Sign up error:', error);\n }\n}\n\nasync function completeSignIn() {\n const username = document.getElementById('username-input').value.trim();\n if (!username) {\n alert('Please enter a username');\n return;\n }\n \n showLoadingScreen('Signing you in...');\n \n try {\n const response = await fetch(webhookUrl, {\n method: 'POST',\n headers: {'Content-Type': 'application\/json'},\n body: JSON.stringify({\n action: 'signin',\n username: username,\n sessionId: 'session_' + Date.now()\n })\n });\n \n let data = await response.json();\n console.log('Sign in response:', data);\n \n \/\/ Handle if response is an array, take first element\n if (Array.isArray(data) && data.length > 0) {\n data = data[0];\n }\n \n if (data.success) {\n currentUsername = username;\n sessionId = data.sessionId;\n console.log('Session ID set to:', sessionId);\n startChat(data.welcomeMessage, data.options);\n } else {\n showAuthButtons();\n alert(data.message || 'Sign in failed. Please check your username.');\n }\n } catch (error) {\n showAuthButtons();\n alert('Error: Could not connect to server');\n console.error(error);\n }\n}\n\nasync function startChat(welcomeMessage, options) {\n document.getElementById('auth-screen').style.display = 'none';\n document.getElementById('chat-messages').style.display = 'block';\n document.getElementById('input-area').style.display = 'flex';\n \n \/\/ Clear the \"Start a conversation...\" placeholder\n const messagesDiv = document.getElementById('chat-messages');\n messagesDiv.innerHTML = '';\n \n \/\/ Display welcome message if provided\n if (welcomeMessage) {\n \/\/ Parse response for buttons in [BUTTONS:...] format\n const parsed = parseResponse(welcomeMessage);\n addMessage(parsed.text, 'bot');\n \n \/\/ Display buttons if found in text OR if provided in options array\n if (parsed.buttons && parsed.buttons.length > 0) {\n console.log('Displaying parsed buttons from welcome:', parsed.buttons);\n displayOptions(parsed.buttons);\n } else if (options && Array.isArray(options) && options.length > 0) {\n console.log('Displaying welcome options:', options);\n displayOptions(options);\n }\n }\n \n document.getElementById('chat-input').focus();\n}\n\n\/\/ Display options as buttons from web response\nfunction displayOptions(options) {\n console.log('=== displayOptions called ===');\n console.log('Options received:', options);\n console.log('Options type:', typeof options);\n console.log('Is array:', Array.isArray(options));\n \n const optionsContainer = document.getElementById('options-container');\n \n if (!optionsContainer) {\n console.error('Options container not found!');\n return;\n }\n \n \/\/ Clear any existing buttons\n optionsContainer.innerHTML = '';\n \n if (!options || !Array.isArray(options) || options.length === 0) {\n console.log('No valid options - hiding container');\n optionsContainer.style.display = 'none';\n return;\n }\n \n console.log('Creating', options.length, 'buttons');\n \n \/\/ Create buttons first\n const buttons = [];\n options.forEach((option, index) => {\n console.log(`Creating button ${index}:`, option);\n const btn = document.createElement('button');\n btn.textContent = option;\n btn.onclick = () => {\n console.log('Button clicked:', option);\n document.getElementById('chat-input').value = option;\n sendMessage();\n };\n btn.style.padding = '12px 24px';\n btn.style.background = '#ED6B06';\n btn.style.color = 'white';\n btn.style.border = '2px solid #ED6B06';\n btn.style.borderRadius = '8px';\n btn.style.cursor = 'pointer';\n btn.style.fontSize = '16px';\n btn.style.fontWeight = 'bold';\n btn.style.fontFamily = \"'Poppins', sans-serif\";\n btn.style.transition = 'all 0.2s';\n \n btn.onmouseover = function() {\n this.style.background = '#d45f05';\n this.style.borderColor = '#d45f05';\n };\n btn.onmouseout = function() {\n this.style.background = '#ED6B06';\n this.style.borderColor = '#ED6B06';\n };\n \n buttons.push(btn);\n });\n \n \/\/ Now add all buttons and show container\n buttons.forEach(btn => optionsContainer.appendChild(btn));\n optionsContainer.style.display = 'flex';\n \n console.log('Buttons added. Container display:', optionsContainer.style.display);\n console.log('Container children count:', optionsContainer.children.length);\n}\n\n\/\/ Parse buttons from AI response\n\/\/ Expected format: [BUTTONS:option1|option2|option3]\nfunction parseResponse(text) {\n const buttonRegex = \/\\[BUTTONS:(.*?)\\]\/;\n const match = text.match(buttonRegex);\n \n if (match) {\n const buttons = match[1].split('|').map(b => b.trim());\n const cleanText = text.replace(buttonRegex, '').trim();\n return { text: cleanText, buttons };\n }\n \n return { text, buttons: null };\n}\n\nasync function sendMessage() {\n const input = document.getElementById('chat-input');\n const message = input.value.trim();\n \n console.log('=== sendMessage called ===');\n console.log('Message:', message);\n \n if (!message) {\n console.log('Empty message, returning');\n return;\n }\n \n \/\/ Add user message\n console.log('Adding user message to chat');\n addMessage(message, 'user');\n input.value = '';\n \n \/\/ Hide options when user sends a message\n document.getElementById('options-container').style.display = 'none';\n \n const typingId = addMessage('Typing...', 'typing');\n \n try {\n console.log('Sending request to webhook...');\n const response = await fetch(webhookUrl, {\n method: 'POST',\n headers: {'Content-Type': 'application\/json'},\n body: JSON.stringify({\n message: message,\n sessionId: sessionId,\n username: currentUsername\n })\n });\n \n let data = await response.json();\n console.log('=== Raw bot response ===');\n console.log(data);\n \n \/\/ Handle if response is an array, take first element\n if (Array.isArray(data) && data.length > 0) {\n data = data[0];\n console.log('=== Unwrapped data ===');\n console.log(data);\n }\n \n document.getElementById(typingId).remove();\n \n \/\/ Try multiple possible field names for the message\n const botMessage = data.output || data.response || data.message || data.messageHtml || 'No response';\n console.log('Bot message:', botMessage);\n \n \/\/ Parse response for buttons in [BUTTONS:...] format\n const parsed = parseResponse(botMessage);\n console.log('Parsed text:', parsed.text);\n console.log('Parsed buttons:', parsed.buttons);\n \n addMessage(parsed.text, 'bot');\n \n \/\/ Display buttons if found in text OR if provided in options array\n console.log('=== Checking for options ===');\n console.log('parsed.buttons:', parsed.buttons);\n console.log('data.options:', data.options);\n console.log('data:', JSON.stringify(data, null, 2));\n \n if (parsed.buttons && parsed.buttons.length > 0) {\n console.log('Displaying parsed buttons from message');\n displayOptions(parsed.buttons);\n } else if (data.options) {\n console.log('data.options exists, checking if array...');\n console.log('Is array?', Array.isArray(data.options));\n console.log('Length:', data.options.length);\n if (Array.isArray(data.options) && data.options.length > 0) {\n console.log('Displaying options from data.options');\n displayOptions(data.options);\n } else {\n console.log('data.options is not a valid array or is empty');\n }\n } else {\n console.log('No options found in response');\n console.log('Full data object keys:', Object.keys(data));\n }\n } catch (error) {\n console.error('=== Error in sendMessage ===');\n console.error(error);\n document.getElementById(typingId).remove();\n addMessage('Error: Could not connect to chat service', 'error');\n }\n}\n\nfunction addMessage(text, sender) {\n console.log('=== addMessage called ===');\n console.log('Text:', text);\n console.log('Sender:', sender);\n \n const messagesDiv = document.getElementById('chat-messages');\n \n if (messagesDiv.children.length === 1 && messagesDiv.children[0].textContent.includes('Start a conversation')) {\n messagesDiv.innerHTML = '';\n }\n \n const msgDiv = document.createElement('div');\n const msgId = 'msg_' + Date.now() + '_' + Math.random();\n msgDiv.id = msgId;\n msgDiv.style.marginBottom = '15px';\n msgDiv.style.padding = '12px 15px';\n msgDiv.style.borderRadius = '8px';\n msgDiv.style.maxWidth = '80%';\n msgDiv.style.wordWrap = 'break-word';\n msgDiv.style.clear = 'both';\n \n if (sender === 'user') {\n msgDiv.style.background = '#ED6B06';\n msgDiv.style.color = 'white';\n msgDiv.style.marginLeft = 'auto';\n msgDiv.style.marginRight = '0';\n msgDiv.style.textAlign = 'right';\n msgDiv.style.float = 'right';\n msgDiv.textContent = text;\n } else if (sender === 'typing') {\n msgDiv.style.background = '#f0f0f0';\n msgDiv.style.color = '#666';\n msgDiv.style.fontStyle = 'italic';\n msgDiv.style.float = 'left';\n msgDiv.textContent = text;\n } else if (sender === 'error') {\n msgDiv.style.background = '#ffebee';\n msgDiv.style.color = '#c62828';\n msgDiv.style.float = 'left';\n msgDiv.textContent = text;\n } else {\n msgDiv.style.background = '#fff';\n msgDiv.style.color = '#333';\n msgDiv.style.border = '1px solid #e0e0e0';\n msgDiv.style.float = 'left';\n \n \/\/ Check if text already contains HTML (like <br> tags)\n if (text.includes('<br>') || text.includes('<strong>')) {\n msgDiv.innerHTML = text;\n } else {\n msgDiv.innerHTML = markdownToHtml(text);\n }\n }\n \n messagesDiv.appendChild(msgDiv);\n \n \/\/ Add a clearing div after each message\n const clearDiv = document.createElement('div');\n clearDiv.style.clear = 'both';\n messagesDiv.appendChild(clearDiv);\n \n messagesDiv.scrollTop = messagesDiv.scrollHeight;\n \n console.log('Message added with ID:', msgId);\n return msgId;\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n console.log('=== DOM Loaded ===');\n \n const container = document.getElementById('n8n-chat-container');\n const handle = document.getElementById('resize-handle');\n \n handle.addEventListener('mousedown', function(e) {\n isResizing = true;\n startX = e.clientX;\n startY = e.clientY;\n startWidth = parseInt(document.defaultView.getComputedStyle(container).width, 10);\n startHeight = parseInt(document.defaultView.getComputedStyle(container).height, 10);\n e.preventDefault();\n });\n \n document.addEventListener('mousemove', function(e) {\n if (!isResizing) return;\n const width = startWidth + (e.clientX - startX);\n const height = startHeight + (e.clientY - startY);\n container.style.width = Math.max(400, width) + 'px';\n container.style.height = Math.max(400, height) + 'px';\n });\n \n document.addEventListener('mouseup', function() {\n isResizing = false;\n });\n \n const chatInput = document.getElementById('chat-input');\n if (chatInput) {\n chatInput.addEventListener('keypress', function(e) {\n if (e.key === 'Enter') {\n sendMessage();\n }\n });\n }\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>AI Assistant Chat AI Assistant Welcome! Please choose an option: Sign Up Sign In Start a conversation… Send<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"set","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":""}},"footnotes":""},"class_list":["post-5951","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/comments?post=5951"}],"version-history":[{"count":10,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5951\/revisions"}],"predecessor-version":[{"id":6035,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5951\/revisions\/6035"}],"wp:attachment":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/media?parent=5951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}