@alpaca-editor/core 1.0.3956 → 1.0.3960

package/src/editor/reviews/SuggestedEdit.tsx

@@ -29,7 +29,7 @@ export function SuggestedEditComponent({ edit }: { edit: SuggestedEditType }) {
   const [ignoreFormatting, setIgnoreFormatting] = useState(true);
   const [clipUnchanged, setClipUnchanged] = useState(true);
 
-  const canApply = editContext?.mode === "edit" && edit.status !== "Applied";
+  const canApply = editContext?.mode === "edit" && edit.status !== "applied";
 
   // Load the full item from the repository.
   useEffect(() => {
@@ -247,7 +247,7 @@ export function SuggestedEditComponent({ edit }: { edit: SuggestedEditType }) {
       refresh: "immediate",
     });
     // Update the suggestion status to "Applied" and persist the update.
-    edit.status = "Applied";
+    edit.status = "applied";
     await createOrUpdateSuggestedEdit(edit);
     setApplied(true);
     setPatchWarning("");
@@ -269,7 +269,7 @@ export function SuggestedEditComponent({ edit }: { edit: SuggestedEditType }) {
       rawValue: edit.newValue,
       refresh: "immediate",
     });
-    edit.status = "Applied";
+    edit.status = "applied";
     await createOrUpdateSuggestedEdit(edit);
     setApplied(true);
     setPatchWarning("");

package/src/editor/services/contentService.ts

@@ -178,3 +178,31 @@ export async function getContentEditorWarnings(item: ItemDescriptor) {
   }
   return [];
 }
+
+export type ExportItemsRequest = {
+  items: ItemDescriptor[];
+  versionOption: "latest" | "all";
+};
+
+export type ExportItemsResult = {
+  yaml: string;
+  itemCount: number;
+};
+
+export type ImportItemsRequest = {
+  targetItem: ItemDescriptor;
+  yaml: string;
+};
+
+export type ImportItemsResult = {
+  createdItems: ItemDescriptor[];
+  itemCount: number;
+};
+
+export async function exportItems(request: ExportItemsRequest) {
+  return await post<ExportItemsResult>("/alpaca/editor/exportItems", request);
+}
+
+export async function importItems(request: ImportItemsRequest) {
+  return await post<ImportItemsResult>("/alpaca/editor/importItems", request);
+}

package/src/editor/services/editService.ts

@@ -452,6 +452,18 @@ export async function getUserInfo(): Promise<UserInfo> {
   return await response.json();
 }
 
+export type ItemVisitor = {
+  userName: string;
+  visitedAt: string; // ISO date string
+};
+
+export async function getItemVisitors(
+  item: ItemDescriptor,
+): Promise<ExecutionResult<ItemVisitor[]>> {
+  const url = `/alpaca/editor/ItemVisitors?itemId=${item.id}&language=${item.language}&version=${item.version}`;
+  return get<ItemVisitor[]>(url);
+}
+
 export async function executeMoveItems(
   items: ItemDescriptor[],
   target: ItemDescriptor,

package/src/editor/services/systemService.ts

@@ -1,5 +1,8 @@
-import { get } from "./serviceHelper";
-import { SystemStatus } from "../../types";
+import { get, post } from "./serviceHelper";
+import { SystemStatus, UserPreferences } from "../../types";
 export function getSystemStatus() {
   return get<SystemStatus>("/alpaca/editor/status");
 }
+export function saveUserPreferences(preferences: UserPreferences) {
+  return post<UserPreferences>("/alpaca/editor/savepreferences", preferences);
+}

package/src/editor/sidebar/ComponentTree.tsx

@@ -102,8 +102,12 @@ export function ComponentTree({}) {
       data: p,
       parent: parent,
       type: "placeholder",
+      className: !p.editable ? "text-gray-400" : "",
+      tags: [],
     };
+
     node.children = p.components.map((c) => mapComponentNode(c, node));
+
     return node;
   }
 
