@alpaca-headless/alpaca-headless-nextjs 1.0.129 → 1.0.253

package/dist/esm/editor/ai/AiTerminal.js

@@ -0,0 +1,216 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { TerminalService } from "primereact/terminalservice";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Terminal } from "../Terminal";
+import { useEditContext } from "../editContext";
+import { Dropdown } from "primereact/dropdown";
+import { getItemDescriptor, getSelectedText } from "../utils";
+import Cookies from "universal-cookie";
+import { WizardIcon } from "../ui/Icons";
+import { AiResponseMessage } from "./AiResponseMessage";
+import { loadAiConfig } from "../services/aiService";
+export function AiTerminal({ closeButton }) {
+    const searchParams = useSearchParams();
+    const editContext = useEditContext();
+    const [showPredefined, setShowPredefined] = useState(false);
+    if (!editContext)
+        return null;
+    const [messages, setMessages] = useState([]);
+    const [response, setResponse] = useState();
+    const [model, setModel] = useState("gpt-3.5-turbo-0125");
+    const [prompt, setPrompt] = useState("");
+    const [config, setConfig] = useState();
+    const selection = editContext.selection;
+    useEffect(() => {
+        function fetchConfig() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const config = yield loadAiConfig(getItemDescriptor(editContext.page));
+                setConfig(config);
+            });
+        }
+        fetchConfig();
+    }, []);
+    const messagesRef = useRef(messages);
+    useEffect(() => {
+        messagesRef.current = messages;
+    }, [messages]);
+    const router = useRouter();
+    function commandHandler(text, callback) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const newMessages = [
+                ...messagesRef.current,
+                { content: text, role: "user", name: "user" },
+            ];
+            let lastOps = 0;
+            const selectedText = getSelectedText();
+            const response = yield executePrompt(newMessages, selection, editContext.sessionId, searchParams.get("itemid"), searchParams.get("language"), searchParams.get("version"), model, selectedText, (response) => {
+                setResponse(response);
+                handleResponse(response, callback, false);
+                if (response.editOperations.length) {
+                    if (lastOps != response.editOperations.length) {
+                        lastOps = response.editOperations.length;
+                        editContext.requestRefresh("immediate");
+                    }
+                    else {
+                        response.editOperations.forEach((op) => {
+                            var _a;
+                            if (op.type === "edit-field") {
+                                const editFieldOp = op;
+                                const liveField = editContext.getLiveFieldIfExists({
+                                    fieldId: editFieldOp.fieldId,
+                                    item: editFieldOp.item,
+                                });
+                                if (liveField != null) {
+                                    liveField.value = editFieldOp.value;
+                                    liveField._editor.rawValue = editFieldOp.value;
+                                    editContext === null || editContext === void 0 ? void 0 : editContext.setFocusedField((_a = liveField._editor) === null || _a === void 0 ? void 0 : _a.descriptor, false);
+                                }
+                            }
+                        });
+                    }
+                }
+            });
+            if (response) {
+                handleResponse(response, callback, true);
+                //if (newEditOperations) newEditOperations(response.editOperations);
+                router.refresh();
+            }
+            // if (response) {
+            //     messages.push({content: text, 'role': 'assistant', 'name': 'assistant'});
+            // if(response.editOperations) {
+            //       const newEditOperations = [...editOperationsRef.current, {
+            //         type:'composite',
+            //         name: 'ghostwriter',
+            //         date: new Date(),
+            //         operations: response.editOperations
+            //       }];
+            //       setEditOperations(newEditOperations);
+            // }
+            if (response === null || response === void 0 ? void 0 : response.responseText)
+                newMessages.push({
+                    content: response.responseText,
+                    role: "assistant",
+                    name: "assistant",
+                });
+            //     TerminalService.emit('response', response.responseText);
+            // }
+            // // else
+            // //     TerminalService.emit('clear');
+            setResponse(response ? response : undefined);
+            setMessages(newMessages);
+        });
+    }
+    useEffect(() => {
+        TerminalService.on("command", commandHandler);
+        return () => {
+            TerminalService.off("command", commandHandler);
+        };
+    }, []);
+    return (_jsx("div", { className: "a-h-full a-flex a-flex-col a-relative a-flex-1", children: _jsx("div", { className: "a-flex-1 a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute", children: _jsx(Terminal, { onReset: () => {
+                        setMessages([]);
+                        setResponse(undefined);
+                    }, infobar: (response === null || response === void 0 ? void 0 : response.numInputTokens) && (_jsxs("div", { className: "a-text-gray-400 a-text-right", style: { fontSize: "10px" }, children: ["Tokens in: ", response === null || response === void 0 ? void 0 : response.numInputTokens, " out:", " ", response === null || response === void 0 ? void 0 : response.numOutputTokens, " ", response === null || response === void 0 ? void 0 : response.state, " "] })), prompt: prompt, setPrompt: setPrompt, statusbar: _jsxs("div", { className: "a-flex a-items-center a-justify-between a-gap-1", children: [_jsxs("a", { className: "a-text-xs a-text-blue-300 a-cursor-pointer a-flex a-items-center a-gap-1", onClick: () => {
+                                    setShowPredefined(!showPredefined);
+                                }, children: [_jsx(WizardIcon, { className: "a-w-5 a-h-5" }), "Predefined prompts"] }), showPredefined && (_jsx("div", { className: "a-absolute a-right-0 a-left-0 a-bottom-8 a-text-sm a-overflow-y-auto a-bg-white a-p-3 a-pb-1 a-flex a-flex-col a-gap-1 ", children: config &&
+                                    config.prompts.map((p, index) => (_jsx("div", { className: "a-p-1.5 a-mb-1 a-border a-border-gray-200 a-rounded-lg a-cursor-pointer a-text-gray-700 a-text-xs", onClick: () => {
+                                            setPrompt(p.prompt);
+                                            setShowPredefined(false);
+                                        }, children: p.title }, index))) }))] }), toolbar: _jsxs("div", { className: "a-flex a-items-center", children: [_jsx(Dropdown, { className: "a-text-sm", value: model, onChange: (e) => setModel(e.value), options: [
+                                    "gpt-3.5-turbo-0125",
+                                    "gpt-4-0125-preview",
+                                    "gpt-3.5-turbo-1106",
+                                    "gpt-4-1106-preview",
+                                ] }), closeButton] }), commandHandler: (v, callback) => {
+                        commandHandler(v, callback);
+                    } }) }) }) }));
+}
+function executePrompt(messages, selection, session, itemid, language, version, model, selectedText, callback) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const response = yield fetch("/alpaca/headless/ai/prompt", {
+            method: "POST",
+            body: JSON.stringify({
+                messages,
+                itemid,
+                language,
+                version,
+                selection,
+                selectedText,
+                model,
+                sessionId: session,
+            }),
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json",
+                Cookie: new Cookies().getAll(),
+            },
+            next: {
+                revalidate: 0,
+            },
+        });
+        if (!(response === null || response === void 0 ? void 0 : response.body))
+            return null;
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        let result = null;
+        while (true) {
+            const { done, value } = yield reader.read();
+            if (done) {
+                break;
+            }
+            buffer += decoder.decode(value, { stream: true }); // 'stream: true' ensures that any incomplete multi-byte characters aren't malformed.
+            // Split the buffer by newline and keep the last partial line for the next iteration.
+            const lines = buffer.split("\n");
+            if (lines.length > 0) {
+                buffer = lines.pop() || ""; // Incomplete line (if any) is kept for the next iteration.
+                for (let line of lines) {
+                    if (line.trim() === "")
+                        continue; // Skip empty lines if any.
+                    try {
+                        const jsonData = JSON.parse(line);
+                        callback(jsonData);
+                        result = jsonData;
+                    }
+                    catch (e) {
+                        console.error("Error parsing line:" + line, e);
+                    }
+                }
+            }
+        }
+        // If there's any remaining content in the buffer after processing all chunks, try to process it.
+        if (buffer.trim() !== "") {
+            try {
+                const jsonData = JSON.parse(buffer);
+                result = jsonData;
+            }
+            catch (e) {
+                console.error("Error parsing the final buffer content:", e);
+            }
+        }
+        console.log(result);
+        return result;
+    });
+}
+function handleResponse(response, terminalCallback, isFinished) {
+    var _a;
+    const toolcalls = ((_a = response === null || response === void 0 ? void 0 : response.toolCalls) === null || _a === void 0 ? void 0 : _a.map((tool_call) => {
+        var _a, _b;
+        return {
+            func: (_a = tool_call.function) === null || _a === void 0 ? void 0 : _a.name,
+            arguments: (_b = tool_call.function) === null || _b === void 0 ? void 0 : _b.arguments,
+            result: tool_call.result,
+        };
+    })) || [];
+    terminalCallback(_jsx(AiResponseMessage, { responseText: response.responseText, toolcalls: toolcalls, editOperations: response.editOperations }), isFinished);
+}

