@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/ScrollingContentTree.tsx

@@ -1,67 +0,0 @@
-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}
-      />
-    </div>
-  );
-}

package/src/editor/Terminal.tsx

@@ -1,227 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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)
-    : "ai workbench";
-
-  useEffect(() => {
-    setMenuOpen(false);
-  }, [editContext.currentItemDescriptor]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        menuOpen &&
-        menuRef.current &&
-        buttonRef.current &&
-        !menuRef.current.contains(event.target as Node) &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
-        setMenuOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("mousedown", 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

@@ -1,59 +0,0 @@
-"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

@@ -1,106 +0,0 @@
-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>
-  );
-}