@parhelia/page-wizard 0.1.11004 → 0.1.11005
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/SplashScreen.d.ts +1 -0
- package/dist/SplashScreen.js +110 -0
- package/dist/SplashScreen.js.map +1 -0
- package/dist/dist/PageWizard.d.ts +78 -0
- package/dist/dist/PageWizard.js +57 -0
- package/dist/dist/PageWizard.js.map +1 -0
- package/dist/dist/SplashScreen.d.ts +1 -0
- package/dist/dist/SplashScreen.js +110 -0
- package/dist/dist/SplashScreen.js.map +1 -0
- package/dist/dist/WizardBoxConnector.d.ts +4 -0
- package/dist/dist/WizardBoxConnector.js +6 -0
- package/dist/dist/WizardBoxConnector.js.map +1 -0
- package/dist/dist/WizardSteps.d.ts +8 -0
- package/dist/dist/WizardSteps.js +174 -0
- package/dist/dist/WizardSteps.js.map +1 -0
- package/dist/dist/config.d.ts +2 -0
- package/dist/dist/config.js +86 -0
- package/dist/dist/config.js.map +1 -0
- package/dist/dist/index.d.ts +2 -0
- package/dist/dist/index.js +2 -0
- package/dist/dist/index.js.map +1 -0
- package/dist/dist/service.d.ts +15 -0
- package/dist/dist/service.js +29 -0
- package/dist/dist/service.js.map +1 -0
- package/dist/dist/startPageWizardCommand.d.ts +13 -0
- package/dist/dist/startPageWizardCommand.js +31 -0
- package/dist/dist/startPageWizardCommand.js.map +1 -0
- package/dist/dist/steps/BuildPageStep.d.ts +2 -0
- package/dist/dist/steps/BuildPageStep.js +138 -0
- package/dist/dist/steps/BuildPageStep.js.map +1 -0
- package/dist/dist/steps/CollectStep.d.ts +2 -0
- package/dist/dist/steps/CollectStep.js +115 -0
- package/dist/dist/steps/CollectStep.js.map +1 -0
- package/dist/dist/steps/ComponentTypesSelector.d.ts +13 -0
- package/dist/dist/steps/ComponentTypesSelector.js +155 -0
- package/dist/dist/steps/ComponentTypesSelector.js.map +1 -0
- package/dist/dist/steps/Components.d.ts +9 -0
- package/dist/dist/steps/Components.js +89 -0
- package/dist/dist/steps/Components.js.map +1 -0
- package/dist/dist/steps/ContentStep.d.ts +2 -0
- package/dist/dist/steps/ContentStep.js +808 -0
- package/dist/dist/steps/ContentStep.js.map +1 -0
- package/dist/dist/steps/EditButton.d.ts +8 -0
- package/dist/dist/steps/EditButton.js +5 -0
- package/dist/dist/steps/EditButton.js.map +1 -0
- package/dist/dist/steps/FieldEditor.d.ts +5 -0
- package/dist/dist/steps/FieldEditor.js +27 -0
- package/dist/dist/steps/FieldEditor.js.map +1 -0
- package/dist/dist/steps/FindItemsStep.d.ts +2 -0
- package/dist/dist/steps/FindItemsStep.js +294 -0
- package/dist/dist/steps/FindItemsStep.js.map +1 -0
- package/dist/dist/steps/Generate.d.ts +6 -0
- package/dist/dist/steps/Generate.js +31 -0
- package/dist/dist/steps/Generate.js.map +1 -0
- package/dist/dist/steps/ImagesStep.d.ts +2 -0
- package/dist/dist/steps/ImagesStep.js +178 -0
- package/dist/dist/steps/ImagesStep.js.map +1 -0
- package/dist/dist/steps/LayoutStep.d.ts +2 -0
- package/dist/dist/steps/LayoutStep.js +128 -0
- package/dist/dist/steps/LayoutStep.js.map +1 -0
- package/dist/dist/steps/MetaDataStep.d.ts +2 -0
- package/dist/dist/steps/MetaDataStep.js +112 -0
- package/dist/dist/steps/MetaDataStep.js.map +1 -0
- package/dist/dist/steps/SchottSelectImagesStep.d.ts +2 -0
- package/dist/dist/steps/SchottSelectImagesStep.js +55 -0
- package/dist/dist/steps/SchottSelectImagesStep.js.map +1 -0
- package/dist/dist/steps/SelectStep.d.ts +2 -0
- package/dist/dist/steps/SelectStep.js +151 -0
- package/dist/dist/steps/SelectStep.js.map +1 -0
- package/dist/dist/steps/StructureStep.d.ts +2 -0
- package/dist/dist/steps/StructureStep.js +205 -0
- package/dist/dist/steps/StructureStep.js.map +1 -0
- package/dist/dist/steps/TranslateStep.d.ts +2 -0
- package/dist/dist/steps/TranslateStep.js +613 -0
- package/dist/dist/steps/TranslateStep.js.map +1 -0
- package/dist/dist/steps/schema.d.ts +13 -0
- package/dist/dist/steps/schema.js +139 -0
- package/dist/dist/steps/schema.js.map +1 -0
- package/dist/dist/steps/usePageCreator.d.ts +7 -0
- package/dist/dist/steps/usePageCreator.js +285 -0
- package/dist/dist/steps/usePageCreator.js.map +1 -0
- package/dist/dist/types.d.ts +27 -0
- package/dist/dist/types.js +2 -0
- package/dist/dist/types.js.map +1 -0
- package/dist/dist/usePageWizard.d.ts +22 -0
- package/dist/dist/usePageWizard.js +69 -0
- package/dist/dist/usePageWizard.js.map +1 -0
- package/dist/dist/utils/dataAccessor.d.ts +57 -0
- package/dist/dist/utils/dataAccessor.js +323 -0
- package/dist/dist/utils/dataAccessor.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
import { Card, Button, Dialog, DialogContent, DialogHeader, DialogTitle, ScrollingContentTree, cn, useEditContext, executePrompt, executeSearch, ActionButton, } from "@parhelia/core";
|
|
4
|
+
import { createWizardAiContext } from "../service";
|
|
5
|
+
import { WizardBoxConnector } from "../WizardBoxConnector";
|
|
6
|
+
import { Settings, Images, ChevronDown, Check } from "lucide-react";
|
|
7
|
+
// Responsive image component that chooses the best image size
|
|
8
|
+
const ResponsiveImage = ({ thumbUrl, previewUrl, alt, className, }) => {
|
|
9
|
+
// If we have both URLs, use srcset to let browser choose
|
|
10
|
+
if (thumbUrl && previewUrl) {
|
|
11
|
+
return (_jsx("img", { src: thumbUrl, srcSet: `${thumbUrl} 96w, ${previewUrl} 400w`, sizes: "(max-width: 640px) calc(50vw - 1rem), (max-width: 768px) calc(33vw - 1rem), calc(16.666vw - 1rem)", alt: alt, className: className, loading: "lazy" }));
|
|
12
|
+
}
|
|
13
|
+
// Fallback to available URL
|
|
14
|
+
return (_jsx("img", { src: previewUrl || thumbUrl, alt: alt, className: className, loading: "lazy" }));
|
|
15
|
+
};
|
|
16
|
+
export const ImagesStep = (props) => {
|
|
17
|
+
const mediaRootId = "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1";
|
|
18
|
+
const [selectedFolderId, setSelectedFolderId] = useState(mediaRootId);
|
|
19
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
20
|
+
const [error, setError] = useState(null);
|
|
21
|
+
const editContext = useEditContext();
|
|
22
|
+
const propName = props.step.fields.propertyName || "images";
|
|
23
|
+
const [showFolderDialog, setShowFolderDialog] = useState(false);
|
|
24
|
+
const [collapsedSections, setCollapsedSections] = useState(new Set());
|
|
25
|
+
const [selectedFolder, setSelectedFolder] = useState();
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (props.data[propName]?.length > 0) {
|
|
28
|
+
props.setStepCompleted(true);
|
|
29
|
+
}
|
|
30
|
+
}, [props.data]);
|
|
31
|
+
const findMatchingImages = async () => {
|
|
32
|
+
setIsLoading(true);
|
|
33
|
+
setError(null);
|
|
34
|
+
props.setData((prevData) => ({
|
|
35
|
+
...prevData,
|
|
36
|
+
[propName]: [],
|
|
37
|
+
}));
|
|
38
|
+
try {
|
|
39
|
+
const localAbortController = new AbortController();
|
|
40
|
+
const imageInstructions = props.step.fields.instructions ||
|
|
41
|
+
"Please analyze the provided data and suggest images.";
|
|
42
|
+
const aiPromptResult = await executePrompt([
|
|
43
|
+
{
|
|
44
|
+
content: `You are an AI assistant for building a web page. You will later have to create images for the page.
|
|
45
|
+
${imageInstructions}
|
|
46
|
+
|
|
47
|
+
Reply with a json object of type WizardPageModel = { message: string; components: Component[]; };
|
|
48
|
+
|
|
49
|
+
Where components are of type Component = { id: string; name: string; imageFields: {name: string; value: string; alt: string; prompt: string; }[]; };
|
|
50
|
+
You should update images existing images in fields in the components array. Update the prompt field for each image, keep name, value and alt unchanged. Make sure you populate prompt field for every image.
|
|
51
|
+
`,
|
|
52
|
+
name: "system",
|
|
53
|
+
role: "system",
|
|
54
|
+
id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
|
|
55
|
+
},
|
|
56
|
+
], { editContext: editContext, createAiContext: createWizardAiContext }, { model: props.step.fields.aiModel || undefined }, { signal: localAbortController.signal });
|
|
57
|
+
let images = [];
|
|
58
|
+
if (aiPromptResult &&
|
|
59
|
+
aiPromptResult.messages &&
|
|
60
|
+
aiPromptResult.messages.length > 0) {
|
|
61
|
+
const lastMessage = aiPromptResult.messages[aiPromptResult.messages.length - 1];
|
|
62
|
+
if (lastMessage && lastMessage.content) {
|
|
63
|
+
images = JSON.parse(lastMessage.content).images;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
// Create an array of promises for all search operations
|
|
67
|
+
const searchPromises = images.map(async (image) => {
|
|
68
|
+
const searchResult = await executeSearch({
|
|
69
|
+
query: image.keywords.join(" "),
|
|
70
|
+
rootItemIds: selectedFolderId ? [selectedFolderId] : undefined,
|
|
71
|
+
editContext: editContext,
|
|
72
|
+
maxResults: 6,
|
|
73
|
+
index: "media",
|
|
74
|
+
skipValidation: true,
|
|
75
|
+
});
|
|
76
|
+
if (searchResult.type === "success") {
|
|
77
|
+
const thumbnails = searchResult.data.map((thumbnail) => ({
|
|
78
|
+
name: thumbnail.name,
|
|
79
|
+
id: thumbnail.id,
|
|
80
|
+
thumbUrl: thumbnail.thumbUrl,
|
|
81
|
+
previewUrl: thumbnail.previewUrl,
|
|
82
|
+
description: thumbnail.description,
|
|
83
|
+
}));
|
|
84
|
+
props.setInternalState?.((state) => ({
|
|
85
|
+
...state,
|
|
86
|
+
thumbnails: [
|
|
87
|
+
...(state.thumbnails || []),
|
|
88
|
+
...thumbnails.filter((newThumb) => !(state.thumbnails || []).some((existingThumb) => existingThumb.id === newThumb.id)),
|
|
89
|
+
],
|
|
90
|
+
}));
|
|
91
|
+
props.setData((prevData) => ({
|
|
92
|
+
...prevData,
|
|
93
|
+
[propName]: [
|
|
94
|
+
...(prevData[propName] || []),
|
|
95
|
+
{
|
|
96
|
+
...image,
|
|
97
|
+
options: thumbnails,
|
|
98
|
+
},
|
|
99
|
+
],
|
|
100
|
+
}));
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
setError(`Error searching for images: ${searchResult.response.statusText}`);
|
|
104
|
+
}
|
|
105
|
+
});
|
|
106
|
+
// Wait for all search operations to complete
|
|
107
|
+
await Promise.all(searchPromises);
|
|
108
|
+
}
|
|
109
|
+
catch (err) {
|
|
110
|
+
setError(`Error finding matching images: ${err instanceof Error ? err.message : String(err)}`);
|
|
111
|
+
console.error("Error in findMatchingImages:", err);
|
|
112
|
+
}
|
|
113
|
+
finally {
|
|
114
|
+
setIsLoading(false);
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
useEffect(() => {
|
|
118
|
+
const loadFolder = async () => {
|
|
119
|
+
if (selectedFolderId) {
|
|
120
|
+
const item = await editContext?.itemsRepository.getItem({
|
|
121
|
+
id: selectedFolderId,
|
|
122
|
+
language: "en",
|
|
123
|
+
version: 1,
|
|
124
|
+
});
|
|
125
|
+
setSelectedFolder(item);
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
loadFolder();
|
|
129
|
+
}, [selectedFolderId]);
|
|
130
|
+
function SearchButton() {
|
|
131
|
+
return (_jsx(ActionButton, { onClick: findMatchingImages, isLoading: isLoading, disabled: isLoading, className: "w-full", children: "Find Matching Images" }));
|
|
132
|
+
}
|
|
133
|
+
return (_jsxs("div", { className: "flex h-full flex-col md:flex-row", children: [_jsx(Card, { title: "Settings", icon: _jsx(Settings, {}), description: "Configure image search settings and find matching images", className: "w-96", collapsible: "mobileOnly", defaultCollapsed: "mobileOnly", footer: _jsx(SearchButton, {}), children: _jsx("div", { className: "flex h-full flex-col gap-4", children: _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsxs("div", { className: "relative mb-4 rounded-md border border-gray-400 bg-white p-4", children: [_jsx("div", { className: "mb-2 text-sm font-bold text-gray-800", children: "Image library folder" }), selectedFolder && (_jsx("div", { className: "mb-2 text-sm text-gray-500", children: selectedFolder.path })), _jsx(Button, { size: "sm", onClick: () => {
|
|
134
|
+
setShowFolderDialog(true);
|
|
135
|
+
}, children: "Change Folder" }), _jsx(Dialog, { open: showFolderDialog, onOpenChange: (open) => {
|
|
136
|
+
if (!open) {
|
|
137
|
+
setShowFolderDialog(false);
|
|
138
|
+
}
|
|
139
|
+
}, children: _jsxs(DialogContent, { className: "max-w-none", style: { width: "50vw", height: "50vh" }, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Select Folder" }) }), _jsx("div", { className: "flex-1 overflow-auto", children: _jsx("div", { className: "flex h-full flex-col p-1", children: _jsx("div", { className: "relative flex-1", children: _jsx(ScrollingContentTree, { rootItemId: mediaRootId, onSelectionChange: (selection) => {
|
|
140
|
+
const selectedNode = selection[0];
|
|
141
|
+
if (selectedNode)
|
|
142
|
+
setSelectedFolderId(selectedNode.id);
|
|
143
|
+
else
|
|
144
|
+
setSelectedFolderId(mediaRootId);
|
|
145
|
+
setShowFolderDialog(false);
|
|
146
|
+
} }) }) }) })] }) })] }) }) }) }), _jsx(WizardBoxConnector, {}), _jsx(Card, { title: "Images", icon: _jsx(Images, {}), description: "Select images from the search results", noPadding: true, className: "relative flex-1", children: _jsx("div", { className: "absolute inset-0 overflow-auto", children: _jsxs("div", { className: "p-3 md:p-6", children: [error && _jsx("div", { className: "mb-4 text-red-500", children: error }), props.data[propName]?.length > 0 && (_jsx("div", { className: "space-y-6", children: props.data[propName]?.map((image, index) => {
|
|
147
|
+
const isCollapsed = collapsedSections.has(index);
|
|
148
|
+
return (_jsxs("div", { className: "space-y-4", children: [_jsxs("button", { onClick: () => {
|
|
149
|
+
const newCollapsed = new Set(collapsedSections);
|
|
150
|
+
if (isCollapsed) {
|
|
151
|
+
newCollapsed.delete(index);
|
|
152
|
+
}
|
|
153
|
+
else {
|
|
154
|
+
newCollapsed.add(index);
|
|
155
|
+
}
|
|
156
|
+
setCollapsedSections(newCollapsed);
|
|
157
|
+
}, className: "flex w-full items-center justify-between text-left", children: [_jsx("h3", { className: "font-medium text-gray-900 md:text-lg", children: image.title }), _jsx(ChevronDown, { className: cn("h-5 w-5 text-gray-500 transition-transform", isCollapsed ? "-rotate-90" : "rotate-0") })] }), !isCollapsed && (_jsx("div", { className: "grid grid-cols-6 gap-4", children: image.options?.map((option, thumbnailIndex) => (_jsxs("div", { className: cn("relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 transition-all", option.selected
|
|
158
|
+
? "border-purple-500 ring-2 ring-purple-200"
|
|
159
|
+
: "border-gray-200 hover:border-gray-300"), onClick: () => {
|
|
160
|
+
props.setData((prevData) => ({
|
|
161
|
+
...prevData,
|
|
162
|
+
[propName]: prevData[propName].map((img, imgIndex) => ({
|
|
163
|
+
...img,
|
|
164
|
+
options: imgIndex !== index
|
|
165
|
+
? img.options
|
|
166
|
+
: img.options?.map((option, optionIndex) => optionIndex ===
|
|
167
|
+
thumbnailIndex
|
|
168
|
+
? {
|
|
169
|
+
...option,
|
|
170
|
+
selected: !option.selected,
|
|
171
|
+
}
|
|
172
|
+
: option),
|
|
173
|
+
})),
|
|
174
|
+
}));
|
|
175
|
+
}, children: [_jsx(ResponsiveImage, { thumbUrl: option.thumbUrl, previewUrl: option.previewUrl, alt: option.name, className: "h-full w-full object-cover" }), option.selected && (_jsx("div", { className: "absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-purple-500 text-white", children: _jsx(Check, { className: "h-4 w-4" }) }))] }, thumbnailIndex))) }))] }, index));
|
|
176
|
+
}) }))] }) }) })] }));
|
|
177
|
+
};
|
|
178
|
+
//# sourceMappingURL=ImagesStep.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImagesStep.js","sourceRoot":"","sources":["../../src/steps/ImagesStep.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
import { Splitter, ActionButton, useEditContext, executePrompt } from "@parhelia/core";
|
|
4
|
+
import { createWizardAiContext } from "../service";
|
|
5
|
+
import { Components } from "./Components";
|
|
6
|
+
import { convertPageSchemaToWizardComponents } from "./schema";
|
|
7
|
+
import { ComponentTypeSelector } from "./ComponentTypesSelector";
|
|
8
|
+
import { X } from "lucide-react";
|
|
9
|
+
export function LayoutStep({ wizard, step, data, setData, setStepCompleted, internalState, setInternalState, setPageModel, // Add missing prop
|
|
10
|
+
}) {
|
|
11
|
+
const editContext = useEditContext();
|
|
12
|
+
const abortController = new AbortController();
|
|
13
|
+
const localAbortController = abortController || new AbortController();
|
|
14
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
15
|
+
const [message, setMessage] = useState();
|
|
16
|
+
const [selectedComponentTypes, setSelectedComponentTypes] = useState([]);
|
|
17
|
+
const [customInstructions, setCustomInstructions] = useState();
|
|
18
|
+
if (!editContext) {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
if (data.pageModel?.components?.length) {
|
|
23
|
+
setStepCompleted(!isLoading);
|
|
24
|
+
}
|
|
25
|
+
}, [data.pageModel, isLoading]);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
setCustomInstructions(step.fields.instructions);
|
|
28
|
+
}, []);
|
|
29
|
+
const createLayout = async () => {
|
|
30
|
+
try {
|
|
31
|
+
setIsLoading(true);
|
|
32
|
+
// Parse schema if it's a string
|
|
33
|
+
const schema = typeof wizard.schema === "string"
|
|
34
|
+
? JSON.parse(wizard.schema)
|
|
35
|
+
: wizard.schema;
|
|
36
|
+
// Filter the schema based on selected component types and placeholders
|
|
37
|
+
const filteredSchema = convertPageSchemaToWizardComponents(schema, selectedComponentTypes);
|
|
38
|
+
const result = await executePrompt([
|
|
39
|
+
{
|
|
40
|
+
content: `${customInstructions?.trim()} Reply with a json object of type PageModel = { name: string; metaDescription: string; components: Component[]; message: string; };
|
|
41
|
+
Where components are of type Component = { id: string; name: string; fields: FieldDefinition[]; styles: string; };
|
|
42
|
+
And fields are of type FieldDefinition = { name: string; type: string; value: string; };
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
Types: Row: Use this to group components horizontally. Section: Use this to group components with a background color or spacing. Title: Use for titles and headings. Text: Use for general text content. Quote: Use for quotes and callouts. Image: Use for images and media. TeaserList: Use for lists of items with images and descriptions. Test: Component for testing and prototyping.
|
|
47
|
+
|
|
48
|
+
Component Guidelines:
|
|
49
|
+
- Use Row components to group related content horizontally
|
|
50
|
+
- Use Section components as containers for logical page sections
|
|
51
|
+
- Populate all required fields with realistic content
|
|
52
|
+
- Use appropriate HTML structure within styles
|
|
53
|
+
- Make the content relevant to: ${JSON.stringify(data)}
|
|
54
|
+
|
|
55
|
+
Please create a well-structured page layout with proper content hierarchy.`,
|
|
56
|
+
name: "system",
|
|
57
|
+
role: "system",
|
|
58
|
+
id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
|
|
59
|
+
},
|
|
60
|
+
], { editContext, createAiContext: createWizardAiContext }, { model: step.fields.aiModel || undefined }, { signal: abortController.signal }, (response) => {
|
|
61
|
+
try {
|
|
62
|
+
// Handle streaming response - might have different structure during streaming
|
|
63
|
+
const content = response.content ||
|
|
64
|
+
response.messages?.[response.messages.length - 1]?.content;
|
|
65
|
+
if (content) {
|
|
66
|
+
const newLayout = JSON.parse(content);
|
|
67
|
+
if (newLayout && setPageModel) {
|
|
68
|
+
setPageModel(newLayout);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
catch (parseError) { }
|
|
73
|
+
});
|
|
74
|
+
if (result && result.messages && result.messages.length > 0) {
|
|
75
|
+
const lastMessage = result.messages[result.messages.length - 1];
|
|
76
|
+
if (lastMessage && lastMessage.content) {
|
|
77
|
+
const pageModel = JSON.parse(lastMessage.content);
|
|
78
|
+
setData({
|
|
79
|
+
...data,
|
|
80
|
+
pageModel: JSON.parse(lastMessage.content),
|
|
81
|
+
customInstructions,
|
|
82
|
+
});
|
|
83
|
+
setMessage(pageModel.message);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
catch (error) {
|
|
88
|
+
console.error(error);
|
|
89
|
+
}
|
|
90
|
+
finally {
|
|
91
|
+
setIsLoading(false);
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
// Toggle placeholder selection
|
|
95
|
+
// Regenerate layout with current selected component types and placeholders
|
|
96
|
+
const regenerateLayout = () => {
|
|
97
|
+
createLayout();
|
|
98
|
+
};
|
|
99
|
+
useEffect(() => {
|
|
100
|
+
if (!selectedComponentTypes.length)
|
|
101
|
+
return;
|
|
102
|
+
// Only set custom instructions if they're not already set or if step.instructions has changed
|
|
103
|
+
if (customInstructions !== step.fields.instructions) {
|
|
104
|
+
setCustomInstructions(step.fields.instructions);
|
|
105
|
+
}
|
|
106
|
+
}, [step.fields.instructions, selectedComponentTypes]);
|
|
107
|
+
// Custom instructions panel
|
|
108
|
+
const customInstructionsPanel = () => {
|
|
109
|
+
return (_jsxs("div", { className: "mb-4", children: [_jsx("h3", { className: "text-sm font-bold", children: "Instructions" }), _jsx("div", { className: "mb-3 text-xs text-gray-500", children: "Provide guidance for the AI when generating your layout" }), _jsx("textarea", { value: customInstructions, onChange: (e) => setCustomInstructions(e.target.value), placeholder: "Example: Make it modern and minimalist. Focus on images. Include a hero section at the top.", className: "h-48 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none", disabled: isLoading })] }));
|
|
110
|
+
};
|
|
111
|
+
const settingsPanel = {
|
|
112
|
+
name: "Settings",
|
|
113
|
+
collapsible: false,
|
|
114
|
+
defaultSize: 450,
|
|
115
|
+
content: (_jsxs("div", { className: "absolute inset-0 flex h-full flex-col overflow-auto pr-4", children: [customInstructionsPanel(), _jsx(ComponentTypeSelector, { selectedComponentTypes: selectedComponentTypes, setSelectedComponentTypes: setSelectedComponentTypes, schema: wizard.schema, data: data, setData: setData, step: step }), _jsxs("div", { className: "flex gap-2", children: [_jsx(ActionButton, { onClick: regenerateLayout, disabled: isLoading || selectedComponentTypes.length === 0, isLoading: isLoading, loadingText: "Working", className: "flex-1", children: data.pageModel ? "Regenerate Layout" : "Generate Layout" }), isLoading && (_jsxs("button", { onClick: () => {
|
|
116
|
+
localAbortController.abort();
|
|
117
|
+
setIsLoading(false);
|
|
118
|
+
}, className: "flex items-center gap-1 rounded bg-red-500 px-2 py-1 text-xs text-white hover:bg-red-600", children: [_jsx(X, { size: 14 }), "Abort"] }))] }), _jsx("div", { className: "p-2 text-xs text-gray-500", children: message })] })),
|
|
119
|
+
};
|
|
120
|
+
const layoutPanel = {
|
|
121
|
+
name: "Layout",
|
|
122
|
+
defaultSize: "auto",
|
|
123
|
+
collapsible: false,
|
|
124
|
+
content: (_jsx("div", { className: "absolute inset-2 flex flex-col items-center justify-center text-gray-600", children: _jsx(Components, { pageModel: data.pageModel, onComponentRemoved: () => setData({ ...data }), onFieldEdited: () => setData({ ...data }), thumbnails: internalState.thumbnails, setInternalState: setInternalState }) })),
|
|
125
|
+
};
|
|
126
|
+
return (_jsx(Splitter, { panels: [settingsPanel, layoutPanel], localStorageKey: "editor.page-wizard.layout" }));
|
|
127
|
+
}
|
|
128
|
+
//# sourceMappingURL=LayoutStep.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LayoutStep.js","sourceRoot":"","sources":["../../src/steps/LayoutStep.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
|
+
import { Card, Textarea, Button, useEditContext, executePromptWithJsonResult } from "@parhelia/core";
|
|
4
|
+
import { createWizardAiContext } from "../service";
|
|
5
|
+
import { FileText, RotateCcw } from "lucide-react";
|
|
6
|
+
import Generate from "./Generate";
|
|
7
|
+
import { processPromptTemplate, getFilteredInputData, } from "../utils/dataAccessor";
|
|
8
|
+
export function MetaDataStep({ parentItem, pageModel, setPageModel, step, data, setStepCompleted, }) {
|
|
9
|
+
const [isGenerating, setIsGenerating] = useState(false);
|
|
10
|
+
const editContext = useEditContext();
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (!editContext)
|
|
13
|
+
return;
|
|
14
|
+
if (editContext.mode !== "edit") {
|
|
15
|
+
editContext.setMode("edit");
|
|
16
|
+
}
|
|
17
|
+
}, [editContext]);
|
|
18
|
+
// Mark step as completed immediately since this is now just informational
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
setStepCompleted(true);
|
|
21
|
+
}, [setStepCompleted]);
|
|
22
|
+
// Auto-generate meta description and keywords if not set
|
|
23
|
+
const runMetaGeneration = async () => {
|
|
24
|
+
if (!editContext)
|
|
25
|
+
return;
|
|
26
|
+
// Process instructions and system instructions similar to SelectStep
|
|
27
|
+
const processedInstructionsResult = processPromptTemplate(step.fields.instructions || "", data);
|
|
28
|
+
if (processedInstructionsResult.error) {
|
|
29
|
+
console.warn(`Template Error (instructions): ${processedInstructionsResult.error}`);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const processedSystemInstructionsResult = processPromptTemplate(step.fields.systemInstructions || "", data);
|
|
33
|
+
if (processedSystemInstructionsResult.error) {
|
|
34
|
+
console.warn(`Template Error (systemInstructions): ${processedSystemInstructionsResult.error}`);
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
const processedInstructions = processedInstructionsResult.value || "";
|
|
38
|
+
const processedSystemInstructions = processedSystemInstructionsResult.value || "";
|
|
39
|
+
// Filter input data if inputProperties are provided on the step
|
|
40
|
+
const inputData = getFilteredInputData(step, data);
|
|
41
|
+
setIsGenerating(true);
|
|
42
|
+
try {
|
|
43
|
+
const abortController = new AbortController();
|
|
44
|
+
const pageModelResult = await executePromptWithJsonResult([
|
|
45
|
+
{
|
|
46
|
+
content: `${processedSystemInstructions}\nYou are a helpful assistant that generates SEO metadata for a page.\n\nReturn ONLY valid JSON in this exact shape: {"metaDescription": string, "metaKeywords": string}.\nLanguage: ${parentItem?.language || "en"}.`,
|
|
47
|
+
name: "system",
|
|
48
|
+
role: "system",
|
|
49
|
+
id: crypto.randomUUID(),
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
content: `${processedInstructions}\n\nCurrent data: ${JSON.stringify(inputData, null, 2)}`,
|
|
53
|
+
name: "user",
|
|
54
|
+
role: "user",
|
|
55
|
+
id: crypto.randomUUID(),
|
|
56
|
+
},
|
|
57
|
+
], { editContext, createAiContext: createWizardAiContext }, { model: step.fields.aiModel || undefined }, { signal: abortController.signal }, (response) => {
|
|
58
|
+
try {
|
|
59
|
+
const newLayout = JSON.parse(response.content);
|
|
60
|
+
if (newLayout && setPageModel) {
|
|
61
|
+
setPageModel((prev) => ({
|
|
62
|
+
...prev,
|
|
63
|
+
metaDescription: newLayout?.metaDescription ?? prev.metaDescription,
|
|
64
|
+
metaKeywords: newLayout?.metaKeywords ?? prev.metaKeywords,
|
|
65
|
+
}));
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
catch {
|
|
69
|
+
// Ignore parsing errors during streaming
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
// Parse the final result
|
|
73
|
+
if (pageModelResult &&
|
|
74
|
+
pageModelResult.metaDescription &&
|
|
75
|
+
pageModelResult.metaKeywords) {
|
|
76
|
+
setPageModel?.((prev) => ({
|
|
77
|
+
...prev,
|
|
78
|
+
metaDescription: pageModelResult.metaDescription,
|
|
79
|
+
metaKeywords: pageModelResult.metaKeywords,
|
|
80
|
+
}));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
catch (error) {
|
|
84
|
+
console.error("Error generating meta fields", error);
|
|
85
|
+
}
|
|
86
|
+
finally {
|
|
87
|
+
setIsGenerating(false);
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
useEffect(() => {
|
|
91
|
+
if (!pageModel?.metaDescription && !pageModel?.metaKeywords) {
|
|
92
|
+
runMetaGeneration();
|
|
93
|
+
}
|
|
94
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
95
|
+
}, []);
|
|
96
|
+
const handleInputChange = (field, value) => {
|
|
97
|
+
const base = pageModel ?? {
|
|
98
|
+
components: [],
|
|
99
|
+
name: "",
|
|
100
|
+
metaDescription: "",
|
|
101
|
+
metaKeywords: "",
|
|
102
|
+
fields: [],
|
|
103
|
+
};
|
|
104
|
+
const updatedPageModel = {
|
|
105
|
+
...base,
|
|
106
|
+
[field]: value,
|
|
107
|
+
};
|
|
108
|
+
setPageModel?.(updatedPageModel);
|
|
109
|
+
};
|
|
110
|
+
return (_jsx("div", { className: "flex h-full flex-col md:flex-row", children: _jsx(Card, { title: "SEO Settings", icon: _jsx(FileText, { strokeWidth: 1 }), description: "Configure meta information for SEO optimization", className: "flex-1", headerActions: _jsxs(Button, { size: "sm", variant: "outline", onClick: runMetaGeneration, disabled: isGenerating, children: [_jsx(RotateCcw, { strokeWidth: 1 }), "Regenerate"] }), children: _jsx("div", { className: "flex h-full flex-col items-stretch", children: _jsx("div", { className: "relative flex-1", children: isGenerating ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Generate, { title: "Generating SEO fields..." }) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-4", children: [_jsx("label", { htmlFor: "metaDescription", className: "mb-1 block text-sm font-medium", children: "Meta Description" }), _jsx(Textarea, { id: "metaDescription", className: "min-h-[100px] w-full rounded border p-2 text-sm", value: pageModel?.metaDescription, onChange: (e) => handleInputChange("metaDescription", e.target.value), placeholder: "Enter meta description" })] }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { htmlFor: "metaKeywords", className: "mb-1 block text-sm font-medium", children: "Meta Keywords" }), _jsx(Textarea, { id: "metaKeywords", className: "min-h-[100px] w-full rounded border p-2 text-sm", value: pageModel?.metaKeywords, onChange: (e) => handleInputChange("metaKeywords", e.target.value), placeholder: "Enter meta keywords" })] })] })) }) }) }) }));
|
|
111
|
+
}
|
|
112
|
+
//# sourceMappingURL=MetaDataStep.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MetaDataStep.js","sourceRoot":"","sources":["../../src/steps/MetaDataStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,2BAA2B,EAAiB,MAAM,gBAAgB,CAAC;AAEpH,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EACL,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAE/B,MAAM,UAAU,YAAY,CAAC,EAC3B,UAAU,EACV,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,gBAAgB,GACG;IACnB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,IAAI,WAAW,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAChC,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,0EAA0E;IAC1E,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,yDAAyD;IACzD,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;QACnC,IAAI,CAAC,WAAW;YAAE,OAAO;QACzB,qEAAqE;QACrE,MAAM,2BAA2B,GAAG,qBAAqB,CACvD,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI,EAAE,EAC9B,IAAI,CACL,CAAC;QACF,IAAI,2BAA2B,CAAC,KAAK,EAAE,CAAC;YACtC,OAAO,CAAC,IAAI,CACV,kCAAkC,2BAA2B,CAAC,KAAK,EAAE,CACtE,CAAC;YACF,OAAO;QACT,CAAC;QAED,MAAM,iCAAiC,GAAG,qBAAqB,CAC7D,IAAI,CAAC,MAAM,CAAC,kBAAkB,IAAI,EAAE,EACpC,IAAI,CACL,CAAC;QACF,IAAI,iCAAiC,CAAC,KAAK,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CACV,wCAAwC,iCAAiC,CAAC,KAAK,EAAE,CAClF,CAAC;YACF,OAAO;QACT,CAAC;QAED,MAAM,qBAAqB,GAAG,2BAA2B,CAAC,KAAK,IAAI,EAAE,CAAC;QACtE,MAAM,2BAA2B,GAC/B,iCAAiC,CAAC,KAAK,IAAI,EAAE,CAAC;QAEhD,gEAAgE;QAChE,MAAM,SAAS,GAAG,oBAAoB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAEnD,eAAe,CAAC,IAAI,CAAC,CAAC;QAEtB,IAAI,CAAC;YACH,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAC;YAE9C,MAAM,eAAe,GACnB,MAAM,2BAA2B,CAC/B;gBACE;oBACE,OAAO,EAAE,GAAG,2BAA2B,wLAAwL,UAAU,EAAE,QAAQ,IAAI,IAAI,GAAG;oBAC9P,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,QAAQ;oBACd,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE;iBACxB;gBACD;oBACE,OAAO,EAAE,GAAG,qBAAqB,qBAAqB,IAAI,CAAC,SAAS,CAClE,SAAS,EACT,IAAI,EACJ,CAAC,CACF,EAAE;oBACH,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,MAAM;oBACZ,EAAE,EAAE,MAAM,CAAC,UAAU,EAAE;iBACxB;aACF,EACD,EAAE,WAAW,EAAE,eAAe,EAAE,qBAAqB,EAAE,EACvD,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,SAAS,EAAE,EAC3C,EAAE,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,EAClC,CAAC,QAAa,EAAE,EAAE;gBAChB,IAAI,CAAC;oBACH,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAoB,CAAC;oBAClE,IAAI,SAAS,IAAI,YAAY,EAAE,CAAC;wBAC9B,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;4BACtB,GAAG,IAAI;4BACP,eAAe,EACZ,SAAiB,EAAE,eAAe,IAAI,IAAI,CAAC,eAAe;4BAC7D,YAAY,EACT,SAAiB,EAAE,YAAY,IAAI,IAAI,CAAC,YAAY;yBACxD,CAAC,CAAC,CAAC;oBACN,CAAC;gBACH,CAAC;gBAAC,MAAM,CAAC;oBACP,yCAAyC;gBAC3C,CAAC;YACH,CAAC,CACF,CAAC;YAEJ,yBAAyB;YACzB,IACE,eAAe;gBACf,eAAe,CAAC,eAAe;gBAC/B,eAAe,CAAC,YAAY,EAC5B,CAAC;gBACD,YAAY,EAAE,CAAC,CAAC,IAAqB,EAAE,EAAE,CAAC,CAAC;oBACzC,GAAG,IAAI;oBACP,eAAe,EAAE,eAAe,CAAC,eAAe;oBAChD,YAAY,EAAE,eAAe,CAAC,YAAY;iBAC3C,CAAC,CAAC,CAAC;YACN,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;QACvD,CAAC;gBAAS,CAAC;YACT,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,EAAE,eAAe,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,CAAC;YAC5D,iBAAiB,EAAE,CAAC;QACtB,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,KAAa,EAAE,EAAE;QACxE,MAAM,IAAI,GACP,SAA6B,IAAI;YAChC,UAAU,EAAE,EAAE;YACd,IAAI,EAAE,EAAE;YACR,eAAe,EAAE,EAAE;YACnB,YAAY,EAAE,EAAE;YAChB,MAAM,EAAE,EAAE;SACX,CAAC;QACJ,MAAM,gBAAgB,GAAoB;YACxC,GAAG,IAAI;YACP,CAAC,KAAK,CAAC,EAAE,KAAY;SACH,CAAC;QAErB,YAAY,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,IAAI,IACH,KAAK,EAAC,cAAc,EACpB,IAAI,EAAE,KAAC,QAAQ,IAAC,WAAW,EAAE,CAAC,GAAI,EAClC,WAAW,EAAC,iDAAiD,EAC7D,SAAS,EAAC,QAAQ,EAClB,aAAa,EACX,MAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,YAAY,aAEtB,KAAC,SAAS,IAAC,WAAW,EAAE,CAAC,GAAI,kBAEtB,YAGX,cAAK,SAAS,EAAC,oCAAoC,YACjD,cAAK,SAAS,EAAC,iBAAiB,YAC7B,YAAY,CAAC,CAAC,CAAC,CACd,cAAK,SAAS,EAAC,yCAAyC,YACtD,KAAC,QAAQ,IAAC,KAAK,EAAC,0BAA0B,GAAG,GACzC,CACP,CAAC,CAAC,CAAC,CACF,8BACE,eAAK,SAAS,EAAC,MAAM,aACnB,gBACE,OAAO,EAAC,iBAAiB,EACzB,SAAS,EAAC,gCAAgC,iCAGpC,EACR,KAAC,QAAQ,IACP,EAAE,EAAC,iBAAiB,EACpB,SAAS,EAAC,iDAAiD,EAC3D,KAAK,EAAE,SAAS,EAAE,eAAe,EACjC,QAAQ,EAAE,CAAC,CAAyC,EAAE,EAAE,CACtD,iBAAiB,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAEtD,WAAW,EAAC,wBAAwB,GACpC,IACE,EACN,eAAK,SAAS,EAAC,MAAM,aACnB,gBACE,OAAO,EAAC,cAAc,EACtB,SAAS,EAAC,gCAAgC,8BAGpC,EACR,KAAC,QAAQ,IACP,EAAE,EAAC,cAAc,EACjB,SAAS,EAAC,iDAAiD,EAC3D,KAAK,EAAE,SAAS,EAAE,YAAY,EAC9B,QAAQ,EAAE,CAAC,CAAyC,EAAE,EAAE,CACtD,iBAAiB,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAEnD,WAAW,EAAC,qBAAqB,GACjC,IACE,IACL,CACJ,GACG,GACF,GACD,GACH,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { getFilteredInputData } from "../utils/dataAccessor";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
import { setDataProperty } from "../utils/dataAccessor";
|
|
5
|
+
export function SchottSelectImagesStep({ step, data, setData, setStepCompleted, internalState, setInternalState, }) {
|
|
6
|
+
const [imageMappings, setImageMappings] = useState([]);
|
|
7
|
+
const propertyName = step.fields.propertyName || "imageMappings";
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
console.log("SchottSelectImagesStep");
|
|
10
|
+
// Get filtered input data from the step
|
|
11
|
+
const inputData = getFilteredInputData(step, data);
|
|
12
|
+
console.log("inputData:", inputData, data);
|
|
13
|
+
// Convert the data to string to search for 7-digit numbers
|
|
14
|
+
const dataString = JSON.stringify(inputData);
|
|
15
|
+
// Regex pattern to find 7-digit numbers
|
|
16
|
+
const sevenDigitPattern = /\b\d{7}\b/g;
|
|
17
|
+
const matches = dataString.match(sevenDigitPattern);
|
|
18
|
+
console.log("matches", dataString, matches);
|
|
19
|
+
if (matches) {
|
|
20
|
+
// Remove duplicates and create image mappings
|
|
21
|
+
const uniqueImageIds = [...new Set(matches)];
|
|
22
|
+
const sampleImageUrl = "https://media.schott.com/api/public/content/c83d8698b2214b06ae0ca63c7f1cd364?t=OnExW604";
|
|
23
|
+
const mappings = uniqueImageIds.map((imageId) => ({
|
|
24
|
+
imageId,
|
|
25
|
+
imageUrl: sampleImageUrl,
|
|
26
|
+
}));
|
|
27
|
+
// Only update if mappings have actually changed
|
|
28
|
+
const currentMappingsJson = JSON.stringify(data[propertyName] || []);
|
|
29
|
+
const newMappingsJson = JSON.stringify(mappings);
|
|
30
|
+
if (currentMappingsJson !== newMappingsJson) {
|
|
31
|
+
setImageMappings(mappings);
|
|
32
|
+
// Store the mappings in the wizard data using the dynamic property name
|
|
33
|
+
setData((prevData) => setDataProperty(propertyName, mappings, prevData));
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
setImageMappings(mappings);
|
|
37
|
+
}
|
|
38
|
+
// Mark step as completed if we found any image IDs
|
|
39
|
+
setStepCompleted(mappings.length > 0);
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
setImageMappings([]);
|
|
43
|
+
// Only update data if the property currently exists
|
|
44
|
+
if (data[propertyName]) {
|
|
45
|
+
setData((prevData) => setDataProperty(propertyName, [], prevData));
|
|
46
|
+
}
|
|
47
|
+
setStepCompleted(false);
|
|
48
|
+
}
|
|
49
|
+
}, [step, data[propertyName], setStepCompleted, propertyName]); // Updated dependency to use dynamic property name
|
|
50
|
+
return (_jsxs("div", { className: "p-4", children: [_jsx("h2", { className: "mb-4 text-xl font-semibold", children: "Image Selection" }), _jsxs("p", { className: "mb-6 text-gray-600", children: ["Found ", imageMappings.length, " image", imageMappings.length !== 1 ? "s" : "", " to map:"] }), imageMappings.length > 0 ? (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "min-w-full rounded-lg border border-gray-300", children: [_jsx("thead", { className: "bg-gray-50", children: _jsxs("tr", { children: [_jsx("th", { className: "border-b px-4 py-3 text-left text-sm font-medium text-gray-900", children: "Image ID" }), _jsx("th", { className: "border-b px-4 py-3 text-left text-sm font-medium text-gray-900", children: "Image URL" }), _jsx("th", { className: "border-b px-4 py-3 text-left text-sm font-medium text-gray-900", children: "Preview" })] }) }), _jsx("tbody", { className: "divide-y divide-gray-200 bg-white", children: imageMappings.map((mapping, index) => (_jsxs("tr", { className: index % 2 === 0 ? "bg-white" : "bg-gray-50", children: [_jsx("td", { className: "border-b px-4 py-3 text-sm text-gray-900", children: mapping.imageId }), _jsx("td", { className: "border-b px-4 py-3 text-sm text-blue-600", children: _jsx("a", { href: mapping.imageUrl, target: "_blank", rel: "noopener noreferrer", className: "break-all hover:underline", children: mapping.imageUrl }) }), _jsx("td", { className: "border-b px-4 py-3", children: _jsx("img", { src: mapping.imageUrl, alt: `Image ${mapping.imageId}`, className: "h-16 w-16 rounded border object-cover", onError: (e) => {
|
|
51
|
+
const target = e.target;
|
|
52
|
+
target.style.display = "none";
|
|
53
|
+
} }) })] }, mapping.imageId))) })] }) })) : (_jsx("div", { className: "py-8 text-center text-gray-500", children: _jsx("p", { children: "No 7-digit image IDs found in the input data." }) }))] }));
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=SchottSelectImagesStep.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SchottSelectImagesStep.js","sourceRoot":"","sources":["../../src/steps/SchottSelectImagesStep.tsx"],"names":[],"mappings":"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"}
|