package/dist/esm/editor/ai/AiToolCall.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { JsonView, defaultStyles } from "react-json-view-lite";
+export function AiToolCall({ toolCall }) {
+    const [expanded, setExpaded] = useState(false);
+    return (_jsxs("div", { className: "a-mt-2", children: [_jsxs("div", { onClick: () => setExpaded(!expanded), className: "a-flex a-items-center a-cursor-pointer", children: [_jsx("i", { className: "pi pi-angle-right" }), " ", toolCall.func] }), expanded && (_jsxs("div", { className: "a-ml-4", children: [_jsx("div", { className: "a-italic", children: "Args:" }), _jsx("div", { children: renderJsonOrText(toolCall.arguments) }), _jsx("div", { className: "a-italic a-mt-1", children: "Result:" }), _jsxs("div", { className: "a-mb-4", children: [toolCall.error && (_jsx("div", { className: "a-text-red", children: toolCall.error })), renderJsonOrText(toolCall.result)] })] }))] }));
+}
+function renderJsonOrText(json) {
+    try {
+        return _jsx(JsonView, { data: JSON.parse(json), style: defaultStyles });
+    }
+    catch (e) {
+        return _jsx("div", { children: json });
+    }
+}

package/dist/esm/editor/ai/EditorAiTerminal.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AiTerminal } from "./AiTerminal";
+export function EditorAiTerminal({ closeButton, }) {
+    return _jsx(AiTerminal, { closeButton: closeButton });
+}

