@alpaca-editor/core 1.0.4017 → 1.0.4026

package/src/editor/field-types/richtext/types.ts

@@ -1,33 +1,37 @@
-import { BaseEditor, Editor } from 'slate';
-import { ReactEditor } from 'slate-react';
-import React, { JSX } from 'react';
-import { Link } from '../../LinkEditorDialog';
-import { HistoryEditor } from 'slate-history';
-import { Field } from '../../pageModel';
+import { BaseEditor, Editor } from "slate";
+import { ReactEditor } from "slate-react";
+import React, { JSX } from "react";
+import { Link } from "../../LinkEditorDialog";
+import { HistoryEditor } from "slate-history";
+import { Field } from "../../pageModel";
 
-declare module 'slate' {
+declare module "slate" {
   interface CustomTypes {
-    Editor: BaseEditor & ReactEditor & HistoryEditor & {
-      // Plugin methods
-      isMarkActive(format: string): boolean;
-      toggleMark(format: string): void;
-      
-      isBlockActive(format: string): boolean;
-      toggleBlock(format: string): void;
-      
-      isAlignActive(align: string): boolean;
-      toggleAlign(align: string): void;
+    Editor: BaseEditor &
+      ReactEditor &
+      HistoryEditor & {
+        // Plugin methods
+        isMarkActive(format: string): boolean;
+        toggleMark(format: string): void;
 
-      isLinkActive(): boolean;
-      insertLink(options?: { onOpenLinkDialog?: (callback: (link: any) => void) => void }): void;
-      
-      isListActive(listType?: 'unordered' | 'ordered'): boolean;
-      toggleList(listType: 'unordered' | 'ordered'): void;
-      indentList(): void;
-      outdentList(): void;
-    }
-    Element: CustomElement
-    Text: CustomText
+        isBlockActive(format: string): boolean;
+        toggleBlock(format: string): void;
+
+        isAlignActive(align: string): boolean;
+        toggleAlign(align: string): void;
+
+        isLinkActive(): boolean;
+        insertLink(options?: {
+          onOpenLinkDialog?: (callback: (link: any) => void) => void;
+        }): void;
+
+        isListActive(listType?: "unordered" | "ordered"): boolean;
+        toggleList(listType: "unordered" | "ordered"): void;
+        indentList(): void;
+        outdentList(): void;
+      };
+    Element: CustomElement;
+    Text: CustomText;
   }
 }
 
@@ -42,40 +46,40 @@ export type CustomText = {
   superscript?: boolean;
   extrabold?: boolean;
   isRawHtml?: boolean; // Flag to indicate this text should be preserved as raw HTML
-}
+};
 
