@alpaca-headless/alpaca-headless-nextjs 0.0.4 → 1.0.19

package/dist/esm/components/Placeholder.js

@@ -7,12 +7,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditFrame } from "../editor/EditFrame";
 import { useAlpacaContext, } from "..";
+import { PlaceholderDropZoneHost } from "../editor/PlaceholderDropZoneHost";
+import Slot from "./Slot";
 export function Placeholder({ name, content, }) {
     return __awaiter(this, void 0, void 0, function* () {
         const data = yield content;
-        if (data.type !== "page" && data.type !== "component")
+        if (!data || !("placeholders" in data))
             return;
         const placeholderData = data.placeholders.find((x) => x.name == name);
         if (!placeholderData)
@@ -20,10 +23,40 @@ export function Placeholder({ name, content, }) {
         const context = useAlpacaContext();
         const loader = context.componentModuleLoader;
         const promises = placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.components.map((component) => __awaiter(this, void 0, void 0, function* () {
-            const module = yield loader(component.componentType);
-            return { data: component, Component: module.default };
+            if (component.componentType == "Slot")
+                return { Component: Slot, data: component, parent: data };
+            let module = null;
+            try {
+                module = yield loader(component.componentType);
+            }
+            catch (e) {
+                console.log(e);
+            }
+            if (!module) {
+                console.log("Could not find module " + component.componentType);
+                return {
+                    data: { name: component.componentType, id: "0" },
+                    Component: ComponentNotFound,
+                };
+            }
+            return { parent: data, data: component, Component: module.default };
         }));
         const components = yield Promise.all(promises);
-        return (_jsx(_Fragment, { children: components.map(({ Component, data }) => (_jsx(Component, { component: data }))) }));
+        if (context.pageContext.pageEditing) {
+            return (_jsxs(_Fragment, { children: [components.map(({ Component, data, parent }, index) => {
+                        return (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), _jsx(EditFrame, { componentId: data.id, children: _jsx(Component, { component: data }) }, data.id)] }));
+                    }), _jsx(PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, placeholder: placeholderData, index: components.length + 1 })] }));
+        }
+        else
+            return (_jsx(_Fragment, { children: components.map(({ Component, data }) => (_jsx(_Fragment, { children: _jsx(Component, { component: data }) }))) }));
     });
 }
+function ComponentNotFound({ component }) {
+    return (_jsxs("div", { style: {
+            backgroundColor: "orange",
+            color: "red",
+            fontSize: 18,
+            padding: 10,
+            border: "3px solid red",
+        }, children: ["Component not found: ", component.name, " "] }));
+}

package/dist/esm/components/RichText.js

@@ -0,0 +1,37 @@
+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());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { RichTextEditor } from "./RichTextEditor";
+import { useAlpacaContext } from "..";
+export function RichText(_a) {
+    var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!field)
+            return;
+        const internalProps = Object.assign(Object.assign({}, props), { dangerouslySetInnerHTML: {
+                __html: field.value,
+            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: '[' + field.name + ']' });
+        if (useAlpacaContext().pageContext.pageEditing)
+            return _jsx(RichTextEditor, Object.assign({ field: field, tag: tag }, props));
+        return React.createElement(tag || "div", Object.assign(props, internalProps));
+    });
+}

package/dist/esm/components/RichTextEditor.js

@@ -0,0 +1,55 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useState, useMemo, useCallback } from "react";
+import { useEditContext } from "../editor/editContext";
+export function RichTextEditor(_a) {
+    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
+    const editContext = useEditContext();
+    const [value, setValue] = useState("");
+    const [editedValue, setEditedValue] = useState();
+    if (!editContext)
+        return;
+    const { updateContentEditingFields } = editContext;
+    const component = editContext.getComponentById(field.itemId);
+    if (!component)
+        return;
+    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    useEffect(() => {
+        if (editedValue != liveField.value &&
+            "<p>" + editedValue + "</p>" != liveField.value) {
+            // console.log(
+            //   "editedValue:" + editedValue + " liveField.value " + liveField.value
+            // );
+            setValue(liveField.value);
+        }
+    }, [liveField.value]);
+    useEffect(() => {
+        setValue(liveField.value); // Otherwise react would not update the field after the refresh
+    }, [updateContentEditingFields]);
+    const setFieldValue = (val) => {
+        if (val != editedValue) {
+            setEditedValue(val);
+            if (editContext)
+                editContext.editField(field, val, true);
+        }
+    };
+    const eventHandler = useCallback((e) => {
+        setFieldValue(e.currentTarget.innerHTML);
+    }, [editContext.editField]);
+    return useMemo(() => {
+        const properies = Object.assign(Object.assign({}, props), { contentEditable: true, suppressContentEditableWarning: true, onInput: eventHandler, placeholder: "[" + field.name + "]", dangerouslySetInnerHTML: {
+                __html: value,
+            } });
+        return React.createElement(tag || "div", properies);
+    }, [value]);
+}

