@marimo-team/frontend 0.23.15-dev6 → 0.23.15-dev63

package/src/components/chat/chat-panel.tsx

@@ -86,20 +86,53 @@ import {
 import { renderUIMessage } from "./chat-display";
 import { ChatHistoryPopover } from "./chat-history-popover";
 import {
+  type ChatMessagePart,
   convertToFileUIPart,
   generateChatTitle,
   handleToolCall,
   hasPendingToolCalls,
+  hasUnresolvedToolCalls,
   isLastMessageReasoning,
   PROVIDERS_THAT_SUPPORT_ATTACHMENTS,
+  type QueuedUserMessage,
+  shouldFlushQueue,
   useFileState,
+  useMessageQueue,
 } from "./chat-utils";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
 import { focusInputAndMoveToEnd } from "@/core/codemirror/utils";
+import ScrollToBottomButton from "./acp/scroll-to-bottom-button";
 
 // Default mode for the AI
 const DEFAULT_MODE = "manual";
 
+const QueuedMessageDisplay = memo(
+  ({ message }: { message: QueuedUserMessage }) => {
+    const textParts = message.parts.filter(
+      (p): p is TextUIPart => p.type === "text",
+    );
+    const content = textParts.map((p) => p.text).join("\n");
+    const fileParts = message.parts.filter(
+      (p): p is FileUIPart => p.type === "file",
+    );
+
+    return (
+      <div className="flex justify-end">
+        <div className="w-[95%] bg-background border border-dashed p-2 rounded-sm opacity-70">
+          {fileParts.map((filePart, idx) => (
+            <AttachmentRenderer attachment={filePart} key={idx} />
+          ))}
+          <div className="flex items-center justify-end gap-2 text-sm text-muted-foreground">
+            <span className="wrap-break-word">{content}</span>
+            <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+QueuedMessageDisplay.displayName = "QueuedMessageDisplay";
+
 interface ChatHeaderProps {
   onNewChat: () => void;
   activeChatId: ChatId | undefined;
@@ -487,12 +520,19 @@ const ChatPanelBody = () => {
   const [pendingPrompt, setPendingPrompt] = useAtom(pendingAiPromptAtom);
   const [input, setInput] = useState("");
   const [newThreadInput, setNewThreadInput] = useState("");
+  const [isScrolledToBottom, setIsScrolledToBottom] = useState(true);
   const { files, addFiles, clearFiles, removeFile } = useFileState();
+  const {
+    messages: queuedMessages,
+    enqueue: enqueueUserMessage,
+    flushNext: flushNextQueuedMessage,
+    clear: clearQueuedMessages,
+    hasQueuedRef,
+  } = useMessageQueue();
   const newThreadInputRef = useRef<ReactCodeMirrorRef>(null);
   const newMessageInputRef = useRef<ReactCodeMirrorRef>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
   const runtimeManager = useRuntimeManager();
   const { invokeAiTool, sendRun } = useRequestClient();
   const { openModal, closeModal } = useImperativeModal();
@@ -560,7 +600,7 @@ const ChatPanelBody = () => {
         };
       },
     }),
-    onFinish: ({ messages }) => {
+    onFinish: ({ messages, isError, isAbort }) => {
       setChatState((prev) => {
         return replaceMessagesInChat({
           chatState: prev,
@@ -568,6 +608,7 @@ const ChatPanelBody = () => {
           messages: messages,
         });
       });
+      tryFlushQueuedMessages(messages, { isError, isAbort });
     },
     onToolCall: async ({ toolCall }) => {
       await handleToolCall({
@@ -586,23 +627,103 @@ const ChatPanelBody = () => {
     },
   });
 
+  const sendUserMessage = useEvent((parts: ChatMessagePart[]) => {
+    sendMessage({ role: "user", parts });
+  });
+
+  const tryFlushQueuedMessages = useEvent(
+    (
+      chatMessages: typeof messages,
+      opts: { isError: boolean; isAbort: boolean },
+    ) => {
+      if (!hasQueuedRef.current) {
+        return;
+      }
+      if (
+        shouldFlushQueue({
+          isError: opts.isError,
+          isAbort: opts.isAbort,
+          hasPendingToolCalls: hasPendingToolCalls(chatMessages),
+          hasUnresolvedToolCalls: hasUnresolvedToolCalls(chatMessages),
+        })
+      ) {
+        flushNextQueuedMessage(sendUserMessage);
+      }
+    },
+  );
+
   const isLoading = status === "submitted" || status === "streaming";
+  // Read via a ref so the queue-vs-send decision stays correct even when it is
+  // made after an `await` (e.g. resolving @-context), by which point the render
+  // closure's `isLoading` may be stale.
+  const isLoadingRef = useRef(isLoading);
+  isLoadingRef.current = isLoading;
+
+  const submitOrQueue = useEvent((parts: ChatMessagePart[]) => {
+    if (isLoadingRef.current || hasQueuedRef.current) {
+      enqueueUserMessage(parts);
+    } else {
+      sendUserMessage(parts);
+    }
+  });
+
+  const handleScroll = useEvent(() => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const hasOverflow = scrollHeight > clientHeight;
+    const isAtBottom = hasOverflow
+      ? Math.abs(scrollHeight - clientHeight - scrollTop) < 5
+      : true;
+    setIsScrolledToBottom(isAtBottom);
+  });
+
+  const scrollToBottom = useEvent((smooth = false) => {
+    const container = scrollContainerRef.current;
+    if (!container) {
+      return;
+    }
+
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: smooth ? "smooth" : "auto",
+    });
+  });
 
   // Check if we're currently streaming reasoning in the latest message
   const isStreamingReasoning =
     isLoading && messages.length > 0 && isLastMessageReasoning(messages);
 
-  // Scroll to the latest chat message at the bottom
+  // Pin to the bottom while the user is already there.
   useEffect(() => {
-    const scrollToBottom = () => {
-      if (scrollContainerRef.current) {
-        const container = scrollContainerRef.current;
-        container.scrollTop = container.scrollHeight;
-      }
-    };
+    setIsScrolledToBottom(true);
+    clearQueuedMessages();
+  }, [activeChatId, clearQueuedMessages]);
 
-    requestAnimationFrame(scrollToBottom);
-  }, [activeChatId]);
+  useEffect(() => {
+    if (!isScrolledToBottom) {
+      return;
+    }
+    const frame = requestAnimationFrame(() => {
+      scrollToBottom();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [messages, queuedMessages, isLoading, isScrolledToBottom, scrollToBottom]);
+
+  // Retry when tool parts resolve after the stream ends (e.g. assistant text
+  // trails a still-running tool call, so `onFinish` alone cannot flush).
+  useEffect(() => {
+    if (isLoading) {
+      return;
+    }
+    tryFlushQueuedMessages(messages, {
+      isError: error != null,
+      isAbort: false,
+    });
+  }, [messages, isLoading, error, tryFlushQueuedMessages]);
 
   const startNewChatState = useEvent((initialMessage: string) => {
     const now = Date.now();
@@ -654,6 +775,7 @@ const ChatPanelBody = () => {
     setActiveChat(null);
     setInput("");
     setNewThreadInput("");
+    clearQueuedMessages();
     clearFiles();
   });
 
@@ -699,15 +821,12 @@ const ChatPanelBody = () => {
       const { contextPart, attachments } = await resolveChatContext(newValue);
 
       e?.preventDefault();
-      sendMessage({
-        role: "user",
-        parts: [
-          { type: "text", text: newValue },
-          ...(contextPart ? [contextPart] : []),
-          ...(fileParts ?? []),
-          ...attachments,
-        ],
-      });
+      submitOrQueue([
+        { type: "text", text: newValue },
+        ...(contextPart ? [contextPart] : []),
+        ...(fileParts ?? []),
+        ...attachments,
+      ]);
       setInput("");
       clearFiles();
     },
@@ -737,14 +856,11 @@ const ChatPanelBody = () => {
       setInput(newThreadInput);
     }
     const { contextPart, attachments } = await resolveChatContext(prompt);
-    sendMessage({
-      role: "user",
-      parts: [
-        { type: "text", text: prompt },
-        ...(contextPart ? [contextPart] : []),
-        ...attachments,
-      ],
-    });
+    submitOrQueue([
+      { type: "text", text: prompt },
+      ...(contextPart ? [contextPart] : []),
+      ...attachments,
+    ]);
   });
 
   const isNewThread = messages.length === 0;
@@ -824,49 +940,62 @@ const ChatPanelBody = () => {
         />
       </TooltipProvider>
 
-      <div
-        className="flex-1 px-3 bg-(--slate-1) gap-4 py-3 flex flex-col overflow-y-auto"
-        ref={scrollContainerRef}
-      >
-        {isNewThread && (
-          <div className="flex flex-col gap-2">
-            <div className="rounded-md border bg-background">
-              {filesPills}
-              {chatInput}
+      <div className="flex-1 flex flex-col overflow-hidden relative min-h-0">
+        <div
+          className="flex-1 px-3 bg-(--slate-1) gap-4 py-3 flex flex-col overflow-y-auto"
+          ref={scrollContainerRef}
+          onScroll={handleScroll}
+        >
+          {isNewThread && (
+            <div className="flex flex-col gap-2">
+              <div className="rounded-md border bg-background">
+                {filesPills}
+                {chatInput}
+              </div>
+              <PairWithAgentCallout onPairWithAgent={handlePairWithAgent} />
             </div>
-            <PairWithAgentCallout onPairWithAgent={handlePairWithAgent} />
-          </div>
-        )}
-
-        {messages.map((message, idx) => (
-          <ChatMessageDisplay
-            key={message.id}
-            message={message}
-            index={idx}
-            onEdit={handleMessageEdit}
-            isStreamingReasoning={isStreamingReasoning}
-            isLast={idx === messages.length - 1}
-            isActive={isLoading}
-            addToolApprovalResponse={addToolApprovalResponse}
-          />
-        ))}
+          )}
+
+          {messages.map((message, idx) => (
+            <ChatMessageDisplay
+              key={message.id}
+              message={message}
+              index={idx}
+              onEdit={handleMessageEdit}
+              isStreamingReasoning={isStreamingReasoning}
+              isLast={idx === messages.length - 1}
+              isActive={isLoading}
+              addToolApprovalResponse={addToolApprovalResponse}
+            />
+          ))}
 
-        {isLoading && (
-          <div className="flex justify-center py-4">
-            <Loader2 className="h-4 w-4 animate-spin" />
-          </div>
-        )}
+          {queuedMessages.map((message) => (
+            <QueuedMessageDisplay key={message.id} message={message} />
+          ))}
 
-        {error && (
-          <div className="flex items-center justify-center space-x-2 mb-4">
-            <ErrorBanner error={error || new Error("Unknown error")} />
-            <Button variant="outline" size="sm" onClick={handleReload}>
-              Retry
-            </Button>
-          </div>
-        )}
+          {isLoading && (
+            <div className="flex justify-center py-4">
+              <Loader2 className="h-4 w-4 animate-spin" />
+            </div>
+          )}
+
+          {error && (
+            <div className="flex items-center justify-center space-x-2 mb-4">
+              <ErrorBanner error={error || new Error("Unknown error")} />
+              <Button variant="outline" size="sm" onClick={handleReload}>
+                Retry
+              </Button>
+            </div>
+          )}
+        </div>
 
-        <div ref={messagesEndRef} />
+        <ScrollToBottomButton
+          isVisible={
+            !isScrolledToBottom &&
+            (messages.length > 0 || queuedMessages.length > 0)
+          }
+          onScrollToBottom={() => scrollToBottom(true)}
+        />
       </div>
 
       {isLoading && (

package/src/components/chat/chat-utils.ts

@@ -7,9 +7,10 @@ import {
   isToolUIPart,
   lastAssistantMessageIsCompleteWithApprovalResponses,
   lastAssistantMessageIsCompleteWithToolCalls,
+  type ToolUIPart,
   type UIMessage,
 } from "ai";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import type { ProviderId } from "@/core/ai/ids/ids";
 import type { ToolNotebookContext } from "@/core/ai/tools/base";
@@ -20,6 +21,7 @@ import type {
 } from "@/core/network/types";
 import { blobToString } from "@/utils/fileToBase64";
 import { Logger } from "@/utils/Logger";
+import { generateUUID } from "@/utils/uuid";
 import { getAICompletionBodyWithAttachments } from "../editor/ai/completion-utils";
 import { toast } from "../ui/use-toast";
 
@@ -186,10 +188,44 @@ export function hasPendingToolCalls(messages: UIMessage[]): boolean {
   }
   return (
     lastAssistantMessageIsCompleteWithToolCalls({ messages }) ||
-    lastAssistantMessageIsCompleteWithApprovalResponses({ messages })
+    lastAssistantMessageIsCompleteWithApprovalResponses({ messages }) ||
+    (lastPart.state === "output-denied" && !lastPart.providerExecuted)
   );
 }
 
+/**
+ * True when the assistant is still waiting on tool execution or user approval.
+ * Unlike `hasPendingToolCalls` (ready to auto-resume), these states must block
+ * releasing queued user messages.
+ */
+export function hasUnresolvedToolCalls(messages: UIMessage[]): boolean {
+  const lastMessage = messages.at(-1);
+  if (!lastMessage || lastMessage.role !== "assistant") {
+    return false;
+  }
+  return lastMessage.parts.some(
+    (part) => isToolUIPart(part) && isUnresolvedToolState(part.state),
+  );
+}
+
+function isUnresolvedToolState(state: ToolUIPart["state"]): boolean {
+  switch (state) {
+    case "approval-requested":
+    case "input-streaming":
+    case "input-available":
+      return true;
+    case "approval-responded":
+    case "output-available":
+    case "output-error":
+    case "output-denied":
+      return false;
+    default: {
+      const _exhaustive: never = state;
+      return _exhaustive;
+    }
+  }
+}
+
 export function useFileState() {
   const [files, setFiles] = useState<File[]>([]);
 
@@ -217,3 +253,76 @@ export function useFileState() {
 
   return { files, addFiles, clearFiles, removeFile };
 }
+
+export type ChatMessagePart = UIMessage["parts"][number];
+
+export interface QueuedUserMessage {
+  id: string;
+  parts: ChatMessagePart[];
+}
+
+/**
+ * Decide whether the message queue should release its next message after a
+ * chat request settles. `onFinish` fires on every completion — including
+ * aborts, errors, and each intermediate tool-call round — so the queue must
+ * only advance once the assistant has genuinely finished its turn.
+ */
+export function shouldFlushQueue(opts: {
+  isError: boolean;
+  isAbort: boolean;
+  hasPendingToolCalls: boolean;
+  hasUnresolvedToolCalls: boolean;
+}): boolean {
+  if (opts.isError) {
+    return false;
+  }
+  // User stopped the stream; release queued input even if a tool part is still
+  // mid-flight (e.g. `input-streaming`).
+  if (opts.isAbort) {
+    return true;
+  }
+  return !opts.hasPendingToolCalls && !opts.hasUnresolvedToolCalls;
+}
+
+/**
+ * Queue of user messages typed while the assistant is still responding.
+ * Messages are enqueued in order and released one at a time.
+ */
+export function useMessageQueue() {
+  const [messages, setMessages] = useState<QueuedUserMessage[]>([]);
+  // Mirror the queue in a ref so `flushNext` reads the latest value even when
+  // invoked from a callback (e.g. `onFinish`) captured on an earlier render.
+  const messagesRef = useRef<QueuedUserMessage[]>([]);
+  const hasQueuedRef = useRef(false);
+  messagesRef.current = messages;
+  hasQueuedRef.current = messages.length > 0;
+
+  const enqueue = useEvent((parts: ChatMessagePart[]) => {
+    setMessages((prev) => {
+      const next = [...prev, { id: generateUUID(), parts }];
+      messagesRef.current = next;
+      hasQueuedRef.current = true;
+      return next;
+    });
+  });
+
+  const flushNext = useEvent((send: (parts: ChatMessagePart[]) => void) => {
+    const queue = messagesRef.current;
+    if (queue.length === 0) {
+      return;
+    }
+    const [next, ...rest] = queue;
+    messagesRef.current = rest;
+    hasQueuedRef.current = rest.length > 0;
+    setMessages(rest);
+    send(next.parts);
+  });
+
+  const clear = useEvent(() => {
+    messagesRef.current = [];
+    hasQueuedRef.current = false;
+    setMessages([]);
+  });
+
+  return { messages, enqueue, flushNext, clear, hasQueuedRef };
+}

package/src/components/editor/RecoveryButton.tsx

@@ -36,7 +36,7 @@ const RecoveryModal = (props: {
   const getNotebookJSON = useEvent(() => {
     const notebook = getNotebook();
     const cells = notebookCells(notebook);
-    const notbook: Notebook["NotebookV1"] = {
+    const notebookV1: Notebook["NotebookV1"] = {
       version: "1",
       metadata: {
         marimo_version: getMarimoVersion(),
@@ -54,7 +54,7 @@ const RecoveryModal = (props: {
         };
       }),
     };
-    return JSON.stringify(notbook, null, 2);
+    return JSON.stringify(notebookV1, null, 2);
   });
 
   // NB: we use markdown class to have sane styling for list, paragraph

package/src/components/editor/SortableCell.tsx

@@ -15,6 +15,10 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   cellId: CellId;
   canMoveX?: boolean;
+  /**
+   * If true, dragging is disabled (e.g. while presenting).
+   */
+  disabled?: boolean;
 }
 
 /**
@@ -42,7 +46,7 @@ function isTransformNoop(transform: Transform | null) {
 
 export const SortableCell = React.forwardRef(
   (
-    { cellId, canMoveX, ...props }: Props,
+    { cellId, canMoveX, disabled, ...props }: Props,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
     // This hook re-renders every time _any_ cell is dragged,
@@ -54,7 +58,7 @@ export const SortableCell = React.forwardRef(
       transform,
       transition,
       isDragging,
-    } = useSortable({ id: cellId.toString() });
+    } = useSortable({ id: cellId.toString(), disabled });
 
     // Perf:
     // If the transform is a noop, keep it as null