vowchat-widget
Version:
vowchat widget
1,197 lines (1,105 loc) • 82.2 kB
JavaScript
class R {
/**
* Creates a new StateManager instance.
* @param initialState - The initial state of the application.
* @param middlewares - Optional middlewares to process state updates.
*/
constructor(e, o = []) {
this.initialState = { ...e }, this.state = { ...e }, this.listeners = [], this.middlewares = o;
}
/**
* Gets the current state.
* @returns A copy of the current state.
*/
getState() {
return { ...this.state };
}
/**
* Updates the state.
* @param updater - A partial object or function to update the state.
*/
setState(e) {
const o = typeof e == "function" ? e(this.state) : e;
let n = { ...this.state, ...o };
for (const t of this.middlewares)
n = t(n, this.state);
this.state = n, this.notifyListeners();
}
/**
* Resets the state to its initial value.
*/
resetState() {
this.state = { ...this.initialState }, this.notifyListeners();
}
/**
* Subscribes to state changes.
* @param listener - A function that runs when the state changes.
* @returns A function to unsubscribe the listener.
*/
subscribe(e) {
return this.listeners.push(e), () => {
this.listeners = this.listeners.filter((o) => o !== e);
};
}
/**
* Subscribe to specific state changes with a selector
* @param selector Function that returns the relevant state slice
* @param listener Callback with previous and current values of selected state
* @returns Unsubscribe function
*/
subscribeWithSelector(e, o) {
let n;
return this.subscribe((a) => {
const s = e(a);
M(n, s) || (o(n, s), n = s);
});
}
/**
* Notifies all listeners of state changes.
*/
notifyListeners() {
for (const e of this.listeners)
e(this.getState());
}
}
function M(i, e) {
if (i === e) return !0;
if (typeof i != "object" || i === null || typeof e != "object" || e === null)
return !1;
const o = Object.keys(i), n = Object.keys(e);
return o.length !== n.length ? !1 : o.every((t) => i[t] === e[t]);
}
const q = {
isOpen: !1,
messages: [],
voiceNote: {
isRecording: !1,
audioBlob: null,
duration: 0,
error: null
},
customer_details: {
username: null,
email: null
},
socket_state: {
connection_state: "disconnected",
error_message: null
},
sessionID: null,
fileID: null,
chat_id: null,
orgID: null,
botName: "",
widgetConfig: {
brand_color: "",
secondary_color: "",
font_family: "",
brand_name: "",
brand_logo: "",
chat_icon: "",
icon_color: "",
quick_prompts: ["What are your pricing plans?", "How do I contact support?", "Is there a free trial available?", "What features does this platform offer?"],
chat_icon_index: 0
},
orgName: null
}, d = new R(q), A = 12e4;
async function O() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia)
return null;
try {
return await navigator.mediaDevices.getUserMedia({ audio: !0 });
} catch (i) {
switch (i.name) {
case "NotAllowedError":
console.error("User denied microphone access");
break;
case "NotFoundError":
console.error("No microphone device found");
break;
case "NotReadableError":
console.error("Microphone is blocked or in use by another application");
break;
default:
console.error("Unexpected error accessing microphone:", i.message);
}
return null;
}
}
function j(i, e) {
requestAnimationFrame(() => {
const o = i.toString().padStart(2, "0"), n = e.toString().padStart(2, "0");
document.querySelectorAll("[data-minutes]").forEach((t) => {
t.textContent = o;
}), document.querySelectorAll("[data-seconds]").forEach((t) => {
t.textContent = n;
});
});
}
function H(i) {
const e = Date.now(), o = { isTracking: !0 };
let n;
function t() {
if (!o.isTracking) return;
const a = Date.now() - e, s = Math.floor(a / 1e3), r = Math.floor(s / 60), c = s % 60;
j(r, c), i.setState({
voiceNote: {
...i.getState().voiceNote,
duration: s
}
}), a < A ? (n && clearTimeout(n), n = setTimeout(t, 1e3 - a % 1e3)) : o.isTracking = !1;
}
return setTimeout(t, 0), () => {
n && clearTimeout(n), o.isTracking = !1;
};
}
function I(i, e, o) {
const n = o.getState().voiceNote.stopTracking;
i && i.state !== "inactive" && (i.stop(), e.getTracks().forEach((s) => s.stop())), n && n();
const t = document.getElementById(
"voice-message-container"
), a = document.getElementById("send-btn");
t && t.classList.remove("recording"), a && (a.style.display = "block"), o.setState({
voiceNote: {
...o.getState().voiceNote,
isRecording: !1,
recorder: void 0,
micStream: void 0
}
});
}
function $(i, e) {
var s;
const o = document.querySelector(".playback-controls"), n = document.getElementById("play-btn"), t = document.querySelector(".progress-bar");
if (!o || !n || !t) return;
o.style.display = "flex";
let a = (s = i.getState().voiceNote.playback) == null ? void 0 : s.audio;
a || (a = new Audio(URL.createObjectURL(e)), i.setState({
voiceNote: {
...i.getState().voiceNote,
playback: {
isPlaying: !1,
audio: a
}
}
})), a.addEventListener("timeupdate", () => {
const r = a.currentTime / a.duration * 100;
t.style.width = `${r}%`;
}), a.addEventListener("ended", () => {
var r;
i.setState({
voiceNote: {
...i.getState().voiceNote,
playback: {
...i.getState().voiceNote.playback,
isPlaying: !1
}
}
}), (r = n == null ? void 0 : n.querySelector("svg path")) == null || r.setAttribute("d", "M8 5v14l11-7z");
}), n.onclick = () => {
var c, g, h;
const r = (c = i.getState().voiceNote.playback) == null ? void 0 : c.isPlaying;
r ? (a == null || a.pause(), (g = n.querySelector("svg path")) == null || g.setAttribute("d", "M8 5v14l11-7z")) : (a == null || a.play(), (h = n.querySelector("svg path")) == null || h.setAttribute("d", "M6 4h4v16H6zm8 0h4v16h-4z")), i.setState({
voiceNote: {
...i.getState().voiceNote,
playback: {
...i.getState().voiceNote.playback,
isPlaying: !r
}
}
});
};
}
async function W(i) {
const e = await O();
if (!e)
return i.setState({
voiceNote: {
...i.getState().voiceNote,
isRecording: !1,
error: "Failed to access microphone"
}
}), null;
let o, n = [];
try {
return o = new MediaRecorder(e, {
mimeType: "audio/webm; codecs=opus",
audioBitsPerSecond: 128e3
}), o.ondataavailable = (t) => {
t.data.size > 0 && n.push(t.data);
}, o.onstop = () => {
const t = new Blob(n, { type: "audio/webm" });
$(i, t), i.setState({
voiceNote: {
...i.getState().voiceNote,
isRecording: !1,
audioBlob: t
}
});
}, o.onerror = (t) => {
i.setState({
voiceNote: {
...i.getState().voiceNote,
isRecording: !1,
error: "Error Recording"
}
});
}, o.onstart = () => {
let t = new (window.AudioContext || window.webkitAudioContext)();
const a = t.sampleRate, r = t.createMediaStreamSource(e).channelCount, c = H(i);
i.setState({
voiceNote: {
...i.getState().voiceNote,
stopTracking: c,
isRecording: !0,
audioBlob: null,
duration: 0,
error: null,
samplerate: a,
channels: r
}
});
}, o.start(), setTimeout(
() => I(o, e, i),
A
), { recorder: o, micStream: e };
} catch (t) {
return i.setState({
voiceNote: {
...i.getState().voiceNote,
isRecording: !1,
error: t.message
}
}), null;
}
}
function P(i) {
const e = Math.floor(i / 60), o = Math.floor(i % 60);
return `${e}:${o.toString().padStart(2, "0")}`;
}
const U = (i) => {
const e = document.documentElement;
Object.entries(i).forEach(([o, n]) => {
e.style.setProperty(o, n);
});
};
function V(i, e) {
var s, r, c, g, h, w, u, b, y, C, l;
const o = i.getState();
U({
"--brand-color": ((s = o.widgetConfig) == null ? void 0 : s.brand_color) || "#3B297F",
"--secondary-color": ((r = o.widgetConfig) == null ? void 0 : r.secondary_color) || ((c = o.widgetConfig) != null && c.brand_color ? `${(g = o.widgetConfig) == null ? void 0 : g.brand_color}CC` : "#AF52DE"),
"--font-family": ((h = o.widgetConfig) == null ? void 0 : h.font_family) || "-apple-system, BlinkMacSystemFont, sans-serif"
});
const n = document.createElement("div");
n.id = "vowchat-widget-container", n.className = "vowchat-widget";
const t = ((w = o.widgetConfig) == null ? void 0 : w.chat_icon) || "https://www.unpkg.com/vowwchatt-widget/assets/vowchat-chat-icon.png", a = ((u = o.widgetConfig) == null ? void 0 : u.brand_logo) || "https://www.unpkg.com/vowwchatt-widget/assets/vowchat-purple-logo.png";
return n.innerHTML = `
<button id="chat-widget-toggle"><img src="${t}" id="open-icon" /><img src="https://www.unpkg.com/vowwchatt-widget/assets/close-widget.png" id="close-icon" /></button>
<div id="vowchat-widget-intro-window" >
<div id="chat-intro-header">
<div id="intro-info">
<div id="image-intro-container"><img src="${t}" alt="vowchat" id="intro-image" /></div>
<h2 id="live-chat">Live Chat</h2>
</div>
<span class="intro-text">Let's talk! Need support or just saying hi? 👋</span>
</div>
<div id="chat-intro-body">
<h2>Start a conversation</h2>
<div id="response-time">
<p>Our usual reply time</p>
<div id="two-minutes">
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 7.5C12.5 10.5376 10.0376 13 7 13C3.96243 13 1.5 10.5376 1.5 7.5C1.5 4.46243 3.96243 2 7 2C10.0376 2 12.5 4.46243 12.5 7.5ZM14 7.5C14 11.366 10.866 14.5 7 14.5C3.13401 14.5 0 11.366 0 7.5C0 3.63401 3.13401 0.5 7 0.5C10.866 0.5 14 3.63401 14 7.5ZM6.27844 3.98219V7.76312L6.27949 7.76416C6.28254 7.84221 6.31607 7.91596 6.3729 7.96962L6.44742 8.02622L9.6706 10.1971L9.82069 10.2348H9.87736C9.97077 10.216 10.0264 10.1604 10.0831 10.1038L10.4956 9.44865C10.5311 9.39939 10.5508 9.34056 10.5522 9.27989C10.5522 9.1866 10.4956 9.13104 10.4021 9.07444L7.62817 7.18345V3.98219C7.62817 3.8323 7.49697 3.6824 7.328 3.6824H6.57862C6.40964 3.6824 6.27844 3.8323 6.27844 3.98219Z" fill="var(--brand-color)"/>
</svg>
<span>Two minutes</span>
</div>
</div>
<button id="start-message">
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.40379 15.341C0.417852 15.851 -0.180253 15.3952 0.0685034 14.3203L1.08894 9.91087C1.21329 9.37356 1.75121 8.88852 2.30804 8.82552L8.50358 8.1245C10.1513 7.93806 10.1571 7.63901 8.50358 7.4551L2.30804 6.76602C1.7591 6.70496 1.21311 6.21794 1.08894 5.67997L0.0685034 1.25875C-0.179975 0.182176 0.409106 -0.281674 1.40379 0.232816L14.2232 6.86355C15.2091 7.37351 15.2179 8.19581 14.2232 8.7103L1.40379 15.341Z" fill="white"/>
</svg>
<span>Send us a message</span>
</button>
</div>
</div>
<div id="vowchat-widget-window">
<div id="chat-header">
<div id="brand-info">
<div id="brand-image-container"><img src="${a}" alt="brand logo" id="brand-image" /></div>
<h3 id="header-title">${((b = o.widgetConfig) == null ? void 0 : b.brand_name) || "Vowchat.ai"} </h3>
</div>
<div id="chat-theme-setting" >
<button class="chat-theme light-theme"><img src="https://www.unpkg.com/vowwchatt-widget/assets/light-theme-icon.png" /></button>
<button class="chat-theme"><img src="https://www.unpkg.com/vowwchatt-widget/assets/dark-theme-icon.png" /></button>
</div>
</div>
<div id="status">
<div id="vowchat-connection-status"></div>
<span id="status-title"> Team replies under two minutes </span>
</div>
<div id="chat-messages" class="widget-scrollbar" >
<div id="brand-info-2">
<div id="brand-image-container-2"><img src="${a}" alt="brand logo" id="brand-image-2" /></div>
<h3 id="brand-name-2">${((y = o.widgetConfig) == null ? void 0 : y.brand_name) || "Vowchat.ai"} </h3>
</div>
<div id="chat-intro-buttons">
${((l = (C = o.widgetConfig) == null ? void 0 : C.quick_prompts) == null ? void 0 : l.length) > 0 ? o.widgetConfig.quick_prompts.map((m) => `<button class="chat-intro-button">${m}</button>`).join("") : ""}
<button id="human-agent">Can I speak with a human agent?</button>
</div>
</div>
<div class="customer-auth-container" id="customer-auth-container">
<button class="customer-close-btn" id="customer-close-btn">×</button>
<div class="customer-auth-fields">
<input type="email" id="customer-auth-email" placeholder="Email">
<p id="customer-auth-error"></p>
<input type="text" id="customer-auth-name" placeholder="Name">
<button id="customer-submit-btn">Submit</button>
</div>
</div>
<div class="voice-message" id="voice-message-container">
<div>
<div class="playback-controls">
<button id="play-btn">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M8 5v14l11-7z" fill="#fff" />
</svg>
</button>
<div class="playback-progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="duration">
<span data-minutes="">00</span>
<span data-separator>:</span>
<span data-seconds="">00</span>
</div>
</div>
<div>
<button id="cancel-button" class="cancel-voice-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<line x1="10" y1="10" x2="90" y2="90" stroke="white" stroke-width="10" />
<line x1="90" y1="10" x2="10" y2="90" stroke="white" stroke-width="10" />
</svg>
</button>
<button id="stop-voice-button" class="stop-voice-btn">
</button>
<button id="send-voice-btn" class="send-voice-btn">
<svg
width="18"
height="20"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 2L11 13"
stroke="#fff"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M22 2L15 22L11 13L2 9L22 2Z"
stroke="#fff"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
</div>
<div id="vowchat-input-container">
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" class="input-icon" xmlns="http://www.w3.org/2000/svg">
<path d="M17.6366 10.7274L17.6331 10.7282L17.6242 10.7371L10.1875 18.1683L10.2184 18.1992L10.1875 18.1683C9.17598 19.1795 7.80415 19.7475 6.37385 19.7472C4.94355 19.747 3.57192 19.1786 2.56073 18.167C1.54953 17.1554 0.981583 15.7836 0.981836 14.3533C0.982089 12.923 1.55052 11.5514 2.56207 10.5402L11.4578 1.66895L11.4578 1.66891C12.1294 0.997691 13.0401 0.620744 13.9896 0.620996C14.4598 0.621121 14.9253 0.713846 15.3596 0.893879C15.7939 1.07391 16.1885 1.33772 16.5208 1.67025C16.8532 2.00279 17.1168 2.39752 17.2966 2.83193C17.4764 3.26633 17.5689 3.7319 17.5688 4.20205C17.5686 4.67219 17.4759 5.13771 17.2959 5.57202C17.1159 6.00612 16.8523 6.40054 16.52 6.73279L16.5051 6.74683L16.5047 6.74719L7.82284 15.1046C7.72419 15.1995 7.60781 15.274 7.48035 15.3239C7.35289 15.3739 7.21685 15.3982 7.07999 15.3955C6.94313 15.3929 6.80814 15.3633 6.68272 15.3084C6.55729 15.2536 6.4439 15.1746 6.34901 15.076C6.25412 14.9773 6.17959 14.8609 6.12967 14.7335C6.07976 14.606 6.05544 14.47 6.0581 14.3331C6.06076 14.1962 6.09035 14.0612 6.14518 13.9358C6.20001 13.8104 6.27901 13.697 6.37767 13.6021L6.37768 13.6021L15.0514 5.25373L15.0514 5.25374L15.0521 5.25302C15.3317 4.9717 15.4881 4.59083 15.4869 4.19421C15.4856 3.79758 15.3269 3.41769 15.0456 3.1381C14.9063 2.99966 14.7411 2.89001 14.5594 2.81542C14.3777 2.74083 14.1831 2.70275 13.9868 2.70335C13.5902 2.70458 13.2103 2.86328 12.9307 3.14454C12.9307 3.14457 12.9307 3.14461 12.9306 3.14464L4.03505 12.0131L4.03499 12.0131C3.41468 12.6337 3.06629 13.4752 3.06646 14.3527C3.06654 14.7871 3.1522 15.2173 3.31854 15.6187C3.48488 16.02 3.72864 16.3847 4.03591 16.6918C4.34318 16.999 4.70794 17.2426 5.10936 17.4088C5.51077 17.5749 5.941 17.6604 6.37545 17.6603C7.25288 17.6602 8.0943 17.3115 8.71462 16.6909L16.1513 9.25967L16.1513 9.25965C16.2482 9.1627 16.3633 9.0858 16.49 9.03333C16.6167 8.98086 16.7525 8.95385 16.8896 8.95385C17.0267 8.95385 17.1624 8.98086 17.2891 9.03333C17.4158 9.0858 17.5309 9.1627 17.6278 9.25965C17.7248 9.35661 17.8017 9.4717 17.8542 9.59838C17.9066 9.72505 17.9336 9.86082 17.9336 9.99793C17.9336 10.135 17.9066 10.2708 17.8542 10.3975C17.8033 10.5203 17.7294 10.6323 17.6366 10.7274Z" fill="#94A3B8" stroke="#94A3B8" stroke-width="0.090625"/>
</svg>
<textarea type="text" id="chat-input" placeholder="Type a message..." ></textarea>
<button id="audio-note">
<svg width="19" height="24" viewBox="0 0 19 24" fill="none" class="input-icon" xmlns="http://www.w3.org/2000/svg">
<path d="M9.33223 16.9082C10.6336 16.9067 11.8812 16.389 12.8015 15.4688C13.7217 14.5486 14.2393 13.3009 14.2408 11.9996V5.89961C14.2408 4.59777 13.7237 3.34925 12.8031 2.42871C11.8826 1.50817 10.6341 0.991016 9.33223 0.991016C8.03039 0.991016 6.78187 1.50817 5.86133 2.42871C4.94079 3.34925 4.42363 4.59777 4.42363 5.89961L4.42363 11.9996M9.33223 16.9082L4.42363 11.9996M9.33223 16.9082C8.03085 16.9067 6.78321 16.389 5.863 15.4688C4.94279 14.5486 4.42515 13.301 4.42363 11.9996M9.33223 16.9082L4.42363 11.9996M4.42363 11.9996L4.42363 11.9996M4.42363 11.9996C4.42363 11.9996 4.42363 11.9996 4.42363 11.9996M10.4697 20.6468L10.4283 20.6523V20.694V22.6746C10.4283 22.9653 10.3128 23.2441 10.1073 23.4497C9.90172 23.6552 9.62293 23.7707 9.33223 23.7707C9.04152 23.7707 8.76273 23.6552 8.55717 23.4497C8.35161 23.2441 8.23613 22.9653 8.23613 22.6746V20.694V20.6523L8.19476 20.6468C6.09792 20.3681 4.17346 19.3379 2.77874 17.7476C1.38402 16.1573 0.613813 14.1148 0.611133 11.9995L0.563852 11.9996H0.611133C0.611133 11.7089 0.726614 11.4301 0.932171 11.2246C1.13773 11.019 1.41652 10.9035 1.70723 10.9035C1.99793 10.9035 2.27672 11.019 2.48228 11.2246C2.68784 11.4301 2.80332 11.7089 2.80332 11.9996C2.80332 13.7312 3.49119 15.3918 4.71559 16.6162C5.94 17.8407 7.60065 18.5285 9.33223 18.5285C11.0638 18.5285 12.7245 17.8407 13.9489 16.6162C15.1733 15.3918 15.8611 13.7312 15.8611 11.9996C15.8611 11.7089 15.9766 11.4301 16.1822 11.2246C16.3877 11.019 16.6665 10.9035 16.9572 10.9035C17.2479 10.9035 17.5267 11.019 17.7323 11.2246C17.9378 11.4301 18.0533 11.7089 18.0533 11.9995C18.0506 14.1148 17.2804 16.1573 15.8857 17.7476C14.491 19.3379 12.5665 20.3681 10.4697 20.6468ZM7.41144 3.97882C6.90201 4.48825 6.61582 5.17917 6.61582 5.89961V11.9996C6.61582 12.72 6.90201 13.411 7.41144 13.9204C7.92086 14.4298 8.61179 14.716 9.33223 14.716C10.0527 14.716 10.7436 14.4298 11.253 13.9204C11.7624 13.411 12.0486 12.72 12.0486 11.9996V5.89961C12.0486 5.17917 11.7624 4.48825 11.253 3.97882C10.7436 3.4694 10.0527 3.1832 9.33223 3.1832C8.61179 3.1832 7.92086 3.4694 7.41144 3.97882Z" fill="#94A3B8" stroke="#94A3B8" stroke-width="0.0953125"/>
</svg>
</button>
<button id="vowchat-send">
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" class="input-icon-send" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1346 9.24473L15.1345 9.24467L10.1867 4.29684L10.1046 4.21482V4.33081V18.4565C10.1046 18.7496 9.98822 19.0306 9.78098 19.2379C9.57374 19.4451 9.29266 19.5616 8.99958 19.5616C8.70649 19.5616 8.42542 19.4451 8.21817 19.2379C8.01093 19.0306 7.89451 18.7496 7.89451 18.4565V4.33081V4.21485L7.81249 4.29683L2.86274 9.24466L2.86274 9.24467C2.65512 9.45228 2.37353 9.56892 2.07992 9.56892C1.78631 9.56892 1.50472 9.45228 1.2971 9.24467C1.08949 9.03705 0.972851 8.75546 0.972851 8.46185C0.972851 8.16824 1.08949 7.88665 1.2971 7.67903L8.2158 0.760338L8.21586 0.760279C8.31852 0.657257 8.44051 0.575515 8.57484 0.519739C8.70916 0.463964 8.85317 0.435254 8.99862 0.435254C9.14406 0.435254 9.28807 0.463964 9.42239 0.519739C9.55672 0.575515 9.67871 0.657257 9.78137 0.760279L9.78143 0.760338L16.7001 7.67903L16.7002 7.67909C16.8032 7.78176 16.8849 7.90375 16.9407 8.03807C16.9965 8.1724 17.0252 8.31641 17.0252 8.46185C17.0252 8.60729 16.9965 8.7513 16.9407 8.88563C16.8849 9.01995 16.8032 9.14194 16.7002 9.24461L16.7001 9.24473C16.5974 9.34775 16.4754 9.42949 16.3411 9.48527C16.2068 9.54104 16.0628 9.56975 15.9173 9.56975C15.7719 9.56975 15.6279 9.54104 15.4935 9.48527C15.3592 9.42949 15.2372 9.34775 15.1346 9.24473Z" fill="white" stroke="white" stroke-width="0.096093"/>
</svg>
</button>
</div>
<span id="ai-notice">${o.botName || "vowchat.ai"} can make mistakes. <a href="#">Check our Terms & Conditions</a></span>
<span id="vowchat-powered">Powered By Vowchat.ai</span>
</div>
`, n;
}
function F(i) {
const e = `
@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Oxygen:wght@300;400;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
.vowchat-widget *,.vowchat-widget *::before,.vowchat-widget *::after{box-sizing:border-box;border-width:0;}.vowchat-widget *{margin:0;padding:0;font:inherit;line-height:inherit;}.vowchat-widget html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:system-ui,sans-serif;}.vowchat-widget body{margin:0;line-height:inherit;}.vowchat-widget hr{height:0;color:inherit;border-top-width:1px;}.vowchat-widget abbr[title]{text-decoration:underline dotted;}.vowchat-widget h1,.vowchat-widget h2,.vowchat-widget h3,.vowchat-widget h4,.vowchat-widget h5,.vowchat-widget h6{font-size:inherit;font-weight:inherit;}.vowchat-widget a{color:inherit;text-decoration:inherit;}.vowchat-widget b,.vowchat-widget strong{font-weight:bolder;}.vowchat-widget code,.vowchat-widget kbd,.vowchat-widget samp,.vowchat-widget pre{font-family:monospace,monospace;font-size:1em;}.vowchat-widget small{font-size:80%;}.vowchat-widget sub,.vowchat-widget sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}.vowchat-widget sub{bottom:-0.25em;}.vowchat-widget sup{top:-0.5em;}.vowchat-widget img,.vowchat-widget svg,.vowchat-widget video,.vowchat-widget canvas,.vowchat-widget audio,.vowchat-widget iframe,.vowchat-widget embed,.vowchat-widget object{display:block;vertical-align:middle;max-width:100%;}.vowchat-widget img{height:auto;}.vowchat-widget button,.vowchat-widget input,.vowchat-widget optgroup,.vowchat-widget select,.vowchat-widget textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;}.vowchat-widget button,.vowchat-widget select{text-transform:none;}.vowchat-widget button,.vowchat-widget [type="button"],.vowchat-widget [type="reset"],.vowchat-widget [type="submit"]{-webkit-appearance:button;background-color:inherit;background-image:none;}.vowchat-widget :-moz-focusring{outline:auto;}.vowchat-widget :-moz-ui-invalid{box-shadow:none;}.vowchat-widget progress{vertical-align:baseline;}.vowchat-widget ::-webkit-inner-spin-button,.vowchat-widget ::-webkit-outer-spin-button{height:auto;}.vowchat-widget [type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}.vowchat-widget ::-webkit-search-decoration{-webkit-appearance:none;}.vowchat-widget ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}.vowchat-widget summary{display:list-item;}.vowchat-widget blockquote,.vowchat-widget dl,.vowchat-widget dd,.vowchat-widget h1,.vowchat-widget h2,.vowchat-widget h3,.vowchat-widget h4,.vowchat-widget h5,.vowchat-widget h6,.vowchat-widget hr,.vowchat-widget figure,.vowchat-widget p,.vowchat-widget pre{margin:0;}.vowchat-widget fieldset,.vowchat-widget legend{margin:0;padding:0;}.vowchat-widget ol,.vowchat-widget ul,.vowchat-widget menu{list-style:none;margin:0;padding:0;}.vowchat-widget textarea{resize:vertical;}.vowchat-widget input::placeholder,.vowchat-widget textarea::placeholder{opacity:1;color:inherit;}.vowchat-widget button,.vowchat-widget [role="button"]{cursor:pointer;}.vowchat-widget :disabled{cursor:default;}.vowchat-widget table{border-collapse:collapse;}.vowchat-widget caption{text-align:left;caption-side:bottom;}.vowchat-widget svg{display:block;vertical-align:middle;}.vowchat-widget [hidden]{display:none;}
#vowchat-widget-container {
position: fixed;
${i.position.includes("bottom") ? "bottom: 0.75rem;" : "top: 0.75rem;"}
${i.position.includes("right") ? "right: 0.75rem;" : "left: 0.75rem;"}
z-index: 9999;
font-family: var(--font-family), sans-serif;
}
.vowchat-widget #chat-widget-toggle {
width: 7.5vh;
height: 7.5vh;
background: var(--brand-color);
padding: 0.75rem;
border-radius: 100%;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.vowchat-widget #chat-widget-toggle:active {
border: none;
}
.vowchat-widget #open-icon {
width: 5vh;
height: 5vh;
position: absolute;
opacity: 1;
scale: 1;
pointer-events: auto;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(0) invert(1);
}
.vowchat-widget #close-icon {
width: 2.5vh;
height: 2.5vh;
position: absolute;
opacity: 0;
scale: 0;
pointer-events: none;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vowchat-widget #vowchat-widget-intro-window, .vowchat-widget #vowchat-widget-window {
position: absolute;
background: white;
border-radius: 1rem;
box-shadow: 0px 4px 48px 0px #00000026;
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translate(5%, 5%);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vowchat-widget #vowchat-widget-intro-window.visible, .vowchat-widget #vowchat-widget-window.visible {
visibility: visible;
}
.vowchat-widget #vowchat-widget-intro-window {
bottom: 8vh;
right: 2vw;
width: 30.5rem;
max-width: 80vw;
height: fit-content;
scale: 1;
}
.vowchat-widget #vowchat-widget-window {
bottom: 9vh;
right: 2vw;
width: 30.5rem;
max-width: 90vw;
height: 48rem;
max-height: 85vh;
scale: 0;
}
.vowchat-widget #chat-intro-header {
padding: 1.5rem 0.5rem;
border-radius: 1rem 0 0 0;
display: flex;
gap: 0.5rem;
flex-direction: column;
align-items: center;
color: white;
background-color: var(--brand-color);
}
.vowchat-widget #chat-header {
padding: 1rem;
border-radius: 1rem 0 0 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--brand-color);
}
.vowchat-widget #brand-info, .vowchat-widget #intro-info {
display: flex;
gap: 0.4rem;
align-items: center;
}
.vowchat-widget #brand-image-container {
width: fit-content;
height: fit-content;
border-radius: 50%;
padding: 0.35rem;
background-color: white;
overflow: hidden;
}
.vowchat-widget #brand-image {
width: 2rem;
height: 2rem;
object-fit: cover;
}
.vowchat-widget #brand-image-2 {
width: 100%;
height: 100%;
object-fit: cover;
}
.vowchat-widget #image-intro-container {
width: 2.5rem;
height: 2.5rem;
}
.vowchat-widget #intro-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0) invert(1);
}
.vowchat-widget #live-chat{
font-size: 1.75rem;
font-weight: 500;
color: #ffffff;
padding-bottom: 0.25rem;
}
.vowchat-widget #brand-name {
font-size: 1.5rem;
font-weight: 500;
color: #ffffff;
}
.vowchat-widget .intro-text {
text-align: center;
}
/* Intro body */
.vowchat-widget #chat-intro-body {
padding: 1.5rem;
margin: 1rem;
border: 1px solid gray;
border-radius: 0.5rem;
}
.vowchat-widget #chat-intro-body > h2 {
font-size: 1.5rem;
font-weight: 700;
color: #000000;
}
.vowchat-widget #response-time > p {
color: #737376;
font-weight: 400;
padding: 0.5rem 0;
}
.vowchat-widget #two-minutes {
display: flex;
align-items: center;
gap: 0.2rem;
}
.vowchat-widget #two-minutes > span {
font-weight: 600;
}
.vowchat-widget #start-message{
border-radius: 5rem;
background-color: var(--brand-color);
padding: 1rem 2.5rem;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
border: none;
width: fit-content;
margin-top: 1.5rem;
font-size: 0.875rem;
font-weight: 600;
font-family: var(--font-family), sans-serif;
cursor: pointer;
}
.vowchat-widget #header-title {
font-size: 1.25rem;
font-weight: 600;
position: relative;
color: #ffffff;
}
.vowchat-widget #vowchat-connection-status{
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
.vowchat-widget .online {
background-color: #4ECE3D;
}
.vowchat-widget .offline {
background-color: #e4626f;
}
.vowchat-widget .pending-connection{
background-color: #eda145
}
.vowchat-widget #status {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--brand-color);
padding: 1.5rem 0;
border-top: 1px solid #CBD5E1;
width: 100%;
gap: 0.5rem;
color: #EAEAEA;
font-weight: 500;
font-size: 0.75rem;
}
.vowchat-widget #chat-theme-setting {
display: flex;
align-items: center;
gap: 0.5rem;
}
.vowchat-widget .chat-theme {
width: 2.5rem;
height: 2.5rem;
border-radius: 100%;
border: none;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
}
.vowchat-widget .chat-theme.light-theme {
background-color: #ffffff;
}
/* Main chat container */
.vowchat-widget .widget-scrollbar::-webkit-scrollbar {
width: 4px;
}
.vowchat-widget .widget-scrollbar::-webkit-scrollbar-thumb {
background-color: #d1d1d1;
border-radius: 10px;
}
.vowchat-widget .widget-scrollbar::-webkit-scrollbar-track {
background-color: #e8e8e867;
border-radius: 10px;
}
.vowchat-widget #chat-messages {
display: flex;
flex-direction: column;
min-height: 0;
gap: 0.5rem;
flex-grow: 1;
padding: 0.5rem 1rem;
overflow-y: auto;
}
.vowchat-widget .customer-auth-container {
position: relative;
background-color: var(--brand-color);
border-radius: 12px;
padding: 2rem 0.5rem;
width: 100%;
margin: 0.5rem auto;
width: calc(100% - 2.5rem);
display:none;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vowchat-widget .customer-close-btn {
position: absolute;
top: -5px;
right: 12px;
background: none;
border: none;
font-size: 34px;
color: #fff;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.vowchat-widget .customer-auth-fields {
display: flex;
flex-direction: column;
gap: 8px;
}
.vowchat-widget .customer-auth-fields input,
.vowchat-widget #customer-submit-btn{
background-color: var(--brand-color);
padding: 12px 16px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
transition: .2s;
}
.vowchat-widget .customer-auth-fields input {
background: white;
}
.vowchat-widget .customer-auth-fields input:focus {
outline: none;
border-color: var(--brand-color);
}
.vowchat-widget .customer-auth-fields input::placeholder {
color: #94a3b8;
}
.vowchat-widget #customer-auth-error{
color:red;
}
.vowchat-widget #customer-submit-btn {
background: #f8f9fa;
color: #1a1a1a;
cursor: pointer;
}
.vowchat-widget #customer-submit-btn:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.vowchat-widget #brand-info-2 {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 0.75rem;
gap: 0.5rem;
}
.vowchat-widget #brand-image-container-2 {
width: 3rem;
height: 3rem;
position: relative;
top: 0.65rem;
}
/* Container styling */
.vowchat-widget #rating-container{
padding: 0.5rem;
margin: 0.5rem;
background: var(--brand-color);
border-radius: 12px;
}
.vowchat-widget .vowchat-auth-header,
.vowchat-widget .vowchat-auth-content {
font-family: var(--font-family), sans-serif;
color: #333;
width: 100%;
box-sizing: border-box;
}
/* Header styling */
.vowchat-widget .vowchat-auth-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background-color: var(--brand-color);
color:white;
border-bottom: 1px solid #e9ecef;
border-radius: 8px 8px 0 0;
}
.vowchat-widget .vowchat-auth-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
}
.vowchat-widget .vowchat-rating-close-button {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #ffffff;
padding: 0;
line-height: 1;
}
/* Content styling */
.vowchat-widget .vowchat-auth-content {
padding: 20px;
background-color: #fff;
border-radius: 0 0 8px 8px;
}
/* Rating stars */
.vowchat-widget .vowchat-rating-stars {
display: flex;
justify-content: center;
margin-bottom: 20px;
direction: rtl; /* Makes the stars fill from right to left */
}
.vowchat-widget .vowchat-star {
background: none;
border: none;
font-size: 32px;
color: #e0e0e0;
cursor: pointer;
transition: color 0.2s ease;
padding: 0 5px;
}
.vowchat-widget .vowchat-star:hover,
.vowchat-widget .vowchat-star:hover ~ .vowchat-star {
color: #ffc107; /* Yellow color for hover */
}
.vowchat-widget .vowchat-star.active {
color: #ffc107; /* Yellow color for selected */
}
/* Form input */
.vowchat-widget .vowchat-form-input {
width: 100%;
padding: 12px 15px;
margin-bottom: 20px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 14px;
resize: vertical;
min-height: 100px;
box-sizing: border-box;
font-family: inherit;
}
.vowchat-widget .vowchat-form-input:focus {
outline: none;
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/* Submit button */
.vowchat-widget .vowchat-submit-button {
display: block;
width: 100%;
padding: 12px 0;
background-color: var(--brand-color);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
.vowchat-widget .vowchat-submit-button:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
.vowchat-widget #brand-name-2 {
font-size: 1.25rem;
font-weight: 700;
color: #000000;
}
.vowchat-widget #chat-intro-buttons {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
position: relative;
margin-bottom: 0.75rem;
}
.vowchat-widget .chat-intro-button {
border-radius: 0.5rem !important;
color: #000000 !important;
background-color: #f3f3f3 !important;
padding: 0.4rem 0.65rem !important;
width: fit-content !important;
font-family: var(--font-family), sans-serif !important;
font-size: 0.75rem !important;
border: none !important;
}
.vowchat-widget #human-agent {
border-radius: 0.5rem;
color: #000000;
background-color: #f3f3f3;
padding: 0.4rem 0.65rem;
width: fit-content;
font-family: var(--font-family), sans-serif;
font-size: 0.75rem;
border: none;
}
/* Message wrapper */
.vowchat-widget .chat-message {
display: flex;
flex-direction: column;
width: 100%;
}
.vowchat-widget .user-message {
align-items: flex-end;
margin-bottom: 0.25rem;
}
.vowchat-widget .agent-message {
align-items: flex-start;
width: fit-content;
max-width: 100%;
}
/* Header styles */
.vowchat-widget .user-icon .time {
color: #94A3B8;
font-size: 0.75rem;
}
.vowchat-widget .user-icon .you {
text-transform: uppercase;
color: #344054;
font-size: 1.1rem;
font-weight: 600;
margin-left: 0.2rem;
}
.vowchat-widget .agent-name {
font-weight: 500;
font-size: 1rem;
color: var(--brand-color);
}
.vowchat-widget .agent-name .agent-img {
width: 1.65rem;
height: 1.65rem;
display: inline;
}
.vowchat-widget .agent-name .time {
color: #94A3B8;
font-size: 0.75rem;
margin-left: 0.5rem;
}
/* Message bubble styles */
.vowchat-widget .message-bubble {
padding: 0.875rem;
border-radius: 1.5rem;
font-size: 0.875rem;
max-width: 100%;
word-wrap: break-word;
margin: 0.5rem 0;
}
.vowchat-widget .agent-message .message-bubble {
background-color: var(--secondary-color);
color: white;
max-width: 100%;
margin-left: 1.75rem;
}
.vowchat-widget .agent-icons {
width: 0.875rem;
height: 0.875rem;
}
/* Styles for user message alignment */
.vowchat-widget .user-message .message-bubble {
background-color: #F9F9F9;
color: #000000;
font-weight: 500;
opacity: 1;
}
.vowchat-widget #vowchat-input-container {
display: flex;
align-items: center;
gap: 0.5rem;
width: calc(100% - 2.5rem);
margin: 0.5rem auto;
background-color: #ffffff;
padding: 0.35rem;
height: fit-content;
border: 0.67px solid #CBD5E1;
border-radius: 1.5rem;
box-shadow:
0px 1.33px 2.67px -1.33px rgba(23, 23, 23, 0.06),
0px 2.67px 5.33px -1.33px rgba(23, 23, 23, 0.1);
}
.vowchat-widget #vowchat-input-container #chat-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 1rem;
color: #374151;
resize: none;
height: 1.3rem;
font-family: var(--font-family), sans-serif;
scrollbar-width: none;
-ms-overflow-style: none;
}
.vowchat-widget #vowchat-input-container #chat-input::placeholder {
font-size: 0.875rem !important;
color: #94a3b8 !important;
}
.vowchat-widget #vowchat-input-container .input-icon {
width: 1.1rem;
height: 1.1rem;
color: #94A3B8;
}
.vowchat-widget #vowchat-input-container #audio-note {
border: none;
background-color: transparent;
cursor: pointer;
}
.vowchat-widget #vowchat-send {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--brand-color);
color: #fff;
border-radius: 50%;
border: none;
width: 2rem;
height: 2rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.vowchat-widget #vowchat-input-container #vowchat-send .input-icon-send {
width: 0.75rem;
height: 0.75rem;
color: #ffffff;
}
.vowchat-widget #ai-notice {
color: #94A3B8;
font-weight: 500;
font-size: 0.75rem;
text-align: center;
padding: 0.5rem 0 1rem;
width: 70%;
margin:0 auto;
text-transform: capitalize;
}
.vowchat-widget #ai-notice > a {
color: #94A3B8;
}
.vowchat-widget #vowchat-powered {
color: #96a1b1;
text-align: center;
font-size: 0.675rem;
padding-bottom: 0.5rem;
}
.vowchat-widget .receiving-message .message-bubble {
padding: 0.625rem;
background-color: #f0f0f0;
border-radius: 1.125rem;
}
.vowchat-widget .typing-indicator {
display: flex;
justify-content: center;
}
.vowchat-widget .typing-indicator span {
height: 0.4rem;
width: 0.4rem;
background-color: #9E9EA1;
border-radius: 50%;
display: inline-block;
margin: 0 2px;
animation: bounce 1.3s linear infinite;
}
.vowchat-widget .typing-indicator span:nth-child(2) {
animation-delay: -1.1s;
}
.vowchat-widget .typing-indicator span:nth-child(3) {
animation-delay: -0.9s;
}
@keyframes bounce {
0%, 60%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-10px);
}
}
@media (max-width: 1280px) {
.vowchat-widget #vowchat-widget-window, .vowchat-widget #vowchat-widget-intro-window {
width: 25.5rem;
}
}
@media (max-width: 1020px) {
.vowchat-widget #chat-widget-toggle {
width: 6vh;
height: 6vh;
}
.vowchat-widget #vowchat-widget-window, .vowchat-widget #vowchat-widget-intro-window {
width: 26.5rem;
bottom: 7vh;
}
.vowchat-widget #vowchat-widget-window {
height: 75vh;
}
.vowchat-widget #open-icon {
width: 3.5vh;
height: 3.5vh;