@alpaca-editor/core 1.0.4085 → 1.0.4088

package/src/editor/ai/AiResponseMessage.tsx

@@ -2,11 +2,12 @@ import React, { useState, useEffect, useMemo } from "react";
 
 import { useEditContext } from "../client/editContext";
 import { EditOperation } from "../../types";
-import { Message } from "./AiTerminal";
+import { Message, ToolCall } from "./AiTerminal";
 import { ToolCallDisplay } from "./ToolCallDisplay";
 
 import { X, Bot, Loader2 } from "lucide-react";
 import { Button } from "../../components/ui/button";
+import { Checkbox } from "../../components/ui/checkbox";
 
 type QuickAction = {
   id?: string;
@@ -18,7 +19,12 @@ type QuickAction = {
 
 type ContentSegment =
   | { kind: "text"; text: string }
-  | { kind: "actions"; actions: QuickAction[] };
+  | { kind: "actions"; actions: QuickAction[] }
+  | {
+      kind: "todo";
+      title?: string;
+      items: { id?: string; text: string; done?: boolean; note?: string }[];
+    };
 
 function parseContentSegments(
   content?: string,
@@ -27,22 +33,24 @@ function parseContentSegments(
   if (!content) return [];
 
   const segments: ContentSegment[] = [];
-  const fencedOpenToken = "```quick_action_buttons";
-  const plainToken = "quick_action_buttons";
+  const fencedQuickToken = "```quick_action_buttons";
+  const plainQuickToken = "quick_action_buttons";
+  const fencedTodoToken = "```todo_list";
+  const plainTodoToken = "todo_list";
 
   // Helper: find next valid plain token occurrence (at line start or after newline)
-  const findNextPlainToken = (fromIndex: number): number => {
-    let idx = content.indexOf(plainToken, fromIndex);
+  const findNextPlainHeader = (token: string, fromIndex: number): number => {
+    let idx = content.indexOf(token, fromIndex);
     while (idx !== -1) {
       const before = idx > 0 ? content[idx - 1] : "\n";
-      const after = content[idx + plainToken.length] || "\n";
+      const after = content[idx + token.length] || "\n";
       const isBoundaryBefore = before === "\n" || before === "\r";
       const isBoundaryAfter =
         after === "\n" || after === "\r" || after === ":" || /\s/.test(after);
       // Ensure it's not the fenced token which would have ``` right before
       const isFencedPrefix = content.slice(Math.max(0, idx - 3), idx) === "```";
       if (isBoundaryBefore && isBoundaryAfter && !isFencedPrefix) return idx;
-      idx = content.indexOf(plainToken, idx + 1);
+      idx = content.indexOf(token, idx + 1);
     }
     return -1;
   };
@@ -84,32 +92,54 @@ function parseContentSegments(
 
   let cursor = 0;
   while (cursor < content.length) {
-    const nextFenced = content.indexOf(fencedOpenToken, cursor);
-    const nextPlain = findNextPlainToken(cursor);
-
-    // Determine which token occurs first
-    let useKind: "fenced" | "plain" | null = null;
-    let start = -1;
-    if (nextFenced !== -1 && (nextPlain === -1 || nextFenced <= nextPlain)) {
-      useKind = "fenced";
-      start = nextFenced;
-    } else if (nextPlain !== -1) {
-      useKind = "plain";
-      start = nextPlain;
+    const nextFencedQuick = content.indexOf(fencedQuickToken, cursor);
+    const nextPlainQuick = findNextPlainHeader(plainQuickToken, cursor);
+    const nextFencedTodo = content.indexOf(fencedTodoToken, cursor);
+    const nextPlainTodo = findNextPlainHeader(plainTodoToken, cursor);
+
+    // Determine which token occurs first among all supported tokens
+    type TokenPick = {
+      start: number;
+      kind: "fenced" | "plain";
+      type: "quick" | "todo";
+    };
+    const candidates: TokenPick[] = [];
+    if (nextFencedQuick !== -1)
+      candidates.push({
+        start: nextFencedQuick,
+        kind: "fenced",
+        type: "quick",
+      });
+    if (nextPlainQuick !== -1)
+      candidates.push({ start: nextPlainQuick, kind: "plain", type: "quick" });
+    if (nextFencedTodo !== -1)
+      candidates.push({ start: nextFencedTodo, kind: "fenced", type: "todo" });
+    if (nextPlainTodo !== -1)
+      candidates.push({ start: nextPlainTodo, kind: "plain", type: "todo" });
+
+    let pick: TokenPick | null = null;
+    if (candidates.length > 0) {
+      pick = candidates.reduce((min, cur) =>
+        cur.start < min.start ? cur : min,
+      );
     }
 
-    if (useKind === null || start === -1) {
+    if (pick === null) {
       const tail = content.slice(cursor);
       if (tail) segments.push({ kind: "text", text: tail });
       break;
     }
 
     // Push any text before the token
-    const textBefore = content.slice(cursor, start);
+    const textBefore = content.slice(cursor, pick.start);
     if (textBefore) segments.push({ kind: "text", text: textBefore });
 
-    if (useKind === "fenced") {
-      const afterOpenLineStart = start + fencedOpenToken.length;
+    if (pick.kind === "fenced") {
+      const openTokenLength =
+        pick.type === "quick"
+          ? fencedQuickToken.length
+          : fencedTodoToken.length;
+      const afterOpenLineStart = pick.start + openTokenLength;
       const openLineMatch = content
         .slice(afterOpenLineStart)
         .match(/^[^\n\r]*\r?\n?/);
@@ -121,7 +151,7 @@ function parseContentSegments(
         if (hideIncomplete) {
           break;
         } else {
-          segments.push({ kind: "text", text: content.slice(start) });
+          segments.push({ kind: "text", text: content.slice(pick.start) });
           break;
         }
       }
@@ -129,31 +159,60 @@ function parseContentSegments(
       const jsonText = content.slice(jsonStart, close).trim();
       try {
         const parsed = JSON.parse(jsonText);
-        const rawActions = Array.isArray(parsed)
-          ? parsed
-          : parsed?.actions || parsed?.buttons || parsed?.choices || [];
-        const actions: QuickAction[] = [];
-        if (Array.isArray(rawActions)) {
-          rawActions.forEach((a) => {
-            if (!a) return;
-            const action: QuickAction = {
-              id: a.id,
-              label: a.label || a.text || String(a.value || a.prompt || ""),
-              prompt: a.prompt,
-              value: a.value,
-              style: a.style,
-            };
-            if (action.label) actions.push(action);
-          });
-        }
-        if (actions.length > 0) {
-          segments.push({ kind: "actions", actions });
+        if (pick.type === "quick") {
+          const rawActions = Array.isArray(parsed)
+            ? parsed
+            : parsed?.actions || parsed?.buttons || parsed?.choices || [];
+          const actions: QuickAction[] = [];
+          if (Array.isArray(rawActions)) {
+            rawActions.forEach((a) => {
+              if (!a) return;
+              const action: QuickAction = {
+                id: a.id,
+                label: a.label || a.text || String(a.value || a.prompt || ""),
+                prompt: a.prompt,
+                value: a.value,
+                style: a.style,
+              };
+              if (action.label) actions.push(action);
+            });
+          }
+          if (actions.length > 0) {
+            segments.push({ kind: "actions", actions });
+          }
+        } else {
+          // todo_list
+          const todoItems = Array.isArray(parsed)
+            ? parsed
+            : parsed?.items || [];
+          const title = Array.isArray(parsed) ? undefined : parsed?.title;
+          const cleaned = (Array.isArray(todoItems) ? todoItems : [])
+            .map((i) => {
+              if (!i) return null;
+              const text = i.text || i.label || String(i.task || i.title || "");
+              if (!text) return null;
+              return {
+                id: i.id,
+                text,
+                done: !!(i.done ?? i.completed ?? i.checked),
+                note: i.note || i.description,
+              } as { id?: string; text: string; done?: boolean; note?: string };
+            })
+            .filter(Boolean) as {
+            id?: string;
+            text: string;
+            done?: boolean;
+            note?: string;
+          }[];
+          if (cleaned.length > 0) {
+            segments.push({ kind: "todo", title, items: cleaned });
+          }
         }
       } catch {
         if (!hideIncomplete) {
           segments.push({
             kind: "text",
-            text: content.slice(start, close + 3),
+            text: content.slice(pick.start, close + 3),
           });
         }
       }
@@ -162,7 +221,9 @@ function parseContentSegments(
     }
 
     // Plain header without backticks
-    const afterHeaderStart = start + plainToken.length;
+    const headerTokenLength =
+      pick.type === "quick" ? plainQuickToken.length : plainTodoToken.length;
+    const afterHeaderStart = pick.start + headerTokenLength;
     const headerRestMatch = content
       .slice(afterHeaderStart)
       .match(/^[^\n\r]*\r?\n?/);
@@ -187,7 +248,7 @@ function parseContentSegments(
         break;
       } else {
         // Incomplete JSON; include the rest as text
-        const remaining = content.slice(start);
+        const remaining = content.slice(pick.start);
         if (remaining) segments.push({ kind: "text", text: remaining });
         break;
       }
@@ -196,29 +257,55 @@ function parseContentSegments(
     const jsonText = content.slice(braceStart, braceEnd + 1).trim();
     try {
       const parsed = JSON.parse(jsonText);
-      const rawActions = Array.isArray(parsed)
-        ? parsed
-        : parsed?.actions || parsed?.buttons || parsed?.choices || [];
-      const actions: QuickAction[] = [];
-      if (Array.isArray(rawActions)) {
-        rawActions.forEach((a) => {
-          if (!a) return;
-          const action: QuickAction = {
-            id: a.id,
-            label: a.label || a.text || String(a.value || a.prompt || ""),
-            prompt: a.prompt,
-            value: a.value,
-            style: a.style,
-          };
-          if (action.label) actions.push(action);
-        });
-      }
-      if (actions.length > 0) {
-        segments.push({ kind: "actions", actions });
+      if (pick.type === "quick") {
+        const rawActions = Array.isArray(parsed)
+          ? parsed
+          : parsed?.actions || parsed?.buttons || parsed?.choices || [];
+        const actions: QuickAction[] = [];
+        if (Array.isArray(rawActions)) {
+          rawActions.forEach((a) => {
+            if (!a) return;
+            const action: QuickAction = {
+              id: a.id,
+              label: a.label || a.text || String(a.value || a.prompt || ""),
+              prompt: a.prompt,
+              value: a.value,
+              style: a.style,
+            };
+            if (action.label) actions.push(action);
+          });
+        }
+        if (actions.length > 0) {
+          segments.push({ kind: "actions", actions });
+        }
+      } else {
+        const todoItems = Array.isArray(parsed) ? parsed : parsed?.items || [];
+        const title = Array.isArray(parsed) ? undefined : parsed?.title;
+        const cleaned = (Array.isArray(todoItems) ? todoItems : [])
+          .map((i) => {
+            if (!i) return null;
+            const text = i.text || i.label || String(i.task || i.title || "");
+            if (!text) return null;
+            return {
+              id: i.id,
+              text,
+              done: !!(i.done ?? i.completed ?? i.checked),
+              note: i.note || i.description,
+            } as { id?: string; text: string; done?: boolean; note?: string };
+          })
+          .filter(Boolean) as {
+          id?: string;
+          text: string;
+          done?: boolean;
+          note?: string;
+        }[];
+        if (cleaned.length > 0) {
+          segments.push({ kind: "todo", title, items: cleaned });
+        }
       }
     } catch {
       // On parse failure, keep original as text (excluding already-pushed prefix)
-      const fallbackText = content.slice(start, braceEnd + 1);
+      const fallbackText = content.slice(pick.start, braceEnd + 1);
       if (!hideIncomplete && fallbackText) {
         segments.push({ kind: "text", text: fallbackText });
       }
@@ -260,7 +347,7 @@ export function AiResponseMessage({
 
   // Store tool calls to preserve them during streaming
   const [preservedToolCalls, setPreservedToolCalls] = useState<{
-    [messageId: string]: any[];
+    [messageId: string]: ToolCall[];
   }>({});
 
   // Track popover open state for each tool call
@@ -268,18 +355,46 @@ export function AiResponseMessage({
     [key: string]: boolean;
   }>({});
 
-  // Update preserved tool calls when messages change
-  useEffect(() => {
-    const newPreservedToolCalls = { ...preservedToolCalls };
+  // Helper to avoid unnecessary updates when tool calls are unchanged
+  const areToolCallsEqual = (a?: ToolCall[], b?: ToolCall[]): boolean => {
+    if (a === b) return true;
+    if (!a || !b) return false;
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      const ai = a[i];
+      const bi = b[i];
+      if (
+        ai?.id !== bi?.id ||
+        ai?.displayName !== bi?.displayName ||
+        ai?.function?.name !== bi?.function?.name ||
+        ai?.function?.arguments !== bi?.function?.arguments
+      ) {
+        return false;
+      }
+    }
+    return true;
+  };
 
-    messages.forEach((message) => {
-      if (message.tool_calls && message.tool_calls.length > 0) {
-        // Store non-empty tool calls
-        newPreservedToolCalls[message.id] = message.tool_calls;
+  // Update preserved tool calls when messages change, but only if values actually change
+  useEffect(() => {
+    setPreservedToolCalls((prev) => {
+      let changed = false;
+      const next = { ...prev };
+
+      for (const message of messages) {
+        const hasToolCalls = !!(
+          message.tool_calls && message.tool_calls.length > 0
+        );
+        if (!hasToolCalls) continue;
+
+        if (!areToolCallsEqual(next[message.id], message.tool_calls)) {
+          next[message.id] = message.tool_calls!;
+          changed = true;
+        }
       }
-    });
 
-    setPreservedToolCalls(newPreservedToolCalls);
+      return changed ? next : prev;
+    });
   }, [messages]);
 
   const reversedEditOperations = [...editOperations].reverse();
@@ -317,7 +432,7 @@ export function AiResponseMessage({
   }, [nonToolAssistantMessages, isStreaming]);
 
   return (
-    <div className="flex gap-3 p-4">
+    <div className="flex gap-3 p-4" data-testid="agent-message">
       <div className="flex-shrink-0">
         <Bot className="h-6 w-6 text-green-600" strokeWidth={1} />
       </div>
@@ -376,6 +491,47 @@ export function AiResponseMessage({
                     />
                   );
                 }
+                if (segment.kind === "todo") {
+                  const todo = segment;
+                  return (
+                    <div key={"todo-" + idx} className="my-2">
+                      {todo.title && (
+                        <div className="mb-1 text-sm font-medium text-gray-800">
+                          {todo.title}
+                        </div>
+                      )}
+                      <div className="flex flex-col gap-1">
+                        {todo.items.map((item, iIdx) => (
+                          <label
+                            key={(item.id || item.text || "todo") + "-" + iIdx}
+                            className="flex items-start gap-2 text-sm text-gray-700"
+                          >
+                            <Checkbox
+                              checked={!!item.done}
+                              onCheckedChange={() => {}}
+                              aria-readonly
+                              className="mt-0.5"
+                            />
+                            <div>
+                              <div
+                                className={
+                                  item.done ? "line-through opacity-70" : ""
+                                }
+                              >
+                                {item.text}
+                              </div>
+                              {item.note && (
+                                <div className="text-xs text-gray-500">
+                                  {item.note}
+                                </div>
+                              )}
+                            </div>
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                  );
+                }
                 const actions = segment.actions;
                 return (
                   <div key={"act-" + idx} className="my-2 flex flex-wrap gap-2">

package/src/editor/ai/AiTerminal.tsx

@@ -342,20 +342,36 @@ export function AiTerminal({
 
     // Build complete message history for API call
     const conversationHistory = [...messagesRef.current, userMessage];
-    const messages = [
-      ...(options?.hiddenSystemPrompt
-        ? [
-            {
-              role: "system",
-              name: "system",
-              content: options.hiddenSystemPrompt,
-              id: crypto.randomUUID(), // Use UUID instead of hardcoded 0
-              toolCalls: [],
-            },
-          ]
-        : []),
-      ...conversationHistory,
-    ];
+    const shouldAddTodoFormat = /\b(to-?do|check\s*list|task\s*list)\b/i.test(
+      text,
+    );
+    const todoFormatInstructions =
+      "If you produce a to-do list, output it as a 'todo_list' JSON block. Prefer one of these two forms only, with no extra commentary before/after it: \n" +
+      '```todo_list\n{ "title": "<optional title>", "items": [ { "text": "<task>", "done": false, "note": "<optional>" } ] }\n```\n' +
+      "or a plain header: todo_list: { ... }. Include only fields: title (optional), items (array of {text, done?, note?}).";
+    const systemMessages = options?.hiddenSystemPrompt
+      ? [
+          {
+            role: "system",
+            name: "system",
+            content: options.hiddenSystemPrompt,
+            id: crypto.randomUUID(),
+            toolCalls: [],
+          },
+        ]
+      : [];
+    const todoSystem = shouldAddTodoFormat
+      ? [
+          {
+            role: "system",
+            name: "system",
+            content: todoFormatInstructions,
+            id: crypto.randomUUID(),
+            toolCalls: [],
+          },
+        ]
+      : [];
+    const messages = [...systemMessages, ...todoSystem, ...conversationHistory];
 
     const response = await executePrompt(
       messages,