B2B Communicator (Knowledge Based)

➤

body { background: #22232a !important; color: #f0f4f8 !important; font-family: ‘Inter’, ‘Segoe UI’, Arial, sans-serif; margin: 0; padding: 0; } #gpt-app { min-height: 100vh; width: 100vw; background: #22232a; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } .gpt-chat-wrap { background: #262733; border-radius: 12px; box-shadow: 0 4px 32px #000a 0; width: 100%; max-width: 540px; min-height: 480px; max-height: 95vh; display: flex; flex-direction: column; border: 1.5px solid #32323c; margin: 0 auto 0 0; /* Stick left, not centered */ overflow: hidden; position: relative; } .gpt-home-link { display: inline-block; margin: 0.75em 0 0.5em 1em; background: #222a32dd; color: #b4cfff; border-radius: 7px; padding: 0.37em 1.1em 0.33em 1.1em; font-size: 1.03rem; font-weight: 500; text-decoration: none; letter-spacing: 0.01em; box-shadow: 0 1.5px 8px #0003; transition: background 0.19s, color 0.19s; border: 1px solid #32323c; position: static; } .gpt-home-link:hover { background: #3c82f7; color: #fff; } .gpt-messages { flex: 1 1 auto; padding: 0.5em 1.2em 1em 1.2em; overflow-y: auto; display: flex; flex-direction: column; gap: 1.2em; scrollbar-width: thin; scrollbar-color: #444 #22232a; } .gpt-message { display: flex; flex-direction: row; max-width: 95%; } .gpt-message.user { justify-content: flex-end; } .gpt-message.assistant { justify-content: flex-start; } .gpt-bubble { padding: 0.95em 1.2em; border-radius: 1.15em; line-height: 1.6; font-size: 1.05rem; max-width: 90vw; min-width: 2.5em; box-shadow: 0 1px 8px #0003; word-break: break-word; } .gpt-message.user .gpt-bubble { background: linear-gradient(95deg, #3c82f7 70%, #3650ff 100%); color: #fff; border-bottom-right-radius: 0.4em; align-self: flex-end; } .gpt-message.assistant .gpt-bubble { background: #262e39; color: #d6e1f5; border-bottom-left-radius: 0.4em; align-self: flex-start; } .gpt-form { display: flex; align-items: flex-end; gap: 0.7em; padding: 1.1em 1.2em; border-top: 1.5px solid #32323c; background: #23232f; } .gpt-input { flex: 1 1 auto; font-size: 1.05rem; border: none; border-radius: 0.7em; padding: 0.75em 1.1em; background: #232736; color: #fff; resize: none; min-height: 2.1em; max-height: 7em; outline: none; box-shadow: none; transition: box-shadow 0.2s; } .gpt-input:focus { box-shadow: 0 0 0 2px #3c82f7; } .gpt-send-btn { background: #3c82f7; color: #fff; border: none; border-radius: 1em; padding: 0.75em 1.15em; font-size: 1.13em; cursor: pointer; transition: background 0.2s; outline: none; height: 2.8em; display: flex; align-items: center; justify-content: center; } .gpt-send-btn:hover { background: #3650ff; } @media (max-width: 620px) { .gpt-chat-wrap { max-width: 100vw; min-height: 75vh; } .gpt-home-link { margin-left: 0.55em; font-size: 0.99rem; padding: 0.35em 0.78em; } .gpt-messages { padding: 0.8em 0.5em 1em 0.5em; } .gpt-form { padding: 0.6em 0.6em; } .gpt-bubble { font-size: 0.98rem; } } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #32323c; border-radius: 6px; } ::-webkit-scrollbar-track { background: #22232a; } const messagesEl = document.getElementById(‘gpt-messages’); const form = document.getElementById(‘gpt-form’); const input = document.getElementById(‘gpt-input’); function scrollToBottom() { messagesEl.scrollTop = messagesEl.scrollHeight; } function addMessage(role, text) { const msg = document.createElement(‘div’); msg.className = `gpt-message ${role}`; msg.innerHTML = `

${text.replace(/\n/g, ‘
’)}

`; messagesEl.appendChild(msg); scrollToBottom(); } function showLoading() { addMessage(‘assistant’, ‘…’); } function removeLoading() { const dots = document.getElementById(’loading-dots’); if (dots) dots.closest(’.gpt-message’).remove(); } form.addEventListener(‘submit’, async function(e) { e.preventDefault(); const userText = input.value.trim(); if (!userText) return; addMessage(‘user’, userText); input.value = ‘’; scrollToBottom(); showLoading(); try { const response = await fetch(‘https://api.openai.com/v1/chat/completions', { method: ‘POST’, headers: { ‘Authorization’: ‘Bearer YOUR_OPENAI_API_KEY’, // use proxy for prod! ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({ model: ‘gpt-4o’, messages: [ { role: ‘system’, content: “You are Vrex’s AI assistant. Respond professionally, concisely, and with value.” }, …Array.from(messagesEl.children) .filter(msg => msg.classList.contains(‘gpt-message’)) .map(msg => ({ role: msg.classList.contains(‘user’) ? ‘user’ : ‘assistant’, content: msg.textContent.replace(/…$/, ‘’).trim() })), { role: ‘user’, content: userText } ], max_tokens: 600 }) }); removeLoading(); if (!response.ok) throw new Error(await response.text()); const data = await response.json(); const aiText = data.choices?.[0]?.message?.content || ‘[No response]’; addMessage(‘assistant’, aiText); } catch (err) { removeLoading(); addMessage(‘assistant’, ‘Error: ’ + (err.message || ‘Request failed’) + ‘’); } scrollToBottom(); }); input.addEventListener(‘input’, function() { this.style.height = ‘2.1em’; this.style.height = (this.scrollHeight) + ‘px’; });