@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/ai/AiTerminal.tsx

@@ -0,0 +1,503 @@
+"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 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}
+        />,
+        isFinished,
+      );
+    } else {
+      // Fallback: if no messages in response, keep current state
+      terminalCallback(
+        <AiResponseMessage
+          messages={messagesRef.current}
+          editOperations={response.editOperations}
+          finished={isFinished}
+        />,
+        isFinished,
+      );
+    }
+  }
+
+  async function commandHandler(
+    text: string,
+    callback: (text: React.ReactNode, finished: boolean) => void,
+  ) {
+    const userMessage = {
+      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;
+
+    // Build complete message history for API call
+    const conversationHistory = [...messagesRef.current, userMessage];
+    const messages = [
+      ...(options?.hiddenSystemPrompt
+        ? [
+            {
+              role: "system",
+              name: "system",
+              content: options.hiddenSystemPrompt,
+              id: 0, // System message id
+              toolCalls: [],
+            },
+          ]
+        : []),
+      ...conversationHistory,
+    ];
+
+    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([]);
+              setResponseMessages([]);
+              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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,20 @@
+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"
+    />
+  );
+}