@alpaca-editor/core 1.0.3978 → 1.0.3980

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

@@ -4,7 +4,7 @@ import { PageViewerFrame } from "./PageViewerFrame";
 import { useEffect, useState } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { useEditContext } from "../client/editContext";
-import { Ellipsis, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Splitter, SplitterPanel } from "../ui/Splitter";
 
@@ -31,10 +31,8 @@ export function PageViewer({
   if (!pageViewContext) return null;
 
   useEffect(() => {
-    if (editContext?.insertMode) {
-      setFormEditorCollapsed(false);
-    }
-  }, [editContext?.insertMode]);
+    setFormEditorCollapsed(false);
+  }, [editContext?.insertMode, editContext?.activeEditorTab]);
 
   useEffect(() => {
     if (
@@ -98,12 +96,6 @@ export function PageViewer({
                 {editContext?.statusMessage}
               </div>
               <div className="flex gap-1">
-                <SimpleIconButton
-                  icon=<Ellipsis size={12} />
-                  selected={editContext?.enableCompletions}
-                  label="Enable Completions"
-                  onClick={() => editContext?.setEnableCompletions((c) => !c)}
-                />
                 <SimpleIconButton
                   icon="pi pi-step-forward"
                   selected={followEdits}

package/src/editor/services/contextService.ts

@@ -0,0 +1,146 @@
+import { EditContextType } from "../client/editContext";
+import { executePrompt } from "./aiService";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+
+export interface PageContext {
+  abstract: string;
+  pageTitle: string;
+  pageType: string;
+  lastGenerated: Date;
+}
+
+// Cache for generated contexts to avoid repeated API calls
+const contextCache = new Map<string, PageContext>();
+const CONTEXT_CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+
+/**
+ * Generates a concise page abstract for use in completion prompts
+ * @param editContext - The current edit context
+ * @param pageViewContext - The page view context
+ * @returns Promise<PageContext> - The generated page context
+ */
+export async function generatePageContext(
+  editContext: EditContextType,
+  pageViewContext: PageViewContext,
+): Promise<PageContext | null> {
+  if (!editContext.contentEditorItem) {
+    return null;
+  }
+
+  // Only generate context if completions are enabled
+  if (!editContext.enableCompletions) {
+    return null;
+  }
+
+  const cacheKey = `${editContext.contentEditorItem.id}-${editContext.contentEditorItem.language}-${editContext.contentEditorItem.version}`;
+
+  // Check cache first
+  const cached = contextCache.get(cacheKey);
+  if (
+    cached &&
+    Date.now() - cached.lastGenerated.getTime() < CONTEXT_CACHE_DURATION
+  ) {
+    return cached;
+  }
+
+  try {
+    // Generate abstract using AI with get-content function
+    const messages = [
+      {
+        name: "system",
+        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.",
+      },
+    ];
+
+    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,
+      },
+      undefined,
+      "gpt-4o-mini", // Use a fast, efficient model for context generation
+    );
+
+    console.log("result", result);
+
+    const abstract =
+      result?.messages?.[result?.messages.length - 1]?.content ||
+      "This page contains content that can be edited and enhanced with AI assistance.";
+
+    const pageContext: PageContext = {
+      abstract: abstract.substring(0, 500), // Ensure we don't exceed reasonable length
+      pageTitle: editContext.contentEditorItem.name || "Page",
+      pageType: editContext.contentEditorItem.templateName || "Content",
+      lastGenerated: new Date(),
+    };
+
+    // Cache the result
+    contextCache.set(cacheKey, pageContext);
+
+    return pageContext;
+  } catch (error) {
+    console.error("Error generating page context:", error);
+
+    // Return a fallback context
+    const fallbackContext: PageContext = {
+      abstract:
+        "This page contains content that can be edited and enhanced with AI assistance.",
+      pageTitle: editContext.contentEditorItem.name || "Page",
+      pageType: editContext.contentEditorItem.templateName || "Content",
+      lastGenerated: new Date(),
+    };
+
+    return fallbackContext;
+  }
+}
+
+/**
+ * Clears the context cache for a specific item or all items
+ * @param itemKey - Optional specific item key to clear, if not provided clears all
+ */
+export function clearContextCache(itemKey?: string): void {
+  if (itemKey) {
+    contextCache.delete(itemKey);
+  } else {
+    contextCache.clear();
+  }
+}
+
+/**
+ * Gets a cached context without regenerating it
+ * @param editContext - The current edit context
+ * @returns PageContext | null - The cached context if available
+ */
+export function getCachedContext(
+  editContext: EditContextType,
+): PageContext | null {
+  if (!editContext.contentEditorItem) {
+    return null;
+  }
+
+  const cacheKey = `${editContext.contentEditorItem.id}-${editContext.contentEditorItem.language}-${editContext.contentEditorItem.version}`;
+  const cached = contextCache.get(cacheKey);
+
+  if (
+    cached &&
+    Date.now() - cached.lastGenerated.getTime() < CONTEXT_CACHE_DURATION
+  ) {
+    return cached;
+  }
+
+  return null;
+}

package/src/editor/sidebar/Completions.tsx

@@ -0,0 +1,160 @@
+import { useState, useEffect } from "react";
+import { useEditContext } from "../client/editContext";
+import { Switch } from "../../components/ui/switch";
+import { Button } from "../../components/ui/button";
+import { Badge } from "../../components/ui/badge";
+import { Loader2, RefreshCw, FileText } from "lucide-react";
+
+import {
+  generatePageContext,
+  getCachedContext,
+  clearContextCache,
+  PageContext,
+} from "../services/contextService";
+
+export function Completions() {
+  const editContext = useEditContext();
+  const [pageContext, setPageContext] = useState<PageContext | null>(null);
+  const [isGeneratingContext, setIsGeneratingContext] = useState(false);
+
+  // Load page context when component mounts or item changes
+  useEffect(() => {
+    if (editContext) {
+      const cached = getCachedContext(editContext);
+      if (cached) {
+        setPageContext(cached);
+      } else {
+        loadPageContext();
+      }
+    }
+  }, [
+    editContext?.contentEditorItem?.id,
+    editContext?.contentEditorItem?.language,
+    editContext?.contentEditorItem?.version,
+    editContext?.enableCompletions,
+  ]);
+
+  const loadPageContext = async () => {
+    if (!editContext || !editContext.pageView) return;
+
+    setIsGeneratingContext(true);
+    try {
+      const context = await generatePageContext(
+        editContext,
+        editContext.pageView,
+      );
+      setPageContext(context);
+    } catch (error) {
+      console.error("Failed to load page context:", error);
+    } finally {
+      setIsGeneratingContext(false);
+    }
+  };
+
+  const refreshPageContext = async () => {
+    if (!editContext?.contentEditorItem) return;
+
+    const cacheKey = `${editContext.contentEditorItem.id}-${editContext.contentEditorItem.language}-${editContext.contentEditorItem.version}`;
+    clearContextCache(cacheKey);
+    await loadPageContext();
+  };
+
+  return (
+    <div className="flex h-full flex-col space-y-4 p-4">
+      {/* Settings Section */}
+      <div className="rounded-lg border bg-white p-4 shadow-sm">
+        <h3 className="mb-3 text-sm font-medium">Completion Settings</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <label className="text-sm font-medium">Enable Completions</label>
+              <p className="text-xs text-gray-600">
+                Allow AI to suggest completions while typing
+              </p>
+            </div>
+            <Switch
+              checked={editContext?.enableCompletions || false}
+              onCheckedChange={(checked: boolean) =>
+                editContext?.setEnableCompletions(checked)
+              }
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Page Context Section */}
+      <div className="rounded-lg border bg-white p-4 shadow-sm">
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="text-sm font-medium">Page Context</h3>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={refreshPageContext}
+            disabled={isGeneratingContext}
+          >
+            {isGeneratingContext ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : (
+              <RefreshCw className="h-3 w-3 stroke-1" />
+            )}
+          </Button>
+        </div>
+
+        {isGeneratingContext ? (
+          <div className="flex items-center gap-2 text-gray-500">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className="text-sm">Generating context...</span>
+          </div>
+        ) : pageContext ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <FileText className="h-4 w-4 stroke-1 text-blue-500" />
+              <span className="text-sm font-medium">
+                {pageContext.pageTitle}
+              </span>
+              <Badge variant="outline" className="text-xs">
+                {pageContext.pageType}
+              </Badge>
+            </div>
+            <p className="text-xs leading-relaxed text-gray-600">
+              {pageContext.abstract}
+            </p>
+            <div className="text-xs text-gray-400">
+              Generated: {pageContext.lastGenerated.toLocaleTimeString()}
+            </div>
+          </div>
+        ) : (
+          <div className="py-4 text-center text-gray-500">
+            <FileText className="mx-auto mb-2 h-6 w-6 opacity-50" />
+            <p className="text-sm">No context available</p>
+          </div>
+        )}
+      </div>
+
+      {/* Keyboard Shortcuts */}
+      <div className="rounded-lg border bg-white p-4 shadow-sm">
+        <h3 className="mb-3 text-sm font-medium">Keyboard Shortcuts</h3>
+        <div className="space-y-1">
+          <div className="flex justify-between text-xs">
+            <span>Apply completion</span>
+            <kbd className="rounded bg-gray-100 px-2 py-1 text-gray-600">
+              Tab
+            </kbd>
+          </div>
+          <div className="flex justify-between text-xs">
+            <span>Request completion</span>
+            <kbd className="rounded bg-gray-100 px-2 py-1 text-gray-600">
+              Ctrl+Space
+            </kbd>
+          </div>
+          <div className="flex justify-between text-xs">
+            <span>Dismiss completion</span>
+            <kbd className="rounded bg-gray-100 px-2 py-1 text-gray-600">
+              Esc
+            </kbd>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/sidebar/Validation.tsx

@@ -15,7 +15,7 @@ export function Validation() {
       ...y,
       language: x.item.language,
       version: x.item.version,
-    }))
+    })),
   );
 
   if (!validationResults) return null;
