open-chat-studio-widget 0.4.2 → 0.4.4

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 (37) hide show
  1. package/README.md +78 -72
  2. package/dist/cjs/{index-b700441a.js → index-bcb28089.js} +3 -1
  3. package/dist/cjs/index-bcb28089.js.map +1 -0
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/open-chat-studio-widget.cjs.entry.js +57 -20
  6. package/dist/cjs/open-chat-studio-widget.cjs.entry.js.map +1 -1
  7. package/dist/cjs/open-chat-studio-widget.cjs.js +2 -2
  8. package/dist/collection/components/ocs-chat/heroicons.js +5 -5
  9. package/dist/collection/components/ocs-chat/heroicons.js.map +1 -1
  10. package/dist/collection/components/ocs-chat/ocs-chat.css +179 -131
  11. package/dist/collection/components/ocs-chat/ocs-chat.js +40 -13
  12. package/dist/collection/components/ocs-chat/ocs-chat.js.map +1 -1
  13. package/dist/collection/utils/utils.js +30 -0
  14. package/dist/collection/utils/utils.js.map +1 -0
  15. package/dist/components/open-chat-studio-widget.js +57 -19
  16. package/dist/components/open-chat-studio-widget.js.map +1 -1
  17. package/dist/esm/{index-b188b488.js → index-205c77bc.js} +3 -2
  18. package/dist/{open-chat-studio-widget/p-a0fbe1b4.js.map → esm/index-205c77bc.js.map} +1 -1
  19. package/dist/esm/loader.js +3 -3
  20. package/dist/esm/open-chat-studio-widget.entry.js +57 -20
  21. package/dist/esm/open-chat-studio-widget.entry.js.map +1 -1
  22. package/dist/esm/open-chat-studio-widget.js +3 -3
  23. package/dist/open-chat-studio-widget/open-chat-studio-widget.esm.js +1 -1
  24. package/dist/open-chat-studio-widget/open-chat-studio-widget.esm.js.map +1 -1
  25. package/dist/open-chat-studio-widget/p-19d45fe5.entry.js +3 -0
  26. package/dist/open-chat-studio-widget/p-19d45fe5.entry.js.map +1 -0
  27. package/dist/open-chat-studio-widget/p-78d09c6b.js +3 -0
  28. package/dist/open-chat-studio-widget/p-78d09c6b.js.map +1 -0
  29. package/dist/types/components/ocs-chat/ocs-chat.d.ts +8 -3
  30. package/dist/types/components.d.ts +8 -0
  31. package/dist/types/utils/utils.d.ts +7 -0
  32. package/package.json +1 -1
  33. package/dist/cjs/index-b700441a.js.map +0 -1
  34. package/dist/esm/index-b188b488.js.map +0 -1
  35. package/dist/open-chat-studio-widget/p-a0fbe1b4.js +0 -3
  36. package/dist/open-chat-studio-widget/p-d47dbd2f.entry.js +0 -3
  37. package/dist/open-chat-studio-widget/p-d47dbd2f.entry.js.map +0 -1
