// template to call vani popup // // var vaani_welcome_step, vaani_contact_step, vaani_verify_step, vaani_order_step, vaani_chat_step, vaani_api_url, vaani_shop_id, vaani_window_title, vaani_styling, vaani_instance, vaani_chat_container, vaani_footer_instance, chat_widget_primary_color, vaani_popup, vaani_welcome_footer, vaani_contact_footer, vaani_verify_footer, vaani_chat_footer, vaani_order_footer, otpInputs; function loadVaani(shopId, title, primaryColor) { vaani_api_url = "https://docai.pytr.in/ai/ask"; vaani_shop_id = shopId || "uniflycheck"; vaani_window_title = title || "Documentation | Support Chat"; chat_widget_primary_color = primaryColor || "rgba(31, 41, 55)"; dynamicallyLoadScript("https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.3/purify.min.js"); dynamicallyLoadScript("https://cdn.jsdelivr.net/npm/marked/marked.min.js"); dynamicallyLoadScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"); loadCSSDynamically("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"); vaani_styling = ""; loadVaaniStyling(chat_widget_primary_color); loadCSS(); vaani_instance = loadVaaniBubble(); vaani_popup = loadVaaniPopup(); vaani_overlay = createOverlay(); vaani_instance.addEventListener("click", showOrHideChat); } function createOverlay() { const overlay = document.createElement('div'); overlay.id = 'vaani-overlay'; overlay.style.position = 'fixed'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100%'; overlay.style.height = '100%'; overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; overlay.style.zIndex = '999'; overlay.style.display = 'none'; overlay.style.opacity = '0'; overlay.style.transition = 'opacity 0.3s ease'; document.body.appendChild(overlay); overlay.addEventListener('click', function() { if (!vaani_popup.classList.contains('vaani-hidden')) { showOrHideChat(); } }); return overlay; } function loadCSSDynamically(url) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = url; document.head.appendChild(link); } function showOrHideChat() { document.body.appendChild(vaani_popup); ShowOrHide(vaani_popup); if (!vaani_popup.classList.contains('vaani-hidden')) { vaani_overlay.style.display = 'block'; void vaani_overlay.offsetWidth; vaani_overlay.style.opacity = '1'; vaani_popup.style.zIndex = '1000'; } else { vaani_overlay.style.opacity = '0'; setTimeout(() => { vaani_overlay.style.display = 'none'; }, 300); } vaani_footer_instance = loadVaaniFooter(); vaani_chat_container = document.getElementById("vaani-footer"); if (vaani_chat_container) { const tempDiv = document.createElement('div'); tempDiv.appendChild(vaani_footer_instance) vaani_chat_container.innerHTML = tempDiv.innerHTML; } const chatContent = document.getElementById("vaani-chat-content"); const errorMsg = document.getElementById("error-message"); const errorMsgVerify = document.getElementById("error-message-orders"); const errorMsgOrders = document.getElementById("error-message-verify"); chatContent.style.background = "white"; errorMsg.textContent = ""; errorMsgVerify.textContent = ""; errorMsgOrders.textContent = ""; RegisterEventListeners(); setupHighlightObserver(); } function setupHighlightObserver() { if (window.vaaniHighlightObserver) return; window.vaaniHighlightObserver = new MutationObserver((mutations) => { let shouldHighlight = false; mutations.forEach((mutation) => { if (mutation.addedNodes && mutation.addedNodes.length > 0) { mutation.addedNodes.forEach((node) => { if (node.nodeType === Node.ELEMENT_NODE) { const codeBlocks = node.querySelectorAll('code[class^="language-"]'); if (codeBlocks.length > 0) { shouldHighlight = true; } } }); } }); if (shouldHighlight) { applyHighlightToVaani(); } }); const chatMessages = document.getElementById("chat-messages"); if (chatMessages) { window.vaaniHighlightObserver.observe(chatMessages, { childList: true, subtree: true }); } } const HLJS_VERSION = '11.9.0'; const languageCDN = (lang) => `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${HLJS_VERSION}/languages/${lang}.min.js`; const loadedLanguages = new Set(['javascript']); async function loadLanguage(lang) { if (loadedLanguages.has(lang) || (window.hljs && window.hljs.getLanguage(lang))) { loadedLanguages.add(lang); return; } return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = languageCDN(lang); script.onload = () => { loadedLanguages.add(lang); resolve(); }; script.onerror = () => reject(`Could not load language: ${lang}`); document.head.appendChild(script); }); } async function applyHighlightToVaani() { const container = document.getElementById('vaani-popups'); if (!container || !window.hljs) return; const codeBlocks = container.querySelectorAll('code[class^="language-"]'); for (const block of codeBlocks) { let lang = block.className.replace(/^language-/, '').trim(); if (!lang || lang === '') lang = 'javascript'; try { await loadLanguage(lang); window.hljs.highlightElement(block); } catch (err) { // console.warn(`Failed to highlight code block: ${err}`); try { window.hljs.highlightAuto(block); } catch (e) { // console.warn('Auto-highlighting failed as well'); } } } } function loadVaaniStyling(e) { let t = document.documentElement; t.style.setProperty("--chat-widget-primary-color", e); t.style.setProperty("--chat-widget-text-color", "#333333"); t.style.setProperty("--chat-widget-light-bg", "#f8f9fa"); t.style.setProperty("--chat-widget-border-radius", "12px"); t.style.setProperty("--chat-widget-shadow", "0 8px 30px rgba(0, 0, 0, 0.12)"); t.style.setProperty("--chat-widget-font", "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"); vaani_styling = ` *, *::before, *::after { box-sizing: border-box; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); .vaani-colors { background-color: var(--chat-widget-primary-color); color: white; } .vaani-text { color: var(--chat-widget-text-color); font-family: var(--chat-widget-font); } .vaani-bg { background-color: var(--chat-widget-primary-color); } .vaani-hidden { display: none; } .vaani-chat-container { position: fixed; max-height: 80vh; bottom: 90px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 1024px; background-color: white; border-radius: var(--chat-widget-border-radius); box-shadow: var(--chat-widget-shadow); display: flex; flex-direction: column; transition: all 0.3s; font-size: 0.875rem; z-index: 999; font-family: var(--chat-widget-font); overflow: hidden; } .vaani-chat-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-radius: var(--chat-widget-border-radius) var(--chat-widget-border-radius) 0 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); font-weight: 600; text-align: center; min-height: 60px; transition: box-shadow 0.2s cubic-bezier(0.33, 0, 0.67, 1); z-index: 30; gap: 1rem; } .chat-messages { flex: 1; padding: 1.25rem; overflow-y: auto; background: var(--chat-widget-light-bg); height: calc(80vh - 236px); } .order-list { overflow-y: auto; background: white; height: calc(80vh - 260px); padding: 0.5rem; } .order-list, .vaani-chat-content, .chat-messages { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } .order-list::-webkit-scrollbar, .vaani-chat-content::-webkit-scrollbar, .chat-messages::-webkit-scrollbar { width: 6px; } .order-list::-webkit-scrollbar-track, .vaani-chat-content::-webkit-scrollbar-track, .chat-messages::-webkit-scrollbar-track { background: transparent; } .order-list::-webkit-scrollbar-thumb, .vaani-chat-content::-webkit-scrollbar-thumb, .chat-messages::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 20px; } .vaani-button { margin-top: 1rem; border-radius: 8px; padding: 0.75rem 1.25rem; width: 100%; background-color: var(--chat-widget-primary-color); color: white; cursor: pointer; border: none; font-weight: 500; font-family: var(--chat-widget-font); transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); } .vaani-button:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .vaani-button:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .send-chat-button { border-radius: 8px; background-color: var(--chat-widget-primary-color); color: white; height: 40px; width: 90px !important; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; border: none; } .send-chat-button:hover { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .close-popup { background-color: transparent; color: white; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .close-popup:hover { background-color: rgba(255, 255, 255, 0.1); } .vaani-footer { padding: 0.75rem 1.25rem 1rem; } .input-chat-container { display: flex; gap: 0.75rem; align-items: center; padding-top: 1rem; padding-bottom: 0px; border-top: 1px solid #e5e7eb; } #vaani-widget-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; } #vaani-bubble { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; } #vaani-bubble:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } #vaani-popup, #vaani-pre-container { height: 80vh; min-height: 32vh; max-height: 80vh; overflow: hidden; box-shadow: var(--chat-widget-shadow); border-radius: var(--chat-widget-border-radius); background: white; transform-origin: 100% 100%; clip-path: circle(10px at 83% 8%); -webkit-clip-path: circle(0px at 94% 94%); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: -1; opacity: 0.3; } .vaani-open { -webkit-clip-path: circle(2000px at 94% 94%); opacity: 1; } .vaani-chat-content { flex: 1; overflow-y: hidden; padding: 1.25rem; background: white; } #reply-message, #support-message { display: inline-block; max-width: 100%; margin-bottom: 0.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); border: 0; border-radius: 14px; font-size: 0.95rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; } #reply-message { background: var(--chat-widget-primary-color); color: white; border-bottom-right-radius: 4px; padding: 0.75rem 1rem; max-width: 100% !important; word-break: keep-all; overflow-wrap: break-word; } #support-message { background: white; color: var(--chat-widget-text-color); border-bottom-left-radius: 4px; padding: 0.75rem 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); max-width: 80%; } #support-message a { color: var(--chat-widget-primary-color); text-decoration: none; font-weight: 500; } #support-message a:hover { text-decoration: underline; } @keyframes blink { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } .typing-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #6b7280; margin: 0 2px; animation: blink 1.4s infinite; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } .chat-loader { border: 3px solid #f3f3f3; border-top: 3px solid var(--chat-widget-primary-color); border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader { background-color: white; color: #6b7280; display: inline-block; padding: 0.75rem 1rem; border-radius: 14px; border-bottom-left-radius: 4px; } .order-box-container { border: 1px solid #e2e8f0; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; transition: all 0.2s ease; transform: scale(1); cursor: pointer; background: white; } #chat-messages { font-family: var(--chat-widget-font); } #vaani-chat-header { font-family: var(--chat-widget-font); background-color: var(--chat-widget-primary-color); } .order-box-container:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .order-header { display: flex; align-items: center; margin-bottom: 0.5rem; } .order-radio-input { margin-right: 0.75rem; accent-color: var(--chat-widget-primary-color); } .order-title { font-size: 0.875rem; font-weight: 600; } .order-items { display: flex; flex-direction: column; gap: 0.75rem; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; -ms-appearance: textfield; } input[type="number"]::-ms-clear { display: none; width: 0; height: 0; } input[type="text"], input[type="number"] { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem 1rem; font-family: var(--chat-widget-font); transition: border-color 0.2s ease; outline: none; } input[type="text"]:focus, input[type="number"]:focus { border-color: var(--chat-widget-primary-color); box-shadow: 0 0 0 2px rgba(var(--chat-widget-primary-color-rgb, 0, 0, 0), 0.1); } #chat-input { border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem 1rem; outline: none; width: 100%; font-family: var(--chat-widget-font); transition: border-color 0.2s ease; } #chat-input:focus { border-color: var(--chat-widget-primary-color); box-shadow: 0 0 0 2px rgba(var(--chat-widget-primary-color-rgb, 0, 0, 0), 0.1); } .order-item { display: flex; align-items: center; } .order-item-image { width: 3rem; height: 3rem; object-fit: cover; margin-right: 1rem; border-radius: 6px; } .order-item-details { flex: 1; } .order-item-name { color: #333; font-size: 0.875rem; font-weight: 500; } .order-item-info { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; } .order-placed-at { display: flex; justify-content: flex-end; font-size: 0.875rem; color: #6b7280; margin-top: 0.75rem; font-style: italic; } #support-message { overflow: auto; line-height: 1.5; } #support-message p { margin-top: 0.5rem; margin-bottom: 0.5rem; } #support-message p:first-child { margin-top: 0; } #support-message p:last-child { margin-bottom: 0; } .otp-input-field { width: 3rem !important; height: 3rem !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; text-align: center !important; font-size: 1.25rem !important; outline: none !important; transition: border-color 0.2s ease !important; } .otp-input-field:focus { border-color: var(--chat-widget-primary-color) !important; box-shadow: 0 0 0 2px rgba(var(--chat-widget-primary-color-rgb, 0, 0, 0), 0.1) !important; } #error-message, #error-message-verify, #error-message-orders { color: #e53e3e; font-size: 0.875rem; margin-top: 0.5rem; } /* For smaller phones (up to 480px width) */ @media (max-width: 480px) { #vaani-popup, #vaani-chat-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh; z-index: 1000; border-radius: 0; transform: none; } #vaani-chat-container .vaani-chat-header { border-radius: 0; padding: 1rem; } #vaani-chat-container .chat-messages { height: calc(100vh - 60px); padding: 1rem; } #vaani-chat-container #order-list { height: calc(100vh - 60px); } .vaani-footer { padding: 0.75rem 1rem 1rem; } #reply-message, #support-message { max-width: 85%; } } /* For phones slightly larger than 480px but smaller than 767px */ @media (min-width: 481px) and (max-width: 767px) { #vaani-popup, #vaani-chat-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh; z-index: 1000; border-radius: 0; transform: none; } #vaani-chat-container .vaani-chat-header { border-radius: 0; } #vaani-chat-container .chat-messages { height: calc(100vh - 260px); } #vaani-chat-container #order-list { height: calc(100vh - 260px); } } /* For iPhone 14 Pro Max (430px width) */ @media (max-width: 430px) { #vaani-popup, #vaani-chat-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh; z-index: 1000; border-radius: 0; transform: none; } #vaani-chat-container .vaani-chat-header { border-radius: 0; } #vaani-chat-container .chat-messages { height: calc(100vh - 260px); } #vaani-chat-container #order-list { height: calc(100vh - 260px); } .vaani-footer { padding: 0.75rem 1rem 1rem; } } /* For iPad / tablets (768px to 1024px width) */ @media (min-width: 768px) and (max-width: 1024px) { #vaani-popup, #vaani-chat-container { width: 80%; max-width: 800px; } #reply-message, #support-message { max-width: 85%; } } @media (min-width: 1025px) and (max-width: 1919px) { #vaani-popup, #vaani-chat-container { width: 80%; max-width: 1024px; } #reply-message, #support-message { max-width: 85%; } } /* For extra-large screens (1920px width, 2k and 4k resolutions) */ @media (min-width: 1920px) { #vaani-popup, #vaani-chat-container { width: 80%; max-width: 1200px; } } #vaani-popups.vaani-colors code { color: #333333; } #vaani-popups.vaani-colors input { background-color: #ffffff; color: #000000; } .vaani-branding { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #f0f0f0; } .vaani-branding a { color: var(--chat-widget-primary-color); text-decoration: none; font-weight: 600; transition: opacity 0.2s ease; } .vaani-branding a:hover { opacity: 0.8; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .typing-cursor { display: inline-block; width: 2px; height: 1em; background-color: black; vertical-align: baseline; animation: blink 1s step-end infinite; margin-left: 4px; border-radius: 1px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .new-text { animation: fadeIn 0.3s ease-in-out; } .char-fade-in { opacity: 0; animation: fadeIn 0.15s ease-in-out forwards; } /* Minimal Sources Container */ .source-container-minimal { margin: 12px 0 8px 0; padding: 0; } /* Source Bubbles Row */ .source-bubbles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Individual Source Bubble */ .source-bubble { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 16px; font-size: 12px; font-weight: 500; color: #495057; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; white-space: nowrap; max-width: 140px; overflow: hidden; } .source-bubble:hover { background: #e9ecef; border-color: #dee2e6; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } .source-bubble.active { background: #007bff; border-color: #007bff; color: white; box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); } .source-bubble:active { transform: scale(0.98); } /* Source Number Badge */ .source-number { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: #6c757d; color: white; border-radius: 50%; font-size: 10px; font-weight: 600; line-height: 1; flex-shrink: 0; } .source-bubble.active .source-number { background: rgba(255, 255, 255, 0.9); color: #007bff; } /* Source Preview Text */ .source-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } /* Expanded Source View */ .source-expanded { margin-top: 8px; background: white; border: 1px solid #e9ecef; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; animation: expandIn 0.2s ease-out; } @keyframes expandIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .source-expanded-content { padding: 12px; } .source-expanded-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .source-expanded-favicon { width: 24px; height: 24px; background: linear-gradient(135deg, #6c757d 0%, #495057 100%); color: white; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; } .source-expanded-details { flex: 1; min-width: 0; } .source-expanded-title { font-size: 13px; font-weight: 600; color: #212529; margin-bottom: 2px; line-height: 1.3; } .source-expanded-url { font-size: 11px; color: #6c757d; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .source-close-btn { background: none; border: none; color: #6c757d; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .source-close-btn:hover { background: #f8f9fa; color: #495057; } .source-expanded-footer { padding-top: 8px; border-top: 1px solid #f8f9fa; } .source-visit-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; font-size: 11px; font-weight: 500; transition: all 0.2s ease; } .source-visit-btn:hover { background: #0056b3; text-decoration: none; color: white; transform: translateY(-1px); } /* Mobile Responsive */ @media (max-width: 480px) { .source-bubble { max-width: 120px; padding: 3px 6px; font-size: 11px; } .source-number { width: 14px; height: 14px; font-size: 9px; } .source-preview { font-size: 10px; } .source-expanded-content { padding: 10px; } .source-expanded-title { font-size: 12px; } .source-expanded-url { font-size: 10px; } } /* Dark mode support (if needed) */ @media (prefers-color-scheme: dark) { .source-bubble { background: #2d3748; border-color: #4a5568; color: #e2e8f0; } .source-bubble:hover { background: #4a5568; border-color: #718096; } .source-expanded { background: #2d3748; border-color: #4a5568; } .source-expanded-title { color: #e2e8f0; } .source-expanded-url { color: #a0aec0; } .source-close-btn { color: #a0aec0; } .source-close-btn:hover { background: #4a5568; color: #e2e8f0; } .source-expanded-footer { border-top-color: #4a5568; } } .source-bubble { background: #ffffff; border: 1px solid #d0d0d0; color: #212529; } .source-bubble:hover { background: #f1f1f1; border-color: #bfbfbf; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .source-bubble.active { background: #111111; border-color: #111111; color: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .source-number { background: #343a40; color: #ffffff; } .source-bubble.active .source-number { background: #ffffff; color: #111111; } .source-expanded { background: #ffffff; border: 1px solid #dcdcdc; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .source-expanded-title { color: #000000; } .source-expanded-url { color: #666666; } .source-close-btn { color: #666666; } .source-close-btn:hover { background: #f0f0f0; color: #000000; } .source-expanded-footer { border-top: 1px solid #eaeaea; } .source-visit-btn { background: #111111; color: #ffffff; } .source-visit-btn:hover { background: #000000; color: #ffffff; } ` } function enhanceCodeBlocks() { let e = ` .code-block-container { margin: 12px 0; border-radius: 8px; overflow: hidden; background: #1e1e1e; font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); width: 100%; max-width: 100%; } .code-block-header { display: flex; justify-content: space-between; align-items: center; background: #2d2d2d; padding: 8px 12px; font-size: 12px; color: #e0e0e0; border-bottom: 1px solid #3d3d3d; width: 100%; } .code-language-badge { text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; } .copy-code-button { background: transparent; border: 1px solid #4d4d4d; border-radius: 4px; color: #e0e0e0; cursor: pointer; font-size: 11px; padding: 3px 8px; transition: all 0.2s ease; } .copy-code-button:hover { background: #3d3d3d; border-color: #6d6d6d; } .copy-code-button:active { transform: scale(0.98); } .code-block-content { padding: 12px; overflow-x: auto; background: #1e1e1e; color: #e0e0e0; max-width: 100%; white-space: pre-wrap; word-break: break-word; } .code-block-content code { background: transparent; color: #e0e0e0 !important; padding: 0; display: block; white-space: pre-wrap; word-break: break-word; font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace; font-size: 13px; line-height: 1.45; } /* Override for hljs themes but only within our container */ #vaani-popups .hljs { background: transparent; padding: 0; white-space: pre-wrap; word-break: break-word; } `, t = document.createElement("style"); t.textContent = e; document.head.appendChild(t); } function loadCSS() { var style = document.createElement("style"); style.innerHTML = vaani_styling; document.head.appendChild(style); } function applyEnhancedCodeBlocks() { enhanceCodeBlocks(); // Set up a MutationObserver to watch for new code blocks const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.addedNodes && mutation.addedNodes.length > 0) { mutation.addedNodes.forEach((node) => { // If we directly added a code element or something that might contain code elements if (node.nodeType === Node.ELEMENT_NODE) { const codeElements = node.querySelectorAll('code[class^="language-"]'); codeElements.forEach(enhanceCodeElement); } }); } }); }); // Start observing the chat messages container const chatMessages = document.getElementById("chat-messages"); if (chatMessages) { observer.observe(chatMessages, { childList: true, subtree: true }); } } function enhanceCodeElement(codeElement) { if (codeElement.closest('.code-block-container')) { return; } // Get the language from the class const classAttr = codeElement.getAttribute('class'); const langMatch = classAttr && classAttr.match(/language-([^\s]+)/); const language = langMatch ? langMatch[1] : 'javascript'; // Create the wrapper structure const container = document.createElement('div'); container.className = 'code-block-container'; const header = document.createElement('div'); header.className = 'code-block-header'; const langBadge = document.createElement('span'); langBadge.className = 'code-language-badge'; langBadge.textContent = language; const copyButton = document.createElement('button'); copyButton.className = 'copy-code-button'; copyButton.textContent = 'Copy'; copyButton.onclick = function() { // Get the text content const text = codeElement.textContent; // Copy to clipboard navigator.clipboard.writeText(text).then(() => { // Show success feedback copyButton.textContent = 'Copied!'; setTimeout(() => { copyButton.textContent = 'Copy'; }, 2000); }).catch(err => { console.error('Failed to copy text: ', err); copyButton.textContent = 'Error'; setTimeout(() => { copyButton.textContent = 'Copy'; }, 2000); }); }; // Assemble the header header.appendChild(langBadge); header.appendChild(copyButton); // Create content container const content = document.createElement('div'); content.className = 'code-block-content'; // Clone the code element and maintain its content const newCode = codeElement.cloneNode(true); content.appendChild(newCode); // Assemble the final structure container.appendChild(header); container.appendChild(content); // Replace the original code element with our enhanced version codeElement.parentNode.replaceChild(container, codeElement); // Apply syntax highlighting to the new code element if (window.hljs) { loadLanguage(language).then(() => { window.hljs.highlightElement(newCode); }).catch(err => { // console.warn(`Failed to highlight with language ${language}: ${err}`); // Fallback to auto-detection try { window.hljs.highlightAuto(newCode); } catch (e) { // console.warn('Auto-highlighting failed'); } }); } } function loadVaaniFooter() { const fragment = document.createDocumentFragment(); const footerHTML = `

