@useknest/widget-react 0.1.0-beta.6 → 0.1.0-beta.7
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/ChatWidget.d.ts.map +1 -1
- package/dist/index.js +154 -119
- package/package.json +2 -2
package/dist/ChatWidget.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../src/ChatWidget.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../src/ChatWidget.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAKX,UAAU,EACV,MAAM,uBAAuB,CAAC;AAK/B,MAAM,WAAW,eAAe;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oGAAoG;IACpG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qGAAqG;IACrG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EAC1B,iBAAiB,EACjB,OAAO,EACP,IAAe,EACf,WAAmB,EACnB,EAAE,eAAe,2CAwWjB"}
|
package/dist/index.js
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".knest-chat-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:1rem;box-shadow:0 10px 15px -3px #0000001a;overflow:hidden;font-family:system-ui,-apple-system,sans-serif}.knest-loading-container{display:flex;align-items:center;justify-content:center;height:100%;background:linear-gradient(135deg,#fdfbf7,#fff)}.knest-loading-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.knest-spinner-ring{width:3rem;height:3rem;border:3px solid #f3f4f6;border-top-color:#0d7a7f;border-radius:50%;animation:knest-spin .8s linear infinite}@keyframes knest-spin{to{transform:rotate(360deg)}}.knest-loading-text{font-size:.875rem;font-weight:500;color:#6b7280;margin:0}.knest-error-container{display:flex;align-items:center;justify-content:center;height:100%;background:linear-gradient(135deg,#fef2f2,#fff);padding:2rem}.knest-error-content{text-align:center;max-width:300px}.knest-error-text{font-size:.875rem;color:#991b1b;margin:0;line-height:1.5}.knest-header{border-bottom:1px solid #f3f4f6;padding:1rem}.knest-header-content{display:flex;align-items:center;gap:.75rem}.knest-avatar-img{width:2rem;height:2rem;object-fit:cover;border-radius:.25rem}.knest-header h2{font-size:1.125rem;font-weight:600;color:#111827;margin:0 0 .25rem}.knest-badge{display:inline-block;padding:.25rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff}.knest-messages-container{flex:1;overflow-y:auto}.knest-separator{margin:0 1.5rem;border-bottom:1px solid #e5e7eb}.knest-message-wrapper{display:flex;flex-direction:column}.knest-message{display:flex;gap:1rem;padding:1.25rem 1.5rem;align-items:flex-start}.knest-message-avatar{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0}.knest-message-avatar .knest-avatar-img{width:100%;height:100%;border-radius:.25rem;object-fit:cover}.knest-user-avatar{width:2rem;height:2rem;border-radius:.25rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:500}.knest-message-content{flex:1;min-width:0}.knest-message-content p{margin:0 0 .5rem;font-size:.875rem;line-height:1.625;color:#374151;word-wrap:break-word}.knest-message-content p:last-child{margin-bottom:0}.knest-message-content code{background-color:#f3f4f6;padding:.125rem .375rem;border-radius:.25rem;font-family:ui-monospace,monospace;font-size:.8125rem;color:#ef4444}.knest-message-content pre{background-color:#1f2937;color:#f9fafb;padding:12px;border-radius:6px;overflow-x:auto;margin:8px 0}.knest-message-content pre code{background-color:transparent;padding:0;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8125rem;line-height:1.5}.knest-message-content .token.keyword,.knest-message-content .token.builtin,.knest-message-content .token.tag{color:#ff7b72}.knest-message-content .token.string,.knest-message-content .token.attr-value{color:#a5d6ff}.knest-message-content .token.number,.knest-message-content .token.boolean{color:#79c0ff}.knest-message-content .token.function,.knest-message-content .token.class-name{color:#d2a8ff}.knest-message-content .token.comment{color:#8b949e;font-style:italic}.knest-message-content .token.variable,.knest-message-content .token.property{color:#ffa657}.knest-message-content .token.operator,.knest-message-content .token.punctuation{color:#c9d1d9}.knest-message-content a{color:#374151;text-decoration:underline}.knest-message-content ul,.knest-message-content ol{margin:8px 0;padding-left:24px}.knest-message-content li{margin:4px 0}.knest-message-content strong{font-weight:600;color:#111827}.knest-message-content em{font-style:italic}.knest-loading{display:flex;gap:.25rem;align-items:center}.knest-dot{width:.5rem;height:.5rem;background:#9ca3af;border-radius:50%;animation:knest-bounce 1.4s infinite ease-in-out both}.knest-dot:nth-child(2){animation-delay:.16s}.knest-dot:nth-child(3){animation-delay:.32s}@keyframes knest-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.knest-sources{margin-top:.75rem}.knest-sources-label{font-size:.75rem;font-weight:500;color:#6b7280;margin-bottom:.5rem}.knest-source-item{display:flex;gap:.5rem;padding:.5rem .75rem;margin-bottom:.25rem;border:1px solid #e5e7eb;border-radius:.375rem;background:#f9fafb;text-decoration:none;transition:all .15s}.knest-source-item:hover{border-color:#d1d5db;background:#f3f4f6}.knest-source-icon{width:1rem;height:1rem;color:#6b7280;flex-shrink:0}.knest-source-text{flex:1;min-width:0}.knest-source-breadcrumb{font-size:.75rem;color:#6b7280;margin-bottom:.125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.knest-source-title{font-size:.875rem;font-weight:500;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.knest-examples{border-top:1px solid #e5e7eb;padding:1.25rem 1.5rem}.knest-examples h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin:0 0 1rem}.knest-example-btn{width:100%;padding:.75rem;margin-bottom:.75rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#fff;text-align:left;font-size:.875rem;color:#374151;cursor:pointer;transition:background .15s}.knest-example-btn:hover{background:#f9fafb}.knest-input-section{border-top:1px solid #f3f4f6;padding:1rem}.knest-input-wrapper{display:flex;align-items:center;gap:.5rem}.knest-input-field{flex:1;padding:.75rem 1rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#f9fafb;font-size:.875rem;color:#374151;outline:none}.knest-input-field:focus{background:#fff;border-color:#d1d5db}.knest-input-field:disabled{opacity:.5}.knest-send-btn{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:.5rem;background:#e5e7eb;color:#6b7280;cursor:pointer;transition:background .15s}.knest-send-btn:hover:not(:disabled){background:#d1d5db}.knest-send-btn:disabled{opacity:.5;cursor:not-allowed}.knest-send-icon{width:1rem;height:1rem}.knest-footer{margin-top:.75rem;display:flex;justify-content:center}.knest-powered-by{display:flex;align-items:center;gap:.125rem;font-size:.75rem;color:#6b7280;text-decoration:none;transition:color .15s}.knest-powered-by:hover{color:#374151}.knest-bubble-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:16px;font-family:system-ui,-apple-system,sans-serif}.knest-bubble-button{width:56px;height:56px;border-radius:50%;border:none;color:#fff;cursor:pointer;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}.knest-bubble-button:hover{transform:scale(1.05);box-shadow:0 6px 16px #0003}.knest-bubble-panel{width:380px;height:520px;max-width:calc(100vw - 48px);max-height:calc(100vh - 100px);border-radius
|
|
2
|
-
import { jsx as e, jsxs as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { formatContent as
|
|
5
|
-
function
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".knest-chat-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:1rem;box-shadow:0 10px 15px -3px #0000001a;overflow:hidden;font-family:system-ui,-apple-system,sans-serif}.knest-loading-container{display:flex;align-items:center;justify-content:center;height:100%;background:linear-gradient(135deg,#fdfbf7,#fff)}.knest-loading-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.knest-spinner-ring{width:3rem;height:3rem;border:3px solid #f3f4f6;border-top-color:#0d7a7f;border-radius:50%;animation:knest-spin .8s linear infinite}@keyframes knest-spin{to{transform:rotate(360deg)}}.knest-loading-text{font-size:.875rem;font-weight:500;color:#6b7280;margin:0}.knest-error-container{display:flex;align-items:center;justify-content:center;height:100%;background:linear-gradient(135deg,#fef2f2,#fff);padding:2rem}.knest-error-content{text-align:center;max-width:300px}.knest-error-text{font-size:.875rem;color:#991b1b;margin:0;line-height:1.5}.knest-header{border-bottom:1px solid #f3f4f6;padding:1rem}.knest-header-content{display:flex;align-items:center;gap:.75rem}.knest-avatar-img{width:2rem;height:2rem;object-fit:cover;border-radius:.25rem}.knest-header h2{font-size:1.125rem;font-weight:600;color:#111827;margin:0 0 .25rem}.knest-badge{display:inline-block;padding:.25rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff}.knest-messages-container{flex:1;overflow-y:auto}.knest-separator{margin:0 1.5rem;border-bottom:1px solid #e5e7eb}.knest-message-wrapper{display:flex;flex-direction:column}.knest-message{display:flex;gap:1rem;padding:1.25rem 1.5rem;align-items:flex-start}.knest-message-avatar{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;flex-shrink:0}.knest-message-avatar .knest-avatar-img{width:100%;height:100%;border-radius:.25rem;object-fit:cover}.knest-user-avatar{width:2rem;height:2rem;border-radius:.25rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:500}.knest-message-content{flex:1;min-width:0}.knest-message-content p{margin:0 0 .5rem;font-size:.875rem;line-height:1.625;color:#374151;word-wrap:break-word}.knest-message-content p:last-child{margin-bottom:0}.knest-message-content code{background-color:#f3f4f6;padding:.125rem .375rem;border-radius:.25rem;font-family:ui-monospace,monospace;font-size:.8125rem;color:#ef4444}.knest-message-content pre{background-color:#1f2937;color:#f9fafb;padding:12px;border-radius:6px;overflow-x:auto;margin:8px 0}.knest-message-content pre code{background-color:transparent;padding:0;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8125rem;line-height:1.5}.knest-message-content .token.keyword,.knest-message-content .token.builtin,.knest-message-content .token.tag{color:#ff7b72}.knest-message-content .token.string,.knest-message-content .token.attr-value{color:#a5d6ff}.knest-message-content .token.number,.knest-message-content .token.boolean{color:#79c0ff}.knest-message-content .token.function,.knest-message-content .token.class-name{color:#d2a8ff}.knest-message-content .token.comment{color:#8b949e;font-style:italic}.knest-message-content .token.variable,.knest-message-content .token.property{color:#ffa657}.knest-message-content .token.operator,.knest-message-content .token.punctuation{color:#c9d1d9}.knest-message-content a{color:#374151;text-decoration:underline}.knest-message-content ul,.knest-message-content ol{margin:8px 0;padding-left:24px}.knest-message-content li{margin:4px 0}.knest-message-content strong{font-weight:600;color:#111827}.knest-message-content em{font-style:italic}.knest-loading{display:flex;gap:.25rem;align-items:center}.knest-dot{width:.5rem;height:.5rem;background:#9ca3af;border-radius:50%;animation:knest-bounce 1.4s infinite ease-in-out both}.knest-dot:nth-child(2){animation-delay:.16s}.knest-dot:nth-child(3){animation-delay:.32s}@keyframes knest-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.knest-sources{margin-top:.75rem}.knest-sources-label{font-size:.75rem;font-weight:500;color:#6b7280;margin-bottom:.5rem}.knest-source-item{display:flex;gap:.5rem;padding:.5rem .75rem;margin-bottom:.25rem;border:1px solid #e5e7eb;border-radius:.375rem;background:#f9fafb;text-decoration:none;transition:all .15s}.knest-source-item:hover{border-color:#d1d5db;background:#f3f4f6}.knest-source-icon{width:1rem;height:1rem;color:#6b7280;flex-shrink:0}.knest-source-text{flex:1;min-width:0}.knest-source-breadcrumb{font-size:.75rem;color:#6b7280;margin-bottom:.125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.knest-source-title{font-size:.875rem;font-weight:500;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.knest-examples{border-top:1px solid #e5e7eb;padding:1.25rem 1.5rem}.knest-examples h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin:0 0 1rem}.knest-example-btn{width:100%;padding:.75rem;margin-bottom:.75rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#fff;text-align:left;font-size:.875rem;color:#374151;cursor:pointer;transition:background .15s}.knest-example-btn:hover{background:#f9fafb}.knest-input-section{border-top:1px solid #f3f4f6;padding:1rem}.knest-input-wrapper{display:flex;align-items:center;gap:.5rem}.knest-input-field{flex:1;padding:.75rem 1rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#f9fafb;font-size:.875rem;color:#374151;outline:none}.knest-input-field:focus{background:#fff;border-color:#d1d5db}.knest-input-field:disabled{opacity:.5}.knest-send-btn{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:.5rem;background:#e5e7eb;color:#6b7280;cursor:pointer;transition:background .15s}.knest-send-btn:hover:not(:disabled){background:#d1d5db}.knest-send-btn:disabled{opacity:.5;cursor:not-allowed}.knest-send-icon{width:1rem;height:1rem}.knest-footer{margin-top:.75rem;display:flex;justify-content:center}.knest-powered-by{display:flex;align-items:center;gap:.125rem;font-size:.75rem;color:#6b7280;text-decoration:none;transition:color .15s}.knest-powered-by:hover{color:#374151;text-decoration:underline}.knest-bubble-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:16px;font-family:system-ui,-apple-system,sans-serif}.knest-bubble-button{width:56px;height:56px;border-radius:50%;border:none;color:#fff;cursor:pointer;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}.knest-bubble-button:hover{transform:scale(1.05);box-shadow:0 6px 16px #0003}.knest-bubble-spinner{animation:knest-spin 1s linear infinite}.knest-bubble-panel{width:380px;height:520px;max-width:calc(100vw - 48px);max-height:calc(100vh - 100px);border-radius:1rem;border:1px solid rgba(0,0,0,.1);box-shadow:0 10px 15px -3px #0000001a;overflow:hidden}.knest-bubble-panel .knest-chat-card{height:100%}@media (max-width: 440px){.knest-bubble-container{bottom:16px;right:16px}.knest-bubble-panel{width:calc(100vw - 32px);height:calc(100vh - 100px)}}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
import { jsx as e, jsxs as n } from "react/jsx-runtime";
|
|
3
|
+
import { useState as a, useRef as z, useEffect as B } from "react";
|
|
4
|
+
import { formatContent as K, DEFAULT_AVATAR_URL as G, DEFAULT_EXAMPLE_QUESTIONS as H, DEFAULT_BRAND_COLOR as V, initWidgetSentry as R, initWidgetAuth as q, PUBLIC_SUPABASE_URL as X, PUBLIC_SUPABASE_ANON_KEY as Y, AUTH_ERROR_MESSAGE as $, fetchWidgetConfig as J, DEFAULT_WELCOME_MESSAGE as Z, streamChatMessage as ee, captureWidgetException as te } from "@useknest/widget-core";
|
|
5
|
+
function ne({
|
|
6
6
|
message: r,
|
|
7
|
-
isLoading:
|
|
8
|
-
avatarUrl:
|
|
9
|
-
brandColor:
|
|
10
|
-
showAvatar:
|
|
7
|
+
isLoading: d = !1,
|
|
8
|
+
avatarUrl: E = "/default-avatar.svg",
|
|
9
|
+
brandColor: p = "#0d7a7f",
|
|
10
|
+
showAvatar: m = !0
|
|
11
11
|
}) {
|
|
12
|
-
const [
|
|
13
|
-
|
|
14
|
-
},
|
|
15
|
-
return /* @__PURE__ */ e("div", { className: "knest-message-wrapper", children: /* @__PURE__ */
|
|
16
|
-
|
|
12
|
+
const [C, l] = a(!1), N = () => {
|
|
13
|
+
l(!0);
|
|
14
|
+
}, y = r.content ? K(r.content) : "";
|
|
15
|
+
return /* @__PURE__ */ e("div", { className: "knest-message-wrapper", children: /* @__PURE__ */ n("div", { className: "knest-message", children: [
|
|
16
|
+
m && /* @__PURE__ */ e("div", { className: "knest-message-avatar", children: r.role === "assistant" ? C ? /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: p }, children: "AI" }) : /* @__PURE__ */ e(
|
|
17
17
|
"img",
|
|
18
18
|
{
|
|
19
|
-
src:
|
|
19
|
+
src: E,
|
|
20
20
|
alt: "Avatar",
|
|
21
21
|
className: "knest-avatar-img",
|
|
22
|
-
onError:
|
|
22
|
+
onError: N
|
|
23
23
|
}
|
|
24
|
-
) : /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor:
|
|
25
|
-
/* @__PURE__ */
|
|
26
|
-
!r.content &&
|
|
24
|
+
) : /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: p }, children: "U" }) }),
|
|
25
|
+
/* @__PURE__ */ n("div", { className: "knest-message-content", children: [
|
|
26
|
+
!r.content && d && r.role === "assistant" ? /* @__PURE__ */ n("div", { className: "knest-loading", children: [
|
|
27
27
|
/* @__PURE__ */ e("div", { className: "knest-dot" }),
|
|
28
28
|
/* @__PURE__ */ e("div", { className: "knest-dot" }),
|
|
29
29
|
/* @__PURE__ */ e("div", { className: "knest-dot" })
|
|
30
|
-
] }) : /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html:
|
|
31
|
-
r.sources && r.sources.length > 0 && /* @__PURE__ */
|
|
30
|
+
] }) : /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: y } }),
|
|
31
|
+
r.sources && r.sources.length > 0 && /* @__PURE__ */ n("div", { className: "knest-sources", children: [
|
|
32
32
|
/* @__PURE__ */ e("div", { className: "knest-sources-label", children: "Sources" }),
|
|
33
|
-
r.sources.slice(0, 1).map((
|
|
33
|
+
r.sources.slice(0, 1).map((h, f) => /* @__PURE__ */ n(
|
|
34
34
|
"a",
|
|
35
35
|
{
|
|
36
|
-
href:
|
|
36
|
+
href: h.url,
|
|
37
37
|
target: "_blank",
|
|
38
38
|
rel: "noopener noreferrer",
|
|
39
39
|
className: "knest-source-item",
|
|
@@ -56,150 +56,149 @@ function q({
|
|
|
56
56
|
)
|
|
57
57
|
}
|
|
58
58
|
),
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
-
|
|
61
|
-
/* @__PURE__ */ e("div", { className: "knest-source-title", children:
|
|
59
|
+
/* @__PURE__ */ n("div", { className: "knest-source-text", children: [
|
|
60
|
+
h.breadcrumb && /* @__PURE__ */ e("div", { className: "knest-source-breadcrumb", children: h.breadcrumb }),
|
|
61
|
+
/* @__PURE__ */ e("div", { className: "knest-source-title", children: h.title })
|
|
62
62
|
] })
|
|
63
63
|
]
|
|
64
64
|
},
|
|
65
|
-
|
|
65
|
+
f
|
|
66
66
|
))
|
|
67
67
|
] })
|
|
68
68
|
] })
|
|
69
69
|
] }) });
|
|
70
70
|
}
|
|
71
|
-
function
|
|
71
|
+
function ae({
|
|
72
72
|
publishableApiKey: r,
|
|
73
|
-
baseUrl:
|
|
74
|
-
mode:
|
|
75
|
-
defaultOpen:
|
|
73
|
+
baseUrl: d,
|
|
74
|
+
mode: E = "inline",
|
|
75
|
+
defaultOpen: p = !1
|
|
76
76
|
}) {
|
|
77
|
-
const [
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
77
|
+
const [m, C] = a(null), [l, N] = a(!0), [y, h] = a(null), [f, U] = a(!1), [u, k] = a([]), [b, w] = a(""), [L, I] = a(!1), [M, T] = a(void 0), [x, O] = a(p), A = z(null), P = m?.avatarUrl || G, j = m?.exampleQuestions || H, W = m?.brandColor || V;
|
|
78
|
+
B(() => {
|
|
79
|
+
typeof requestIdleCallback < "u" ? requestIdleCallback(() => R()) : setTimeout(() => R(), 0);
|
|
80
|
+
const t = q(X, Y);
|
|
81
|
+
(async () => {
|
|
82
|
+
const i = await J(r, d, (s) => {
|
|
83
|
+
C(s);
|
|
84
|
+
});
|
|
85
|
+
if (i.error) {
|
|
86
|
+
h(i.error), N(!1);
|
|
83
87
|
return;
|
|
84
88
|
}
|
|
85
|
-
|
|
86
|
-
const u = await $(
|
|
87
|
-
t.config.supabaseUrl,
|
|
88
|
-
t.config.supabaseAnonKey
|
|
89
|
-
);
|
|
90
|
-
u || console.warn("Widget auth initialization failed"), T(u);
|
|
91
|
-
}
|
|
92
|
-
p(!1), h([
|
|
89
|
+
C(i.config), N(!1), k([
|
|
93
90
|
{
|
|
94
91
|
role: "assistant",
|
|
95
|
-
content:
|
|
92
|
+
content: i.config?.welcomeMessage || Z
|
|
96
93
|
}
|
|
97
94
|
]);
|
|
95
|
+
const g = await t;
|
|
96
|
+
g || console.warn("Widget auth initialization failed"), U(g);
|
|
98
97
|
})();
|
|
99
|
-
}, [r,
|
|
100
|
-
|
|
101
|
-
}, [
|
|
102
|
-
const
|
|
103
|
-
if (!
|
|
104
|
-
const
|
|
105
|
-
|
|
106
|
-
const
|
|
107
|
-
|
|
108
|
-
let
|
|
109
|
-
await
|
|
98
|
+
}, [r, d]), B(() => {
|
|
99
|
+
u.length > 0 && A.current && A.current.scrollIntoView({ behavior: "smooth" });
|
|
100
|
+
}, [u]);
|
|
101
|
+
const _ = async () => {
|
|
102
|
+
if (!b.trim() || L || !f) return;
|
|
103
|
+
const t = b.trim();
|
|
104
|
+
w(""), I(!0), k((s) => [...s, { role: "user", content: t }]);
|
|
105
|
+
const o = u.length + 1;
|
|
106
|
+
k((s) => [...s, { role: "assistant", content: "" }]);
|
|
107
|
+
let i = "", g = [];
|
|
108
|
+
await ee({
|
|
110
109
|
publishableApiKey: r,
|
|
111
|
-
content:
|
|
112
|
-
threadId:
|
|
113
|
-
baseUrl:
|
|
110
|
+
content: t,
|
|
111
|
+
threadId: M,
|
|
112
|
+
baseUrl: d,
|
|
114
113
|
callbacks: {
|
|
115
|
-
onInit: (
|
|
116
|
-
|
|
114
|
+
onInit: (s) => {
|
|
115
|
+
M || T(s);
|
|
117
116
|
},
|
|
118
|
-
onContent: (
|
|
119
|
-
|
|
120
|
-
const c = [...
|
|
121
|
-
return c[
|
|
117
|
+
onContent: (s) => {
|
|
118
|
+
i += s, k((v) => {
|
|
119
|
+
const c = [...v];
|
|
120
|
+
return c[o] = {
|
|
122
121
|
role: "assistant",
|
|
123
|
-
content:
|
|
122
|
+
content: i
|
|
124
123
|
}, c;
|
|
125
124
|
});
|
|
126
125
|
},
|
|
127
|
-
onComplete: (
|
|
128
|
-
|
|
129
|
-
const c = [...
|
|
130
|
-
return c[
|
|
126
|
+
onComplete: (s) => {
|
|
127
|
+
g = s, k((v) => {
|
|
128
|
+
const c = [...v];
|
|
129
|
+
return c[o] = {
|
|
131
130
|
role: "assistant",
|
|
132
|
-
content:
|
|
133
|
-
sources:
|
|
131
|
+
content: i,
|
|
132
|
+
sources: g
|
|
134
133
|
}, c;
|
|
135
134
|
});
|
|
136
135
|
},
|
|
137
|
-
onError: (
|
|
138
|
-
|
|
139
|
-
const c = [...
|
|
140
|
-
return c[
|
|
136
|
+
onError: (s) => {
|
|
137
|
+
te(s, { userMessage: t, threadId: M, baseUrl: d }), k((v) => {
|
|
138
|
+
const c = [...v];
|
|
139
|
+
return c[o] = {
|
|
141
140
|
role: "assistant",
|
|
142
|
-
content: `Error: ${
|
|
141
|
+
content: `Error: ${s}`
|
|
143
142
|
}, c;
|
|
144
143
|
});
|
|
145
144
|
}
|
|
146
145
|
}
|
|
147
|
-
}),
|
|
148
|
-
}, D = (
|
|
149
|
-
|
|
150
|
-
}, F = async (
|
|
151
|
-
|
|
152
|
-
},
|
|
146
|
+
}), I(!1);
|
|
147
|
+
}, D = (t) => {
|
|
148
|
+
t.key === "Enter" && !t.shiftKey && (t.preventDefault(), _());
|
|
149
|
+
}, F = async (t) => {
|
|
150
|
+
w(t), setTimeout(() => _(), 0);
|
|
151
|
+
}, S = l ? /* @__PURE__ */ e("div", { className: "knest-chat-card", children: /* @__PURE__ */ e("div", { className: "knest-loading-container", children: /* @__PURE__ */ n("div", { className: "knest-loading-content", children: [
|
|
153
152
|
/* @__PURE__ */ e("div", { className: "knest-spinner-ring" }),
|
|
154
153
|
/* @__PURE__ */ e("p", { className: "knest-loading-text", children: "Loading chat..." })
|
|
155
|
-
] }) }) }) :
|
|
156
|
-
/* @__PURE__ */
|
|
157
|
-
|
|
154
|
+
] }) }) }) : y === "auth" ? /* @__PURE__ */ e("div", { className: "knest-chat-card", children: /* @__PURE__ */ e("div", { className: "knest-error-container", children: /* @__PURE__ */ e("div", { className: "knest-error-content", children: /* @__PURE__ */ e("p", { className: "knest-error-text", children: $ }) }) }) }) : /* @__PURE__ */ n("div", { className: "knest-chat-card", children: [
|
|
155
|
+
/* @__PURE__ */ n("div", { className: "knest-messages-container", children: [
|
|
156
|
+
u.map((t, o) => /* @__PURE__ */ n("div", { children: [
|
|
158
157
|
/* @__PURE__ */ e(
|
|
159
|
-
|
|
158
|
+
ne,
|
|
160
159
|
{
|
|
161
|
-
message:
|
|
162
|
-
isLoading: !
|
|
163
|
-
avatarUrl:
|
|
164
|
-
brandColor:
|
|
160
|
+
message: t,
|
|
161
|
+
isLoading: !t.content && L && t.role === "assistant",
|
|
162
|
+
avatarUrl: P,
|
|
163
|
+
brandColor: W
|
|
165
164
|
}
|
|
166
165
|
),
|
|
167
|
-
|
|
168
|
-
] },
|
|
169
|
-
|
|
166
|
+
o < u.length - 1 && /* @__PURE__ */ e("div", { className: "knest-separator" })
|
|
167
|
+
] }, o)),
|
|
168
|
+
u.length === 1 && !l && /* @__PURE__ */ n("div", { className: "knest-examples", children: [
|
|
170
169
|
/* @__PURE__ */ e("h3", { children: "Example Questions" }),
|
|
171
|
-
j.map((
|
|
170
|
+
j.map((t, o) => /* @__PURE__ */ e(
|
|
172
171
|
"button",
|
|
173
172
|
{
|
|
174
|
-
onClick: () => F(
|
|
173
|
+
onClick: () => F(t),
|
|
175
174
|
className: "knest-example-btn",
|
|
176
|
-
style:
|
|
177
|
-
children:
|
|
175
|
+
style: o === 0 ? { borderColor: W, borderWidth: "2px" } : {},
|
|
176
|
+
children: t
|
|
178
177
|
},
|
|
179
|
-
|
|
178
|
+
o
|
|
180
179
|
))
|
|
181
180
|
] }),
|
|
182
|
-
/* @__PURE__ */ e("div", { ref:
|
|
181
|
+
/* @__PURE__ */ e("div", { ref: A })
|
|
183
182
|
] }),
|
|
184
|
-
/* @__PURE__ */
|
|
185
|
-
/* @__PURE__ */
|
|
183
|
+
/* @__PURE__ */ n("div", { className: "knest-input-section", children: [
|
|
184
|
+
/* @__PURE__ */ n("div", { className: "knest-input-wrapper", children: [
|
|
186
185
|
/* @__PURE__ */ e(
|
|
187
186
|
"input",
|
|
188
187
|
{
|
|
189
188
|
type: "text",
|
|
190
|
-
value:
|
|
191
|
-
onChange: (
|
|
189
|
+
value: b,
|
|
190
|
+
onChange: (t) => w(t.target.value),
|
|
192
191
|
onKeyPress: D,
|
|
193
192
|
placeholder: "Ask me anything...",
|
|
194
|
-
disabled:
|
|
193
|
+
disabled: L || !f,
|
|
195
194
|
className: "knest-input-field"
|
|
196
195
|
}
|
|
197
196
|
),
|
|
198
197
|
/* @__PURE__ */ e(
|
|
199
198
|
"button",
|
|
200
199
|
{
|
|
201
|
-
onClick:
|
|
202
|
-
disabled:
|
|
200
|
+
onClick: _,
|
|
201
|
+
disabled: L || !b.trim() || !f,
|
|
203
202
|
className: "knest-send-btn",
|
|
204
203
|
"aria-label": "Send message",
|
|
205
204
|
children: /* @__PURE__ */ e("svg", { className: "knest-send-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
|
|
@@ -214,7 +213,7 @@ function se({
|
|
|
214
213
|
}
|
|
215
214
|
)
|
|
216
215
|
] }),
|
|
217
|
-
/* @__PURE__ */ e("div", { className: "knest-footer", children: /* @__PURE__ */
|
|
216
|
+
/* @__PURE__ */ e("div", { className: "knest-footer", children: /* @__PURE__ */ n(
|
|
218
217
|
"a",
|
|
219
218
|
{
|
|
220
219
|
href: "https://useknest.com",
|
|
@@ -223,7 +222,7 @@ function se({
|
|
|
223
222
|
className: "knest-powered-by",
|
|
224
223
|
children: [
|
|
225
224
|
/* @__PURE__ */ e("span", { children: "Powered by" }),
|
|
226
|
-
/* @__PURE__ */
|
|
225
|
+
/* @__PURE__ */ n(
|
|
227
226
|
"svg",
|
|
228
227
|
{
|
|
229
228
|
width: "14",
|
|
@@ -290,16 +289,52 @@ function se({
|
|
|
290
289
|
) })
|
|
291
290
|
] })
|
|
292
291
|
] });
|
|
293
|
-
|
|
294
|
-
|
|
292
|
+
if (E === "inline")
|
|
293
|
+
return S;
|
|
294
|
+
const Q = l ? "#9ca3af" : W;
|
|
295
|
+
return /* @__PURE__ */ n("div", { className: "knest-bubble-container", children: [
|
|
296
|
+
x && /* @__PURE__ */ e("div", { className: "knest-bubble-panel", children: S }),
|
|
295
297
|
/* @__PURE__ */ e(
|
|
296
298
|
"button",
|
|
297
299
|
{
|
|
298
|
-
className: "knest-bubble-button",
|
|
299
|
-
onClick: () => O(!
|
|
300
|
-
"aria-label":
|
|
301
|
-
style: { backgroundColor:
|
|
302
|
-
children:
|
|
300
|
+
className: ["knest-bubble-button", l && "knest-bubble-loading"].filter(Boolean).join(" "),
|
|
301
|
+
onClick: () => O(!x),
|
|
302
|
+
"aria-label": l ? "Loading chat" : x ? "Close chat" : "Open chat",
|
|
303
|
+
style: { backgroundColor: Q },
|
|
304
|
+
children: l ? /* @__PURE__ */ n(
|
|
305
|
+
"svg",
|
|
306
|
+
{
|
|
307
|
+
width: "24",
|
|
308
|
+
height: "24",
|
|
309
|
+
viewBox: "0 0 24 24",
|
|
310
|
+
fill: "none",
|
|
311
|
+
className: "knest-bubble-spinner",
|
|
312
|
+
children: [
|
|
313
|
+
/* @__PURE__ */ e(
|
|
314
|
+
"circle",
|
|
315
|
+
{
|
|
316
|
+
cx: "12",
|
|
317
|
+
cy: "12",
|
|
318
|
+
r: "9",
|
|
319
|
+
stroke: "currentColor",
|
|
320
|
+
strokeOpacity: "0.25",
|
|
321
|
+
strokeWidth: "3",
|
|
322
|
+
fill: "none"
|
|
323
|
+
}
|
|
324
|
+
),
|
|
325
|
+
/* @__PURE__ */ e(
|
|
326
|
+
"path",
|
|
327
|
+
{
|
|
328
|
+
d: "M12 3a9 9 0 0 1 9 9",
|
|
329
|
+
stroke: "currentColor",
|
|
330
|
+
strokeWidth: "3",
|
|
331
|
+
strokeLinecap: "round",
|
|
332
|
+
fill: "none"
|
|
333
|
+
}
|
|
334
|
+
)
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
) : x ? /* @__PURE__ */ e(
|
|
303
338
|
"svg",
|
|
304
339
|
{
|
|
305
340
|
width: "24",
|
|
@@ -334,6 +369,6 @@ function se({
|
|
|
334
369
|
] });
|
|
335
370
|
}
|
|
336
371
|
export {
|
|
337
|
-
|
|
338
|
-
|
|
372
|
+
ne as ChatMessage,
|
|
373
|
+
ae as ChatWidget
|
|
339
374
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@useknest/widget-react",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Native React component for Knest chat widget",
|
|
6
6
|
"files": [
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@useknest/widget-core": "0.1.0-beta.
|
|
25
|
+
"@useknest/widget-core": "0.1.0-beta.7"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@types/react": "^18.3.3",
|