@convokit/widget 0.0.10 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js CHANGED
@@ -1,614 +1,6 @@
1
- (function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode(":root{--convokit-primary: #000;--convokit-header-bg: #000;--convokit-font-family: Inter, system-ui, sans-serif;--convokit-font-size: 14px;--convokit-border-radius: 18px;--convokit-chat-bg: #ffffff;--convokit-user-msg-bg: #000;--convokit-assistant-msg-bg: #f3f4f6;--convokit-input-bg: #ffffff;--convokit-input-border: #d1d5db}.convokit-widget{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;font-family:var(--convokit-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.convokit-button{width:56px;height:56px;border-radius:50%;border:2px solid var(--convokit-primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;z-index:10000;transition:all .2s ease;background:var(--convokit-primary)}.convokit-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.convokit-button:active{transform:translateY(0)}.convokit-button-hidden{opacity:0;transform:scale(0);pointer-events:none;transition:all .2s ease-in-out}.convokit-chat-window{width:380px;height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 16px #0000001a;display:flex;flex-direction:column;overflow:hidden;position:absolute;bottom:0;right:0;z-index:9999;transform-origin:bottom right;border:2px solid #000;overscroll-behavior:contain}.convokit-chat-window-body{width:100%;height:100%;background:#fff;display:flex;flex-direction:column;overflow:hidden}.convokit-chat-wrapper{display:flex;flex-direction:column;flex:1;background:var(--convokit-chat-bg);overflow:hidden}.convokit-header{padding:16px 20px;color:#fff;display:flex;justify-content:space-between;align-items:center;min-height:60px;background:var(--convokit-header-bg);position:relative;border-bottom:2px solid var(--convokit-header-bg)}.convokit-header-subtitle{margin:0;font-size:12px;opacity:.85;line-height:1.3}.convokit-header-left{display:flex;align-items:center;gap:12px;flex:1}.convokit-avatar{display:none}.convokit-header-text{display:flex;flex-direction:column;gap:4px}.convokit-header-text h3{margin:0;font-size:16px;font-weight:600;line-height:1.3}.convokit-header-actions{display:flex;align-items:center;gap:4px}.convokit-header-icon{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:opacity .2s ease}.convokit-header-icon:hover{opacity:.7}.convokit-header-icon:active{opacity:.5}.convokit-chat-window-content{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}.convokit-chat-container{display:flex;flex-direction:column;flex:1;padding:16px;border:none;overflow:hidden;background:transparent;overscroll-behavior:contain}.convokit-messages{flex:1;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:16px;background:transparent;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}.convokit-messages::-webkit-scrollbar{display:none}.convokit-welcome{text-align:center;color:#666;padding:20px;font-size:14px}.convokit-message{display:flex;align-items:flex-end;gap:0;max-width:75%}.convokit-message-user{align-self:flex-end}.convokit-message-assistant{align-self:flex-start}.convokit-bot-icon{display:none}.convokit-message-content{padding:10px 14px;border-radius:var(--convokit-border-radius);word-wrap:break-word;font-size:var(--convokit-font-size);line-height:1.5;position:relative;text-align:left}.convokit-message-user .convokit-message-content{background:var(--convokit-user-msg-bg);color:#fff;border-bottom-right-radius:4px}.convokit-message-assistant .convokit-message-content{background:var(--convokit-assistant-msg-bg);color:#000;border-bottom-left-radius:4px}.convokit-message-content strong{font-weight:600}.convokit-message-content em{font-style:italic}.convokit-message-content a{text-decoration:underline}.convokit-typing{display:flex;gap:6px;padding:4px 0;align-items:center}.convokit-typing span{width:8px;height:8px;border-radius:50%;background:#6b7280;animation:typing-bounce 1.4s ease-in-out infinite}.convokit-typing span:nth-child(1){animation-delay:0s}.convokit-typing span:nth-child(2){animation-delay:.2s}.convokit-typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.convokit-input-form{display:flex;align-items:center;padding:12px 0 0;gap:8px;flex-shrink:0;background:transparent;border-bottom:none}.convokit-input{flex:1;padding:11px 14px;border:1px solid color-mix(in srgb,var(--convokit-primary) 35%,transparent);background:var(--convokit-input-bg);border-radius:20px;font-size:var(--convokit-font-size);outline:none;color:#000;font-family:var(--convokit-font-family);transition:border-color .2s ease,box-shadow .2s ease}.convokit-input:focus{border-color:var(--convokit-primary);box-shadow:none}.convokit-input::placeholder{color:#9ca3af}.convokit-input:disabled{background:#f9fafb;color:#9ca3af;border-color:#e5e7eb}.convokit-send-button{width:40px;height:40px;border-radius:50%;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--convokit-primary);transition:opacity .2s ease}.convokit-send-button:hover:not(:disabled){opacity:.8}.convokit-send-button:active:not(:disabled){opacity:.6}.convokit-send-button:disabled{opacity:.3;cursor:not-allowed;background:var(--convokit-primary)}.convokit-footer{padding:10px 16px;text-align:center;background:var(--convokit-chat-bg);font-size:11px;color:#6b7280}.convokit-footer a{color:var(--convokit-primary);text-decoration:none;font-weight:500;transition:opacity .2s ease}.convokit-footer a:hover{opacity:.7}.convokit-rating-prompt{padding:16px;border-top:1px solid #e5e7eb;background-color:#f9fafb;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.convokit-rating-question{margin:0 0 12px;font-size:14px;font-weight:500;color:#374151;text-align:center}.convokit-rating-buttons{display:flex;gap:12px;justify-content:center;margin-bottom:12px}.convokit-rating-button{width:48px;height:48px;border-radius:50%;border:2px solid #d1d5db;background-color:#fff;color:#6b7280;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.convokit-rating-button:hover:not(:disabled){border-color:#9ca3af;transform:scale(1.05)}.convokit-rating-button:disabled{opacity:.5;cursor:not-allowed}.convokit-rating-button.convokit-rating-selected{color:#fff;border-width:2px}.convokit-rating-feedback{margin-top:12px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.convokit-rating-textarea{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;min-height:60px;margin-bottom:8px;box-sizing:border-box}.convokit-rating-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.convokit-rating-textarea:disabled{background-color:#f3f4f6;cursor:not-allowed}.convokit-rating-submit{width:100%;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:opacity .2s ease}.convokit-rating-submit:hover:not(:disabled){opacity:.9}.convokit-rating-submit:disabled{opacity:.6;cursor:not-allowed}.convokit-rating-thankyou{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.convokit-rating-icon{width:48px;height:48px;border-radius:50%;background-color:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;margin-bottom:12px}.convokit-rating-message{margin:0;font-size:14px;font-weight:500;color:#374151}@media (max-width: 480px){.convokit-widget{bottom:10px;right:10px}.convokit-chat-window{width:calc(100vw - 20px);height:calc(100vh - 20px);max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);bottom:0;right:0;border-radius:16px}.convokit-message{max-width:85%}.convokit-header{padding:16px 16px 12px;min-height:64px}.convokit-chat-container{padding:12px}}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
2
- import { M as L, r as _, f as R, i as $, s as G, c as Y, a as q, g as A, b as U, d as V, e as J } from "./PopupWidget-CkNMiKmz.js";
3
- import { P as he } from "./PopupWidget-CkNMiKmz.js";
4
- import { jsx as t, jsxs as n } from "react/jsx-runtime";
5
- import { useState as u, useRef as F, useEffect as N } from "react";
6
- const Q = "convokit-widget", X = ({ config: e, onBack: c, backLabel: r = "Back to editor" }) => {
7
- const k = e.widgetId ?? Q, [I, C] = u(!0), [m, x] = u([]), [g, B] = u(""), [v, D] = u(!1), [S, P] = u(null), [o, l] = u(null), T = F(null), a = `convokit_messages_${k}`;
8
- N(() => {
9
- if (e.persistMessages)
10
- try {
11
- const i = localStorage.getItem(a);
12
- i && x(JSON.parse(i));
13
- } catch (i) {
14
- console.error("Failed to load messages from localStorage:", i);
15
- }
16
- }, [e.persistMessages, a]), N(() => {
17
- if (e.persistMessages && m.length > 0)
18
- try {
19
- localStorage.setItem(a, JSON.stringify(m));
20
- } catch (i) {
21
- console.error("Failed to save messages to localStorage:", i);
22
- }
23
- }, [e.persistMessages, m, a]), N(() => {
24
- (async () => {
25
- if (!e.key) return;
26
- const s = `convokit_theme_${k}`;
27
- try {
28
- const f = sessionStorage.getItem(s);
29
- if (f) {
30
- l(JSON.parse(f));
31
- return;
32
- }
33
- } catch {
34
- }
35
- const h = await R(e.key);
36
- if (h) {
37
- l(h);
38
- try {
39
- sessionStorage.setItem(s, JSON.stringify(h));
40
- } catch {
41
- }
42
- }
43
- })();
44
- }, [k, e.key]);
45
- const p = {
46
- ...e,
47
- primaryColor: e.primaryColor || (o == null ? void 0 : o.primaryColor) || "#000",
48
- title: e.title || (o == null ? void 0 : o.headerTitle) || "Chat",
49
- subtitle: e.subtitle || (o == null ? void 0 : o.headerSubtitle),
50
- welcomeMessage: e.welcomeMessage || (o == null ? void 0 : o.welcomeMessage) || "How can I help you today?",
51
- placeholder: e.placeholder || (o == null ? void 0 : o.placeholder) || "Type a message..."
52
- };
53
- N(() => {
54
- if (typeof document > "u") return;
55
- const i = document.documentElement;
56
- i.style.setProperty("--convokit-primary", p.primaryColor), i.style.setProperty("--convokit-header-bg", e.headerBg ?? (o == null ? void 0 : o.headerBg) ?? p.primaryColor ?? "#000"), i.style.setProperty("--convokit-font-family", (o == null ? void 0 : o.fontFamily) || "Inter, system-ui, sans-serif"), i.style.setProperty("--convokit-font-size", (o == null ? void 0 : o.fontSize) || "14px"), i.style.setProperty("--convokit-border-radius", (o == null ? void 0 : o.borderRadius) || "18px"), i.style.setProperty("--convokit-chat-bg", e.chatBg ?? (o == null ? void 0 : o.chatBg) ?? "#ffffff"), i.style.setProperty("--convokit-user-msg-bg", e.userMsgBg ?? (o == null ? void 0 : o.userMsgBg) ?? p.primaryColor ?? "#000"), i.style.setProperty("--convokit-assistant-msg-bg", e.assistantMsgBg ?? (o == null ? void 0 : o.assistantMsgBg) ?? "#f3f4f6"), i.style.setProperty("--convokit-input-bg", e.inputBg ?? (o == null ? void 0 : o.inputBg) ?? "#ffffff");
57
- }, [o, p.primaryColor, e.headerBg, e.chatBg, e.userMsgBg, e.assistantMsgBg, e.inputBg]), N(() => {
58
- var i;
59
- (i = T.current) == null || i.scrollIntoView({ behavior: "smooth" });
60
- }, [m, v]);
61
- const E = async (i) => {
62
- if (i.preventDefault(), !g.trim() || v) return;
63
- const s = g.trim();
64
- B(""), P(null);
65
- const h = { role: "user", content: s, timestamp: /* @__PURE__ */ new Date() }, f = [...m, h];
66
- x(f), D(!0);
67
- try {
68
- const d = m.map((H) => ({ role: H.role, content: H.content })), b = typeof window < "u" ? localStorage.getItem("widget_jwt") : null, M = typeof window < "u" ? localStorage.getItem("conversation_id") : null;
69
- let y;
70
- b && M && !$() ? y = await G(s, d) : (b && M && $() && Y(), y = await q(e.key, s, void 0, k));
71
- const j = { role: "assistant", content: typeof (y == null ? void 0 : y.reply) == "string" ? y.reply : (y == null ? void 0 : y.reply) != null ? String(y.reply) : "", timestamp: /* @__PURE__ */ new Date() };
72
- x([...f, j]);
73
- } catch (d) {
74
- console.error("Chat error:", d);
75
- const b = d instanceof Error ? d.message : "Sorry, something went wrong.";
76
- P(b), x([...f, { role: "assistant", content: `Error: ${b}`, timestamp: /* @__PURE__ */ new Date() }]);
77
- } finally {
78
- D(!1);
79
- }
80
- };
81
- return I ? /* @__PURE__ */ n(
82
- L,
83
- {
84
- className: "convokit-widget",
85
- initial: { opacity: 0 },
86
- animate: { opacity: 1 },
87
- exit: { opacity: 0 },
88
- transition: { duration: 0.2 },
89
- style: {
90
- position: "fixed",
91
- inset: 0,
92
- zIndex: 1e4,
93
- display: "flex",
94
- flexDirection: "column",
95
- background: "var(--convokit-chat-bg)",
96
- fontFamily: "var(--convokit-font-family)",
97
- pointerEvents: "auto"
98
- },
99
- children: [
100
- /* @__PURE__ */ n("div", { className: "convokit-header", style: { flexShrink: 0 }, children: [
101
- /* @__PURE__ */ t("div", { className: "convokit-header-left", children: /* @__PURE__ */ n("div", { className: "convokit-header-text", children: [
102
- /* @__PURE__ */ t("h3", { children: p.title }),
103
- p.subtitle && /* @__PURE__ */ t("p", { className: "convokit-header-subtitle", children: p.subtitle })
104
- ] }) }),
105
- /* @__PURE__ */ t("div", { className: "convokit-header-actions", children: c ? /* @__PURE__ */ n("button", { type: "button", onClick: c, className: "convokit-header-icon", "aria-label": r, style: { fontSize: 14, gap: 6, display: "flex", alignItems: "center" }, children: [
106
- /* @__PURE__ */ t("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
107
- r
108
- ] }) : /* @__PURE__ */ t("button", { type: "button", onClick: () => C(!1), className: "convokit-header-icon", "aria-label": "Close chat", children: /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
109
- /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
110
- /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
111
- ] }) }) })
112
- ] }),
113
- /* @__PURE__ */ t("div", { className: "convokit-chat-wrapper", style: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ t("div", { className: "convokit-chat-window-content", style: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ n("div", { className: "convokit-chat-container", style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", padding: 16 }, children: [
114
- /* @__PURE__ */ n("div", { className: "convokit-messages", style: { flex: 1, overflowY: "auto", padding: "8px 0" }, children: [
115
- S && /* @__PURE__ */ n("div", { style: { padding: 12, margin: 8, background: "#fee", color: "#c33", borderRadius: 8, fontSize: 14 }, children: [
116
- "⚠️ ",
117
- S
118
- ] }),
119
- m.length === 0 && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(p.welcomeMessage) } }) }),
120
- m.map((i, s) => /* @__PURE__ */ t("div", { className: `convokit-message convokit-message-${i.role}`, children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(i.content) } }) }, s)),
121
- v && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", children: /* @__PURE__ */ n("div", { className: "convokit-typing", "aria-hidden": "true", children: [
122
- /* @__PURE__ */ t("span", {}),
123
- /* @__PURE__ */ t("span", {}),
124
- /* @__PURE__ */ t("span", {})
125
- ] }) }) }),
126
- /* @__PURE__ */ t("div", { ref: T })
127
- ] }),
128
- /* @__PURE__ */ n("form", { onSubmit: E, className: "convokit-input-form", children: [
129
- /* @__PURE__ */ t(
130
- "input",
131
- {
132
- type: "text",
133
- value: g,
134
- onChange: (i) => B(i.target.value),
135
- placeholder: p.placeholder,
136
- disabled: v,
137
- className: "convokit-input"
138
- }
139
- ),
140
- /* @__PURE__ */ t("button", { type: "submit", disabled: v || !g.trim(), className: "convokit-send-button", "aria-label": "Send message", children: /* @__PURE__ */ n("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
141
- /* @__PURE__ */ t("path", { d: "M22 2L11 13" }),
142
- /* @__PURE__ */ t("path", { d: "M22 2l-7 20-4-9-9-4z" })
143
- ] }) })
144
- ] }),
145
- /* @__PURE__ */ n("div", { className: "convokit-footer", children: [
146
- "Powered by ",
147
- /* @__PURE__ */ t("a", { href: "https://convokit.com", target: "_blank", rel: "noopener noreferrer", children: "ConvoKit" })
148
- ] })
149
- ] }) }) })
150
- ]
151
- }
152
- ) : /* @__PURE__ */ t(
153
- L,
154
- {
155
- initial: { opacity: 0 },
156
- animate: { opacity: 1 },
157
- style: {
158
- position: "fixed",
159
- inset: 0,
160
- zIndex: 1e4,
161
- display: "flex",
162
- alignItems: "center",
163
- justifyContent: "center",
164
- background: "var(--convokit-chat-bg)",
165
- pointerEvents: "auto"
166
- },
167
- children: /* @__PURE__ */ n(
168
- "button",
169
- {
170
- type: "button",
171
- onClick: () => C(!0),
172
- "aria-label": "Open chat",
173
- style: {
174
- padding: "14px 28px",
175
- borderRadius: 12,
176
- border: "none",
177
- background: p.primaryColor,
178
- color: "white",
179
- fontSize: 16,
180
- fontWeight: 500,
181
- cursor: "pointer",
182
- display: "flex",
183
- alignItems: "center",
184
- gap: 10,
185
- boxShadow: "0 4px 14px rgba(0,0,0,0.15)"
186
- },
187
- children: [
188
- /* @__PURE__ */ t("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ t("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
189
- "Open chat"
190
- ]
191
- }
192
- )
193
- }
194
- );
195
- }, W = {
196
- title: "Support",
197
- welcomeMessage: "Hi! How can we help?"
198
- }, re = (e) => {
199
- const c = e.apiKey;
200
- if (!c || typeof c != "string" || c.trim() === "")
201
- return null;
202
- const r = {
203
- ...W,
204
- key: c.trim(),
205
- widgetId: e.widgetId,
206
- title: e.title ?? W.title,
207
- welcomeMessage: e.welcomeMessage ?? W.welcomeMessage,
208
- persistMessages: e.persistMessages,
209
- primaryColor: e.primaryColor
210
- };
211
- return /* @__PURE__ */ t(
212
- X,
213
- {
214
- config: r,
215
- onBack: e.onBack,
216
- backLabel: e.backLabel ?? "Back"
217
- }
218
- );
219
- }, Z = "convokit-widget", ee = ({ config: e }) => {
220
- const c = e.widgetId ?? Z, [r, k] = u(!1), [I, C] = u([]), [m, x] = u(""), [g, B] = u(!1), [v, D] = u(!1), [S, P] = u(null), o = F(null), l = {
221
- ...e,
222
- primaryColor: e.primaryColor || "#000",
223
- title: e.title || "Chat",
224
- subtitle: e.subtitle,
225
- welcomeMessage: e.welcomeMessage || "How can I help you today?",
226
- placeholder: e.placeholder || "Type a message...",
227
- position: e.position || "bottom-right"
228
- };
229
- N(() => {
230
- if (typeof document > "u") return;
231
- const s = document.documentElement;
232
- s.style.setProperty("--convokit-primary", l.primaryColor), s.style.setProperty("--convokit-header-bg", e.headerBg ?? l.primaryColor ?? "#000"), s.style.setProperty("--convokit-font-family", "Inter, system-ui, sans-serif"), s.style.setProperty("--convokit-font-size", "14px"), s.style.setProperty("--convokit-border-radius", "18px"), s.style.setProperty("--convokit-chat-bg", e.chatBg ?? "#ffffff"), s.style.setProperty("--convokit-user-msg-bg", e.userMsgBg ?? l.primaryColor ?? "#000"), s.style.setProperty("--convokit-assistant-msg-bg", e.assistantMsgBg ?? "#f3f4f6"), s.style.setProperty("--convokit-input-bg", e.inputBg ?? "#ffffff");
233
- }, [l.primaryColor, e.headerBg, e.chatBg, e.userMsgBg, e.assistantMsgBg, e.inputBg]), N(() => {
234
- const s = setTimeout(() => D(!0), 100);
235
- return () => clearTimeout(s);
236
- }, []), N(() => {
237
- var s;
238
- (s = o.current) == null || s.scrollIntoView({ behavior: "smooth" });
239
- }, [I, g]);
240
- const T = () => k(!r), a = l.position, p = () => {
241
- const s = { position: "absolute", zIndex: 9999 }, h = {
242
- "bottom-right": { ...s, bottom: 20, right: 20 },
243
- "bottom-left": { ...s, bottom: 20, left: 20 },
244
- "bottom-middle": { ...s, bottom: 20, left: "50%" },
245
- "top-right": { ...s, top: 20, right: 20 },
246
- "top-left": { ...s, top: 20, left: 20 },
247
- "top-middle": { ...s, top: 20, left: "50%" }
248
- };
249
- return h[a] || h["bottom-right"];
250
- }, E = () => ({
251
- "bottom-right": "bottom right",
252
- "bottom-left": "bottom left",
253
- "bottom-middle": "bottom center",
254
- "top-right": "top right",
255
- "top-left": "top left",
256
- "top-middle": "top center"
257
- })[a] || "bottom right", i = async (s) => {
258
- if (s.preventDefault(), !m.trim() || g) return;
259
- const h = m.trim();
260
- x(""), P(null);
261
- const f = { role: "user", content: h, timestamp: /* @__PURE__ */ new Date() }, d = [...I, f];
262
- C(d), B(!0);
263
- try {
264
- const b = I.map((K) => ({ role: K.role, content: K.content })), M = typeof e.getAuthToken == "function" ? await Promise.resolve(e.getAuthToken()) : e.authToken, y = A(c);
265
- let w;
266
- y ? w = await U(
267
- e.apiUrl,
268
- h,
269
- b,
270
- y,
271
- M,
272
- e.apiKey
273
- ) : w = await V(
274
- e.apiUrl,
275
- h,
276
- c,
277
- b,
278
- M,
279
- e.apiKey
280
- ), w.conversation_id && typeof window < "u" && J(c, w.conversation_id);
281
- const H = { role: "assistant", content: typeof (w == null ? void 0 : w.reply) == "string" ? w.reply : (w == null ? void 0 : w.reply) != null ? String(w.reply) : "", timestamp: /* @__PURE__ */ new Date() };
282
- C([...d, H]);
283
- } catch (b) {
284
- console.error("[ConvoKit Connect] Chat error:", b);
285
- const M = b instanceof Error ? b.message : "Sorry, something went wrong.";
286
- P(M), C([...d, { role: "assistant", content: `Error: ${M}`, timestamp: /* @__PURE__ */ new Date() }]);
287
- } finally {
288
- B(!1);
289
- }
290
- };
291
- return /* @__PURE__ */ t("div", { className: "convokit-widget", children: /* @__PURE__ */ n(
292
- L,
293
- {
294
- className: "convokit-morph-container",
295
- initial: { opacity: 0, scale: 0, width: 60, height: 60, borderRadius: 50, x: a === "bottom-middle" || a === "top-middle" ? "-50%" : 0 },
296
- animate: {
297
- opacity: 1,
298
- scale: 1,
299
- width: r ? 380 : 60,
300
- height: r ? 600 : 60,
301
- borderRadius: r ? 16 : 50,
302
- x: a === "bottom-middle" || a === "top-middle" ? "-50%" : 0
303
- },
304
- transition: {
305
- duration: 0.4,
306
- scale: { type: "spring", visualDuration: 0.4, bounce: 0.5 },
307
- width: v ? { type: "spring", stiffness: 300, damping: 30 } : { duration: 0 },
308
- height: v ? { type: "spring", stiffness: 300, damping: 30 } : { duration: 0 },
309
- borderRadius: v ? { type: "spring", stiffness: 300, damping: 30 } : { duration: 0 },
310
- x: { duration: 0 }
311
- },
312
- style: {
313
- backgroundColor: l.primaryColor,
314
- ...p(),
315
- transformOrigin: E(),
316
- cursor: r ? "default" : "pointer",
317
- overflow: "hidden",
318
- boxShadow: r ? "0 12px 40px rgba(0, 0, 0, 0.2)" : "0 4px 20px rgba(0, 0, 0, 0.2)",
319
- pointerEvents: "auto"
320
- },
321
- onClick: r ? void 0 : T,
322
- children: [
323
- /* @__PURE__ */ t(
324
- L,
325
- {
326
- style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" },
327
- animate: { opacity: r ? 0 : 1, scale: r ? 0 : 1 },
328
- transition: { duration: 0.2 },
329
- children: e.bubbleIconUrl ? /* @__PURE__ */ t("img", { src: e.bubbleIconUrl, alt: "", width: 24, height: 24, style: { objectFit: "contain" } }) : /* @__PURE__ */ t("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ t("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
330
- }
331
- ),
332
- /* @__PURE__ */ t(
333
- L,
334
- {
335
- style: { width: "100%", height: "100%", opacity: r ? 1 : 0, pointerEvents: r ? "all" : "none" },
336
- animate: { opacity: r ? 1 : 0 },
337
- transition: { duration: 0.2, delay: r ? 0.2 : 0 },
338
- children: /* @__PURE__ */ t("div", { className: "convokit-chat-window-body", style: { background: "#ffffff", width: "100%", height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ n("div", { className: "convokit-chat-wrapper", children: [
339
- /* @__PURE__ */ n("div", { className: "convokit-header", children: [
340
- /* @__PURE__ */ n("div", { className: "convokit-header-left", children: [
341
- /* @__PURE__ */ t("div", { className: "convokit-avatar", children: /* @__PURE__ */ n("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
342
- /* @__PURE__ */ t("circle", { cx: "12", cy: "8", r: "4", fill: "white", opacity: "0.9" }),
343
- /* @__PURE__ */ t("path", { d: "M6 20c0-4 2.5-6 6-6s6 2 6 6", stroke: "white", strokeWidth: "2", strokeLinecap: "round" })
344
- ] }) }),
345
- /* @__PURE__ */ n("div", { className: "convokit-header-text", children: [
346
- /* @__PURE__ */ t("h3", { children: l.title }),
347
- l.subtitle && /* @__PURE__ */ t("p", { className: "convokit-header-subtitle", children: l.subtitle })
348
- ] })
349
- ] }),
350
- /* @__PURE__ */ t("div", { className: "convokit-header-actions", children: /* @__PURE__ */ t("button", { onClick: T, className: "convokit-header-icon", "aria-label": "Close chat", children: /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
351
- /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
352
- /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
353
- ] }) }) })
354
- ] }),
355
- /* @__PURE__ */ t("div", { className: "convokit-chat-window-content", children: /* @__PURE__ */ n("div", { className: "convokit-chat-container", children: [
356
- /* @__PURE__ */ n("div", { className: "convokit-messages", children: [
357
- S && /* @__PURE__ */ n("div", { style: { padding: 12, margin: 8, background: "#fee", color: "#c33", borderRadius: 8, fontSize: 14 }, children: [
358
- "⚠️ ",
359
- S
360
- ] }),
361
- I.length === 0 && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(l.welcomeMessage) } }) }),
362
- I.map((s, h) => /* @__PURE__ */ t("div", { className: `convokit-message convokit-message-${s.role}`, children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(s.content) } }) }, h)),
363
- g && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", children: /* @__PURE__ */ n("div", { className: "convokit-typing", "aria-hidden": "true", children: [
364
- /* @__PURE__ */ t("span", {}),
365
- /* @__PURE__ */ t("span", {}),
366
- /* @__PURE__ */ t("span", {})
367
- ] }) }) }),
368
- /* @__PURE__ */ t("div", { ref: o })
369
- ] }),
370
- /* @__PURE__ */ n("form", { onSubmit: i, className: "convokit-input-form", children: [
371
- /* @__PURE__ */ t(
372
- "input",
373
- {
374
- type: "text",
375
- value: m,
376
- onChange: (s) => x(s.target.value),
377
- placeholder: l.placeholder,
378
- disabled: g,
379
- className: "convokit-input"
380
- }
381
- ),
382
- /* @__PURE__ */ t("button", { type: "submit", disabled: g || !m.trim(), className: "convokit-send-button", "aria-label": "Send message", children: /* @__PURE__ */ n("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
383
- /* @__PURE__ */ t("path", { d: "M22 2L11 13" }),
384
- /* @__PURE__ */ t("path", { d: "M22 2l-7 20-4-9-9-4z" })
385
- ] }) })
386
- ] }),
387
- /* @__PURE__ */ n("div", { className: "convokit-footer", children: [
388
- "Powered by ",
389
- /* @__PURE__ */ t("a", { href: "https://convokit.com", target: "_blank", rel: "noopener noreferrer", children: "ConvoKit" })
390
- ] })
391
- ] }) })
392
- ] }) })
393
- }
394
- )
395
- ]
396
- }
397
- ) });
398
- }, z = {
399
- title: "Chat",
400
- welcomeMessage: "How can I help you today?",
401
- position: "bottom-right"
402
- }, ae = (e) => {
403
- const { apiUrl: c, apiKey: r } = e;
404
- if (!(c != null && c.trim()) || !(r != null && r.trim()))
405
- return null;
406
- const k = {
407
- ...z,
408
- apiUrl: c.trim(),
409
- apiKey: r.trim(),
410
- authToken: e.authToken,
411
- widgetId: e.widgetId,
412
- title: e.title ?? z.title,
413
- welcomeMessage: e.welcomeMessage ?? z.welcomeMessage,
414
- position: e.position ?? z.position,
415
- primaryColor: e.primaryColor
416
- };
417
- return /* @__PURE__ */ t(ee, { config: k });
418
- }, te = "convokit-widget", oe = ({ config: e, onBack: c, backLabel: r = "Back to editor" }) => {
419
- const k = e.widgetId ?? te, [I, C] = u(!0), [m, x] = u([]), [g, B] = u(""), [v, D] = u(!1), [S, P] = u(null), o = F(null), l = {
420
- ...e,
421
- primaryColor: e.primaryColor || "#000",
422
- title: e.title || "Chat",
423
- subtitle: e.subtitle,
424
- welcomeMessage: e.welcomeMessage || "How can I help you today?",
425
- placeholder: e.placeholder || "Type a message..."
426
- };
427
- N(() => {
428
- if (typeof document > "u") return;
429
- const a = document.documentElement;
430
- a.style.setProperty("--convokit-primary", l.primaryColor), a.style.setProperty("--convokit-header-bg", e.headerBg ?? l.primaryColor ?? "#000"), a.style.setProperty("--convokit-font-family", "Inter, system-ui, sans-serif"), a.style.setProperty("--convokit-font-size", "14px"), a.style.setProperty("--convokit-border-radius", "18px"), a.style.setProperty("--convokit-chat-bg", e.chatBg ?? "#ffffff"), a.style.setProperty("--convokit-user-msg-bg", e.userMsgBg ?? l.primaryColor ?? "#000"), a.style.setProperty("--convokit-assistant-msg-bg", e.assistantMsgBg ?? "#f3f4f6"), a.style.setProperty("--convokit-input-bg", e.inputBg ?? "#ffffff");
431
- }, [l.primaryColor, e.headerBg, e.chatBg, e.userMsgBg, e.assistantMsgBg, e.inputBg]), N(() => {
432
- var a;
433
- (a = o.current) == null || a.scrollIntoView({ behavior: "smooth" });
434
- }, [m, v]);
435
- const T = async (a) => {
436
- if (a.preventDefault(), !g.trim() || v) return;
437
- const p = g.trim();
438
- B(""), P(null);
439
- const E = { role: "user", content: p, timestamp: /* @__PURE__ */ new Date() }, i = [...m, E];
440
- x(i), D(!0);
441
- try {
442
- const s = m.map((y) => ({ role: y.role, content: y.content })), h = typeof e.getAuthToken == "function" ? await Promise.resolve(e.getAuthToken()) : e.authToken, f = A(k);
443
- let d;
444
- f ? d = await U(
445
- e.apiUrl,
446
- p,
447
- s,
448
- f,
449
- h,
450
- e.apiKey
451
- ) : d = await V(
452
- e.apiUrl,
453
- p,
454
- k,
455
- s,
456
- h,
457
- e.apiKey
458
- ), d.conversation_id && typeof window < "u" && J(k, d.conversation_id);
459
- const M = { role: "assistant", content: typeof (d == null ? void 0 : d.reply) == "string" ? d.reply : (d == null ? void 0 : d.reply) != null ? String(d.reply) : "", timestamp: /* @__PURE__ */ new Date() };
460
- x([...i, M]);
461
- } catch (s) {
462
- console.error("[ConvoKit Connect] Chat error:", s);
463
- const h = s instanceof Error ? s.message : "Sorry, something went wrong.";
464
- P(h), x([...i, { role: "assistant", content: `Error: ${h}`, timestamp: /* @__PURE__ */ new Date() }]);
465
- } finally {
466
- D(!1);
467
- }
468
- };
469
- return I ? /* @__PURE__ */ n(
470
- L,
471
- {
472
- className: "convokit-widget",
473
- initial: { opacity: 0 },
474
- animate: { opacity: 1 },
475
- exit: { opacity: 0 },
476
- transition: { duration: 0.2 },
477
- style: {
478
- position: "fixed",
479
- inset: 0,
480
- zIndex: 1e4,
481
- display: "flex",
482
- flexDirection: "column",
483
- background: "var(--convokit-chat-bg)",
484
- fontFamily: "var(--convokit-font-family)",
485
- pointerEvents: "auto"
486
- },
487
- children: [
488
- /* @__PURE__ */ n("div", { className: "convokit-header", style: { flexShrink: 0 }, children: [
489
- /* @__PURE__ */ t("div", { className: "convokit-header-left", children: /* @__PURE__ */ n("div", { className: "convokit-header-text", children: [
490
- /* @__PURE__ */ t("h3", { children: l.title }),
491
- l.subtitle && /* @__PURE__ */ t("p", { className: "convokit-header-subtitle", children: l.subtitle })
492
- ] }) }),
493
- /* @__PURE__ */ t("div", { className: "convokit-header-actions", children: c ? /* @__PURE__ */ n("button", { type: "button", onClick: c, className: "convokit-header-icon", "aria-label": r, style: { fontSize: 14, gap: 6, display: "flex", alignItems: "center" }, children: [
494
- /* @__PURE__ */ t("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }),
495
- r
496
- ] }) : /* @__PURE__ */ t("button", { type: "button", onClick: () => C(!1), className: "convokit-header-icon", "aria-label": "Close chat", children: /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
497
- /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
498
- /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
499
- ] }) }) })
500
- ] }),
501
- /* @__PURE__ */ t("div", { className: "convokit-chat-wrapper", style: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ t("div", { className: "convokit-chat-window-content", style: { flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ n("div", { className: "convokit-chat-container", style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", padding: 16 }, children: [
502
- /* @__PURE__ */ n("div", { className: "convokit-messages", style: { flex: 1, overflowY: "auto", padding: "8px 0" }, children: [
503
- S && /* @__PURE__ */ n("div", { style: { padding: 12, margin: 8, background: "#fee", color: "#c33", borderRadius: 8, fontSize: 14 }, children: [
504
- "⚠️ ",
505
- S
506
- ] }),
507
- m.length === 0 && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(l.welcomeMessage) } }) }),
508
- m.map((a, p) => /* @__PURE__ */ t("div", { className: `convokit-message convokit-message-${a.role}`, children: /* @__PURE__ */ t("div", { className: "convokit-message-content", dangerouslySetInnerHTML: { __html: _(a.content) } }) }, p)),
509
- v && /* @__PURE__ */ t("div", { className: "convokit-message convokit-message-assistant", children: /* @__PURE__ */ t("div", { className: "convokit-message-content", children: /* @__PURE__ */ n("div", { className: "convokit-typing", "aria-hidden": "true", children: [
510
- /* @__PURE__ */ t("span", {}),
511
- /* @__PURE__ */ t("span", {}),
512
- /* @__PURE__ */ t("span", {})
513
- ] }) }) }),
514
- /* @__PURE__ */ t("div", { ref: o })
515
- ] }),
516
- /* @__PURE__ */ n("form", { onSubmit: T, className: "convokit-input-form", children: [
517
- /* @__PURE__ */ t(
518
- "input",
519
- {
520
- type: "text",
521
- value: g,
522
- onChange: (a) => B(a.target.value),
523
- placeholder: l.placeholder,
524
- disabled: v,
525
- className: "convokit-input"
526
- }
527
- ),
528
- /* @__PURE__ */ t("button", { type: "submit", disabled: v || !g.trim(), className: "convokit-send-button", "aria-label": "Send message", children: /* @__PURE__ */ n("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
529
- /* @__PURE__ */ t("path", { d: "M22 2L11 13" }),
530
- /* @__PURE__ */ t("path", { d: "M22 2l-7 20-4-9-9-4z" })
531
- ] }) })
532
- ] }),
533
- /* @__PURE__ */ n("div", { className: "convokit-footer", children: [
534
- "Powered by ",
535
- /* @__PURE__ */ t("a", { href: "https://convokit.com", target: "_blank", rel: "noopener noreferrer", children: "ConvoKit" })
536
- ] })
537
- ] }) }) })
538
- ]
539
- }
540
- ) : /* @__PURE__ */ t(
541
- L,
542
- {
543
- initial: { opacity: 0 },
544
- animate: { opacity: 1 },
545
- style: {
546
- position: "fixed",
547
- inset: 0,
548
- zIndex: 1e4,
549
- display: "flex",
550
- alignItems: "center",
551
- justifyContent: "center",
552
- background: "var(--convokit-chat-bg)",
553
- pointerEvents: "auto"
554
- },
555
- children: /* @__PURE__ */ n(
556
- "button",
557
- {
558
- type: "button",
559
- onClick: () => C(!0),
560
- "aria-label": "Open chat",
561
- style: {
562
- padding: "14px 28px",
563
- borderRadius: 12,
564
- border: "none",
565
- background: l.primaryColor,
566
- color: "white",
567
- fontSize: 16,
568
- fontWeight: 500,
569
- cursor: "pointer",
570
- display: "flex",
571
- alignItems: "center",
572
- gap: 10,
573
- boxShadow: "0 4px 14px rgba(0,0,0,0.15)"
574
- },
575
- children: [
576
- /* @__PURE__ */ t("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ t("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
577
- "Open chat"
578
- ]
579
- }
580
- )
581
- }
582
- );
583
- }, O = {
584
- title: "Chat",
585
- welcomeMessage: "How can I help you today?"
586
- }, le = (e) => {
587
- const { apiUrl: c, apiKey: r } = e;
588
- if (!(c != null && c.trim()) || !(r != null && r.trim()))
589
- return null;
590
- const k = {
591
- ...O,
592
- apiUrl: c.trim(),
593
- apiKey: r.trim(),
594
- authToken: e.authToken,
595
- widgetId: e.widgetId,
596
- title: e.title ?? O.title,
597
- welcomeMessage: e.welcomeMessage ?? O.welcomeMessage,
598
- primaryColor: e.primaryColor
599
- };
600
- return /* @__PURE__ */ t(
601
- oe,
602
- {
603
- config: k,
604
- onBack: e.onBack,
605
- backLabel: e.backLabel ?? "Back"
606
- }
607
- );
608
- };
1
+ (function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode(":root{--convokit-primary: #000;--convokit-header-bg: #000;--convokit-font-family: Inter, system-ui, sans-serif;--convokit-font-size: 14px;--convokit-border-radius: 18px;--convokit-chat-bg: #ffffff;--convokit-user-msg-bg: #000;--convokit-assistant-msg-bg: #f3f4f6;--convokit-input-bg: #ffffff;--convokit-input-border: #d1d5db}.convokit-widget{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;font-family:var(--convokit-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.convokit-button{width:56px;height:56px;border-radius:50%;border:2px solid var(--convokit-primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;z-index:10000;transition:all .2s ease;background:var(--convokit-primary)}.convokit-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.convokit-button:active{transform:translateY(0)}.convokit-button-hidden{opacity:0;transform:scale(0);pointer-events:none;transition:all .2s ease-in-out}.convokit-chat-window{width:380px;height:600px;background:#fff;border-radius:12px;box-shadow:0 4px 16px #0000001a;display:flex;flex-direction:column;overflow:hidden;position:absolute;bottom:0;right:0;z-index:9999;transform-origin:bottom right;border:2px solid #000;overscroll-behavior:contain}.convokit-chat-window-body{width:100%;height:100%;background:#fff;display:flex;flex-direction:column;overflow:hidden}.convokit-chat-wrapper{display:flex;flex-direction:column;flex:1;background:var(--convokit-chat-bg);overflow:hidden}.convokit-header{padding:16px 20px;color:#fff;display:flex;justify-content:space-between;align-items:center;min-height:60px;background:var(--convokit-header-bg);position:relative;border-bottom:2px solid var(--convokit-header-bg)}.convokit-header-subtitle{margin:0;font-size:12px;opacity:.85;line-height:1.3}.convokit-header-left{display:flex;align-items:center;gap:12px;flex:1}.convokit-avatar{display:none}.convokit-header-text{display:flex;flex-direction:column;gap:4px}.convokit-header-text h3{margin:0;font-size:16px;font-weight:600;line-height:1.3}.convokit-header-actions{display:flex;align-items:center;gap:4px}.convokit-header-icon{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:opacity .2s ease}.convokit-header-icon:hover{opacity:.7}.convokit-header-icon:active{opacity:.5}.convokit-chat-window-content{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}.convokit-chat-container{display:flex;flex-direction:column;flex:1;padding:16px;border:none;overflow:hidden;background:transparent;overscroll-behavior:contain}.convokit-messages{flex:1;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:16px;background:transparent;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}.convokit-messages::-webkit-scrollbar{display:none}.convokit-welcome{text-align:center;color:#666;padding:20px;font-size:14px}.convokit-message{display:flex;align-items:flex-end;gap:0;max-width:75%}.convokit-message-user{align-self:flex-end}.convokit-message-assistant{align-self:flex-start}.convokit-bot-icon{display:none}.convokit-message-content{padding:10px 14px;border-radius:var(--convokit-border-radius);word-wrap:break-word;font-size:var(--convokit-font-size);line-height:1.5;position:relative;text-align:left}.convokit-message-user .convokit-message-content{background:var(--convokit-user-msg-bg);color:#fff;border-bottom-right-radius:4px}.convokit-message-assistant .convokit-message-content{background:var(--convokit-assistant-msg-bg);color:#000;border-bottom-left-radius:4px}.convokit-message-content strong{font-weight:600}.convokit-message-content em{font-style:italic}.convokit-message-content a{text-decoration:underline}.convokit-typing{display:flex;gap:6px;padding:4px 0;align-items:center}.convokit-typing span{width:8px;height:8px;border-radius:50%;background:#6b7280;animation:typing-bounce 1.4s ease-in-out infinite}.convokit-typing span:nth-child(1){animation-delay:0s}.convokit-typing span:nth-child(2){animation-delay:.2s}.convokit-typing span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.convokit-input-form{display:flex;align-items:center;padding:12px 0 0;gap:8px;flex-shrink:0;background:transparent;border-bottom:none}.convokit-input{flex:1;padding:11px 14px;border:1px solid color-mix(in srgb,var(--convokit-primary) 35%,transparent);background:var(--convokit-input-bg);border-radius:20px;font-size:var(--convokit-font-size);outline:none;color:#000;font-family:var(--convokit-font-family);transition:border-color .2s ease,box-shadow .2s ease}.convokit-input:focus{border-color:var(--convokit-primary);box-shadow:none}.convokit-input::placeholder{color:#9ca3af}.convokit-input:disabled{background:#f9fafb;color:#9ca3af;border-color:#e5e7eb}.convokit-send-button{width:40px;height:40px;border-radius:50%;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--convokit-primary);transition:opacity .2s ease;position:relative}.convokit-send-button svg{display:block;width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.convokit-send-button:hover:not(:disabled){opacity:.8}.convokit-send-button:active:not(:disabled){opacity:.6}.convokit-send-button:disabled{opacity:.3;cursor:not-allowed;background:var(--convokit-primary)}.convokit-send-button:disabled svg{opacity:.5}.convokit-footer{padding:10px 16px;text-align:center;background:var(--convokit-chat-bg);font-size:11px;color:#6b7280}.convokit-footer a{color:var(--convokit-primary);text-decoration:none;font-weight:500;transition:opacity .2s ease}.convokit-footer a:hover{opacity:.7}.convokit-rating-prompt{padding:16px;border-top:1px solid #e5e7eb;background-color:#f9fafb;border-bottom-left-radius:12px;border-bottom-right-radius:12px}.convokit-rating-question{margin:0 0 12px;font-size:14px;font-weight:500;color:#374151;text-align:center}.convokit-rating-buttons{display:flex;gap:12px;justify-content:center;margin-bottom:12px}.convokit-rating-button{width:48px;height:48px;border-radius:50%;border:2px solid #d1d5db;background-color:#fff;color:#6b7280;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.convokit-rating-button:hover:not(:disabled){border-color:#9ca3af;transform:scale(1.05)}.convokit-rating-button:disabled{opacity:.5;cursor:not-allowed}.convokit-rating-button.convokit-rating-selected{color:#fff;border-width:2px}.convokit-rating-feedback{margin-top:12px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.convokit-rating-textarea{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;min-height:60px;margin-bottom:8px;box-sizing:border-box}.convokit-rating-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.convokit-rating-textarea:disabled{background-color:#f3f4f6;cursor:not-allowed}.convokit-rating-submit{width:100%;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:opacity .2s ease}.convokit-rating-submit:hover:not(:disabled){opacity:.9}.convokit-rating-submit:disabled{opacity:.6;cursor:not-allowed}.convokit-rating-thankyou{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.convokit-rating-icon{width:48px;height:48px;border-radius:50%;background-color:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;margin-bottom:12px}.convokit-rating-message{margin:0;font-size:14px;font-weight:500;color:#374151}@media (max-width: 480px){.convokit-widget{bottom:10px;right:10px}.convokit-chat-window{width:calc(100vw - 20px);height:calc(100vh - 20px);max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);bottom:0;right:0;border-radius:16px}.convokit-message{max-width:85%}.convokit-header{padding:16px 16px 12px;min-height:64px}.convokit-chat-container{padding:12px}}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
2
+ /* empty css */
3
+ import { PopupWidget as t } from "./PopupWidget-sIgNr_Yy.js";
609
4
  export {
610
- le as FullScreenBackendWidget,
611
- re as FullScreenWidget,
612
- ae as PopupBackendWidget,
613
- he as PopupWidget
5
+ t as PopupWidget
614
6
  };