@@ -111,16 +115,27 @@ export function ComponentTree({}) {
     c: Component,
     parent: CustomTreeNode,
   ): CustomTreeNode[] {
-    if (!c?.placeholders) return [];
-
-    // Filter out non-editable placeholders
-    const editablePlaceholders = c.placeholders.filter((p) => p.editable);
-    if (editablePlaceholders.length > 1)
-      return editablePlaceholders.map((x) => mapPlaceholderNode(x, parent));
-    else if (editablePlaceholders.length > 0) {
-      return editablePlaceholders[0]!.components.map((c) =>
-        mapComponentNode(c, parent),
-      );
+    if (!c?.placeholders) {
+      return [];
+    }
+
+    // Show all placeholders (both editable and non-editable)
+    const allPlaceholders = c.placeholders;
+
+    if (allPlaceholders.length > 1) {
+      return allPlaceholders.map((x) => mapPlaceholderNode(x, parent));
+    } else if (allPlaceholders.length > 0) {
+      const placeholder = allPlaceholders[0]!;
+      // For single placeholders, always map the components directly (don't show placeholder node)
+      return placeholder.components.map((c) => {
+        const componentNode = mapComponentNode(c, parent);
+        // Apply gray styling to components in non-editable placeholders
+        if (!placeholder.editable) {
+          componentNode.className =
+            (componentNode.className || "") + " text-gray-400";
+        }
+        return componentNode;
+      });
     }
     return [];
   }
@@ -134,6 +149,8 @@ export function ComponentTree({}) {
       componentId: c.id,
       label: c.name,
       icon: c.datasourceItem?.icon ? (
+        <img src={c.datasourceItem.icon} width={16} height={16} />
+      ) : c.icon ? (
         <img src={c.icon} width={16} height={16} />
       ) : (
         "pi pi-stop"
@@ -237,6 +254,7 @@ export function ComponentTree({}) {
       children: [],
       type: "placeholder",
     });
+
     const dict: { [key: string]: CustomTreeNode } = {};
     createMap(treeNodes, dict);
 
@@ -248,7 +266,9 @@ export function ComponentTree({}) {
       type: "other",
     };
 
-    if (otherNode.children?.length) treeNodes.push(otherNode);
+    if (otherNode.children?.length) {
+      treeNodes.push(otherNode);
+    }
 
     const pageNode: CustomTreeNode = {
       key: "page",
@@ -259,7 +279,9 @@ export function ComponentTree({}) {
       type: "page",
     };
 
-    setRootNodes([pageNode, ...treeNodes]);
+    const finalNodes = [pageNode, ...treeNodes];
+
+    setRootNodes(finalNodes);
     setNodeDictionary(dict);
   }, [page]);
 

package/src/editor/sidebar/Divider.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+interface DividerProps {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+}
+
+export function Divider({
+  className,
+  orientation = "horizontal",
+}: DividerProps) {
+  return (
+    <div
+      className={cn(
+        "border-gray-3",
+        orientation === "horizontal" ? "w-full border-b" : "h-full border-r",
+        className,
+      )}
+    />
+  );
+}

package/src/editor/sidebar/LeftToolbar.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+import { DashboardIcon } from "../ui/Icons";
+import { useEditContext } from "../client/editContext";
+import { ViewSelector } from "./ViewSelector";
+import { Divider } from "./Divider";
+
+export function LeftToolbar() {
+  const editContext = useEditContext();
+  const showViewNames =
+    editContext?.userInfo.preferences?.showViewNames ?? false;
+  return (
+    <div
+      className={cn(
+        "border-gray-4 flex items-center gap-3 border-r bg-white p-2",
+        editContext?.isMobile
+          ? "scrollbar-hide flex-row overflow-x-auto"
+          : `flex-col ${showViewNames ? "w-18" : "w-11"}`,
+      )}
+    >
+      {/* Dashboard/Home button */}
+      <a
+        className="cursor-pointer rounded-sm bg-gradient-to-r from-blue-500 to-purple-500 transition-all hover:scale-105 hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600"
+        onClick={() => {
+          editContext?.switchView("splash-screen");
+        }}
+      >
+        <DashboardIcon />
+      </a>
+
+      <Divider />
+
+      <ViewSelector />
+    </div>
+  );
+}

package/src/editor/sidebar/SEOInfo.tsx

@@ -0,0 +1,265 @@
+import { useState } from "react";
+import { Button } from "primereact/button";
+import { Divider } from "primereact/divider";
+import { useEditContext } from "../client/editContext";
+
+interface SEOData {
+  title?: string;
+  description?: string;
+  keywords?: string[];
+  url?: string;
+  isAnalyzing?: boolean;
+  lastAnalyzed?: Date;
+}
+
+export function SEOInfo() {
+  const [seoData, setSeoData] = useState<SEOData>({});
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const editContext = useEditContext();
+
+  const runSEOAnalysis = async () => {
+    if (!editContext) {
+      console.error("No edit context available");
+      return;
+    }
+
+    setIsAnalyzing(true);
+
+    try {
+      // Get current page content for analysis
+
+      const item = editContext.item || editContext.contentEditorItem;
+
+      console.log("Starting SEO Analysis...", { item });
+
+      // Extract title and description from page fields if available
+      const titleField = item?.fields?.find((f) =>
+        f.name?.toLowerCase().includes("title"),
+      );
+      const descriptionField = item?.fields?.find(
+        (f) =>
+          f.name?.toLowerCase().includes("description") ||
+          f.name?.toLowerCase().includes("summary"),
+      );
+
+      // Update SEO data immediately with current content (this makes the button responsive)
+      const currentTitle = (titleField?.value as string) || item?.name || "";
+      const currentDescription = (descriptionField?.value as string) || "";
+      const currentUrl = item?.path || "";
+
+      setSeoData({
+        title: currentTitle,
+        description: currentDescription,
+        keywords: [], // Will be populated by AI analysis
+        url: currentUrl,
+        lastAnalyzed: new Date(),
+      });
+
+      console.log("Updated SEO data with current content:", {
+        title: currentTitle,
+        description: currentDescription,
+        url: currentUrl,
+      });
+
+      // Show immediate feedback
+      editContext.showToast({
+        severity: "info",
+        summary: "SEO Analysis Started",
+        detail: "Analyzing current page content...",
+      });
+
+      // Try to send AI analysis request
+      const aiServiceUrl =
+        editContext.configuration.services.aiService.promptUrl;
+      console.log("AI Service URL:", aiServiceUrl);
+
+      if (!aiServiceUrl) {
+        throw new Error("AI service URL not configured");
+      }
+
+      // Prepare SEO optimization prompt in correct message format
+      const seoPrompt = `Analyze the current page for SEO optimization and provide specific recommendations.
+
+Current page details:
+- Page: ${item?.name || "Unknown"}
+- Path: ${item?.path || "Unknown"}  
+- Title: ${currentTitle || "No title found"}
+- Description: ${currentDescription || "No description found"}
+
+Please analyze and provide:
+1. Title optimization suggestions (should be 50-60 characters)
+2. Meta description recommendations (120-155 characters)
+3. Keyword analysis and suggestions
+4. Content structure improvements
+5. Overall SEO recommendations
+
+Focus on actionable insights for improving search engine visibility.`;
+
+      // Format as proper message for AI service
+      const messages = [
+        {
+          id: Date.now(),
+          content: seoPrompt,
+          role: "user",
+          name: "user",
+        },
+      ];
+
+      // Send to AI service using correct format
+      const response = await fetch(aiServiceUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          profileId: "Editor", // Use default editor profile
+          messages: messages,
+          selection: editContext.selection || [],
+          addSelectedComponents: true,
+          selectedText: null,
+          model: null, // Let AI service use default model
+          sessionId: null,
+          itemid: editContext.currentItemDescriptor?.id,
+          language: editContext.currentItemDescriptor?.language,
+          version: editContext.currentItemDescriptor?.version,
+        }),
+      });
+
+      console.log("AI Service Response:", response.status, response.statusText);
+
+      if (response.ok) {
+        // Handle streaming response like the AI terminal does
+        if (response.body) {
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = "";
+
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split("\n");
+
+            if (lines.length > 0) {
+              buffer = lines.pop() || "";
+
+              for (let line of lines) {
+                if (line.trim() === "") continue;
+
+                try {
+                  const jsonData = JSON.parse(line);
+                  console.log("AI Response chunk:", jsonData);
+
+                  // The AI response contains messages - this will show up in the comments panel
+                  if (jsonData.messages && jsonData.messages.length > 0) {
+                    // Final response received
+                    console.log("Final AI response:", jsonData);
+                  }
+                } catch (e) {
+                  console.error("Error parsing AI response line:", line, e);
+                }
+              }
+            }
+          }
+
+          // Process any remaining buffer content
+          if (buffer.trim() !== "") {
+            try {
+              const jsonData = JSON.parse(buffer);
+              console.log("Final AI buffer:", jsonData);
+            } catch (e) {
+              console.error("Error parsing final buffer:", e);
+            }
+          }
+        }
+
+        // Show success message
+        editContext.showToast({
+          severity: "success",
+          summary: "SEO Analysis Complete",
+          detail:
+            "AI analysis completed. Check the Comments panel for SEO recommendations.",
+        });
+      } else {
+        const errorText = await response.text();
+        throw new Error(
+          `AI service responded with ${response.status}: ${errorText}`,
+        );
+      }
+    } catch (error) {
+      console.error("SEO analysis failed:", error);
+      editContext.showToast({
+        severity: "warn",
+        summary: "SEO Analysis Partial",
+        detail: "Current page data extracted. AI analysis unavailable.",
+      });
+    } finally {
+      setIsAnalyzing(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      {/* Analysis Button */}
+      <Button
+        label="Run SEO Analysis"
+        icon="pi pi-search"
+        onClick={runSEOAnalysis}
+        loading={isAnalyzing}
+        className="w-full"
+        severity="success"
+      />
+
+      <Divider />
+
+      {/* SEO Information */}
+      <div className="space-y-3">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Page Title
+          </label>
+          <div className="rounded bg-gray-50 p-2 text-sm text-gray-600">
+            {seoData.title || "No title detected"}
+          </div>
+          {seoData.title && (
+            <div className="mt-1 text-xs text-gray-500">
+              Length: {seoData.title.length}/60 characters
+            </div>
+          )}
+        </div>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Meta Description
+          </label>
+          <div className="rounded bg-gray-50 p-2 text-sm text-gray-600">
+            {seoData.description || "No description detected"}
+          </div>
+          {seoData.description && (
+            <div className="mt-1 text-xs text-gray-500">
+              Length: {seoData.description.length}/155 characters
+            </div>
+          )}
+        </div>
+
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Keywords
+          </label>
+          <div className="rounded bg-gray-50 p-2 text-sm text-gray-600">
+            {seoData.keywords && seoData.keywords.length > 0
+              ? seoData.keywords.join(", ")
+              : "No keywords detected"}
+          </div>
+        </div>
+
+        {seoData.lastAnalyzed && (
+          <div className="border-t pt-2 text-xs text-gray-500">
+            Last analyzed: {seoData.lastAnalyzed.toLocaleString()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/editor/sidebar/Sidebar.tsx

@@ -15,6 +15,7 @@ export function Sidebar() {
       sidebar={view.leftSidebar}
       editContext={editContext}
       active={true}
+      onClose={() => editContext?.switchView("page-editor")}
     />
   );
 }