@sirendesign/markup 1.0.21 → 1.0.22
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.
- package/dist/markup-widget.esm.js +723 -677
- package/dist/markup-widget.esm.js.map +1 -1
- package/dist/markup-widget.js +736 -690
- package/dist/markup-widget.js.map +1 -1
- package/package.json +1 -1
package/dist/markup-widget.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react-dom/client'), require('react-dom')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define(['react', 'react-dom/client', 'react-dom'], factory) :
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MarkupWidget = factory(global.React, global.ReactDOM, global.ReactDOM));
|
|
5
|
-
})(this, (function (React$
|
|
5
|
+
})(this, (function (React$1, ReactDOM, reactDom) { 'use strict';
|
|
6
6
|
|
|
7
7
|
const createStoreImpl = (createState) => {
|
|
8
8
|
let state;
|
|
@@ -43,175 +43,214 @@
|
|
|
43
43
|
|
|
44
44
|
var withSelector = {exports: {}};
|
|
45
45
|
|
|
46
|
-
var
|
|
46
|
+
var withSelector_development = {};
|
|
47
47
|
|
|
48
|
-
var shim
|
|
48
|
+
var shim = {exports: {}};
|
|
49
49
|
|
|
50
|
-
var
|
|
50
|
+
var useSyncExternalStoreShim_development = {};
|
|
51
51
|
|
|
52
52
|
/**
|
|
53
53
|
* @license React
|
|
54
|
-
* use-sync-external-store-shim.
|
|
54
|
+
* use-sync-external-store-shim.development.js
|
|
55
55
|
*
|
|
56
56
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
57
57
|
*
|
|
58
58
|
* This source code is licensed under the MIT license found in the
|
|
59
59
|
* LICENSE file in the root directory of this source tree.
|
|
60
60
|
*/
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
useEffect$1(
|
|
84
|
-
function () {
|
|
85
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
86
|
-
return subscribe(function () {
|
|
87
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
61
|
+
((function () {
|
|
62
|
+
function is(x, y) {
|
|
63
|
+
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
64
|
+
}
|
|
65
|
+
function useSyncExternalStore$2(subscribe, getSnapshot) {
|
|
66
|
+
didWarnOld18Alpha ||
|
|
67
|
+
void 0 === React.startTransition ||
|
|
68
|
+
((didWarnOld18Alpha = true),
|
|
69
|
+
console.error(
|
|
70
|
+
"You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
|
|
71
|
+
));
|
|
72
|
+
var value = getSnapshot();
|
|
73
|
+
if (!didWarnUncachedGetSnapshot) {
|
|
74
|
+
var cachedValue = getSnapshot();
|
|
75
|
+
objectIs(value, cachedValue) ||
|
|
76
|
+
(console.error(
|
|
77
|
+
"The result of getSnapshot should be cached to avoid an infinite loop"
|
|
78
|
+
),
|
|
79
|
+
(didWarnUncachedGetSnapshot = true));
|
|
80
|
+
}
|
|
81
|
+
cachedValue = useState({
|
|
82
|
+
inst: { value: value, getSnapshot: getSnapshot }
|
|
88
83
|
});
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
84
|
+
var inst = cachedValue[0].inst,
|
|
85
|
+
forceUpdate = cachedValue[1];
|
|
86
|
+
useLayoutEffect(
|
|
87
|
+
function () {
|
|
88
|
+
inst.value = value;
|
|
89
|
+
inst.getSnapshot = getSnapshot;
|
|
90
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
91
|
+
},
|
|
92
|
+
[subscribe, value, getSnapshot]
|
|
93
|
+
);
|
|
94
|
+
useEffect(
|
|
95
|
+
function () {
|
|
96
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
97
|
+
return subscribe(function () {
|
|
98
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
99
|
+
});
|
|
100
|
+
},
|
|
101
|
+
[subscribe]
|
|
102
|
+
);
|
|
103
|
+
useDebugValue(value);
|
|
104
|
+
return value;
|
|
105
|
+
}
|
|
106
|
+
function checkIfSnapshotChanged(inst) {
|
|
107
|
+
var latestGetSnapshot = inst.getSnapshot;
|
|
108
|
+
inst = inst.value;
|
|
109
|
+
try {
|
|
110
|
+
var nextValue = latestGetSnapshot();
|
|
111
|
+
return !objectIs(inst, nextValue);
|
|
112
|
+
} catch (error) {
|
|
113
|
+
return true;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
117
|
+
return getSnapshot();
|
|
118
|
+
}
|
|
119
|
+
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
120
|
+
"function" ===
|
|
121
|
+
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
|
|
122
|
+
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
123
|
+
var React = React$1,
|
|
124
|
+
objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
125
|
+
useState = React.useState,
|
|
126
|
+
useEffect = React.useEffect,
|
|
127
|
+
useLayoutEffect = React.useLayoutEffect,
|
|
128
|
+
useDebugValue = React.useDebugValue,
|
|
129
|
+
didWarnOld18Alpha = false,
|
|
130
|
+
didWarnUncachedGetSnapshot = false,
|
|
131
|
+
shim =
|
|
132
|
+
"undefined" === typeof window ||
|
|
133
|
+
"undefined" === typeof window.document ||
|
|
134
|
+
"undefined" === typeof window.document.createElement
|
|
135
|
+
? useSyncExternalStore$1
|
|
136
|
+
: useSyncExternalStore$2;
|
|
137
|
+
useSyncExternalStoreShim_development.useSyncExternalStore =
|
|
138
|
+
void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
|
|
139
|
+
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
140
|
+
"function" ===
|
|
141
|
+
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
|
|
142
|
+
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
143
|
+
}))();
|
|
116
144
|
|
|
117
145
|
{
|
|
118
|
-
shim
|
|
146
|
+
shim.exports = useSyncExternalStoreShim_development;
|
|
119
147
|
}
|
|
120
148
|
|
|
121
|
-
var shimExports = shim
|
|
149
|
+
var shimExports = shim.exports;
|
|
122
150
|
|
|
123
151
|
/**
|
|
124
152
|
* @license React
|
|
125
|
-
* use-sync-external-store-shim/with-selector.
|
|
153
|
+
* use-sync-external-store-shim/with-selector.development.js
|
|
126
154
|
*
|
|
127
155
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
128
156
|
*
|
|
129
157
|
* This source code is licensed under the MIT license found in the
|
|
130
158
|
* LICENSE file in the root directory of this source tree.
|
|
131
159
|
*/
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
160
|
+
((function () {
|
|
161
|
+
function is(x, y) {
|
|
162
|
+
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
163
|
+
}
|
|
164
|
+
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
165
|
+
"function" ===
|
|
166
|
+
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
|
|
167
|
+
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
168
|
+
var React = React$1,
|
|
169
|
+
shim = shimExports,
|
|
170
|
+
objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
171
|
+
useSyncExternalStore = shim.useSyncExternalStore,
|
|
172
|
+
useRef = React.useRef,
|
|
173
|
+
useEffect = React.useEffect,
|
|
174
|
+
useMemo = React.useMemo,
|
|
175
|
+
useDebugValue = React.useDebugValue;
|
|
176
|
+
withSelector_development.useSyncExternalStoreWithSelector = function (
|
|
177
|
+
subscribe,
|
|
178
|
+
getSnapshot,
|
|
179
|
+
getServerSnapshot,
|
|
180
|
+
selector,
|
|
181
|
+
isEqual
|
|
182
|
+
) {
|
|
183
|
+
var instRef = useRef(null);
|
|
184
|
+
if (null === instRef.current) {
|
|
185
|
+
var inst = { hasValue: false, value: null };
|
|
186
|
+
instRef.current = inst;
|
|
187
|
+
} else inst = instRef.current;
|
|
188
|
+
instRef = useMemo(
|
|
189
|
+
function () {
|
|
190
|
+
function memoizedSelector(nextSnapshot) {
|
|
191
|
+
if (!hasMemo) {
|
|
192
|
+
hasMemo = true;
|
|
193
|
+
memoizedSnapshot = nextSnapshot;
|
|
194
|
+
nextSnapshot = selector(nextSnapshot);
|
|
195
|
+
if (void 0 !== isEqual && inst.hasValue) {
|
|
196
|
+
var currentSelection = inst.value;
|
|
197
|
+
if (isEqual(currentSelection, nextSnapshot))
|
|
198
|
+
return (memoizedSelection = currentSelection);
|
|
199
|
+
}
|
|
200
|
+
return (memoizedSelection = nextSnapshot);
|
|
201
|
+
}
|
|
202
|
+
currentSelection = memoizedSelection;
|
|
203
|
+
if (objectIs(memoizedSnapshot, nextSnapshot))
|
|
204
|
+
return currentSelection;
|
|
205
|
+
var nextSelection = selector(nextSnapshot);
|
|
206
|
+
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
207
|
+
return (memoizedSnapshot = nextSnapshot), currentSelection;
|
|
208
|
+
memoizedSnapshot = nextSnapshot;
|
|
209
|
+
return (memoizedSelection = nextSelection);
|
|
166
210
|
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
211
|
+
var hasMemo = false,
|
|
212
|
+
memoizedSnapshot,
|
|
213
|
+
memoizedSelection,
|
|
214
|
+
maybeGetServerSnapshot =
|
|
215
|
+
void 0 === getServerSnapshot ? null : getServerSnapshot;
|
|
216
|
+
return [
|
|
217
|
+
function () {
|
|
218
|
+
return memoizedSelector(getSnapshot());
|
|
219
|
+
},
|
|
220
|
+
null === maybeGetServerSnapshot
|
|
221
|
+
? void 0
|
|
222
|
+
: function () {
|
|
223
|
+
return memoizedSelector(maybeGetServerSnapshot());
|
|
224
|
+
}
|
|
225
|
+
];
|
|
226
|
+
},
|
|
227
|
+
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
228
|
+
);
|
|
229
|
+
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
230
|
+
useEffect(
|
|
183
231
|
function () {
|
|
184
|
-
|
|
232
|
+
inst.hasValue = true;
|
|
233
|
+
inst.value = value;
|
|
185
234
|
},
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
useEffect(
|
|
197
|
-
function () {
|
|
198
|
-
inst.hasValue = true;
|
|
199
|
-
inst.value = value;
|
|
200
|
-
},
|
|
201
|
-
[value]
|
|
202
|
-
);
|
|
203
|
-
useDebugValue$1(value);
|
|
204
|
-
return value;
|
|
205
|
-
};
|
|
235
|
+
[value]
|
|
236
|
+
);
|
|
237
|
+
useDebugValue(value);
|
|
238
|
+
return value;
|
|
239
|
+
};
|
|
240
|
+
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
241
|
+
"function" ===
|
|
242
|
+
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
|
|
243
|
+
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
244
|
+
}))();
|
|
206
245
|
|
|
207
246
|
{
|
|
208
|
-
withSelector.exports =
|
|
247
|
+
withSelector.exports = withSelector_development;
|
|
209
248
|
}
|
|
210
249
|
|
|
211
250
|
var withSelectorExports = withSelector.exports;
|
|
212
251
|
var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
|
|
213
252
|
|
|
214
|
-
const { useDebugValue } = React$
|
|
253
|
+
const { useDebugValue } = React$1;
|
|
215
254
|
const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
|
|
216
255
|
let didWarnAboutEqualityFn = false;
|
|
217
256
|
const identity = (arg) => arg;
|
|
@@ -11571,9 +11610,13 @@
|
|
|
11571
11610
|
* See https://github.com/firebase/firebase-js-sdk/issues/6838
|
|
11572
11611
|
*/
|
|
11573
11612
|
const getDefaultsFromEnvVariable = () => {
|
|
11574
|
-
{
|
|
11613
|
+
if (typeof process === 'undefined' || typeof process.env === 'undefined') {
|
|
11575
11614
|
return;
|
|
11576
11615
|
}
|
|
11616
|
+
const defaultsJsonString = process.env.__FIREBASE_DEFAULTS__;
|
|
11617
|
+
if (defaultsJsonString) {
|
|
11618
|
+
return JSON.parse(defaultsJsonString);
|
|
11619
|
+
}
|
|
11577
11620
|
};
|
|
11578
11621
|
const getDefaultsFromCookie = () => {
|
|
11579
11622
|
if (typeof document === 'undefined') {
|
|
@@ -12022,7 +12065,7 @@
|
|
|
12022
12065
|
return false;
|
|
12023
12066
|
}
|
|
12024
12067
|
try {
|
|
12025
|
-
return (Object.prototype.toString.call(
|
|
12068
|
+
return (Object.prototype.toString.call(global.process) === '[object process]');
|
|
12026
12069
|
}
|
|
12027
12070
|
catch (e) {
|
|
12028
12071
|
return false;
|
|
@@ -16699,80 +16742,80 @@
|
|
|
16699
16742
|
}
|
|
16700
16743
|
};
|
|
16701
16744
|
|
|
16702
|
-
const MessageIcon = ({ className, ...props }) => (React$
|
|
16703
|
-
React$
|
|
16704
|
-
const CloseIcon = ({ className, ...props }) => (React$
|
|
16705
|
-
React$
|
|
16706
|
-
React$
|
|
16707
|
-
const CameraIcon = ({ className, ...props }) => (React$
|
|
16708
|
-
React$
|
|
16709
|
-
React$
|
|
16710
|
-
const CircleIcon = ({ className, ...props }) => (React$
|
|
16711
|
-
React$
|
|
16712
|
-
const PencilIcon = ({ className, ...props }) => (React$
|
|
16713
|
-
React$
|
|
16714
|
-
const UndoIcon = ({ className, ...props }) => (React$
|
|
16715
|
-
React$
|
|
16716
|
-
React$
|
|
16717
|
-
const CheckIcon = ({ className, ...props }) => (React$
|
|
16718
|
-
React$
|
|
16719
|
-
const TrashIcon = ({ className, ...props }) => (React$
|
|
16720
|
-
React$
|
|
16721
|
-
React$
|
|
16722
|
-
const EditIcon = ({ className, ...props }) => (React$
|
|
16723
|
-
React$
|
|
16724
|
-
React$
|
|
16725
|
-
const CopyIcon = ({ className, ...props }) => (React$
|
|
16726
|
-
React$
|
|
16727
|
-
React$
|
|
16728
|
-
const InboxIcon = ({ className, ...props }) => (React$
|
|
16729
|
-
React$
|
|
16730
|
-
React$
|
|
16731
|
-
const SendIcon = ({ className, ...props }) => (React$
|
|
16732
|
-
React$
|
|
16733
|
-
React$
|
|
16734
|
-
const PlusIcon = ({ className, ...props }) => (React$
|
|
16735
|
-
React$
|
|
16736
|
-
React$
|
|
16737
|
-
const FilterIcon = ({ className, ...props }) => (React$
|
|
16738
|
-
React$
|
|
16739
|
-
const SquareIcon = ({ className, ...props }) => (React$
|
|
16740
|
-
React$
|
|
16741
|
-
const ArrowRightIcon = ({ className, ...props }) => (React$
|
|
16742
|
-
React$
|
|
16743
|
-
React$
|
|
16744
|
-
const TypeIcon = ({ className, ...props }) => (React$
|
|
16745
|
-
React$
|
|
16746
|
-
React$
|
|
16747
|
-
React$
|
|
16748
|
-
const ArrowLeftIcon = ({ className, ...props }) => (React$
|
|
16749
|
-
React$
|
|
16750
|
-
React$
|
|
16751
|
-
const UserIcon = ({ className, ...props }) => (React$
|
|
16752
|
-
React$
|
|
16753
|
-
React$
|
|
16754
|
-
const ZoomInIcon = ({ className, ...props }) => (React$
|
|
16755
|
-
React$
|
|
16756
|
-
React$
|
|
16757
|
-
React$
|
|
16758
|
-
React$
|
|
16759
|
-
const CalendarIcon = ({ className, ...props }) => (React$
|
|
16760
|
-
React$
|
|
16761
|
-
React$
|
|
16762
|
-
React$
|
|
16763
|
-
React$
|
|
16764
|
-
const ChevronRightIcon = ({ className, ...props }) => (React$
|
|
16765
|
-
React$
|
|
16766
|
-
const DesktopIcon = ({ className, ...props }) => (React$
|
|
16767
|
-
React$
|
|
16768
|
-
React$
|
|
16769
|
-
React$
|
|
16770
|
-
const TabletIcon = ({ className, ...props }) => (React$
|
|
16771
|
-
React$
|
|
16772
|
-
React$
|
|
16773
|
-
const MobileIcon = ({ className, ...props }) => (React$
|
|
16774
|
-
React$
|
|
16775
|
-
React$
|
|
16745
|
+
const MessageIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16746
|
+
React$1.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })));
|
|
16747
|
+
const CloseIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16748
|
+
React$1.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
16749
|
+
React$1.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
|
|
16750
|
+
const CameraIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16751
|
+
React$1.createElement("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
|
|
16752
|
+
React$1.createElement("circle", { cx: "12", cy: "13", r: "4" })));
|
|
16753
|
+
const CircleIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16754
|
+
React$1.createElement("circle", { cx: "12", cy: "12", r: "10" })));
|
|
16755
|
+
const PencilIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16756
|
+
React$1.createElement("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })));
|
|
16757
|
+
const UndoIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16758
|
+
React$1.createElement("polyline", { points: "1 4 1 10 7 10" }),
|
|
16759
|
+
React$1.createElement("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })));
|
|
16760
|
+
const CheckIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16761
|
+
React$1.createElement("polyline", { points: "20 6 9 17 4 12" })));
|
|
16762
|
+
const TrashIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16763
|
+
React$1.createElement("polyline", { points: "3 6 5 6 21 6" }),
|
|
16764
|
+
React$1.createElement("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })));
|
|
16765
|
+
const EditIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16766
|
+
React$1.createElement("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
|
|
16767
|
+
React$1.createElement("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })));
|
|
16768
|
+
const CopyIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16769
|
+
React$1.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
|
|
16770
|
+
React$1.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })));
|
|
16771
|
+
const InboxIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16772
|
+
React$1.createElement("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }),
|
|
16773
|
+
React$1.createElement("path", { d: "M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })));
|
|
16774
|
+
const SendIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16775
|
+
React$1.createElement("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
|
|
16776
|
+
React$1.createElement("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })));
|
|
16777
|
+
const PlusIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16778
|
+
React$1.createElement("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
|
|
16779
|
+
React$1.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })));
|
|
16780
|
+
const FilterIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16781
|
+
React$1.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })));
|
|
16782
|
+
const SquareIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16783
|
+
React$1.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" })));
|
|
16784
|
+
const ArrowRightIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16785
|
+
React$1.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
|
|
16786
|
+
React$1.createElement("polyline", { points: "12 5 19 12 12 19" })));
|
|
16787
|
+
const TypeIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16788
|
+
React$1.createElement("polyline", { points: "4 7 4 4 20 4 20 7" }),
|
|
16789
|
+
React$1.createElement("line", { x1: "9", y1: "20", x2: "15", y2: "20" }),
|
|
16790
|
+
React$1.createElement("line", { x1: "12", y1: "4", x2: "12", y2: "20" })));
|
|
16791
|
+
const ArrowLeftIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16792
|
+
React$1.createElement("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
|
|
16793
|
+
React$1.createElement("polyline", { points: "12 19 5 12 12 5" })));
|
|
16794
|
+
const UserIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16795
|
+
React$1.createElement("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
|
|
16796
|
+
React$1.createElement("circle", { cx: "12", cy: "7", r: "4" })));
|
|
16797
|
+
const ZoomInIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16798
|
+
React$1.createElement("circle", { cx: "11", cy: "11", r: "8" }),
|
|
16799
|
+
React$1.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
|
|
16800
|
+
React$1.createElement("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
|
|
16801
|
+
React$1.createElement("line", { x1: "8", y1: "11", x2: "14", y2: "11" })));
|
|
16802
|
+
const CalendarIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16803
|
+
React$1.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
|
|
16804
|
+
React$1.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
|
|
16805
|
+
React$1.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
|
|
16806
|
+
React$1.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" })));
|
|
16807
|
+
const ChevronRightIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16808
|
+
React$1.createElement("polyline", { points: "9 18 15 12 9 6" })));
|
|
16809
|
+
const DesktopIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16810
|
+
React$1.createElement("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
|
|
16811
|
+
React$1.createElement("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
|
|
16812
|
+
React$1.createElement("line", { x1: "12", y1: "17", x2: "12", y2: "21" })));
|
|
16813
|
+
const TabletIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16814
|
+
React$1.createElement("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
|
|
16815
|
+
React$1.createElement("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })));
|
|
16816
|
+
const MobileIcon = ({ className, ...props }) => (React$1.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16817
|
+
React$1.createElement("rect", { x: "7", y: "2", width: "10", height: "20", rx: "2", ry: "2" }),
|
|
16818
|
+
React$1.createElement("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })));
|
|
16776
16819
|
|
|
16777
16820
|
const tools = [
|
|
16778
16821
|
{ id: 'pen', icon: PencilIcon, label: 'Draw' },
|
|
@@ -16792,19 +16835,19 @@
|
|
|
16792
16835
|
];
|
|
16793
16836
|
const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
16794
16837
|
var _a, _b;
|
|
16795
|
-
const canvasRef = React$
|
|
16796
|
-
const containerRef = React$
|
|
16797
|
-
const [activeTool, setActiveTool] = React$
|
|
16798
|
-
const [activeColor, setActiveColor] = React$
|
|
16799
|
-
const [isDrawing, setIsDrawing] = React$
|
|
16800
|
-
const [currentPath, setCurrentPath] = React$
|
|
16801
|
-
const [annotations, setAnnotations] = React$
|
|
16802
|
-
const [imageLoaded, setImageLoaded] = React$
|
|
16803
|
-
const [startPoint, setStartPoint] = React$
|
|
16804
|
-
const [textInput, setTextInput] = React$
|
|
16805
|
-
const [textPosition, setTextPosition] = React$
|
|
16806
|
-
const imgRef = React$
|
|
16807
|
-
React$
|
|
16838
|
+
const canvasRef = React$1.useRef(null);
|
|
16839
|
+
const containerRef = React$1.useRef(null);
|
|
16840
|
+
const [activeTool, setActiveTool] = React$1.useState('pen');
|
|
16841
|
+
const [activeColor, setActiveColor] = React$1.useState('#EF4444');
|
|
16842
|
+
const [isDrawing, setIsDrawing] = React$1.useState(false);
|
|
16843
|
+
const [currentPath, setCurrentPath] = React$1.useState([]);
|
|
16844
|
+
const [annotations, setAnnotations] = React$1.useState([]);
|
|
16845
|
+
const [imageLoaded, setImageLoaded] = React$1.useState(false);
|
|
16846
|
+
const [startPoint, setStartPoint] = React$1.useState(null);
|
|
16847
|
+
const [textInput, setTextInput] = React$1.useState('');
|
|
16848
|
+
const [textPosition, setTextPosition] = React$1.useState(null);
|
|
16849
|
+
const imgRef = React$1.useRef(null);
|
|
16850
|
+
React$1.useEffect(() => {
|
|
16808
16851
|
const img = new Image();
|
|
16809
16852
|
img.onload = () => {
|
|
16810
16853
|
imgRef.current = img;
|
|
@@ -16812,7 +16855,7 @@
|
|
|
16812
16855
|
};
|
|
16813
16856
|
img.src = screenshot;
|
|
16814
16857
|
}, [screenshot]);
|
|
16815
|
-
React$
|
|
16858
|
+
React$1.useEffect(() => {
|
|
16816
16859
|
if (!imageLoaded || !canvasRef.current || !imgRef.current)
|
|
16817
16860
|
return;
|
|
16818
16861
|
const canvas = canvasRef.current;
|
|
@@ -16839,7 +16882,7 @@
|
|
|
16839
16882
|
canvas.height = height;
|
|
16840
16883
|
redrawCanvas(ctx, width, height);
|
|
16841
16884
|
}, [imageLoaded, annotations]);
|
|
16842
|
-
const redrawCanvas = React$
|
|
16885
|
+
const redrawCanvas = React$1.useCallback((ctx, width, height) => {
|
|
16843
16886
|
if (!imgRef.current)
|
|
16844
16887
|
return;
|
|
16845
16888
|
ctx.clearRect(0, 0, width, height);
|
|
@@ -17070,32 +17113,32 @@
|
|
|
17070
17113
|
const dataUrl = canvas.toDataURL('image/png');
|
|
17071
17114
|
onComplete(annotations, dataUrl);
|
|
17072
17115
|
};
|
|
17073
|
-
return reactDom.createPortal(React$
|
|
17074
|
-
React$
|
|
17075
|
-
React$
|
|
17116
|
+
return reactDom.createPortal(React$1.createElement("div", { className: "fixed inset-0 z-[1000000] bg-black/90 flex flex-col min-h-screen" },
|
|
17117
|
+
React$1.createElement("div", { className: "flex items-center justify-center gap-3 p-4 bg-white/95 backdrop-blur-md border-b border-gray-200 shadow-lg flex-shrink-0" },
|
|
17118
|
+
React$1.createElement("div", { className: "flex items-center gap-1.5 bg-gray-100 p-1.5 rounded-xl" }, tools.map((tool) => (React$1.createElement("button", { key: tool.id, onClick: () => setActiveTool(tool.id), title: tool.label, className: cn('p-2.5 rounded-lg border-none cursor-pointer transition-all', activeTool === tool.id
|
|
17076
17119
|
? 'bg-[#C2D1D9] text-white shadow-lg shadow-[#C2D1D9]/30'
|
|
17077
17120
|
: 'bg-transparent text-gray-600 hover:text-gray-900 hover:bg-white') },
|
|
17078
|
-
React$
|
|
17079
|
-
React$
|
|
17080
|
-
React$
|
|
17121
|
+
React$1.createElement(tool.icon, { className: "w-5 h-5" }))))),
|
|
17122
|
+
React$1.createElement("div", { className: "w-px h-8 bg-gray-300" }),
|
|
17123
|
+
React$1.createElement("div", { className: "flex items-center gap-2 bg-gray-100 p-1.5 rounded-xl" }, colors.map((color) => (React$1.createElement("button", { key: color, onClick: () => setActiveColor(color), className: cn('w-8 h-8 rounded-full border-2 cursor-pointer transition-all', activeColor === color
|
|
17081
17124
|
? 'border-gray-900 scale-110 shadow-lg'
|
|
17082
17125
|
: 'border-white hover:scale-105 shadow-md'), style: { backgroundColor: color } })))),
|
|
17083
|
-
React$
|
|
17084
|
-
React$
|
|
17085
|
-
React$
|
|
17086
|
-
React$
|
|
17087
|
-
React$
|
|
17088
|
-
React$
|
|
17089
|
-
React$
|
|
17090
|
-
React$
|
|
17126
|
+
React$1.createElement("div", { className: "w-px h-8 bg-gray-300" }),
|
|
17127
|
+
React$1.createElement("div", { className: "flex items-center gap-2" },
|
|
17128
|
+
React$1.createElement("button", { onClick: handleUndo, disabled: annotations.length === 0, className: "p-2.5 rounded-xl border-none cursor-pointer transition-all bg-gray-100 text-gray-600 hover:text-gray-900 hover:bg-gray-200 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed", title: "Undo" },
|
|
17129
|
+
React$1.createElement(UndoIcon, { className: "w-5 h-5" })),
|
|
17130
|
+
React$1.createElement("button", { onClick: onCancel, className: "p-2.5 rounded-xl border-none cursor-pointer transition-all bg-red-50 text-red-600 hover:bg-red-100 hover:shadow-md", title: "Cancel" },
|
|
17131
|
+
React$1.createElement(CloseIcon, { className: "w-5 h-5" })),
|
|
17132
|
+
React$1.createElement("button", { onClick: handleComplete, className: "px-4 py-2.5 rounded-xl border-none cursor-pointer transition-all bg-green-500 text-white font-semibold hover:bg-green-600 hover:shadow-lg shadow-md", title: "Done" },
|
|
17133
|
+
React$1.createElement(CheckIcon, { className: "w-5 h-5 inline mr-1" }),
|
|
17091
17134
|
" Done"))),
|
|
17092
|
-
React$
|
|
17093
|
-
imageLoaded && (React$
|
|
17094
|
-
textPosition && (React$
|
|
17135
|
+
React$1.createElement("div", { ref: containerRef, className: "flex-1 flex items-center justify-center p-4 min-h-0" },
|
|
17136
|
+
imageLoaded && (React$1.createElement("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, className: "max-w-full max-h-full rounded-lg shadow-2xl", style: { cursor: activeTool === 'text' ? 'text' : 'crosshair' } })),
|
|
17137
|
+
textPosition && (React$1.createElement("div", { className: "absolute z-10", style: {
|
|
17095
17138
|
left: `calc(50% + ${(textPosition.x - 0.5) * (((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.width) || 0)}px)`,
|
|
17096
17139
|
top: `calc(50% + ${(textPosition.y - 0.5) * (((_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.height) || 0)}px)`,
|
|
17097
17140
|
} },
|
|
17098
|
-
React$
|
|
17141
|
+
React$1.createElement("input", { type: "text", value: textInput, onChange: (e) => setTextInput(e.target.value), onKeyDown: (e) => {
|
|
17099
17142
|
if (e.key === 'Enter')
|
|
17100
17143
|
handleTextSubmit();
|
|
17101
17144
|
if (e.key === 'Escape') {
|
|
@@ -17103,7 +17146,7 @@
|
|
|
17103
17146
|
setTextInput('');
|
|
17104
17147
|
}
|
|
17105
17148
|
}, onBlur: handleTextSubmit, autoFocus: true, placeholder: "Enter text...", className: "px-2 py-1 border-2 rounded text-sm min-w-[150px] focus:outline-none", style: { borderColor: activeColor, color: activeColor } })))),
|
|
17106
|
-
React$
|
|
17149
|
+
React$1.createElement("div", { className: "text-center py-2 text-gray-500 text-xs flex-shrink-0" }, activeTool === 'text'
|
|
17107
17150
|
? 'Click anywhere to add text'
|
|
17108
17151
|
: 'Click and drag to annotate • Use tools above to switch modes')), document.body);
|
|
17109
17152
|
};
|
|
@@ -17111,27 +17154,27 @@
|
|
|
17111
17154
|
const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastClickedElement, lastClickedText, }) => {
|
|
17112
17155
|
var _a, _b;
|
|
17113
17156
|
const { config, currentScreenshot, setCurrentScreenshot, annotations, setAnnotations, clearAnnotations, setIsCapturing, isCapturing, currentUser, setIsOpen, } = useMarkupStore();
|
|
17114
|
-
const [title, setTitle] = React$
|
|
17115
|
-
const [description, setDescription] = React$
|
|
17116
|
-
const [priority, setPriority] = React$
|
|
17117
|
-
const [feedbackType, setFeedbackType] = React$
|
|
17118
|
-
const [currentCopy, setCurrentCopy] = React$
|
|
17119
|
-
const [newCopy, setNewCopy] = React$
|
|
17120
|
-
const [designMockup, setDesignMockup] = React$
|
|
17121
|
-
const [selectedTags, setSelectedTags] = React$
|
|
17122
|
-
const [isAnnotating, setIsAnnotating] = React$
|
|
17123
|
-
const [isSubmitting, setIsSubmitting] = React$
|
|
17124
|
-
const [annotatedScreenshot, setAnnotatedScreenshot] = React$
|
|
17157
|
+
const [title, setTitle] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.title) || "");
|
|
17158
|
+
const [description, setDescription] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.description) || "");
|
|
17159
|
+
const [priority, setPriority] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.priority) || "medium");
|
|
17160
|
+
const [feedbackType, setFeedbackType] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.type) || "general");
|
|
17161
|
+
const [currentCopy, setCurrentCopy] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.currentCopy) || "");
|
|
17162
|
+
const [newCopy, setNewCopy] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.newCopy) || "");
|
|
17163
|
+
const [designMockup, setDesignMockup] = React$1.useState(initialData === null || initialData === void 0 ? void 0 : initialData.designMockup);
|
|
17164
|
+
const [selectedTags, setSelectedTags] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.tags) || []);
|
|
17165
|
+
const [isAnnotating, setIsAnnotating] = React$1.useState(false);
|
|
17166
|
+
const [isSubmitting, setIsSubmitting] = React$1.useState(false);
|
|
17167
|
+
const [annotatedScreenshot, setAnnotatedScreenshot] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.screenshot) || null);
|
|
17125
17168
|
// Screen recording states
|
|
17126
|
-
const [isRecording, setIsRecording] = React$
|
|
17127
|
-
const [recordedVideo, setRecordedVideo] = React$
|
|
17128
|
-
const [recordedBlob, setRecordedBlob] = React$
|
|
17129
|
-
const [isUploadingVideo, setIsUploadingVideo] = React$
|
|
17130
|
-
const [mediaRecorder, setMediaRecorder] = React$
|
|
17131
|
-
const [recordingStream, setRecordingStream] = React$
|
|
17169
|
+
const [isRecording, setIsRecording] = React$1.useState(false);
|
|
17170
|
+
const [recordedVideo, setRecordedVideo] = React$1.useState(initialData === null || initialData === void 0 ? void 0 : initialData.screenRecording);
|
|
17171
|
+
const [recordedBlob, setRecordedBlob] = React$1.useState(null);
|
|
17172
|
+
const [isUploadingVideo, setIsUploadingVideo] = React$1.useState(false);
|
|
17173
|
+
const [mediaRecorder, setMediaRecorder] = React$1.useState(null);
|
|
17174
|
+
const [recordingStream, setRecordingStream] = React$1.useState(null);
|
|
17132
17175
|
// Pin placement states
|
|
17133
|
-
const [isPlacingPin, setIsPlacingPin] = React$
|
|
17134
|
-
const [pinPosition, setPinPosition] = React$
|
|
17176
|
+
const [isPlacingPin, setIsPlacingPin] = React$1.useState(false);
|
|
17177
|
+
const [pinPosition, setPinPosition] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.pinLocation)
|
|
17135
17178
|
? {
|
|
17136
17179
|
x: initialData.pinLocation.x,
|
|
17137
17180
|
y: initialData.pinLocation.y,
|
|
@@ -17140,18 +17183,18 @@
|
|
|
17140
17183
|
}
|
|
17141
17184
|
: null);
|
|
17142
17185
|
// Image change states
|
|
17143
|
-
const [isSelectingImage, setIsSelectingImage] = React$
|
|
17144
|
-
const [originalImageSrc, setOriginalImageSrc] = React$
|
|
17145
|
-
const [originalImageBackground, setOriginalImageBackground] = React$
|
|
17146
|
-
const [replacementImageUrl, setReplacementImageUrl] = React$
|
|
17186
|
+
const [isSelectingImage, setIsSelectingImage] = React$1.useState(false);
|
|
17187
|
+
const [originalImageSrc, setOriginalImageSrc] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.originalImageSrc) || "");
|
|
17188
|
+
const [originalImageBackground, setOriginalImageBackground] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.originalImageBackground) || "");
|
|
17189
|
+
const [replacementImageUrl, setReplacementImageUrl] = React$1.useState((initialData === null || initialData === void 0 ? void 0 : initialData.replacementImageUrl) || "");
|
|
17147
17190
|
// Load initial annotations into store if editing
|
|
17148
|
-
React$
|
|
17191
|
+
React$1.useEffect(() => {
|
|
17149
17192
|
if (initialData === null || initialData === void 0 ? void 0 : initialData.annotations) {
|
|
17150
17193
|
setAnnotations(initialData.annotations);
|
|
17151
17194
|
}
|
|
17152
17195
|
}, [initialData, setAnnotations]);
|
|
17153
17196
|
// Handle pin placement mode
|
|
17154
|
-
React$
|
|
17197
|
+
React$1.useEffect(() => {
|
|
17155
17198
|
if (!isPlacingPin)
|
|
17156
17199
|
return;
|
|
17157
17200
|
// Close widget during pin placement
|
|
@@ -17177,7 +17220,7 @@
|
|
|
17177
17220
|
};
|
|
17178
17221
|
}, [isPlacingPin, setIsOpen]);
|
|
17179
17222
|
// Handle image selection mode for image-change type
|
|
17180
|
-
React$
|
|
17223
|
+
React$1.useEffect(() => {
|
|
17181
17224
|
if (!isSelectingImage)
|
|
17182
17225
|
return;
|
|
17183
17226
|
// Close widget during image selection
|
|
@@ -17249,7 +17292,7 @@
|
|
|
17249
17292
|
};
|
|
17250
17293
|
}, [isSelectingImage, setIsOpen]);
|
|
17251
17294
|
// Auto-capture selected text when component mounts (only if creating new)
|
|
17252
|
-
React$
|
|
17295
|
+
React$1.useEffect(() => {
|
|
17253
17296
|
var _a;
|
|
17254
17297
|
if (initialData)
|
|
17255
17298
|
return;
|
|
@@ -17489,152 +17532,152 @@
|
|
|
17489
17532
|
}
|
|
17490
17533
|
};
|
|
17491
17534
|
if (isAnnotating && currentScreenshot) {
|
|
17492
|
-
return (React$
|
|
17535
|
+
return (React$1.createElement(AnnotationOverlay, { screenshot: currentScreenshot, onComplete: handleAnnotationComplete, onCancel: handleAnnotationCancel }));
|
|
17493
17536
|
}
|
|
17494
17537
|
// Show pin placement overlay
|
|
17495
17538
|
if (isPlacingPin) {
|
|
17496
|
-
return (React$
|
|
17497
|
-
React$
|
|
17498
|
-
React$
|
|
17499
|
-
React$
|
|
17500
|
-
React$
|
|
17501
|
-
React$
|
|
17502
|
-
React$
|
|
17503
|
-
React$
|
|
17504
|
-
React$
|
|
17539
|
+
return (React$1.createElement("div", { className: "fixed top-4 left-1/2 -translate-x-1/2 z-[999999] pointer-events-none" },
|
|
17540
|
+
React$1.createElement("div", { className: "bg-white rounded-2xl shadow-2xl p-6 max-w-md mx-4 text-center border-2 border-orange-500" },
|
|
17541
|
+
React$1.createElement("div", { className: "w-12 h-12 mx-auto mb-3 bg-orange-100 rounded-full flex items-center justify-center" },
|
|
17542
|
+
React$1.createElement("svg", { className: "w-6 h-6 text-orange-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17543
|
+
React$1.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
|
|
17544
|
+
React$1.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" }))),
|
|
17545
|
+
React$1.createElement("h3", { className: "text-lg font-bold text-gray-900 mb-2" }, "Click to Place Pin"),
|
|
17546
|
+
React$1.createElement("p", { className: "text-gray-600 text-sm mb-3" }, "Click anywhere on the page to mark the location"),
|
|
17547
|
+
React$1.createElement("button", { type: "button", onClick: () => setIsPlacingPin(false), className: "px-4 py-2 text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 rounded-lg transition-colors pointer-events-auto" }, "Cancel"))));
|
|
17505
17548
|
}
|
|
17506
17549
|
// Show image selection overlay
|
|
17507
17550
|
if (isSelectingImage) {
|
|
17508
|
-
return (React$
|
|
17509
|
-
React$
|
|
17510
|
-
React$
|
|
17511
|
-
React$
|
|
17512
|
-
React$
|
|
17513
|
-
React$
|
|
17514
|
-
React$
|
|
17515
|
-
React$
|
|
17516
|
-
}
|
|
17517
|
-
return (React$
|
|
17518
|
-
React$
|
|
17519
|
-
React$
|
|
17520
|
-
React$
|
|
17551
|
+
return (React$1.createElement("div", { className: "fixed top-4 left-1/2 -translate-x-1/2 z-[999999] pointer-events-none" },
|
|
17552
|
+
React$1.createElement("div", { className: "bg-white rounded-2xl shadow-2xl p-6 max-w-md mx-4 text-center border-2 border-blue-500" },
|
|
17553
|
+
React$1.createElement("div", { className: "w-12 h-12 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center" },
|
|
17554
|
+
React$1.createElement("svg", { className: "w-6 h-6 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17555
|
+
React$1.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }))),
|
|
17556
|
+
React$1.createElement("h3", { className: "text-lg font-bold text-gray-900 mb-2" }, "Click on an Image"),
|
|
17557
|
+
React$1.createElement("p", { className: "text-gray-600 text-sm mb-3" }, "Click on any image or element with a background image"),
|
|
17558
|
+
React$1.createElement("button", { type: "button", onClick: () => setIsSelectingImage(false), className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors pointer-events-auto" }, "Cancel"))));
|
|
17559
|
+
}
|
|
17560
|
+
return (React$1.createElement("form", { onSubmit: handleSubmit },
|
|
17561
|
+
React$1.createElement("div", { className: "mb-5" },
|
|
17562
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Type"),
|
|
17563
|
+
React$1.createElement("div", { className: "flex gap-2 flex-wrap" }, [
|
|
17521
17564
|
{ id: "general", label: "General" },
|
|
17522
17565
|
{ id: "copy-amendment", label: "Copy Change" },
|
|
17523
17566
|
{ id: "image-change", label: "Image Change" },
|
|
17524
|
-
].map((type) => (React$
|
|
17567
|
+
].map((type) => (React$1.createElement("div", { key: type.id, onClick: () => setFeedbackType(type.id), className: cn("flex-1 py-2 px-3 rounded-xl text-xs font-medium cursor-pointer transition-all text-center", feedbackType === type.id
|
|
17525
17568
|
? "bg-[#C2D1D9] text-black shadow-md shadow-[#C2D1D9]/30"
|
|
17526
17569
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm") }, type.label))))),
|
|
17527
|
-
feedbackType === "image-change" && (React$
|
|
17528
|
-
React$
|
|
17529
|
-
React$
|
|
17530
|
-
React$
|
|
17531
|
-
React$
|
|
17532
|
-
React$
|
|
17570
|
+
feedbackType === "image-change" && (React$1.createElement(React$1.Fragment, null,
|
|
17571
|
+
React$1.createElement("div", { className: "mb-5" },
|
|
17572
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Select Image"),
|
|
17573
|
+
React$1.createElement("button", { type: "button", onClick: () => setIsSelectingImage(true), className: "w-full px-4 py-3 bg-[#c2d1d9] border border-blue-200 rounded-xl text-sm font-medium text-blue-700 hover:bg-blue-100 hover:border-blue-300 transition-all flex items-center justify-center gap-2" },
|
|
17574
|
+
React$1.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17575
|
+
React$1.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" })),
|
|
17533
17576
|
originalImageSrc || originalImageBackground
|
|
17534
17577
|
? "Change Image"
|
|
17535
17578
|
: "Click to Select Image"),
|
|
17536
|
-
(originalImageSrc || originalImageBackground) && (React$
|
|
17537
|
-
React$
|
|
17538
|
-
originalImageSrc ? (React$
|
|
17539
|
-
React$
|
|
17540
|
-
React$
|
|
17579
|
+
(originalImageSrc || originalImageBackground) && (React$1.createElement("div", { className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200" },
|
|
17580
|
+
React$1.createElement("p", { className: "text-xs font-semibold text-gray-700 mb-2" }, "Current Image:"),
|
|
17581
|
+
originalImageSrc ? (React$1.createElement(React$1.Fragment, null,
|
|
17582
|
+
React$1.createElement("img", { src: originalImageSrc, alt: "Selected", className: "w-full h-32 object-cover rounded-lg mb-2" }),
|
|
17583
|
+
React$1.createElement("p", { className: "text-[10px] text-gray-500 font-mono break-all" }, originalImageSrc))) : (React$1.createElement("p", { className: "text-[10px] text-gray-500 font-mono break-all" },
|
|
17541
17584
|
"Background: ",
|
|
17542
17585
|
originalImageBackground))))),
|
|
17543
|
-
React$
|
|
17544
|
-
React$
|
|
17545
|
-
React$
|
|
17546
|
-
replacementImageUrl && (React$
|
|
17547
|
-
React$
|
|
17548
|
-
React$
|
|
17586
|
+
React$1.createElement("div", { className: "mb-5" },
|
|
17587
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Replacement Image URL *"),
|
|
17588
|
+
React$1.createElement("input", { type: "url", placeholder: "https://example.com/new-image.jpg", value: replacementImageUrl, onChange: (e) => setReplacementImageUrl(e.target.value), required: feedbackType === "image-change", className: "w-full px-4 py-3 bg-green-50 border border-green-200 rounded-xl text-sm focus:outline-none focus:bg-white focus:border-green-500 focus:shadow-lg focus:shadow-green-500/10 transition-all" }),
|
|
17589
|
+
replacementImageUrl && (React$1.createElement("div", { className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200" },
|
|
17590
|
+
React$1.createElement("p", { className: "text-xs font-semibold text-gray-700 mb-2" }, "Preview:"),
|
|
17591
|
+
React$1.createElement("img", { src: replacementImageUrl, alt: "Replacement Preview", className: "w-full h-32 object-cover rounded-lg", onError: (e) => {
|
|
17549
17592
|
e.target.style.display = "none";
|
|
17550
17593
|
} })))))),
|
|
17551
|
-
feedbackType === "copy-amendment" && (React$
|
|
17552
|
-
React$
|
|
17553
|
-
React$
|
|
17554
|
-
React$
|
|
17555
|
-
React$
|
|
17556
|
-
React$
|
|
17557
|
-
React$
|
|
17558
|
-
feedbackType !== "copy-amendment" && (React$
|
|
17559
|
-
React$
|
|
17560
|
-
React$
|
|
17561
|
-
feedbackType !== "copy-amendment" && (React$
|
|
17562
|
-
React$
|
|
17563
|
-
React$
|
|
17564
|
-
React$
|
|
17565
|
-
React$
|
|
17566
|
-
React$
|
|
17594
|
+
feedbackType === "copy-amendment" && (React$1.createElement(React$1.Fragment, null,
|
|
17595
|
+
React$1.createElement("div", { className: "mb-5" },
|
|
17596
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Current Copy"),
|
|
17597
|
+
React$1.createElement("textarea", { placeholder: "Select text on page or paste current copy here...", value: currentCopy, onChange: (e) => setCurrentCopy(e.target.value), className: "w-full px-4 py-3 bg-red-50 border border-red-200 rounded-xl text-sm min-h-[80px] resize-y focus:outline-none focus:bg-white focus:border-red-500 focus:shadow-lg focus:shadow-red-500/10 transition-all" })),
|
|
17598
|
+
React$1.createElement("div", { className: "mb-5" },
|
|
17599
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "New Copy *"),
|
|
17600
|
+
React$1.createElement("textarea", { placeholder: "Enter the replacement text...", value: newCopy, onChange: (e) => setNewCopy(e.target.value), required: feedbackType === "copy-amendment", className: "w-full px-4 py-3 bg-green-50 border border-green-200 rounded-xl text-sm min-h-[80px] resize-y focus:outline-none focus:bg-white focus:border-green-500 focus:shadow-lg focus:shadow-green-500/10 transition-all" })))),
|
|
17601
|
+
feedbackType !== "copy-amendment" && (React$1.createElement("div", { className: "mb-5" },
|
|
17602
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Title *"),
|
|
17603
|
+
React$1.createElement("input", { type: "text", placeholder: "Brief description of the issue", value: title, onChange: (e) => setTitle(e.target.value), required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all" }))),
|
|
17604
|
+
feedbackType !== "copy-amendment" && (React$1.createElement("div", { className: "mb-5" },
|
|
17605
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Description"),
|
|
17606
|
+
React$1.createElement("textarea", { placeholder: "Provide more details about the issue...", value: description, onChange: (e) => setDescription(e.target.value), required: true, className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all min-h-[100px] resize-y" }))),
|
|
17607
|
+
React$1.createElement("div", { className: "mb-5" },
|
|
17608
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Priority"),
|
|
17609
|
+
React$1.createElement("div", { className: "flex gap-2" }, Object.keys(priorityColors).map((p) => (React$1.createElement("div", { key: p, onClick: () => setPriority(p), className: cn("flex-1 py-2 px-2 rounded-xl text-xs font-medium cursor-pointer transition-all text-center capitalize border border-transparent", priority === p
|
|
17567
17610
|
? cn(priorityColors[p], "border-transparent shadow-sm")
|
|
17568
17611
|
: "bg-gray-100 text-gray-600 hover:bg-gray-200") }, p))))),
|
|
17569
|
-
annotatedScreenshot || currentScreenshot ? (React$
|
|
17570
|
-
React$
|
|
17571
|
-
React$
|
|
17572
|
-
React$
|
|
17573
|
-
React$
|
|
17574
|
-
React$
|
|
17612
|
+
annotatedScreenshot || currentScreenshot ? (React$1.createElement("div", { className: "relative rounded-xl overflow-hidden shadow-md mb-5 group" },
|
|
17613
|
+
React$1.createElement("img", { src: annotatedScreenshot || currentScreenshot || "", alt: "Screenshot", className: "w-full block" }),
|
|
17614
|
+
React$1.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" }),
|
|
17615
|
+
React$1.createElement("div", { className: "absolute top-3 right-3 flex gap-2" },
|
|
17616
|
+
React$1.createElement("button", { type: "button", onClick: handleEditScreenshot, className: "bg-white text-gray-700 border-none px-3 py-1.5 rounded-lg cursor-pointer text-xs font-medium flex items-center gap-1.5 hover:bg-gray-100 shadow-lg transition-all" },
|
|
17617
|
+
React$1.createElement(EditIcon, { className: "w-3.5 h-3.5" }),
|
|
17575
17618
|
" Edit"),
|
|
17576
|
-
React$
|
|
17577
|
-
React$
|
|
17578
|
-
" Remove")))) : (React$
|
|
17579
|
-
React$
|
|
17580
|
-
React$
|
|
17581
|
-
"Capturing...")) : (React$
|
|
17582
|
-
React$
|
|
17619
|
+
React$1.createElement("button", { type: "button", onClick: handleRemoveScreenshot, className: "bg-white text-red-600 border-none px-3 py-1.5 rounded-lg cursor-pointer text-xs font-medium flex items-center gap-1.5 hover:bg-red-50 shadow-lg transition-all" },
|
|
17620
|
+
React$1.createElement(TrashIcon, { className: "w-3.5 h-3.5" }),
|
|
17621
|
+
" Remove")))) : (React$1.createElement("div", { className: "flex gap-3 mb-5" },
|
|
17622
|
+
React$1.createElement("div", { onClick: handleCaptureScreenshot, className: "flex-1 p-4 bg-white border-2 border-dashed border-gray-300 rounded-xl cursor-pointer flex items-center justify-center gap-2.5 text-gray-600 text-sm font-medium hover:border-indigo-400 hover:text-indigo-600 hover:bg-indigo-50 hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed" }, isCapturing ? (React$1.createElement(React$1.Fragment, null,
|
|
17623
|
+
React$1.createElement("span", { className: "w-5 h-5 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" }),
|
|
17624
|
+
"Capturing...")) : (React$1.createElement(React$1.Fragment, null,
|
|
17625
|
+
React$1.createElement(CameraIcon, { className: "w-5 h-5" }),
|
|
17583
17626
|
" Screenshot"))),
|
|
17584
|
-
React$
|
|
17627
|
+
React$1.createElement("div", { onClick: isRecording
|
|
17585
17628
|
? handleStopRecording
|
|
17586
|
-
: handleStartRecording, className: "flex-1 p-4 bg-white border-2 border-dashed border-gray-300 rounded-xl cursor-pointer flex items-center justify-center gap-2.5 text-gray-600 text-sm font-medium hover:border-red-400 hover:text-red-600 hover:bg-red-50 hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed" }, isRecording ? (React$
|
|
17587
|
-
React$
|
|
17588
|
-
"Stop Recording")) : (React$
|
|
17589
|
-
React$
|
|
17590
|
-
React$
|
|
17591
|
-
React$
|
|
17629
|
+
: handleStartRecording, className: "flex-1 p-4 bg-white border-2 border-dashed border-gray-300 rounded-xl cursor-pointer flex items-center justify-center gap-2.5 text-gray-600 text-sm font-medium hover:border-red-400 hover:text-red-600 hover:bg-red-50 hover:shadow-md transition-all disabled:opacity-50 disabled:cursor-not-allowed" }, isRecording ? (React$1.createElement(React$1.Fragment, null,
|
|
17630
|
+
React$1.createElement("span", { className: "w-2.5 h-2.5 bg-red-600 rounded-sm animate-pulse" }),
|
|
17631
|
+
"Stop Recording")) : (React$1.createElement(React$1.Fragment, null,
|
|
17632
|
+
React$1.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17633
|
+
React$1.createElement("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "2" }),
|
|
17634
|
+
React$1.createElement("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor" })),
|
|
17592
17635
|
"Record Screen"))))),
|
|
17593
|
-
React$
|
|
17594
|
-
React$
|
|
17636
|
+
React$1.createElement("div", { className: "mb-5" },
|
|
17637
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" },
|
|
17595
17638
|
"Pin Location",
|
|
17596
17639
|
" ",
|
|
17597
|
-
!pinPosition && React$
|
|
17598
|
-
pinPosition ? (React$
|
|
17599
|
-
React$
|
|
17600
|
-
React$
|
|
17601
|
-
React$
|
|
17602
|
-
React$
|
|
17603
|
-
React$
|
|
17604
|
-
React$
|
|
17640
|
+
!pinPosition && React$1.createElement("span", { className: "text-red-500" }, "*")),
|
|
17641
|
+
pinPosition ? (React$1.createElement("div", { className: "flex items-center gap-3 p-3 bg-green-50 border border-green-200 rounded-xl" },
|
|
17642
|
+
React$1.createElement("div", { className: "w-8 h-8 rounded-full bg-green-500 flex items-center justify-center shadow-md" },
|
|
17643
|
+
React$1.createElement("svg", { className: "w-4 h-4 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17644
|
+
React$1.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }))),
|
|
17645
|
+
React$1.createElement("div", { className: "flex-1" },
|
|
17646
|
+
React$1.createElement("div", { className: "text-sm font-medium text-gray-800" }, "Pin placed on page"),
|
|
17647
|
+
React$1.createElement("div", { className: "text-xs text-gray-600" },
|
|
17605
17648
|
"Position: (",
|
|
17606
17649
|
Math.round(pinPosition.pageX),
|
|
17607
17650
|
",",
|
|
17608
17651
|
" ",
|
|
17609
17652
|
Math.round(pinPosition.pageY),
|
|
17610
17653
|
")")),
|
|
17611
|
-
React$
|
|
17612
|
-
React$
|
|
17613
|
-
React$
|
|
17614
|
-
React$
|
|
17654
|
+
React$1.createElement("div", { onClick: () => setIsPlacingPin(true), className: "px-3 py-1.5 text-xs font-medium text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 rounded-lg transition-all" }, "Re-place"))) : (React$1.createElement("div", { onClick: () => setIsPlacingPin(true), className: "p-4 bg-white border-2 border-dashed border-orange-300 rounded-xl cursor-pointer flex items-center justify-center gap-2.5 text-orange-600 text-sm font-medium hover:border-orange-400 hover:bg-orange-50 hover:shadow-md transition-all" },
|
|
17655
|
+
React$1.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17656
|
+
React$1.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
|
|
17657
|
+
React$1.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })),
|
|
17615
17658
|
"Click to place pin on page"))),
|
|
17616
|
-
recordedVideo && (React$
|
|
17617
|
-
React$
|
|
17618
|
-
React$
|
|
17619
|
-
React$
|
|
17620
|
-
React$
|
|
17621
|
-
React$
|
|
17622
|
-
designMockup ? (React$
|
|
17623
|
-
React$
|
|
17624
|
-
React$
|
|
17625
|
-
React$
|
|
17626
|
-
React$
|
|
17627
|
-
React$
|
|
17628
|
-
React$
|
|
17659
|
+
recordedVideo && (React$1.createElement("div", { className: "mb-5 relative rounded-xl overflow-hidden shadow-md border border-gray-200" },
|
|
17660
|
+
React$1.createElement("video", { src: recordedVideo, controls: true, className: "w-full h-auto" }),
|
|
17661
|
+
React$1.createElement("button", { type: "button", onClick: handleDeleteRecording, className: "absolute top-2 right-2 bg-white text-red-500 p-1.5 rounded-lg shadow hover:bg-gray-100 cursor-pointer border-none" },
|
|
17662
|
+
React$1.createElement(TrashIcon, { className: "w-3.5 h-3.5" })))),
|
|
17663
|
+
React$1.createElement("div", { className: "mb-5" },
|
|
17664
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Design Mockup"),
|
|
17665
|
+
designMockup ? (React$1.createElement("div", { className: "relative rounded-xl overflow-hidden shadow-md group border border-gray-200" },
|
|
17666
|
+
React$1.createElement("img", { src: designMockup, className: "w-full h-32 object-cover", alt: "Mockup" }),
|
|
17667
|
+
React$1.createElement("button", { type: "button", onClick: () => setDesignMockup(undefined), className: "absolute top-2 right-2 bg-white text-red-500 p-1.5 rounded-lg shadow hover:bg-gray-100 cursor-pointer border-none" },
|
|
17668
|
+
React$1.createElement(TrashIcon, { className: "w-3.5 h-3.5" })))) : (React$1.createElement("div", { className: "border-2 border-dashed border-gray-200 rounded-xl p-4 bg-gray-50 flex items-center justify-center relative hover:bg-white hover:border-[#C2D1D9] transition-all" },
|
|
17669
|
+
React$1.createElement("input", { type: "file", accept: "image/*", onChange: handleMockupUpload, className: "absolute inset-0 opacity-0 cursor-pointer w-full h-full" }),
|
|
17670
|
+
React$1.createElement("span", { className: "text-sm text-gray-500 flex items-center gap-2 font-medium" },
|
|
17671
|
+
React$1.createElement(PlusIcon, { className: "w-4 h-4" }),
|
|
17629
17672
|
" Upload Mockup")))),
|
|
17630
|
-
config.availableTags && config.availableTags.length > 0 && (React$
|
|
17631
|
-
React$
|
|
17632
|
-
React$
|
|
17673
|
+
config.availableTags && config.availableTags.length > 0 && (React$1.createElement("div", { className: "mb-5" },
|
|
17674
|
+
React$1.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Tags"),
|
|
17675
|
+
React$1.createElement("div", { className: "flex flex-wrap gap-2" }, config.availableTags.map((tag) => (React$1.createElement("div", { key: tag, onClick: () => toggleTag(tag), className: cn("px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer transition-all", selectedTags.includes(tag)
|
|
17633
17676
|
? "bg-[#C2D1D9] text-white shadow-md shadow-[#C2D1D9]/30"
|
|
17634
17677
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm") }, tag)))))),
|
|
17635
|
-
React$
|
|
17636
|
-
React$
|
|
17637
|
-
React$
|
|
17678
|
+
React$1.createElement("div", { className: "flex gap-3 mt-6 pt-6 border-t border-gray-100" },
|
|
17679
|
+
React$1.createElement("div", { onClick: onCancel, className: "flex-1 py-3 px-5 rounded-xl text-sm font-semibold cursor-pointer transition-all bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-md text-center" }, ((_a = config.labels) === null || _a === void 0 ? void 0 : _a.cancelButton) || "Cancel"),
|
|
17680
|
+
React$1.createElement("div", { onClick: (e) => {
|
|
17638
17681
|
const isValid = feedbackType === "copy-amendment"
|
|
17639
17682
|
? newCopy.trim()
|
|
17640
17683
|
: title.trim();
|
|
@@ -17658,9 +17701,9 @@
|
|
|
17658
17701
|
: !title.trim()) || isSubmitting
|
|
17659
17702
|
? "#9ca3af"
|
|
17660
17703
|
: "green-500",
|
|
17661
|
-
} }, isSubmitting ? (isUploadingVideo ? (React$
|
|
17662
|
-
React$
|
|
17663
|
-
React$
|
|
17704
|
+
} }, isSubmitting ? (isUploadingVideo ? (React$1.createElement("span", { className: "flex items-center justify-center gap-2" },
|
|
17705
|
+
React$1.createElement("span", { className: "w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
|
|
17706
|
+
React$1.createElement("span", null, "Uploading video..."))) : (React$1.createElement("span", { className: "w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mx-auto block" }))) : (((_b = config.labels) === null || _b === void 0 ? void 0 : _b.submitButton) ||
|
|
17664
17707
|
(initialData ? "Update Feedback" : "Submit Feedback"))))));
|
|
17665
17708
|
};
|
|
17666
17709
|
|
|
@@ -17685,9 +17728,9 @@
|
|
|
17685
17728
|
};
|
|
17686
17729
|
const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
17687
17730
|
const { config } = useMarkupStore();
|
|
17688
|
-
const [statusFilter, setStatusFilter] = React$
|
|
17689
|
-
const [sortBy, setSortBy] = React$
|
|
17690
|
-
const filteredAndSortedItems = React$
|
|
17731
|
+
const [statusFilter, setStatusFilter] = React$1.useState("all");
|
|
17732
|
+
const [sortBy, setSortBy] = React$1.useState("newest");
|
|
17733
|
+
const filteredAndSortedItems = React$1.useMemo(() => {
|
|
17691
17734
|
let items = [...feedbackItems];
|
|
17692
17735
|
// Filter by status
|
|
17693
17736
|
if (statusFilter !== "all") {
|
|
@@ -17718,7 +17761,7 @@
|
|
|
17718
17761
|
return items;
|
|
17719
17762
|
}, [feedbackItems, statusFilter, sortBy]);
|
|
17720
17763
|
// Group items by page URL
|
|
17721
|
-
const groupedByPage = React$
|
|
17764
|
+
const groupedByPage = React$1.useMemo(() => {
|
|
17722
17765
|
const groups = new Map();
|
|
17723
17766
|
filteredAndSortedItems.forEach((item) => {
|
|
17724
17767
|
var _a;
|
|
@@ -17733,44 +17776,44 @@
|
|
|
17733
17776
|
.map(([url, items]) => ({ url, items }))
|
|
17734
17777
|
.sort((a, b) => b.items.length - a.items.length);
|
|
17735
17778
|
}, [filteredAndSortedItems]);
|
|
17736
|
-
return (React$
|
|
17737
|
-
React$
|
|
17738
|
-
React$
|
|
17739
|
-
React$
|
|
17740
|
-
React$
|
|
17741
|
-
React$
|
|
17742
|
-
React$
|
|
17743
|
-
React$
|
|
17744
|
-
React$
|
|
17745
|
-
React$
|
|
17746
|
-
React$
|
|
17747
|
-
React$
|
|
17748
|
-
React$
|
|
17749
|
-
React$
|
|
17750
|
-
React$
|
|
17779
|
+
return (React$1.createElement("div", { className: "flex flex-col h-full" },
|
|
17780
|
+
React$1.createElement("div", { className: "flex gap-2 pb-4 mb-4" },
|
|
17781
|
+
React$1.createElement("div", { className: "relative flex-1" },
|
|
17782
|
+
React$1.createElement(FilterIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" }),
|
|
17783
|
+
React$1.createElement("select", { value: statusFilter, onChange: (e) => setStatusFilter(e.target.value), className: "w-full pl-9 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-medium appearance-none focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all" }, statusOptions$1.map((option) => (React$1.createElement("option", { key: option.value, value: option.value }, option.label))))),
|
|
17784
|
+
React$1.createElement("div", { className: "relative flex-1" },
|
|
17785
|
+
React$1.createElement(CalendarIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" }),
|
|
17786
|
+
React$1.createElement("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "w-full pl-9 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-medium appearance-none focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all" },
|
|
17787
|
+
React$1.createElement("option", { value: "newest" }, "Newest First"),
|
|
17788
|
+
React$1.createElement("option", { value: "oldest" }, "Oldest First"),
|
|
17789
|
+
React$1.createElement("option", { value: "priority" }, "Priority")))),
|
|
17790
|
+
React$1.createElement("div", { className: "flex-1 overflow-y-auto -mx-1 px-1" }, filteredAndSortedItems.length === 0 ? (React$1.createElement("div", { className: "flex flex-col items-center justify-center py-10 text-gray-400" },
|
|
17791
|
+
React$1.createElement(InboxIcon, { className: "w-12 h-12 mb-3 opacity-50" }),
|
|
17792
|
+
React$1.createElement("p", { className: "text-sm font-medium text-gray-500" }, "No feedback items"),
|
|
17793
|
+
React$1.createElement("p", { className: "text-xs text-gray-400 mt-1" }, statusFilter !== "all"
|
|
17751
17794
|
? "Try changing the filter"
|
|
17752
|
-
: "Be the first to add feedback!"))) : (React$
|
|
17753
|
-
React$
|
|
17754
|
-
React$
|
|
17755
|
-
React$
|
|
17795
|
+
: "Be the first to add feedback!"))) : (React$1.createElement("div", { className: "flex flex-col gap-4" }, groupedByPage.map((group) => (React$1.createElement("div", { key: group.url, className: "space-y-3" },
|
|
17796
|
+
React$1.createElement("div", { className: "pb-2 ml-2 border-b border-gray-200" },
|
|
17797
|
+
React$1.createElement("h3", { className: "text-xs font-medium text-gray-500" }, group.url)),
|
|
17798
|
+
React$1.createElement("div", { className: "flex flex-col gap-3 pl-2" }, group.items.map((item) => {
|
|
17756
17799
|
var _a;
|
|
17757
|
-
return (React$
|
|
17758
|
-
React$
|
|
17759
|
-
React$
|
|
17760
|
-
React$
|
|
17761
|
-
((_a = item.pageMetadata) === null || _a === void 0 ? void 0 : _a.deviceType) && (React$
|
|
17762
|
-
item.pageMetadata.deviceType === 'desktop' && (React$
|
|
17763
|
-
item.pageMetadata.deviceType === 'tablet' && (React$
|
|
17764
|
-
item.pageMetadata.deviceType === 'mobile' && (React$
|
|
17765
|
-
React$
|
|
17766
|
-
item.description && (React$
|
|
17767
|
-
React$
|
|
17768
|
-
React$
|
|
17769
|
-
React$
|
|
17770
|
-
item.type && (React$
|
|
17771
|
-
React$
|
|
17800
|
+
return (React$1.createElement("div", { key: item.id, onClick: () => onSelectFeedback(item), className: "w-full p-4 bg-white rounded-xl border border-gray-200 cursor-pointer text-left transition-all hover:shadow-lg hover:shadow-gray-200 hover:border-gray-300" },
|
|
17801
|
+
React$1.createElement("div", { className: "flex items-start justify-between gap-2 mb-2" },
|
|
17802
|
+
React$1.createElement("div", { className: "flex items-center gap-2 flex-1" },
|
|
17803
|
+
React$1.createElement("h4", { className: "text-sm font-semibold text-gray-900 m-0 flex-1 line-clamp-2" }, item.title),
|
|
17804
|
+
((_a = item.pageMetadata) === null || _a === void 0 ? void 0 : _a.deviceType) && (React$1.createElement("div", { className: "flex-shrink-0" },
|
|
17805
|
+
item.pageMetadata.deviceType === 'desktop' && (React$1.createElement(DesktopIcon, { className: "w-4 h-4 text-gray-400" })),
|
|
17806
|
+
item.pageMetadata.deviceType === 'tablet' && (React$1.createElement(TabletIcon, { className: "w-4 h-4 text-gray-400" })),
|
|
17807
|
+
item.pageMetadata.deviceType === 'mobile' && (React$1.createElement(MobileIcon, { className: "w-4 h-4 text-gray-400" }))))),
|
|
17808
|
+
React$1.createElement(ChevronRightIcon, { className: "w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" })),
|
|
17809
|
+
item.description && (React$1.createElement("p", { className: "text-xs text-gray-600 m-0 mb-3 line-clamp-2" }, item.description)),
|
|
17810
|
+
React$1.createElement("div", { className: "flex items-center gap-2 flex-wrap" },
|
|
17811
|
+
React$1.createElement("span", { className: cn("px-2.5 py-1 rounded-lg text-[10px] font-semibold uppercase tracking-wide", statusColors[item.status]) }, item.status.replace("-", " ")),
|
|
17812
|
+
React$1.createElement("span", { className: cn("px-2.5 py-1 rounded-lg text-[10px] font-semibold uppercase tracking-wide", priorityColors$1[item.priority]) }, item.priority),
|
|
17813
|
+
item.type && (React$1.createElement("span", { className: "px-2.5 py-1 rounded-lg text-[10px] font-medium bg-gray-100 text-gray-700" }, item.type)),
|
|
17814
|
+
React$1.createElement("span", { className: "ml-auto text-[10px] text-gray-400" }, formatDate(item.createdAt)))));
|
|
17772
17815
|
})))))))),
|
|
17773
|
-
feedbackItems.length > 0 && (React$
|
|
17816
|
+
feedbackItems.length > 0 && (React$1.createElement("div", { className: "pt-3 mt-3 border-t border-gray-200 text-xs text-gray-400 text-center" },
|
|
17774
17817
|
"Showing ",
|
|
17775
17818
|
filteredAndSortedItems.length,
|
|
17776
17819
|
" of",
|
|
@@ -39690,6 +39733,9 @@
|
|
|
39690
39733
|
* VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAIN, etc.
|
|
39691
39734
|
*/
|
|
39692
39735
|
const getDefaultFirebaseConfig = () => {
|
|
39736
|
+
var _a;
|
|
39737
|
+
// Check if running in browser without env vars (UMD bundle)
|
|
39738
|
+
typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'production';
|
|
39693
39739
|
// Try to get from environment variables (works in build time)
|
|
39694
39740
|
const config = {
|
|
39695
39741
|
apiKey: 'AIzaSyD2rQ-HOEU4VW5h5CGmKQK9FcBDp2bi98g',
|
|
@@ -40014,19 +40060,19 @@
|
|
|
40014
40060
|
const FeedbackDetail = ({ feedback: initialFeedback, onBack, onDelete, onUpdate, }) => {
|
|
40015
40061
|
var _a, _b, _c;
|
|
40016
40062
|
const { config, updateFeedback: updateFeedback$1, currentUser } = useMarkupStore();
|
|
40017
|
-
const [feedback, setFeedback] = React$
|
|
40018
|
-
const [newComment, setNewComment] = React$
|
|
40019
|
-
const [isAddingComment, setIsAddingComment] = React$
|
|
40020
|
-
const [showFullScreenshot, setShowFullScreenshot] = React$
|
|
40021
|
-
const [copied, setCopied] = React$
|
|
40022
|
-
const [isEditing, setIsEditing] = React$
|
|
40023
|
-
const [showDeleteConfirm, setShowDeleteConfirm] = React$
|
|
40063
|
+
const [feedback, setFeedback] = React$1.useState(initialFeedback);
|
|
40064
|
+
const [newComment, setNewComment] = React$1.useState("");
|
|
40065
|
+
const [isAddingComment, setIsAddingComment] = React$1.useState(false);
|
|
40066
|
+
const [showFullScreenshot, setShowFullScreenshot] = React$1.useState(false);
|
|
40067
|
+
const [copied, setCopied] = React$1.useState(false);
|
|
40068
|
+
const [isEditing, setIsEditing] = React$1.useState(false);
|
|
40069
|
+
const [showDeleteConfirm, setShowDeleteConfirm] = React$1.useState(false);
|
|
40024
40070
|
// Feature 2 & 5 states
|
|
40025
|
-
const [showReplay, setShowReplay] = React$
|
|
40026
|
-
const [showOverlay, setShowOverlay] = React$
|
|
40027
|
-
const [overlayOpacity, setOverlayOpacity] = React$
|
|
40071
|
+
const [showReplay, setShowReplay] = React$1.useState(false);
|
|
40072
|
+
const [showOverlay, setShowOverlay] = React$1.useState(false);
|
|
40073
|
+
const [overlayOpacity, setOverlayOpacity] = React$1.useState(50);
|
|
40028
40074
|
// Parse session actions
|
|
40029
|
-
const sessionActions = React$
|
|
40075
|
+
const sessionActions = React$1.useMemo(() => {
|
|
40030
40076
|
if (!feedback.sessionEvents)
|
|
40031
40077
|
return null;
|
|
40032
40078
|
try {
|
|
@@ -40078,13 +40124,13 @@
|
|
|
40078
40124
|
setIsEditing(false);
|
|
40079
40125
|
};
|
|
40080
40126
|
if (isEditing) {
|
|
40081
|
-
return (React$
|
|
40082
|
-
React$
|
|
40083
|
-
React$
|
|
40084
|
-
React$
|
|
40127
|
+
return (React$1.createElement("div", { className: "flex flex-col h-full" },
|
|
40128
|
+
React$1.createElement("div", { className: "flex items-center justify-between p-5 pb-3 mb-3 border-b border-gray-200" },
|
|
40129
|
+
React$1.createElement("div", { onClick: () => setIsEditing(false), className: "flex items-center gap-1.5 text-sm text-gray-600 bg-transparent border-none cursor-pointer hover:text-gray-900 transition-colors" },
|
|
40130
|
+
React$1.createElement(ArrowLeftIcon, { className: "w-4 h-4" }),
|
|
40085
40131
|
"Cancel Editing")),
|
|
40086
|
-
React$
|
|
40087
|
-
React$
|
|
40132
|
+
React$1.createElement("div", { className: "flex-1 overflow-y-auto px-5" },
|
|
40133
|
+
React$1.createElement(FeedbackForm, { initialData: feedback, onSubmit: handleEditSubmit, onCancel: () => setIsEditing(false) }))));
|
|
40088
40134
|
}
|
|
40089
40135
|
const handleCopy = async () => {
|
|
40090
40136
|
const feedbackText = `
|
|
@@ -40198,37 +40244,37 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40198
40244
|
setShowDeleteConfirm(false);
|
|
40199
40245
|
};
|
|
40200
40246
|
const handleCancelDelete = () => setShowDeleteConfirm(false);
|
|
40201
|
-
return (React$
|
|
40202
|
-
React$
|
|
40203
|
-
React$
|
|
40204
|
-
React$
|
|
40247
|
+
return (React$1.createElement("div", { className: "flex flex-col h-full px-5 overflow-y-auto" },
|
|
40248
|
+
React$1.createElement("div", { className: "flex items-center justify-between pb-3 mb-3 border-b border-gray-200" },
|
|
40249
|
+
React$1.createElement("div", { onClick: onBack, className: "flex items-center gap-1.5 text-sm text-gray-600 bg-transparent border-none cursor-pointer hover:text-gray-900 transition-colors" },
|
|
40250
|
+
React$1.createElement(ArrowLeftIcon, { className: "w-4 h-4" }),
|
|
40205
40251
|
"Back"),
|
|
40206
|
-
React$
|
|
40207
|
-
React$
|
|
40208
|
-
React$
|
|
40209
|
-
"Copied!")) : (React$
|
|
40210
|
-
React$
|
|
40211
|
-
canEdit && (React$
|
|
40212
|
-
React$
|
|
40213
|
-
canDelete && onDelete && (React$
|
|
40214
|
-
React$
|
|
40215
|
-
showDeleteConfirm && (React$
|
|
40216
|
-
React$
|
|
40217
|
-
React$
|
|
40218
|
-
React$
|
|
40219
|
-
React$
|
|
40220
|
-
React$
|
|
40221
|
-
React$
|
|
40222
|
-
React$
|
|
40223
|
-
((_b = feedback.pageMetadata) === null || _b === void 0 ? void 0 : _b.deviceType) && (React$
|
|
40252
|
+
React$1.createElement("div", { className: "flex items-center gap-2" },
|
|
40253
|
+
React$1.createElement("div", { onClick: handleCopy, className: "flex items-center gap-1.5 text-sm text-gray-600 bg-transparent border-none cursor-pointer hover:text-gray-900 transition-colors" }, copied ? (React$1.createElement(React$1.Fragment, null,
|
|
40254
|
+
React$1.createElement(CheckIcon, { className: "w-4 h-4" }),
|
|
40255
|
+
"Copied!")) : (React$1.createElement(React$1.Fragment, null,
|
|
40256
|
+
React$1.createElement(CopyIcon, { className: "w-4 h-4" })))),
|
|
40257
|
+
canEdit && (React$1.createElement("div", { onClick: () => setIsEditing(true), className: "flex items-center gap-1.5 text-sm text-gray-600 bg-transparent border-none cursor-pointer hover:text-gray-900 transition-colors" },
|
|
40258
|
+
React$1.createElement(EditIcon, { className: "w-4 h-4" }))),
|
|
40259
|
+
canDelete && onDelete && (React$1.createElement("div", { onClick: handleDelete, className: "flex items-center gap-1.5 text-sm text-red-600 bg-transparent border-none cursor-pointer hover:text-red-700 transition-colors" },
|
|
40260
|
+
React$1.createElement(TrashIcon, { className: "w-4 h-4" }))))),
|
|
40261
|
+
showDeleteConfirm && (React$1.createElement("div", { className: "mb-3 p-2 rounded-xl border border-red-200 bg-red-50 text-red-800 flex items-center gap-3" },
|
|
40262
|
+
React$1.createElement("div", { className: "flex-1 text-xs font-medium" }, "Delete this feedback?"),
|
|
40263
|
+
React$1.createElement("div", { onClick: handleCancelDelete, className: "px-2 py-1.5 text-xs font-semibold text-red-700 rounded-lg hover:bg-red-100 cursor-pointer" }, "Cancel"),
|
|
40264
|
+
React$1.createElement("div", { onClick: handleConfirmDelete, className: "px-2 py-1.5 text-xs font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 cursor-pointer" }, "Delete"))),
|
|
40265
|
+
React$1.createElement("div", { className: "flex-1 pr-1" },
|
|
40266
|
+
React$1.createElement("div", { className: "mb-4" },
|
|
40267
|
+
React$1.createElement("div", { className: "flex items-start gap-2 mb-2" },
|
|
40268
|
+
React$1.createElement("h3", { className: "text-base font-semibold text-gray-900 m-0 flex-1" }, feedback.title),
|
|
40269
|
+
((_b = feedback.pageMetadata) === null || _b === void 0 ? void 0 : _b.deviceType) && (React$1.createElement("div", { className: "flex-shrink-0 mt-0.5" },
|
|
40224
40270
|
feedback.pageMetadata.deviceType ===
|
|
40225
|
-
"desktop" && (React$
|
|
40271
|
+
"desktop" && (React$1.createElement(DesktopIcon, { className: "w-5 h-5 text-gray-500", title: "Desktop" })),
|
|
40226
40272
|
feedback.pageMetadata.deviceType ===
|
|
40227
|
-
"tablet" && (React$
|
|
40273
|
+
"tablet" && (React$1.createElement(TabletIcon, { className: "w-5 h-5 text-gray-500", title: "Tablet" })),
|
|
40228
40274
|
feedback.pageMetadata.deviceType ===
|
|
40229
|
-
"mobile" && (React$
|
|
40230
|
-
React$
|
|
40231
|
-
feedback.type && (React$
|
|
40275
|
+
"mobile" && (React$1.createElement(MobileIcon, { className: "w-5 h-5 text-gray-500", title: "Mobile" }))))),
|
|
40276
|
+
React$1.createElement("div", { className: "flex items-center gap-2 flex-wrap" },
|
|
40277
|
+
feedback.type && (React$1.createElement("span", { className: cn("px-2 py-0.5 rounded-full text-[10px] font-medium uppercase", feedback.type === "copy-amendment"
|
|
40232
40278
|
? "bg-brand-blue/50 text-gray-800"
|
|
40233
40279
|
: feedback.type === "bug"
|
|
40234
40280
|
? "bg-brand-pink/30 text-gray-800"
|
|
@@ -40237,136 +40283,136 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40237
40283
|
: "bg-gray-100 text-gray-700") }, feedback.type === "copy-amendment"
|
|
40238
40284
|
? "Copy"
|
|
40239
40285
|
: "General")),
|
|
40240
|
-
React$
|
|
40241
|
-
React$
|
|
40242
|
-
!isReadOnly && (React$
|
|
40243
|
-
React$
|
|
40244
|
-
React$
|
|
40286
|
+
React$1.createElement("span", { className: cn("px-2 py-0.5 rounded-full text-[10px] font-medium uppercase", priorityColors[feedback.priority]) }, feedback.priority),
|
|
40287
|
+
React$1.createElement("span", { className: "text-xs text-gray-400" }, formatDate(feedback.createdAt)))),
|
|
40288
|
+
!isReadOnly && (React$1.createElement("div", { className: "mb-4" },
|
|
40289
|
+
React$1.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Status"),
|
|
40290
|
+
React$1.createElement("div", { className: "flex gap-1.5" }, statusOptions.map((option) => (React$1.createElement("div", { key: option.value, onClick: () => handleStatusChange(option.value), className: cn("flex-1 py-1.5 px-2 rounded-lg text-[10px] font-medium border cursor-pointer transition-all text-center", feedback.status === option.value
|
|
40245
40291
|
? cn(option.color, "border-transparent")
|
|
40246
40292
|
: "bg-white text-gray-600 border-gray-200 hover:border-brand-blue") }, option.label)))))),
|
|
40247
|
-
feedback.screenshot && (React$
|
|
40248
|
-
React$
|
|
40249
|
-
React$
|
|
40250
|
-
React$
|
|
40251
|
-
React$
|
|
40252
|
-
React$
|
|
40253
|
-
React$
|
|
40254
|
-
feedback.screenRecording && (React$
|
|
40255
|
-
React$
|
|
40256
|
-
React$
|
|
40257
|
-
React$
|
|
40258
|
-
(feedback.designMockup || feedback.sessionEvents) && (React$
|
|
40259
|
-
feedback.sessionEvents && (React$
|
|
40260
|
-
feedback.designMockup && (React$
|
|
40261
|
-
feedback.type === "copy-amendment" && (React$
|
|
40262
|
-
feedback.currentCopy && (React$
|
|
40263
|
-
React$
|
|
40264
|
-
React$
|
|
40265
|
-
React$
|
|
40266
|
-
feedback.newCopy && (React$
|
|
40267
|
-
React$
|
|
40268
|
-
React$
|
|
40269
|
-
React$
|
|
40270
|
-
feedback.type === "image-change" && (React$
|
|
40293
|
+
feedback.screenshot && (React$1.createElement("div", { className: "mb-5" },
|
|
40294
|
+
React$1.createElement("label", { className: "block text-xs font-semibold text-gray-800 mb-2 uppercase tracking-wide" }, "Screenshot"),
|
|
40295
|
+
React$1.createElement("div", { className: "relative rounded-xl overflow-hidden shadow-md cursor-pointer group", onClick: () => setShowFullScreenshot(true) },
|
|
40296
|
+
React$1.createElement("img", { src: feedback.screenshot, alt: "Feedback screenshot", className: "w-full block" }),
|
|
40297
|
+
React$1.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-all flex items-center justify-center" },
|
|
40298
|
+
React$1.createElement("div", { className: "bg-white rounded-full p-3 shadow-xl transform scale-90 group-hover:scale-100 transition-transform" },
|
|
40299
|
+
React$1.createElement(ZoomInIcon, { className: "w-6 h-6 text-gray-700" })))))),
|
|
40300
|
+
feedback.screenRecording && (React$1.createElement("div", { className: "mb-5" },
|
|
40301
|
+
React$1.createElement("label", { className: "block text-xs font-semibold text-gray-800 mb-2 uppercase tracking-wide" }, "Screen Recording"),
|
|
40302
|
+
React$1.createElement("div", { className: "relative rounded-xl overflow-hidden shadow-md border border-gray-200" },
|
|
40303
|
+
React$1.createElement("video", { src: feedback.screenRecording, controls: true, className: "w-full h-auto bg-black" })))),
|
|
40304
|
+
(feedback.designMockup || feedback.sessionEvents) && (React$1.createElement("div", { className: "flex gap-2 mb-5" },
|
|
40305
|
+
feedback.sessionEvents && (React$1.createElement("div", { onClick: () => setShowReplay(true), className: "flex-1 bg-gray-100 text-gray-700 py-2.5 rounded-xl text-xs font-semibold hover:bg-gray-200 transition-colors flex items-center justify-center gap-2 border border-gray-200 cursor-pointer" }, "Play Session")),
|
|
40306
|
+
feedback.designMockup && (React$1.createElement("div", { onClick: () => setShowOverlay(true), className: "flex-1 bg-gray-100 text-gray-700 py-2.5 rounded-xl text-xs font-semibold hover:bg-gray-200 transition-colors flex items-center justify-center gap-2 border border-gray-200 cursor-pointer" }, "Overlay Mockup")))),
|
|
40307
|
+
feedback.type === "copy-amendment" && (React$1.createElement(React$1.Fragment, null,
|
|
40308
|
+
feedback.currentCopy && (React$1.createElement("div", { className: "mb-4" },
|
|
40309
|
+
React$1.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Current Copy"),
|
|
40310
|
+
React$1.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-3" },
|
|
40311
|
+
React$1.createElement("p", { className: "text-sm text-gray-800 m-0 whitespace-pre-wrap" }, feedback.currentCopy)))),
|
|
40312
|
+
feedback.newCopy && (React$1.createElement("div", { className: "mb-4" },
|
|
40313
|
+
React$1.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "New Copy"),
|
|
40314
|
+
React$1.createElement("div", { className: "bg-green-50 border border-green-200 rounded-lg p-3" },
|
|
40315
|
+
React$1.createElement("p", { className: "text-sm text-gray-800 m-0 whitespace-pre-wrap" }, feedback.newCopy)))))),
|
|
40316
|
+
feedback.type === "image-change" && (React$1.createElement(React$1.Fragment, null,
|
|
40271
40317
|
(feedback.originalImageSrc ||
|
|
40272
|
-
feedback.originalImageBackground) && (React$
|
|
40273
|
-
React$
|
|
40274
|
-
React$
|
|
40275
|
-
React$
|
|
40276
|
-
React$
|
|
40318
|
+
feedback.originalImageBackground) && (React$1.createElement("div", { className: "mb-4" },
|
|
40319
|
+
React$1.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Current Image"),
|
|
40320
|
+
React$1.createElement("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-3" }, feedback.originalImageSrc ? (React$1.createElement(React$1.Fragment, null,
|
|
40321
|
+
React$1.createElement("img", { src: feedback.originalImageSrc, alt: "Original", className: "w-full h-48 object-cover rounded-lg mb-2" }),
|
|
40322
|
+
React$1.createElement("p", { className: "text-[10px] text-gray-600 font-mono break-all" }, feedback.originalImageSrc))) : (React$1.createElement("p", { className: "text-[10px] text-gray-600 font-mono break-all" },
|
|
40277
40323
|
"Background Image:",
|
|
40278
40324
|
" ",
|
|
40279
40325
|
feedback.originalImageBackground))))),
|
|
40280
|
-
feedback.replacementImageUrl && (React$
|
|
40281
|
-
React$
|
|
40282
|
-
React$
|
|
40283
|
-
React$
|
|
40284
|
-
React$
|
|
40285
|
-
feedback.description && (React$
|
|
40286
|
-
React$
|
|
40287
|
-
React$
|
|
40288
|
-
feedback.tags && feedback.tags.length > 0 && (React$
|
|
40289
|
-
React$
|
|
40290
|
-
React$
|
|
40291
|
-
feedback.pageMetadata && (React$
|
|
40292
|
-
React$
|
|
40293
|
-
React$
|
|
40294
|
-
React$
|
|
40295
|
-
React$
|
|
40326
|
+
feedback.replacementImageUrl && (React$1.createElement("div", { className: "mb-4" },
|
|
40327
|
+
React$1.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Replacement Image"),
|
|
40328
|
+
React$1.createElement("div", { className: "bg-green-50 border border-green-200 rounded-lg p-3" },
|
|
40329
|
+
React$1.createElement("img", { src: feedback.replacementImageUrl, alt: "Replacement", className: "w-full h-48 object-cover rounded-lg mb-2" }),
|
|
40330
|
+
React$1.createElement("p", { className: "text-[10px] text-gray-600 font-mono break-all" }, feedback.replacementImageUrl)))))),
|
|
40331
|
+
feedback.description && (React$1.createElement("div", { className: "mb-4" },
|
|
40332
|
+
React$1.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Description"),
|
|
40333
|
+
React$1.createElement("p", { className: "text-sm text-gray-600 m-0 whitespace-pre-wrap" }, feedback.description))),
|
|
40334
|
+
feedback.tags && feedback.tags.length > 0 && (React$1.createElement("div", { className: "mb-4" },
|
|
40335
|
+
React$1.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Tags"),
|
|
40336
|
+
React$1.createElement("div", { className: "flex flex-wrap gap-1.5" }, feedback.tags.map((tag) => (React$1.createElement("span", { key: tag, className: "px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs" }, tag)))))),
|
|
40337
|
+
feedback.pageMetadata && (React$1.createElement("div", { className: "mb-4 p-2.5 bg-gray-50 rounded-lg" },
|
|
40338
|
+
React$1.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Page Info"),
|
|
40339
|
+
React$1.createElement("div", { className: "text-xs text-gray-500 space-y-1" },
|
|
40340
|
+
React$1.createElement("div", { className: "truncate" },
|
|
40341
|
+
React$1.createElement("span", { className: "font-medium" }, "URL:"),
|
|
40296
40342
|
" ",
|
|
40297
40343
|
feedback.pageMetadata.url),
|
|
40298
|
-
feedback.pageMetadata.componentName && (React$
|
|
40299
|
-
React$
|
|
40344
|
+
feedback.pageMetadata.componentName && (React$1.createElement("div", { className: "truncate" },
|
|
40345
|
+
React$1.createElement("span", { className: "font-medium" }, "Component:"),
|
|
40300
40346
|
" ",
|
|
40301
|
-
React$
|
|
40302
|
-
feedback.pageMetadata.elementInfo && (React$
|
|
40303
|
-
React$
|
|
40347
|
+
React$1.createElement("code", { className: "bg-gray-200 px-1.5 py-0.5 rounded text-xs font-mono text-gray-800" }, feedback.pageMetadata.componentName))),
|
|
40348
|
+
feedback.pageMetadata.elementInfo && (React$1.createElement("div", { className: "truncate" },
|
|
40349
|
+
React$1.createElement("span", { className: "font-medium" }, "Element:"),
|
|
40304
40350
|
" ",
|
|
40305
|
-
React$
|
|
40306
|
-
React$
|
|
40307
|
-
React$
|
|
40351
|
+
React$1.createElement("code", { className: "bg-blue-50 px-1.5 py-0.5 rounded text-xs font-mono text-blue-800" }, feedback.pageMetadata.elementInfo))),
|
|
40352
|
+
React$1.createElement("div", null,
|
|
40353
|
+
React$1.createElement("span", { className: "font-medium" }, "Screen:"),
|
|
40308
40354
|
" ",
|
|
40309
40355
|
feedback.pageMetadata.screenWidth,
|
|
40310
40356
|
"x",
|
|
40311
40357
|
feedback.pageMetadata.screenHeight),
|
|
40312
|
-
React$
|
|
40313
|
-
React$
|
|
40358
|
+
React$1.createElement("div", null,
|
|
40359
|
+
React$1.createElement("span", { className: "font-medium" }, "User Agent:"),
|
|
40314
40360
|
" ",
|
|
40315
40361
|
feedback.pageMetadata.userAgent)))),
|
|
40316
|
-
React$
|
|
40317
|
-
React$
|
|
40362
|
+
React$1.createElement("div", { className: "mb-4" },
|
|
40363
|
+
React$1.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-2" },
|
|
40318
40364
|
"Comments (",
|
|
40319
40365
|
((_c = feedback.comments) === null || _c === void 0 ? void 0 : _c.length) || 0,
|
|
40320
40366
|
")"),
|
|
40321
|
-
feedback.comments && feedback.comments.length > 0 && (React$
|
|
40322
|
-
React$
|
|
40323
|
-
React$
|
|
40324
|
-
React$
|
|
40325
|
-
React$
|
|
40326
|
-
React$
|
|
40327
|
-
React$
|
|
40328
|
-
React$
|
|
40329
|
-
React$
|
|
40367
|
+
feedback.comments && feedback.comments.length > 0 && (React$1.createElement("div", { className: "space-y-3 mb-4" }, feedback.comments.map((comment) => (React$1.createElement("div", { key: comment.id, className: "p-3 bg-white border border-gray-200 rounded-xl shadow-sm" },
|
|
40368
|
+
React$1.createElement("div", { className: "flex items-center gap-2 mb-2" },
|
|
40369
|
+
React$1.createElement("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-[#C2D1D9] to-purple-500 flex items-center justify-center shadow-md" },
|
|
40370
|
+
React$1.createElement(UserIcon, { className: "w-4 h-4 text-white" })),
|
|
40371
|
+
React$1.createElement("span", { className: "text-xs font-semibold text-gray-900" }, comment.createdBy.name),
|
|
40372
|
+
React$1.createElement("span", { className: "text-[10px] text-gray-500 font-medium" }, formatDate(comment.createdAt))),
|
|
40373
|
+
React$1.createElement("p", { className: "text-sm text-gray-700 m-0 ml-10 whitespace-pre-wrap" }, comment.content || comment.text)))))),
|
|
40374
|
+
React$1.createElement("div", { className: "flex gap-2" },
|
|
40375
|
+
React$1.createElement("input", { type: "text", value: newComment, onChange: (e) => setNewComment(e.target.value), placeholder: "Add a comment...", className: "flex-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white focus:border-[#C2D1D9] focus:shadow-lg focus:shadow-[#C2D1D9]/10 transition-all", onKeyDown: (e) => {
|
|
40330
40376
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
40331
40377
|
e.preventDefault();
|
|
40332
40378
|
handleAddComment();
|
|
40333
40379
|
}
|
|
40334
40380
|
} }),
|
|
40335
|
-
React$
|
|
40336
|
-
React$
|
|
40381
|
+
React$1.createElement("button", { onClick: handleAddComment, disabled: !newComment.trim() || isAddingComment, className: "p-2.5 rounded-xl border-none text-white cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:shadow-lg transition-all", style: { backgroundColor: "var(--markup-primary)" } },
|
|
40382
|
+
React$1.createElement(SendIcon, { className: "w-5 h-5" }))))),
|
|
40337
40383
|
showFullScreenshot &&
|
|
40338
40384
|
feedback.screenshot &&
|
|
40339
|
-
reactDom.createPortal(React$
|
|
40340
|
-
React$
|
|
40341
|
-
React$
|
|
40342
|
-
React$
|
|
40385
|
+
reactDom.createPortal(React$1.createElement("div", { className: "fixed inset-0 bg-black/90 backdrop-blur-sm z-[2147483647] flex items-center justify-center p-10 animate-in fade-in duration-200", onClick: () => setShowFullScreenshot(false) },
|
|
40386
|
+
React$1.createElement("button", { onClick: () => setShowFullScreenshot(false), className: "absolute top-6 right-6 p-2 bg-white/10 rounded-full border-none cursor-pointer hover:bg-white/20 transition-colors z-10" },
|
|
40387
|
+
React$1.createElement(CloseIcon, { className: "w-8 h-8 text-white" })),
|
|
40388
|
+
React$1.createElement("img", { src: feedback.screenshot, alt: "Feedback screenshot", className: "max-w-full max-h-full object-contain rounded-lg shadow-2xl", onClick: (e) => e.stopPropagation() })), document.body),
|
|
40343
40389
|
showReplay &&
|
|
40344
40390
|
sessionActions &&
|
|
40345
40391
|
sessionActions.length > 0 &&
|
|
40346
|
-
reactDom.createPortal(React$
|
|
40347
|
-
React$
|
|
40348
|
-
React$
|
|
40349
|
-
React$
|
|
40350
|
-
React$
|
|
40351
|
-
React$
|
|
40352
|
-
React$
|
|
40353
|
-
React$
|
|
40354
|
-
React$
|
|
40355
|
-
React$
|
|
40392
|
+
reactDom.createPortal(React$1.createElement("div", { className: "fixed inset-0 z-[10000] bg-black/80 backdrop-blur-sm flex items-center justify-center p-5 animate-in fade-in duration-200", onClick: () => setShowReplay(false) },
|
|
40393
|
+
React$1.createElement("div", { className: "bg-white rounded-2xl overflow-hidden shadow-2xl max-w-[900px] w-full flex flex-col max-h-[90vh]", onClick: (e) => e.stopPropagation() },
|
|
40394
|
+
React$1.createElement("div", { className: "p-4 border-b border-gray-100 flex items-center justify-between bg-gray-50" },
|
|
40395
|
+
React$1.createElement("div", null,
|
|
40396
|
+
React$1.createElement("h3", { className: "font-semibold text-gray-900" }, "Session Activity Timeline"),
|
|
40397
|
+
React$1.createElement("p", { className: "text-xs text-gray-600 mt-1" }, "User actions recorded during feedback creation")),
|
|
40398
|
+
React$1.createElement("button", { onClick: () => setShowReplay(false), className: "p-2 hover:bg-gray-200 rounded-full transition-colors cursor-pointer text-gray-500 hover:text-gray-900 border-none bg-transparent" },
|
|
40399
|
+
React$1.createElement(CloseIcon, { className: "w-5 h-5" }))),
|
|
40400
|
+
React$1.createElement("div", { className: "flex-1 overflow-y-auto p-4" },
|
|
40401
|
+
React$1.createElement("div", { className: "space-y-2" }, sessionActions.map((action, idx) => {
|
|
40356
40402
|
var _a;
|
|
40357
40403
|
const baseTime = ((_a = sessionActions[0]) === null || _a === void 0 ? void 0 : _a.timestamp) ||
|
|
40358
40404
|
action.timestamp;
|
|
40359
|
-
return (React$
|
|
40360
|
-
React$
|
|
40361
|
-
React$
|
|
40362
|
-
React$
|
|
40363
|
-
React$
|
|
40405
|
+
return (React$1.createElement("div", { key: idx, className: "flex items-start gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors" },
|
|
40406
|
+
React$1.createElement("div", { className: "flex-shrink-0 w-20 text-xs font-mono text-gray-600" },
|
|
40407
|
+
React$1.createElement("div", null, formatTimestamp(action.timestamp)),
|
|
40408
|
+
React$1.createElement("div", { className: "text-gray-400" }, getRelativeTime(action.timestamp, baseTime))),
|
|
40409
|
+
React$1.createElement("div", { className: "flex-1 min-w-0" },
|
|
40364
40410
|
action.type ===
|
|
40365
|
-
"click" && (React$
|
|
40366
|
-
React$
|
|
40367
|
-
React$
|
|
40368
|
-
React$
|
|
40369
|
-
React$
|
|
40411
|
+
"click" && (React$1.createElement("div", null,
|
|
40412
|
+
React$1.createElement("div", { className: "flex items-center gap-2 mb-1" },
|
|
40413
|
+
React$1.createElement("span", { className: "inline-block w-2 h-2 bg-blue-500 rounded-full" }),
|
|
40414
|
+
React$1.createElement("span", { className: "font-medium text-gray-900" }, "Clicked")),
|
|
40415
|
+
React$1.createElement("div", { className: "text-sm text-gray-700 font-mono bg-white px-2 py-1 rounded border border-gray-200" },
|
|
40370
40416
|
"<",
|
|
40371
40417
|
action.data
|
|
40372
40418
|
.elementTag ||
|
|
@@ -40379,10 +40425,10 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40379
40425
|
` class="${action.data.elementClass}"`,
|
|
40380
40426
|
">"),
|
|
40381
40427
|
action.data
|
|
40382
|
-
.elementText && (React$
|
|
40428
|
+
.elementText && (React$1.createElement("div", { className: "mt-1 text-sm text-gray-600" },
|
|
40383
40429
|
"Text:",
|
|
40384
40430
|
" ",
|
|
40385
|
-
React$
|
|
40431
|
+
React$1.createElement("span", { className: "italic" },
|
|
40386
40432
|
"\"",
|
|
40387
40433
|
action.data.elementText.substring(0, 100),
|
|
40388
40434
|
action
|
|
@@ -40394,19 +40440,19 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40394
40440
|
: "",
|
|
40395
40441
|
"\""))))),
|
|
40396
40442
|
action.type ===
|
|
40397
|
-
"navigation" && (React$
|
|
40398
|
-
React$
|
|
40399
|
-
React$
|
|
40400
|
-
React$
|
|
40401
|
-
React$
|
|
40443
|
+
"navigation" && (React$1.createElement("div", null,
|
|
40444
|
+
React$1.createElement("div", { className: "flex items-center gap-2 mb-1" },
|
|
40445
|
+
React$1.createElement("span", { className: "inline-block w-2 h-2 bg-purple-500 rounded-full" }),
|
|
40446
|
+
React$1.createElement("span", { className: "font-medium text-gray-900" }, "Navigated")),
|
|
40447
|
+
React$1.createElement("div", { className: "text-sm text-gray-700 break-all" }, action
|
|
40402
40448
|
.data
|
|
40403
40449
|
.url))),
|
|
40404
40450
|
action.type ===
|
|
40405
|
-
"scroll" && (React$
|
|
40406
|
-
React$
|
|
40407
|
-
React$
|
|
40408
|
-
React$
|
|
40409
|
-
React$
|
|
40451
|
+
"scroll" && (React$1.createElement("div", null,
|
|
40452
|
+
React$1.createElement("div", { className: "flex items-center gap-2 mb-1" },
|
|
40453
|
+
React$1.createElement("span", { className: "inline-block w-2 h-2 bg-green-500 rounded-full" }),
|
|
40454
|
+
React$1.createElement("span", { className: "font-medium text-gray-900" }, "Scrolled")),
|
|
40455
|
+
React$1.createElement("div", { className: "text-sm text-gray-700" },
|
|
40410
40456
|
"Position:",
|
|
40411
40457
|
" ",
|
|
40412
40458
|
action
|
|
@@ -40414,11 +40460,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40414
40460
|
.scrollY,
|
|
40415
40461
|
"px"))),
|
|
40416
40462
|
action.type ===
|
|
40417
|
-
"input" && (React$
|
|
40418
|
-
React$
|
|
40419
|
-
React$
|
|
40420
|
-
React$
|
|
40421
|
-
React$
|
|
40463
|
+
"input" && (React$1.createElement("div", null,
|
|
40464
|
+
React$1.createElement("div", { className: "flex items-center gap-2 mb-1" },
|
|
40465
|
+
React$1.createElement("span", { className: "inline-block w-2 h-2 bg-orange-500 rounded-full" }),
|
|
40466
|
+
React$1.createElement("span", { className: "font-medium text-gray-900" }, "Input")),
|
|
40467
|
+
React$1.createElement("div", { className: "text-sm text-gray-700" },
|
|
40422
40468
|
action
|
|
40423
40469
|
.data
|
|
40424
40470
|
.inputType,
|
|
@@ -40427,13 +40473,13 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40427
40473
|
}))))), document.body),
|
|
40428
40474
|
showOverlay &&
|
|
40429
40475
|
feedback.designMockup &&
|
|
40430
|
-
reactDom.createPortal(React$
|
|
40431
|
-
React$
|
|
40432
|
-
React$
|
|
40433
|
-
React$
|
|
40434
|
-
React$
|
|
40435
|
-
React$
|
|
40436
|
-
React$
|
|
40476
|
+
reactDom.createPortal(React$1.createElement("div", { className: "fixed inset-0 z-[10000] pointer-events-none" },
|
|
40477
|
+
React$1.createElement("img", { src: feedback.designMockup, style: { opacity: overlayOpacity / 100 }, className: "w-full h-full object-contain object-top", alt: "Design Mockup Overlay" }),
|
|
40478
|
+
React$1.createElement("div", { className: "fixed bottom-10 left-1/2 -translate-x-1/2 bg-white/90 backdrop-blur border border-gray-200 shadow-xl rounded-full p-2 px-6 flex items-center gap-4 pointer-events-auto" },
|
|
40479
|
+
React$1.createElement("span", { className: "text-xs font-bold text-gray-500 uppercase whitespace-nowrap" }, "Overlay Opacity"),
|
|
40480
|
+
React$1.createElement("input", { type: "range", min: "0", max: "100", value: overlayOpacity, onChange: (e) => setOverlayOpacity(Number(e.target.value)), className: "w-32 accent-brand-blue" }),
|
|
40481
|
+
React$1.createElement("button", { onClick: () => setShowOverlay(false), className: "ml-2 hover:bg-gray-200 p-1.5 rounded-full border-none bg-transparent" },
|
|
40482
|
+
React$1.createElement(CloseIcon, { className: "w-4 h-4 text-gray-500" })))), document.body)));
|
|
40437
40483
|
};
|
|
40438
40484
|
|
|
40439
40485
|
const signUp = async (email, password) => {
|
|
@@ -40476,11 +40522,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40476
40522
|
};
|
|
40477
40523
|
|
|
40478
40524
|
const AuthForm = ({ onSuccess }) => {
|
|
40479
|
-
const [mode, setMode] = React$
|
|
40480
|
-
const [email, setEmail] = React$
|
|
40481
|
-
const [password, setPassword] = React$
|
|
40482
|
-
const [error, setError] = React$
|
|
40483
|
-
const [loading, setLoading] = React$
|
|
40525
|
+
const [mode, setMode] = React$1.useState("login");
|
|
40526
|
+
const [email, setEmail] = React$1.useState("");
|
|
40527
|
+
const [password, setPassword] = React$1.useState("");
|
|
40528
|
+
const [error, setError] = React$1.useState(null);
|
|
40529
|
+
const [loading, setLoading] = React$1.useState(false);
|
|
40484
40530
|
const handleSubmit = async (e) => {
|
|
40485
40531
|
e.preventDefault();
|
|
40486
40532
|
setError(null);
|
|
@@ -40541,8 +40587,8 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40541
40587
|
];
|
|
40542
40588
|
const ViewportControls = () => {
|
|
40543
40589
|
const { viewportMode, setViewportMode, isOpen: isWidgetOpen } = useMarkupStore();
|
|
40544
|
-
const [isExpanded, setIsExpanded] = React$
|
|
40545
|
-
const dropdownRef = React$
|
|
40590
|
+
const [isExpanded, setIsExpanded] = React$1.useState(false);
|
|
40591
|
+
const dropdownRef = React$1.useRef(null);
|
|
40546
40592
|
const handlePresetClick = (preset) => {
|
|
40547
40593
|
setViewportMode({ width: preset.width, height: preset.height });
|
|
40548
40594
|
setIsExpanded(false);
|
|
@@ -40555,7 +40601,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40555
40601
|
return (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.width) === preset.width && (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.height) === preset.height;
|
|
40556
40602
|
};
|
|
40557
40603
|
// Close dropdown on outside click
|
|
40558
|
-
React$
|
|
40604
|
+
React$1.useEffect(() => {
|
|
40559
40605
|
if (!isExpanded)
|
|
40560
40606
|
return;
|
|
40561
40607
|
const handleClickOutside = (event) => {
|
|
@@ -40567,7 +40613,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40567
40613
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
40568
40614
|
}, [isExpanded]);
|
|
40569
40615
|
// Handle ESC key to close dropdown or reset viewport
|
|
40570
|
-
React$
|
|
40616
|
+
React$1.useEffect(() => {
|
|
40571
40617
|
const handleKeyDown = (event) => {
|
|
40572
40618
|
if (event.key === 'Escape') {
|
|
40573
40619
|
if (isExpanded) {
|
|
@@ -40586,49 +40632,49 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40586
40632
|
// Don't show controls when widget is not open
|
|
40587
40633
|
if (!isWidgetOpen)
|
|
40588
40634
|
return null;
|
|
40589
|
-
return (React$
|
|
40590
|
-
!viewportMode ? (React$
|
|
40591
|
-
React$
|
|
40592
|
-
"Responsive Mode")) : (React$
|
|
40593
|
-
React$
|
|
40635
|
+
return (React$1.createElement("div", { ref: dropdownRef, className: "fixed cursor-pointer top-4 left-1/2 -translate-x-1/2 z-[999998] flex items-center gap-2" },
|
|
40636
|
+
!viewportMode ? (React$1.createElement("div", { onClick: () => setIsExpanded(!isExpanded), className: "bg-white border-2 border-gray-300 rounded-xl px-4 py-2 shadow-lg hover:shadow-xl transition-all flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:border-gray-400" },
|
|
40637
|
+
React$1.createElement(DesktopIcon, { className: "w-4 h-4" }),
|
|
40638
|
+
"Responsive Mode")) : (React$1.createElement("div", { className: "bg-white border-2 border-gray-300 rounded-xl px-4 py-2 shadow-lg flex items-center gap-3" },
|
|
40639
|
+
React$1.createElement("span", { className: "text-sm font-medium text-gray-700" },
|
|
40594
40640
|
viewportMode.width,
|
|
40595
40641
|
" \u00D7 ",
|
|
40596
40642
|
viewportMode.height),
|
|
40597
|
-
React$
|
|
40598
|
-
React$
|
|
40599
|
-
React$
|
|
40600
|
-
isExpanded && (React$
|
|
40601
|
-
React$
|
|
40602
|
-
React$
|
|
40603
|
-
VIEWPORT_PRESETS.filter((p) => p.deviceType === "mobile").map((preset) => (React$
|
|
40643
|
+
React$1.createElement("div", { onClick: () => setIsExpanded(!isExpanded), className: "text-gray-600 hover:text-gray-900 transition-colors" },
|
|
40644
|
+
React$1.createElement(DesktopIcon, { className: "w-4 h-4" })),
|
|
40645
|
+
React$1.createElement("div", { onClick: handleReset, className: "px-2 py-1 text-xs font-medium text-red-600 hover:text-white hover:bg-red-600 border border-red-600 rounded transition-colors" }, "Reset"))),
|
|
40646
|
+
isExpanded && (React$1.createElement("div", { className: "absolute top-full left-1/2 -translate-x-1/2 mt-2 bg-white border-2 border-gray-200 rounded-xl shadow-2xl p-3 min-w-[240px]" },
|
|
40647
|
+
React$1.createElement("div", { className: "space-y-2" },
|
|
40648
|
+
React$1.createElement("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide px-2 mb-2" }, "Mobile"),
|
|
40649
|
+
VIEWPORT_PRESETS.filter((p) => p.deviceType === "mobile").map((preset) => (React$1.createElement("div", { key: preset.name, onClick: () => handlePresetClick(preset), className: cn("w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-left group", isActivePreset(preset)
|
|
40604
40650
|
? "bg-blue-50 border border-blue-200"
|
|
40605
40651
|
: "hover:bg-gray-100") },
|
|
40606
|
-
React$
|
|
40607
|
-
React$
|
|
40608
|
-
React$
|
|
40609
|
-
React$
|
|
40652
|
+
React$1.createElement(MobileIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }),
|
|
40653
|
+
React$1.createElement("div", { className: "flex-1" },
|
|
40654
|
+
React$1.createElement("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900" }, preset.name),
|
|
40655
|
+
React$1.createElement("div", { className: "text-xs text-gray-500" },
|
|
40610
40656
|
preset.width,
|
|
40611
40657
|
" \u00D7 ",
|
|
40612
40658
|
preset.height))))),
|
|
40613
|
-
React$
|
|
40614
|
-
VIEWPORT_PRESETS.filter((p) => p.deviceType === "tablet").map((preset) => (React$
|
|
40659
|
+
React$1.createElement("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide px-2 mt-4 mb-2" }, "Tablet"),
|
|
40660
|
+
VIEWPORT_PRESETS.filter((p) => p.deviceType === "tablet").map((preset) => (React$1.createElement("div", { key: preset.name, onClick: () => handlePresetClick(preset), className: cn("w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-left group", isActivePreset(preset)
|
|
40615
40661
|
? "bg-blue-50 border border-blue-200"
|
|
40616
40662
|
: "hover:bg-gray-100") },
|
|
40617
|
-
React$
|
|
40618
|
-
React$
|
|
40619
|
-
React$
|
|
40620
|
-
React$
|
|
40663
|
+
React$1.createElement(TabletIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }),
|
|
40664
|
+
React$1.createElement("div", { className: "flex-1" },
|
|
40665
|
+
React$1.createElement("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900" }, preset.name),
|
|
40666
|
+
React$1.createElement("div", { className: "text-xs text-gray-500" },
|
|
40621
40667
|
preset.width,
|
|
40622
40668
|
" \u00D7 ",
|
|
40623
40669
|
preset.height))))),
|
|
40624
|
-
React$
|
|
40625
|
-
VIEWPORT_PRESETS.filter((p) => p.deviceType === "desktop").map((preset) => (React$
|
|
40670
|
+
React$1.createElement("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide px-2 mt-4 mb-2" }, "Desktop"),
|
|
40671
|
+
VIEWPORT_PRESETS.filter((p) => p.deviceType === "desktop").map((preset) => (React$1.createElement("div", { key: preset.name, onClick: () => handlePresetClick(preset), className: cn("w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-all text-left group", isActivePreset(preset)
|
|
40626
40672
|
? "bg-blue-50 border border-blue-200"
|
|
40627
40673
|
: "hover:bg-gray-100") },
|
|
40628
|
-
React$
|
|
40629
|
-
React$
|
|
40630
|
-
React$
|
|
40631
|
-
React$
|
|
40674
|
+
React$1.createElement(DesktopIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }),
|
|
40675
|
+
React$1.createElement("div", { className: "flex-1" },
|
|
40676
|
+
React$1.createElement("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900" }, preset.name),
|
|
40677
|
+
React$1.createElement("div", { className: "text-xs text-gray-500" },
|
|
40632
40678
|
preset.width,
|
|
40633
40679
|
" \u00D7 ",
|
|
40634
40680
|
preset.height))))))))));
|
|
@@ -40636,8 +40682,8 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40636
40682
|
|
|
40637
40683
|
const FeedbackPins = ({ onPinClick }) => {
|
|
40638
40684
|
const { feedbackItems, showPins } = useMarkupStore();
|
|
40639
|
-
const [docSize, setDocSize] = React$
|
|
40640
|
-
React$
|
|
40685
|
+
const [docSize, setDocSize] = React$1.useState({ width: 0, height: 0 });
|
|
40686
|
+
React$1.useEffect(() => {
|
|
40641
40687
|
const measure = () => {
|
|
40642
40688
|
const root = document.documentElement;
|
|
40643
40689
|
const body = document.body;
|
|
@@ -40660,7 +40706,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40660
40706
|
};
|
|
40661
40707
|
}, []);
|
|
40662
40708
|
// Filter pins for current page URL
|
|
40663
|
-
const currentPagePins = React$
|
|
40709
|
+
const currentPagePins = React$1.useMemo(() => {
|
|
40664
40710
|
const currentUrl = window.location.href;
|
|
40665
40711
|
return feedbackItems.filter(item => {
|
|
40666
40712
|
var _a;
|
|
@@ -40687,7 +40733,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40687
40733
|
pointerEvents: 'none',
|
|
40688
40734
|
zIndex: 999998,
|
|
40689
40735
|
};
|
|
40690
|
-
return (React$
|
|
40736
|
+
return (React$1.createElement("div", { className: "feedback-pins-container", "data-markup-pins": true, style: containerStyle }, currentPagePins.map((feedback) => {
|
|
40691
40737
|
const { pinLocation } = feedback;
|
|
40692
40738
|
if (!pinLocation)
|
|
40693
40739
|
return null;
|
|
@@ -40710,20 +40756,20 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40710
40756
|
transform: 'translate(-50%, -50%)',
|
|
40711
40757
|
pointerEvents: 'auto',
|
|
40712
40758
|
};
|
|
40713
|
-
return (React$
|
|
40714
|
-
React$
|
|
40715
|
-
React$
|
|
40759
|
+
return (React$1.createElement("div", { key: feedback.id, className: "feedback-pin-wrapper", style: style, onClick: () => onPinClick(feedback) },
|
|
40760
|
+
React$1.createElement("div", { className: "feedback-pin group relative cursor-pointer" },
|
|
40761
|
+
React$1.createElement("div", { className: `
|
|
40716
40762
|
w-8 h-8 rounded-full flex items-center justify-center
|
|
40717
40763
|
shadow-lg hover:shadow-xl transition-all
|
|
40718
40764
|
${feedback.status === 'open' ? 'bg-[#E6B6CF] hover:bg-[#d9a3c0]' : 'bg-green-500 hover:bg-green-600'}
|
|
40719
40765
|
border-2 border-white
|
|
40720
40766
|
hover:scale-110
|
|
40721
40767
|
` },
|
|
40722
|
-
React$
|
|
40723
|
-
React$
|
|
40724
|
-
React$
|
|
40725
|
-
React$
|
|
40726
|
-
React$
|
|
40768
|
+
React$1.createElement(MessageIcon, { className: "w-4 h-4 text-white" })),
|
|
40769
|
+
React$1.createElement("div", { className: "\n absolute bottom-full left-1/2 -translate-x-1/2 mb-2\n opacity-0 group-hover:opacity-100\n pointer-events-none\n transition-opacity duration-200\n bg-gray-900 text-white text-xs rounded-lg py-2 px-3\n whitespace-nowrap shadow-xl\n max-w-[200px]\n " },
|
|
40770
|
+
React$1.createElement("div", { className: "font-semibold truncate" }, feedback.title || 'Feedback'),
|
|
40771
|
+
React$1.createElement("div", { className: "text-gray-300 text-[10px] mt-0.5" }, "Click to view"),
|
|
40772
|
+
React$1.createElement("div", { className: "\n absolute top-full left-1/2 -translate-x-1/2\n w-0 h-0\n border-l-4 border-l-transparent\n border-r-4 border-r-transparent\n border-t-4 border-t-gray-900\n " })))));
|
|
40727
40773
|
}
|
|
40728
40774
|
finally { }
|
|
40729
40775
|
}
|
|
@@ -40737,7 +40783,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40737
40783
|
const setFeedbackItems = useMarkupStore((state) => state.setFeedbackItems);
|
|
40738
40784
|
const isAuthenticated = useMarkupStore((state) => state.isAuthenticated);
|
|
40739
40785
|
// Auth state listener
|
|
40740
|
-
React$
|
|
40786
|
+
React$1.useEffect(() => {
|
|
40741
40787
|
// Check if Firebase is initialized by checking if any apps exist
|
|
40742
40788
|
if (getApps().length === 0) {
|
|
40743
40789
|
console.warn('Firebase not initialized. Call initFirebase() at app root or authentication will be disabled.');
|
|
@@ -40788,7 +40834,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40788
40834
|
};
|
|
40789
40835
|
}, [setCurrentUser, setIsAuthenticated]);
|
|
40790
40836
|
// Feedback subscription listener
|
|
40791
|
-
React$
|
|
40837
|
+
React$1.useEffect(() => {
|
|
40792
40838
|
console.log('🔄 Feedback subscription effect running...', {
|
|
40793
40839
|
firebaseApps: getApps().length,
|
|
40794
40840
|
projectId: config.projectId,
|
|
@@ -40825,9 +40871,9 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40825
40871
|
};
|
|
40826
40872
|
|
|
40827
40873
|
const useSessionRecording = () => {
|
|
40828
|
-
const actionsRef = React$
|
|
40874
|
+
const actionsRef = React$1.useRef([]);
|
|
40829
40875
|
const maxActions = 50; // Keep last 50 actions
|
|
40830
|
-
React$
|
|
40876
|
+
React$1.useEffect(() => {
|
|
40831
40877
|
if (typeof window === 'undefined')
|
|
40832
40878
|
return;
|
|
40833
40879
|
const recordAction = (action) => {
|
|
@@ -40912,13 +40958,13 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40912
40958
|
clearTimeout(scrollTimeout);
|
|
40913
40959
|
};
|
|
40914
40960
|
}, []);
|
|
40915
|
-
const getSessionEvents = React$
|
|
40961
|
+
const getSessionEvents = React$1.useCallback(() => {
|
|
40916
40962
|
if (actionsRef.current.length === 0) {
|
|
40917
40963
|
return undefined;
|
|
40918
40964
|
}
|
|
40919
40965
|
return JSON.stringify(actionsRef.current);
|
|
40920
40966
|
}, []);
|
|
40921
|
-
const clearSession = React$
|
|
40967
|
+
const clearSession = React$1.useCallback(() => {
|
|
40922
40968
|
actionsRef.current = [];
|
|
40923
40969
|
}, []);
|
|
40924
40970
|
return {
|
|
@@ -40930,7 +40976,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40930
40976
|
const MarkupWidget = ({ config: userConfig, }) => {
|
|
40931
40977
|
var _a;
|
|
40932
40978
|
// Initialize Firebase synchronously on first render only
|
|
40933
|
-
const initRef = React$
|
|
40979
|
+
const initRef = React$1.useRef(false);
|
|
40934
40980
|
if (!initRef.current && (userConfig === null || userConfig === void 0 ? void 0 : userConfig.firebaseConfig) && getApps().length === 0) {
|
|
40935
40981
|
try {
|
|
40936
40982
|
initializeFirebase(userConfig.firebaseConfig);
|
|
@@ -40947,9 +40993,9 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40947
40993
|
// Initialize Session Recording (Feature 2)
|
|
40948
40994
|
const { getSessionEvents } = useSessionRecording();
|
|
40949
40995
|
// Track last clicked element for component detection (Feature 4)
|
|
40950
|
-
const lastClickedElementRef = React$
|
|
40951
|
-
const [lastClickedText, setLastClickedText] = React$
|
|
40952
|
-
React$
|
|
40996
|
+
const lastClickedElementRef = React$1.useRef(null);
|
|
40997
|
+
const [lastClickedText, setLastClickedText] = React$1.useState('');
|
|
40998
|
+
React$1.useEffect(() => {
|
|
40953
40999
|
const handleClick = (e) => {
|
|
40954
41000
|
var _a;
|
|
40955
41001
|
// Store the clicked element (but ignore clicks on the widget itself)
|
|
@@ -40984,7 +41030,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40984
41030
|
return () => document.removeEventListener('click', handleClick, true);
|
|
40985
41031
|
}, []);
|
|
40986
41032
|
// Apply viewport mode styling to document (like browser dev tools)
|
|
40987
|
-
React$
|
|
41033
|
+
React$1.useEffect(() => {
|
|
40988
41034
|
if (viewportMode) {
|
|
40989
41035
|
const root = document.documentElement;
|
|
40990
41036
|
const body = document.body;
|
|
@@ -41011,12 +41057,12 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41011
41057
|
};
|
|
41012
41058
|
}
|
|
41013
41059
|
}, [viewportMode]);
|
|
41014
|
-
React$
|
|
41060
|
+
React$1.useEffect(() => {
|
|
41015
41061
|
if (userConfig) {
|
|
41016
41062
|
setConfig(userConfig);
|
|
41017
41063
|
}
|
|
41018
41064
|
}, [userConfig, setConfig]);
|
|
41019
|
-
React$
|
|
41065
|
+
React$1.useEffect(() => {
|
|
41020
41066
|
const handleKeyDown = (e) => {
|
|
41021
41067
|
const shortcut = config.shortcut || "ctrl+shift+m";
|
|
41022
41068
|
const keys = shortcut.split("+").map((k) => k.trim().toLowerCase());
|
|
@@ -41035,7 +41081,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41035
41081
|
document.addEventListener("keydown", handleKeyDown);
|
|
41036
41082
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
41037
41083
|
}, [config.shortcut, isOpen, setIsOpen]);
|
|
41038
|
-
const handleToggle = React$
|
|
41084
|
+
const handleToggle = React$1.useCallback(() => {
|
|
41039
41085
|
if (!isOpen) {
|
|
41040
41086
|
setIsOpen(true);
|
|
41041
41087
|
}
|
|
@@ -41045,7 +41091,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41045
41091
|
setActiveTab("create");
|
|
41046
41092
|
}
|
|
41047
41093
|
}, [isOpen, setIsOpen, setSelectedFeedback, setActiveTab]);
|
|
41048
|
-
const handleSubmitFeedback = React$
|
|
41094
|
+
const handleSubmitFeedback = React$1.useCallback(async (feedback) => {
|
|
41049
41095
|
try {
|
|
41050
41096
|
const currentUser = getCurrentUser();
|
|
41051
41097
|
console.log("Submitting feedback:", {
|
|
@@ -41073,11 +41119,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41073
41119
|
}
|
|
41074
41120
|
setActiveTab("list");
|
|
41075
41121
|
}, [addFeedbackItem, setActiveTab, config.projectId]);
|
|
41076
|
-
const handleCancel = React$
|
|
41122
|
+
const handleCancel = React$1.useCallback(() => {
|
|
41077
41123
|
reset();
|
|
41078
41124
|
setIsOpen(false);
|
|
41079
41125
|
}, [reset, setIsOpen]);
|
|
41080
|
-
const handleSelectFeedback = React$
|
|
41126
|
+
const handleSelectFeedback = React$1.useCallback((feedback) => {
|
|
41081
41127
|
setSelectedFeedback(feedback);
|
|
41082
41128
|
// Scroll to pin location
|
|
41083
41129
|
if (feedback.pinLocation) {
|
|
@@ -41099,7 +41145,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41099
41145
|
});
|
|
41100
41146
|
}
|
|
41101
41147
|
}, [setSelectedFeedback]);
|
|
41102
|
-
const handlePinClick = React$
|
|
41148
|
+
const handlePinClick = React$1.useCallback((feedback) => {
|
|
41103
41149
|
setIsOpen(true);
|
|
41104
41150
|
setActiveTab("list");
|
|
41105
41151
|
setSelectedFeedback(feedback);
|
|
@@ -41123,11 +41169,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41123
41169
|
});
|
|
41124
41170
|
}
|
|
41125
41171
|
}, [setIsOpen, setActiveTab, setSelectedFeedback]);
|
|
41126
|
-
const handleBackFromDetail = React$
|
|
41172
|
+
const handleBackFromDetail = React$1.useCallback(() => {
|
|
41127
41173
|
setSelectedFeedback(null);
|
|
41128
41174
|
setViewportMode(null);
|
|
41129
41175
|
}, [setSelectedFeedback, setViewportMode]);
|
|
41130
|
-
const handleLogout = React$
|
|
41176
|
+
const handleLogout = React$1.useCallback(async () => {
|
|
41131
41177
|
try {
|
|
41132
41178
|
await logOut();
|
|
41133
41179
|
reset();
|
|
@@ -41136,10 +41182,10 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41136
41182
|
console.error("Logout failed:", error);
|
|
41137
41183
|
}
|
|
41138
41184
|
}, [reset]);
|
|
41139
|
-
const handleAuthSuccess = React$
|
|
41185
|
+
const handleAuthSuccess = React$1.useCallback(() => {
|
|
41140
41186
|
setActiveTab("create");
|
|
41141
41187
|
}, [setActiveTab]);
|
|
41142
|
-
const handleDeleteFeedback = React$
|
|
41188
|
+
const handleDeleteFeedback = React$1.useCallback(async (id) => {
|
|
41143
41189
|
// Find the feedback item to get storage URLs
|
|
41144
41190
|
const feedbackToDelete = feedbackItems.find(f => f.id === id);
|
|
41145
41191
|
// Delete associated storage files
|
|
@@ -41154,7 +41200,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41154
41200
|
removeFeedbackItem(id);
|
|
41155
41201
|
setSelectedFeedback(null);
|
|
41156
41202
|
}, [removeFeedbackItem, setSelectedFeedback, feedbackItems]);
|
|
41157
|
-
const handleUpdateFeedback = React$
|
|
41203
|
+
const handleUpdateFeedback = React$1.useCallback((updatedFeedback) => {
|
|
41158
41204
|
updateFeedback(updatedFeedback);
|
|
41159
41205
|
// Also update selected feedback if it's the same one (it should be)
|
|
41160
41206
|
setSelectedFeedback(updatedFeedback);
|
|
@@ -41166,49 +41212,49 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41166
41212
|
? adjustColor(config.primaryColor, -20)
|
|
41167
41213
|
: "#4f46e5",
|
|
41168
41214
|
});
|
|
41169
|
-
return (React$
|
|
41170
|
-
React$
|
|
41171
|
-
React$
|
|
41172
|
-
React$
|
|
41215
|
+
return (React$1.createElement(React$1.Fragment, null,
|
|
41216
|
+
React$1.createElement(FeedbackPins, { onPinClick: handlePinClick }),
|
|
41217
|
+
React$1.createElement(ViewportControls, null),
|
|
41218
|
+
React$1.createElement("div", { className: cn("markup-widget fixed z-[999999] right-0 top-1/2 flex items-center transition-transform duration-300 ease-in-out", isOpen ? "" : "hover:translate-x-[-8px]"), style: {
|
|
41173
41219
|
transform: isOpen
|
|
41174
41220
|
? "translateY(-50%) translateX(0)"
|
|
41175
41221
|
: "translateY(-50%) translateX(calc(100% - 40px))",
|
|
41176
41222
|
}, "data-markup-widget": true },
|
|
41177
|
-
React$
|
|
41178
|
-
isOpen && React$
|
|
41179
|
-
React$
|
|
41180
|
-
openFeedbackCount > 0 && (React$
|
|
41181
|
-
React$
|
|
41182
|
-
React$
|
|
41183
|
-
React$
|
|
41184
|
-
React$
|
|
41185
|
-
React$
|
|
41223
|
+
React$1.createElement("div", { onClick: handleToggle, className: "relative bg-white h-fit flex items-center gap-2 px-2 pr-5 text-black border-none rounded-l-2xl cursor-pointer text-sm font-semibold transition-all py-5 shadow-lg" },
|
|
41224
|
+
isOpen && React$1.createElement(CloseIcon, { className: "w-5 h-5" }),
|
|
41225
|
+
React$1.createElement("span", { className: "text-black", style: { writingMode: "sideways-lr" } }, "Siren"),
|
|
41226
|
+
openFeedbackCount > 0 && (React$1.createElement("span", { className: "absolute -top-3 -left-1 min-w-[24px] h-[24px] px-1 bg-[#E6B6CF] text-black rounded-full text-xs font-semibold flex items-center justify-center" }, openFeedbackCount))),
|
|
41227
|
+
React$1.createElement("div", { className: "bg-white w-[500px] h-[750px] rounded-l-xl shadow-2xl overflow-hidden flex flex-col text-black" },
|
|
41228
|
+
React$1.createElement("div", { className: "flex items-center justify-between px-5 py-4 text-black", style: { backgroundColor: "var(--markup-primary)" } },
|
|
41229
|
+
React$1.createElement("h2", { className: "text-base font-semibold m-0" }, ((_a = config.labels) === null || _a === void 0 ? void 0 : _a.feedbackTitle) || "Feedback"),
|
|
41230
|
+
React$1.createElement("div", { className: "flex items-center gap-2" },
|
|
41231
|
+
React$1.createElement("div", { onClick: (e) => {
|
|
41186
41232
|
e.stopPropagation();
|
|
41187
41233
|
setShowPins(!showPins);
|
|
41188
41234
|
}, className: "p-2 text-xs font-medium bg-gray-50 border border-gray-200 text-black rounded-lg hover:bg-gray-100 cursor-pointer transition-all flex items-center gap-1.5", title: showPins ? "Hide pins" : "Show pins" },
|
|
41189
|
-
React$
|
|
41190
|
-
React$
|
|
41191
|
-
React$
|
|
41235
|
+
React$1.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
41236
|
+
React$1.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
|
|
41237
|
+
React$1.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })),
|
|
41192
41238
|
showPins ? 'Hide' : 'Show'),
|
|
41193
|
-
isAuthenticated && currentUser && (React$
|
|
41194
|
-
React$
|
|
41195
|
-
!isAuthenticated ? (React$
|
|
41196
|
-
React$
|
|
41197
|
-
React$
|
|
41198
|
-
React$
|
|
41239
|
+
isAuthenticated && currentUser && (React$1.createElement("div", { onClick: handleLogout, className: "text-xs py-2 px-2 bg-gray-50 border border-gray-200 text-gray-900 rounded-lg hover:bg-gray-200 cursor-pointer transition-all flex items-center gap-2" },
|
|
41240
|
+
React$1.createElement("h2", null, "Sign Out"))))),
|
|
41241
|
+
!isAuthenticated ? (React$1.createElement("div", { className: "flex-1 overflow-y-auto" },
|
|
41242
|
+
React$1.createElement(AuthForm, { onSuccess: handleAuthSuccess }))) : selectedFeedback ? (React$1.createElement(FeedbackDetail, { feedback: selectedFeedback, onBack: handleBackFromDetail, onDelete: handleDeleteFeedback, onUpdate: handleUpdateFeedback })) : (React$1.createElement(React$1.Fragment, null,
|
|
41243
|
+
React$1.createElement("div", { className: "flex border-b border-gray-200 px-5" },
|
|
41244
|
+
React$1.createElement("div", { className: cn("flex-1 py-3 px-4 border border-b-0 border-gray-200 rounded-t-xl hover:bg-gray-100 cursor-pointer text-sm font-medium transition-all flex items-center justify-center gap-1", activeTab === "create"
|
|
41199
41245
|
? "bg-gray-200"
|
|
41200
41246
|
: "border-white"), onClick: () => setActiveTab("create") },
|
|
41201
|
-
React$
|
|
41247
|
+
React$1.createElement(PlusIcon, { className: "w-3.5 h-3.5" }),
|
|
41202
41248
|
"New"),
|
|
41203
|
-
React$
|
|
41249
|
+
React$1.createElement("div", { className: cn("flex-1 py-3 px-4 border border-b-0 border-gray-200 rounded-t-xl hover:bg-gray-100 cursor-pointer text-sm font-medium transition-all flex items-center justify-center gap-1", activeTab === "list"
|
|
41204
41250
|
? "bg-gray-200"
|
|
41205
41251
|
: "border-white"), onClick: () => setActiveTab("list") },
|
|
41206
41252
|
"View All (",
|
|
41207
41253
|
feedbackItems.length,
|
|
41208
41254
|
")")),
|
|
41209
|
-
React$
|
|
41210
|
-
activeTab === "create" && (React$
|
|
41211
|
-
activeTab === "list" && (React$
|
|
41255
|
+
React$1.createElement("div", { className: "flex-1 overflow-y-auto p-5" },
|
|
41256
|
+
activeTab === "create" && (React$1.createElement(FeedbackForm, { onSubmit: handleSubmitFeedback, onCancel: handleCancel, getSessionEvents: getSessionEvents, lastClickedElement: lastClickedElementRef.current, lastClickedText: lastClickedText })),
|
|
41257
|
+
activeTab === "list" && (React$1.createElement(FeedbackList, { feedbackItems: feedbackItems, onSelectFeedback: handleSelectFeedback })))))))));
|
|
41212
41258
|
};
|
|
41213
41259
|
function adjustColor(color, amount) {
|
|
41214
41260
|
const clamp = (val) => Math.min(255, Math.max(0, val));
|
|
@@ -41239,8 +41285,8 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41239
41285
|
}
|
|
41240
41286
|
// Create React root and mount widget
|
|
41241
41287
|
root = ReactDOM.createRoot(container);
|
|
41242
|
-
root.render(React$
|
|
41243
|
-
React$
|
|
41288
|
+
root.render(React$1.createElement(React$1.StrictMode, null,
|
|
41289
|
+
React$1.createElement(MarkupWidget, { config: config })));
|
|
41244
41290
|
}
|
|
41245
41291
|
function open() {
|
|
41246
41292
|
// Implementation would open the widget UI
|