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