@alpaca-editor/core 1.0.0

package/src/editor/Terminal.tsx

@@ -0,0 +1,215 @@
+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") {
+      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] : "";
+      if (inputRef.current && historicalPrompt) {
+        setPrompt(historicalPrompt);
+        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 flex-col h-full", className)}>
+      <div className="p-1 border-b border-gray-200 flex justify-between gap-2 text-xs items-center">
+        <button
+          onClick={() => {
+            setMessages([]);
+            onReset();
+          }}
+        >
+          <i className="pi pi-trash text-sm m-1" />
+        </button>
+        {toolbar}
+      </div>
+      <div className="overflow-y-auto h-full overflow-x-hidden p-2">
+        <div className="flex flex-col gap-3 items-end 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">
+                <div className="text-xs mr-4">
+                  <i className="pi pi-spin pi-spinner"></i>{" "}
+                </div>
+                {response}
+              </div>
+            </div>
+          )}
+          <div ref={bottomRef} />
+        </div>
+      </div>
+      <div className="flex flex-col p-1 pb-0">
+        {infobar}
+        <InputTextarea
+          ref={inputRef}
+          value={prompt}
+          className="border-gray-300 border rounded flex-1 text-xs resize-none self-stretch"
+          onKeyDown={handleKeyPress}
+          onChange={(e) => setPrompt(e.target.value)}
+          rows={4}
+          cols={30}
+          disabled={disabled}
+        />
+        <div className="flex justify-between items-center 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,23 @@
+import { useEditContext } from "./client/editContext";
+
+export function Titlebar() {
+  const editContext = useEditContext();
+
+  if (!editContext?.view) return null;
+
+  return (
+    <div className="bg-gradient-to-r from-gray-900 from-10% vigray-500 to-indigo-950 h-12 flex justify-between items-center z-1 min-h-12">
+      <div className="text-white flex gap-2 items-center relative pl-2 font-bold">
+        <a
+          href="/sitecore/shell/sitecore/client/Applications/Launchpad"
+          className="glow-text"
+        >
+          <i className="pi pi-sparkles text-pink-400" />
+        </a>{" "}
+        <span className="ml-2 font-mono">editor</span>
+      </div>
+      <div>{editContext?.view.primaryControls}</div>
+      <div>{editContext?.view.secondaryControls}</div>
+    </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,82 @@
+import { useState } from "react";
+import { AiToolCall, ToolCall } from "./AiToolCall";
+import { EditOperation } from "../../types";
+import { useEditContext } from "../client/editContext";
+
+export function AiResponseMessage({
+  responseText,
+  toolcalls,
+  editOperations,
+  finished,
+}: {
+  responseText: string;
+  toolcalls: ToolCall[];
+  editOperations: EditOperation[];
+  finished: boolean;
+}) {
+  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>
+      <div
+        dangerouslySetInnerHTML={{
+          __html: responseText.replaceAll("\\n", "<br>"),
+        }}
+      />
+      {toolcalls.length > 0 && (
+        <div
+          className="text-xs text-gray-400  cursor-pointer flex items-center gap-1 mt-1"
+          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="flex gap-2 my-2 items-center">
+          <div className="text-xs tour-ai-response-message-changes">
+            {editOperations.length} changes
+          </div>
+          {canReject && !changesRejected && (
+            <div
+              className="text-xs text-red-500  cursor-pointer flex items-center gap-1"
+              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>
+  );
+}