Performance Technologies Chatbot<\/title>\n <style>\n body { font-family: Arial, sans-serif; background: #f7f9fb; }\n #chat-wrapper {\n max-width: 600px;\n width: 96vw;\n min-width: 250px;\n margin: 40px auto;\n border-radius: 12px;\n box-shadow: 0 4px 18px #b0bbcd2f;\n background: #fff;\n border: 1px solid #e4e9f0;\n }\n #chat-header { background: #2a417c; color: #fff; font-size: 20px; text-align: center; padding: 15px 0; border-radius: 12px 12px 0 0;}\n #chatbox {\n width: 100%;\n height: 340px;\n overflow-y: auto;\n border: none;\n padding: 16px;\n font-size: 16px;\n background: #f9fbfe;\n }\n .chat-msg { margin-bottom: 12px; }\n .user { color: #095ca6; font-weight: bold; }\n .bot { color: #222; }\n .bot-greeting { color: #3d7e2b; font-style: italic; }\n #input-area { display: flex; border-top: 1px solid #e4e9f0; background: #f4f7fb; padding: 12px; }\n #input { flex: 1; font-size: 16px; padding: 8px 10px; border-radius: 5px; border: 1px solid #d4d8e3;}\n #send { width: 85px; margin-left: 7px; background: #2a417c; color: #fff; border: none; font-size: 16px; border-radius: 5px; cursor: pointer; }\n #send:disabled { background: #8fa2cc; }\n @media (max-width: 700px) {\n #chat-wrapper {\n max-width: 98vw;\n width: 98vw;\n margin: 15px auto;\n }\n #chatbox {\n font-size: 15px;\n padding: 6px;\n height: 260px;\n }\n #chat-header {\n font-size: 17px;\n padding: 10px 0;\n }\n #input-area {\n flex-direction: column;\n padding: 8px;\n }\n #input, #send { width: 100%; font-size: 15px; margin: 4px 0; }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"chat-wrapper\">\n <div id=\"chat-header\">Performance Technologies Chatbot<\/div>\n <div id=\"chatbox\"><\/div>\n <div id=\"input-area\">\n <input id=\"input\" type=\"text\" autocomplete=\"off\" placeholder=\"Type your question...\"\/>\n <button id=\"send\">Send<\/button>\n <\/div>\n <\/div>\n <script>\n let session_id = null;\n const chatbox = document.getElementById(\"chatbox\");\n const input = document.getElementById(\"input\");\n const sendBtn = document.getElementById(\"send\");\n\n function scrollChat() {\n chatbox.scrollTop = chatbox.scrollHeight;\n }\n\n function formatBotMsg(msg) {\n let blocks = msg.split(\/\\n-{3,}\\n\/);\n let html = \"\";\n for (let block of blocks) {\n if (block.includes(\"|\") && block.includes(\"---\")) {\n const lines = block.split('\\n').filter(l=>l.trim());\n let table = \"<table style='border-collapse:collapse;border:1px solid #d2dbe7;margin:8px 0;'>\";\n let isHeader = true;\n for (let line of lines) {\n if (line.startsWith(\"|\")) {\n const cells = line.split(\"|\").slice(1,-1);\n table += \"<tr>\";\n for (let cell of cells) {\n table += isHeader ? `<th style='border:1px solid #c5d0e6;padding:5px 10px;background:#f7fafb;'>${cell.trim()}<\/th>`\n : `<td style='border:1px solid #d2dbe7;padding:5px 10px;'>${cell.trim()}<\/td>`;\n }\n table += \"<\/tr>\";\n isHeader = false;\n }\n }\n table += \"<\/table>\";\n html += table;\n } else {\n html += block.replace(\/\\n\/g, \"<br>\");\n }\n }\n return html;\n }\n\n function append(role, msg, extraClass=\"\") {\n let htmlMsg = role === 'Bot' ? formatBotMsg(msg) : msg.replace(\/\\n\/g, \"<br>\");\n chatbox.innerHTML += `<div class=\"chat-msg ${role==='Bot'?'bot':'user'} ${extraClass}\"><b>${role === 'Bot' ? 'Bot' : 'You'}:<\/b> ${htmlMsg}<\/div>`;\n scrollChat();\n }\n\n function startChatSession() {\n session_id = null;\n chatbox.innerHTML = '';\n append(\"Bot\", \"\ud83d\udc4b Welcome! I am your digital assistant. I will try to answer any question relating to our offerings and published information about our company.\", \"bot-greeting\");\n scrollChat();\n }\n startChatSession();\n\n function sendMsg() {\n let q = input.value.trim();\n if (!q) return;\n append(\"You\", q);\n input.value = \"\";\n sendBtn.disabled = true;\n fetch(\"https:\/\/chatbot.performance.gr\/api\/ask\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({ question: q, session_id: session_id })\n })\n .then(response => {\n return response.json().catch(()=>({answer: \"[Bot: Invalid JSON reply]\", session_id}));\n })\n .then(data => {\n session_id = data.session_id;\n append(\"Bot\", data.answer);\n sendBtn.disabled = false;\n })\n .catch(e => {\n append(\"Bot\", \"[Bot: Network error, please try again]\");\n sendBtn.disabled = false;\n });\n }\n sendBtn.onclick = sendMsg;\n input.onkeyup = function(e) {\n if (e.key === \"Enter\" && !sendBtn.disabled) sendMsg();\n };\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Performance Technologies Chatbot Performance Technologies Chatbot Send<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":1,"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":82,"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/pages\/81\/revisions\/82"}],"wp:attachment":[{"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":81,"date":"2025-08-23T03:24:26","date_gmt":"2025-08-23T00:24:26","guid":{"rendered":"https:\/\/www.performance.com.cy\/?page_id=81"},"modified":"2025-08-23T03:24:28","modified_gmt":"2025-08-23T00:24:28","slug":"pt-chatbot","status":"publish","type":"page","link":"https:\/\/www.performance.com.cy\/index.php\/pt-chatbot\/","title":{"rendered":"PT chatbot"},"content":{"rendered":"\n\n\n\n \n Performance Technologies Chatbot<\/title>\n <style>\n body { font-family: Arial, sans-serif; background: #f7f9fb; }\n #chat-wrapper {\n max-width: 600px;\n width: 96vw;\n min-width: 250px;\n margin: 40px auto;\n border-radius: 12px;\n box-shadow: 0 4px 18px #b0bbcd2f;\n background: #fff;\n border: 1px solid #e4e9f0;\n }\n #chat-header { background: #2a417c; color: #fff; font-size: 20px; text-align: center; padding: 15px 0; border-radius: 12px 12px 0 0;}\n #chatbox {\n width: 100%;\n height: 340px;\n overflow-y: auto;\n border: none;\n padding: 16px;\n font-size: 16px;\n background: #f9fbfe;\n }\n .chat-msg { margin-bottom: 12px; }\n .user { color: #095ca6; font-weight: bold; }\n .bot { color: #222; }\n .bot-greeting { color: #3d7e2b; font-style: italic; }\n #input-area { display: flex; border-top: 1px solid #e4e9f0; background: #f4f7fb; padding: 12px; }\n #input { flex: 1; font-size: 16px; padding: 8px 10px; border-radius: 5px; border: 1px solid #d4d8e3;}\n #send { width: 85px; margin-left: 7px; background: #2a417c; color: #fff; border: none; font-size: 16px; border-radius: 5px; cursor: pointer; }\n #send:disabled { background: #8fa2cc; }\n @media (max-width: 700px) {\n #chat-wrapper {\n max-width: 98vw;\n width: 98vw;\n margin: 15px auto;\n }\n #chatbox {\n font-size: 15px;\n padding: 6px;\n height: 260px;\n }\n #chat-header {\n font-size: 17px;\n padding: 10px 0;\n }\n #input-area {\n flex-direction: column;\n padding: 8px;\n }\n #input, #send { width: 100%; font-size: 15px; margin: 4px 0; }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"chat-wrapper\">\n <div id=\"chat-header\">Performance Technologies Chatbot<\/div>\n <div id=\"chatbox\"><\/div>\n <div id=\"input-area\">\n <input id=\"input\" type=\"text\" autocomplete=\"off\" placeholder=\"Type your question...\"\/>\n <button id=\"send\">Send<\/button>\n <\/div>\n <\/div>\n <script>\n let session_id = null;\n const chatbox = document.getElementById(\"chatbox\");\n const input = document.getElementById(\"input\");\n const sendBtn = document.getElementById(\"send\");\n\n function scrollChat() {\n chatbox.scrollTop = chatbox.scrollHeight;\n }\n\n function formatBotMsg(msg) {\n let blocks = msg.split(\/\\n-{3,}\\n\/);\n let html = \"\";\n for (let block of blocks) {\n if (block.includes(\"|\") && block.includes(\"---\")) {\n const lines = block.split('\\n').filter(l=>l.trim());\n let table = \"<table style='border-collapse:collapse;border:1px solid #d2dbe7;margin:8px 0;'>\";\n let isHeader = true;\n for (let line of lines) {\n if (line.startsWith(\"|\")) {\n const cells = line.split(\"|\").slice(1,-1);\n table += \"<tr>\";\n for (let cell of cells) {\n table += isHeader ? `<th style='border:1px solid #c5d0e6;padding:5px 10px;background:#f7fafb;'>${cell.trim()}<\/th>`\n : `<td style='border:1px solid #d2dbe7;padding:5px 10px;'>${cell.trim()}<\/td>`;\n }\n table += \"<\/tr>\";\n isHeader = false;\n }\n }\n table += \"<\/table>\";\n html += table;\n } else {\n html += block.replace(\/\\n\/g, \"<br>\");\n }\n }\n return html;\n }\n\n function append(role, msg, extraClass=\"\") {\n let htmlMsg = role === 'Bot' ? formatBotMsg(msg) : msg.replace(\/\\n\/g, \"<br>\");\n chatbox.innerHTML += `<div class=\"chat-msg ${role==='Bot'?'bot':'user'} ${extraClass}\"><b>${role === 'Bot' ? 'Bot' : 'You'}:<\/b> ${htmlMsg}<\/div>`;\n scrollChat();\n }\n\n function startChatSession() {\n session_id = null;\n chatbox.innerHTML = '';\n append(\"Bot\", \"\ud83d\udc4b Welcome! I am your digital assistant. I will try to answer any question relating to our offerings and published information about our company.\", \"bot-greeting\");\n scrollChat();\n }\n startChatSession();\n\n function sendMsg() {\n let q = input.value.trim();\n if (!q) return;\n append(\"You\", q);\n input.value = \"\";\n sendBtn.disabled = true;\n fetch(\"https:\/\/chatbot.performance.gr\/api\/ask\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify({ question: q, session_id: session_id })\n })\n .then(response => {\n return response.json().catch(()=>({answer: \"[Bot: Invalid JSON reply]\", session_id}));\n })\n .then(data => {\n session_id = data.session_id;\n append(\"Bot\", data.answer);\n sendBtn.disabled = false;\n })\n .catch(e => {\n append(\"Bot\", \"[Bot: Network error, please try again]\");\n sendBtn.disabled = false;\n });\n }\n sendBtn.onclick = sendMsg;\n input.onkeyup = function(e) {\n if (e.key === \"Enter\" && !sendBtn.disabled) sendMsg();\n };\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Performance Technologies Chatbot Performance Technologies Chatbot Send<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":1,"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":82,"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/pages\/81\/revisions\/82"}],"wp:attachment":[{"href":"https:\/\/www.performance.com.cy\/index.php\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}