@alpaca-editor/core 1.0.4134 → 1.0.4140

package/src/editor/ai/AiResponseMessage.tsx

@@ -30,6 +30,127 @@ type ContentSegment =
       items: { id?: string; text: string; done?: boolean; note?: string }[];
     };
 
+// Helper to extract partial quick actions from potentially incomplete JSON during streaming
+const extractPartialQuickActions = (jsonText: string): QuickAction[] => {
+  const actions: QuickAction[] = [];
+
+  // First try to parse complete JSON
+  try {
+    const parsed = JSON.parse(jsonText);
+    const rawActions = Array.isArray(parsed)
+      ? parsed
+      : parsed?.actions || parsed?.buttons || parsed?.choices || [];
+    if (Array.isArray(rawActions)) {
+      rawActions.forEach((a: any) => {
+        if (!a) return;
+        const label = a.label || a.text || String(a.value || a.prompt || "");
+        if (label) {
+          actions.push({
+            id: a.id,
+            label,
+            prompt: a.prompt,
+            value: a.value,
+            style: a.style,
+            behavior:
+              a.behavior &&
+              (a.behavior === "compose" || a.behavior === "submit")
+                ? a.behavior
+                : a.submit === false ||
+                    a.compose === true ||
+                    a.draft === true ||
+                    a.mode === "compose"
+                  ? "compose"
+                  : undefined,
+            placeholder: a.placeholder,
+          });
+        }
+      });
+    }
+    return actions;
+  } catch (e) {
+    // JSON is incomplete, try to extract whatever complete action objects we can find
+  }
+
+  // Look for individual action objects in the partial JSON
+  // Match patterns like: { "label": "...", ... }
+  const labelPattern = /"(?:label|text)"\s*:\s*"([^"\\]*(\\.[^"\\]*)*)"/g;
+  const labelMatches: Array<{ label: string; startIdx: number }> = [];
+  let labelMatch;
+  while ((labelMatch = labelPattern.exec(jsonText)) !== null) {
+    if (labelMatch[1]) {
+      labelMatches.push({
+        label: labelMatch[1],
+        startIdx: labelMatch.index,
+      });
+    }
+  }
+
+  // For each label field found, try to find and parse the enclosing object
+  for (const { label, startIdx } of labelMatches) {
+    // Find the opening brace before this label field
+    let openBrace = -1;
+    for (let i = startIdx - 1; i >= 0; i--) {
+      if (jsonText[i] === "{") {
+        openBrace = i;
+        break;
+      }
+      if (jsonText[i] === "}") break; // Hit another object's end
+    }
+
+    if (openBrace === -1) continue;
+
+    // Find the closing brace after this label field
+    let closeBrace = -1;
+    let depth = 0;
+    for (let i = openBrace; i < jsonText.length; i++) {
+      if (jsonText[i] === "{") depth++;
+      if (jsonText[i] === "}") {
+        depth--;
+        if (depth === 0) {
+          closeBrace = i;
+          break;
+        }
+      }
+    }
+
+    // Extract the object and try to parse it
+    const objStr =
+      closeBrace !== -1
+        ? jsonText.substring(openBrace, closeBrace + 1)
+        : jsonText.substring(openBrace) + "}"; // Try to close incomplete object
+
+    try {
+      const obj = JSON.parse(objStr);
+      const actionLabel =
+        obj.label || obj.text || String(obj.value || obj.prompt || "");
+      if (actionLabel) {
+        actions.push({
+          id: obj.id,
+          label: actionLabel,
+          prompt: obj.prompt,
+          value: obj.value,
+          style: obj.style,
+          behavior:
+            obj.behavior &&
+            (obj.behavior === "compose" || obj.behavior === "submit")
+              ? obj.behavior
+              : obj.submit === false ||
+                  obj.compose === true ||
+                  obj.draft === true ||
+                  obj.mode === "compose"
+                ? "compose"
+                : undefined,
+          placeholder: obj.placeholder,
+        });
+      }
+    } catch (e) {
+      // Skip malformed objects
+    }
+  }
+
+  return actions;
+};
+
 function parseContentSegments(
   content?: string,
   hideIncomplete?: boolean,
@@ -151,16 +272,28 @@ function parseContentSegments(
       const jsonStart = afterOpenLineStart + openLineLength;
 
       const close = content.indexOf("```", jsonStart);
+      const jsonText = (
+        close === -1
+          ? content.slice(jsonStart)
+          : content.slice(jsonStart, close)
+      ).trim();
+
       if (close === -1) {
-        if (hideIncomplete) {
+        // Incomplete fenced block during streaming
+        if (hideIncomplete && pick.type === "quick") {
+          // Try to parse partial quick actions and show what we have so far
+          const partialActions = extractPartialQuickActions(jsonText);
+          if (partialActions.length > 0) {
+            segments.push({ kind: "actions", actions: partialActions });
+          }
+          break;
+        } else if (hideIncomplete) {
           break;
         } else {
           segments.push({ kind: "text", text: content.slice(pick.start) });
           break;
         }
       }
-
-      const jsonText = content.slice(jsonStart, close).trim();
       try {
         const parsed = JSON.parse(jsonText);
         if (pick.type === "quick") {
@@ -258,8 +391,22 @@ function parseContentSegments(
     }
 
     const braceEnd = findMatchingBraceEnd(braceStart);
+    const jsonText = (
+      braceEnd === -1
+        ? content.slice(braceStart)
+        : content.slice(braceStart, braceEnd + 1)
+    ).trim();
+
     if (braceEnd === -1) {
-      if (hideIncomplete) {
+      // Incomplete plain JSON block during streaming
+      if (hideIncomplete && pick.type === "quick") {
+        // Try to parse partial quick actions and show what we have so far
+        const partialActions = extractPartialQuickActions(jsonText);
+        if (partialActions.length > 0) {
+          segments.push({ kind: "actions", actions: partialActions });
+        }
+        break;
+      } else if (hideIncomplete) {
         break;
       } else {
         // Incomplete JSON; include the rest as text
@@ -268,8 +415,6 @@ function parseContentSegments(
         break;
       }
     }
-
-    const jsonText = content.slice(braceStart, braceEnd + 1).trim();
     try {
       const parsed = JSON.parse(jsonText);
       if (pick.type === "quick") {
@@ -342,6 +487,28 @@ function parseContentSegments(
   return segments;
 }
 
+// Helper to extract command links from markdown
+function extractCommandLinks(text: string): {
+  text: string;
+  links: Array<{ label: string; command: string; index: number }>;
+} {
+  const links: Array<{ label: string; command: string; index: number }> = [];
+  const commandLinkPattern = /\[([^\]]+)\]\(command:([^)]+)\)/g;
+  let match;
+
+  while ((match = commandLinkPattern.exec(text)) !== null) {
+    if (match[1] && match[2]) {
+      links.push({
+        label: match[1],
+        command: match[2],
+        index: match.index,
+      });
+    }
+  }
+
+  return { text, links };
+}
+
 function simpleFormatToHtml(text: string): string {
   return text
     .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
@@ -452,16 +619,58 @@ export function AiResponseMessage({
     [messages],
   );
 
-  const segmentsByMessageId = useMemo(() => {
-    const result: { [messageId: string]: ContentSegment[] } = {};
+  // Create a flat structure of content items: Text, ToolCalls, Text, ToolCalls, etc.
+  type FlatItem =
+    | {
+        type: "segment";
+        segment: ContentSegment;
+        messageId: string;
+        message: Message;
+      }
+    | {
+        type: "toolcalls";
+        toolCalls: ToolCall[];
+        messageId: string;
+        message: Message;
+      };
+
+  const flatItems = useMemo(() => {
+    const items: FlatItem[] = [];
+
     nonToolAssistantMessages.forEach((message) => {
       const contentString = (message.content ||
         message.formattedContent ||
         "") as string;
-      result[message.id] = parseContentSegments(contentString, isStreaming);
+      const segments = parseContentSegments(contentString, isStreaming);
+
+      // Add content segments
+      segments.forEach((segment) => {
+        items.push({
+          type: "segment",
+          segment,
+          messageId: message.id,
+          message,
+        });
+      });
+
+      // Add tool calls if present
+      const toolCalls =
+        message.tool_calls && message.tool_calls.length > 0
+          ? message.tool_calls
+          : preservedToolCalls[message.id] || [];
+
+      if (toolCalls.length > 0) {
+        items.push({
+          type: "toolcalls",
+          toolCalls,
+          messageId: message.id,
+          message,
+        });
+      }
     });
-    return result;
-  }, [nonToolAssistantMessages, isStreaming]);
+
+    return items;
+  }, [nonToolAssistantMessages, isStreaming, preservedToolCalls]);
 
   return (
     <div className="flex gap-3 p-4" data-testid="agent-message">
@@ -496,124 +705,212 @@ export function AiResponseMessage({
           </div>
         )}
 
-        {nonToolAssistantMessages.map((message, filteredIndex) => {
-          // 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[message.id] || [];
-
-          // Retrieve precomputed segments for this message
-          const segments = segmentsByMessageId[message.id] || [];
-
-          return (
-            <div
-              key={filteredIndex}
-              className={toolCalls.length > 0 ? "mb-2" : ""}
-            >
-              {segments.map((segment, idx) => {
-                if (segment.kind === "text") {
-                  const html = simpleFormatToHtml(segment.text.trim());
-                  if (!html) return null;
-                  return (
-                    <div
-                      key={"txt-" + idx}
-                      className="prose prose-sm max-w-none text-xs text-gray-700 select-text"
-                      dangerouslySetInnerHTML={{ __html: html }}
-                    />
-                  );
-                }
-                if (segment.kind === "todo") {
-                  const todo = segment;
-                  return (
-                    <div key={"todo-" + idx} className="my-2">
-                      {todo.title && (
-                        <div className="mb-1 text-xs 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-xs 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-gray-1 text-xs">
-                                  {item.note}
-                                </div>
-                              )}
-                            </div>
-                          </label>
-                        ))}
-                      </div>
-                    </div>
+        {flatItems.map((item, itemIndex) => {
+          const prevItem = itemIndex > 0 ? flatItems[itemIndex - 1] : null;
+          const shouldAddSpacing =
+            prevItem?.type === "toolcalls" && item.type === "segment";
+
+          if (item.type === "segment") {
+            const segment = item.segment;
+            const message = item.message;
+
+            if (segment.kind === "text") {
+              const trimmedText = segment.text.trim();
+              if (!trimmedText) return null;
+
+              // Check for command links in the text
+              const { text, links } = extractCommandLinks(trimmedText);
+
+              if (links.length > 0) {
+                // Split text around command links and render buttons
+                const parts: React.ReactElement[] = [];
+                let lastIndex = 0;
+
+                links.forEach((link, linkIdx) => {
+                  // Add text before the link
+                  if (link.index > lastIndex) {
+                    const textBefore = text.substring(lastIndex, link.index);
+                    const html = simpleFormatToHtml(textBefore);
+                    if (html) {
+                      parts.push(
+                        <span
+                          key={`text-${itemIndex}-${linkIdx}`}
+                          dangerouslySetInnerHTML={{ __html: html }}
+                        />,
+                      );
+                    }
+                  }
+
+                  // Add the button
+                  parts.push(
+                    <Button
+                      key={`btn-${itemIndex}-${linkIdx}`}
+                      size="sm"
+                      variant="outline"
+                      className="mx-1 inline-flex"
+                      onClick={() =>
+                        onQuickAction?.(
+                          {
+                            label: link.label,
+                            value: link.command,
+                            prompt: link.command,
+                          },
+                          message,
+                        )
+                      }
+                    >
+                      {link.label}
+                    </Button>,
                   );
+
+                  // Find the end of this match in the original text
+                  const matchEnd =
+                    link.index +
+                    `[${link.label}](command:${link.command})`.length;
+                  lastIndex = matchEnd;
+                });
+
+                // Add any remaining text after the last link
+                if (lastIndex < text.length) {
+                  const textAfter = text.substring(lastIndex);
+                  const html = simpleFormatToHtml(textAfter);
+                  if (html) {
+                    parts.push(
+                      <span
+                        key={`text-${itemIndex}-end`}
+                        dangerouslySetInnerHTML={{ __html: html }}
+                      />,
+                    );
+                  }
                 }
-                const actions = segment.actions;
+
                 return (
-                  <div key={"act-" + idx} className="my-2 flex flex-wrap gap-2">
-                    {actions.map((a, aIdx) => {
-                      const variant =
-                        a.style === "destructive"
-                          ? "destructive"
-                          : a.style === "outline"
-                            ? "outline"
-                            : a.style === "secondary"
-                              ? "secondary"
-                              : "default"; // primary
-                      return (
-                        <Button
-                          key={(a.id || a.label || "btn") + "-" + aIdx}
-                          size="sm"
-                          variant={variant as any}
-                          onClick={() =>
-                            onQuickAction?.(
-                              {
-                                label: a.label,
-                                prompt: a.prompt,
-                                value: a.value,
-                                behavior: a.behavior,
-                                placeholder: a.placeholder,
-                              },
-                              message,
-                            )
-                          }
-                        >
-                          {a.label}
-                        </Button>
-                      );
-                    })}
+                  <div
+                    key={`item-${itemIndex}`}
+                    className={`prose prose-sm max-w-none text-xs text-gray-700 select-text ${shouldAddSpacing ? "mt-3" : ""}`}
+                  >
+                    {parts}
                   </div>
                 );
-              })}
+              }
+
+              // No command links, render as normal
+              const html = simpleFormatToHtml(trimmedText);
+              if (!html) return null;
+              return (
+                <div
+                  key={`item-${itemIndex}`}
+                  className={`prose prose-sm max-w-none text-xs text-gray-700 select-text ${shouldAddSpacing ? "mt-3" : ""}`}
+                  dangerouslySetInnerHTML={{ __html: html }}
+                />
+              );
+            }
+
+            if (segment.kind === "todo") {
+              const todo = segment;
+              return (
+                <div
+                  key={`item-${itemIndex}`}
+                  className={`my-2 ${shouldAddSpacing ? "mt-3" : ""}`}
+                >
+                  {todo.title && (
+                    <div className="mb-1 text-xs font-medium text-gray-800">
+                      {todo.title}
+                    </div>
+                  )}
+                  <div className="flex flex-col gap-1">
+                    {todo.items.map((todoItem, iIdx) => (
+                      <label
+                        key={
+                          (todoItem.id || todoItem.text || "todo") + "-" + iIdx
+                        }
+                        className="flex items-start gap-2 text-xs text-gray-700"
+                      >
+                        <Checkbox
+                          checked={!!todoItem.done}
+                          onCheckedChange={() => {}}
+                          aria-readonly
+                          className="mt-0.5"
+                        />
+                        <div>
+                          <div
+                            className={
+                              todoItem.done ? "line-through opacity-70" : ""
+                            }
+                          >
+                            {todoItem.text}
+                          </div>
+                          {todoItem.note && (
+                            <div className="text-gray-1 text-xs">
+                              {todoItem.note}
+                            </div>
+                          )}
+                        </div>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              );
+            }
+
+            // segment.kind === "actions"
+            const actions = segment.actions;
+            return (
+              <div
+                key={`item-${itemIndex}`}
+                className={`my-2 flex flex-wrap gap-2 ${shouldAddSpacing ? "mt-3" : ""}`}
+              >
+                {actions.map((a, aIdx) => {
+                  const variant =
+                    a.style === "destructive"
+                      ? "destructive"
+                      : a.style === "outline"
+                        ? "outline"
+                        : a.style === "secondary"
+                          ? "secondary"
+                          : "default"; // primary
+                  return (
+                    <Button
+                      key={(a.id || a.label || "btn") + "-" + aIdx}
+                      size="sm"
+                      variant={variant as any}
+                      onClick={() =>
+                        onQuickAction?.(
+                          {
+                            label: a.label,
+                            prompt: a.prompt,
+                            value: a.value,
+                            behavior: a.behavior,
+                            placeholder: a.placeholder,
+                          },
+                          message,
+                        )
+                      }
+                    >
+                      {a.label}
+                    </Button>
+                  );
+                })}
+              </div>
+            );
+          }
+
+          // item.type === "toolcalls"
+          return (
+            <div key={`item-${itemIndex}`} className="mt-3">
               <ToolCallDisplay
-                toolCalls={toolCalls}
+                toolCalls={item.toolCalls}
                 finished={finished}
                 openPopovers={openPopovers}
                 setOpenPopovers={setOpenPopovers}
-                messageId={message.id}
+                messageId={item.messageId}
               />
             </div>
           );
         })}
 
         {finished && editOperations.length > 0 && (
-          <div className="my-2 flex items-center gap-2">
+          <div className="mt-3 flex items-center gap-2">
             <div className="tour-ai-response-message-changes text-xs">
               {editOperations.length} changes
             </div>