`; // Create a temporary div to parse the HTML const tempDiv = document.createElement("div"); tempDiv.innerHTML = footerHTML; // Append each child element from the temporary div to the fragment while (tempDiv.firstChild) { fragment.appendChild(tempDiv.firstChild); } return fragment; } function loadVaaniBubble() { var vaaniWidgetContainer = document.createElement("div"); vaaniWidgetContainer.id = "vaani-widget-container"; vaaniWidgetContainer.innerHTML = `

`; document.body.appendChild(vaaniWidgetContainer); return vaaniWidgetContainer; } function loadVaaniPopup() { var vaaniPopup = document.createElement("div"); vaaniPopup.id = "vaani-popups"; vaaniPopup.className = "vaani-colors vaani-hidden"; vaaniPopup.innerHTML = `

${vaani_window_title}

Welcome! We are excited to assist you. Let's get started!

Please enter your mobile number or email to continue:

Please enter the OTP sent to your contact:

Select your order:

Hello there! 👋 How can I help you?

`; return vaaniPopup; } function ShowOrHide(element) { element.classList.toggle("vaani-hidden"); } function RegisterEventListeners() { vaani_welcome_step = document.getElementById("step-0"); vaani_contact_step = document.getElementById("step-1"); vaani_verify_step = document.getElementById("step-2"); vaani_order_step = document.getElementById("step-3"); vaani_chat_step = document.getElementById("step-4"); vaani_welcome_footer = document.getElementById("footer-step-0"); vaani_contact_footer = document.getElementById("footer-step-1"); vaani_verify_footer = document.getElementById("footer-step-2"); vaani_order_footer = document.getElementById("footer-step-3"); vaani_chat_footer = document.getElementById("footer-step-4"); var vaani_start_contact = document.getElementById("start-validate"); var vaani_send_otp = document.getElementById("send-otp"); var vaani_start_order = document.getElementById("start-order"); var vaani_close_popup = document.getElementById("close-popup"); otpInputs = document.querySelectorAll(".otp-input-field"); // document.addEventListener("DOMContentLoaded", otpInputFieldsUiJs); // Render step-3 vaani_welcome_step.classList.add("vaani-hidden"); vaani_order_step.classList.add("vaani-hidden"); vaani_chat_step.classList.remove("vaani-hidden"); //toggle footers vaani_welcome_footer.classList.add("vaani-hidden"); vaani_order_footer.classList.add("vaani-hidden"); vaani_chat_footer.classList.remove("vaani-hidden"); LoadChatPopUp(); function handleClosePopup() { const chatContent = document.getElementById("vaani-chat-content"); chatContent.style.background = "white"; document.body.removeChild(vaani_popup); ShowOrHide(vaani_popup); } } function adjustSupportMessageWidth() { const chatMessage = document.getElementById('chat-message'); const supportMessage = document.getElementById('support-message'); if (chatMessage && supportMessage) { const chatMessageWidth = chatMessage.offsetWidth; supportMessage.style.maxWidth = `${chatMessageWidth * 0.7}px`; } } function dynamicallyLoadScript(url) { var script = document.createElement("script"); script.src = url; document.body.appendChild(script); } function LoadChatPopUp() { const chatSubmit = document.getElementById("send-chat"); const chatInput = document.getElementById("chat-input"); const vaani_caht_container = document.getElementById("vaani-chat-container"); const vaani_chat_content = document.getElementById("vaani-chat-content"); // vaani_caht_container.style.height = "70vh"; applyEnhancedCodeBlocks(); chatInput.addEventListener("keyup", function (event) { if (event.key === "Enter") { chatSubmit.click(); } }); chatSubmit.addEventListener("click", function () { const message = chatInput.value.trim(); if (message) { console.log("User message:", message); onUserRequest(message); chatInput.value = ""; } }); vaani_close_popup = document.getElementById("close-popup"); vaani_close_popup.addEventListener("click", showOrHideChat); function onUserRequest(message) { const messageElement = document.createElement("div"); messageElement.style.display = "flex"; messageElement.style.justifyContent = "flex-end"; messageElement.style.marginBottom = "0.75rem"; const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const ampm = hours >= 12 ? "PM" : "AM"; const formattedHours = hours % 12 || 12; const formattedMinutes = minutes < 10 ? "0" + minutes : minutes; const timeString = `${formattedHours}:${formattedMinutes} ${ampm}`; messageElement.innerHTML = `

