@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/ai/AiTerminal.tsx

@@ -1,514 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-import { TerminalService } from "primereact/terminalservice";
-
-import { Terminal } from "../Terminal";
-import { useEditContext } from "../client/editContext";
-import { Dropdown } from "primereact/dropdown";
-
-import Cookies from "universal-cookie";
-import { WizardIcon } from "../ui/Icons";
-import { AiResponseMessage } from "./AiResponseMessage";
-import { AiProfile, loadAiProfiles } from "../services/aiService";
-import { EditOperation } from "../../types";
-import { SimpleIconButton } from "../ui/SimpleIconButton";
-
-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: number;
-  content: string;
-  formattedContent?: string;
-  name: string;
-  role: string;
-  tool_calls?: ToolCall[];
-  tool_call_id?: string;
-};
-
-export type AiContext = {
-  promptData: any;
-  endpoint: string;
-  callback?: (response: Response) => void;
-};
-
-export type AiTerminalOptions = {
-  initialPrompt?: string;
-  hiddenSystemPrompt?: string;
-};
-
-export function AiTerminal({
-  closeButton,
-  createAiContext,
-  defaultProfile,
-  options,
-}: {
-  closeButton?: React.ReactNode;
-  createAiContext: ({ editContext }: { editContext: any }) => AiContext;
-  defaultProfile?: string;
-  options?: AiTerminalOptions;
-}) {
-  const editContext = useEditContext();
-  const [showPredefined, setShowPredefined] = useState(false);
-
-  if (!editContext) return null;
-
-  const [messages, setMessages] = useState<Message[]>([]);
-  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 selection = editContext.selection;
-  const terminalRef = useRef<{ submit: () => void }>(null);
-  const [responseMessages, setResponseMessages] = useState<Message[]>([]);
-
-  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?.defaultModel) setModel(activeProfile.defaultModel);
-  }, [activeProfile]);
-
-  const messagesRef = useRef(messages);
-  useEffect(() => {
-    messagesRef.current = responseMessages;
-  }, [responseMessages]);
-
-  function handleResponse(
-    response: Response,
-    terminalCallback: (text: React.ReactNode, finished: boolean) => void,
-    isFinished: boolean,
-  ) {
-    const currentMessages = messagesRef.current;
-    const updatedMessages = response.messages;
-
-    // Merge updatedMessages into currentMessages if they exist
-    if (updatedMessages && Array.isArray(updatedMessages)) {
-      // Ensure each message has the required properties
-      updatedMessages.forEach((message) => {
-        const existingMessageIndex = currentMessages.findIndex(
-          (m) => m.id === message.id,
-        );
-        const formattedContent = message.content
-          .trim()
-          .replaceAll("\n", "<br>")
-          ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
-
-        if (existingMessageIndex !== -1) {
-          // Update existing message
-          currentMessages[existingMessageIndex] = {
-            ...currentMessages[existingMessageIndex],
-            ...message,
-            content: message.content,
-            formattedContent: formattedContent,
-            tool_calls:
-              message.tool_calls ||
-              currentMessages[existingMessageIndex]?.tool_calls ||
-              [],
-          };
-        } else {
-          // Add new message
-          currentMessages.push({
-            ...message,
-            content: formattedContent,
-            tool_calls: message.tool_calls || [], // Ensure toolCalls exists
-          });
-        }
-      });
-    }
-
-    // Update the messages state
-    setMessages([...currentMessages]);
-    setResponseMessages([...currentMessages]);
-
-    terminalCallback(
-      <AiResponseMessage
-        messages={currentMessages}
-        editOperations={response.editOperations}
-        finished={isFinished}
-      />,
-      isFinished,
-    );
-  }
-
-  async function commandHandler(
-    text: string,
-    callback: (text: React.ReactNode, finished: boolean) => void,
-  ) {
-    const newMessages = [
-      ...messagesRef.current,
-      {
-        id: Date.now(), // Add unique id
-        content: text,
-        role: "user",
-        name: "user",
-        tool_calls: [], // Add empty toolCalls array
-      },
-    ];
-
-    const context = createAiContext({ editContext });
-
-    let lastOpIndex = 0;
-    const selectedText = editContext?.selectedRange?.text || null;
-    if (!activeProfile || !model) return;
-
-    setResponseMessages([]);
-
-    const messages = [
-      ...(options?.hiddenSystemPrompt
-        ? [
-            {
-              role: "system",
-              name: "system",
-              content: options.hiddenSystemPrompt,
-              id: 0, // System message id
-              toolCalls: [],
-            },
-          ]
-        : []),
-      ...newMessages,
-    ];
-
-    const response = await executePrompt(
-      activeProfile.id,
-      messages,
-      selection,
-      editContext!.sessionId,
-      model,
-      selectedText,
-      context,
-      (response: any) => {
-        setResponse(response);
-        handleResponse(response, callback, false);
-        // if (response.editOperations.length) {
-        //   if (!editContext) return;
-
-        //   const newOps = response.editOperations.slice(lastOpIndex);
-
-        //   if (newOps.length === 0) return;
-
-        //   const isEditTextFieldOp = (op: EditOperation) => {
-        //     if (op.type !== "edit-field") return false;
-        //     const editFieldOp = op as EditFieldOperation;
-        //     return (
-        //       editFieldOp.fieldType &&
-        //       editFieldOp.fieldType.indexOf("text") !== -1
-        //     );
-        //   };
-
-        //   const isEditTextField = isEditTextFieldOp(newOps[newOps.length - 1]);
-
-        //   if (isEditTextField) lastOpIndex = response.editOperations.length - 1;
-        //   else lastOpIndex = response.editOperations.length;
-
-        //   newOps.forEach((op: EditOperation) => {
-        //     if (isEditTextFieldOp(op)) {
-        //       const editFieldOp = op as EditFieldOperation;
-
-        //       if (editFieldOp.itemId) {
-        //         const fieldDescriptor = {
-        //           item: {
-        //             ...editFieldOp.mainItem,
-        //             id: editFieldOp.itemId,
-        //           },
-        //           fieldId: editFieldOp.fieldId,
-        //         };
-        //         editContext.itemsRepository.updateFieldValue(
-        //           fieldDescriptor,
-        //           editFieldOp.user ?? { name: "unknown", ai: false },
-        //           false,
-        //           editFieldOp.value,
-        //         );
-
-        //         editContext.select([editFieldOp.itemId]);
-        //         editContext.setScrollIntoView(editFieldOp.itemId);
-
-        //         editContext?.setFocusedField(fieldDescriptor, false);
-        //       }
-        //     } else {
-        //       const addOp = op as AddComponentOperation;
-        //       if (op.type === "add-component" && addOp.componentId) {
-        //         const newComponentId = addOp.componentId;
-        //         editContext.select([newComponentId]);
-        //         editContext.setScrollIntoView(newComponentId);
-        //       }
-        //     }
-        //   });
-        // }
-      },
-    );
-
-    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 pl-1.5"
-      data-testid="ai-terminal"
-    >
-      <div className="relative flex-1">
-        <div className="tour-ai-terminal absolute inset-0">
-          <Terminal
-            disabled={!model}
-            ref={terminalRef}
-            onReset={() => {
-              setMessages([]);
-              setResponse(undefined);
-            }}
-            infobar={
-              response?.numInputTokens && (
-                <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>
-              )
-            }
-            prompt={prompt}
-            setPrompt={setPrompt}
-            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 text-blue-300"
-                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">
-              <Dropdown
-                className="text-sm"
-                value={activeProfile}
-                onChange={(e) => setActiveProfile(e.value)}
-                optionLabel="name"
-                options={profiles}
-              />
-              {activeProfile && (
-                <Dropdown
-                  className="text-sm"
-                  value={model}
-                  onChange={(e) => setModel(e.value)}
-                  options={activeProfile.models}
-                />
-              )}
-              {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>
-  );
-}
-
-async function executePrompt(
-  profileId: string,
-  messages: Message[],
-  selection: string[],
-  session: string | null,
-  model: string | null,
-  selectedText: string | null,
-  context: AiContext,
-  callback: (response: any) => void,
-): Promise<Response | null> {
-  const response = await fetch(context.endpoint, {
-    method: "POST",
-    body: JSON.stringify({
-      ...context.promptData,
-      profileId,
-      messages,
-      selection,
-      addSelectedComponents: true,
-      selectedText,
-      model,
-      sessionId: session,
-    }),
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-      Cookie: new Cookies().getAll(),
-    },
-  });
-
-  if (!response.ok) {
-    const text = await response.text();
-    return {
-      messages: [
-        {
-          content: "There was an error processing your request: " + text,
-          id: 0,
-          name: "assistant",
-          role: "assistant",
-        },
-      ],
-      editOperations: [],
-      numInputTokens: 0,
-      numOutputTokens: 0,
-      numCachedTokens: 0,
-      state: "error",
-    };
-  }
-
-  if (!response?.body) return null;
-
-  const reader = response.body.getReader();
-  const decoder = new TextDecoder();
-  let buffer = "";
-
-  let result = null;
-
-  while (true) {
-    const { done, value } = await reader.read();
-
-    if (done) {
-      break;
-    }
-
-    buffer += decoder.decode(value, { stream: true }); // 'stream: true' ensures that any incomplete multi-byte characters aren't malformed.
-
-    // Split the buffer by newline and keep the last partial line for the next iteration.
-    const lines = buffer.split("\n");
-
-    if (lines.length > 0) {
-      buffer = lines.pop() || ""; // Incomplete line (if any) is kept for the next iteration.
-
-      for (let line of lines) {
-        if (line.trim() === "") continue; // Skip empty lines if any.
-
-        try {
-          const jsonData = JSON.parse(line);
-          callback(jsonData);
-          result = jsonData;
-        } catch (e) {
-          console.error("Error parsing line:" + line, e);
-        }
-      }
-    }
-  }
-
-  // If there's any remaining content in the buffer after processing all chunks, try to process it.
-  if (buffer.trim() !== "") {
-    try {
-      const jsonData = JSON.parse(buffer);
-      result = jsonData;
-    } catch (e) {
-      console.error("Error parsing the final buffer content:", e);
-    }
-  }
-
-  return result;
-}

