@useknest/widget-react 0.1.0-beta.10 → 0.1.0-beta.11

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.
Files changed (3) hide show
  1. package/dist/ChatWidget.d.ts.map +1 -1
  2. package/dist/index.js +127 -113
  3. 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":"AAgBA,OAAO,KAAK,EAKX,UAAU,EACV,MAAM,uBAAuB,CAAC;AAK/B,4EAA4E;AAC5E,MAAM,WAAW,cAAc;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qGAAqG;IACrG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EAC1B,iBAAiB,EACjB,IAAe,EACf,WAAmB,EACnB,SAAS,EACT,EAAE,eAAe,2CAyYjB"}
1
+ {"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../src/ChatWidget.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAKX,UAAU,EACV,MAAM,uBAAuB,CAAC;AAK/B,4EAA4E;AAC5E,MAAM,WAAW,cAAc;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,qGAAqG;IACrG,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EAC1B,iBAAiB,EACjB,IAAe,EACf,WAAmB,EACnB,SAAS,EACT,EAAE,eAAe,2CA2ajB"}
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;color:#374151;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:#3b82f6;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:center}.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:inherit;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:inherit;text-decoration:underline}.knest-message-content ul,.knest-message-content ol{margin:8px 0;padding-left:24px}.knest-message-content li{margin:4px 0;color:inherit}.knest-message-content strong{font-weight:600;color:inherit}.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)}})();
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;color:#374151;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:#3b82f6;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:center}.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:inherit;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:inherit;text-decoration:underline}.knest-message-content ul,.knest-message-content ol{margin:8px 0;padding-left:24px}.knest-message-content li{margin:4px 0;color:inherit}.knest-message-content strong{font-weight:600;color:inherit}.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-reset-row{display:flex;justify-content:center;margin-top:.5rem}.knest-reset-btn{background:none;border:none;padding:0;font-size:.75rem;color:#9ca3af;cursor:pointer;transition:color .15s}.knest-reset-btn:hover{color:#6b7280}.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
2
  import { jsx as e, jsxs as r } from "react/jsx-runtime";
