next-ai-editor 0.2.2 → 0.2.3
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-IjMydA1Y.cjs → AIEditorProvider-CLgf1Vwa.cjs} +185 -153
- package/dist/{AIEditorProvider-IjMydA1Y.cjs.map → AIEditorProvider-CLgf1Vwa.cjs.map} +1 -1
- package/dist/{AIEditorProvider-633ZBZul.js → AIEditorProvider-DWId5Qmv.js} +185 -153
- package/dist/{AIEditorProvider-633ZBZul.js.map → AIEditorProvider-DWId5Qmv.js.map} +1 -1
- package/dist/client/AIEditorProvider.d.ts +9 -1
- package/dist/client/AIEditorProvider.d.ts.map +1 -1
- package/dist/client.cjs +1 -1
- package/dist/client.js +1 -1
- package/dist/{comments-D3m0RsOO.js → comments-BcCC35iA.js} +12 -1
- package/dist/comments-BcCC35iA.js.map +1 -0
- package/dist/{comments-Daur80r4.cjs → comments-BpGGRaC9.cjs} +12 -1
- package/dist/comments-BpGGRaC9.cjs.map +1 -0
- package/dist/index.cjs +2 -2
- package/dist/index.js +2 -2
- package/dist/next-ai-editor.css +1 -2
- package/dist/server/handlers/config.d.ts +7 -0
- package/dist/server/handlers/config.d.ts.map +1 -0
- package/dist/server/handlers/index.d.ts.map +1 -1
- package/dist/server.cjs +1 -1
- package/dist/server.js +1 -1
- package/package.json +1 -1
- package/dist/comments-D3m0RsOO.js.map +0 -1
- package/dist/comments-Daur80r4.cjs.map +0 -1
|
@@ -1133,26 +1133,40 @@ async function resolveSourceLocation(source) {
|
|
|
1133
1133
|
const EditorContext = createContext(null);
|
|
1134
1134
|
function AIEditorProvider({
|
|
1135
1135
|
children,
|
|
1136
|
-
theme = "dark"
|
|
1136
|
+
theme = "dark",
|
|
1137
|
+
enabled
|
|
1137
1138
|
}) {
|
|
1139
|
+
const [serverEnabled, setServerEnabled] = useState(null);
|
|
1140
|
+
useEffect(() => {
|
|
1141
|
+
if (enabled !== void 0) return;
|
|
1142
|
+
fetch("/api/ai-editor/config").then((res) => res.json()).then((data) => {
|
|
1143
|
+
setServerEnabled(data.enabled === true);
|
|
1144
|
+
}).catch(() => {
|
|
1145
|
+
setServerEnabled(false);
|
|
1146
|
+
});
|
|
1147
|
+
}, [enabled]);
|
|
1148
|
+
const isEditorEnabled = enabled ?? serverEnabled;
|
|
1138
1149
|
const [isEnabled, setEnabled] = useState(false);
|
|
1139
1150
|
const [isHistoryOpen, setHistoryOpen] = useState(false);
|
|
1140
1151
|
const [taskHistory, setTaskHistory] = useState([]);
|
|
1141
1152
|
const [isChatExpanded, setChatExpanded] = useState(false);
|
|
1142
1153
|
const [activeTool, setActiveTool] = useState(null);
|
|
1143
1154
|
const [attachedContext, setAttachedContext] = useState(null);
|
|
1144
|
-
useCallback(
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1155
|
+
useCallback(
|
|
1156
|
+
(taskUpdate) => {
|
|
1157
|
+
setTaskHistory((prev) => {
|
|
1158
|
+
const existing = prev.find((t) => t.id === taskUpdate.id);
|
|
1159
|
+
if (existing) {
|
|
1160
|
+
return prev.map(
|
|
1161
|
+
(t) => t.id === taskUpdate.id ? { ...t, ...taskUpdate } : t
|
|
1162
|
+
);
|
|
1163
|
+
} else {
|
|
1164
|
+
return [...prev, taskUpdate];
|
|
1165
|
+
}
|
|
1166
|
+
});
|
|
1167
|
+
},
|
|
1168
|
+
[]
|
|
1169
|
+
);
|
|
1156
1170
|
const handleChatToggle = useCallback(() => {
|
|
1157
1171
|
setChatExpanded((prev) => !prev);
|
|
1158
1172
|
}, []);
|
|
@@ -1184,7 +1198,7 @@ function AIEditorProvider({
|
|
|
1184
1198
|
window.addEventListener("keydown", handleKey);
|
|
1185
1199
|
return () => window.removeEventListener("keydown", handleKey);
|
|
1186
1200
|
}, [isHistoryOpen]);
|
|
1187
|
-
if (
|
|
1201
|
+
if (!isEditorEnabled) {
|
|
1188
1202
|
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
1189
1203
|
}
|
|
1190
1204
|
return /* @__PURE__ */ jsxs(
|
|
@@ -1214,28 +1228,34 @@ function AIEditorProvider({
|
|
|
1214
1228
|
}
|
|
1215
1229
|
}
|
|
1216
1230
|
),
|
|
1217
|
-
/* @__PURE__ */ jsxs(
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
{
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1231
|
+
/* @__PURE__ */ jsxs(
|
|
1232
|
+
"div",
|
|
1233
|
+
{
|
|
1234
|
+
className: `editor-container ai-editor-ui ${isChatExpanded ? "expanded" : "collapsed"} ${theme}`,
|
|
1235
|
+
children: [
|
|
1236
|
+
/* @__PURE__ */ jsx(
|
|
1237
|
+
ChatPanel,
|
|
1238
|
+
{
|
|
1239
|
+
isExpanded: isChatExpanded,
|
|
1240
|
+
onToggle: handleChatToggle,
|
|
1241
|
+
activeTool,
|
|
1242
|
+
onToolChange: handleToolChange,
|
|
1243
|
+
attachedContext,
|
|
1244
|
+
onClearContext: handleClearContext,
|
|
1245
|
+
theme
|
|
1246
|
+
}
|
|
1247
|
+
),
|
|
1248
|
+
/* @__PURE__ */ jsx(
|
|
1249
|
+
ControlPill,
|
|
1250
|
+
{
|
|
1251
|
+
isExpanded: isChatExpanded,
|
|
1252
|
+
onToggle: handleChatToggle,
|
|
1253
|
+
activeTool
|
|
1254
|
+
}
|
|
1255
|
+
)
|
|
1256
|
+
]
|
|
1257
|
+
}
|
|
1258
|
+
),
|
|
1239
1259
|
/* @__PURE__ */ jsx(
|
|
1240
1260
|
TaskHistoryPanel,
|
|
1241
1261
|
{
|
|
@@ -1250,7 +1270,9 @@ function AIEditorProvider({
|
|
|
1250
1270
|
}
|
|
1251
1271
|
function EditorOverlay({ theme, onComponentSelect }) {
|
|
1252
1272
|
var _a;
|
|
1253
|
-
const [hoveredSource, setHoveredSource] = useState(
|
|
1273
|
+
const [hoveredSource, setHoveredSource] = useState(
|
|
1274
|
+
null
|
|
1275
|
+
);
|
|
1254
1276
|
const [hoveredElement, setHoveredElement] = useState(null);
|
|
1255
1277
|
const [hoveredRect, setHoveredRect] = useState(null);
|
|
1256
1278
|
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
|
@@ -1258,7 +1280,10 @@ function EditorOverlay({ theme, onComponentSelect }) {
|
|
|
1258
1280
|
const lastHoverStateRef = useRef(null);
|
|
1259
1281
|
useEffect(() => {
|
|
1260
1282
|
if (hoveredSource && hoveredElement) {
|
|
1261
|
-
lastHoverStateRef.current = {
|
|
1283
|
+
lastHoverStateRef.current = {
|
|
1284
|
+
source: hoveredSource,
|
|
1285
|
+
element: hoveredElement
|
|
1286
|
+
};
|
|
1262
1287
|
}
|
|
1263
1288
|
}, [hoveredSource, hoveredElement]);
|
|
1264
1289
|
const isDark = theme === "dark";
|
|
@@ -1333,125 +1358,132 @@ function EditorOverlay({ theme, onComponentSelect }) {
|
|
|
1333
1358
|
cancelAnimationFrame(raf);
|
|
1334
1359
|
};
|
|
1335
1360
|
}, [onComponentSelect]);
|
|
1336
|
-
return /* @__PURE__ */ jsxs(
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
{
|
|
1357
|
-
style: {
|
|
1358
|
-
position: "fixed",
|
|
1359
|
-
left: Math.min(mousePos.x + 14, window.innerWidth - 340),
|
|
1360
|
-
top: mousePos.y + 14,
|
|
1361
|
-
background: c.bg,
|
|
1362
|
-
color: c.text,
|
|
1363
|
-
border: `1px solid ${c.border}`,
|
|
1364
|
-
borderRadius: 10,
|
|
1365
|
-
padding: "12px 16px",
|
|
1366
|
-
fontSize: 12,
|
|
1367
|
-
fontFamily: "ui-monospace, monospace",
|
|
1368
|
-
zIndex: 99999,
|
|
1369
|
-
boxShadow: `0 8px 30px rgba(0,0,0,${isDark ? 0.5 : 0.15})`,
|
|
1370
|
-
maxWidth: 320,
|
|
1371
|
-
pointerEvents: "none"
|
|
1372
|
-
},
|
|
1373
|
-
children: [
|
|
1374
|
-
/* @__PURE__ */ jsxs(
|
|
1375
|
-
"div",
|
|
1376
|
-
{
|
|
1377
|
-
style: {
|
|
1378
|
-
fontWeight: 700,
|
|
1379
|
-
color: c.accent,
|
|
1380
|
-
marginBottom: 4,
|
|
1381
|
-
fontSize: 14
|
|
1382
|
-
},
|
|
1383
|
-
children: [
|
|
1384
|
-
"<",
|
|
1385
|
-
hoveredSource.componentName,
|
|
1386
|
-
" />"
|
|
1387
|
-
]
|
|
1388
|
-
}
|
|
1389
|
-
),
|
|
1390
|
-
/* @__PURE__ */ jsxs("div", { style: { color: c.muted, fontSize: 11 }, children: [
|
|
1391
|
-
hoveredSource.filePath,
|
|
1392
|
-
":",
|
|
1393
|
-
hoveredSource.lineNumber
|
|
1394
|
-
] }),
|
|
1395
|
-
((_a = hoveredSource.elementContext) == null ? void 0 : _a.textContent) && /* @__PURE__ */ jsxs(
|
|
1396
|
-
"div",
|
|
1397
|
-
{
|
|
1398
|
-
style: {
|
|
1399
|
-
color: c.muted,
|
|
1400
|
-
fontSize: 10,
|
|
1401
|
-
marginTop: 4,
|
|
1402
|
-
fontStyle: "italic"
|
|
1403
|
-
},
|
|
1404
|
-
children: [
|
|
1405
|
-
'"',
|
|
1406
|
-
hoveredSource.elementContext.textContent,
|
|
1407
|
-
'"'
|
|
1408
|
-
]
|
|
1409
|
-
}
|
|
1410
|
-
)
|
|
1411
|
-
]
|
|
1412
|
-
}
|
|
1413
|
-
),
|
|
1414
|
-
/* @__PURE__ */ jsxs(
|
|
1415
|
-
"div",
|
|
1416
|
-
{
|
|
1417
|
-
style: {
|
|
1418
|
-
position: "fixed",
|
|
1419
|
-
bottom: 20,
|
|
1420
|
-
right: 20,
|
|
1421
|
-
background: c.bg,
|
|
1422
|
-
color: c.success,
|
|
1423
|
-
padding: "10px 16px",
|
|
1424
|
-
borderRadius: 20,
|
|
1425
|
-
fontSize: 13,
|
|
1426
|
-
fontWeight: 600,
|
|
1427
|
-
zIndex: 99997,
|
|
1428
|
-
display: "flex",
|
|
1429
|
-
alignItems: "center",
|
|
1430
|
-
gap: 8,
|
|
1431
|
-
border: `1px solid ${c.border}`,
|
|
1432
|
-
boxShadow: `0 4px 20px rgba(0,0,0,${isDark ? 0.4 : 0.1})`
|
|
1433
|
-
},
|
|
1434
|
-
children: [
|
|
1435
|
-
/* @__PURE__ */ jsx(
|
|
1436
|
-
"span",
|
|
1437
|
-
{
|
|
1438
|
-
style: {
|
|
1439
|
-
width: 8,
|
|
1440
|
-
height: 8,
|
|
1441
|
-
borderRadius: "50%",
|
|
1442
|
-
background: c.success
|
|
1443
|
-
}
|
|
1361
|
+
return /* @__PURE__ */ jsxs(
|
|
1362
|
+
"div",
|
|
1363
|
+
{
|
|
1364
|
+
className: "ai-editor-ui",
|
|
1365
|
+
style: { fontFamily: "system-ui, sans-serif" },
|
|
1366
|
+
children: [
|
|
1367
|
+
hoveredRect && /* @__PURE__ */ jsx(
|
|
1368
|
+
"div",
|
|
1369
|
+
{
|
|
1370
|
+
style: {
|
|
1371
|
+
position: "fixed",
|
|
1372
|
+
left: hoveredRect.left - 2,
|
|
1373
|
+
top: hoveredRect.top - 2,
|
|
1374
|
+
width: hoveredRect.width + 4,
|
|
1375
|
+
height: hoveredRect.height + 4,
|
|
1376
|
+
border: `2px solid ${c.accent}`,
|
|
1377
|
+
borderRadius: 6,
|
|
1378
|
+
background: `${c.accent}15`,
|
|
1379
|
+
pointerEvents: "none",
|
|
1380
|
+
zIndex: 99998
|
|
1444
1381
|
}
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1382
|
+
}
|
|
1383
|
+
),
|
|
1384
|
+
hoveredSource && !isResolvingSource && /* @__PURE__ */ jsxs(
|
|
1385
|
+
"div",
|
|
1386
|
+
{
|
|
1387
|
+
style: {
|
|
1388
|
+
position: "fixed",
|
|
1389
|
+
left: Math.min(mousePos.x + 14, window.innerWidth - 340),
|
|
1390
|
+
top: mousePos.y + 14,
|
|
1391
|
+
background: c.bg,
|
|
1392
|
+
color: c.text,
|
|
1393
|
+
border: `1px solid ${c.border}`,
|
|
1394
|
+
borderRadius: 10,
|
|
1395
|
+
padding: "12px 16px",
|
|
1396
|
+
fontSize: 12,
|
|
1397
|
+
fontFamily: "ui-monospace, monospace",
|
|
1398
|
+
zIndex: 99999,
|
|
1399
|
+
boxShadow: `0 8px 30px rgba(0,0,0,${isDark ? 0.5 : 0.15})`,
|
|
1400
|
+
maxWidth: 320,
|
|
1401
|
+
pointerEvents: "none"
|
|
1402
|
+
},
|
|
1403
|
+
children: [
|
|
1404
|
+
/* @__PURE__ */ jsxs(
|
|
1405
|
+
"div",
|
|
1406
|
+
{
|
|
1407
|
+
style: {
|
|
1408
|
+
fontWeight: 700,
|
|
1409
|
+
color: c.accent,
|
|
1410
|
+
marginBottom: 4,
|
|
1411
|
+
fontSize: 14
|
|
1412
|
+
},
|
|
1413
|
+
children: [
|
|
1414
|
+
"<",
|
|
1415
|
+
hoveredSource.componentName,
|
|
1416
|
+
" />"
|
|
1417
|
+
]
|
|
1418
|
+
}
|
|
1419
|
+
),
|
|
1420
|
+
/* @__PURE__ */ jsxs("div", { style: { color: c.muted, fontSize: 11 }, children: [
|
|
1421
|
+
hoveredSource.filePath,
|
|
1422
|
+
":",
|
|
1423
|
+
hoveredSource.lineNumber
|
|
1424
|
+
] }),
|
|
1425
|
+
((_a = hoveredSource.elementContext) == null ? void 0 : _a.textContent) && /* @__PURE__ */ jsxs(
|
|
1426
|
+
"div",
|
|
1427
|
+
{
|
|
1428
|
+
style: {
|
|
1429
|
+
color: c.muted,
|
|
1430
|
+
fontSize: 10,
|
|
1431
|
+
marginTop: 4,
|
|
1432
|
+
fontStyle: "italic"
|
|
1433
|
+
},
|
|
1434
|
+
children: [
|
|
1435
|
+
'"',
|
|
1436
|
+
hoveredSource.elementContext.textContent,
|
|
1437
|
+
'"'
|
|
1438
|
+
]
|
|
1439
|
+
}
|
|
1440
|
+
)
|
|
1441
|
+
]
|
|
1442
|
+
}
|
|
1443
|
+
),
|
|
1444
|
+
/* @__PURE__ */ jsxs(
|
|
1445
|
+
"div",
|
|
1446
|
+
{
|
|
1447
|
+
style: {
|
|
1448
|
+
position: "fixed",
|
|
1449
|
+
bottom: 20,
|
|
1450
|
+
right: 20,
|
|
1451
|
+
background: c.bg,
|
|
1452
|
+
color: c.success,
|
|
1453
|
+
padding: "10px 16px",
|
|
1454
|
+
borderRadius: 20,
|
|
1455
|
+
fontSize: 13,
|
|
1456
|
+
fontWeight: 600,
|
|
1457
|
+
zIndex: 99997,
|
|
1458
|
+
display: "flex",
|
|
1459
|
+
alignItems: "center",
|
|
1460
|
+
gap: 8,
|
|
1461
|
+
border: `1px solid ${c.border}`,
|
|
1462
|
+
boxShadow: `0 4px 20px rgba(0,0,0,${isDark ? 0.4 : 0.1})`
|
|
1463
|
+
},
|
|
1464
|
+
children: [
|
|
1465
|
+
/* @__PURE__ */ jsx(
|
|
1466
|
+
"span",
|
|
1467
|
+
{
|
|
1468
|
+
style: {
|
|
1469
|
+
width: 8,
|
|
1470
|
+
height: 8,
|
|
1471
|
+
borderRadius: "50%",
|
|
1472
|
+
background: c.success
|
|
1473
|
+
}
|
|
1474
|
+
}
|
|
1475
|
+
),
|
|
1476
|
+
"Select Component"
|
|
1477
|
+
]
|
|
1478
|
+
}
|
|
1479
|
+
)
|
|
1480
|
+
]
|
|
1481
|
+
}
|
|
1482
|
+
);
|
|
1451
1483
|
}
|
|
1452
1484
|
export {
|
|
1453
1485
|
AIEditorProvider as A,
|
|
1454
1486
|
ChatPanel as C,
|
|
1455
1487
|
ControlPill as a
|
|
1456
1488
|
};
|
|
1457
|
-
//# sourceMappingURL=AIEditorProvider-
|
|
1489
|
+
//# sourceMappingURL=AIEditorProvider-DWId5Qmv.js.map
|