@sirendesign/markup 1.0.22 → 1.0.23
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 +675 -714
- package/dist/markup-widget.esm.js.map +1 -1
- package/dist/markup-widget.js +688 -727
- package/dist/markup-widget.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React$
|
|
1
|
+
import React$3, { useRef as useRef$1, useState as useState$1, useEffect as useEffect$2, useCallback, useMemo as useMemo$1 } from 'react';
|
|
2
2
|
import ReactDOM from 'react-dom/client';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
4
|
|
|
@@ -41,214 +41,175 @@ function getDefaultExportFromCjs (x) {
|
|
|
41
41
|
|
|
42
42
|
var withSelector = {exports: {}};
|
|
43
43
|
|
|
44
|
-
var
|
|
44
|
+
var withSelector_production = {};
|
|
45
45
|
|
|
46
|
-
var shim = {exports: {}};
|
|
46
|
+
var shim$2 = {exports: {}};
|
|
47
47
|
|
|
48
|
-
var
|
|
48
|
+
var useSyncExternalStoreShim_production = {};
|
|
49
49
|
|
|
50
50
|
/**
|
|
51
51
|
* @license React
|
|
52
|
-
* use-sync-external-store-shim.
|
|
52
|
+
* use-sync-external-store-shim.production.js
|
|
53
53
|
*
|
|
54
54
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
55
55
|
*
|
|
56
56
|
* This source code is licensed under the MIT license found in the
|
|
57
57
|
* LICENSE file in the root directory of this source tree.
|
|
58
58
|
*/
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
59
|
+
var React$2 = React$3;
|
|
60
|
+
function is$1(x, y) {
|
|
61
|
+
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
62
|
+
}
|
|
63
|
+
var objectIs$1 = "function" === typeof Object.is ? Object.is : is$1,
|
|
64
|
+
useState = React$2.useState,
|
|
65
|
+
useEffect$1 = React$2.useEffect,
|
|
66
|
+
useLayoutEffect = React$2.useLayoutEffect,
|
|
67
|
+
useDebugValue$2 = React$2.useDebugValue;
|
|
68
|
+
function useSyncExternalStore$2(subscribe, getSnapshot) {
|
|
69
|
+
var value = getSnapshot(),
|
|
70
|
+
_useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
|
|
71
|
+
inst = _useState[0].inst,
|
|
72
|
+
forceUpdate = _useState[1];
|
|
73
|
+
useLayoutEffect(
|
|
74
|
+
function () {
|
|
75
|
+
inst.value = value;
|
|
76
|
+
inst.getSnapshot = getSnapshot;
|
|
77
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
78
|
+
},
|
|
79
|
+
[subscribe, value, getSnapshot]
|
|
80
|
+
);
|
|
81
|
+
useEffect$1(
|
|
82
|
+
function () {
|
|
83
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
84
|
+
return subscribe(function () {
|
|
85
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
81
86
|
});
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
return !objectIs(inst, nextValue);
|
|
110
|
-
} catch (error) {
|
|
111
|
-
return true;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
115
|
-
return getSnapshot();
|
|
116
|
-
}
|
|
117
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
118
|
-
"function" ===
|
|
119
|
-
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
|
|
120
|
-
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
121
|
-
var React = React$1,
|
|
122
|
-
objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
123
|
-
useState = React.useState,
|
|
124
|
-
useEffect = React.useEffect,
|
|
125
|
-
useLayoutEffect = React.useLayoutEffect,
|
|
126
|
-
useDebugValue = React.useDebugValue,
|
|
127
|
-
didWarnOld18Alpha = false,
|
|
128
|
-
didWarnUncachedGetSnapshot = false,
|
|
129
|
-
shim =
|
|
130
|
-
"undefined" === typeof window ||
|
|
131
|
-
"undefined" === typeof window.document ||
|
|
132
|
-
"undefined" === typeof window.document.createElement
|
|
133
|
-
? useSyncExternalStore$1
|
|
134
|
-
: useSyncExternalStore$2;
|
|
135
|
-
useSyncExternalStoreShim_development.useSyncExternalStore =
|
|
136
|
-
void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
|
|
137
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
138
|
-
"function" ===
|
|
139
|
-
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
|
|
140
|
-
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
141
|
-
}))();
|
|
87
|
+
},
|
|
88
|
+
[subscribe]
|
|
89
|
+
);
|
|
90
|
+
useDebugValue$2(value);
|
|
91
|
+
return value;
|
|
92
|
+
}
|
|
93
|
+
function checkIfSnapshotChanged(inst) {
|
|
94
|
+
var latestGetSnapshot = inst.getSnapshot;
|
|
95
|
+
inst = inst.value;
|
|
96
|
+
try {
|
|
97
|
+
var nextValue = latestGetSnapshot();
|
|
98
|
+
return !objectIs$1(inst, nextValue);
|
|
99
|
+
} catch (error) {
|
|
100
|
+
return true;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
104
|
+
return getSnapshot();
|
|
105
|
+
}
|
|
106
|
+
var shim$1 =
|
|
107
|
+
"undefined" === typeof window ||
|
|
108
|
+
"undefined" === typeof window.document ||
|
|
109
|
+
"undefined" === typeof window.document.createElement
|
|
110
|
+
? useSyncExternalStore$1
|
|
111
|
+
: useSyncExternalStore$2;
|
|
112
|
+
useSyncExternalStoreShim_production.useSyncExternalStore =
|
|
113
|
+
void 0 !== React$2.useSyncExternalStore ? React$2.useSyncExternalStore : shim$1;
|
|
142
114
|
|
|
143
115
|
{
|
|
144
|
-
shim.exports =
|
|
116
|
+
shim$2.exports = useSyncExternalStoreShim_production;
|
|
145
117
|
}
|
|
146
118
|
|
|
147
|
-
var shimExports = shim.exports;
|
|
119
|
+
var shimExports = shim$2.exports;
|
|
148
120
|
|
|
149
121
|
/**
|
|
150
122
|
* @license React
|
|
151
|
-
* use-sync-external-store-shim/with-selector.
|
|
123
|
+
* use-sync-external-store-shim/with-selector.production.js
|
|
152
124
|
*
|
|
153
125
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
154
126
|
*
|
|
155
127
|
* This source code is licensed under the MIT license found in the
|
|
156
128
|
* LICENSE file in the root directory of this source tree.
|
|
157
129
|
*/
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
nextSnapshot = selector(nextSnapshot);
|
|
193
|
-
if (void 0 !== isEqual && inst.hasValue) {
|
|
194
|
-
var currentSelection = inst.value;
|
|
195
|
-
if (isEqual(currentSelection, nextSnapshot))
|
|
196
|
-
return (memoizedSelection = currentSelection);
|
|
197
|
-
}
|
|
198
|
-
return (memoizedSelection = nextSnapshot);
|
|
199
|
-
}
|
|
200
|
-
currentSelection = memoizedSelection;
|
|
201
|
-
if (objectIs(memoizedSnapshot, nextSnapshot))
|
|
202
|
-
return currentSelection;
|
|
203
|
-
var nextSelection = selector(nextSnapshot);
|
|
204
|
-
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
205
|
-
return (memoizedSnapshot = nextSnapshot), currentSelection;
|
|
206
|
-
memoizedSnapshot = nextSnapshot;
|
|
207
|
-
return (memoizedSelection = nextSelection);
|
|
130
|
+
var React$1 = React$3,
|
|
131
|
+
shim = shimExports;
|
|
132
|
+
function is(x, y) {
|
|
133
|
+
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
134
|
+
}
|
|
135
|
+
var objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
136
|
+
useSyncExternalStore = shim.useSyncExternalStore,
|
|
137
|
+
useRef = React$1.useRef,
|
|
138
|
+
useEffect = React$1.useEffect,
|
|
139
|
+
useMemo = React$1.useMemo,
|
|
140
|
+
useDebugValue$1 = React$1.useDebugValue;
|
|
141
|
+
withSelector_production.useSyncExternalStoreWithSelector = function (
|
|
142
|
+
subscribe,
|
|
143
|
+
getSnapshot,
|
|
144
|
+
getServerSnapshot,
|
|
145
|
+
selector,
|
|
146
|
+
isEqual
|
|
147
|
+
) {
|
|
148
|
+
var instRef = useRef(null);
|
|
149
|
+
if (null === instRef.current) {
|
|
150
|
+
var inst = { hasValue: false, value: null };
|
|
151
|
+
instRef.current = inst;
|
|
152
|
+
} else inst = instRef.current;
|
|
153
|
+
instRef = useMemo(
|
|
154
|
+
function () {
|
|
155
|
+
function memoizedSelector(nextSnapshot) {
|
|
156
|
+
if (!hasMemo) {
|
|
157
|
+
hasMemo = true;
|
|
158
|
+
memoizedSnapshot = nextSnapshot;
|
|
159
|
+
nextSnapshot = selector(nextSnapshot);
|
|
160
|
+
if (void 0 !== isEqual && inst.hasValue) {
|
|
161
|
+
var currentSelection = inst.value;
|
|
162
|
+
if (isEqual(currentSelection, nextSnapshot))
|
|
163
|
+
return (memoizedSelection = currentSelection);
|
|
208
164
|
}
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
226
|
-
);
|
|
227
|
-
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
228
|
-
useEffect(
|
|
165
|
+
return (memoizedSelection = nextSnapshot);
|
|
166
|
+
}
|
|
167
|
+
currentSelection = memoizedSelection;
|
|
168
|
+
if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
|
|
169
|
+
var nextSelection = selector(nextSnapshot);
|
|
170
|
+
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
171
|
+
return (memoizedSnapshot = nextSnapshot), currentSelection;
|
|
172
|
+
memoizedSnapshot = nextSnapshot;
|
|
173
|
+
return (memoizedSelection = nextSelection);
|
|
174
|
+
}
|
|
175
|
+
var hasMemo = false,
|
|
176
|
+
memoizedSnapshot,
|
|
177
|
+
memoizedSelection,
|
|
178
|
+
maybeGetServerSnapshot =
|
|
179
|
+
void 0 === getServerSnapshot ? null : getServerSnapshot;
|
|
180
|
+
return [
|
|
229
181
|
function () {
|
|
230
|
-
|
|
231
|
-
inst.value = value;
|
|
182
|
+
return memoizedSelector(getSnapshot());
|
|
232
183
|
},
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
184
|
+
null === maybeGetServerSnapshot
|
|
185
|
+
? void 0
|
|
186
|
+
: function () {
|
|
187
|
+
return memoizedSelector(maybeGetServerSnapshot());
|
|
188
|
+
}
|
|
189
|
+
];
|
|
190
|
+
},
|
|
191
|
+
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
192
|
+
);
|
|
193
|
+
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
194
|
+
useEffect(
|
|
195
|
+
function () {
|
|
196
|
+
inst.hasValue = true;
|
|
197
|
+
inst.value = value;
|
|
198
|
+
},
|
|
199
|
+
[value]
|
|
200
|
+
);
|
|
201
|
+
useDebugValue$1(value);
|
|
202
|
+
return value;
|
|
203
|
+
};
|
|
243
204
|
|
|
244
205
|
{
|
|
245
|
-
withSelector.exports =
|
|
206
|
+
withSelector.exports = withSelector_production;
|
|
246
207
|
}
|
|
247
208
|
|
|
248
209
|
var withSelectorExports = withSelector.exports;
|
|
249
210
|
var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
|
|
250
211
|
|
|
251
|
-
const { useDebugValue } = React$
|
|
212
|
+
const { useDebugValue } = React$3;
|
|
252
213
|
const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
|
|
253
214
|
let didWarnAboutEqualityFn = false;
|
|
254
215
|
const identity = (arg) => arg;
|
|
@@ -16740,80 +16701,80 @@ const deleteScreenRecording = async (downloadURL) => {
|
|
|
16740
16701
|
}
|
|
16741
16702
|
};
|
|
16742
16703
|
|
|
16743
|
-
const MessageIcon = ({ className, ...props }) => (React$
|
|
16744
|
-
React$
|
|
16745
|
-
const CloseIcon = ({ className, ...props }) => (React$
|
|
16746
|
-
React$
|
|
16747
|
-
React$
|
|
16748
|
-
const CameraIcon = ({ className, ...props }) => (React$
|
|
16749
|
-
React$
|
|
16750
|
-
React$
|
|
16751
|
-
const CircleIcon = ({ className, ...props }) => (React$
|
|
16752
|
-
React$
|
|
16753
|
-
const PencilIcon = ({ className, ...props }) => (React$
|
|
16754
|
-
React$
|
|
16755
|
-
const UndoIcon = ({ className, ...props }) => (React$
|
|
16756
|
-
React$
|
|
16757
|
-
React$
|
|
16758
|
-
const CheckIcon = ({ className, ...props }) => (React$
|
|
16759
|
-
React$
|
|
16760
|
-
const TrashIcon = ({ className, ...props }) => (React$
|
|
16761
|
-
React$
|
|
16762
|
-
React$
|
|
16763
|
-
const EditIcon = ({ className, ...props }) => (React$
|
|
16764
|
-
React$
|
|
16765
|
-
React$
|
|
16766
|
-
const CopyIcon = ({ className, ...props }) => (React$
|
|
16767
|
-
React$
|
|
16768
|
-
React$
|
|
16769
|
-
const InboxIcon = ({ className, ...props }) => (React$
|
|
16770
|
-
React$
|
|
16771
|
-
React$
|
|
16772
|
-
const SendIcon = ({ className, ...props }) => (React$
|
|
16773
|
-
React$
|
|
16774
|
-
React$
|
|
16775
|
-
const PlusIcon = ({ className, ...props }) => (React$
|
|
16776
|
-
React$
|
|
16777
|
-
React$
|
|
16778
|
-
const FilterIcon = ({ className, ...props }) => (React$
|
|
16779
|
-
React$
|
|
16780
|
-
const SquareIcon = ({ className, ...props }) => (React$
|
|
16781
|
-
React$
|
|
16782
|
-
const ArrowRightIcon = ({ className, ...props }) => (React$
|
|
16783
|
-
React$
|
|
16784
|
-
React$
|
|
16785
|
-
const TypeIcon = ({ className, ...props }) => (React$
|
|
16786
|
-
React$
|
|
16787
|
-
React$
|
|
16788
|
-
React$
|
|
16789
|
-
const ArrowLeftIcon = ({ className, ...props }) => (React$
|
|
16790
|
-
React$
|
|
16791
|
-
React$
|
|
16792
|
-
const UserIcon = ({ className, ...props }) => (React$
|
|
16793
|
-
React$
|
|
16794
|
-
React$
|
|
16795
|
-
const ZoomInIcon = ({ className, ...props }) => (React$
|
|
16796
|
-
React$
|
|
16797
|
-
React$
|
|
16798
|
-
React$
|
|
16799
|
-
React$
|
|
16800
|
-
const CalendarIcon = ({ className, ...props }) => (React$
|
|
16801
|
-
React$
|
|
16802
|
-
React$
|
|
16803
|
-
React$
|
|
16804
|
-
React$
|
|
16805
|
-
const ChevronRightIcon = ({ className, ...props }) => (React$
|
|
16806
|
-
React$
|
|
16807
|
-
const DesktopIcon = ({ className, ...props }) => (React$
|
|
16808
|
-
React$
|
|
16809
|
-
React$
|
|
16810
|
-
React$
|
|
16811
|
-
const TabletIcon = ({ className, ...props }) => (React$
|
|
16812
|
-
React$
|
|
16813
|
-
React$
|
|
16814
|
-
const MobileIcon = ({ className, ...props }) => (React$
|
|
16815
|
-
React$
|
|
16816
|
-
React$
|
|
16704
|
+
const MessageIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16705
|
+
React$3.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" })));
|
|
16706
|
+
const CloseIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16707
|
+
React$3.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
16708
|
+
React$3.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
|
|
16709
|
+
const CameraIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16710
|
+
React$3.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" }),
|
|
16711
|
+
React$3.createElement("circle", { cx: "12", cy: "13", r: "4" })));
|
|
16712
|
+
const CircleIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16713
|
+
React$3.createElement("circle", { cx: "12", cy: "12", r: "10" })));
|
|
16714
|
+
const PencilIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16715
|
+
React$3.createElement("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })));
|
|
16716
|
+
const UndoIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16717
|
+
React$3.createElement("polyline", { points: "1 4 1 10 7 10" }),
|
|
16718
|
+
React$3.createElement("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })));
|
|
16719
|
+
const CheckIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16720
|
+
React$3.createElement("polyline", { points: "20 6 9 17 4 12" })));
|
|
16721
|
+
const TrashIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16722
|
+
React$3.createElement("polyline", { points: "3 6 5 6 21 6" }),
|
|
16723
|
+
React$3.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" })));
|
|
16724
|
+
const EditIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16725
|
+
React$3.createElement("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
|
|
16726
|
+
React$3.createElement("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })));
|
|
16727
|
+
const CopyIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16728
|
+
React$3.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
|
|
16729
|
+
React$3.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })));
|
|
16730
|
+
const InboxIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16731
|
+
React$3.createElement("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }),
|
|
16732
|
+
React$3.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" })));
|
|
16733
|
+
const SendIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16734
|
+
React$3.createElement("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
|
|
16735
|
+
React$3.createElement("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })));
|
|
16736
|
+
const PlusIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16737
|
+
React$3.createElement("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
|
|
16738
|
+
React$3.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })));
|
|
16739
|
+
const FilterIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16740
|
+
React$3.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })));
|
|
16741
|
+
const SquareIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16742
|
+
React$3.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" })));
|
|
16743
|
+
const ArrowRightIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16744
|
+
React$3.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
|
|
16745
|
+
React$3.createElement("polyline", { points: "12 5 19 12 12 19" })));
|
|
16746
|
+
const TypeIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16747
|
+
React$3.createElement("polyline", { points: "4 7 4 4 20 4 20 7" }),
|
|
16748
|
+
React$3.createElement("line", { x1: "9", y1: "20", x2: "15", y2: "20" }),
|
|
16749
|
+
React$3.createElement("line", { x1: "12", y1: "4", x2: "12", y2: "20" })));
|
|
16750
|
+
const ArrowLeftIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16751
|
+
React$3.createElement("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
|
|
16752
|
+
React$3.createElement("polyline", { points: "12 19 5 12 12 5" })));
|
|
16753
|
+
const UserIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16754
|
+
React$3.createElement("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
|
|
16755
|
+
React$3.createElement("circle", { cx: "12", cy: "7", r: "4" })));
|
|
16756
|
+
const ZoomInIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16757
|
+
React$3.createElement("circle", { cx: "11", cy: "11", r: "8" }),
|
|
16758
|
+
React$3.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
|
|
16759
|
+
React$3.createElement("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
|
|
16760
|
+
React$3.createElement("line", { x1: "8", y1: "11", x2: "14", y2: "11" })));
|
|
16761
|
+
const CalendarIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16762
|
+
React$3.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
|
|
16763
|
+
React$3.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
|
|
16764
|
+
React$3.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
|
|
16765
|
+
React$3.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" })));
|
|
16766
|
+
const ChevronRightIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16767
|
+
React$3.createElement("polyline", { points: "9 18 15 12 9 6" })));
|
|
16768
|
+
const DesktopIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16769
|
+
React$3.createElement("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
|
|
16770
|
+
React$3.createElement("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
|
|
16771
|
+
React$3.createElement("line", { x1: "12", y1: "17", x2: "12", y2: "21" })));
|
|
16772
|
+
const TabletIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16773
|
+
React$3.createElement("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
|
|
16774
|
+
React$3.createElement("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })));
|
|
16775
|
+
const MobileIcon = ({ className, ...props }) => (React$3.createElement("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props },
|
|
16776
|
+
React$3.createElement("rect", { x: "7", y: "2", width: "10", height: "20", rx: "2", ry: "2" }),
|
|
16777
|
+
React$3.createElement("line", { x1: "12", y1: "18", x2: "12.01", y2: "18" })));
|
|
16817
16778
|
|
|
16818
16779
|
const tools = [
|
|
16819
16780
|
{ id: 'pen', icon: PencilIcon, label: 'Draw' },
|
|
@@ -16833,19 +16794,19 @@ const colors = [
|
|
|
16833
16794
|
];
|
|
16834
16795
|
const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
16835
16796
|
var _a, _b;
|
|
16836
|
-
const canvasRef = useRef(null);
|
|
16837
|
-
const containerRef = useRef(null);
|
|
16838
|
-
const [activeTool, setActiveTool] = useState('pen');
|
|
16839
|
-
const [activeColor, setActiveColor] = useState('#EF4444');
|
|
16840
|
-
const [isDrawing, setIsDrawing] = useState(false);
|
|
16841
|
-
const [currentPath, setCurrentPath] = useState([]);
|
|
16842
|
-
const [annotations, setAnnotations] = useState([]);
|
|
16843
|
-
const [imageLoaded, setImageLoaded] = useState(false);
|
|
16844
|
-
const [startPoint, setStartPoint] = useState(null);
|
|
16845
|
-
const [textInput, setTextInput] = useState('');
|
|
16846
|
-
const [textPosition, setTextPosition] = useState(null);
|
|
16847
|
-
const imgRef = useRef(null);
|
|
16848
|
-
useEffect(() => {
|
|
16797
|
+
const canvasRef = useRef$1(null);
|
|
16798
|
+
const containerRef = useRef$1(null);
|
|
16799
|
+
const [activeTool, setActiveTool] = useState$1('pen');
|
|
16800
|
+
const [activeColor, setActiveColor] = useState$1('#EF4444');
|
|
16801
|
+
const [isDrawing, setIsDrawing] = useState$1(false);
|
|
16802
|
+
const [currentPath, setCurrentPath] = useState$1([]);
|
|
16803
|
+
const [annotations, setAnnotations] = useState$1([]);
|
|
16804
|
+
const [imageLoaded, setImageLoaded] = useState$1(false);
|
|
16805
|
+
const [startPoint, setStartPoint] = useState$1(null);
|
|
16806
|
+
const [textInput, setTextInput] = useState$1('');
|
|
16807
|
+
const [textPosition, setTextPosition] = useState$1(null);
|
|
16808
|
+
const imgRef = useRef$1(null);
|
|
16809
|
+
useEffect$2(() => {
|
|
16849
16810
|
const img = new Image();
|
|
16850
16811
|
img.onload = () => {
|
|
16851
16812
|
imgRef.current = img;
|
|
@@ -16853,7 +16814,7 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
16853
16814
|
};
|
|
16854
16815
|
img.src = screenshot;
|
|
16855
16816
|
}, [screenshot]);
|
|
16856
|
-
useEffect(() => {
|
|
16817
|
+
useEffect$2(() => {
|
|
16857
16818
|
if (!imageLoaded || !canvasRef.current || !imgRef.current)
|
|
16858
16819
|
return;
|
|
16859
16820
|
const canvas = canvasRef.current;
|
|
@@ -17111,32 +17072,32 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
17111
17072
|
const dataUrl = canvas.toDataURL('image/png');
|
|
17112
17073
|
onComplete(annotations, dataUrl);
|
|
17113
17074
|
};
|
|
17114
|
-
return createPortal(React$
|
|
17115
|
-
React$
|
|
17116
|
-
React$
|
|
17075
|
+
return createPortal(React$3.createElement("div", { className: "fixed inset-0 z-[1000000] bg-black/90 flex flex-col min-h-screen" },
|
|
17076
|
+
React$3.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" },
|
|
17077
|
+
React$3.createElement("div", { className: "flex items-center gap-1.5 bg-gray-100 p-1.5 rounded-xl" }, tools.map((tool) => (React$3.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
|
|
17117
17078
|
? 'bg-[#C2D1D9] text-white shadow-lg shadow-[#C2D1D9]/30'
|
|
17118
17079
|
: 'bg-transparent text-gray-600 hover:text-gray-900 hover:bg-white') },
|
|
17119
|
-
React$
|
|
17120
|
-
React$
|
|
17121
|
-
React$
|
|
17080
|
+
React$3.createElement(tool.icon, { className: "w-5 h-5" }))))),
|
|
17081
|
+
React$3.createElement("div", { className: "w-px h-8 bg-gray-300" }),
|
|
17082
|
+
React$3.createElement("div", { className: "flex items-center gap-2 bg-gray-100 p-1.5 rounded-xl" }, colors.map((color) => (React$3.createElement("button", { key: color, onClick: () => setActiveColor(color), className: cn('w-8 h-8 rounded-full border-2 cursor-pointer transition-all', activeColor === color
|
|
17122
17083
|
? 'border-gray-900 scale-110 shadow-lg'
|
|
17123
17084
|
: 'border-white hover:scale-105 shadow-md'), style: { backgroundColor: color } })))),
|
|
17124
|
-
React$
|
|
17125
|
-
React$
|
|
17126
|
-
React$
|
|
17127
|
-
React$
|
|
17128
|
-
React$
|
|
17129
|
-
React$
|
|
17130
|
-
React$
|
|
17131
|
-
React$
|
|
17085
|
+
React$3.createElement("div", { className: "w-px h-8 bg-gray-300" }),
|
|
17086
|
+
React$3.createElement("div", { className: "flex items-center gap-2" },
|
|
17087
|
+
React$3.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" },
|
|
17088
|
+
React$3.createElement(UndoIcon, { className: "w-5 h-5" })),
|
|
17089
|
+
React$3.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" },
|
|
17090
|
+
React$3.createElement(CloseIcon, { className: "w-5 h-5" })),
|
|
17091
|
+
React$3.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" },
|
|
17092
|
+
React$3.createElement(CheckIcon, { className: "w-5 h-5 inline mr-1" }),
|
|
17132
17093
|
" Done"))),
|
|
17133
|
-
React$
|
|
17134
|
-
imageLoaded && (React$
|
|
17135
|
-
textPosition && (React$
|
|
17094
|
+
React$3.createElement("div", { ref: containerRef, className: "flex-1 flex items-center justify-center p-4 min-h-0" },
|
|
17095
|
+
imageLoaded && (React$3.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' } })),
|
|
17096
|
+
textPosition && (React$3.createElement("div", { className: "absolute z-10", style: {
|
|
17136
17097
|
left: `calc(50% + ${(textPosition.x - 0.5) * (((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.width) || 0)}px)`,
|
|
17137
17098
|
top: `calc(50% + ${(textPosition.y - 0.5) * (((_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.height) || 0)}px)`,
|
|
17138
17099
|
} },
|
|
17139
|
-
React$
|
|
17100
|
+
React$3.createElement("input", { type: "text", value: textInput, onChange: (e) => setTextInput(e.target.value), onKeyDown: (e) => {
|
|
17140
17101
|
if (e.key === 'Enter')
|
|
17141
17102
|
handleTextSubmit();
|
|
17142
17103
|
if (e.key === 'Escape') {
|
|
@@ -17144,7 +17105,7 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
17144
17105
|
setTextInput('');
|
|
17145
17106
|
}
|
|
17146
17107
|
}, 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 } })))),
|
|
17147
|
-
React$
|
|
17108
|
+
React$3.createElement("div", { className: "text-center py-2 text-gray-500 text-xs flex-shrink-0" }, activeTool === 'text'
|
|
17148
17109
|
? 'Click anywhere to add text'
|
|
17149
17110
|
: 'Click and drag to annotate • Use tools above to switch modes')), document.body);
|
|
17150
17111
|
};
|
|
@@ -17152,27 +17113,27 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
17152
17113
|
const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastClickedElement, lastClickedText, }) => {
|
|
17153
17114
|
var _a, _b;
|
|
17154
17115
|
const { config, currentScreenshot, setCurrentScreenshot, annotations, setAnnotations, clearAnnotations, setIsCapturing, isCapturing, currentUser, setIsOpen, } = useMarkupStore();
|
|
17155
|
-
const [title, setTitle] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.title) || "");
|
|
17156
|
-
const [description, setDescription] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.description) || "");
|
|
17157
|
-
const [priority, setPriority] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.priority) || "medium");
|
|
17158
|
-
const [feedbackType, setFeedbackType] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.type) || "general");
|
|
17159
|
-
const [currentCopy, setCurrentCopy] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.currentCopy) || "");
|
|
17160
|
-
const [newCopy, setNewCopy] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.newCopy) || "");
|
|
17161
|
-
const [designMockup, setDesignMockup] = useState(initialData === null || initialData === void 0 ? void 0 : initialData.designMockup);
|
|
17162
|
-
const [selectedTags, setSelectedTags] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.tags) || []);
|
|
17163
|
-
const [isAnnotating, setIsAnnotating] = useState(false);
|
|
17164
|
-
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
17165
|
-
const [annotatedScreenshot, setAnnotatedScreenshot] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.screenshot) || null);
|
|
17116
|
+
const [title, setTitle] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.title) || "");
|
|
17117
|
+
const [description, setDescription] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.description) || "");
|
|
17118
|
+
const [priority, setPriority] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.priority) || "medium");
|
|
17119
|
+
const [feedbackType, setFeedbackType] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.type) || "general");
|
|
17120
|
+
const [currentCopy, setCurrentCopy] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.currentCopy) || "");
|
|
17121
|
+
const [newCopy, setNewCopy] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.newCopy) || "");
|
|
17122
|
+
const [designMockup, setDesignMockup] = useState$1(initialData === null || initialData === void 0 ? void 0 : initialData.designMockup);
|
|
17123
|
+
const [selectedTags, setSelectedTags] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.tags) || []);
|
|
17124
|
+
const [isAnnotating, setIsAnnotating] = useState$1(false);
|
|
17125
|
+
const [isSubmitting, setIsSubmitting] = useState$1(false);
|
|
17126
|
+
const [annotatedScreenshot, setAnnotatedScreenshot] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.screenshot) || null);
|
|
17166
17127
|
// Screen recording states
|
|
17167
|
-
const [isRecording, setIsRecording] = useState(false);
|
|
17168
|
-
const [recordedVideo, setRecordedVideo] = useState(initialData === null || initialData === void 0 ? void 0 : initialData.screenRecording);
|
|
17169
|
-
const [recordedBlob, setRecordedBlob] = useState(null);
|
|
17170
|
-
const [isUploadingVideo, setIsUploadingVideo] = useState(false);
|
|
17171
|
-
const [mediaRecorder, setMediaRecorder] = useState(null);
|
|
17172
|
-
const [recordingStream, setRecordingStream] = useState(null);
|
|
17128
|
+
const [isRecording, setIsRecording] = useState$1(false);
|
|
17129
|
+
const [recordedVideo, setRecordedVideo] = useState$1(initialData === null || initialData === void 0 ? void 0 : initialData.screenRecording);
|
|
17130
|
+
const [recordedBlob, setRecordedBlob] = useState$1(null);
|
|
17131
|
+
const [isUploadingVideo, setIsUploadingVideo] = useState$1(false);
|
|
17132
|
+
const [mediaRecorder, setMediaRecorder] = useState$1(null);
|
|
17133
|
+
const [recordingStream, setRecordingStream] = useState$1(null);
|
|
17173
17134
|
// Pin placement states
|
|
17174
|
-
const [isPlacingPin, setIsPlacingPin] = useState(false);
|
|
17175
|
-
const [pinPosition, setPinPosition] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.pinLocation)
|
|
17135
|
+
const [isPlacingPin, setIsPlacingPin] = useState$1(false);
|
|
17136
|
+
const [pinPosition, setPinPosition] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.pinLocation)
|
|
17176
17137
|
? {
|
|
17177
17138
|
x: initialData.pinLocation.x,
|
|
17178
17139
|
y: initialData.pinLocation.y,
|
|
@@ -17181,18 +17142,18 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17181
17142
|
}
|
|
17182
17143
|
: null);
|
|
17183
17144
|
// Image change states
|
|
17184
|
-
const [isSelectingImage, setIsSelectingImage] = useState(false);
|
|
17185
|
-
const [originalImageSrc, setOriginalImageSrc] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.originalImageSrc) || "");
|
|
17186
|
-
const [originalImageBackground, setOriginalImageBackground] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.originalImageBackground) || "");
|
|
17187
|
-
const [replacementImageUrl, setReplacementImageUrl] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.replacementImageUrl) || "");
|
|
17145
|
+
const [isSelectingImage, setIsSelectingImage] = useState$1(false);
|
|
17146
|
+
const [originalImageSrc, setOriginalImageSrc] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.originalImageSrc) || "");
|
|
17147
|
+
const [originalImageBackground, setOriginalImageBackground] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.originalImageBackground) || "");
|
|
17148
|
+
const [replacementImageUrl, setReplacementImageUrl] = useState$1((initialData === null || initialData === void 0 ? void 0 : initialData.replacementImageUrl) || "");
|
|
17188
17149
|
// Load initial annotations into store if editing
|
|
17189
|
-
useEffect(() => {
|
|
17150
|
+
useEffect$2(() => {
|
|
17190
17151
|
if (initialData === null || initialData === void 0 ? void 0 : initialData.annotations) {
|
|
17191
17152
|
setAnnotations(initialData.annotations);
|
|
17192
17153
|
}
|
|
17193
17154
|
}, [initialData, setAnnotations]);
|
|
17194
17155
|
// Handle pin placement mode
|
|
17195
|
-
useEffect(() => {
|
|
17156
|
+
useEffect$2(() => {
|
|
17196
17157
|
if (!isPlacingPin)
|
|
17197
17158
|
return;
|
|
17198
17159
|
// Close widget during pin placement
|
|
@@ -17218,7 +17179,7 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17218
17179
|
};
|
|
17219
17180
|
}, [isPlacingPin, setIsOpen]);
|
|
17220
17181
|
// Handle image selection mode for image-change type
|
|
17221
|
-
useEffect(() => {
|
|
17182
|
+
useEffect$2(() => {
|
|
17222
17183
|
if (!isSelectingImage)
|
|
17223
17184
|
return;
|
|
17224
17185
|
// Close widget during image selection
|
|
@@ -17290,7 +17251,7 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17290
17251
|
};
|
|
17291
17252
|
}, [isSelectingImage, setIsOpen]);
|
|
17292
17253
|
// Auto-capture selected text when component mounts (only if creating new)
|
|
17293
|
-
useEffect(() => {
|
|
17254
|
+
useEffect$2(() => {
|
|
17294
17255
|
var _a;
|
|
17295
17256
|
if (initialData)
|
|
17296
17257
|
return;
|
|
@@ -17530,152 +17491,152 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17530
17491
|
}
|
|
17531
17492
|
};
|
|
17532
17493
|
if (isAnnotating && currentScreenshot) {
|
|
17533
|
-
return (React$
|
|
17494
|
+
return (React$3.createElement(AnnotationOverlay, { screenshot: currentScreenshot, onComplete: handleAnnotationComplete, onCancel: handleAnnotationCancel }));
|
|
17534
17495
|
}
|
|
17535
17496
|
// Show pin placement overlay
|
|
17536
17497
|
if (isPlacingPin) {
|
|
17537
|
-
return (React$
|
|
17538
|
-
React$
|
|
17539
|
-
React$
|
|
17540
|
-
React$
|
|
17541
|
-
React$
|
|
17542
|
-
React$
|
|
17543
|
-
React$
|
|
17544
|
-
React$
|
|
17545
|
-
React$
|
|
17498
|
+
return (React$3.createElement("div", { className: "fixed top-4 left-1/2 -translate-x-1/2 z-[999999] pointer-events-none" },
|
|
17499
|
+
React$3.createElement("div", { className: "bg-white rounded-2xl shadow-2xl p-6 max-w-md mx-4 text-center border-2 border-orange-500" },
|
|
17500
|
+
React$3.createElement("div", { className: "w-12 h-12 mx-auto mb-3 bg-orange-100 rounded-full flex items-center justify-center" },
|
|
17501
|
+
React$3.createElement("svg", { className: "w-6 h-6 text-orange-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17502
|
+
React$3.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" }),
|
|
17503
|
+
React$3.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" }))),
|
|
17504
|
+
React$3.createElement("h3", { className: "text-lg font-bold text-gray-900 mb-2" }, "Click to Place Pin"),
|
|
17505
|
+
React$3.createElement("p", { className: "text-gray-600 text-sm mb-3" }, "Click anywhere on the page to mark the location"),
|
|
17506
|
+
React$3.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"))));
|
|
17546
17507
|
}
|
|
17547
17508
|
// Show image selection overlay
|
|
17548
17509
|
if (isSelectingImage) {
|
|
17549
|
-
return (React$
|
|
17550
|
-
React$
|
|
17551
|
-
React$
|
|
17552
|
-
React$
|
|
17553
|
-
React$
|
|
17554
|
-
React$
|
|
17555
|
-
React$
|
|
17556
|
-
React$
|
|
17557
|
-
}
|
|
17558
|
-
return (React$
|
|
17559
|
-
React$
|
|
17560
|
-
React$
|
|
17561
|
-
React$
|
|
17510
|
+
return (React$3.createElement("div", { className: "fixed top-4 left-1/2 -translate-x-1/2 z-[999999] pointer-events-none" },
|
|
17511
|
+
React$3.createElement("div", { className: "bg-white rounded-2xl shadow-2xl p-6 max-w-md mx-4 text-center border-2 border-blue-500" },
|
|
17512
|
+
React$3.createElement("div", { className: "w-12 h-12 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center" },
|
|
17513
|
+
React$3.createElement("svg", { className: "w-6 h-6 text-blue-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17514
|
+
React$3.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" }))),
|
|
17515
|
+
React$3.createElement("h3", { className: "text-lg font-bold text-gray-900 mb-2" }, "Click on an Image"),
|
|
17516
|
+
React$3.createElement("p", { className: "text-gray-600 text-sm mb-3" }, "Click on any image or element with a background image"),
|
|
17517
|
+
React$3.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"))));
|
|
17518
|
+
}
|
|
17519
|
+
return (React$3.createElement("form", { onSubmit: handleSubmit },
|
|
17520
|
+
React$3.createElement("div", { className: "mb-5" },
|
|
17521
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Type"),
|
|
17522
|
+
React$3.createElement("div", { className: "flex gap-2 flex-wrap" }, [
|
|
17562
17523
|
{ id: "general", label: "General" },
|
|
17563
17524
|
{ id: "copy-amendment", label: "Copy Change" },
|
|
17564
17525
|
{ id: "image-change", label: "Image Change" },
|
|
17565
|
-
].map((type) => (React$
|
|
17526
|
+
].map((type) => (React$3.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
|
|
17566
17527
|
? "bg-[#C2D1D9] text-black shadow-md shadow-[#C2D1D9]/30"
|
|
17567
17528
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm") }, type.label))))),
|
|
17568
|
-
feedbackType === "image-change" && (React$
|
|
17569
|
-
React$
|
|
17570
|
-
React$
|
|
17571
|
-
React$
|
|
17572
|
-
React$
|
|
17573
|
-
React$
|
|
17529
|
+
feedbackType === "image-change" && (React$3.createElement(React$3.Fragment, null,
|
|
17530
|
+
React$3.createElement("div", { className: "mb-5" },
|
|
17531
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Select Image"),
|
|
17532
|
+
React$3.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" },
|
|
17533
|
+
React$3.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17534
|
+
React$3.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" })),
|
|
17574
17535
|
originalImageSrc || originalImageBackground
|
|
17575
17536
|
? "Change Image"
|
|
17576
17537
|
: "Click to Select Image"),
|
|
17577
|
-
(originalImageSrc || originalImageBackground) && (React$
|
|
17578
|
-
React$
|
|
17579
|
-
originalImageSrc ? (React$
|
|
17580
|
-
React$
|
|
17581
|
-
React$
|
|
17538
|
+
(originalImageSrc || originalImageBackground) && (React$3.createElement("div", { className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200" },
|
|
17539
|
+
React$3.createElement("p", { className: "text-xs font-semibold text-gray-700 mb-2" }, "Current Image:"),
|
|
17540
|
+
originalImageSrc ? (React$3.createElement(React$3.Fragment, null,
|
|
17541
|
+
React$3.createElement("img", { src: originalImageSrc, alt: "Selected", className: "w-full h-32 object-cover rounded-lg mb-2" }),
|
|
17542
|
+
React$3.createElement("p", { className: "text-[10px] text-gray-500 font-mono break-all" }, originalImageSrc))) : (React$3.createElement("p", { className: "text-[10px] text-gray-500 font-mono break-all" },
|
|
17582
17543
|
"Background: ",
|
|
17583
17544
|
originalImageBackground))))),
|
|
17584
|
-
React$
|
|
17585
|
-
React$
|
|
17586
|
-
React$
|
|
17587
|
-
replacementImageUrl && (React$
|
|
17588
|
-
React$
|
|
17589
|
-
React$
|
|
17545
|
+
React$3.createElement("div", { className: "mb-5" },
|
|
17546
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Replacement Image URL *"),
|
|
17547
|
+
React$3.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" }),
|
|
17548
|
+
replacementImageUrl && (React$3.createElement("div", { className: "mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200" },
|
|
17549
|
+
React$3.createElement("p", { className: "text-xs font-semibold text-gray-700 mb-2" }, "Preview:"),
|
|
17550
|
+
React$3.createElement("img", { src: replacementImageUrl, alt: "Replacement Preview", className: "w-full h-32 object-cover rounded-lg", onError: (e) => {
|
|
17590
17551
|
e.target.style.display = "none";
|
|
17591
17552
|
} })))))),
|
|
17592
|
-
feedbackType === "copy-amendment" && (React$
|
|
17593
|
-
React$
|
|
17594
|
-
React$
|
|
17595
|
-
React$
|
|
17596
|
-
React$
|
|
17597
|
-
React$
|
|
17598
|
-
React$
|
|
17599
|
-
feedbackType !== "copy-amendment" && (React$
|
|
17600
|
-
React$
|
|
17601
|
-
React$
|
|
17602
|
-
feedbackType !== "copy-amendment" && (React$
|
|
17603
|
-
React$
|
|
17604
|
-
React$
|
|
17605
|
-
React$
|
|
17606
|
-
React$
|
|
17607
|
-
React$
|
|
17553
|
+
feedbackType === "copy-amendment" && (React$3.createElement(React$3.Fragment, null,
|
|
17554
|
+
React$3.createElement("div", { className: "mb-5" },
|
|
17555
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Current Copy"),
|
|
17556
|
+
React$3.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" })),
|
|
17557
|
+
React$3.createElement("div", { className: "mb-5" },
|
|
17558
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "New Copy *"),
|
|
17559
|
+
React$3.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" })))),
|
|
17560
|
+
feedbackType !== "copy-amendment" && (React$3.createElement("div", { className: "mb-5" },
|
|
17561
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Title *"),
|
|
17562
|
+
React$3.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" }))),
|
|
17563
|
+
feedbackType !== "copy-amendment" && (React$3.createElement("div", { className: "mb-5" },
|
|
17564
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Description"),
|
|
17565
|
+
React$3.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" }))),
|
|
17566
|
+
React$3.createElement("div", { className: "mb-5" },
|
|
17567
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Priority"),
|
|
17568
|
+
React$3.createElement("div", { className: "flex gap-2" }, Object.keys(priorityColors).map((p) => (React$3.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
|
|
17608
17569
|
? cn(priorityColors[p], "border-transparent shadow-sm")
|
|
17609
17570
|
: "bg-gray-100 text-gray-600 hover:bg-gray-200") }, p))))),
|
|
17610
|
-
annotatedScreenshot || currentScreenshot ? (React$
|
|
17611
|
-
React$
|
|
17612
|
-
React$
|
|
17613
|
-
React$
|
|
17614
|
-
React$
|
|
17615
|
-
React$
|
|
17571
|
+
annotatedScreenshot || currentScreenshot ? (React$3.createElement("div", { className: "relative rounded-xl overflow-hidden shadow-md mb-5 group" },
|
|
17572
|
+
React$3.createElement("img", { src: annotatedScreenshot || currentScreenshot || "", alt: "Screenshot", className: "w-full block" }),
|
|
17573
|
+
React$3.createElement("div", { className: "absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" }),
|
|
17574
|
+
React$3.createElement("div", { className: "absolute top-3 right-3 flex gap-2" },
|
|
17575
|
+
React$3.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" },
|
|
17576
|
+
React$3.createElement(EditIcon, { className: "w-3.5 h-3.5" }),
|
|
17616
17577
|
" Edit"),
|
|
17617
|
-
React$
|
|
17618
|
-
React$
|
|
17619
|
-
" Remove")))) : (React$
|
|
17620
|
-
React$
|
|
17621
|
-
React$
|
|
17622
|
-
"Capturing...")) : (React$
|
|
17623
|
-
React$
|
|
17578
|
+
React$3.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" },
|
|
17579
|
+
React$3.createElement(TrashIcon, { className: "w-3.5 h-3.5" }),
|
|
17580
|
+
" Remove")))) : (React$3.createElement("div", { className: "flex gap-3 mb-5" },
|
|
17581
|
+
React$3.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$3.createElement(React$3.Fragment, null,
|
|
17582
|
+
React$3.createElement("span", { className: "w-5 h-5 border-2 border-indigo-200 border-t-indigo-600 rounded-full animate-spin" }),
|
|
17583
|
+
"Capturing...")) : (React$3.createElement(React$3.Fragment, null,
|
|
17584
|
+
React$3.createElement(CameraIcon, { className: "w-5 h-5" }),
|
|
17624
17585
|
" Screenshot"))),
|
|
17625
|
-
React$
|
|
17586
|
+
React$3.createElement("div", { onClick: isRecording
|
|
17626
17587
|
? handleStopRecording
|
|
17627
|
-
: 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$
|
|
17628
|
-
React$
|
|
17629
|
-
"Stop Recording")) : (React$
|
|
17630
|
-
React$
|
|
17631
|
-
React$
|
|
17632
|
-
React$
|
|
17588
|
+
: 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$3.createElement(React$3.Fragment, null,
|
|
17589
|
+
React$3.createElement("span", { className: "w-2.5 h-2.5 bg-red-600 rounded-sm animate-pulse" }),
|
|
17590
|
+
"Stop Recording")) : (React$3.createElement(React$3.Fragment, null,
|
|
17591
|
+
React$3.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17592
|
+
React$3.createElement("circle", { cx: "12", cy: "12", r: "10", strokeWidth: "2" }),
|
|
17593
|
+
React$3.createElement("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor" })),
|
|
17633
17594
|
"Record Screen"))))),
|
|
17634
|
-
React$
|
|
17635
|
-
React$
|
|
17595
|
+
React$3.createElement("div", { className: "mb-5" },
|
|
17596
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" },
|
|
17636
17597
|
"Pin Location",
|
|
17637
17598
|
" ",
|
|
17638
|
-
!pinPosition && React$
|
|
17639
|
-
pinPosition ? (React$
|
|
17640
|
-
React$
|
|
17641
|
-
React$
|
|
17642
|
-
React$
|
|
17643
|
-
React$
|
|
17644
|
-
React$
|
|
17645
|
-
React$
|
|
17599
|
+
!pinPosition && React$3.createElement("span", { className: "text-red-500" }, "*")),
|
|
17600
|
+
pinPosition ? (React$3.createElement("div", { className: "flex items-center gap-3 p-3 bg-green-50 border border-green-200 rounded-xl" },
|
|
17601
|
+
React$3.createElement("div", { className: "w-8 h-8 rounded-full bg-green-500 flex items-center justify-center shadow-md" },
|
|
17602
|
+
React$3.createElement("svg", { className: "w-4 h-4 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17603
|
+
React$3.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }))),
|
|
17604
|
+
React$3.createElement("div", { className: "flex-1" },
|
|
17605
|
+
React$3.createElement("div", { className: "text-sm font-medium text-gray-800" }, "Pin placed on page"),
|
|
17606
|
+
React$3.createElement("div", { className: "text-xs text-gray-600" },
|
|
17646
17607
|
"Position: (",
|
|
17647
17608
|
Math.round(pinPosition.pageX),
|
|
17648
17609
|
",",
|
|
17649
17610
|
" ",
|
|
17650
17611
|
Math.round(pinPosition.pageY),
|
|
17651
17612
|
")")),
|
|
17652
|
-
React$
|
|
17653
|
-
React$
|
|
17654
|
-
React$
|
|
17655
|
-
React$
|
|
17613
|
+
React$3.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$3.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" },
|
|
17614
|
+
React$3.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
17615
|
+
React$3.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" }),
|
|
17616
|
+
React$3.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })),
|
|
17656
17617
|
"Click to place pin on page"))),
|
|
17657
|
-
recordedVideo && (React$
|
|
17658
|
-
React$
|
|
17659
|
-
React$
|
|
17660
|
-
React$
|
|
17661
|
-
React$
|
|
17662
|
-
React$
|
|
17663
|
-
designMockup ? (React$
|
|
17664
|
-
React$
|
|
17665
|
-
React$
|
|
17666
|
-
React$
|
|
17667
|
-
React$
|
|
17668
|
-
React$
|
|
17669
|
-
React$
|
|
17618
|
+
recordedVideo && (React$3.createElement("div", { className: "mb-5 relative rounded-xl overflow-hidden shadow-md border border-gray-200" },
|
|
17619
|
+
React$3.createElement("video", { src: recordedVideo, controls: true, className: "w-full h-auto" }),
|
|
17620
|
+
React$3.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" },
|
|
17621
|
+
React$3.createElement(TrashIcon, { className: "w-3.5 h-3.5" })))),
|
|
17622
|
+
React$3.createElement("div", { className: "mb-5" },
|
|
17623
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Design Mockup"),
|
|
17624
|
+
designMockup ? (React$3.createElement("div", { className: "relative rounded-xl overflow-hidden shadow-md group border border-gray-200" },
|
|
17625
|
+
React$3.createElement("img", { src: designMockup, className: "w-full h-32 object-cover", alt: "Mockup" }),
|
|
17626
|
+
React$3.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" },
|
|
17627
|
+
React$3.createElement(TrashIcon, { className: "w-3.5 h-3.5" })))) : (React$3.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" },
|
|
17628
|
+
React$3.createElement("input", { type: "file", accept: "image/*", onChange: handleMockupUpload, className: "absolute inset-0 opacity-0 cursor-pointer w-full h-full" }),
|
|
17629
|
+
React$3.createElement("span", { className: "text-sm text-gray-500 flex items-center gap-2 font-medium" },
|
|
17630
|
+
React$3.createElement(PlusIcon, { className: "w-4 h-4" }),
|
|
17670
17631
|
" Upload Mockup")))),
|
|
17671
|
-
config.availableTags && config.availableTags.length > 0 && (React$
|
|
17672
|
-
React$
|
|
17673
|
-
React$
|
|
17632
|
+
config.availableTags && config.availableTags.length > 0 && (React$3.createElement("div", { className: "mb-5" },
|
|
17633
|
+
React$3.createElement("label", { className: "block text-sm font-semibold mb-2 text-gray-800" }, "Tags"),
|
|
17634
|
+
React$3.createElement("div", { className: "flex flex-wrap gap-2" }, config.availableTags.map((tag) => (React$3.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)
|
|
17674
17635
|
? "bg-[#C2D1D9] text-white shadow-md shadow-[#C2D1D9]/30"
|
|
17675
17636
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm") }, tag)))))),
|
|
17676
|
-
React$
|
|
17677
|
-
React$
|
|
17678
|
-
React$
|
|
17637
|
+
React$3.createElement("div", { className: "flex gap-3 mt-6 pt-6 border-t border-gray-100" },
|
|
17638
|
+
React$3.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"),
|
|
17639
|
+
React$3.createElement("div", { onClick: (e) => {
|
|
17679
17640
|
const isValid = feedbackType === "copy-amendment"
|
|
17680
17641
|
? newCopy.trim()
|
|
17681
17642
|
: title.trim();
|
|
@@ -17699,9 +17660,9 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17699
17660
|
: !title.trim()) || isSubmitting
|
|
17700
17661
|
? "#9ca3af"
|
|
17701
17662
|
: "green-500",
|
|
17702
|
-
} }, isSubmitting ? (isUploadingVideo ? (React$
|
|
17703
|
-
React$
|
|
17704
|
-
React$
|
|
17663
|
+
} }, isSubmitting ? (isUploadingVideo ? (React$3.createElement("span", { className: "flex items-center justify-center gap-2" },
|
|
17664
|
+
React$3.createElement("span", { className: "w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
|
|
17665
|
+
React$3.createElement("span", null, "Uploading video..."))) : (React$3.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) ||
|
|
17705
17666
|
(initialData ? "Update Feedback" : "Submit Feedback"))))));
|
|
17706
17667
|
};
|
|
17707
17668
|
|
|
@@ -17726,9 +17687,9 @@ const statusColors = {
|
|
|
17726
17687
|
};
|
|
17727
17688
|
const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
17728
17689
|
const { config } = useMarkupStore();
|
|
17729
|
-
const [statusFilter, setStatusFilter] = useState("all");
|
|
17730
|
-
const [sortBy, setSortBy] = useState("newest");
|
|
17731
|
-
const filteredAndSortedItems = useMemo(() => {
|
|
17690
|
+
const [statusFilter, setStatusFilter] = useState$1("all");
|
|
17691
|
+
const [sortBy, setSortBy] = useState$1("newest");
|
|
17692
|
+
const filteredAndSortedItems = useMemo$1(() => {
|
|
17732
17693
|
let items = [...feedbackItems];
|
|
17733
17694
|
// Filter by status
|
|
17734
17695
|
if (statusFilter !== "all") {
|
|
@@ -17759,7 +17720,7 @@ const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
|
17759
17720
|
return items;
|
|
17760
17721
|
}, [feedbackItems, statusFilter, sortBy]);
|
|
17761
17722
|
// Group items by page URL
|
|
17762
|
-
const groupedByPage = useMemo(() => {
|
|
17723
|
+
const groupedByPage = useMemo$1(() => {
|
|
17763
17724
|
const groups = new Map();
|
|
17764
17725
|
filteredAndSortedItems.forEach((item) => {
|
|
17765
17726
|
var _a;
|
|
@@ -17774,44 +17735,44 @@ const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
|
17774
17735
|
.map(([url, items]) => ({ url, items }))
|
|
17775
17736
|
.sort((a, b) => b.items.length - a.items.length);
|
|
17776
17737
|
}, [filteredAndSortedItems]);
|
|
17777
|
-
return (React$
|
|
17778
|
-
React$
|
|
17779
|
-
React$
|
|
17780
|
-
React$
|
|
17781
|
-
React$
|
|
17782
|
-
React$
|
|
17783
|
-
React$
|
|
17784
|
-
React$
|
|
17785
|
-
React$
|
|
17786
|
-
React$
|
|
17787
|
-
React$
|
|
17788
|
-
React$
|
|
17789
|
-
React$
|
|
17790
|
-
React$
|
|
17791
|
-
React$
|
|
17738
|
+
return (React$3.createElement("div", { className: "flex flex-col h-full" },
|
|
17739
|
+
React$3.createElement("div", { className: "flex gap-2 pb-4 mb-4" },
|
|
17740
|
+
React$3.createElement("div", { className: "relative flex-1" },
|
|
17741
|
+
React$3.createElement(FilterIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" }),
|
|
17742
|
+
React$3.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$3.createElement("option", { key: option.value, value: option.value }, option.label))))),
|
|
17743
|
+
React$3.createElement("div", { className: "relative flex-1" },
|
|
17744
|
+
React$3.createElement(CalendarIcon, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" }),
|
|
17745
|
+
React$3.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" },
|
|
17746
|
+
React$3.createElement("option", { value: "newest" }, "Newest First"),
|
|
17747
|
+
React$3.createElement("option", { value: "oldest" }, "Oldest First"),
|
|
17748
|
+
React$3.createElement("option", { value: "priority" }, "Priority")))),
|
|
17749
|
+
React$3.createElement("div", { className: "flex-1 overflow-y-auto -mx-1 px-1" }, filteredAndSortedItems.length === 0 ? (React$3.createElement("div", { className: "flex flex-col items-center justify-center py-10 text-gray-400" },
|
|
17750
|
+
React$3.createElement(InboxIcon, { className: "w-12 h-12 mb-3 opacity-50" }),
|
|
17751
|
+
React$3.createElement("p", { className: "text-sm font-medium text-gray-500" }, "No feedback items"),
|
|
17752
|
+
React$3.createElement("p", { className: "text-xs text-gray-400 mt-1" }, statusFilter !== "all"
|
|
17792
17753
|
? "Try changing the filter"
|
|
17793
|
-
: "Be the first to add feedback!"))) : (React$
|
|
17794
|
-
React$
|
|
17795
|
-
React$
|
|
17796
|
-
React$
|
|
17754
|
+
: "Be the first to add feedback!"))) : (React$3.createElement("div", { className: "flex flex-col gap-4" }, groupedByPage.map((group) => (React$3.createElement("div", { key: group.url, className: "space-y-3" },
|
|
17755
|
+
React$3.createElement("div", { className: "pb-2 ml-2 border-b border-gray-200" },
|
|
17756
|
+
React$3.createElement("h3", { className: "text-xs font-medium text-gray-500" }, group.url)),
|
|
17757
|
+
React$3.createElement("div", { className: "flex flex-col gap-3 pl-2" }, group.items.map((item) => {
|
|
17797
17758
|
var _a;
|
|
17798
|
-
return (React$
|
|
17799
|
-
React$
|
|
17800
|
-
React$
|
|
17801
|
-
React$
|
|
17802
|
-
((_a = item.pageMetadata) === null || _a === void 0 ? void 0 : _a.deviceType) && (React$
|
|
17803
|
-
item.pageMetadata.deviceType === 'desktop' && (React$
|
|
17804
|
-
item.pageMetadata.deviceType === 'tablet' && (React$
|
|
17805
|
-
item.pageMetadata.deviceType === 'mobile' && (React$
|
|
17806
|
-
React$
|
|
17807
|
-
item.description && (React$
|
|
17808
|
-
React$
|
|
17809
|
-
React$
|
|
17810
|
-
React$
|
|
17811
|
-
item.type && (React$
|
|
17812
|
-
React$
|
|
17759
|
+
return (React$3.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" },
|
|
17760
|
+
React$3.createElement("div", { className: "flex items-start justify-between gap-2 mb-2" },
|
|
17761
|
+
React$3.createElement("div", { className: "flex items-center gap-2 flex-1" },
|
|
17762
|
+
React$3.createElement("h4", { className: "text-sm font-semibold text-gray-900 m-0 flex-1 line-clamp-2" }, item.title),
|
|
17763
|
+
((_a = item.pageMetadata) === null || _a === void 0 ? void 0 : _a.deviceType) && (React$3.createElement("div", { className: "flex-shrink-0" },
|
|
17764
|
+
item.pageMetadata.deviceType === 'desktop' && (React$3.createElement(DesktopIcon, { className: "w-4 h-4 text-gray-400" })),
|
|
17765
|
+
item.pageMetadata.deviceType === 'tablet' && (React$3.createElement(TabletIcon, { className: "w-4 h-4 text-gray-400" })),
|
|
17766
|
+
item.pageMetadata.deviceType === 'mobile' && (React$3.createElement(MobileIcon, { className: "w-4 h-4 text-gray-400" }))))),
|
|
17767
|
+
React$3.createElement(ChevronRightIcon, { className: "w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" })),
|
|
17768
|
+
item.description && (React$3.createElement("p", { className: "text-xs text-gray-600 m-0 mb-3 line-clamp-2" }, item.description)),
|
|
17769
|
+
React$3.createElement("div", { className: "flex items-center gap-2 flex-wrap" },
|
|
17770
|
+
React$3.createElement("span", { className: cn("px-2.5 py-1 rounded-lg text-[10px] font-semibold uppercase tracking-wide", statusColors[item.status]) }, item.status.replace("-", " ")),
|
|
17771
|
+
React$3.createElement("span", { className: cn("px-2.5 py-1 rounded-lg text-[10px] font-semibold uppercase tracking-wide", priorityColors$1[item.priority]) }, item.priority),
|
|
17772
|
+
item.type && (React$3.createElement("span", { className: "px-2.5 py-1 rounded-lg text-[10px] font-medium bg-gray-100 text-gray-700" }, item.type)),
|
|
17773
|
+
React$3.createElement("span", { className: "ml-auto text-[10px] text-gray-400" }, formatDate(item.createdAt)))));
|
|
17813
17774
|
})))))))),
|
|
17814
|
-
feedbackItems.length > 0 && (React$
|
|
17775
|
+
feedbackItems.length > 0 && (React$3.createElement("div", { className: "pt-3 mt-3 border-t border-gray-200 text-xs text-gray-400 text-center" },
|
|
17815
17776
|
"Showing ",
|
|
17816
17777
|
filteredAndSortedItems.length,
|
|
17817
17778
|
" of",
|
|
@@ -40058,19 +40019,19 @@ const priorityColors = {
|
|
|
40058
40019
|
const FeedbackDetail = ({ feedback: initialFeedback, onBack, onDelete, onUpdate, }) => {
|
|
40059
40020
|
var _a, _b, _c;
|
|
40060
40021
|
const { config, updateFeedback: updateFeedback$1, currentUser } = useMarkupStore();
|
|
40061
|
-
const [feedback, setFeedback] = useState(initialFeedback);
|
|
40062
|
-
const [newComment, setNewComment] = useState("");
|
|
40063
|
-
const [isAddingComment, setIsAddingComment] = useState(false);
|
|
40064
|
-
const [showFullScreenshot, setShowFullScreenshot] = useState(false);
|
|
40065
|
-
const [copied, setCopied] = useState(false);
|
|
40066
|
-
const [isEditing, setIsEditing] = useState(false);
|
|
40067
|
-
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
40022
|
+
const [feedback, setFeedback] = useState$1(initialFeedback);
|
|
40023
|
+
const [newComment, setNewComment] = useState$1("");
|
|
40024
|
+
const [isAddingComment, setIsAddingComment] = useState$1(false);
|
|
40025
|
+
const [showFullScreenshot, setShowFullScreenshot] = useState$1(false);
|
|
40026
|
+
const [copied, setCopied] = useState$1(false);
|
|
40027
|
+
const [isEditing, setIsEditing] = useState$1(false);
|
|
40028
|
+
const [showDeleteConfirm, setShowDeleteConfirm] = useState$1(false);
|
|
40068
40029
|
// Feature 2 & 5 states
|
|
40069
|
-
const [showReplay, setShowReplay] = useState(false);
|
|
40070
|
-
const [showOverlay, setShowOverlay] = useState(false);
|
|
40071
|
-
const [overlayOpacity, setOverlayOpacity] = useState(50);
|
|
40030
|
+
const [showReplay, setShowReplay] = useState$1(false);
|
|
40031
|
+
const [showOverlay, setShowOverlay] = useState$1(false);
|
|
40032
|
+
const [overlayOpacity, setOverlayOpacity] = useState$1(50);
|
|
40072
40033
|
// Parse session actions
|
|
40073
|
-
const sessionActions = useMemo(() => {
|
|
40034
|
+
const sessionActions = useMemo$1(() => {
|
|
40074
40035
|
if (!feedback.sessionEvents)
|
|
40075
40036
|
return null;
|
|
40076
40037
|
try {
|
|
@@ -40122,13 +40083,13 @@ const FeedbackDetail = ({ feedback: initialFeedback, onBack, onDelete, onUpdate,
|
|
|
40122
40083
|
setIsEditing(false);
|
|
40123
40084
|
};
|
|
40124
40085
|
if (isEditing) {
|
|
40125
|
-
return (React$
|
|
40126
|
-
React$
|
|
40127
|
-
React$
|
|
40128
|
-
React$
|
|
40086
|
+
return (React$3.createElement("div", { className: "flex flex-col h-full" },
|
|
40087
|
+
React$3.createElement("div", { className: "flex items-center justify-between p-5 pb-3 mb-3 border-b border-gray-200" },
|
|
40088
|
+
React$3.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" },
|
|
40089
|
+
React$3.createElement(ArrowLeftIcon, { className: "w-4 h-4" }),
|
|
40129
40090
|
"Cancel Editing")),
|
|
40130
|
-
React$
|
|
40131
|
-
React$
|
|
40091
|
+
React$3.createElement("div", { className: "flex-1 overflow-y-auto px-5" },
|
|
40092
|
+
React$3.createElement(FeedbackForm, { initialData: feedback, onSubmit: handleEditSubmit, onCancel: () => setIsEditing(false) }))));
|
|
40132
40093
|
}
|
|
40133
40094
|
const handleCopy = async () => {
|
|
40134
40095
|
const feedbackText = `
|
|
@@ -40242,37 +40203,37 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40242
40203
|
setShowDeleteConfirm(false);
|
|
40243
40204
|
};
|
|
40244
40205
|
const handleCancelDelete = () => setShowDeleteConfirm(false);
|
|
40245
|
-
return (React$
|
|
40246
|
-
React$
|
|
40247
|
-
React$
|
|
40248
|
-
React$
|
|
40206
|
+
return (React$3.createElement("div", { className: "flex flex-col h-full px-5 overflow-y-auto" },
|
|
40207
|
+
React$3.createElement("div", { className: "flex items-center justify-between pb-3 mb-3 border-b border-gray-200" },
|
|
40208
|
+
React$3.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" },
|
|
40209
|
+
React$3.createElement(ArrowLeftIcon, { className: "w-4 h-4" }),
|
|
40249
40210
|
"Back"),
|
|
40250
|
-
React$
|
|
40251
|
-
React$
|
|
40252
|
-
React$
|
|
40253
|
-
"Copied!")) : (React$
|
|
40254
|
-
React$
|
|
40255
|
-
canEdit && (React$
|
|
40256
|
-
React$
|
|
40257
|
-
canDelete && onDelete && (React$
|
|
40258
|
-
React$
|
|
40259
|
-
showDeleteConfirm && (React$
|
|
40260
|
-
React$
|
|
40261
|
-
React$
|
|
40262
|
-
React$
|
|
40263
|
-
React$
|
|
40264
|
-
React$
|
|
40265
|
-
React$
|
|
40266
|
-
React$
|
|
40267
|
-
((_b = feedback.pageMetadata) === null || _b === void 0 ? void 0 : _b.deviceType) && (React$
|
|
40211
|
+
React$3.createElement("div", { className: "flex items-center gap-2" },
|
|
40212
|
+
React$3.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$3.createElement(React$3.Fragment, null,
|
|
40213
|
+
React$3.createElement(CheckIcon, { className: "w-4 h-4" }),
|
|
40214
|
+
"Copied!")) : (React$3.createElement(React$3.Fragment, null,
|
|
40215
|
+
React$3.createElement(CopyIcon, { className: "w-4 h-4" })))),
|
|
40216
|
+
canEdit && (React$3.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" },
|
|
40217
|
+
React$3.createElement(EditIcon, { className: "w-4 h-4" }))),
|
|
40218
|
+
canDelete && onDelete && (React$3.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" },
|
|
40219
|
+
React$3.createElement(TrashIcon, { className: "w-4 h-4" }))))),
|
|
40220
|
+
showDeleteConfirm && (React$3.createElement("div", { className: "mb-3 p-2 rounded-xl border border-red-200 bg-red-50 text-red-800 flex items-center gap-3" },
|
|
40221
|
+
React$3.createElement("div", { className: "flex-1 text-xs font-medium" }, "Delete this feedback?"),
|
|
40222
|
+
React$3.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"),
|
|
40223
|
+
React$3.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"))),
|
|
40224
|
+
React$3.createElement("div", { className: "flex-1 pr-1" },
|
|
40225
|
+
React$3.createElement("div", { className: "mb-4" },
|
|
40226
|
+
React$3.createElement("div", { className: "flex items-start gap-2 mb-2" },
|
|
40227
|
+
React$3.createElement("h3", { className: "text-base font-semibold text-gray-900 m-0 flex-1" }, feedback.title),
|
|
40228
|
+
((_b = feedback.pageMetadata) === null || _b === void 0 ? void 0 : _b.deviceType) && (React$3.createElement("div", { className: "flex-shrink-0 mt-0.5" },
|
|
40268
40229
|
feedback.pageMetadata.deviceType ===
|
|
40269
|
-
"desktop" && (React$
|
|
40230
|
+
"desktop" && (React$3.createElement(DesktopIcon, { className: "w-5 h-5 text-gray-500", title: "Desktop" })),
|
|
40270
40231
|
feedback.pageMetadata.deviceType ===
|
|
40271
|
-
"tablet" && (React$
|
|
40232
|
+
"tablet" && (React$3.createElement(TabletIcon, { className: "w-5 h-5 text-gray-500", title: "Tablet" })),
|
|
40272
40233
|
feedback.pageMetadata.deviceType ===
|
|
40273
|
-
"mobile" && (React$
|
|
40274
|
-
React$
|
|
40275
|
-
feedback.type && (React$
|
|
40234
|
+
"mobile" && (React$3.createElement(MobileIcon, { className: "w-5 h-5 text-gray-500", title: "Mobile" }))))),
|
|
40235
|
+
React$3.createElement("div", { className: "flex items-center gap-2 flex-wrap" },
|
|
40236
|
+
feedback.type && (React$3.createElement("span", { className: cn("px-2 py-0.5 rounded-full text-[10px] font-medium uppercase", feedback.type === "copy-amendment"
|
|
40276
40237
|
? "bg-brand-blue/50 text-gray-800"
|
|
40277
40238
|
: feedback.type === "bug"
|
|
40278
40239
|
? "bg-brand-pink/30 text-gray-800"
|
|
@@ -40281,136 +40242,136 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40281
40242
|
: "bg-gray-100 text-gray-700") }, feedback.type === "copy-amendment"
|
|
40282
40243
|
? "Copy"
|
|
40283
40244
|
: "General")),
|
|
40284
|
-
React$
|
|
40285
|
-
React$
|
|
40286
|
-
!isReadOnly && (React$
|
|
40287
|
-
React$
|
|
40288
|
-
React$
|
|
40245
|
+
React$3.createElement("span", { className: cn("px-2 py-0.5 rounded-full text-[10px] font-medium uppercase", priorityColors[feedback.priority]) }, feedback.priority),
|
|
40246
|
+
React$3.createElement("span", { className: "text-xs text-gray-400" }, formatDate(feedback.createdAt)))),
|
|
40247
|
+
!isReadOnly && (React$3.createElement("div", { className: "mb-4" },
|
|
40248
|
+
React$3.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Status"),
|
|
40249
|
+
React$3.createElement("div", { className: "flex gap-1.5" }, statusOptions.map((option) => (React$3.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
|
|
40289
40250
|
? cn(option.color, "border-transparent")
|
|
40290
40251
|
: "bg-white text-gray-600 border-gray-200 hover:border-brand-blue") }, option.label)))))),
|
|
40291
|
-
feedback.screenshot && (React$
|
|
40292
|
-
React$
|
|
40293
|
-
React$
|
|
40294
|
-
React$
|
|
40295
|
-
React$
|
|
40296
|
-
React$
|
|
40297
|
-
React$
|
|
40298
|
-
feedback.screenRecording && (React$
|
|
40299
|
-
React$
|
|
40300
|
-
React$
|
|
40301
|
-
React$
|
|
40302
|
-
(feedback.designMockup || feedback.sessionEvents) && (React$
|
|
40303
|
-
feedback.sessionEvents && (React$
|
|
40304
|
-
feedback.designMockup && (React$
|
|
40305
|
-
feedback.type === "copy-amendment" && (React$
|
|
40306
|
-
feedback.currentCopy && (React$
|
|
40307
|
-
React$
|
|
40308
|
-
React$
|
|
40309
|
-
React$
|
|
40310
|
-
feedback.newCopy && (React$
|
|
40311
|
-
React$
|
|
40312
|
-
React$
|
|
40313
|
-
React$
|
|
40314
|
-
feedback.type === "image-change" && (React$
|
|
40252
|
+
feedback.screenshot && (React$3.createElement("div", { className: "mb-5" },
|
|
40253
|
+
React$3.createElement("label", { className: "block text-xs font-semibold text-gray-800 mb-2 uppercase tracking-wide" }, "Screenshot"),
|
|
40254
|
+
React$3.createElement("div", { className: "relative rounded-xl overflow-hidden shadow-md cursor-pointer group", onClick: () => setShowFullScreenshot(true) },
|
|
40255
|
+
React$3.createElement("img", { src: feedback.screenshot, alt: "Feedback screenshot", className: "w-full block" }),
|
|
40256
|
+
React$3.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" },
|
|
40257
|
+
React$3.createElement("div", { className: "bg-white rounded-full p-3 shadow-xl transform scale-90 group-hover:scale-100 transition-transform" },
|
|
40258
|
+
React$3.createElement(ZoomInIcon, { className: "w-6 h-6 text-gray-700" })))))),
|
|
40259
|
+
feedback.screenRecording && (React$3.createElement("div", { className: "mb-5" },
|
|
40260
|
+
React$3.createElement("label", { className: "block text-xs font-semibold text-gray-800 mb-2 uppercase tracking-wide" }, "Screen Recording"),
|
|
40261
|
+
React$3.createElement("div", { className: "relative rounded-xl overflow-hidden shadow-md border border-gray-200" },
|
|
40262
|
+
React$3.createElement("video", { src: feedback.screenRecording, controls: true, className: "w-full h-auto bg-black" })))),
|
|
40263
|
+
(feedback.designMockup || feedback.sessionEvents) && (React$3.createElement("div", { className: "flex gap-2 mb-5" },
|
|
40264
|
+
feedback.sessionEvents && (React$3.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")),
|
|
40265
|
+
feedback.designMockup && (React$3.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")))),
|
|
40266
|
+
feedback.type === "copy-amendment" && (React$3.createElement(React$3.Fragment, null,
|
|
40267
|
+
feedback.currentCopy && (React$3.createElement("div", { className: "mb-4" },
|
|
40268
|
+
React$3.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Current Copy"),
|
|
40269
|
+
React$3.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-3" },
|
|
40270
|
+
React$3.createElement("p", { className: "text-sm text-gray-800 m-0 whitespace-pre-wrap" }, feedback.currentCopy)))),
|
|
40271
|
+
feedback.newCopy && (React$3.createElement("div", { className: "mb-4" },
|
|
40272
|
+
React$3.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "New Copy"),
|
|
40273
|
+
React$3.createElement("div", { className: "bg-green-50 border border-green-200 rounded-lg p-3" },
|
|
40274
|
+
React$3.createElement("p", { className: "text-sm text-gray-800 m-0 whitespace-pre-wrap" }, feedback.newCopy)))))),
|
|
40275
|
+
feedback.type === "image-change" && (React$3.createElement(React$3.Fragment, null,
|
|
40315
40276
|
(feedback.originalImageSrc ||
|
|
40316
|
-
feedback.originalImageBackground) && (React$
|
|
40317
|
-
React$
|
|
40318
|
-
React$
|
|
40319
|
-
React$
|
|
40320
|
-
React$
|
|
40277
|
+
feedback.originalImageBackground) && (React$3.createElement("div", { className: "mb-4" },
|
|
40278
|
+
React$3.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Current Image"),
|
|
40279
|
+
React$3.createElement("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-3" }, feedback.originalImageSrc ? (React$3.createElement(React$3.Fragment, null,
|
|
40280
|
+
React$3.createElement("img", { src: feedback.originalImageSrc, alt: "Original", className: "w-full h-48 object-cover rounded-lg mb-2" }),
|
|
40281
|
+
React$3.createElement("p", { className: "text-[10px] text-gray-600 font-mono break-all" }, feedback.originalImageSrc))) : (React$3.createElement("p", { className: "text-[10px] text-gray-600 font-mono break-all" },
|
|
40321
40282
|
"Background Image:",
|
|
40322
40283
|
" ",
|
|
40323
40284
|
feedback.originalImageBackground))))),
|
|
40324
|
-
feedback.replacementImageUrl && (React$
|
|
40325
|
-
React$
|
|
40326
|
-
React$
|
|
40327
|
-
React$
|
|
40328
|
-
React$
|
|
40329
|
-
feedback.description && (React$
|
|
40330
|
-
React$
|
|
40331
|
-
React$
|
|
40332
|
-
feedback.tags && feedback.tags.length > 0 && (React$
|
|
40333
|
-
React$
|
|
40334
|
-
React$
|
|
40335
|
-
feedback.pageMetadata && (React$
|
|
40336
|
-
React$
|
|
40337
|
-
React$
|
|
40338
|
-
React$
|
|
40339
|
-
React$
|
|
40285
|
+
feedback.replacementImageUrl && (React$3.createElement("div", { className: "mb-4" },
|
|
40286
|
+
React$3.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Replacement Image"),
|
|
40287
|
+
React$3.createElement("div", { className: "bg-green-50 border border-green-200 rounded-lg p-3" },
|
|
40288
|
+
React$3.createElement("img", { src: feedback.replacementImageUrl, alt: "Replacement", className: "w-full h-48 object-cover rounded-lg mb-2" }),
|
|
40289
|
+
React$3.createElement("p", { className: "text-[10px] text-gray-600 font-mono break-all" }, feedback.replacementImageUrl)))))),
|
|
40290
|
+
feedback.description && (React$3.createElement("div", { className: "mb-4" },
|
|
40291
|
+
React$3.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Description"),
|
|
40292
|
+
React$3.createElement("p", { className: "text-sm text-gray-600 m-0 whitespace-pre-wrap" }, feedback.description))),
|
|
40293
|
+
feedback.tags && feedback.tags.length > 0 && (React$3.createElement("div", { className: "mb-4" },
|
|
40294
|
+
React$3.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Tags"),
|
|
40295
|
+
React$3.createElement("div", { className: "flex flex-wrap gap-1.5" }, feedback.tags.map((tag) => (React$3.createElement("span", { key: tag, className: "px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs" }, tag)))))),
|
|
40296
|
+
feedback.pageMetadata && (React$3.createElement("div", { className: "mb-4 p-2.5 bg-gray-50 rounded-lg" },
|
|
40297
|
+
React$3.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-1.5" }, "Page Info"),
|
|
40298
|
+
React$3.createElement("div", { className: "text-xs text-gray-500 space-y-1" },
|
|
40299
|
+
React$3.createElement("div", { className: "truncate" },
|
|
40300
|
+
React$3.createElement("span", { className: "font-medium" }, "URL:"),
|
|
40340
40301
|
" ",
|
|
40341
40302
|
feedback.pageMetadata.url),
|
|
40342
|
-
feedback.pageMetadata.componentName && (React$
|
|
40343
|
-
React$
|
|
40303
|
+
feedback.pageMetadata.componentName && (React$3.createElement("div", { className: "truncate" },
|
|
40304
|
+
React$3.createElement("span", { className: "font-medium" }, "Component:"),
|
|
40344
40305
|
" ",
|
|
40345
|
-
React$
|
|
40346
|
-
feedback.pageMetadata.elementInfo && (React$
|
|
40347
|
-
React$
|
|
40306
|
+
React$3.createElement("code", { className: "bg-gray-200 px-1.5 py-0.5 rounded text-xs font-mono text-gray-800" }, feedback.pageMetadata.componentName))),
|
|
40307
|
+
feedback.pageMetadata.elementInfo && (React$3.createElement("div", { className: "truncate" },
|
|
40308
|
+
React$3.createElement("span", { className: "font-medium" }, "Element:"),
|
|
40348
40309
|
" ",
|
|
40349
|
-
React$
|
|
40350
|
-
React$
|
|
40351
|
-
React$
|
|
40310
|
+
React$3.createElement("code", { className: "bg-blue-50 px-1.5 py-0.5 rounded text-xs font-mono text-blue-800" }, feedback.pageMetadata.elementInfo))),
|
|
40311
|
+
React$3.createElement("div", null,
|
|
40312
|
+
React$3.createElement("span", { className: "font-medium" }, "Screen:"),
|
|
40352
40313
|
" ",
|
|
40353
40314
|
feedback.pageMetadata.screenWidth,
|
|
40354
40315
|
"x",
|
|
40355
40316
|
feedback.pageMetadata.screenHeight),
|
|
40356
|
-
React$
|
|
40357
|
-
React$
|
|
40317
|
+
React$3.createElement("div", null,
|
|
40318
|
+
React$3.createElement("span", { className: "font-medium" }, "User Agent:"),
|
|
40358
40319
|
" ",
|
|
40359
40320
|
feedback.pageMetadata.userAgent)))),
|
|
40360
|
-
React$
|
|
40361
|
-
React$
|
|
40321
|
+
React$3.createElement("div", { className: "mb-4" },
|
|
40322
|
+
React$3.createElement("label", { className: "block text-xs font-medium text-gray-700 mb-2" },
|
|
40362
40323
|
"Comments (",
|
|
40363
40324
|
((_c = feedback.comments) === null || _c === void 0 ? void 0 : _c.length) || 0,
|
|
40364
40325
|
")"),
|
|
40365
|
-
feedback.comments && feedback.comments.length > 0 && (React$
|
|
40366
|
-
React$
|
|
40367
|
-
React$
|
|
40368
|
-
React$
|
|
40369
|
-
React$
|
|
40370
|
-
React$
|
|
40371
|
-
React$
|
|
40372
|
-
React$
|
|
40373
|
-
React$
|
|
40326
|
+
feedback.comments && feedback.comments.length > 0 && (React$3.createElement("div", { className: "space-y-3 mb-4" }, feedback.comments.map((comment) => (React$3.createElement("div", { key: comment.id, className: "p-3 bg-white border border-gray-200 rounded-xl shadow-sm" },
|
|
40327
|
+
React$3.createElement("div", { className: "flex items-center gap-2 mb-2" },
|
|
40328
|
+
React$3.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" },
|
|
40329
|
+
React$3.createElement(UserIcon, { className: "w-4 h-4 text-white" })),
|
|
40330
|
+
React$3.createElement("span", { className: "text-xs font-semibold text-gray-900" }, comment.createdBy.name),
|
|
40331
|
+
React$3.createElement("span", { className: "text-[10px] text-gray-500 font-medium" }, formatDate(comment.createdAt))),
|
|
40332
|
+
React$3.createElement("p", { className: "text-sm text-gray-700 m-0 ml-10 whitespace-pre-wrap" }, comment.content || comment.text)))))),
|
|
40333
|
+
React$3.createElement("div", { className: "flex gap-2" },
|
|
40334
|
+
React$3.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) => {
|
|
40374
40335
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
40375
40336
|
e.preventDefault();
|
|
40376
40337
|
handleAddComment();
|
|
40377
40338
|
}
|
|
40378
40339
|
} }),
|
|
40379
|
-
React$
|
|
40380
|
-
React$
|
|
40340
|
+
React$3.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)" } },
|
|
40341
|
+
React$3.createElement(SendIcon, { className: "w-5 h-5" }))))),
|
|
40381
40342
|
showFullScreenshot &&
|
|
40382
40343
|
feedback.screenshot &&
|
|
40383
|
-
createPortal(React$
|
|
40384
|
-
React$
|
|
40385
|
-
React$
|
|
40386
|
-
React$
|
|
40344
|
+
createPortal(React$3.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) },
|
|
40345
|
+
React$3.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" },
|
|
40346
|
+
React$3.createElement(CloseIcon, { className: "w-8 h-8 text-white" })),
|
|
40347
|
+
React$3.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),
|
|
40387
40348
|
showReplay &&
|
|
40388
40349
|
sessionActions &&
|
|
40389
40350
|
sessionActions.length > 0 &&
|
|
40390
|
-
createPortal(React$
|
|
40391
|
-
React$
|
|
40392
|
-
React$
|
|
40393
|
-
React$
|
|
40394
|
-
React$
|
|
40395
|
-
React$
|
|
40396
|
-
React$
|
|
40397
|
-
React$
|
|
40398
|
-
React$
|
|
40399
|
-
React$
|
|
40351
|
+
createPortal(React$3.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) },
|
|
40352
|
+
React$3.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() },
|
|
40353
|
+
React$3.createElement("div", { className: "p-4 border-b border-gray-100 flex items-center justify-between bg-gray-50" },
|
|
40354
|
+
React$3.createElement("div", null,
|
|
40355
|
+
React$3.createElement("h3", { className: "font-semibold text-gray-900" }, "Session Activity Timeline"),
|
|
40356
|
+
React$3.createElement("p", { className: "text-xs text-gray-600 mt-1" }, "User actions recorded during feedback creation")),
|
|
40357
|
+
React$3.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" },
|
|
40358
|
+
React$3.createElement(CloseIcon, { className: "w-5 h-5" }))),
|
|
40359
|
+
React$3.createElement("div", { className: "flex-1 overflow-y-auto p-4" },
|
|
40360
|
+
React$3.createElement("div", { className: "space-y-2" }, sessionActions.map((action, idx) => {
|
|
40400
40361
|
var _a;
|
|
40401
40362
|
const baseTime = ((_a = sessionActions[0]) === null || _a === void 0 ? void 0 : _a.timestamp) ||
|
|
40402
40363
|
action.timestamp;
|
|
40403
|
-
return (React$
|
|
40404
|
-
React$
|
|
40405
|
-
React$
|
|
40406
|
-
React$
|
|
40407
|
-
React$
|
|
40364
|
+
return (React$3.createElement("div", { key: idx, className: "flex items-start gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors" },
|
|
40365
|
+
React$3.createElement("div", { className: "flex-shrink-0 w-20 text-xs font-mono text-gray-600" },
|
|
40366
|
+
React$3.createElement("div", null, formatTimestamp(action.timestamp)),
|
|
40367
|
+
React$3.createElement("div", { className: "text-gray-400" }, getRelativeTime(action.timestamp, baseTime))),
|
|
40368
|
+
React$3.createElement("div", { className: "flex-1 min-w-0" },
|
|
40408
40369
|
action.type ===
|
|
40409
|
-
"click" && (React$
|
|
40410
|
-
React$
|
|
40411
|
-
React$
|
|
40412
|
-
React$
|
|
40413
|
-
React$
|
|
40370
|
+
"click" && (React$3.createElement("div", null,
|
|
40371
|
+
React$3.createElement("div", { className: "flex items-center gap-2 mb-1" },
|
|
40372
|
+
React$3.createElement("span", { className: "inline-block w-2 h-2 bg-blue-500 rounded-full" }),
|
|
40373
|
+
React$3.createElement("span", { className: "font-medium text-gray-900" }, "Clicked")),
|
|
40374
|
+
React$3.createElement("div", { className: "text-sm text-gray-700 font-mono bg-white px-2 py-1 rounded border border-gray-200" },
|
|
40414
40375
|
"<",
|
|
40415
40376
|
action.data
|
|
40416
40377
|
.elementTag ||
|
|
@@ -40423,10 +40384,10 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40423
40384
|
` class="${action.data.elementClass}"`,
|
|
40424
40385
|
">"),
|
|
40425
40386
|
action.data
|
|
40426
|
-
.elementText && (React$
|
|
40387
|
+
.elementText && (React$3.createElement("div", { className: "mt-1 text-sm text-gray-600" },
|
|
40427
40388
|
"Text:",
|
|
40428
40389
|
" ",
|
|
40429
|
-
React$
|
|
40390
|
+
React$3.createElement("span", { className: "italic" },
|
|
40430
40391
|
"\"",
|
|
40431
40392
|
action.data.elementText.substring(0, 100),
|
|
40432
40393
|
action
|
|
@@ -40438,19 +40399,19 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40438
40399
|
: "",
|
|
40439
40400
|
"\""))))),
|
|
40440
40401
|
action.type ===
|
|
40441
|
-
"navigation" && (React$
|
|
40442
|
-
React$
|
|
40443
|
-
React$
|
|
40444
|
-
React$
|
|
40445
|
-
React$
|
|
40402
|
+
"navigation" && (React$3.createElement("div", null,
|
|
40403
|
+
React$3.createElement("div", { className: "flex items-center gap-2 mb-1" },
|
|
40404
|
+
React$3.createElement("span", { className: "inline-block w-2 h-2 bg-purple-500 rounded-full" }),
|
|
40405
|
+
React$3.createElement("span", { className: "font-medium text-gray-900" }, "Navigated")),
|
|
40406
|
+
React$3.createElement("div", { className: "text-sm text-gray-700 break-all" }, action
|
|
40446
40407
|
.data
|
|
40447
40408
|
.url))),
|
|
40448
40409
|
action.type ===
|
|
40449
|
-
"scroll" && (React$
|
|
40450
|
-
React$
|
|
40451
|
-
React$
|
|
40452
|
-
React$
|
|
40453
|
-
React$
|
|
40410
|
+
"scroll" && (React$3.createElement("div", null,
|
|
40411
|
+
React$3.createElement("div", { className: "flex items-center gap-2 mb-1" },
|
|
40412
|
+
React$3.createElement("span", { className: "inline-block w-2 h-2 bg-green-500 rounded-full" }),
|
|
40413
|
+
React$3.createElement("span", { className: "font-medium text-gray-900" }, "Scrolled")),
|
|
40414
|
+
React$3.createElement("div", { className: "text-sm text-gray-700" },
|
|
40454
40415
|
"Position:",
|
|
40455
40416
|
" ",
|
|
40456
40417
|
action
|
|
@@ -40458,11 +40419,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40458
40419
|
.scrollY,
|
|
40459
40420
|
"px"))),
|
|
40460
40421
|
action.type ===
|
|
40461
|
-
"input" && (React$
|
|
40462
|
-
React$
|
|
40463
|
-
React$
|
|
40464
|
-
React$
|
|
40465
|
-
React$
|
|
40422
|
+
"input" && (React$3.createElement("div", null,
|
|
40423
|
+
React$3.createElement("div", { className: "flex items-center gap-2 mb-1" },
|
|
40424
|
+
React$3.createElement("span", { className: "inline-block w-2 h-2 bg-orange-500 rounded-full" }),
|
|
40425
|
+
React$3.createElement("span", { className: "font-medium text-gray-900" }, "Input")),
|
|
40426
|
+
React$3.createElement("div", { className: "text-sm text-gray-700" },
|
|
40466
40427
|
action
|
|
40467
40428
|
.data
|
|
40468
40429
|
.inputType,
|
|
@@ -40471,13 +40432,13 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40471
40432
|
}))))), document.body),
|
|
40472
40433
|
showOverlay &&
|
|
40473
40434
|
feedback.designMockup &&
|
|
40474
|
-
createPortal(React$
|
|
40475
|
-
React$
|
|
40476
|
-
React$
|
|
40477
|
-
React$
|
|
40478
|
-
React$
|
|
40479
|
-
React$
|
|
40480
|
-
React$
|
|
40435
|
+
createPortal(React$3.createElement("div", { className: "fixed inset-0 z-[10000] pointer-events-none" },
|
|
40436
|
+
React$3.createElement("img", { src: feedback.designMockup, style: { opacity: overlayOpacity / 100 }, className: "w-full h-full object-contain object-top", alt: "Design Mockup Overlay" }),
|
|
40437
|
+
React$3.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" },
|
|
40438
|
+
React$3.createElement("span", { className: "text-xs font-bold text-gray-500 uppercase whitespace-nowrap" }, "Overlay Opacity"),
|
|
40439
|
+
React$3.createElement("input", { type: "range", min: "0", max: "100", value: overlayOpacity, onChange: (e) => setOverlayOpacity(Number(e.target.value)), className: "w-32 accent-brand-blue" }),
|
|
40440
|
+
React$3.createElement("button", { onClick: () => setShowOverlay(false), className: "ml-2 hover:bg-gray-200 p-1.5 rounded-full border-none bg-transparent" },
|
|
40441
|
+
React$3.createElement(CloseIcon, { className: "w-4 h-4 text-gray-500" })))), document.body)));
|
|
40481
40442
|
};
|
|
40482
40443
|
|
|
40483
40444
|
const signUp = async (email, password) => {
|
|
@@ -40520,11 +40481,11 @@ const getCurrentUser = () => {
|
|
|
40520
40481
|
};
|
|
40521
40482
|
|
|
40522
40483
|
const AuthForm = ({ onSuccess }) => {
|
|
40523
|
-
const [mode, setMode] = useState("login");
|
|
40524
|
-
const [email, setEmail] = useState("");
|
|
40525
|
-
const [password, setPassword] = useState("");
|
|
40526
|
-
const [error, setError] = useState(null);
|
|
40527
|
-
const [loading, setLoading] = useState(false);
|
|
40484
|
+
const [mode, setMode] = useState$1("login");
|
|
40485
|
+
const [email, setEmail] = useState$1("");
|
|
40486
|
+
const [password, setPassword] = useState$1("");
|
|
40487
|
+
const [error, setError] = useState$1(null);
|
|
40488
|
+
const [loading, setLoading] = useState$1(false);
|
|
40528
40489
|
const handleSubmit = async (e) => {
|
|
40529
40490
|
e.preventDefault();
|
|
40530
40491
|
setError(null);
|
|
@@ -40585,8 +40546,8 @@ const VIEWPORT_PRESETS = [
|
|
|
40585
40546
|
];
|
|
40586
40547
|
const ViewportControls = () => {
|
|
40587
40548
|
const { viewportMode, setViewportMode, isOpen: isWidgetOpen } = useMarkupStore();
|
|
40588
|
-
const [isExpanded, setIsExpanded] = React$
|
|
40589
|
-
const dropdownRef = React$
|
|
40549
|
+
const [isExpanded, setIsExpanded] = React$3.useState(false);
|
|
40550
|
+
const dropdownRef = React$3.useRef(null);
|
|
40590
40551
|
const handlePresetClick = (preset) => {
|
|
40591
40552
|
setViewportMode({ width: preset.width, height: preset.height });
|
|
40592
40553
|
setIsExpanded(false);
|
|
@@ -40599,7 +40560,7 @@ const ViewportControls = () => {
|
|
|
40599
40560
|
return (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.width) === preset.width && (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.height) === preset.height;
|
|
40600
40561
|
};
|
|
40601
40562
|
// Close dropdown on outside click
|
|
40602
|
-
React$
|
|
40563
|
+
React$3.useEffect(() => {
|
|
40603
40564
|
if (!isExpanded)
|
|
40604
40565
|
return;
|
|
40605
40566
|
const handleClickOutside = (event) => {
|
|
@@ -40611,7 +40572,7 @@ const ViewportControls = () => {
|
|
|
40611
40572
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
40612
40573
|
}, [isExpanded]);
|
|
40613
40574
|
// Handle ESC key to close dropdown or reset viewport
|
|
40614
|
-
React$
|
|
40575
|
+
React$3.useEffect(() => {
|
|
40615
40576
|
const handleKeyDown = (event) => {
|
|
40616
40577
|
if (event.key === 'Escape') {
|
|
40617
40578
|
if (isExpanded) {
|
|
@@ -40630,49 +40591,49 @@ const ViewportControls = () => {
|
|
|
40630
40591
|
// Don't show controls when widget is not open
|
|
40631
40592
|
if (!isWidgetOpen)
|
|
40632
40593
|
return null;
|
|
40633
|
-
return (React$
|
|
40634
|
-
!viewportMode ? (React$
|
|
40635
|
-
React$
|
|
40636
|
-
"Responsive Mode")) : (React$
|
|
40637
|
-
React$
|
|
40594
|
+
return (React$3.createElement("div", { ref: dropdownRef, className: "fixed cursor-pointer top-4 left-1/2 -translate-x-1/2 z-[999998] flex items-center gap-2" },
|
|
40595
|
+
!viewportMode ? (React$3.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" },
|
|
40596
|
+
React$3.createElement(DesktopIcon, { className: "w-4 h-4" }),
|
|
40597
|
+
"Responsive Mode")) : (React$3.createElement("div", { className: "bg-white border-2 border-gray-300 rounded-xl px-4 py-2 shadow-lg flex items-center gap-3" },
|
|
40598
|
+
React$3.createElement("span", { className: "text-sm font-medium text-gray-700" },
|
|
40638
40599
|
viewportMode.width,
|
|
40639
40600
|
" \u00D7 ",
|
|
40640
40601
|
viewportMode.height),
|
|
40641
|
-
React$
|
|
40642
|
-
React$
|
|
40643
|
-
React$
|
|
40644
|
-
isExpanded && (React$
|
|
40645
|
-
React$
|
|
40646
|
-
React$
|
|
40647
|
-
VIEWPORT_PRESETS.filter((p) => p.deviceType === "mobile").map((preset) => (React$
|
|
40602
|
+
React$3.createElement("div", { onClick: () => setIsExpanded(!isExpanded), className: "text-gray-600 hover:text-gray-900 transition-colors" },
|
|
40603
|
+
React$3.createElement(DesktopIcon, { className: "w-4 h-4" })),
|
|
40604
|
+
React$3.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"))),
|
|
40605
|
+
isExpanded && (React$3.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]" },
|
|
40606
|
+
React$3.createElement("div", { className: "space-y-2" },
|
|
40607
|
+
React$3.createElement("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide px-2 mb-2" }, "Mobile"),
|
|
40608
|
+
VIEWPORT_PRESETS.filter((p) => p.deviceType === "mobile").map((preset) => (React$3.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)
|
|
40648
40609
|
? "bg-blue-50 border border-blue-200"
|
|
40649
40610
|
: "hover:bg-gray-100") },
|
|
40650
|
-
React$
|
|
40651
|
-
React$
|
|
40652
|
-
React$
|
|
40653
|
-
React$
|
|
40611
|
+
React$3.createElement(MobileIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }),
|
|
40612
|
+
React$3.createElement("div", { className: "flex-1" },
|
|
40613
|
+
React$3.createElement("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900" }, preset.name),
|
|
40614
|
+
React$3.createElement("div", { className: "text-xs text-gray-500" },
|
|
40654
40615
|
preset.width,
|
|
40655
40616
|
" \u00D7 ",
|
|
40656
40617
|
preset.height))))),
|
|
40657
|
-
React$
|
|
40658
|
-
VIEWPORT_PRESETS.filter((p) => p.deviceType === "tablet").map((preset) => (React$
|
|
40618
|
+
React$3.createElement("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide px-2 mt-4 mb-2" }, "Tablet"),
|
|
40619
|
+
VIEWPORT_PRESETS.filter((p) => p.deviceType === "tablet").map((preset) => (React$3.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)
|
|
40659
40620
|
? "bg-blue-50 border border-blue-200"
|
|
40660
40621
|
: "hover:bg-gray-100") },
|
|
40661
|
-
React$
|
|
40662
|
-
React$
|
|
40663
|
-
React$
|
|
40664
|
-
React$
|
|
40622
|
+
React$3.createElement(TabletIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }),
|
|
40623
|
+
React$3.createElement("div", { className: "flex-1" },
|
|
40624
|
+
React$3.createElement("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900" }, preset.name),
|
|
40625
|
+
React$3.createElement("div", { className: "text-xs text-gray-500" },
|
|
40665
40626
|
preset.width,
|
|
40666
40627
|
" \u00D7 ",
|
|
40667
40628
|
preset.height))))),
|
|
40668
|
-
React$
|
|
40669
|
-
VIEWPORT_PRESETS.filter((p) => p.deviceType === "desktop").map((preset) => (React$
|
|
40629
|
+
React$3.createElement("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide px-2 mt-4 mb-2" }, "Desktop"),
|
|
40630
|
+
VIEWPORT_PRESETS.filter((p) => p.deviceType === "desktop").map((preset) => (React$3.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)
|
|
40670
40631
|
? "bg-blue-50 border border-blue-200"
|
|
40671
40632
|
: "hover:bg-gray-100") },
|
|
40672
|
-
React$
|
|
40673
|
-
React$
|
|
40674
|
-
React$
|
|
40675
|
-
React$
|
|
40633
|
+
React$3.createElement(DesktopIcon, { className: cn("w-4 h-4 transition-colors", isActivePreset(preset) ? "text-blue-600" : "text-gray-400 group-hover:text-gray-600") }),
|
|
40634
|
+
React$3.createElement("div", { className: "flex-1" },
|
|
40635
|
+
React$3.createElement("div", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900" }, preset.name),
|
|
40636
|
+
React$3.createElement("div", { className: "text-xs text-gray-500" },
|
|
40676
40637
|
preset.width,
|
|
40677
40638
|
" \u00D7 ",
|
|
40678
40639
|
preset.height))))))))));
|
|
@@ -40680,8 +40641,8 @@ const ViewportControls = () => {
|
|
|
40680
40641
|
|
|
40681
40642
|
const FeedbackPins = ({ onPinClick }) => {
|
|
40682
40643
|
const { feedbackItems, showPins } = useMarkupStore();
|
|
40683
|
-
const [docSize, setDocSize] = useState({ width: 0, height: 0 });
|
|
40684
|
-
useEffect(() => {
|
|
40644
|
+
const [docSize, setDocSize] = useState$1({ width: 0, height: 0 });
|
|
40645
|
+
useEffect$2(() => {
|
|
40685
40646
|
const measure = () => {
|
|
40686
40647
|
const root = document.documentElement;
|
|
40687
40648
|
const body = document.body;
|
|
@@ -40704,7 +40665,7 @@ const FeedbackPins = ({ onPinClick }) => {
|
|
|
40704
40665
|
};
|
|
40705
40666
|
}, []);
|
|
40706
40667
|
// Filter pins for current page URL
|
|
40707
|
-
const currentPagePins = useMemo(() => {
|
|
40668
|
+
const currentPagePins = useMemo$1(() => {
|
|
40708
40669
|
const currentUrl = window.location.href;
|
|
40709
40670
|
return feedbackItems.filter(item => {
|
|
40710
40671
|
var _a;
|
|
@@ -40731,7 +40692,7 @@ const FeedbackPins = ({ onPinClick }) => {
|
|
|
40731
40692
|
pointerEvents: 'none',
|
|
40732
40693
|
zIndex: 999998,
|
|
40733
40694
|
};
|
|
40734
|
-
return (React$
|
|
40695
|
+
return (React$3.createElement("div", { className: "feedback-pins-container", "data-markup-pins": true, style: containerStyle }, currentPagePins.map((feedback) => {
|
|
40735
40696
|
const { pinLocation } = feedback;
|
|
40736
40697
|
if (!pinLocation)
|
|
40737
40698
|
return null;
|
|
@@ -40754,20 +40715,20 @@ const FeedbackPins = ({ onPinClick }) => {
|
|
|
40754
40715
|
transform: 'translate(-50%, -50%)',
|
|
40755
40716
|
pointerEvents: 'auto',
|
|
40756
40717
|
};
|
|
40757
|
-
return (React$
|
|
40758
|
-
React$
|
|
40759
|
-
React$
|
|
40718
|
+
return (React$3.createElement("div", { key: feedback.id, className: "feedback-pin-wrapper", style: style, onClick: () => onPinClick(feedback) },
|
|
40719
|
+
React$3.createElement("div", { className: "feedback-pin group relative cursor-pointer" },
|
|
40720
|
+
React$3.createElement("div", { className: `
|
|
40760
40721
|
w-8 h-8 rounded-full flex items-center justify-center
|
|
40761
40722
|
shadow-lg hover:shadow-xl transition-all
|
|
40762
40723
|
${feedback.status === 'open' ? 'bg-[#E6B6CF] hover:bg-[#d9a3c0]' : 'bg-green-500 hover:bg-green-600'}
|
|
40763
40724
|
border-2 border-white
|
|
40764
40725
|
hover:scale-110
|
|
40765
40726
|
` },
|
|
40766
|
-
React$
|
|
40767
|
-
React$
|
|
40768
|
-
React$
|
|
40769
|
-
React$
|
|
40770
|
-
React$
|
|
40727
|
+
React$3.createElement(MessageIcon, { className: "w-4 h-4 text-white" })),
|
|
40728
|
+
React$3.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 " },
|
|
40729
|
+
React$3.createElement("div", { className: "font-semibold truncate" }, feedback.title || 'Feedback'),
|
|
40730
|
+
React$3.createElement("div", { className: "text-gray-300 text-[10px] mt-0.5" }, "Click to view"),
|
|
40731
|
+
React$3.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 " })))));
|
|
40771
40732
|
}
|
|
40772
40733
|
finally { }
|
|
40773
40734
|
}
|
|
@@ -40781,7 +40742,7 @@ const useFirebaseSync = () => {
|
|
|
40781
40742
|
const setFeedbackItems = useMarkupStore((state) => state.setFeedbackItems);
|
|
40782
40743
|
const isAuthenticated = useMarkupStore((state) => state.isAuthenticated);
|
|
40783
40744
|
// Auth state listener
|
|
40784
|
-
useEffect(() => {
|
|
40745
|
+
useEffect$2(() => {
|
|
40785
40746
|
// Check if Firebase is initialized by checking if any apps exist
|
|
40786
40747
|
if (getApps().length === 0) {
|
|
40787
40748
|
console.warn('Firebase not initialized. Call initFirebase() at app root or authentication will be disabled.');
|
|
@@ -40832,7 +40793,7 @@ const useFirebaseSync = () => {
|
|
|
40832
40793
|
};
|
|
40833
40794
|
}, [setCurrentUser, setIsAuthenticated]);
|
|
40834
40795
|
// Feedback subscription listener
|
|
40835
|
-
useEffect(() => {
|
|
40796
|
+
useEffect$2(() => {
|
|
40836
40797
|
console.log('🔄 Feedback subscription effect running...', {
|
|
40837
40798
|
firebaseApps: getApps().length,
|
|
40838
40799
|
projectId: config.projectId,
|
|
@@ -40869,9 +40830,9 @@ const useFirebaseSync = () => {
|
|
|
40869
40830
|
};
|
|
40870
40831
|
|
|
40871
40832
|
const useSessionRecording = () => {
|
|
40872
|
-
const actionsRef = useRef([]);
|
|
40833
|
+
const actionsRef = useRef$1([]);
|
|
40873
40834
|
const maxActions = 50; // Keep last 50 actions
|
|
40874
|
-
useEffect(() => {
|
|
40835
|
+
useEffect$2(() => {
|
|
40875
40836
|
if (typeof window === 'undefined')
|
|
40876
40837
|
return;
|
|
40877
40838
|
const recordAction = (action) => {
|
|
@@ -40974,7 +40935,7 @@ const useSessionRecording = () => {
|
|
|
40974
40935
|
const MarkupWidget = ({ config: userConfig, }) => {
|
|
40975
40936
|
var _a;
|
|
40976
40937
|
// Initialize Firebase synchronously on first render only
|
|
40977
|
-
const initRef = useRef(false);
|
|
40938
|
+
const initRef = useRef$1(false);
|
|
40978
40939
|
if (!initRef.current && (userConfig === null || userConfig === void 0 ? void 0 : userConfig.firebaseConfig) && getApps().length === 0) {
|
|
40979
40940
|
try {
|
|
40980
40941
|
initializeFirebase(userConfig.firebaseConfig);
|
|
@@ -40991,9 +40952,9 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40991
40952
|
// Initialize Session Recording (Feature 2)
|
|
40992
40953
|
const { getSessionEvents } = useSessionRecording();
|
|
40993
40954
|
// Track last clicked element for component detection (Feature 4)
|
|
40994
|
-
const lastClickedElementRef = useRef(null);
|
|
40995
|
-
const [lastClickedText, setLastClickedText] = useState('');
|
|
40996
|
-
useEffect(() => {
|
|
40955
|
+
const lastClickedElementRef = useRef$1(null);
|
|
40956
|
+
const [lastClickedText, setLastClickedText] = useState$1('');
|
|
40957
|
+
useEffect$2(() => {
|
|
40997
40958
|
const handleClick = (e) => {
|
|
40998
40959
|
var _a;
|
|
40999
40960
|
// Store the clicked element (but ignore clicks on the widget itself)
|
|
@@ -41028,7 +40989,7 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
41028
40989
|
return () => document.removeEventListener('click', handleClick, true);
|
|
41029
40990
|
}, []);
|
|
41030
40991
|
// Apply viewport mode styling to document (like browser dev tools)
|
|
41031
|
-
useEffect(() => {
|
|
40992
|
+
useEffect$2(() => {
|
|
41032
40993
|
if (viewportMode) {
|
|
41033
40994
|
const root = document.documentElement;
|
|
41034
40995
|
const body = document.body;
|
|
@@ -41055,12 +41016,12 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
41055
41016
|
};
|
|
41056
41017
|
}
|
|
41057
41018
|
}, [viewportMode]);
|
|
41058
|
-
useEffect(() => {
|
|
41019
|
+
useEffect$2(() => {
|
|
41059
41020
|
if (userConfig) {
|
|
41060
41021
|
setConfig(userConfig);
|
|
41061
41022
|
}
|
|
41062
41023
|
}, [userConfig, setConfig]);
|
|
41063
|
-
useEffect(() => {
|
|
41024
|
+
useEffect$2(() => {
|
|
41064
41025
|
const handleKeyDown = (e) => {
|
|
41065
41026
|
const shortcut = config.shortcut || "ctrl+shift+m";
|
|
41066
41027
|
const keys = shortcut.split("+").map((k) => k.trim().toLowerCase());
|
|
@@ -41210,49 +41171,49 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
41210
41171
|
? adjustColor(config.primaryColor, -20)
|
|
41211
41172
|
: "#4f46e5",
|
|
41212
41173
|
});
|
|
41213
|
-
return (React$
|
|
41214
|
-
React$
|
|
41215
|
-
React$
|
|
41216
|
-
React$
|
|
41174
|
+
return (React$3.createElement(React$3.Fragment, null,
|
|
41175
|
+
React$3.createElement(FeedbackPins, { onPinClick: handlePinClick }),
|
|
41176
|
+
React$3.createElement(ViewportControls, null),
|
|
41177
|
+
React$3.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: {
|
|
41217
41178
|
transform: isOpen
|
|
41218
41179
|
? "translateY(-50%) translateX(0)"
|
|
41219
41180
|
: "translateY(-50%) translateX(calc(100% - 40px))",
|
|
41220
41181
|
}, "data-markup-widget": true },
|
|
41221
|
-
React$
|
|
41222
|
-
isOpen && React$
|
|
41223
|
-
React$
|
|
41224
|
-
openFeedbackCount > 0 && (React$
|
|
41225
|
-
React$
|
|
41226
|
-
React$
|
|
41227
|
-
React$
|
|
41228
|
-
React$
|
|
41229
|
-
React$
|
|
41182
|
+
React$3.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" },
|
|
41183
|
+
isOpen && React$3.createElement(CloseIcon, { className: "w-5 h-5" }),
|
|
41184
|
+
React$3.createElement("span", { className: "text-black", style: { writingMode: "sideways-lr" } }, "Siren"),
|
|
41185
|
+
openFeedbackCount > 0 && (React$3.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))),
|
|
41186
|
+
React$3.createElement("div", { className: "bg-white w-[500px] h-[750px] rounded-l-xl shadow-2xl overflow-hidden flex flex-col text-black" },
|
|
41187
|
+
React$3.createElement("div", { className: "flex items-center justify-between px-5 py-4 text-black", style: { backgroundColor: "var(--markup-primary)" } },
|
|
41188
|
+
React$3.createElement("h2", { className: "text-base font-semibold m-0" }, ((_a = config.labels) === null || _a === void 0 ? void 0 : _a.feedbackTitle) || "Feedback"),
|
|
41189
|
+
React$3.createElement("div", { className: "flex items-center gap-2" },
|
|
41190
|
+
React$3.createElement("div", { onClick: (e) => {
|
|
41230
41191
|
e.stopPropagation();
|
|
41231
41192
|
setShowPins(!showPins);
|
|
41232
41193
|
}, 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" },
|
|
41233
|
-
React$
|
|
41234
|
-
React$
|
|
41235
|
-
React$
|
|
41194
|
+
React$3.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
|
|
41195
|
+
React$3.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" }),
|
|
41196
|
+
React$3.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })),
|
|
41236
41197
|
showPins ? 'Hide' : 'Show'),
|
|
41237
|
-
isAuthenticated && currentUser && (React$
|
|
41238
|
-
React$
|
|
41239
|
-
!isAuthenticated ? (React$
|
|
41240
|
-
React$
|
|
41241
|
-
React$
|
|
41242
|
-
React$
|
|
41198
|
+
isAuthenticated && currentUser && (React$3.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" },
|
|
41199
|
+
React$3.createElement("h2", null, "Sign Out"))))),
|
|
41200
|
+
!isAuthenticated ? (React$3.createElement("div", { className: "flex-1 overflow-y-auto" },
|
|
41201
|
+
React$3.createElement(AuthForm, { onSuccess: handleAuthSuccess }))) : selectedFeedback ? (React$3.createElement(FeedbackDetail, { feedback: selectedFeedback, onBack: handleBackFromDetail, onDelete: handleDeleteFeedback, onUpdate: handleUpdateFeedback })) : (React$3.createElement(React$3.Fragment, null,
|
|
41202
|
+
React$3.createElement("div", { className: "flex border-b border-gray-200 px-5" },
|
|
41203
|
+
React$3.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"
|
|
41243
41204
|
? "bg-gray-200"
|
|
41244
41205
|
: "border-white"), onClick: () => setActiveTab("create") },
|
|
41245
|
-
React$
|
|
41206
|
+
React$3.createElement(PlusIcon, { className: "w-3.5 h-3.5" }),
|
|
41246
41207
|
"New"),
|
|
41247
|
-
React$
|
|
41208
|
+
React$3.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"
|
|
41248
41209
|
? "bg-gray-200"
|
|
41249
41210
|
: "border-white"), onClick: () => setActiveTab("list") },
|
|
41250
41211
|
"View All (",
|
|
41251
41212
|
feedbackItems.length,
|
|
41252
41213
|
")")),
|
|
41253
|
-
React$
|
|
41254
|
-
activeTab === "create" && (React$
|
|
41255
|
-
activeTab === "list" && (React$
|
|
41214
|
+
React$3.createElement("div", { className: "flex-1 overflow-y-auto p-5" },
|
|
41215
|
+
activeTab === "create" && (React$3.createElement(FeedbackForm, { onSubmit: handleSubmitFeedback, onCancel: handleCancel, getSessionEvents: getSessionEvents, lastClickedElement: lastClickedElementRef.current, lastClickedText: lastClickedText })),
|
|
41216
|
+
activeTab === "list" && (React$3.createElement(FeedbackList, { feedbackItems: feedbackItems, onSelectFeedback: handleSelectFeedback })))))))));
|
|
41256
41217
|
};
|
|
41257
41218
|
function adjustColor(color, amount) {
|
|
41258
41219
|
const clamp = (val) => Math.min(255, Math.max(0, val));
|
|
@@ -41283,8 +41244,8 @@ function init(config, containerId = 'markup-widget-root') {
|
|
|
41283
41244
|
}
|
|
41284
41245
|
// Create React root and mount widget
|
|
41285
41246
|
root = ReactDOM.createRoot(container);
|
|
41286
|
-
root.render(React$
|
|
41287
|
-
React$
|
|
41247
|
+
root.render(React$3.createElement(React$3.StrictMode, null,
|
|
41248
|
+
React$3.createElement(MarkupWidget, { config: config })));
|
|
41288
41249
|
}
|
|
41289
41250
|
function open() {
|
|
41290
41251
|
// Implementation would open the widget UI
|