{"id":5989,"date":"2025-12-12T10:39:04","date_gmt":"2025-12-12T10:39:04","guid":{"rendered":"https:\/\/access4all.uk\/?page_id=5989"},"modified":"2025-12-17T15:50:50","modified_gmt":"2025-12-17T15:50:50","slug":"testing-page","status":"publish","type":"page","link":"https:\/\/access4all.uk\/index.php\/testing-page\/","title":{"rendered":"Testing page"},"content":{"rendered":"\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@600&#038;display=swap\" rel=\"stylesheet\">\n\n<div id=\"n8n-chat-container\" style=\"max-width: 800px; 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;\">\n  \n  <!-- Chat Header -->\n  <div style=\"padding: 20px; background: #ED6B06; color: white;\">\n    <h3 style=\"margin: 0; font-size: 20px;\">AI Assistant<\/h3>\n  <\/div>\n  \n  <!-- Chat Messages Area -->\n  <div id=\"chat-messages\" style=\"height: 500px; overflow-y: auto; padding: 20px; background: #F4F0ED;\">\n    <div style=\"text-align: center; color: #999; padding: 20px;\">\n      Start a conversation&#8230;\n    <\/div>\n  <\/div>\n  \n  <!-- Input Area -->\n  <div id=\"input-area\" style=\"padding: 15px; background: white; border-top: 1px solid #ddd; display: flex; gap: 10px;\">\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: 16px;\"\n    >\n    <button \n      onclick=\"sendMessage()\" \n      style=\"padding: 12px 30px; background: #ED6B06; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;\"\n    >\n      Send\n    <\/button>\n  <\/div>\n<\/div>\n\n<script>\nconst webhookUrl = 'https:\/\/n8n.srv1160565.hstgr.cloud\/webhook-test\/383b4870-52b2-4e11-9f51-aa21a37755ea';\nconst sessionId = 'session_' + Date.now();\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, '&amp;')\n    .replace(\/<\/g, '&lt;')\n    .replace(\/>\/g, '&gt;')\n    .replace(\/\"\/g, '&quot;')\n    .replace(\/'\/g, '&#039;');\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 &lt; and &gt;)\n    .replace(\/&lt;u&gt;([^&]+)&lt;\\\/u&gt;\/g, '<u>$1<\/u>')\n    \/\/ Line breaks\n    .replace(\/\\n\/g, '<br>');\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(messageText) {\n  const input = document.getElementById('chat-input');\n  const message = messageText || input.value.trim();\n  if (!message) return;\n  \n  addMessage(message, 'user');\n  input.value = '';\n  \n  const typingId = addMessage('Typing...', 'typing');\n  \n  try {\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      })\n    });\n    \n    const data = await response.json();\n    document.getElementById(typingId).remove();\n    \n    \/\/ Parse response for buttons\n    const parsed = parseResponse(data.output || data.response || data.message || 'No response');\n    addMessage(parsed.text, 'bot', parsed.buttons);\n    \n  } catch (error) {\n    document.getElementById(typingId).remove();\n    addMessage('Error: Could not connect to chat service', 'error');\n    console.error(error);\n  }\n}\n\nfunction handleButtonClick(buttonText) {\n  sendMessage(buttonText);\n}\n\nfunction addMessage(text, sender, buttons) {\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  \n  const bubbleDiv = document.createElement('div');\n  bubbleDiv.style.padding = '15px 20px';\n  bubbleDiv.style.borderRadius = '12px';\n  bubbleDiv.style.maxWidth = '80%';\n  bubbleDiv.style.wordWrap = 'break-word';\n  bubbleDiv.style.fontSize = '16px';\n  bubbleDiv.style.lineHeight = '1.5';\n  \n  if (sender === 'user') {\n    bubbleDiv.style.background = '#ED6B06';\n    bubbleDiv.style.color = 'white';\n    bubbleDiv.style.marginLeft = 'auto';\n    bubbleDiv.style.textAlign = 'right';\n    bubbleDiv.textContent = text;\n    msgDiv.style.display = 'flex';\n    msgDiv.style.justifyContent = 'flex-end';\n  } else if (sender === 'typing') {\n    bubbleDiv.style.background = '#f0f0f0';\n    bubbleDiv.style.color = '#666';\n    bubbleDiv.style.fontStyle = 'italic';\n    bubbleDiv.textContent = text;\n  } else if (sender === 'error') {\n    bubbleDiv.style.background = '#ffebee';\n    bubbleDiv.style.color = '#c62828';\n    bubbleDiv.textContent = text;\n  } else {\n    bubbleDiv.style.background = '#fff';\n    bubbleDiv.style.color = '#333';\n    bubbleDiv.style.border = '1px solid #e0e0e0';\n    bubbleDiv.innerHTML = markdownToHtml(text);\n  }\n  \n  msgDiv.appendChild(bubbleDiv);\n  \n  \/\/ Add buttons if present\n  if (sender === 'bot' && buttons && buttons.length > 0) {\n    const buttonContainer = document.createElement('div');\n    buttonContainer.style.display = 'flex';\n    buttonContainer.style.flexWrap = 'wrap';\n    buttonContainer.style.gap = '10px';\n    buttonContainer.style.marginTop = '10px';\n    buttonContainer.style.maxWidth = '80%';\n    \n    buttons.forEach(buttonText => {\n      const btn = document.createElement('button');\n      btn.textContent = buttonText;\n      btn.onclick = () => handleButtonClick(buttonText);\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 = () => {\n        btn.style.background = '#d45f05';\n        btn.style.borderColor = '#d45f05';\n      };\n      \n      btn.onmouseout = () => {\n        btn.style.background = '#ED6B06';\n        btn.style.borderColor = '#ED6B06';\n      };\n      \n      buttonContainer.appendChild(btn);\n    });\n    \n    msgDiv.appendChild(buttonContainer);\n  }\n  \n  messagesDiv.appendChild(msgDiv);\n  messagesDiv.scrollTop = messagesDiv.scrollHeight;\n  \n  return msgId;\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\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    chatInput.focus();\n  }\n});\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI Assistant Start a conversation&#8230; 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":"","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-5989","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5989","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=5989"}],"version-history":[{"count":7,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5989\/revisions"}],"predecessor-version":[{"id":6007,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5989\/revisions\/6007"}],"wp:attachment":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/media?parent=5989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}