@marimo-team/islands 0.16.5 → 0.17.0

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -3,7 +3,7 @@
 import { useCompletion } from "@ai-sdk/react";
 import { EditorView } from "@codemirror/view";
 import { AtSignIcon, Loader2Icon, SparklesIcon, XIcon } from "lucide-react";
-import React, { useEffect, useId, useState } from "react";
+import React, { useCallback, useEffect, useId, useState } from "react";
 import CodeMirrorMerge from "react-codemirror-merge";
 import { Button } from "@/components/ui/button";
 import { customPythonLanguageSupport } from "@/core/codemirror/language/languages/python";
@@ -15,6 +15,7 @@ import { useAtom } from "jotai";
 import { AIModelDropdown } from "@/components/ai/ai-model-dropdown";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { includeOtherCellsAtom } from "@/core/ai/state";
@@ -28,8 +29,10 @@ import { prettyError } from "@/utils/errors";
 import { retryWithTimeout } from "@/utils/timeout";
 import { PromptInput } from "./add-cell-with-ai";
 import {
+  AcceptCompletionButton,
   CompletionActions,
   createAiCompletionOnKeydown,
+  RejectCompletionButton,
 } from "./completion-handlers";
 import { addContextCompletion, getAICompletionBody } from "./completion-utils";
 