package/README.md CHANGED
@@ -16,6 +16,7 @@ For more information, see the [Open Chat Studio documentation](https://docs.open
16
16
  | `buttonShape` | `button-shape` | The shape of the chat button. 'round' makes it circular, 'square' keeps it rectangular. | `"round" \| "square"` | `'square'` |
17
17
  | `buttonText` | `button-text` | The text to display on the button. | `string` | `undefined` |
18
18
  | `chatbotId` _(required)_ | `chatbot-id` | The ID of the chatbot to connect to. | `string` | `undefined` |
19
+ | `headerText` | `header-text` | The text to place in the header. | `""` | `undefined` |
19
20
  | `iconUrl` | `icon-url` | URL of the icon to display on the button. If not provided, uses the default OCS logo. | `string` | `undefined` |
20
21
  | `persistentSession` | `persistent-session` | Whether to persist session data to local storage to allow resuming previous conversations after page reload. | `boolean` | `true` |
21
22
  | `persistentSessionExpire` | `persistent-session-expire` | Minutes since the most recent message after which the session data in local storage will expire. Set this to `0` to never expire. | `number` | `60 * 24` |
@@ -29,78 +30,83 @@ For more information, see the [Open Chat Studio documentation](https://docs.open
29
30
 
30
31
  ## CSS Custom Properties
31
32
 
32
- | Name | Description |
33
- | --------------------------------------- | ---------------------------------------------------------------------- |
34
- | `--button-background-color` | Button background color (#ffffff) |
35
- | `--button-background-color-hover` | Button background color on hover (#f3f4f6) |
36
- | `--button-border-color` | Button border color (#6b7280) |
37
- | `--button-border-color-hover` | Button border color on hover (#374151) |
38
- | `--button-font-size` | Button text font size (0.875rem) |
39
- | `--button-icon-height` | Button icon height (1.5rem) Chat Window Variables |
40
- | `--button-icon-width` | Button icon width (1.5rem) |
41
- | `--button-padding` | Button padding (0.75rem) |
42
- | `--button-padding-sm` | Small button padding (0.375rem) |
43
- | `--button-text-color` | Button text color (#111827) |
44
- | `--button-text-color-hover` | Button text color on hover (#1d4ed8) |
45
- | `--chat-window-bg-color` | Chat window background color (#ffffff) |
46
- | `--chat-window-border-color` | Chat window border color (#d1d5db) |
47
- | `--chat-window-font-size` | Default font size for text in the chat window (0.875rem) |
48
- | `--chat-window-font-size-sm` | Font size for small text in the chat window (0.75rem) Header Variables |
49
- | `--chat-window-shadow-color` | Chat window shadow color (rgba(0, 0, 0, 0.1)) |
50
- | `--chat-z-index` | Z-index for chat widget (50) |
51
- | `--code-bg-assistant-color` | Code background in assistant messages (#ffffff) |
52
- | `--code-bg-user-color` | Code background in user messages (rgba(59, 130, 246, 0.3)) |
53
- | `--code-border-assistant-color` | Code border in assistant messages (#d1d5db) |
54
- | `--code-border-user-color` | Code border in user messages (rgba(59, 130, 246, 0.6)) |
55
- | `--code-text-assistant-color` | Code text color in assistant messages (#1f2937) |
56
- | `--code-text-user-color` | Code text color in user messages (#dbeafe) |
57
- | `--container-padding` | General container padding (1rem) Button Variables |
58
- | `--error-message-padding` | Error message padding (0.5rem) Markdown Code Variables |
59
- | `--error-text-color` | Error text color (#ef4444) |
60
- | `--header-bg-color` | Header background color (transparent) |
61
- | `--header-bg-hover-color` | Header background color on hover (#f9fafb) |
62
- | `--header-border-color` | Header border color (#f3f4f6) |
63
- | `--header-button-bg-hover-color` | Header button background on hover (#f3f4f6) |
64
- | `--header-button-text-color` | Header button text color (#6b7280) |
65
- | `--header-padding` | Header padding (0.5rem) Starter Question Variables |
66
- | `--input-bg-color` | Input area background color (transparent) |
67
- | `--input-border-color` | Input field border color (#d1d5db) |
68
- | `--input-outline-focus-color` | Input field focus ring color (#3b82f6) |
69
- | `--input-placeholder-color` | Input placeholder text color (#6b7280) |
70
- | `--input-text-color` | Input text color (#111827) |
71
- | `--input-textarea-padding-x` | Input textarea horizontal padding (0.75rem) |
72
- | `--input-textarea-padding-y` | Input textarea vertical padding (0.5rem) Send Button Variables |
73
- | `--loading-spinner-fill-color` | Loading spinner fill color (#3b82f6) |
74
- | `--loading-spinner-size` | Loading spinner size (1.25rem) Typing Indicator Variables |
75
- | `--loading-spinner-track-color` | Loading spinner track color (#e5e7eb) |
76
- | `--loading-text-color` | Loading text color (#6b7280) |
77
- | `--message-assistant-bg-color` | Assistant message background color (#e5e7eb) |
78
- | `--message-assistant-text-color` | Assistant message text color (#1f2937) |
79
- | `--message-padding-x` | Message horizontal padding (1rem) |
80
- | `--message-padding-y` | Message vertical padding (0.5rem) Input Area Variables |
81
- | `--message-system-bg-color` | System message background color (#f3f4f6) |
82
- | `--message-system-text-color` | System message text color (#4b5563) |
83
- | `--message-timestamp-assistant-color` | Assistant message timestamp color (rgba(75, 85, 99, 0.7)) |
84
- | `--message-timestamp-color` | User message timestamp color (rgba(255, 255, 255, 0.7)) |
85
- | `--message-user-bg-color` | User message background color (#3b82f6) |
86
- | `--message-user-text-color` | User message text color (#ffffff) |
87
- | `--scrollbar-thumb-color` | Scrollbar thumb color (#d1d5db) |
88
- | `--scrollbar-thumb-hover-color` | Scrollbar thumb hover color (#9ca3af) Error Variables |
89
- | `--scrollbar-track-color` | Scrollbar track color (#f3f4f6) |
90
- | `--send-button-bg-color` | Send button background color (#3b82f6) |
91
- | `--send-button-bg-disabled-color` | Send button background when disabled (#d1d5db) |
92
- | `--send-button-bg-hover-color` | Send button background on hover (#2563eb) |
93
- | `--send-button-padding-x` | Send button horizontal padding (1rem) |
94
- | `--send-button-padding-y` | Send button vertical padding (0.5rem) Loading Variables |
95
- | `--send-button-text-color` | Send button text color (#ffffff) |
96
- | `--send-button-text-disabled-color` | Send button text when disabled (#6b7280) |
97
- | `--starter-question-bg-color` | Starter question background color (transparent) |
98
- | `--starter-question-bg-hover-color` | Starter question background on hover (#eff6ff) |
99
- | `--starter-question-border-color` | Starter question border color (#3b82f6) |
100
- | `--starter-question-border-hover-color` | Starter question border on hover (#2563eb) |
101
- | `--starter-question-padding` | Starter question padding (0.75rem) Message Bubble Variables |
102
- | `--starter-question-text-color` | Starter question text color (#3b82f6) |
103
- | `--typing-progress-bg-color` | Typing progress bar background color (#ade3ff) Scrollbar Variables |
33
+ | Name | Description |
34
+ | --------------------------------------- | -------------------------------------------------------------------------------- |
35
+ | `--button-background-color` | Button background color (#ffffff) |
36
+ | `--button-background-color-hover` | Button background color on hover (#f3f4f6) |
37
+ | `--button-border-color` | Button border color (#6b7280) |
38
+ | `--button-border-color-hover` | Button border color on hover (#374151) |
39
+ | `--button-font-size` | Button text font size (0.875em) |
40
+ | `--button-icon-size` | Button icon size (1.5em) |
41
+ | `--button-padding` | Button padding (0.75em) |
42
+ | `--button-text-color` | Button text color (#111827) |
43
+ | `--button-text-color-hover` | Button text color on hover (#1d4ed8) |
44
+ | `--chat-window-bg-color` | Chat window background color (#ffffff) |
45
+ | `--chat-window-border-color` | Chat window border color (#d1d5db) |
46
+ | `--chat-window-font-size` | Default font size for text in the chat window (0.875em) |
47
+ | `--chat-window-font-size-sm` | Font size for small text in the chat window (0.75em) |
48
+ | `--chat-window-fullscreen-width` | Chat window fullscreen width in pixels or percent (80%) |
49
+ | `--chat-window-height` | Chat window height in pixels or percent (60%) |
50
+ | `--chat-window-shadow-color` | Chat window shadow color (rgba(0, 0, 0, 0.1)) |
51
+ | `--chat-window-width` | Chat window width in pixels or percent (25%) |
52
+ | `--chat-z-index` | Z-index for chat widget (50) |
53
+ | `--code-bg-assistant-color` | Code background in assistant messages (--message-assistant-bg-color + 50% white) |
54
+ | `--code-bg-user-color` | Code background in user messages (--message-user-bg-color + 20% white) |
55
+ | `--code-border-assistant-color` | Code border in assistant messages (--message-assistant-bg-color + 10% black) |
56
+ | `--code-border-user-color` | Code border in user messages (--message-user-bg-color + 20% black) |
57
+ | `--code-text-assistant-color` | Code text color in assistant messages (--message-assistant-text-color) |
58
+ | `--code-text-user-color` | Code text color in user messages (--message-user-text-color) |
59
+ | `--container-padding` | General container padding (1em) |
60
+ | `--error-message-padding` | Error message padding (0.5em) |
61
+ | `--error-text-color` | Error text color (#ef4444) |
62
+ | `--header-bg-color` | Header background color (transparent) |
63
+ | `--header-bg-hover-color` | Header background color on hover (#f9fafb) |
64
+ | `--header-border-color` | Header border color (#f3f4f6) |
65
+ | `--header-button-bg-hover-color` | Header button background on hover (#f3f4f6) |
66
+ | `--header-button-icon-size` | Icon size for buttons in the header (1.5em) |
67
+ | `--header-button-text-color` | Header button text color (#6b7280) |
68
+ | `--header-font-size` | Header font size (1em) |
69
+ | `--header-padding` | Header padding (0.5em) |
70
+ | `--header-text-color` | Color for the text in the header (#525762) |
71
+ | `--header-text-font-size` | Font size for the text in the header (1em) |
72
+ | `--input-bg-color` | Input area background color (transparent) |
73
+ | `--input-border-color` | Input field border color (#d1d5db) |
74
+ | `--input-outline-focus-color` | Input field focus ring color (#3b82f6) |
75
+ | `--input-placeholder-color` | Input placeholder text color (#6b7280) |
76
+ | `--input-text-color` | Input text color (#111827) |
77
+ | `--input-textarea-padding-x` | Input textarea horizontal padding (0.75em) |
78
+ | `--input-textarea-padding-y` | Input textarea vertical padding (0.5em) |
79
+ | `--loading-spinner-fill-color` | Loading spinner fill color (#3b82f6) |
80
+ | `--loading-spinner-size` | Loading spinner size (1.25em) |
81
+ | `--loading-spinner-track-color` | Loading spinner track color (#e5e7eb) |
82
+ | `--loading-text-color` | Loading text color (#6b7280) |
83
+ | `--message-assistant-bg-color` | Assistant message background color (#e5e7eb) |
84
+ | `--message-assistant-text-color` | Assistant message text color (#1f2937) |
85
+ | `--message-padding-x` | Message horizontal padding (1em) |
86
+ | `--message-padding-y` | Message vertical padding (0.5em) |
87
+ | `--message-system-bg-color` | System message background color (#f3f4f6) |
88
+ | `--message-system-text-color` | System message text color (#4b5563) |
89
+ | `--message-timestamp-assistant-color` | Assistant message timestamp color (rgba(75, 85, 99, 0.7)) |
90
+ | `--message-timestamp-color` | User message timestamp color (rgba(255, 255, 255, 0.7)) |
91
+ | `--message-user-bg-color` | User message background color (#3b82f6) |
92
+ | `--message-user-text-color` | User message text color (#ffffff) |
93
+ | `--scrollbar-thumb-color` | Scrollbar thumb color (#d1d5db) |
94
+ | `--scrollbar-thumb-hover-color` | Scrollbar thumb hover color (#9ca3af) |
95
+ | `--scrollbar-track-color` | Scrollbar track color (#f3f4f6) |
96
+ | `--send-button-bg-color` | Send button background color (#3b82f6) |
97
+ | `--send-button-bg-disabled-color` | Send button background when disabled (#d1d5db) |
98
+ | `--send-button-bg-hover-color` | Send button background on hover (#2563eb) |
99
+ | `--send-button-padding-x` | Send button horizontal padding (1em) |
100
+ | `--send-button-padding-y` | Send button vertical padding (0.5em) |
101
+ | `--send-button-text-color` | Send button text color (#ffffff) |
102
+ | `--send-button-text-disabled-color` | Send button text when disabled (#6b7280) |
103
+ | `--starter-question-bg-color` | Starter question background color (transparent) |
104
+ | `--starter-question-bg-hover-color` | Starter question background on hover (#eff6ff) |
105
+ | `--starter-question-border-color` | Starter question border color (#3b82f6) |
106
+ | `--starter-question-border-hover-color` | Starter question border on hover (#2563eb) |
107
+ | `--starter-question-padding` | Starter question padding (0.75em) |
108
+ | `--starter-question-text-color` | Starter question text color (#3b82f6) |
109
+ | `--typing-progress-bg-color` | Typing progress bar background color (#ade3ff) |
104
110
 
105
111
 
106
112
  ----------------------------------------------
package/dist/cjs/{index-b700441a.js → index-bcb28089.js} RENAMED
@@ -341,6 +341,7 @@ var parsePropertyValue = (propValue, propType) => {
341
341
  }
342
342
  return propValue;
343
343
  };
344
+ var getElement = (ref) => getHostRef(ref).$hostElement$ ;
344
345
  var emitEvent = (elm, name, opts) => {
345
346
  const ev = plt.ce(name, opts);
346
347
  elm.dispatchEvent(ev);
@@ -1364,9 +1365,10 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
1364
1365
 
1365
1366
  exports.Host = Host;
1366
1367
  exports.bootstrapLazy = bootstrapLazy;
1368
+ exports.getElement = getElement;
1367
1369
  exports.h = h;
1368
1370
  exports.promiseResolve = promiseResolve;
1369
1371
  exports.registerInstance = registerInstance;
1370
1372
  exports.setNonce = setNonce;
1371
1373
 
1372
- //# sourceMappingURL=index-b700441a.js.map
1374
+ //# sourceMappingURL=index-bcb28089.js.map