@alpaca-editor/core 1.0.4013 → 1.0.4015

package/src/editor/services/aiService.ts

@@ -1,6 +1,7 @@
 import { AiContext } from "../ai/AiTerminal";
 import { EditContextType } from "../client/editContext";
 import { FieldDescriptor, ItemDescriptor } from "../pageModel";
+import { JsonCleaner } from "../utils/jsonCleaner";
 
 import { ExecutionResult, get, post } from "./serviceHelper";
 
@@ -32,6 +33,9 @@ type Message = {
   content: string;
   name: string;
   role: string;
+  id: string; // Changed from number to string to support UUIDs
+  tool_calls?: any[]; // Optional tool_calls for compatibility
+  tool_call_id?: string; // Optional tool_call_id for compatibility
 };
 
 export interface ExecutePromptResponse {
@@ -41,49 +45,117 @@ export interface ExecutePromptResponse {
   numOutputTokens: number;
   numCachedTokens: number;
   state: string;
+  // New properties for incremental updates
+  isIncremental?: boolean;
+  deltaContent?: string;
+  previousContentLength?: number;
+  totalContentLength?: number;
 }
 
+// Unified options interface that supports both calling patterns
+export interface ExecutePromptOptions {
+  // Common options
+  sessionId?: string | null;
+  model?: string | null;
+
+  // AiTerminal style options
+  profileId?: string;
+  selection?: string[];
+  selectedText?: string | null;
+  agentId?: string;
+  addSelectedComponents?: boolean;
+
+  // Other callers style options
+  allowedFunctions?: string[];
+  addContextContent?: boolean;
+  addAllContent?: boolean;
+  profile?: string;
+}
+
+// Unified function signature
 export async function executePrompt(
   messages: Message[],
-  editContext: EditContextType,
-  createAiContext: ({ editContext }: { editContext: any }) => AiContext,
-  promptOptions: {
-    allowedFunctions?: string[];
-    addContextContent?: boolean;
-    addAllContent?: boolean;
-    profile?: string;
-  },
-
-  options?: RequestInit,
-  model?: string,
+  context:
+    | AiContext
+    | {
+        editContext: EditContextType;
+        createAiContext: ({ editContext }: { editContext: any }) => AiContext;
+      },
+  options: ExecutePromptOptions = {},
+  requestOptions?: RequestInit,
   callback?: (response: any) => void,
 ): Promise<ExecutePromptResponse | null> {
-  const context = createAiContext({ editContext });
+  let endpoint: string;
+  let requestBody: any;
+  let finalRequestOptions: RequestInit;
 
-  const response = await fetch(context.endpoint, {
-    method: "POST",
-    body: JSON.stringify({
-      messages,
-      ...context.promptData,
-      sessionId: editContext.sessionId,
-      ...promptOptions,
-      model,
-    }),
+  // Handle context - either direct AiContext or need to create it
+  let aiContext: AiContext;
+  if ("endpoint" in context) {
+    // Direct AiContext (AiTerminal style)
+    aiContext = context;
+  } else {
+    // Create context (other callers style)
+    aiContext = context.createAiContext({ editContext: context.editContext });
+    // Default sessionId from editContext if not provided
+    if (options.sessionId === undefined) {
+      options.sessionId = context.editContext.sessionId;
+    }
+  }
+
+  endpoint = aiContext.endpoint;
 
+  // Build unified request body
+  requestBody = {
+    messages,
+    ...aiContext.promptData,
+    sessionId: options.sessionId,
+    model: options.model,
+
+    // Include all provided options
+    ...options,
+  };
+
+  finalRequestOptions = {
+    method: "POST",
+    body: JSON.stringify(requestBody),
     credentials: "include",
     headers: {
       "Content-Type": "application/json",
     },
-    ...options,
-  });
+    ...requestOptions,
+  };
+
+  const response = await fetch(endpoint, finalRequestOptions);
+
+  if (!response.ok) {
+    // Always return rich error format
+    const text = await response.text();
+    return {
+      messages: [
+        {
+          content: "There was an error processing your request: " + text,
+          name: "assistant",
+          role: "assistant",
+          id: crypto.randomUUID(),
+          tool_calls: [],
+        },
+      ],
+      editOperations: [],
+      numInputTokens: 0,
+      numOutputTokens: 0,
+      numCachedTokens: 0,
+      state: "error",
+    };
+  }
 
   if (!response?.body) return null;
 
   const reader = response.body.getReader();
   const decoder = new TextDecoder();
   let buffer = "";
-
   let result = null;
+  let accumulatedContent = "";
 
   while (true) {
     const { done, value } = await reader.read();
@@ -92,21 +164,58 @@ export async function executePrompt(
       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.
+    buffer += decoder.decode(value, { stream: true });
     const lines = buffer.split("\n");
 
     if (lines.length > 0) {
-      buffer = lines.pop() || ""; // Incomplete line (if any) is kept for the next iteration.
+      buffer = lines.pop() || "";
 
       for (let line of lines) {
-        if (line.trim() === "") continue; // Skip empty lines if any.
+        if (line.trim() === "") continue;
 
         try {
           const jsonData = JSON.parse(line);
-          callback?.(jsonData);
-          result = jsonData;
+
+          if (jsonData.isIncremental) {
+            if (jsonData.deltaContent) {
+              accumulatedContent += jsonData.deltaContent;
+            }
+
+            // Always apply JsonCleaner for streaming responses
+            const cleanupResult = JsonCleaner.cleanupJson(accumulatedContent);
+
+            const incrementalResponse = {
+              ...jsonData,
+              messages: [
+                {
+                  content: cleanupResult.cleanedJson,
+                  role: "assistant",
+                  name: "assistant",
+                  id: Date.now(),
+                  tool_calls: [],
+                },
+              ],
+            };
+
+            callback?.(incrementalResponse);
+            result = incrementalResponse;
+          } else {
+            // Always ensure messages have IDs and tool_calls
+            let processedResponse = jsonData;
+            if (jsonData.messages) {
+              processedResponse = {
+                ...jsonData,
+                messages: jsonData.messages.map((msg: any, index: number) => ({
+                  ...msg,
+                  id: msg.id || Date.now() + index,
+                  tool_calls: msg.tool_calls || [],
+                })),
+              };
+            }
+
+            callback?.(processedResponse);
+            result = processedResponse;
+          }
         } catch (e) {
           console.error("Error parsing line:" + line, e);
         }
@@ -114,11 +223,45 @@ export async function executePrompt(
     }
   }
 
-  // If there's any remaining content in the buffer after processing all chunks, try to process it.
+  // Handle final buffer
   if (buffer.trim() !== "") {
     try {
       const jsonData = JSON.parse(buffer);
-      result = jsonData;
+
+      if (jsonData.isIncremental) {
+        if (jsonData.deltaContent) {
+          accumulatedContent += jsonData.deltaContent;
+        }
+
+        const cleanupResult = JsonCleaner.cleanupJson(accumulatedContent);
+
+        result = {
+          ...jsonData,
+          messages: [
+            {
+              content: cleanupResult.cleanedJson,
+              role: "assistant",
+              name: "assistant",
+              id: Date.now(),
+              tool_calls: [],
+            },
+          ],
+        };
+      } else {
+        // Always ensure messages have IDs
+        if (jsonData.messages) {
+          result = {
+            ...jsonData,
+            messages: jsonData.messages.map((msg: any, index: number) => ({
+              ...msg,
+              id: msg.id || Date.now() + index,
+              tool_calls: msg.tool_calls || [],
+            })),
+          };
+        } else {
+          result = jsonData;
+        }
+      }
     } catch (e) {
       console.error("Error parsing the final buffer content:", e);
     }

package/src/editor/services/contextService.ts

@@ -51,28 +51,27 @@ export async function generatePageContext(
         role: "system",
         content:
           "You are a content summarization tool. You have access to a get-content function that can extract text content from the current page. Use this function to get the page content, then create a concise abstract in exactly 100 tokens or less. Focus on the main topics, purpose, and key information. Be specific and informative. Your summary will be fed into a text completion prompt, so make it as concise as possible.",
+        id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
       },
     ];
 
     const result = await executePrompt(
       messages,
-      editContext,
-      () => ({
+      {
         endpoint: "/alpaca/editor/ai/prompt",
         promptData: {
           itemid: editContext.contentEditorItem!.id,
           language: editContext.contentEditorItem!.language,
           version: editContext.contentEditorItem!.version,
         },
-        allowedFunctions: ["get-content"],
-      }),
+      },
       {
         profile: "context-generation",
         addContextContent: false,
         addAllContent: false,
+        model: "gpt-4o-mini", // Use a fast, efficient model for context generation
+        allowedFunctions: ["get-content"],
       },
-      undefined,
-      "gpt-4o-mini", // Use a fast, efficient model for context generation
     );
 
     console.log("result", result);

package/src/editor/sidebar/SidebarView.tsx

@@ -52,10 +52,6 @@ export function SidebarView({
     );
   };
 
-  if (!active) {
-    return <div className="hidden h-full" />;
-  }
-
   // Single panel - no splitter needed
   if (resolvedPanels.length === 1) {
     const panel = resolvedPanels[0];
@@ -63,7 +59,11 @@ export function SidebarView({
 
     return (
       <div
-        className={cn("h-full", detached ? "p-2" : "border-gray-3 border-r")}
+        className={cn(
+          "h-full", 
+          detached ? "p-2" : "border-gray-3 border-r",
+          !active ? "hidden" : ""
+        )}
       >
         <div
           className={cn(
@@ -111,7 +111,11 @@ export function SidebarView({
   );
 
   return (
-    <div className={cn("h-full", detached ? "p-2" : "")}>
+    <div className={cn(
+      "h-full", 
+      detached ? "p-2" : "",
+      !active ? "hidden" : ""
+    )}>
       <Splitter
         panels={splitterPanels}
         direction="vertical"

package/src/editor/sidebar/ViewSelector.tsx

@@ -140,8 +140,8 @@ export function ViewSelector() {
                   <VerticalDotsIcon />
                 </Button>
               </PopoverTrigger>
-            </TooltipTrigger>
-            <TooltipContent>More views</TooltipContent>
+            </TooltipTrigger >
+            <TooltipContent side="right">More views</TooltipContent>
           </Tooltip>
           <PopoverContent
             className="w-56 p-2"

package/src/editor/ui/SimpleIconButton.tsx

@@ -5,9 +5,22 @@ import {
   TooltipTrigger,
 } from "../../components/ui/tooltip";
 import { cn } from "../../lib/utils";
-import { MouseEventHandler } from "react";
+import { MouseEventHandler, forwardRef } from "react";
 
-export function SimpleIconButton({
+export const SimpleIconButton = forwardRef<
+  HTMLButtonElement,
+  {
+    onClick: MouseEventHandler;
+    className?: string;
+    icon?: React.ReactNode;
+    label: string;
+    disabled?: boolean;
+    id?: string;
+    size?: "large" | "small";
+    selected?: boolean;
+    children?: React.ReactNode;
+  }
+>(({
   onClick,
   className,
   icon,
@@ -17,21 +30,12 @@ export function SimpleIconButton({
   id,
   selected,
   children,
-}: {
-  onClick: MouseEventHandler;
-  className?: string;
-  icon?: React.ReactNode;
-  label: string;
-  disabled?: boolean;
-  id?: string;
-  size?: "large" | "small";
-  selected?: boolean;
-  children?: React.ReactNode;
-}) {
+}, ref) => {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <button
+          ref={ref}
           id={id}
           disabled={disabled}
           className={cn(
@@ -54,4 +58,6 @@ export function SimpleIconButton({
       <TooltipContent>{label}</TooltipContent>
     </Tooltip>
   );
-}
+});
+
+SimpleIconButton.displayName = "SimpleIconButton";

package/src/editor/utils/jsonCleaner.ts

@@ -0,0 +1,92 @@
+export interface JsonCleanupResult {
+  cleanedJson: string;
+  isComplete: boolean;
+}
+
+export class JsonCleaner {
+  public static cleanupJson(json: string): JsonCleanupResult {
+    // Handle dangling commas
+    json = json.replace(/,}/g, "}");
+    json = json.replace(/,]/g, "]");
+
+    const stringResult = this.correctUnendedStrings(json);
+    json = stringResult.correctedJson;
+    let isComplete = stringResult.isComplete;
+
+    // Process the JSON string character by character
+    let isInString = false;
+    let isEscape = false;
+    const openStack: string[] = [];
+
+    for (let i = 0; i < json.length; i++) {
+      const c = json[i];
+
+      if (c === '"' && !isEscape) {
+        isInString = !isInString;
+      }
+
+      if (!isInString) {
+        switch (c) {
+          case '{':
+            openStack.push(c);
+            break;
+          case '}':
+            if (openStack.length > 0) {
+              openStack.pop();
+            }
+            break;
+          case '[':
+            openStack.push(c);
+            break;
+          case ']':
+            if (openStack.length > 0) {
+              openStack.pop();
+            }
+            break;
+        }
+      }
+
+      isEscape = isInString && c === '\\' && !isEscape;
+    }
+
+    // Append missing closing brackets
+    while (openStack.length > 0) {
+      const open = openStack.pop();
+      if (open === '{') {
+        json += "}";
+      } else if (open === '[') {
+        json += "]";
+      }
+      isComplete = false;
+    }
+
+    return {
+      cleanedJson: json,
+      isComplete: isComplete
+    };
+  }
+
+  private static correctUnendedStrings(json: string): { correctedJson: string; isComplete: boolean } {
+    let isComplete = true;
+    let isInString = false;
+    let isEscape = false;
+
+    for (let i = 0; i < json.length; i++) {
+      if (json[i] === '"' && !isEscape) {
+        isInString = !isInString;
+      }
+
+      isEscape = isInString && json[i] === '\\' && !isEscape;
+    }
+
+    if (isInString) {
+      json += '[...]"';
+      isComplete = false;
+    }
+
+    return {
+      correctedJson: json,
+      isComplete: isComplete
+    };
+  }
+} 

package/src/editor/views/CompareView.tsx

@@ -115,7 +115,7 @@ export function CompareView() {
   }
 
   const originalSelector = (
-    <div className="flex flex-1 flex-shrink-0 items-center justify-center border-b bg-white p-1 text-sm text-gray-600">
+    <div className=" gap-1 flex flex-1 flex-shrink-0 items-center justify-center border-b bg-white p-1 text-sm text-gray-600">
       <LanguageSelector
         selectedLanguage={editContext.contentEditorItem?.descriptor?.language}
         showAllLanguagesSwitch={false}
@@ -149,7 +149,7 @@ export function CompareView() {
   );
 
   const compareToSelector = (
-    <div className="flex flex-1 flex-shrink-0 items-center justify-center border-b bg-white p-1 text-sm text-gray-600">
+    <div className="gap-1 flex flex-1 flex-shrink-0 items-center justify-center border-b bg-white p-1 text-sm text-gray-600">
       <LanguageSelector
         selectedLanguage={compareTo?.language}
         showAllLanguagesSwitch={false}

package/src/page-wizard/steps/ContentStep.tsx

@@ -333,13 +333,12 @@ export function ContentStep({
               Input data: ${JSON.stringify(data)}`,
               name: "system",
               role: "system",
+              id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
             },
           ],
-          editContext,
-          createWizardAiContext,
-          {},
+          { editContext, createAiContext: createWizardAiContext },
+          { model: "o4-mini-high" },
           { signal: abortController.signal },
-          "o4-mini-high",
           (response) => {
             try {
               const newLayout = JSON.parse(response.content) as WizardPageModel;
@@ -592,6 +591,7 @@ export function ContentStep({
 
           name: "system",
           role: "system",
+          id: crypto.randomUUID(), // Add required id property
         },
       ];
 
@@ -603,12 +603,13 @@ export function ContentStep({
 
       const result = await executePrompt(
         prompt,
-        editContextRef.current!,
-        createWizardAiContext,
-        { allowedFunctions: [] },
+        {
+          editContext: editContextRef.current!,
+          createAiContext: createWizardAiContext,
+        },
+        { allowedFunctions: [], model: step.fields.aiModel || "gpt-4.1" },
         { signal: localAbortController.signal },
-        step.fields.aiModel || "gpt-4.1",
-        (response) => {
+        (response: any) => {
           try {
             // Handle streaming response - might have different structure during streaming
             const content =

package/src/page-wizard/steps/FindItemsStep.tsx

@@ -216,24 +216,26 @@ Return a JSON object with suggested item IDs in this format:
     );
 
     try {
+      const localAbortController = new AbortController();
+
       const result = await executePrompt(
         [
           {
             content: `You are an expert content curator helping to find relevant items from a content tree. You can traverse the tree using the get-children function. Return ONLY a valid JSON object with suggestions and reasoning.`,
             name: "system",
             role: "system",
+            id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
           },
           {
             content: basePrompt,
             name: "user",
             role: "user",
+            id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
           },
         ],
-        editContext,
-        createWizardAiContext,
-        { allowedFunctions: ["get-children"] },
-        undefined,
-        step.fields.aiModel || "gpt-4.1",
+        { editContext, createAiContext: createWizardAiContext },
+        { model: step.fields.aiModel || "gpt-4.1" },
+        { signal: localAbortController.signal },
       );
 
       console.log("AI RESULT: ", result);

package/src/page-wizard/steps/ImagesStep.tsx

@@ -98,25 +98,30 @@ export const ImagesStep = (props: StepComponentProps) => {
     }));
 
     try {
-      // First, ask AI for keywords based on the content
+      const localAbortController = new AbortController();
+      const imageInstructions =
+        props.step.fields.instructions ||
+        "Please analyze the provided data and suggest images.";
+
       const aiPromptResult = await executePrompt(
         [
           {
-            content: `You are an AI assistant for building a web page. You will later have to create images for the page. 
-                     Please anaylze the provided data and suggest a number of images and specific keywords per image. The keywords will be used to find matching images in the image library.                 
-                     Response JSON format: { images: Image[] } type Image = { title: string,  keywords: string[] }
-                     Input data: ${JSON.stringify(props.data)}
-                     Instructions: ${props.step.fields.instructions}`,
+            content: `You are an AI assistant for building a web page. You will later have to create images for the page.
+            ${imageInstructions}
+
+            Reply with a json object of type WizardPageModel = { message: string; components: Component[]; };
 
+            Where components are of type Component = { id: string; name: string; imageFields: {name: string; value: string; alt: string; prompt: string; }[]; };
+            You should update images existing images in fields in the components array. Update the prompt field for each image, keep name, value and alt unchanged. Make sure you populate prompt field for every image.
+            `,
             name: "system",
             role: "system",
+            id: crypto.randomUUID(), // Use proper UUID instead of Date.now()
           },
         ],
-        editContext!,
-        createWizardAiContext,
-        {},
-        undefined,
-        "gpt-4.1",
+        { editContext: editContext!, createAiContext: createWizardAiContext },
+        { model: "gpt-4.1" },
+        { signal: localAbortController.signal },
       );
 
       let images: Image[] = [];