package/dist/esm/components/Slot.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Placeholder } from "..";
+export default function Section({ component }) {
+    return (_jsx(_Fragment, { children: _jsx(Placeholder, { name: "ph-slot-content", content: component }) }));
+}

package/dist/esm/components/Text.js

@@ -7,12 +7,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-export function Text({ field, tag, editable, }) {
+import { TextEditor } from "./TextEditor";
+import { useAlpacaContext } from "..";
+export function Text(_a) {
+    var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
     return __awaiter(this, void 0, void 0, function* () {
-        if (editable)
-            return React.createElement(tag || "div", null, field.value);
+        if (!field)
+            return;
+        if (field.jsonValue) {
+            field = field.jsonValue;
+        }
+        if (useAlpacaContext().pageContext.pageEditing)
+            return _jsx(TextEditor, Object.assign({ field: field, tag: tag }, props));
         else
-            return React.createElement(tag || "div", null, field.value);
+            return React.createElement(tag || "div", props, field.value);
     });
 }

package/dist/esm/components/TextEditor.js

@@ -0,0 +1,41 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useState } from "react";
+import { useEditContext } from "../editor/editContext";
+export function TextEditor(_a) {
+    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
+    const editContext = useEditContext();
+    const [value, setValue] = useState("");
+    const [editedValue, setEditedValue] = useState();
+    if (!editContext)
+        return;
+    const { updateContentEditingFields } = editContext;
+    const component = editContext.getComponentById(field.itemId);
+    if (!component)
+        return;
+    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    useEffect(() => {
+        if (editedValue != liveField.value)
+            setValue(liveField.value);
+    }, [liveField.value]);
+    useEffect(() => {
+        setValue(liveField.value); // Otherwise react would not update the field after the refresh
+    }, [updateContentEditingFields]);
+    const properies = Object.assign(Object.assign({}, props), { contentEditable: true, suppressContentEditableWarning: true, onInput: (e) => setFieldValue(e.currentTarget.textContent), placeholder: "[" + field.name + "]" });
+    const setFieldValue = (val) => {
+        setEditedValue(val);
+        if (editContext)
+            editContext.editField(field, val, true);
+    };
+    return React.createElement(tag || "div", properies, value);
+}

package/dist/esm/components/Translate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAlpacaContext } from "..";
+import { TranslateEditor } from "../editor/TranslateEditor";
+export function Translate({ text }) {
+    const context = useAlpacaContext();
+    const dictionary = context.dictionary;
+    if (context.pageContext.pageEditing)
+        return _jsx(TranslateEditor, { text: text });
+    return dictionary[text] || text;
+}

package/dist/esm/components/index.js

@@ -1,2 +1,7 @@
 export * from "./Placeholder";
 export * from "./Text";
+export * from "./Picture";
+export * from "./RichText";
+export * from "./Image";
+export * from "./Link";
+export * from "./Translate";

package/dist/esm/editor/AiTerminal.js

@@ -0,0 +1,157 @@
+"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 { jsx as _jsx, jsxs as _jsxs } 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";
+export function AiTerminal({ requestRefresh, selection, }) {
+    const searchParams = useSearchParams();
+    const [messages, setMessages] = useState([]);
+    const [tokens, setTokens] = useState({ in: 0, out: 0 });
+    const selectionRef = useRef(selection);
+    useEffect(() => {
+        selectionRef.current = selection;
+    }, [selection]);
+    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 lastRefresh = new Date().getTime();
+            const response = yield prompt(newMessages, selectionRef.current, searchParams.get("session"), searchParams.get("itemid"), searchParams.get("language"), searchParams.get("version"), (response) => {
+                console.log(response);
+                setTokens({
+                    in: response.numInputTokens,
+                    out: response.numOutputTokens,
+                });
+                handleResponse(response, callback, false);
+                if (response.editOperations.length) {
+                    if (new Date().getTime() - lastRefresh > 500) {
+                        requestRefresh(false);
+                        router.refresh();
+                        lastRefresh = new Date().getTime();
+                    }
+                }
+            });
+            if (response) {
+                handleResponse(response, callback, true);
+                setTokens({ in: response.numInputTokens, out: response.numOutputTokens });
+                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');
+            setMessages(newMessages);
+        });
+    }
+    useEffect(() => {
+        TerminalService.on("command", commandHandler);
+        return () => {
+            TerminalService.off("command", commandHandler);
+        };
+    }, []);
+    return (_jsxs("div", { className: "a-h-full a-flex a-flex-col a-relative", children: [_jsx("div", { className: "a-flex-1 a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute", children: _jsx(Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
+                            commandHandler(v, callback);
+                        } }) }) }), _jsxs("div", { className: "a-text-xs", children: ["Tokens in: ", tokens.in, " out: ", tokens.out] })] }));
+}
+function prompt(messages, selection, session, itemid, language, version, 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,
+                sessionId: session,
+            }),
+            credentials: "omit",
+            headers: {
+                "Content-Type": "application/json",
+                //Cookie: 'test'// 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);
+            }
+        }
+        return result;
+    });
+}
+function handleResponse(response, terminalCallback, isFinished) {
+    console.log(response.responseText);
+    terminalCallback(response.responseText, isFinished);
+}

