@alpaca-editor/core 1.0.4187 → 1.0.4190

package/src/splash-screen/ModernSplashScreen.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import React, { useState } from "react";
+import { useEditContext } from "../editor/client/editContext";
+import { AnimatedSunIcon } from "../editor/ui/Icons";
+import { ActionButton } from "../components/ActionButton";
+import { RecentPages } from "./RecentPages";
+import { ParheliaAssistantChat } from "./ParheliaAssistantChat";
+import { RecentAgents } from "./RecentAgents";
+import { Agent } from "../editor/services/agentService";
+import { FileText, FolderOpen, ExternalLink, Bot, Layers } from "lucide-react";
+
+/**
+ * Modern splash screen with clean design featuring:
+ * - Parhelia logo and branding
+ * - Functional AI assistant chat interface
+ * - Quick action buttons
+ * - Recent pages overview
+ */
+export function ModernSplashScreen() {
+  const editContext = useEditContext();
+  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
+
+  const handleSelectAgent = (agent: Agent) => {
+    setSelectedAgent(agent);
+  };
+
+  return (
+    <div className="relative flex h-screen w-full flex-col overflow-y-auto bg-gradient-to-br from-purple-50/30 via-pink-50/20 to-blue-50/30">
+      {/* Background decoration */}
+      <div className="bg-wizard absolute inset-0 opacity-20" />
+
+      {/* Main Content */}
+      <div className="relative z-10 flex flex-1 flex-col items-center px-4 py-8 md:py-12">
+        {/* Hero Section */}
+        <div className="mb-8 flex flex-col items-center gap-4 md:mb-12">
+          <div className="flex items-center gap-3">
+            <AnimatedSunIcon />
+            <h1 className="text-3xl font-extralight tracking-wide text-gray-900 md:text-4xl">
+              parhelia
+            </h1>
+          </div>
+          <p className="text-center text-sm text-gray-600 md:text-base">
+            Where brilliant ideas become brilliant content
+          </p>
+        </div>
+
+        {/* Chat Interface Section */}
+        <div className="mb-8 w-full max-w-3xl md:mb-12">
+          <ParheliaAssistantChat className="w-full" externalAgent={selectedAgent} />
+        </div>
+
+        {/* Recent Agents Section */}
+        <div className="mb-8 w-full max-w-3xl md:mb-12">
+          <RecentAgents onSelectAgent={handleSelectAgent} />
+        </div>
+
+        {/* Quick Actions Section */}
+        <div className="mb-8 w-full max-w-5xl md:mb-12">
+          <h2 className="mb-4 text-center text-sm font-medium text-gray-700">
+            Quick Actions
+          </h2>
+          <div className="grid grid-cols-2 gap-3 md:grid-cols-4 md:gap-4">
+            <ActionCard
+              icon={<FileText strokeWidth={1} />}
+              title="Create Page"
+              description="Start building"
+              onClick={() => editContext?.switchView("new-page")}
+              dataTestId="create-new-page-button"
+            />
+            <ActionCard
+              icon={<FolderOpen strokeWidth={1} />}
+              title="Open Page"
+              description="Browse content"
+              onClick={() => editContext?.switchView("open-page")}
+            />
+            <ActionCard
+              icon={<Bot strokeWidth={1} />}
+              title="My Agents"
+              description="AI assistants"
+              onClick={() => {
+                editContext?.switchView("agents-overview");
+                editContext?.setShowAgentsPanel?.(true);
+              }}
+            />
+            <ActionCard
+              icon={<ExternalLink strokeWidth={1} />}
+              title="Launchpad"
+              description="Sitecore tools"
+              onClick={() => {
+                window.open(
+                  "/sitecore/shell/sitecore/client/Applications/Launchpad",
+                  "_blank",
+                );
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Recent Pages Section */}
+        <div className="w-full max-w-5xl">
+          <RecentPages />
+        </div>
+
+        {/* Footer Actions */}
+        <div className="mt-8 flex flex-col gap-3 md:mt-12">
+          <ActionButton
+            variant="ghost"
+            onClick={() => {
+              editContext?.switchView("page-editor");
+            }}
+            className="text-gray-600 hover:text-gray-900"
+          >
+            <Layers strokeWidth={1} className="mr-2 h-4 w-4" />
+            Return to editor
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Action card component for quick actions grid
+ */
+interface ActionCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  onClick: () => void;
+  dataTestId?: string;
+}
+
+const ActionCard: React.FC<ActionCardProps> = ({
+  icon,
+  title,
+  description,
+  onClick,
+  dataTestId,
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      data-testid={dataTestId}
+      className="group flex flex-col items-center gap-3 rounded-lg bg-white p-6 shadow-sm transition-all duration-200 hover:scale-[1.02] hover:shadow-md active:scale-[0.98] md:p-8"
+    >
+      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-purple-100 to-pink-100 text-purple-600 transition-colors group-hover:from-purple-500 group-hover:to-pink-500 group-hover:text-white md:h-14 md:w-14">
+        {icon}
+      </div>
+      <div className="flex flex-col items-center gap-1">
+        <h3 className="text-sm font-semibold text-gray-900 md:text-base">
+          {title}
+        </h3>
+        <p className="text-xs text-gray-500">{description}</p>
+      </div>
+    </button>
+  );
+};

package/src/splash-screen/OpenPage.tsx

@@ -11,6 +11,7 @@ import { Logo, MagicEditIcon } from "../editor/ui/Icons";
 import { ActionButton } from "../components/ActionButton";
 import { RecentPages } from "./RecentPages";
 import { X, Network } from "lucide-react";
+import ItemSearch, { ResultItem } from "../editor/ui/ItemSearch";
 
 export function OpenPage() {
   const savedHistory =
@@ -25,6 +26,7 @@ export function OpenPage() {
     : [];
 
   const [isLoading, setIsLoading] = useState(false);
+  const [hoveredItem, setHoveredItem] = useState<ResultItem>();
 
   useEffect(() => {
     if (recentPages.length > 0 && recentPages[0])
@@ -95,10 +97,16 @@ export function OpenPage() {
               noPadding
               className="h-full"
             >
-              <div className="h-full px-4">
-                <div className="relative h-full">
-                  <ScrollingContentTree
-                    selectedItemId={selectedPage?.id}
+              <div className="flex h-full flex-col gap-2 px-4 py-2">
+                <ItemSearch
+                  setHoveredItem={setHoveredItem}
+                  itemSelected={(item) => {
+                    loadItem(item);
+                  }}
+                />
+                <div className="relative flex-1">
+                  <ScrollingContentTree                    
+                    selectedItemId={hoveredItem?.id ?? selectedPage?.id}
                     hideRootNodes={true}
                     onSelectionChange={(selection) => {
                       const selectedItem = selection[0];

package/src/splash-screen/ParheliaAssistantChat.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, startTransition, ViewTransition } from "react";
+import { Loader2, RotateCcw, MessageSquare, X } from "lucide-react";
+import { useEditContext } from "../editor/client/editContext";
+import { AiProfile, loadAiProfiles } from "../editor/services/aiService";
+import { Agent, getActiveAgents, closeAgent } from "../editor/services/agentService";
+import { AgentTerminal } from "../editor/ai/AgentTerminal";
+import { cn } from "../lib/utils";
+import { Button } from "../components/ui/button";
+
+interface ParheliaAssistantChatProps {
+  className?: string;
+  externalAgent?: Agent | null;
+}
+
+export const ParheliaAssistantChat: React.FC<ParheliaAssistantChatProps> = ({
+  className,
+  externalAgent,
+}) => {
+  const editContext = useEditContext();
+  const [profile, setProfile] = useState<AiProfile | null>(null);
+  const [profiles, setProfiles] = useState<AiProfile[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [agent, setAgent] = useState<Agent | null>(null);
+  const [agentKey, setAgentKey] = useState(0); // Force re-render of AgentTerminal
+  const [isTerminalVisible, setIsTerminalVisible] = useState(false);
+
+  // Create a new agent
+  const createNewAgent = useCallback((selectedProfile: AiProfile) => {
+    const agentDisplayName = selectedProfile.agentName || "Parhelia";
+    const agentId = crypto.randomUUID();
+
+    const newAgent: Agent = {
+      status: "new",
+      id: agentId,
+      name: agentDisplayName,
+      updatedDate: new Date().toISOString(),
+      userId: "",
+      profileId: selectedProfile.id,
+      profileName: selectedProfile.name,
+    };
+
+    setAgent(newAgent);
+    return newAgent;
+  }, []);
+
+  // Load AI profiles on mount
+  useEffect(() => {
+    const loadProfile = async () => {
+      try {
+        setIsLoading(true);
+        const profileList = await loadAiProfiles();
+
+        // Try to find Parhelia profile with multiple strategies
+        let assistantProfile: AiProfile | undefined;
+
+        // Strategy 1: Look for exact ID match
+        assistantProfile = profileList.find(
+          (p) => p.id === "7d45ab97-f253-4915-8b32-f9e8c762c5e9",
+        );
+
+        // Strategy 2: Look for exact name match (case-insensitive)
+        if (!assistantProfile) {
+          assistantProfile = profileList.find(
+            (p) => p.name.toLowerCase() === "parhelia",
+          );
+        }
+
+        // Strategy 3: Look for profile containing "parhelia" in name or displayTitle
+        if (!assistantProfile) {
+          assistantProfile = profileList.find(
+            (p) =>
+              p.name.toLowerCase().includes("parhelia") ||
+              p.displayTitle?.toLowerCase().includes("parhelia"),
+          );
+        }
+
+        // Strategy 4: Fallback to first available profile
+        const selectedProfile = assistantProfile || profileList[0];
+
+        if (selectedProfile) {
+          setProfile(selectedProfile);
+          setProfiles(profileList);
+
+          // Try to find latest idle Parhelia agent
+          try {
+            const response = await getActiveAgents({ limit: 50 });
+
+            // Filter for Parhelia agents (by profileId) that are idle/completed
+            // Exclude agents that are "running" (1) or "waitingForApproval" (2) to avoid showing stuck dancing dots
+            const parheliaAgents = response.agents.filter(
+              (a) =>
+                a.profileId === selectedProfile.id &&
+                a.status !== "running" &&
+                a.status !== 1 &&
+                a.status !== "waitingForApproval" &&
+                a.status !== 2,
+            );
+
+            if (parheliaAgents.length > 0 && parheliaAgents[0]) {
+              // Use the most recent idle agent (agents are typically ordered by updatedDate)
+              const latestAgent = parheliaAgents[0];
+              setAgent(latestAgent);
+              // Show terminal immediately for existing agents
+              setIsTerminalVisible(true);
+            } else {
+              // No existing idle agent, create new one
+              createNewAgent(selectedProfile);
+              // Terminal stays hidden for new agents
+            }
+          } catch (err) {
+            // Failed to fetch active agents, create new one
+            createNewAgent(selectedProfile);
+          }
+        }
+      } catch (err) {
+        console.error("Failed to load AI profile:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadProfile();
+  }, [createNewAgent]);
+
+  // Handle external agent selection
+  useEffect(() => {
+    if (externalAgent) {
+      setAgent(externalAgent);
+      setAgentKey((prev) => prev + 1);
+      setIsTerminalVisible(true);
+    }
+  }, [externalAgent]);
+
+  // Handle revealing the terminal when user clicks into chat
+  const handleRevealTerminal = useCallback(() => {
+    startTransition(() => {
+      setIsTerminalVisible(true);
+    });
+  }, []);
+
+  // Handle start over
+  const handleStartOver = useCallback(async () => {
+    if (!profile || !agent) return;
+
+    try {
+      // Close the current agent first
+      await closeAgent(agent.id);
+    } catch (error) {
+      console.error("Failed to close agent:", error);
+      // Continue anyway to create new agent
+    }
+
+    // Create new agent and force re-render
+    createNewAgent(profile);
+    setAgentKey((prev) => prev + 1);
+    // Keep terminal visible when starting over
+  }, [profile, agent, createNewAgent]);
+
+  // Handle close
+  const handleClose = useCallback(async () => {
+    if (!agent) return;
+
+    try {
+      await closeAgent(agent.id);
+    } catch (error) {
+      console.error("Failed to close agent:", error);
+    }
+
+    // Hide the terminal
+    setIsTerminalVisible(false);
+  }, [agent]);
+
+  if (isLoading) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-lg bg-white p-8 shadow-md",
+          className,
+        )}
+      >
+        <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
+      </div>
+    );
+  }
+
+  if (!agent || !profile) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-lg bg-white p-8 shadow-md",
+          className,
+        )}
+      >
+        <p className="text-sm text-gray-500">
+          Assistant unavailable. Please try again later.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+    onClick={handleRevealTerminal}
+      className={cn(
+        "flex flex-col overflow-hidden rounded-lg bg-white shadow-md",
+        !isTerminalVisible && "cursor-pointer",
+        className,
+      )}
+    >
+      {/* Header with Start Over and Close buttons */}
+      <div className="flex items-center justify-between border-b border-gray-200 px-4 py-2">
+        <div className="text-sm font-medium text-gray-700">
+          Chat with {agent.name || profile.agentName || "Parhelia"}
+        </div>
+        {isTerminalVisible && (
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleStartOver}
+              className="h-7 gap-1.5 text-xs"
+            >
+              <RotateCcw className="h-3.5 w-3.5" strokeWidth={1} />
+              Start Over
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClose}
+              className="h-7 w-7 p-0"
+              aria-label="Close"
+            >
+              <X className="h-4 w-4" strokeWidth={1.5} />
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Agent Terminal or Placeholder */}
+      <div className="flex-1 overflow-hidden">
+        {isTerminalVisible && (
+          
+          <ViewTransition enter="slide-fade-in">
+            <div className="h-[600px]">
+            <AgentTerminal
+            
+              key={agentKey}
+              agentStub={agent}
+              initialMetadata={{
+                profile: profile.name,
+                additionalData: {
+                  profileId: profile.id,
+                  profileName: profile.name,
+                },
+              }}
+              profiles={profiles}
+              isActive={true}
+              compact={true}
+              hideContext={true}
+              hideBottomControls={true}
+              hideGreeting={false}
+              className="h-full"
+              initialPrompt={agent.status === "new" ? "" : undefined}
+            />
+            </div>
+          </ViewTransition>
+        ) }
+      </div>
+    </div>
+  );
+};

package/src/splash-screen/RecentAgents.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { MessageSquare } from "lucide-react";
+import { AiProfile, loadAiProfiles } from "../editor/services/aiService";
+import { Agent, getAgentsGrouped } from "../editor/services/agentService";
+import { useEditContext } from "../editor/client/editContext";
+import { Button } from "../components/ui/button";
+
+interface RecentAgentsProps {
+  onSelectAgent?: (agent: Agent) => void;
+}
+
+export const RecentAgents: React.FC<RecentAgentsProps> = ({ onSelectAgent }) => {
+  const editContext = useEditContext();
+  const [agents, setAgents] = useState<Agent[]>([]);
+  const [profile, setProfile] = useState<AiProfile | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showExpanded, setShowExpanded] = useState(false);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setIsLoading(true);
+        
+        // Load Parhelia profile
+        const profileList = await loadAiProfiles();
+        let assistantProfile: AiProfile | undefined;
+        
+        assistantProfile = profileList.find(
+          (p) => p.id === "7d45ab97-f253-4915-8b32-f9e8c762c5e9",
+        );
+        
+        if (!assistantProfile) {
+          assistantProfile = profileList.find(
+            (p) => p.name.toLowerCase() === "parhelia",
+          );
+        }
+        
+        if (!assistantProfile) {
+          assistantProfile = profileList.find(
+            (p) =>
+              p.name.toLowerCase().includes("parhelia") ||
+              p.displayTitle?.toLowerCase().includes("parhelia"),
+          );
+        }
+        
+        const selectedProfile = assistantProfile || profileList[0] || null;
+        setProfile(selectedProfile);
+
+        // Fetch all agents (both active and closed) for this profile
+        if (selectedProfile) {
+          const response = await getAgentsGrouped();
+          
+          // Combine active agents with closed agents
+          const allAgents: Agent[] = [...response.activeAgents];
+          
+          // Add closed agents from all profiles
+          response.closedAgentsByProfile.forEach(group => {
+            allAgents.push(...group.agents);
+          });
+          
+          // Filter for Parhelia agents only
+          const parheliaAgents = allAgents.filter(
+            (a) => a.profileId === selectedProfile.id
+          );
+          
+          // Take the most recent 15 agents
+          setAgents(parheliaAgents.slice(0, 15));
+        }
+      } catch (err) {
+        console.error("Failed to load agents:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+  }, []);
+
+  const handleOpenAgent = (agent: Agent) => {
+    // Use the callback to set the selected agent in the parent component
+    if (onSelectAgent) {
+      onSelectAgent(agent);
+      // Scroll to the top to show the chat interface
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  const handleShowAll = () => {
+    editContext?.switchView("agents-overview");
+    editContext?.setShowAgentsPanel?.(true);
+  };
+
+  if (isLoading || agents.length === 0) {
+    return null;
+  }
+
+  // Show 3 agents by default, or 15 when expanded
+  const displayedAgents = showExpanded ? agents : agents.slice(0, 3);
+  const hasMoreAgents = agents.length > 3;
+
+  return (
+    <div className="w-full">
+      <h2 className="mb-3 text-center text-sm font-medium text-gray-700">
+        Recent Conversations
+      </h2>
+      <div className="space-y-1.5">
+        {displayedAgents.map((agent) => (
+          <button
+            key={agent.id}
+            onClick={() => handleOpenAgent(agent)}
+            className="flex w-full items-center gap-2 px-2 py-1.5 text-left transition-colors hover:bg-white/50 rounded"
+          >
+            <MessageSquare className="h-3.5 w-3.5 flex-shrink-0 text-gray-400" strokeWidth={1.5} />
+            <div className="flex-1 min-w-0">
+              <span className="text-xs text-gray-700 truncate block">
+                {agent.name}
+              </span>
+            </div>
+          </button>
+        ))}
+      </div>
+      
+      {hasMoreAgents && (
+        <div className="mt-3 flex gap-2">
+          {!showExpanded ? (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowExpanded(true)}
+              className="flex-1 text-xs"
+            >
+              Show More
+            </Button>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleShowAll}
+              className="flex-1 text-xs"
+            >
+              Show All
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+