package/dist/esm/editor/commands/commands.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/editor/commands/componentCommands.js

@@ -0,0 +1,287 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { confirmDialog } from "primereact/confirmdialog";
+import uuid from "react-uuid";
+import { getComponentById } from "../componentTreeHelper";
+const isPlaceholder = (x) => x.components !== undefined;
+export function getSelectedComponentCommands(editContext) {
+    const selection = editContext.selection;
+    const selectedComponents = selection
+        .map((x) => getComponentById(x, editContext.page))
+        .filter((x) => x);
+    const componentCommands = getComponentCommands(selectedComponents, editContext);
+    const componentCommandMenuItems = componentCommands.filter((x) => x.visibilityScopes.indexOf("menu") >= 0);
+    return componentCommandMenuItems;
+}
+export function getComponentCommands(entities, editContext) {
+    const components = entities.filter((x) => x && !isPlaceholder(x));
+    const commands = [
+        getInsertCommand(components, editContext),
+        getDeleteCommand(components, editContext),
+        getDuplicateCommand(components, editContext),
+        getSyncCommand(entities, editContext),
+        getAiCommand(editContext),
+        getDesignCommand(components, editContext),
+        getLinkToMasterCommand(components, editContext),
+        getInheritChildrenFromMasterCommand(components, editContext),
+    ];
+    return commands.filter((x) => x !== null);
+}
+function getInsertCommand(components, editContext) {
+    if (components.length !== 1 || isPlaceholder(components[0]))
+        return null;
+    if (components[0].placeholders.length == 0)
+        return null;
+    return {
+        id: "insert",
+        icon: "pi pi-plus",
+        label: "Insert component",
+        visibilityScopes: ["editFrame", "contextMenu"],
+        execute: (ev) => {
+            editContext.setSelectedForInsertion(components[0].id);
+            ev.stopPropagation();
+            ev.preventDefault();
+        },
+    };
+}
+function getDuplicateCommand(components, editContext) {
+    if (components.length < 1)
+        return null;
+    return {
+        id: "duplicate",
+        icon: "pi pi-copy",
+        label: "Duplicate",
+        visibilityScopes: ["contextMenu", "menu"],
+        execute: (ev) => {
+            var _a;
+            if (!((_a = components[0]._editor.placeholderReference) === null || _a === void 0 ? void 0 : _a.parentComponent))
+                return null;
+            editContext.duplicateComponents({
+                componentIds: components.map((x) => x.id),
+                parent: components[0]._editor.placeholderReference.parentComponent,
+                placeholderName: components[0]._editor.placeholderReference.key,
+            });
+            ev.stopPropagation();
+            ev.preventDefault();
+        },
+    };
+}
+function getAiCommand(editContext) {
+    return {
+        name: "ai",
+        icon: "pi pi-comments",
+        label: "AI",
+        disabled: () => false,
+        execute: (context) => __awaiter(this, void 0, void 0, function* () {
+            const event = context.event;
+            editContext.showAiPopup(event);
+            event.preventDefault();
+            event.stopPropagation();
+        }),
+        visibilityScopes: ["editFrame", "contextMenu"],
+    };
+}
+function getDesignCommand(components, editContext) {
+    if (components.length !== 1 || isPlaceholder(components[0]))
+        return null;
+    if (!Object.values(components[0].fields).find((x) => { var _a; return ((_a = x._editor) === null || _a === void 0 ? void 0 : _a.section) === "Design"; }))
+        return null;
+    return {
+        name: "design",
+        icon: "pi pi-palette",
+        label: "Design",
+        disabled: () => false,
+        execute: (context) => __awaiter(this, void 0, void 0, function* () {
+            editContext.showFieldEditorPopup(components[0].fields, ["Design"], context.event);
+        }),
+        visibilityScopes: ["menu", "editFrame", "contextMenu"],
+    };
+}
+function getLinkToMasterCommand(components, editContext) {
+    var _a, _b, _c;
+    if (!components.length)
+        return null;
+    if (((_c = (_b = (_a = editContext.page) === null || _a === void 0 ? void 0 : _a._editor) === null || _b === void 0 ? void 0 : _b.masterLanguages) === null || _c === void 0 ? void 0 : _c.length) === 0)
+        return null;
+    return getCheckboxCommand(components, editContext, "componentLinkedToMasterLanguage", "Linked To Master Language");
+}
+function getCheckboxCommand(components, editContext, fieldName, label) {
+    const someLinked = components.find((x) => { var _a, _b; return ((_b = (_a = x.fields[fieldName]) === null || _a === void 0 ? void 0 : _a._editor) === null || _b === void 0 ? void 0 : _b.rawValue) === "1"; });
+    const allLinked = !components.find((x) => { var _a, _b; return ((_b = (_a = x.fields[fieldName]) === null || _a === void 0 ? void 0 : _a._editor) === null || _b === void 0 ? void 0 : _b.rawValue) !== "1"; });
+    return {
+        name: fieldName,
+        icon: "pi pi-" +
+            (allLinked ? "check-square" : someLinked ? "stop-circle" : "stop"),
+        label,
+        disabled: () => false,
+        execute: () => __awaiter(this, void 0, void 0, function* () {
+            components.forEach((c) => {
+                editContext.editField({
+                    field: c.fields[fieldName],
+                    rawValue: allLinked ? "" : "1",
+                    refresh: "immediate",
+                });
+            });
+        }),
+        visibilityScopes: ["menu", "contextMenu"],
+    };
+}
+function getInheritChildrenFromMasterCommand(components, editContext) {
+    var _a, _b, _c;
+    if (!components.length)
+        return null;
+    if (((_c = (_b = (_a = editContext.page) === null || _a === void 0 ? void 0 : _a._editor) === null || _b === void 0 ? void 0 : _b.masterLanguages) === null || _c === void 0 ? void 0 : _c.length) === 0)
+        return null;
+    if (components.find((x) => x.placeholders.length === 0))
+        return null;
+    return getCheckboxCommand(components, editContext, "inheritChildrenFromMasterLanguage", "Inherit Children From Master");
+}
+function isLocked(c, editContext) {
+    if (editContext.activeSessions.find((x) => {
+        var _a;
+        return ((_a = x.fieldLock) === null || _a === void 0 ? void 0 : _a.item.id) === c.id &&
+            x.fieldLock.item.language == c.language &&
+            x.fieldLock.item.version === c.version &&
+            x.sessionId !== editContext.sessionId;
+    }) !== undefined) {
+        return true;
+    }
+    else
+        return (c.placeholders.find((x) => x.components.find((child) => isLocked(child, editContext)) !==
+            undefined) !== undefined);
+}
+function getDeleteCommand(components, editContext) {
+    const applicableComponents = components.filter((c) => {
+        var _a, _b, _c, _d;
+        return ((!isPlaceholder(c) && !((_a = c._editor) === null || _a === void 0 ? void 0 : _a.hostingPageItem)) ||
+            ((_c = (_b = c._editor) === null || _b === void 0 ? void 0 : _b.hostingPageItem) === null || _c === void 0 ? void 0 : _c.id) === ((_d = editContext.page) === null || _d === void 0 ? void 0 : _d.id)) &&
+            !isLocked(c, editContext);
+    });
+    if (applicableComponents.length === 0)
+        return null;
+    return {
+        name: "delete",
+        label: "Delete",
+        icon: "pi pi-fw pi-trash",
+        execute: (context) => __awaiter(this, void 0, void 0, function* () { return deleteComponents(applicableComponents, context.editContext); }),
+        disabled: () => applicableComponents.length === 0 ||
+            applicableComponents.length !== components.length,
+        visibilityScopes: ["editFrame", "menu", "contextMenu"],
+    };
+}
+function canSynchronize(placeholderData) {
+    var _a;
+    if ((_a = placeholderData._editor) === null || _a === void 0 ? void 0 : _a.canSynchronize)
+        return true;
+    placeholderData.components.forEach((c) => {
+        if (c.placeholders.find((x) => canSynchronize(x)))
+            return true;
+    });
+    return false;
+}
+function getSyncCommand(components, editContext) {
+    var _a, _b;
+    const placeholders = [];
+    for (const component of components) {
+        if (isPlaceholder(component) && canSynchronize(component)) {
+            placeholders.push({
+                item: component.parentComponent
+                    ? getItemDescriptor(component.parentComponent, editContext)
+                    : undefined,
+                name: component.name,
+            });
+        }
+        else {
+            if ((_a = component.placeholders) === null || _a === void 0 ? void 0 : _a.find((x) => canSynchronize(x))) {
+                placeholders.push({
+                    item: getItemDescriptor(component, editContext),
+                });
+            }
+        }
+    }
+    const canSync = placeholders.length > 0 ||
+        (components.length === 0 &&
+            ((_b = editContext.page) === null || _b === void 0 ? void 0 : _b.placeholders.find((x) => canSynchronize(x))));
+    return {
+        name: "synchronize",
+        label: "Synchronize",
+        icon: "pi pi-fw pi-sync",
+        disabled: () => !canSync,
+        visibilityScopes: ["menu", "editFrame", "contextMenu"],
+        execute: () => __awaiter(this, void 0, void 0, function* () {
+            const op = {
+                type: "synchronize-components",
+                date: new Date().toISOString(),
+                delete: false,
+                id: uuid(),
+                placeholders: placeholders,
+                pageItem: getPageItemDescriptor(editContext),
+                description: "Synchronize components",
+            };
+            editContext.executeEditOperation(op);
+        }),
+    };
+}
+function getItemDescriptors(components, editContext) {
+    const items = components
+        .map((c) => getItemDescriptor(c, editContext))
+        .flatMap((f) => (f ? [f] : []));
+    return items;
+}
+function deleteComponents(components, editContext) {
+    const items = getItemDescriptors(components, editContext);
+    if (!items.length)
+        return;
+    confirmDialog({
+        message: (items.length > 1
+            ? "Are you sure you want to remove these components? "
+            : "Are you sure you want to remove this component? ") +
+            items.map((x) => x.name).join(", "),
+        header: items.length > 1 ? "Remove components" : "Remove component",
+        icon: "pi pi-exclamation-triangle",
+        accept: () => {
+            const op = {
+                type: "remove-component",
+                date: new Date().toISOString(),
+                id: uuid(),
+                components: items,
+                pageItem: getPageItemDescriptor(editContext),
+                description: "Remove components: " + items.map((x) => x.name).join(", "),
+            };
+            editContext.executeEditOperation(op);
+            components.forEach((c) => {
+                if (c)
+                    c._editor.isRemoved = true;
+            });
+        },
+    });
+}
+function getItemDescriptor(component, editContext) {
+    var _a, _b;
+    if (component.type === "page")
+        return {
+            id: component.id,
+            language: component.language,
+            version: component.version,
+        };
+    return {
+        id: component.id,
+        language: ((_a = component._editor.hostingPageItem) === null || _a === void 0 ? void 0 : _a.language) || editContext.page.language,
+        version: ((_b = component._editor.hostingPageItem) === null || _b === void 0 ? void 0 : _b.version) || editContext.page.version,
+        name: component.name,
+    };
+}
+function getPageItemDescriptor(editContext) {
+    return {
+        id: editContext.page.id,
+        language: editContext.page.language,
+        version: editContext.page.version,
+    };
+}