${message}

${timeString}

`; chatMessages = document.getElementById("chat-messages"); chatMessages.appendChild(messageElement); chatMessages.scrollTop = chatMessages.scrollHeight; console.log("User request:", message); fetchChatResponse(message); } function createModernSourcesContainer(sources) { const sourceContainer = document.createElement("div"); sourceContainer.className = "source-container-minimal"; const sourceBubbles = document.createElement("div"); sourceBubbles.className = "source-bubbles"; sources.forEach((src, index) => { const bubble = document.createElement("button"); bubble.className = "source-bubble"; bubble.setAttribute('data-url', src); let domain = ''; let displayNumber = index + 1; try { const url = new URL(src); domain = url.hostname.replace('www.', ''); } catch (e) { domain = 'Link'; } bubble.innerHTML = ` ${displayNumber} ${domain} `; bubble.addEventListener('click', (e) => { e.preventDefault(); // Collapse all other bubbles const allBubbles = sourceBubbles.querySelectorAll('.source-bubble'); allBubbles.forEach(b => { if (b !== bubble) b.classList.remove('expanded'); }); // Toggle current bubble bubble.classList.toggle('expanded'); toggleSourceExpansion(bubble, src, domain); }); sourceBubbles.appendChild(bubble); }); sourceContainer.appendChild(sourceBubbles); return sourceContainer; } function toggleSourceExpansion(bubble, url, domain) { const container = bubble.closest('.source-container-minimal'); // Remove any existing expanded views const existingExpanded = container.querySelector('.source-expanded'); if (existingExpanded) existingExpanded.remove(); // Remove active state from all bubbles container.querySelectorAll('.source-bubble').forEach(b => b.classList.remove('active')); // If the clicked bubble was already active, collapse it and return const wasActive = bubble.classList.contains('active'); if (wasActive) return; // Mark clicked bubble as active bubble.classList.add('active'); // Create expanded view const expanded = document.createElement('div'); expanded.className = 'source-expanded'; expanded.innerHTML = `

