puckeditor-plugin-ai 0.6.0 → 0.6.2
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/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +100 -40
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +98 -38
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { PuckAction, Data, Config, Plugin } from '
|
|
2
|
+
import { PuckAction, Data, Config, Plugin } from 'puckeditor-core';
|
|
3
3
|
import { CreateUIMessage, UIMessage, LanguageModelUsage, DataUIPart, ChatStatus } from 'ai';
|
|
4
4
|
|
|
5
5
|
interface AttachedImage {
|
|
@@ -196,7 +196,7 @@ type AiPluginProps = {
|
|
|
196
196
|
scrollTracking?: boolean;
|
|
197
197
|
prepareRequest?: (opts: RequestOptions) => RequestOptions | Promise<RequestOptions>;
|
|
198
198
|
};
|
|
199
|
-
declare module "
|
|
199
|
+
declare module "puckeditor-core" {
|
|
200
200
|
interface ComponentMetadata {
|
|
201
201
|
ai?: ComponentAiParams;
|
|
202
202
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { PuckAction, Data, Config, Plugin } from '
|
|
2
|
+
import { PuckAction, Data, Config, Plugin } from 'puckeditor-core';
|
|
3
3
|
import { CreateUIMessage, UIMessage, LanguageModelUsage, DataUIPart, ChatStatus } from 'ai';
|
|
4
4
|
|
|
5
5
|
interface AttachedImage {
|
|
@@ -196,7 +196,7 @@ type AiPluginProps = {
|
|
|
196
196
|
scrollTracking?: boolean;
|
|
197
197
|
prepareRequest?: (opts: RequestOptions) => RequestOptions | Promise<RequestOptions>;
|
|
198
198
|
};
|
|
199
|
-
declare module "
|
|
199
|
+
declare module "puckeditor-core" {
|
|
200
200
|
interface ComponentMetadata {
|
|
201
201
|
ai?: ComponentAiParams;
|
|
202
202
|
}
|
package/dist/index.js
CHANGED
|
@@ -91,7 +91,7 @@ var import_react = __toESM(require("react"));
|
|
|
91
91
|
|
|
92
92
|
// index.tsx
|
|
93
93
|
var import_react4 = require("react");
|
|
94
|
-
var
|
|
94
|
+
var import_puckeditor_core = require("puckeditor-core");
|
|
95
95
|
var import_react5 = require("@ai-sdk/react");
|
|
96
96
|
var import_ai = require("ai");
|
|
97
97
|
var import_react_markdown = __toESM(require("react-markdown"));
|
|
@@ -274,25 +274,31 @@ var applyArrayDefaults = (oldProps, newProps, fields) => {
|
|
|
274
274
|
if (field.type === "array") {
|
|
275
275
|
const arrayField = field;
|
|
276
276
|
const arrayFields = arrayField.arrayFields;
|
|
277
|
-
updatedProps[fieldName] = (updatedProps[fieldName] || []).map(
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
const
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
277
|
+
updatedProps[fieldName] = (updatedProps[fieldName] || []).map(
|
|
278
|
+
(item, index) => {
|
|
279
|
+
var _a, _b, _c, _d, _e;
|
|
280
|
+
const newItem = {};
|
|
281
|
+
const defaultValue = typeof arrayField.defaultItemProps === "function" ? arrayField.defaultItemProps(index) : arrayField.defaultItemProps;
|
|
282
|
+
for (const arrayFieldName in arrayFields) {
|
|
283
|
+
const subField = arrayFields[arrayFieldName];
|
|
284
|
+
if (subField.type === "slot") {
|
|
285
|
+
newItem[arrayFieldName] = (_d = (_c = item[arrayFieldName]) != null ? _c : (_b = (_a = oldProps[fieldName]) == null ? void 0 : _a[index]) == null ? void 0 : _b[arrayFieldName]) != null ? _d : defaultValue == null ? void 0 : defaultValue[arrayFieldName];
|
|
286
|
+
} else {
|
|
287
|
+
newItem[arrayFieldName] = (_e = item[arrayFieldName]) != null ? _e : defaultValue == null ? void 0 : defaultValue[arrayFieldName];
|
|
288
|
+
}
|
|
287
289
|
}
|
|
290
|
+
return newItem;
|
|
288
291
|
}
|
|
289
|
-
|
|
290
|
-
});
|
|
292
|
+
);
|
|
291
293
|
}
|
|
292
294
|
}
|
|
293
295
|
return updatedProps;
|
|
294
296
|
};
|
|
295
|
-
var dispatchOp = (operation, {
|
|
297
|
+
var dispatchOp = (operation, {
|
|
298
|
+
getState,
|
|
299
|
+
dispatchAction,
|
|
300
|
+
config
|
|
301
|
+
}) => {
|
|
296
302
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
297
303
|
const state = getState();
|
|
298
304
|
try {
|
|
@@ -308,7 +314,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
|
|
|
308
314
|
});
|
|
309
315
|
const existing = getItemById(getState(), operation.id);
|
|
310
316
|
if (!existing) {
|
|
311
|
-
throw new Error(
|
|
317
|
+
throw new Error(
|
|
318
|
+
`Tried to update an item that doesn't exist: ${operation.id}`
|
|
319
|
+
);
|
|
312
320
|
}
|
|
313
321
|
const newData = __spreadProps(__spreadValues({}, existing), {
|
|
314
322
|
props: applyArrayDefaults(
|
|
@@ -329,7 +337,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
|
|
|
329
337
|
const selector = getSelectorForId(state, operation.id);
|
|
330
338
|
const existing = getItemById(state, operation.id);
|
|
331
339
|
if (!selector || !existing) {
|
|
332
|
-
throw new Error(
|
|
340
|
+
throw new Error(
|
|
341
|
+
`Tried to update an item that doesn't exist: ${operation.id}`
|
|
342
|
+
);
|
|
333
343
|
}
|
|
334
344
|
const newData = __spreadProps(__spreadValues({}, existing), {
|
|
335
345
|
props: applyArrayDefaults(
|
|
@@ -358,7 +368,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
|
|
|
358
368
|
} else if (operation.op === "delete") {
|
|
359
369
|
const selector = getSelectorForId(state, operation.id);
|
|
360
370
|
if (!selector) {
|
|
361
|
-
throw new Error(
|
|
371
|
+
throw new Error(
|
|
372
|
+
`Tried to delete an item that doesn't exist: ${operation.id}`
|
|
373
|
+
);
|
|
362
374
|
}
|
|
363
375
|
dispatchAction({
|
|
364
376
|
type: "remove",
|
|
@@ -369,7 +381,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
|
|
|
369
381
|
} else if (operation.op === "duplicate") {
|
|
370
382
|
const selector = getSelectorForId(state, operation.id);
|
|
371
383
|
if (!selector) {
|
|
372
|
-
throw new Error(
|
|
384
|
+
throw new Error(
|
|
385
|
+
`Tried to duplicate an item that doesn't exist: ${operation.id}`
|
|
386
|
+
);
|
|
373
387
|
}
|
|
374
388
|
dispatchAction({
|
|
375
389
|
type: "duplicate",
|
|
@@ -380,7 +394,9 @@ var dispatchOp = (operation, { getState, dispatchAction, config }) => {
|
|
|
380
394
|
} else if (operation.op === "move") {
|
|
381
395
|
const selector = getSelectorForId(state, operation.id);
|
|
382
396
|
if (!selector) {
|
|
383
|
-
throw new Error(
|
|
397
|
+
throw new Error(
|
|
398
|
+
`Tried to move an item that doesn't exist: ${operation.id}`
|
|
399
|
+
);
|
|
384
400
|
}
|
|
385
401
|
dispatchAction({
|
|
386
402
|
type: "move",
|
|
@@ -466,10 +482,18 @@ function ExamplePrompt({
|
|
|
466
482
|
onClick
|
|
467
483
|
}) {
|
|
468
484
|
const El = href ? "a" : "button";
|
|
469
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
485
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
486
|
+
El,
|
|
487
|
+
{
|
|
488
|
+
className: "puck-ai-chatbody-example-prompt",
|
|
489
|
+
href,
|
|
490
|
+
onClick,
|
|
491
|
+
children: [
|
|
492
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: label }),
|
|
493
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "puck-ai-chatbody-example-prompt-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowUp, { size: 16 }) })
|
|
494
|
+
]
|
|
495
|
+
}
|
|
496
|
+
);
|
|
473
497
|
}
|
|
474
498
|
function PromptForm({
|
|
475
499
|
handleSubmit,
|
|
@@ -499,15 +523,21 @@ function PromptForm({
|
|
|
499
523
|
setPrompt(initialPrompt);
|
|
500
524
|
}
|
|
501
525
|
}, []);
|
|
502
|
-
const addImages = (0, import_react4.useCallback)(
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
526
|
+
const addImages = (0, import_react4.useCallback)(
|
|
527
|
+
(files) => __async(null, null, function* () {
|
|
528
|
+
const newImgs = yield filesToAttachedImages(files);
|
|
529
|
+
if (newImgs.length > 0) {
|
|
530
|
+
onImagesChange == null ? void 0 : onImagesChange([...images, ...newImgs]);
|
|
531
|
+
}
|
|
532
|
+
}),
|
|
533
|
+
[images, onImagesChange]
|
|
534
|
+
);
|
|
535
|
+
const removeImage = (0, import_react4.useCallback)(
|
|
536
|
+
(id) => {
|
|
537
|
+
onImagesChange == null ? void 0 : onImagesChange(images.filter((img) => img.id !== id));
|
|
538
|
+
},
|
|
539
|
+
[images, onImagesChange]
|
|
540
|
+
);
|
|
511
541
|
const sendPrompt = () => {
|
|
512
542
|
if (isLoading) return;
|
|
513
543
|
if (prompt.trim() || images.length > 0) {
|
|
@@ -773,7 +803,14 @@ function Placeholder({
|
|
|
773
803
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bot, { size: 24 }),
|
|
774
804
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Use AI to build a page using the available blocks" }),
|
|
775
805
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "puck-ai-chat-actions", children: [
|
|
776
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
806
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
807
|
+
"button",
|
|
808
|
+
{
|
|
809
|
+
className: "puck-ai-chat-action",
|
|
810
|
+
onClick: handleEnterPromptClick,
|
|
811
|
+
children: "Enter prompt"
|
|
812
|
+
}
|
|
813
|
+
),
|
|
777
814
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
778
815
|
"button",
|
|
779
816
|
{
|
|
@@ -807,7 +844,9 @@ function scrollIntoViewLocal(el, win, behavior = "smooth") {
|
|
|
807
844
|
function useFrameMutationObserver(callback) {
|
|
808
845
|
return (0, import_react4.useCallback)(() => {
|
|
809
846
|
var _a;
|
|
810
|
-
const frame = document == null ? void 0 : document.getElementById(
|
|
847
|
+
const frame = document == null ? void 0 : document.getElementById(
|
|
848
|
+
"preview-frame"
|
|
849
|
+
);
|
|
811
850
|
if (!frame) return;
|
|
812
851
|
let observer = null;
|
|
813
852
|
const win = frame.contentWindow;
|
|
@@ -860,7 +899,7 @@ function ScrollTracking({ children }) {
|
|
|
860
899
|
}, [follow]);
|
|
861
900
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
|
|
862
901
|
}
|
|
863
|
-
var usePuck = (0,
|
|
902
|
+
var usePuck = (0, import_puckeditor_core.createUsePuck)();
|
|
864
903
|
function Chat({
|
|
865
904
|
chat,
|
|
866
905
|
host = "/api/puck/chat",
|
|
@@ -868,7 +907,7 @@ function Chat({
|
|
|
868
907
|
}) {
|
|
869
908
|
const { examplePrompts } = chat != null ? chat : {};
|
|
870
909
|
const puckDispatch = usePuck((s) => s.dispatch);
|
|
871
|
-
const getPuck = (0,
|
|
910
|
+
const getPuck = (0, import_puckeditor_core.useGetPuck)();
|
|
872
911
|
const localChatId = (0, import_react4.useRef)("");
|
|
873
912
|
const inputRef = (0, import_react4.useRef)(null);
|
|
874
913
|
const pluginRef = (0, import_react4.useRef)(null);
|
|
@@ -966,7 +1005,9 @@ function Chat({
|
|
|
966
1005
|
var _a, _b, _c, _d;
|
|
967
1006
|
const puck = getPuck();
|
|
968
1007
|
const config = (_a = puck == null ? void 0 : puck.config) != null ? _a : { components: {} };
|
|
969
|
-
const appState = (_b = puck == null ? void 0 : puck.appState) != null ? _b : {
|
|
1008
|
+
const appState = (_b = puck == null ? void 0 : puck.appState) != null ? _b : {
|
|
1009
|
+
data: { root: { props: {} }, content: [], zones: {} }
|
|
1010
|
+
};
|
|
970
1011
|
const root = (_c = config.root) != null ? _c : {
|
|
971
1012
|
fields: {
|
|
972
1013
|
title: {
|
|
@@ -1015,7 +1056,11 @@ function Chat({
|
|
|
1015
1056
|
onFinish: () => {
|
|
1016
1057
|
const puck = getPuck();
|
|
1017
1058
|
if (puck == null ? void 0 : puck.appState) {
|
|
1018
|
-
puckDispatch({
|
|
1059
|
+
puckDispatch({
|
|
1060
|
+
type: "set",
|
|
1061
|
+
state: puck.appState,
|
|
1062
|
+
recordHistory: true
|
|
1063
|
+
});
|
|
1019
1064
|
}
|
|
1020
1065
|
}
|
|
1021
1066
|
});
|
|
@@ -1084,7 +1129,15 @@ function Chat({
|
|
|
1084
1129
|
handleSubmit,
|
|
1085
1130
|
inputRef,
|
|
1086
1131
|
status: resolvedStatus,
|
|
1087
|
-
examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1132
|
+
examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1133
|
+
ExamplePrompt,
|
|
1134
|
+
{
|
|
1135
|
+
label,
|
|
1136
|
+
href,
|
|
1137
|
+
onClick
|
|
1138
|
+
},
|
|
1139
|
+
label
|
|
1140
|
+
)),
|
|
1088
1141
|
error,
|
|
1089
1142
|
handleRetry: () => {
|
|
1090
1143
|
setError("");
|
|
@@ -1095,7 +1148,14 @@ function Chat({
|
|
|
1095
1148
|
onClearTarget: () => setTargetComponent(null),
|
|
1096
1149
|
images: attachedImages,
|
|
1097
1150
|
onImagesChange: setAttachedImages,
|
|
1098
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1151
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1152
|
+
Placeholder,
|
|
1153
|
+
{
|
|
1154
|
+
dispatch: puckDispatch,
|
|
1155
|
+
inputRef,
|
|
1156
|
+
pluginRef
|
|
1157
|
+
}
|
|
1158
|
+
)
|
|
1099
1159
|
}
|
|
1100
1160
|
) })
|
|
1101
1161
|
] });
|