package/dist/esm/editor/commands/createVersionCommand.js

@@ -0,0 +1,26 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createVersion } from "../services/editService";
+import { getItemDescriptor } from "../utils";
+export function getCreateAndSwitchToNewVersionCommand() {
+    return {
+        name: "createAndSwitchToNewVersion",
+        execute: execute,
+        label: "Add Version",
+        icon: "pi pi-fw pi-plus",
+        disabled: (context) => !context.editContext.item._editor.canLock,
+    };
+}
+function execute(context) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield createVersion(getItemDescriptor(context.editContext.item), context.editContext.sessionId);
+        context.editContext.loadItem(Object.assign(Object.assign({}, context.editContext.item), { version: context.editContext.item.version + 1 }));
+    });
+}

package/dist/esm/editor/commands/undo.js

@@ -0,0 +1,22 @@
+export function getUndoCommand() {
+    return {
+        name: "undo",
+        label: "Undo",
+        icon: "pi pi-fw pi-undo",
+        execute: (context) => context.editContext.undo(),
+        disabled: (context) => context.editContext.editHistory.length === 0 ||
+            !context.editContext.editHistory.find((x) => x.sessionId === context.editContext.sessionId && x.canUndo),
+    };
+}
+export function getRedoCommand() {
+    return {
+        name: "redo",
+        label: "Redo",
+        icon: "pi pi-fw pi-refresh",
+        execute: (context) => context.editContext.redo(),
+        disabled: (context) => {
+            return (context.editContext.editHistory.length === 0 ||
+                !context.editContext.editHistory.find((x) => x.sessionId === context.editContext.sessionId && x.canRedo));
+        },
+    };
+}