3
- import { useState as c, useRef as z, useEffect as I } from "react";
4
- import { formatContent as G, DEFAULT_BRAND_COLOR as T, DEFAULT_AVATAR_URL as H, DEFAULT_EXAMPLE_QUESTIONS as V, initWidgetSentry as _, PUBLIC_SUPABASE_URL as q, PUBLIC_SUPABASE_ANON_KEY as X, initWidgetAuth as Y, subscribeToThread as $, AUTH_ERROR_MESSAGE as J, fetchWidgetConfig as Z, DEFAULT_WELCOME_MESSAGE as ee, streamChatMessage as te, captureWidgetException as ne } from "@useknest/widget-core";
5
- function se({
6
- message: o,
7
- isLoading: y = !1,
8
- avatarUrl: E = "/default-avatar.svg",
9
- brandColor: i = T,
3
+ import { useState as d, useRef as q, useEffect as E } from "react";
4
+ import { formatContent as K, DEFAULT_BRAND_COLOR as O, DEFAULT_AVATAR_URL as X, DEFAULT_EXAMPLE_QUESTIONS as Y, initWidgetSentry as T, PUBLIC_SUPABASE_URL as $, PUBLIC_SUPABASE_ANON_KEY as J, initWidgetAuth as Z, saveChatStateDebounced as ee, subscribeToThread as te, AUTH_ERROR_MESSAGE as ne, fetchWidgetConfig as se, loadChatState as re, DEFAULT_WELCOME_MESSAGE as R, streamChatMessage as ae, captureWidgetException as oe, clearChatState as ce } from "@useknest/widget-core";
5
+ function le({
6
+ message: a,
7
+ isLoading: M = !1,
8
+ avatarUrl: y = "/default-avatar.svg",
9
+ brandColor: h = O,
10
10
  showAvatar: v = !0
11
11
  }) {
12
- const [p, u] = c(!1), C = () => {
13
- u(!0);
14
- }, w = o.content ? G(o.content) : "";
12
+ const [L, k] = d(!1), x = () => {
13
+ k(!0);
14
+ }, A = a.content ? K(a.content) : "";
15
15
  return /* @__PURE__ */ e("div", { className: "knest-message-wrapper", children: /* @__PURE__ */ r("div", { className: "knest-message", children: [
16
- v && /* @__PURE__ */ e("div", { className: "knest-message-avatar", children: o.role === "assistant" ? p ? /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: i }, children: "AI" }) : /* @__PURE__ */ e(
16
+ v && /* @__PURE__ */ e("div", { className: "knest-message-avatar", children: a.role === "assistant" ? L ? /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: h }, children: "AI" }) : /* @__PURE__ */ e(
17
17
  "img",
18
18
  {
19
- src: E,
19
+ src: y,
20
20
  alt: "Avatar",
21
21
  className: "knest-avatar-img",
22
- onError: C
22
+ onError: x
23
23
  }
24
- ) : /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: i }, children: "U" }) }),
24
+ ) : /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: h }, children: "U" }) }),
25
25
  /* @__PURE__ */ r("div", { className: "knest-message-content", children: [
26
- !o.content && y && o.role === "assistant" ? /* @__PURE__ */ r("div", { className: "knest-loading", children: [
26
+ !a.content && M && a.role === "assistant" ? /* @__PURE__ */ r("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: w } }),
31
- o.sources && o.sources.length > 0 && /* @__PURE__ */ r("div", { className: "knest-sources", children: [
30
+ ] }) : /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: A } }),
31
+ a.sources && a.sources.length > 0 && /* @__PURE__ */ r("div", { className: "knest-sources", children: [
32
32
  /* @__PURE__ */ e("div", { className: "knest-sources-label", children: "Sources" }),
33
- o.sources.slice(0, 1).map((m, k) => /* @__PURE__ */ r(
33
+ a.sources.slice(0, 1).map((C, f) => /* @__PURE__ */ r(
34
34
  "a",
35
35
  {
36
- href: m.url,
36
+ href: C.url,
37
37
  target: "_blank",
38
38
  rel: "noopener noreferrer",
39
39
  className: "knest-source-item",
@@ -57,142 +57,155 @@ function se({
57
57
  }
58
58
  ),
59
59
  /* @__PURE__ */ r("div", { className: "knest-source-text", children: [
60
- m.breadcrumb && /* @__PURE__ */ e("div", { className: "knest-source-breadcrumb", children: m.breadcrumb }),
61
- /* @__PURE__ */ e("div", { className: "knest-source-title", children: m.title })
60
+ C.breadcrumb && /* @__PURE__ */ e("div", { className: "knest-source-breadcrumb", children: C.breadcrumb }),
61
+ /* @__PURE__ */ e("div", { className: "knest-source-title", children: C.title })
62
62
  ] })
63
63
  ]
64
64
  },
65
- k
65
+ f
66
66
  ))
67
67
  ] })
68
68
  ] })
69
69
  ] }) });
70
70
  }
