@sirendesign/markup 1.0.20 → 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 +715 -676
- package/dist/markup-widget.esm.js.map +1 -1
- package/dist/markup-widget.js +728 -689
- 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;
|
|
@@ -12026,7 +12065,7 @@
|
|
|
12026
12065
|
return false;
|
|
12027
12066
|
}
|
|
12028
12067
|
try {
|
|
12029
|
-
return (Object.prototype.toString.call(
|
|
12068
|
+
return (Object.prototype.toString.call(global.process) === '[object process]');
|
|
12030
12069
|
}
|
|
12031
12070
|
catch (e) {
|
|
12032
12071
|
return false;
|
|
@@ -16703,80 +16742,80 @@
|
|
|
16703
16742
|
}
|
|
16704
16743
|
};
|
|
16705
16744
|
|
|
16706
|
-
const MessageIcon = ({ className, ...props }) => (React$
|
|
16707
|
-
React$
|
|
16708
|
-
const CloseIcon = ({ className, ...props }) => (React$
|
|
16709
|
-
React$
|
|
16710
|
-
React$
|
|
16711
|
-
const CameraIcon = ({ className, ...props }) => (React$
|
|
16712
|
-
React$
|
|
16713
|
-
React$
|
|
16714
|
-
const CircleIcon = ({ className, ...props }) => (React$
|
|
16715
|
-
React$
|
|
16716
|
-
const PencilIcon = ({ className, ...props }) => (React$
|
|
16717
|
-
React$
|
|
16718
|
-
const UndoIcon = ({ className, ...props }) => (React$
|
|
16719
|
-
React$
|
|
16720
|
-
React$
|
|
16721
|
-
const CheckIcon = ({ className, ...props }) => (React$
|
|
16722
|
-
React$
|
|
16723
|
-
const TrashIcon = ({ className, ...props }) => (React$
|
|
16724
|
-
React$
|
|
16725
|
-
React$
|
|
16726
|
-
const EditIcon = ({ className, ...props }) => (React$
|
|
16727
|
-
React$
|
|
16728
|
-
React$
|
|
16729
|
-
const CopyIcon = ({ className, ...props }) => (React$
|
|
16730
|
-
React$
|
|
16731
|
-
React$
|
|
16732
|
-
const InboxIcon = ({ className, ...props }) => (React$
|
|
16733
|
-
React$
|
|
16734
|
-
React$
|
|
16735
|
-
const SendIcon = ({ className, ...props }) => (React$
|
|
16736
|
-
React$
|
|
16737
|
-
React$
|
|
16738
|
-
const PlusIcon = ({ className, ...props }) => (React$
|
|
16739
|
-
React$
|
|
16740
|
-
React$
|
|
16741
|
-
const FilterIcon = ({ className, ...props }) => (React$
|
|
16742
|
-
React$
|
|
16743
|
-
const SquareIcon = ({ className, ...props }) => (React$
|
|
16744
|
-
React$
|
|
16745
|
-
const ArrowRightIcon = ({ className, ...props }) => (React$
|
|
16746
|
-
React$
|
|
16747
|
-
React$
|
|
16748
|
-
const TypeIcon = ({ className, ...props }) => (React$
|
|
16749
|
-
React$
|
|
16750
|
-
React$
|
|
16751
|
-
React$
|
|
16752
|
-
const ArrowLeftIcon = ({ className, ...props }) => (React$
|
|
16753
|
-
React$
|
|
16754
|
-
React$
|
|
16755
|
-
const UserIcon = ({ className, ...props }) => (React$
|
|
16756
|
-
React$
|
|
16757
|
-
React$
|
|
16758
|
-
const ZoomInIcon = ({ className, ...props }) => (React$
|
|
16759
|
-
React$
|
|
16760
|
-
React$
|
|
16761
|
-
React$
|
|
16762
|
-
React$
|
|
16763
|
-
const CalendarIcon = ({ className, ...props }) => (React$
|
|
16764
|
-
React$
|
|
16765
|
-
React$
|
|
16766
|
-
React$
|
|
16767
|
-
React$
|
|
16768
|
-
const ChevronRightIcon = ({ className, ...props }) => (React$
|
|
16769
|
-
React$
|
|
16770
|
-
const DesktopIcon = ({ className, ...props }) => (React$
|
|
16771
|
-
React$
|
|
16772
|
-
React$
|
|
16773
|
-
React$
|
|
16774
|
-
const TabletIcon = ({ className, ...props }) => (React$
|
|
16775
|
-
React$
|
|
16776
|
-
React$
|
|
16777
|
-
const MobileIcon = ({ className, ...props }) => (React$
|
|
16778
|
-
React$
|
|
16779
|
-
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" })));
|
|
16780
16819
|
|
|
16781
16820
|
const tools = [
|
|
16782
16821
|
{ id: 'pen', icon: PencilIcon, label: 'Draw' },
|
|
@@ -16796,19 +16835,19 @@
|
|
|
16796
16835
|
];
|
|
16797
16836
|
const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
16798
16837
|
var _a, _b;
|
|
16799
|
-
const canvasRef = React$
|
|
16800
|
-
const containerRef = React$
|
|
16801
|
-
const [activeTool, setActiveTool] = React$
|
|
16802
|
-
const [activeColor, setActiveColor] = React$
|
|
16803
|
-
const [isDrawing, setIsDrawing] = React$
|
|
16804
|
-
const [currentPath, setCurrentPath] = React$
|
|
16805
|
-
const [annotations, setAnnotations] = React$
|
|
16806
|
-
const [imageLoaded, setImageLoaded] = React$
|
|
16807
|
-
const [startPoint, setStartPoint] = React$
|
|
16808
|
-
const [textInput, setTextInput] = React$
|
|
16809
|
-
const [textPosition, setTextPosition] = React$
|
|
16810
|
-
const imgRef = React$
|
|
16811
|
-
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(() => {
|
|
16812
16851
|
const img = new Image();
|
|
16813
16852
|
img.onload = () => {
|
|
16814
16853
|
imgRef.current = img;
|
|
@@ -16816,7 +16855,7 @@
|
|
|
16816
16855
|
};
|
|
16817
16856
|
img.src = screenshot;
|
|
16818
16857
|
}, [screenshot]);
|
|
16819
|
-
React$
|
|
16858
|
+
React$1.useEffect(() => {
|
|
16820
16859
|
if (!imageLoaded || !canvasRef.current || !imgRef.current)
|
|
16821
16860
|
return;
|
|
16822
16861
|
const canvas = canvasRef.current;
|
|
@@ -16843,7 +16882,7 @@
|
|
|
16843
16882
|
canvas.height = height;
|
|
16844
16883
|
redrawCanvas(ctx, width, height);
|
|
16845
16884
|
}, [imageLoaded, annotations]);
|
|
16846
|
-
const redrawCanvas = React$
|
|
16885
|
+
const redrawCanvas = React$1.useCallback((ctx, width, height) => {
|
|
16847
16886
|
if (!imgRef.current)
|
|
16848
16887
|
return;
|
|
16849
16888
|
ctx.clearRect(0, 0, width, height);
|
|
@@ -17074,32 +17113,32 @@
|
|
|
17074
17113
|
const dataUrl = canvas.toDataURL('image/png');
|
|
17075
17114
|
onComplete(annotations, dataUrl);
|
|
17076
17115
|
};
|
|
17077
|
-
return reactDom.createPortal(React$
|
|
17078
|
-
React$
|
|
17079
|
-
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
|
|
17080
17119
|
? 'bg-[#C2D1D9] text-white shadow-lg shadow-[#C2D1D9]/30'
|
|
17081
17120
|
: 'bg-transparent text-gray-600 hover:text-gray-900 hover:bg-white') },
|
|
17082
|
-
React$
|
|
17083
|
-
React$
|
|
17084
|
-
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
|
|
17085
17124
|
? 'border-gray-900 scale-110 shadow-lg'
|
|
17086
17125
|
: 'border-white hover:scale-105 shadow-md'), style: { backgroundColor: color } })))),
|
|
17087
|
-
React$
|
|
17088
|
-
React$
|
|
17089
|
-
React$
|
|
17090
|
-
React$
|
|
17091
|
-
React$
|
|
17092
|
-
React$
|
|
17093
|
-
React$
|
|
17094
|
-
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" }),
|
|
17095
17134
|
" Done"))),
|
|
17096
|
-
React$
|
|
17097
|
-
imageLoaded && (React$
|
|
17098
|
-
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: {
|
|
17099
17138
|
left: `calc(50% + ${(textPosition.x - 0.5) * (((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.width) || 0)}px)`,
|
|
17100
17139
|
top: `calc(50% + ${(textPosition.y - 0.5) * (((_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.height) || 0)}px)`,
|
|
17101
17140
|
} },
|
|
17102
|
-
React$
|
|
17141
|
+
React$1.createElement("input", { type: "text", value: textInput, onChange: (e) => setTextInput(e.target.value), onKeyDown: (e) => {
|
|
17103
17142
|
if (e.key === 'Enter')
|
|
17104
17143
|
handleTextSubmit();
|
|
17105
17144
|
if (e.key === 'Escape') {
|
|
@@ -17107,7 +17146,7 @@
|
|
|
17107
17146
|
setTextInput('');
|
|
17108
17147
|
}
|
|
17109
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 } })))),
|
|
17110
|
-
React$
|
|
17149
|
+
React$1.createElement("div", { className: "text-center py-2 text-gray-500 text-xs flex-shrink-0" }, activeTool === 'text'
|
|
17111
17150
|
? 'Click anywhere to add text'
|
|
17112
17151
|
: 'Click and drag to annotate • Use tools above to switch modes')), document.body);
|
|
17113
17152
|
};
|
|
@@ -17115,27 +17154,27 @@
|
|
|
17115
17154
|
const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastClickedElement, lastClickedText, }) => {
|
|
17116
17155
|
var _a, _b;
|
|
17117
17156
|
const { config, currentScreenshot, setCurrentScreenshot, annotations, setAnnotations, clearAnnotations, setIsCapturing, isCapturing, currentUser, setIsOpen, } = useMarkupStore();
|
|
17118
|
-
const [title, setTitle] = React$
|
|
17119
|
-
const [description, setDescription] = React$
|
|
17120
|
-
const [priority, setPriority] = React$
|
|
17121
|
-
const [feedbackType, setFeedbackType] = React$
|
|
17122
|
-
const [currentCopy, setCurrentCopy] = React$
|
|
17123
|
-
const [newCopy, setNewCopy] = React$
|
|
17124
|
-
const [designMockup, setDesignMockup] = React$
|
|
17125
|
-
const [selectedTags, setSelectedTags] = React$
|
|
17126
|
-
const [isAnnotating, setIsAnnotating] = React$
|
|
17127
|
-
const [isSubmitting, setIsSubmitting] = React$
|
|
17128
|
-
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);
|
|
17129
17168
|
// Screen recording states
|
|
17130
|
-
const [isRecording, setIsRecording] = React$
|
|
17131
|
-
const [recordedVideo, setRecordedVideo] = React$
|
|
17132
|
-
const [recordedBlob, setRecordedBlob] = React$
|
|
17133
|
-
const [isUploadingVideo, setIsUploadingVideo] = React$
|
|
17134
|
-
const [mediaRecorder, setMediaRecorder] = React$
|
|
17135
|
-
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);
|
|
17136
17175
|
// Pin placement states
|
|
17137
|
-
const [isPlacingPin, setIsPlacingPin] = React$
|
|
17138
|
-
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)
|
|
17139
17178
|
? {
|
|
17140
17179
|
x: initialData.pinLocation.x,
|
|
17141
17180
|
y: initialData.pinLocation.y,
|
|
@@ -17144,18 +17183,18 @@
|
|
|
17144
17183
|
}
|
|
17145
17184
|
: null);
|
|
17146
17185
|
// Image change states
|
|
17147
|
-
const [isSelectingImage, setIsSelectingImage] = React$
|
|
17148
|
-
const [originalImageSrc, setOriginalImageSrc] = React$
|
|
17149
|
-
const [originalImageBackground, setOriginalImageBackground] = React$
|
|
17150
|
-
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) || "");
|
|
17151
17190
|
// Load initial annotations into store if editing
|
|
17152
|
-
React$
|
|
17191
|
+
React$1.useEffect(() => {
|
|
17153
17192
|
if (initialData === null || initialData === void 0 ? void 0 : initialData.annotations) {
|
|
17154
17193
|
setAnnotations(initialData.annotations);
|
|
17155
17194
|
}
|
|
17156
17195
|
}, [initialData, setAnnotations]);
|
|
17157
17196
|
// Handle pin placement mode
|
|
17158
|
-
React$
|
|
17197
|
+
React$1.useEffect(() => {
|
|
17159
17198
|
if (!isPlacingPin)
|
|
17160
17199
|
return;
|
|
17161
17200
|
// Close widget during pin placement
|
|
@@ -17181,7 +17220,7 @@
|
|
|
17181
17220
|
};
|
|
17182
17221
|
}, [isPlacingPin, setIsOpen]);
|
|
17183
17222
|
// Handle image selection mode for image-change type
|
|
17184
|
-
React$
|
|
17223
|
+
React$1.useEffect(() => {
|
|
17185
17224
|
if (!isSelectingImage)
|
|
17186
17225
|
return;
|
|
17187
17226
|
// Close widget during image selection
|
|
@@ -17253,7 +17292,7 @@
|
|
|
17253
17292
|
};
|
|
17254
17293
|
}, [isSelectingImage, setIsOpen]);
|
|
17255
17294
|
// Auto-capture selected text when component mounts (only if creating new)
|
|
17256
|
-
React$
|
|
17295
|
+
React$1.useEffect(() => {
|
|
17257
17296
|
var _a;
|
|
17258
17297
|
if (initialData)
|
|
17259
17298
|
return;
|
|
@@ -17493,152 +17532,152 @@
|
|
|
17493
17532
|
}
|
|
17494
17533
|
};
|
|
17495
17534
|
if (isAnnotating && currentScreenshot) {
|
|
17496
|
-
return (React$
|
|
17535
|
+
return (React$1.createElement(AnnotationOverlay, { screenshot: currentScreenshot, onComplete: handleAnnotationComplete, onCancel: handleAnnotationCancel }));
|
|
17497
17536
|
}
|
|
17498
17537
|
// Show pin placement overlay
|
|
17499
17538
|
if (isPlacingPin) {
|
|
17500
|
-
return (React$
|
|
17501
|
-
React$
|
|
17502
|
-
React$
|
|
17503
|
-
React$
|
|
17504
|
-
React$
|
|
17505
|
-
React$
|
|
17506
|
-
React$
|
|
17507
|
-
React$
|
|
17508
|
-
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"))));
|
|
17509
17548
|
}
|
|
17510
17549
|
// Show image selection overlay
|
|
17511
17550
|
if (isSelectingImage) {
|
|
17512
|
-
return (React$
|
|
17513
|
-
React$
|
|
17514
|
-
React$
|
|
17515
|
-
React$
|
|
17516
|
-
React$
|
|
17517
|
-
React$
|
|
17518
|
-
React$
|
|
17519
|
-
React$
|
|
17520
|
-
}
|
|
17521
|
-
return (React$
|
|
17522
|
-
React$
|
|
17523
|
-
React$
|
|
17524
|
-
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" }, [
|
|
17525
17564
|
{ id: "general", label: "General" },
|
|
17526
17565
|
{ id: "copy-amendment", label: "Copy Change" },
|
|
17527
17566
|
{ id: "image-change", label: "Image Change" },
|
|
17528
|
-
].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
|
|
17529
17568
|
? "bg-[#C2D1D9] text-black shadow-md shadow-[#C2D1D9]/30"
|
|
17530
17569
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm") }, type.label))))),
|
|
17531
|
-
feedbackType === "image-change" && (React$
|
|
17532
|
-
React$
|
|
17533
|
-
React$
|
|
17534
|
-
React$
|
|
17535
|
-
React$
|
|
17536
|
-
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" })),
|
|
17537
17576
|
originalImageSrc || originalImageBackground
|
|
17538
17577
|
? "Change Image"
|
|
17539
17578
|
: "Click to Select Image"),
|
|
17540
|
-
(originalImageSrc || originalImageBackground) && (React$
|
|
17541
|
-
React$
|
|
17542
|
-
originalImageSrc ? (React$
|
|
17543
|
-
React$
|
|
17544
|
-
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" },
|
|
17545
17584
|
"Background: ",
|
|
17546
17585
|
originalImageBackground))))),
|
|
17547
|
-
React$
|
|
17548
|
-
React$
|
|
17549
|
-
React$
|
|
17550
|
-
replacementImageUrl && (React$
|
|
17551
|
-
React$
|
|
17552
|
-
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) => {
|
|
17553
17592
|
e.target.style.display = "none";
|
|
17554
17593
|
} })))))),
|
|
17555
|
-
feedbackType === "copy-amendment" && (React$
|
|
17556
|
-
React$
|
|
17557
|
-
React$
|
|
17558
|
-
React$
|
|
17559
|
-
React$
|
|
17560
|
-
React$
|
|
17561
|
-
React$
|
|
17562
|
-
feedbackType !== "copy-amendment" && (React$
|
|
17563
|
-
React$
|
|
17564
|
-
React$
|
|
17565
|
-
feedbackType !== "copy-amendment" && (React$
|
|
17566
|
-
React$
|
|
17567
|
-
React$
|
|
17568
|
-
React$
|
|
17569
|
-
React$
|
|
17570
|
-
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
|
|
17571
17610
|
? cn(priorityColors[p], "border-transparent shadow-sm")
|
|
17572
17611
|
: "bg-gray-100 text-gray-600 hover:bg-gray-200") }, p))))),
|
|
17573
|
-
annotatedScreenshot || currentScreenshot ? (React$
|
|
17574
|
-
React$
|
|
17575
|
-
React$
|
|
17576
|
-
React$
|
|
17577
|
-
React$
|
|
17578
|
-
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" }),
|
|
17579
17618
|
" Edit"),
|
|
17580
|
-
React$
|
|
17581
|
-
React$
|
|
17582
|
-
" Remove")))) : (React$
|
|
17583
|
-
React$
|
|
17584
|
-
React$
|
|
17585
|
-
"Capturing...")) : (React$
|
|
17586
|
-
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" }),
|
|
17587
17626
|
" Screenshot"))),
|
|
17588
|
-
React$
|
|
17627
|
+
React$1.createElement("div", { onClick: isRecording
|
|
17589
17628
|
? handleStopRecording
|
|
17590
|
-
: 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$
|
|
17591
|
-
React$
|
|
17592
|
-
"Stop Recording")) : (React$
|
|
17593
|
-
React$
|
|
17594
|
-
React$
|
|
17595
|
-
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" })),
|
|
17596
17635
|
"Record Screen"))))),
|
|
17597
|
-
React$
|
|
17598
|
-
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" },
|
|
17599
17638
|
"Pin Location",
|
|
17600
17639
|
" ",
|
|
17601
|
-
!pinPosition && React$
|
|
17602
|
-
pinPosition ? (React$
|
|
17603
|
-
React$
|
|
17604
|
-
React$
|
|
17605
|
-
React$
|
|
17606
|
-
React$
|
|
17607
|
-
React$
|
|
17608
|
-
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" },
|
|
17609
17648
|
"Position: (",
|
|
17610
17649
|
Math.round(pinPosition.pageX),
|
|
17611
17650
|
",",
|
|
17612
17651
|
" ",
|
|
17613
17652
|
Math.round(pinPosition.pageY),
|
|
17614
17653
|
")")),
|
|
17615
|
-
React$
|
|
17616
|
-
React$
|
|
17617
|
-
React$
|
|
17618
|
-
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" })),
|
|
17619
17658
|
"Click to place pin on page"))),
|
|
17620
|
-
recordedVideo && (React$
|
|
17621
|
-
React$
|
|
17622
|
-
React$
|
|
17623
|
-
React$
|
|
17624
|
-
React$
|
|
17625
|
-
React$
|
|
17626
|
-
designMockup ? (React$
|
|
17627
|
-
React$
|
|
17628
|
-
React$
|
|
17629
|
-
React$
|
|
17630
|
-
React$
|
|
17631
|
-
React$
|
|
17632
|
-
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" }),
|
|
17633
17672
|
" Upload Mockup")))),
|
|
17634
|
-
config.availableTags && config.availableTags.length > 0 && (React$
|
|
17635
|
-
React$
|
|
17636
|
-
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)
|
|
17637
17676
|
? "bg-[#C2D1D9] text-white shadow-md shadow-[#C2D1D9]/30"
|
|
17638
17677
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm") }, tag)))))),
|
|
17639
|
-
React$
|
|
17640
|
-
React$
|
|
17641
|
-
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) => {
|
|
17642
17681
|
const isValid = feedbackType === "copy-amendment"
|
|
17643
17682
|
? newCopy.trim()
|
|
17644
17683
|
: title.trim();
|
|
@@ -17662,9 +17701,9 @@
|
|
|
17662
17701
|
: !title.trim()) || isSubmitting
|
|
17663
17702
|
? "#9ca3af"
|
|
17664
17703
|
: "green-500",
|
|
17665
|
-
} }, isSubmitting ? (isUploadingVideo ? (React$
|
|
17666
|
-
React$
|
|
17667
|
-
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) ||
|
|
17668
17707
|
(initialData ? "Update Feedback" : "Submit Feedback"))))));
|
|
17669
17708
|
};
|
|
17670
17709
|
|
|
@@ -17689,9 +17728,9 @@
|
|
|
17689
17728
|
};
|
|
17690
17729
|
const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
17691
17730
|
const { config } = useMarkupStore();
|
|
17692
|
-
const [statusFilter, setStatusFilter] = React$
|
|
17693
|
-
const [sortBy, setSortBy] = React$
|
|
17694
|
-
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(() => {
|
|
17695
17734
|
let items = [...feedbackItems];
|
|
17696
17735
|
// Filter by status
|
|
17697
17736
|
if (statusFilter !== "all") {
|
|
@@ -17722,7 +17761,7 @@
|
|
|
17722
17761
|
return items;
|
|
17723
17762
|
}, [feedbackItems, statusFilter, sortBy]);
|
|
17724
17763
|
// Group items by page URL
|
|
17725
|
-
const groupedByPage = React$
|
|
17764
|
+
const groupedByPage = React$1.useMemo(() => {
|
|
17726
17765
|
const groups = new Map();
|
|
17727
17766
|
filteredAndSortedItems.forEach((item) => {
|
|
17728
17767
|
var _a;
|
|
@@ -17737,44 +17776,44 @@
|
|
|
17737
17776
|
.map(([url, items]) => ({ url, items }))
|
|
17738
17777
|
.sort((a, b) => b.items.length - a.items.length);
|
|
17739
17778
|
}, [filteredAndSortedItems]);
|
|
17740
|
-
return (React$
|
|
17741
|
-
React$
|
|
17742
|
-
React$
|
|
17743
|
-
React$
|
|
17744
|
-
React$
|
|
17745
|
-
React$
|
|
17746
|
-
React$
|
|
17747
|
-
React$
|
|
17748
|
-
React$
|
|
17749
|
-
React$
|
|
17750
|
-
React$
|
|
17751
|
-
React$
|
|
17752
|
-
React$
|
|
17753
|
-
React$
|
|
17754
|
-
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"
|
|
17755
17794
|
? "Try changing the filter"
|
|
17756
|
-
: "Be the first to add feedback!"))) : (React$
|
|
17757
|
-
React$
|
|
17758
|
-
React$
|
|
17759
|
-
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) => {
|
|
17760
17799
|
var _a;
|
|
17761
|
-
return (React$
|
|
17762
|
-
React$
|
|
17763
|
-
React$
|
|
17764
|
-
React$
|
|
17765
|
-
((_a = item.pageMetadata) === null || _a === void 0 ? void 0 : _a.deviceType) && (React$
|
|
17766
|
-
item.pageMetadata.deviceType === 'desktop' && (React$
|
|
17767
|
-
item.pageMetadata.deviceType === 'tablet' && (React$
|
|
17768
|
-
item.pageMetadata.deviceType === 'mobile' && (React$
|
|
17769
|
-
React$
|
|
17770
|
-
item.description && (React$
|
|
17771
|
-
React$
|
|
17772
|
-
React$
|
|
17773
|
-
React$
|
|
17774
|
-
item.type && (React$
|
|
17775
|
-
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)))));
|
|
17776
17815
|
})))))))),
|
|
17777
|
-
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" },
|
|
17778
17817
|
"Showing ",
|
|
17779
17818
|
filteredAndSortedItems.length,
|
|
17780
17819
|
" of",
|
|
@@ -40021,19 +40060,19 @@
|
|
|
40021
40060
|
const FeedbackDetail = ({ feedback: initialFeedback, onBack, onDelete, onUpdate, }) => {
|
|
40022
40061
|
var _a, _b, _c;
|
|
40023
40062
|
const { config, updateFeedback: updateFeedback$1, currentUser } = useMarkupStore();
|
|
40024
|
-
const [feedback, setFeedback] = React$
|
|
40025
|
-
const [newComment, setNewComment] = React$
|
|
40026
|
-
const [isAddingComment, setIsAddingComment] = React$
|
|
40027
|
-
const [showFullScreenshot, setShowFullScreenshot] = React$
|
|
40028
|
-
const [copied, setCopied] = React$
|
|
40029
|
-
const [isEditing, setIsEditing] = React$
|
|
40030
|
-
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);
|
|
40031
40070
|
// Feature 2 & 5 states
|
|
40032
|
-
const [showReplay, setShowReplay] = React$
|
|
40033
|
-
const [showOverlay, setShowOverlay] = React$
|
|
40034
|
-
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);
|
|
40035
40074
|
// Parse session actions
|
|
40036
|
-
const sessionActions = React$
|
|
40075
|
+
const sessionActions = React$1.useMemo(() => {
|
|
40037
40076
|
if (!feedback.sessionEvents)
|
|
40038
40077
|
return null;
|
|
40039
40078
|
try {
|
|
@@ -40085,13 +40124,13 @@
|
|
|
40085
40124
|
setIsEditing(false);
|
|
40086
40125
|
};
|
|
40087
40126
|
if (isEditing) {
|
|
40088
|
-
return (React$
|
|
40089
|
-
React$
|
|
40090
|
-
React$
|
|
40091
|
-
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" }),
|
|
40092
40131
|
"Cancel Editing")),
|
|
40093
|
-
React$
|
|
40094
|
-
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) }))));
|
|
40095
40134
|
}
|
|
40096
40135
|
const handleCopy = async () => {
|
|
40097
40136
|
const feedbackText = `
|
|
@@ -40205,37 +40244,37 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40205
40244
|
setShowDeleteConfirm(false);
|
|
40206
40245
|
};
|
|
40207
40246
|
const handleCancelDelete = () => setShowDeleteConfirm(false);
|
|
40208
|
-
return (React$
|
|
40209
|
-
React$
|
|
40210
|
-
React$
|
|
40211
|
-
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" }),
|
|
40212
40251
|
"Back"),
|
|
40213
|
-
React$
|
|
40214
|
-
React$
|
|
40215
|
-
React$
|
|
40216
|
-
"Copied!")) : (React$
|
|
40217
|
-
React$
|
|
40218
|
-
canEdit && (React$
|
|
40219
|
-
React$
|
|
40220
|
-
canDelete && onDelete && (React$
|
|
40221
|
-
React$
|
|
40222
|
-
showDeleteConfirm && (React$
|
|
40223
|
-
React$
|
|
40224
|
-
React$
|
|
40225
|
-
React$
|
|
40226
|
-
React$
|
|
40227
|
-
React$
|
|
40228
|
-
React$
|
|
40229
|
-
React$
|
|
40230
|
-
((_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" },
|
|
40231
40270
|
feedback.pageMetadata.deviceType ===
|
|
40232
|
-
"desktop" && (React$
|
|
40271
|
+
"desktop" && (React$1.createElement(DesktopIcon, { className: "w-5 h-5 text-gray-500", title: "Desktop" })),
|
|
40233
40272
|
feedback.pageMetadata.deviceType ===
|
|
40234
|
-
"tablet" && (React$
|
|
40273
|
+
"tablet" && (React$1.createElement(TabletIcon, { className: "w-5 h-5 text-gray-500", title: "Tablet" })),
|
|
40235
40274
|
feedback.pageMetadata.deviceType ===
|
|
40236
|
-
"mobile" && (React$
|
|
40237
|
-
React$
|
|
40238
|
-
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"
|
|
40239
40278
|
? "bg-brand-blue/50 text-gray-800"
|
|
40240
40279
|
: feedback.type === "bug"
|
|
40241
40280
|
? "bg-brand-pink/30 text-gray-800"
|
|
@@ -40244,136 +40283,136 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40244
40283
|
: "bg-gray-100 text-gray-700") }, feedback.type === "copy-amendment"
|
|
40245
40284
|
? "Copy"
|
|
40246
40285
|
: "General")),
|
|
40247
|
-
React$
|
|
40248
|
-
React$
|
|
40249
|
-
!isReadOnly && (React$
|
|
40250
|
-
React$
|
|
40251
|
-
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
|
|
40252
40291
|
? cn(option.color, "border-transparent")
|
|
40253
40292
|
: "bg-white text-gray-600 border-gray-200 hover:border-brand-blue") }, option.label)))))),
|
|
40254
|
-
feedback.screenshot && (React$
|
|
40255
|
-
React$
|
|
40256
|
-
React$
|
|
40257
|
-
React$
|
|
40258
|
-
React$
|
|
40259
|
-
React$
|
|
40260
|
-
React$
|
|
40261
|
-
feedback.screenRecording && (React$
|
|
40262
|
-
React$
|
|
40263
|
-
React$
|
|
40264
|
-
React$
|
|
40265
|
-
(feedback.designMockup || feedback.sessionEvents) && (React$
|
|
40266
|
-
feedback.sessionEvents && (React$
|
|
40267
|
-
feedback.designMockup && (React$
|
|
40268
|
-
feedback.type === "copy-amendment" && (React$
|
|
40269
|
-
feedback.currentCopy && (React$
|
|
40270
|
-
React$
|
|
40271
|
-
React$
|
|
40272
|
-
React$
|
|
40273
|
-
feedback.newCopy && (React$
|
|
40274
|
-
React$
|
|
40275
|
-
React$
|
|
40276
|
-
React$
|
|
40277
|
-
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,
|
|
40278
40317
|
(feedback.originalImageSrc ||
|
|
40279
|
-
feedback.originalImageBackground) && (React$
|
|
40280
|
-
React$
|
|
40281
|
-
React$
|
|
40282
|
-
React$
|
|
40283
|
-
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" },
|
|
40284
40323
|
"Background Image:",
|
|
40285
40324
|
" ",
|
|
40286
40325
|
feedback.originalImageBackground))))),
|
|
40287
|
-
feedback.replacementImageUrl && (React$
|
|
40288
|
-
React$
|
|
40289
|
-
React$
|
|
40290
|
-
React$
|
|
40291
|
-
React$
|
|
40292
|
-
feedback.description && (React$
|
|
40293
|
-
React$
|
|
40294
|
-
React$
|
|
40295
|
-
feedback.tags && feedback.tags.length > 0 && (React$
|
|
40296
|
-
React$
|
|
40297
|
-
React$
|
|
40298
|
-
feedback.pageMetadata && (React$
|
|
40299
|
-
React$
|
|
40300
|
-
React$
|
|
40301
|
-
React$
|
|
40302
|
-
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:"),
|
|
40303
40342
|
" ",
|
|
40304
40343
|
feedback.pageMetadata.url),
|
|
40305
|
-
feedback.pageMetadata.componentName && (React$
|
|
40306
|
-
React$
|
|
40344
|
+
feedback.pageMetadata.componentName && (React$1.createElement("div", { className: "truncate" },
|
|
40345
|
+
React$1.createElement("span", { className: "font-medium" }, "Component:"),
|
|
40307
40346
|
" ",
|
|
40308
|
-
React$
|
|
40309
|
-
feedback.pageMetadata.elementInfo && (React$
|
|
40310
|
-
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:"),
|
|
40311
40350
|
" ",
|
|
40312
|
-
React$
|
|
40313
|
-
React$
|
|
40314
|
-
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:"),
|
|
40315
40354
|
" ",
|
|
40316
40355
|
feedback.pageMetadata.screenWidth,
|
|
40317
40356
|
"x",
|
|
40318
40357
|
feedback.pageMetadata.screenHeight),
|
|
40319
|
-
React$
|
|
40320
|
-
React$
|
|
40358
|
+
React$1.createElement("div", null,
|
|
40359
|
+
React$1.createElement("span", { className: "font-medium" }, "User Agent:"),
|
|
40321
40360
|
" ",
|
|
40322
40361
|
feedback.pageMetadata.userAgent)))),
|
|
40323
|
-
React$
|
|
40324
|
-
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" },
|
|
40325
40364
|
"Comments (",
|
|
40326
40365
|
((_c = feedback.comments) === null || _c === void 0 ? void 0 : _c.length) || 0,
|
|
40327
40366
|
")"),
|
|
40328
|
-
feedback.comments && feedback.comments.length > 0 && (React$
|
|
40329
|
-
React$
|
|
40330
|
-
React$
|
|
40331
|
-
React$
|
|
40332
|
-
React$
|
|
40333
|
-
React$
|
|
40334
|
-
React$
|
|
40335
|
-
React$
|
|
40336
|
-
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) => {
|
|
40337
40376
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
40338
40377
|
e.preventDefault();
|
|
40339
40378
|
handleAddComment();
|
|
40340
40379
|
}
|
|
40341
40380
|
} }),
|
|
40342
|
-
React$
|
|
40343
|
-
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" }))))),
|
|
40344
40383
|
showFullScreenshot &&
|
|
40345
40384
|
feedback.screenshot &&
|
|
40346
|
-
reactDom.createPortal(React$
|
|
40347
|
-
React$
|
|
40348
|
-
React$
|
|
40349
|
-
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),
|
|
40350
40389
|
showReplay &&
|
|
40351
40390
|
sessionActions &&
|
|
40352
40391
|
sessionActions.length > 0 &&
|
|
40353
|
-
reactDom.createPortal(React$
|
|
40354
|
-
React$
|
|
40355
|
-
React$
|
|
40356
|
-
React$
|
|
40357
|
-
React$
|
|
40358
|
-
React$
|
|
40359
|
-
React$
|
|
40360
|
-
React$
|
|
40361
|
-
React$
|
|
40362
|
-
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) => {
|
|
40363
40402
|
var _a;
|
|
40364
40403
|
const baseTime = ((_a = sessionActions[0]) === null || _a === void 0 ? void 0 : _a.timestamp) ||
|
|
40365
40404
|
action.timestamp;
|
|
40366
|
-
return (React$
|
|
40367
|
-
React$
|
|
40368
|
-
React$
|
|
40369
|
-
React$
|
|
40370
|
-
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" },
|
|
40371
40410
|
action.type ===
|
|
40372
|
-
"click" && (React$
|
|
40373
|
-
React$
|
|
40374
|
-
React$
|
|
40375
|
-
React$
|
|
40376
|
-
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" },
|
|
40377
40416
|
"<",
|
|
40378
40417
|
action.data
|
|
40379
40418
|
.elementTag ||
|
|
@@ -40386,10 +40425,10 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40386
40425
|
` class="${action.data.elementClass}"`,
|
|
40387
40426
|
">"),
|
|
40388
40427
|
action.data
|
|
40389
|
-
.elementText && (React$
|
|
40428
|
+
.elementText && (React$1.createElement("div", { className: "mt-1 text-sm text-gray-600" },
|
|
40390
40429
|
"Text:",
|
|
40391
40430
|
" ",
|
|
40392
|
-
React$
|
|
40431
|
+
React$1.createElement("span", { className: "italic" },
|
|
40393
40432
|
"\"",
|
|
40394
40433
|
action.data.elementText.substring(0, 100),
|
|
40395
40434
|
action
|
|
@@ -40401,19 +40440,19 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40401
40440
|
: "",
|
|
40402
40441
|
"\""))))),
|
|
40403
40442
|
action.type ===
|
|
40404
|
-
"navigation" && (React$
|
|
40405
|
-
React$
|
|
40406
|
-
React$
|
|
40407
|
-
React$
|
|
40408
|
-
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
|
|
40409
40448
|
.data
|
|
40410
40449
|
.url))),
|
|
40411
40450
|
action.type ===
|
|
40412
|
-
"scroll" && (React$
|
|
40413
|
-
React$
|
|
40414
|
-
React$
|
|
40415
|
-
React$
|
|
40416
|
-
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" },
|
|
40417
40456
|
"Position:",
|
|
40418
40457
|
" ",
|
|
40419
40458
|
action
|
|
@@ -40421,11 +40460,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40421
40460
|
.scrollY,
|
|
40422
40461
|
"px"))),
|
|
40423
40462
|
action.type ===
|
|
40424
|
-
"input" && (React$
|
|
40425
|
-
React$
|
|
40426
|
-
React$
|
|
40427
|
-
React$
|
|
40428
|
-
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" },
|
|
40429
40468
|
action
|
|
40430
40469
|
.data
|
|
40431
40470
|
.inputType,
|
|
@@ -40434,13 +40473,13 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40434
40473
|
}))))), document.body),
|
|
40435
40474
|
showOverlay &&
|
|
40436
40475
|
feedback.designMockup &&
|
|
40437
|
-
reactDom.createPortal(React$
|
|
40438
|
-
React$
|
|
40439
|
-
React$
|
|
40440
|
-
React$
|
|
40441
|
-
React$
|
|
40442
|
-
React$
|
|
40443
|
-
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)));
|
|
40444
40483
|
};
|
|
40445
40484
|
|
|
40446
40485
|
const signUp = async (email, password) => {
|
|
@@ -40483,11 +40522,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40483
40522
|
};
|
|
40484
40523
|
|
|
40485
40524
|
const AuthForm = ({ onSuccess }) => {
|
|
40486
|
-
const [mode, setMode] = React$
|
|
40487
|
-
const [email, setEmail] = React$
|
|
40488
|
-
const [password, setPassword] = React$
|
|
40489
|
-
const [error, setError] = React$
|
|
40490
|
-
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);
|
|
40491
40530
|
const handleSubmit = async (e) => {
|
|
40492
40531
|
e.preventDefault();
|
|
40493
40532
|
setError(null);
|
|
@@ -40548,8 +40587,8 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40548
40587
|
];
|
|
40549
40588
|
const ViewportControls = () => {
|
|
40550
40589
|
const { viewportMode, setViewportMode, isOpen: isWidgetOpen } = useMarkupStore();
|
|
40551
|
-
const [isExpanded, setIsExpanded] = React$
|
|
40552
|
-
const dropdownRef = React$
|
|
40590
|
+
const [isExpanded, setIsExpanded] = React$1.useState(false);
|
|
40591
|
+
const dropdownRef = React$1.useRef(null);
|
|
40553
40592
|
const handlePresetClick = (preset) => {
|
|
40554
40593
|
setViewportMode({ width: preset.width, height: preset.height });
|
|
40555
40594
|
setIsExpanded(false);
|
|
@@ -40562,7 +40601,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40562
40601
|
return (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.width) === preset.width && (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.height) === preset.height;
|
|
40563
40602
|
};
|
|
40564
40603
|
// Close dropdown on outside click
|
|
40565
|
-
React$
|
|
40604
|
+
React$1.useEffect(() => {
|
|
40566
40605
|
if (!isExpanded)
|
|
40567
40606
|
return;
|
|
40568
40607
|
const handleClickOutside = (event) => {
|
|
@@ -40574,7 +40613,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40574
40613
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
40575
40614
|
}, [isExpanded]);
|
|
40576
40615
|
// Handle ESC key to close dropdown or reset viewport
|
|
40577
|
-
React$
|
|
40616
|
+
React$1.useEffect(() => {
|
|
40578
40617
|
const handleKeyDown = (event) => {
|
|
40579
40618
|
if (event.key === 'Escape') {
|
|
40580
40619
|
if (isExpanded) {
|
|
@@ -40593,49 +40632,49 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40593
40632
|
// Don't show controls when widget is not open
|
|
40594
40633
|
if (!isWidgetOpen)
|
|
40595
40634
|
return null;
|
|
40596
|
-
return (React$
|
|
40597
|
-
!viewportMode ? (React$
|
|
40598
|
-
React$
|
|
40599
|
-
"Responsive Mode")) : (React$
|
|
40600
|
-
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" },
|
|
40601
40640
|
viewportMode.width,
|
|
40602
40641
|
" \u00D7 ",
|
|
40603
40642
|
viewportMode.height),
|
|
40604
|
-
React$
|
|
40605
|
-
React$
|
|
40606
|
-
React$
|
|
40607
|
-
isExpanded && (React$
|
|
40608
|
-
React$
|
|
40609
|
-
React$
|
|
40610
|
-
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)
|
|
40611
40650
|
? "bg-blue-50 border border-blue-200"
|
|
40612
40651
|
: "hover:bg-gray-100") },
|
|
40613
|
-
React$
|
|
40614
|
-
React$
|
|
40615
|
-
React$
|
|
40616
|
-
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" },
|
|
40617
40656
|
preset.width,
|
|
40618
40657
|
" \u00D7 ",
|
|
40619
40658
|
preset.height))))),
|
|
40620
|
-
React$
|
|
40621
|
-
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)
|
|
40622
40661
|
? "bg-blue-50 border border-blue-200"
|
|
40623
40662
|
: "hover:bg-gray-100") },
|
|
40624
|
-
React$
|
|
40625
|
-
React$
|
|
40626
|
-
React$
|
|
40627
|
-
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" },
|
|
40628
40667
|
preset.width,
|
|
40629
40668
|
" \u00D7 ",
|
|
40630
40669
|
preset.height))))),
|
|
40631
|
-
React$
|
|
40632
|
-
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)
|
|
40633
40672
|
? "bg-blue-50 border border-blue-200"
|
|
40634
40673
|
: "hover:bg-gray-100") },
|
|
40635
|
-
React$
|
|
40636
|
-
React$
|
|
40637
|
-
React$
|
|
40638
|
-
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" },
|
|
40639
40678
|
preset.width,
|
|
40640
40679
|
" \u00D7 ",
|
|
40641
40680
|
preset.height))))))))));
|
|
@@ -40643,8 +40682,8 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40643
40682
|
|
|
40644
40683
|
const FeedbackPins = ({ onPinClick }) => {
|
|
40645
40684
|
const { feedbackItems, showPins } = useMarkupStore();
|
|
40646
|
-
const [docSize, setDocSize] = React$
|
|
40647
|
-
React$
|
|
40685
|
+
const [docSize, setDocSize] = React$1.useState({ width: 0, height: 0 });
|
|
40686
|
+
React$1.useEffect(() => {
|
|
40648
40687
|
const measure = () => {
|
|
40649
40688
|
const root = document.documentElement;
|
|
40650
40689
|
const body = document.body;
|
|
@@ -40667,7 +40706,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40667
40706
|
};
|
|
40668
40707
|
}, []);
|
|
40669
40708
|
// Filter pins for current page URL
|
|
40670
|
-
const currentPagePins = React$
|
|
40709
|
+
const currentPagePins = React$1.useMemo(() => {
|
|
40671
40710
|
const currentUrl = window.location.href;
|
|
40672
40711
|
return feedbackItems.filter(item => {
|
|
40673
40712
|
var _a;
|
|
@@ -40694,7 +40733,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40694
40733
|
pointerEvents: 'none',
|
|
40695
40734
|
zIndex: 999998,
|
|
40696
40735
|
};
|
|
40697
|
-
return (React$
|
|
40736
|
+
return (React$1.createElement("div", { className: "feedback-pins-container", "data-markup-pins": true, style: containerStyle }, currentPagePins.map((feedback) => {
|
|
40698
40737
|
const { pinLocation } = feedback;
|
|
40699
40738
|
if (!pinLocation)
|
|
40700
40739
|
return null;
|
|
@@ -40717,20 +40756,20 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40717
40756
|
transform: 'translate(-50%, -50%)',
|
|
40718
40757
|
pointerEvents: 'auto',
|
|
40719
40758
|
};
|
|
40720
|
-
return (React$
|
|
40721
|
-
React$
|
|
40722
|
-
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: `
|
|
40723
40762
|
w-8 h-8 rounded-full flex items-center justify-center
|
|
40724
40763
|
shadow-lg hover:shadow-xl transition-all
|
|
40725
40764
|
${feedback.status === 'open' ? 'bg-[#E6B6CF] hover:bg-[#d9a3c0]' : 'bg-green-500 hover:bg-green-600'}
|
|
40726
40765
|
border-2 border-white
|
|
40727
40766
|
hover:scale-110
|
|
40728
40767
|
` },
|
|
40729
|
-
React$
|
|
40730
|
-
React$
|
|
40731
|
-
React$
|
|
40732
|
-
React$
|
|
40733
|
-
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 " })))));
|
|
40734
40773
|
}
|
|
40735
40774
|
finally { }
|
|
40736
40775
|
}
|
|
@@ -40744,7 +40783,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40744
40783
|
const setFeedbackItems = useMarkupStore((state) => state.setFeedbackItems);
|
|
40745
40784
|
const isAuthenticated = useMarkupStore((state) => state.isAuthenticated);
|
|
40746
40785
|
// Auth state listener
|
|
40747
|
-
React$
|
|
40786
|
+
React$1.useEffect(() => {
|
|
40748
40787
|
// Check if Firebase is initialized by checking if any apps exist
|
|
40749
40788
|
if (getApps().length === 0) {
|
|
40750
40789
|
console.warn('Firebase not initialized. Call initFirebase() at app root or authentication will be disabled.');
|
|
@@ -40795,7 +40834,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40795
40834
|
};
|
|
40796
40835
|
}, [setCurrentUser, setIsAuthenticated]);
|
|
40797
40836
|
// Feedback subscription listener
|
|
40798
|
-
React$
|
|
40837
|
+
React$1.useEffect(() => {
|
|
40799
40838
|
console.log('🔄 Feedback subscription effect running...', {
|
|
40800
40839
|
firebaseApps: getApps().length,
|
|
40801
40840
|
projectId: config.projectId,
|
|
@@ -40832,9 +40871,9 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40832
40871
|
};
|
|
40833
40872
|
|
|
40834
40873
|
const useSessionRecording = () => {
|
|
40835
|
-
const actionsRef = React$
|
|
40874
|
+
const actionsRef = React$1.useRef([]);
|
|
40836
40875
|
const maxActions = 50; // Keep last 50 actions
|
|
40837
|
-
React$
|
|
40876
|
+
React$1.useEffect(() => {
|
|
40838
40877
|
if (typeof window === 'undefined')
|
|
40839
40878
|
return;
|
|
40840
40879
|
const recordAction = (action) => {
|
|
@@ -40919,13 +40958,13 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40919
40958
|
clearTimeout(scrollTimeout);
|
|
40920
40959
|
};
|
|
40921
40960
|
}, []);
|
|
40922
|
-
const getSessionEvents = React$
|
|
40961
|
+
const getSessionEvents = React$1.useCallback(() => {
|
|
40923
40962
|
if (actionsRef.current.length === 0) {
|
|
40924
40963
|
return undefined;
|
|
40925
40964
|
}
|
|
40926
40965
|
return JSON.stringify(actionsRef.current);
|
|
40927
40966
|
}, []);
|
|
40928
|
-
const clearSession = React$
|
|
40967
|
+
const clearSession = React$1.useCallback(() => {
|
|
40929
40968
|
actionsRef.current = [];
|
|
40930
40969
|
}, []);
|
|
40931
40970
|
return {
|
|
@@ -40937,7 +40976,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40937
40976
|
const MarkupWidget = ({ config: userConfig, }) => {
|
|
40938
40977
|
var _a;
|
|
40939
40978
|
// Initialize Firebase synchronously on first render only
|
|
40940
|
-
const initRef = React$
|
|
40979
|
+
const initRef = React$1.useRef(false);
|
|
40941
40980
|
if (!initRef.current && (userConfig === null || userConfig === void 0 ? void 0 : userConfig.firebaseConfig) && getApps().length === 0) {
|
|
40942
40981
|
try {
|
|
40943
40982
|
initializeFirebase(userConfig.firebaseConfig);
|
|
@@ -40954,9 +40993,9 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40954
40993
|
// Initialize Session Recording (Feature 2)
|
|
40955
40994
|
const { getSessionEvents } = useSessionRecording();
|
|
40956
40995
|
// Track last clicked element for component detection (Feature 4)
|
|
40957
|
-
const lastClickedElementRef = React$
|
|
40958
|
-
const [lastClickedText, setLastClickedText] = React$
|
|
40959
|
-
React$
|
|
40996
|
+
const lastClickedElementRef = React$1.useRef(null);
|
|
40997
|
+
const [lastClickedText, setLastClickedText] = React$1.useState('');
|
|
40998
|
+
React$1.useEffect(() => {
|
|
40960
40999
|
const handleClick = (e) => {
|
|
40961
41000
|
var _a;
|
|
40962
41001
|
// Store the clicked element (but ignore clicks on the widget itself)
|
|
@@ -40991,7 +41030,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40991
41030
|
return () => document.removeEventListener('click', handleClick, true);
|
|
40992
41031
|
}, []);
|
|
40993
41032
|
// Apply viewport mode styling to document (like browser dev tools)
|
|
40994
|
-
React$
|
|
41033
|
+
React$1.useEffect(() => {
|
|
40995
41034
|
if (viewportMode) {
|
|
40996
41035
|
const root = document.documentElement;
|
|
40997
41036
|
const body = document.body;
|
|
@@ -41018,12 +41057,12 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41018
41057
|
};
|
|
41019
41058
|
}
|
|
41020
41059
|
}, [viewportMode]);
|
|
41021
|
-
React$
|
|
41060
|
+
React$1.useEffect(() => {
|
|
41022
41061
|
if (userConfig) {
|
|
41023
41062
|
setConfig(userConfig);
|
|
41024
41063
|
}
|
|
41025
41064
|
}, [userConfig, setConfig]);
|
|
41026
|
-
React$
|
|
41065
|
+
React$1.useEffect(() => {
|
|
41027
41066
|
const handleKeyDown = (e) => {
|
|
41028
41067
|
const shortcut = config.shortcut || "ctrl+shift+m";
|
|
41029
41068
|
const keys = shortcut.split("+").map((k) => k.trim().toLowerCase());
|
|
@@ -41042,7 +41081,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41042
41081
|
document.addEventListener("keydown", handleKeyDown);
|
|
41043
41082
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
41044
41083
|
}, [config.shortcut, isOpen, setIsOpen]);
|
|
41045
|
-
const handleToggle = React$
|
|
41084
|
+
const handleToggle = React$1.useCallback(() => {
|
|
41046
41085
|
if (!isOpen) {
|
|
41047
41086
|
setIsOpen(true);
|
|
41048
41087
|
}
|
|
@@ -41052,7 +41091,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41052
41091
|
setActiveTab("create");
|
|
41053
41092
|
}
|
|
41054
41093
|
}, [isOpen, setIsOpen, setSelectedFeedback, setActiveTab]);
|
|
41055
|
-
const handleSubmitFeedback = React$
|
|
41094
|
+
const handleSubmitFeedback = React$1.useCallback(async (feedback) => {
|
|
41056
41095
|
try {
|
|
41057
41096
|
const currentUser = getCurrentUser();
|
|
41058
41097
|
console.log("Submitting feedback:", {
|
|
@@ -41080,11 +41119,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41080
41119
|
}
|
|
41081
41120
|
setActiveTab("list");
|
|
41082
41121
|
}, [addFeedbackItem, setActiveTab, config.projectId]);
|
|
41083
|
-
const handleCancel = React$
|
|
41122
|
+
const handleCancel = React$1.useCallback(() => {
|
|
41084
41123
|
reset();
|
|
41085
41124
|
setIsOpen(false);
|
|
41086
41125
|
}, [reset, setIsOpen]);
|
|
41087
|
-
const handleSelectFeedback = React$
|
|
41126
|
+
const handleSelectFeedback = React$1.useCallback((feedback) => {
|
|
41088
41127
|
setSelectedFeedback(feedback);
|
|
41089
41128
|
// Scroll to pin location
|
|
41090
41129
|
if (feedback.pinLocation) {
|
|
@@ -41106,7 +41145,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41106
41145
|
});
|
|
41107
41146
|
}
|
|
41108
41147
|
}, [setSelectedFeedback]);
|
|
41109
|
-
const handlePinClick = React$
|
|
41148
|
+
const handlePinClick = React$1.useCallback((feedback) => {
|
|
41110
41149
|
setIsOpen(true);
|
|
41111
41150
|
setActiveTab("list");
|
|
41112
41151
|
setSelectedFeedback(feedback);
|
|
@@ -41130,11 +41169,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41130
41169
|
});
|
|
41131
41170
|
}
|
|
41132
41171
|
}, [setIsOpen, setActiveTab, setSelectedFeedback]);
|
|
41133
|
-
const handleBackFromDetail = React$
|
|
41172
|
+
const handleBackFromDetail = React$1.useCallback(() => {
|
|
41134
41173
|
setSelectedFeedback(null);
|
|
41135
41174
|
setViewportMode(null);
|
|
41136
41175
|
}, [setSelectedFeedback, setViewportMode]);
|
|
41137
|
-
const handleLogout = React$
|
|
41176
|
+
const handleLogout = React$1.useCallback(async () => {
|
|
41138
41177
|
try {
|
|
41139
41178
|
await logOut();
|
|
41140
41179
|
reset();
|
|
@@ -41143,10 +41182,10 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41143
41182
|
console.error("Logout failed:", error);
|
|
41144
41183
|
}
|
|
41145
41184
|
}, [reset]);
|
|
41146
|
-
const handleAuthSuccess = React$
|
|
41185
|
+
const handleAuthSuccess = React$1.useCallback(() => {
|
|
41147
41186
|
setActiveTab("create");
|
|
41148
41187
|
}, [setActiveTab]);
|
|
41149
|
-
const handleDeleteFeedback = React$
|
|
41188
|
+
const handleDeleteFeedback = React$1.useCallback(async (id) => {
|
|
41150
41189
|
// Find the feedback item to get storage URLs
|
|
41151
41190
|
const feedbackToDelete = feedbackItems.find(f => f.id === id);
|
|
41152
41191
|
// Delete associated storage files
|
|
@@ -41161,7 +41200,7 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41161
41200
|
removeFeedbackItem(id);
|
|
41162
41201
|
setSelectedFeedback(null);
|
|
41163
41202
|
}, [removeFeedbackItem, setSelectedFeedback, feedbackItems]);
|
|
41164
|
-
const handleUpdateFeedback = React$
|
|
41203
|
+
const handleUpdateFeedback = React$1.useCallback((updatedFeedback) => {
|
|
41165
41204
|
updateFeedback(updatedFeedback);
|
|
41166
41205
|
// Also update selected feedback if it's the same one (it should be)
|
|
41167
41206
|
setSelectedFeedback(updatedFeedback);
|
|
@@ -41173,49 +41212,49 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41173
41212
|
? adjustColor(config.primaryColor, -20)
|
|
41174
41213
|
: "#4f46e5",
|
|
41175
41214
|
});
|
|
41176
|
-
return (React$
|
|
41177
|
-
React$
|
|
41178
|
-
React$
|
|
41179
|
-
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: {
|
|
41180
41219
|
transform: isOpen
|
|
41181
41220
|
? "translateY(-50%) translateX(0)"
|
|
41182
41221
|
: "translateY(-50%) translateX(calc(100% - 40px))",
|
|
41183
41222
|
}, "data-markup-widget": true },
|
|
41184
|
-
React$
|
|
41185
|
-
isOpen && React$
|
|
41186
|
-
React$
|
|
41187
|
-
openFeedbackCount > 0 && (React$
|
|
41188
|
-
React$
|
|
41189
|
-
React$
|
|
41190
|
-
React$
|
|
41191
|
-
React$
|
|
41192
|
-
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) => {
|
|
41193
41232
|
e.stopPropagation();
|
|
41194
41233
|
setShowPins(!showPins);
|
|
41195
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" },
|
|
41196
|
-
React$
|
|
41197
|
-
React$
|
|
41198
|
-
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" })),
|
|
41199
41238
|
showPins ? 'Hide' : 'Show'),
|
|
41200
|
-
isAuthenticated && currentUser && (React$
|
|
41201
|
-
React$
|
|
41202
|
-
!isAuthenticated ? (React$
|
|
41203
|
-
React$
|
|
41204
|
-
React$
|
|
41205
|
-
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"
|
|
41206
41245
|
? "bg-gray-200"
|
|
41207
41246
|
: "border-white"), onClick: () => setActiveTab("create") },
|
|
41208
|
-
React$
|
|
41247
|
+
React$1.createElement(PlusIcon, { className: "w-3.5 h-3.5" }),
|
|
41209
41248
|
"New"),
|
|
41210
|
-
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"
|
|
41211
41250
|
? "bg-gray-200"
|
|
41212
41251
|
: "border-white"), onClick: () => setActiveTab("list") },
|
|
41213
41252
|
"View All (",
|
|
41214
41253
|
feedbackItems.length,
|
|
41215
41254
|
")")),
|
|
41216
|
-
React$
|
|
41217
|
-
activeTab === "create" && (React$
|
|
41218
|
-
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 })))))))));
|
|
41219
41258
|
};
|
|
41220
41259
|
function adjustColor(color, amount) {
|
|
41221
41260
|
const clamp = (val) => Math.min(255, Math.max(0, val));
|
|
@@ -41246,8 +41285,8 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
41246
41285
|
}
|
|
41247
41286
|
// Create React root and mount widget
|
|
41248
41287
|
root = ReactDOM.createRoot(container);
|
|
41249
|
-
root.render(React$
|
|
41250
|
-
React$
|
|
41288
|
+
root.render(React$1.createElement(React$1.StrictMode, null,
|
|
41289
|
+
React$1.createElement(MarkupWidget, { config: config })));
|
|
41251
41290
|
}
|
|
41252
41291
|
function open() {
|
|
41253
41292
|
// Implementation would open the widget UI
|