@headwai/chat-bubble 8.0.2-rc.fix-npm-publishing.5f9ef8a → 8.1.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 (6) hide show
  1. package/README.dev.md +50 -268
  2. package/README.md +45 -25
  3. package/dist-widget/chat-bubble.js +72 -72
  4. package/dist-widget/icons/favicon.svg +8 -9
  5. package/dist-widget/index.html +86 -197
  6. package/package.json +1 -1
package/README.dev.md CHANGED
@@ -43,9 +43,6 @@ npm run dev
43
43
  http://localhost:5174/
44
44
  ```
45
45
 
46
- 7. Alternatively, build and test deployed version:
47
- [Build and Deploy](#build-and-deploy) and open `./test-widget.html` in a browser.
48
-
49
46
  ## Configuration
50
47
 
51
48
  The HeadwAI Chat Bubble can be configured using environment variables or by changing the attributes of the instance.
@@ -54,6 +51,27 @@ The HeadwAI Chat Bubble can be configured using environment variables or by chan
54
51
 
55
52
  Create a `.env` by copying `.env.example` file in your project root with the following variables:
56
53
 
54
+ All configuration attributes listed in the [Configuration section of README.md](README.md#configuration) can be overwritten using VITE\_ environment variables. For example:
55
+
56
+ ```bash
57
+ # Production .env file - Core API Configuration
58
+ VITE_CHAT_BUBBLE_API_URL=https://company.headwai-one.at
59
+ VITE_CHAT_BUBBLE_ASSISTANT_ID=customer-support-assistant-id
60
+
61
+ # Message Configuration
62
+ VITE_CHAT_BUBBLE_MAX_MESSAGES=50
63
+ VITE_CHAT_BUBBLE_INITIAL_MESSAGE=Welcome! How can we help you today?
64
+ VITE_CHAT_BUBBLE_PLACEHOLDER_TEXT=Type your message here...
65
+
66
+ # UI Styling Configuration
67
+ VITE_CHAT_BUBBLE_USER_MESSAGE_BG_COLOR=#0066cc
68
+ VITE_CHAT_BUBBLE_AI_MESSAGE_BG_COLOR=#f8f9fa
69
+ VITE_CHAT_BUBBLE_FAVICON_BG_COLOR=#0066cc
70
+
71
+ # Branding Configuration
72
+ VITE_CHAT_BUBBLE_CHAT_TITLE=Customer Support
73
+ ```
74
+
57
75
  ### Window Object Configuration
58
76
 
59
77
  ```html
@@ -66,7 +84,7 @@ Create a `.env` by copying `.env.example` file in your project root with the fol
66
84
  </script>
67
85
  ```
68
86
 
69
- ### Via data attributes (Multiple chat bubbles):\*\*
87
+ ### Data attributes (Multiple chat bubbles):\*\*
70
88
 
71
89
  ```html
72
90
  <div
@@ -84,30 +102,16 @@ Create a `.env` by copying `.env.example` file in your project root with the fol
84
102
 
85
103
  For simple integration instructions, see [README.md](README.md) which provides a streamlined guide for customers.
86
104
 
87
- ## Build and Deploy
105
+ ## Deployment
88
106
 
89
- This project builds a standalone widget that can be integrated into any website.
107
+ ### Automated Publishing
90
108
 
91
- **What gets bundled:**
109
+ The GitHub Actions workflow automatically builds and publishes to npm when:
92
110
 
93
- - ✅ All logic and request/response interceptors
94
- - ✅ Environment variable configuration
95
- - ✅ All chat functionality
96
- - ✅ UI components and styling
111
+ 1. A version bump is created and committed to a PR
112
+ 2. The PR is merged to the `main` branch
97
113
 
98
- **Build and deployment steps:**
99
-
100
- 1. **Configure environment variables** for production:
101
-
102
- ```bash
103
- # Production .env file
104
- VITE_CHAT_BUBBLE_API_URL=https://company.headwai-one.at
105
- VITE_CHAT_BUBBLE_ASSISTANT_ID=customer-support-assistant-id
106
- ```
107
-
108
- 2. **Bump package version**
109
-
110
- Use npm's built-in version command which automatically updates `package.json`, `package-lock.json`, creates a git commit, and tags the release:
114
+ **Version bump commands:**
111
115
 
