@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/PublishDialog.ignore

@@ -0,0 +1,74 @@
+import { Dialog } from "primereact/dialog";
+
+import { Workbox as WorkboxWidget } from "./sidebar/Workbox";
+
+import DialogButtons from "./DialogButtons";
+import { Button } from "primereact/button";
+
+
+export function PublishDialog({
+  // lockItems,
+  // unlockItems,
+
+  visible,
+  onHide,
+  page,
+}: {
+  // lockItems: (item: ItemDescriptor[]) => void;
+  // unlockItems: (item: ItemDescriptor[]) => void;
+  executeWorkflowCommand: (item: ItemDescriptor, commandId: string) => void;
+  visible: boolean;
+  onHide: () => void;
+  page: Page;
+}) {
+  const allUnlocked =
+    page._editor!.workbox.items.filter((x) => x.hasLock).length > 0;
+  const allInFinalState =
+    page._editor!.workbox.items.filter((x) => !x.isFinalState).length > 0;
+  return (
+    <>
+      <Dialog
+        header={"Publish page " + page.name}
+        style={{ width: "70vw", height: "70vh" }}
+        onHide={onHide}
+        visible={visible}
+      >
+        <div className="a-w-full a-h-full a-flex a-flex-col">
+          <WorkboxWidget />
+
+          <DialogButtons>
+            {/* {allUnlocked && (
+              <Button
+                onClick={() => {
+                  unlockItems(
+                    page.workbox.items
+                      .filter((x) => x.hasLock)
+                      .map((x) => x.item)
+                  );
+                }}
+                size="small"
+              >
+                Unlock all
+              </Button>
+            )} */}
+            {allInFinalState && (
+              <Button size="small" onClick={() => {}}>
+                Publish
+              </Button>
+            )}
+            {!(allInFinalState || !allUnlocked) && (
+              <Button
+                onClick={() => {
+                  onHide();
+                }}
+                size="small"
+              >
+                Cancel
+              </Button>
+            )}
+          </DialogButtons>
+        </div>
+      </Dialog>
+    </>
+  );
+}

package/src/editor/ScrollingContentTree.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { ItemTreeNodeData } from "./services/contentService";
+
+import ContentTree from "./ContentTree";
+import { FullItem, ItemDescriptor } from "./pageModel";
+import { contentItemId } from "../config/config";
+import { useEditContext, EditContextType } from "./client/editContext";
+
+export function ScrollingContentTree({
+  selectedItemId,
+  onSelectionChange,
+  rootItemId,
+
+  expandedItemId,
+}: {
+  selectedItemId?: string;
+  onSelectionChange?: (itemIds: ItemTreeNodeData[]) => void;
+  rootItemId?: string;
+  expandedItemId?: string;
+}) {
+  const [selectedItem, setSelectdItem] = useState<FullItem | null>(null);
+  const [expandedItem, setExpandedItem] = useState<FullItem | null>();
+  const editContext = useEditContext();
+
+  useEffect(() => {
+    const loadItem = async () => {
+      if (!selectedItemId) return;
+      const item = await editContext!.itemsRepository.getItem({
+        id: selectedItemId,
+        language: editContext!.currentItemDescriptor?.language ?? "en",
+        version: 0,
+      });
+      if (item) setSelectdItem(item);
+    };
+    loadItem();
+  }, [selectedItemId]);
+
+  useEffect(() => {
+    const loadItem = async () => {
+      if (!expandedItemId && !selectedItemId) {
+        setExpandedItem(null);
+        return;
+      }
+      const item = await editContext!.itemsRepository.getItem({
+        id: expandedItemId ?? selectedItemId ?? "",
+        language: editContext!.currentItemDescriptor?.language ?? "en",
+        version: 0,
+      });
+      if (item) setExpandedItem(item);
+    };
+    loadItem();
+  }, [expandedItemId, selectedItemId]);
+
+  return (
+    <div className="absolute inset-0 overflow-auto">
+      <ContentTree
+        language={editContext!.currentItemDescriptor?.language ?? "en"}
+        rootItemId={rootItemId ?? contentItemId}
+        expandIdPath={expandedItem?.idPath}
+        selectedItemIds={selectedItemId ? [selectedItemId] : []}
+        selectionMode="single"
+        className="h-full p-1"
+        onSelectionChange={onSelectionChange}
+        scrollToSelected={true}
+      />
+    </div>
+  );
+}

package/src/editor/Terminal.tsx

