@alpaca-editor/core 1.0.4018 → 1.0.4027

package/src/editor/ai/AiTerminal.tsx

@@ -26,6 +26,7 @@ type Response = {
   numOutputTokens: number;
   numCachedTokens: number;
   state: string;
+  agentName?: string; // Updated agent name (only sent when the agent name has been updated)
 };
 
 export type ToolCall = {
@@ -44,7 +45,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 = {
@@ -64,28 +65,34 @@ export function AiTerminal({
   createAiContext,
   defaultProfile,
   options,
+  onAgentNameUpdate,
 }: {
   closeButton?: React.ReactNode;
   createAiContext: ({ editContext }: { editContext: any }) => AiContext;
   defaultProfile?: string;
   options?: AiTerminalOptions;
+  onAgentNameUpdate?: (name: string) => void;
 }) {
   const editContext = useEditContext();
   const [showPredefined, setShowPredefined] = useState(false);
 
   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("");
   const [profiles, setProfiles] = useState<AiProfile[]>([]);
   const [activeProfile, setActiveProfile] = useState<AiProfile>();
   const [initialPromptExecuted, setInitialPromptExecuted] = useState(false);
-  const [agentId] = useState<string>(() => crypto.randomUUID());
+  const [agentId, setAgentId] = 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 +132,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 +169,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,50 +177,76 @@ 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) => {
+
+      // Group messages by conversation turns (user + assistant pairs)
+      let i = 0;
+      while (i < formattedMessages.length) {
+        const message = formattedMessages[i];
+        if (!message) {
+          i++;
+          continue;
+        }
+
         if (message.role === "user") {
           // User messages appear as commands
           terminalMessages.push({
             type: "command",
-            text: message.content
+            text: message.content,
           });
+          i++;
+
+          // Look for following assistant messages to group together
+          const assistantMessages: Message[] = [];
+          while (i < formattedMessages.length) {
+            const assistantMessage = formattedMessages[i];
+            if (assistantMessage && assistantMessage.role === "assistant") {
+              assistantMessages.push(assistantMessage);
+              i++;
+            } else {
+              break;
+            }
+          }
+
+          // If we have assistant messages, render them with AiResponseMessage
+          if (assistantMessages.length > 0) {
+            terminalMessages.push({
+              type: "response",
+              text: (
+                <AiResponseMessage
+                  messages={assistantMessages}
+                  editOperations={[]} // No edit operations for historical messages
+                  finished={true}
+                />
+              ),
+            });
+          }
         } else if (message.role === "assistant") {
-          // Assistant messages appear as responses
+          // Handle standalone assistant messages
           terminalMessages.push({
             type: "response",
             text: (
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: message.formattedContent || message.content || "",
-                }}
+              <AiResponseMessage
+                messages={[message]}
+                editOperations={[]} // No edit operations for historical messages
+                finished={true}
               />
-            )
-          });
-        }
-        // Add tool calls if present
-        if (message.tool_calls && message.tool_calls.length > 0) {
-          message.tool_calls.forEach((toolCall) => {
-            terminalMessages.push({
-              type: "response",
-              text: (
-                <div className="text-xs text-gray-400">
-                  🔧 {toolCall.displayName}
-                </div>
-              )
-            });
+            ),
           });
+          i++;
+        } else {
+          // Skip other message types (like tool messages)
+          i++;
         }
-      });
-      
+      }
+
       setInitialTerminalMessages(terminalMessages);
     }
   }, [options?.initialMessages]);
@@ -238,10 +280,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,
@@ -294,8 +337,7 @@ export function AiTerminal({
     const selectedText = editContext?.selectedRange?.text || null;
     if (!activeProfile || !model) return;
 
-    // Build complete message history for API call
-    const conversationHistory = [...messagesRef.current, userMessage];
+    // Only send the new user message - message history will be loaded from database
     const messages = [
       ...(options?.hiddenSystemPrompt
         ? [
@@ -308,9 +350,13 @@ export function AiTerminal({
             },
           ]
         : []),
-      ...conversationHistory,
+      userMessage, // Send only the new user message
     ];
 
+    // Update local state to include the new user message for UI display
+    setMessages((prevMessages) => [...prevMessages, userMessage]);
+    setResponseMessages((prevMessages) => [...prevMessages, userMessage]);
+
     const response = await executePrompt(
       messages,
       context,
@@ -332,6 +378,12 @@ export function AiTerminal({
 
     if (response) {
       handleResponse(response, callback, true);
+
+      // Handle agent name update
+      if ((response as any).agentName && onAgentNameUpdate) {
+        onAgentNameUpdate((response as any).agentName);
+      }
+
       if (context.callback) context.callback(response);
       editContext?.requestRefresh("immediate");
     }
@@ -371,10 +423,12 @@ export function AiTerminal({
               setResponseMessages([]);
               setResponse(undefined);
               setInitialTerminalMessages(undefined);
+              // Generate a new agentId when clearing the terminal to start fresh
+              setAgentId(crypto.randomUUID());
             }}
             initialMessages={initialTerminalMessages}
             infobar={
-              response?.numInputTokens && (
+              response?.numInputTokens && response?.numInputTokens > 0 ? (
                 <div
                   className="text-right text-gray-400"
                   style={{ fontSize: "10px" }}
@@ -386,7 +440,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/ai/EditorAiTerminal.tsx

@@ -5,9 +5,11 @@ import { createEditorAiContext } from "./editorAiContext";
 export function EditorAiTerminal({
   closeButton,
   options,
+  onAgentNameUpdate,
 }: {
   closeButton?: React.ReactNode;
   options?: AiTerminalOptions;
+  onAgentNameUpdate?: (name: string) => void;
 }) {
   return (
     <AiTerminal
@@ -15,6 +17,7 @@ export function EditorAiTerminal({
       closeButton={closeButton}
       createAiContext={createEditorAiContext}
       defaultProfile="Editor"
+      onAgentNameUpdate={onAgentNameUpdate}
     />
   );
 }

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>
   );