@alpaca-editor/core 1.0.4102 → 1.0.4104

package/src/editor/ai/AiTerminal.tsx

@@ -1,570 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-import { TerminalService } from "primereact/terminalservice";
-
-import { Terminal } from "../Terminal";
-import { EditContextType, useEditContext } from "../client/editContext";
-import { Dropdown } from "primereact/dropdown";
-
-import { WizardIcon } from "../ui/Icons";
-import { AiResponseMessage } from "./AiResponseMessage";
-import {
-  AiProfile,
-  loadAiProfiles,
-  executePrompt,
-} from "../services/aiService";
-import { EditOperation } from "../../types";
-import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Settings } from "lucide-react";
-
-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; // Changed from number to string for UUID support
-  content: string;
-  formattedContent?: string;
-  name: string;
-  role: string;
-  tool_calls?: ToolCall[];
-  tool_call_id?: string; // For tool response messages
-  createdDate?: string; // Timestamp from the original message
-};
-
-export type AiContext = {
-  promptData: any;
-  endpoint?: string;
-  callback?: (response: Response) => void;
-};
-
-export type AiTerminalOptions = {
-  initialPrompt?: string;
-  hiddenSystemPrompt?: string;
-  initialMessages?: Message[];
-};
-
-export function AiTerminal({
-  closeButton,
-  createAiContext,
-  defaultProfile,
-  options,
-}: {
-  closeButton?: React.ReactNode;
-  createAiContext: ({
-    editContext,
-  }: {
-    editContext: EditContextType;
-  }) => AiContext;
-  defaultProfile?: string;
-  options?: AiTerminalOptions;
-}) {
-  const editContext = useEditContext();
-  const [showPredefined, setShowPredefined] = useState(false);
-
-  if (!editContext) return null;
-
-  const [messages, setMessages] = useState<Message[]>(
-    options?.initialMessages || [],
-  );
-  const [response, setResponse] = useState<Response>();
-  const [model, setModel] = useState<string>();
-  const [prompt, setPrompt] = useState("");
-  const [profiles, setProfiles] = useState<AiProfile[]>([]);
-  const [activeProfile, setActiveProfile] = useState<AiProfile>();
-  const [initialPromptExecuted, setInitialPromptExecuted] = useState(false);
-  const [agentId] = useState<string>(() => crypto.randomUUID());
-  const selection = editContext.selection;
-  const terminalRef = useRef<{ submit: () => void; focusPrompt: () => void }>(
-    null,
-  );
-  const [responseMessages, setResponseMessages] = useState<Message[]>(
-    options?.initialMessages || [],
-  );
-  const [showSettings, setShowSettings] = useState(false);
-  const settingsRef = useRef<HTMLDivElement>(null);
-  const [inputPlaceholder, setInputPlaceholder] = useState<string | undefined>(
-    undefined,
-  );
-
-  useEffect(() => {
-    if (options?.initialPrompt && !initialPromptExecuted && model) {
-      // Set the initial prompt text into the terminal's state.
-      console.log("setting prompt", options.initialPrompt);
-      setPrompt(options.initialPrompt);
-      setInitialPromptExecuted(true);
-      // Wait for the Terminal to update, then programmatically submit.
-      setTimeout(() => {
-        terminalRef.current?.submit();
-      }, 100);
-    }
-  }, [options?.initialPrompt, initialPromptExecuted, model]);
-
-  useEffect(() => {
-    async function fetchProfiles() {
-      if (!editContext?.currentItemDescriptor) return;
-      const profiles = await loadAiProfiles(editContext.currentItemDescriptor);
-      setProfiles(profiles);
-      if (!activeProfile)
-        setActiveProfile(
-          profiles.find((x) => x.name == defaultProfile) || profiles[0],
-        );
-    }
-    fetchProfiles();
-  }, [editContext?.currentItemDescriptor]);
-
-  useEffect(() => {
-    if (activeProfile?.defaultModelId) setModel(activeProfile.defaultModelId);
-  }, [activeProfile]);
-
-  const messagesRef = useRef(messages);
-  useEffect(() => {
-    messagesRef.current = responseMessages;
-  }, [responseMessages]);
-
-  // State for initial messages to pass to Terminal
-  type TerminalMessage = {
-    text: React.ReactNode;
-    type: "command" | "response";
-  };
-  const [initialTerminalMessages, setInitialTerminalMessages] = useState<
-    TerminalMessage[] | undefined
-  >(undefined);
-
-  // Effect to set up initial messages for display
-  useEffect(() => {
-    if (options?.initialMessages && options.initialMessages.length > 0) {
-      console.log(
-        "AiTerminal: Loading initial messages",
-        options.initialMessages,
-      );
-
-      // Format the initial messages for display
-      const formattedMessages = options.initialMessages.map((message) => {
-        const formattedContent =
-          message.content
-            ?.trim()
-            ?.replaceAll("\n", "<br>")
-            ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") || "";
-
-        return {
-          ...message,
-          content: message.content || "",
-          formattedContent: formattedContent,
-          tool_calls: message.tool_calls || [],
-        };
-      });
-
-      console.log("AiTerminal: Formatted messages", formattedMessages);
-
-      // Update the internal message states
-      setMessages(formattedMessages);
-      setResponseMessages(formattedMessages);
-
-      // Create a response object for internal state
-      const initialResponse: Response = {
-        messages: formattedMessages,
-        editOperations: [],
-        numInputTokens: 0,
-        numOutputTokens: 0,
-        numCachedTokens: 0,
-        state: "loaded",
-      };
-
-      console.log("AiTerminal: Setting response", initialResponse);
-      setResponse(initialResponse);
-
-      // Create individual Terminal messages for each conversation message
-      const terminalMessages: TerminalMessage[] = [];
-
-      formattedMessages.forEach((message) => {
-        if (message.role === "user") {
-          // User messages appear as commands
-          terminalMessages.push({
-            type: "command",
-            text: message.content,
-          });
-        } else if (message.role === "assistant") {
-          // Assistant messages appear as responses
-          terminalMessages.push({
-            type: "response",
-            text: (
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: message.formattedContent || message.content || "",
-                }}
-              />
-            ),
-          });
-        }
-        // Add tool calls if present
-        if (message.tool_calls && message.tool_calls.length > 0) {
-          message.tool_calls.forEach((toolCall) => {
-            terminalMessages.push({
-              type: "response",
-              text: (
-                <div className="text-gray-1 text-xs">
-                  🔧 {toolCall.displayName}
-                </div>
-              ),
-            });
-          });
-        }
-      });
-
-      setInitialTerminalMessages(terminalMessages);
-    }
-  }, [options?.initialMessages]);
-
-  // Handle click outside for settings popover
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        settingsRef.current &&
-        !settingsRef.current.contains(event.target as Node)
-      ) {
-        setShowSettings(false);
-      }
-    }
-
-    if (showSettings) {
-      document.addEventListener("click", handleClickOutside);
-      return () => {
-        document.removeEventListener("click", handleClickOutside);
-      };
-    }
-  }, [showSettings]);
-
-  function handleResponse(
-    response: Response,
-    terminalCallback: (text: React.ReactNode, finished: boolean) => void,
-    isFinished: boolean,
-  ) {
-    const updatedMessages = response.messages;
-
-    // Replace the conversation history with the authoritative response from AI
-    if (updatedMessages && Array.isArray(updatedMessages)) {
-      const formattedMessages = updatedMessages.map((message) => {
-        const formattedContent =
-          message.content
-            ?.trim()
-            ?.replaceAll("\n", "<br>")
-            ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") || "";
-
-        return {
-          ...message,
-          content: message.content || "",
-          formattedContent: formattedContent,
-          tool_calls: message.tool_calls || [],
-        };
-      });
-
-      // Update the messages state with the complete conversation from AI
-      setMessages([...formattedMessages]);
-      setResponseMessages([...formattedMessages]);
-
-      terminalCallback(
-        <AiResponseMessage
-          messages={formattedMessages}
-          editOperations={response.editOperations}
-          finished={isFinished}
-          onQuickAction={(action) => {
-            const text = (
-              action.prompt ||
-              action.value ||
-              action.label ||
-              ""
-            ).trim();
-            if (!text) return;
-            if (action.behavior === "compose") {
-              setPrompt(text);
-              setInputPlaceholder(action.placeholder);
-              setTimeout(() => terminalRef.current?.focusPrompt(), 0);
-              return;
-            }
-            // Submit this as a new command
-            commandHandler(text, (node, done) => {
-              TerminalService.emit("response", node);
-              if (done) TerminalService.emit("response", undefined);
-            });
-          }}
-        />,
-        isFinished,
-      );
-    } else {
-      // Fallback: if no messages in response, keep current state
-      terminalCallback(
-        <AiResponseMessage
-          messages={messagesRef.current}
-          editOperations={response.editOperations}
-          finished={isFinished}
-          onQuickAction={(action) => {
-            const text = (
-              action.prompt ||
-              action.value ||
-              action.label ||
-              ""
-            ).trim();
-            if (!text) return;
-            if (action.behavior === "compose") {
-              setPrompt(text);
-              setInputPlaceholder(action.placeholder);
-              setTimeout(() => terminalRef.current?.focusPrompt(), 0);
-              return;
-            }
-            commandHandler(text, (node, done) => {
-              TerminalService.emit("response", node);
-              if (done) TerminalService.emit("response", undefined);
-            });
-          }}
-        />,
-        isFinished,
-      );
-    }
-  }
-
-  async function commandHandler(
-    text: string,
-    callback: (text: React.ReactNode, finished: boolean) => void,
-  ) {
-    const userMessage = {
-      id: crypto.randomUUID(), // Add unique id
-      content: text,
-      role: "user",
-      name: "user",
-      tool_calls: [], // Add empty toolCalls array
-    };
-
-    const context = createAiContext({ editContext: editContext! });
-
-    let lastOpIndex = 0;
-    const selectedText = editContext?.selectedRange?.text || null;
-    if (!activeProfile || !model) return;
-
-    // Build complete message history for API call
-    const conversationHistory = [...messagesRef.current, userMessage];
-    const shouldAddTodoFormat = /\b(to-?do|check\s*list|task\s*list)\b/i.test(
-      text,
-    );
-    const todoFormatInstructions =
-      "If you produce a to-do list, output it as a 'todo_list' JSON block. Prefer one of these two forms only, with no extra commentary before/after it: \n" +
-      '```todo_list\n{ "title": "<optional title>", "items": [ { "text": "<task>", "done": false, "note": "<optional>" } ] }\n```\n' +
-      "or a plain header: todo_list: { ... }. Include only fields: title (optional), items (array of {text, done?, note?}).";
-    const systemMessages = options?.hiddenSystemPrompt
-      ? [
-          {
-            role: "system",
-            name: "system",
-            content: options.hiddenSystemPrompt,
-            id: crypto.randomUUID(),
-            toolCalls: [],
-          },
-        ]
-      : [];
-    const todoSystem = shouldAddTodoFormat
-      ? [
-          {
-            role: "system",
-            name: "system",
-            content: todoFormatInstructions,
-            id: crypto.randomUUID(),
-            toolCalls: [],
-          },
-        ]
-      : [];
-    const messages = [...systemMessages, ...todoSystem, ...conversationHistory];
-
-    const response = await executePrompt(
-      messages,
-      context,
-      {
-        profileId: activeProfile.id,
-        selection,
-        selectedText,
-        model,
-        sessionId: editContext!.sessionId,
-        agentId,
-        addSelectedComponents: true,
-      },
-      undefined,
-      (response: any) => {
-        setResponse(response);
-        handleResponse(response, callback, false);
-      },
-    );
-
-    if (response) {
-      handleResponse(response, callback, true);
-      if (context.callback) context.callback(response);
-      editContext?.requestRefresh("immediate");
-    }
-
-    // if (response?.responseText)
-    //   newMessages.push({
-    //     content: response.responseText,
-    //     role: "assistant",
-    //     name: "assistant",
-    //   });
-
-    setResponse(response ? response : undefined);
-
-    // setMessages(newMessages);
-  }
-
-  useEffect(() => {
-    TerminalService.on("command", commandHandler);
-
-    return () => {
-      TerminalService.off("command", commandHandler);
-    };
-  }, []);
-
-  return (
-    <div
-      className="relative flex h-full flex-1 flex-col"
-      data-testid="ai-terminal"
-    >
-      <div className="relative flex-1">
-        <div className="tour-ai-terminal absolute inset-0">
-          <Terminal
-            disabled={!model}
-            ref={terminalRef}
-            onReset={() => {
-              setMessages([]);
-              setResponseMessages([]);
-              setResponse(undefined);
-              setInitialTerminalMessages(undefined);
-            }}
-            initialMessages={initialTerminalMessages}
-            infobar={
-              response?.numInputTokens && response?.numInputTokens > 0 ? (
-                <div
-                  className="text-right text-gray-400"
-                  style={{ fontSize: "10px" }}
-                >
-                  Tokens in: {response?.numInputTokens?.toLocaleString()} out:{" "}
-                  {response?.numOutputTokens?.toLocaleString()}{" "}
-                  {response?.numCachedTokens
-                    ? `cached: ${response?.numCachedTokens?.toLocaleString()} `
-                    : ""}
-                  {response?.state}
-                </div>
-              ) : null
-            }
-            prompt={prompt}
-            setPrompt={setPrompt}
-            placeholder={inputPlaceholder}
-            statusbar=<div className="flex flex-1 items-center justify-between gap-1">
-              <a
-                className="ml-1 flex cursor-pointer items-center gap-1 text-xs"
-                onClick={() => {
-                  setShowPredefined(!showPredefined);
-                }}
-              >
-                <WizardIcon className="h-5 w-5" />
-                Predefined prompts
-              </a>
-              {editContext.selection?.length > 0 && (
-                <div className="mr-2 flex items-center text-xs text-red-400">
-                  {editContext.selection.length} items selected
-                  <SimpleIconButton
-                    icon="pi pi-times"
-                    label="Clear selection"
-                    onClick={() => {
-                      editContext.select([]);
-                    }}
-                  />
-                </div>
-              )}
-              {showPredefined && (
-                <div className="absolute right-0 bottom-8 left-0 flex flex-col gap-1 overflow-y-auto bg-white p-3 pb-1 text-sm">
-                  {activeProfile &&
-                    activeProfile.prompts.map((p, index) => (
-                      <div
-                        key={index}
-                        className="mb-1 cursor-pointer rounded-lg border border-gray-200 p-1.5 text-xs text-gray-700"
-                        onClick={() => {
-                          setPrompt(p.prompt);
-                          setShowPredefined(false);
-                        }}
-                      >
-                        {p.title}
-                      </div>
-                    ))}
-                </div>
-              )}
-            </div>
-            toolbar=<div className="flex items-stretch gap-1">
-              <div className="relative" ref={settingsRef}>
-                <SimpleIconButton
-                  icon={<Settings size={16} strokeWidth={1} />}
-                  label="Settings"
-                  onClick={() => setShowSettings(!showSettings)}
-                />
-                {showSettings && (
-                  <div className="absolute top-8 right-0 z-50 flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3 shadow-lg">
-                    <div className="flex flex-col gap-1">
-                      <label className="text-xs font-medium text-gray-700">
-                        Profile
-                      </label>
-                      <Dropdown
-                        className="text-sm"
-                        value={activeProfile}
-                        onChange={(e) => setActiveProfile(e.value)}
-                        optionLabel="name"
-                        options={profiles}
-                      />
-                    </div>
-                    {activeProfile && (
-                      <div className="flex flex-col gap-1">
-                        <label className="text-xs font-medium text-gray-700">
-                          Model
-                        </label>
-                        <Dropdown
-                          className="text-sm"
-                          value={model}
-                          onChange={(e) => setModel(e.value)}
-                          options={activeProfile.models}
-                        />
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-              {closeButton}
-            </div>
-            commandHandler={(v, callback) => {
-              commandHandler(v, callback);
-            }}
-          />
-        </div>
-        {activeProfile?.errorMessage && (
-          <div className="absolute inset-0 grid items-center justify-center p-2 text-sm text-red-500">
-            {activeProfile?.errorMessage}
-          </div>
-        )}
-        {!model && (
-          <div className="absolute inset-0 grid items-center justify-center text-sm text-gray-400">
-            {!activeProfile ? "No profile selected" : "No model selected"}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/editor/component-designer/ComponentDesignerAiTerminal.tsx_

@@ -1,11 +0,0 @@
-import { AiTerminal } from "../ai/AiTerminal";
-import { createDesignerAiContext } from "./aiContext";
-
-export function ComponentDesignerAiTerminal() {
-  return (
-    <AiTerminal
-      createAiContext={createDesignerAiContext}
-      defaultProfile="Component Designer"
-    />
-  );
-}