@puckeditor/plugin-ai 0.1.0-canary.4aba31f4 → 0.1.0-canary.4eacddeb
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.css +81 -123
- package/dist/index.js +89 -110
- package/dist/index.mjs +77 -98
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -20681,7 +20681,7 @@ function useChat(_a17 = {}) {
|
|
|
20681
20681
|
|
|
20682
20682
|
// src/components/Chat/index.tsx
|
|
20683
20683
|
var import_puck2 = require("@measured/puck");
|
|
20684
|
-
var
|
|
20684
|
+
var import_react19 = require("react");
|
|
20685
20685
|
var import_ulid = require("ulid");
|
|
20686
20686
|
|
|
20687
20687
|
// ../utils/lib/get-class-name-factory.ts
|
|
@@ -20721,7 +20721,7 @@ var styles_module_default = { "Chat": "_Chat_1mv7h_1", "Chat-header": "_Chat-hea
|
|
|
20721
20721
|
|
|
20722
20722
|
// src/components/ChatBody/index.tsx
|
|
20723
20723
|
init_react_import();
|
|
20724
|
-
var
|
|
20724
|
+
var import_react17 = require("react");
|
|
20725
20725
|
var import_use_stick_to_bottom = require("use-stick-to-bottom");
|
|
20726
20726
|
var import_react_markdown = __toESM(require("react-markdown"));
|
|
20727
20727
|
|
|
@@ -21182,28 +21182,12 @@ init_react_import();
|
|
|
21182
21182
|
|
|
21183
21183
|
// css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Page/Page.module.css#css-module
|
|
21184
21184
|
init_react_import();
|
|
21185
|
-
var Page_module_default = { "Page": "
|
|
21185
|
+
var Page_module_default = { "Page": "_Page_1uz1e_1", "Page-masthead": "_Page-masthead_1uz1e_8", "Page-crumbs": "_Page-crumbs_1uz1e_18", "Page-crumb": "_Page-crumb_1uz1e_18", "Page-crumbLink": "_Page-crumbLink_1uz1e_28", "Page-actions": "_Page-actions_1uz1e_60" };
|
|
21186
21186
|
|
|
21187
21187
|
// ../platform-client/components/Page/Page.tsx
|
|
21188
21188
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
21189
21189
|
var cx2 = getClassNameFactory2("Page", Page_module_default);
|
|
21190
21190
|
|
|
21191
|
-
// ../platform-client/components/Pagination/index.ts
|
|
21192
|
-
init_react_import();
|
|
21193
|
-
|
|
21194
|
-
// ../platform-client/components/Pagination/Pagination.tsx
|
|
21195
|
-
init_react_import();
|
|
21196
|
-
var import_react13 = require("react");
|
|
21197
|
-
|
|
21198
|
-
// css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Pagination/Pagination.module.css#css-module
|
|
21199
|
-
init_react_import();
|
|
21200
|
-
var Pagination_module_default = { "Pagination": "_Pagination_1okv2_1", "PaginationButton": "_PaginationButton_1okv2_8", "PaginationButton--isActive": "_PaginationButton--isActive_1okv2_20", "Pagination-ellipsis": "_Pagination-ellipsis_1okv2_30" };
|
|
21201
|
-
|
|
21202
|
-
// ../platform-client/components/Pagination/Pagination.tsx
|
|
21203
|
-
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
21204
|
-
var cx3 = getClassNameFactory2("Pagination", Pagination_module_default);
|
|
21205
|
-
var cxButton = getClassNameFactory2("PaginationButton", Pagination_module_default);
|
|
21206
|
-
|
|
21207
21191
|
// ../platform-client/components/Section/index.ts
|
|
21208
21192
|
init_react_import();
|
|
21209
21193
|
|
|
@@ -21215,7 +21199,7 @@ init_react_import();
|
|
|
21215
21199
|
var Section_module_default = { "Section-inner": "_Section-inner_1uwo0_1", "Section--flush": "_Section--flush_1uwo0_8", "Section": "_Section_1uwo0_1", "Section--full": "_Section--full_1uwo0_17" };
|
|
21216
21200
|
|
|
21217
21201
|
// ../platform-client/components/Section/Section.tsx
|
|
21218
|
-
var
|
|
21202
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
21219
21203
|
var getClassName12 = getClassNameFactory2("Section", Section_module_default);
|
|
21220
21204
|
|
|
21221
21205
|
// ../platform-client/components/StatusTag/index.ts
|
|
@@ -21235,25 +21219,25 @@ init_react_import();
|
|
|
21235
21219
|
var Tag_module_default = { "Tag": "_Tag_1baze_1", "Tag--colorBlue": "_Tag--colorBlue_1baze_19", "Tag--colorGreen": "_Tag--colorGreen_1baze_23", "Tag--colorRed": "_Tag--colorRed_1baze_27", "Tag--colorMuted": "_Tag--colorMuted_1baze_31", "Tag-sprite": "_Tag-sprite_1baze_35", "Tag--pulse": "_Tag--pulse_1baze_39", "pulse": "_pulse_1baze_1" };
|
|
21236
21220
|
|
|
21237
21221
|
// ../platform-client/components/Tag/Tag.tsx
|
|
21238
|
-
var
|
|
21222
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
21239
21223
|
var getClassName13 = getClassNameFactory2("Tag", Tag_module_default);
|
|
21240
21224
|
|
|
21241
21225
|
// ../platform-client/components/StatusTag/StatusTag.tsx
|
|
21242
|
-
var
|
|
21226
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
21243
21227
|
|
|
21244
21228
|
// ../platform-client/components/Table/index.ts
|
|
21245
21229
|
init_react_import();
|
|
21246
21230
|
|
|
21247
21231
|
// ../platform-client/components/Table/Table.tsx
|
|
21248
21232
|
init_react_import();
|
|
21249
|
-
var
|
|
21233
|
+
var import_react13 = require("react");
|
|
21250
21234
|
|
|
21251
21235
|
// css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Table/Table.module.css#css-module
|
|
21252
21236
|
init_react_import();
|
|
21253
|
-
var Table_module_default = { "Table": "
|
|
21237
|
+
var Table_module_default = { "Table": "_Table_1t44j_1", "Table-filters": "_Table-filters_1t44j_8", "Table-inner": "_Table-inner_1t44j_12", "Table-table": "_Table-table_1t44j_16", "Table-footer": "_Table-footer_1t44j_78", "Table--clickableRows": "_Table--clickableRows_1t44j_82", "Table-placeholder": "_Table-placeholder_1t44j_87" };
|
|
21254
21238
|
|
|
21255
21239
|
// ../platform-client/components/Table/Table.tsx
|
|
21256
|
-
var
|
|
21240
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
21257
21241
|
var getClassName14 = get_class_name_factory_default("Table", Table_module_default);
|
|
21258
21242
|
|
|
21259
21243
|
// ../platform-client/components/Textarea/index.tsx
|
|
@@ -21271,30 +21255,30 @@ init_react_import();
|
|
|
21271
21255
|
var VerticalSpace_module_default = { "VerticalSpace": "_VerticalSpace_1tjaw_1", "VerticalSpace--size4": "_VerticalSpace--size4_1tjaw_5", "VerticalSpace--size8": "_VerticalSpace--size8_1tjaw_9", "VerticalSpace--size16": "_VerticalSpace--size16_1tjaw_13", "VerticalSpace--size32": "_VerticalSpace--size32_1tjaw_17", "VerticalSpace--size40": "_VerticalSpace--size40_1tjaw_21", "VerticalSpace--size48": "_VerticalSpace--size48_1tjaw_25", "VerticalSpace--size56": "_VerticalSpace--size56_1tjaw_29", "VerticalSpace--size96": "_VerticalSpace--size96_1tjaw_33", "VerticalSpace--size128": "_VerticalSpace--size128_1tjaw_37" };
|
|
21272
21256
|
|
|
21273
21257
|
// ../platform-client/components/VerticalSpace/VerticalSpace.tsx
|
|
21274
|
-
var
|
|
21258
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
21275
21259
|
var getClassName15 = get_class_name_factory_default("VerticalSpace", VerticalSpace_module_default);
|
|
21276
21260
|
|
|
21277
21261
|
// ../platform-client/context/editor.tsx
|
|
21278
21262
|
init_react_import();
|
|
21279
|
-
var
|
|
21280
|
-
var
|
|
21281
|
-
var ctx = (0,
|
|
21263
|
+
var import_react14 = require("react");
|
|
21264
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
21265
|
+
var ctx = (0, import_react14.createContext)({});
|
|
21282
21266
|
|
|
21283
21267
|
// css-module:/home/runner/work/puck-platform/puck-platform/packages/plugin-ai/src/components/ChatBody/styles.module.css#css-module
|
|
21284
21268
|
init_react_import();
|
|
21285
|
-
var styles_module_default3 = { "Chat": "
|
|
21269
|
+
var styles_module_default3 = { "Chat": "_Chat_14j71_1", "Chat-inner": "_Chat-inner_14j71_17", "Chat--hasMessages": "_Chat--hasMessages_14j71_25", "Chat--hasChildren": "_Chat--hasChildren_14j71_29", "Chat-messages": "_Chat-messages_14j71_34", "Chat-form": "_Chat-form_14j71_41", "Chat--hideInput": "_Chat--hideInput_14j71_46", "Chat-formHelper": "_Chat-formHelper_14j71_60", "Chat-examplePrompts": "_Chat-examplePrompts_14j71_75", "Chat-examplePrompt": "_Chat-examplePrompt_14j71_75", "Chat-examplePromptArrow": "_Chat-examplePromptArrow_14j71_103", "Chat-default": "_Chat-default_14j71_107", "ChatMessage": "_ChatMessage_14j71_124", "ChatMessage--userRole": "_ChatMessage--userRole_14j71_129", "ChatMessage-text": "_ChatMessage-text_14j71_129", "ChatMessage-data": "_ChatMessage-data_14j71_219", "ChatMessage-dataInner": "_ChatMessage-dataInner_14j71_230", "ChatMessage-dataIcon": "_ChatMessage-dataIcon_14j71_236", "Chat-loader": "_Chat-loader_14j71_240", "Chat-error": "_Chat-error_14j71_245", "Chat-errorLabel": "_Chat-errorLabel_14j71_254", "Chat-errorAction": "_Chat-errorAction_14j71_258" };
|
|
21286
21270
|
|
|
21287
21271
|
// src/components/PromptForm/index.tsx
|
|
21288
21272
|
init_react_import();
|
|
21289
|
-
var
|
|
21273
|
+
var import_react15 = require("react");
|
|
21290
21274
|
|
|
21291
21275
|
// css-module:/home/runner/work/puck-platform/puck-platform/packages/plugin-ai/src/components/PromptForm/styles.module.css#css-module
|
|
21292
21276
|
init_react_import();
|
|
21293
21277
|
var styles_module_default4 = { "PromptForm": "_PromptForm_136g1_1", "PromptForm-inner": "_PromptForm-inner_136g1_8", "PromptForm--dark": "_PromptForm--dark_136g1_14", "PromptForm--glow": "_PromptForm--glow_136g1_19", "PromptForm-glow": "_PromptForm-glow_136g1_19", "loop": "_loop_136g1_1", "PromptForm-formInner": "_PromptForm-formInner_136g1_60", "PromptForm-input": "_PromptForm-input_136g1_64", "PromptForm--disabled": "_PromptForm--disabled_136g1_92", "PromptForm-helper": "_PromptForm-helper_136g1_97", "PromptForm-actions": "_PromptForm-actions_136g1_107", "PromptForm-actionsLeft": "_PromptForm-actionsLeft_136g1_118", "PromptForm-actionsRight": "_PromptForm-actionsRight_136g1_124", "PromptForm-actionSubmit": "_PromptForm-actionSubmit_136g1_128", "PromptForm--isDisabled": "_PromptForm--isDisabled_136g1_147", "PromptForm--isLoading": "_PromptForm--isLoading_136g1_152" };
|
|
21294
21278
|
|
|
21295
21279
|
// src/components/PromptForm/index.tsx
|
|
21296
|
-
var
|
|
21297
|
-
var
|
|
21280
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
21281
|
+
var cx3 = getClassNameFactory2("PromptForm", styles_module_default4);
|
|
21298
21282
|
function PromptForm({
|
|
21299
21283
|
actions,
|
|
21300
21284
|
colorScheme = "light",
|
|
@@ -21306,8 +21290,8 @@ function PromptForm({
|
|
|
21306
21290
|
isLoading,
|
|
21307
21291
|
placeholder = "Create a page for..."
|
|
21308
21292
|
}) {
|
|
21309
|
-
const hasSetInitialPrompt = (0,
|
|
21310
|
-
const [prompt, setPrompt] = (0,
|
|
21293
|
+
const hasSetInitialPrompt = (0, import_react15.useRef)(false);
|
|
21294
|
+
const [prompt, setPrompt] = (0, import_react15.useState)("");
|
|
21311
21295
|
const sendPrompt = () => {
|
|
21312
21296
|
if (isLoading || isDisabled) return;
|
|
21313
21297
|
if (handleSubmit) {
|
|
@@ -21315,7 +21299,7 @@ function PromptForm({
|
|
|
21315
21299
|
}
|
|
21316
21300
|
setPrompt("");
|
|
21317
21301
|
};
|
|
21318
|
-
(0,
|
|
21302
|
+
(0, import_react15.useEffect)(() => {
|
|
21319
21303
|
const currentUrl = new URL(location.href);
|
|
21320
21304
|
const initialPrompt = currentUrl.searchParams.get("initialPrompt");
|
|
21321
21305
|
if (!hasSetInitialPrompt.current && initialPrompt && prompt === "") {
|
|
@@ -21323,31 +21307,31 @@ function PromptForm({
|
|
|
21323
21307
|
setPrompt(initialPrompt);
|
|
21324
21308
|
}
|
|
21325
21309
|
}, [setPrompt]);
|
|
21326
|
-
return /* @__PURE__ */ (0,
|
|
21310
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
21327
21311
|
"div",
|
|
21328
21312
|
{
|
|
21329
|
-
className:
|
|
21313
|
+
className: cx3({
|
|
21330
21314
|
isDisabled,
|
|
21331
21315
|
isLoading,
|
|
21332
21316
|
dark: colorScheme === "dark",
|
|
21333
21317
|
glow
|
|
21334
21318
|
}),
|
|
21335
21319
|
children: [
|
|
21336
|
-
helperText ? /* @__PURE__ */ (0,
|
|
21337
|
-
/* @__PURE__ */ (0,
|
|
21338
|
-
/* @__PURE__ */ (0,
|
|
21339
|
-
/* @__PURE__ */ (0,
|
|
21320
|
+
helperText ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx3("helper"), children: helperText }) : null,
|
|
21321
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx3("inner"), children: [
|
|
21322
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx3("glow") }),
|
|
21323
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
21340
21324
|
"form",
|
|
21341
21325
|
{
|
|
21342
21326
|
onSubmit: (e) => {
|
|
21343
21327
|
e.preventDefault();
|
|
21344
21328
|
sendPrompt();
|
|
21345
21329
|
},
|
|
21346
|
-
children: /* @__PURE__ */ (0,
|
|
21347
|
-
/* @__PURE__ */ (0,
|
|
21330
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx3("formInner"), children: [
|
|
21331
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
21348
21332
|
import_react_textarea_autosize.default,
|
|
21349
21333
|
{
|
|
21350
|
-
className:
|
|
21334
|
+
className: cx3("input"),
|
|
21351
21335
|
name: "prompt",
|
|
21352
21336
|
minRows: 2,
|
|
21353
21337
|
placeholder,
|
|
@@ -21368,15 +21352,15 @@ function PromptForm({
|
|
|
21368
21352
|
}
|
|
21369
21353
|
}
|
|
21370
21354
|
),
|
|
21371
|
-
/* @__PURE__ */ (0,
|
|
21372
|
-
/* @__PURE__ */ (0,
|
|
21373
|
-
/* @__PURE__ */ (0,
|
|
21355
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx3("actions"), children: [
|
|
21356
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx3("actionsLeft"), children: actions }),
|
|
21357
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx3("actionsRight"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
21374
21358
|
"button",
|
|
21375
21359
|
{
|
|
21376
|
-
className:
|
|
21360
|
+
className: cx3("actionSubmit"),
|
|
21377
21361
|
type: "submit",
|
|
21378
21362
|
disabled: isLoading,
|
|
21379
|
-
children: /* @__PURE__ */ (0,
|
|
21363
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ArrowUp, {})
|
|
21380
21364
|
}
|
|
21381
21365
|
) })
|
|
21382
21366
|
] })
|
|
@@ -21391,13 +21375,13 @@ function PromptForm({
|
|
|
21391
21375
|
|
|
21392
21376
|
// src/lib/context.ts
|
|
21393
21377
|
init_react_import();
|
|
21394
|
-
var
|
|
21395
|
-
var toolStatusContext = (0,
|
|
21378
|
+
var import_react16 = require("react");
|
|
21379
|
+
var toolStatusContext = (0, import_react16.createContext)({});
|
|
21396
21380
|
var ToolStatusProvider = toolStatusContext.Provider;
|
|
21397
21381
|
|
|
21398
21382
|
// src/components/ChatBody/index.tsx
|
|
21399
|
-
var
|
|
21400
|
-
var
|
|
21383
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
21384
|
+
var cx4 = getClassNameFactory2("Chat", styles_module_default3);
|
|
21401
21385
|
var cxMessage = getClassNameFactory2("ChatMessage", styles_module_default3);
|
|
21402
21386
|
function ChatBody({
|
|
21403
21387
|
children,
|
|
@@ -21412,17 +21396,17 @@ function ChatBody({
|
|
|
21412
21396
|
}) {
|
|
21413
21397
|
const { scrollRef, contentRef } = (0, import_use_stick_to_bottom.useStickToBottom)();
|
|
21414
21398
|
const hasMessages = messages && messages.length > 0;
|
|
21415
|
-
return /* @__PURE__ */ (0,
|
|
21416
|
-
children ? /* @__PURE__ */ (0,
|
|
21417
|
-
/* @__PURE__ */ (0,
|
|
21418
|
-
/* @__PURE__ */ (0,
|
|
21419
|
-
status === "submitted" && /* @__PURE__ */ (0,
|
|
21420
|
-
error45 && /* @__PURE__ */ (0,
|
|
21421
|
-
/* @__PURE__ */ (0,
|
|
21422
|
-
handleRetry && /* @__PURE__ */ (0,
|
|
21399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4({ hasMessages, hasChildren: !!children, hideInput }), children: [
|
|
21400
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("default"), children }) : null,
|
|
21401
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4("inner"), ref: scrollRef, children: [
|
|
21402
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("messages"), ref: contentRef, children: messages.toReversed().map((message) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatMessage, { message }, message.id)) }),
|
|
21403
|
+
status === "submitted" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, { size: 14 }) }),
|
|
21404
|
+
error45 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4("error"), children: [
|
|
21405
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("errorLabel"), children: "Something went wrong." }),
|
|
21406
|
+
handleRetry && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("errorAction"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { title: "Retry", onClick: handleRetry, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RotateCcw, { size: "14" }) }) })
|
|
21423
21407
|
] }),
|
|
21424
|
-
/* @__PURE__ */ (0,
|
|
21425
|
-
/* @__PURE__ */ (0,
|
|
21408
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx4("form"), children: [
|
|
21409
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
21426
21410
|
PromptForm,
|
|
21427
21411
|
{
|
|
21428
21412
|
glow: !hasMessages,
|
|
@@ -21432,19 +21416,19 @@ function ChatBody({
|
|
|
21432
21416
|
placeholder: "What do you want to build?"
|
|
21433
21417
|
}
|
|
21434
21418
|
),
|
|
21435
|
-
examplePrompts ? /* @__PURE__ */ (0,
|
|
21419
|
+
examplePrompts ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("examplePrompts"), children: examplePrompts }) : null
|
|
21436
21420
|
] })
|
|
21437
21421
|
] })
|
|
21438
21422
|
] });
|
|
21439
21423
|
}
|
|
21440
21424
|
function ChatMessage({ message }) {
|
|
21441
21425
|
const { role, parts } = message;
|
|
21442
|
-
return /* @__PURE__ */ (0,
|
|
21426
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
21443
21427
|
"div",
|
|
21444
21428
|
{
|
|
21445
21429
|
className: cxMessage({ [`${role}Role`]: true }),
|
|
21446
21430
|
"data-message-id": message.id,
|
|
21447
|
-
children: parts.map((part, i) => /* @__PURE__ */ (0,
|
|
21431
|
+
children: parts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
21448
21432
|
ChatMessagePart,
|
|
21449
21433
|
{
|
|
21450
21434
|
part,
|
|
@@ -21460,25 +21444,25 @@ function ChatMessageWrapper({
|
|
|
21460
21444
|
role
|
|
21461
21445
|
}) {
|
|
21462
21446
|
if (role === "assistant") {
|
|
21463
|
-
return /* @__PURE__ */ (0,
|
|
21447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_markdown.default, { children });
|
|
21464
21448
|
}
|
|
21465
|
-
return /* @__PURE__ */ (0,
|
|
21449
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children });
|
|
21466
21450
|
}
|
|
21467
21451
|
function ChatMessagePart({
|
|
21468
21452
|
part,
|
|
21469
21453
|
role
|
|
21470
21454
|
}) {
|
|
21471
21455
|
if (part.type === "text") {
|
|
21472
|
-
return /* @__PURE__ */ (0,
|
|
21456
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cxMessage("text"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChatMessageWrapper, { role, children: part.text }) });
|
|
21473
21457
|
}
|
|
21474
21458
|
if (part.type === "tool-createPage") {
|
|
21475
|
-
return /* @__PURE__ */ (0,
|
|
21459
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PuckTool, __spreadValues({}, part));
|
|
21476
21460
|
}
|
|
21477
21461
|
if (part.type === "tool-updatePage") {
|
|
21478
|
-
return /* @__PURE__ */ (0,
|
|
21462
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PuckTool, __spreadValues({}, part));
|
|
21479
21463
|
}
|
|
21480
21464
|
if (part.type === "tool-userTool") {
|
|
21481
|
-
return /* @__PURE__ */ (0,
|
|
21465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PuckTool, __spreadValues({}, part));
|
|
21482
21466
|
}
|
|
21483
21467
|
return null;
|
|
21484
21468
|
}
|
|
@@ -21487,30 +21471,30 @@ function PuckTool({
|
|
|
21487
21471
|
output,
|
|
21488
21472
|
defaultLabel = "Thinking..."
|
|
21489
21473
|
}) {
|
|
21490
|
-
const toolStatus = (0,
|
|
21474
|
+
const toolStatus = (0, import_react17.useContext)(toolStatusContext)[toolCallId];
|
|
21491
21475
|
const outputObj = output;
|
|
21492
21476
|
const status = outputObj && "status" in outputObj ? outputObj.status : toolStatus != null ? toolStatus : { loading: true, label: defaultLabel };
|
|
21493
|
-
return /* @__PURE__ */ (0,
|
|
21477
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolStatus, { status });
|
|
21494
21478
|
}
|
|
21495
21479
|
function ToolStatus({ status }) {
|
|
21496
|
-
return /* @__PURE__ */ (0,
|
|
21497
|
-
/* @__PURE__ */ (0,
|
|
21498
|
-
/* @__PURE__ */ (0,
|
|
21480
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cxMessage("data"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cxMessage("dataInner"), children: [
|
|
21481
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cxMessage("dataIcon"), children: status.error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TriangleAlert, { size: 18 }) : status.loading ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Check, { size: 18 }) }),
|
|
21482
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: status.label })
|
|
21499
21483
|
] }) });
|
|
21500
21484
|
}
|
|
21501
21485
|
function ExamplePrompt({
|
|
21502
21486
|
label,
|
|
21503
21487
|
href
|
|
21504
21488
|
}) {
|
|
21505
|
-
return /* @__PURE__ */ (0,
|
|
21506
|
-
/* @__PURE__ */ (0,
|
|
21507
|
-
/* @__PURE__ */ (0,
|
|
21489
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("a", { className: cx4("examplePrompt"), href, children: [
|
|
21490
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: label }),
|
|
21491
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx4("examplePromptArrow"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ArrowRight, { size: "16" }) })
|
|
21508
21492
|
] });
|
|
21509
21493
|
}
|
|
21510
21494
|
|
|
21511
21495
|
// src/components/Chat/index.tsx
|
|
21512
21496
|
var import_qler = __toESM(require("qler"));
|
|
21513
|
-
var
|
|
21497
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
21514
21498
|
var q = (0, import_qler.default)();
|
|
21515
21499
|
var BENCHMARK = false;
|
|
21516
21500
|
var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${(0, import_ulid.ulid)()}`;
|
|
@@ -21524,11 +21508,11 @@ function Chat2({
|
|
|
21524
21508
|
}) {
|
|
21525
21509
|
const puckDispatch = usePuck((s) => s.dispatch);
|
|
21526
21510
|
const getPuck = (0, import_puck2.useGetPuck)();
|
|
21527
|
-
const localChatId = (0,
|
|
21528
|
-
const inputRef = (0,
|
|
21529
|
-
const pluginRef = (0,
|
|
21530
|
-
const [error45, setError] = (0,
|
|
21531
|
-
const [toolStatus, setToolStatus] = (0,
|
|
21511
|
+
const localChatId = (0, import_react19.useRef)(chatId);
|
|
21512
|
+
const inputRef = (0, import_react19.useRef)(null);
|
|
21513
|
+
const pluginRef = (0, import_react19.useRef)(null);
|
|
21514
|
+
const [error45, setError] = (0, import_react19.useState)();
|
|
21515
|
+
const [toolStatus, setToolStatus] = (0, import_react19.useState)({});
|
|
21532
21516
|
const { messages, status, sendMessage, regenerate } = useChat({
|
|
21533
21517
|
generateId: () => prefixedUlid("msg"),
|
|
21534
21518
|
messages: initialMessages,
|
|
@@ -21582,7 +21566,6 @@ function Chat2({
|
|
|
21582
21566
|
case "data-build-op": {
|
|
21583
21567
|
const data = dataPart.data;
|
|
21584
21568
|
q.queue(() => {
|
|
21585
|
-
var _a17, _b, _c, _d;
|
|
21586
21569
|
const puckDispatch2 = getPuck().dispatch;
|
|
21587
21570
|
try {
|
|
21588
21571
|
if (data.op === "add") {
|
|
@@ -21629,13 +21612,11 @@ function Chat2({
|
|
|
21629
21612
|
recordHistory: false
|
|
21630
21613
|
});
|
|
21631
21614
|
} else if (data.op === "updateRoot") {
|
|
21632
|
-
const
|
|
21633
|
-
const existing = appState.data.root;
|
|
21634
|
-
const defaultProps = (_b = (_a17 = config2.root) == null ? void 0 : _a17.defaultProps) != null ? _b : {};
|
|
21615
|
+
const existing = getPuck().appState.data.root;
|
|
21635
21616
|
puckDispatch2({
|
|
21636
21617
|
type: "replaceRoot",
|
|
21637
21618
|
root: __spreadProps(__spreadValues({}, existing), {
|
|
21638
|
-
props: __spreadValues(__spreadValues(
|
|
21619
|
+
props: __spreadValues(__spreadValues({}, existing.props), data.props)
|
|
21639
21620
|
}),
|
|
21640
21621
|
recordHistory: false
|
|
21641
21622
|
});
|
|
@@ -21681,11 +21662,9 @@ function Chat2({
|
|
|
21681
21662
|
recordHistory: false
|
|
21682
21663
|
});
|
|
21683
21664
|
} else if (data.op === "reset") {
|
|
21684
|
-
const { config: config2 } = getPuck();
|
|
21685
|
-
const defaultRootProps = (_d = (_c = config2.root) == null ? void 0 : _c.defaultProps) != null ? _d : {};
|
|
21686
21665
|
puckDispatch2({
|
|
21687
21666
|
type: "setData",
|
|
21688
|
-
data: { content: [], root:
|
|
21667
|
+
data: { content: [], root: {} },
|
|
21689
21668
|
recordHistory: false
|
|
21690
21669
|
});
|
|
21691
21670
|
} else {
|
|
@@ -21738,7 +21717,7 @@ function Chat2({
|
|
|
21738
21717
|
console.error(e);
|
|
21739
21718
|
});
|
|
21740
21719
|
};
|
|
21741
|
-
const messagesWithStatuses = (0,
|
|
21720
|
+
const messagesWithStatuses = (0, import_react19.useMemo)(() => {
|
|
21742
21721
|
return messages.map((msg) => {
|
|
21743
21722
|
return __spreadProps(__spreadValues({}, msg), {
|
|
21744
21723
|
parts: msg.parts.map((part) => {
|
|
@@ -21750,22 +21729,22 @@ function Chat2({
|
|
|
21750
21729
|
});
|
|
21751
21730
|
});
|
|
21752
21731
|
}, [messages, toolStatus]);
|
|
21753
|
-
return /* @__PURE__ */ (0,
|
|
21754
|
-
/* @__PURE__ */ (0,
|
|
21755
|
-
/* @__PURE__ */ (0,
|
|
21732
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName16(), ref: pluginRef, children: [
|
|
21733
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: getClassName16("header"), children: "AI page builder" }),
|
|
21734
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToolStatusProvider, { value: toolStatus, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
21756
21735
|
ChatBody,
|
|
21757
21736
|
{
|
|
21758
21737
|
messages: messagesWithStatuses,
|
|
21759
21738
|
handleSubmit,
|
|
21760
21739
|
inputRef,
|
|
21761
21740
|
status,
|
|
21762
|
-
examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href }) => /* @__PURE__ */ (0,
|
|
21741
|
+
examplePrompts: examplePrompts == null ? void 0 : examplePrompts.map(({ label, href }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExamplePrompt, { label, href }, label)),
|
|
21763
21742
|
error: error45,
|
|
21764
21743
|
handleRetry: () => {
|
|
21765
21744
|
setError("");
|
|
21766
21745
|
regenerate();
|
|
21767
21746
|
},
|
|
21768
|
-
children: /* @__PURE__ */ (0,
|
|
21747
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
21769
21748
|
Placeholder,
|
|
21770
21749
|
{
|
|
21771
21750
|
dispatch: puckDispatch,
|
|
@@ -21796,11 +21775,11 @@ function Placeholder({
|
|
|
21796
21775
|
}
|
|
21797
21776
|
}, 10);
|
|
21798
21777
|
};
|
|
21799
|
-
return /* @__PURE__ */ (0,
|
|
21800
|
-
/* @__PURE__ */ (0,
|
|
21801
|
-
/* @__PURE__ */ (0,
|
|
21802
|
-
/* @__PURE__ */ (0,
|
|
21803
|
-
/* @__PURE__ */ (0,
|
|
21778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName16("placeholder"), children: [
|
|
21779
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Bot, { size: "24" }),
|
|
21780
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: "Use AI to build a page using your own components" }),
|
|
21781
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: getClassName16("actions"), children: [
|
|
21782
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
21804
21783
|
"button",
|
|
21805
21784
|
{
|
|
21806
21785
|
className: getClassName16("action"),
|
|
@@ -21808,7 +21787,7 @@ function Placeholder({
|
|
|
21808
21787
|
children: "Enter prompt"
|
|
21809
21788
|
}
|
|
21810
21789
|
),
|
|
21811
|
-
/* @__PURE__ */ (0,
|
|
21790
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
21812
21791
|
"button",
|
|
21813
21792
|
{
|
|
21814
21793
|
className: getClassName16("actionOutlined"),
|
|
@@ -21832,13 +21811,13 @@ function isScrolledIntoView(el) {
|
|
|
21832
21811
|
}
|
|
21833
21812
|
|
|
21834
21813
|
// src/index.tsx
|
|
21835
|
-
var
|
|
21814
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
21836
21815
|
function createAIPlugin(opts) {
|
|
21837
21816
|
return {
|
|
21838
21817
|
label: "AI",
|
|
21839
21818
|
name: "ai",
|
|
21840
|
-
render: () => /* @__PURE__ */ (0,
|
|
21841
|
-
icon: /* @__PURE__ */ (0,
|
|
21819
|
+
render: () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Chat2, __spreadValues({}, opts)),
|
|
21820
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Bot, {}),
|
|
21842
21821
|
mobilePanelHeight: "min-content"
|
|
21843
21822
|
};
|
|
21844
21823
|
}
|