@alpaca-editor/core 1.0.4103 → 1.0.4104

package/src/editor/sidebar/GraphQL.tsx

@@ -8,8 +8,7 @@ import { useEffect, useState } from "react";
 import { useEditContext } from "../client/editContext";
 import { ObjectInspector } from "react-inspector";
 import { SimpleTabs } from "../ui/SimpleTabs";
-import { AiTerminal } from "../ai/AiTerminal";
-import { createEditorAiContext } from "../ai/editorAiContext";
+import { createAgentCommand } from "../commands/agentCommands";
 import { RefreshCw } from "lucide-react";
 
 export function GraphQL() {
@@ -42,6 +41,29 @@ export function GraphQL() {
       fetchSchema();
     }
   }, [activeTab]);
+  // Register a context factory for GraphQL so agents can pull structured context without tool reads
+  useEffect(() => {
+    if (!editContext || !item) return;
+    const factoryName = "graphql:context:v1";
+    const factory = async () => ({
+      schema: schemaResult?.data || "",
+      currentQuery: query,
+      itemContext: {
+        id: item.id,
+        language: item.language,
+        version: item.version,
+      },
+    });
+    editContext.registerContextFactory?.(factoryName, factory);
+    return () => editContext.unregisterContextFactory?.(factoryName);
+  }, [
+    editContext,
+    item?.id,
+    item?.language,
+    item?.version,
+    query,
+    schemaResult?.data,
+  ]);
 
   // if (item) {
   //   const selectedComponents = editContext!.selection
@@ -190,48 +212,10 @@ export function GraphQL() {
     return match ? match[1]?.trim() || null : null;
   };
 
