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