@alpaca-editor/core 1.0.4018 → 1.0.4026

package/src/editor/ai/AiResponseMessage.tsx

@@ -1,9 +1,12 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import JSONPretty from "react-json-pretty";
 
 import { useEditContext } from "../client/editContext";
 import { EditOperation } from "../../types";
 import { Message } from "./AiTerminal";
 import { AiToolCall } from "./AiToolCall";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover";
+import { SimpleTabs, Tab } from "../ui/SimpleTabs";
 
 export function AiResponseMessage({
   messages,
@@ -22,6 +25,23 @@ export function AiResponseMessage({
     undefined,
   );
 
+  // Store tool calls to preserve them during streaming
+  const [preservedToolCalls, setPreservedToolCalls] = useState<{[messageIndex: number]: any[]}>({});
+
+  // Update preserved tool calls when messages change
+  useEffect(() => {
+    const newPreservedToolCalls = {...preservedToolCalls};
+    
+    messages.forEach((message, index) => {
+      if (message.tool_calls && message.tool_calls.length > 0) {
+        // Store non-empty tool calls
+        newPreservedToolCalls[index] = message.tool_calls;
+      }
+    });
+    
+    setPreservedToolCalls(newPreservedToolCalls);
+  }, [messages]);
+
   const reversedEditOperations = [...editOperations].reverse();
 
   const canReject =
@@ -32,32 +52,127 @@ export function AiResponseMessage({
         !editContext.editHistory[index]?.canUndo,
     ) === undefined;
 
+  // Helper function to render JSON or text
+  const renderJsonOrText = (json: string) => {
+    try {
+      const parsed = JSON.parse(json);
+      return (
+        <div className="font-mono text-xs whitespace-pre-wrap">
+          <pre className="whitespace-pre-wrap break-words">
+            {JSON.stringify(parsed, null, 2)}
+          </pre>
+        </div>
+      );
+    } catch (e) {
+      return <div className="whitespace-pre-wrap font-mono text-xs break-words">{json}</div>;
+    }
+  };
+
+  // Helper function to create tabs for a tool call
+  const createToolCallTabs = (toolCall: any, result: Message | undefined): Tab[] => {
+    const tabs: Tab[] = [
+      {
+        id: `input-${toolCall.id}`,
+        label: "Input",
+        content: (
+          <div className="max-h-96 overflow-auto p-2">
+            <div className="text-sm font-semibold text-gray-700 mb-1">Arguments:</div>
+            <div className="text-xs">{renderJsonOrText(toolCall.function.arguments)}</div>
+          </div>
+        ),
+      },
+    ];
+
+    if (result) {
+      tabs.push({
+        id: `output-${toolCall.id}`,
+        label: "Output",
+        content: (
+          <div className="max-h-96 overflow-auto p-2">
+            <div className="text-sm font-semibold text-gray-700 mb-1">Result:</div>
+            <div className="text-xs">{renderJsonOrText(result.content || "")}</div>
+          </div>
+        ),
+      });
+    }
+
+    return tabs;
+  };
+
+  // Helper function to create tool call popover content
+  const ToolCallPopover = ({ toolCall, result }: { toolCall: any; result: Message | undefined }) => {
+    const [activeTab, setActiveTab] = useState(0);
+    const tabs = createToolCallTabs(toolCall, result);
+    
+    return (
+      <div className="w-96">
+        <div className="mb-3 pb-2 border-b border-gray-200">
+          <div className="text-sm font-semibold text-gray-800">
+            {toolCall.displayName || toolCall.function.name}
+          </div>
+        </div>
+        <SimpleTabs
+          tabs={tabs}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          className="border-b border-gray-200 mb-3"
+          tabClassName="text-xs"
+        />
+      </div>
+    );
+  };
+
   return (
     <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>
-        ))}
+        .map((message, filteredIndex) => {
+          // Find the original index of this message in the unfiltered array
+          const originalIndex = messages.findIndex(m => m.id === message.id);
+          // Use preserved tool calls if current message has empty tool calls
+          const toolCalls = (message.tool_calls && message.tool_calls.length > 0) 
+            ? message.tool_calls 
+            : (preservedToolCalls[originalIndex] || []);
+          return (
+              <div key={filteredIndex}>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: message.formattedContent || message.content || "",
+                }}
+              />
+              {toolCalls.length > 0 && (
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {toolCalls.map((toolCall, toolIndex) => {
+                    return (
+                      <Popover key={toolIndex} enableIframeClickDetection={false}>
+                        <PopoverTrigger asChild>
+                          <div className="inline-flex cursor-pointer items-center gap-1 text-xs text-gray-500 hover:text-gray-700">
+                            <i className="pi pi-wrench text-xs" />
+                            <span>
+                              {toolCall?.displayName || toolCall?.function?.name || 'tool call'}
+                            </span>
+                          </div>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          className="p-3"
+                          align="start"
+                          side="bottom"
+                          sideOffset={8}
+                          onMouseDown={(e) => e.stopPropagation()}
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <div className="max-h-[500px] overflow-hidden">
+                            <ToolCallPopover toolCall={toolCall} result={toolCall.result} />
+                          </div>
+                        </PopoverContent>
+                      </Popover>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
       {/* <div
         dangerouslySetInnerHTML={{
           __html: responseText.replaceAll("\\n", "<br>"),

package/src/editor/ai/AiTerminal.tsx

@@ -44,7 +44,7 @@ export type Message = {
   name: string;
   role: string;
   tool_calls?: ToolCall[];
-  tool_call_id?: string;
+  tool_call_id?: string; // For tool response messages
 };
 
 export type AiContext = {
@@ -75,7 +75,9 @@ export function AiTerminal({
 
   if (!editContext) return null;
 
-  const [messages, setMessages] = useState<Message[]>(options?.initialMessages || []);
+  const [messages, setMessages] = useState<Message[]>(
+    options?.initialMessages || [],
+  );
   const [response, setResponse] = useState<Response>();
   const [model, setModel] = useState<string>();
   const [prompt, setPrompt] = useState("");
@@ -85,7 +87,9 @@ export function AiTerminal({
   const [agentId] = useState<string>(() => crypto.randomUUID());
   const selection = editContext.selection;
   const terminalRef = useRef<{ submit: () => void }>(null);
-  const [responseMessages, setResponseMessages] = useState<Message[]>(options?.initialMessages || []);
+  const [responseMessages, setResponseMessages] = useState<Message[]>(
+    options?.initialMessages || [],
+  );
   const [showSettings, setShowSettings] = useState(false);
   const settingsRef = useRef<HTMLDivElement>(null);
 
@@ -125,20 +129,29 @@ export function AiTerminal({
   }, [responseMessages]);
 
   // State for initial messages to pass to Terminal
-  type TerminalMessage = {text: React.ReactNode, type: "command" | "response"};
-  const [initialTerminalMessages, setInitialTerminalMessages] = useState<TerminalMessage[] | undefined>(undefined);
+  type TerminalMessage = {
+    text: React.ReactNode;
+    type: "command" | "response";
+  };
+  const [initialTerminalMessages, setInitialTerminalMessages] = useState<
+    TerminalMessage[] | undefined
+  >(undefined);
 
-  // Effect to set up initial messages for display  
+  // Effect to set up initial messages for display
   useEffect(() => {
     if (options?.initialMessages && options.initialMessages.length > 0) {
-      console.log("AiTerminal: Loading initial messages", options.initialMessages);
-      
+      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>") || "";
+        const formattedContent =
+          message.content
+            ?.trim()
+            ?.replaceAll("\n", "<br>")
+            ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") || "";
 
         return {
           ...message,
@@ -153,7 +166,7 @@ export function AiTerminal({
       // Update the internal message states
       setMessages(formattedMessages);
       setResponseMessages(formattedMessages);
-      
+
       // Create a response object for internal state
       const initialResponse: Response = {
         messages: formattedMessages,
@@ -161,21 +174,21 @@ export function AiTerminal({
         numInputTokens: 0,
         numOutputTokens: 0,
         numCachedTokens: 0,
-        state: "loaded"
+        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
+            text: message.content,
           });
         } else if (message.role === "assistant") {
           // Assistant messages appear as responses
@@ -187,7 +200,7 @@ export function AiTerminal({
                   __html: message.formattedContent || message.content || "",
                 }}
               />
-            )
+            ),
           });
         }
         // Add tool calls if present
@@ -196,15 +209,15 @@ export function AiTerminal({
             terminalMessages.push({
               type: "response",
               text: (
-                <div className="text-xs text-gray-400">
+                <div className="text-xs text-gray-1">
                   🔧 {toolCall.displayName}
                 </div>
-              )
-            });
+              ),
+            })
           });
         }
       });
-      
+
       setInitialTerminalMessages(terminalMessages);
     }
   }, [options?.initialMessages]);
@@ -238,10 +251,11 @@ export function AiTerminal({
     // 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>") || "";
+        const formattedContent =
+          message.content
+            ?.trim()
+            ?.replaceAll("\n", "<br>")
+            ?.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>") || "";
 
         return {
           ...message,
@@ -374,7 +388,7 @@ export function AiTerminal({
             }}
             initialMessages={initialTerminalMessages}
             infobar={
-              response?.numInputTokens && (
+              response?.numInputTokens && response?.numInputTokens > 0 ? (
                 <div
                   className="text-right text-gray-400"
                   style={{ fontSize: "10px" }}
@@ -386,7 +400,7 @@ export function AiTerminal({
                     : ""}
                   {response?.state}
                 </div>
-              )
+              ) : null
             }
             prompt={prompt}
             setPrompt={setPrompt}

package/src/editor/ai/AiToolCall.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 
-import { JsonView, defaultStyles } from "react-json-view-lite";
+import JSONPretty from "react-json-pretty";
+
 import { Message, ToolCall } from "./AiTerminal";
 import { ProgressSpinner } from "primereact/progressspinner";
 export function AiToolCall({
@@ -34,12 +35,21 @@ export function AiToolCall({
           {!result && (
             <ProgressSpinner style={{ width: "1rem", height: "1rem" }} />
           )}
-          {toolCall.displayName}
+          {toolCall.displayName || toolCall.function.name}
         </div>
       </div>
       {expanded && (
         <div className="ml-4">
-          <div>{renderJsonOrText(toolCall.function.arguments)}</div>
+          <div className="mb-2">
+            <div className="font-semibold text-gray-600">Arguments:</div>
+            <div className="ml-2">{renderJsonOrText(toolCall.function.arguments)}</div>
+          </div>
+          {result && (
+            <div className="mb-2">
+              <div className="font-semibold text-gray-600">Result:</div>
+              <div className="ml-2">{renderJsonOrText(result.content || "")}</div>
+            </div>
+          )}
           {error && (
             <div className="ml-4 text-red-500">
               <div className="italic">Error:</div>
@@ -54,7 +64,7 @@ export function AiToolCall({
 
 function renderJsonOrText(json: string) {
   try {
-    return <JsonView data={JSON.parse(json)} style={defaultStyles} />;
+    return <JSONPretty data={JSON.parse(json)}  />;
   } catch (e) {
     return <div>{json}</div>;
   }

package/src/editor/client/EditorClient.tsx

@@ -248,6 +248,9 @@ export function EditorClient({
       configuration.editor.views[0]?.name ??
       "splash-screen",
   );
+  const [previousViewName, setPreviousViewName] = useState<string | undefined>(
+    undefined,
+  );
 
   const [compareMode, setCompareMode] = useState(false);
   const [compareTo, setCompareTo] = useState<ItemDescriptor>();
@@ -368,7 +371,7 @@ export function EditorClient({
 
   useEffect(() => {
     if (mode === "suggestions") {
-      setViewName("reviews");
+      setViewName("comments");
     }
   }, [mode]);
 
@@ -1681,6 +1684,10 @@ export function EditorClient({
         const result = await currentView.beforeClose(editContext);
         if (!result) return;
       }
+
+      // Track previous view name before switching
+      setPreviousViewName(editContext.viewName);
+
       if (typeof document.startViewTransition === "function") {
         document.startViewTransition(() => {
           flushSync(() => {
@@ -2123,6 +2130,7 @@ export function EditorClient({
       },
       executeCommand,
       viewName,
+      previousViewName,
       switchView,
       compareMode,
       setCompareMode,

package/src/editor/client/editContext.ts

@@ -134,6 +134,7 @@ export type EditContextType = {
       name: string,
     ) => Promise<ItemDescriptor | undefined>;
     createVersion: (item: ItemDescriptor) => Promise<void>;
+    onFieldBlur: () => void;
     undoing: boolean;
   };
   comments: Comment[];
@@ -154,6 +155,7 @@ export type EditContextType = {
   view?: EditorView;
 
   viewName: string;
+  previousViewName?: string;
   switchView: (
     viewName: string,
     options?: { skipConfirmation?: boolean },

package/src/editor/client/operations.ts

@@ -684,6 +684,13 @@ export function getOperationsContext(
     },
     [state.itemsRepository],
   );
+
+  const onFieldBlur = useCallback(() => {
+    // Reset the last operation to force creation of a new operation
+    // when the user returns to edit any field after losing focus
+    lastOp.current = undefined;
+  }, []);
+
   const ops = useMemo(
     () => ({
       addComponent,
@@ -704,6 +711,7 @@ export function getOperationsContext(
       moveItems,
       copyItems,
       duplicateItem,
+      onFieldBlur,
     }),
     [
       addComponent,
@@ -726,6 +734,7 @@ export function getOperationsContext(
       state.page,
       copyItems,
       duplicateItem,
+      onFieldBlur,
     ],
   );
 

package/src/editor/commands/componentCommands.tsx

@@ -418,7 +418,7 @@ function getCreateCommentCommand(
     visibilityScopes: ["contextMenu"],
     execute: async (context: CommandContext<any>) => {
       context.editContext.addComment();
-      context.editContext.switchView("reviews");
+      context.editContext.switchView("comments");
     },
   };
 }

package/src/editor/field-types/ImageFieldEditor.tsx

@@ -58,6 +58,7 @@ export function ImageFieldEditor({
               refresh: "waitForQuietPeriod",
             });
           }}
+          onBlur={editContext.operations.onFieldBlur}
         />
       </div>
     </div>

package/src/editor/field-types/MultiLineText.tsx

@@ -81,6 +81,7 @@ export function MultiLineText({
         setValue(e.target.value);
         updateFieldValue(e.target.value as string);
       }}
+      onBlur={editContextRef.current?.operations.onFieldBlur}
     />
   );
 }

package/src/editor/field-types/PictureFieldEditor.tsx

@@ -114,6 +114,7 @@ export function PictureFieldEditor({
               refresh: "waitForQuietPeriod",
             });
           }}
+          onBlur={editContext.operations.onFieldBlur}
         />
       </div>
     </div>

package/src/editor/field-types/RawEditor.tsx

@@ -48,6 +48,7 @@ export function RawEditor({
         debouncedSetFieldvalue(e.target.value as string);
         // field.value = e.target.value;
       }}
+      onBlur={editContext?.operations.onFieldBlur}
     />
   );
 }

package/src/editor/field-types/RichTextEditorComponent.tsx

@@ -8,8 +8,8 @@ import {
 import { useThrottledCallback } from "use-debounce";
 import { useEffect, useRef, useState, useMemo } from "react";
 
-import { classNames } from "primereact/utils";
 import { ReactSlate } from "./richtext";
+import { SimpleRichTextEditor } from "./richtext/components/SimpleRichTextEditor";
 import { RichTextField, RichTextEditorProfile } from "./richtext/types";
 
 // Minimal fallback profile for when profile is null or undefined
@@ -17,24 +17,21 @@ const FALLBACK_PROFILE: RichTextEditorProfile = {
   toolbar: {
     groups: [
       {
-        id: 'basic-formatting',
-        label: 'Basic Formatting',
-        display: 'buttons' as const,
+        id: "basic-formatting",
+        label: "Basic Formatting",
+        display: "buttons" as const,
         showIconsOnly: true,
-        options: [          
-        ]
+        options: [],
       },
       {
-        id: 'basic-format',
-        label: '',
-        display: 'dropdown' as const,
+        id: "basic-format",
+        label: "",
+        display: "dropdown" as const,
         showIconsOnly: false,
-        options: [
-          { type: 'block' as const, id: 'no-tag' }
-        ]
-      }
-    ]
-  }
+        options: [{ type: "block" as const, id: "no-tag" }],
+      },
+    ],
+  },
 };
 
 export function RichTextEditorComponent({
@@ -49,11 +46,11 @@ export function RichTextEditorComponent({
   updateFieldValue?: (value: string) => void;
 }) {
   const editContextRef = useEditContextRef();
-  const modifiedFieldsContext = useModifiedFieldsContext(); 
+  const modifiedFieldsContext = useModifiedFieldsContext();
   const [focused, setFocused] = useState(false);
   const [value, setValue] = useState(field.value as string);
   const editorRef = useRef<HTMLDivElement>(null);
-  
+
   if (!editContextRef.current) return null;
 
   const fieldItem = field.descriptor.item;
@@ -69,11 +66,12 @@ export function RichTextEditorComponent({
 
   useEffect(() => {
     // Only update if the editor is not currently being edited by the user
-    const isEditorActive = focused && editorRef.current?.contains(document.activeElement);
-    const newValue = field.isHistoric 
-      ? field.value as string 
-      : modifiedField?.value ?? (field.value as string);
-    
+    const isEditorActive =
+      focused && editorRef.current?.contains(document.activeElement);
+    const newValue = field.isHistoric
+      ? (field.value as string)
+      : (modifiedField?.value ?? (field.value as string));
+
     if (!isEditorActive && newValue !== value) {
       setValue(newValue);
     }
@@ -95,7 +93,11 @@ export function RichTextEditorComponent({
 
   const handleChange = (newValue: string) => {
     // Skip empty content patterns for both paragraph and no-tag blocks
-    if ((newValue === "<p><br></p>" || newValue === "<br>" || newValue === "") && !field.value) return;
+    if (
+      (newValue === "<p><br></p>" || newValue === "<br>" || newValue === "") &&
+      !field.value
+    )
+      return;
     if (newValue !== value && !readOnly) {
       setValue(newValue);
       debouncedSetFieldvalue(newValue);
@@ -104,13 +106,13 @@ export function RichTextEditorComponent({
 
   // Use the profile directly or fall back to the minimal profile
   const editorProfile = profile ?? FALLBACK_PROFILE;
-  
+
   // const editorProfile = getDebugProfile(); // Debug profile with all options
   // console.log(editorProfile);
 
   return (
     <div ref={editorRef}>
-      <ReactSlate        
+      <SimpleRichTextEditor
         value={value}
         onChange={handleChange}
         onFocus={() => setFocused(true)}

package/src/editor/field-types/SingleLineText.tsx

@@ -172,6 +172,7 @@ export function SingleLineText({
         style={{ width: "100%" }}
         onChange={handleChange}
         onSelect={handleSelect}
+        onBlur={editContextRef.current?.operations.onFieldBlur}
       />
     </div>
   );