@puckeditor/plugin-ai 0.4.1-canary.8f053914 → 0.4.1-canary.a2068257
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 +129 -81
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +163 -116
- package/dist/index.mjs +169 -118
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -216,13 +216,6 @@ var createLucideIcon = (iconName, iconNode) => {
|
|
|
216
216
|
return Component;
|
|
217
217
|
};
|
|
218
218
|
|
|
219
|
-
// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.1.1/node_modules/lucide-react/dist/esm/icons/arrow-right.js
|
|
220
|
-
init_react_import();
|
|
221
|
-
var ArrowRight = createLucideIcon("ArrowRight", [
|
|
222
|
-
["path", { d: "M5 12h14", key: "1ays0h" }],
|
|
223
|
-
["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
|
|
224
|
-
]);
|
|
225
|
-
|
|
226
219
|
// ../../node_modules/.pnpm/lucide-react@0.452.0_react@19.1.1/node_modules/lucide-react/dist/esm/icons/arrow-up.js
|
|
227
220
|
init_react_import();
|
|
228
221
|
var ArrowUp = createLucideIcon("ArrowUp", [
|
|
@@ -479,7 +472,9 @@ function useChat({
|
|
|
479
472
|
|
|
480
473
|
// src/components/Chat/index.tsx
|
|
481
474
|
import { createUsePuck, useGetPuck } from "@measured/puck";
|
|
482
|
-
import {
|
|
475
|
+
import {
|
|
476
|
+
DefaultChatTransport
|
|
477
|
+
} from "ai";
|
|
483
478
|
import { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo3, useRef as useRef8, useState as useState12 } from "react";
|
|
484
479
|
import { ulid } from "ulid";
|
|
485
480
|
|
|
@@ -523,7 +518,9 @@ var styles_module_default = { "Chat": "_Chat_lckw1_1", "Chat-header": "_Chat-hea
|
|
|
523
518
|
|
|
524
519
|
// src/components/ChatBody/index.tsx
|
|
525
520
|
init_react_import();
|
|
526
|
-
import {
|
|
521
|
+
import {
|
|
522
|
+
useContext as useContext3
|
|
523
|
+
} from "react";
|
|
527
524
|
import { useStickToBottom } from "use-stick-to-bottom";
|
|
528
525
|
import Markdown from "react-markdown";
|
|
529
526
|
|
|
@@ -828,6 +825,18 @@ var Card_module_default = { "Card": "_Card_jzb6b_1", "Card-body": "_Card-body_jz
|
|
|
828
825
|
import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
829
826
|
var getClassName8 = get_class_name_factory_default2("Card", Card_module_default);
|
|
830
827
|
|
|
828
|
+
// ../platform-client/components/CardSelector/index.tsx
|
|
829
|
+
init_react_import();
|
|
830
|
+
|
|
831
|
+
// css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/CardSelector/styles.module.css#css-module
|
|
832
|
+
init_react_import();
|
|
833
|
+
var styles_module_default3 = { "CardSelector": "_CardSelector_1ogry_1", "CardSelectorOption": "_CardSelectorOption_1ogry_12", "CardSelectorOption--isSelected": "_CardSelectorOption--isSelected_1ogry_23", "CardSelectorOption--disabled": "_CardSelectorOption--disabled_1ogry_27", "CardSelectorOption-description": "_CardSelectorOption-description_1ogry_31", "CardSelectorOption-body": "_CardSelectorOption-body_1ogry_35" };
|
|
834
|
+
|
|
835
|
+
// ../platform-client/components/CardSelector/index.tsx
|
|
836
|
+
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
837
|
+
var cx = get_class_name_factory_default("CardSelector", styles_module_default3);
|
|
838
|
+
var cxOption = get_class_name_factory_default("CardSelectorOption", styles_module_default3);
|
|
839
|
+
|
|
831
840
|
// ../platform-client/components/Code/index.ts
|
|
832
841
|
init_react_import();
|
|
833
842
|
|
|
@@ -841,11 +850,11 @@ var Code_module_default = { "Code": "_Code_d4378_1", "Code-body": "_Code-body_d4
|
|
|
841
850
|
// ../platform-client/components/Code/CopyAction.tsx
|
|
842
851
|
init_react_import();
|
|
843
852
|
import { useEffect as useEffect6, useState as useState6 } from "react";
|
|
844
|
-
import { jsx as
|
|
853
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
845
854
|
|
|
846
855
|
// ../platform-client/components/Code/Code.tsx
|
|
847
856
|
import { useRef as useRef5, useState as useState7 } from "react";
|
|
848
|
-
import { jsx as
|
|
857
|
+
import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
849
858
|
var getClassName9 = get_class_name_factory_default("Code", Code_module_default);
|
|
850
859
|
var getClassNameTab = get_class_name_factory_default("Tab", Code_module_default);
|
|
851
860
|
|
|
@@ -861,7 +870,7 @@ init_react_import();
|
|
|
861
870
|
var IconButton_module_default = { "IconButton": "_IconButton_thegm_1", "IconButton--disabled": "_IconButton--disabled_thegm_20", "IconButton--dark": "_IconButton--dark_thegm_26", "IconButton-title": "_IconButton-title_thegm_37" };
|
|
862
871
|
|
|
863
872
|
// ../platform-client/components/IconButton/IconButton.tsx
|
|
864
|
-
import { Fragment as Fragment2, jsx as
|
|
873
|
+
import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
865
874
|
var getClassName10 = get_class_name_factory_default2("IconButton", IconButton_module_default);
|
|
866
875
|
var IconButton = ({
|
|
867
876
|
children,
|
|
@@ -878,7 +887,7 @@ var IconButton = ({
|
|
|
878
887
|
}) => {
|
|
879
888
|
const [loading, setLoading] = useState8(false);
|
|
880
889
|
const ElementType = href ? "a" : onClick ? "button" : "div";
|
|
881
|
-
const el = /* @__PURE__ */
|
|
890
|
+
const el = /* @__PURE__ */ jsxs8(
|
|
882
891
|
ElementType,
|
|
883
892
|
{
|
|
884
893
|
className: getClassName10({
|
|
@@ -903,11 +912,11 @@ var IconButton = ({
|
|
|
903
912
|
href,
|
|
904
913
|
title,
|
|
905
914
|
children: [
|
|
906
|
-
/* @__PURE__ */
|
|
915
|
+
/* @__PURE__ */ jsx13("span", { className: getClassName10("title"), children: title }),
|
|
907
916
|
children,
|
|
908
|
-
loading && /* @__PURE__ */
|
|
917
|
+
loading && /* @__PURE__ */ jsxs8(Fragment2, { children: [
|
|
909
918
|
"\xA0\xA0",
|
|
910
|
-
/* @__PURE__ */
|
|
919
|
+
/* @__PURE__ */ jsx13(Loader, { size: 14 })
|
|
911
920
|
] })
|
|
912
921
|
]
|
|
913
922
|
}
|
|
@@ -926,17 +935,17 @@ init_react_import();
|
|
|
926
935
|
var InfoBar_module_default = { "InfoBar": "_InfoBar_kchdj_1", "Info": "_Info_kchdj_1", "Info-title": "_Info-title_kchdj_21" };
|
|
927
936
|
|
|
928
937
|
// ../platform-client/components/InfoBar/InfoBar.tsx
|
|
929
|
-
import { jsx as
|
|
930
|
-
var
|
|
938
|
+
import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
939
|
+
var cx2 = getClassNameFactory2("InfoBar", InfoBar_module_default);
|
|
931
940
|
var cxInfo = getClassNameFactory2("Info", InfoBar_module_default);
|
|
932
941
|
var Info = ({ title, children }) => {
|
|
933
|
-
return /* @__PURE__ */
|
|
934
|
-
/* @__PURE__ */
|
|
935
|
-
/* @__PURE__ */
|
|
942
|
+
return /* @__PURE__ */ jsxs9("div", { className: cxInfo(), children: [
|
|
943
|
+
/* @__PURE__ */ jsx14("div", { className: cxInfo("title"), children: title }),
|
|
944
|
+
/* @__PURE__ */ jsx14("div", { className: cxInfo("children"), children })
|
|
936
945
|
] });
|
|
937
946
|
};
|
|
938
947
|
var InfoBar = ({ children }) => {
|
|
939
|
-
return /* @__PURE__ */
|
|
948
|
+
return /* @__PURE__ */ jsx14("div", { className: cx2(), children });
|
|
940
949
|
};
|
|
941
950
|
InfoBar.Info = Info;
|
|
942
951
|
|
|
@@ -951,7 +960,7 @@ init_react_import();
|
|
|
951
960
|
var Inline_module_default = { "Inline": "_Inline_6o5on_3", "Inline-inner": "_Inline-inner_6o5on_7", "Inline--noWrap": "_Inline--noWrap_6o5on_12", "Inline--sizeNONE": "_Inline--sizeNONE_6o5on_16", "Inline--sizeXXS": "_Inline--sizeXXS_6o5on_20", "Inline--sizeXS": "_Inline--sizeXS_6o5on_24", "Inline--sizeS": "_Inline--sizeS_6o5on_28", "Inline--sizeM": "_Inline--sizeM_6o5on_32", "Inline--sizeL": "_Inline--sizeL_6o5on_36", "Inline--center": "_Inline--center_6o5on_40", "Inline--centerH": "_Inline--centerH_6o5on_44", "Inline--grow": "_Inline--grow_6o5on_48" };
|
|
952
961
|
|
|
953
962
|
// ../platform-client/components/Inline/Inline.tsx
|
|
954
|
-
import { jsx as
|
|
963
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
955
964
|
var getClassName11 = get_class_name_factory_default2("Inline", Inline_module_default);
|
|
956
965
|
var Inline = ({
|
|
957
966
|
children,
|
|
@@ -960,7 +969,7 @@ var Inline = ({
|
|
|
960
969
|
size = "m",
|
|
961
970
|
noWrap,
|
|
962
971
|
centerH
|
|
963
|
-
}) => /* @__PURE__ */
|
|
972
|
+
}) => /* @__PURE__ */ jsx15(
|
|
964
973
|
"div",
|
|
965
974
|
{
|
|
966
975
|
className: getClassName11({
|
|
@@ -970,7 +979,7 @@ var Inline = ({
|
|
|
970
979
|
noWrap,
|
|
971
980
|
[`size${size.toUpperCase()}`]: size
|
|
972
981
|
}),
|
|
973
|
-
children: /* @__PURE__ */
|
|
982
|
+
children: /* @__PURE__ */ jsx15("div", { className: getClassName11("inner"), children })
|
|
974
983
|
}
|
|
975
984
|
);
|
|
976
985
|
var InlineItem = ({
|
|
@@ -978,7 +987,7 @@ var InlineItem = ({
|
|
|
978
987
|
grow,
|
|
979
988
|
push,
|
|
980
989
|
shrink
|
|
981
|
-
}) => /* @__PURE__ */
|
|
990
|
+
}) => /* @__PURE__ */ jsx15(
|
|
982
991
|
"div",
|
|
983
992
|
{
|
|
984
993
|
style: {
|
|
@@ -1003,7 +1012,7 @@ init_react_import();
|
|
|
1003
1012
|
var Link_module_default = { "Link": "_Link_1j70m_1" };
|
|
1004
1013
|
|
|
1005
1014
|
// ../platform-client/components/Link/Link.tsx
|
|
1006
|
-
import { jsx as
|
|
1015
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
1007
1016
|
var getClassName12 = get_class_name_factory_default2("Link", Link_module_default);
|
|
1008
1017
|
|
|
1009
1018
|
// ../platform-client/components/Modal/index.ts
|
|
@@ -1020,8 +1029,8 @@ init_react_import();
|
|
|
1020
1029
|
var Page_module_default = { "Page": "_Page_nkzj9_1", "Page-masthead": "_Page-masthead_nkzj9_8", "Page-crumbs": "_Page-crumbs_nkzj9_18", "Page-crumb": "_Page-crumb_nkzj9_18", "Page-crumbLink": "_Page-crumbLink_nkzj9_29", "Page-actions": "_Page-actions_nkzj9_61", "Page-footer": "_Page-footer_nkzj9_65" };
|
|
1021
1030
|
|
|
1022
1031
|
// ../platform-client/components/Page/Page.tsx
|
|
1023
|
-
import { jsx as
|
|
1024
|
-
var
|
|
1032
|
+
import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1033
|
+
var cx3 = getClassNameFactory2("Page", Page_module_default);
|
|
1025
1034
|
|
|
1026
1035
|
// ../platform-client/components/Pagination/index.ts
|
|
1027
1036
|
init_react_import();
|
|
@@ -1035,8 +1044,8 @@ init_react_import();
|
|
|
1035
1044
|
var Pagination_module_default = { "Pagination": "_Pagination_1okv2_1", "PaginationButton": "_PaginationButton_1okv2_8", "PaginationButton--isActive": "_PaginationButton--isActive_1okv2_20", "Pagination-ellipsis": "_Pagination-ellipsis_1okv2_30" };
|
|
1036
1045
|
|
|
1037
1046
|
// ../platform-client/components/Pagination/Pagination.tsx
|
|
1038
|
-
import { jsx as
|
|
1039
|
-
var
|
|
1047
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
1048
|
+
var cx4 = getClassNameFactory2("Pagination", Pagination_module_default);
|
|
1040
1049
|
var cxButton = getClassNameFactory2("PaginationButton", Pagination_module_default);
|
|
1041
1050
|
|
|
1042
1051
|
// ../platform-client/components/Section/index.ts
|
|
@@ -1050,7 +1059,7 @@ init_react_import();
|
|
|
1050
1059
|
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" };
|
|
1051
1060
|
|
|
1052
1061
|
// ../platform-client/components/Section/Section.tsx
|
|
1053
|
-
import { jsx as
|
|
1062
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1054
1063
|
var getClassName13 = getClassNameFactory2("Section", Section_module_default);
|
|
1055
1064
|
|
|
1056
1065
|
// ../platform-client/components/StatusTag/index.ts
|
|
@@ -1070,11 +1079,11 @@ init_react_import();
|
|
|
1070
1079
|
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" };
|
|
1071
1080
|
|
|
1072
1081
|
// ../platform-client/components/Tag/Tag.tsx
|
|
1073
|
-
import { jsx as
|
|
1082
|
+
import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1074
1083
|
var getClassName14 = getClassNameFactory2("Tag", Tag_module_default);
|
|
1075
1084
|
|
|
1076
1085
|
// ../platform-client/components/StatusTag/StatusTag.tsx
|
|
1077
|
-
import { jsx as
|
|
1086
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
1078
1087
|
|
|
1079
1088
|
// ../platform-client/components/Table/index.ts
|
|
1080
1089
|
init_react_import();
|
|
@@ -1088,7 +1097,7 @@ init_react_import();
|
|
|
1088
1097
|
var Table_module_default = { "Table": "_Table_o345u_1", "Table-filters": "_Table-filters_o345u_9", "Table-inner": "_Table-inner_o345u_13", "Table-table": "_Table-table_o345u_17", "Table--hideHeader": "_Table--hideHeader_o345u_41", "Table-footer": "_Table-footer_o345u_89", "Table--clickableRows": "_Table--clickableRows_o345u_93", "Table-placeholder": "_Table-placeholder_o345u_98", "Table-loader": "_Table-loader_o345u_110", "TableRow--highlightRow": "_TableRow--highlightRow_o345u_114" };
|
|
1089
1098
|
|
|
1090
1099
|
// ../platform-client/components/Table/Table.tsx
|
|
1091
|
-
import { jsx as
|
|
1100
|
+
import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1092
1101
|
var getClassName15 = get_class_name_factory_default2("Table", Table_module_default);
|
|
1093
1102
|
var getRowClassName = get_class_name_factory_default2("TableRow", Table_module_default);
|
|
1094
1103
|
|
|
@@ -1107,7 +1116,7 @@ init_react_import();
|
|
|
1107
1116
|
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" };
|
|
1108
1117
|
|
|
1109
1118
|
// ../platform-client/components/VerticalSpace/VerticalSpace.tsx
|
|
1110
|
-
import { jsx as
|
|
1119
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
1111
1120
|
var getClassName16 = get_class_name_factory_default2("VerticalSpace", VerticalSpace_module_default);
|
|
1112
1121
|
|
|
1113
1122
|
// ../platform-client/components/Viewport/index.tsx
|
|
@@ -1115,21 +1124,21 @@ init_react_import();
|
|
|
1115
1124
|
|
|
1116
1125
|
// css-module:/home/runner/work/puck-platform/puck-platform/packages/platform-client/components/Viewport/styles.module.css#css-module
|
|
1117
1126
|
init_react_import();
|
|
1118
|
-
var
|
|
1127
|
+
var styles_module_default4 = { "Viewport": "_Viewport_1vvhm_3", "Viewport--standard": "_Viewport--standard_1vvhm_6", "Viewport--inline": "_Viewport--inline_1vvhm_7", "Viewport--narrow": "_Viewport--narrow_1vvhm_11", "Viewport--flex": "_Viewport--flex_1vvhm_19" };
|
|
1119
1128
|
|
|
1120
1129
|
// ../platform-client/components/Viewport/index.tsx
|
|
1121
|
-
import { jsx as
|
|
1122
|
-
var
|
|
1130
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
1131
|
+
var cx5 = getClassNameFactory("Viewport", styles_module_default4);
|
|
1123
1132
|
|
|
1124
1133
|
// ../platform-client/context/editor.tsx
|
|
1125
1134
|
init_react_import();
|
|
1126
1135
|
import { createContext as createContext2, useContext as useContext2, useState as useState10 } from "react";
|
|
1127
|
-
import { jsx as
|
|
1136
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
1128
1137
|
var ctx = createContext2({});
|
|
1129
1138
|
|
|
1130
1139
|
// css-module:/home/runner/work/puck-platform/puck-platform/packages/plugin-ai/src/components/ChatBody/styles.module.css#css-module
|
|
1131
1140
|
init_react_import();
|
|
1132
|
-
var
|
|
1141
|
+
var styles_module_default5 = { "Chat": "_Chat_1njo2_1", "Chat-inner": "_Chat-inner_1njo2_17", "Chat--hasMessages": "_Chat--hasMessages_1njo2_25", "Chat--hasChildren": "_Chat--hasChildren_1njo2_29", "Chat-messages": "_Chat-messages_1njo2_34", "Chat-form": "_Chat-form_1njo2_41", "Chat--hideInput": "_Chat--hideInput_1njo2_46", "Chat-formHelper": "_Chat-formHelper_1njo2_60", "Chat-examplePrompts": "_Chat-examplePrompts_1njo2_75", "Chat-examplePrompt": "_Chat-examplePrompt_1njo2_75", "Chat-examplePromptArrow": "_Chat-examplePromptArrow_1njo2_105", "Chat-default": "_Chat-default_1njo2_110", "ChatMessage": "_ChatMessage_1njo2_127", "ChatMessage--userRole": "_ChatMessage--userRole_1njo2_133", "ChatMessage-text": "_ChatMessage-text_1njo2_133", "ChatMessage-data": "_ChatMessage-data_1njo2_231", "ChatMessage-dataInner": "_ChatMessage-dataInner_1njo2_242", "ChatMessage-dataIcon": "_ChatMessage-dataIcon_1njo2_248", "Chat-loader": "_Chat-loader_1njo2_252", "Chat-error": "_Chat-error_1njo2_257", "Chat-errorLabel": "_Chat-errorLabel_1njo2_266", "Chat-errorAction": "_Chat-errorAction_1njo2_270" };
|
|
1133
1142
|
|
|
1134
1143
|
// src/components/PromptForm/index.tsx
|
|
1135
1144
|
init_react_import();
|
|
@@ -1141,11 +1150,11 @@ import {
|
|
|
1141
1150
|
|
|
1142
1151
|
// css-module:/home/runner/work/puck-platform/puck-platform/packages/plugin-ai/src/components/PromptForm/styles.module.css#css-module
|
|
1143
1152
|
init_react_import();
|
|
1144
|
-
var
|
|
1153
|
+
var styles_module_default6 = { "PromptForm": "_PromptForm_1r4kq_1", "PromptForm-inner": "_PromptForm-inner_1r4kq_8", "PromptForm--dark": "_PromptForm--dark_1r4kq_14", "PromptForm--glow": "_PromptForm--glow_1r4kq_19", "PromptForm-glow": "_PromptForm-glow_1r4kq_19", "loop": "_loop_1r4kq_1", "PromptForm-formInner": "_PromptForm-formInner_1r4kq_60", "PromptForm-input": "_PromptForm-input_1r4kq_66", "PromptForm--disabled": "_PromptForm--disabled_1r4kq_97", "PromptForm-helper": "_PromptForm-helper_1r4kq_102", "PromptForm-actions": "_PromptForm-actions_1r4kq_112", "PromptForm-actionsLeft": "_PromptForm-actionsLeft_1r4kq_123", "PromptForm-actionsRight": "_PromptForm-actionsRight_1r4kq_130", "PromptForm-actionSubmit": "_PromptForm-actionSubmit_1r4kq_135", "PromptForm--userCta": "_PromptForm--userCta_1r4kq_149", "PromptForm--isDisabled": "_PromptForm--isDisabled_1r4kq_157", "PromptForm--isLoading": "_PromptForm--isLoading_1r4kq_162" };
|
|
1145
1154
|
|
|
1146
1155
|
// src/components/PromptForm/index.tsx
|
|
1147
|
-
import { jsx as
|
|
1148
|
-
var
|
|
1156
|
+
import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1157
|
+
var cx6 = getClassNameFactory2("PromptForm", styles_module_default6);
|
|
1149
1158
|
function PromptForm({
|
|
1150
1159
|
actions,
|
|
1151
1160
|
colorScheme = "light",
|
|
@@ -1155,10 +1164,18 @@ function PromptForm({
|
|
|
1155
1164
|
inputRef,
|
|
1156
1165
|
isDisabled,
|
|
1157
1166
|
isLoading,
|
|
1158
|
-
placeholder = "Create a page for..."
|
|
1167
|
+
placeholder = "Create a page for...",
|
|
1168
|
+
cta,
|
|
1169
|
+
minRows = 2,
|
|
1170
|
+
maxRows = 5,
|
|
1171
|
+
value = ""
|
|
1159
1172
|
}) {
|
|
1160
1173
|
const hasSetInitialPrompt = useRef7(false);
|
|
1161
|
-
const [prompt, setPrompt] = useState11(
|
|
1174
|
+
const [prompt, setPrompt] = useState11(value);
|
|
1175
|
+
const internalRef = useRef7(null);
|
|
1176
|
+
useEffect8(() => {
|
|
1177
|
+
setPrompt(value);
|
|
1178
|
+
}, [setPrompt, value]);
|
|
1162
1179
|
const sendPrompt = () => {
|
|
1163
1180
|
if (isLoading || isDisabled) return;
|
|
1164
1181
|
if (handleSubmit) {
|
|
@@ -1174,37 +1191,44 @@ function PromptForm({
|
|
|
1174
1191
|
setPrompt(initialPrompt);
|
|
1175
1192
|
}
|
|
1176
1193
|
}, [setPrompt]);
|
|
1177
|
-
return /* @__PURE__ */
|
|
1194
|
+
return /* @__PURE__ */ jsxs13(
|
|
1178
1195
|
"div",
|
|
1179
1196
|
{
|
|
1180
|
-
className:
|
|
1197
|
+
className: cx6({
|
|
1181
1198
|
isDisabled,
|
|
1182
1199
|
isLoading,
|
|
1183
1200
|
dark: colorScheme === "dark",
|
|
1184
|
-
glow
|
|
1201
|
+
glow,
|
|
1202
|
+
userCta: !!cta
|
|
1185
1203
|
}),
|
|
1186
1204
|
children: [
|
|
1187
|
-
helperText ? /* @__PURE__ */
|
|
1188
|
-
/* @__PURE__ */
|
|
1189
|
-
/* @__PURE__ */
|
|
1190
|
-
/* @__PURE__ */
|
|
1205
|
+
helperText ? /* @__PURE__ */ jsx26("div", { className: cx6("helper"), children: helperText }) : null,
|
|
1206
|
+
/* @__PURE__ */ jsxs13("div", { className: cx6("inner"), children: [
|
|
1207
|
+
/* @__PURE__ */ jsx26("span", { className: cx6("glow") }),
|
|
1208
|
+
/* @__PURE__ */ jsx26(
|
|
1191
1209
|
"form",
|
|
1192
1210
|
{
|
|
1193
1211
|
onSubmit: (e) => {
|
|
1194
1212
|
e.preventDefault();
|
|
1195
1213
|
sendPrompt();
|
|
1196
1214
|
},
|
|
1197
|
-
children: /* @__PURE__ */
|
|
1198
|
-
/* @__PURE__ */
|
|
1215
|
+
children: /* @__PURE__ */ jsxs13("div", { className: cx6("formInner"), children: [
|
|
1216
|
+
/* @__PURE__ */ jsx26(
|
|
1199
1217
|
default2,
|
|
1200
1218
|
{
|
|
1201
|
-
className:
|
|
1219
|
+
className: cx6("input"),
|
|
1202
1220
|
name: "prompt",
|
|
1203
|
-
minRows
|
|
1221
|
+
minRows,
|
|
1222
|
+
maxRows,
|
|
1204
1223
|
placeholder,
|
|
1205
1224
|
disabled: isDisabled,
|
|
1206
1225
|
value: prompt,
|
|
1207
|
-
ref:
|
|
1226
|
+
ref: (node) => {
|
|
1227
|
+
if (inputRef) {
|
|
1228
|
+
inputRef.current = node;
|
|
1229
|
+
}
|
|
1230
|
+
internalRef.current = node;
|
|
1231
|
+
},
|
|
1208
1232
|
onChange: (e) => setPrompt(e.target.value),
|
|
1209
1233
|
onKeyDown: (e) => {
|
|
1210
1234
|
if (!e.shiftKey && e.key === "Enter") {
|
|
@@ -1219,18 +1243,41 @@ function PromptForm({
|
|
|
1219
1243
|
}
|
|
1220
1244
|
}
|
|
1221
1245
|
),
|
|
1222
|
-
/* @__PURE__ */
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
"
|
|
1226
|
-
{
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1246
|
+
/* @__PURE__ */ jsxs13(
|
|
1247
|
+
"div",
|
|
1248
|
+
{
|
|
1249
|
+
className: cx6("actions"),
|
|
1250
|
+
onClick: () => {
|
|
1251
|
+
internalRef?.current?.focus();
|
|
1252
|
+
},
|
|
1253
|
+
children: [
|
|
1254
|
+
/* @__PURE__ */ jsx26(
|
|
1255
|
+
"div",
|
|
1256
|
+
{
|
|
1257
|
+
className: cx6("actionsLeft"),
|
|
1258
|
+
onClick: (e) => e.stopPropagation(),
|
|
1259
|
+
children: actions
|
|
1260
|
+
}
|
|
1261
|
+
),
|
|
1262
|
+
/* @__PURE__ */ jsx26(
|
|
1263
|
+
"div",
|
|
1264
|
+
{
|
|
1265
|
+
className: cx6("actionsRight"),
|
|
1266
|
+
onClick: (e) => e.stopPropagation(),
|
|
1267
|
+
children: /* @__PURE__ */ jsx26(
|
|
1268
|
+
"button",
|
|
1269
|
+
{
|
|
1270
|
+
className: cx6("actionSubmit"),
|
|
1271
|
+
type: "submit",
|
|
1272
|
+
disabled: isLoading,
|
|
1273
|
+
children: cta ?? /* @__PURE__ */ jsx26(ArrowUp, { size: 24 })
|
|
1274
|
+
}
|
|
1275
|
+
)
|
|
1276
|
+
}
|
|
1277
|
+
)
|
|
1278
|
+
]
|
|
1279
|
+
}
|
|
1280
|
+
)
|
|
1234
1281
|
] })
|
|
1235
1282
|
}
|
|
1236
1283
|
)
|
|
@@ -1247,9 +1294,9 @@ var toolStatusContext = createContext3({});
|
|
|
1247
1294
|
var ToolStatusProvider = toolStatusContext.Provider;
|
|
1248
1295
|
|
|
1249
1296
|
// src/components/ChatBody/index.tsx
|
|
1250
|
-
import { jsx as
|
|
1251
|
-
var
|
|
1252
|
-
var cxMessage = getClassNameFactory2("ChatMessage",
|
|
1297
|
+
import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1298
|
+
var cx7 = getClassNameFactory2("Chat", styles_module_default5);
|
|
1299
|
+
var cxMessage = getClassNameFactory2("ChatMessage", styles_module_default5);
|
|
1253
1300
|
function ChatBody({
|
|
1254
1301
|
children,
|
|
1255
1302
|
examplePrompts,
|
|
@@ -1263,17 +1310,17 @@ function ChatBody({
|
|
|
1263
1310
|
}) {
|
|
1264
1311
|
const { scrollRef, contentRef } = useStickToBottom();
|
|
1265
1312
|
const hasMessages = messages && messages.length > 0;
|
|
1266
|
-
return /* @__PURE__ */
|
|
1267
|
-
children ? /* @__PURE__ */
|
|
1268
|
-
/* @__PURE__ */
|
|
1269
|
-
/* @__PURE__ */
|
|
1270
|
-
status === "submitted" && /* @__PURE__ */
|
|
1271
|
-
error && /* @__PURE__ */
|
|
1272
|
-
/* @__PURE__ */
|
|
1273
|
-
handleRetry && /* @__PURE__ */
|
|
1313
|
+
return /* @__PURE__ */ jsxs14("div", { className: cx7({ hasMessages, hasChildren: !!children, hideInput }), children: [
|
|
1314
|
+
children ? /* @__PURE__ */ jsx27("div", { className: cx7("default"), children }) : null,
|
|
1315
|
+
/* @__PURE__ */ jsxs14("div", { className: cx7("inner"), ref: scrollRef, children: [
|
|
1316
|
+
/* @__PURE__ */ jsx27("div", { className: cx7("messages"), ref: contentRef, children: messages.toReversed().map((message) => /* @__PURE__ */ jsx27(ChatMessage, { message }, message.id)) }),
|
|
1317
|
+
status === "submitted" && /* @__PURE__ */ jsx27("div", { className: cx7("loader"), children: /* @__PURE__ */ jsx27(Loader, { size: 14 }) }),
|
|
1318
|
+
error && /* @__PURE__ */ jsxs14("div", { className: cx7("error"), children: [
|
|
1319
|
+
/* @__PURE__ */ jsx27("div", { className: cx7("errorLabel"), children: "Something went wrong." }),
|
|
1320
|
+
handleRetry && /* @__PURE__ */ jsx27("div", { className: cx7("errorAction"), children: /* @__PURE__ */ jsx27(IconButton, { title: "Retry", onClick: handleRetry, children: /* @__PURE__ */ jsx27(RotateCcw, { size: "14" }) }) })
|
|
1274
1321
|
] }),
|
|
1275
|
-
/* @__PURE__ */
|
|
1276
|
-
/* @__PURE__ */
|
|
1322
|
+
/* @__PURE__ */ jsxs14("div", { className: cx7("form"), children: [
|
|
1323
|
+
/* @__PURE__ */ jsx27(
|
|
1277
1324
|
PromptForm,
|
|
1278
1325
|
{
|
|
1279
1326
|
glow: !hasMessages,
|
|
@@ -1283,19 +1330,19 @@ function ChatBody({
|
|
|
1283
1330
|
placeholder: "What do you want to build?"
|
|
1284
1331
|
}
|
|
1285
1332
|
),
|
|
1286
|
-
examplePrompts ? /* @__PURE__ */
|
|
1333
|
+
examplePrompts ? /* @__PURE__ */ jsx27("div", { className: cx7("examplePrompts"), children: examplePrompts }) : null
|
|
1287
1334
|
] })
|
|
1288
1335
|
] })
|
|
1289
1336
|
] });
|
|
1290
1337
|
}
|
|
1291
1338
|
function ChatMessage({ message }) {
|
|
1292
1339
|
const { role, parts } = message;
|
|
1293
|
-
return /* @__PURE__ */
|
|
1340
|
+
return /* @__PURE__ */ jsx27(
|
|
1294
1341
|
"div",
|
|
1295
1342
|
{
|
|
1296
1343
|
className: cxMessage({ [`${role}Role`]: true }),
|
|
1297
1344
|
"data-message-id": message.id,
|
|
1298
|
-
children: parts.map((part, i) => /* @__PURE__ */
|
|
1345
|
+
children: parts.map((part, i) => /* @__PURE__ */ jsx27(
|
|
1299
1346
|
ChatMessagePart,
|
|
1300
1347
|
{
|
|
1301
1348
|
part,
|
|
@@ -1311,25 +1358,25 @@ function ChatMessageWrapper({
|
|
|
1311
1358
|
role
|
|
1312
1359
|
}) {
|
|
1313
1360
|
if (role === "assistant" || role === "user") {
|
|
1314
|
-
return /* @__PURE__ */
|
|
1361
|
+
return /* @__PURE__ */ jsx27(Markdown, { children });
|
|
1315
1362
|
}
|
|
1316
|
-
return /* @__PURE__ */
|
|
1363
|
+
return /* @__PURE__ */ jsx27("span", { children });
|
|
1317
1364
|
}
|
|
1318
1365
|
function ChatMessagePart({
|
|
1319
1366
|
part,
|
|
1320
1367
|
role
|
|
1321
1368
|
}) {
|
|
1322
1369
|
if (part.type === "text") {
|
|
1323
|
-
return /* @__PURE__ */
|
|
1370
|
+
return /* @__PURE__ */ jsx27("div", { className: cxMessage("text"), children: /* @__PURE__ */ jsx27(ChatMessageWrapper, { role, children: part.text }) });
|
|
1324
1371
|
}
|
|
1325
1372
|
if (part.type === "tool-createPage") {
|
|
1326
|
-
return /* @__PURE__ */
|
|
1373
|
+
return /* @__PURE__ */ jsx27(PuckTool, { ...part });
|
|
1327
1374
|
}
|
|
1328
1375
|
if (part.type === "tool-updatePage") {
|
|
1329
|
-
return /* @__PURE__ */
|
|
1376
|
+
return /* @__PURE__ */ jsx27(PuckTool, { ...part });
|
|
1330
1377
|
}
|
|
1331
1378
|
if (part.type === "tool-userTool") {
|
|
1332
|
-
return /* @__PURE__ */
|
|
1379
|
+
return /* @__PURE__ */ jsx27(PuckTool, { ...part });
|
|
1333
1380
|
}
|
|
1334
1381
|
return null;
|
|
1335
1382
|
}
|
|
@@ -1341,12 +1388,12 @@ function PuckTool({
|
|
|
1341
1388
|
const toolStatus = useContext3(toolStatusContext)[toolCallId];
|
|
1342
1389
|
const outputObj = output;
|
|
1343
1390
|
const status = outputObj && "status" in outputObj ? outputObj.status : toolStatus ?? { loading: true, label: defaultLabel };
|
|
1344
|
-
return /* @__PURE__ */
|
|
1391
|
+
return /* @__PURE__ */ jsx27(ToolStatus, { status });
|
|
1345
1392
|
}
|
|
1346
1393
|
function ToolStatus({ status }) {
|
|
1347
|
-
return /* @__PURE__ */
|
|
1348
|
-
/* @__PURE__ */
|
|
1349
|
-
/* @__PURE__ */
|
|
1394
|
+
return /* @__PURE__ */ jsx27("div", { className: cxMessage("data"), children: /* @__PURE__ */ jsxs14("div", { className: cxMessage("dataInner"), children: [
|
|
1395
|
+
/* @__PURE__ */ jsx27("div", { className: cxMessage("dataIcon"), children: status.error ? /* @__PURE__ */ jsx27(TriangleAlert, { size: 18 }) : status.loading ? /* @__PURE__ */ jsx27(Loader, { size: 16 }) : /* @__PURE__ */ jsx27(Check, { size: 18 }) }),
|
|
1396
|
+
/* @__PURE__ */ jsx27("div", { children: status.label })
|
|
1350
1397
|
] }) });
|
|
1351
1398
|
}
|
|
1352
1399
|
function ExamplePrompt({
|
|
@@ -1355,9 +1402,9 @@ function ExamplePrompt({
|
|
|
1355
1402
|
onClick
|
|
1356
1403
|
}) {
|
|
1357
1404
|
const El = href ? "a" : "button";
|
|
1358
|
-
return /* @__PURE__ */
|
|
1359
|
-
/* @__PURE__ */
|
|
1360
|
-
/* @__PURE__ */
|
|
1405
|
+
return /* @__PURE__ */ jsxs14(El, { className: cx7("examplePrompt"), href, onClick, children: [
|
|
1406
|
+
/* @__PURE__ */ jsx27("div", { children: label }),
|
|
1407
|
+
/* @__PURE__ */ jsx27("div", { className: cx7("examplePromptArrow"), children: /* @__PURE__ */ jsx27(ArrowUp, { size: "16" }) })
|
|
1361
1408
|
] });
|
|
1362
1409
|
}
|
|
1363
1410
|
|
|
@@ -1505,7 +1552,7 @@ var dispatchOp = (operation, {
|
|
|
1505
1552
|
|
|
1506
1553
|
// src/components/Chat/index.tsx
|
|
1507
1554
|
import html2canvas from "html2canvas-pro";
|
|
1508
|
-
import { jsx as
|
|
1555
|
+
import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1509
1556
|
var q = qler();
|
|
1510
1557
|
var BENCHMARK = false;
|
|
1511
1558
|
var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid()}`;
|
|
@@ -1662,7 +1709,12 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
|
|
|
1662
1709
|
[status, forcedStatus]
|
|
1663
1710
|
);
|
|
1664
1711
|
useEffect9(() => {
|
|
1665
|
-
window.__PUCK_AI = {
|
|
1712
|
+
window.__PUCK_AI = {
|
|
1713
|
+
processData,
|
|
1714
|
+
setMessages,
|
|
1715
|
+
setStatus: setForcedStatus,
|
|
1716
|
+
sendMessage
|
|
1717
|
+
};
|
|
1666
1718
|
}, [processData]);
|
|
1667
1719
|
const handleSubmit = (prompt) => {
|
|
1668
1720
|
const text = prompt.trim();
|
|
@@ -1693,16 +1745,16 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
|
|
|
1693
1745
|
};
|
|
1694
1746
|
});
|
|
1695
1747
|
}, [messages, toolStatus]);
|
|
1696
|
-
return /* @__PURE__ */
|
|
1697
|
-
/* @__PURE__ */
|
|
1698
|
-
/* @__PURE__ */
|
|
1748
|
+
return /* @__PURE__ */ jsxs15("div", { className: getClassName17(), ref: pluginRef, children: [
|
|
1749
|
+
/* @__PURE__ */ jsx28("div", { className: getClassName17("header"), children: "AI page builder" }),
|
|
1750
|
+
/* @__PURE__ */ jsx28(ToolStatusProvider, { value: toolStatus, children: /* @__PURE__ */ jsx28(
|
|
1699
1751
|
ChatBody,
|
|
1700
1752
|
{
|
|
1701
1753
|
messages: messagesWithStatuses,
|
|
1702
1754
|
handleSubmit,
|
|
1703
1755
|
inputRef,
|
|
1704
1756
|
status: resolvedStatus,
|
|
1705
|
-
examplePrompts: examplePrompts?.map(({ label, href, onClick }) => /* @__PURE__ */
|
|
1757
|
+
examplePrompts: examplePrompts?.map(({ label, href, onClick }) => /* @__PURE__ */ jsx28(
|
|
1706
1758
|
ExamplePrompt,
|
|
1707
1759
|
{
|
|
1708
1760
|
label,
|
|
@@ -1716,7 +1768,7 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
|
|
|
1716
1768
|
setError("");
|
|
1717
1769
|
regenerate();
|
|
1718
1770
|
},
|
|
1719
|
-
children: /* @__PURE__ */
|
|
1771
|
+
children: /* @__PURE__ */ jsx28(
|
|
1720
1772
|
Placeholder,
|
|
1721
1773
|
{
|
|
1722
1774
|
dispatch: puckDispatch,
|
|
@@ -1746,11 +1798,11 @@ function Placeholder({
|
|
|
1746
1798
|
}
|
|
1747
1799
|
}, 10);
|
|
1748
1800
|
};
|
|
1749
|
-
return /* @__PURE__ */
|
|
1750
|
-
/* @__PURE__ */
|
|
1751
|
-
/* @__PURE__ */
|
|
1752
|
-
/* @__PURE__ */
|
|
1753
|
-
/* @__PURE__ */
|
|
1801
|
+
return /* @__PURE__ */ jsxs15("div", { className: getClassName17("placeholder"), children: [
|
|
1802
|
+
/* @__PURE__ */ jsx28(Bot, { size: "24" }),
|
|
1803
|
+
/* @__PURE__ */ jsx28("div", { children: "Use AI to build a page using the available blocks" }),
|
|
1804
|
+
/* @__PURE__ */ jsxs15("div", { className: getClassName17("actions"), children: [
|
|
1805
|
+
/* @__PURE__ */ jsx28(
|
|
1754
1806
|
"button",
|
|
1755
1807
|
{
|
|
1756
1808
|
className: getClassName17("action"),
|
|
@@ -1758,7 +1810,7 @@ function Placeholder({
|
|
|
1758
1810
|
children: "Enter prompt"
|
|
1759
1811
|
}
|
|
1760
1812
|
),
|
|
1761
|
-
/* @__PURE__ */
|
|
1813
|
+
/* @__PURE__ */ jsx28(
|
|
1762
1814
|
"button",
|
|
1763
1815
|
{
|
|
1764
1816
|
className: getClassName17("actionOutlined"),
|
|
@@ -1869,21 +1921,21 @@ var ScrollTracking = ({ children }) => {
|
|
|
1869
1921
|
};
|
|
1870
1922
|
|
|
1871
1923
|
// src/index.tsx
|
|
1872
|
-
import { Fragment as Fragment3, jsx as
|
|
1924
|
+
import { Fragment as Fragment3, jsx as jsx29 } from "react/jsx-runtime";
|
|
1873
1925
|
function createAiPlugin(opts) {
|
|
1874
1926
|
const { scrollTracking = true, ...rest } = opts || {};
|
|
1875
1927
|
return {
|
|
1876
1928
|
label: "AI",
|
|
1877
1929
|
name: "ai",
|
|
1878
|
-
render: () => /* @__PURE__ */
|
|
1879
|
-
icon: /* @__PURE__ */
|
|
1930
|
+
render: () => /* @__PURE__ */ jsx29(Chat2, { ...rest }),
|
|
1931
|
+
icon: /* @__PURE__ */ jsx29(Bot, {}),
|
|
1880
1932
|
mobilePanelHeight: "min-content",
|
|
1881
1933
|
overrides: {
|
|
1882
1934
|
preview: ({ children }) => {
|
|
1883
1935
|
if (scrollTracking) {
|
|
1884
|
-
return /* @__PURE__ */
|
|
1936
|
+
return /* @__PURE__ */ jsx29(ScrollTracking, { children });
|
|
1885
1937
|
}
|
|
1886
|
-
return /* @__PURE__ */
|
|
1938
|
+
return /* @__PURE__ */ jsx29(Fragment3, { children });
|
|
1887
1939
|
}
|
|
1888
1940
|
}
|
|
1889
1941
|
};
|
|
@@ -1904,7 +1956,6 @@ lucide-react/dist/esm/shared/src/utils.js:
|
|
|
1904
1956
|
lucide-react/dist/esm/defaultAttributes.js:
|
|
1905
1957
|
lucide-react/dist/esm/Icon.js:
|
|
1906
1958
|
lucide-react/dist/esm/createLucideIcon.js:
|
|
1907
|
-
lucide-react/dist/esm/icons/arrow-right.js:
|
|
1908
1959
|
lucide-react/dist/esm/icons/arrow-up.js:
|
|
1909
1960
|
lucide-react/dist/esm/icons/bot.js:
|
|
1910
1961
|
lucide-react/dist/esm/icons/check.js:
|