{"id":16686,"date":"2025-07-16T15:17:12","date_gmt":"2025-07-16T08:17:12","guid":{"rendered":"https:\/\/belaws.com\/thailand\/?page_id=16686"},"modified":"2025-07-16T15:22:03","modified_gmt":"2025-07-16T08:22:03","slug":"lawyer-assistante","status":"publish","type":"page","link":"https:\/\/belaws.com\/thailand\/lawyer-assistante\/","title":{"rendered":"Lawyer Assistante"},"content":{"rendered":"<style>\n    .chat-container {\n      width: 100%;\n      height: 70vh;\n      background: #ffffff;\n      border-radius: 16px;\n      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n    .chat-header {\n      display: flex;\n      align-items: center;\n      padding: 16px 20px;\n      background: #1A1B2C;\n      color: #ffffff;\n    }\n    .chat-header img {\n      height: 32px;\n      margin-right: 12px;\n      object-fit: contain;\n    }\n    .chat-header-info h2 {\n      font-size: 16px;\n      font-weight: 600;\ncolor:#fff;\n    }\n    .chat-messages {\n      flex: 1;\n      padding: 20px;\n      overflow-y: auto;\n      background: #f7fafd;\n    }\n    .message {\n      margin-bottom: 16px;\n      max-width: 80%;\n      clear: both;\n    }\n    .message-content {\n      padding: 12px 18px;\n      border-radius: 20px;\n      font-size: 14px;\n      line-height: 1.5;\n    }\n    .user-message { float: right; }<\/p>\n<p>    .user-message .message-content {\n      background: #2986cc; \/* Sophisticated dark tone for luxury branding *\/\n      color: #ffffff;\n      border-radius: 20px; \/* Fully rounded for pill shape *\/\n      padding: 12px 18px;\n      font-weight: 500;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.08); \/* Subtle elevation *\/\n      transition: background 0.3s ease;\n    }<\/p>\n<p>    .bot-message { float: left; }\n    .bot-message .message-content {\n      background: #e2ebf6;\n      color: #222;\n      border-bottom-left-radius: 6px;\n    }\n    .chat-input {\n      display: flex;\n      align-items: center;\n      padding: 14px;\n      background: #ffffff;\n      border-top: 1px solid #d9e2ec;\n    }\n    .chat-input input {\n      flex: 1;\n      height: 44px;\n      border: 1px solid #cbd5e0;\n      border-radius: 22px;\n      padding: 0 16px;\n      font-size: 14px;\n      outline: none;\n    }\n    .chat-input input:focus {\n      border-color: #3c78d8;\n    }\n    .send-button {\n      width: 44px;\n      height: 44px;\n      background: #2986cc;\n      border: none;\n      border-radius: 22px;\n      margin-left: 10px;\n      color: white;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      cursor: pointer;\n    }\n    .send-button:hover {\n      background: #285fa8;\n    }\n    .welcome-message {\n      text-align: center;\n      padding: 30px 20px;\n    }\n    .welcome-message h2 {\n      margin-bottom: 10px;\n      color: #2d3748;\n    }\n    .welcome-message p {\n      color: #718096;\n      margin-bottom: 20px;\n    }\n    .start-button {\n      background: #2986cc;\n      color: white;\n      border: none;\n      padding: 10px 24px;\n      border-radius: 20px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n    }\n    .start-button:hover {\n      background: #2f64b0;\n    }\n    .error-message {\n      background-color: #ffe5e5;\n      color: #d32f2f;\n      padding: 10px;\n      border-radius: 8px;\n      margin: 10px 0;\n      font-size: 14px;\n      text-align: center;\n    }\n    .message:after { content: \"\"; display: table; clear: both; }<\/p>\n<p>    .typing-indicator .message-content::after {\n      content: '';\n      display: inline-block;\n      width: 3px;                \/* smaller dots *\/\n      height: 3px;               \/* smaller dots *\/\n      margin-left: 4px;          \/* closer to the text *\/\n      background-color: #1A1B2C;\n      border-radius: 50%;\n      box-shadow: 5px 0 0 #3c78d8, 10px 0 0 #3c78d8;\n      animation: dot-flash 1.4s infinite steps(1, start);\n      transform: translateY(1px); \/* subtle vertical align *\/\n    }<\/p>\n<p>    @keyframes dot-flash {\n      0%   { box-shadow: 5px 0 0 #3c78d8, 10px 0 0 #3c78d8; }\n      33%  { box-shadow: 0 0 0 #3c78d8, 10px 0 0 #3c78d8; }\n      66%  { box-shadow: 0 0 0 #3c78d8, 5px 0 0 #3c78d8; }\n      100% { box-shadow: 5px 0 0 #3c78d8, 10px 0 0 #3c78d8; }\n    }\n  <\/style>\n<div class=\"chat-container\">\n<div class=\"chat-header\">\n      <img decoding=\"async\" src=\"https:\/\/belaws.com\/wp-content\/uploads\/2024\/03\/logo_B_png-1.png\" alt=\"Belaws\" title=\"Legal Services Thailand\"><\/p>\n<div class=\"chat-header-info\">\n<h2>Internal Assistant<\/h2>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"chat-messages\" id=\"chatMessages\">\n<div class=\"welcome-message\">\n<h2>Welcome<\/h2>\n<p>Click below to start the chat<\/p>\n<p>        <button class=\"start-button\" id=\"startChat\">Ask your question<\/button>\n      <\/div>\n<\/p><\/div>\n<div class=\"chat-input\">\n      <input type=\"text\" id=\"messageInput\" placeholder=\"...\" disabled \/><br \/>\n      <button class=\"send-button\" id=\"sendButton\" disabled><br \/>\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M22 2L11 13M22 2L15 22l-4-9-9-4 20-7z\"><\/path>\n        <\/svg><br \/>\n      <\/button>\n    <\/div>\n<\/p><\/div>\n<p>  <script>\n    document.addEventListener('DOMContentLoaded', function () {\n      const chatMessages = document.getElementById('chatMessages');\n      const messageInput = document.getElementById('messageInput');\n      const sendButton = document.getElementById('sendButton');\n      const startChatButton = document.getElementById('startChat');<\/p>\n<p>      const webhookUrl = 'https:\/\/n8n.lexnova.dev\/webhook\/e9fe1084-be95-4cd3-b767-7344efa62eb9\/chat';<\/p>\n<p>      let sessionId = localStorage.getItem('sessionId');\n      if (!sessionId) {\n        sessionId = 'sid_' + Date.now();\n        localStorage.setItem('sessionId', sessionId);\n      }<\/p>\n<p>      let chatState = {\n        lastBotStep: null,\n      };<\/p>\n<p>      startChatButton.addEventListener('click', startChat);\n      sendButton.addEventListener('click', sendMessage);\n      messageInput.addEventListener('keypress', function (e) {\n        if (e.key === 'Enter') sendMessage();\n      });<\/p>\n<p>      function startChat() {\n        const welcome = document.querySelector('.welcome-message');\n        if (welcome) welcome.remove();<\/p>\n<p>        messageInput.disabled = false;\n        sendButton.disabled = false;\n        messageInput.focus();\n        addMessage(\"Hello, how can I help you?\", \"bot\");\n      }<\/p>\n<p>      function sendMessage() {\n        const message = messageInput.value.trim();\n        if (!message) return;<\/p>\n<p>        addMessage(message, \"user\");\n        messageInput.value = \"\";<\/p>\n<p>        const typing = document.createElement('div');\n        typing.className = 'message bot-message typing-indicator';\n        typing.innerHTML = '<\/p>\n<div class=\"message-content\">Please wait<\/div>\n<p>';\n        chatMessages.appendChild(typing);\n        chatMessages.scrollTop = chatMessages.scrollHeight;<\/p>\n<p>        fetch(webhookUrl, {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application\/json\" },\n          body: JSON.stringify({\n            message: message,\n            sessionId: sessionId,\n            context: chatState\n          })\n        })\n        .then(res => res.json())\n        .then(data => {\n          typing.remove();\n          let reply = \"\";<\/p>\n<p>          try {\n            \/\/ Case 1: String response that might be JSON\n            if (typeof data === \"string\" && data.trim().startsWith(\"{\")) {\n              const parsed = JSON.parse(data);\n              reply = parsed?.response || parsed?.message || \"\";\n            }\n            \/\/ Case 2: Plain string\n            else if (typeof data === \"string\") {\n              reply = data;\n            }\n            \/\/ Case 3: Already an object\n            else if (typeof data === \"object\") {\n              reply = data?.response || data?.message || \"\";\n            }<\/p>\n<p>            \/\/ Ensure we strip accidental object strings like: { \"filter\": ..., \"response\": ... }\n            if (reply.includes('\"filter\"') && reply.includes('\"response\"')) {\n              const parsed = JSON.parse(reply);\n              reply = parsed.response || \"\";\n            }<\/p>\n<p>            \/\/ Clean formatting (newline \u2192 <br \/>)\n            reply = String(reply)\n              .replace(\/\\\\\"\/g, '\"')\n              .replace(\/\\\\n\/g, \"<br \/>\")\n              .replace(\/\\n\/g, \"<br \/>\")\n              .trim();<\/p>\n<p>          } catch (err) {\n            console.error(\"Erreur parsing:\", err);\n            reply = \"Une erreur s'est produite. Veuillez r\u00e9essayer.\";\n          }<\/p>\n<p>          addMessage(reply, \"bot\");\n        })\n        .catch(err => {\n          typing.remove();\n          console.error(\"Erreur API:\", err);\n          addMessage(\"Une erreur s'est produite. Veuillez r\u00e9essayer plus tard.\", \"bot\");\n        });\n      }<\/p>\n<p>      function addMessage(text, sender) {\n        const msg = document.createElement('div');\n        msg.className = `message ${sender}-message`;\n        const content = document.createElement('div');\n        content.className = 'message-content';\n        content.innerHTML = text;\n        msg.appendChild(content);\n        chatMessages.appendChild(msg);\n        chatMessages.scrollTop =         chatMessages.scrollHeight;<\/p>\n<p>      }\n    });\n  <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Internal Assistant Welcome Click below to start the chat Ask your question<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-16686","page","type-page","status-publish","hentry"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"tf-client-image-size":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false,"widget":false,"square":false,"featured":false,"featured_large":false,"extra_large":false,"portfolio":false,"portfolio_small":false,"gallery":false,"magazine":false,"masonry":false,"entry_with_sidebar":false,"entry_without_sidebar":false},"uagb_author_info":{"display_name":"shiftcode","author_link":"https:\/\/belaws.com\/thailand\/author\/shiftcode\/"},"uagb_comment_info":0,"uagb_excerpt":"Internal Assistant Welcome Click below to start the chat Ask your question","_links":{"self":[{"href":"https:\/\/belaws.com\/thailand\/wp-json\/wp\/v2\/pages\/16686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/belaws.com\/thailand\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/belaws.com\/thailand\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/belaws.com\/thailand\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/belaws.com\/thailand\/wp-json\/wp\/v2\/comments?post=16686"}],"version-history":[{"count":0,"href":"https:\/\/belaws.com\/thailand\/wp-json\/wp\/v2\/pages\/16686\/revisions"}],"wp:attachment":[{"href":"https:\/\/belaws.com\/thailand\/wp-json\/wp\/v2\/media?parent=16686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}