${domain.charAt(0).toUpperCase()}

${domain}

${url}

`; // Close button handler expanded.querySelector('.source-close-btn').addEventListener('click', () => { expanded.remove(); bubble.classList.remove('active'); }); // Insert expanded view after bubbles container container.querySelector('.source-bubbles').insertAdjacentElement('afterend', expanded); } let chatHistory = []; function fetchChatResponse(message) { showTypingIndicator(); let sources = []; const send_chat_button = document.getElementById("send-chat"); send_chat_button.disabled = true; send_chat_button.style.background = "#d1d5db"; const requestData = { question: message, chat_history: chatHistory, }; let fullResponse = ""; let previousResponseLength = 0; let firstChunkReceived = false; let updateScheduled = false; let streamingComplete = false; fetch(vaani_api_url, { method: "POST", headers: { "Content-Type": "application/json", "x-stream": "true", }, body: JSON.stringify(requestData), }) .then((response) => { const reader = response.body.getReader(); const decoder = new TextDecoder("utf-8"); const read = () => { return reader.read().then(({ done, value }) => { if (done) { return; } const chunk = decoder.decode(value, { stream: true }); const lines = chunk.split("\n").filter(Boolean); for (const line of lines) { try { const parsed = JSON.parse(line); if (parsed.type === "chunk" && parsed.content) { if (!firstChunkReceived) { firstChunkReceived = true; hideTypingIndicator(); reply(""); } fullResponse += parsed.content; if (!updateScheduled) { updateScheduled = true; setTimeout(() => { appendMarkdownToLatestReply(fullResponse); updateScheduled = false; previousResponseLength = fullResponse.length; }, 100); } } else if (parsed.type === "source" && parsed.content) { sources.push(parsed.content); } else if (parsed.type === "done") { streamingComplete = true; chatHistory.push({ human: message, ai: fullResponse }); setTimeout(() => { const lastReply = document.getElementById("chat-messages") .lastElementChild?.querySelector("#support-message"); if (lastReply) { const html = DOMPurify.sanitize(marked.parse(fullResponse)); lastReply.innerHTML = html; applyEnhancedCodeBlocks(); } }, 100); if (sources.length > 0) { const sourceContainer = createModernSourcesContainer(sources); const lastReplyContainer = document.getElementById("ai-response-parent").lastElementChild; if (lastReplyContainer) { lastReplyContainer.appendChild(sourceContainer); } document.getElementById("ai-response-parent").id = "ai-response-parent-old"; } sources = []; send_chat_button.disabled = false; send_chat_button.style.background = "var(--chat-widget-primary-color)"; return; } else if (parsed.type === "error") { streamingComplete = true; hideTypingIndicator(); reply("Sorry, something went wrong."); send_chat_button.disabled = false; send_chat_button.style.background = "var(--chat-widget-primary-color)"; return; } } catch (err) { console.error("Streaming JSON parse error:", err); } } return read(); }); }; return read(); }) .catch((error) => { console.error("Streaming error:", error); streamingComplete = true; hideTypingIndicator(); reply("Sorry, something went wrong. Please try again later."); send_chat_button.disabled = false; send_chat_button.style.background = "var(--chat-widget-primary-color)"; }); } function appendMarkdownToLatestReply(markdownContent) { const chatMessages = document.getElementById("chat-messages"); const lastReply = chatMessages.lastElementChild?.querySelector("#support-message"); if (lastReply) { const previousContent = lastReply.textContent || ""; const previousLength = previousContent.length; let parsedHtml = DOMPurify.sanitize(marked.parse(markdownContent)); parsedHtml += ''; lastReply.innerHTML = parsedHtml; // Apply fade-in effect to the new content const allTextNodes = getAllTextNodesIn(lastReply); let totalTextLength = 0; // Find the text node containing the new content for (let i = 0; i < allTextNodes.length; i++) { const nodeLength = allTextNodes[i].textContent.length; // If this node contains new content if (totalTextLength + nodeLength > previousLength) { const newTextStartIndex = Math.max(0, previousLength - totalTextLength); if (newTextStartIndex < nodeLength) { // Split and animate the new part const textNode = allTextNodes[i]; const parentElement = textNode.parentNode; // Skip if parent is a code block or pre element if (parentElement.tagName === 'CODE' || parentElement.tagName === 'PRE' || parentElement.closest('.code-block-content')) { continue; } const text = textNode.textContent; const beforeText = text.substring(0, newTextStartIndex); const newText = text.substring(newTextStartIndex); if (newText) { // Replace text node with our split version textNode.remove(); // Add the existing text without animation if (beforeText) { parentElement.appendChild(document.createTextNode(beforeText)); } // Add the new text with animation const newSpan = document.createElement('span'); newSpan.textContent = newText; newSpan.className = 'new-text'; parentElement.appendChild(newSpan); } } } totalTextLength += nodeLength; } applyEnhancedCodeBlocks(); chatMessages.scrollTop = chatMessages.scrollHeight; } } // Helper function to get all text nodes in an element function getAllTextNodesIn(element) { const textNodes = []; const walker = document.createTreeWalker( element, NodeFilter.SHOW_TEXT, null, false ); let node; while (node = walker.nextNode()) { textNodes.push(node); } return textNodes; } function showTypingIndicator() { const typingIndicator = document.createElement("div"); typingIndicator.id = "typing-indicator"; typingIndicator.style.display = "flex"; typingIndicator.style.alignItems = "center"; typingIndicator.style.justifyContent = "flex-start"; typingIndicator.style.marginBottom = "0.75rem"; typingIndicator.style.marginLeft = "0.5rem"; // Create a spinning loader outside the message box typingIndicator.innerHTML = `

