<!DOCTYPE html>
<html lang="ua">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VMK Bot</title>
<script>
// const AISERV = "https://ai.vmk-group.tech";
const AISERV = "http://con2.local";
// const BACKSERV = "https://kitanbotadmin.vmk-group.tech/adminback/api.php";
const BACKSERV = "http://kitan-bot.local/adminback/api.php";
</script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="/js/main.js"></script>
<style>
body {
background: #777;
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/main.css">
<aside class="kitan-bot-widget">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="kb-user" viewBox="0 0 16 16" fill="none">
<path d="M10.75 4.66667C10.75 6.13943 9.51878 7.33333 8 7.33333C6.48122 7.33333 5.25 6.13943 5.25 4.66667C5.25 3.19391 6.48122 2 8 2C9.51878 2 10.75 3.19391 10.75 4.66667Z" stroke="#254EA0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.75 10H5.25C3.73122 10 2.5 11.1939 2.5 12.6667C2.5 13.403 3.11561 14 3.875 14H12.125C12.8844 14 13.5 13.403 13.5 12.6667C13.5 11.1939 12.2688 10 10.75 10Z" stroke="#254EA0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-ua-flag" viewBox="0 0 16 16">
<path d="M8 13.75C11.1817 13.75 13.75 11.1817 13.75 8H2.25C2.25 11.1817 4.81833 13.75 8 13.75Z" fill="#FFE62E"/>
<path d="M8 2.25C4.81833 2.25 2.25 4.81833 2.25 8H13.75C13.75 4.81833 11.1817 2.25 8 2.25Z" fill="#428BC1"/>
</symbol>
<symbol id="kb-trash" viewBox="0 0 24 24" fill="none">
<path d="M16 6L14.8944 3.78885C14.3463 2.69253 13.2257 2 12 2C10.7743 2 9.65374 2.69253 9.10557 3.78885L8 6M4 6H20M6 6H18V15C18 16.8638 18 17.7957 17.6955 18.5307C17.2895 19.5108 16.5108 20.2895 15.5307 20.6955C14.7956 21 13.8638 21 12 21C10.1362 21 9.20435 21 8.46927 20.6955C7.48915 20.2895 6.71046 19.5108 6.30448 18.5307C6 17.7957 6 16.8638 6 15V6Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-star" viewBox="0 0 16 16" fill="none">
<path d="M6.69092 2.04004C7.39413 0.951912 9.03958 0.98804 9.68018 2.14844L10.979 4.50098L11.0093 4.54297C11.0437 4.58152 11.0914 4.60979 11.147 4.62012L13.813 5.11328L13.937 5.14062C15.1525 5.45407 15.6534 6.93447 14.8423 7.91016L14.7563 8.00586L12.8931 9.95312C12.8445 10.0039 12.824 10.0715 12.8325 10.1367L13.1812 12.7939L13.1929 12.9219C13.2701 14.1874 11.988 15.0819 10.8257 14.6318L10.7095 14.583L8.26025 13.4336C8.20983 13.4099 8.1528 13.4043 8.09912 13.416L8.04639 13.4336L5.59619 14.583C4.36692 15.1594 2.94495 14.1688 3.12549 12.7939L3.47412 10.1367L3.4751 10.0879C3.47203 10.0553 3.46219 10.0231 3.44482 9.99414L3.4126 9.95312L1.55029 8.00586C0.590719 7.00292 1.1467 5.36253 2.49365 5.11328L5.15967 4.62012L5.2124 4.60449C5.26233 4.58312 5.30286 4.54587 5.32764 4.50098L6.62549 2.14844L6.69092 2.04004Z" stroke="#14142B" stroke-width="1.5"/>
</symbol>
<symbol id="kb-white-sm-bot" viewBox="0 0 60 60" fill="none">
<path d="M0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30Z" fill="white"/>
<path d="M30 16.6667V23.3334M30 23.3334H27.3333C24.8516 23.3334 23.6108 23.3334 22.6066 23.6597C20.577 24.3192 18.9857 25.9104 18.3263 27.94C18 28.9442 18 30.185 18 32.6667C18 35.1485 18 36.3893 18.3263 37.3935C18.9857 39.4231 20.577 41.0143 22.6066 41.6738C23.6108 42.0001 24.8516 42.0001 27.3333 42.0001H32.6667C35.1484 42.0001 36.3892 42.0001 37.3934 41.6738C39.423 41.0143 41.0143 39.4231 41.6737 37.3935C42 36.3893 42 35.1485 42 32.6667C42 30.185 42 28.9442 41.6737 27.94C41.0143 25.9104 39.423 24.3192 37.3934 23.6597C36.3892 23.3334 35.1484 23.3334 32.6667 23.3334H30ZM26 32.6667C25.2636 32.6667 24.6667 32.0698 24.6667 31.3334C24.6667 30.597 25.2636 30.0001 26 30.0001C26.7364 30.0001 27.3333 30.597 27.3333 31.3334C27.3333 32.0698 26.7364 32.6667 26 32.6667ZM34 32.6667C33.2636 32.6667 32.6667 32.0698 32.6667 31.3334C32.6667 30.597 33.2636 30.0001 34 30.0001C34.7364 30.0001 35.3333 30.597 35.3333 31.3334C35.3333 32.0698 34.7364 32.6667 34 32.6667Z" stroke="#254EA0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="white"/>
</symbol>
<symbol id="kb-send" viewBox="0 0 24 24" fill="none">
<path d="M4.93367 12L3.08987 5.73239C2.60867 4.09667 4.14094 2.58539 5.75514 3.10362C10.2067 4.53274 14.4553 6.53713 18.3948 9.06662C19.5259 9.79292 21 10.4417 21 12C21 13.5583 19.5259 14.2071 18.3948 14.9334C14.4553 17.4629 10.2067 19.4673 5.75514 20.8964C4.14094 21.4146 2.60867 19.9033 3.08987 18.2676L4.93367 12ZM4.93367 12H9.83493" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-map-marker" viewBox="0 0 16 16" fill="none">
<path d="M7.9999 8.94737C9.04633 8.94737 9.89463 8.09907 9.89463 7.05263C9.89463 6.0062 9.04633 5.15789 7.9999 5.15789C6.95346 5.15789 6.10516 6.0062 6.10516 7.05263C6.10516 8.09907 6.95346 8.94737 7.9999 8.94737Z" stroke="#4E4B66" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.9999 14C9.26305 14 13.0525 11.3333 13.0525 7.33333C13.0525 3.33333 9.89463 2 7.9999 2C6.10516 2 2.94727 3.33333 2.94727 7.33333C2.94727 11.3333 6.73674 14 7.9999 14Z" stroke="#4E4B66" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-like" viewBox="0 0 24 24">
<path d="M21.6857 10.5687C21.071 9.82785 20.1085 9.36764 19.1739 9.36764H16.7014C17.2578 8.48093 17.6766 7.58862 17.9318 6.73894C18.3212 5.44233 18.3076 4.31205 17.8924 3.47028C17.4246 2.52217 16.4768 2 15.2235 2C15.0842 2 14.9479 2.04139 14.8321 2.11892C14.7163 2.19646 14.6261 2.30663 14.573 2.43549C13.5972 4.80234 11.0519 8.20416 8.65382 10.4451C8.40912 9.59515 7.62492 8.97134 6.69726 8.97134H3.68465C2.56189 8.97134 1.64844 9.8848 1.64844 11.0075V19.9638C1.64844 21.0865 2.56189 22 3.68465 22H6.69726C7.38409 22 7.99215 21.6578 8.36114 21.1353C8.91933 21.6723 9.65933 22 10.4702 22H18.0558C18.8944 22 19.6412 21.6429 20.2155 20.9674C20.6889 20.4105 21.0251 19.6581 21.1878 18.7917L22.3058 12.8357C22.4559 12.0365 22.2356 11.2315 21.6857 10.5687ZM7.32608 19.9638C7.32608 20.3106 7.04399 20.5927 6.69726 20.5927H3.68465C3.33792 20.5927 3.05579 20.3106 3.05579 19.9638V11.0076C3.05579 10.6608 3.33792 10.3787 3.68465 10.3787H6.69726C7.04399 10.3787 7.32608 10.6608 7.32608 11.0076V19.9638ZM20.9226 12.576L19.8046 18.5321C19.6176 19.5283 19.06 20.5927 18.0558 20.5927H10.4701C9.51252 20.5927 8.73347 19.7266 8.73347 18.6619V12.2523C11.3859 10.0503 14.3564 6.26853 15.6678 3.44196C16.3675 3.56035 16.5597 3.94988 16.6303 4.0929C17.087 5.01872 16.7079 7.15045 14.7965 9.64309C14.7165 9.74729 14.6674 9.87178 14.6545 10.0025C14.6417 10.1332 14.6657 10.2649 14.7238 10.3826C14.7819 10.5004 14.8718 10.5996 14.9833 10.6689C15.0948 10.7382 15.2235 10.775 15.3549 10.7749H19.1739C19.6929 10.7749 20.2537 11.0467 20.6026 11.4673C20.7991 11.7041 21.0142 12.0887 20.9226 12.576Z" fill="white"/>
</symbol>
<symbol id="kb-dislike" viewBox="0 0 24 24">
<path d="M21.6857 13.4313C21.071 14.1722 20.1085 14.6324 19.1739 14.6324H16.7014C17.2578 15.5191 17.6766 16.4114 17.9318 17.2611C18.3212 18.5577 18.3076 19.6879 17.8924 20.5297C17.4246 21.4778 16.4768 22 15.2235 22C15.0842 22 14.9479 21.9586 14.8321 21.8811C14.7163 21.8035 14.6261 21.6934 14.573 21.5645C13.5972 19.1977 11.0519 15.7958 8.65382 13.5549C8.40912 14.4049 7.62492 15.0287 6.69726 15.0287H3.68465C2.56189 15.0287 1.64844 14.1152 1.64844 12.9925V4.03621C1.64844 2.91346 2.56189 2 3.68465 2H6.69726C7.38409 2 7.99215 2.34221 8.36114 2.86469C8.91933 2.32765 9.65933 2 10.4702 2H18.0558C18.8944 2 19.6412 2.35707 20.2155 3.0326C20.6889 3.58951 21.0251 4.34187 21.1878 5.20831L22.3058 11.1643C22.4559 11.9635 22.2356 12.7685 21.6857 13.4313ZM7.32608 4.03617C7.32608 3.68943 7.04399 3.4073 6.69726 3.4073H3.68465C3.33792 3.4073 3.05579 3.68943 3.05579 4.03617V12.9924C3.05579 13.3392 3.33792 13.6213 3.68465 13.6213H6.69726C7.04399 13.6213 7.32608 13.3392 7.32608 12.9924V4.03617ZM20.9226 11.424L19.8046 5.46793C19.6176 4.47174 19.06 3.4073 18.0558 3.4073H10.4701C9.51252 3.4073 8.73347 4.27344 8.73347 5.3381V11.7477C11.3859 13.9497 14.3564 17.7315 15.6678 20.558C16.3675 20.4396 16.5597 20.0501 16.6303 19.9071C17.087 18.9813 16.7079 16.8495 14.7965 14.3569C14.7165 14.2527 14.6674 14.1282 14.6545 13.9975C14.6417 13.8668 14.6657 13.7351 14.7238 13.6174C14.7819 13.4996 14.8718 13.4004 14.9833 13.3311C15.0948 13.2618 15.2235 13.225 15.3549 13.2251H19.1739C19.6929 13.2251 20.2537 12.9533 20.6026 12.5327C20.7991 12.2959 21.0142 11.9113 20.9226 11.424Z" fill="white"/>
</symbol>
<symbol id="kb-cross" viewBox="0 0 32 32">
<path d="M8 24L16 16M16 16L24 8M16 16L8 8M16 16L24 24" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-clock" viewBox="0 0 16 16" fill="none">
<path d="M7.99994 5.37699V8.5353C7.99994 8.6474 8.05721 8.75173 8.15178 8.81191L9.96715 9.96715M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" stroke="#4E4B66" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-calendar" viewBox="0 0 16 16" fill="none">
<path d="M5.6001 2V3.27666M5.6001 4.4V3.27666M10.4001 2V3.27666M10.4001 4.4V3.27666M13.3759 6.8C13.4001 7.27269 13.4001 7.85323 13.4001 8.6C13.4001 10.2774 13.4001 11.1161 13.1261 11.7777C12.7607 12.6598 12.0599 13.3606 11.1778 13.726C10.5162 14 9.67749 14 8.0001 14C6.32271 14 5.48401 14 4.82244 13.726C3.94034 13.3606 3.23951 12.6598 2.87413 11.7777C2.6001 11.1161 2.6001 10.2774 2.6001 8.6C2.6001 7.85323 2.6001 7.27269 2.62428 6.8M13.3759 6.8C13.3458 6.21094 13.2781 5.78938 13.1261 5.42234C12.7607 4.54024 12.0599 3.83941 11.1778 3.47403C10.9489 3.37923 10.6988 3.31722 10.4001 3.27666M13.3759 6.8L2.62428 6.8M2.62428 6.8C2.65441 6.21094 2.7221 5.78938 2.87413 5.42234C3.23951 4.54024 3.94034 3.83941 4.82244 3.47403C5.05132 3.37923 5.30141 3.31722 5.6001 3.27666M5.6001 3.27666C6.16473 3.2 6.90304 3.2 8.0001 3.2C9.09716 3.2 9.83546 3.2 10.4001 3.27666M5.6061 9.2H5.6001M5.6061 11.6H5.6001M8.0061 9.2H8.0001M8.0061 11.6H8.0001M10.4061 9.2H10.4001M10.4061 11.6H10.4001" stroke="#4E4B66" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-primary-sm-bot" viewBox="0 0 24 24" fill="none">
<rect width="24" height="24" rx="12" fill="#254EA0"/>
<path d="M12 5.33325V8.66659M12 8.66659H10.6667C9.42581 8.66659 8.80539 8.66659 8.30328 8.82973C7.28848 9.15946 6.49287 9.95507 6.16314 10.9699C6 11.472 6 12.0924 6 13.3333C6 14.5741 6 15.1945 6.16314 15.6966C6.49287 16.7114 7.28848 17.507 8.30328 17.8368C8.80539 17.9999 9.42581 17.9999 10.6667 17.9999H13.3333C14.5742 17.9999 15.1946 17.9999 15.6967 17.8368C16.7115 17.507 17.5071 16.7114 17.8369 15.6966C18 15.1945 18 14.5741 18 13.3333C18 12.0924 18 11.472 17.8369 10.9699C17.5071 9.95507 16.7115 9.15946 15.6967 8.82973C15.1946 8.66659 14.5742 8.66659 13.3333 8.66659H12ZM10 13.3333C9.63181 13.3333 9.33333 13.0348 9.33333 12.6666C9.33333 12.2984 9.63181 11.9999 10 11.9999C10.3682 11.9999 10.6667 12.2984 10.6667 12.6666C10.6667 13.0348 10.3682 13.3333 10 13.3333ZM14 13.3333C13.6318 13.3333 13.3333 13.0348 13.3333 12.6666C13.3333 12.2984 13.6318 11.9999 14 11.9999C14.3682 11.9999 14.6667 12.2984 14.6667 12.6666C14.6667 13.0348 14.3682 13.3333 14 13.3333Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-arrow-right" viewBox="0 0 24 24" fill="none">
<path d="M9 17.9999C11.1808 16.4229 13.1364 14.577 14.8172 12.5101C15.0609 12.2103 15.0609 11.7896 14.8172 11.4898C13.1364 9.42287 11.1808 7.57695 9 5.99994" stroke="#254EA0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-arrow-down" viewBox="0 0 16 16" fill="none">
<path d="M4 6C5.05134 7.45386 6.28196 8.7576 7.65992 9.87811C7.85978 10.0406 8.14022 10.0406 8.34008 9.87811C9.71804 8.7576 10.9487 7.45386 12 6" stroke="#14142B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="kb-support" viewBox="0 0 64 60" fill="none">
<g clip-path="url(#clip0_2199_2795)">
<circle cx="31.9998" cy="35.2171" r="22.6087" fill="white"/>
<path d="M33.1306 8.19552C44.4749 8.54388 54.5862 16.4512 57.2289 27.6164C60.2636 27.633 62.7767 29.8685 63.0332 32.9337C63.1628 34.4847 63.2054 38.1338 62.8636 39.5684C62.301 41.929 60.2993 43.6087 57.9297 43.9238C56.2662 51.0583 50.1028 57.1459 42.6706 57.6474C42.1636 58.5805 41.4836 59.1468 40.3958 59.2291C39.4767 59.2982 37.7862 59.3359 36.9984 58.8772C35.0575 57.7481 35.5454 54.3782 37.7906 54.0684C38.5262 53.9669 40.7558 53.987 41.3915 54.2802C41.9402 54.5332 42.3288 55.236 42.521 55.3306C43.1767 55.6535 46.2541 54.5892 47.0149 54.2513C51.4141 52.2977 54.4019 48.2687 55.7271 43.6866C54.5732 43.2087 53.7384 42.3991 52.9923 41.4179L53.3906 38.1741C53.4184 35.5745 53.4515 32.967 52.9158 30.4173C53.428 29.5289 54.1775 28.8243 55.0306 28.2763C53.6993 22.4618 50.1089 17.4657 45.1236 14.2875C37.3819 9.35177 27.0341 9.28262 19.2254 14.1125C14.1445 17.2547 10.3662 22.383 9.05407 28.2711C9.88276 28.8269 10.601 29.5009 11.1984 30.3079C10.6784 32.918 10.5602 35.7758 10.6932 38.4419C10.7436 39.4432 11.0019 40.4717 11.001 41.4564C10.0758 42.6109 9.15494 43.4844 7.65755 43.7829C4.38016 44.4359 1.28103 41.8153 1.04016 38.5294C0.927113 36.9916 0.877545 33.1394 1.28189 31.7635C1.83407 29.8869 3.48624 28.3017 5.3732 27.8291C5.88798 27.7004 6.41407 27.7179 6.91581 27.5437C9.49842 16.453 19.6323 8.57714 30.8697 8.19727V5.52765C28.7828 4.4563 29.328 1.13371 31.6923 0.928893C34.5341 0.682938 35.4906 4.16483 33.1306 5.52765V8.19727V8.19552Z" fill="#ABFEE3"/>
<path d="M23.4599 26.5149C29.0477 26.1508 34.9477 26.7372 40.5686 26.4851C52.2599 27.1696 52.5129 44.0775 41.1729 45.3939C35.2303 45.0937 28.8938 45.7966 22.9964 45.3983C11.9121 44.65 11.3851 27.3009 23.4599 26.514V26.5149ZM23.199 31.68C17.7581 32.2375 18.4181 40.5886 23.8677 40.3182C29.6564 40.0302 28.9355 31.0926 23.199 31.68ZM39.8938 31.6782C34.0964 32.3216 35.4347 41.5558 41.3947 40.1912C46.4564 39.0324 45.2164 31.0883 39.8938 31.6782Z" fill="#254EA0"/>
<path d="M26.1491 48.1271C27.1109 47.9057 27.5352 48.7144 28.2344 49.23C30.4196 50.8414 33.3917 51.0803 35.6457 49.4575C36.3717 48.9341 37.1639 47.6133 38.1709 48.2435C39.6874 49.1932 37.6326 50.7617 36.8109 51.3306C34.2022 53.1364 30.523 53.1845 27.8004 51.5924C27.2483 51.2694 25.7761 50.2208 25.5317 49.6746C25.2874 49.1284 25.5109 48.2741 26.1491 48.1271Z" fill="#254EA0"/>
<path d="M23.1998 31.6791C28.9363 31.0918 29.6572 40.0293 23.8685 40.3173C18.4189 40.5886 17.7589 32.2366 23.1998 31.6791ZM23.1954 33.687C20.3867 34.1316 20.952 38.7838 24.1102 38.284C26.9154 37.8402 26.4137 33.1776 23.1954 33.687Z" fill="white"/>
<path d="M23.1943 33.6878C26.4126 33.1783 26.9143 37.841 24.1091 38.2848C20.9509 38.7846 20.3856 34.1324 23.1943 33.6878Z" fill="#254EA0"/>
<path d="M38.7268 34.3108C40.8373 32.218 44.1112 35.3576 42.0894 37.5642C39.9225 39.9292 36.5625 36.4578 38.7268 34.3108Z" fill="#254EA0"/>
</g>
<defs>
<clipPath id="clip0_2199_2795">
<rect width="64" height="60" fill="white"/>
</clipPath>
</defs>
</symbol>
<symbol id="kb-redes-big-avatar" viewBox="0 0 60 60" fill="none">
<path d="M0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30Z" fill="white"/>
<rect x="16.5308" y="17.1523" width="26.6939" height="25.9638" rx="9" fill="#254EA0"/>
<path d="M24.551 21.097C27.8544 20.7279 31.5383 20.6745 35.1121 21.083C37.982 21.4109 40.1613 23.8056 40.3759 26.627C40.5401 28.7881 40.5481 32.4273 40.3759 34.5832C40.1551 37.3478 38.0093 39.7555 35.2101 40.1368C32.017 40.4829 27.9303 40.4368 24.528 40.1368C21.6007 39.8788 19.5609 37.1798 19.3613 34.4091C19.2077 32.2629 19.2236 29.0409 19.3569 26.885C19.5326 24.0347 21.5795 21.4293 24.551 21.097ZM24.8123 28.3526C22.6233 28.7164 22.6286 32.3844 24.8874 32.6967C28.3012 33.169 28.4019 27.7552 24.8123 28.3526ZM33.731 28.3526C33.0043 28.4873 32.2722 29.333 32.1725 30.0449C31.8148 32.6013 35.0203 33.7383 36.2433 31.6279C37.2967 29.8105 35.762 27.9774 33.731 28.3526ZM27.8685 35.6475C27.548 35.3773 27.178 34.64 26.5996 35.2828C26.1802 35.7481 26.6128 36.2344 26.9528 36.5991C28.3162 38.0614 30.3666 38.2801 32.017 37.151C32.47 36.8414 33.746 35.7385 33.0467 35.1998C32.3685 34.6776 32.0276 35.47 31.6356 35.8111C30.3764 36.9078 29.0606 36.6542 27.8685 35.6475Z" fill="#ABFEE3"/>
<path d="M45.6654 26.4277C44.1721 20.4411 39.7598 15.2539 33.6057 13.9252C31.3045 13.428 28.5562 13.4374 26.2535 13.9252C20.1516 15.2187 15.5672 20.3902 14.1922 26.3877C15.0647 26.3588 15.8951 26.9256 16.0447 27.8167C16.3298 29.5133 16.3669 32.2093 16.0564 33.6631C16.0314 33.8502 15.9512 34.0107 15.8632 34.1736C15.6988 34.4789 15.4729 34.5956 15.2758 34.8438C16.2363 40.168 20.5785 45.0067 26.139 45.3794C26.3937 44.67 26.8572 44.0233 27.6518 43.9082C28.3521 43.8072 30.2685 43.8072 30.9812 43.8878C33.0215 44.1188 33.4507 47.3165 31.3855 48.0525C30.7639 48.274 28.0631 48.2873 27.4391 48.0744C26.8642 47.8779 26.3252 47.3932 26.1803 46.795C19.9335 46.3957 14.8668 40.9752 13.8915 34.9291C12.5111 34.7389 11.3224 33.8518 10.7771 32.563C10.1266 31.026 10.3167 28.5385 11.5047 27.2874C11.7243 27.0556 12.0601 26.9068 12.2494 26.7048C12.5205 26.4151 12.6849 25.2626 12.8313 24.7842C15.6466 15.5945 24.0902 10.3228 33.6057 12.1244C39.9133 13.3192 45.1022 18.4618 46.9329 24.5673C47.0684 25.0207 47.278 26.3118 47.4205 26.5827C47.4813 26.6986 48.0912 27.0877 48.2766 27.2881C50.1034 29.2659 49.7318 33.4955 47.0964 34.6379C45.8165 35.1922 43.8285 34.9589 43.6408 33.2794C43.5185 32.1895 43.5162 29.1273 43.6611 28.0539C43.8021 27.0102 44.6005 26.2969 45.6654 26.4277Z" fill="#254EA0"/>
</symbol>
<symbol id="kb-redes-sm-avatar" viewBox="0 0 24 24" fill="none">
<rect width="24" height="24" rx="12" fill="#254EA0"/>
<rect x="4.4187" y="4.32666" width="15.1265" height="14.9701" rx="5.33333" fill="white"/>
<path d="M8.96398 6.60068C10.8359 6.38788 12.9235 6.35712 14.9486 6.59261C16.5749 6.78172 17.8098 8.1624 17.9314 9.78918C18.0245 11.0352 18.029 13.1335 17.9314 14.3765C17.8063 15.9705 16.5904 17.3588 15.0042 17.5786C13.1948 17.7782 10.879 17.7516 8.95097 17.5786C7.29218 17.4299 6.13629 15.8737 6.0232 14.2762C5.93613 13.0387 5.94514 11.181 6.02069 9.93794C6.12027 8.29452 7.28018 6.7923 8.96398 6.60068ZM9.1121 10.7841C7.87163 10.9939 7.87463 13.1088 9.15463 13.2888C11.0891 13.5611 11.1462 10.4397 9.1121 10.7841ZM14.166 10.7841C13.7542 10.8618 13.3394 11.3494 13.2828 11.7599C13.0802 13.2338 14.8966 13.8894 15.5896 12.6726C16.1866 11.6247 15.3169 10.5678 14.166 10.7841ZM10.8439 14.9902C10.6623 14.8344 10.4526 14.4093 10.1249 14.7799C9.8872 15.0482 10.1324 15.3286 10.325 15.5389C11.0976 16.382 12.2595 16.5081 13.1948 15.857C13.4515 15.6785 14.1745 15.0427 13.7782 14.732C13.3939 14.431 13.2008 14.8878 12.9786 15.0845C12.265 15.7169 11.5195 15.5706 10.8439 14.9902Z" fill="#254EA0"/>
</symbol>
</svg>
<div class="kitan-bot-container-fadeshadow fadeout"></div>
<div class="kitan-bot-container">
<header class="kb-header kb-state-main">
<div class="kb-row">
<div class="kb-col head-info">
<div class="header-img">
<svg class="kb-icon">
<use href="#kb-redes-big-avatar"></use>
</svg>
</div>
<h3 class="heading">Чат-бот VMK GROUP</h3>
</div>
<div class="kb-col chat-control-btns">
<div class="kb-row">
<div class="kb-col do-rate">
<button class="like">
<svg class="kb-icon" width="24" height="24">
<use href="#kb-like"></use>
</svg>
</button>
<button class="dislike">
<svg class="kb-icon" width="24" height="24">
<use href="#kb-dislike"></use>
</svg>
</button>
</div>
<div class="kb-col">
<button class="clear kb-chat-clear">
<svg class="kb-icon" width="24" height="24">
<use href="#kb-trash"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</header>
<script>
document.addEventListener("DOMContentLoaded", e => {
const chat = document.querySelector(".chat-container");
const header = document.querySelector(".kb-header");
setInterval(() => {
if(chat.querySelectorAll(".message.user").length) {
if(!header.classList.contains("kb-state-compact")) {
header.classList.remove("kb-state-main");
header.classList.add("kb-state-compact");
}
} else {
if(!header.classList.contains("kb-state-main")) {
header.classList.remove("kb-state-compact");
header.classList.add("kb-state-main");
}
}
}, 100);
document.querySelector(".kb-chat-clear").addEventListener("click", e => {
let els = document.querySelectorAll(".chat-container > div");
for(let i=0; i<els.length; i++) {
els[i].remove();
}
resetChat();
const msgid = makeAssistantMsg();
sendMessages(
msgid,
prepareUserMessage("/start"),
function(resp, msgid){
if(resp["status"] != "done") {
return;
}
let content = marked.parse(resp["content"]).trim();
updateMsgContent(msgid, content);
const freqAsks = specialViewMap.frequentlyAsked({
questions: [
"Партнерство",
"Освіта",
"Статус замовлень",
"Акції/промо",
]
});
document.querySelector(".chat-container").appendChild(freqAsks);
scrollMsgsContainerDown();
updateMsgHistory();
}
);
});
document.querySelector(".chat-control-btns .like").addEventListener("click", e => {
const channel_name = "kitan_bot_" + getChatId();
doAction("logs.rating", {
"channel_name": channel_name,
"rating": 1
}, resp => {});
localStorage.setItem("user_rating", 1);
e.currentTarget.classList.add("active");
document.querySelector(".chat-control-btns .dislike").classList.remove("active");
});
document.querySelector(".chat-control-btns .dislike").addEventListener("click", e => {
const channel_name = "kitan_bot_" + getChatId();
doAction("logs.rating", {
"channel_name": channel_name,
"rating": -1
}, resp => {});
localStorage.setItem("user_rating", -1);
e.currentTarget.classList.add("active");
document.querySelector(".chat-control-btns .like").classList.remove("active");
});
if(localStorage.getItem("user_rating") === "1") {
document.querySelector(".chat-control-btns .like").classList.add("active");
} else if(localStorage.getItem("user_rating") === "-1") {
document.querySelector(".chat-control-btns .dislike").classList.add("active");
}
});
</script>
<div class="kb-body">
<div class="chat-container">
<!-- <button class="kb-btn">Default</button>
<button class="kb-btn large">Large btn</button>
<button class="kb-btn large disabled">Large btn</button>
<button class="kb-btn tricky">Tricky</button>
<button class="kb-btn tricky">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-star"></use>
</svg>
Tricky
</button>
<a href="#" class="kb-btn tricky">
Купити
<svg class="kb-icon" width="24" height="24">
<use href="#kb-arrow-right"></use>
</svg>
</a> -->
<div class="message agent assistant">
<div class="leftside">
<div class="avatar">
<svg class="kb-icon" width="32" height="32">
<use href="#kb-redes-sm-avatar"></use>
</svg>
</div>
</div>
<div class="rightside">
<div class="head">
<div class="name">Bot</div>
</div>
<div class="kb-card bubble first">
Звісно! Ось список частих запитань, які мені ставлять:
</div>
<div class="kb-card bubble">
Оберіть категорію, яка Вас цікавить, і ми допоможемо вирішити питання
</div>
<div class="foot">
<span class="timestamp">15:47</span>
</div>
</div>
</div>
<div class="message agent assistant state-waiting">
<div class="leftside">
<div class="avatar">
<svg class="kb-icon" width="32" height="32">
<use href="#kb-redes-sm-avatar"></use>
</svg>
</div>
</div>
<div class="rightside">
<div class="head">
<div class="name">Bot</div>
</div>
<div class="kb-card bubble first">
<span class="waiting">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div class="foot">
<span class="timestamp">15:47</span>
</div>
</div>
</div>
<div class="message user">
<div class="leftside">
<div class="avatar">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-user"></use>
</svg>
</div>
</div>
<div class="rightside">
<div class="kb-card bubble first">
Цікавить програма курсу Ревіталізація шкіри голови та волосся
</div>
<div class="foot">
<span class="timestamp">15:47</span>
</div>
</div>
</div>
<div class="message agent">
<div class="leftside">
<div class="avatar">
<svg class="kb-icon" width="32" height="32">
<use href="#kb-redes-sm-avatar"></use>
</svg>
</div>
</div>
<div class="rightside">
<div class="head">
<div class="name">Bot</div>
</div>
<div class="kb-card bubble first">
Звісно! Ось список частих запитань, які мені ставлять:
</div>
<div class="kb-card bubble">
Оберіть категорію, яка Вас цікавить, і ми допоможемо вирішити питання
</div>
<button class="kb-btn large call-meat">Чат з консультантом</button>
<div class="foot">
<span class="timestamp">15:47</span>
</div>
</div>
</div>
<div class="frequently-asked">
<h4 class="heading">Поширені запити:</h4>
<div class="questions-container">
<button class="kb-btn tricky question">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-star"></use>
</svg>
Партнерство
</button>
<button class="kb-btn tricky question">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-star"></use>
</svg>
Освіта
</button>
<button class="kb-btn tricky question">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-star"></use>
</svg>
Статус замовлень
</button>
<button class="kb-btn tricky question">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-star"></use>
</svg>
Акції/промо
</button>
<button class="kb-btn tricky question">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-star"></use>
</svg>
Часті запитання
</button>
</div>
</div>
<div class="frequently-questions">
<h4 class="heading">Часті запитання:</h4>
<div class="questions-container">
<button class="kb-btn tricky question">
Мені потрібна допомога у виборі засобу догляду
</button>
<button class="kb-btn tricky question">
Які умови співпраці?
</button>
<button class="kb-btn tricky question">
Я хочу записатись на курс
</button>
<button class="kb-btn tricky question">
Де можна отримати консультацію?
</button>
<button class="kb-btn tricky question">
Який статус мого замовлення?
</button>
</div>
</div>
<div class="bot-group">
<div class="head">
<div class="name">Bot</div>
</div>
<div class="kb-card kb-event-card">
<div class="kb-heading">Ревіталізація шкіри голови та волосся</div>
<div class="tags">
<span class="tag">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-calendar"></use>
</svg>
<span class="text">25 травня 2025</span>
</span>
<span class="tag">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-clock"></use>
</svg>
<span class="text">19:00</span>
</span>
<span class="tag">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-map-marker"></use>
</svg>
<span class="text">м. Одесса, вул. Гагарінське плато, 5Б</span>
</span>
</div>
<button class="kb-btn tricky reg-to-event">Зареєструватись</button>
</div>
</div>
<div class="kb-card kb-product-card">
<h4 class="heading">Шампунь для частого використання Nubea Synergo, 1000 мл</h4>
<div class="actions-group">
<div class="price">
<span class="old">3 520 грн</span>
<span class="now">2 000 грн</span>
</div>
<div>
<a href="#" class="kb-btn tricky go-to-product">
Купити
<svg class="kb-icon" width="24" height="24">
<use href="#kb-arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="kb-card kb-auth-card">
<div class="description">Введіть номер телефону для перевірки статусу замовлення</div>
<div class="kb-input-form">
<label for="kb-phone" class="kb-input-label">Номер телефону</label>
<div class="kb-input-container">
<div class="prefix">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-ua-flag"></use>
</svg>
<span>+380</span>
<div class="sep"></div>
</div>
<input type="phone" id="kb-phone" maxlength="9" placeholder="000000000" class="kb-input">
</div>
</div>
<button class="kb-btn large disabled kb-auth-btn">Відправити</button>
</div>
<script>
const kbAuthBtn = document.querySelector(".kb-auth-btn");
document.querySelector("#kb-phone").addEventListener("input", e => {
e.currentTarget.value = e.currentTarget.value.replace(/\D/g, '');
let val = e.currentTarget.value;
if(val.length < 9) {
kbAuthBtn.classList.add("disabled");
} else {
kbAuthBtn.classList.remove("disabled");
}
});
</script>
<div class="kb-card kb-signup-card">
<h4 class="kb-card-heading">Ваші дані</h4>
<div class="description">Введіть номер телефону для перевірки статусу замовлення</div>
<div class="kb-form-group">
<div class="kb-input-form">
<label for="kb-name" class="kb-input-label">Ім’я</label>
<div class="kb-input-container">
<input
type="text"
id="kb-name"
maxlength="12"
placeholder="Введіть значення"
class="kb-input"
>
</div>
</div>
<div class="kb-input-form">
<label for="kb-surname" class="kb-input-label">Прізвище</label>
<div class="kb-input-container">
<input
type="text"
id="kb-surname"
maxlength="12"
placeholder="Введіть значення"
class="kb-input"
>
</div>
</div>
<div class="kb-input-form">
<label for="kb-phone" class="kb-input-label">Номер телефону</label>
<div class="kb-input-container">
<div class="prefix">
<svg class="kb-icon" width="16" height="16">
<use href="#kb-ua-flag"></use>
</svg>
<span>+380</span>
<div class="sep"></div>
</div>
<input type="phone" id="kb-phone" maxlength="9" placeholder="000000000" class="kb-input">
</div>
</div>
<div class="kb-input-form">
<label for="kb-city" class="kb-input-label">Місто, де працюєте</label>
<div class="kb-input-container">
<select name="city" id="kb-city" class="kb-input">
<option value="0">Оберіть місто</option>
<option value="Київ">Київ</option>
<option value="Житомир">Житомир</option>
<option value="Львів">Львів</option>
<option value="Хмельницьк">Хмельницьк</option>
<option value="Луцьк">Луцьк</option>
</select>
</div>
</div>
<div class="kb-input-form">
<label for="kb-district" class="kb-input-label">Район міста, де працюєте</label>
<div class="kb-input-container">
<select name="district" id="kb-district" class="kb-input">
<option value="0">Оберіть район міста</option>
<option value="Район 1">Район 1</option>
<option value="Район 2">Район 2</option>
<option value="Район 3">Район 3</option>
</select>
</div>
</div>
<div class="kb-input-form">
<label for="kb-specialization" class="kb-input-label">Спеціалізація</label>
<div class="kb-input-container">
<input
type="text"
id="kb-specialization"
maxlength="12"
placeholder="Введіть значення"
class="kb-input"
>
</div>
</div>
<div class="kb-input-form">
<label for="kb-buissness-place" class="kb-input-label">Найменування місця ведення діяльності</label>
<div class="kb-input-container">
<input
type="text"
id="kb-buissness-place"
maxlength="12"
placeholder="Введіть значення"
class="kb-input"
>
</div>
</div>
<div class="kb-input-form">
<label for="kb-brand" class="kb-input-label">Бренд</label>
<div class="kb-input-container">
<select name="brand" id="kb-brand" class="kb-input">
<option value="0">Оберіть бренд</option>
<option value="Бренд 1">Бренд 1</option>
<option value="Бренд 2">Бренд 2</option>
</select>
</div>
</div>
</div>
<button class="kb-btn large send-form disabled">Відправити</button>
</div>
</div>
</div>
<footer class="kb-footer">
<div class="msg-form-wrap">
<div class="msg-form">
<div class="msg-input">
<textarea id="msg-area" rows="1" class="msg-area" placeholder="Введіть повідомлення"></textarea>
</div>
<div class="msg-send-btn-wrap">
<button class="msg-send">
<svg class="kb-icon" width="24" height="24">
<use href="#kb-send"></use>
</svg>
</button>
</div>
</div>
<script>
let textarea = document.querySelector("#msg-area");
textarea.addEventListener('input', e => {
textarea.style.height = 'auto';
if(!textarea.value) {
textarea.style.height = "20px";
} else {
textarea.style.height = textarea.scrollHeight + 'px';
}
});
textarea.addEventListener('focus', e => {
e.currentTarget.parentNode.parentNode.classList.add("focused");
});
textarea.addEventListener('blur', e => {
e.currentTarget.parentNode.parentNode.classList.remove("focused");
});
textarea.addEventListener('input', e => {
if(e.currentTarget.value.length) {
e.currentTarget.parentNode.parentNode.classList.add("ready-to-send");
} else {
e.currentTarget.parentNode.parentNode.classList.remove("ready-to-send");
}
});
textarea.addEventListener("keydown", e => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
document.querySelector(".msg-send").click();
}
});
document.querySelector(".msg-send").addEventListener("click", e => {
let msgtext = textarea.value;
if(!msgtext.length) {
return;
}
if(!document.querySelector(".msg-form").classList.contains("ready-to-send")) {
return;
}
textarea.value = "";
textarea.innerHTML = "";
textarea.style.height = "20px";
const chat = document.querySelector(".chat-container");
chat.appendChild(createRenderBubble("user", true, msgtext).message);
scrollMsgsContainerDown();
const msgid = makeAssistantMsg();
sendMessages(
msgid,
prepareUserMessage(msgtext),
function(resp, msgid){
if(resp["status"] != "done") {
return;
}
let specialViewContent = getSpecialViewFromMsg(resp["content"]);
let content = marked.parse(resp["content"].split("front_special_view")[0]).trim();
updateMsgContent(msgid, content);
if(specialViewContent) {
document.querySelector(".chat-container").appendChild(specialViewContent);
scrollMsgsContainerDown();
updateMsgHistory();
}
}
);
});
function makeAssistantMsg() {
const msg = createRenderBubble("assistant", true, "");
const chat = document.querySelector(".chat-container");
chat.appendChild(msg.message);
scrollMsgsContainerDown();
updateMsgHistory();
return msg.id;
}
function scrollMsgsContainerDown() {
const container = document.querySelector(".chat-container");
container.scrollTo({
top: container.scrollHeight,
behavior: 'smooth'
});
}
</script>
</div>
<div class="bottom">
Чат-бот може надавати неточну інформацію
</div>
</footer>
</div>
<button class="kitan-bot-btn kb-state-closed">
<svg class="kb-icon for-opened" width="42" height="42">
<use href="#kb-cross"></use>
</svg>
<svg class="kb-icon for-closed" width="48" height="48">
<use href="#kb-support"></use>
</svg>
</button>
<script>
document.addEventListener("DOMContentLoaded", e => {
document.querySelector(".kitan-bot-btn").addEventListener("click", e => {
const self = e.currentTarget;
if(self.classList.contains("kb-state-closed")) {
kitanBotOpen();
} else {
kitanBotClose();
}
});
});
function kitanBotOpen() {
const container = document.querySelector(".kitan-bot-container");
const shadow = document.querySelector(".kitan-bot-container-fadeshadow");
const btn = document.querySelector(".kitan-bot-btn");
restoreMsgStorage();
shadow.classList.remove("fadeout");
setTimeout(() => {
container.classList.add("fadein");
}, 150);
btn.classList.remove("kb-state-closed");
btn.classList.add("kb-state-opened");
setTimeout(() => {
scrollMsgsContainerDown();
}, 100);
}
function kitanBotClose() {
const container = document.querySelector(".kitan-bot-container");
const shadow = document.querySelector(".kitan-bot-container-fadeshadow");
const btn = document.querySelector(".kitan-bot-btn");
container.classList.remove("fadein");
setTimeout(() => {
shadow.classList.add("fadeout");
}, 150);
btn.classList.remove("kb-state-opened");
btn.classList.add("kb-state-closed");
}
</script>
</aside>
</body>
</html>
