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

package/dist/esm/components/Picture.js

@@ -0,0 +1,115 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { hashImageUrl } from "../mediaProtection";
+import { useAlpacaContext } from "..";
+import { PictureEditor } from "./PictureEditor";
+// const addClassName = (otherAttrs: { [key: string]: unknown }): void => {
+//   if (otherAttrs.class) {
+//     // if any classes are defined properly already
+//     if (otherAttrs.className) {
+//       let className: string = otherAttrs.className as string;
+//       className += ` ${otherAttrs.class}`;
+//       otherAttrs.className = className;
+//     } else {
+//       otherAttrs.className = otherAttrs.class;
+//     }
+//     delete otherAttrs.class;
+//   }
+// };
+export const Picture = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
+    if (!field)
+        return null;
+    if ((_b = useAlpacaContext().pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing)
+        return _jsx(PictureEditor, Object.assign({ field: field }, otherProps));
+    const variants = (_c = field.value) === null || _c === void 0 ? void 0 : _c.variants;
+    const img = (_e = (_d = field.value) === null || _d === void 0 ? void 0 : _d.variants.find((x) => x.name.toUpperCase() == (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.toUpperCase()))) !== null && _e !== void 0 ? _e : (_f = field.value) === null || _f === void 0 ? void 0 : _f.variants[0];
+    const attrs = Object.assign({ src: img === null || img === void 0 ? void 0 : img.src }, otherProps);
+    const video = img === null || img === void 0 ? void 0 : img.videoUrl;
+    const videoAttr = Object.assign({ src: video }, otherProps);
+    if (!(sources === null || sources === void 0 ? void 0 : sources.length)) {
+        return _jsx("img", Object.assign({}, attrs, { alt: (_g = field.value) === null || _g === void 0 ? void 0 : _g.alt }));
+    }
+    else {
+        return (_jsxs(_Fragment, { children: [_jsxs("picture", { children: [sources === null || sources === void 0 ? void 0 : sources.map((source) => {
+                            const variant = variants === null || variants === void 0 ? void 0 : variants.find((v) => v.name.toLowerCase() == source.variant.toLowerCase());
+                            if (!(variant === null || variant === void 0 ? void 0 : variant.src))
+                                return;
+                            let srcSet = hashImageUrl(variant.src);
+                            const getScaledImage = (variant, width) => {
+                                if (width > variant.width)
+                                    return { src: variant.src, width: 0 };
+                                else
+                                    return {
+                                        src: variant.src +
+                                            `${variant.src.includes("?") ? "&" : "?"}mw=` +
+                                            width,
+                                        width: width,
+                                    };
+                            };
+                            if (source.widths && source.widths.length) {
+                                let scaledImages = source.widths.map((x) => getScaledImage(variant, x));
+                                srcSet = "";
+                                for (let w = 0; w < scaledImages.length; w++) {
+                                    if (srcSet.length)
+                                        srcSet = srcSet + ", ";
+                                    srcSet +=
+                                        hashImageUrl(scaledImages[w].src) +
+                                            " " +
+                                            source.widths[w] +
+                                            "w";
+                                    if (scaledImages[w].width === 0)
+                                        break;
+                                }
+                            }
+                            else {
+                                if (source.width) {
+                                    srcSet = hashImageUrl(getScaledImage(variant, source.width).src);
+                                    if (source.scales) {
+                                        let scaledImages = source.scales.map((x) => { var _a; return getScaledImage(variant, ((_a = source.width) !== null && _a !== void 0 ? _a : 0) * x); });
+                                        srcSet = "";
+                                        for (let w = 0; w < scaledImages.length; w++) {
+                                            if (srcSet.length)
+                                                srcSet = srcSet + ", ";
+                                            srcSet +=
+                                                hashImageUrl(scaledImages[w].src) +
+                                                    " " +
+                                                    source.scales[w] +
+                                                    "x";
+                                            if (scaledImages[w].width === 0)
+                                                break;
+                                        }
+                                    }
+                                }
+                            }
+                            return (_jsx("source", { srcSet: srcSet, media: source.media }, source.variant + source.media));
+                        }), _jsx("img", Object.assign({}, attrs, { alt: (_h = field.value) === null || _h === void 0 ? void 0 : _h.alt }))] }), renderJsonLinkedData && !video ? (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
+                        __html: JSON.stringify({
+                            "@context": "http://schema.org",
+                            "@type": "ImageObject",
+                            image: img === null || img === void 0 ? void 0 : img.src,
+                            description: (_j = field.value) === null || _j === void 0 ? void 0 : _j.alt,
+                            name: (_k = field.value) === null || _k === void 0 ? void 0 : _k.name,
+                        }),
+                    } })) : null, video && _jsx("video", Object.assign({}, videoAttr)), renderJsonLinkedData && video ? (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
+                        __html: JSON.stringify({
+                            "@context": "http://schema.org",
+                            "@type": "VideoObject",
+                            contentUrl: img === null || img === void 0 ? void 0 : img.src,
+                            description: (_l = field.value) === null || _l === void 0 ? void 0 : _l.alt,
+                            name: (_m = field.value) === null || _m === void 0 ? void 0 : _m.name,
+                        }),
+                    } })) : null] }));
+    }
+};