71
- function le({
72
- publishableApiKey: o,
73
- mode: y = "inline",
74
- defaultOpen: E = !1,
75
- _internal: i
71
+ function ue({
72
+ publishableApiKey: a,
73
+ mode: M = "inline",
74
+ defaultOpen: y = !1,
75
+ _internal: h
76
76
  }) {
77
- const [v, p] = c(null), [u, C] = c(!0), [w, m] = c(null), [k, R] = c(!1), [f, h] = c([]), [N, A] = c(""), [L, S] = c(!1), [g, O] = c(void 0), [x, P] = c(E), M = z(null), j = v?.avatarUrl || H, D = v?.exampleQuestions || V, U = v?.brandColor || T;
78
- I(() => {
79
- typeof requestIdleCallback < "u" ? requestIdleCallback(() => _()) : setTimeout(() => _(), 0);
80
- const t = i?.supabaseUrl || q, s = i?.supabaseAnonKey || X, d = Y(t, s);
77
+ const [v, L] = d(null), [k, x] = d(!0), [A, C] = d(null), [f, D] = d(!1), [l, i] = d([]), [g, b] = d(""), [p, B] = d(!1), [m, U] = d(void 0), [w, P] = d(y), S = q(null), j = v?.avatarUrl || X, F = v?.exampleQuestions || Y, W = v?.brandColor || O;
78
+ E(() => {
79
+ typeof requestIdleCallback < "u" ? requestIdleCallback(() => T()) : setTimeout(() => T(), 0);
80
+ const t = h?.supabaseUrl || $, s = h?.supabaseAnonKey || J, u = Z(t, s);
81
81
  (async () => {
82
- const n = await Z(
83
- o,
84
- i?.baseUrl,
85
- (l) => {
86
- p(l);
82
+ const n = await se(
83
+ a,
84
+ h?.baseUrl,
85
+ (V) => {
86
+ L(V);
87
87
  }
88
88
  );
89
89
  if (n.error) {
90
- m(n.error), C(!1);
90
+ C(n.error), x(!1);
91
91
  return;
92
92
  }
93
- p(n.config), C(!1), h([
93
+ L(n.config), x(!1);
94
+ const o = re(a);
95
+ o && o.messages.length > 0 ? (i(o.messages), U(o.threadId), b(o.input)) : i([
94
96
  {
95
97
  role: "assistant",
96
- content: n.config?.welcomeMessage || ee
98
+ content: n.config?.welcomeMessage || R
97
99
  }
98
100
  ]);
99
- const a = await d;
100
- a || console.warn("Widget auth initialization failed"), R(a);
101
+ const c = await u;
102
+ c || console.warn("Widget auth initialization failed"), D(c);
101
103
  })();
102
- }, [o, i]), I(() => {
103
- f.length > 0 && M.current && M.current.scrollIntoView({ behavior: "smooth" });
104
- }, [f]), I(() => !g || !k ? void 0 : $(g, (s) => {
105
- s.role === "human" && h(
106
- (d) => d.some((b) => b.id === s.id) ? d : [...d, { id: s.id, role: "assistant", content: s.content }]
104
+ }, [a, h]), E(() => {
105
+ l.length > 0 && S.current && S.current.scrollIntoView({ behavior: "smooth" });
106
+ }, [l]), E(() => {
107
+ l.length <= 1 && !g || ee(a, {
108
+ threadId: m,
109
+ messages: l,
110
+ input: g,
111
+ savedAt: Date.now()
112
+ });
113
+ }, [l, m, g, a]), E(() => !m || !f ? void 0 : te(m, (s) => {
114
+ s.role === "human" && i(
115
+ (u) => u.some((N) => N.id === s.id) ? u : [...u, { id: s.id, role: "assistant", content: s.content }]
107
116
  );
108
- }), [g, k]);
109
- const W = async () => {
110
- if (!N.trim() || L || !k) return;
111
- const t = N.trim();
112
- A(""), S(!0), h((n) => [...n, { role: "user", content: t }]);
113
- const s = f.length + 1;
114
- h((n) => [...n, { role: "assistant", content: "" }]);
115
- let d = "", b = [];
116
- await te({
117
- publishableApiKey: o,
117
+ }), [m, f]);
118
+ const I = async () => {
119
+ if (!g.trim() || p || !f) return;
120
+ const t = g.trim();
121
+ b(""), B(!0), i((n) => [...n, { role: "user", content: t }]);
122
+ const s = l.length + 1;
123
+ i((n) => [...n, { role: "assistant", content: "" }]);
124
+ let u = "", N = [];
125
+ await ae({
126
+ publishableApiKey: a,
118
127
  content: t,
119
- threadId: g,
120
- baseUrl: i?.baseUrl,
128
+ threadId: m,
129
+ baseUrl: h?.baseUrl,
121
130
  callbacks: {
122
131
  onInit: (n) => {
123
- g || O(n);
132
+ m || U(n);
124
133
  },
125
134
  onContent: (n) => {
126
- d += n, h((a) => {
127
- const l = [...a];
128
- return l[s] = {
135
+ u += n, i((o) => {
136
+ const c = [...o];
137
+ return c[s] = {
129
138
  role: "assistant",
130
- content: d
131
- }, l;
139
+ content: u
140
+ }, c;
132
141
  });
133
142
  },
134
143
  onComplete: (n) => {
135
- b = n, h((a) => {
136
- const l = [...a];
137
- return l[s] = {
144
+ N = n, i((o) => {
145
+ const c = [...o];
146
+ return c[s] = {
138
147
  role: "assistant",
139
- content: d,
140
- sources: b
141
- }, l;
148
+ content: u,
149
+ sources: N
150
+ }, c;
142
151
  });
143
152
  },
144
153
  onDone: ({ humanTakeover: n }) => {
145
- n && h((a) => [
146
- ...a.slice(0, s),
147
- ...a.slice(s + 1)
154
+ n && i((o) => [
155
+ ...o.slice(0, s),
156
+ ...o.slice(s + 1)
148
157
  ]);
149
158
  },
150
159
  onError: (n) => {
151
- ne(n, { userMessage: t, threadId: g, baseUrl: i?.baseUrl }), h((a) => {
152
- const l = [...a];
153
- return l[s] = {
160
+ oe(n, { userMessage: t, threadId: m, baseUrl: h?.baseUrl }), i((o) => {
161
+ const c = [...o];
162
+ return c[s] = {
154
163
  role: "assistant",
155
164
  content: `Error: ${n}`
156
- }, l;
165
+ }, c;
157
166
  });
158
167
  }
159
168
  }
160
- }), S(!1);
161
- }, K = (t) => {
162
- t.key === "Enter" && !t.shiftKey && (t.preventDefault(), W());
163
- }, F = async (t) => {
164
- A(t), setTimeout(() => W(), 0);
165
- }, B = u ? /* @__PURE__ */ e("div", { className: "knest-chat-card", children: /* @__PURE__ */ e("div", { className: "knest-loading-container", children: /* @__PURE__ */ r("div", { className: "knest-loading-content", children: [
169
+ }), B(!1);
170
+ }, Q = () => {
171
+ ce(a), U(void 0), i([
172
+ { role: "assistant", content: v?.welcomeMessage || R }
173
+ ]), b("");
174
+ }, z = (t) => {
175
+ t.key === "Enter" && !t.shiftKey && (t.preventDefault(), I());
176
+ }, G = async (t) => {
177
+ b(t), setTimeout(() => I(), 0);
178
+ }, _ = k ? /* @__PURE__ */ e("div", { className: "knest-chat-card", children: /* @__PURE__ */ e("div", { className: "knest-loading-container", children: /* @__PURE__ */ r("div", { className: "knest-loading-content", children: [
166
179
  /* @__PURE__ */ e("div", { className: "knest-spinner-ring" }),
167
180
  /* @__PURE__ */ e("p", { className: "knest-loading-text", children: "Loading chat..." })
168
- ] }) }) }) : w === "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: J }) }) }) }) : /* @__PURE__ */ r("div", { className: "knest-chat-card", children: [
181
+ ] }) }) }) : A === "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: ne }) }) }) }) : /* @__PURE__ */ r("div", { className: "knest-chat-card", children: [
169
182
  /* @__PURE__ */ r("div", { className: "knest-messages-container", children: [
170
- f.map((t, s) => /* @__PURE__ */ r("div", { children: [
183
+ l.map((t, s) => /* @__PURE__ */ r("div", { children: [
171
184
  /* @__PURE__ */ e(
172
- se,
185
+ le,
173
186
  {
174
187
  message: t,
175
- isLoading: !t.content && L && t.role === "assistant",
188
+ isLoading: !t.content && p && t.role === "assistant",
176
189
  avatarUrl: j,
177
- brandColor: U
190
+ brandColor: W
178
191
  }
179
192
  ),
180
- s < f.length - 1 && /* @__PURE__ */ e("div", { className: "knest-separator" })
193
+ s < l.length - 1 && /* @__PURE__ */ e("div", { className: "knest-separator" })
181
194
  ] }, s)),
182
- f.length === 1 && !u && /* @__PURE__ */ r("div", { className: "knest-examples", children: [
195
+ l.length === 1 && !k && /* @__PURE__ */ r("div", { className: "knest-examples", children: [
183
196
  /* @__PURE__ */ e("h3", { children: "Example Questions" }),
184
- D.map((t, s) => /* @__PURE__ */ e(
197
+ F.map((t, s) => /* @__PURE__ */ e(
185
198
  "button",
186
199
  {
187
- onClick: () => F(t),
200
+ onClick: () => G(t),
188
201
  className: "knest-example-btn",
189
- style: s === 0 ? { borderColor: U, borderWidth: "2px" } : {},
202
+ style: s === 0 ? { borderColor: W, borderWidth: "2px" } : {},
190
203
  children: t
191
204
  },
192
205
  s
193
206
  ))
194
207
  ] }),
195
- /* @__PURE__ */ e("div", { ref: M })
208
+ /* @__PURE__ */ e("div", { ref: S })
196
209
  ] }),
197
210
  /* @__PURE__ */ r("div", { className: "knest-input-section", children: [
198
211
  /* @__PURE__ */ r("div", { className: "knest-input-wrapper", children: [
@@ -200,19 +213,19 @@ function le({
200
213
  "input",
201
214
  {
202
215
  type: "text",
203
- value: N,
204
- onChange: (t) => A(t.target.value),
205
- onKeyPress: K,
216
+ value: g,
217
+ onChange: (t) => b(t.target.value),
218
+ onKeyPress: z,
206
219
  placeholder: "Ask me anything...",
207
- disabled: L || !k,
220
+ disabled: p || !f,
208
221
  className: "knest-input-field"
209
222
  }
210
223
  ),
211
224
  /* @__PURE__ */ e(
212
225
  "button",
213
226
  {
214
- onClick: W,
215
- disabled: L || !N.trim() || !k,
227
+ onClick: I,
228
+ disabled: p || !g.trim() || !f,
216
229
  className: "knest-send-btn",
217
230
  "aria-label": "Send message",
218
231
  children: /* @__PURE__ */ e("svg", { className: "knest-send-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
@@ -227,6 +240,7 @@ function le({
227
240
  }
228
241
  )
229
242
  ] }),
243
+ l.length > 1 && !p && /* @__PURE__ */ e("div", { className: "knest-reset-row", children: /* @__PURE__ */ e("button", { onClick: Q, className: "knest-reset-btn", children: "Clear chat" }) }),
230
244
  /* @__PURE__ */ e("div", { className: "knest-footer", children: /* @__PURE__ */ r(
231
245
  "a",
232
246
  {
@@ -303,19 +317,19 @@ function le({
303
317
  ) })
304
318
  ] })
305
319
  ] });
306
- if (y === "inline")
307
- return B;
308
- const Q = u ? "#9ca3af" : U;
320
+ if (M === "inline")
321
+ return _;
322
+ const H = k ? "#9ca3af" : W;
309
323
  return /* @__PURE__ */ r("div", { className: "knest-bubble-container", children: [
310
- x && /* @__PURE__ */ e("div", { className: "knest-bubble-panel", children: B }),
324
+ w && /* @__PURE__ */ e("div", { className: "knest-bubble-panel", children: _ }),
311
325
  /* @__PURE__ */ e(
312
326
  "button",
313
327
  {
314
- className: ["knest-bubble-button", u && "knest-bubble-loading"].filter(Boolean).join(" "),
315
- onClick: () => P(!x),
316
- "aria-label": u ? "Loading chat" : x ? "Close chat" : "Open chat",
317
- style: { backgroundColor: Q },
318
- children: u ? /* @__PURE__ */ r(
328
+ className: ["knest-bubble-button", k && "knest-bubble-loading"].filter(Boolean).join(" "),
329
+ onClick: () => P(!w),
330
+ "aria-label": k ? "Loading chat" : w ? "Close chat" : "Open chat",
331
+ style: { backgroundColor: H },
332
+ children: k ? /* @__PURE__ */ r(
319
333
  "svg",
320
334
  {
321
335
  width: "24",
@@ -348,7 +362,7 @@ function le({
348
362
  )
349
363
  ]
350
364
  }
351
- ) : x ? /* @__PURE__ */ e(
365
+ ) : w ? /* @__PURE__ */ e(
352
366
  "svg",
353
367
  {
354
368
  width: "24",
@@ -383,6 +397,6 @@ function le({
383
397
  ] });
384
398
  }
385
399
  export {
386
- se as ChatMessage,
387
- le as ChatWidget
400
+ le as ChatMessage,
401
+ ue as ChatWidget
388
402
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useknest/widget-react",
3
- "version": "0.1.0-beta.10",
3
+ "version": "0.1.0-beta.11",
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.10"
25
+ "@useknest/widget-core": "0.1.0-beta.11"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@types/react": "^18.3.3",