@@ -0,0 +1,227 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  useImperativeHandle,
+} from "react";
+import { Button } from "primereact/button";
+import { InputTextarea } from "primereact/inputtextarea";
+import { classNames } from "primereact/utils";
+
+type Message = {
+  text: React.ReactNode;
+  type: "command" | "response";
+};
+
+export const Terminal = forwardRef<
+  { submit: () => void },
+  {
+    commandHandler: (
+      text: string,
+      callback: (text: React.ReactNode, finished: boolean) => void,
+    ) => void;
+    prompt: string;
+    setPrompt: (text: string) => void;
+    onReset: () => void;
+    toolbar?: React.ReactNode;
+    statusbar?: React.ReactNode;
+    infobar?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+  }
+>((props, ref) => {
+  const {
+    commandHandler,
+    prompt,
+    setPrompt,
+    onReset,
+    toolbar,
+    statusbar,
+    infobar,
+    disabled,
+    className,
+  } = props;
+
+  const [response, setResponse] = useState<React.ReactNode>();
+  const [messages, setMessages] = useState<Message[]>([]);
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+  const messageRef = useRef(messages);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const [promptHistory, setPromptHistory] = useState<string[]>(() => {
+    if (typeof window !== "undefined") {
+      return JSON.parse(
+        localStorage.getItem("editor.ai.promptHistory") || "[]",
+      );
+    }
+    return [];
+  });
+  const [currentHistoryIndex, setCurrentHistoryIndex] = useState<number>(-1);
+
+  useEffect(() => {
+    localStorage.setItem(
+      "editor.ai.promptHistory",
+      JSON.stringify(promptHistory),
+    );
+  }, [promptHistory]);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  useEffect(() => {
+    messageRef.current = messages;
+  }, [messages]);
+
+  const callback = (text: React.ReactNode, finished: boolean) => {
+    if (!finished) setResponse(text);
+    else {
+      setResponse(undefined);
+      setMessages([...messageRef.current, { type: "response", text }]);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      submit();
+    }
+    if (e.key === "ArrowUp") {
+      // Only navigate history if we haven't started typing or if we're already navigating history
+      const hasStartedTyping =
+        prompt.trim().length > 0 && currentHistoryIndex === -1;
+      if (!hasStartedTyping) {
+        e.preventDefault();
+        if (promptHistory.length > 0) {
+          const newIndex =
+            currentHistoryIndex < promptHistory.length - 1
+              ? currentHistoryIndex + 1
+              : currentHistoryIndex;
+          setCurrentHistoryIndex(newIndex);
+          const historicalPrompt = promptHistory[newIndex];
+          if (inputRef.current && historicalPrompt) {
+            setPrompt(historicalPrompt);
+            setTimeout(() => {
+              inputRef.current!.selectionStart = historicalPrompt.length;
+              inputRef.current!.selectionEnd = historicalPrompt.length;
+            }, 0);
+          }
+        }
+      }
+    }
+    if (e.key === "ArrowDown" && currentHistoryIndex >= 0) {
+      e.preventDefault();
+      const newIndex = currentHistoryIndex - 1;
+      setCurrentHistoryIndex(newIndex);
+      const historicalPrompt =
+        newIndex >= 0 ? promptHistory[newIndex] || "" : "";
+      setPrompt(historicalPrompt);
+      if (inputRef.current) {
+        setTimeout(() => {
+          inputRef.current!.selectionStart = historicalPrompt.length;
+          inputRef.current!.selectionEnd = historicalPrompt.length;
+        }, 0);
+      }
+    }
+  };
+
+  useEffect(() => {
+    // Scroll to bottom every time messages or response changes.
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, response]);
+
+  const responseBoxClasses =
+    "text-xs self-stretch text-gray-700 p-2 rounded shadow border border-gray-200";
+  const getClasses = (m: Message) => {
+    if (m.type === "response") return responseBoxClasses;
+    return "text-xs text-gray-700 bg-indigo-100 p-2 rounded prompt";
+  };
+
+  // Expose the submit function via the ref.
+  const submit = () => {
+    if (prompt.trim()) {
+      setPromptHistory((prev) => [
+        prompt,
+        ...prev.filter((p) => p !== prompt).slice(0, 9),
+      ]);
+      setCurrentHistoryIndex(-1);
+    }
+    setMessages([...messages, { type: "command", text: prompt }]);
+    setPrompt("");
+    setResponse("...");
+    commandHandler(prompt, callback);
+  };
+
+  useImperativeHandle(ref, () => ({
+    submit,
+  }));
+
+  return (
+    <div className={classNames("flex h-full flex-col", className)}>
+      <div className="flex items-center justify-between gap-2 border-b border-gray-200 p-1 text-xs">
+        <button
+          onClick={() => {
+            setMessages([]);
+            onReset();
+          }}
+        >
+          <i className="pi pi-trash m-1 text-sm" />
+        </button>
+        {toolbar}
+      </div>
+      <div className="h-full overflow-x-hidden overflow-y-auto p-2">
+        <div className="flex flex-col items-end gap-3 select-text">
+          {messages.map((m, i) => (
+            <div key={i} className={getClasses(m)}>
+              {m.text}
+            </div>
+          ))}
+
+          {response != null && (
+            <div className={responseBoxClasses}>
+              <div className="flex text-xs">{response}</div>
+              <div className="mr-4 flex items-center justify-end space-x-1 text-xs text-gray-400">
+                <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]"></div>
+                <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]"></div>
+                <div className="h-1 w-1 animate-bounce rounded-full bg-gray-400"></div>
+              </div>
+            </div>
+          )}
+          <div ref={bottomRef} />
+        </div>
+      </div>
+      <div className="flex flex-col p-1 pb-0">
+        {infobar}
+        <InputTextarea
+          ref={inputRef}
+          value={prompt}
+          className="flex-1 resize-none self-stretch rounded border border-gray-300 text-xs"
+          onKeyDown={handleKeyPress}
+          onChange={(e) => {
+            setPrompt(e.target.value);
+            // Reset history index when user starts typing
+            if (currentHistoryIndex !== -1) {
+              setCurrentHistoryIndex(-1);
+            }
+          }}
+          rows={4}
+          cols={30}
+          disabled={disabled}
+        />
+        <div className="flex items-center justify-between py-1">
+          {statusbar}
+          <Button
+            icon={"pi pi-send"}
+            text
+            size="small"
+            className="tour-send-button"
+            onClick={submit}
+            disabled={prompt.trim().length === 0}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/editor/Titlebar.tsx

@@ -0,0 +1,104 @@
+import { MenuIcon } from "lucide-react";
+import { useEditContext } from "./client/editContext";
+import { useEffect, useState, useRef } from "react";
+import { createPortal } from "react-dom";
+import { Logo } from "./ui/Icons";
+
+export function Titlebar() {
+  const editContext = useEditContext();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  if (!editContext?.view) return null;
+
+  const isMobile = editContext.isMobile;
+
+  // Get custom title from view's headerTitle function, or fall back to "workbench"
+  const title = editContext.view.headerTitle
+    ? editContext.view.headerTitle(editContext)
+    : "SiteMagician";
+
+  useEffect(() => {
+    setMenuOpen(false);
+  }, [editContext.currentItemDescriptor]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (!menuOpen) return;
+
+      const target = event.target as Element;
+      const menuElement = menuRef.current;
+      const buttonElement = buttonRef.current;
+
+      // Check if the click is inside the menu or button
+      const isInsideMenu = menuElement && menuElement.contains(target);
+      const isInsideButton = buttonElement && buttonElement.contains(target);
+
+      // Check if the click is inside a PrimeReact overlay (which renders in portals)
+      const isInsideOverlay = target.closest(".p-overlaypanel") !== null;
+
+      // Close menu only if click is outside menu, button, and overlays
+      if (!isInsideMenu && !isInsideButton && !isInsideOverlay) {
+        setMenuOpen(false);
+      }
+    };
+
+    if (menuOpen) {
+      document.addEventListener("click", handleClickOutside, true);
+
+      return () => {
+        document.removeEventListener("click", handleClickOutside, true);
+      };
+    }
+  }, [menuOpen]);
+
+  return (
+    <div className="z-1 flex min-h-11 items-center justify-between gap-1 bg-gradient-to-r from-gray-900 from-10% to-indigo-950">
+      <div className="relative flex items-center justify-center gap-2 pl-2 font-bold text-white">
+        <a
+          //href="/sitecore/shell/sitecore/client/Applications/Launchpad"
+          onClick={() => {
+            editContext.switchView("splash-screen");
+          }}
+          className="glow-text flex cursor-pointer items-center"
+        >
+          <Logo className="h-6 w-6" />
+          <span className="ml-2 font-mono">{title}</span>
+        </a>
+      </div>
+      <div>{editContext?.view.primaryControls}</div>
+      {/* Desktop View */}
+      {!isMobile && (
+        <>
+          <div>{editContext?.view.secondaryControls}</div>
+        </>
+      )}
+
+      {/* Mobile View - Burger Menu */}
+      {isMobile && editContext?.view.secondaryControls && (
+        <>
+          <button
+            ref={buttonRef}
+            className="px-4 text-white"
+            onClick={() => setMenuOpen(!menuOpen)}
+            aria-label="Menu"
+          >
+            <MenuIcon className="h-6 w-6" />
+          </button>
+
+          {menuOpen &&
+            createPortal(
+              <div
+                ref={menuRef}
+                className="absolute top-10.5 right-0 z-50 rounded bg-indigo-950 p-4 shadow-lg"
+              >
+                <div>{editContext?.view.secondaryControls}</div>
+              </div>,
+              document.body,
+            )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/editor/ai/AiPopup.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { OverlayPanel } from "primereact/overlaypanel";
+import { Button } from "primereact/button";
+import {
+  SyntheticEvent,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { EditorAiTerminal } from "./EditorAiTerminal";
+import { AiTerminalOptions } from "./AiTerminal";
+
+export interface AiPopupRef {
+  show: (event: SyntheticEvent, terminalOptions?: AiTerminalOptions) => void;
+  close: () => void;
+}
+
+interface AiPopupProps {}
+
+export const AiPopup = forwardRef<AiPopupRef, AiPopupProps>(
+  (_: unknown, ref) => {
+    const overlayRef = useRef<OverlayPanel>(null);
+    const [terminalOptions, setTerminalOptions] = useState<AiTerminalOptions>();
+
+    //const [components, setComponents] = useState<ComponentData[]>([]); // [componentId, componentId, ...]
+
+    useImperativeHandle(ref, () => ({
+      show: (ev: SyntheticEvent, terminalOptions?: AiTerminalOptions) => {
+        setTerminalOptions(terminalOptions);
+        //setComponents(components || []);
+        overlayRef.current?.toggle(ev);
+      },
+      close: () => {
+        overlayRef.current?.hide();
+      },
+    }));
+
+    return (
+      <OverlayPanel ref={overlayRef}>
+        <div
+          className="w-96 h-96 flex flex-col gap-2"
+          onClick={(ev) => ev.stopPropagation()}
+        >
+          <EditorAiTerminal
+            options={terminalOptions}
+            closeButton=<Button
+              icon="pi pi-times"
+              onClick={() => overlayRef.current?.hide()}
+              size="small"
+              text
+            />
+          />
+        </div>
+      </OverlayPanel>
+    );
+  }
+);

package/src/editor/ai/AiResponseMessage.tsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+
+import { useEditContext } from "../client/editContext";
+import { EditOperation } from "../../types";
+import { Message } from "./AiTerminal";
+import { AiToolCall } from "./AiToolCall";
+
+export function AiResponseMessage({
+  messages,
+  finished,
+  editOperations,
+}: {
+  messages: Message[];
+  finished: boolean;
+  editOperations: EditOperation[];
+}) {
+  const editContext = useEditContext();
+  if (!editContext) return <></>;
+
+  // const [showFunctions, setShowFunctions] = useState(false);
+  const [changesRejected, setChangesRejected] = useState<boolean | undefined>(
+    undefined,
+  );
+
+  const reversedEditOperations = [...editOperations].reverse();
+
+  const canReject =
+    editContext.editHistory.length >= editOperations.length &&
+    reversedEditOperations.find(
+      (x, index) =>
+        editContext.editHistory[index]?.id !== x.id ||
+        !editContext.editHistory[index]?.canUndo,
+    ) === undefined;
+
+  return (
+    <div>
+      {messages
+        .filter((x) => x.role !== "tool")
+        .map((message, index) => (
+          <div key={index}>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: message.formattedContent || message.content || "",
+              }}
+            />
+            {message.tool_calls && message.tool_calls.length > 0 && (
+              <div className="text-xs text-gray-400">
+                {message.tool_calls.map((x, index) => (
+                  <AiToolCall
+                    toolCall={x}
+                    key={index}
+                    result={messages.find(
+                      (m) => m.role === "tool" && m.tool_call_id === x.id,
+                    )}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      {/* <div
+        dangerouslySetInnerHTML={{
+          __html: responseText.replaceAll("\\n", "<br>"),
+        }}
+      />
+      {toolcalls.length > 0 && (
+        <div
+          className="mt-1 flex cursor-pointer items-center gap-1 text-xs text-gray-400"
+          onClick={() => setShowFunctions(!showFunctions)}
+        >
+          <i className="pi pi-wrench text-xs" /> Tool calls
+        </div>
+      )} */}
+
+      {/* {showFunctions && (
+        <div className="text-xs text-gray-400">
+          {toolcalls.map((x, index) => (
+            <AiToolCall toolCall={x} key={index} />
+          ))}
+        </div>
+      )} */}
+
+      {finished && editOperations.length > 0 && (
+        <div className="my-2 flex items-center gap-2">
+          <div className="tour-ai-response-message-changes text-xs">
+            {editOperations.length} changes
+          </div>
+          {canReject && !changesRejected && (
+            <div
+              className="flex cursor-pointer items-center gap-1 text-xs text-red-500"
+              onClick={async () => {
+                await editContext?.operations.undo(editOperations.length);
+                setChangesRejected(true);
+              }}
+            >
+              <i className="pi pi-times" /> Reject
+            </div>
+          )}
+          {changesRejected && (
+            <div className="text-xs text-red-500">rejected</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}