@alpaca-editor/core 1.0.4065 → 1.0.4066

package/src/editor/ai/AiPromptPopover.tsx

@@ -1,206 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Sparkles, Send } from "lucide-react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../../components/ui/popover";
-import { Button } from "../../components/ui/button";
-import { Textarea } from "../../components/ui/textarea";
-import { useEditContext } from "../client/editContext";
-import { Component } from "../pageModel";
-import { startAgent, StartAgentRequest } from "../services/agentService";
-import { createEditorAiContext } from "./editorAiContext";
-
-interface AiPromptPopoverProps {
-  children: React.ReactNode;
-  components?: Component[];
-}
-
-export function AiPromptPopover({
-  children,
-  components = [],
-}: AiPromptPopoverProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [prompt, setPrompt] = useState("");
-  const editContext = useEditContext();
-
-  const handleSubmit = async () => {
-    if (!prompt.trim()) return;
-
-    // Close the popover
-    setIsOpen(false);
-
-    // Create comprehensive AI options with component context
-    let finalPrompt = prompt.trim();
-    let hiddenSystemPrompt: string | undefined;
-
-    if (components.length > 0) {
-      // Create detailed component context for the agent
-      const componentInfo = components
-        .map((comp) => {
-          const componentType = comp.type || comp.name || "Unknown";
-          const componentId = comp.id;
-          const hasContent = comp.items && comp.items.length > 0;
-
-          return `- ${componentType} (ID: ${componentId})${hasContent ? " with data" : " (empty)"}`;
-        })
-        .join("\n");
-
-      finalPrompt = `I'm working with the following ${components.length === 1 ? "component" : "components"}:
-${componentInfo}
-
-User request: ${prompt.trim()}`;
-
-      // Add hidden system prompt with component details for agent context
-      const componentDetails = components.map((comp) => ({
-        id: comp.id,
-        name: comp.name,
-        type: comp.type,
-        renderingId: comp.rendering?.id,
-        items: comp.items?.length || 0,
-        placeholder: comp.parentPlaceholder?.name,
-        isShared: comp.isShared,
-      }));
-
-      hiddenSystemPrompt = `Working with components: ${JSON.stringify(componentDetails, null, 2)}`;
-    }
-
-    try {
-      await startAgentExecution(finalPrompt, hiddenSystemPrompt);
-      // Switch to agents view after agent has been created so it appears on initial load
-      editContext?.switchView("agents");
-    } catch (error) {
-      console.error("Failed to start agent:", error);
-    }
-
-    // Reset the prompt
-    setPrompt("");
-  };
-
-  const startAgentExecution = async (
-    initialPrompt: string,
-    hiddenSystemPrompt?: string,
-  ) => {
-    if (!editContext) return;
-    if (!editContext.currentItemDescriptor?.id) {
-      console.error("Cannot start agent: no current item selected");
-      return;
-    }
-
-    const newAgentId = crypto.randomUUID();
-
-    const userMessage = {
-      id: crypto.randomUUID(),
-      content: initialPrompt,
-      role: "user",
-      name: "user",
-    };
-
-    const messages = [
-      ...(hiddenSystemPrompt
-        ? [
-            {
-              role: "system",
-              name: "system",
-              content: hiddenSystemPrompt,
-              id: crypto.randomUUID(),
-            },
-          ]
-        : []),
-      userMessage,
-    ];
-
-    const aiContext = createEditorAiContext({ editContext });
-
-    const startRequest: StartAgentRequest = {
-      agentId: newAgentId,
-      message: initialPrompt,
-      sessionId: editContext.sessionId,
-      profileId: "Editor",
-      itemid: editContext.currentItemDescriptor.id,
-      language: editContext.currentItemDescriptor?.language || "en",
-      version: editContext.currentItemDescriptor?.version || 1,
-      selection: components?.map((c) => c.id),
-      addSelectedComponents: components?.length > 0,
-      profile: "Editor",
-    };
-
-    await startAgent(startRequest);
-    // Agents view will reflect the new agent via its own refresh mechanisms
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  };
-
-  return (
-    <Popover
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      enableIframeClickDetection={false}
-    >
-      <PopoverTrigger asChild>{children}</PopoverTrigger>
-      <PopoverContent
-        className="w-96 p-4"
-        side="bottom"
-        align="start"
-        onMouseDown={(e) => e.stopPropagation()}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="space-y-3">
-          <div className="flex items-center gap-2">
-            <Sparkles size={16} strokeWidth={1} className="text-blue-500" />
-            <h3 className="font-medium">AI Assistant</h3>
-          </div>
-
-          <div className="space-y-2">
-            <label htmlFor="ai-prompt" className="text-sm text-gray-700">
-              What would you like AI to help you with?
-              {components.length > 0 && (
-                <span className="mt-1 block text-xs text-gray-500">
-                  Working with {components.length} selected component
-                  {components.length === 1 ? "" : "s"}
-                </span>
-              )}
-            </label>
-            <Textarea
-              id="ai-prompt"
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Enter your prompt here..."
-              className="mt-2 resize-none"
-              rows={3}
-              autoFocus
-            />
-          </div>
-
-          <div className="flex justify-end gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setIsOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              size="sm"
-              onClick={handleSubmit}
-              disabled={!prompt.trim()}
-              className="flex items-center gap-1"
-            >
-              <Send size={14} strokeWidth={1} />
-              Start Agent
-            </Button>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}