@marimo-team/islands 0.25.3-dev26 → 0.25.3-dev262

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

@@ -13,28 +13,14 @@ import {
 import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
 import {
   BotMessageSquareIcon,
-  HatGlasses,
-  ArrowRightIcon,
   Loader2,
-  type LucideIcon,
-  MessageCircleIcon,
-  NotebookText,
   PlusIcon,
-  SparklesIcon,
   SettingsIcon,
-  CodeIcon,
 } from "lucide-react";
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-} from "@/components/ui/select";
+import { LoadingEllipsis } from "@/components/icons/loading-ellipsis";
 import { replaceMessagesInChat } from "@/core/ai/chat-utils";
 import { useAIConfigActions } from "@/core/ai/config";
 import { AI_SDK_UI_THROTTLE_MS } from "@/core/ai/constants";
@@ -49,11 +35,8 @@ import {
   pendingAiPromptAtom,
 } from "@/core/ai/state";
 import type { ToolNotebookContext } from "@/core/ai/tools/base";
-import {
-  type CopilotMode,
-  FRONTEND_TOOL_REGISTRY,
-} from "@/core/ai/tools/registry";
-import { useCellActions } from "@/core/cells/cells";
+import { FRONTEND_TOOL_REGISTRY } from "@/core/ai/tools/registry";
+import { useCellActions } from "@/core/cells/actions";
 import { aiAtom, aiModelConfiguredAtom } from "@/core/config/config";
 import { DEFAULT_AI_MODEL } from "@/core/config/config-schema";
 import { useRequestClient } from "@/core/network/requests";
@@ -66,20 +49,19 @@ import { AIModelDropdown } from "../ai/ai-model-dropdown";
 import { useOpenSettingsToTab } from "../app-config/state";
 import {
   PairWithAgentBanner,
-  PairWithAgentButton,
+  usePairWithAgentModal,
 } from "../editor/actions/pair-with-agent";
-import { PairWithAgentModal } from "../editor/actions/pair-with-agent-modal";
-import { PromptInput } from "../editor/ai/add-cell-with-ai";
+import { PromptInput } from "../editor/ai/prompt-input";
 import {
   addContextCompletion,
-  CONTEXT_TRIGGER,
   isContextAttachment,
   resolveChatContext,
 } from "../editor/ai/completion-utils";
 import { StreamingChunkTransport } from "../editor/ai/transport/chat-transport";
+import { PanelHeaderActions } from "../editor/chrome/panels/panel-header";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
 import { CopyClipboardIcon } from "../icons/copy-icon";