112
116
  ```bash
113
117
  # Patch version bump (e.g., 6.3.0 -> 6.3.1)
@@ -118,31 +122,6 @@ npm version minor
118
122
 
119
123
  # Major version bump (e.g., 6.3.0 -> 7.0.0)
120
124
  npm version major
121
-
122
- # Specific version
123
- npm version 6.4.0
124
- ```
125
-
126
- ## Publishing to NPM and jsDelivr Access
127
-
128
- ### Publishing Steps
129
-
130
- 3. **Build widget**:
131
-
132
- ```bash
133
- npm run build
134
- ```
135
-
136
- 4. **Login to NPM** (if not already logged in):
137
-
138
- ```bash
139
- npm login
140
- ```
141
-
142
- 5. **Publish the package**:
143
-
144
- ```bash
145
- npm publish
146
125
  ```
147
126
 
148
127
  ### jsDelivr CDN Access
@@ -380,7 +359,28 @@ Origin: http://localhost:5174
380
359
  "{{CURRENT_TIMEZONE}}": "Europe/Lisbon",
381
360
  "{{USER_LANGUAGE}}": "en-GB"
382
361
  },
383
- "chat_id": "3cd6f38c-effc-4038-948a-4fd345ea19b1"
362
+ "chat_id": "3cd6f38c-effc-4038-948a-4fd345ea19b1",
363
+ "parent_id": "2860fdae-4c43-4f59-8217-33dfc92b47d3", // ID of the parent user message
364
+ "parent_message": { // complete parent user message object
365
+ "id": "2860fdae-4c43-4f59-8217-33dfc92b47d3",
366
+ "role": "user",
367
+ "content": "previous user message",
368
+ "timestamp": 1760362655
369
+ },
370
+ "id": "29948ec6-6975-4d3a-b019-ceb8b7f7c698", // ID for the new assistant message being created
371
+ "params": {}, // optional - additional parameters
372
+ "tool_servers": [], // optional - tool server configurations
373
+ "features": { // optional - feature flags
374
+ "image_generation": false,
375
+ "code_interpreter": false,
376
+ "web_search": false,
377
+ "memory": false
378
+ },
379
+ "background_tasks": { // optional - background task configurations
380
+ "title_generation": true,
381
+ "tags_generation": false,
382
+ "follow_up_generation": false
383
+ }
384
384
  }
385
385
 
386
386
  ```
@@ -846,224 +846,6 @@ Origin: http://localhost:5174
846
846
  }
847
847
  ```
848
848
 
