@alpaca-editor/core 1.0.3832 → 1.0.3833

package/src/editor/ContentTree.tsx

@@ -463,8 +463,6 @@ export default function ContentTree({
         })),
       );
 
-      console.log("ITEMS", items);
-
       if (!items || items.length === 0) return;
 
       const menuItems =

package/src/editor/ai/AiResponseMessage.tsx

@@ -1,25 +1,25 @@
 import { useState } from "react";
-import { AiToolCall, ToolCall } from "./AiToolCall";
-import { EditOperation } from "../../types";
+
 import { useEditContext } from "../client/editContext";
+import { EditOperation } from "@/types";
+import { Message } from "./AiTerminal";
+import { AiToolCall } from "./AiToolCall";
 
 export function AiResponseMessage({
-  responseText,
-  toolcalls,
-  editOperations,
+  messages,
   finished,
+  editOperations,
 }: {
-  responseText: string;
-  toolcalls: ToolCall[];
-  editOperations: EditOperation[];
+  messages: Message[];
   finished: boolean;
+  editOperations: EditOperation[];
 }) {
   const editContext = useEditContext();
   if (!editContext) return <></>;
 
-  const [showFunctions, setShowFunctions] = useState(false);
+  // const [showFunctions, setShowFunctions] = useState(false);
   const [changesRejected, setChangesRejected] = useState<boolean | undefined>(
-    undefined
+    undefined,
   );
 
   const reversedEditOperations = [...editOperations].reverse();
@@ -29,41 +29,65 @@ export function AiResponseMessage({
     reversedEditOperations.find(
       (x, index) =>
         editContext.editHistory[index]?.id !== x.id ||
-        !editContext.editHistory[index]?.canUndo
+        !editContext.editHistory[index]?.canUndo,
     ) === undefined;
 
   return (
     <div>
-      <div
+      {messages
+        .filter((x) => x.role !== "tool")
+        .map((message, index) => (
+          <div key={index}>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: message.formattedContent || message.content || "",
+              }}
+            />
+            {message.tool_calls && message.tool_calls.length > 0 && (
+              <div className="text-xs text-gray-400">
+                {message.tool_calls.map((x, index) => (
+                  <AiToolCall
+                    toolCall={x}
+                    key={index}
+                    result={messages.find(
+                      (m) => m.role === "tool" && m.tool_call_id === x.id,
+                    )}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      {/* <div
         dangerouslySetInnerHTML={{
           __html: responseText.replaceAll("\\n", "<br>"),
         }}
       />
       {toolcalls.length > 0 && (
         <div
-          className="text-xs text-gray-400  cursor-pointer flex items-center gap-1 mt-1"
+          className="mt-1 flex cursor-pointer items-center gap-1 text-xs text-gray-400"
           onClick={() => setShowFunctions(!showFunctions)}
         >
           <i className="pi pi-wrench text-xs" /> Tool calls
         </div>
-      )}
+      )} */}
 
-      {showFunctions && (
+      {/* {showFunctions && (
         <div className="text-xs text-gray-400">
           {toolcalls.map((x, index) => (
             <AiToolCall toolCall={x} key={index} />
           ))}
         </div>
-      )}
+      )} */}
 
       {finished && editOperations.length > 0 && (
-        <div className="flex gap-2 my-2 items-center">
-          <div className="text-xs tour-ai-response-message-changes">
+        <div className="my-2 flex items-center gap-2">
+          <div className="tour-ai-response-message-changes text-xs">
             {editOperations.length} changes
           </div>
           {canReject && !changesRejected && (
             <div
-              className="text-xs text-red-500  cursor-pointer flex items-center gap-1"
+              className="flex cursor-pointer items-center gap-1 text-xs text-red-500"
               onClick={async () => {
                 await editContext?.operations.undo(editOperations.length);
                 setChangesRejected(true);

package/src/editor/ai/AiTerminal.tsx

@@ -19,29 +19,34 @@ import {
 } from "../../types";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 
-type Message = {
-  content: string;
-  name: string;
-  role: string;
-};
-
 type Response = {
-  responseText: string;
+  messages: Message[];
   editOperations: EditOperation[];
   numInputTokens: number;
   numOutputTokens: number;
   numCachedTokens: number;
-  toolCalls?: ToolCall[];
   state: string;
 };
 
-type ToolCall = {
+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;
@@ -78,6 +83,7 @@ export function AiTerminal({
   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) {
@@ -111,8 +117,70 @@ export function AiTerminal({
 
   const messagesRef = useRef(messages);
   useEffect(() => {
-    messagesRef.current = messages;
-  }, [messages]);
+    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]);
+    console.log(
+      "response",
+      messagesRef.current,
+      response.messages,
+      currentMessages,
+    );
+    terminalCallback(
+      <AiResponseMessage
+        messages={currentMessages}
+        editOperations={response.editOperations}
+        finished={isFinished}
+      />,
+      isFinished,
+    );
+  }
 
   async function commandHandler(
     text: string,
@@ -120,7 +188,13 @@ export function AiTerminal({
   ) {
     const newMessages = [
       ...messagesRef.current,
-      { content: text, role: "user", name: "user" },
+      {
+        id: Date.now(), // Add unique id
+        content: text,
+        role: "user",
+        name: "user",
+        tool_calls: [], // Add empty toolCalls array
+      },
     ];
 
     const context = createAiContext({ editContext });
@@ -129,6 +203,8 @@ export function AiTerminal({
     const selectedText = editContext?.selectedRange?.text || null;
     if (!activeProfile || !model) return;
 
+    setResponseMessages([]);
+
     const messages = [
       ...(options?.hiddenSystemPrompt
         ? [
@@ -136,6 +212,8 @@ export function AiTerminal({
               role: "system",
               name: "system",
               content: options.hiddenSystemPrompt,
+              id: 0, // System message id
+              toolCalls: [],
             },
           ]
         : []),
@@ -155,61 +233,61 @@ export function AiTerminal({
       (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.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);
+        //       }
+        //     }
+        //   });
+        // }
       },
     );
 
@@ -219,15 +297,16 @@ export function AiTerminal({
       editContext?.requestRefresh("immediate");
     }
 
-    if (response?.responseText)
-      newMessages.push({
-        content: response.responseText,
-        role: "assistant",
-        name: "assistant",
-      });
+    // if (response?.responseText)
+    //   newMessages.push({
+    //     content: response.responseText,
+    //     role: "assistant",
+    //     name: "assistant",
+    //   });
 
     setResponse(response ? response : undefined);
-    setMessages(newMessages);
+
+    // setMessages(newMessages);
   }
 
   useEffect(() => {
@@ -424,34 +503,3 @@ async function executePrompt(
 
   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

@@ -1,36 +1,52 @@
-import { useState } from "react";
+import { useEffect, 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 }) {
+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="mt-2">
+    <div className="m-2">
       <div
         onClick={() => setExpaded(!expanded)}
-        className="flex items-center cursor-pointer"
+        className="flex cursor-pointer items-center"
       >
-        <i className="pi pi-angle-right" /> {toolCall.func}
+        <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 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>{renderJsonOrText(toolCall.function.arguments)}</div>
+          {error && (
+            <div className="ml-4 text-red-500">
+              <div className="italic">Error:</div>
+              <div>{error}</div>
+            </div>
+          )}
         </div>
       )}
     </div>