-  // Create AI context with GraphQL schema for AI assistance
-  const createGraphQLAiContext = ({ editContext }: { editContext: any }) => {
-    const baseContext = createEditorAiContext({ editContext });
-    if (!item) return baseContext;
-
-    return {
-      ...baseContext,
-      endpoint: "/alpaca/editor/graphql/prompt",
-      promptData: {
-        ...baseContext.promptData,
-        graphqlSchema: schemaResult?.data || null,
-        currentQuery: query,
-        itemContext: {
-          id: item.id,
-          language: item.language,
-          version: item.version,
-        },
-      },
-      callback: (response: any) => {
-        // Check if the AI response contains a GraphQL query
-        if (
-          response?.messages &&
-          Array.isArray(response.messages) &&
-          response.messages.length > 0
-        ) {
-          const lastMessage = response.messages[response.messages.length - 1];
-          if (
-            lastMessage &&
-            lastMessage.role === "assistant" &&
-            lastMessage.content
-          ) {
-            const extractedQuery = extractGraphQLFromResponse(
-              lastMessage.content,
-            );
-            if (extractedQuery) {
-              setAiGeneratedQuery(extractedQuery);
-            }
-          }
-        }
-      },
-    };
-  };
+  // removed old AiTerminal context
+
+  // Register a context factory for GraphQL so agents can pull structured context without tool reads
+  // (moved useEffect for context factory above to ensure hooks order remains stable)
 
   return (
     <Splitter layout="vertical" style={{ height: "100%" }}>
@@ -306,61 +290,6 @@ export function GraphQL() {
           <SimpleTabs
             className="border-gray-3 border-b px-2 pt-2"
             tabs={[
-              {
-                id: "ai",
-                label: "AI Assistant",
-                icon: "pi pi-star",
-                content: (
-                  <div className="relative h-full overflow-hidden">
-                    <AiTerminal
-                      createAiContext={createGraphQLAiContext}
-                      defaultProfile="GraphQL Assistant"
-                      options={{
-                        hiddenSystemPrompt: `You are an expert GraphQL assistant. Help the user create, modify, and understand GraphQL queries.
-
-Current Context:
-- Item ID: ${item?.id}
-- Language: ${item?.language}
-- Version: ${item?.version}
-- Current Query: ${query || "No query set"}
-- Schema Available: ${schemaResult?.data ? "Yes" : "No"}
-
-${
-  schemaResult?.data
-    ? `GraphQL Schema:
-\`\`\`
-${schemaResult.data}
-\`\`\`
-
-`
-    : ""
-}
-
-Instructions:
-1. When helping with GraphQL queries, always consider the available schema
-2. Provide working GraphQL query examples
-3. Explain the query structure and what each part does
-4. If the user wants to update the query, provide the complete new query
-5. Always validate queries against the schema when possible
-6. Help with both queries and mutations
-7. Suggest optimizations and best practices
-
-When updating queries, respond with the updated query in this format:
-\`\`\`graphql
-[your updated query here]
-\`\`\`
-
-Available operations:
-- You can help craft new queries
-- You can modify existing queries
-- You can explain GraphQL concepts
-- You can suggest optimizations
-- You can help with error troubleshooting`,
-                      }}
-                    />
-                  </div>
-                ),
-              },
               {
                 id: "schema",
                 label: "Schema",
@@ -388,6 +317,28 @@ Available operations:
             activeTab={activeTab}
             setActiveTab={setActiveTab}
           />
+          <div className="border-t border-gray-200 p-2">
+            <ActionButton
+              variant="outline"
+              className="text-xs"
+              onClick={() => {
+                editContext?.executeCommand?.({
+                  command: createAgentCommand,
+                  data: {
+                    profileName: "GraphQL Assistant",
+                    contextFactory: "graphql:context:v1",
+                    initialPrompt:
+                      "Help with the current GraphQL query and schema.",
+                    additionalData: {
+                      source: "GraphQLPanel",
+                    },
+                  },
+                });
+              }}
+            >
+              Start GraphQL Agent
+            </ActionButton>
+          </div>
         </div>
       </SplitterPanel>
     </Splitter>

package/src/editor/ui/DragPreview.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+/**
+ * Lightweight React component for consistent multi-select drag previews.
+ * Use with renderToString or by creating a DOM node and setting innerHTML.
+ */
+export function DragMultiSelectPreview({ count }: { count: number }) {
+  return (
+    <div className="rounded-md border border-gray-300 bg-white px-4 py-2 pl-8 text-sm shadow-md">
+      <div className="flex items-center">
+        <span className="mr-1 font-bold">{count}</span>
+        <span>components</span>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Imperative helper to attach a consistent multi-select drag image.
+ * Returns a cleanup function that removes the temporary element.
+ */
+export function setMultiDragImage(
+  event: React.DragEvent<any>,
+  count: number,
+): () => void {
+  const temp = document.createElement("div");
+  temp.className =
+    "bg-white shadow-md rounded-md border border-gray-300 px-4 pl-8 py-2 text-sm absolute top-[-1000px] left-[-1000px]";
+  temp.innerHTML = `<div class="flex items-center"><span class="font-bold mr-1">${count}</span> components</div>`;
+  document.body.appendChild(temp);
+  try {
+    event.dataTransfer.setDragImage(temp, 15, 15);
+    event.dataTransfer.dropEffect = "move";
+    event.dataTransfer.effectAllowed = "move";
+  } catch {}
+  const cleanup = () => {
+    try {
+      document.body.removeChild(temp);
+    } catch {}
+  };
+  // Defer cleanup to next tick so the drag image is captured.
+  setTimeout(cleanup, 0);
+  return cleanup;
+}

package/src/editor/ui/ItemNameDialogNew.tsx

@@ -7,7 +7,7 @@ import {
 
 import { useEffect, useRef, useState } from "react";
 import DialogButtons from "./DialogButtons";
-import { Button } from "primereact/button";
+import { Button } from "../../components/ui/button";
 import { InputText } from "primereact/inputtext";
 import { DialogProps } from "../client/editContext";
 import { ItemDescriptor } from "../pageModel";
@@ -137,8 +137,12 @@ export function ItemNameDialog(
           )}
         </div>
         <DialogButtons>
-          <Button onClick={handleOk} label="Ok" disabled={!isValid} />
-          <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+          <Button onClick={handleOk} disabled={!isValid}>
+            Ok
+          </Button>
+          <Button onClick={() => props.onClose?.(null)} variant="ghost">
+            Cancel
+          </Button>
         </DialogButtons>
       </DialogContent>
     </Dialog>

package/src/editor/ui/PerfectTree.tsx

@@ -9,6 +9,7 @@ import React, {
 
 import { ProgressSpinner } from "primereact/progressspinner";
 import { ChevronRight } from "lucide-react";
+import { setMultiDragImage } from "../ui/DragPreview";
 export interface TreeNode<T = any> {
   key: string;
   label: string;
@@ -406,23 +407,7 @@ const NodeContent = memo(
           isSelected && selectedKeys && selectedKeys.length > 1;
 
         // Set drag preview for multiple items if applicable
-        if (isMultiSelect) {
-          // Create custom drag image showing count of selected items
-          const dragPreview = document.createElement("div");
-          dragPreview.className =
-            "bg-white shadow-md rounded-md border border-gray-300 px-2 py-1 text-sm max-w-24 absolute top-[-1000px] left-[-1000px]";
-          dragPreview.innerHTML = `<div class="flex items-center"><span class="font-bold mr-1">${selectedKeys.length}</span> items</div>`;
-          document.body.appendChild(dragPreview);
-
-          // Set custom drag image
-          event.dataTransfer.setDragImage(dragPreview, 15, 15);
-          event.dataTransfer.dropEffect = "move";
-
-          // Remove the element after drag starts
-          setTimeout(() => {
-            document.body.removeChild(dragPreview);
-          }, 0);
-        }
+        if (isMultiSelect) setMultiDragImage(event, selectedKeys.length);
         if (onStartDrag) {
           onStartDrag({ node, event, isMultiSelect: isMultiSelect ?? false });
         }

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4103";
-export const buildDate = "2025-09-23 01:47:30";
+export const version = "1.0.4104";
+export const buildDate = "2025-09-23 14:05:05";

package/src/tour/default-tour.tsx

@@ -52,7 +52,8 @@ export function getDefaultTourSteps(
           className: "button button-secondary mt-2",
         },
       ],
-    },    "new-page": {
+    },
+    "new-page": {
       title: "Create a New Page",
       description: (
         <>
@@ -65,20 +66,18 @@ export function getDefaultTourSteps(
         await waitForElement(".tour-pick-location");
       },
       nextStep: "pick-location",
-    },    "pick-location": {
+    },
+    "pick-location": {
       title: "Choose Location",
-      description: (
-        <>
-          Open up a folder for your page
-        </>
-      ),
+      description: <>Open up a folder for your page</>,
       focusElement: ".tour-pick-location",
       bubblePosition: "right",
       waitForUserInput: async () => {
         await waitForElement(".bg-theme-secondary-light");
       },
       nextStep: "choose-template",
-    },    "choose-template": {
+    },
+    "choose-template": {
       title: "Select Template",
       description: "Select a template for your page",
       focusElement: ".tour-choose-template",
@@ -96,7 +95,8 @@ export function getDefaultTourSteps(
       },
       bubblePosition: "left",
       nextStep: "enter-name",
-    },    "enter-name": {
+    },
+    "enter-name": {
       title: "Name Your Page",
       description: "Enter a name for your page",
       focusElement: "#new-page-name",
@@ -105,7 +105,8 @@ export function getDefaultTourSteps(
         await waitForElement("#create-new-page-button:not([disabled])");
       },
       nextStep: "create-page",
-    },    "create-page": {
+    },
+    "create-page": {
       title: "Create Page",
       description: "Click the Create button",
       focusElement: "#create-new-page-button",
@@ -115,14 +116,16 @@ export function getDefaultTourSteps(
         await waitForElement(".pi-cog");
       },
       nextStep: "loading",
-    },    "loading": {
+    },
+    loading: {
       title: "Loading...",
       description: "Waiting for your new page...",
       waitForUserInput: async () => {
         await waitForElementToDisappear(".pi-cog");
       },
       nextStep: "ready-to-add-component",
-    },    "ready-to-add-component": {
+    },
+    "ready-to-add-component": {
       title: "Ready to Add Components",
       description: "Wanna add a component to your beautiful empty page?",
       buttons: [
@@ -141,7 +144,8 @@ export function getDefaultTourSteps(
           },
         },
       ],
-    },    "insert-component": {
+    },
+    "insert-component": {
       title: "Insert Component",
       description: "Excellent, click on the plus button to insert a component.",
       focusElement: "#insert-component-button",
@@ -150,7 +154,8 @@ export function getDefaultTourSteps(
         await waitForElement(".tour-component-palette");
       },
       nextStep: "drag-component",
-    },    "drag-component": {
+    },
+    "drag-component": {
       title: "Drag & Drop Component",
       description: `Drag and drop a ${config.firstComponentTemplateName} component to your page.`,
       focusElement: `#insert-component-${config.firstComponentTemplateId}`,
@@ -159,7 +164,8 @@ export function getDefaultTourSteps(
         await waitForElement(".tour-placeholder-dropzone");
       },
       nextStep: "drop-component-on-placeholder",
-    },    "drop-component-on-placeholder": {
+    },
+    "drop-component-on-placeholder": {
       title: "Drop Here!",
       description: "Drop the component onto this placeholder!",
       focusElement: ".tour-placeholder-dropzone",
@@ -174,7 +180,8 @@ export function getDefaultTourSteps(
         return "drag-component";
       },
       nextStep: "enter-title",
-    },    "enter-title": {
+    },
+    "enter-title": {
       title: "Fill in Content",
       description: `Excellent! Now lets fill in the fields. First enter a ${config.firstComponentTextFieldName}`,
       focusElement: `[data-field-id='${config.firstComponentTextFieldId}']`,
@@ -186,7 +193,8 @@ export function getDefaultTourSteps(
         );
       },
       nextStep: "see-content-update",
-    },    "see-content-update": {
+    },
+    "see-content-update": {
       title: "Live Updates",
       description:
         "See how the content is automatically updating on your page?",
@@ -202,7 +210,8 @@ export function getDefaultTourSteps(
         );
       },
       nextStep: "edit-content-inline",
-    },    "edit-content-inline": {
+    },
+    "edit-content-inline": {
       title: "Inline Editing",
       description:
         "You can also directly edit the content on the page. Click on the [Introduction] placeholder here and start typing!",
@@ -217,7 +226,8 @@ export function getDefaultTourSteps(
         );
       },
       nextStep: "ai-intro",
-    },    "ai-intro": {
+    },
+    "ai-intro": {
       title: "AI-Powered Editing",
       description:
         "But hey, this is an AI editor, so why not let the AI do some of the work for you?",
@@ -231,45 +241,23 @@ export function getDefaultTourSteps(
           onClick: () => nextStep("ai-sidebar"),
         },
       ],
-    },    "ai-sidebar": {
+    },
+    "ai-sidebar": {
       title: "Open AI Chat",
       description: "Click on the AI sidebar to open the AI chat.",
       focusElement: `[data-sidebarview-name='ai']`,
       bubblePosition: "right",
       nextStep: "ai-terminal",
       waitForElement: "[data-sidebarview-name='ai'].active",
-    },    "ai-terminal": {
+    },
+    "ai-terminal": {
       title: "AI Assistant",
       description:
-        "Let me take control and tell the AI to add some more components.",
-      focusElement: `.tour-ai-terminal textarea`,
+        "Open the Agents panel (top-right) and start an agent to add components.",
       waitForUserInput: async () => {
         await delay(1000);
-        const aiTerminal = document.querySelector(".tour-ai-terminal textarea");
-        if (aiTerminal) {
-          (aiTerminal as HTMLTextAreaElement).focus();
-          await simulateTyping(
-            aiTerminal as HTMLTextAreaElement,
-            `Please add three components of type ${config.firstComponentTemplateName} with some funny dummy content to the page.`,
-          );
-        }
       },
       bubblePosition: "top-right",
-      nextStep: "ai-submit",
-    },    "ai-submit": {
-      title: "Send AI Request",
-      description: "Click on the Send button to submit the prompt to the AI.",
-      focusElement: ".tour-ai-terminal .tour-send-button",
-      bubblePosition: "top-right",
-      nextStep: "ai-watch-components-added",
-      waitForElement: ".tour-ai-terminal .prompt",
-    },    "ai-watch-components-added": {
-      title: "AI Magic in Action",
-      description:
-        "Watch how the AI adds the components to the page. This can take a few seconds.",
-      focusElement: ".tour-ai-terminal",
-      pointToElement: ".tour-ai-terminal .prompt",
-      waitForElement: ".tour-ai-response-message-changes",
       nextStep: "congratulations",
     },
     congratulations: {

package/dist/editor/ai/AiTerminal.d.ts

@@ -1,47 +0,0 @@
-import { EditContextType } from "../client/editContext";
-import { EditOperation } from "../../types";
-type Response = {
-    messages: Message[];
-    editOperations: EditOperation[];
-    numInputTokens: number;
-    numOutputTokens: number;
-    numCachedTokens: number;
-    state: string;
-};
-export type ToolCall = {
-    id: string;
-    displayName: string;
-    function: {
-        name: string;
-        arguments: string;
-    };
-};
-export type Message = {
-    id: string;
-    content: string;
-    formattedContent?: string;
-    name: string;
-    role: string;
-    tool_calls?: ToolCall[];
-    tool_call_id?: string;
-    createdDate?: string;
-};
-export type AiContext = {
-    promptData: any;
-    endpoint?: string;
-    callback?: (response: Response) => void;
-};
-export type AiTerminalOptions = {
-    initialPrompt?: string;
-    hiddenSystemPrompt?: string;
-    initialMessages?: Message[];
-};
-export declare function AiTerminal({ closeButton, createAiContext, defaultProfile, options, }: {
-    closeButton?: React.ReactNode;
-    createAiContext: ({ editContext, }: {
-        editContext: EditContextType;
-    }) => AiContext;
-    defaultProfile?: string;
-    options?: AiTerminalOptions;
-}): import("react/jsx-runtime").JSX.Element | null;
-export {};