@useknest/widget-web 0.1.0-beta.1 → 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 (4) hide show
  1. package/README.md +145 -13
  2. package/dist/widget.js +16079 -1820
  3. package/dist/widget.umd.js +143 -6
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,26 +1,158 @@
1
- # @useknest/widget
1
+ # @useknest/widget-web
2
2
 
3
- Embeddable chat widget for Knest.
3
+ Web component for the Knest chat widget. Works with any framework or vanilla HTML via a custom element.
4
4
 
5
- ## Usage
5
+ ## Installation
6
6
 
7
- ### Script tag
7
+ ```bash
8
+ npm install @useknest/widget-web
9
+ # or
10
+ pnpm add @useknest/widget-web
11
+ # or
12
+ yarn add @useknest/widget-web
13
+ ```
14
+
15
+ ## Usage: Script Tag (CommonJS)
8
16
 
9
17
  ```html
10
- <script src="https://unpkg.com/@knest/widget"></script>
11
- <knest-chat publishable-api-key="your-key"></knest-chat>
18
+ <script src="https://unpkg.com/@useknest/widget-web/dist/widget.umd.js"></script>
19
+ <knest-chat publishable-api-key="pk_your_public_key_here"></knest-chat>
12
20
  ```
13
21
 
14
- ### React
22
+ ## Attributes
23
+
24
+ | Attribute | Type | Required | Default | Description |
25
+ | --------------------- | ---------------------- | -------- | ---------- | ---------------------------------------------------------- |
26
+ | `publishable-api-key` | `string` | Yes | - | Your project's publishable API key |
27
+ | `mode` | `'inline' \| 'bubble'` | No | `'inline'` | Display mode: inline or floating bubble button |
28
+ | `default-open` | `boolean` | No | `false` | Whether the chat starts open (only applies to bubble mode) |
29
+
30
+ ## Features
31
+
32
+ - **Web Component** - Works with any framework or vanilla HTML
33
+ - **Streaming Support** - Real-time message streaming via Server-Sent Events (SSE)
34
+ - **Self-Contained** - Styles are encapsulated in Shadow DOM
35
+ - **Customizable** - Fetches branding (avatar, colors, welcome message) from your project dashboard at useknest.com
36
+ - **Lightweight** - ~51KB minified UMD (~19KB gzipped)
37
+ - **Framework-Agnostic Core** - Shares business logic with other platform packages for a consistent experience
15
38
 
16
- ```tsx
17
- import { ChatWidget } from '@knest/widget/react';
39
+ ## Examples
18
40
 
19
- <ChatWidget publishableApiKey="your-key" />;
41
+ ### Full Page Chat using HTML/CSS
42
+
43
+ ```html
44
+ <!DOCTYPE html>
45
+ <html>
46
+ <head>
47
+ <style>
48
+ body {
49
+ margin: 0;
50
+ height: 100vh;
51
+ }
52
+ knest-chat {
53
+ display: block;
54
+ height: 100%;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body>
59
+ <script type="module" src="https://unpkg.com/@useknest/widget-web"></script>
60
+ <knest-chat publishable-api-key="pk_your_public_key_here"></knest-chat>
61
+ </body>
62
+ </html>
20
63
  ```
21
64
 
22
- ### Build
65
+ ### Vue.js
23
66
 
24
- ```bash
25
- pnpm build
67
+ ```vue
68
+ <template>
69
+ <knest-chat :publishable-api-key="apiKey"></knest-chat>
70
+ </template>
71
+
72
+ <script setup>
73
+ import '@useknest/widget-web';
74
+
75
+ const apiKey = 'pk_your_public_key_here';
76
+ </script>
77
+ ```
78
+
79
+ ### Angular
80
+
81
+ ```typescript
82
+ // app.module.ts
83
+ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
84
+
85
+ @NgModule({
86
+ schemas: [CUSTOM_ELEMENTS_SCHEMA]
87
+ })
88
+ export class AppModule {}
89
+ ```
90
+
91
+ ```typescript
92
+ // component.ts
93
+ import '@useknest/widget-web';
94
+ ```
95
+
96
+ ```html
97
+ <!-- component.html -->
98
+ <knest-chat publishable-api-key="pk_your_public_key_here"></knest-chat>
99
+ ```
100
+
101
+ ### Floating Bubble Mode
102
+
103
+ ```html
104
+ <knest-chat publishable-api-key="pk_your_public_key_here" mode="bubble"></knest-chat>
26
105
  ```
106
+
107
+ ### Bubble Mode (Auto-Open)
108
+
109
+ ```html
110
+ <knest-chat
111
+ publishable-api-key="pk_your_public_key_here"
112
+ mode="bubble"
113
+ default-open="true"
114
+ ></knest-chat>
115
+ ```
116
+
117
+ ## Customization
118
+
119
+ The widget automatically loads customization from your project's configuration from useknest.com:
120
+
121
+ - Avatar image
122
+ - Brand color
123
+ - Welcome message
124
+ - Example questions
125
+
126
+ No additional attributes needed - just provide your `publishable-api-key`.
127
+
128
+ ## Architecture
129
+
130
+ This package uses `@useknest/widget-core` for all business logic (API calls, streaming, markdown rendering). The Svelte component handles only the UI rendering, compiled as a web component with Shadow DOM encapsulation.
131
+
132
+ ## Browser Support
133
+
134
+ - Modern browsers (Chrome, Firefox, Safari, Edge)
135
+ - Requires native ES modules and custom elements support
136
+ - Requires `EventSource` API for streaming
137
+
138
+ ## Troubleshooting
139
+
140
+ ### Widget not rendering
141
+
142
+ Ensure the script is loaded before the custom element is used:
143
+
144
+ ```html
145
+ <!-- Load first -->
146
+ <script type="module" src="https://unpkg.com/@useknest/widget-web"></script>
147
+
148
+ <!-- Then use -->
149
+ <knest-chat publishable-api-key="pk_your_public_key_here"></knest-chat>
150
+ ```
151
+
152
+ ## License
153
+
154
+ Proprietary - All rights reserved. This software is for use by authorized Knest customers only.
155
+
156
+ ## Support
157
+
158
+ For issues and questions, please email us at useknest@gmail.com