package/dist/esm/components/PictureEditor.js

@@ -0,0 +1,39 @@
+"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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Picture } from "./Picture";
+import { useEditContext } from "..";
+import { MediaSelector } from "../editor/MediaSelector";
+import { Dialog } from "primereact/dialog";
+export const PictureEditor = (_a) => {
+    var _b, _c;
+    var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
+    function selectImage() {
+        setMediaSelectorVisible(true);
+    }
+    const editContext = useEditContext();
+    const [mediaSelectorVisible, setMediaSelectorVisible] = useState(false);
+    const [editorVisible, setEditorVisible] = useState(false);
+    if (!editContext)
+        return;
+    function imageSelected(imageId) {
+        const value = (field === null || field === void 0 ? void 0 : field.value) || {};
+        //value.variants[0].mediaId = imageId;
+        console.log(imageId);
+        if (field)
+            editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
+    }
+    console.log(JSON.stringify(field));
+    return (_jsxs(_Fragment, { children: [_jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), _jsxs(Dialog, { header: "Header", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: [_jsx("div", { className: "flex gap-1", children: (_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => (_jsxs("div", { children: [_jsx("div", { className: "h-24 w-24 border", children: variant.src && _jsx("img", { src: variant.src }) }), _jsx("div", { children: variant.name }), _jsx("div", { children: variant.aspectRatioText })] }))) }), _jsx("div", { onClick: selectImage, children: "Select image" })] }), _jsxs("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", _jsx(Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
+};

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,146 @@
+"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: 'h-full flex flex-col relative', children: [_jsx("div", { className: 'flex-1 relative', children: _jsx("div", { className: 'inset-0 absolute', children: _jsx(Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
+                            commandHandler(v, callback);
+                        } }) }) }), _jsxs("div", { className: '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: "text-xs", children: ["Source: ", component.hostingPageItem.path, "( ID:", " ", component.hostingPageItem.id, ")"] }) })) : null;
+    const linkedComponent = component.linkedComponentItem ? (_jsx("div", { children: _jsxs("div", { className: "text-xs", children: ["Source: ", component.linkedComponentItem.path] }) })) : null;
+    return (_jsxs("div", { className: "p-1", children: [_jsx("h2", { className: "text-xl font-bold my-2", children: component.name }), _jsxs("div", { className: "text-xs", children: ["ID: ", component.id] }), _jsxs("div", { className: "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: "text-xl font-bold mb-8", children: "New" }), _jsx("div", { className: "grid grid-cols-4 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: "text-xl font-bold 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;
+}