From bfdc9f091c1990a04b0c62593dfb94c4ec600f72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B8=D0=BA=D1=82=D0=BE=D1=80?= <78488229+viktor138irk@users.noreply.github.com> Date: Fri, 8 May 2026 22:16:20 +0900 Subject: [PATCH] =?UTF-8?q?=D0=92=D0=B8=D0=B4=D0=B6=D0=B5=D1=82=20=D0=BF?= =?UTF-8?q?=D0=B5=D1=80=D0=B5=D0=BD=D0=B5=D1=81=D0=B5=D0=BD=20=D0=B2=20Sha?= =?UTF-8?q?dow=20DOM=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=BE=D0=BB=D0=BD=D0=BE?= =?UTF-8?q?=D0=B9=20=D0=B8=D0=B7=D0=BE=D0=BB=D1=8F=D1=86=D0=B8=D0=B8=20?= =?UTF-8?q?=D1=81=D1=82=D0=B8=D0=BB=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- widget/src/widget.js | 139 ++++++++++++++++++++++--------------------- 1 file changed, 71 insertions(+), 68 deletions(-) diff --git a/widget/src/widget.js b/widget/src/widget.js index 57189c9..f56ede3 100644 --- a/widget/src/widget.js +++ b/widget/src/widget.js @@ -11,77 +11,80 @@ localStorage.setItem(visitorIdKey, visitorId); } - const style = document.createElement('style'); - style.textContent = ` - .raspi-chat-button,.raspi-chat-panel,.raspi-chat-panel *{box-sizing:border-box} - .raspi-chat-button{position:fixed!important;right:18px!important;bottom:18px!important;z-index:2147483000!important;border:0!important;border-radius:999px!important;background:#172033!important;color:#fff!important;padding:13px 17px!important;font:700 14px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;box-shadow:0 14px 35px rgba(0,0,0,.18)!important;cursor:pointer!important;margin:0!important} - .raspi-chat-panel{position:fixed!important;right:18px!important;bottom:72px!important;z-index:2147483000!important;width:360px!important;max-width:calc(100vw - 32px)!important;height:min(460px,calc(100dvh - 96px))!important;display:none!important;flex-direction:column!important;border-radius:22px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 22px 70px rgba(0,0,0,.22)!important;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;margin:0!important;padding:0!important;border:0!important} - .raspi-chat-panel.open{display:flex!important} - .raspi-chat-header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;height:58px!important;min-height:58px!important;max-height:58px!important;padding:11px 14px 11px 16px!important;background:#172033!important;color:#fff!important;font-weight:800!important;line-height:1.2!important;flex:0 0 58px!important;margin:0!important;border:0!important} - .raspi-chat-title{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important;margin:0!important;padding:0!important} - .raspi-chat-title strong{display:block!important;font-size:14px!important;line-height:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important;color:#fff!important} - .raspi-chat-title span{display:block!important;font-size:11px!important;line-height:14px!important;font-weight:600!important;color:rgba(255,255,255,.68)!important;margin:0!important} - .raspi-chat-close{width:34px!important;height:34px!important;display:grid!important;place-items:center!important;border:0!important;border-radius:12px!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font:800 22px/1 system-ui!important;cursor:pointer!important;flex:0 0 auto!important;margin:0!important;padding:0!important} - .raspi-chat-close:hover{background:rgba(255,255,255,.16)!important} - .raspi-chat-messages{flex:1 1 auto!important;height:0!important;min-height:0!important;padding:14px!important;overflow:auto!important;background:#f4f6fb!important;color:#172033!important;font-size:14px!important;overscroll-behavior:contain!important;margin:0!important;border:0!important} - .raspi-chat-message{margin:0 0 10px!important;padding:10px 12px!important;border-radius:14px!important;background:#fff!important;color:#172033!important;line-height:1.45!important;word-wrap:break-word!important;white-space:pre-wrap!important;max-width:100%!important;border:0!important} - .raspi-chat-message.operator{background:#dfe8ff!important;margin-left:18px!important} - .raspi-chat-message.visitor{background:#fff!important;margin-right:18px!important} - .raspi-chat-system{opacity:.7!important;font-size:12px!important;line-height:1.35!important;padding:4px 2px!important;color:#172033!important;margin:0!important;background:transparent!important} - .raspi-chat-form{display:flex!important;align-items:stretch!important;gap:8px!important;height:62px!important;min-height:62px!important;max-height:62px!important;padding:10px!important;border-top:1px solid #e7ebf3!important;background:#fff!important;flex:0 0 62px!important;margin:0!important} - .raspi-chat-input{flex:1 1 auto!important;min-width:0!important;height:42px!important;border:1px solid #d7deea!important;border-radius:12px!important;padding:0 10px!important;font:14px/42px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;outline:none!important;background:#fff!important;color:#172033!important;margin:0!important;box-shadow:none!important} - .raspi-chat-input:focus{border-color:#4f6bff!important;box-shadow:0 0 0 3px rgba(79,107,255,.12)!important} - .raspi-chat-send{border:0!important;border-radius:12px!important;background:#4f6bff!important;color:#fff!important;width:44px!important;min-width:44px!important;height:42px!important;padding:0!important;font:800 18px/42px system-ui!important;cursor:pointer!important;margin:0!important;display:grid!important;place-items:center!important} - @media (max-width: 560px){ - .raspi-chat-button{right:14px!important;bottom:14px!important;padding:13px 16px!important} - .raspi-chat-panel{right:10px!important;left:10px!important;bottom:74px!important;width:auto!important;max-width:none!important;height:min(430px,calc(100dvh - 92px))!important;border-radius:20px!important} - .raspi-chat-header{height:56px!important;min-height:56px!important;max-height:56px!important;flex-basis:56px!important;padding:10px 12px 10px 14px!important} - .raspi-chat-close{width:38px!important;height:38px!important;border-radius:13px!important} - .raspi-chat-messages{height:0!important;min-height:0!important;padding:12px!important;font-size:13px!important;max-height:none!important} - .raspi-chat-message.operator{margin-left:10px!important} - .raspi-chat-message.visitor{margin-right:10px!important} - .raspi-chat-form{height:60px!important;min-height:60px!important;max-height:60px!important;flex-basis:60px!important;padding:9px!important} - .raspi-chat-input{height:42px!important;line-height:42px!important} - .raspi-chat-send{height:42px!important;line-height:42px!important} - } - @media (max-height: 560px){ - .raspi-chat-panel{top:10px!important;bottom:10px!important;height:auto!important;max-height:none!important} - .raspi-chat-messages{height:0!important;min-height:0!important;max-height:none!important} - } - `; - document.head.appendChild(style); + const host = document.createElement('div'); + host.id = `wschat-host-${siteId}`; + host.style.all = 'initial'; + document.body.appendChild(host); - const button = document.createElement('button'); - button.className = 'raspi-chat-button'; - button.type = 'button'; - button.textContent = '💬 Чат'; + const root = host.attachShadow({ mode: 'open' }); - const panel = document.createElement('section'); - panel.className = 'raspi-chat-panel'; - panel.setAttribute('aria-label', 'Чат поддержки'); - panel.innerHTML = ` -
-
- StackWorks Support - Обычно отвечаем быстро + root.innerHTML = ` + + + + +
+
+
+ StackWorks Support + Обычно отвечаем быстро +
+
- -
-
-
Здравствуйте! Чем можем помочь?
-
-
- - -
+
+
Здравствуйте! Чем можем помочь?
+
+
+ + +
+ `; - document.body.append(button, panel); - - const messages = panel.querySelector('[data-role="messages"]'); - const form = panel.querySelector('[data-role="form"]'); - const input = panel.querySelector('[data-role="input"]'); - const closeButton = panel.querySelector('[data-role="close"]'); + const button = root.querySelector('.chat-button'); + const panel = root.querySelector('.chat-panel'); + const messages = root.querySelector('[data-role="messages"]'); + const form = root.querySelector('[data-role="form"]'); + const input = root.querySelector('[data-role="input"]'); + const closeButton = root.querySelector('[data-role="close"]'); let socket = null; let reconnectTimer = null; @@ -108,7 +111,7 @@ function addMessage(text, type = 'visitor') { const item = document.createElement('div'); - item.className = `raspi-chat-message ${type}`; + item.className = `chat-message ${type}`; item.textContent = text; messages.appendChild(item); messages.scrollTop = messages.scrollHeight; @@ -116,7 +119,7 @@ function addSystem(text) { const item = document.createElement('div'); - item.className = 'raspi-chat-system'; + item.className = 'chat-system'; item.textContent = text; messages.appendChild(item); messages.scrollTop = messages.scrollHeight;