@alpaca-editor/core 1.0.4032 → 1.0.4037

package/src/editor/page-editor-chrome/useInlineAICompletion.tsx

@@ -59,8 +59,7 @@ export function useInlineAiCompletion({
     isUpdatingRef.current = true;
 
     try {
-      const iframeWindow =
-        pageViewContext.editorIframeRef.current?.contentWindow;
+      const iframeWindow = pageViewContext.editorIframe?.contentWindow;
       const iframeDocument = iframeWindow?.document;
       const editableElement = editContext?.inlineEditingFieldElement;
 
@@ -174,7 +173,7 @@ export function useInlineAiCompletion({
         if (e.key === "ArrowRight" || e.key === "Delete") {
           // Make sure the cursor span doesn't block the movement/deletion
           const cursorSpan =
-            pageViewContext.editorIframeRef.current?.contentWindow?.document.getElementById(
+            pageViewContext.editorIframe?.contentWindow?.document.getElementById(
               cursorSpanId,
             );
           if (cursorSpan) {
@@ -193,12 +192,12 @@ export function useInlineAiCompletion({
       }
     };
 
-    pageViewContext.editorIframeRef.current?.contentWindow?.document.addEventListener(
+    pageViewContext.editorIframe?.contentWindow?.document.addEventListener(
       "keydown",
       keyHandler,
     );
     return () => {
-      pageViewContext.editorIframeRef.current?.contentWindow?.document.removeEventListener(
+      pageViewContext.editorIframe?.contentWindow?.document.removeEventListener(
         "keydown",
         keyHandler,
       );
@@ -207,7 +206,7 @@ export function useInlineAiCompletion({
 
   // Extracts the text up to the cursor position in the editable element
   const getContentUpToCursor = (element: HTMLElement) => {
-    const iframeWindow = pageViewContext.editorIframeRef.current?.contentWindow;
+    const iframeWindow = pageViewContext.editorIframe?.contentWindow;
     const selection = iframeWindow?.getSelection();
     if (!element || !selection || selection.rangeCount === 0) return null;
     const range = selection.getRangeAt(0);
@@ -235,8 +234,7 @@ export function useInlineAiCompletion({
 
   // Loading animation with three dots changing color
   const startLoadingAnimation = () => {
-    const doc =
-      pageViewContext.editorIframeRef.current?.contentWindow?.document;
+    const doc = pageViewContext.editorIframe?.contentWindow?.document;
     const span = doc?.getElementById(cursorSpanId);
     if (!doc || !span) return;
 
@@ -456,8 +454,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
 
   // Inserts or clears the ghost text inside the cursor span
   const updateCursorSpan = (text: string) => {
-    const doc =
-      pageViewContext.editorIframeRef.current?.contentWindow?.document;
+    const doc = pageViewContext.editorIframe?.contentWindow?.document;
     const span = doc?.getElementById(cursorSpanId);
     if (!doc || !span) return;
 
@@ -510,8 +507,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
       });
 
       // Position the hint element relative to the iframe and cursor span
-      const iframeRect =
-        pageViewContext.editorIframeRef.current?.getBoundingClientRect();
+      const iframeRect = pageViewContext.editorIframe?.getBoundingClientRect();
       const spanRect = span.getBoundingClientRect();
 
       if (iframeRect) {
@@ -550,8 +546,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
   };
 
   const clearCursorSpan = () => {
-    const doc =
-      pageViewContext.editorIframeRef.current?.contentWindow?.document;
+    const doc = pageViewContext.editorIframe?.contentWindow?.document;
     if (!doc) return;
 
     // Clear the completion text
@@ -587,7 +582,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
       if (e.key === "Tab") {
         // Check if there's an actual completion in the cursor span
         const cursorSpan =
-          pageViewContext.editorIframeRef.current?.contentWindow?.document.getElementById(
+          pageViewContext.editorIframe?.contentWindow?.document.getElementById(
             cursorSpanId,
           );
         if (
@@ -632,8 +627,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
         const el = editContext?.inlineEditingFieldElement;
         if (!el) return false;
 
-        const iframeWindow =
-          pageViewContext.editorIframeRef.current?.contentWindow;
+        const iframeWindow = pageViewContext.editorIframe?.contentWindow;
         const selection = iframeWindow?.getSelection();
         if (!selection || selection.rangeCount === 0) return false;
 
@@ -729,7 +723,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
   // Function to apply the completion
   const applyCompletion = () => {
     // Get the cursor span to read the most up-to-date completion
-    const iframeWindow = pageViewContext.editorIframeRef.current?.contentWindow;
+    const iframeWindow = pageViewContext.editorIframe?.contentWindow;
     const iframeDocument = iframeWindow?.document;
     if (
       !iframeWindow ||

package/src/editor/page-viewer/EditorForm.tsx

@@ -392,7 +392,7 @@ export function EditorForm({
           <SimpleTabs
             key="editor-tabs"
             tabs={tabPanels}
-            className="flex flex-1 items-center justify-center border-b border-gray-200 pt-4 text-xs"
+            className="flex items-center justify-center border-b border-gray-200 pt-4 text-xs"
             activeTab={tabPanels.findIndex((x) => x.id === activeTabKey) || 0}
             setActiveTab={(index) => setActiveTabKey(tabPanels[index]?.id!)}
           ></SimpleTabs>

package/src/editor/page-viewer/MiniMap.tsx

@@ -31,14 +31,13 @@ export function MiniMap({
 
   const observerRef = useRef<MutationObserver | null>(null);
 
-  const editorIframeRef = mainViewIframeRef;
   const minimapContainerRef = useRef<HTMLDivElement>(null);
 
   if (!mainViewIframeRef.current) return;
 
   const scrollContainer =
-    editorIframeRef.current?.contentWindow?.document.scrollingElement ||
-    editorIframeRef.current?.contentWindow?.document.body;
+    mainViewIframeRef.current?.contentWindow?.document.scrollingElement ||
+    mainViewIframeRef.current?.contentWindow?.document.body;
 
   const calcAndUpdateScale = () => {
     const viewport = pageViewContext.viewport;
@@ -139,7 +138,7 @@ export function MiniMap({
   const handleLoad = () => {
     if (!mainViewIframeRef?.current?.contentWindow?.document) return;
 
-    mirrorIframeContent(editorIframeRef.current!, iframeRef.current!);
+    mirrorIframeContent(mainViewIframeRef.current!, iframeRef.current!);
 
     const observer = new MutationObserver((mutationsList) => {
       const minimapDoc = iframeRef.current?.contentDocument;
@@ -197,15 +196,15 @@ export function MiniMap({
   };
 
   useEffect(() => {
-    if (editorIframeRef?.current) {
-      editorIframeRef?.current.addEventListener("load", handleLoad);
+    if (mainViewIframeRef?.current) {
+      mainViewIframeRef?.current.addEventListener("load", handleLoad);
     }
 
     handleLoad();
 
     // Cleanup function
     return () => {
-      editorIframeRef?.current?.removeEventListener("load", handleLoad);
+      mainViewIframeRef?.current?.removeEventListener("load", handleLoad);
     };
   }, [mainViewIframeRef.current, iframeRef.current]);
 
@@ -213,7 +212,7 @@ export function MiniMap({
     calcAndUpdateScale();
   }, [
     refreshScale,
-    editorIframeRef,
+    mainViewIframeRef,
     //pageViewContext?.windowSize,
     pageViewContext?.zoom,
     pageViewContext.viewport,
@@ -226,7 +225,7 @@ export function MiniMap({
   }
 
   const scrollDocumentTo = (y: number) => {
-    if (!editorIframeRef?.current) return;
+    if (!mainViewIframeRef?.current) return;
 
     if (!scrollContainer) return;
 
@@ -289,7 +288,7 @@ export function MiniMap({
         left: 0,
         top: e.deltaY,
       });
-      editorIframeRef.current?.contentWindow?.document.documentElement?.scrollBy(
+      mainViewIframeRef.current?.contentWindow?.document.documentElement?.scrollBy(
         {
           behavior: "instant",
           left: 0,
@@ -298,7 +297,7 @@ export function MiniMap({
       );
       e.stopPropagation();
     },
-    [editorIframeRef],
+    [mainViewIframeRef],
   );
 
   return (

package/src/editor/page-viewer/PageViewer.tsx

@@ -3,7 +3,10 @@ import { EditorForm } from "./EditorForm";
 import { PageViewerFrame } from "./PageViewerFrame";
 import { useEffect, useState } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { useEditContext, useModifiedFieldsContext } from "../client/editContext";
+import {
+  useEditContext,
+  useModifiedFieldsContext,
+} from "../client/editContext";
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Splitter, SplitterPanel } from "../ui/Splitter";
@@ -50,7 +53,9 @@ export function PageViewer({
       if (editContext?.inlineEditingFieldElement) return;
 
       const lastEdit =
-        modifiedFieldsContext.recentEdits[modifiedFieldsContext.recentEdits.length - 1];
+        modifiedFieldsContext.recentEdits[
+          modifiedFieldsContext.recentEdits.length - 1
+        ];
 
       if (!lastEdit) return;
 
@@ -62,7 +67,7 @@ export function PageViewer({
       }
 
       const element =
-        pageViewContext?.editorIframeRef.current?.contentWindow?.document.querySelector(
+        pageViewContext?.editorIframe?.contentWindow?.document.querySelector(
           `[data-fieldid="${lastEdit.fieldId}"][data-itemid="${lastEdit.item.id}"][data-language="${lastEdit.item.language}"][data-version="${lastEdit.item.version}"]`,
         );
 

package/src/editor/page-viewer/PageViewerFrame.tsx

@@ -62,7 +62,7 @@ export function PageViewerFrame({
 
   const editContextRef = useEditContextRef();
 
-  const iframeRef = pageViewContext.editorIframeRef;
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
   const [showSpinner, setShowSpinner] = useState(false);
   const [scroll, setScroll] = useState(0);
@@ -118,10 +118,10 @@ export function PageViewerFrame({
 
   const pageItemDescriptor = pageViewContext.pageItemDescriptor;
 
+  // Update the context whenever the iframe ref changes
   useEffect(() => {
-    //Workaround for iframeref updates not propagating to usePageViewContext
-    pageViewContext.setWorkaround((x) => !x);
-  }, [iframeRef.current]);
+    pageViewContext.setEditorIframe(iframeRef.current);
+  }, [iframeRef.current, pageViewContext.setEditorIframe]);
 
   const updateMiniMapVisibility = useDebouncedCallback(() => {
     if (!iframeRef.current) return;

package/src/editor/page-viewer/pageViewContext.ts

@@ -17,7 +17,10 @@ export type PageViewContext = {
   setScroll: React.Dispatch<React.SetStateAction<number>>;
   fullscreen: boolean;
   setFullscreen: React.Dispatch<React.SetStateAction<boolean>>;
-  editorIframeRef: React.RefObject<HTMLIFrameElement | null>;
+  editorIframe: HTMLIFrameElement | null;
+  setEditorIframe: React.Dispatch<
+    React.SetStateAction<HTMLIFrameElement | null>
+  >;
   deviceWidth?: number;
   deviceHeight?: number;
   setDeviceWidth: React.Dispatch<React.SetStateAction<number | undefined>>;
@@ -32,7 +35,6 @@ export type PageViewContext = {
     React.SetStateAction<PageSkeleton | undefined>
   >;
   viewport: { width: number; height: number };
-  setWorkaround: React.Dispatch<React.SetStateAction<boolean>>;
   isHeadless: boolean;
   site?: Site;
   editUrl?: string;
@@ -52,13 +54,14 @@ export function usePageViewContext({
   const [zoom, setZoom] = useState<number>(1);
   const [scroll, setScroll] = useState<number>(0);
   const [fullscreen, setFullscreen] = useState<boolean>(false);
-  const editorIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [editorIframe, setEditorIframe] = useState<HTMLIFrameElement | null>(
+    null,
+  );
   const [deviceWidth, setDeviceWidth] = useState<number>();
   const [deviceHeight, setDeviceHeight] = useState<number>();
   const [lockHeight, setLockHeight] = useState(true);
   const [rotate, setRotate] = useState(false);
   const [viewportRect, setViewportRect] = useState({ width: 0, height: 0 });
-  const [workaround, setWorkaround] = useState(false);
   const [site, setSite] = useState<Site>();
   const [resolvedPageItemDescriptor, setResolvedPageItemDescriptor] =
     useState<ItemDescriptor>();
@@ -100,17 +103,15 @@ export function usePageViewContext({
       updateViewportRectDebounced();
     });
 
-    if (editorIframeRef.current) {
-      resizeObserver.observe(editorIframeRef.current);
+    if (editorIframe) {
+      resizeObserver.observe(editorIframe);
     }
 
     // Cleanup function
     return () => {
-      if (editorIframeRef.current) {
-        resizeObserver.disconnect();
-      }
+      resizeObserver.disconnect();
     };
-  }, [editorIframeRef.current, updateViewportRectDebounced]);
+  }, [editorIframe, updateViewportRectDebounced]);
 
   useEffect(() => {
     if (!pageItemDescriptor) return;
@@ -161,7 +162,8 @@ export function usePageViewContext({
   }, [pageItemDescriptor]);
 
   function updateViewportRect() {
-    const rect = editorIframeRef.current?.getBoundingClientRect();
+    const rect = editorIframe?.getBoundingClientRect();
+
     if (rect) {
       setViewportRect((prev) => {
         // Only update if dimensions actually changed
@@ -173,61 +175,64 @@ export function usePageViewContext({
     }
   }
 
-  const pageViewContext: PageViewContext = useMemo(() => ({
-    device,
-    setDevice,
-    deviceWidth,
-    setDeviceWidth,
-    deviceHeight,
-    setDeviceHeight,
-    lockHeight,
-    setLockHeight,
-    scroll,
-    setScroll,
-    zoom,
-    setZoom,
-    fullscreen,
-    setFullscreen,
-    editorIframeRef,
-    rotate,
-    setRotate,
-    page,
-    setPageSkeleton,
-    viewport: viewportRect,
-    pageItemDescriptor: resolvedPageItemDescriptor,
-    setWorkaround,
-    isHeadless,
-    site,
-    editUrl,
-    previewUrl,
-  }), [
-    device,
-    deviceWidth,
-    deviceHeight,
-    lockHeight,
-    scroll,
-    zoom,
-    fullscreen,
-    rotate,
-    page,
-    viewportRect,
-    resolvedPageItemDescriptor,
-    isHeadless,
-    site,
-    editUrl,
-    previewUrl,
-    setDevice,
-    setDeviceWidth,
-    setDeviceHeight,
-    setLockHeight,
-    setScroll,
-    setZoom,
-    setFullscreen,
-    setRotate,
-    setPageSkeleton,
-    setWorkaround,
-    editorIframeRef
-  ]);
+  const pageViewContext: PageViewContext = useMemo(
+    () => ({
+      device,
+      setDevice,
+      deviceWidth,
+      setDeviceWidth,
+      deviceHeight,
+      setDeviceHeight,
+      lockHeight,
+      setLockHeight,
+      scroll,
+      setScroll,
+      zoom,
+      setZoom,
+      fullscreen,
+      setFullscreen,
+      editorIframe,
+      setEditorIframe,
+      rotate,
+      setRotate,
+      page,
+      setPageSkeleton,
+      viewport: viewportRect,
+      pageItemDescriptor: resolvedPageItemDescriptor,
+      isHeadless,
+      site,
+      editUrl,
+      previewUrl,
+    }),
+    [
+      device,
+      deviceWidth,
+      deviceHeight,
+      lockHeight,
+      scroll,
+      zoom,
+      fullscreen,
+      rotate,
+      page,
+      viewportRect,
+      resolvedPageItemDescriptor,
+      isHeadless,
+      site,
+      editUrl,
+      previewUrl,
+      setDevice,
+      setDeviceWidth,
+      setDeviceHeight,
+      setLockHeight,
+      setScroll,
+      setZoom,
+      setFullscreen,
+      setRotate,
+      setPageSkeleton,
+      editorIframe,
+      setEditorIframe,
+    ],
+  );
 
   return pageViewContext;
 }

package/src/editor/services/agentService.ts

@@ -1,4 +1,4 @@
-import { AiContext } from "../ai/AiTerminal";
+import { AiContext, Message } from "../ai/AiTerminal";
 
 export const AGENT_BASE_URL = "/alpaca/editor/agent";
 
@@ -297,6 +297,13 @@ async function processEventStream(
             }
           } catch (error) {
             console.error("Failed to parse SSE message:", error, line);
+            // Send error message to the client to notify user
+            onMessage({
+              type: AgentStreamMessageType.Error,
+              error: `Failed to parse stream message: ${error instanceof Error ? error.message : "Unknown parsing error"}`,
+              data: null,
+              timestamp: new Date().toISOString(),
+            });
           }
         }
       }
@@ -466,3 +473,124 @@ export async function cancelAgent(
 
   return await response.json();
 }
+
+/**
+ * Permanently deletes an agent and all its messages
+ */
+export async function deleteAgent(
+  agentId: string,
+  context: AiContext,
+): Promise<any> {
+  const response = await fetch(AGENT_BASE_URL + "/deleteAgent", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ agentId }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to delete agent: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
+}
+
+/**
+ * Closes an agent by canceling execution and setting status to closed
+ */
+export async function closeAgent(
+  agentId: string,
+  context: AiContext,
+): Promise<any> {
+  const response = await fetch(AGENT_BASE_URL + "/closeAgent", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ agentId }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to close agent: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
+}
+
+/**
+ * Checks if an agent exists and returns its current state with messages
+ */
+export async function checkAgentState(
+  agentId: string,
+  context: AiContext,
+): Promise<{ exists: boolean; agent?: AgentChat; isRunning: boolean }> {
+  try {
+    const agent = await getAgent(agentId, context);
+    return {
+      exists: true,
+      agent,
+      isRunning: agent.status === "Active",
+    };
+  } catch (error) {
+    // If agent doesn't exist, return false
+    return {
+      exists: false,
+      isRunning: false,
+    };
+  }
+}
+
+/**
+ * Converts persisted agent messages to the format expected by AiTerminal
+ */
+export function convertAgentMessagesToTerminalFormat(
+  agentMessages: AgentChatMessage[],
+): Message[] {
+  const terminalMessages: Message[] = [];
+
+  for (const agentMessage of agentMessages) {
+    // Convert assistant and user messages
+    if (agentMessage.role === "assistant" || agentMessage.role === "user") {
+      const terminalMessage: Message = {
+        id: agentMessage.id,
+        content: agentMessage.content,
+        name: agentMessage.name,
+        role: agentMessage.role,
+        tool_calls: [],
+      };
+
+      // Add tool calls if they exist
+      if (agentMessage.toolCalls && agentMessage.toolCalls.length > 0) {
+        terminalMessage.tool_calls = agentMessage.toolCalls.map((tc) => ({
+          id: tc.toolCallId,
+          displayName: tc.functionName,
+          function: {
+            name: tc.functionName,
+            arguments: tc.functionArguments,
+          },
+        }));
+      }
+
+      terminalMessages.push(terminalMessage);
+    }
+    // Convert tool result messages
+    else if (agentMessage.role === "tool") {
+      const terminalMessage: Message = {
+        id: agentMessage.id,
+        content: agentMessage.content,
+        name: agentMessage.name,
+        role: agentMessage.role,
+        tool_call_id: agentMessage.toolCallId,
+      };
+
+      terminalMessages.push(terminalMessage);
+    }
+  }
+
+  return terminalMessages;
+}

package/src/editor/services/aiService.ts

@@ -14,7 +14,7 @@ export type AiProfile = {
   id: string;
   name: string;
   instructions: string;
-  defaultModel: string | null; // Guid as string, nullable
+  defaultModelId: string | null; // Guid as string, nullable
   models: AiModel[]; // Array of model objects with id and name
   prompts: { prompt: string; title: string }[];
   errorMessage?: string;
@@ -87,6 +87,7 @@ export interface ExecutePromptOptions {
   addContextContent?: boolean;
   addAllContent?: boolean;
   profile?: string;
+  endpoint?: string;
 }
 
 // Unified function signature
@@ -103,7 +104,6 @@ export async function executePrompt(
   callback?: (response: any) => void,
   stream?: boolean,
 ): Promise<ExecutePromptResponse | null> {
-  let endpoint: string;
   let requestBody: any;
   let finalRequestOptions: RequestInit;
 
@@ -121,9 +121,6 @@ export async function executePrompt(
     }
   }
 
-  // Use hardcoded endpoint for old prompt system
-  endpoint = "/alpaca/editor/ai/Prompt";
-
   // Build unified request body
   requestBody = {
     messages,
@@ -135,8 +132,6 @@ export async function executePrompt(
     ...options,
   };
 
-  console.log("ExecutePrompt: requestBody", requestBody);
-
   finalRequestOptions = {
     method: "POST",
     body: JSON.stringify(requestBody),
@@ -147,6 +142,9 @@ export async function executePrompt(
     ...requestOptions,
   };
 
+  // Use hardcoded endpoint for old prompt system
+  const endpoint = options.endpoint || "/alpaca/editor/ai/prompt";
+
   const response = await fetch(endpoint, finalRequestOptions);
 
   if (!response.ok) {

package/src/editor/sidebar/GraphQL.tsx

@@ -258,21 +258,22 @@ export function GraphQL() {
           <Splitter layout="horizontal" style={{ height: "100%" }}>
             <SplitterPanel size={50} className="relative">
               <div className="absolute inset-0 flex items-stretch">
-                <div className="min-w-0 flex-1">
-                  <CodeEditor
-                    value={query}
-                    language="graphql"
-                    placeholder="Enter your GraphQL query here..."
-                    onChange={(evn: any) => setQuery(evn.target.value)}
-                    padding={15}
-                    style={{
-                      fontSize: 12,
-                      backgroundColor: "#f8f9fa",
-                      fontFamily:
-                        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
-                      height: "100%",
-                    }}
-                  />
+                <div className="relative min-w-0 flex-1">
+                  <div className="absolute inset-0 overflow-auto">
+                    <CodeEditor
+                      value={query}
+                      language="graphql"
+                      placeholder="Enter your GraphQL query here..."
+                      onChange={(evn: any) => setQuery(evn.target.value)}
+                      padding={15}
+                      style={{
+                        fontSize: 12,
+                        backgroundColor: "#f8f9fa",
+                        fontFamily:
+                          "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+                      }}
+                    />
+                  </div>
                 </div>
                 <ActionButton
                   onClick={refresh}