@useknest/widget-react 0.1.0-beta.3 → 0.1.0-beta.5

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 (5) hide show
  1. package/README.md +26 -4
  2. package/dist/ChatWidget.d.ts +6 -1
  3. package/dist/ChatWidget.d.ts.map +1 -1
  4. package/dist/index.js +135 -89
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -34,9 +34,11 @@ function App() {
34
34
 
35
35
  ### ChatWidget
36
36
 
37
- | Prop | Type | Required | Description |
38
- | ------------------- | -------- | -------- | ---------------------------------- |
39
- | `publishableApiKey` | `string` | Yes | Your project's publishable API key |
37
+ | Prop | Type | Required | Default | Description |
38
+ | ------------------- | ---------------------- | -------- | ---------- | ---------------------------------------------------------- |
39
+ | `publishableApiKey` | `string` | Yes | - | Your project's publishable API key |
40
+ | `mode` | `'inline' \| 'bubble'` | No | `'inline'` | Display mode: inline or floating bubble button |
41
+ | `defaultOpen` | `boolean` | No | `false` | Whether the chat starts open (only applies to bubble mode) |
40
42
 
41
43
  ## Features
42
44
 
@@ -113,9 +115,29 @@ function ChatContainer() {
113
115
  }
114
116
  ```
115
117
 
118
+ ### Floating Bubble Mode
119
+
120
+ ```tsx
121
+ import { ChatWidget } from '@useknest/widget-react';
122
+
123
+ function App() {
124
+ return <ChatWidget publishableApiKey="pk_your_public_key_here" mode="bubble" />;
125
+ }
126
+ ```
127
+
128
+ ### Bubble Mode (Auto-Open)
129
+
130
+ ```tsx
131
+ import { ChatWidget } from '@useknest/widget-react';
132
+
133
+ function App() {
134
+ return <ChatWidget publishableApiKey="pk_your_public_key_here" mode="bubble" defaultOpen />;
135
+ }
136
+ ```
137
+
116
138
  ## License
117
139
 
118
- MIT
140
+ Proprietary - All rights reserved. This software is for use by authorized Knest customers only.
119
141
 
120
142
  ## Support
121
143
 
package/dist/ChatWidget.d.ts CHANGED
@@ -1,7 +1,12 @@
1
+ import { WidgetMode } from '@useknest/widget-core';
1
2
  export interface ChatWidgetProps {
2
3
  publishableApiKey: string;
3
4
  /** Base URL for the API. Defaults to https://useknest.com. Pass empty string for relative paths. */
4
5
  baseUrl?: string;
6
+ /** Display mode: 'inline' renders in place, 'bubble' shows floating button. Defaults to 'inline'. */
7
+ mode?: WidgetMode;
8
+ /** Whether to auto-open the chat in bubble mode. Defaults to false. */
9
+ defaultOpen?: boolean;
5
10
  }
6
- export declare function ChatWidget({ publishableApiKey, baseUrl }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function ChatWidget({ publishableApiKey, baseUrl, mode, defaultOpen }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;
7
12
  //# sourceMappingURL=ChatWidget.d.ts.map
package/dist/ChatWidget.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../src/ChatWidget.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,eAAe;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oGAAoG;IACpG,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EAAE,iBAAiB,EAAE,OAAO,EAAE,EAAE,eAAe,2CA+RzE"}
1
+ {"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../src/ChatWidget.tsx"],"names":[],"mappings":"AAaA,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,2CAoUjB"}
package/dist/index.js CHANGED
@@ -1,25 +1,25 @@
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}.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}")),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;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}.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:.5rem;overflow:hidden}.knest-bubble-panel .knest-chat-card{height:100%;border-radius:.5rem;box-shadow:0 10px 40px #00000026}@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 s } from "react/jsx-runtime";
3
- import { useState as c, useRef as D, useEffect as _ } from "react";
4
- import { formatContent as O, DEFAULT_AVATAR_URL as j, DEFAULT_EXAMPLE_QUESTIONS as B, DEFAULT_BRAND_COLOR as F, initWidgetSentry as P, AUTH_ERROR_MESSAGE as Q, fetchWidgetConfig as K, initWidgetAuth as z, DEFAULT_WELCOME_MESSAGE as G, streamChatMessage as H, captureWidgetException as V } from "@useknest/widget-core";
5
- function X({
3
+ import { useState as o, useRef as P, useEffect as R } from "react";
4
+ import { formatContent as Q, DEFAULT_AVATAR_URL as z, DEFAULT_EXAMPLE_QUESTIONS as K, DEFAULT_BRAND_COLOR as G, initWidgetSentry as H, AUTH_ERROR_MESSAGE as V, fetchWidgetConfig as X, initWidgetAuth as $, DEFAULT_WELCOME_MESSAGE as J, streamChatMessage as Y, captureWidgetException as Z } from "@useknest/widget-core";
5
+ function q({
6
6
  message: r,
7
7
  isLoading: d = !1,
8
- avatarUrl: m = "/default-avatar.svg",
8
+ avatarUrl: x = "/default-avatar.svg",
9
9
  brandColor: g = "#0d7a7f",
10
- showAvatar: v = !0
10
+ showAvatar: m = !0
11
11
  }) {
12
- const [p, x] = c(!1), E = () => {
13
- x(!0);
14
- }, f = r.content ? O(r.content) : [];
12
+ const [L, v] = o(!1), p = () => {
13
+ v(!0);
14
+ }, E = r.content ? Q(r.content) : [];
15
15
  return /* @__PURE__ */ e("div", { className: "knest-message-wrapper", children: /* @__PURE__ */ s("div", { className: "knest-message", children: [
16
- v && /* @__PURE__ */ e("div", { className: "knest-message-avatar", children: r.role === "assistant" ? p ? /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: g }, children: "AI" }) : /* @__PURE__ */ e(
16
+ m && /* @__PURE__ */ e("div", { className: "knest-message-avatar", children: r.role === "assistant" ? L ? /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: g }, children: "AI" }) : /* @__PURE__ */ e(
17
17
  "img",
18
18
  {
19
- src: m,
19
+ src: x,
20
20
  alt: "Avatar",
21
21
  className: "knest-avatar-img",
22
- onError: E
22
+ onError: p
23
23
  }
24
24
  ) : /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: g }, children: "U" }) }),
25
25
  /* @__PURE__ */ s("div", { className: "knest-message-content", children: [
@@ -27,13 +27,13 @@ function X({
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
- ] }) : f.map((i, o) => /* @__PURE__ */ e("p", { dangerouslySetInnerHTML: { __html: i.html } }, o)),
30
+ ] }) : E.map((c, l) => /* @__PURE__ */ e("p", { dangerouslySetInnerHTML: { __html: c.html } }, l)),
31
31
  r.sources && r.sources.length > 0 && /* @__PURE__ */ s("div", { className: "knest-sources", children: [
32
32
  /* @__PURE__ */ e("div", { className: "knest-sources-label", children: "Sources" }),
33
- r.sources.slice(0, 1).map((i, o) => /* @__PURE__ */ s(
33
+ r.sources.slice(0, 1).map((c, l) => /* @__PURE__ */ s(
34
34
  "a",
35
35
  {
36
- href: i.url,
36
+ href: c.url,
37
37
  target: "_blank",
38
38
  rel: "noopener noreferrer",
39
39
  className: "knest-source-item",
@@ -57,125 +57,129 @@ function X({
57
57
  }
58
58
  ),
59
59
  /* @__PURE__ */ s("div", { className: "knest-source-text", children: [
60
- i.breadcrumb && /* @__PURE__ */ e("div", { className: "knest-source-breadcrumb", children: i.breadcrumb }),
61
- /* @__PURE__ */ e("div", { className: "knest-source-title", children: i.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
- o
65
+ l
66
66
  ))
67
67
  ] })
68
68
  ] })
69
69
  ] }) });
70
70
  }
71
- function Z({ publishableApiKey: r, baseUrl: d }) {
72
- const [m, g] = c(null), [v, p] = c(!0), [x, E] = c(null), [f, i] = c(!1), [o, u] = c([]), [C, A] = c(""), [N, M] = c(!1), [y, S] = c(void 0), L = D(null), I = m?.avatarUrl || j, R = m?.exampleQuestions || B, b = m?.brandColor || F;
73
- _(() => {
74
- P(), (async () => {
75
- const n = await K(r, d);
76
- if (n.error) {
77
- E(n.error), p(!1);
71
+ function se({
72
+ publishableApiKey: r,
73
+ baseUrl: d,
74
+ mode: x = "inline",
75
+ defaultOpen: g = !1
76
+ }) {
77
+ const [m, L] = o(null), [v, p] = o(!0), [E, c] = o(null), [l, T] = o(!1), [h, u] = o([]), [C, y] = o(""), [N, _] = o(!1), [A, B] = o(void 0), [b, O] = o(g), M = P(null), U = m?.avatarUrl || z, j = m?.exampleQuestions || K, w = m?.brandColor || G;
78
+ R(() => {
79
+ H(), (async () => {
80
+ const t = await X(r, d);
81
+ if (t.error) {
82
+ c(t.error), p(!1);
78
83
  return;
79
84
  }
80
- if (g(n.config), n.config) {
81
- const h = await z(
82
- n.config.supabaseUrl,
83
- n.config.supabaseAnonKey
85
+ if (L(t.config), t.config) {
86
+ const k = await $(
87
+ t.config.supabaseUrl,
88
+ t.config.supabaseAnonKey
84
89
  );
85
- h || console.warn("Widget auth initialization failed"), i(h);
90
+ k || console.warn("Widget auth initialization failed"), T(k);
86
91
  }
87
92
  p(!1), u([
88
93
  {
89
94
  role: "assistant",
90
- content: n.config?.welcomeMessage || G
95
+ content: t.config?.welcomeMessage || J
91
96
  }
92
97
  ]);
93
98
  })();
94
- }, [r, d]), _(() => {
95
- o.length > 0 && L.current && L.current.scrollIntoView({ behavior: "smooth" });
96
- }, [o]);
97
- const w = async () => {
98
- if (!C.trim() || N || !f) return;
99
- const t = C.trim();
100
- A(""), M(!0), u((a) => [...a, { role: "user", content: t }]);
101
- const n = o.length + 1;
99
+ }, [r, d]), R(() => {
100
+ h.length > 0 && M.current && M.current.scrollIntoView({ behavior: "smooth" });
101
+ }, [h]);
102
+ const W = async () => {
103
+ if (!C.trim() || N || !l) return;
104
+ const n = C.trim();
105
+ y(""), _(!0), u((a) => [...a, { role: "user", content: n }]);
106
+ const t = h.length + 1;
102
107
  u((a) => [...a, { role: "assistant", content: "" }]);
103
- let h = "", W = [];
104
- await H({
108
+ let k = "", S = [];
109
+ await Y({
105
110
  publishableApiKey: r,
106
- content: t,
107
- threadId: y,
111
+ content: n,
112
+ threadId: A,
108
113
  baseUrl: d,
109
114
  callbacks: {
110
115
  onInit: (a) => {
111
- y || S(a);
116
+ A || B(a);
112
117
  },
113
118
  onContent: (a) => {
114
- h += a, u((k) => {
115
- const l = [...k];
116
- return l[n] = {
119
+ k += a, u((f) => {
120
+ const i = [...f];
121
+ return i[t] = {
117
122
  role: "assistant",
118
- content: h
119
- }, l;
123
+ content: k
124
+ }, i;
120
125
  });
121
126
  },
122
127
  onComplete: (a) => {
123
- W = a, u((k) => {
124
- const l = [...k];
125
- return l[n] = {
128
+ S = a, u((f) => {
129
+ const i = [...f];
130
+ return i[t] = {
126
131
  role: "assistant",
127
- content: h,
128
- sources: W
129
- }, l;
132
+ content: k,
133
+ sources: S
134
+ }, i;
130
135
  });
131
136
  },
132
137
  onError: (a) => {
133
- V(a, { userMessage: t, threadId: y, baseUrl: d }), u((k) => {
134
- const l = [...k];
135
- return l[n] = {
138
+ Z(a, { userMessage: n, threadId: A, baseUrl: d }), u((f) => {
139
+ const i = [...f];
140
+ return i[t] = {
136
141
  role: "assistant",
137
142
  content: `Error: ${a}`
138
- }, l;
143
+ }, i;
139
144
  });
140
145
  }
141
146
  }
142
- }), M(!1);
143
- }, T = (t) => {
144
- t.key === "Enter" && !t.shiftKey && (t.preventDefault(), w());
145
- }, U = async (t) => {
146
- A(t), setTimeout(() => w(), 0);
147
- };
148
- return v ? /* @__PURE__ */ e("div", { className: "knest-chat-card", children: /* @__PURE__ */ e("div", { className: "knest-loading-container", children: /* @__PURE__ */ s("div", { className: "knest-loading-content", children: [
147
+ }), _(!1);
148
+ }, D = (n) => {
149
+ n.key === "Enter" && !n.shiftKey && (n.preventDefault(), W());
150
+ }, F = async (n) => {
151
+ y(n), setTimeout(() => W(), 0);
152
+ }, I = v ? /* @__PURE__ */ e("div", { className: "knest-chat-card", children: /* @__PURE__ */ e("div", { className: "knest-loading-container", children: /* @__PURE__ */ s("div", { className: "knest-loading-content", children: [
149
153
  /* @__PURE__ */ e("div", { className: "knest-spinner-ring" }),
150
154
  /* @__PURE__ */ e("p", { className: "knest-loading-text", children: "Loading chat..." })
151
- ] }) }) }) : x === "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: Q }) }) }) }) : /* @__PURE__ */ s("div", { className: "knest-chat-card", children: [
155
+ ] }) }) }) : E === "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: V }) }) }) }) : /* @__PURE__ */ s("div", { className: "knest-chat-card", children: [
152
156
  /* @__PURE__ */ s("div", { className: "knest-messages-container", children: [
153
- o.map((t, n) => /* @__PURE__ */ s("div", { children: [
157
+ h.map((n, t) => /* @__PURE__ */ s("div", { children: [
154
158
  /* @__PURE__ */ e(
155
- X,
159
+ q,
156
160
  {
157
- message: t,
158
- isLoading: !t.content && N && t.role === "assistant",
159
- avatarUrl: I,
160
- brandColor: b
161
+ message: n,
162
+ isLoading: !n.content && N && n.role === "assistant",
163
+ avatarUrl: U,
164
+ brandColor: w
161
165
  }
162
166
  ),
163
- n < o.length - 1 && /* @__PURE__ */ e("div", { className: "knest-separator" })
164
- ] }, n)),
165
- o.length === 1 && !v && /* @__PURE__ */ s("div", { className: "knest-examples", children: [
167
+ t < h.length - 1 && /* @__PURE__ */ e("div", { className: "knest-separator" })
168
+ ] }, t)),
169
+ h.length === 1 && !v && /* @__PURE__ */ s("div", { className: "knest-examples", children: [
166
170
  /* @__PURE__ */ e("h3", { children: "Example Questions" }),
167
- R.map((t, n) => /* @__PURE__ */ e(
171
+ j.map((n, t) => /* @__PURE__ */ e(
168
172
  "button",
169
173
  {
170
- onClick: () => U(t),
174
+ onClick: () => F(n),
171
175
  className: "knest-example-btn",
172
- style: n === 0 ? { borderColor: b, borderWidth: "2px" } : {},
173
- children: t
176
+ style: t === 0 ? { borderColor: w, borderWidth: "2px" } : {},
177
+ children: n
174
178
  },
175
- n
179
+ t
176
180
  ))
177
181
  ] }),
178
- /* @__PURE__ */ e("div", { ref: L })
182
+ /* @__PURE__ */ e("div", { ref: M })
179
183
  ] }),
180
184
  /* @__PURE__ */ s("div", { className: "knest-input-section", children: [
181
185
  /* @__PURE__ */ s("div", { className: "knest-input-wrapper", children: [
@@ -184,18 +188,18 @@ function Z({ publishableApiKey: r, baseUrl: d }) {
184
188
  {
185
189
  type: "text",
186
190
  value: C,
187
- onChange: (t) => A(t.target.value),
188
- onKeyPress: T,
191
+ onChange: (n) => y(n.target.value),
192
+ onKeyPress: D,
189
193
  placeholder: "Ask me anything...",
190
- disabled: N || !f,
194
+ disabled: N || !l,
191
195
  className: "knest-input-field"
192
196
  }
193
197
  ),
194
198
  /* @__PURE__ */ e(
195
199
  "button",
196
200
  {
197
- onClick: w,
198
- disabled: N || !C.trim() || !f,
201
+ onClick: W,
202
+ disabled: N || !C.trim() || !l,
199
203
  className: "knest-send-btn",
200
204
  "aria-label": "Send message",
201
205
  children: /* @__PURE__ */ e("svg", { className: "knest-send-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
@@ -286,8 +290,50 @@ function Z({ publishableApiKey: r, baseUrl: d }) {
286
290
  ) })
287
291
  ] })
288
292
  ] });
293
+ return x === "inline" ? I : /* @__PURE__ */ s("div", { className: "knest-bubble-container", children: [
294
+ b && /* @__PURE__ */ e("div", { className: "knest-bubble-panel", children: I }),
295
+ /* @__PURE__ */ e(
296
+ "button",
297
+ {
298
+ className: "knest-bubble-button",
299
+ onClick: () => O(!b),
300
+ "aria-label": b ? "Close chat" : "Open chat",
301
+ style: { backgroundColor: w },
302
+ children: b ? /* @__PURE__ */ e(
303
+ "svg",
304
+ {
305
+ width: "24",
306
+ height: "24",
307
+ viewBox: "0 0 24 24",
308
+ fill: "none",
309
+ stroke: "currentColor",
310
+ strokeWidth: "2",
311
+ children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
312
+ }
313
+ ) : /* @__PURE__ */ e(
314
+ "svg",
315
+ {
316
+ width: "24",
317
+ height: "24",
318
+ viewBox: "0 0 24 24",
319
+ fill: "none",
320
+ stroke: "currentColor",
321
+ strokeWidth: "2",
322
+ children: /* @__PURE__ */ e(
323
+ "path",
324
+ {
325
+ strokeLinecap: "round",
326
+ strokeLinejoin: "round",
327
+ d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
328
+ }
329
+ )
330
+ }
331
+ )
332
+ }
333
+ )
334
+ ] });
289
335
  }
290
336
  export {
291
- X as ChatMessage,
292
- Z as ChatWidget
337
+ q as ChatMessage,
338
+ se as ChatWidget
293
339
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useknest/widget-react",
3
- "version": "0.1.0-beta.3",
3
+ "version": "0.1.0-beta.5",
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.3"
25
+ "@useknest/widget-core": "0.1.0-beta.5"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@types/react": "^18.3.3",