`; // Add the animation keyframes to the document if (!document.getElementById('spinner-animation')) { const style = document.createElement('style'); style.id = 'spinner-animation'; style.textContent = ` @keyframes spin { to { transform: rotate(360deg); } } `; document.head.appendChild(style); } chatMessages.appendChild(typingIndicator); chatMessages.scrollTop = chatMessages.scrollHeight; } function hideTypingIndicator() { const typingIndicator = document.getElementById("typing-indicator"); if (typingIndicator) { typingIndicator.remove(); } } function reply(message, merchantDetails, expiresIn = 0) { const replyElement = document.createElement("div"); replyElement.style.display = "flex"; replyElement.style.marginBottom = "0.75rem"; let merchantCardHTML = ""; if (merchantDetails && merchantDetails.phone && merchantDetails.email) { merchantCardHTML = `

Kindly Contact:

Phone: ${ merchantDetails.phone || "" }

Email: ${ merchantDetails.email || "" }

`; } // Use DOMPurify and marked to parse the markdown // Add blinking cursor for initial empty message const parsed_message = message ? DOMPurify.sanitize(marked.parse(`${message}`)) : ''; replyElement.innerHTML = `

${parsed_message}

${merchantCardHTML}

`; // Add the reply element to the DOM chatMessages.appendChild(replyElement); // Process code blocks in the newly added content const codeElements = replyElement.querySelectorAll('code[class^="language-"]'); codeElements.forEach(enhanceCodeElement); if (window.hljs && codeElements.length > 0) { applyHighlightToVaani(); } setTimeout(adjustSupportMessageWidth, 50); if (expiresIn > 1) { setTimeout(() => { replyElement.remove(); }, expiresIn); } chatMessages.scrollTop = chatMessages.scrollHeight; } window.addEventListener("resize", adjustSupportMessageWidth); } setTimeout(() => { loadVaani("Dev", "Support | Chat", "black"); }, 1000)

Get Started

Quick Checkout

Platform SDK