@@ -26,7 +26,7 @@ export function Validation() {
       validationResult.language +
       validationResult.version;
     return (
-      <div className="flex gap-2 items-center">
+      <div className="flex items-center gap-2">
         <span
           className={`name-tooltip-${id} break-all`}
           style={{ position: "relative" }}
@@ -55,7 +55,7 @@ export function Validation() {
 
   if (validationResults.length === 0) {
     return (
-      <div className="text-gray-600 text-sm text-center p-4">
+      <div className="text-gray-2 p-4 text-center text-xs">
         No validation results
       </div>
     );
@@ -64,7 +64,7 @@ export function Validation() {
   return (
     <div>
       {editContext?.validating && (
-        <div className="text-center p-3">
+        <div className="p-3 text-center">
           <ProgressSpinner style={{ width: "20px", height: "20px" }} />
         </div>
       )}
@@ -78,21 +78,20 @@ export function Validation() {
               language: data.item.language,
               version: data.item.version,
             };
-            const item = await editContext?.itemsRepository.getItem(
-              itemDescriptor
-            );
+            const item =
+              await editContext?.itemsRepository.getItem(itemDescriptor);
             if (!item || !editContext) return;
             editContext.setCenterPanelView(
               editContext.configuration.editor.views.find(
-                (x) => x.name === "content-editor"
-              )?.defaultCenterPanelView
+                (x) => x.name === "content-editor",
+              )?.defaultCenterPanelView,
             );
             editContext.setFocusedField(
               {
                 item: itemDescriptor,
                 fieldId: data.item.fieldId,
               },
-              true
+              true,
             );
           }}
         ></SimpleTable>

package/src/editor/ui/PerfectTree.tsx

@@ -495,7 +495,7 @@ const NodeContent = memo(
     const renderToggle = () => {
       if (node.hasChildren && node.children === null) {
         return (
-          <div className="flex h-[24px] w-[26px] items-center justify-center">
+          <div className="flex h-[23x] w-[24px] items-center justify-center">
             <ProgressSpinner
               style={{ width: "16px", height: "16px" }}
               className="text-gray-500"
@@ -511,7 +511,7 @@ const NodeContent = memo(
             isExpanded ? "rotate-90" : "rotate-0"
           }`}
         >
-          <ChevronRight strokeWidth={1} className="h-6 w-6" />
+          <ChevronRight strokeWidth={1} className="h-5.5 w-5.5" />
         </span>
       );
     };
@@ -588,6 +588,22 @@ export const PerfectTree = <T,>({
   // When toggling a node, notify parent and trigger external lazy load if needed.
   const handleToggle = useCallback(
     (node: TreeNode<T>) => {
+      const isCurrentlyExpanded = expandedKeys.includes(node.key);
+
+      // If the node is being expanded (not collapsed), clear the search filter and select the node
+      if (!isCurrentlyExpanded) {
+        setSearchTerm("");
+        // Clear any pending search timeout
+        if (searchTimeoutRef.current) {
+          clearTimeout(searchTimeoutRef.current);
+          searchTimeoutRef.current = null;
+        }
+        // Select the node being expanded for quick navigation
+        if (onSelect) {
+          onSelect(node.key, {} as React.MouseEvent);
+        }
+      }
+
       if (onToggleExpand) {
         onToggleExpand(node.key);
       }
@@ -597,7 +613,7 @@ export const PerfectTree = <T,>({
         onLazyLoad(node);
       }
     },
-    [onToggleExpand, onLazyLoad],
+    [onToggleExpand, onLazyLoad, expandedKeys, onSelect],
   );
 
   const handleSelect = useCallback(

package/src/editor/ui/SimpleTabs.tsx

@@ -13,11 +13,13 @@ export function SimpleTabs({
   setActiveTab,
   activeTab,
   className,
+  tabClassName,
 }: {
   tabs: Tab[];
   setActiveTab: (index: number) => void;
   activeTab: number;
   className?: string;
+  tabClassName?: string;
 }) {
   if (activeTab > tabs.length - 1) {
     activeTab = 0;
@@ -36,7 +38,8 @@ export function SimpleTabs({
           <button
             id={tab.id}
             className={twMerge(
-              "flex min-w-0 flex-shrink cursor-pointer items-center gap-2 px-3 pb-2 whitespace-nowrap",
+              "min-w-0 flex-shrink cursor-pointer items-center px-3 pb-2 whitespace-nowrap",
+              tabClassName,
               activeTab === index ? "active-tab" : "",
             )}
             key={tab.id}

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3978";
-export const buildDate = "2025-07-04 09:07:40";
+export const version = "1.0.3980";
+export const buildDate = "2025-07-07 01:46:37";

package/src/types.ts

@@ -192,6 +192,7 @@ export type UserBrowseHistoryEntry = {
   sessionId?: string;
   itemPath: string;
   itemName: string;
+  icon?: string;
 };
 
 export type FieldHistoryItem = {

package/dist/editor/menubar/BrowseHistory.d.ts

@@ -1,6 +0,0 @@
-import { ItemDescriptor } from "../pageModel";
-import { ResultItem } from "../ui/ItemSearch";
-export declare function BrowseHistory({ setHoveredItem, itemSelected, }: {
-    setHoveredItem: (item: ResultItem | undefined) => void;
-    itemSelected: (item: ItemDescriptor) => void;
-}): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/editor/menubar/BrowseHistory.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEditContext } from "../client/editContext";
-import { ItemList } from "../ui/ItemList";
-export function BrowseHistory({ setHoveredItem, itemSelected, }) {
-    const editContext = useEditContext();
-    if (!editContext)
-        return;
-    const history = editContext.browseHistory;
-    return (_jsx(ItemList, { items: history, onItemHover: setHoveredItem, onItemClick: itemSelected, maxItems: 20 }));
-}
-//# sourceMappingURL=BrowseHistory.js.map

package/dist/editor/menubar/BrowseHistory.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BrowseHistory.js","sourceRoot":"","sources":["../../../src/editor/menubar/BrowseHistory.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,UAAU,aAAa,CAAC,EAC5B,cAAc,EACd,YAAY,GAIb;IACC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,IAAI,CAAC,WAAW;QAAE,OAAO;IAEzB,MAAM,OAAO,GAAG,WAAW,CAAC,aAAa,CAAC;IAE1C,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,cAAc,EAC3B,WAAW,EAAE,YAAY,EACzB,QAAQ,EAAE,EAAE,GACZ,CACH,CAAC;AACJ,CAAC"}

package/src/editor/menubar/BrowseHistory.tsx

@@ -1,28 +0,0 @@
-import { useEditContext } from "../client/editContext";
-
-import { ItemDescriptor } from "../pageModel";
-import { ResultItem } from "../ui/ItemSearch";
-import { ItemList } from "../ui/ItemList";
-
-export function BrowseHistory({
-  setHoveredItem,
-  itemSelected,
-}: {
-  setHoveredItem: (item: ResultItem | undefined) => void;
-  itemSelected: (item: ItemDescriptor) => void;
-}) {
-  const editContext = useEditContext();
-
-  if (!editContext) return;
-
-  const history = editContext.browseHistory;
-
-  return (
-    <ItemList
-      items={history}
-      onItemHover={setHoveredItem}
-      onItemClick={itemSelected}
-      maxItems={20}
-    />
-  );
-}