@marimo-team/islands 0.16.5 → 0.17.1

package/src/components/editor/chrome/wrapper/sidebar.tsx

@@ -86,7 +86,7 @@ const SidebarItem: React.FC<
     <Tooltip content={tooltip} side="right" delayDuration={200}>
       <button
         className={cn(
-          "flex items-center p-2 text-sm mx-px shadow-inset font-mono cursor-pointer rounded",
+          "flex items-center p-2 text-sm mx-px shadow-inset font-mono rounded",
           !selected && "hover:bg-(--sage-3)",
           selected && "bg-(--sage-4)",
           className,

package/src/components/editor/code/readonly-diff.tsx

@@ -0,0 +1,49 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { unifiedMergeView } from "@codemirror/merge";
+import { EditorView } from "@codemirror/view";
+import CodeMirror from "@uiw/react-codemirror";
+import { memo, useMemo } from "react";
+import { useTheme } from "@/theme/useTheme";
+
+export const ReadonlyDiff = memo(
+  (props: { original: string; modified: string }) => {
+    const { theme } = useTheme();
+
+    const extensions = useMemo(() => {
+      return [
+        EditorView.lineWrapping,
+        unifiedMergeView({
+          original: props.original,
+          mergeControls: false,
+        }),
+      ];
+    }, [props.original, props.modified, theme]);
+
+    return (
+      <CodeMirror
+        className="cm font-mono"
+        style={
+          {
+            "--marimo-code-editor-font-size": "10px",
+          } as React.CSSProperties
+        }
+        extensions={extensions}
+        readOnly={true}
+        basicSetup={{
+          lineNumbers: false,
+          foldGutter: false,
+          dropCursor: false,
+          highlightActiveLineGutter: false,
+          allowMultipleSelections: false,
+          indentOnInput: false,
+          bracketMatching: false,
+          closeBrackets: false,
+          autocompletion: false,
+        }}
+        theme={theme === "dark" ? "dark" : "light"}
+        value={props.modified}
+      />
+    );
+  },
+);
+ReadonlyDiff.displayName = "ReadonlyDiff";

package/src/components/editor/columns/storage.ts

@@ -2,7 +2,7 @@
 
 import { z } from "zod";
 import { arrayMove } from "@/utils/arrays";
-import { NotebookScopedLocalStorage } from "@/utils/localStorage";
+import { NotebookScopedLocalStorage } from "@/utils/storage/typed";
 
 const BASE_KEY = "marimo:notebook-col-sizes";
 

package/src/components/editor/errors/auto-fix.tsx

@@ -1,8 +1,14 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { useAtomValue, useSetAtom } from "jotai";
-import { WrenchIcon } from "lucide-react";
+import { useAtomValue, useSetAtom, useStore } from "jotai";
+import { ChevronDownIcon, SparklesIcon, WrenchIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Tooltip } from "@/components/ui/tooltip";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { notebookAtom, useCellActions } from "@/core/cells/cells";
@@ -10,8 +16,8 @@ import type { CellId } from "@/core/cells/ids";
 import { aiEnabledAtom } from "@/core/config/config";
 import { getAutoFixes } from "@/core/errors/errors";
 import type { MarimoError } from "@/core/kernel/messages";
-import { store } from "@/core/state/jotai";
 import { cn } from "@/utils/cn";
+import { type FixMode, useFixMode } from "./fix-mode";
 
 export const AutoFixButton = ({
   errors,
@@ -22,6 +28,7 @@ export const AutoFixButton = ({
   cellId: CellId;
   className?: string;
 }) => {
+  const store = useStore();
   const { createNewCell } = useCellActions();
   const aiEnabled = useAtomValue(aiEnabledAtom);
   const autoFixes = errors.flatMap((error) =>
@@ -37,35 +44,134 @@ export const AutoFixButton = ({
   // multiple fixes.
   const firstFix = autoFixes[0];
 
+  const handleFix = (triggerFix: boolean) => {
+    const editorView =
+      store.get(notebookAtom).cellHandles[cellId].current?.editorView;
+    firstFix.onFix({
+      addCodeBelow: (code: string) => {
+        createNewCell({
+          cellId: cellId,
+          autoFocus: false,
+          before: false,
+          code: code,
+        });
+      },
+      editor: editorView,
+      cellId: cellId,
+      aiFix: {
+        setAiCompletionCell,
+        triggerFix,
+      },
+    });
+    // Focus the editor
+    editorView?.focus();
+  };
+
+  return (
+    <div className={cn("my-2", className)}>
+      {firstFix.fixType === "ai" ? (
+        <AIFixButton
+          tooltip={firstFix.description}
+          openPrompt={() => handleFix(false)}
+          applyAutofix={() => handleFix(true)}
+        />
+      ) : (
+        <Tooltip content={firstFix.description} align="start">
+          <Button
+            size="xs"
+            variant="outline"
+            className="font-normal"
+            onClick={() => handleFix(false)}
+          >
+            <WrenchIcon className="h-3 w-3 mr-2" />
+            {firstFix.title}
+          </Button>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+const PromptIcon = SparklesIcon;
+const AutofixIcon = WrenchIcon;
+
+const PromptTitle = "Suggest a prompt";
+const AutofixTitle = "Fix with AI";
+
+export const AIFixButton = ({
+  tooltip,
+  openPrompt,
+  applyAutofix,
+}: {
+  tooltip: string;
+  openPrompt: () => void;
+  applyAutofix: () => void;
+}) => {
+  const { fixMode, setFixMode } = useFixMode();
+
+  return (
+    <div className="flex">
+      <Tooltip content={tooltip} align="start">
+        <Button
+          size="xs"
+          variant="outline"
+          className="font-normal rounded-r-none border-r-0"
+          onClick={fixMode === "prompt" ? openPrompt : applyAutofix}
+        >
+          {fixMode === "prompt" ? (
+            <PromptIcon className="h-3 w-3 mr-2 mb-0.5" />
+          ) : (
+            <AutofixIcon className="h-3 w-3 mr-2 mb-0.5" />
+          )}
+          {fixMode === "prompt" ? PromptTitle : AutofixTitle}
+        </Button>
+      </Tooltip>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild={true}>
+          <Button
+            size="xs"
+            variant="outline"
+            className="rounded-l-none px-2"
+            aria-label="Fix options"
+          >
+            <ChevronDownIcon className="h-3 w-3" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuItem
+            className="flex items-center gap-2"
+            onClick={() => {
+              setFixMode(fixMode === "prompt" ? "autofix" : "prompt");
+            }}
+          >
+            <AiModeItem mode={fixMode === "prompt" ? "autofix" : "prompt"} />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+const AiModeItem = ({ mode }: { mode: FixMode }) => {
+  const icon =
+    mode === "prompt" ? (
+      <PromptIcon className="h-4 w-4" />
+    ) : (
+      <AutofixIcon className="h-4 w-4" />
+    );
+  const title = mode === "prompt" ? PromptTitle : AutofixTitle;
+  const description =
+    mode === "prompt"
+      ? "Edit the prompt before applying"
+      : "Apply AI fixes automatically";
+
   return (
-    <Tooltip content={firstFix.description} align="start">
-      <Button
-        size="xs"
-        variant="outline"
-        className={cn("my-2 font-normal", className)}
-        onClick={() => {
-          const editorView =
-            store.get(notebookAtom).cellHandles[cellId].current?.editorView;
-          firstFix.onFix({
-            addCodeBelow: (code: string) => {
-              createNewCell({
-                cellId: cellId,
-                autoFocus: false,
-                before: false,
-                code: code,
-              });
-            },
-            editor: editorView,
-            cellId: cellId,
-            setAiCompletionCell,
-          });
-          // Focus the editor
-          editorView?.focus();
-        }}
-      >
-        <WrenchIcon className="h-3 w-3 mr-2" />
-        {firstFix.title}
-      </Button>
-    </Tooltip>
+    <div className="flex items-center gap-2">
+      {icon}
+      <div className="flex flex-col">
+        <span className="font-medium">{title}</span>
+        <span className="text-xs text-muted-foreground">{description}</span>
+      </div>
+    </div>
   );
 };

package/src/components/editor/errors/fix-mode.ts

@@ -0,0 +1,20 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
+
+export type FixMode = "prompt" | "autofix";
+
+const BASE_KEY = "marimo:ai-autofix-mode";
+
+const fixModeAtom = atomWithStorage<FixMode>(
+  BASE_KEY,
+  "autofix",
+  jotaiJsonStorage,
+);
+
+export function useFixMode() {
+  const [fixMode, setFixMode] = useAtom(fixModeAtom);
+  return { fixMode, setFixMode };
+}

package/src/components/editor/inputs/Inputs.styles.ts

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import "./Inputs.css";
 
 export const button = cva(
-  "flex items-center justify-center m-0 leading-none font-medium border border-foreground/10 shadow-xs-solid hover:cursor-pointer active:shadow-none dark:border-border text-sm",
+  "flex items-center justify-center m-0 leading-none font-medium border border-foreground/10 shadow-xs-solid active:shadow-none dark:border-border text-sm",
   {
     variants: {
       color: {

package/src/components/editor/navigation/__tests__/clipboard.test.ts

@@ -178,11 +178,6 @@ describe("useCellClipboard", () => {
         "Failed to copy cells to clipboard",
         expect.any(Error),
       );
-      expect(toast).toHaveBeenCalledWith({
-        title: "Copy failed",
-        description: "Failed to copy cells to clipboard.",
-        variant: "danger",
-      });
     });
 
     it("should filter out non-existent cells", async () => {

package/src/components/editor/navigation/clipboard.ts

@@ -5,6 +5,7 @@ import { z } from "zod";
 import { toast } from "@/components/ui/use-toast";
 import { getNotebook, useCellActions } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
+import { copyToClipboard } from "@/utils/copy";
 import { Logger } from "@/utils/Logger";
 
 // According to MDN, custom mimetypes should start with "web "
@@ -70,7 +71,7 @@ export function useCellClipboard() {
       // Fallback to simple text copy
       try {
         const plainText = cells.map((cell) => cell.code).join("\n\n");
-        await navigator.clipboard.writeText(plainText);
+        await copyToClipboard(plainText);
         toastSuccess(cells.length);
       } catch {
         toastError();

package/src/components/editor/notebook-cell.tsx

@@ -86,7 +86,7 @@ import {
   useTemporarilyShownCode,
   useTemporarilyShownCodeActions,
 } from "./navigation/state";
-import { OutputArea } from "./Output";
+import { type OnRefactorWithAI, OutputArea } from "./Output";
 import { ConsoleOutput } from "./output/ConsoleOutput";
 import { CellDragHandle, SortableCell } from "./SortableCell";
 
@@ -532,9 +532,15 @@ const EditableCellComponent = ({
       isMarkdownCodeHidden && hasOutput && !navigationProps["data-selected"],
   });
 
-  const handleRefactorWithAI = useEvent((opts: { prompt: string }) => {
-    setAiCompletionCell({ cellId, initialPrompt: opts.prompt });
-  });
+  const handleRefactorWithAI: OnRefactorWithAI = useEvent(
+    (opts: { prompt: string; triggerImmediately: boolean }) => {
+      setAiCompletionCell({
+        cellId,
+        initialPrompt: opts.prompt,
+        triggerImmediately: opts.triggerImmediately,
+      });
+    },
+  );
 
   // TODO(akshayka): Move to our own Tooltip component once it's easier
   // to get the tooltip to show next to the cursor ...
@@ -622,6 +628,7 @@ const EditableCellComponent = ({
                 showHiddenCode={showHiddenCode}
                 languageAdapter={languageAdapter}
                 setLanguageAdapter={setLanguageAdapter}
+                outputArea={cellOutput}
               />
               <CellRightSideActions
                 className={cn(
@@ -1027,9 +1034,15 @@ const SetupCellComponent = ({
     },
   );
 
-  const handleRefactorWithAI = useEvent((opts: { prompt: string }) => {
-    setAiCompletionCell({ cellId, initialPrompt: opts.prompt });
-  });
+  const handleRefactorWithAI: OnRefactorWithAI = useEvent(
+    (opts: { prompt: string; triggerImmediately: boolean }) => {
+      setAiCompletionCell({
+        cellId,
+        initialPrompt: opts.prompt,
+        triggerImmediately: opts.triggerImmediately,
+      });
+    },
+  );
 
   // TODO(akshayka): Move to our own Tooltip component once it's easier
   // to get the tooltip to show next to the cursor ...

package/src/components/editor/output/CalloutOutput.tsx

@@ -12,7 +12,7 @@ interface Props {
 export const CalloutOutput: React.FC<Props> = memo(({ html, kind }) => {
   return (
     <div className={calloutStyles({ kind })}>
-      <HtmlOutput html={html} />
+      <HtmlOutput html={html} alwaysSanitizeHtml={true} />
     </div>
   );
 });

package/src/components/editor/output/ConsoleOutput.tsx

@@ -1,10 +1,11 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { AnsiUp } from "ansi_up";
-import { ChevronRightIcon, CopyIcon, WrapTextIcon } from "lucide-react";
+import { ChevronRightIcon, WrapTextIcon } from "lucide-react";
 import React, { useLayoutEffect } from "react";
 import { ToggleButton } from "react-aria-components";
 import { DebuggerControls } from "@/components/debugger/debugger-code";
+import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Input } from "@/components/ui/input";
 import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
@@ -13,13 +14,12 @@ import type { WithResponse } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { useSelectAllContent } from "@/hooks/useSelectAllContent";
 import { cn } from "@/utils/cn";
-import { copyToClipboard } from "@/utils/copy";
 import { ansiToPlainText, parseHtmlContent } from "@/utils/dom";
 import { invariant } from "@/utils/invariant";
 import { Strings } from "@/utils/strings";
 import { NameCellContentEditable } from "../actions/name-cell-input";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import { OutputRenderer } from "../Output";
+import { type OnRefactorWithAI, OutputRenderer } from "../Output";
 import { useWrapText } from "./useWrapText";
 
 const ansiUp = new AnsiUp();
@@ -31,7 +31,7 @@ interface Props {
   consoleOutputs: WithResponse<OutputMessage>[];
   stale: boolean;
   debuggerActive: boolean;
-  onRefactorWithAI?: (opts: { prompt: string }) => void;
+  onRefactorWithAI?: OnRefactorWithAI;
   onClear?: () => void;
   onSubmitDebugger: (text: string, index: number) => void;
 }
@@ -112,39 +112,33 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
     (output) => output.channel === "stdin",
   );
 
+  const getOutputString = (): string => {
+    const text = consoleOutputs
+      .filter((output) => output.channel !== "pdb")
+      .map((output) => {
+        if (
+          output.mimetype.startsWith("application/vnd.marimo") ||
+          output.mimetype === "text/html"
+        ) {
+          return parseHtmlContent(Strings.asString(output.data));
+        }
+
+        // Convert ANSI to HTML, then parse as HTML
+        return ansiToPlainText(Strings.asString(output.data));
+      })
+      .join("\n");
+    return text;
+  };
+
   return (
     <div className="relative group">
       {hasOutputs && (
         <div className="absolute top-1 right-5 z-10 opacity-0 group-hover:opacity-100 flex gap-1">
-          <Tooltip content="Copy all">
-            <span>
-              <button
-                aria-label="Copy all console output"
-                className="p-1 rounded bg-transparent text-muted-foreground hover:text-foreground"
-                type="button"
-                onClick={() => {
-                  const text = reversedOutputs
-                    .filter((output) => output.channel !== "pdb")
-                    .map((output) => {
-                      // If starts with `<`, then assume it's HTML
-                      if (
-                        typeof output.data === "string" &&
-                        output.data.startsWith("<")
-                      ) {
-                        return parseHtmlContent(output.data);
-                      }
-
-                      // Otherwise, convert the ANSI to HTML, then parse as HTML
-                      return ansiToPlainText(Strings.asString(output.data));
-                    })
-                    .join("\n");
-                  void copyToClipboard(text);
-                }}
-              >
-                <CopyIcon className="h-4 w-4" />
-              </button>
-            </span>
-          </Tooltip>
+          <CopyClipboardIcon
+            tooltip="Copy console output"
+            value={getOutputString}
+            className="h-4 w-4"
+          />
           <Tooltip content={wrapText ? "Disable wrap text" : "Wrap text"}>
             <span>
               <ToggleButton

package/src/components/editor/output/HtmlOutput.tsx

@@ -5,19 +5,20 @@ import { cn } from "../../../utils/cn";
 
 interface Props {
   html: string;
+  alwaysSanitizeHtml: boolean;
   inline?: boolean;
   className?: string;
 }
 
 export const HtmlOutput: React.FC<Props> = memo(
-  ({ html, inline = false, className }) => {
+  ({ html, inline = false, className, alwaysSanitizeHtml }) => {
     if (!html) {
       return null;
     }
 
     return (
       <div className={cn(className, { "inline-flex": inline, block: !inline })}>
-        {renderHTML({ html })}
+        {renderHTML({ html, alwaysSanitizeHtml })}
       </div>
     );
   },

package/src/components/editor/output/JsonOutput.tsx

@@ -192,8 +192,14 @@ const CollapsibleTextOutput = (props: { text: string }) => {
 const LEAF_RENDERERS = {
   "image/": (value: string) => <ImageOutput src={value} />,
   "video/": (value: string) => <VideoOutput src={value} />,
-  "text/html:": (value: string) => <HtmlOutput html={value} inline={true} />,
+  "text/html:": (value: string) => (
+    <HtmlOutput html={value} inline={true} alwaysSanitizeHtml={false} />
+  ),
+  "text/markdown:": (value: string) => (
+    <HtmlOutput html={value} inline={true} alwaysSanitizeHtml={true} />
+  ),
   "text/plain+float:": (value: string) => <span>{value}</span>,
+  "text/plain+bigint:": (value: string) => <span>{value}</span>,
   "text/plain+set:": (value: string) => <span>set{value}</span>,
   "text/plain+tuple:": (value: string) => <span>{value}</span>,
   "text/plain:": (value: string) => <CollapsibleTextOutput text={value} />,
@@ -351,6 +357,9 @@ function pythonJsonReplacer(_key: string, value: unknown): unknown {
   if (typeof value === "object") {
     return value;
   }
+  if (typeof value === "bigint") {
+    return `${REPLACE_PREFIX}${value}${REPLACE_SUFFIX}`;
+  }
   if (Array.isArray(value)) {
     return value;
   }
@@ -359,6 +368,11 @@ function pythonJsonReplacer(_key: string, value: unknown): unknown {
     if (value.startsWith("text/plain+float:")) {
       return `${REPLACE_PREFIX}${leafData(value)}${REPLACE_SUFFIX}`;
     }
+    if (value.startsWith("text/plain+bigint:")) {
+      // Use BigInt to avoid precision loss
+      const number = BigInt(leafData(value));
+      return `${REPLACE_PREFIX}${number}${REPLACE_SUFFIX}`;
+    }
     if (value.startsWith("text/plain+tuple:")) {
       // replace first and last characters [] with ()
       return `${REPLACE_PREFIX}(${leafData(value).slice(1, -1)})${REPLACE_SUFFIX}`;