@alpaca-editor/core 1.0.0

package/src/editor/ai/AiTerminal.tsx

@@ -0,0 +1,450 @@
+"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 {
+  AddComponentOperation,
+  EditFieldOperation,
+  EditOperation,
+} from "../../types";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+
+type Message = {
+  content: string;
+  name: string;
+  role: string;
+};
+
+type Response = {
+  responseText: string;
+  editOperations: EditOperation[];
+  numInputTokens: number;
+  numOutputTokens: number;
+  numCachedTokens: number;
+  toolCalls?: ToolCall[];
+  state: string;
+};
+
+type ToolCall = {
+  function: {
+    name: string;
+    arguments: 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);
+
+  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 = messages;
+  }, [messages]);
+
+  async function commandHandler(
+    text: string,
+    callback: (text: React.ReactNode, finished: boolean) => void
+  ) {
+    const newMessages = [
+      ...messagesRef.current,
+      { content: text, role: "user", name: "user" },
+    ];
+
+    const context = createAiContext({ editContext });
+
+    let lastOpIndex = 0;
+    const selectedText = editContext?.selectedRange?.text || null;
+    if (!activeProfile || !model) return;
+
+    const messages = [
+      ...(options?.hiddenSystemPrompt
+        ? [
+            {
+              role: "system",
+              name: "system",
+              content: options.hiddenSystemPrompt,
+            },
+          ]
+        : []),
+      ...newMessages,
+    ];
+
+    console.log(messages);
+
+    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.item) {
+                editContext.itemsRepository.updateFieldValue(
+                  editFieldOp,
+                  editFieldOp.user ?? { name: "unknown", ai: false },
+                  false,
+                  editFieldOp.value
+                );
+
+                editContext.select([editFieldOp.item.id]);
+                editContext.setScrollIntoView(editFieldOp.item.id);
+
+                editContext?.setFocusedField(editFieldOp, 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="h-full flex flex-col relative flex-1 pl-1.5"
+      data-testid="ai-terminal"
+    >
+      <div className="flex-1 relative">
+        <div className="inset-0 absolute tour-ai-terminal">
+          <Terminal
+            disabled={!model}
+            ref={terminalRef}
+            onReset={() => {
+              setMessages([]);
+              setResponse(undefined);
+            }}
+            infobar={
+              response?.numInputTokens && (
+                <div
+                  className="text-gray-400 text-right"
+                  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 items-center justify-between gap-1 flex-1">
+              <a
+                className="text-xs text-blue-300 cursor-pointer flex items-center gap-1 ml-1"
+                onClick={() => {
+                  setShowPredefined(!showPredefined);
+                }}
+              >
+                <WizardIcon className="w-5 h-5" />
+                Predefined prompts
+              </a>
+              {editContext.selection?.length > 0 && (
+                <div className="text-xs text-red-400 flex items-center mr-2">
+                  {editContext.selection.length} items selected
+                  <SimpleIconButton
+                    icon="pi pi-times"
+                    label="Clear selection"
+                    onClick={() => {
+                      editContext.select([]);
+                    }}
+                  />
+                </div>
+              )}
+              {showPredefined && (
+                <div className="absolute right-0 left-0 bottom-8 text-sm overflow-y-auto bg-white p-3 pb-1 flex flex-col gap-1 ">
+                  {activeProfile &&
+                    activeProfile.prompts.map((p, index) => (
+                      <div
+                        key={index}
+                        className="p-1.5 mb-1 border border-gray-200 rounded-lg cursor-pointer text-gray-700 text-xs"
+                        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="text-red-500 text-sm p-2 inset-0 absolute grid items-center justify-center">
+            {activeProfile?.errorMessage}
+          </div>
+        )}
+        {!model && (
+          <div className="inset-0 absolute grid items-center justify-center text-gray-400 text-sm">
+            {!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,
+      selectedText,
+      model,
+      sessionId: session,
+    }),
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+      Cookie: new Cookies().getAll(),
+    },
+  });
+
+  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;
+}
+
+function handleResponse(
+  response: any,
+  terminalCallback: (text: React.ReactNode, finished: boolean) => void,
+  isFinished: boolean
+) {
+  const toolcalls: [] =
+    response?.toolCalls?.map((tool_call: any) => {
+      return {
+        func: tool_call.function?.name,
+        arguments: tool_call.function?.arguments,
+        result: tool_call.result,
+        error: tool_call.error,
+      };
+    }) || [];
+
+  const responseText = response.responseText
+    ?.trim()
+    .replace(/\n/g, "<br/>")
+    ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
+
+  terminalCallback(
+    <AiResponseMessage
+      responseText={responseText}
+      toolcalls={toolcalls}
+      editOperations={response.editOperations}
+      finished={isFinished}
+    />,
+    isFinished
+  );
+}

package/src/editor/ai/AiToolCall.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+
+import { JsonView, defaultStyles } from "react-json-view-lite";
+
+export type ToolCall = {
+  func: string;
+  arguments: string;
+  result: string;
+  error?: string;
+};
+
+export function AiToolCall({ toolCall }: { toolCall: ToolCall }) {
+  const [expanded, setExpaded] = useState(false);
+
+  return (
+    <div className="mt-2">
+      <div
+        onClick={() => setExpaded(!expanded)}
+        className="flex items-center cursor-pointer"
+      >
+        <i className="pi pi-angle-right" /> {toolCall.func}
+      </div>
+      {expanded && (
+        <div className="ml-4">
+          <div className="italic">Args:</div>
+          <div>{renderJsonOrText(toolCall.arguments)}</div>
+          <div className="italic mt-1">Result:</div>
+          <div className="mb-4">
+            {toolCall.error && (
+              <div className="text-red">{toolCall.error}</div>
+            )}
+            {renderJsonOrText(toolCall.result)}
+          </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"
+    />
+  );
+}

package/src/editor/ai/editorAiContext.ts

@@ -0,0 +1,18 @@
+import { EditContextType } from "../client/editContext";
+
+export function createEditorAiContext({
+  editContext,
+}: {
+  editContext: EditContextType;
+}) {
+  const aiPromptUrl = editContext.configuration.services.aiService.promptUrl;
+
+  return {
+    endpoint: aiPromptUrl,
+    promptData: {
+      itemid: editContext.currentItemDescriptor?.id,
+      language: editContext.currentItemDescriptor?.language,
+      version: editContext.currentItemDescriptor?.version,
+    },
+  };
+}

package/src/editor/client/DialogContext.tsx

@@ -0,0 +1,49 @@
+// DialogContext.tsx
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+export type DialogProps<T> = {
+  onClose: (result: T | null) => void;
+};
+
+export type OpenDialog = <T, P>(
+  Component: React.ComponentType<P & DialogProps<T>>,
+  props: P
+) => Promise<T | null>;
+
+export interface DialogContextValue {
+  openDialog: OpenDialog;
+}
+
+const DialogContext = createContext<DialogContextValue | undefined>(undefined);
+
+export const DialogProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [dialog, setDialog] = useState<ReactNode>(null);
+
+  const openDialog: OpenDialog = (Component, props) => {
+    return new Promise((resolve) => {
+      const handleClose = (result: any) => {
+        setDialog(null);
+        resolve(result);
+      };
+
+      setDialog(<Component {...(props as any)} onClose={handleClose} />);
+    });
+  };
+
+  return (
+    <DialogContext.Provider value={{ openDialog }}>
+      {children}
+      {dialog}
+    </DialogContext.Provider>
+  );
+};
+
+export const useDialog = (): DialogContextValue => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error("useDialog must be used within a DialogProvider");
+  }
+  return context;
+};