package/dist/esm/editor/ComponentInfo.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export function ComponentInfo({ component, }) {
+    var _a;
+    if (!(component === null || component === void 0 ? void 0 : component.fields))
+        return;
+    const hostingPageItem = component.hostingPageItem ? (_jsx("div", { children: _jsxs("div", { className: "a-text-xs", children: ["Source: ", component.hostingPageItem.path, "( ID:", " ", component.hostingPageItem.id, ")"] }) })) : null;
+    const linkedComponent = component.linkedComponentItem ? (_jsx("div", { children: _jsxs("div", { className: "a-text-xs", children: ["Source: ", component.linkedComponentItem.path] }) })) : null;
+    return (_jsxs("div", { className: "a-p-1", children: [_jsx("h2", { className: "a-text-xl a-font-bold a-my-2", children: component.name }), _jsxs("div", { className: "a-text-xs", children: ["ID: ", component.id] }), _jsxs("div", { className: "a-text-xs", children: ["Languages: ", (_a = component.translations) === null || _a === void 0 ? void 0 : _a.join(", ")] }), hostingPageItem, linkedComponent] }));
+}

package/dist/esm/editor/ComponentPalette.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEditContext } from "..";
+import ContentTree from "./ContentTree";
+export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const insertingPlaceholderKeys = selection
+        .map((x) => editContext.getComponentById(x))
+        .filter((x) => x)
+        .reduce((a, x) => a.concat(x.placeholders.map((y) => y.key)), []);
+    const selectedPlaceholderKeys = [
+        ...selection.filter((x) => x.indexOf("_") > 0),
+        ...insertingPlaceholderKeys,
+    ];
+    const insertOptions = collectInsertOptions(page, selectedPlaceholderKeys);
+    // function directInsert() {
+    //   if (editContext!.selectedForInsertion.indexOf("_") > 0) {
+    //     var lastUnderscoreIndex =
+    //       editContext!.selectedForInsertion.lastIndexOf("_");
+    //     const index = editContext!.selectedForInsertion.substring(
+    //       lastUnderscoreIndex + 1
+    //     );
+    //     const key = editContext!.selectedForInsertion.substring(
+    //       0,
+    //       lastUnderscoreIndex
+    //     );
+    //     editContext!.droppedInPlaceholder(key, parseInt(index));
+    //   }
+    // }
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "a-text-xl a-font-bold a-mb-8", children: "New" }), _jsx("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
+                    function handleDragStart(event) {
+                        dragStart({ type: "template", templateId: option.id });
+                        event.stopPropagation();
+                    }
+                    function handleDragEnd() {
+                        dragEnd();
+                    }
+                    return (_jsxs("div", { 
+                        //    onClick={directInsert}
+                        draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "p-3 shadow-md flex items-center flex-col gap-1 cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
+                }) }), _jsx("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
+                    dragStart({
+                        type: "link-component",
+                        templateId: itemNode.templateId,
+                        componentId: itemNode.id,
+                    });
+                }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
+                    (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined })] }));
+}
+function collectInsertOptions(page, placeholderKeys) {
+    const insertOptionsMap = new Map();
+    function traverse(placeholders) {
+        for (const placeholder of placeholders) {
+            if (placeholder.insertOptions &&
+                (placeholderKeys.length === 0 ||
+                    placeholderKeys.includes(placeholder.key))) {
+                for (const option of placeholder.insertOptions) {
+                    insertOptionsMap.set(option.id, option);
+                }
+            }
+            for (const component of placeholder.components) {
+                traverse(component.placeholders);
+            }
+        }
+    }
+    traverse(page.placeholders);
+    // Convert the map back into an array of objects
+    const insertOptionsArray = Array.from(insertOptionsMap.values());
+    return insertOptionsArray;
+}