849
- ### Configuration Attributes
850
-
851
- The HeadwAI Chat Bubble can be configured using environment variables, data attributes, or runtime configuration. All attributes have fallback defaults.
852
-
853
- #### Core API Configuration
854
-
855
- | Attribute | Environment Variable | Data Attribute | Purpose | Default |
856
- | ------------- | ------------------------------- | ------------------------------- | ----------------------------------------- | ------------------- |
857
- | `apiUrl` | `VITE_CHAT_BUBBLE_API_URL` | `data-chat-bubble-api-url` | Base URL for API endpoints | `https://localhost` |
858
- | `assistantId` | `VITE_CHAT_BUBBLE_ASSISTANT_ID` | `data-chat-bubble-assistant-id` | Assistant identifier to use for responses | `test-model` |
859
- | Attribute | Environment Variable | Data Attribute | Purpose | Default |
860
- | ------------- | ------------------------------- | ------------------------------- | ----------------------------------------- | ------------------- |
861
- | `apiUrl` | `VITE_CHAT_BUBBLE_API_URL` | `data-chat-bubble-api-url` | Base URL for API endpoints | `https://localhost` |
862
- | `assistantId` | `VITE_CHAT_BUBBLE_ASSISTANT_ID` | `data-chat-bubble-assistant-id` | Assistant identifier to use for responses | `test-model` |
863
-
864
- #### Message Configuration
865
-
866
- | Attribute | Environment Variable | Data Attribute | Purpose | Default |
867
- | ----------------- | ----------------------------------- | ----------------------------------- | ------------------------------------------------------ | --------------------------- |
868
- | `maxMessages` | `VITE_CHAT_BUBBLE_MAX_MESSAGES` | `data-chat-bubble-max-messages` | Maximum messages to include in context (0 = unlimited) | `0` |
869
- | `initialMessage` | `VITE_CHAT_BUBBLE_INITIAL_MESSAGE` | `data-chat-bubble-initial-message` | First message shown when chat opens | `Hey, how can I help you?` |
870
- | `placeholderText` | `VITE_CHAT_BUBBLE_PLACEHOLDER_TEXT` | `data-chat-bubble-placeholder-text` | Input field placeholder text | `Enter your questions here` |
871
-
872
- #### UI Styling Configuration
873
-
874
- | Attribute | Environment Variable | Data Attribute | Purpose | Default |
875
- | -------------------------------- | ---------------------------------------------- | ---------------------------------------------------- | ------------------------------------- | --------- |
876
- | `userMessageBackgroundColor` | `VITE_CHAT_BUBBLE_USER_MESSAGE_BG_COLOR` | `data-chat-bubble-user-message-background-color` | Background color for user messages | `#007bff` |
877
- | `userMessageTextColor` | `VITE_CHAT_BUBBLE_USER_MESSAGE_TEXT_COLOR` | `data-chat-bubble-user-message-text-color` | Text color for user messages | `#000000` |
878
- | `aiMessageBackgroundColor` | `VITE_CHAT_BUBBLE_AI_MESSAGE_BG_COLOR` | `data-chat-bubble-ai-message-background-color` | Background color for AI messages | `#f1f3f4` |
879
- | `aiMessageTextColor` | `VITE_CHAT_BUBBLE_AI_MESSAGE_TEXT_COLOR` | `data-chat-bubble-ai-message-text-color` | Text color for AI messages | `#000000` |
880
- | `feedbackMessageBackgroundColor` | `VITE_CHAT_BUBBLE_FEEDBACK_MESSAGE_BG_COLOR` | `data-chat-bubble-feedback-message-background-color` | Background color for feedback buttons | `#ffffff` |
881
- | `feedbackMessageTextColor` | `VITE_CHAT_BUBBLE_FEEDBACK_MESSAGE_TEXT_COLOR` | `data-chat-bubble-feedback-message-text-color` | Text color for feedback buttons | `#000000` |
882
- | `faviconBackgroundColor` | `VITE_CHAT_BUBBLE_FAVICON_BG_COLOR` | `data-chat-bubble-favicon-background-color` | Background color for chat icon | `#667eea` |
883
- | `fontFamily` | `VITE_CHAT_BUBBLE_FONT_FAMILY` | `data-chat-bubble-font-family` | Font family for chat interface | `inherit` |
884
- | `fontSize` | `VITE_CHAT_BUBBLE_FONT_SIZE` | `data-chat-bubble-font-size` | Font size for chat interface | `inherit` |
885
-
886
- #### Branding Configuration
887
-
888
- | Attribute | Environment Variable | Data Attribute | Purpose | Default |
889
- | ------------- | ------------------------------- | ------------------------------- | -------------------------- | --------------------- |
890
- | `chatTitle` | `VITE_CHAT_BUBBLE_CHAT_TITLE` | `data-chat-bubble-chat-title` | Title shown in chat header | `HeadwAI Chat Bubble` |
891
- | `faviconPath` | `VITE_CHAT_BUBBLE_FAVICON_PATH` | `data-chat-bubble-favicon-path` | Path to chat icon/logo | `./icons/favicon.svg` |
892
-
893
- ### API Request Flow and Data Format
894
-
895
- #### Chat Completions Request
896
-
897
- ```javascript
898
- {
899
- "messages": [
900
- {
901
- "role": "user|assistant",
902
- "content": "message text"
903
- }
904
- ],
905
- "model": "customer-support-assistant-id",
906
- "stream": true,
907
- "chat_id": "uuid-if-existing",
908
- "params": {},
909
- "tool_servers": [],
910
- "features": {
911
- "image_generation": false,
912
- "code_interpreter": false,
913
- "web_search": false,
914
- "memory": false
915
- },
916
- "variables": {
917
- "{{USER_NAME}}": "David Schneebauer | headwAI GmbH",
918
- "{{USER_LOCATION}}": "Unknown",
919
- "{{CURRENT_DATETIME}}": "2025-01-07 15:30:45",
920
- // ... additional template variables
921
- },
922
- "background_tasks": {
923
- "title_generation": true,
924
- "tags_generation": false,
925
- "follow_up_generation": false
926
- }
927
- }
928
- ```
929
-
930
- #### Chat Creation Request
931
-
932
- ```javascript
933
- {
934
- "assistantId": "customer-support-assistant-id",
935
- "chat": {
936
- "id": "",
937
- "title": "New Chatbubble Chat",
938
- "models": ["customer-support-assistant-id"],
939
- "params": {},
940
- "history": {
941
- "messages": {"message-id": {...}},
942
- "currentId": "last-message-id"
943
- },
944
- "messages": [{
945
- "id": "uuid",
946
- "parentId": "parent-uuid",
947
- "childrenIds": ["child-uuid"],
948
- "role": "assistant|user",
949
- "content": "message content",
950
- "timestamp": 1704636645,
951
- "models": ["customer-support-assistant-id"]
952
- }],
953
- "tags": [],
954
- "timestamp": 1704636645000
955
- },
956
- "folder_id": null
957
- }
958
- ```
959
-
960
- #### Chat Storage Request
961
-
962
- ```javascript
963
- {
964
- "assistantId": "customer-support-assistant-id",
965
- "chat": {
966
- "models": ["customer-support-assistant-id"],
967
- "history": {
968
- "messages": {
969
- "message-uuid-1": {
970
- "id": "message-uuid-1",
971
- "parentId": null,
972
- "childrenIds": ["message-uuid-2"],
973
- "role": "user",
974
- "content": "user message content",
975
- "timestamp": 1704636645,
976
- "models": ["customer-support-assistant-id"]
977
- },
978
- "message-uuid-2": {
979
- "id": "message-uuid-2",
980
- "parentId": "message-uuid-1",
981
- "childrenIds": [],
982
- "role": "assistant",
983
- "content": "assistant response content",
984
- "model": "customer-support-assistant-id",
985
- "modelId": "customer-support-assistant-id",
986
- "modelIdx": 0,
987
- "timestamp": 1704636645,
988
- "sources": []
989
- }
990
- },
991
- "currentId": "message-uuid-2"
992
- },
993
- "messages": [
994
- {
995
- "id": "message-uuid-1",
996
- "parentId": null,
997
- "childrenIds": ["message-uuid-2"],
998
- "role": "user",
999
- "content": "user message content",
1000
- "timestamp": 1704636645,
1001
- "models": ["customer-support-assistant-id"]
1002
- },
1003
- {
1004
- "id": "message-uuid-2",
1005
- "parentId": "message-uuid-1",
1006
- "childrenIds": [],
1007
- "role": "assistant",
1008
- "content": "assistant response content",
1009
- "model": "customer-support-assistant-id",
1010
- "modelId": "customer-support-assistant-id",
1011
- "modelIdx": 0,
1012
- "timestamp": 1704636645,
1013
- "sources": []
1014
- }
1015
- ],
1016
- "params": {}
1017
- }
1018
- }
1019
- ```
1020
-
1021
- #### Feedback Request
1022
-
1023
- ```javascript
1024
- {
1025
- "assistantId": "customer-support-assistant-id",
1026
- "type": "rating",
1027
- "data": {
1028
- "rating": 1, // 1 for positive, -1 for negative
1029
- "model_id": "customer-support-assistant-id"
1030
- },
1031
- "meta": {
1032
- "model_id": "customer-support-assistant-id",
1033
- "message_id": "message-uuid",
1034
- "message_index": 2,
1035
- "chat_id": "chat-uuid",
1036
- "base_models": {"customer-support-assistant-id": "customer-support-assistant-id"}
1037
- },
1038
- "snapshot": {
1039
- "chat": {
1040
- // Complete chat state for context
1041
- }
1042
- }
1043
- }
1044
- ```
1045
-
1046
- ## API Compatibility
1047
-
1048
- This component is designed to work with OpenAI-compatible APIs. The request and response interceptors handle the message format transformation between deep-chat and OpenAI formats.
1049
-
1050
- ### Supported Message Flow
1051
-
1052
- 1. **User Input** → Deep Chat format
1053
- 2. **Request Interceptor** → Transforms to OpenAI format
1054
- 3. **API Call** → Your configured endpoint
1055
- 4. **Response Interceptor** → Transforms back to Deep Chat format
1056
- 5. **Display** → Rendered in chat interface
1057
-
1058
- ## Development
1059
-
1060
- ### Scripts
1061
-
1062
- - `npm run dev` - Start development server
1063
- - `npm run build` - Build widget for production
1064
- - `npm run build:widget` - Build standalone widget
1065
- - `npm run preview` - Preview production build
1066
-
1067
849
  ## Troubleshooting