package/src/editor/ai/AiToolCall.tsx

@@ -1,61 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { JsonView, defaultStyles } from "react-json-view-lite";
-import { Message, ToolCall } from "./AiTerminal";
-import { ProgressSpinner } from "primereact/progressspinner";
-export function AiToolCall({
-  toolCall,
-  result,
-}: {
-  toolCall: ToolCall;
-  result: Message | undefined;
-}) {
-  const [expanded, setExpaded] = useState(false);
-  const [error, setError] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    try {
-      const data = JSON.parse(result?.content || "{}");
-      setError(data.error);
-    } catch (err) {
-      console.error("Failed to parse tool call result:", err);
-      setError("Failed to parse response");
-    }
-  }, [result]);
-
-  return (
-    <div className="m-2">
-      <div
-        onClick={() => setExpaded(!expanded)}
-        className="flex cursor-pointer items-center"
-      >
-        <i className="pi pi-angle-right" />
-        <div className="flex items-center gap-2">
-          {!result && (
-            <ProgressSpinner style={{ width: "1rem", height: "1rem" }} />
-          )}
-          {toolCall.displayName}
-        </div>
-      </div>
-      {expanded && (
-        <div className="ml-4">
-          <div>{renderJsonOrText(toolCall.function.arguments)}</div>
-          {error && (
-            <div className="ml-4 text-red-500">
-              <div className="italic">Error:</div>
-              <div>{error}</div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function renderJsonOrText(json: string) {
-  try {
-    return <JsonView data={JSON.parse(json)} style={defaultStyles} />;
-  } catch (e) {
-    return <div>{json}</div>;
-  }
-}

package/src/editor/ai/EditorAiTerminal.tsx

@@ -1,20 +0,0 @@
-import { AiTerminalOptions } from "./AiTerminal";
-import { AiTerminal } from "./AiTerminal";
-import { createEditorAiContext } from "./editorAiContext";
-
-export function EditorAiTerminal({
-  closeButton,
-  options,
-}: {
-  closeButton?: React.ReactNode;
-  options?: AiTerminalOptions;
-}) {
-  return (
-    <AiTerminal
-      options={options}
-      closeButton={closeButton}
-      createAiContext={createEditorAiContext}
-      defaultProfile="Editor"
-    />
-  );
-}