@sirendesign/markup 1.0.21 → 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/markup-widget.esm.js +723 -677
- package/dist/markup-widget.esm.js.map +1 -1
- package/dist/markup-widget.js +736 -690
- package/dist/markup-widget.js.map +1 -1
- package/package.json +1 -1
|
@@ -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;
|
|
@@ -11569,9 +11608,13 @@ const getDefaultsFromGlobal = () => getGlobal().__FIREBASE_DEFAULTS__;
|
|
|
11569
11608
|
* See https://github.com/firebase/firebase-js-sdk/issues/6838
|
|
11570
11609
|
*/
|
|
11571
11610
|
const getDefaultsFromEnvVariable = () => {
|
|
11572
|
-
{
|
|
11611
|
+
if (typeof process === 'undefined' || typeof process.env === 'undefined') {
|
|
11573
11612
|
return;
|
|
11574
11613
|
}
|
|
11614
|
+
const defaultsJsonString = process.env.__FIREBASE_DEFAULTS__;
|
|
11615
|
+
if (defaultsJsonString) {
|
|
11616
|
+
return JSON.parse(defaultsJsonString);
|
|
11617
|
+
}
|
|
11575
11618
|
};
|
|
11576
11619
|
const getDefaultsFromCookie = () => {
|
|
11577
11620
|
if (typeof document === 'undefined') {
|
|
@@ -12020,7 +12063,7 @@ function isNode() {
|
|
|
12020
12063
|
return false;
|
|
12021
12064
|
}
|
|
12022
12065
|
try {
|
|
12023
|
-
return (Object.prototype.toString.call(
|
|
12066
|
+
return (Object.prototype.toString.call(global.process) === '[object process]');
|
|
12024
12067
|
}
|
|
12025
12068
|
catch (e) {
|
|
12026
12069
|
return false;
|
|
@@ -16697,80 +16740,80 @@ const deleteScreenRecording = async (downloadURL) => {
|
|
|
16697
16740
|
}
|
|
16698
16741
|
};
|
|
16699
16742
|
|
|
16700
|
-
const MessageIcon = ({ className, ...props }) => (React$
|
|
16701
|
-
React$
|
|
16702
|
-
const CloseIcon = ({ className, ...props }) => (React$
|
|
16703
|
-
React$
|
|
16704
|
-
React$
|
|
16705
|
-
const CameraIcon = ({ className, ...props }) => (React$
|
|
16706
|
-
React$
|
|
16707
|
-
React$
|
|
16708
|
-
const CircleIcon = ({ className, ...props }) => (React$
|
|
16709
|
-
React$
|
|
16710
|
-
const PencilIcon = ({ className, ...props }) => (React$
|
|
16711
|
-
React$
|
|
16712
|
-
const UndoIcon = ({ className, ...props }) => (React$
|
|
16713
|
-
React$
|
|
16714
|
-
React$
|
|
16715
|
-
const CheckIcon = ({ className, ...props }) => (React$
|
|
16716
|
-
React$
|
|
16717
|
-
const TrashIcon = ({ className, ...props }) => (React$
|
|
16718
|
-
React$
|
|
16719
|
-
React$
|
|
16720
|
-
const EditIcon = ({ className, ...props }) => (React$
|
|
16721
|
-
React$
|
|
16722
|
-
React$
|
|
16723
|
-
const CopyIcon = ({ className, ...props }) => (React$
|
|
16724
|
-
React$
|
|
16725
|
-
React$
|
|
16726
|
-
const InboxIcon = ({ className, ...props }) => (React$
|
|
16727
|
-
React$
|
|
16728
|
-
React$
|
|
16729
|
-
const SendIcon = ({ className, ...props }) => (React$
|
|
16730
|
-
React$
|
|
16731
|
-
React$
|
|
16732
|
-
const PlusIcon = ({ className, ...props }) => (React$
|
|
16733
|
-
React$
|
|
16734
|
-
React$
|
|
16735
|
-
const FilterIcon = ({ className, ...props }) => (React$
|
|
16736
|
-
React$
|
|
16737
|
-
const SquareIcon = ({ className, ...props }) => (React$
|
|
16738
|
-
React$
|
|
16739
|
-
const ArrowRightIcon = ({ className, ...props }) => (React$
|
|
16740
|
-
React$
|
|
16741
|
-
React$
|
|
16742
|
-
const TypeIcon = ({ className, ...props }) => (React$
|
|
16743
|
-
React$
|
|
16744
|
-
React$
|
|
16745
|
-
React$
|
|
16746
|
-
const ArrowLeftIcon = ({ className, ...props }) => (React$
|
|
16747
|
-
React$
|
|
16748
|
-
React$
|
|
16749
|
-
const UserIcon = ({ className, ...props }) => (React$
|
|
16750
|
-
React$
|
|
16751
|
-
React$
|
|
16752
|
-
const ZoomInIcon = ({ className, ...props }) => (React$
|
|
16753
|
-
React$
|
|
16754
|
-
React$
|
|
16755
|
-
React$
|
|
16756
|
-
React$
|
|
16757
|
-
const CalendarIcon = ({ className, ...props }) => (React$
|
|
16758
|
-
React$
|
|
16759
|
-
React$
|
|
16760
|
-
React$
|
|
16761
|
-
React$
|
|
16762
|
-
const ChevronRightIcon = ({ className, ...props }) => (React$
|
|
16763
|
-
React$
|
|
16764
|
-
const DesktopIcon = ({ className, ...props }) => (React$
|
|
16765
|
-
React$
|
|
16766
|
-
React$
|
|
16767
|
-
React$
|
|
16768
|
-
const TabletIcon = ({ className, ...props }) => (React$
|
|
16769
|
-
React$
|
|
16770
|
-
React$
|
|
16771
|
-
const MobileIcon = ({ className, ...props }) => (React$
|
|
16772
|
-
React$
|
|
16773
|
-
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" })));
|
|
16774
16817
|
|
|
16775
16818
|
const tools = [
|
|
16776
16819
|
{ id: 'pen', icon: PencilIcon, label: 'Draw' },
|
|
@@ -16790,19 +16833,19 @@ const colors = [
|
|
|
16790
16833
|
];
|
|
16791
16834
|
const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
16792
16835
|
var _a, _b;
|
|
16793
|
-
const canvasRef = useRef
|
|
16794
|
-
const containerRef = useRef
|
|
16795
|
-
const [activeTool, setActiveTool] = useState
|
|
16796
|
-
const [activeColor, setActiveColor] = useState
|
|
16797
|
-
const [isDrawing, setIsDrawing] = useState
|
|
16798
|
-
const [currentPath, setCurrentPath] = useState
|
|
16799
|
-
const [annotations, setAnnotations] = useState
|
|
16800
|
-
const [imageLoaded, setImageLoaded] = useState
|
|
16801
|
-
const [startPoint, setStartPoint] = useState
|
|
16802
|
-
const [textInput, setTextInput] = useState
|
|
16803
|
-
const [textPosition, setTextPosition] = useState
|
|
16804
|
-
const imgRef = useRef
|
|
16805
|
-
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(() => {
|
|
16806
16849
|
const img = new Image();
|
|
16807
16850
|
img.onload = () => {
|
|
16808
16851
|
imgRef.current = img;
|
|
@@ -16810,7 +16853,7 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
16810
16853
|
};
|
|
16811
16854
|
img.src = screenshot;
|
|
16812
16855
|
}, [screenshot]);
|
|
16813
|
-
useEffect
|
|
16856
|
+
useEffect(() => {
|
|
16814
16857
|
if (!imageLoaded || !canvasRef.current || !imgRef.current)
|
|
16815
16858
|
return;
|
|
16816
16859
|
const canvas = canvasRef.current;
|
|
@@ -17068,32 +17111,32 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
17068
17111
|
const dataUrl = canvas.toDataURL('image/png');
|
|
17069
17112
|
onComplete(annotations, dataUrl);
|
|
17070
17113
|
};
|
|
17071
|
-
return createPortal(React$
|
|
17072
|
-
React$
|
|
17073
|
-
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
|
|
17074
17117
|
? 'bg-[#C2D1D9] text-white shadow-lg shadow-[#C2D1D9]/30'
|
|
17075
17118
|
: 'bg-transparent text-gray-600 hover:text-gray-900 hover:bg-white') },
|
|
17076
|
-
React$
|
|
17077
|
-
React$
|
|
17078
|
-
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
|
|
17079
17122
|
? 'border-gray-900 scale-110 shadow-lg'
|
|
17080
17123
|
: 'border-white hover:scale-105 shadow-md'), style: { backgroundColor: color } })))),
|
|
17081
|
-
React$
|
|
17082
|
-
React$
|
|
17083
|
-
React$
|
|
17084
|
-
React$
|
|
17085
|
-
React$
|
|
17086
|
-
React$
|
|
17087
|
-
React$
|
|
17088
|
-
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" }),
|
|
17089
17132
|
" Done"))),
|
|
17090
|
-
React$
|
|
17091
|
-
imageLoaded && (React$
|
|
17092
|
-
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: {
|
|
17093
17136
|
left: `calc(50% + ${(textPosition.x - 0.5) * (((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.width) || 0)}px)`,
|
|
17094
17137
|
top: `calc(50% + ${(textPosition.y - 0.5) * (((_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.height) || 0)}px)`,
|
|
17095
17138
|
} },
|
|
17096
|
-
React$
|
|
17139
|
+
React$1.createElement("input", { type: "text", value: textInput, onChange: (e) => setTextInput(e.target.value), onKeyDown: (e) => {
|
|
17097
17140
|
if (e.key === 'Enter')
|
|
17098
17141
|
handleTextSubmit();
|
|
17099
17142
|
if (e.key === 'Escape') {
|
|
@@ -17101,7 +17144,7 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
17101
17144
|
setTextInput('');
|
|
17102
17145
|
}
|
|
17103
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 } })))),
|
|
17104
|
-
React$
|
|
17147
|
+
React$1.createElement("div", { className: "text-center py-2 text-gray-500 text-xs flex-shrink-0" }, activeTool === 'text'
|
|
17105
17148
|
? 'Click anywhere to add text'
|
|
17106
17149
|
: 'Click and drag to annotate • Use tools above to switch modes')), document.body);
|
|
17107
17150
|
};
|
|
@@ -17109,27 +17152,27 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
17109
17152
|
const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastClickedElement, lastClickedText, }) => {
|
|
17110
17153
|
var _a, _b;
|
|
17111
17154
|
const { config, currentScreenshot, setCurrentScreenshot, annotations, setAnnotations, clearAnnotations, setIsCapturing, isCapturing, currentUser, setIsOpen, } = useMarkupStore();
|
|
17112
|
-
const [title, setTitle] = useState
|
|
17113
|
-
const [description, setDescription] = useState
|
|
17114
|
-
const [priority, setPriority] = useState
|
|
17115
|
-
const [feedbackType, setFeedbackType] = useState
|
|
17116
|
-
const [currentCopy, setCurrentCopy] = useState
|
|
17117
|
-
const [newCopy, setNewCopy] = useState
|
|
17118
|
-
const [designMockup, setDesignMockup] = useState
|
|
17119
|
-
const [selectedTags, setSelectedTags] = useState
|
|
17120
|
-
const [isAnnotating, setIsAnnotating] = useState
|
|
17121
|
-
const [isSubmitting, setIsSubmitting] = useState
|
|
17122
|
-
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);
|
|
17123
17166
|
// Screen recording states
|
|
17124
|
-
const [isRecording, setIsRecording] = useState
|
|
17125
|
-
const [recordedVideo, setRecordedVideo] = useState
|
|
17126
|
-
const [recordedBlob, setRecordedBlob] = useState
|
|
17127
|
-
const [isUploadingVideo, setIsUploadingVideo] = useState
|
|
17128
|
-
const [mediaRecorder, setMediaRecorder] = useState
|
|
17129
|
-
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);
|
|
17130
17173
|
// Pin placement states
|
|
17131
|
-
const [isPlacingPin, setIsPlacingPin] = useState
|
|
17132
|
-
const [pinPosition, setPinPosition] = useState
|
|
17174
|
+
const [isPlacingPin, setIsPlacingPin] = useState(false);
|
|
17175
|
+
const [pinPosition, setPinPosition] = useState((initialData === null || initialData === void 0 ? void 0 : initialData.pinLocation)
|
|
17133
17176
|
? {
|
|
17134
17177
|
x: initialData.pinLocation.x,
|
|
17135
17178
|
y: initialData.pinLocation.y,
|
|
@@ -17138,18 +17181,18 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17138
17181
|
}
|
|
17139
17182
|
: null);
|
|
17140
17183
|
// Image change states
|
|
17141
|
-
const [isSelectingImage, setIsSelectingImage] = useState
|
|
17142
|
-
const [originalImageSrc, setOriginalImageSrc] = useState
|
|
17143
|
-
const [originalImageBackground, setOriginalImageBackground] = useState
|
|
17144
|
-
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) || "");
|
|
17145
17188
|
// Load initial annotations into store if editing
|
|
17146
|
-
useEffect
|
|
17189
|
+
useEffect(() => {
|
|
17147
17190
|
if (initialData === null || initialData === void 0 ? void 0 : initialData.annotations) {
|
|
17148
17191
|
setAnnotations(initialData.annotations);
|
|
17149
17192
|
}
|
|
17150
17193
|
}, [initialData, setAnnotations]);
|
|
17151
17194
|
// Handle pin placement mode
|
|
17152
|
-
useEffect
|
|
17195
|
+
useEffect(() => {
|
|
17153
17196
|
if (!isPlacingPin)
|
|
17154
17197
|
return;
|
|
17155
17198
|
// Close widget during pin placement
|
|
@@ -17175,7 +17218,7 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17175
17218
|
};
|
|
17176
17219
|
}, [isPlacingPin, setIsOpen]);
|
|
17177
17220
|
// Handle image selection mode for image-change type
|
|
17178
|
-
useEffect
|
|
17221
|
+
useEffect(() => {
|
|
17179
17222
|
if (!isSelectingImage)
|
|
17180
17223
|
return;
|
|
17181
17224
|
// Close widget during image selection
|
|
@@ -17247,7 +17290,7 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17247
17290
|
};
|
|
17248
17291
|
}, [isSelectingImage, setIsOpen]);
|
|
17249
17292
|
// Auto-capture selected text when component mounts (only if creating new)
|
|
17250
|
-
useEffect
|
|
17293
|
+
useEffect(() => {
|
|
17251
17294
|
var _a;
|
|
17252
17295
|
if (initialData)
|
|
17253
17296
|
return;
|
|
@@ -17487,152 +17530,152 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17487
17530
|
}
|
|
17488
17531
|
};
|
|
17489
17532
|
if (isAnnotating && currentScreenshot) {
|
|
17490
|
-
return (React$
|
|
17533
|
+
return (React$1.createElement(AnnotationOverlay, { screenshot: currentScreenshot, onComplete: handleAnnotationComplete, onCancel: handleAnnotationCancel }));
|
|
17491
17534
|
}
|
|
17492
17535
|
// Show pin placement overlay
|
|
17493
17536
|
if (isPlacingPin) {
|
|
17494
|
-
return (React$
|
|
17495
|
-
React$
|
|
17496
|
-
React$
|
|
17497
|
-
React$
|
|
17498
|
-
React$
|
|
17499
|
-
React$
|
|
17500
|
-
React$
|
|
17501
|
-
React$
|
|
17502
|
-
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"))));
|
|
17503
17546
|
}
|
|
17504
17547
|
// Show image selection overlay
|
|
17505
17548
|
if (isSelectingImage) {
|
|
17506
|
-
return (React$
|
|
17507
|
-
React$
|
|
17508
|
-
React$
|
|
17509
|
-
React$
|
|
17510
|
-
React$
|
|
17511
|
-
React$
|
|
17512
|
-
React$
|
|
17513
|
-
React$
|
|
17514
|
-
}
|
|
17515
|
-
return (React$
|
|
17516
|
-
React$
|
|
17517
|
-
React$
|
|
17518
|
-
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" }, [
|
|
17519
17562
|
{ id: "general", label: "General" },
|
|
17520
17563
|
{ id: "copy-amendment", label: "Copy Change" },
|
|
17521
17564
|
{ id: "image-change", label: "Image Change" },
|
|
17522
|
-
].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
|
|
17523
17566
|
? "bg-[#C2D1D9] text-black shadow-md shadow-[#C2D1D9]/30"
|
|
17524
17567
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm") }, type.label))))),
|
|
17525
|
-
feedbackType === "image-change" && (React$
|
|
17526
|
-
React$
|
|
17527
|
-
React$
|
|
17528
|
-
React$
|
|
17529
|
-
React$
|
|
17530
|
-
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" })),
|
|
17531
17574
|
originalImageSrc || originalImageBackground
|
|
17532
17575
|
? "Change Image"
|
|
17533
17576
|
: "Click to Select Image"),
|
|
17534
|
-
(originalImageSrc || originalImageBackground) && (React$
|
|
17535
|
-
React$
|
|
17536
|
-
originalImageSrc ? (React$
|
|
17537
|
-
React$
|
|
17538
|
-
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" },
|
|
17539
17582
|
"Background: ",
|
|
17540
17583
|
originalImageBackground))))),
|
|
17541
|
-
React$
|
|
17542
|
-
React$
|
|
17543
|
-
React$
|
|
17544
|
-
replacementImageUrl && (React$
|
|
17545
|
-
React$
|
|
17546
|
-
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) => {
|
|
17547
17590
|
e.target.style.display = "none";
|
|
17548
17591
|
} })))))),
|
|
17549
|
-
feedbackType === "copy-amendment" && (React$
|
|
17550
|
-
React$
|
|
17551
|
-
React$
|
|
17552
|
-
React$
|
|
17553
|
-
React$
|
|
17554
|
-
React$
|
|
17555
|
-
React$
|
|
17556
|
-
feedbackType !== "copy-amendment" && (React$
|
|
17557
|
-
React$
|
|
17558
|
-
React$
|
|
17559
|
-
feedbackType !== "copy-amendment" && (React$
|
|
17560
|
-
React$
|
|
17561
|
-
React$
|
|
17562
|
-
React$
|
|
17563
|
-
React$
|
|
17564
|
-
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
|
|
17565
17608
|
? cn(priorityColors[p], "border-transparent shadow-sm")
|
|
17566
17609
|
: "bg-gray-100 text-gray-600 hover:bg-gray-200") }, p))))),
|
|
17567
|
-
annotatedScreenshot || currentScreenshot ? (React$
|
|
17568
|
-
React$
|
|
17569
|
-
React$
|
|
17570
|
-
React$
|
|
17571
|
-
React$
|
|
17572
|
-
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" }),
|
|
17573
17616
|
" Edit"),
|
|
17574
|
-
React$
|
|
17575
|
-
React$
|
|
17576
|
-
" Remove")))) : (React$
|
|
17577
|
-
React$
|
|
17578
|
-
React$
|
|
17579
|
-
"Capturing...")) : (React$
|
|
17580
|
-
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" }),
|
|
17581
17624
|
" Screenshot"))),
|
|
17582
|
-
React$
|
|
17625
|
+
React$1.createElement("div", { onClick: isRecording
|
|
17583
17626
|
? handleStopRecording
|
|
17584
|
-
: 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$
|
|
17585
|
-
React$
|
|
17586
|
-
"Stop Recording")) : (React$
|
|
17587
|
-
React$
|
|
17588
|
-
React$
|
|
17589
|
-
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" })),
|
|
17590
17633
|
"Record Screen"))))),
|
|
17591
|
-
React$
|
|
17592
|
-
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" },
|
|
17593
17636
|
"Pin Location",
|
|
17594
17637
|
" ",
|
|
17595
|
-
!pinPosition && React$
|
|
17596
|
-
pinPosition ? (React$
|
|
17597
|
-
React$
|
|
17598
|
-
React$
|
|
17599
|
-
React$
|
|
17600
|
-
React$
|
|
17601
|
-
React$
|
|
17602
|
-
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" },
|
|
17603
17646
|
"Position: (",
|
|
17604
17647
|
Math.round(pinPosition.pageX),
|
|
17605
17648
|
",",
|
|
17606
17649
|
" ",
|
|
17607
17650
|
Math.round(pinPosition.pageY),
|
|
17608
17651
|
")")),
|
|
17609
|
-
React$
|
|
17610
|
-
React$
|
|
17611
|
-
React$
|
|
17612
|
-
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" })),
|
|
17613
17656
|
"Click to place pin on page"))),
|
|
17614
|
-
recordedVideo && (React$
|
|
17615
|
-
React$
|
|
17616
|
-
React$
|
|
17617
|
-
React$
|
|
17618
|
-
React$
|
|
17619
|
-
React$
|
|
17620
|
-
designMockup ? (React$
|
|
17621
|
-
React$
|
|
17622
|
-
React$
|
|
17623
|
-
React$
|
|
17624
|
-
React$
|
|
17625
|
-
React$
|
|
17626
|
-
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" }),
|
|
17627
17670
|
" Upload Mockup")))),
|
|
17628
|
-
config.availableTags && config.availableTags.length > 0 && (React$
|
|
17629
|
-
React$
|
|
17630
|
-
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)
|
|
17631
17674
|
? "bg-[#C2D1D9] text-white shadow-md shadow-[#C2D1D9]/30"
|
|
17632
17675
|
: "bg-gray-100 text-gray-700 hover:bg-gray-200 hover:shadow-sm") }, tag)))))),
|
|
17633
|
-
React$
|
|
17634
|
-
React$
|
|
17635
|
-
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) => {
|
|
17636
17679
|
const isValid = feedbackType === "copy-amendment"
|
|
17637
17680
|
? newCopy.trim()
|
|
17638
17681
|
: title.trim();
|
|
@@ -17656,9 +17699,9 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17656
17699
|
: !title.trim()) || isSubmitting
|
|
17657
17700
|
? "#9ca3af"
|
|
17658
17701
|
: "green-500",
|
|
17659
|
-
} }, isSubmitting ? (isUploadingVideo ? (React$
|
|
17660
|
-
React$
|
|
17661
|
-
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) ||
|
|
17662
17705
|
(initialData ? "Update Feedback" : "Submit Feedback"))))));
|
|
17663
17706
|
};
|
|
17664
17707
|
|
|
@@ -17683,9 +17726,9 @@ const statusColors = {
|
|
|
17683
17726
|
};
|
|
17684
17727
|
const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
17685
17728
|
const { config } = useMarkupStore();
|
|
17686
|
-
const [statusFilter, setStatusFilter] = useState
|
|
17687
|
-
const [sortBy, setSortBy] = useState
|
|
17688
|
-
const filteredAndSortedItems = useMemo
|
|
17729
|
+
const [statusFilter, setStatusFilter] = useState("all");
|
|
17730
|
+
const [sortBy, setSortBy] = useState("newest");
|
|
17731
|
+
const filteredAndSortedItems = useMemo(() => {
|
|
17689
17732
|
let items = [...feedbackItems];
|
|
17690
17733
|
// Filter by status
|
|
17691
17734
|
if (statusFilter !== "all") {
|
|
@@ -17716,7 +17759,7 @@ const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
|
17716
17759
|
return items;
|
|
17717
17760
|
}, [feedbackItems, statusFilter, sortBy]);
|
|
17718
17761
|
// Group items by page URL
|
|
17719
|
-
const groupedByPage = useMemo
|
|
17762
|
+
const groupedByPage = useMemo(() => {
|
|
17720
17763
|
const groups = new Map();
|
|
17721
17764
|
filteredAndSortedItems.forEach((item) => {
|
|
17722
17765
|
var _a;
|
|
@@ -17731,44 +17774,44 @@ const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
|
17731
17774
|
.map(([url, items]) => ({ url, items }))
|
|
17732
17775
|
.sort((a, b) => b.items.length - a.items.length);
|
|
17733
17776
|
}, [filteredAndSortedItems]);
|
|
17734
|
-
return (React$
|
|
17735
|
-
React$
|
|
17736
|
-
React$
|
|
17737
|
-
React$
|
|
17738
|
-
React$
|
|
17739
|
-
React$
|
|
17740
|
-
React$
|
|
17741
|
-
React$
|
|
17742
|
-
React$
|
|
17743
|
-
React$
|
|
17744
|
-
React$
|
|
17745
|
-
React$
|
|
17746
|
-
React$
|
|
17747
|
-
React$
|
|
17748
|
-
React$
|
|
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"
|
|
17749
17792
|
? "Try changing the filter"
|
|
17750
|
-
: "Be the first to add feedback!"))) : (React$
|
|
17751
|
-
React$
|
|
17752
|
-
React$
|
|
17753
|
-
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) => {
|
|
17754
17797
|
var _a;
|
|
17755
|
-
return (React$
|
|
17756
|
-
React$
|
|
17757
|
-
React$
|
|
17758
|
-
React$
|
|
17759
|
-
((_a = item.pageMetadata) === null || _a === void 0 ? void 0 : _a.deviceType) && (React$
|
|
17760
|
-
item.pageMetadata.deviceType === 'desktop' && (React$
|
|
17761
|
-
item.pageMetadata.deviceType === 'tablet' && (React$
|
|
17762
|
-
item.pageMetadata.deviceType === 'mobile' && (React$
|
|
17763
|
-
React$
|
|
17764
|
-
item.description && (React$
|
|
17765
|
-
React$
|
|
17766
|
-
React$
|
|
17767
|
-
React$
|
|
17768
|
-
item.type && (React$
|
|
17769
|
-
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)))));
|
|
17770
17813
|
})))))))),
|
|
17771
|
-
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" },
|
|
17772
17815
|
"Showing ",
|
|
17773
17816
|
filteredAndSortedItems.length,
|
|
17774
17817
|
" of",
|
|
@@ -39688,6 +39731,9 @@ registerAuth("Browser" /* ClientPlatform.BROWSER */);
|
|
|
39688
39731
|
* VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAIN, etc.
|
|
39689
39732
|
*/
|
|
39690
39733
|
const getDefaultFirebaseConfig = () => {
|
|
39734
|
+
var _a;
|
|
39735
|
+
// Check if running in browser without env vars (UMD bundle)
|
|
39736
|
+
typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'production';
|
|
39691
39737
|
// Try to get from environment variables (works in build time)
|
|
39692
39738
|
const config = {
|
|
39693
39739
|
apiKey: 'AIzaSyD2rQ-HOEU4VW5h5CGmKQK9FcBDp2bi98g',
|
|
@@ -40012,19 +40058,19 @@ const priorityColors = {
|
|
|
40012
40058
|
const FeedbackDetail = ({ feedback: initialFeedback, onBack, onDelete, onUpdate, }) => {
|
|
40013
40059
|
var _a, _b, _c;
|
|
40014
40060
|
const { config, updateFeedback: updateFeedback$1, currentUser } = useMarkupStore();
|
|
40015
|
-
const [feedback, setFeedback] = useState
|
|
40016
|
-
const [newComment, setNewComment] = useState
|
|
40017
|
-
const [isAddingComment, setIsAddingComment] = useState
|
|
40018
|
-
const [showFullScreenshot, setShowFullScreenshot] = useState
|
|
40019
|
-
const [copied, setCopied] = useState
|
|
40020
|
-
const [isEditing, setIsEditing] = useState
|
|
40021
|
-
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);
|
|
40022
40068
|
// Feature 2 & 5 states
|
|
40023
|
-
const [showReplay, setShowReplay] = useState
|
|
40024
|
-
const [showOverlay, setShowOverlay] = useState
|
|
40025
|
-
const [overlayOpacity, setOverlayOpacity] = useState
|
|
40069
|
+
const [showReplay, setShowReplay] = useState(false);
|
|
40070
|
+
const [showOverlay, setShowOverlay] = useState(false);
|
|
40071
|
+
const [overlayOpacity, setOverlayOpacity] = useState(50);
|
|
40026
40072
|
// Parse session actions
|
|
40027
|
-
const sessionActions = useMemo
|
|
40073
|
+
const sessionActions = useMemo(() => {
|
|
40028
40074
|
if (!feedback.sessionEvents)
|
|
40029
40075
|
return null;
|
|
40030
40076
|
try {
|
|
@@ -40076,13 +40122,13 @@ const FeedbackDetail = ({ feedback: initialFeedback, onBack, onDelete, onUpdate,
|
|
|
40076
40122
|
setIsEditing(false);
|
|
40077
40123
|
};
|
|
40078
40124
|
if (isEditing) {
|
|
40079
|
-
return (React$
|
|
40080
|
-
React$
|
|
40081
|
-
React$
|
|
40082
|
-
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" }),
|
|
40083
40129
|
"Cancel Editing")),
|
|
40084
|
-
React$
|
|
40085
|
-
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) }))));
|
|
40086
40132
|
}
|
|
40087
40133
|
const handleCopy = async () => {
|
|
40088
40134
|
const feedbackText = `
|
|
@@ -40196,37 +40242,37 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40196
40242
|
setShowDeleteConfirm(false);
|
|
40197
40243
|
};
|
|
40198
40244
|
const handleCancelDelete = () => setShowDeleteConfirm(false);
|
|
40199
|
-
return (React$
|
|
40200
|
-
React$
|
|
40201
|
-
React$
|
|
40202
|
-
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" }),
|
|
40203
40249
|
"Back"),
|
|
40204
|
-
React$
|
|
40205
|
-
React$
|
|
40206
|
-
React$
|
|
40207
|
-
"Copied!")) : (React$
|
|
40208
|
-
React$
|
|
40209
|
-
canEdit && (React$
|
|
40210
|
-
React$
|
|
40211
|
-
canDelete && onDelete && (React$
|
|
40212
|
-
React$
|
|
40213
|
-
showDeleteConfirm && (React$
|
|
40214
|
-
React$
|
|
40215
|
-
React$
|
|
40216
|
-
React$
|
|
40217
|
-
React$
|
|
40218
|
-
React$
|
|
40219
|
-
React$
|
|
40220
|
-
React$
|
|
40221
|
-
((_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" },
|
|
40222
40268
|
feedback.pageMetadata.deviceType ===
|
|
40223
|
-
"desktop" && (React$
|
|
40269
|
+
"desktop" && (React$1.createElement(DesktopIcon, { className: "w-5 h-5 text-gray-500", title: "Desktop" })),
|
|
40224
40270
|
feedback.pageMetadata.deviceType ===
|
|
40225
|
-
"tablet" && (React$
|
|
40271
|
+
"tablet" && (React$1.createElement(TabletIcon, { className: "w-5 h-5 text-gray-500", title: "Tablet" })),
|
|
40226
40272
|
feedback.pageMetadata.deviceType ===
|
|
40227
|
-
"mobile" && (React$
|
|
40228
|
-
React$
|
|
40229
|
-
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"
|
|
40230
40276
|
? "bg-brand-blue/50 text-gray-800"
|
|
40231
40277
|
: feedback.type === "bug"
|
|
40232
40278
|
? "bg-brand-pink/30 text-gray-800"
|
|
@@ -40235,136 +40281,136 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40235
40281
|
: "bg-gray-100 text-gray-700") }, feedback.type === "copy-amendment"
|
|
40236
40282
|
? "Copy"
|
|
40237
40283
|
: "General")),
|
|
40238
|
-
React$
|
|
40239
|
-
React$
|
|
40240
|
-
!isReadOnly && (React$
|
|
40241
|
-
React$
|
|
40242
|
-
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
|
|
40243
40289
|
? cn(option.color, "border-transparent")
|
|
40244
40290
|
: "bg-white text-gray-600 border-gray-200 hover:border-brand-blue") }, option.label)))))),
|
|
40245
|
-
feedback.screenshot && (React$
|
|
40246
|
-
React$
|
|
40247
|
-
React$
|
|
40248
|
-
React$
|
|
40249
|
-
React$
|
|
40250
|
-
React$
|
|
40251
|
-
React$
|
|
40252
|
-
feedback.screenRecording && (React$
|
|
40253
|
-
React$
|
|
40254
|
-
React$
|
|
40255
|
-
React$
|
|
40256
|
-
(feedback.designMockup || feedback.sessionEvents) && (React$
|
|
40257
|
-
feedback.sessionEvents && (React$
|
|
40258
|
-
feedback.designMockup && (React$
|
|
40259
|
-
feedback.type === "copy-amendment" && (React$
|
|
40260
|
-
feedback.currentCopy && (React$
|
|
40261
|
-
React$
|
|
40262
|
-
React$
|
|
40263
|
-
React$
|
|
40264
|
-
feedback.newCopy && (React$
|
|
40265
|
-
React$
|
|
40266
|
-
React$
|
|
40267
|
-
React$
|
|
40268
|
-
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,
|
|
40269
40315
|
(feedback.originalImageSrc ||
|
|
40270
|
-
feedback.originalImageBackground) && (React$
|
|
40271
|
-
React$
|
|
40272
|
-
React$
|
|
40273
|
-
React$
|
|
40274
|
-
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" },
|
|
40275
40321
|
"Background Image:",
|
|
40276
40322
|
" ",
|
|
40277
40323
|
feedback.originalImageBackground))))),
|
|
40278
|
-
feedback.replacementImageUrl && (React$
|
|
40279
|
-
React$
|
|
40280
|
-
React$
|
|
40281
|
-
React$
|
|
40282
|
-
React$
|
|
40283
|
-
feedback.description && (React$
|
|
40284
|
-
React$
|
|
40285
|
-
React$
|
|
40286
|
-
feedback.tags && feedback.tags.length > 0 && (React$
|
|
40287
|
-
React$
|
|
40288
|
-
React$
|
|
40289
|
-
feedback.pageMetadata && (React$
|
|
40290
|
-
React$
|
|
40291
|
-
React$
|
|
40292
|
-
React$
|
|
40293
|
-
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:"),
|
|
40294
40340
|
" ",
|
|
40295
40341
|
feedback.pageMetadata.url),
|
|
40296
|
-
feedback.pageMetadata.componentName && (React$
|
|
40297
|
-
React$
|
|
40342
|
+
feedback.pageMetadata.componentName && (React$1.createElement("div", { className: "truncate" },
|
|
40343
|
+
React$1.createElement("span", { className: "font-medium" }, "Component:"),
|
|
40298
40344
|
" ",
|
|
40299
|
-
React$
|
|
40300
|
-
feedback.pageMetadata.elementInfo && (React$
|
|
40301
|
-
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:"),
|
|
40302
40348
|
" ",
|
|
40303
|
-
React$
|
|
40304
|
-
React$
|
|
40305
|
-
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:"),
|
|
40306
40352
|
" ",
|
|
40307
40353
|
feedback.pageMetadata.screenWidth,
|
|
40308
40354
|
"x",
|
|
40309
40355
|
feedback.pageMetadata.screenHeight),
|
|
40310
|
-
React$
|
|
40311
|
-
React$
|
|
40356
|
+
React$1.createElement("div", null,
|
|
40357
|
+
React$1.createElement("span", { className: "font-medium" }, "User Agent:"),
|
|
40312
40358
|
" ",
|
|
40313
40359
|
feedback.pageMetadata.userAgent)))),
|
|
40314
|
-
React$
|
|
40315
|
-
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" },
|
|
40316
40362
|
"Comments (",
|
|
40317
40363
|
((_c = feedback.comments) === null || _c === void 0 ? void 0 : _c.length) || 0,
|
|
40318
40364
|
")"),
|
|
40319
|
-
feedback.comments && feedback.comments.length > 0 && (React$
|
|
40320
|
-
React$
|
|
40321
|
-
React$
|
|
40322
|
-
React$
|
|
40323
|
-
React$
|
|
40324
|
-
React$
|
|
40325
|
-
React$
|
|
40326
|
-
React$
|
|
40327
|
-
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) => {
|
|
40328
40374
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
40329
40375
|
e.preventDefault();
|
|
40330
40376
|
handleAddComment();
|
|
40331
40377
|
}
|
|
40332
40378
|
} }),
|
|
40333
|
-
React$
|
|
40334
|
-
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" }))))),
|
|
40335
40381
|
showFullScreenshot &&
|
|
40336
40382
|
feedback.screenshot &&
|
|
40337
|
-
createPortal(React$
|
|
40338
|
-
React$
|
|
40339
|
-
React$
|
|
40340
|
-
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),
|
|
40341
40387
|
showReplay &&
|
|
40342
40388
|
sessionActions &&
|
|
40343
40389
|
sessionActions.length > 0 &&
|
|
40344
|
-
createPortal(React$
|
|
40345
|
-
React$
|
|
40346
|
-
React$
|
|
40347
|
-
React$
|
|
40348
|
-
React$
|
|
40349
|
-
React$
|
|
40350
|
-
React$
|
|
40351
|
-
React$
|
|
40352
|
-
React$
|
|
40353
|
-
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) => {
|
|
40354
40400
|
var _a;
|
|
40355
40401
|
const baseTime = ((_a = sessionActions[0]) === null || _a === void 0 ? void 0 : _a.timestamp) ||
|
|
40356
40402
|
action.timestamp;
|
|
40357
|
-
return (React$
|
|
40358
|
-
React$
|
|
40359
|
-
React$
|
|
40360
|
-
React$
|
|
40361
|
-
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" },
|
|
40362
40408
|
action.type ===
|
|
40363
|
-
"click" && (React$
|
|
40364
|
-
React$
|
|
40365
|
-
React$
|
|
40366
|
-
React$
|
|
40367
|
-
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" },
|
|
40368
40414
|
"<",
|
|
40369
40415
|
action.data
|
|
40370
40416
|
.elementTag ||
|
|
@@ -40377,10 +40423,10 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40377
40423
|
` class="${action.data.elementClass}"`,
|
|
40378
40424
|
">"),
|
|
40379
40425
|
action.data
|
|
40380
|
-
.elementText && (React$
|
|
40426
|
+
.elementText && (React$1.createElement("div", { className: "mt-1 text-sm text-gray-600" },
|
|
40381
40427
|
"Text:",
|
|
40382
40428
|
" ",
|
|
40383
|
-
React$
|
|
40429
|
+
React$1.createElement("span", { className: "italic" },
|
|
40384
40430
|
"\"",
|
|
40385
40431
|
action.data.elementText.substring(0, 100),
|
|
40386
40432
|
action
|
|
@@ -40392,19 +40438,19 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40392
40438
|
: "",
|
|
40393
40439
|
"\""))))),
|
|
40394
40440
|
action.type ===
|
|
40395
|
-
"navigation" && (React$
|
|
40396
|
-
React$
|
|
40397
|
-
React$
|
|
40398
|
-
React$
|
|
40399
|
-
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
|
|
40400
40446
|
.data
|
|
40401
40447
|
.url))),
|
|
40402
40448
|
action.type ===
|
|
40403
|
-
"scroll" && (React$
|
|
40404
|
-
React$
|
|
40405
|
-
React$
|
|
40406
|
-
React$
|
|
40407
|
-
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" },
|
|
40408
40454
|
"Position:",
|
|
40409
40455
|
" ",
|
|
40410
40456
|
action
|
|
@@ -40412,11 +40458,11 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40412
40458
|
.scrollY,
|
|
40413
40459
|
"px"))),
|
|
40414
40460
|
action.type ===
|
|
40415
|
-
"input" && (React$
|
|
40416
|
-
React$
|
|
40417
|
-
React$
|
|
40418
|
-
React$
|
|
40419
|
-
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" },
|
|
40420
40466
|
action
|
|
40421
40467
|
.data
|
|
40422
40468
|
.inputType,
|
|
@@ -40425,13 +40471,13 @@ ${feedback.comments && feedback.comments.length > 0
|
|
|
40425
40471
|
}))))), document.body),
|
|
40426
40472
|
showOverlay &&
|
|
40427
40473
|
feedback.designMockup &&
|
|
40428
|
-
createPortal(React$
|
|
40429
|
-
React$
|
|
40430
|
-
React$
|
|
40431
|
-
React$
|
|
40432
|
-
React$
|
|
40433
|
-
React$
|
|
40434
|
-
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)));
|
|
40435
40481
|
};
|
|
40436
40482
|
|
|
40437
40483
|
const signUp = async (email, password) => {
|
|
@@ -40474,11 +40520,11 @@ const getCurrentUser = () => {
|
|
|
40474
40520
|
};
|
|
40475
40521
|
|
|
40476
40522
|
const AuthForm = ({ onSuccess }) => {
|
|
40477
|
-
const [mode, setMode] = useState
|
|
40478
|
-
const [email, setEmail] = useState
|
|
40479
|
-
const [password, setPassword] = useState
|
|
40480
|
-
const [error, setError] = useState
|
|
40481
|
-
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);
|
|
40482
40528
|
const handleSubmit = async (e) => {
|
|
40483
40529
|
e.preventDefault();
|
|
40484
40530
|
setError(null);
|
|
@@ -40539,8 +40585,8 @@ const VIEWPORT_PRESETS = [
|
|
|
40539
40585
|
];
|
|
40540
40586
|
const ViewportControls = () => {
|
|
40541
40587
|
const { viewportMode, setViewportMode, isOpen: isWidgetOpen } = useMarkupStore();
|
|
40542
|
-
const [isExpanded, setIsExpanded] = React$
|
|
40543
|
-
const dropdownRef = React$
|
|
40588
|
+
const [isExpanded, setIsExpanded] = React$1.useState(false);
|
|
40589
|
+
const dropdownRef = React$1.useRef(null);
|
|
40544
40590
|
const handlePresetClick = (preset) => {
|
|
40545
40591
|
setViewportMode({ width: preset.width, height: preset.height });
|
|
40546
40592
|
setIsExpanded(false);
|
|
@@ -40553,7 +40599,7 @@ const ViewportControls = () => {
|
|
|
40553
40599
|
return (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.width) === preset.width && (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.height) === preset.height;
|
|
40554
40600
|
};
|
|
40555
40601
|
// Close dropdown on outside click
|
|
40556
|
-
React$
|
|
40602
|
+
React$1.useEffect(() => {
|
|
40557
40603
|
if (!isExpanded)
|
|
40558
40604
|
return;
|
|
40559
40605
|
const handleClickOutside = (event) => {
|
|
@@ -40565,7 +40611,7 @@ const ViewportControls = () => {
|
|
|
40565
40611
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
40566
40612
|
}, [isExpanded]);
|
|
40567
40613
|
// Handle ESC key to close dropdown or reset viewport
|
|
40568
|
-
React$
|
|
40614
|
+
React$1.useEffect(() => {
|
|
40569
40615
|
const handleKeyDown = (event) => {
|
|
40570
40616
|
if (event.key === 'Escape') {
|
|
40571
40617
|
if (isExpanded) {
|
|
@@ -40584,49 +40630,49 @@ const ViewportControls = () => {
|
|
|
40584
40630
|
// Don't show controls when widget is not open
|
|
40585
40631
|
if (!isWidgetOpen)
|
|
40586
40632
|
return null;
|
|
40587
|
-
return (React$
|
|
40588
|
-
!viewportMode ? (React$
|
|
40589
|
-
React$
|
|
40590
|
-
"Responsive Mode")) : (React$
|
|
40591
|
-
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" },
|
|
40592
40638
|
viewportMode.width,
|
|
40593
40639
|
" \u00D7 ",
|
|
40594
40640
|
viewportMode.height),
|
|
40595
|
-
React$
|
|
40596
|
-
React$
|
|
40597
|
-
React$
|
|
40598
|
-
isExpanded && (React$
|
|
40599
|
-
React$
|
|
40600
|
-
React$
|
|
40601
|
-
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)
|
|
40602
40648
|
? "bg-blue-50 border border-blue-200"
|
|
40603
40649
|
: "hover:bg-gray-100") },
|
|
40604
|
-
React$
|
|
40605
|
-
React$
|
|
40606
|
-
React$
|
|
40607
|
-
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" },
|
|
40608
40654
|
preset.width,
|
|
40609
40655
|
" \u00D7 ",
|
|
40610
40656
|
preset.height))))),
|
|
40611
|
-
React$
|
|
40612
|
-
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)
|
|
40613
40659
|
? "bg-blue-50 border border-blue-200"
|
|
40614
40660
|
: "hover:bg-gray-100") },
|
|
40615
|
-
React$
|
|
40616
|
-
React$
|
|
40617
|
-
React$
|
|
40618
|
-
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" },
|
|
40619
40665
|
preset.width,
|
|
40620
40666
|
" \u00D7 ",
|
|
40621
40667
|
preset.height))))),
|
|
40622
|
-
React$
|
|
40623
|
-
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)
|
|
40624
40670
|
? "bg-blue-50 border border-blue-200"
|
|
40625
40671
|
: "hover:bg-gray-100") },
|
|
40626
|
-
React$
|
|
40627
|
-
React$
|
|
40628
|
-
React$
|
|
40629
|
-
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" },
|
|
40630
40676
|
preset.width,
|
|
40631
40677
|
" \u00D7 ",
|
|
40632
40678
|
preset.height))))))))));
|
|
@@ -40634,8 +40680,8 @@ const ViewportControls = () => {
|
|
|
40634
40680
|
|
|
40635
40681
|
const FeedbackPins = ({ onPinClick }) => {
|
|
40636
40682
|
const { feedbackItems, showPins } = useMarkupStore();
|
|
40637
|
-
const [docSize, setDocSize] = useState
|
|
40638
|
-
useEffect
|
|
40683
|
+
const [docSize, setDocSize] = useState({ width: 0, height: 0 });
|
|
40684
|
+
useEffect(() => {
|
|
40639
40685
|
const measure = () => {
|
|
40640
40686
|
const root = document.documentElement;
|
|
40641
40687
|
const body = document.body;
|
|
@@ -40658,7 +40704,7 @@ const FeedbackPins = ({ onPinClick }) => {
|
|
|
40658
40704
|
};
|
|
40659
40705
|
}, []);
|
|
40660
40706
|
// Filter pins for current page URL
|
|
40661
|
-
const currentPagePins = useMemo
|
|
40707
|
+
const currentPagePins = useMemo(() => {
|
|
40662
40708
|
const currentUrl = window.location.href;
|
|
40663
40709
|
return feedbackItems.filter(item => {
|
|
40664
40710
|
var _a;
|
|
@@ -40685,7 +40731,7 @@ const FeedbackPins = ({ onPinClick }) => {
|
|
|
40685
40731
|
pointerEvents: 'none',
|
|
40686
40732
|
zIndex: 999998,
|
|
40687
40733
|
};
|
|
40688
|
-
return (React$
|
|
40734
|
+
return (React$1.createElement("div", { className: "feedback-pins-container", "data-markup-pins": true, style: containerStyle }, currentPagePins.map((feedback) => {
|
|
40689
40735
|
const { pinLocation } = feedback;
|
|
40690
40736
|
if (!pinLocation)
|
|
40691
40737
|
return null;
|
|
@@ -40708,20 +40754,20 @@ const FeedbackPins = ({ onPinClick }) => {
|
|
|
40708
40754
|
transform: 'translate(-50%, -50%)',
|
|
40709
40755
|
pointerEvents: 'auto',
|
|
40710
40756
|
};
|
|
40711
|
-
return (React$
|
|
40712
|
-
React$
|
|
40713
|
-
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: `
|
|
40714
40760
|
w-8 h-8 rounded-full flex items-center justify-center
|
|
40715
40761
|
shadow-lg hover:shadow-xl transition-all
|
|
40716
40762
|
${feedback.status === 'open' ? 'bg-[#E6B6CF] hover:bg-[#d9a3c0]' : 'bg-green-500 hover:bg-green-600'}
|
|
40717
40763
|
border-2 border-white
|
|
40718
40764
|
hover:scale-110
|
|
40719
40765
|
` },
|
|
40720
|
-
React$
|
|
40721
|
-
React$
|
|
40722
|
-
React$
|
|
40723
|
-
React$
|
|
40724
|
-
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 " })))));
|
|
40725
40771
|
}
|
|
40726
40772
|
finally { }
|
|
40727
40773
|
}
|
|
@@ -40735,7 +40781,7 @@ const useFirebaseSync = () => {
|
|
|
40735
40781
|
const setFeedbackItems = useMarkupStore((state) => state.setFeedbackItems);
|
|
40736
40782
|
const isAuthenticated = useMarkupStore((state) => state.isAuthenticated);
|
|
40737
40783
|
// Auth state listener
|
|
40738
|
-
useEffect
|
|
40784
|
+
useEffect(() => {
|
|
40739
40785
|
// Check if Firebase is initialized by checking if any apps exist
|
|
40740
40786
|
if (getApps().length === 0) {
|
|
40741
40787
|
console.warn('Firebase not initialized. Call initFirebase() at app root or authentication will be disabled.');
|
|
@@ -40786,7 +40832,7 @@ const useFirebaseSync = () => {
|
|
|
40786
40832
|
};
|
|
40787
40833
|
}, [setCurrentUser, setIsAuthenticated]);
|
|
40788
40834
|
// Feedback subscription listener
|
|
40789
|
-
useEffect
|
|
40835
|
+
useEffect(() => {
|
|
40790
40836
|
console.log('🔄 Feedback subscription effect running...', {
|
|
40791
40837
|
firebaseApps: getApps().length,
|
|
40792
40838
|
projectId: config.projectId,
|
|
@@ -40823,9 +40869,9 @@ const useFirebaseSync = () => {
|
|
|
40823
40869
|
};
|
|
40824
40870
|
|
|
40825
40871
|
const useSessionRecording = () => {
|
|
40826
|
-
const actionsRef = useRef
|
|
40872
|
+
const actionsRef = useRef([]);
|
|
40827
40873
|
const maxActions = 50; // Keep last 50 actions
|
|
40828
|
-
useEffect
|
|
40874
|
+
useEffect(() => {
|
|
40829
40875
|
if (typeof window === 'undefined')
|
|
40830
40876
|
return;
|
|
40831
40877
|
const recordAction = (action) => {
|
|
@@ -40928,7 +40974,7 @@ const useSessionRecording = () => {
|
|
|
40928
40974
|
const MarkupWidget = ({ config: userConfig, }) => {
|
|
40929
40975
|
var _a;
|
|
40930
40976
|
// Initialize Firebase synchronously on first render only
|
|
40931
|
-
const initRef = useRef
|
|
40977
|
+
const initRef = useRef(false);
|
|
40932
40978
|
if (!initRef.current && (userConfig === null || userConfig === void 0 ? void 0 : userConfig.firebaseConfig) && getApps().length === 0) {
|
|
40933
40979
|
try {
|
|
40934
40980
|
initializeFirebase(userConfig.firebaseConfig);
|
|
@@ -40945,9 +40991,9 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40945
40991
|
// Initialize Session Recording (Feature 2)
|
|
40946
40992
|
const { getSessionEvents } = useSessionRecording();
|
|
40947
40993
|
// Track last clicked element for component detection (Feature 4)
|
|
40948
|
-
const lastClickedElementRef = useRef
|
|
40949
|
-
const [lastClickedText, setLastClickedText] = useState
|
|
40950
|
-
useEffect
|
|
40994
|
+
const lastClickedElementRef = useRef(null);
|
|
40995
|
+
const [lastClickedText, setLastClickedText] = useState('');
|
|
40996
|
+
useEffect(() => {
|
|
40951
40997
|
const handleClick = (e) => {
|
|
40952
40998
|
var _a;
|
|
40953
40999
|
// Store the clicked element (but ignore clicks on the widget itself)
|
|
@@ -40982,7 +41028,7 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40982
41028
|
return () => document.removeEventListener('click', handleClick, true);
|
|
40983
41029
|
}, []);
|
|
40984
41030
|
// Apply viewport mode styling to document (like browser dev tools)
|
|
40985
|
-
useEffect
|
|
41031
|
+
useEffect(() => {
|
|
40986
41032
|
if (viewportMode) {
|
|
40987
41033
|
const root = document.documentElement;
|
|
40988
41034
|
const body = document.body;
|
|
@@ -41009,12 +41055,12 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
41009
41055
|
};
|
|
41010
41056
|
}
|
|
41011
41057
|
}, [viewportMode]);
|
|
41012
|
-
useEffect
|
|
41058
|
+
useEffect(() => {
|
|
41013
41059
|
if (userConfig) {
|
|
41014
41060
|
setConfig(userConfig);
|
|
41015
41061
|
}
|
|
41016
41062
|
}, [userConfig, setConfig]);
|
|
41017
|
-
useEffect
|
|
41063
|
+
useEffect(() => {
|
|
41018
41064
|
const handleKeyDown = (e) => {
|
|
41019
41065
|
const shortcut = config.shortcut || "ctrl+shift+m";
|
|
41020
41066
|
const keys = shortcut.split("+").map((k) => k.trim().toLowerCase());
|
|
@@ -41164,49 +41210,49 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
41164
41210
|
? adjustColor(config.primaryColor, -20)
|
|
41165
41211
|
: "#4f46e5",
|
|
41166
41212
|
});
|
|
41167
|
-
return (React$
|
|
41168
|
-
React$
|
|
41169
|
-
React$
|
|
41170
|
-
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: {
|
|
41171
41217
|
transform: isOpen
|
|
41172
41218
|
? "translateY(-50%) translateX(0)"
|
|
41173
41219
|
: "translateY(-50%) translateX(calc(100% - 40px))",
|
|
41174
41220
|
}, "data-markup-widget": true },
|
|
41175
|
-
React$
|
|
41176
|
-
isOpen && React$
|
|
41177
|
-
React$
|
|
41178
|
-
openFeedbackCount > 0 && (React$
|
|
41179
|
-
React$
|
|
41180
|
-
React$
|
|
41181
|
-
React$
|
|
41182
|
-
React$
|
|
41183
|
-
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) => {
|
|
41184
41230
|
e.stopPropagation();
|
|
41185
41231
|
setShowPins(!showPins);
|
|
41186
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" },
|
|
41187
|
-
React$
|
|
41188
|
-
React$
|
|
41189
|
-
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" })),
|
|
41190
41236
|
showPins ? 'Hide' : 'Show'),
|
|
41191
|
-
isAuthenticated && currentUser && (React$
|
|
41192
|
-
React$
|
|
41193
|
-
!isAuthenticated ? (React$
|
|
41194
|
-
React$
|
|
41195
|
-
React$
|
|
41196
|
-
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"
|
|
41197
41243
|
? "bg-gray-200"
|
|
41198
41244
|
: "border-white"), onClick: () => setActiveTab("create") },
|
|
41199
|
-
React$
|
|
41245
|
+
React$1.createElement(PlusIcon, { className: "w-3.5 h-3.5" }),
|
|
41200
41246
|
"New"),
|
|
41201
|
-
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"
|
|
41202
41248
|
? "bg-gray-200"
|
|
41203
41249
|
: "border-white"), onClick: () => setActiveTab("list") },
|
|
41204
41250
|
"View All (",
|
|
41205
41251
|
feedbackItems.length,
|
|
41206
41252
|
")")),
|
|
41207
|
-
React$
|
|
41208
|
-
activeTab === "create" && (React$
|
|
41209
|
-
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 })))))))));
|
|
41210
41256
|
};
|
|
41211
41257
|
function adjustColor(color, amount) {
|
|
41212
41258
|
const clamp = (val) => Math.min(255, Math.max(0, val));
|
|
@@ -41237,8 +41283,8 @@ function init(config, containerId = 'markup-widget-root') {
|
|
|
41237
41283
|
}
|
|
41238
41284
|
// Create React root and mount widget
|
|
41239
41285
|
root = ReactDOM.createRoot(container);
|
|
41240
|
-
root.render(React$
|
|
41241
|
-
React$
|
|
41286
|
+
root.render(React$1.createElement(React$1.StrictMode, null,
|
|
41287
|
+
React$1.createElement(MarkupWidget, { config: config })));
|
|
41242
41288
|
}
|
|
41243
41289
|
function open() {
|
|
41244
41290
|
// Implementation would open the widget UI
|