-import { useImperativeModal } from "../modal/ImperativeModal";
+import "./chat-typography.css";
 import { MCPStatusIndicator } from "../mcp/mcp-status-indicator";
 import { Tooltip, TooltipProvider } from "../ui/tooltip";
 import {
@@ -97,6 +79,7 @@ import {
 import { renderUIMessage } from "./chat-display";
 import { ChatHistoryPopover } from "./chat-history-popover";
 import { CapabilitiesPopover } from "./capabilities-popover";
+import { NotebookAccessSelector } from "./notebook-access-selector";
 import {
   type ChatMessagePart,
   convertToFileUIPart,
@@ -115,9 +98,10 @@ import { getCodes } from "@/core/codemirror/copilot/getCodes";
 import { focusInputAndMoveToEnd } from "@/core/codemirror/utils";
 import ScrollToBottomButton from "./acp/scroll-to-bottom-button";
 import { useChatControllerId } from "./use-chat-controller-id";
+import { useChatGeneration } from "./use-chat-generation";
 
 // Default mode for the AI
-const DEFAULT_MODE = "manual";
+const DEFAULT_MODE = "ask";
 
 const QueuedMessageDisplay = memo(
   ({ message }: { message: QueuedUserMessage }) => {
@@ -131,7 +115,7 @@ const QueuedMessageDisplay = memo(
 
     return (
       <div className="flex justify-end">
-        <div className="w-[95%] bg-background border border-dashed p-2 rounded-sm opacity-70">
+        <div className="w-[95%] bg-background border border-dashed p-2 rounded-[10px] opacity-70">
           {fileParts.map((filePart, idx) => (
             <AttachmentRenderer attachment={filePart} key={idx} />
           ))}
@@ -164,35 +148,41 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   const { handleClick } = useOpenSettingsToTab();
 
   return (
-    <div className="flex border-b px-2 py-1 justify-between shrink-0 items-center">
-      <Tooltip content="New chat">
-        <Button variant="text" size="icon" onClick={onNewChat}>
-          <PlusIcon className="h-4 w-4" />
-        </Button>
-      </Tooltip>
-      <div className="flex items-center gap-2">
-        <Tooltip content="Connect your agent">
-          <PairWithAgentButton className="mr-1" label="Connect" />
-        </Tooltip>
-        <MCPStatusIndicator />
-        <Tooltip content="AI Settings">
+    <PanelHeaderActions>
+      <div className="mo-ai-panel flex w-full shrink-0 items-center font-sans text-sm">
+        <div className="flex w-full items-center gap-1">
           <Button
-            variant="text"
-            size="xs"
-            className="hover:bg-foreground/10 py-2"
-            onClick={() => handleClick("ai")}
+            variant="ghost"
+            size="sm"
+            className="chat-control gap-1.5 font-normal"
+            onClick={onNewChat}
           >
-            <SettingsIcon className="h-4 w-4" />
+            <PlusIcon className="size-4" aria-hidden={true} />
+            New chat
           </Button>
-        </Tooltip>
-        <ChatHistoryPopover
-          activeChatId={activeChatId}
-          setActiveChat={setActiveChat}
-          onDeleteChats={onDeleteChats}
-          isLoading={isLoading}
-        />
+          <ChatHistoryPopover
+            activeChatId={activeChatId}
+            setActiveChat={setActiveChat}
+            onDeleteChats={onDeleteChats}
+            isLoading={isLoading}
+          />
+          <div className="ml-auto flex items-center gap-2">
+            <MCPStatusIndicator />
+            <Tooltip content="AI Settings">
+              <Button
+                className="chat-control"
+                aria-label="AI Settings"
+                variant="ghost"
+                size="icon"
+                onClick={() => handleClick("ai")}
+              >
+                <SettingsIcon className="size-4" aria-hidden={true} />
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
       </div>
-    </div>
+    </PanelHeaderActions>
   );
 };
 
@@ -226,14 +216,14 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
       );
 
       return (
-        <div className="w-[95%] bg-background border p-1 rounded-sm">
+        <div className="w-[95%] bg-background border p-1 rounded-[10px]">
           {fileParts?.map((filePart, idx) => (
             <AttachmentRenderer attachment={filePart} key={idx} />
           ))}
           <PromptInput
             key={message.id}
             value={content}
-            placeholder="Type your message..."
+            placeholder="Type your message. Use @ to reference variables and cells."
             onChange={() => {
               // noop
             }}
@@ -259,7 +249,7 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
 
       return (
         <div className="w-[95%] wrap-break-word">
-          <div className="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <div className="absolute right-1 top-1 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity">
             <CopyClipboardIcon className="h-3 w-3" value={content || ""} />
           </div>
           {renderUIMessage({
@@ -316,92 +306,27 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
 
     const { saveModeChange } = useAIConfigActions();
 
-    const modeOptions: {
-      value: CopilotMode;
-      label: string;
-      subtitle: string;
-      Icon: LucideIcon;
-    }[] = [
-      {
-        value: "manual",
-        label: "Manual",
-        subtitle: "Pure chat, no tool usage",
-        Icon: MessageCircleIcon,
-      },
-      {
-        value: "ask",
-        label: "Ask",
-        subtitle: "AI with access to read-only tools like documentation search",
-        Icon: NotebookText,
-      },
-      {
-        value: "agent",
-        label: "Agent",
-        subtitle: "AI with access to read and write tools",
-        Icon: HatGlasses,
-      },
-      {
-        value: "code_mode",
-        label: "Code Mode (beta)",
-        subtitle:
-          "AI with access to the notebook's kernel. Potentially destructive.",
-        Icon: CodeIcon,
-      },
-    ];
-
     const isAttachmentSupported =
       PROVIDERS_THAT_SUPPORT_ATTACHMENTS.has(currentProvider);
 
-    const currentModeOption = modeOptions.find((o) => o.value === currentMode);
-    const CurrentModeIcon = currentModeOption?.Icon;
-    const CurrentModeLabel = currentModeOption?.label;
-
     return (
       <TooltipProvider>
-        <div className="px-3 py-2 border-t border-border/20 flex flex-wrap items-center gap-1">
-          <div className="flex flex-wrap items-center gap-1">
-            <Select value={currentMode} onValueChange={saveModeChange}>
-              <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5 shrink-0">
-                {CurrentModeIcon && <CurrentModeIcon className="h-3 w-3" />}
-                <span className="text-nowrap">{CurrentModeLabel}</span>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectLabel className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">
-                    AI Mode
-                  </SelectLabel>
-                  {modeOptions.map((option) => (
-                    <SelectItem
-                      key={option.value}
-                      value={option.value}
-                      className="text-xs py-1"
-                    >
-                      <div className="flex items-start gap-2.5">
-                        <span className="mt-1 text-muted-foreground">
-                          <option.Icon className="h-3 w-3" />
-                        </span>
-                        <div className="flex flex-col gap-0.5">
-                          <span className="font-semibold">{option.label}</span>
-                          <span className="text-muted-foreground">
-                            {option.subtitle}
-                          </span>
-                        </div>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
+        <div className="chat-input-footer px-3 py-2 border-t border-border/20 flex items-center gap-2">
+          <div className="chat-input-selectors flex min-w-0 flex-1 items-center gap-1">
+            <NotebookAccessSelector
+              value={currentMode}
+              onValueChange={saveModeChange}
+            />
             <AIModelDropdown
               placeholder="Model"
-              triggerClassName="h-6 text-xs shadow-none! ring-0! bg-muted hover:bg-muted/30 rounded-sm max-w-[200px]"
+              triggerClassName="chat-control chat-selector h-6 text-xs rounded-sm min-w-0 max-w-[200px] flex-1"
               iconSize="small"
               showAddCustomModelDocs={true}
               forRole="chat"
             />
-            <CapabilitiesPopover />
           </div>
-          <div className="flex flex-row ml-auto">
+          <div className="chat-input-actions flex shrink-0 items-center gap-0.5 ml-auto">
+            <CapabilitiesPopover />
             <AddContextButton
               handleAddContext={onAddContext}
               isLoading={isLoading}
@@ -429,9 +354,7 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
 ChatInputFooter.displayName = "ChatInputFooter";
 
 interface ChatInputProps {
-  placeholder?: string;
   input: string;
-  inputClassName?: string;
   setInput: (value: string) => void;
   onSubmit: (e: KeyboardEvent | undefined, value: string) => void;
   inputRef: React.RefObject<ReactCodeMirrorRef | null>;
@@ -444,9 +367,7 @@ interface ChatInputProps {
 
 const ChatInput: React.FC<ChatInputProps> = memo(
   ({
-    placeholder,
     input,
-    inputClassName,
     setInput,
     onSubmit,
     inputRef,
@@ -456,6 +377,20 @@ const ChatInput: React.FC<ChatInputProps> = memo(
     onAddFiles,
     onClose,
   }) => {
+    const openPairWithAgentModal = usePairWithAgentModal();
+    const placeholderAction = useMemo(
+      () =>
+        isWasm()
+          ? undefined
+          : {
+              beforeText: "Type your message or ",
+              linkText: "pair your own coding agent",
+              afterText: ". Use @ to reference variables and cells.",
+              onClick: openPairWithAgentModal,
+            },
+      [openPairWithAgentModal],
+    );
+
     const handleSendClick = useEvent(() => {
       if (input.trim()) {
         onSubmit(undefined, input);
@@ -463,8 +398,8 @@ const ChatInput: React.FC<ChatInputProps> = memo(
     });
 
     return (
-      <div className="relative shrink-0 flex flex-col border-t">
-        <div className={cn("px-2 py-1.5", inputClassName)}>
+      <div className="relative shrink-0 flex flex-col">
+        <div className="px-2 py-1.5">
           <PromptInput
             className="max-h-[400px]"
             inputRef={inputRef}
@@ -473,7 +408,8 @@ const ChatInput: React.FC<ChatInputProps> = memo(
             onSubmit={onSubmit}
             onClose={onClose}
             onAddFiles={onAddFiles}
-            placeholder={placeholder || "Type your message..."}
+            placeholder="Type your message. Use @ to reference variables and cells."
+            placeholderAction={placeholderAction}
           />
         </div>
         <ChatInputFooter
@@ -492,26 +428,6 @@ const ChatInput: React.FC<ChatInputProps> = memo(
 
 ChatInput.displayName = "ChatInput";
 
-const PairWithAgentCallout: React.FC<{
-  onPairWithAgent: () => void;
-}> = ({ onPairWithAgent }) => {
-  if (isWasm()) {
-    return null;
-  }
-
-  return (
-    <Button
-      variant="text"
-      className="gap-1.5 text-sm text-link hover:underline"
-      onClick={onPairWithAgent}
-    >
-      <SparklesIcon className="h-3.5 w-3.5 shrink-0" />
-      <span>Connect your own agent to this notebook</span>
-      <ArrowRightIcon className="h-3 w-3 shrink-0" />
-    </Button>
-  );
-};
-
 const ChatPanel = () => {
   const aiConfigured = useAtomValue(aiModelConfiguredAtom);
   const { handleClick } = useOpenSettingsToTab();
@@ -568,8 +484,7 @@ const ChatPanelBody = () => {
     setAbortNotice(null);
   });
   const runtimeManager = useRuntimeManager();
-  const { invokeAiTool, sendRun } = useRequestClient();
-  const { openModal, closeModal } = useImperativeModal();
+  const { invokeAiTool } = useRequestClient();
 
   const activeChatId = activeChat?.id;
   const { chatControllerId, renewDraftChatId } =
@@ -577,12 +492,10 @@ const ChatPanelBody = () => {
   const store = useStore();
 
   const { addStagedCell } = useStagedAICellsActions();
-  const { createNewCell, prepareForRun } = useCellActions();
+  const { createCell } = useCellActions();
   const toolContext: ToolNotebookContext = {
     addStagedCell,
-    createNewCell,
-    prepareForRun,
-    sendRun,
+    createCell,
     store,
   };
 
@@ -715,15 +628,11 @@ const ChatPanelBody = () => {
     },
   );
 
-  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 isLoading = useChatGeneration(status);
+  // useEvent reads the latest loading state, even when called after an await
+  // (e.g. resolving @-context) that outlives the original render's closure.
   const submitOrQueue = useEvent((parts: ChatMessagePart[]) => {
-    if (isLoadingRef.current || hasQueuedRef.current) {
+    if (isLoading || hasQueuedRef.current) {
       enqueueUserMessage(parts);
     } else {
       sendUserMessage(parts);
@@ -865,10 +774,6 @@ const ChatPanelBody = () => {
     });
   });
 
-  const handlePairWithAgent = useEvent(() => {
-    openModal(<PairWithAgentModal onClose={closeModal} />);
-  });
-
   const handleMessageEdit = useEvent(
     async (index: number, newValue: string) => {
       const editedMessage = messages[index];
@@ -959,14 +864,20 @@ const ChatPanelBody = () => {
       return;
     }
     setPendingPrompt(null);
-    const { prompt, submit } = pendingPrompt;
+    const { prompt, submit, append } = pendingPrompt;
+    const applyPrompt = (draft: string) =>
+      append
+        ? draft.includes(prompt.trim())
+          ? draft
+          : `${draft}${draft ? " " : ""}${prompt}`
+        : prompt;
     if (submit) {
       void submitPendingPrompt(prompt);
     } else if (isNewThread) {
-      setNewThreadInput(prompt);
+      setNewThreadInput(applyPrompt);
       focusInputAndMoveToEnd(newThreadInputRef);
     } else {
-      setInput(prompt);
+      setInput(applyPrompt);
       focusInputAndMoveToEnd(newMessageInputRef);
     }
   }, [pendingPrompt, setPendingPrompt, isNewThread, submitPendingPrompt]);
@@ -974,10 +885,8 @@ const ChatPanelBody = () => {
   const chatInput = isNewThread ? (
     <ChatInput
       key="new-thread-input"
-      placeholder={`Ask anything, ${CONTEXT_TRIGGER} to include context about tables or dataframes`}
       input={newThreadInput}
       inputRef={newThreadInputRef}
-      inputClassName="px-1 py-0"
       setInput={setNewThreadInput}
       onSubmit={handleNewThreadSubmit}
       isLoading={isLoading}
@@ -1001,12 +910,7 @@ const ChatPanelBody = () => {
   );
 
   const filesPills = files && files.length > 0 && (
-    <div
-      className={cn(
-        "flex flex-row gap-1 flex-wrap p-1",
-        isNewThread && "py-2 px-1",
-      )}
-    >
+    <div className="flex flex-row gap-1 flex-wrap px-3 pt-2">
       {files?.map((file) => (
         <FileAttachmentPill
           file={file}
@@ -1017,8 +921,15 @@ const ChatPanelBody = () => {
     </div>
   );
 
+  const composer = (
+    <div className="@container rounded-[10px] border border-border bg-background">
+      {filesPills}
+      {chatInput}
+    </div>
+  );
+
   return (
-    <div className="flex flex-col h-[calc(100%-53px)]">
+    <div className="mo-ai-panel flex flex-col flex-1 min-h-0 font-prose text-sm leading-6">
       <TooltipProvider>
         <ChatHeader
           onNewChat={handleNewChat}
@@ -1031,20 +942,10 @@ const ChatPanelBody = () => {
 
       <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"
+          className="flex-1 px-3 bg-background 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>
-          )}
-
           {messages.map((message, idx) => (
             <ChatMessageDisplay
               key={message.id}
@@ -1062,12 +963,6 @@ const ChatPanelBody = () => {
             <QueuedMessageDisplay key={message.id} message={message} />
           ))}
 
-          {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")} />
@@ -1096,20 +991,30 @@ const ChatPanelBody = () => {
       </div>
 
       {isLoading && (
-        <div className="w-full flex justify-center items-center z-20 border-t">
-          <Button variant="linkDestructive" size="sm" onClick={stop}>
-            Stop
+        <div className="flex shrink-0 items-center gap-2 px-3 pt-2 text-xs text-muted-foreground">
+          <div className="flex items-center gap-1.5">
+            <div aria-hidden={true}>
+              <LoadingEllipsis
+                size={3}
+                gap="gap-0.5"
+                className="motion-reduce:[&_svg]:animate-none"
+              />
+            </div>
+            <output>Working</output>
+          </div>
+          <span aria-hidden={true} className="h-3 w-px bg-border" />
+          <Button
+            variant="text"
+            size="xs"
+            className="chat-control"
+            onClick={stop}
+          >
+            Stop generation
           </Button>
         </div>
       )}
 
-      {/* For existing threads, we place the chat input at the bottom */}
-      {!isNewThread && (
-        <>
-          {filesPills}
-          {chatInput}
-        </>
-      )}
+      <div className="shrink-0 p-3">{composer}</div>
     </div>
   );
 };

package/src/components/chat/chat-typography.css

@@ -0,0 +1,108 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+.mo-ai-panel {
+  .chat-control {
+    color: var(--muted-foreground);
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    opacity: 1;
+
+    &.chat-selector {
+      color: var(--foreground);
+      background: var(--slate-2);
+      border-color: var(--border);
+    }
+
+    &:not(:disabled):is(:hover, [data-state="open"], [data-active="true"]) {
+      color: var(--foreground);
+      background: var(--slate-3);
+    }
+
+    &[data-active="true"] {
+      border-color: var(--border);
+    }
+
+    &:focus-visible {
+      outline: 1px solid var(--muted-foreground);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
+
+  .lucide-chevron-down {
+    width: 0.75rem;
+    height: 0.75rem;
+    stroke-width: 1.5;
+    opacity: 0.5;
+  }
+
+  .mo-markdown-renderer {
+    font-family: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5;
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      font-family: inherit;
+      font-size: 0.875rem;
+      font-weight: 600;
+      line-height: 1.5;
+      margin-block: 1rem 0.5rem;
+    }
+
+    :is(h1, h2) {
+      font-size: 1rem;
+    }
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    :is(pre, code, .cm-editor) {
+      font-family: var(--monospace-font);
+    }
+
+    .cm-editor {
+      font-size: 0.8125rem;
+      line-height: 1.5;
+    }
+  }
+
+  .mo-ai-prompt {
+    font-family: var(--text-font), sans-serif;
+    .cm-clickable-placeholder:hover {
+      color: var(--foreground);
+    }
+
+    .cm-placeholder {
+      font-family: var(--text-font), sans-serif;
+    }
+
+    .cm-editor,
+    .cm-scroller {
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+  }
+}
+
+@container (max-width: 380px) {
+  .chat-input-footer {
+    flex-wrap: wrap;
+  }
+
+  .chat-input-selectors {
+    flex-basis: 100%;
+  }
+}
+
+@container (max-width: 360px) {
+  .sidebar-panel-actions:not(:empty) {
+    order: 1;
+    flex-basis: 100%;
+  }
+}