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