@puckeditor/plugin-ai 0.4.1-canary.180a399e → 0.4.1-canary.19c71086
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 -117
- package/dist/index.mjs +169 -119
- 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,38 +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
|
|
1204
|
-
maxRows
|
|
1221
|
+
minRows,
|
|
1222
|
+
maxRows,
|
|
1205
1223
|
placeholder,
|
|
1206
1224
|
disabled: isDisabled,
|
|
1207
1225
|
value: prompt,
|
|
1208
|
-
ref:
|
|
1226
|
+
ref: (node) => {
|
|
1227
|
+
if (inputRef) {
|
|
1228
|
+
inputRef.current = node;
|
|
1229
|
+
}
|
|
1230
|
+
internalRef.current = node;
|
|
1231
|
+
},
|
|
1209
1232
|
onChange: (e) => setPrompt(e.target.value),
|
|
1210
1233
|
onKeyDown: (e) => {
|
|
1211
1234
|
if (!e.shiftKey && e.key === "Enter") {
|
|
@@ -1220,18 +1243,41 @@ function PromptForm({
|
|
|
1220
1243
|
}
|
|
1221
1244
|
}
|
|
1222
1245
|
),
|
|
1223
|
-
/* @__PURE__ */
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
"
|
|
1227
|
-
{
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
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
|
+
)
|
|
1235
1281
|
] })
|
|
1236
1282
|
}
|
|
1237
1283
|
)
|
|
@@ -1248,9 +1294,9 @@ var toolStatusContext = createContext3({});
|
|
|
1248
1294
|
var ToolStatusProvider = toolStatusContext.Provider;
|
|
1249
1295
|
|
|
1250
1296
|
// src/components/ChatBody/index.tsx
|
|
1251
|
-
import { jsx as
|
|
1252
|
-
var
|
|
1253
|
-
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);
|
|
1254
1300
|
function ChatBody({
|
|
1255
1301
|
children,
|
|
1256
1302
|
examplePrompts,
|
|
@@ -1264,17 +1310,17 @@ function ChatBody({
|
|
|
1264
1310
|
}) {
|
|
1265
1311
|
const { scrollRef, contentRef } = useStickToBottom();
|
|
1266
1312
|
const hasMessages = messages && messages.length > 0;
|
|
1267
|
-
return /* @__PURE__ */
|
|
1268
|
-
children ? /* @__PURE__ */
|
|
1269
|
-
/* @__PURE__ */
|
|
1270
|
-
/* @__PURE__ */
|
|
1271
|
-
status === "submitted" && /* @__PURE__ */
|
|
1272
|
-
error && /* @__PURE__ */
|
|
1273
|
-
/* @__PURE__ */
|
|
1274
|
-
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" }) }) })
|
|
1275
1321
|
] }),
|
|
1276
|
-
/* @__PURE__ */
|
|
1277
|
-
/* @__PURE__ */
|
|
1322
|
+
/* @__PURE__ */ jsxs14("div", { className: cx7("form"), children: [
|
|
1323
|
+
/* @__PURE__ */ jsx27(
|
|
1278
1324
|
PromptForm,
|
|
1279
1325
|
{
|
|
1280
1326
|
glow: !hasMessages,
|
|
@@ -1284,19 +1330,19 @@ function ChatBody({
|
|
|
1284
1330
|
placeholder: "What do you want to build?"
|
|
1285
1331
|
}
|
|
1286
1332
|
),
|
|
1287
|
-
examplePrompts ? /* @__PURE__ */
|
|
1333
|
+
examplePrompts ? /* @__PURE__ */ jsx27("div", { className: cx7("examplePrompts"), children: examplePrompts }) : null
|
|
1288
1334
|
] })
|
|
1289
1335
|
] })
|
|
1290
1336
|
] });
|
|
1291
1337
|
}
|
|
1292
1338
|
function ChatMessage({ message }) {
|
|
1293
1339
|
const { role, parts } = message;
|
|
1294
|
-
return /* @__PURE__ */
|
|
1340
|
+
return /* @__PURE__ */ jsx27(
|
|
1295
1341
|
"div",
|
|
1296
1342
|
{
|
|
1297
1343
|
className: cxMessage({ [`${role}Role`]: true }),
|
|
1298
1344
|
"data-message-id": message.id,
|
|
1299
|
-
children: parts.map((part, i) => /* @__PURE__ */
|
|
1345
|
+
children: parts.map((part, i) => /* @__PURE__ */ jsx27(
|
|
1300
1346
|
ChatMessagePart,
|
|
1301
1347
|
{
|
|
1302
1348
|
part,
|
|
@@ -1312,25 +1358,25 @@ function ChatMessageWrapper({
|
|
|
1312
1358
|
role
|
|
1313
1359
|
}) {
|
|
1314
1360
|
if (role === "assistant" || role === "user") {
|
|
1315
|
-
return /* @__PURE__ */
|
|
1361
|
+
return /* @__PURE__ */ jsx27(Markdown, { children });
|
|
1316
1362
|
}
|
|
1317
|
-
return /* @__PURE__ */
|
|
1363
|
+
return /* @__PURE__ */ jsx27("span", { children });
|
|
1318
1364
|
}
|
|
1319
1365
|
function ChatMessagePart({
|
|
1320
1366
|
part,
|
|
1321
1367
|
role
|
|
1322
1368
|
}) {
|
|
1323
1369
|
if (part.type === "text") {
|
|
1324
|
-
return /* @__PURE__ */
|
|
1370
|
+
return /* @__PURE__ */ jsx27("div", { className: cxMessage("text"), children: /* @__PURE__ */ jsx27(ChatMessageWrapper, { role, children: part.text }) });
|
|
1325
1371
|
}
|
|
1326
1372
|
if (part.type === "tool-createPage") {
|
|
1327
|
-
return /* @__PURE__ */
|
|
1373
|
+
return /* @__PURE__ */ jsx27(PuckTool, { ...part });
|
|
1328
1374
|
}
|
|
1329
1375
|
if (part.type === "tool-updatePage") {
|
|
1330
|
-
return /* @__PURE__ */
|
|
1376
|
+
return /* @__PURE__ */ jsx27(PuckTool, { ...part });
|
|
1331
1377
|
}
|
|
1332
1378
|
if (part.type === "tool-userTool") {
|
|
1333
|
-
return /* @__PURE__ */
|
|
1379
|
+
return /* @__PURE__ */ jsx27(PuckTool, { ...part });
|
|
1334
1380
|
}
|
|
1335
1381
|
return null;
|
|
1336
1382
|
}
|
|
@@ -1342,12 +1388,12 @@ function PuckTool({
|
|
|
1342
1388
|
const toolStatus = useContext3(toolStatusContext)[toolCallId];
|
|
1343
1389
|
const outputObj = output;
|
|
1344
1390
|
const status = outputObj && "status" in outputObj ? outputObj.status : toolStatus ?? { loading: true, label: defaultLabel };
|
|
1345
|
-
return /* @__PURE__ */
|
|
1391
|
+
return /* @__PURE__ */ jsx27(ToolStatus, { status });
|
|
1346
1392
|
}
|
|
1347
1393
|
function ToolStatus({ status }) {
|
|
1348
|
-
return /* @__PURE__ */
|
|
1349
|
-
/* @__PURE__ */
|
|
1350
|
-
/* @__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 })
|
|
1351
1397
|
] }) });
|
|
1352
1398
|
}
|
|
1353
1399
|
function ExamplePrompt({
|
|
@@ -1356,9 +1402,9 @@ function ExamplePrompt({
|
|
|
1356
1402
|
onClick
|
|
1357
1403
|
}) {
|
|
1358
1404
|
const El = href ? "a" : "button";
|
|
1359
|
-
return /* @__PURE__ */
|
|
1360
|
-
/* @__PURE__ */
|
|
1361
|
-
/* @__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" }) })
|
|
1362
1408
|
] });
|
|
1363
1409
|
}
|
|
1364
1410
|
|
|
@@ -1506,7 +1552,7 @@ var dispatchOp = (operation, {
|
|
|
1506
1552
|
|
|
1507
1553
|
// src/components/Chat/index.tsx
|
|
1508
1554
|
import html2canvas from "html2canvas-pro";
|
|
1509
|
-
import { jsx as
|
|
1555
|
+
import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1510
1556
|
var q = qler();
|
|
1511
1557
|
var BENCHMARK = false;
|
|
1512
1558
|
var prefixedUlid = (prefix = "") => `${prefix ? `${prefix}_` : ""}${ulid()}`;
|
|
@@ -1663,7 +1709,12 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
|
|
|
1663
1709
|
[status, forcedStatus]
|
|
1664
1710
|
);
|
|
1665
1711
|
useEffect9(() => {
|
|
1666
|
-
window.__PUCK_AI = {
|
|
1712
|
+
window.__PUCK_AI = {
|
|
1713
|
+
processData,
|
|
1714
|
+
setMessages,
|
|
1715
|
+
setStatus: setForcedStatus,
|
|
1716
|
+
sendMessage
|
|
1717
|
+
};
|
|
1667
1718
|
}, [processData]);
|
|
1668
1719
|
const handleSubmit = (prompt) => {
|
|
1669
1720
|
const text = prompt.trim();
|
|
@@ -1694,16 +1745,16 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
|
|
|
1694
1745
|
};
|
|
1695
1746
|
});
|
|
1696
1747
|
}, [messages, toolStatus]);
|
|
1697
|
-
return /* @__PURE__ */
|
|
1698
|
-
/* @__PURE__ */
|
|
1699
|
-
/* @__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(
|
|
1700
1751
|
ChatBody,
|
|
1701
1752
|
{
|
|
1702
1753
|
messages: messagesWithStatuses,
|
|
1703
1754
|
handleSubmit,
|
|
1704
1755
|
inputRef,
|
|
1705
1756
|
status: resolvedStatus,
|
|
1706
|
-
examplePrompts: examplePrompts?.map(({ label, href, onClick }) => /* @__PURE__ */
|
|
1757
|
+
examplePrompts: examplePrompts?.map(({ label, href, onClick }) => /* @__PURE__ */ jsx28(
|
|
1707
1758
|
ExamplePrompt,
|
|
1708
1759
|
{
|
|
1709
1760
|
label,
|
|
@@ -1717,7 +1768,7 @@ function Chat2({ chat, host = "/api/puck/chat" }) {
|
|
|
1717
1768
|
setError("");
|
|
1718
1769
|
regenerate();
|
|
1719
1770
|
},
|
|
1720
|
-
children: /* @__PURE__ */
|
|
1771
|
+
children: /* @__PURE__ */ jsx28(
|
|
1721
1772
|
Placeholder,
|
|
1722
1773
|
{
|
|
1723
1774
|
dispatch: puckDispatch,
|
|
@@ -1747,11 +1798,11 @@ function Placeholder({
|
|
|
1747
1798
|
}
|
|
1748
1799
|
}, 10);
|
|
1749
1800
|
};
|
|
1750
|
-
return /* @__PURE__ */
|
|
1751
|
-
/* @__PURE__ */
|
|
1752
|
-
/* @__PURE__ */
|
|
1753
|
-
/* @__PURE__ */
|
|
1754
|
-
/* @__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(
|
|
1755
1806
|
"button",
|
|
1756
1807
|
{
|
|
1757
1808
|
className: getClassName17("action"),
|
|
@@ -1759,7 +1810,7 @@ function Placeholder({
|
|
|
1759
1810
|
children: "Enter prompt"
|
|
1760
1811
|
}
|
|
1761
1812
|
),
|
|
1762
|
-
/* @__PURE__ */
|
|
1813
|
+
/* @__PURE__ */ jsx28(
|
|
1763
1814
|
"button",
|
|
1764
1815
|
{
|
|
1765
1816
|
className: getClassName17("actionOutlined"),
|
|
@@ -1870,21 +1921,21 @@ var ScrollTracking = ({ children }) => {
|
|
|
1870
1921
|
};
|
|
1871
1922
|
|
|
1872
1923
|
// src/index.tsx
|
|
1873
|
-
import { Fragment as Fragment3, jsx as
|
|
1924
|
+
import { Fragment as Fragment3, jsx as jsx29 } from "react/jsx-runtime";
|
|
1874
1925
|
function createAiPlugin(opts) {
|
|
1875
1926
|
const { scrollTracking = true, ...rest } = opts || {};
|
|
1876
1927
|
return {
|
|
1877
1928
|
label: "AI",
|
|
1878
1929
|
name: "ai",
|
|
1879
|
-
render: () => /* @__PURE__ */
|
|
1880
|
-
icon: /* @__PURE__ */
|
|
1930
|
+
render: () => /* @__PURE__ */ jsx29(Chat2, { ...rest }),
|
|
1931
|
+
icon: /* @__PURE__ */ jsx29(Bot, {}),
|
|
1881
1932
|
mobilePanelHeight: "min-content",
|
|
1882
1933
|
overrides: {
|
|
1883
1934
|
preview: ({ children }) => {
|
|
1884
1935
|
if (scrollTracking) {
|
|
1885
|
-
return /* @__PURE__ */
|
|
1936
|
+
return /* @__PURE__ */ jsx29(ScrollTracking, { children });
|
|
1886
1937
|
}
|
|
1887
|
-
return /* @__PURE__ */
|
|
1938
|
+
return /* @__PURE__ */ jsx29(Fragment3, { children });
|
|
1888
1939
|
}
|
|
1889
1940
|
}
|
|
1890
1941
|
};
|
|
@@ -1905,7 +1956,6 @@ lucide-react/dist/esm/shared/src/utils.js:
|
|
|
1905
1956
|
lucide-react/dist/esm/defaultAttributes.js:
|
|
1906
1957
|
lucide-react/dist/esm/Icon.js:
|
|
1907
1958
|
lucide-react/dist/esm/createLucideIcon.js:
|
|
1908
|
-
lucide-react/dist/esm/icons/arrow-right.js:
|
|
1909
1959
|
lucide-react/dist/esm/icons/arrow-up.js:
|
|
1910
1960
|
lucide-react/dist/esm/icons/bot.js:
|
|
1911
1961
|
lucide-react/dist/esm/icons/check.js:
|