@useknest/widget-react 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +1 -1
  2. package/dist/ChatWidget.d.ts +1 -1
  3. package/dist/ChatWidget.d.ts.map +1 -1
  4. package/dist/index.js +44 -44
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -37,7 +37,7 @@ function App() {
37
37
  | Prop | Type | Required | Default | Description |
38
38
  | ------------------- | ---------------------- | -------- | ---------- | ---------------------------------------------------------------- |
39
39
  | `publishableApiKey` | `string` | Yes | - | Your project's publishable API key |
40
- | `mode` | `'inline' \| 'bubble'` | No | `'inline'` | Display mode: inline or floating bubble button |
40
+ | `mode` | `'inline' \| 'bubble'` | No | `'bubble'` | Display mode: inline or floating bubble button |
41
41
  | `defaultOpen` | `boolean` | No | `false` | Whether the chat starts open (only applies to bubble mode) |
42
42
  | `user` | `WidgetUser` | No | - | Identifies the logged-in user; requires at least `id` or `email` |
43
43
 
package/dist/ChatWidget.d.ts CHANGED
@@ -7,7 +7,7 @@ export interface InternalConfig {
7
7
  }
8
8
  export interface ChatWidgetProps {
9
9
  publishableApiKey: string;
10
- /** Display mode: 'inline' renders in place, 'bubble' shows floating button. Defaults to 'inline'. */
10
+ /** Display mode: 'inline' renders in place, 'bubble' shows floating button. Defaults to 'bubble'. */
11
11
  mode?: WidgetMode;
12
12
  /** Whether to auto-open the chat in bubble mode. Defaults to false. */
13
13
  defaultOpen?: boolean;
package/dist/ChatWidget.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../src/ChatWidget.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAMX,UAAU,EACV,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,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC;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,+FAA+F;IAC/F,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EAC1B,iBAAiB,EACjB,IAAe,EACf,WAAmB,EACnB,IAAI,EACJ,SAAS,EACT,EAAE,eAAe,2CAgmBjB"}
1
+ {"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../src/ChatWidget.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAMX,UAAU,EACV,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,sBAAsB,CAAC,EAAE,MAAM,CAAC;CAChC;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,+FAA+F;IAC/F,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EAC1B,iBAAiB,EACjB,IAA0B,EAC1B,WAAmB,EACnB,IAAI,EACJ,SAAS,EACT,EAAE,eAAe,2CAgmBjB"}
package/dist/index.js CHANGED
@@ -1,15 +1,15 @@
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-presence-caption{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6b7280;margin:0 0 .375rem}.knest-online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0}.knest-human-takeover-caption{font-size:.75rem;color:#9ca3af;text-align:center;margin:.1875rem 0 .75rem}.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-attach-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;flex-shrink:0}.knest-attach-btn:hover:not(:disabled){background:#d1d5db}.knest-attach-btn:disabled{opacity:.4;cursor:not-allowed}.knest-attach-icon{width:1rem;height:1rem}.knest-file-preview{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.5rem}.knest-file-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:9999px;font-size:.75rem;color:#374151;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.knest-chip-remove{background:none;border:none;padding:0;font-size:1rem;line-height:1;color:#9ca3af;cursor:pointer;flex-shrink:0}.knest-chip-remove:hover{color:#374151}.knest-attach-error{font-size:.75rem;color:#dc2626;margin:0 0 .375rem}.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-attachments{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.knest-attachment-image-link{display:inline-block}.knest-attachment-image{max-width:240px;border-radius:.5rem;display:block}.knest-attachment-file{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;border:1px solid #e5e7eb;border-radius:9999px;background:#f9fafb;text-decoration:none;font-size:.8125rem;color:#374151;transition:background .15s}.knest-attachment-file:hover:not(.knest-attachment-disabled){background:#f3f4f6}.knest-attachment-disabled{opacity:.5;pointer-events:none}.knest-attachment-file-icon{width:.875rem;height:.875rem;color:#6b7280;flex-shrink:0}.knest-attachment-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.knest-attachment-file-size{color:#9ca3af;flex-shrink:0}.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{position:relative;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%}.knest-bubble-close-btn{display:none;position:absolute;top:.75rem;right:.75rem;z-index:10;width:2rem;height:2rem;align-items:center;justify-content:center;border:none;border-radius:50%;background:#0000000f;color:#374151;cursor:pointer}.knest-bubble-close-btn:hover{background:#0000001f}@media (max-width: 440px){.knest-bubble-container.knest-bubble-open{inset:0}.knest-bubble-container.knest-bubble-open .knest-bubble-button{display:none}.knest-bubble-panel{width:100%;height:100dvh;max-width:none;max-height:none;border-radius:0;border:none;box-shadow:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.knest-bubble-close-btn{display:flex}.knest-bubble-panel .knest-messages-container>:first-child{padding-right:2.5rem}.knest-input-field{font-size:1rem}}")),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-presence-caption{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6b7280;margin:0 0 .375rem}.knest-online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0}.knest-human-takeover-caption{font-size:.75rem;color:#9ca3af;text-align:center;margin:.1875rem 0 .75rem}.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-attach-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;flex-shrink:0}.knest-attach-btn:hover:not(:disabled){background:#d1d5db}.knest-attach-btn:disabled{opacity:.4;cursor:not-allowed}.knest-attach-icon{width:1rem;height:1rem}.knest-file-preview{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.5rem}.knest-file-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:9999px;font-size:.75rem;color:#374151;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.knest-chip-remove{background:none;border:none;padding:0;font-size:1rem;line-height:1;color:#9ca3af;cursor:pointer;flex-shrink:0}.knest-chip-remove:hover{color:#374151}.knest-attach-error{font-size:.75rem;color:#dc2626;margin:0 0 .375rem}.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-attachments{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.knest-attachment-image-link{display:inline-block}.knest-attachment-image{max-width:240px;border-radius:.5rem;display:block}.knest-attachment-file{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .625rem;border:1px solid #e5e7eb;border-radius:9999px;background:#f9fafb;text-decoration:none;font-size:.8125rem;color:#374151;transition:background .15s}.knest-attachment-file:hover:not(.knest-attachment-disabled){background:#f3f4f6}.knest-attachment-disabled{opacity:.5;pointer-events:none}.knest-attachment-file-icon{width:.875rem;height:.875rem;color:#6b7280;flex-shrink:0}.knest-attachment-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.knest-attachment-file-size{color:#9ca3af;flex-shrink:0}.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:2147483647;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{position:relative;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%}.knest-bubble-close-btn{display:none;position:absolute;top:.75rem;right:.75rem;z-index:2147483646;width:2rem;height:2rem;align-items:center;justify-content:center;border:none;border-radius:50%;background:#0000000f;color:#374151;cursor:pointer}.knest-bubble-close-btn:hover{background:#0000001f}@media (max-width: 440px){.knest-bubble-container.knest-bubble-open{inset:0}.knest-bubble-container.knest-bubble-open .knest-bubble-button{display:none}.knest-bubble-panel{width:100%;height:100dvh;max-width:none;max-height:none;border-radius:0;border:none;box-shadow:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.knest-bubble-panel .knest-chat-card{border-radius:0;box-shadow:none}.knest-bubble-close-btn{display:flex}.knest-bubble-panel .knest-messages-container>:first-child{padding-right:2.5rem}.knest-input-field{font-size:1rem}}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
2
2
  import { jsx as e, jsxs as o } from "react/jsx-runtime";
3
3
  import { useState as i, useEffect as A, useRef as J } from "react";
4
- import { fetchSignedUrl as me, formatContent as ke, DEFAULT_BRAND_COLOR as ne, isImageType as fe, formatFileSize as ge, DEFAULT_AVATAR_URL as ve, DEFAULT_EXAMPLE_QUESTIONS as pe, initWidgetSentry as Z, PUBLIC_SUPABASE_URL as Ce, PUBLIC_SUPABASE_PUBLISHABLE_KEY as be, initWidgetAuth as Ne, saveChatStateDebounced as Ee, MOBILE_BREAKPOINT_PX as Le, lockBodyScroll as we, unlockBodyScroll as K, subscribeToThread as Me, AUTH_ERROR_MESSAGE as Ae, HUMAN_TAKEOVER_CAPTION as xe, PRESENCE_LABEL_WIDGET as Ue, ACCEPTED_FILE_TYPES_STRING as Se, fetchWidgetConfig as ye, loadChatState as Ie, DEFAULT_WELCOME_MESSAGE as ee, validateAttachment as Pe, MAX_ATTACHMENTS_PER_MESSAGE as Te, uploadAttachment as Be, captureWidgetException as te, streamChatMessage as _e, clearChatState as We } from "@useknest/widget-core";
5
- function Re({
4
+ import { fetchSignedUrl as me, formatContent as ke, DEFAULT_BRAND_COLOR as ne, isImageType as fe, formatFileSize as ge, DEFAULT_AVATAR_URL as ve, DEFAULT_EXAMPLE_QUESTIONS as pe, initWidgetSentry as Z, PUBLIC_SUPABASE_URL as Ce, PUBLIC_SUPABASE_PUBLISHABLE_KEY as be, initWidgetAuth as Ne, saveChatStateDebounced as Ee, MOBILE_BREAKPOINT_PX as Le, lockBodyScroll as we, unlockBodyScroll as K, subscribeToThread as Me, AUTH_ERROR_MESSAGE as Ae, HUMAN_TAKEOVER_CAPTION as Ue, PRESENCE_LABEL_WIDGET as xe, ACCEPTED_FILE_TYPES_STRING as Se, DEFAULT_WIDGET_MODE as ye, fetchWidgetConfig as Ie, loadChatState as Te, DEFAULT_WELCOME_MESSAGE as ee, validateAttachment as Pe, MAX_ATTACHMENTS_PER_MESSAGE as _e, uploadAttachment as Be, captureWidgetException as te, streamChatMessage as We, clearChatState as Re } from "@useknest/widget-core";
5
+ function Oe({
6
6
  message: s,
7
- isLoading: _ = !1,
7
+ isLoading: B = !1,
8
8
  avatarUrl: W = "/default-avatar.svg",
9
9
  brandColor: S = ne,
10
10
  showAvatar: k = !0,
11
11
  publishableApiKey: v,
12
- baseUrl: x
12
+ baseUrl: U
13
13
  }) {
14
14
  const [p, y] = i(!1), [I, R] = i({});
15
15
  A(() => {
@@ -22,7 +22,7 @@ function Re({
22
22
  const c = await me({
23
23
  publishableApiKey: v,
24
24
  storagePath: l.storagePath,
25
- baseUrl: x
25
+ baseUrl: U
26
26
  });
27
27
  return { storagePath: l.storagePath, url: c };
28
28
  })
@@ -32,7 +32,7 @@ function Re({
32
32
  w && (c[g] = w);
33
33
  Object.keys(c).length > 0 && R((g) => ({ ...g, ...c }));
34
34
  });
35
- }, [s.attachments, v, x]);
35
+ }, [s.attachments, v, U]);
36
36
  const N = (n) => n.url || (n.storagePath ? I[n.storagePath] : void 0), O = () => y(!0), m = s.content ? ke(s.content) : "";
37
37
  return /* @__PURE__ */ e("div", { className: "knest-message-wrapper", children: /* @__PURE__ */ o("div", { className: "knest-message", children: [
38
38
  k && /* @__PURE__ */ e("div", { className: "knest-message-avatar", children: s.role === "assistant" ? p ? /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: S }, children: "AI" }) : /* @__PURE__ */ e(
@@ -45,7 +45,7 @@ function Re({
45
45
  }
46
46
  ) : /* @__PURE__ */ e("div", { className: "knest-user-avatar", style: { backgroundColor: S }, children: "U" }) }),
47
47
  /* @__PURE__ */ o("div", { className: "knest-message-content", children: [
48
- !s.content && _ && s.role === "assistant" ? /* @__PURE__ */ o("div", { className: "knest-loading", children: [
48
+ !s.content && B && s.role === "assistant" ? /* @__PURE__ */ o("div", { className: "knest-loading", children: [
49
49
  /* @__PURE__ */ e("div", { className: "knest-dot" }),
50
50
  /* @__PURE__ */ e("div", { className: "knest-dot" }),
51
51
  /* @__PURE__ */ e("div", { className: "knest-dot" })
@@ -135,32 +135,32 @@ function Re({
135
135
  ] })
136
136
  ] }) });
137
137
  }
138
- function Fe({
138
+ function ze({
139
139
  publishableApiKey: s,
140
- mode: _ = "inline",
140
+ mode: B = ye,
141
141
  defaultOpen: W = !1,
142
142
  user: S,
143
143
  _internal: k
144
144
  }) {
145
- const [v, x] = i(null), [p, y] = i(!0), [I, R] = i(null), [N, O] = i(!1), [m, n] = i([]), [l, c] = i(""), [g, w] = i(!1), [u, j] = i(void 0), [E, V] = i(W), [P, T] = i([]), [D, F] = i(!1), [Q, U] = i(null), [se, X] = i(!1), [re, $] = i(!1), z = J(null), q = J(null), ae = v?.avatarUrl || ve, oe = v?.exampleQuestions || pe, H = v?.brandColor || ne;
145
+ const [v, U] = i(null), [p, y] = i(!0), [I, R] = i(null), [N, O] = i(!1), [m, n] = i([]), [l, c] = i(""), [g, w] = i(!1), [u, D] = i(void 0), [E, V] = i(W), [T, P] = i([]), [j, F] = i(!1), [Q, x] = i(null), [se, X] = i(!1), [re, $] = i(!1), z = J(null), q = J(null), ae = v?.avatarUrl || ve, oe = v?.exampleQuestions || pe, H = v?.brandColor || ne;
146
146
  A(() => {
147
147
  typeof requestIdleCallback < "u" ? requestIdleCallback(() => Z()) : setTimeout(() => Z(), 0);
148
148
  const t = k?.supabaseUrl || Ce, a = k?.supabasePublishableKey || be, d = Ne(t, a);
149
149
  (async () => {
150
- const M = await ye(
150
+ const M = await Ie(
151
151
  s,
152
152
  k?.baseUrl,
153
- (B) => {
154
- x(B);
153
+ (_) => {
154
+ U(_);
155
155
  }
156
156
  );
157
157
  if (M.error) {
158
158
  R(M.error), y(!1);
159
159
  return;
160
160
  }
161
- x(M.config), y(!1);
162
- const f = Ie(s);
163
- f && f.messages.length > 0 ? (n(f.messages), j(f.threadId), c(f.input)) : n([
161
+ U(M.config), y(!1);
162
+ const f = Te(s);
163
+ f && f.messages.length > 0 ? (n(f.messages), D(f.threadId), c(f.input)) : n([
164
164
  {
165
165
  role: "assistant",
166
166
  content: M.config?.welcomeMessage || ee
@@ -205,31 +205,31 @@ function Fe({
205
205
  }, [u, N]);
206
206
  const le = (t) => {
207
207
  const a = Array.from(t.target.files || []);
208
- t.target.value = "", U(null);
208
+ t.target.value = "", x(null);
209
209
  for (const d of a) {
210
210
  const h = Pe(d);
211
211
  if (h) {
212
- U(h);
212
+ x(h);
213
213
  return;
214
214
  }
215
215
  }
216
- T((d) => {
217
- const h = Te - d.length;
216
+ P((d) => {
217
+ const h = _e - d.length;
218
218
  return [...d, ...a.slice(0, h)];
219
219
  });
220
220
  }, ce = (t) => {
221
- T((a) => a.filter((d, h) => h !== t));
221
+ P((a) => a.filter((d, h) => h !== t));
222
222
  }, G = async (t) => {
223
223
  const a = t ?? l;
224
224
  if (!a.trim() || g || !N) return;
225
225
  const d = a.trim();
226
- c(""), w(!0), U(null);
226
+ c(""), w(!0), x(null);
227
227
  let h = [];
228
- if (P.length > 0 && u) {
228
+ if (T.length > 0 && u) {
229
229
  F(!0);
230
230
  try {
231
231
  h = await Promise.all(
232
- P.map(
232
+ T.map(
233
233
  (r) => Be({
234
234
  publishableApiKey: s,
235
235
  threadId: u,
@@ -242,10 +242,10 @@ function Fe({
242
242
  te(r instanceof Error ? r.message : "Upload failed", {
243
243
  threadId: u,
244
244
  baseUrl: k?.baseUrl
245
- }), U(r instanceof Error ? r.message : "Upload failed."), w(!1), F(!1);
245
+ }), x(r instanceof Error ? r.message : "Upload failed."), w(!1), F(!1);
246
246
  return;
247
247
  }
248
- F(!1), T([]);
248
+ F(!1), P([]);
249
249
  }
250
250
  const M = h.length > 0 ? { attachments: h } : void 0;
251
251
  n((r) => [
@@ -254,8 +254,8 @@ function Fe({
254
254
  ]);
255
255
  const f = m.length + 1;
256
256
  n((r) => [...r, { role: "assistant", content: "" }]);
257
- let L = "", B = [];
258
- await _e({
257
+ let L = "", _ = [];
258
+ await We({
259
259
  publishableApiKey: s,
260
260
  content: d,
261
261
  threadId: u,
@@ -264,7 +264,7 @@ function Fe({
264
264
  user: S,
265
265
  callbacks: {
266
266
  onInit: (r) => {
267
- u || j(r);
267
+ u || D(r);
268
268
  },
269
269
  onContent: (r) => {
270
270
  L += r, n((C) => {
@@ -276,12 +276,12 @@ function Fe({
276
276
  });
277
277
  },
278
278
  onComplete: (r) => {
279
- B = r, n((C) => {
279
+ _ = r, n((C) => {
280
280
  const b = [...C];
281
281
  return b[f] = {
282
282
  role: "assistant",
283
283
  content: L,
284
- sources: B
284
+ sources: _
285
285
  }, b;
286
286
  });
287
287
  },
@@ -303,9 +303,9 @@ function Fe({
303
303
  }
304
304
  }), w(!1);
305
305
  }, ie = () => {
306
- We(s), j(void 0), n([
306
+ Re(s), D(void 0), n([
307
307
  { role: "assistant", content: v?.welcomeMessage || ee }
308
- ]), c(""), T([]), U(null), X(!1), $(!1);
308
+ ]), c(""), P([]), x(null), X(!1), $(!1);
309
309
  }, de = (t) => {
310
310
  t.key === "Enter" && !t.shiftKey && (t.preventDefault(), G());
311
311
  }, he = (t) => {
@@ -317,7 +317,7 @@ function Fe({
317
317
  /* @__PURE__ */ o("div", { className: "knest-messages-container", children: [
318
318
  m.map((t, a) => /* @__PURE__ */ o("div", { children: [
319
319
  /* @__PURE__ */ e(
320
- Re,
320
+ Oe,
321
321
  {
322
322
  message: t,
323
323
  isLoading: !t.content && g && t.role === "assistant",
@@ -342,13 +342,13 @@ function Fe({
342
342
  a
343
343
  ))
344
344
  ] }),
345
- se && /* @__PURE__ */ e("p", { className: "knest-human-takeover-caption", children: xe }),
345
+ se && /* @__PURE__ */ e("p", { className: "knest-human-takeover-caption", children: Ue }),
346
346
  /* @__PURE__ */ e("div", { ref: z })
347
347
  ] }),
348
348
  /* @__PURE__ */ o("div", { className: "knest-input-section", children: [
349
349
  re && /* @__PURE__ */ o("p", { className: "knest-presence-caption", children: [
350
350
  /* @__PURE__ */ e("span", { className: "knest-online-dot" }),
351
- Ue
351
+ xe
352
352
  ] }),
353
353
  /* @__PURE__ */ e(
354
354
  "input",
@@ -361,7 +361,7 @@ function Fe({
361
361
  onChange: le
362
362
  }
363
363
  ),
364
- P.length > 0 && /* @__PURE__ */ e("div", { className: "knest-file-preview", children: P.map((t, a) => /* @__PURE__ */ o("span", { className: "knest-file-chip", children: [
364
+ T.length > 0 && /* @__PURE__ */ e("div", { className: "knest-file-preview", children: T.map((t, a) => /* @__PURE__ */ o("span", { className: "knest-file-chip", children: [
365
365
  t.name,
366
366
  /* @__PURE__ */ e(
367
367
  "button",
@@ -384,7 +384,7 @@ function Fe({
384
384
  onChange: (t) => c(t.target.value),
385
385
  onKeyDown: de,
386
386
  placeholder: "Ask me anything...",
387
- disabled: g || D || !N,
387
+ disabled: g || j || !N,
388
388
  className: "knest-input-field"
389
389
  }
390
390
  ),
@@ -392,7 +392,7 @@ function Fe({
392
392
  "button",
393
393
  {
394
394
  onClick: () => q.current?.click(),
395
- disabled: !u || g || D,
395
+ disabled: !u || g || j,
396
396
  className: "knest-attach-btn",
397
397
  type: "button",
398
398
  title: u ? "Attach file" : "Send a message first to enable attachments",
@@ -421,7 +421,7 @@ function Fe({
421
421
  "button",
422
422
  {
423
423
  onClick: () => G(),
424
- disabled: g || D || !l.trim() || !N,
424
+ disabled: g || j || !l.trim() || !N,
425
425
  className: "knest-send-btn",
426
426
  "aria-label": "Send message",
427
427
  children: /* @__PURE__ */ e("svg", { className: "knest-send-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
@@ -513,7 +513,7 @@ function Fe({
513
513
  ) })
514
514
  ] })
515
515
  ] });
516
- if (_ === "inline")
516
+ if (B === "inline")
517
517
  return Y;
518
518
  const ue = p ? "#9ca3af" : H;
519
519
  return /* @__PURE__ */ o(
@@ -621,6 +621,6 @@ function Fe({
621
621
  );
622
622
  }
623
623
  export {
624
- Re as ChatMessage,
625
- Fe as ChatWidget
624
+ Oe as ChatMessage,
625
+ ze as ChatWidget
626
626
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@useknest/widget-react",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
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"
25
+ "@useknest/widget-core": "0.2.0"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@types/react": "^18.3.3",