1068
850
 
1069
851
  ### Common Issues
package/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # HeadwAI Chat Bubble
2
2
 
3
+ **🎮 Try it live:** Experience the HeadwAI Chat Bubble at [chat-bubble.headwai.org](https://chat-bubble.headwai.org/) - configure and test all features in a live environment.
4
+
3
5
  ## Features
4
6
 
5
7
  - 🚀 Easy integration into any Website
@@ -27,26 +29,26 @@ Add the HeadwAI Chat Bubble to the respective .html file.
27
29
  <script>
28
30
  // Runtime configuration override
29
31
  window.HEADWAI_CHAT_BUBBLE_CONFIG = {
30
- apiUrl: 'https://company.headwai-one.at', // required
31
- apiKey: 'your-api-key-here', // conditionally required: required for Open WebUI instances, optional for HeadwAI ONE
32
- assistantId: 'customer-support-assistant-id', // required
33
- maxMessages: 0, // optional - 0 means unlimited
34
- placeholderText: 'Ask your question here!', // optional - default: 'Enter your questions here'
35
- faviconPath: 'https://cdn.company.at/icons/favicon.svg', // optional - default: '/icons/favicon.svg'
36
- initialMessage: 'Hey! My name is Supporty, how can I help you?', // optional - default: 'Hey, how can I help you?'
37
- chatTitle: 'Customer Support', // optional - default: 'HeadwAI Chat Bubble'
38
- userMessageBackgroundColor: '#007bff', // optional - default: '#007bff'
39
- aiMessageBackgroundColor: '#f1f3f4', // optional - default: '#f1f3f4'
40
- userMessageTextColor: '#000000', // optional - default: '#000000'
41
- aiMessageTextColor: '#000000', // optional - default: '#000000'
42
- faviconBackgroundColor: '#667eea', // optional - default: '#667eea'
43
- fontFamily: '"Inter", system-ui, sans-serif', // optional - default: 'inherit'
44
- fontSize: '16px', // optional - default: 'inherit'
45
- locale: 'de-DE', // optional - auto-detects browser language, supported: en-GB, de-DE, de-AT
46
- disclaimerTitle: 'Terms of Service', // optional - default: 'Terms of Use'
47
- disclaimerMessage: 'Please accept our terms before using this service.', // optional - custom disclaimer message
48
- infoTitle: 'Support Information', // optional - default: 'About this AI Assistant'
49
- infoMessage: 'For help, contact support@example.com', // optional - custom info overlay message
32
+ apiUrl: 'https://company.headwai-one.at',
33
+ apiKey: 'your-api-key-here',
34
+ assistantId: 'customer-support-assistant-id',
35
+ maxMessages: 0,
36
+ placeholderText: 'Ask your question here!',
37
+ faviconPath: 'https://cdn.company.at/icons/favicon.svg',
38
+ initialMessage: 'Hey! My name is Supporty, how can I help you?',
39
+ chatTitle: 'Customer Support',
40
+ userMessageBackgroundColor: '#007bff',
41
+ aiMessageBackgroundColor: '#f1f3f4',
42
+ userMessageTextColor: '#000000',
43
+ aiMessageTextColor: '#000000',
44
+ faviconBackgroundColor: '#667eea',
45
+ fontFamily: '"Inter", system-ui, sans-serif',
46
+ fontSize: '16px',
47
+ locale: 'de-DE',
48
+ disclaimerTitle: 'Terms of Service',
49
+ disclaimerMessage: 'Please accept our terms before using this service.',
50
+ infoTitle: 'Support Information',
51
+ infoMessage: 'For help, contact support@example.com',
50
52
  };
51
53
  </script>
52
54
  </head>
@@ -151,7 +153,7 @@ The HeadwAI Chat Bubble can be configured using either the global `window.HEADWA
151
153
 
152
154
  #### `apiUrl`
153
155
 
154
- **Type:** `string` | **Required:** ✅
156
+ **Type:** `string` | **Required:** ✅ | **Default:** `'https://localhost'`
155
157
  The base URL of your HeadwAI ONE or Open WebUI API endpoint where the HeadwAI Chat Bubble will send messages. This is the same URL you access your HeadwAI ONE or Open WebUI instance in the web browser.
156
158
 
157
159
  ```javascript
@@ -160,7 +162,7 @@ apiUrl: 'https://company.headwai-one.at';
160
162
 
161
163
  #### `apiKey`
162
164
 
163
- **Type:** `string` | **Required:** ⚠️ (Conditional)
165
+ **Type:** `string` | **Required:** ⚠️ (Conditional) | **Default:**
164
166
  API key for authentication with the API. This is **required** when using the HeadwAI Chat Bubble with a plain [Open WebUI](https://github.com/open-webui/open-webui) instance. When used with a HeadwAI ONE instance an API key is not needed.
165
167
 
166
168
  ```javascript
@@ -202,7 +204,7 @@ maxMessages: 10; // Keep and use only last 10 messages
202
204
 
203
205
  #### `placeholderText`
204
206
 
205
- **Type:** `string` | **Default:** `'Type your message...'`
207
+ **Type:** `string` | **Default:** `'Enter your questions here'`
206
208
  The placeholder text displayed in the message input field when it's empty.
207
209
 
208
210
  ```javascript
@@ -211,7 +213,7 @@ placeholderText: 'Ask your question here!';
211
213
 
212
214
  #### `faviconPath`
213
215
 
214
- **Type:** `string` | **Default:** `'/icons/favicon.svg'`
216
+ **Type:** `string` | **Default:** `'./icons/favicon.svg'`
215
217
  Path or URL to the icon displayed on the HeadwAI Chat Bubble toggle button. Can be a relative path or absolute URL.
216
218
 
217
219
  ```javascript
@@ -220,7 +222,7 @@ faviconPath: 'https://cdn.company.at/icons/favicon.svg';
220
222
 
221
223
  #### `initialMessage`
222
224
 
223
- **Type:** `string` | **Default:** `undefined`
225
+ **Type:** `string` | **Default:** `'Hey, how can I help you?'`
224
226
  An optional welcome message that appears when the chat is first opened. If not set, no initial message is displayed.
225
227
 
226
228
  ```javascript
@@ -295,6 +297,24 @@ Text color for HeadwAI Chat Bubble messages. Accepts any valid CSS color value.
295
297
  aiMessageTextColor: '#333333';
296
298
  ```
297
299
 
300
+ #### `feedbackMessageBackgroundColor`
301
+
302
+ **Type:** `string` | **Default:** `'#ffffff'`
303
+ Background color for feedback buttons (thumbs up/down). Accepts any valid CSS color value.
304
+
305
+ ```javascript
306
+ feedbackMessageBackgroundColor: '#ffffff';
307
+ ```
308
+
309
+ #### `feedbackMessageTextColor`
310
+
311
+ **Type:** `string` | **Default:** `'#000000'`
312
+ Text color for feedback buttons (thumbs up/down). Accepts any valid CSS color value.
313
+
314
+ ```javascript
315
+ feedbackMessageTextColor: '#000000';
316
+ ```
317
+
298
318
  #### `faviconBackgroundColor`
299
319
 
300
320
  **Type:** `string` | **Default:** `'#667eea'`