@useknest/widget-web 0.1.0-beta.1 → 0.1.0-beta.2

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