-export type Alignment = 'left' | 'center' | 'right' | 'justify';
+export type Alignment = "left" | "center" | "right" | "justify";
 
 // Generic element that can have any type
 export type CustomElement = {
   type: string;
   align?: Alignment;
-  listType?: 'unordered' | 'ordered';
+  listType?: "unordered" | "ordered";
   indent?: number;
   children: (CustomText | CustomElement)[];
   [key: string]: any; // For any custom properties
-}
+};
 
 // Preserved element type for unsupported HTML elements
 export type PreservedElement = CustomElement & {
-  type: 'preserved-element';
+  type: "preserved-element";
   originalTag: string;
   originalHtml: string;
   attributes: Record<string, any>;
-}
+};
 
 // Preserved inline element type for unsupported inline HTML elements
 export type PreservedInlineElement = CustomElement & {
-  type: 'preserved-inline';
+  type: "preserved-inline";
   originalTag: string;
   originalHtml: string;
   attributes: Record<string, any>;
-}
+};
 
 export type LinkElement = CustomElement & {
-  type: 'link';
+  type: "link";
   link: Link;
-}
+};
 
 export interface ReactSlateProps {
   value?: string;
@@ -114,156 +118,172 @@ export interface ToolbarButtonProps {
 export interface ToolbarGroupConfig {
   id: string;
   label?: string;
-  display?: 'buttons' | 'dropdown';
+  display?: "buttons" | "dropdown";
   showIconsOnly?: boolean;
   options: ToolbarOptionConfig[];
   row?: number; // Optional row identifier for grouping
 }
 
 export interface ToolbarOptionConfig {
-  type: 'mark' | 'block' | 'alignment' | 'link' | 'list' | 'divider' | string; 
+  type: "mark" | "block" | "alignment" | "link" | "list" | "divider" | string;
   id: string; // Reference to the option in the corresponding collection
 }
 
 export type RichTextEditorProfile = {
   toolbar: {
     groups: ToolbarGroupConfig[];
-  }
+  };
 };
 
 // Simplified profile structure that maps directly to Slate capabilities
 export interface SimplifiedProfile {
-  marks: string[];        // ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'extrabold']
-  blocks: string[];       // ['paragraph', 'no-tag', 'heading-1', 'heading-2', 'heading-3', 'heading-4', 'heading-5', 'heading-6']
-  alignment: string[];    // ['left', 'center', 'right', 'justify']
-  lists: boolean;         // true if lists are enabled
-  links: boolean;         // true if links are enabled
+  marks: string[]; // ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'extrabold']
+  blocks: string[]; // ['paragraph', 'no-tag', 'heading-1', 'heading-2', 'heading-3', 'heading-4', 'heading-5', 'heading-6']
+  alignment: string[]; // ['left', 'center', 'right', 'justify']
+  lists: boolean; // true if lists are enabled
+  links: boolean; // true if links are enabled
 }
 
 // Built-in Slate mark configurations
-export const SLATE_MARKS: Record<string, {
-  hotkey?: string;
-  htmlTag: string;
-  label: string;
-  icon: string;
-  renderHtml: (text: string) => string;
-}> = {
-  'bold': { 
-    hotkey: 'mod+b', 
-    htmlTag: 'strong', 
-    label: 'Bold', 
-    icon: '𝐁',
-    renderHtml: (text: string) => `<strong>${text}</strong>`
+export const SLATE_MARKS: Record<
+  string,
+  {
+    hotkey?: string;
+    htmlTag: string;
+    label: string;
+    icon: string;
+    renderHtml: (text: string) => string;
+  }
+> = {
+  bold: {
+    hotkey: "mod+b",
+    htmlTag: "strong",
+    label: "Bold",
+    icon: "𝐁",
+    renderHtml: (text: string) => `<strong>${text}</strong>`,
   },
-  'italic': { 
-    hotkey: 'mod+i', 
-    htmlTag: 'em', 
-    label: 'Italic', 
-    icon: '𝐼',
-    renderHtml: (text: string) => `<em>${text}</em>`
+  italic: {
+    hotkey: "mod+i",
+    htmlTag: "em",
+    label: "Italic",
+    icon: "𝐼",
+    renderHtml: (text: string) => `<em>${text}</em>`,
   },
-  'underline': { 
-    hotkey: 'mod+u', 
-    htmlTag: 'u', 
-    label: 'Underline', 
-    icon: '𝐔',
-    renderHtml: (text: string) => `<u>${text}</u>`
+  underline: {
+    hotkey: "mod+u",
+    htmlTag: "u",
+    label: "Underline",
+    icon: "𝐔",
+    renderHtml: (text: string) => `<u>${text}</u>`,
   },
-  'strikethrough': { 
-    htmlTag: 's', 
-    label: 'Strikethrough', 
-    icon: '𝐒',
-    renderHtml: (text: string) => `<s>${text}</s>`
+  strikethrough: {
+    htmlTag: "s",
+    label: "Strikethrough",
+    icon: "𝐒",
+    renderHtml: (text: string) => `<s>${text}</s>`,
   },
-  'subscript': { 
-    htmlTag: 'sub', 
-    label: 'Subscript', 
-    icon: 'X₂',
-    renderHtml: (text: string) => `<sub>${text}</sub>`
+  subscript: {
+    htmlTag: "sub",
+    label: "Subscript",
+    icon: "X₂",
+    renderHtml: (text: string) => `<sub>${text}</sub>`,
   },
-  'superscript': { 
-    htmlTag: 'sup', 
-    label: 'Superscript', 
-    icon: 'X²',
-    renderHtml: (text: string) => `<sup>${text}</sup>`
+  superscript: {
+    htmlTag: "sup",
+    label: "Superscript",
+    icon: "X²",
+    renderHtml: (text: string) => `<sup>${text}</sup>`,
+  },
+  extrabold: {
+    htmlTag: "span",
+    label: "Extra Bold",
+    icon: "𝐄𝐁",
+    renderHtml: (text: string) => `<span class="extrabold">${text}</span>`,
   },
-  'extrabold': { 
-    htmlTag: 'span', 
-    label: 'Extra Bold', 
-    icon: '𝐄𝐁',
-    renderHtml: (text: string) => `<span class="extrabold">${text}</span>`
-  }
 };
 
 // Built-in Slate block configurations
-export const SLATE_BLOCKS: Record<string, {
-  htmlTag: string;
-  label: string;
-  icon: string;
-  renderHtml: (text: string, alignStyle: string) => string;
-}> = {
-  'paragraph': { 
-    htmlTag: 'p', 
-    label: 'Paragraph', 
-    icon: '¶',
-    renderHtml: (text: string, alignStyle: string) => `<p${alignStyle}>${text}</p>`
+export const SLATE_BLOCKS: Record<
+  string,
+  {
+    htmlTag: string;
+    label: string;
+    icon: string;
+    renderHtml: (text: string, alignStyle: string) => string;
+  }
+> = {
+  paragraph: {
+    htmlTag: "p",
+    label: "Paragraph",
+    icon: "¶",
+    renderHtml: (text: string, alignStyle: string) =>
+      `<p${alignStyle}>${text}</p>`,
   },
-  'no-tag': { 
-    htmlTag: 'no-tag', 
-    label: 'Plain Text', 
-    icon: 'T',
-    renderHtml: (text: string, alignStyle: string) => text
+  "no-tag": {
+    htmlTag: "no-tag",
+    label: "Plain Text",
+    icon: "T",
+    renderHtml: (text: string, alignStyle: string) => text,
   },
-  'heading-1': { 
-    htmlTag: 'h1', 
-    label: 'Heading 1', 
-    icon: 'H1',
-    renderHtml: (text: string, alignStyle: string) => `<h1${alignStyle}>${text}</h1>`
+  "heading-1": {
+    htmlTag: "h1",
+    label: "Heading 1",
+    icon: "H1",
+    renderHtml: (text: string, alignStyle: string) =>
+      `<h1${alignStyle}>${text}</h1>`,
   },
-  'heading-2': { 
-    htmlTag: 'h2', 
-    label: 'Heading 2', 
-    icon: 'H2',
-    renderHtml: (text: string, alignStyle: string) => `<h2${alignStyle}>${text}</h2>`
+  "heading-2": {
+    htmlTag: "h2",
+    label: "Heading 2",
+    icon: "H2",
+    renderHtml: (text: string, alignStyle: string) =>
+      `<h2${alignStyle}>${text}</h2>`,
   },
-  'heading-3': { 
-    htmlTag: 'h3', 
-    label: 'Heading 3', 
-    icon: 'H3',
-    renderHtml: (text: string, alignStyle: string) => `<h3${alignStyle}>${text}</h3>`
+  "heading-3": {
+    htmlTag: "h3",
+    label: "Heading 3",
+    icon: "H3",
+    renderHtml: (text: string, alignStyle: string) =>
+      `<h3${alignStyle}>${text}</h3>`,
   },
-  'heading-4': { 
-    htmlTag: 'h4', 
-    label: 'Heading 4', 
-    icon: 'H4',
-    renderHtml: (text: string, alignStyle: string) => `<h4${alignStyle}>${text}</h4>`
+  "heading-4": {
+    htmlTag: "h4",
+    label: "Heading 4",
+    icon: "H4",
+    renderHtml: (text: string, alignStyle: string) =>
+      `<h4${alignStyle}>${text}</h4>`,
   },
-  'heading-5': { 
-    htmlTag: 'h5', 
-    label: 'Heading 5', 
-    icon: 'H5',
-    renderHtml: (text: string, alignStyle: string) => `<h5${alignStyle}>${text}</h5>`
+  "heading-5": {
+    htmlTag: "h5",
+    label: "Heading 5",
+    icon: "H5",
+    renderHtml: (text: string, alignStyle: string) =>
+      `<h5${alignStyle}>${text}</h5>`,
+  },
+  "heading-6": {
+    htmlTag: "h6",
+    label: "Heading 6",
+    icon: "H6",
+    renderHtml: (text: string, alignStyle: string) =>
+      `<h6${alignStyle}>${text}</h6>`,
   },
-  'heading-6': { 
-    htmlTag: 'h6', 
-    label: 'Heading 6', 
-    icon: 'H6',
-    renderHtml: (text: string, alignStyle: string) => `<h6${alignStyle}>${text}</h6>`
-  }
 };
 
 // Built-in alignment configurations
-export const SLATE_ALIGNMENTS: Record<string, {
-  label: string;
-  icon: string;
-  value: Alignment;
-}> = {
-  'left': { label: 'Align Left', icon: '←', value: 'left' },
-  'center': { label: 'Align Center', icon: '↔', value: 'center' },
-  'right': { label: 'Align Right', icon: '→', value: 'right' },
-  'justify': { label: 'Justify', icon: '≡', value: 'justify' }
+export const SLATE_ALIGNMENTS: Record<
+  string,
+  {
+    label: string;
+    icon: string;
+    value: Alignment;
+  }
+> = {
+  left: { label: "Align Left", icon: "←", value: "left" },
+  center: { label: "Align Center", icon: "↔", value: "center" },
+  right: { label: "Align Right", icon: "→", value: "right" },
+  justify: { label: "Justify", icon: "≡", value: "justify" },
 };
 
 export type RichTextField = Field & {
   source: string;
-}
+};

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

@@ -185,7 +185,7 @@ export function CommentHighlighting({
                   : "right-[-18px]",
               )}
               onClick={() => {
-                editContext.switchView("reviews");
+                editContext.switchView("comments");
                 editContext?.select([comment.itemId]);
                 editContext?.setSelectedComment(comment);
               }}

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

@@ -351,22 +351,27 @@ export function FrameMenu({
               <GripVertical strokeWidth={1} className="h-4 w-4" />
               {component.name}
               {component.parentPlaceholder?.parentComponent && (
-                <span
-                  className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100"
-                  onClick={() => {
-                    editContext.select([
-                      component.parentPlaceholder?.parentComponent.id || "",
-                    ]);
-                  }}
-                >
-                  <ArrowUpFromDot height={14} width={14} />
-                </span>
+                <Tooltip delayDuration={500}>
+                  <TooltipTrigger asChild>
+                    <span
+                      className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100"
+                      onClick={() => {
+                        editContext.select([
+                          component.parentPlaceholder?.parentComponent.id || "",
+                        ]);
+                      }}
+                    >
+                      <ArrowUpFromDot height={14} width={14} />
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent>Select parent</TooltipContent>
+                </Tooltip>
               )}
             </div>
             {editContext.mode === "edit" && (
               <div className="flex items-center gap-2.5 text-sm">
                 {buttons.map((b, i) => (
-                  <Tooltip key={i}>
+                  <Tooltip key={i} delayDuration={500}>
                     <TooltipTrigger asChild>
                       <div
                         className="cursor-pointer hover:text-gray-200"

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

@@ -151,7 +151,7 @@ export function PlaceholderDropZone({
         <div
           className={cn(
             isHovering
-              ? "z-30 h-20 w-20 shadow-xl"
+              ? "z-30 h-20 w-15 shadow-xl"
               : "z-30 h-10 w-10 hover:scale-[1.1]",
             "test-ph-dropzone tour-placeholder-dropzone absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-blue-500 p-2 text-center text-sm text-white opacity-100 transition-all duration-300 ease-in-out",
             className,

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

@@ -171,11 +171,12 @@ export function PageViewerFrame({
     )
       return;
 
-    const renderUrl = new URL(
+    const urlPath =
       editContext.mode === "preview"
         ? pageViewContext.previewUrl
-        : pageViewContext.editUrl,
-    );
+        : pageViewContext.editUrl;
+
+    const renderUrl = new URL(urlPath, window.location.origin);
     renderUrl.searchParams.set("edit_rev", editContext.revision ?? uuid());
 
     if (iframeRef.current?.contentWindow?.requestRefresh) {

package/src/editor/services/agentService.ts

@@ -32,11 +32,8 @@ export interface AgentChatMessage {
   role: string;
   content: string;
   name: string;
-  toolCallId?: string;
-  functionName?: string;
-  functionArguments?: string;
-  functionResult?: any;
-  functionError?: string;
+  toolCallId?: string; // For tool result messages that reference a specific tool call
+  messageType?: string; // content, tool_result
   isCompleted: boolean;
   model?: string;
   tokensUsed: number;
@@ -47,6 +44,20 @@ export interface AgentChatMessage {
   editOperations?: any[];
   longRunningTaskIds?: string[];
   metadata?: string;
+  toolCalls?: AgentChatToolCall[]; // Tool calls associated with this message
+}
+
+export interface AgentChatToolCall {
+  id: string;
+  messageId: string;
+  toolCallId: string; // The tool call ID from the AI response
+  functionName: string;
+  functionArguments?: string;
+  functionResult?: any;
+  functionError?: string;
+  isCompleted: boolean;
+  responseTimeMs?: number;
+  createdDate: string;
 }
 
 /**

package/src/editor/services/aiService.ts

@@ -116,6 +116,8 @@ export async function executePrompt(
     ...options,
   };
 
+  console.log("ExecutePrompt: requestBody", requestBody);
+
   finalRequestOptions = {
     method: "POST",
     body: JSON.stringify(requestBody),

package/src/page-wizard/PageWizard.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { useEditContext } from "../editor/client/editContext";
-import { getWizards } from "./service";
+import { getWizard } from "./service";
 
 import { WizardSteps } from "./WizardSteps";
 import { Thumbnail } from "../editor/services/contentService";
 import { Spinner } from "../editor/ui/Spinner";
+import { ItemDescriptor } from "../editor/pageModel";
 
 export type Wizard = {
   id: string;
@@ -62,6 +63,7 @@ export type WizardStep = {
 
 export type WizardData = {
   [key: string]: any;
+  currentItem?: ItemDescriptor;
 };
 
 export type WizardPageModel = {
@@ -94,7 +96,7 @@ export type WizardField = {
 export function PageWizard() {
   const editContext = useEditContext();
   const [wizard, setWizard] = useState<Wizard | null>(null);
-  const [parentItem, setParentItem] = useState<any>(null);
+  const [parentItem, setParentItem] = useState<ItemDescriptor | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -117,20 +119,15 @@ export function PageWizard() {
 
       setIsLoading(true);
       try {
-        const availableWizards = await getWizards(
+        const foundWizard = await getWizard(
+          wizardId,
           editContext.contentEditorItem.descriptor,
         );
-        const foundWizard = availableWizards.find((w) => w.id === wizardId);
-        if (foundWizard) {
-          setWizard(foundWizard);
-          setParentItem(editContext.contentEditorItem.descriptor);
-        } else {
-          console.log("PageWizard - Wizard not found:", wizardId);
-          // Only switch away if we actually looked for the wizard and didn't find it
-          editContext?.switchView("content-editor", { skipConfirmation: true });
-        }
+        setWizard(foundWizard);
+        setParentItem(editContext.contentEditorItem.descriptor);
       } catch (error) {
-        console.error("PageWizard: Error loading wizards:", error);
+        console.error("PageWizard: Error loading wizard:", error);
+        // If the wizard couldn't be loaded (not found, not valid for context, etc.)
         editContext?.switchView("content-editor", { skipConfirmation: true });
       } finally {
         setIsLoading(false);

package/src/page-wizard/WizardSteps.tsx

@@ -318,7 +318,9 @@ function MobileNavigationButtons({
 export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
   // Local state management instead of pageWizard context
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [data, setData] = useState<WizardData>({});
+  const [data, setData] = useState<WizardData>({
+    currentItem: parentItem,
+  });
   const [pageModel, setPageModel] = useState<WizardPageModel>({
     components: [],
     name: "",

package/src/page-wizard/service.ts

@@ -11,6 +11,17 @@ export async function getWizards(
   return result.data as Wizard[] | [];
 }
 
+export async function getWizard(
+  wizardId: string,
+  parentItem: ItemDescriptor,
+): Promise<Wizard> {
+  const result = await post("/alpaca/editor/page-wizard/getWizard", {
+    wizardId,
+    parentItem,
+  });
+  return result.data as Wizard;
+}
+
 export function createWizardAiContext({
   editContext,
 }: {