@contember/echo 0.0.20 → 0.0.21

Sign up to get free protection for your applications and to get access to all the features.
package/LICENSE ADDED
@@ -0,0 +1,185 @@
1
+ Copyright (c) 2024 Contember Limited
2
+
3
+ Portions of this software are licensed as follows:
4
+
5
+ * All third party components incorporated into the software are licensed under the original license provided by the owner of the applicable component.
6
+ * Content outside of the above mentioned restrictions is available under the Apache License, Version 2.0 (the "License") as defined below.
7
+
8
+ -------------------------------------------------------------------------
9
+ Apache License
10
+ Version 2.0, January 2004
11
+ http://www.apache.org/licenses/
12
+
13
+
14
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
15
+
16
+ 1. Definitions.
17
+
18
+ "License" shall mean the terms and conditions for use, reproduction,
19
+ and distribution as defined by Sections 1 through 9 of this document.
20
+
21
+ "Licensor" shall mean the copyright owner or entity authorized by
22
+ the copyright owner that is granting the License.
23
+
24
+ "Legal Entity" shall mean the union of the acting entity and all
25
+ other entities that control, are controlled by, or are under common
26
+ control with that entity. For the purposes of this definition,
27
+ "control" means (i) the power, direct or indirect, to cause the
28
+ direction or management of such entity, whether by contract or
29
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
30
+ outstanding shares, or (iii) beneficial ownership of such entity.
31
+
32
+ "You" (or "Your") shall mean an individual or Legal Entity
33
+ exercising permissions granted by this License.
34
+
35
+ "Source" form shall mean the preferred form for making modifications,
36
+ including but not limited to software source code, documentation
37
+ source, and configuration files.
38
+
39
+ "Object" form shall mean any form resulting from mechanical
40
+ transformation or translation of a Source form, including but
41
+ not limited to compiled object code, generated documentation,
42
+ and conversions to other media types.
43
+
44
+ "Work" shall mean the work of authorship, whether in Source or
45
+ Object form, made available under the License, as indicated by a
46
+ copyright notice that is included in or attached to the work
47
+ (an example is provided in the Appendix below).
48
+
49
+ "Derivative Works" shall mean any work, whether in Source or Object
50
+ form, that is based on (or derived from) the Work and for which the
51
+ editorial revisions, annotations, elaborations, or other modifications
52
+ represent, as a whole, an original work of authorship. For the purposes
53
+ of this License, Derivative Works shall not include works that remain
54
+ separable from, or merely link (or bind by name) to the interfaces of,
55
+ the Work and Derivative Works thereof.
56
+
57
+ "Contribution" shall mean any work of authorship, including
58
+ the original version of the Work and any modifications or additions
59
+ to that Work or Derivative Works thereof, that is intentionally
60
+ submitted to Licensor for inclusion in the Work by the copyright owner
61
+ or by an individual or Legal Entity authorized to submit on behalf of
62
+ the copyright owner. For the purposes of this definition, "submitted"
63
+ means any form of electronic, verbal, or written communication sent
64
+ to the Licensor or its representatives, including but not limited to
65
+ communication on electronic mailing lists, source code control systems,
66
+ and issue tracking systems that are managed by, or on behalf of, the
67
+ Licensor for the purpose of discussing and improving the Work, but
68
+ excluding communication that is conspicuously marked or otherwise
69
+ designated in writing by the copyright owner as "Not a Contribution."
70
+
71
+ "Contributor" shall mean Licensor and any individual or Legal Entity
72
+ on behalf of whom a Contribution has been received by Licensor and
73
+ subsequently incorporated within the Work.
74
+
75
+ 2. Grant of Copyright License. Subject to the terms and conditions of
76
+ this License, each Contributor hereby grants to You a perpetual,
77
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
78
+ copyright license to reproduce, prepare Derivative Works of,
79
+ publicly display, publicly perform, sublicense, and distribute the
80
+ Work and such Derivative Works in Source or Object form.
81
+
82
+ 3. Grant of Patent License. Subject to the terms and conditions of
83
+ this License, each Contributor hereby grants to You a perpetual,
84
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
85
+ (except as stated in this section) patent license to make, have made,
86
+ use, offer to sell, sell, import, and otherwise transfer the Work,
87
+ where such license applies only to those patent claims licensable
88
+ by such Contributor that are necessarily infringed by their
89
+ Contribution(s) alone or by combination of their Contribution(s)
90
+ with the Work to which such Contribution(s) was submitted. If You
91
+ institute patent litigation against any entity (including a
92
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
93
+ or a Contribution incorporated within the Work constitutes direct
94
+ or contributory patent infringement, then any patent licenses
95
+ granted to You under this License for that Work shall terminate
96
+ as of the date such litigation is filed.
97
+
98
+ 4. Redistribution. You may reproduce and distribute copies of the
99
+ Work or Derivative Works thereof in any medium, with or without
100
+ modifications, and in Source or Object form, provided that You
101
+ meet the following conditions:
102
+
103
+ (a) You must give any other recipients of the Work or
104
+ Derivative Works a copy of this License; and
105
+
106
+ (b) You must cause any modified files to carry prominent notices
107
+ stating that You changed the files; and
108
+
109
+ (c) You must retain, in the Source form of any Derivative Works
110
+ that You distribute, all copyright, patent, trademark, and
111
+ attribution notices from the Source form of the Work,
112
+ excluding those notices that do not pertain to any part of
113
+ the Derivative Works; and
114
+
115
+ (d) If the Work includes a "NOTICE" text file as part of its
116
+ distribution, then any Derivative Works that You distribute must
117
+ include a readable copy of the attribution notices contained
118
+ within such NOTICE file, excluding those notices that do not
119
+ pertain to any part of the Derivative Works, in at least one
120
+ of the following places: within a NOTICE text file distributed
121
+ as part of the Derivative Works; within the Source form or
122
+ documentation, if provided along with the Derivative Works; or,
123
+ within a display generated by the Derivative Works, if and
124
+ wherever such third-party notices normally appear. The contents
125
+ of the NOTICE file are for informational purposes only and
126
+ do not modify the License. You may add Your own attribution
127
+ notices within Derivative Works that You distribute, alongside
128
+ or as an addendum to the NOTICE text from the Work, provided
129
+ that such additional attribution notices cannot be construed
130
+ as modifying the License.
131
+
132
+ You may add Your own copyright statement to Your modifications and
133
+ may provide additional or different license terms and conditions
134
+ for use, reproduction, or distribution of Your modifications, or
135
+ for any such Derivative Works as a whole, provided Your use,
136
+ reproduction, and distribution of the Work otherwise complies with
137
+ the conditions stated in this License.
138
+
139
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
140
+ any Contribution intentionally submitted for inclusion in the Work
141
+ by You to the Licensor shall be under the terms and conditions of
142
+ this License, without any additional terms or conditions.
143
+ Notwithstanding the above, nothing herein shall supersede or modify
144
+ the terms of any separate license agreement you may have executed
145
+ with Licensor regarding such Contributions.
146
+
147
+ 6. Trademarks. This License does not grant permission to use the trade
148
+ names, trademarks, service marks, or product names of the Licensor,
149
+ except as required for reasonable and customary use in describing the
150
+ origin of the Work and reproducing the content of the NOTICE file.
151
+
152
+ 7. Disclaimer of Warranty. Unless required by applicable law or
153
+ agreed to in writing, Licensor provides the Work (and each
154
+ Contributor provides its Contributions) on an "AS IS" BASIS,
155
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
156
+ implied, including, without limitation, any warranties or conditions
157
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
158
+ PARTICULAR PURPOSE. You are solely responsible for determining the
159
+ appropriateness of using or redistributing the Work and assume any
160
+ risks associated with Your exercise of permissions under this License.
161
+
162
+ 8. Limitation of Liability. In no event and under no legal theory,
163
+ whether in tort (including negligence), contract, or otherwise,
164
+ unless required by applicable law (such as deliberate and grossly
165
+ negligent acts) or agreed to in writing, shall any Contributor be
166
+ liable to You for damages, including any direct, indirect, special,
167
+ incidental, or consequential damages of any character arising as a
168
+ result of this License or out of the use or inability to use the
169
+ Work (including but not limited to damages for loss of goodwill,
170
+ work stoppage, computer failure or malfunction, or any and all
171
+ other commercial damages or losses), even if such Contributor
172
+ has been advised of the possibility of such damages.
173
+
174
+ 9. Accepting Warranty or Additional Liability. While redistributing
175
+ the Work or Derivative Works thereof, You may choose to offer,
176
+ and charge a fee for, acceptance of support, warranty, indemnity,
177
+ or other liability obligations and/or rights consistent with this
178
+ License. However, in accepting such obligations, You may act only
179
+ on Your own behalf and on Your sole responsibility, not on behalf
180
+ of any other Contributor, and only if You agree to indemnify,
181
+ defend, and hold each Contributor harmless for any liability
182
+ incurred by, or claims asserted against, such Contributor by reason
183
+ of your accepting any such warranty or additional liability.
184
+
185
+ END OF TERMS AND CONDITIONS
package/README.md CHANGED
@@ -1,6 +1,19 @@
1
- # Echo Widget
1
+ # Echo
2
2
 
3
- A lightweight feedback widget built with Solid.js that allows users to capture screenshots, annotate them, and submit feedback.
3
+ A lightweight tool for capturing user feedback with screenshots, annotations, and debug information. Built with Solid.js and designed to seamlessly integrate into any web application.
4
+
5
+ ## Features
6
+
7
+ - 📸 **Screenshot Capture**: Automatically capture the current page state
8
+ - ✏️ **Drawing Tools**: Annotate screenshots with various drawing tools
9
+ - 🎨 **Customizable UI**: Configurable colors, position and text
10
+ - 🌐 **Framework Agnostic**: Works with any web application
11
+ - 🎯 **Easy Integration**: Simple setup with NPM or direct script inclusion
12
+ - 🎨 **Drawing Features**:
13
+ - Multiple colors for annotations
14
+ - WIP: Different shapes and tools
15
+ - 📱 **Responsive Design**: WIP: Works seamlessly on desktop and mobile devices
16
+ - 🔍 **Console tracking**: Captures last 1000 console entries
4
17
 
5
18
  ## Usage
6
19
 
@@ -10,40 +23,6 @@ A lightweight feedback widget built with Solid.js that allows users to capture s
10
23
  import { initEcho } from '@contember/echo';
11
24
 
12
25
  initEcho({
13
- // Optional: widget position (default: 'bottom-right')
14
- position: 'bottom-right',
15
-
16
- // Optional: primary color for buttons and UI elements
17
- primaryColor: '#007AFF',
18
-
19
- // Optional: customize all text elements in the widget
20
- textConfig: {
21
- welcomeMessage: {
22
- text: 'Click here to leave feedback',
23
- closeAriaLabel: 'Close welcome message',
24
- },
25
- feedbackForm: {
26
- title: 'Send Feedback',
27
- placeholder: "What's on your mind? We'd love to hear your feedback...",
28
- screenshotAlt: 'Screenshot Preview',
29
- submitButton: 'Send Feedback',
30
- minimizeTitle: 'Minimize',
31
- expandTitle: 'Expand',
32
- closeTitle: 'Close',
33
- showFormTitle: 'Show Feedback Form',
34
- },
35
- notification: {
36
- successTitle: 'Thank you for your feedback!',
37
- errorTitle: 'Something went wrong.',
38
- errorMessage: 'Failed to send feedback. Please try again.',
39
- hideTitle: 'Hide notification',
40
- },
41
- drawingTooltip: {
42
- text: 'Click & drag to draw',
43
- },
44
- },
45
-
46
- // Required: callback function when feedback is submitted
47
26
  onSubmit: async (data) => {
48
27
  console.log('Feedback submitted:', data);
49
28
  // Handle the feedback data (send to server, etc.)
@@ -58,40 +37,6 @@ initEcho({
58
37
  import { initEcho } from "https://esm.sh/@contember/echo";
59
38
 
60
39
  initEcho({
61
- // Optional: widget position (default: 'bottom-right')
62
- position: 'bottom-right',
63
-
64
- // Optional: primary color for buttons and UI elements
65
- primaryColor: '#007AFF',
66
-
67
- // Optional: customize all text elements in the widget
68
- textConfig: {
69
- welcomeMessage: {
70
- text: 'Click here to leave feedback',
71
- closeAriaLabel: 'Close welcome message',
72
- },
73
- feedbackForm: {
74
- title: 'Send Feedback',
75
- placeholder: "What's on your mind? We'd love to hear your feedback...",
76
- screenshotAlt: 'Screenshot Preview',
77
- submitButton: 'Send Feedback',
78
- minimizeTitle: 'Minimize',
79
- expandTitle: 'Expand',
80
- closeTitle: 'Close',
81
- showFormTitle: 'Show Feedback Form',
82
- },
83
- notification: {
84
- successTitle: 'Thank you for your feedback!',
85
- errorTitle: 'Something went wrong.',
86
- errorMessage: 'Failed to send feedback. Please try again.',
87
- hideTitle: 'Hide notification',
88
- },
89
- drawingTooltip: {
90
- text: 'Click & drag to draw',
91
- },
92
- },
93
-
94
- // Required: callback function when feedback is submitted
95
40
  onSubmit: async (data) => {
96
41
  console.log('Feedback submitted:', data);
97
42
  // Handle the feedback data (send to server, etc.)
@@ -99,3 +44,43 @@ initEcho({
99
44
  });
100
45
  </script>
101
46
  ```
47
+
48
+ ## Configuration Options
49
+
50
+ | Option | Type | Required | Default | Description |
51
+ |--------|------|----------|---------|-------------|
52
+ | `position` | string | No | 'bottom-right' | WIP: Position on the page. Available positions: 'top-left', 'top-center', 'top-right', 'middle-left', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right' |
53
+ | `primaryColor` | string | No | '#6227dc' | Primary color for UI elements |
54
+ | `textConfig` | object | No | english | Customize all text elements in the interface |
55
+ | `onSubmit` | function | Yes | - | Callback function when feedback is submitted |
56
+
57
+ ## Feedback Data Structure
58
+
59
+ The `onSubmit` callback receives a data object with the following structure:
60
+
61
+ ```typescript
62
+ interface FeedbackData {
63
+ comment: string; // User's written feedback
64
+ screenshot: string; // Base64 encoded screenshot
65
+ metadata: {
66
+ url: string; // Current page URL
67
+ userAgent: string; // Browser user agent
68
+ timestamp: number; // Submission timestamp
69
+ browserInfo: {
70
+ width: number; // Width of viewport
71
+ height: number; // Height of viewport
72
+ screenWidth: number; // Width of device
73
+ screenHeight: number; // Height of device
74
+ };
75
+ };
76
+ console: Array<{ // Last 1000 console entries (logs, warnings, errors, uncaught errors, unhandled promise rejections)
77
+ type: 'log' | 'warn' | 'error'; // Type of console entry
78
+ message: string; // Content of the console message
79
+ timestamp: string; // When the message was logged
80
+ }>;
81
+ }
82
+ ```
83
+
84
+ ## License
85
+
86
+ Apache-2.0 - see [LICENSE](LICENSE) for details.