@@ -45,6 +48,9 @@ interface Props {
   declineChange: () => void;
   acceptChange: (rightHandCode: string) => void;
   enabled: boolean;
+  triggerImmediately?: boolean;
+  runCell: () => void;
+  outputArea?: "above" | "below";
   /**
    * Children shown when there is no completion
    */
@@ -67,8 +73,12 @@ export const AiCompletionEditor: React.FC<Props> = ({
   declineChange,
   acceptChange,
   enabled,
+  triggerImmediately,
+  runCell,
+  outputArea,
   children,
 }) => {
+  const [showInputPrompt, setShowInputPrompt] = useState(false);
   const [completionBody, setCompletionBody] = useState<object>({});
 
   const [includeOtherCells, setIncludeOtherCells] = useAtom(
@@ -86,6 +96,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
     setCompletion,
     setInput,
     handleSubmit,
+    complete,
   } = useCompletion({
     api: runtimeManager.getAiURL("completion").toString(),
     headers: runtimeManager.headers(),
@@ -94,7 +105,11 @@ export const AiCompletionEditor: React.FC<Props> = ({
     // Throttle the messages and data updates to 100ms
     experimental_throttle: 100,
     body: {
-      ...completionBody,
+      ...(Object.keys(completionBody).length > 0
+        ? completionBody
+        : initialPrompt
+          ? getAICompletionBody({ input: initialPrompt })
+          : {}),
       includeOtherCode: includeOtherCells ? getCodes(currentCode) : "",
       code: currentCode,
       language: currentLanguageAdapter,
@@ -114,6 +129,14 @@ export const AiCompletionEditor: React.FC<Props> = ({
   const inputRef = React.useRef<ReactCodeMirrorRef>(null);
   const completion = untrimmedCompletion.trimEnd();
 
+  const initialSubmit = useCallback(() => {
+    if (triggerImmediately && !isLoading && initialPrompt) {
+      // Use complete to pass the prompt directly, else input might be empty
+      complete(initialPrompt);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [triggerImmediately]);
+
   // Focus the input
   useEffect(() => {
     if (enabled) {
@@ -122,6 +145,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
           const input = inputRef.current;
           if (input?.view) {
             input.view.focus();
+            initialSubmit();
             return true;
           }
           return false;
@@ -131,7 +155,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
 
       selectAllText(inputRef.current?.view);
     }
-  }, [enabled]);
+  }, [enabled, initialSubmit]);
 
   // Reset the input when the prompt changes
   useEffect(() => {
@@ -148,16 +172,43 @@ export const AiCompletionEditor: React.FC<Props> = ({
   };
 
   const handleDeclineCompletion = () => {
+    declineChange();
     setCompletion("");
   };
 
+  const showCompletionBanner =
+    enabled && triggerImmediately && (completion || isLoading);
+
+  const showInput = enabled && (!triggerImmediately || showInputPrompt);
+
+  const completionBanner = (
+    <div
+      className={cn(
+        "w-full bg-(--cm-background) flex justify-center transition-all duration-300 ease-in-out overflow-hidden",
+        showCompletionBanner
+          ? "max-h-20 opacity-100 translate-y-0"
+          : "max-h-0 opacity-0 -translate-y-2",
+      )}
+    >
+      <CompletionBanner
+        status={isLoading ? "loading" : "generated"}
+        onAccept={handleAcceptCompletion}
+        onReject={handleDeclineCompletion}
+        showInputPrompt={showInputPrompt}
+        setShowInputPrompt={setShowInputPrompt}
+        runCell={runCell}
+        className="mt-4 mb-3 w-128"
+      />
+    </div>
+  );
+
   return (
     <div className={cn("flex flex-col w-full rounded-[inherit]", className)}>
       <div
         className={cn(
           "flex items-center gap-2 border-b px-3 transition-all rounded-[inherit] rounded-b-none duration-300",
-          enabled && "max-h-[400px] min-h-11 visible",
-          !enabled && "max-h-0 min-h-0 invisible",
+          showInput && "max-h-[400px] min-h-11 visible",
+          !showInput && "max-h-0 min-h-0 invisible",
         )}
       >
         {enabled && (
@@ -266,6 +317,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
           </>
         )}
       </div>
+      {outputArea === "above" && completionBanner}
       {completion && enabled && (
         <CodeMirrorMerge className="cm" theme={theme}>
           <Original
@@ -282,6 +334,84 @@ export const AiCompletionEditor: React.FC<Props> = ({
         </CodeMirrorMerge>
       )}
       {(!completion || !enabled) && children}
+      {/* By default, show the completion banner below the code */}
+      {(outputArea === "below" || !outputArea) && completionBanner}
+    </div>
+  );
+};
+
+interface CompletionBannerProps {
+  status: "loading" | "generated";
+  onAccept: () => void;
+  onReject: () => void;
+  showInputPrompt: boolean;
+  setShowInputPrompt: (show: boolean) => void;
+  runCell: () => void;
+  className?: string;
+}
+
+const CompletionBanner: React.FC<CompletionBannerProps> = ({
+  status,
+  onAccept,
+  onReject,
+  className,
+  showInputPrompt,
+  setShowInputPrompt,
+  runCell,
+}) => {
+  const isLoading = status === "loading";
+
+  return (
+    <div
+      className={cn(
+        "flex flex-row items-center gap-6 rounded-md py-2 px-2.5 text-sm border border-border",
+        "shadow-[0_0_6px_1px_rgba(34,197,94,0.15)]",
+        className,
+      )}
+    >
+      <div className="flex flex-row items-center gap-2">
+        <div
+          className={cn(
+            "w-2 h-2 rounded-full",
+            status === "loading" ? "bg-blue-500 animate-pulse" : "bg-green-500",
+          )}
+        />
+        <p className="transition-opacity duration-200 text-muted-foreground">
+          {isLoading ? "Generating fix..." : "Showing fix"}
+        </p>
+      </div>
+
+      <div className="flex flex-row items-center gap-1">
+        <Label
+          htmlFor="show-input-prompt"
+          className="text-muted-foreground text-xs whitespace-nowrap ellipsis"
+        >
+          Show prompt
+        </Label>
+        <Switch
+          checked={showInputPrompt}
+          onCheckedChange={setShowInputPrompt}
+          size="xs"
+        />
+      </div>
+
+      <div className="flex flex-row items-center gap-2 ml-auto">
+        <AcceptCompletionButton
+          isLoading={isLoading}
+          onAccept={onAccept}
+          size="xs"
+          buttonStyles="border-none rounded-md rounded-r-none"
+          playButtonStyles="border-0 border-l-1 rounded-md rounded-l-none"
+          runCell={runCell}
+          // acceptShortcut="Mod-↵"
+        />
+        <RejectCompletionButton
+          onDecline={onReject}
+          size="xs"
+          className="border-none rounded-md"
+          // declineShortcut="Shift-Mod-Delete"
+        />
+      </div>
     </div>
   );
 };

package/src/components/editor/ai/completion-handlers.tsx

@@ -1,8 +1,10 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { PlayIcon } from "lucide-react";
 import React from "react";
 import { MinimalHotkeys } from "@/components/shortcuts/renderShortcut";
 import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
 import { isPlatformMac } from "@/core/hotkeys/shortcuts";
 
 /**
@@ -99,29 +101,111 @@ export const CompletionActionsCellFooter: React.FC<{
 }> = ({ isLoading, onAccept, onDecline }) => {
   return (
     <>
-      <Button
-        variant="text"
-        size="xs"
-        disabled={isLoading}
-        onClick={onAccept}
-        className="h-6 text-(--grass-11) border-(--grass-7) bg-(--grass-3)/60
-        hover:bg-(--grass-3) dark:bg-(--grass-4)/80 dark:hover:bg-(--grass-3) rounded px-3 font-semibold
-        active:bg-(--grass-5) dark:active:bg-(--grass-4)
-        border-(--green-6) border hover:shadow-xs"
-      >
-        Accept
-      </Button>
-      <Button
-        variant="text"
+      <AcceptCompletionButton
+        isLoading={isLoading}
+        onAccept={onAccept}
         size="xs"
-        onClick={onDecline}
-        className="h-6 text-(--red-10) border-(--red-7) bg-(--red-3)/60 hover:bg-(--red-3)
-        dark:bg-(--red-4)/80 dark:hover:bg-(--red-3) rounded px-3 font-semibold
-        active:bg-(--red-5) dark:active:bg-(--red-4)
-        border-(--red-6) border hover:shadow-xs"
-      >
-        Reject
-      </Button>
+      />
+      <RejectCompletionButton onDecline={onDecline} size="xs" />
     </>
   );
 };
+
+export const AcceptCompletionButton: React.FC<{
+  isLoading: boolean;
+  onAccept: () => void;
+  size?: "xs" | "sm";
+  buttonStyles?: string;
+  playButtonStyles?: string;
+  acceptShortcut?: string;
+  runCell?: () => void;
+}> = ({
+  isLoading,
+  onAccept,
+  size = "sm",
+  buttonStyles,
+  acceptShortcut,
+  runCell,
+  playButtonStyles,
+}) => {
+  const handleAcceptAndRun = () => {
+    onAccept();
+    if (runCell) {
+      runCell();
+    }
+  };
+
+  const baseClasses = `h-6 text-(--grass-11) bg-(--grass-3)/60
+    hover:bg-(--grass-3) dark:bg-(--grass-4)/80 dark:hover:bg-(--grass-3) font-semibold
+    active:bg-(--grass-5) dark:active:bg-(--grass-4)
+    border-(--green-6) border hover:shadow-xs`;
+
+  if (runCell) {
+    return (
+      <div className="flex">
+        <Button
+          variant="text"
+          size={size}
+          disabled={isLoading}
+          onClick={onAccept}
+          className={`${baseClasses} rounded-r-none ${buttonStyles}`}
+        >
+          Accept
+          {acceptShortcut && (
+            <MinimalHotkeys className="ml-1 inline" shortcut={acceptShortcut} />
+          )}
+        </Button>
+        <Tooltip content="Accept and run cell">
+          <Button
+            variant="text"
+            size={size}
+            disabled={isLoading}
+            onClick={handleAcceptAndRun}
+            className={`${baseClasses} rounded-l-none px-1.5 ${playButtonStyles}`}
+          >
+            <PlayIcon className="h-2.5 w-2.5 mt-0.5" />
+          </Button>
+        </Tooltip>
+      </div>
+    );
+  }
+
+  return (
+    <Button
+      variant="text"
+      size={size}
+      disabled={isLoading}
+      onClick={onAccept}
+      className={`${baseClasses} rounded px-3 ${buttonStyles}`}
+    >
+      Accept
+      {acceptShortcut && (
+        <MinimalHotkeys className="ml-1 inline" shortcut={acceptShortcut} />
+      )}
+    </Button>
+  );
+};
+
+export const RejectCompletionButton: React.FC<{
+  onDecline: () => void;
+  size?: "xs" | "sm";
+  className?: string;
+  declineShortcut?: string;
+}> = ({ onDecline, size = "sm", className, declineShortcut }) => {
+  return (
+    <Button
+      variant="text"
+      size={size}
+      onClick={onDecline}
+      className={`h-6 text-(--red-10) bg-(--red-3)/60 hover:bg-(--red-3)
+    dark:bg-(--red-4)/80 dark:hover:bg-(--red-3) rounded px-3 font-semibold
+    active:bg-(--red-5) dark:active:bg-(--red-4)
+    border-(--red-6) border hover:shadow-xs ${className}`}
+    >
+      Reject
+      {declineShortcut && (
+        <MinimalHotkeys className="ml-1 inline" shortcut={declineShortcut} />
+      )}
+    </Button>
+  );
+};

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

@@ -67,6 +67,7 @@ export interface CellEditorProps
   // DOM node where the editorView will be mounted
   editorViewParentRef?: React.RefObject<HTMLDivElement | null>;
   showHiddenCode: (opts?: { focus?: boolean }) => void;
+  outputArea?: "above" | "below";
 }
 
 const CellEditorInternal = ({
@@ -88,6 +89,7 @@ const CellEditorInternal = ({
   languageAdapter,
   setLanguageAdapter,
   showLanguageToggles = true,
+  outputArea,
 }: CellEditorProps) => {
   const [aiCompletionCell, setAiCompletionCell] = useAtom(aiCompletionCellAtom);
   const deleteCell = useDeleteCellCallback();
@@ -407,6 +409,7 @@ const CellEditorInternal = ({
     <AiCompletionEditor
       enabled={aiCompletionCell?.cellId === cellId}
       initialPrompt={aiCompletionCell?.initialPrompt}
+      triggerImmediately={aiCompletionCell?.triggerImmediately}
       currentCode={editorViewRef.current?.state.doc.toString() ?? code}
       currentLanguageAdapter={languageAdapter}
       declineChange={useEvent(() => {
@@ -433,6 +436,8 @@ const CellEditorInternal = ({
         editorViewRef.current?.focus();
         setAiCompletionCell(null);
       })}
+      runCell={handleRunCell}
+      outputArea={outputArea}
     >
       <div className="relative w-full" {...navigationProps}>
         {showHideButton && (

package/src/components/editor/chrome/panels/cache-panel.tsx

@@ -0,0 +1,216 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { DatabaseZapIcon, RefreshCwIcon, Trash2Icon } from "lucide-react";
+import React, { useState } from "react";
+import { useLocale } from "react-aria";
+import { Spinner } from "@/components/icons/spinner";
+import { Button } from "@/components/ui/button";
+import { ConfirmationButton } from "@/components/ui/confirmation-button";
+import { toast } from "@/components/ui/use-toast";
+import { cacheInfoAtom } from "@/core/cache/requests";
+import { useRequestClient } from "@/core/network/requests";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { cn } from "@/utils/cn";
+import { formatBytes, formatTime } from "@/utils/formatting";
+import { prettyNumber } from "@/utils/numbers";
+import { PanelEmptyState } from "./empty-state";
+
+const CachePanel = () => {
+  const { clearCache, getCacheInfo } = useRequestClient();
+  const cacheInfo = useAtomValue(cacheInfoAtom);
+  const [purging, setPurging] = useState(false);
+  const { locale } = useLocale();
+
+  const { isPending, isFetching, refetch } = useAsyncData(async () => {
+    await getCacheInfo();
+    // Artificially spin the icon if the request is really fast
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }, []);
+
+  const handlePurge = async () => {
+    try {
+      setPurging(true);
+      await clearCache();
+      toast({
+        title: "Cache purged",
+        description: "All cached data has been cleared",
+      });
+      // Request updated cache info after purge
+      refetch();
+    } catch (err) {
+      toast({
+        title: "Error",
+        description:
+          err instanceof Error ? err.message : "Failed to purge cache",
+        variant: "danger",
+      });
+    } finally {
+      setPurging(false);
+    }
+  };
+
+  // Show spinner only on initial load
+  if (isPending && !cacheInfo) {
+    return <Spinner size="medium" centered={true} />;
+  }
+
+  const refreshButton = (
+    <Button variant="outline" size="sm" onClick={refetch} disabled={isFetching}>
+      {isFetching ? (
+        <Spinner size="small" className="w-4 h-4 mr-2" />
+      ) : (
+        <RefreshCwIcon className="w-4 h-4 mr-2" />
+      )}
+      Refresh
+    </Button>
+  );
+
+  if (!cacheInfo) {
+    return (
+      <PanelEmptyState
+        title="No cache data"
+        description="Cache information is not available."
+        icon={<DatabaseZapIcon />}
+        action={refreshButton}
+      />
+    );
+  }
+
+  const totalHits = cacheInfo.hits;
+  const totalMisses = cacheInfo.misses;
+  const totalTime = cacheInfo.time;
+  const diskTotal = cacheInfo.disk_total;
+  const diskToFree = cacheInfo.disk_to_free;
+
+  const totalRequests = totalHits + totalMisses;
+  const hitRate = totalRequests > 0 ? (totalHits / totalRequests) * 100 : 0;
+
+  // Show empty state if no cache activity
+  if (totalRequests === 0) {
+    return (
+      <PanelEmptyState
+        title="No cache activity"
+        description="The cache has not been used yet. Cached functions will appear here once they are executed."
+        icon={<DatabaseZapIcon />}
+        action={refreshButton}
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-auto">
+      <div className="flex flex-col gap-4 p-4 h-full">
+        {/* Header with Refresh Button */}
+        <div className="flex items-center justify-end">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={refetch}
+            disabled={isFetching}
+          >
+            <RefreshCwIcon
+              className={cn(
+                "h-4 w-4 text-muted-foreground hover:text-foreground",
+                isFetching && "animate-[spin_0.5s]",
+              )}
+            />
+          </Button>
+        </div>
+
+        {/* Statistics Section */}
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold text-foreground">Statistics</h3>
+          <div className="grid grid-cols-2 gap-3">
+            <StatCard
+              label="Time saved"
+              value={formatTime(totalTime, locale)}
+              description="Total execution time saved"
+            />
+            <StatCard
+              label="Hit rate"
+              value={
+                totalRequests > 0 ? `${prettyNumber(hitRate, locale)}%` : "—"
+              }
+              description={`${prettyNumber(totalHits, locale)} hits / ${prettyNumber(totalRequests, locale)} total`}
+            />
+            <StatCard
+              label="Cache hits"
+              value={prettyNumber(totalHits, locale)}
+              description="Successful cache retrievals"
+            />
+            <StatCard
+              label="Cache misses"
+              value={prettyNumber(totalMisses, locale)}
+              description="Cache not found"
+            />
+          </div>
+        </div>
+
+        {/* Storage Section */}
+        {diskTotal > 0 && (
+          <div className="space-y-3 pt-2 border-t">
+            <h3 className="text-sm font-semibold text-foreground">Storage</h3>
+            <div className="grid grid-cols-1 gap-3">
+              <StatCard
+                label="Disk usage"
+                value={formatBytes(diskTotal, locale)}
+                description={
+                  diskToFree > 0
+                    ? `${formatBytes(diskToFree, locale)} can be freed`
+                    : "Cache storage on disk"
+                }
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="my-auto" />
+
+        {/* Actions Section */}
+        <div className="pt-2 border-t">
+          <ConfirmationButton
+            title="Purge cache?"
+            description="This will permanently delete all cached data. This action cannot be undone."
+            confirmText="Purge"
+            destructive={true}
+            onConfirm={handlePurge}
+          >
+            <Button
+              variant="outlineDestructive"
+              size="xs"
+              disabled={purging}
+              className="w-full"
+            >
+              {purging ? (
+                <Spinner size="small" className="w-3 h-3 mr-2" />
+              ) : (
+                <Trash2Icon className="w-3 h-3 mr-2" />
+              )}
+              Purge Cache
+            </Button>
+          </ConfirmationButton>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const StatCard: React.FC<{
+  label: string;
+  value: string;
+  description?: string;
+}> = ({ label, value, description }) => {
+  return (
+    <div className="flex flex-col gap-1 p-3 rounded-lg border bg-card">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="text-lg font-semibold">{value}</span>
+      {description && (
+        <span className="text-xs text-muted-foreground">{description}</span>
+      )}
+    </div>
+  );
+};
+
+export default CachePanel;

package/src/components/editor/chrome/panels/empty-state.tsx

@@ -18,7 +18,9 @@ export const PanelEmptyState = ({
     <div className="mx-6 my-6 flex flex-col gap-2">
       <div className="flex flex-row gap-2 items-center">
         {icon &&
-          React.cloneElement(icon, { className: "text-accent-foreground" })}
+          React.cloneElement(icon, {
+            className: "text-accent-foreground flex-shrink-0",
+          })}
         <span className="mt-1 text-accent-foreground">{title}</span>
       </div>
       <span className="text-muted-foreground text-sm">{description}</span>