package/dist/esm/editor/component-designer/ComponentDesigner.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentPreview } from "./ComponentPreview";
+import { ComponentRenderingEditor } from "./ComponentRenderingEditor";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+export function ComponentDesigner() {
+    return (_jsxs(Splitter, { className: "a-h-full", children: [_jsx(SplitterPanel, { children: _jsx(ComponentRenderingEditor, {}) }), _jsx(SplitterPanel, { children: _jsx(ComponentPreview, {}) })] }));
+}

package/dist/esm/editor/component-designer/ComponentDesignerAiTerminal.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AiTerminal } from "../ai/AiTerminal";
+export function ComponentDesignerAiTerminal() {
+    return _jsx(AiTerminal, {});
+}

package/dist/esm/editor/component-designer/ComponentDesignerMenu.js

@@ -0,0 +1,39 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menubar } from "primereact/menubar";
+import { useComponentDesignerContext } from "./componentDesignerContext";
+import { createNewComponent } from "../services/componentDesignerService";
+import ItemNameDialog from "../ui/ItemNameDialog";
+import { useRef } from "react";
+export function ComponentDesignerMenu() {
+    const context = useComponentDesignerContext();
+    if (!context)
+        return;
+    const menuItems = [
+        {
+            label: "New Component",
+            icon: "pi pi-fw pi-plus",
+            command: () => createNew(),
+            disabled: !context.componentRenderingFolder,
+        },
+    ];
+    const itemNameDialogRef = useRef(null);
+    const createNew = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        (_a = itemNameDialogRef.current) === null || _a === void 0 ? void 0 : _a.show({
+            title: "Choose component name",
+            accept: (name) => __awaiter(this, void 0, void 0, function* () {
+                yield createNewComponent(context.componentRenderingFolder, name);
+            }),
+        });
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Menubar, { model: menuItems, className: "a-p-1 a-text-sm a-rounded-none a-border-0 a-border-b a-bg-gray-50" }), _jsx(ItemNameDialog, { ref: itemNameDialogRef })] }));
+}

package/dist/esm/editor/component-designer/ComponentPreview.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import { useComponentDesignerContext } from "./componentDesignerContext";
+import { useEffect, useState } from "react";
+import { useEditContext } from "../editContext";
+export function ComponentPreview() {
+    const context = useComponentDesignerContext();
+    const editContext = useEditContext();
+    if (!context)
+        return null;
+    const pathname = usePathname();
+    // State to hold the iframe src URL
+    const [iframeSrc, setIframeSrc] = useState("");
+    useEffect(() => {
+        var _a;
+        const newSrc = `${pathname}?itemid=${(_a = context.sampleItem) === null || _a === void 0 ? void 0 : _a.id}&language=en&mode=edit&codeVersion=${Date.now()}&fullscreen=true`;
+        setIframeSrc(newSrc);
+    }, [editContext === null || editContext === void 0 ? void 0 : editContext.editOperationExecutedFlag]);
+    return (_jsx("iframe", { className: "a-w-full a-h-full", src: iframeSrc, title: "Component Preview" }));
+}