next-ai-editor 0.1.3 → 0.2.0
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/AIEditorProvider-CKA2K_g2.js +1428 -0
- package/dist/AIEditorProvider-CKA2K_g2.js.map +1 -0
- package/dist/AIEditorProvider-C_zRSAuV.cjs +1427 -0
- package/dist/AIEditorProvider-C_zRSAuV.cjs.map +1 -0
- package/dist/client/AIEditorProvider.d.ts +1 -33
- package/dist/client/AIEditorProvider.d.ts.map +1 -1
- package/dist/client/components/ChatPanel.d.ts +18 -0
- package/dist/client/components/ChatPanel.d.ts.map +1 -0
- package/dist/client/components/ControlPill.d.ts +8 -0
- package/dist/client/components/ControlPill.d.ts.map +1 -0
- package/dist/client/components/MessageItem.d.ts +7 -0
- package/dist/client/components/MessageItem.d.ts.map +1 -0
- package/dist/client/components/MessageList.d.ts +7 -0
- package/dist/client/components/MessageList.d.ts.map +1 -0
- package/dist/client/components/TaskHistoryPanel.d.ts +10 -0
- package/dist/client/components/TaskHistoryPanel.d.ts.map +1 -0
- package/dist/client/components/index.d.ts +11 -0
- package/dist/client/components/index.d.ts.map +1 -0
- package/dist/client/hooks/index.d.ts +3 -0
- package/dist/client/hooks/index.d.ts.map +1 -0
- package/dist/client/hooks/useChatStream.d.ts +66 -0
- package/dist/client/hooks/useChatStream.d.ts.map +1 -0
- package/dist/client/hooks/useHotReload.d.ts +10 -0
- package/dist/client/hooks/useHotReload.d.ts.map +1 -0
- package/dist/client/index.d.ts +3 -0
- package/dist/client/index.d.ts.map +1 -1
- package/dist/client.cjs +7 -1
- package/dist/client.cjs.map +1 -1
- package/dist/client.js +8 -2
- package/dist/client.js.map +1 -1
- package/dist/{index-DrmEf13c.js → comments-D3m0RsOO.js} +440 -15
- package/dist/comments-D3m0RsOO.js.map +1 -0
- package/dist/{index-CNJqd4EQ.cjs → comments-Daur80r4.cjs} +426 -1
- package/dist/comments-Daur80r4.cjs.map +1 -0
- package/dist/index.cjs +34 -27
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +22 -15
- package/dist/index.js.map +1 -1
- package/dist/next-ai-editor.css +880 -0
- package/dist/server/agent/sdk-client.d.ts +54 -0
- package/dist/server/agent/sdk-client.d.ts.map +1 -0
- package/dist/server/agent/session-store.d.ts +101 -0
- package/dist/server/agent/session-store.d.ts.map +1 -0
- package/dist/server/handlers/chat.d.ts +6 -0
- package/dist/server/handlers/chat.d.ts.map +1 -0
- package/dist/server/handlers/comments.d.ts +10 -0
- package/dist/server/handlers/comments.d.ts.map +1 -0
- package/dist/server/handlers/index.d.ts +2 -1
- package/dist/server/handlers/index.d.ts.map +1 -1
- package/dist/server/index.d.ts +1 -0
- package/dist/server/index.d.ts.map +1 -1
- package/dist/server.cjs +27 -26
- package/dist/server.cjs.map +1 -1
- package/dist/server.js +14 -13
- package/dist/shared/comment-types.d.ts +140 -0
- package/dist/shared/comment-types.d.ts.map +1 -0
- package/package.json +13 -4
- package/dist/AIEditorProvider-BGHm2xyU.cjs +0 -2167
- package/dist/AIEditorProvider-BGHm2xyU.cjs.map +0 -1
- package/dist/AIEditorProvider-CxdGjdLL.js +0 -2168
- package/dist/AIEditorProvider-CxdGjdLL.js.map +0 -1
- package/dist/index-CNJqd4EQ.cjs.map +0 -1
- package/dist/index-DrmEf13c.js.map +0 -1
|
@@ -1,2167 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const react = require("react");
|
|
5
|
-
const reactSyntaxHighlighter = require("react-syntax-highlighter");
|
|
6
|
-
const prism = require("react-syntax-highlighter/dist/esm/styles/prism");
|
|
7
|
-
const pathUtils = require("./path-utils-DYzEWUGy.cjs");
|
|
8
|
-
const _AIEditorStorage = class _AIEditorStorage {
|
|
9
|
-
// 5MB
|
|
10
|
-
/**
|
|
11
|
-
* Generate storage key from file path and component name
|
|
12
|
-
* Format: "ai-editor:session:components/Header.tsx#Header"
|
|
13
|
-
*/
|
|
14
|
-
static getSessionKey(filePath, componentName) {
|
|
15
|
-
const normalizedPath = filePath.replace(/\\/g, "/");
|
|
16
|
-
return `${this.STORAGE_PREFIX}${normalizedPath}#${componentName}`;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Save session to localStorage
|
|
20
|
-
*/
|
|
21
|
-
static saveSession(session) {
|
|
22
|
-
try {
|
|
23
|
-
const key = this.getSessionKey(
|
|
24
|
-
session.sourceLocation.filePath,
|
|
25
|
-
session.sourceLocation.componentName
|
|
26
|
-
);
|
|
27
|
-
if (this.getStorageSize() > this.MAX_STORAGE_SIZE) {
|
|
28
|
-
console.warn("Storage size exceeded, pruning old sessions...");
|
|
29
|
-
this.pruneOldSessions(7 * 24 * 60 * 60 * 1e3);
|
|
30
|
-
}
|
|
31
|
-
const serialized = JSON.stringify(session);
|
|
32
|
-
localStorage.setItem(key, serialized);
|
|
33
|
-
return true;
|
|
34
|
-
} catch (e) {
|
|
35
|
-
if (e instanceof Error && e.name === "QuotaExceededError") {
|
|
36
|
-
console.error("localStorage quota exceeded");
|
|
37
|
-
this.pruneOldSessions(7 * 24 * 60 * 60 * 1e3);
|
|
38
|
-
try {
|
|
39
|
-
const key = this.getSessionKey(
|
|
40
|
-
session.sourceLocation.filePath,
|
|
41
|
-
session.sourceLocation.componentName
|
|
42
|
-
);
|
|
43
|
-
const serialized = JSON.stringify(session);
|
|
44
|
-
localStorage.setItem(key, serialized);
|
|
45
|
-
return true;
|
|
46
|
-
} catch {
|
|
47
|
-
return false;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
console.error("Failed to save session:", e);
|
|
51
|
-
return false;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
/**
|
|
55
|
-
* Load session by filePath + componentName
|
|
56
|
-
*/
|
|
57
|
-
static loadSession(filePath, componentName) {
|
|
58
|
-
try {
|
|
59
|
-
const key = this.getSessionKey(filePath, componentName);
|
|
60
|
-
const stored = localStorage.getItem(key);
|
|
61
|
-
if (!stored) return null;
|
|
62
|
-
const session = JSON.parse(stored);
|
|
63
|
-
if (!session.version || !session.sourceLocation || !session.editHistory) {
|
|
64
|
-
console.warn("Invalid session schema, removing corrupted data");
|
|
65
|
-
localStorage.removeItem(key);
|
|
66
|
-
return null;
|
|
67
|
-
}
|
|
68
|
-
return session;
|
|
69
|
-
} catch (e) {
|
|
70
|
-
console.error("Failed to load session:", e);
|
|
71
|
-
const key = this.getSessionKey(filePath, componentName);
|
|
72
|
-
localStorage.removeItem(key);
|
|
73
|
-
return null;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
/**
|
|
77
|
-
* Delete specific session
|
|
78
|
-
*/
|
|
79
|
-
static deleteSession(filePath, componentName) {
|
|
80
|
-
try {
|
|
81
|
-
const key = this.getSessionKey(filePath, componentName);
|
|
82
|
-
localStorage.removeItem(key);
|
|
83
|
-
} catch (e) {
|
|
84
|
-
console.error("Failed to delete session:", e);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
/**
|
|
88
|
-
* Get all session keys
|
|
89
|
-
*/
|
|
90
|
-
static getAllSessionKeys() {
|
|
91
|
-
const keys = [];
|
|
92
|
-
try {
|
|
93
|
-
for (let i = 0; i < localStorage.length; i++) {
|
|
94
|
-
const key = localStorage.key(i);
|
|
95
|
-
if (key && key.startsWith(this.STORAGE_PREFIX)) {
|
|
96
|
-
keys.push(key);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
} catch (e) {
|
|
100
|
-
console.error("Failed to get session keys:", e);
|
|
101
|
-
}
|
|
102
|
-
return keys;
|
|
103
|
-
}
|
|
104
|
-
/**
|
|
105
|
-
* Clear all sessions
|
|
106
|
-
*/
|
|
107
|
-
static clearAllSessions() {
|
|
108
|
-
try {
|
|
109
|
-
const keys = this.getAllSessionKeys();
|
|
110
|
-
keys.forEach((key) => localStorage.removeItem(key));
|
|
111
|
-
console.log(`Cleared ${keys.length} session(s)`);
|
|
112
|
-
} catch (e) {
|
|
113
|
-
console.error("Failed to clear sessions:", e);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Get total storage usage in bytes
|
|
118
|
-
*/
|
|
119
|
-
static getStorageSize() {
|
|
120
|
-
let total = 0;
|
|
121
|
-
try {
|
|
122
|
-
for (let i = 0; i < localStorage.length; i++) {
|
|
123
|
-
const key = localStorage.key(i);
|
|
124
|
-
if (key && key.startsWith(this.STORAGE_PREFIX)) {
|
|
125
|
-
const value = localStorage.getItem(key);
|
|
126
|
-
if (value) {
|
|
127
|
-
total += (key.length + value.length) * 2;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
} catch (e) {
|
|
132
|
-
console.error("Failed to calculate storage size:", e);
|
|
133
|
-
}
|
|
134
|
-
return total;
|
|
135
|
-
}
|
|
136
|
-
/**
|
|
137
|
-
* Remove sessions older than maxAge milliseconds
|
|
138
|
-
*/
|
|
139
|
-
static pruneOldSessions(maxAge) {
|
|
140
|
-
try {
|
|
141
|
-
const now = Date.now();
|
|
142
|
-
const keys = this.getAllSessionKeys();
|
|
143
|
-
keys.forEach((key) => {
|
|
144
|
-
const value = localStorage.getItem(key);
|
|
145
|
-
if (!value) return;
|
|
146
|
-
try {
|
|
147
|
-
const session = JSON.parse(value);
|
|
148
|
-
const age = now - session.lastModified;
|
|
149
|
-
if (age > maxAge) {
|
|
150
|
-
console.log(`Pruning old session: ${key} (age: ${Math.round(age / (24 * 60 * 60 * 1e3))} days)`);
|
|
151
|
-
localStorage.removeItem(key);
|
|
152
|
-
}
|
|
153
|
-
} catch (e) {
|
|
154
|
-
console.warn(`Removing corrupted session: ${key}`);
|
|
155
|
-
localStorage.removeItem(key);
|
|
156
|
-
}
|
|
157
|
-
});
|
|
158
|
-
} catch (e) {
|
|
159
|
-
console.error("Failed to prune sessions:", e);
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
/**
|
|
163
|
-
* Compute SHA-256 hash of file content using Web Crypto API
|
|
164
|
-
*/
|
|
165
|
-
static async hashFileContent(content) {
|
|
166
|
-
try {
|
|
167
|
-
const encoder = new TextEncoder();
|
|
168
|
-
const data = encoder.encode(content);
|
|
169
|
-
const hashBuffer = await crypto.subtle.digest("SHA-256", data);
|
|
170
|
-
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
|
171
|
-
const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2, "0")).join("");
|
|
172
|
-
return hashHex;
|
|
173
|
-
} catch (e) {
|
|
174
|
-
console.error("Failed to hash content:", e);
|
|
175
|
-
return this.simpleHash(content);
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
/**
|
|
179
|
-
* Simple hash fallback (for environments without Web Crypto API)
|
|
180
|
-
*/
|
|
181
|
-
static simpleHash(str) {
|
|
182
|
-
let hash = 0;
|
|
183
|
-
for (let i = 0; i < str.length; i++) {
|
|
184
|
-
const char = str.charCodeAt(i);
|
|
185
|
-
hash = (hash << 5) - hash + char;
|
|
186
|
-
hash = hash & hash;
|
|
187
|
-
}
|
|
188
|
-
return hash.toString(16);
|
|
189
|
-
}
|
|
190
|
-
/**
|
|
191
|
-
* Get most recently modified session
|
|
192
|
-
*/
|
|
193
|
-
static getLastActiveSession() {
|
|
194
|
-
try {
|
|
195
|
-
const keys = this.getAllSessionKeys();
|
|
196
|
-
if (keys.length === 0) return null;
|
|
197
|
-
let latestSession = null;
|
|
198
|
-
let latestTime = 0;
|
|
199
|
-
keys.forEach((key) => {
|
|
200
|
-
const value = localStorage.getItem(key);
|
|
201
|
-
if (!value) return;
|
|
202
|
-
try {
|
|
203
|
-
const session = JSON.parse(value);
|
|
204
|
-
if (!session.version || !session.sourceLocation || !session.editHistory) {
|
|
205
|
-
console.warn(`Skipping invalid session: ${key}`);
|
|
206
|
-
return;
|
|
207
|
-
}
|
|
208
|
-
if (session.lastModified > latestTime) {
|
|
209
|
-
latestTime = session.lastModified;
|
|
210
|
-
latestSession = session;
|
|
211
|
-
}
|
|
212
|
-
} catch (e) {
|
|
213
|
-
console.warn(`Skipping corrupted session: ${key}`);
|
|
214
|
-
}
|
|
215
|
-
});
|
|
216
|
-
return latestSession;
|
|
217
|
-
} catch (e) {
|
|
218
|
-
console.error("Failed to get last active session:", e);
|
|
219
|
-
return null;
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
};
|
|
223
|
-
_AIEditorStorage.STORAGE_PREFIX = "ai-editor:session:";
|
|
224
|
-
_AIEditorStorage.VERSION = "1.0.0";
|
|
225
|
-
_AIEditorStorage.MAX_STORAGE_SIZE = 5 * 1024 * 1024;
|
|
226
|
-
let AIEditorStorage = _AIEditorStorage;
|
|
227
|
-
function buildReadQueryParams(selectedSource, includeParent = true) {
|
|
228
|
-
var _a, _b, _c, _d;
|
|
229
|
-
const params = {
|
|
230
|
-
path: selectedSource.filePath,
|
|
231
|
-
line: String(selectedSource.lineNumber),
|
|
232
|
-
tagName: ((_a = selectedSource.elementContext) == null ? void 0 : _a.tagName) || "",
|
|
233
|
-
nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
|
|
234
|
-
textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
|
|
235
|
-
className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
|
|
236
|
-
};
|
|
237
|
-
if (selectedSource.debugStack) {
|
|
238
|
-
params.debugStack = selectedSource.debugStack;
|
|
239
|
-
}
|
|
240
|
-
if (includeParent && selectedSource.parentComponent) {
|
|
241
|
-
params.parentFilePath = selectedSource.parentComponent.filePath;
|
|
242
|
-
params.parentLine = String(selectedSource.parentComponent.lineNumber);
|
|
243
|
-
params.parentComponentName = selectedSource.parentComponent.componentName;
|
|
244
|
-
if (selectedSource.parentComponent.debugStack) {
|
|
245
|
-
params.parentDebugStack = selectedSource.parentComponent.debugStack;
|
|
246
|
-
}
|
|
247
|
-
if (selectedSource.parentComponent.childKey) {
|
|
248
|
-
params.childKey = selectedSource.parentComponent.childKey;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
return params;
|
|
252
|
-
}
|
|
253
|
-
function getFiberFromElement(element) {
|
|
254
|
-
const key = Object.keys(element).find(
|
|
255
|
-
(k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$")
|
|
256
|
-
);
|
|
257
|
-
return key ? element[key] : null;
|
|
258
|
-
}
|
|
259
|
-
function getComponentName(fiber) {
|
|
260
|
-
var _a, _b;
|
|
261
|
-
if (!fiber) return "Unknown";
|
|
262
|
-
const type = fiber.type;
|
|
263
|
-
if ((_a = fiber._debugSource) == null ? void 0 : _a.fileName) {
|
|
264
|
-
const fileName = fiber._debugSource.fileName;
|
|
265
|
-
const match = fileName.match(/\/([^/]+)\.(tsx?|jsx?)$/);
|
|
266
|
-
if (match) return match[1];
|
|
267
|
-
}
|
|
268
|
-
if (typeof type === "string") return type;
|
|
269
|
-
if (typeof type === "function")
|
|
270
|
-
return type.displayName || type.name || "Anonymous";
|
|
271
|
-
if (type == null ? void 0 : type.displayName) return type.displayName;
|
|
272
|
-
if ((_b = type == null ? void 0 : type.render) == null ? void 0 : _b.name) return type.render.name;
|
|
273
|
-
if (fiber._debugStack) {
|
|
274
|
-
const stack = String(fiber._debugStack.stack || fiber._debugStack);
|
|
275
|
-
const match = stack.match(/at\s+([A-Z][a-zA-Z0-9]*)\s*\(/);
|
|
276
|
-
if (match && match[1] !== "Object") {
|
|
277
|
-
return match[1];
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
return "Unknown";
|
|
281
|
-
}
|
|
282
|
-
function isUserComponent(fiber) {
|
|
283
|
-
if (fiber.tag === 5 || fiber.tag === 6 || fiber.tag === 3) return false;
|
|
284
|
-
const type = fiber.type;
|
|
285
|
-
if (!type || typeof type === "string") return false;
|
|
286
|
-
return true;
|
|
287
|
-
}
|
|
288
|
-
function countNthOfType(element, tagName) {
|
|
289
|
-
let boundary = element.parentElement;
|
|
290
|
-
while (boundary) {
|
|
291
|
-
const fiber = getFiberFromElement(boundary);
|
|
292
|
-
if (fiber && isUserComponent(fiber)) break;
|
|
293
|
-
boundary = boundary.parentElement;
|
|
294
|
-
}
|
|
295
|
-
if (!boundary) boundary = element.parentElement;
|
|
296
|
-
if (!boundary) return 1;
|
|
297
|
-
const sameTagElements = [];
|
|
298
|
-
if (boundary.tagName.toLowerCase() === tagName.toLowerCase()) {
|
|
299
|
-
sameTagElements.push(boundary);
|
|
300
|
-
}
|
|
301
|
-
sameTagElements.push(...Array.from(boundary.querySelectorAll(tagName)));
|
|
302
|
-
let count = 1;
|
|
303
|
-
for (const el of sameTagElements) {
|
|
304
|
-
if (el === element) break;
|
|
305
|
-
count++;
|
|
306
|
-
}
|
|
307
|
-
return count;
|
|
308
|
-
}
|
|
309
|
-
function extractProps(fiber) {
|
|
310
|
-
if (!fiber) return void 0;
|
|
311
|
-
const fiberProps = fiber.memoizedProps || fiber.pendingProps;
|
|
312
|
-
if (!fiberProps || typeof fiberProps !== "object") return void 0;
|
|
313
|
-
const props = {};
|
|
314
|
-
const identifyingKeys = [
|
|
315
|
-
"id",
|
|
316
|
-
"name",
|
|
317
|
-
"type",
|
|
318
|
-
"href",
|
|
319
|
-
"src",
|
|
320
|
-
"alt",
|
|
321
|
-
"role",
|
|
322
|
-
"aria-label",
|
|
323
|
-
"data-testid"
|
|
324
|
-
];
|
|
325
|
-
for (const key of identifyingKeys) {
|
|
326
|
-
if (key in fiberProps && typeof fiberProps[key] === "string") {
|
|
327
|
-
props[key] = fiberProps[key];
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
if (fiberProps.style && typeof fiberProps.style === "object") {
|
|
331
|
-
props._styleKeys = Object.keys(fiberProps.style).slice(0, 5);
|
|
332
|
-
}
|
|
333
|
-
return Object.keys(props).length > 0 ? props : void 0;
|
|
334
|
-
}
|
|
335
|
-
function captureElementContext(element, fiber) {
|
|
336
|
-
const tagName = element.tagName.toLowerCase();
|
|
337
|
-
let textContent;
|
|
338
|
-
const directText = Array.from(element.childNodes).filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => {
|
|
339
|
-
var _a;
|
|
340
|
-
return (_a = n.textContent) == null ? void 0 : _a.trim();
|
|
341
|
-
}).filter(Boolean).join(" ");
|
|
342
|
-
if (directText) {
|
|
343
|
-
textContent = directText.slice(0, 50);
|
|
344
|
-
} else if (element.textContent) {
|
|
345
|
-
textContent = element.textContent.trim().slice(0, 50);
|
|
346
|
-
}
|
|
347
|
-
const className = typeof element.className === "string" ? element.className.slice(0, 100) : void 0;
|
|
348
|
-
const nthOfType = countNthOfType(element, tagName);
|
|
349
|
-
const key = (fiber == null ? void 0 : fiber.key) ? String(fiber.key) : void 0;
|
|
350
|
-
const props = extractProps(fiber);
|
|
351
|
-
return { tagName, textContent, className, key, nthOfType, props };
|
|
352
|
-
}
|
|
353
|
-
function extractFromDebugStack(fiber) {
|
|
354
|
-
const stack = fiber._debugStack;
|
|
355
|
-
if (!stack) return null;
|
|
356
|
-
const stackStr = stack.stack || String(stack);
|
|
357
|
-
const frames = stackStr.split("\n");
|
|
358
|
-
const skipPatterns = [
|
|
359
|
-
"node_modules",
|
|
360
|
-
"SegmentViewNode",
|
|
361
|
-
"LayoutRouter",
|
|
362
|
-
"ErrorBoundary",
|
|
363
|
-
"fakeJSXCallSite"
|
|
364
|
-
];
|
|
365
|
-
for (const frame of frames) {
|
|
366
|
-
if (skipPatterns.some((p) => frame.includes(p))) continue;
|
|
367
|
-
const match = frame.match(/at\s+(\w+)\s+\((.+?):(\d+):(\d+)\)?$/);
|
|
368
|
-
if (match) {
|
|
369
|
-
const fileName = pathUtils.cleanPath(match[2].replace(/\?[^:]*$/, ""));
|
|
370
|
-
if (!pathUtils.shouldSkipPath(fileName, ["ai-editor-provider"])) {
|
|
371
|
-
return {
|
|
372
|
-
fileName,
|
|
373
|
-
lineNumber: parseInt(match[3], 10),
|
|
374
|
-
columnNumber: parseInt(match[4], 10)
|
|
375
|
-
};
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
return null;
|
|
380
|
-
}
|
|
381
|
-
function extractFromDebugOwner(fiber) {
|
|
382
|
-
var _a, _b;
|
|
383
|
-
const owner = fiber._debugOwner;
|
|
384
|
-
if (!owner) return null;
|
|
385
|
-
if ((_a = owner._debugSource) == null ? void 0 : _a.fileName) {
|
|
386
|
-
return owner._debugSource;
|
|
387
|
-
}
|
|
388
|
-
const stack = owner.stack;
|
|
389
|
-
if (Array.isArray(stack) && ((_b = stack[0]) == null ? void 0 : _b.fileName)) {
|
|
390
|
-
return stack[0];
|
|
391
|
-
}
|
|
392
|
-
return null;
|
|
393
|
-
}
|
|
394
|
-
function findSourceFromFiber(fiber) {
|
|
395
|
-
if (!fiber) return null;
|
|
396
|
-
let actualComponentName = null;
|
|
397
|
-
if (fiber._debugOwner && typeof fiber._debugOwner === "object") {
|
|
398
|
-
const debugOwner = fiber._debugOwner;
|
|
399
|
-
if (debugOwner.name && typeof debugOwner.name === "string") {
|
|
400
|
-
actualComponentName = debugOwner.name;
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
let current = fiber;
|
|
404
|
-
const visited = /* @__PURE__ */ new Set();
|
|
405
|
-
let iterations = 0;
|
|
406
|
-
while (current && !visited.has(current) && iterations < 10) {
|
|
407
|
-
iterations++;
|
|
408
|
-
visited.add(current);
|
|
409
|
-
const sourceData = current._debugSource || extractFromDebugStack(current) || extractFromDebugOwner(current);
|
|
410
|
-
if (sourceData == null ? void 0 : sourceData.fileName) {
|
|
411
|
-
const filePath = pathUtils.cleanPath(sourceData.fileName);
|
|
412
|
-
if (!pathUtils.shouldSkipPath(filePath, ["ai-editor-provider"])) {
|
|
413
|
-
if (actualComponentName) {
|
|
414
|
-
const rawDebugStack = current._debugStack ? String(current._debugStack.stack || current._debugStack) : void 0;
|
|
415
|
-
return {
|
|
416
|
-
filePath,
|
|
417
|
-
lineNumber: sourceData.lineNumber || 1,
|
|
418
|
-
columnNumber: sourceData.columnNumber || 0,
|
|
419
|
-
componentName: actualComponentName,
|
|
420
|
-
debugStack: rawDebugStack
|
|
421
|
-
};
|
|
422
|
-
} else {
|
|
423
|
-
let componentFiber = current;
|
|
424
|
-
while (componentFiber) {
|
|
425
|
-
if (isUserComponent(componentFiber)) {
|
|
426
|
-
const componentName = getComponentName(componentFiber);
|
|
427
|
-
const isNextJSInternal = [
|
|
428
|
-
"Segment",
|
|
429
|
-
"Boundary",
|
|
430
|
-
"Router",
|
|
431
|
-
"Handler",
|
|
432
|
-
"Context",
|
|
433
|
-
"Layout",
|
|
434
|
-
"Template",
|
|
435
|
-
"Scroll",
|
|
436
|
-
"Focus",
|
|
437
|
-
"Loading",
|
|
438
|
-
"Error"
|
|
439
|
-
].some((pattern) => componentName.includes(pattern));
|
|
440
|
-
if (!isNextJSInternal) {
|
|
441
|
-
const rawDebugStack = current._debugStack ? String(current._debugStack.stack || current._debugStack) : void 0;
|
|
442
|
-
return {
|
|
443
|
-
filePath,
|
|
444
|
-
lineNumber: sourceData.lineNumber || 1,
|
|
445
|
-
columnNumber: sourceData.columnNumber || 0,
|
|
446
|
-
componentName,
|
|
447
|
-
debugStack: rawDebugStack
|
|
448
|
-
};
|
|
449
|
-
}
|
|
450
|
-
}
|
|
451
|
-
componentFiber = componentFiber.return || componentFiber._debugOwner || null;
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
}
|
|
455
|
-
}
|
|
456
|
-
current = current.return || current._debugOwner || null;
|
|
457
|
-
}
|
|
458
|
-
return null;
|
|
459
|
-
}
|
|
460
|
-
function findParentComponentFromFiber(childFiber, childComponentName) {
|
|
461
|
-
if (!childFiber) return null;
|
|
462
|
-
let childComponentFiber = null;
|
|
463
|
-
if (childFiber._debugOwner && typeof childFiber._debugOwner === "object") {
|
|
464
|
-
const debugOwner = childFiber._debugOwner;
|
|
465
|
-
if (debugOwner.type && typeof debugOwner.type === "function") {
|
|
466
|
-
const ownerComponentName = getComponentName(debugOwner);
|
|
467
|
-
if (ownerComponentName === childComponentName) {
|
|
468
|
-
childComponentFiber = debugOwner;
|
|
469
|
-
}
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
if (!childComponentFiber) {
|
|
473
|
-
let current2 = childFiber;
|
|
474
|
-
let iterations2 = 0;
|
|
475
|
-
while (current2 && iterations2 < 20) {
|
|
476
|
-
iterations2++;
|
|
477
|
-
const componentName = getComponentName(current2);
|
|
478
|
-
current2.index;
|
|
479
|
-
if (isUserComponent(current2)) {
|
|
480
|
-
if (componentName === childComponentName) {
|
|
481
|
-
childComponentFiber = current2;
|
|
482
|
-
break;
|
|
483
|
-
}
|
|
484
|
-
}
|
|
485
|
-
if (current2._debugOwner && typeof current2._debugOwner === "object") {
|
|
486
|
-
const debugOwner = current2._debugOwner;
|
|
487
|
-
if (debugOwner.name === childComponentName && !debugOwner.type) {
|
|
488
|
-
const parent = current2.return;
|
|
489
|
-
const parentDebugOwner = parent == null ? void 0 : parent._debugOwner;
|
|
490
|
-
const isRootElement = !parentDebugOwner || parentDebugOwner.name !== childComponentName;
|
|
491
|
-
if (isRootElement) {
|
|
492
|
-
childComponentFiber = current2;
|
|
493
|
-
break;
|
|
494
|
-
}
|
|
495
|
-
}
|
|
496
|
-
}
|
|
497
|
-
current2 = current2.return;
|
|
498
|
-
}
|
|
499
|
-
}
|
|
500
|
-
let childKey;
|
|
501
|
-
if (childComponentFiber == null ? void 0 : childComponentFiber.key) {
|
|
502
|
-
childKey = String(childComponentFiber.key);
|
|
503
|
-
} else if (childComponentFiber && typeof childComponentFiber.index === "number") {
|
|
504
|
-
childKey = String(childComponentFiber.index);
|
|
505
|
-
}
|
|
506
|
-
if (childFiber._debugOwner && typeof childFiber._debugOwner === "object") {
|
|
507
|
-
const debugOwner = childFiber._debugOwner;
|
|
508
|
-
if (debugOwner.owner && debugOwner.owner.name) {
|
|
509
|
-
const parentName = debugOwner.owner.name;
|
|
510
|
-
const parentDebugLocation = debugOwner.owner.debugLocation;
|
|
511
|
-
if (parentDebugLocation) {
|
|
512
|
-
const stack = String(parentDebugLocation.stack || parentDebugLocation);
|
|
513
|
-
return {
|
|
514
|
-
filePath: "",
|
|
515
|
-
// Will be resolved on server
|
|
516
|
-
lineNumber: 0,
|
|
517
|
-
columnNumber: 0,
|
|
518
|
-
componentName: parentName,
|
|
519
|
-
debugStack: stack,
|
|
520
|
-
childKey
|
|
521
|
-
};
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
if (debugOwner.type && typeof debugOwner.type === "function") {
|
|
525
|
-
const componentFiberOwner = debugOwner._debugOwner;
|
|
526
|
-
if (componentFiberOwner && typeof componentFiberOwner === "object") {
|
|
527
|
-
const parentName = componentFiberOwner.name;
|
|
528
|
-
const parentDebugLocation = componentFiberOwner.debugLocation;
|
|
529
|
-
if (parentName && typeof parentName === "string") {
|
|
530
|
-
if (parentDebugLocation) {
|
|
531
|
-
const stack = String(
|
|
532
|
-
parentDebugLocation.stack || parentDebugLocation
|
|
533
|
-
);
|
|
534
|
-
return {
|
|
535
|
-
filePath: "",
|
|
536
|
-
// Will be resolved on server
|
|
537
|
-
lineNumber: 0,
|
|
538
|
-
columnNumber: 0,
|
|
539
|
-
componentName: parentName,
|
|
540
|
-
debugStack: stack,
|
|
541
|
-
childKey
|
|
542
|
-
};
|
|
543
|
-
}
|
|
544
|
-
}
|
|
545
|
-
}
|
|
546
|
-
}
|
|
547
|
-
}
|
|
548
|
-
let current = childFiber.return;
|
|
549
|
-
const visited = /* @__PURE__ */ new Set();
|
|
550
|
-
let iterations = 0;
|
|
551
|
-
while (current && !visited.has(current) && iterations < 20) {
|
|
552
|
-
iterations++;
|
|
553
|
-
visited.add(current);
|
|
554
|
-
if (isUserComponent(current)) {
|
|
555
|
-
const componentName = getComponentName(current);
|
|
556
|
-
if (componentName === childComponentName) {
|
|
557
|
-
current = current._debugOwner || null;
|
|
558
|
-
continue;
|
|
559
|
-
}
|
|
560
|
-
const shouldSkipComponent = componentName.includes("AIEditorProvider") || // Skip the AI Editor wrapper itself
|
|
561
|
-
componentName.startsWith("__next") || // Skip all Next.js internal components like __next_root_layout_boundary__
|
|
562
|
-
componentName.startsWith("_") || // Skip internal components starting with underscore
|
|
563
|
-
[
|
|
564
|
-
"Segment",
|
|
565
|
-
"Boundary",
|
|
566
|
-
"Router",
|
|
567
|
-
"Handler",
|
|
568
|
-
"Context",
|
|
569
|
-
"Layout",
|
|
570
|
-
"Template",
|
|
571
|
-
"Scroll",
|
|
572
|
-
"Focus",
|
|
573
|
-
"Loading",
|
|
574
|
-
"Error",
|
|
575
|
-
"RootLayout",
|
|
576
|
-
// Skip root layout wrapper
|
|
577
|
-
"NotFound"
|
|
578
|
-
].some((pattern) => componentName.includes(pattern));
|
|
579
|
-
if (shouldSkipComponent) {
|
|
580
|
-
current = current._debugOwner || null;
|
|
581
|
-
continue;
|
|
582
|
-
}
|
|
583
|
-
const sourceData = current._debugSource || extractFromDebugStack(current) || extractFromDebugOwner(current);
|
|
584
|
-
if (sourceData == null ? void 0 : sourceData.fileName) {
|
|
585
|
-
const filePath = pathUtils.cleanPath(sourceData.fileName);
|
|
586
|
-
if (!pathUtils.shouldSkipPath(filePath, ["ai-editor-provider"])) {
|
|
587
|
-
const rawDebugStack = current._debugStack ? String(current._debugStack.stack || current._debugStack) : void 0;
|
|
588
|
-
return {
|
|
589
|
-
filePath,
|
|
590
|
-
lineNumber: sourceData.lineNumber || 1,
|
|
591
|
-
columnNumber: sourceData.columnNumber || 0,
|
|
592
|
-
componentName,
|
|
593
|
-
debugStack: rawDebugStack,
|
|
594
|
-
childKey
|
|
595
|
-
};
|
|
596
|
-
}
|
|
597
|
-
}
|
|
598
|
-
}
|
|
599
|
-
const nextOwner = current._debugOwner;
|
|
600
|
-
current = nextOwner || null;
|
|
601
|
-
}
|
|
602
|
-
const childDebugStack = childFiber._debugStack ? String(childFiber._debugStack.stack || childFiber._debugStack) : null;
|
|
603
|
-
if (childDebugStack) {
|
|
604
|
-
return {
|
|
605
|
-
filePath: "",
|
|
606
|
-
// Will be resolved on server from debugStack
|
|
607
|
-
lineNumber: 0,
|
|
608
|
-
columnNumber: 0,
|
|
609
|
-
componentName: "",
|
|
610
|
-
// Will be determined on server
|
|
611
|
-
debugStack: childDebugStack,
|
|
612
|
-
// Use child's debugStack for server-side resolution
|
|
613
|
-
childKey
|
|
614
|
-
};
|
|
615
|
-
}
|
|
616
|
-
return null;
|
|
617
|
-
}
|
|
618
|
-
function getSourceFromElement(element) {
|
|
619
|
-
var _a;
|
|
620
|
-
let current = element;
|
|
621
|
-
let elementWithSource = null;
|
|
622
|
-
let fiberWithSource = null;
|
|
623
|
-
while (current && current !== document.body) {
|
|
624
|
-
const fiber = getFiberFromElement(current);
|
|
625
|
-
if (fiber) {
|
|
626
|
-
const hasSourceInfo = ((_a = fiber._debugSource) == null ? void 0 : _a.fileName) || fiber._debugStack || fiber._debugOwner && typeof fiber._debugOwner === "object";
|
|
627
|
-
if (hasSourceInfo && !fiberWithSource) {
|
|
628
|
-
elementWithSource = current;
|
|
629
|
-
fiberWithSource = fiber;
|
|
630
|
-
}
|
|
631
|
-
}
|
|
632
|
-
current = current.parentElement;
|
|
633
|
-
}
|
|
634
|
-
if (!fiberWithSource || !elementWithSource) return null;
|
|
635
|
-
const source = findSourceFromFiber(fiberWithSource);
|
|
636
|
-
if (!source) return null;
|
|
637
|
-
const elementContext = captureElementContext(elementWithSource, fiberWithSource);
|
|
638
|
-
const parentComponent = findParentComponentFromFiber(
|
|
639
|
-
fiberWithSource,
|
|
640
|
-
source.componentName
|
|
641
|
-
);
|
|
642
|
-
return {
|
|
643
|
-
...source,
|
|
644
|
-
elementContext,
|
|
645
|
-
parentComponent: parentComponent || void 0
|
|
646
|
-
};
|
|
647
|
-
}
|
|
648
|
-
if (typeof window !== "undefined") {
|
|
649
|
-
window.__getSource = getSourceFromElement;
|
|
650
|
-
}
|
|
651
|
-
const ENABLE_SESSION_PERSISTENCE = false;
|
|
652
|
-
const sourceResolutionCache = /* @__PURE__ */ new Map();
|
|
653
|
-
const inflightSourceResolutions = /* @__PURE__ */ new Map();
|
|
654
|
-
function inferComponentNameFromPath(filePath) {
|
|
655
|
-
const fileName = filePath.split("/").pop() || "";
|
|
656
|
-
const nameWithoutExt = fileName.replace(/\.(tsx?|jsx?)$/, "");
|
|
657
|
-
return nameWithoutExt.charAt(0).toUpperCase() + nameWithoutExt.slice(1);
|
|
658
|
-
}
|
|
659
|
-
async function resolveSourceLocation(source) {
|
|
660
|
-
if (typeof window === "undefined" || process.env.NODE_ENV !== "development") {
|
|
661
|
-
return null;
|
|
662
|
-
}
|
|
663
|
-
if (!source.debugStack) {
|
|
664
|
-
console.warn("No debugStack available for resolution:", source);
|
|
665
|
-
return null;
|
|
666
|
-
}
|
|
667
|
-
const cacheKey = source.debugStack;
|
|
668
|
-
const cached = sourceResolutionCache.get(cacheKey);
|
|
669
|
-
if (cached) {
|
|
670
|
-
const resolved2 = { ...source, ...cached };
|
|
671
|
-
if (resolved2.componentName === "Unknown" && resolved2.filePath) {
|
|
672
|
-
resolved2.componentName = inferComponentNameFromPath(resolved2.filePath);
|
|
673
|
-
}
|
|
674
|
-
return resolved2;
|
|
675
|
-
}
|
|
676
|
-
let inflight = inflightSourceResolutions.get(cacheKey);
|
|
677
|
-
if (!inflight) {
|
|
678
|
-
inflight = fetch("/api/ai-editor/resolve", {
|
|
679
|
-
method: "POST",
|
|
680
|
-
headers: { "Content-Type": "application/json" },
|
|
681
|
-
body: JSON.stringify({ debugStack: cacheKey })
|
|
682
|
-
}).then(async (res) => {
|
|
683
|
-
if (!res.ok) {
|
|
684
|
-
const errorText = await res.text();
|
|
685
|
-
console.error(
|
|
686
|
-
`Resolve API error ${res.status}:`,
|
|
687
|
-
errorText,
|
|
688
|
-
"for stack:",
|
|
689
|
-
cacheKey.substring(0, 200)
|
|
690
|
-
);
|
|
691
|
-
return inferFilePathFromComponentName(source.componentName);
|
|
692
|
-
}
|
|
693
|
-
const data = await res.json();
|
|
694
|
-
if ((data == null ? void 0 : data.success) && data.filePath && data.lineNumber) {
|
|
695
|
-
const resolved2 = {
|
|
696
|
-
filePath: data.filePath,
|
|
697
|
-
lineNumber: data.lineNumber,
|
|
698
|
-
columnNumber: typeof data.columnNumber === "number" ? data.columnNumber : source.columnNumber
|
|
699
|
-
};
|
|
700
|
-
sourceResolutionCache.set(cacheKey, resolved2);
|
|
701
|
-
return resolved2;
|
|
702
|
-
}
|
|
703
|
-
console.warn("Resolve API returned unsuccessful response:", data);
|
|
704
|
-
return inferFilePathFromComponentName(source.componentName);
|
|
705
|
-
}).catch((err) => {
|
|
706
|
-
console.error("Error calling resolve API:", err);
|
|
707
|
-
return inferFilePathFromComponentName(source.componentName);
|
|
708
|
-
}).finally(() => {
|
|
709
|
-
inflightSourceResolutions.delete(cacheKey);
|
|
710
|
-
});
|
|
711
|
-
inflightSourceResolutions.set(cacheKey, inflight);
|
|
712
|
-
}
|
|
713
|
-
const resolvedInfo = await inflight;
|
|
714
|
-
if (!resolvedInfo) return null;
|
|
715
|
-
const resolved = {
|
|
716
|
-
...source,
|
|
717
|
-
filePath: resolvedInfo.filePath,
|
|
718
|
-
lineNumber: resolvedInfo.lineNumber,
|
|
719
|
-
columnNumber: resolvedInfo.columnNumber
|
|
720
|
-
};
|
|
721
|
-
if (resolved.componentName === "Unknown" && resolved.filePath) {
|
|
722
|
-
resolved.componentName = inferComponentNameFromPath(resolved.filePath);
|
|
723
|
-
}
|
|
724
|
-
return resolved;
|
|
725
|
-
}
|
|
726
|
-
async function inferFilePathFromComponentName(componentName) {
|
|
727
|
-
if (!componentName || componentName === "Unknown") return null;
|
|
728
|
-
const possiblePaths = [
|
|
729
|
-
`components/${componentName}.tsx`,
|
|
730
|
-
`components/${componentName}.jsx`,
|
|
731
|
-
`app/${componentName}.tsx`,
|
|
732
|
-
`app/${componentName}.jsx`,
|
|
733
|
-
`src/components/${componentName}.tsx`,
|
|
734
|
-
`src/components/${componentName}.jsx`
|
|
735
|
-
];
|
|
736
|
-
for (const tryPath of possiblePaths) {
|
|
737
|
-
try {
|
|
738
|
-
const response = await fetch(
|
|
739
|
-
`/api/ai-editor/absolute-path?path=${encodeURIComponent(tryPath)}`
|
|
740
|
-
);
|
|
741
|
-
if (response.ok) {
|
|
742
|
-
const data = await response.json();
|
|
743
|
-
if (data.success) {
|
|
744
|
-
console.log(
|
|
745
|
-
`Inferred file path for ${componentName}: ${tryPath}`
|
|
746
|
-
);
|
|
747
|
-
return {
|
|
748
|
-
filePath: tryPath,
|
|
749
|
-
lineNumber: 1,
|
|
750
|
-
columnNumber: 0
|
|
751
|
-
};
|
|
752
|
-
}
|
|
753
|
-
}
|
|
754
|
-
} catch (err) {
|
|
755
|
-
}
|
|
756
|
-
}
|
|
757
|
-
console.warn(`Could not infer file path for component: ${componentName}`);
|
|
758
|
-
return null;
|
|
759
|
-
}
|
|
760
|
-
const EditorContext = react.createContext(null);
|
|
761
|
-
function useAIEditor() {
|
|
762
|
-
const ctx = react.useContext(EditorContext);
|
|
763
|
-
if (!ctx) throw new Error("useAIEditor must be used within AIEditorProvider");
|
|
764
|
-
return ctx;
|
|
765
|
-
}
|
|
766
|
-
function AIEditorProvider({
|
|
767
|
-
children,
|
|
768
|
-
theme = "dark"
|
|
769
|
-
}) {
|
|
770
|
-
const [isEnabled, setEnabled] = react.useState(false);
|
|
771
|
-
const [selectedSource, setSelectedSource] = react.useState(
|
|
772
|
-
null
|
|
773
|
-
);
|
|
774
|
-
const [selectedDOMElement, setSelectedDOMElement] = react.useState(
|
|
775
|
-
null
|
|
776
|
-
);
|
|
777
|
-
const [isLoading, setIsLoading] = react.useState(false);
|
|
778
|
-
const [editHistory, setEditHistory] = react.useState([]);
|
|
779
|
-
const [showStaleWarning, setShowStaleWarning] = react.useState(false);
|
|
780
|
-
const [staleSession, setStaleSession] = react.useState(null);
|
|
781
|
-
const [hasActiveSession, setHasActiveSession] = react.useState(false);
|
|
782
|
-
const [parentInstance, setParentInstance] = react.useState(null);
|
|
783
|
-
const [suggestions, setSuggestions] = react.useState([]);
|
|
784
|
-
const [suggestionsLoading, setSuggestionsLoading] = react.useState(false);
|
|
785
|
-
const [lastAppliedSuggestion, setLastAppliedSuggestion] = react.useState(void 0);
|
|
786
|
-
const [suggestionsCache, setSuggestionsCache] = react.useState(/* @__PURE__ */ new Map());
|
|
787
|
-
react.useEffect(() => {
|
|
788
|
-
const handleKey = (e) => {
|
|
789
|
-
if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "e") {
|
|
790
|
-
e.preventDefault();
|
|
791
|
-
setEnabled((p) => !p);
|
|
792
|
-
}
|
|
793
|
-
};
|
|
794
|
-
window.addEventListener("keydown", handleKey);
|
|
795
|
-
return () => window.removeEventListener("keydown", handleKey);
|
|
796
|
-
}, []);
|
|
797
|
-
react.useEffect(() => {
|
|
798
|
-
return;
|
|
799
|
-
}, []);
|
|
800
|
-
const restoreSession = react.useCallback(async (session) => {
|
|
801
|
-
const sourceLocation = session.sourceLocation;
|
|
802
|
-
setSelectedSource(sourceLocation);
|
|
803
|
-
setEditHistory(session.editHistory);
|
|
804
|
-
if (sourceLocation.debugStack) {
|
|
805
|
-
const resolved = await resolveSourceLocation(sourceLocation);
|
|
806
|
-
if (resolved) {
|
|
807
|
-
setSelectedSource(resolved);
|
|
808
|
-
}
|
|
809
|
-
}
|
|
810
|
-
}, []);
|
|
811
|
-
const handleClearSession = react.useCallback(() => {
|
|
812
|
-
if (selectedSource) {
|
|
813
|
-
AIEditorStorage.deleteSession(
|
|
814
|
-
selectedSource.filePath,
|
|
815
|
-
selectedSource.componentName
|
|
816
|
-
);
|
|
817
|
-
setHasActiveSession(false);
|
|
818
|
-
setSelectedSource(null);
|
|
819
|
-
setEditHistory([]);
|
|
820
|
-
}
|
|
821
|
-
}, [selectedSource]);
|
|
822
|
-
const submitEdit = react.useCallback(
|
|
823
|
-
async (suggestion) => {
|
|
824
|
-
if (!selectedSource)
|
|
825
|
-
return { success: false, error: "No element selected" };
|
|
826
|
-
const editId = Date.now().toString(36) + Math.random().toString(36).substring(2);
|
|
827
|
-
const pendingEdit = {
|
|
828
|
-
id: editId,
|
|
829
|
-
suggestion,
|
|
830
|
-
success: false,
|
|
831
|
-
pending: true,
|
|
832
|
-
timestamp: Date.now()
|
|
833
|
-
};
|
|
834
|
-
setEditHistory((prev) => [...prev, pendingEdit]);
|
|
835
|
-
setIsLoading(true);
|
|
836
|
-
try {
|
|
837
|
-
const res = await fetch("/api/ai-editor/edit", {
|
|
838
|
-
method: "POST",
|
|
839
|
-
headers: { "Content-Type": "application/json" },
|
|
840
|
-
body: JSON.stringify({
|
|
841
|
-
filePath: selectedSource.filePath,
|
|
842
|
-
lineNumber: selectedSource.lineNumber,
|
|
843
|
-
componentName: selectedSource.componentName,
|
|
844
|
-
suggestion,
|
|
845
|
-
// NEW: Pass element context for precise matching
|
|
846
|
-
elementContext: selectedSource.elementContext,
|
|
847
|
-
// Pass debugStack for server-side source map resolution
|
|
848
|
-
debugStack: selectedSource.debugStack,
|
|
849
|
-
// Pass edit history for context
|
|
850
|
-
editHistory: editHistory.map((item) => ({
|
|
851
|
-
suggestion: item.suggestion,
|
|
852
|
-
success: item.success
|
|
853
|
-
})),
|
|
854
|
-
// Pass parent instance if available
|
|
855
|
-
parentInstance
|
|
856
|
-
})
|
|
857
|
-
});
|
|
858
|
-
const result = await res.json();
|
|
859
|
-
const completedEdit = {
|
|
860
|
-
id: editId,
|
|
861
|
-
suggestion,
|
|
862
|
-
success: result.success,
|
|
863
|
-
pending: false,
|
|
864
|
-
error: result.error,
|
|
865
|
-
timestamp: Date.now(),
|
|
866
|
-
fileSnapshot: result.fileSnapshot,
|
|
867
|
-
editedFilePath: result.editedFile,
|
|
868
|
-
// Track which file was actually edited
|
|
869
|
-
generatedCode: result.generatedCode,
|
|
870
|
-
modifiedLines: result.modifiedLines
|
|
871
|
-
};
|
|
872
|
-
setEditHistory(
|
|
873
|
-
(prev) => prev.map((item) => item.id === editId ? completedEdit : item)
|
|
874
|
-
);
|
|
875
|
-
if (ENABLE_SESSION_PERSISTENCE && selectedSource && result.fileSnapshot) ;
|
|
876
|
-
return result;
|
|
877
|
-
} catch (err) {
|
|
878
|
-
const error = String(err);
|
|
879
|
-
setEditHistory(
|
|
880
|
-
(prev) => prev.map(
|
|
881
|
-
(item) => item.id === editId ? { ...item, success: false, pending: false, error } : item
|
|
882
|
-
)
|
|
883
|
-
);
|
|
884
|
-
return { success: false, error };
|
|
885
|
-
} finally {
|
|
886
|
-
setIsLoading(false);
|
|
887
|
-
}
|
|
888
|
-
},
|
|
889
|
-
[selectedSource, editHistory, parentInstance]
|
|
890
|
-
);
|
|
891
|
-
const fetchSuggestions = react.useCallback(
|
|
892
|
-
async (source, history, lastEdit, excludedSuggestions) => {
|
|
893
|
-
var _a, _b, _c, _d;
|
|
894
|
-
const CACHE_TTL = 3e4;
|
|
895
|
-
const cacheKey = `${source.componentName}:${((_a = source.elementContext) == null ? void 0 : _a.tagName) || "div"}:${lastEdit || "initial"}`;
|
|
896
|
-
const cached = !(excludedSuggestions == null ? void 0 : excludedSuggestions.length) ? suggestionsCache.get(cacheKey) : null;
|
|
897
|
-
if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
|
|
898
|
-
setSuggestions(cached.suggestions);
|
|
899
|
-
return;
|
|
900
|
-
}
|
|
901
|
-
setSuggestionsLoading(true);
|
|
902
|
-
try {
|
|
903
|
-
const params = new URLSearchParams({
|
|
904
|
-
componentName: source.componentName
|
|
905
|
-
});
|
|
906
|
-
if ((_b = source.elementContext) == null ? void 0 : _b.tagName) {
|
|
907
|
-
params.append("elementTag", source.elementContext.tagName);
|
|
908
|
-
}
|
|
909
|
-
if ((_c = source.elementContext) == null ? void 0 : _c.className) {
|
|
910
|
-
params.append("className", source.elementContext.className);
|
|
911
|
-
}
|
|
912
|
-
if ((_d = source.elementContext) == null ? void 0 : _d.textContent) {
|
|
913
|
-
params.append("textContent", source.elementContext.textContent);
|
|
914
|
-
}
|
|
915
|
-
if (lastEdit) {
|
|
916
|
-
params.append("lastSuggestion", lastEdit);
|
|
917
|
-
}
|
|
918
|
-
if (history.length > 0) {
|
|
919
|
-
params.append(
|
|
920
|
-
"editHistory",
|
|
921
|
-
JSON.stringify(
|
|
922
|
-
history.slice(-3).map((h) => ({ suggestion: h.suggestion, success: h.success }))
|
|
923
|
-
)
|
|
924
|
-
);
|
|
925
|
-
}
|
|
926
|
-
if (excludedSuggestions && excludedSuggestions.length > 0) {
|
|
927
|
-
params.append("excludedSuggestions", JSON.stringify(excludedSuggestions));
|
|
928
|
-
}
|
|
929
|
-
const response = await fetch(`/api/ai-editor/suggestions?${params}`);
|
|
930
|
-
const data = await response.json();
|
|
931
|
-
if (data.success) {
|
|
932
|
-
setSuggestions(data.suggestions);
|
|
933
|
-
setSuggestionsCache((prev) => {
|
|
934
|
-
const newCache = new Map(prev);
|
|
935
|
-
newCache.set(cacheKey, {
|
|
936
|
-
suggestions: data.suggestions,
|
|
937
|
-
timestamp: Date.now()
|
|
938
|
-
});
|
|
939
|
-
return newCache;
|
|
940
|
-
});
|
|
941
|
-
} else {
|
|
942
|
-
setSuggestions([]);
|
|
943
|
-
}
|
|
944
|
-
} catch (error) {
|
|
945
|
-
setSuggestions([]);
|
|
946
|
-
} finally {
|
|
947
|
-
setSuggestionsLoading(false);
|
|
948
|
-
}
|
|
949
|
-
},
|
|
950
|
-
[suggestionsCache, setSuggestions, setSuggestionsLoading, setSuggestionsCache]
|
|
951
|
-
);
|
|
952
|
-
const handleSelect = react.useCallback(
|
|
953
|
-
(element, source) => {
|
|
954
|
-
setSelectedDOMElement(element);
|
|
955
|
-
setSelectedSource(source);
|
|
956
|
-
setEditHistory([]);
|
|
957
|
-
setParentInstance(null);
|
|
958
|
-
resolveSourceLocation(source).then((resolved) => {
|
|
959
|
-
if (resolved) {
|
|
960
|
-
setSelectedSource((prev) => prev === source ? resolved : prev);
|
|
961
|
-
}
|
|
962
|
-
});
|
|
963
|
-
},
|
|
964
|
-
[setSelectedDOMElement, setSelectedSource, setParentInstance]
|
|
965
|
-
);
|
|
966
|
-
if (process.env.NODE_ENV !== "development") {
|
|
967
|
-
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
|
|
968
|
-
}
|
|
969
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
970
|
-
EditorContext.Provider,
|
|
971
|
-
{
|
|
972
|
-
value: {
|
|
973
|
-
isEnabled,
|
|
974
|
-
setEnabled,
|
|
975
|
-
selectedSource,
|
|
976
|
-
setSelectedSource,
|
|
977
|
-
selectedDOMElement,
|
|
978
|
-
isLoading,
|
|
979
|
-
setIsLoading,
|
|
980
|
-
editHistory,
|
|
981
|
-
setEditHistory,
|
|
982
|
-
submitEdit,
|
|
983
|
-
suggestions,
|
|
984
|
-
suggestionsLoading,
|
|
985
|
-
lastAppliedSuggestion,
|
|
986
|
-
setLastAppliedSuggestion,
|
|
987
|
-
fetchSuggestions
|
|
988
|
-
},
|
|
989
|
-
children: [
|
|
990
|
-
children,
|
|
991
|
-
isEnabled && /* @__PURE__ */ jsxRuntime.jsx(
|
|
992
|
-
EditorOverlay,
|
|
993
|
-
{
|
|
994
|
-
theme,
|
|
995
|
-
onSelect: handleSelect,
|
|
996
|
-
showStaleWarning,
|
|
997
|
-
staleSession,
|
|
998
|
-
hasActiveSession,
|
|
999
|
-
setShowStaleWarning,
|
|
1000
|
-
setStaleSession,
|
|
1001
|
-
setHasActiveSession,
|
|
1002
|
-
restoreSession,
|
|
1003
|
-
handleClearSession,
|
|
1004
|
-
parentInstance,
|
|
1005
|
-
setParentInstance
|
|
1006
|
-
}
|
|
1007
|
-
)
|
|
1008
|
-
]
|
|
1009
|
-
}
|
|
1010
|
-
);
|
|
1011
|
-
}
|
|
1012
|
-
function EditorOverlay({
|
|
1013
|
-
theme,
|
|
1014
|
-
onSelect,
|
|
1015
|
-
showStaleWarning,
|
|
1016
|
-
staleSession,
|
|
1017
|
-
hasActiveSession,
|
|
1018
|
-
setShowStaleWarning,
|
|
1019
|
-
setStaleSession,
|
|
1020
|
-
setHasActiveSession,
|
|
1021
|
-
restoreSession,
|
|
1022
|
-
handleClearSession,
|
|
1023
|
-
parentInstance,
|
|
1024
|
-
setParentInstance
|
|
1025
|
-
}) {
|
|
1026
|
-
var _a;
|
|
1027
|
-
const {
|
|
1028
|
-
selectedSource,
|
|
1029
|
-
setSelectedSource,
|
|
1030
|
-
submitEdit,
|
|
1031
|
-
isLoading,
|
|
1032
|
-
setIsLoading,
|
|
1033
|
-
setEnabled,
|
|
1034
|
-
selectedDOMElement,
|
|
1035
|
-
editHistory,
|
|
1036
|
-
setEditHistory,
|
|
1037
|
-
suggestions,
|
|
1038
|
-
suggestionsLoading,
|
|
1039
|
-
lastAppliedSuggestion,
|
|
1040
|
-
setLastAppliedSuggestion,
|
|
1041
|
-
fetchSuggestions
|
|
1042
|
-
} = useAIEditor();
|
|
1043
|
-
const [hoveredSource, setHoveredSource] = react.useState(
|
|
1044
|
-
null
|
|
1045
|
-
);
|
|
1046
|
-
const [hoveredElement, setHoveredElement] = react.useState(null);
|
|
1047
|
-
const [hoveredRect, setHoveredRect] = react.useState(null);
|
|
1048
|
-
const [mousePos, setMousePos] = react.useState({ x: 0, y: 0 });
|
|
1049
|
-
const [isResolvingSource, setIsResolvingSource] = react.useState(false);
|
|
1050
|
-
const [suggestion, setSuggestion] = react.useState("");
|
|
1051
|
-
const [result, setResult] = react.useState(null);
|
|
1052
|
-
const [code, setCode] = react.useState("");
|
|
1053
|
-
const [codeLineStart, setCodeLineStart] = react.useState(1);
|
|
1054
|
-
const [targetStartLine, setTargetStartLine] = react.useState(null);
|
|
1055
|
-
const [targetEndLine, setTargetEndLine] = react.useState(null);
|
|
1056
|
-
const [absolutePath, setAbsolutePath] = react.useState(null);
|
|
1057
|
-
const [parsedComponentName, setParsedComponentName] = react.useState(
|
|
1058
|
-
null
|
|
1059
|
-
);
|
|
1060
|
-
const [isSourcePreviewExpanded, setIsSourcePreviewExpanded] = react.useState(false);
|
|
1061
|
-
const [isParentPreviewExpanded, setIsParentPreviewExpanded] = react.useState(false);
|
|
1062
|
-
const [isEditHistoryExpanded, setIsEditHistoryExpanded] = react.useState(true);
|
|
1063
|
-
const isDark = theme === "dark";
|
|
1064
|
-
const refreshCodePreview = react.useCallback(async (source, options = {}) => {
|
|
1065
|
-
const params = buildReadQueryParams(source, options.includeParent ?? true);
|
|
1066
|
-
try {
|
|
1067
|
-
const url = `/api/ai-editor/read?` + new URLSearchParams(params);
|
|
1068
|
-
const response = await fetch(url);
|
|
1069
|
-
const data = await response.json();
|
|
1070
|
-
if (data.success) {
|
|
1071
|
-
setCode(data.content);
|
|
1072
|
-
setCodeLineStart(data.lineStart || 1);
|
|
1073
|
-
setTargetStartLine(data.targetStartLine || null);
|
|
1074
|
-
setTargetEndLine(data.targetEndLine || null);
|
|
1075
|
-
setParentInstance(data.parentInstance || null);
|
|
1076
|
-
if (data.componentName) {
|
|
1077
|
-
setParsedComponentName(data.componentName);
|
|
1078
|
-
}
|
|
1079
|
-
}
|
|
1080
|
-
} catch (error) {
|
|
1081
|
-
console.error("Error refreshing code preview:", error);
|
|
1082
|
-
}
|
|
1083
|
-
}, []);
|
|
1084
|
-
react.useEffect(() => {
|
|
1085
|
-
if (selectedSource) {
|
|
1086
|
-
refreshCodePreview(selectedSource);
|
|
1087
|
-
fetchSuggestions(selectedSource, []);
|
|
1088
|
-
fetch(
|
|
1089
|
-
`/api/ai-editor/absolute-path?` + new URLSearchParams({ path: selectedSource.filePath })
|
|
1090
|
-
).then((r) => r.json()).then((d) => d.success && setAbsolutePath(d.absolutePath)).catch(() => setAbsolutePath(null));
|
|
1091
|
-
} else {
|
|
1092
|
-
setAbsolutePath(null);
|
|
1093
|
-
setParsedComponentName(null);
|
|
1094
|
-
}
|
|
1095
|
-
}, [selectedSource, refreshCodePreview]);
|
|
1096
|
-
react.useEffect(() => {
|
|
1097
|
-
let lastEl = null;
|
|
1098
|
-
let raf;
|
|
1099
|
-
const onMove = (e) => {
|
|
1100
|
-
setMousePos({ x: e.clientX, y: e.clientY });
|
|
1101
|
-
if (selectedSource) return;
|
|
1102
|
-
cancelAnimationFrame(raf);
|
|
1103
|
-
raf = requestAnimationFrame(() => {
|
|
1104
|
-
const el = document.elementFromPoint(e.clientX, e.clientY);
|
|
1105
|
-
if (!el || el.closest(".ai-editor-ui") || el === lastEl) return;
|
|
1106
|
-
lastEl = el;
|
|
1107
|
-
const source = getSourceFromElement(el);
|
|
1108
|
-
if (source) {
|
|
1109
|
-
setHoveredElement(el);
|
|
1110
|
-
setHoveredRect(el.getBoundingClientRect());
|
|
1111
|
-
const isCompiledPath = source.filePath.includes(".next/") || source.filePath.includes("/chunks/") || source.filePath.startsWith("file://") || source.filePath.endsWith(".js") && (source.filePath.includes("/server/") || source.filePath.includes("/static/"));
|
|
1112
|
-
if (isCompiledPath && source.debugStack) {
|
|
1113
|
-
setIsResolvingSource(true);
|
|
1114
|
-
resolveSourceLocation(source).then((resolved) => {
|
|
1115
|
-
setIsResolvingSource(false);
|
|
1116
|
-
if (resolved) {
|
|
1117
|
-
console.log("Resolved source location:", resolved);
|
|
1118
|
-
setHoveredSource(resolved);
|
|
1119
|
-
} else {
|
|
1120
|
-
console.warn(
|
|
1121
|
-
"Failed to resolve source location for:",
|
|
1122
|
-
source
|
|
1123
|
-
);
|
|
1124
|
-
setHoveredSource(source);
|
|
1125
|
-
}
|
|
1126
|
-
}).catch((err) => {
|
|
1127
|
-
console.error("Error resolving source location:", err);
|
|
1128
|
-
setIsResolvingSource(false);
|
|
1129
|
-
setHoveredSource(source);
|
|
1130
|
-
});
|
|
1131
|
-
} else if (isCompiledPath && !source.debugStack) {
|
|
1132
|
-
console.warn("Compiled path but no debugStack:", source);
|
|
1133
|
-
setIsResolvingSource(false);
|
|
1134
|
-
setHoveredSource(source);
|
|
1135
|
-
} else {
|
|
1136
|
-
setIsResolvingSource(false);
|
|
1137
|
-
setHoveredSource(source);
|
|
1138
|
-
}
|
|
1139
|
-
} else {
|
|
1140
|
-
setHoveredSource(null);
|
|
1141
|
-
setHoveredElement(null);
|
|
1142
|
-
setHoveredRect(null);
|
|
1143
|
-
setIsResolvingSource(false);
|
|
1144
|
-
}
|
|
1145
|
-
});
|
|
1146
|
-
};
|
|
1147
|
-
const onClick = (e) => {
|
|
1148
|
-
if (e.target.closest(".ai-editor-ui")) return;
|
|
1149
|
-
if (hoveredSource && hoveredElement) {
|
|
1150
|
-
e.preventDefault();
|
|
1151
|
-
e.stopPropagation();
|
|
1152
|
-
onSelect(hoveredElement, hoveredSource);
|
|
1153
|
-
setSuggestion("");
|
|
1154
|
-
setResult(null);
|
|
1155
|
-
}
|
|
1156
|
-
};
|
|
1157
|
-
document.addEventListener("mousemove", onMove, { passive: true });
|
|
1158
|
-
document.addEventListener("click", onClick, true);
|
|
1159
|
-
return () => {
|
|
1160
|
-
document.removeEventListener("mousemove", onMove);
|
|
1161
|
-
document.removeEventListener("click", onClick, true);
|
|
1162
|
-
cancelAnimationFrame(raf);
|
|
1163
|
-
};
|
|
1164
|
-
}, [hoveredSource, hoveredElement, selectedSource, onSelect]);
|
|
1165
|
-
const handleSubmit = async () => {
|
|
1166
|
-
if (!suggestion.trim()) return;
|
|
1167
|
-
const appliedSuggestion = suggestion;
|
|
1168
|
-
const res = await submitEdit(suggestion);
|
|
1169
|
-
setResult(res);
|
|
1170
|
-
if (res.success) {
|
|
1171
|
-
setSuggestion("");
|
|
1172
|
-
setLastAppliedSuggestion(appliedSuggestion);
|
|
1173
|
-
if (selectedSource) {
|
|
1174
|
-
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
1175
|
-
await refreshCodePreview(selectedSource);
|
|
1176
|
-
console.log("[AI Editor] Fetching suggestions after edit:", appliedSuggestion);
|
|
1177
|
-
fetchSuggestions(selectedSource, editHistory, appliedSuggestion);
|
|
1178
|
-
}
|
|
1179
|
-
setTimeout(() => setResult(null), 3e3);
|
|
1180
|
-
}
|
|
1181
|
-
};
|
|
1182
|
-
const handleUndo = async () => {
|
|
1183
|
-
if (editHistory.length === 0 || !selectedSource) return;
|
|
1184
|
-
const lastSuccessfulEdit = [...editHistory].reverse().find((edit) => edit.success && edit.fileSnapshot);
|
|
1185
|
-
if (!lastSuccessfulEdit) {
|
|
1186
|
-
console.warn("No successful edit with snapshot found to undo");
|
|
1187
|
-
return;
|
|
1188
|
-
}
|
|
1189
|
-
const fileToRestore = lastSuccessfulEdit.editedFilePath || selectedSource.filePath;
|
|
1190
|
-
console.log(`[Undo] Restoring file: ${fileToRestore}`);
|
|
1191
|
-
setIsLoading(true);
|
|
1192
|
-
try {
|
|
1193
|
-
const response = await fetch("/api/ai-editor/undo", {
|
|
1194
|
-
method: "POST",
|
|
1195
|
-
headers: { "Content-Type": "application/json" },
|
|
1196
|
-
body: JSON.stringify({
|
|
1197
|
-
filePath: fileToRestore,
|
|
1198
|
-
content: lastSuccessfulEdit.fileSnapshot
|
|
1199
|
-
})
|
|
1200
|
-
});
|
|
1201
|
-
const result2 = await response.json();
|
|
1202
|
-
if (!result2.success) {
|
|
1203
|
-
throw new Error(result2.error || "Undo failed");
|
|
1204
|
-
}
|
|
1205
|
-
setEditHistory((prev) => {
|
|
1206
|
-
const lastIndex = prev.lastIndexOf(lastSuccessfulEdit);
|
|
1207
|
-
return prev.filter((_, idx) => idx !== lastIndex);
|
|
1208
|
-
});
|
|
1209
|
-
await refreshCodePreview(selectedSource);
|
|
1210
|
-
setResult({ success: true, error: void 0 });
|
|
1211
|
-
setTimeout(() => setResult(null), 3e3);
|
|
1212
|
-
} catch (error) {
|
|
1213
|
-
console.error("Undo error:", error);
|
|
1214
|
-
setResult({ success: false, error: String(error) });
|
|
1215
|
-
} finally {
|
|
1216
|
-
setIsLoading(false);
|
|
1217
|
-
}
|
|
1218
|
-
};
|
|
1219
|
-
const handleRetry = async (editIndex) => {
|
|
1220
|
-
const editToRetry = editHistory[editIndex];
|
|
1221
|
-
if (!editToRetry) return;
|
|
1222
|
-
const res = await submitEdit(editToRetry.suggestion);
|
|
1223
|
-
if (res.success && selectedSource) {
|
|
1224
|
-
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
1225
|
-
await refreshCodePreview(selectedSource, { includeParent: false });
|
|
1226
|
-
}
|
|
1227
|
-
};
|
|
1228
|
-
const handleUndoAndRetry = async () => {
|
|
1229
|
-
if (editHistory.length === 0 || !selectedSource) return;
|
|
1230
|
-
const lastSuccessfulEdit = [...editHistory].reverse().find((edit) => edit.success && edit.fileSnapshot);
|
|
1231
|
-
if (!lastSuccessfulEdit) {
|
|
1232
|
-
console.warn("No successful edit with snapshot found to undo and retry");
|
|
1233
|
-
return;
|
|
1234
|
-
}
|
|
1235
|
-
const fileToRestore = lastSuccessfulEdit.editedFilePath || selectedSource.filePath;
|
|
1236
|
-
console.log(`[Undo & Retry] Restoring file: ${fileToRestore}`);
|
|
1237
|
-
setIsLoading(true);
|
|
1238
|
-
try {
|
|
1239
|
-
const undoResponse = await fetch("/api/ai-editor/undo", {
|
|
1240
|
-
method: "POST",
|
|
1241
|
-
headers: { "Content-Type": "application/json" },
|
|
1242
|
-
body: JSON.stringify({
|
|
1243
|
-
filePath: fileToRestore,
|
|
1244
|
-
content: lastSuccessfulEdit.fileSnapshot
|
|
1245
|
-
})
|
|
1246
|
-
});
|
|
1247
|
-
const undoResult = await undoResponse.json();
|
|
1248
|
-
if (!undoResult.success) {
|
|
1249
|
-
throw new Error(undoResult.error || "Undo failed");
|
|
1250
|
-
}
|
|
1251
|
-
setEditHistory((prev) => {
|
|
1252
|
-
const lastIndex = prev.lastIndexOf(lastSuccessfulEdit);
|
|
1253
|
-
return prev.filter((_, idx) => idx !== lastIndex);
|
|
1254
|
-
});
|
|
1255
|
-
await refreshCodePreview(selectedSource);
|
|
1256
|
-
setIsLoading(true);
|
|
1257
|
-
const retryResult = await submitEdit(lastSuccessfulEdit.suggestion);
|
|
1258
|
-
if (retryResult.success && selectedSource) {
|
|
1259
|
-
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
1260
|
-
await refreshCodePreview(selectedSource);
|
|
1261
|
-
}
|
|
1262
|
-
if (retryResult.success) {
|
|
1263
|
-
setResult({ success: true, error: void 0 });
|
|
1264
|
-
} else {
|
|
1265
|
-
setResult({ success: false, error: retryResult.error });
|
|
1266
|
-
}
|
|
1267
|
-
setTimeout(() => setResult(null), 3e3);
|
|
1268
|
-
} catch (error) {
|
|
1269
|
-
console.error("Undo and retry error:", error);
|
|
1270
|
-
setResult({ success: false, error: String(error) });
|
|
1271
|
-
} finally {
|
|
1272
|
-
setIsLoading(false);
|
|
1273
|
-
}
|
|
1274
|
-
};
|
|
1275
|
-
const handleDone = () => {
|
|
1276
|
-
window.location.reload();
|
|
1277
|
-
};
|
|
1278
|
-
const c = {
|
|
1279
|
-
bg: isDark ? "#0d0d14" : "#fff",
|
|
1280
|
-
bgAlt: isDark ? "#16162a" : "#f5f5f5",
|
|
1281
|
-
text: isDark ? "#e4e4e7" : "#18181b",
|
|
1282
|
-
muted: isDark ? "#71717a" : "#a1a1aa",
|
|
1283
|
-
accent: "#818cf8",
|
|
1284
|
-
border: isDark ? "#27273f" : "#e4e4e7",
|
|
1285
|
-
success: "#34d399",
|
|
1286
|
-
error: "#f87171"
|
|
1287
|
-
};
|
|
1288
|
-
const elCtx = selectedSource == null ? void 0 : selectedSource.elementContext;
|
|
1289
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1290
|
-
"div",
|
|
1291
|
-
{
|
|
1292
|
-
className: "ai-editor-ui",
|
|
1293
|
-
style: { fontFamily: "system-ui, sans-serif" },
|
|
1294
|
-
children: [
|
|
1295
|
-
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
1296
|
-
@keyframes ai-editor-spin {
|
|
1297
|
-
from { transform: rotate(0deg); }
|
|
1298
|
-
to { transform: rotate(360deg); }
|
|
1299
|
-
}
|
|
1300
|
-
` }),
|
|
1301
|
-
hoveredRect && !selectedSource && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1302
|
-
"div",
|
|
1303
|
-
{
|
|
1304
|
-
style: {
|
|
1305
|
-
position: "fixed",
|
|
1306
|
-
left: hoveredRect.left - 2,
|
|
1307
|
-
top: hoveredRect.top - 2,
|
|
1308
|
-
width: hoveredRect.width + 4,
|
|
1309
|
-
height: hoveredRect.height + 4,
|
|
1310
|
-
border: `2px solid ${c.accent}`,
|
|
1311
|
-
borderRadius: 6,
|
|
1312
|
-
background: `${c.accent}15`,
|
|
1313
|
-
pointerEvents: "none",
|
|
1314
|
-
zIndex: 99998
|
|
1315
|
-
}
|
|
1316
|
-
}
|
|
1317
|
-
),
|
|
1318
|
-
hoveredSource && !selectedSource && !isResolvingSource && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1319
|
-
"div",
|
|
1320
|
-
{
|
|
1321
|
-
style: {
|
|
1322
|
-
position: "fixed",
|
|
1323
|
-
left: Math.min(mousePos.x + 14, window.innerWidth - 340),
|
|
1324
|
-
top: mousePos.y + 14,
|
|
1325
|
-
background: c.bg,
|
|
1326
|
-
color: c.text,
|
|
1327
|
-
border: `1px solid ${c.border}`,
|
|
1328
|
-
borderRadius: 10,
|
|
1329
|
-
padding: "12px 16px",
|
|
1330
|
-
fontSize: 12,
|
|
1331
|
-
fontFamily: "ui-monospace, monospace",
|
|
1332
|
-
zIndex: 99999,
|
|
1333
|
-
boxShadow: `0 8px 30px rgba(0,0,0,${isDark ? 0.5 : 0.15})`,
|
|
1334
|
-
maxWidth: 320,
|
|
1335
|
-
pointerEvents: "none"
|
|
1336
|
-
},
|
|
1337
|
-
children: [
|
|
1338
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1339
|
-
"div",
|
|
1340
|
-
{
|
|
1341
|
-
style: {
|
|
1342
|
-
fontWeight: 700,
|
|
1343
|
-
color: c.accent,
|
|
1344
|
-
marginBottom: 4,
|
|
1345
|
-
fontSize: 14
|
|
1346
|
-
},
|
|
1347
|
-
children: [
|
|
1348
|
-
"<",
|
|
1349
|
-
hoveredSource.componentName,
|
|
1350
|
-
" />"
|
|
1351
|
-
]
|
|
1352
|
-
}
|
|
1353
|
-
),
|
|
1354
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: c.muted, fontSize: 11 }, children: [
|
|
1355
|
-
hoveredSource.filePath,
|
|
1356
|
-
":",
|
|
1357
|
-
hoveredSource.lineNumber
|
|
1358
|
-
] }),
|
|
1359
|
-
((_a = hoveredSource.elementContext) == null ? void 0 : _a.textContent) && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1360
|
-
"div",
|
|
1361
|
-
{
|
|
1362
|
-
style: {
|
|
1363
|
-
color: c.muted,
|
|
1364
|
-
fontSize: 10,
|
|
1365
|
-
marginTop: 4,
|
|
1366
|
-
fontStyle: "italic"
|
|
1367
|
-
},
|
|
1368
|
-
children: [
|
|
1369
|
-
'"',
|
|
1370
|
-
hoveredSource.elementContext.textContent,
|
|
1371
|
-
'"'
|
|
1372
|
-
]
|
|
1373
|
-
}
|
|
1374
|
-
)
|
|
1375
|
-
]
|
|
1376
|
-
}
|
|
1377
|
-
),
|
|
1378
|
-
ENABLE_SESSION_PERSISTENCE,
|
|
1379
|
-
selectedSource && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1380
|
-
"div",
|
|
1381
|
-
{
|
|
1382
|
-
style: {
|
|
1383
|
-
position: "fixed",
|
|
1384
|
-
bottom: 20,
|
|
1385
|
-
right: 20,
|
|
1386
|
-
background: c.bg,
|
|
1387
|
-
color: c.text,
|
|
1388
|
-
borderRadius: 16,
|
|
1389
|
-
padding: 24,
|
|
1390
|
-
width: 560,
|
|
1391
|
-
maxWidth: "calc(100vw - 40px)",
|
|
1392
|
-
maxHeight: "calc(100vh - 40px)",
|
|
1393
|
-
overflowY: "auto",
|
|
1394
|
-
overflowX: "hidden",
|
|
1395
|
-
zIndex: 1e5,
|
|
1396
|
-
boxShadow: `0 24px 80px rgba(0,0,0,${isDark ? 0.6 : 0.25})`,
|
|
1397
|
-
border: `1px solid ${c.border}`
|
|
1398
|
-
},
|
|
1399
|
-
children: [
|
|
1400
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1401
|
-
"div",
|
|
1402
|
-
{
|
|
1403
|
-
style: {
|
|
1404
|
-
display: "flex",
|
|
1405
|
-
justifyContent: "space-between",
|
|
1406
|
-
marginBottom: 20
|
|
1407
|
-
},
|
|
1408
|
-
children: [
|
|
1409
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
1410
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1411
|
-
"div",
|
|
1412
|
-
{
|
|
1413
|
-
style: {
|
|
1414
|
-
fontSize: 11,
|
|
1415
|
-
textTransform: "uppercase",
|
|
1416
|
-
letterSpacing: 1,
|
|
1417
|
-
color: c.muted
|
|
1418
|
-
},
|
|
1419
|
-
children: "Editing"
|
|
1420
|
-
}
|
|
1421
|
-
),
|
|
1422
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 20, fontWeight: 700, color: c.accent }, children: [
|
|
1423
|
-
"<",
|
|
1424
|
-
parsedComponentName || selectedSource.componentName,
|
|
1425
|
-
" />"
|
|
1426
|
-
] }),
|
|
1427
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1428
|
-
"div",
|
|
1429
|
-
{
|
|
1430
|
-
style: {
|
|
1431
|
-
fontSize: 12,
|
|
1432
|
-
color: c.muted,
|
|
1433
|
-
fontFamily: "monospace",
|
|
1434
|
-
marginTop: 4
|
|
1435
|
-
},
|
|
1436
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1437
|
-
"a",
|
|
1438
|
-
{
|
|
1439
|
-
href: absolutePath ? `cursor://file/${absolutePath}:${selectedSource.lineNumber}` : `cursor://file/${selectedSource.filePath}:${selectedSource.lineNumber}`,
|
|
1440
|
-
onClick: (e) => {
|
|
1441
|
-
e.preventDefault();
|
|
1442
|
-
e.stopPropagation();
|
|
1443
|
-
const path = absolutePath || selectedSource.filePath;
|
|
1444
|
-
const cursorPath = path.startsWith("/") ? path : `/${path}`;
|
|
1445
|
-
window.location.href = `cursor://file${cursorPath}:${selectedSource.lineNumber}`;
|
|
1446
|
-
},
|
|
1447
|
-
style: {
|
|
1448
|
-
color: c.accent,
|
|
1449
|
-
textDecoration: "none",
|
|
1450
|
-
cursor: "pointer",
|
|
1451
|
-
borderBottom: `1px solid ${c.accent}40`
|
|
1452
|
-
},
|
|
1453
|
-
onMouseEnter: (e) => {
|
|
1454
|
-
e.currentTarget.style.borderBottomColor = c.accent;
|
|
1455
|
-
},
|
|
1456
|
-
onMouseLeave: (e) => {
|
|
1457
|
-
e.currentTarget.style.borderBottomColor = `${c.accent}40`;
|
|
1458
|
-
},
|
|
1459
|
-
children: [
|
|
1460
|
-
selectedSource.filePath,
|
|
1461
|
-
":",
|
|
1462
|
-
selectedSource.lineNumber
|
|
1463
|
-
]
|
|
1464
|
-
}
|
|
1465
|
-
)
|
|
1466
|
-
}
|
|
1467
|
-
),
|
|
1468
|
-
(elCtx == null ? void 0 : elCtx.textContent) && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1469
|
-
"div",
|
|
1470
|
-
{
|
|
1471
|
-
style: {
|
|
1472
|
-
fontSize: 11,
|
|
1473
|
-
color: c.muted,
|
|
1474
|
-
marginTop: 4,
|
|
1475
|
-
fontStyle: "italic"
|
|
1476
|
-
},
|
|
1477
|
-
children: [
|
|
1478
|
-
'Element text: "',
|
|
1479
|
-
elCtx.textContent,
|
|
1480
|
-
'"'
|
|
1481
|
-
]
|
|
1482
|
-
}
|
|
1483
|
-
)
|
|
1484
|
-
] }),
|
|
1485
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1486
|
-
"button",
|
|
1487
|
-
{
|
|
1488
|
-
onClick: () => setSelectedSource(null),
|
|
1489
|
-
style: {
|
|
1490
|
-
width: 36,
|
|
1491
|
-
height: 36,
|
|
1492
|
-
borderRadius: 10,
|
|
1493
|
-
border: "none",
|
|
1494
|
-
background: c.bgAlt,
|
|
1495
|
-
color: c.muted,
|
|
1496
|
-
fontSize: 20,
|
|
1497
|
-
cursor: "pointer"
|
|
1498
|
-
},
|
|
1499
|
-
children: "×"
|
|
1500
|
-
}
|
|
1501
|
-
)
|
|
1502
|
-
]
|
|
1503
|
-
}
|
|
1504
|
-
),
|
|
1505
|
-
code && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
|
|
1506
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1507
|
-
"button",
|
|
1508
|
-
{
|
|
1509
|
-
onClick: () => setIsSourcePreviewExpanded(!isSourcePreviewExpanded),
|
|
1510
|
-
style: {
|
|
1511
|
-
fontSize: 11,
|
|
1512
|
-
fontWeight: 600,
|
|
1513
|
-
marginBottom: 8,
|
|
1514
|
-
color: c.muted,
|
|
1515
|
-
textTransform: "uppercase",
|
|
1516
|
-
background: "transparent",
|
|
1517
|
-
border: "none",
|
|
1518
|
-
padding: 0,
|
|
1519
|
-
cursor: "pointer",
|
|
1520
|
-
display: "flex",
|
|
1521
|
-
alignItems: "center",
|
|
1522
|
-
gap: 6
|
|
1523
|
-
},
|
|
1524
|
-
children: [
|
|
1525
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: isSourcePreviewExpanded ? "▼" : "▶" }),
|
|
1526
|
-
"Source Preview"
|
|
1527
|
-
]
|
|
1528
|
-
}
|
|
1529
|
-
),
|
|
1530
|
-
isSourcePreviewExpanded && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1531
|
-
reactSyntaxHighlighter.Prism,
|
|
1532
|
-
{
|
|
1533
|
-
language: "tsx",
|
|
1534
|
-
style: isDark ? prism.vscDarkPlus : prism.vs,
|
|
1535
|
-
showLineNumbers: true,
|
|
1536
|
-
startingLineNumber: codeLineStart,
|
|
1537
|
-
customStyle: {
|
|
1538
|
-
background: c.bgAlt,
|
|
1539
|
-
borderRadius: 10,
|
|
1540
|
-
fontSize: 14,
|
|
1541
|
-
margin: 0,
|
|
1542
|
-
maxHeight: 180,
|
|
1543
|
-
overflowX: "auto",
|
|
1544
|
-
border: `1px solid ${c.border}`
|
|
1545
|
-
},
|
|
1546
|
-
lineNumberStyle: {
|
|
1547
|
-
minWidth: "2.5em",
|
|
1548
|
-
paddingRight: "1em",
|
|
1549
|
-
color: c.muted,
|
|
1550
|
-
textAlign: "right",
|
|
1551
|
-
userSelect: "none"
|
|
1552
|
-
},
|
|
1553
|
-
wrapLines: true,
|
|
1554
|
-
lineProps: (lineNumber) => {
|
|
1555
|
-
const isHighlighted = targetStartLine !== null && targetEndLine !== null && lineNumber >= targetStartLine && lineNumber <= targetEndLine;
|
|
1556
|
-
return {
|
|
1557
|
-
style: {
|
|
1558
|
-
backgroundColor: isHighlighted ? isDark ? "rgba(102, 126, 234, 0.15)" : "rgba(147, 197, 253, 0.3)" : "transparent"
|
|
1559
|
-
}
|
|
1560
|
-
};
|
|
1561
|
-
},
|
|
1562
|
-
children: code
|
|
1563
|
-
}
|
|
1564
|
-
)
|
|
1565
|
-
] }),
|
|
1566
|
-
parentInstance && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
|
|
1567
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1568
|
-
"button",
|
|
1569
|
-
{
|
|
1570
|
-
onClick: () => setIsParentPreviewExpanded(!isParentPreviewExpanded),
|
|
1571
|
-
style: {
|
|
1572
|
-
fontSize: 11,
|
|
1573
|
-
fontWeight: 600,
|
|
1574
|
-
marginBottom: 8,
|
|
1575
|
-
color: c.muted,
|
|
1576
|
-
textTransform: "uppercase",
|
|
1577
|
-
background: "transparent",
|
|
1578
|
-
border: "none",
|
|
1579
|
-
padding: 0,
|
|
1580
|
-
cursor: "pointer",
|
|
1581
|
-
display: "flex",
|
|
1582
|
-
alignItems: "center",
|
|
1583
|
-
gap: 6
|
|
1584
|
-
},
|
|
1585
|
-
children: [
|
|
1586
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: isParentPreviewExpanded ? "▼" : "▶" }),
|
|
1587
|
-
"Used In: ",
|
|
1588
|
-
parentInstance.componentName,
|
|
1589
|
-
" (",
|
|
1590
|
-
parentInstance.filePath,
|
|
1591
|
-
")"
|
|
1592
|
-
]
|
|
1593
|
-
}
|
|
1594
|
-
),
|
|
1595
|
-
isParentPreviewExpanded && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1596
|
-
reactSyntaxHighlighter.Prism,
|
|
1597
|
-
{
|
|
1598
|
-
language: "tsx",
|
|
1599
|
-
style: isDark ? prism.vscDarkPlus : prism.vs,
|
|
1600
|
-
showLineNumbers: true,
|
|
1601
|
-
startingLineNumber: parentInstance.lineStart,
|
|
1602
|
-
customStyle: {
|
|
1603
|
-
background: c.bgAlt,
|
|
1604
|
-
borderRadius: 10,
|
|
1605
|
-
fontSize: 14,
|
|
1606
|
-
margin: 0,
|
|
1607
|
-
maxHeight: 180,
|
|
1608
|
-
overflowX: "auto",
|
|
1609
|
-
border: `1px solid ${c.border}`
|
|
1610
|
-
},
|
|
1611
|
-
lineNumberStyle: {
|
|
1612
|
-
minWidth: "2.5em",
|
|
1613
|
-
paddingRight: "1em",
|
|
1614
|
-
color: c.muted,
|
|
1615
|
-
textAlign: "right",
|
|
1616
|
-
userSelect: "none"
|
|
1617
|
-
},
|
|
1618
|
-
wrapLines: true,
|
|
1619
|
-
lineProps: (lineNumber) => {
|
|
1620
|
-
const isUsageLine = lineNumber >= parentInstance.usageLineStart && lineNumber <= parentInstance.usageLineEnd;
|
|
1621
|
-
return {
|
|
1622
|
-
style: {
|
|
1623
|
-
backgroundColor: isUsageLine ? isDark ? "rgba(255, 165, 0, 0.15)" : "rgba(255, 165, 0, 0.2)" : "transparent"
|
|
1624
|
-
}
|
|
1625
|
-
};
|
|
1626
|
-
},
|
|
1627
|
-
children: parentInstance.content
|
|
1628
|
-
}
|
|
1629
|
-
)
|
|
1630
|
-
] }),
|
|
1631
|
-
editHistory.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
|
|
1632
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1633
|
-
"button",
|
|
1634
|
-
{
|
|
1635
|
-
onClick: () => setIsEditHistoryExpanded(!isEditHistoryExpanded),
|
|
1636
|
-
style: {
|
|
1637
|
-
fontSize: 11,
|
|
1638
|
-
fontWeight: 600,
|
|
1639
|
-
marginBottom: 8,
|
|
1640
|
-
color: c.muted,
|
|
1641
|
-
textTransform: "uppercase",
|
|
1642
|
-
background: "transparent",
|
|
1643
|
-
border: "none",
|
|
1644
|
-
padding: 0,
|
|
1645
|
-
cursor: "pointer",
|
|
1646
|
-
display: "flex",
|
|
1647
|
-
alignItems: "center",
|
|
1648
|
-
gap: 6
|
|
1649
|
-
},
|
|
1650
|
-
children: [
|
|
1651
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: isEditHistoryExpanded ? "▼" : "▶" }),
|
|
1652
|
-
"Edit History (",
|
|
1653
|
-
editHistory.length,
|
|
1654
|
-
")"
|
|
1655
|
-
]
|
|
1656
|
-
}
|
|
1657
|
-
),
|
|
1658
|
-
isEditHistoryExpanded && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1659
|
-
"div",
|
|
1660
|
-
{
|
|
1661
|
-
style: {
|
|
1662
|
-
background: c.bgAlt,
|
|
1663
|
-
borderRadius: 10,
|
|
1664
|
-
border: `1px solid ${c.border}`,
|
|
1665
|
-
maxHeight: 200,
|
|
1666
|
-
overflow: "auto"
|
|
1667
|
-
},
|
|
1668
|
-
children: editHistory.map((item, idx) => {
|
|
1669
|
-
const isLastEdit = idx === editHistory.length - 1;
|
|
1670
|
-
const hasSnapshot = item.success && item.fileSnapshot;
|
|
1671
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1672
|
-
"div",
|
|
1673
|
-
{
|
|
1674
|
-
style: {
|
|
1675
|
-
padding: "10px 14px",
|
|
1676
|
-
borderBottom: idx < editHistory.length - 1 ? `1px solid ${c.border}` : "none"
|
|
1677
|
-
},
|
|
1678
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1679
|
-
"div",
|
|
1680
|
-
{
|
|
1681
|
-
style: {
|
|
1682
|
-
display: "flex",
|
|
1683
|
-
alignItems: "flex-start",
|
|
1684
|
-
gap: 8
|
|
1685
|
-
},
|
|
1686
|
-
children: [
|
|
1687
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
|
|
1688
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1689
|
-
"div",
|
|
1690
|
-
{
|
|
1691
|
-
style: {
|
|
1692
|
-
display: "flex",
|
|
1693
|
-
alignItems: "center",
|
|
1694
|
-
gap: 8,
|
|
1695
|
-
marginBottom: 4
|
|
1696
|
-
},
|
|
1697
|
-
children: [
|
|
1698
|
-
item.pending ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1699
|
-
"div",
|
|
1700
|
-
{
|
|
1701
|
-
style: {
|
|
1702
|
-
width: 16,
|
|
1703
|
-
height: 16,
|
|
1704
|
-
border: "2px solid transparent",
|
|
1705
|
-
borderTopColor: c.accent,
|
|
1706
|
-
borderRadius: "50%",
|
|
1707
|
-
animation: "ai-editor-spin 0.8s linear infinite"
|
|
1708
|
-
}
|
|
1709
|
-
}
|
|
1710
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1711
|
-
"span",
|
|
1712
|
-
{
|
|
1713
|
-
style: {
|
|
1714
|
-
color: item.success ? c.success : c.error,
|
|
1715
|
-
fontSize: 16
|
|
1716
|
-
},
|
|
1717
|
-
children: item.success ? "✓" : "✗"
|
|
1718
|
-
}
|
|
1719
|
-
),
|
|
1720
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1721
|
-
"span",
|
|
1722
|
-
{
|
|
1723
|
-
style: {
|
|
1724
|
-
fontSize: 11,
|
|
1725
|
-
color: c.muted
|
|
1726
|
-
},
|
|
1727
|
-
children: [
|
|
1728
|
-
"Edit ",
|
|
1729
|
-
idx + 1
|
|
1730
|
-
]
|
|
1731
|
-
}
|
|
1732
|
-
)
|
|
1733
|
-
]
|
|
1734
|
-
}
|
|
1735
|
-
),
|
|
1736
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1737
|
-
"div",
|
|
1738
|
-
{
|
|
1739
|
-
style: {
|
|
1740
|
-
fontSize: 13,
|
|
1741
|
-
color: c.text,
|
|
1742
|
-
marginLeft: 24
|
|
1743
|
-
},
|
|
1744
|
-
children: item.suggestion
|
|
1745
|
-
}
|
|
1746
|
-
),
|
|
1747
|
-
item.error && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1748
|
-
"div",
|
|
1749
|
-
{
|
|
1750
|
-
style: {
|
|
1751
|
-
fontSize: 11,
|
|
1752
|
-
color: c.error,
|
|
1753
|
-
marginLeft: 24,
|
|
1754
|
-
marginTop: 4
|
|
1755
|
-
},
|
|
1756
|
-
children: item.error
|
|
1757
|
-
}
|
|
1758
|
-
)
|
|
1759
|
-
] }),
|
|
1760
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
|
|
1761
|
-
isLastEdit && hasSnapshot && !item.pending && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1762
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1763
|
-
"button",
|
|
1764
|
-
{
|
|
1765
|
-
onClick: handleUndo,
|
|
1766
|
-
disabled: isLoading,
|
|
1767
|
-
style: {
|
|
1768
|
-
padding: "4px 10px",
|
|
1769
|
-
fontSize: 11,
|
|
1770
|
-
borderRadius: 6,
|
|
1771
|
-
border: "none",
|
|
1772
|
-
background: isLoading ? c.muted : "#f59e0b",
|
|
1773
|
-
color: "#fff",
|
|
1774
|
-
fontWeight: 600,
|
|
1775
|
-
cursor: isLoading ? "wait" : "pointer",
|
|
1776
|
-
whiteSpace: "nowrap"
|
|
1777
|
-
},
|
|
1778
|
-
title: "Undo this edit",
|
|
1779
|
-
onMouseEnter: (e) => {
|
|
1780
|
-
if (!isLoading)
|
|
1781
|
-
e.currentTarget.style.background = "#d97706";
|
|
1782
|
-
},
|
|
1783
|
-
onMouseLeave: (e) => {
|
|
1784
|
-
if (!isLoading)
|
|
1785
|
-
e.currentTarget.style.background = "#f59e0b";
|
|
1786
|
-
},
|
|
1787
|
-
children: "↶ Undo"
|
|
1788
|
-
}
|
|
1789
|
-
),
|
|
1790
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1791
|
-
"button",
|
|
1792
|
-
{
|
|
1793
|
-
onClick: handleUndoAndRetry,
|
|
1794
|
-
disabled: isLoading,
|
|
1795
|
-
style: {
|
|
1796
|
-
padding: "4px 10px",
|
|
1797
|
-
fontSize: 11,
|
|
1798
|
-
borderRadius: 6,
|
|
1799
|
-
border: "none",
|
|
1800
|
-
background: isLoading ? c.muted : "#8b5cf6",
|
|
1801
|
-
color: "#fff",
|
|
1802
|
-
fontWeight: 600,
|
|
1803
|
-
cursor: isLoading ? "wait" : "pointer",
|
|
1804
|
-
whiteSpace: "nowrap"
|
|
1805
|
-
},
|
|
1806
|
-
title: "Undo and retry with AI",
|
|
1807
|
-
onMouseEnter: (e) => {
|
|
1808
|
-
if (!isLoading)
|
|
1809
|
-
e.currentTarget.style.background = "#7c3aed";
|
|
1810
|
-
},
|
|
1811
|
-
onMouseLeave: (e) => {
|
|
1812
|
-
if (!isLoading)
|
|
1813
|
-
e.currentTarget.style.background = "#8b5cf6";
|
|
1814
|
-
},
|
|
1815
|
-
children: "↶↻ Undo & Retry"
|
|
1816
|
-
}
|
|
1817
|
-
)
|
|
1818
|
-
] }),
|
|
1819
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1820
|
-
"button",
|
|
1821
|
-
{
|
|
1822
|
-
onClick: () => handleRetry(idx),
|
|
1823
|
-
disabled: isLoading || item.pending,
|
|
1824
|
-
style: {
|
|
1825
|
-
padding: "4px 10px",
|
|
1826
|
-
fontSize: 11,
|
|
1827
|
-
borderRadius: 6,
|
|
1828
|
-
border: "none",
|
|
1829
|
-
background: isLoading || item.pending ? c.muted : c.accent,
|
|
1830
|
-
color: "#fff",
|
|
1831
|
-
fontWeight: 600,
|
|
1832
|
-
cursor: isLoading || item.pending ? "wait" : "pointer",
|
|
1833
|
-
whiteSpace: "nowrap"
|
|
1834
|
-
},
|
|
1835
|
-
title: "Retry this edit",
|
|
1836
|
-
onMouseEnter: (e) => {
|
|
1837
|
-
if (!isLoading && !item.pending)
|
|
1838
|
-
e.currentTarget.style.background = "#6366f1";
|
|
1839
|
-
},
|
|
1840
|
-
onMouseLeave: (e) => {
|
|
1841
|
-
if (!isLoading && !item.pending)
|
|
1842
|
-
e.currentTarget.style.background = c.accent;
|
|
1843
|
-
},
|
|
1844
|
-
children: "↻ Retry"
|
|
1845
|
-
}
|
|
1846
|
-
)
|
|
1847
|
-
] })
|
|
1848
|
-
]
|
|
1849
|
-
}
|
|
1850
|
-
)
|
|
1851
|
-
},
|
|
1852
|
-
idx
|
|
1853
|
-
);
|
|
1854
|
-
})
|
|
1855
|
-
}
|
|
1856
|
-
)
|
|
1857
|
-
] }),
|
|
1858
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
|
|
1859
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1860
|
-
"div",
|
|
1861
|
-
{
|
|
1862
|
-
style: {
|
|
1863
|
-
fontSize: 11,
|
|
1864
|
-
fontWeight: 600,
|
|
1865
|
-
marginBottom: 8,
|
|
1866
|
-
color: c.muted,
|
|
1867
|
-
textTransform: "uppercase"
|
|
1868
|
-
},
|
|
1869
|
-
children: "Describe Changes"
|
|
1870
|
-
}
|
|
1871
|
-
),
|
|
1872
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1873
|
-
"textarea",
|
|
1874
|
-
{
|
|
1875
|
-
value: suggestion,
|
|
1876
|
-
onChange: (e) => setSuggestion(e.target.value),
|
|
1877
|
-
placeholder: `e.g., Make this ${(elCtx == null ? void 0 : elCtx.tagName) || "element"} blue with rounded corners...`,
|
|
1878
|
-
autoFocus: true,
|
|
1879
|
-
style: {
|
|
1880
|
-
width: "100%",
|
|
1881
|
-
height: 100,
|
|
1882
|
-
padding: 14,
|
|
1883
|
-
borderRadius: 10,
|
|
1884
|
-
border: `1px solid ${c.border}`,
|
|
1885
|
-
background: c.bgAlt,
|
|
1886
|
-
color: c.text,
|
|
1887
|
-
fontSize: 14,
|
|
1888
|
-
resize: "vertical",
|
|
1889
|
-
fontFamily: "inherit",
|
|
1890
|
-
boxSizing: "border-box"
|
|
1891
|
-
},
|
|
1892
|
-
onKeyDown: (e) => {
|
|
1893
|
-
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
|
|
1894
|
-
e.preventDefault();
|
|
1895
|
-
handleSubmit();
|
|
1896
|
-
}
|
|
1897
|
-
}
|
|
1898
|
-
}
|
|
1899
|
-
)
|
|
1900
|
-
] }),
|
|
1901
|
-
(suggestions.length > 0 || suggestionsLoading) && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
|
|
1902
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1903
|
-
"div",
|
|
1904
|
-
{
|
|
1905
|
-
style: {
|
|
1906
|
-
fontSize: 11,
|
|
1907
|
-
fontWeight: 600,
|
|
1908
|
-
marginBottom: 8,
|
|
1909
|
-
color: c.muted,
|
|
1910
|
-
textTransform: "uppercase",
|
|
1911
|
-
display: "flex",
|
|
1912
|
-
alignItems: "center",
|
|
1913
|
-
gap: 8
|
|
1914
|
-
},
|
|
1915
|
-
children: [
|
|
1916
|
-
"Quick Suggestions",
|
|
1917
|
-
suggestionsLoading ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1918
|
-
"div",
|
|
1919
|
-
{
|
|
1920
|
-
style: {
|
|
1921
|
-
width: 12,
|
|
1922
|
-
height: 12,
|
|
1923
|
-
border: "2px solid transparent",
|
|
1924
|
-
borderTopColor: c.accent,
|
|
1925
|
-
borderRadius: "50%",
|
|
1926
|
-
animation: "ai-editor-spin 0.8s linear infinite"
|
|
1927
|
-
}
|
|
1928
|
-
}
|
|
1929
|
-
) : suggestions.length > 0 && selectedSource && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1930
|
-
"button",
|
|
1931
|
-
{
|
|
1932
|
-
onClick: () => {
|
|
1933
|
-
console.log("[AI Editor] Refreshing suggestions, excluding:", suggestions);
|
|
1934
|
-
fetchSuggestions(selectedSource, editHistory, lastAppliedSuggestion, suggestions);
|
|
1935
|
-
},
|
|
1936
|
-
disabled: isLoading,
|
|
1937
|
-
style: {
|
|
1938
|
-
background: "transparent",
|
|
1939
|
-
border: "none",
|
|
1940
|
-
padding: 4,
|
|
1941
|
-
cursor: isLoading ? "wait" : "pointer",
|
|
1942
|
-
color: c.muted,
|
|
1943
|
-
fontSize: 14,
|
|
1944
|
-
display: "flex",
|
|
1945
|
-
alignItems: "center",
|
|
1946
|
-
transition: "all 0.15s ease"
|
|
1947
|
-
},
|
|
1948
|
-
onMouseEnter: (e) => {
|
|
1949
|
-
if (!isLoading) {
|
|
1950
|
-
e.currentTarget.style.color = c.accent;
|
|
1951
|
-
e.currentTarget.style.transform = "rotate(180deg)";
|
|
1952
|
-
}
|
|
1953
|
-
},
|
|
1954
|
-
onMouseLeave: (e) => {
|
|
1955
|
-
if (!isLoading) {
|
|
1956
|
-
e.currentTarget.style.color = c.muted;
|
|
1957
|
-
e.currentTarget.style.transform = "rotate(0deg)";
|
|
1958
|
-
}
|
|
1959
|
-
},
|
|
1960
|
-
title: "Get different suggestions",
|
|
1961
|
-
children: "↻"
|
|
1962
|
-
}
|
|
1963
|
-
)
|
|
1964
|
-
]
|
|
1965
|
-
}
|
|
1966
|
-
),
|
|
1967
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1968
|
-
"div",
|
|
1969
|
-
{
|
|
1970
|
-
style: {
|
|
1971
|
-
display: "flex",
|
|
1972
|
-
flexWrap: "wrap",
|
|
1973
|
-
gap: 8
|
|
1974
|
-
},
|
|
1975
|
-
children: suggestionsLoading ? (
|
|
1976
|
-
// Loading skeletons
|
|
1977
|
-
Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1978
|
-
"div",
|
|
1979
|
-
{
|
|
1980
|
-
style: {
|
|
1981
|
-
padding: "8px 14px",
|
|
1982
|
-
borderRadius: 8,
|
|
1983
|
-
background: c.bgAlt,
|
|
1984
|
-
border: `1px solid ${c.border}`,
|
|
1985
|
-
fontSize: 13,
|
|
1986
|
-
height: 34,
|
|
1987
|
-
width: Math.random() * 60 + 80,
|
|
1988
|
-
// Variable width
|
|
1989
|
-
opacity: 0.5
|
|
1990
|
-
}
|
|
1991
|
-
},
|
|
1992
|
-
idx
|
|
1993
|
-
))
|
|
1994
|
-
) : suggestions.map((suggestionText, idx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1995
|
-
"button",
|
|
1996
|
-
{
|
|
1997
|
-
onClick: (e) => {
|
|
1998
|
-
if (e.metaKey || e.ctrlKey) {
|
|
1999
|
-
setSuggestion(suggestionText);
|
|
2000
|
-
setTimeout(() => handleSubmit(), 50);
|
|
2001
|
-
} else {
|
|
2002
|
-
setSuggestion(suggestionText);
|
|
2003
|
-
}
|
|
2004
|
-
},
|
|
2005
|
-
disabled: isLoading,
|
|
2006
|
-
style: {
|
|
2007
|
-
padding: "8px 14px",
|
|
2008
|
-
borderRadius: 8,
|
|
2009
|
-
border: `1px solid ${c.border}`,
|
|
2010
|
-
background: c.bgAlt,
|
|
2011
|
-
color: c.text,
|
|
2012
|
-
fontSize: 13,
|
|
2013
|
-
cursor: isLoading ? "wait" : "pointer",
|
|
2014
|
-
transition: "all 0.15s ease",
|
|
2015
|
-
whiteSpace: "nowrap"
|
|
2016
|
-
},
|
|
2017
|
-
onMouseEnter: (e) => {
|
|
2018
|
-
if (!isLoading) {
|
|
2019
|
-
e.currentTarget.style.background = c.accent + "20";
|
|
2020
|
-
e.currentTarget.style.borderColor = c.accent;
|
|
2021
|
-
e.currentTarget.style.transform = "translateY(-1px)";
|
|
2022
|
-
}
|
|
2023
|
-
},
|
|
2024
|
-
onMouseLeave: (e) => {
|
|
2025
|
-
if (!isLoading) {
|
|
2026
|
-
e.currentTarget.style.background = c.bgAlt;
|
|
2027
|
-
e.currentTarget.style.borderColor = c.border;
|
|
2028
|
-
e.currentTarget.style.transform = "translateY(0)";
|
|
2029
|
-
}
|
|
2030
|
-
},
|
|
2031
|
-
title: "Click to use • Cmd+Click to apply immediately",
|
|
2032
|
-
children: suggestionText
|
|
2033
|
-
},
|
|
2034
|
-
idx
|
|
2035
|
-
))
|
|
2036
|
-
}
|
|
2037
|
-
)
|
|
2038
|
-
] }),
|
|
2039
|
-
result && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2040
|
-
"div",
|
|
2041
|
-
{
|
|
2042
|
-
style: {
|
|
2043
|
-
marginBottom: 20,
|
|
2044
|
-
padding: 14,
|
|
2045
|
-
borderRadius: 10,
|
|
2046
|
-
background: result.success ? `${c.success}15` : `${c.error}15`,
|
|
2047
|
-
color: result.success ? c.success : c.error,
|
|
2048
|
-
fontWeight: 500
|
|
2049
|
-
},
|
|
2050
|
-
children: result.success ? "✓ Applied!" : `✗ ${result.error}`
|
|
2051
|
-
}
|
|
2052
|
-
),
|
|
2053
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: [
|
|
2054
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2055
|
-
"button",
|
|
2056
|
-
{
|
|
2057
|
-
onClick: () => setSelectedSource(null),
|
|
2058
|
-
style: {
|
|
2059
|
-
flex: "1 1 auto",
|
|
2060
|
-
padding: "12px 20px",
|
|
2061
|
-
borderRadius: 10,
|
|
2062
|
-
border: `1px solid ${c.border}`,
|
|
2063
|
-
background: "transparent",
|
|
2064
|
-
color: c.text,
|
|
2065
|
-
cursor: "pointer"
|
|
2066
|
-
},
|
|
2067
|
-
children: "Cancel"
|
|
2068
|
-
}
|
|
2069
|
-
),
|
|
2070
|
-
ENABLE_SESSION_PERSISTENCE,
|
|
2071
|
-
editHistory.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2072
|
-
"button",
|
|
2073
|
-
{
|
|
2074
|
-
onClick: handleDone,
|
|
2075
|
-
style: {
|
|
2076
|
-
flex: "1 1 auto",
|
|
2077
|
-
padding: "12px 20px",
|
|
2078
|
-
borderRadius: 10,
|
|
2079
|
-
border: `1px solid ${c.success}`,
|
|
2080
|
-
background: "transparent",
|
|
2081
|
-
color: c.success,
|
|
2082
|
-
fontWeight: 600,
|
|
2083
|
-
cursor: "pointer"
|
|
2084
|
-
},
|
|
2085
|
-
children: "Finish & Reload"
|
|
2086
|
-
}
|
|
2087
|
-
),
|
|
2088
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2089
|
-
"button",
|
|
2090
|
-
{
|
|
2091
|
-
onClick: handleSubmit,
|
|
2092
|
-
disabled: isLoading || !suggestion.trim(),
|
|
2093
|
-
style: {
|
|
2094
|
-
flex: "2 1 auto",
|
|
2095
|
-
padding: "12px 20px",
|
|
2096
|
-
borderRadius: 10,
|
|
2097
|
-
border: "none",
|
|
2098
|
-
background: isLoading ? c.muted : c.accent,
|
|
2099
|
-
color: "#fff",
|
|
2100
|
-
fontWeight: 600,
|
|
2101
|
-
cursor: isLoading ? "wait" : "pointer",
|
|
2102
|
-
opacity: !suggestion.trim() ? 0.5 : 1
|
|
2103
|
-
},
|
|
2104
|
-
children: isLoading ? "Applying..." : "Apply Changes ⌘↵"
|
|
2105
|
-
}
|
|
2106
|
-
)
|
|
2107
|
-
] })
|
|
2108
|
-
]
|
|
2109
|
-
}
|
|
2110
|
-
),
|
|
2111
|
-
!selectedSource && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2112
|
-
"div",
|
|
2113
|
-
{
|
|
2114
|
-
style: {
|
|
2115
|
-
position: "fixed",
|
|
2116
|
-
bottom: 20,
|
|
2117
|
-
right: 20,
|
|
2118
|
-
background: c.bg,
|
|
2119
|
-
color: c.success,
|
|
2120
|
-
padding: "10px 16px",
|
|
2121
|
-
borderRadius: 20,
|
|
2122
|
-
fontSize: 13,
|
|
2123
|
-
fontWeight: 600,
|
|
2124
|
-
zIndex: 99997,
|
|
2125
|
-
display: "flex",
|
|
2126
|
-
alignItems: "center",
|
|
2127
|
-
gap: 8,
|
|
2128
|
-
border: `1px solid ${c.border}`,
|
|
2129
|
-
boxShadow: `0 4px 20px rgba(0,0,0,${isDark ? 0.4 : 0.1})`
|
|
2130
|
-
},
|
|
2131
|
-
children: [
|
|
2132
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2133
|
-
"span",
|
|
2134
|
-
{
|
|
2135
|
-
style: {
|
|
2136
|
-
width: 8,
|
|
2137
|
-
height: 8,
|
|
2138
|
-
borderRadius: "50%",
|
|
2139
|
-
background: c.success
|
|
2140
|
-
}
|
|
2141
|
-
}
|
|
2142
|
-
),
|
|
2143
|
-
"AI Editor",
|
|
2144
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: c.muted, fontSize: 11 }, children: "⌘⇧E" }),
|
|
2145
|
-
ENABLE_SESSION_PERSISTENCE,
|
|
2146
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2147
|
-
"button",
|
|
2148
|
-
{
|
|
2149
|
-
onClick: () => setEnabled(false),
|
|
2150
|
-
style: {
|
|
2151
|
-
background: "none",
|
|
2152
|
-
border: "none",
|
|
2153
|
-
color: c.muted,
|
|
2154
|
-
cursor: "pointer"
|
|
2155
|
-
},
|
|
2156
|
-
children: "×"
|
|
2157
|
-
}
|
|
2158
|
-
)
|
|
2159
|
-
]
|
|
2160
|
-
}
|
|
2161
|
-
)
|
|
2162
|
-
]
|
|
2163
|
-
}
|
|
2164
|
-
);
|
|
2165
|
-
}
|
|
2166
|
-
exports.AIEditorProvider = AIEditorProvider;
|
|
2167
|
-
//# sourceMappingURL=AIEditorProvider-BGHm2xyU.cjs.map
|