@marimo-team/frontend 0.15.5 → 0.16.0-dev96986

package/src/components/editor/ai/completion-utils.ts

@@ -10,6 +10,7 @@ import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import type { FileUIPart } from "ai";
 import { getAIContextRegistry } from "@/core/ai/context/context";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
+import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import type { AiCompletionRequest } from "@/core/network/types";
 import { store } from "@/core/state/jotai";
 import { Logger } from "@/utils/Logger";
@@ -145,3 +146,94 @@ export function addContextCompletion(
     startCompletion(inputRef.current.view);
   }
 }
+
+export interface AiCompletion {
+  language: LanguageAdapterType;
+  code: string;
+}
+
+/**
+ * Extracts code blocks (delimited by triple backticks) and their language ("python", "sql", "markdown").
+ * Defaults to "python" if no language is specified or no code blocks are found.
+ * Returns an array of AiCompletion objects.
+ */
+export function codeToCells(code: string): AiCompletion[] {
+  if (code.trim().length === 0) {
+    return [];
+  }
+
+  // If there are no backticks, assume code is in 1 cell and python
+  if (!code.includes("```")) {
+    return [{ language: "python", code: code }];
+  }
+
+  // If code has opening backticks, get the code after it
+  const cells: AiCompletion[] = [];
+  let start = 0;
+
+  let openIndex = code.indexOf("```", start);
+  while (openIndex !== -1) {
+    const newlineIndex = code.indexOf("\n", openIndex);
+    if (newlineIndex === -1) {
+      // If there's no newline after opening backticks, treat everything after as code
+      const remaining = code.slice(openIndex + 3);
+      const firstSpace = remaining.indexOf(" ");
+      const language =
+        firstSpace === -1 ? remaining : remaining.slice(0, firstSpace);
+      const finalLanguage =
+        language === "markdown"
+          ? "markdown"
+          : language === "sql"
+            ? "sql"
+            : "python";
+      // Extract code after the language identifier
+      const codeContent =
+        firstSpace === -1 ? "" : remaining.slice(firstSpace + 1);
+      if (codeContent.trim()) {
+        cells.push({ language: finalLanguage, code: codeContent.trim() });
+      }
+      break;
+    }
+
+    let language = code.slice(openIndex + 3, newlineIndex).trim() || "";
+    language =
+      language === "markdown"
+        ? "markdown"
+        : language === "sql"
+          ? "sql"
+          : "python";
+    const codeStart = newlineIndex + 1;
+
+    const closeIndex = code.indexOf("```", codeStart);
+    if (closeIndex === -1) {
+      // If there's no closing backticks, treat everything after the opening as code
+      const codeContent = code.slice(codeStart).replace(/\n+$/, "");
+      if (codeContent.trim()) {
+        cells.push({
+          language: language as LanguageAdapterType,
+          code: codeContent,
+        });
+      }
+      break;
+    }
+
+    // Remove trailing newlines
+    const codeContent = code.slice(codeStart, closeIndex).replace(/\n+$/, "");
+    if (codeContent.trim()) {
+      cells.push({
+        language: language as LanguageAdapterType,
+        code: codeContent,
+      });
+    }
+
+    start = closeIndex + 3;
+    openIndex = code.indexOf("```", start);
+  }
+
+  // If no cells found, assume code is in 1 cell and python
+  if (cells.length === 0) {
+    cells.push({ language: "python", code: code });
+  }
+
+  return cells;
+}

package/src/components/editor/ai/transport/chat-transport.tsx

@@ -0,0 +1,39 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import {
+  DefaultChatTransport,
+  type HttpChatTransportInitOptions,
+  type UIMessage,
+  type UIMessageChunk,
+} from "ai";
+
+/**
+ * Thin wrapper around the DefaultChatTransport that calls a callback when a chunk is received.
+ */
+export class StreamingChunkTransport<
+  UI_MESSAGE extends UIMessage,
+> extends DefaultChatTransport<UI_MESSAGE> {
+  private onChunkReceived: (chunk: UIMessageChunk) => void;
+
+  constructor(
+    options: HttpChatTransportInitOptions<UI_MESSAGE> = {},
+    onChunkReceived: (chunk: UIMessageChunk) => void,
+  ) {
+    super(options);
+    this.onChunkReceived = onChunkReceived;
+  }
+
+  protected override processResponseStream(
+    stream: ReadableStream<Uint8Array>,
+  ): ReadableStream<UIMessageChunk> {
+    const onChunkReceived = this.onChunkReceived;
+    return super.processResponseStream(stream).pipeThrough(
+      new TransformStream<UIMessageChunk, UIMessageChunk>({
+        async transform(chunk, controller) {
+          onChunkReceived(chunk);
+          controller.enqueue(chunk);
+        },
+      }),
+    );
+  }
+}

package/src/components/editor/cell/CellStatus.tsx

@@ -5,6 +5,7 @@ import {
   RefreshCwIcon,
   WorkflowIcon,
 } from "lucide-react";
+import { useDateFormatter } from "react-aria";
 import { MultiIcon } from "@/components/icons/multi-icon";
 import { Logger } from "@/utils/Logger";
 import type { CellRuntimeState } from "../../../core/cells/types";
@@ -28,26 +29,6 @@ export interface CellStatusComponentProps
   uninstantiated: boolean;
 }
 
-// Looks like HH:MM:SS.SSS AM/PM
-const timeFormatter = new Intl.DateTimeFormat("en-US", {
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric",
-  fractionalSecondDigits: 3,
-  hour12: true,
-});
-
-// Looks like MM/DD HH:MM:SS.SSS AM/PM
-const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {
-  month: "numeric",
-  day: "numeric",
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric",
-  fractionalSecondDigits: 3,
-  hour12: true,
-});
-
 export const CellStatusComponent: React.FC<CellStatusComponentProps> = ({
   editing,
   status,
@@ -329,10 +310,32 @@ export const ElapsedTime = (props: { elapsedTime: string }) => {
 const LastRanTime = (props: { lastRanTime: number }) => {
   const date = new Date(props.lastRanTime * 1000);
   const today = new Date();
+
+  // Looks like HH:MM:SS.SSS AM/PM
+  const timeFormatter = useDateFormatter({
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    fractionalSecondDigits: 3,
+    hour12: true,
+  });
+
+  // Looks like MM/DD HH:MM:SS.SSS AM/PM
+  const dateTimeFormatter = useDateFormatter({
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    fractionalSecondDigits: 3,
+    hour12: true,
+  });
+
   const formatter =
     date.toDateString() === today.toDateString()
       ? timeFormatter
       : dateTimeFormatter;
+
   return (
     <span>
       Ran at{" "}

package/src/components/editor/cell/CreateCellButton.tsx

@@ -9,8 +9,7 @@ import {
 } from "@/components/ui/context-menu";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
-import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,
@@ -103,7 +102,7 @@ const CreateCellButtonContextMenu = (props: {
             evt.stopPropagation();
             maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
             onClick({
-              code: new MarkdownLanguageAdapter().defaultCode,
+              code: LanguageAdapters.markdown.defaultCode,
               hideCode: true,
             });
           }}
@@ -118,7 +117,7 @@ const CreateCellButtonContextMenu = (props: {
           onSelect={(evt) => {
             evt.stopPropagation();
             maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
-            onClick({ code: new SQLLanguageAdapter().defaultCode });
+            onClick({ code: LanguageAdapters.sql.defaultCode });
           }}
         >
           <div className="mr-3 text-muted-foreground">

package/src/components/editor/cell/StagedAICell.tsx

@@ -0,0 +1,51 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue, useStore } from "jotai";
+import { stagedAICellsAtom, useStagedCells } from "@/core/ai/staged-cells";
+import type { CellId } from "@/core/cells/ids";
+import { cn } from "@/utils/cn";
+import { CompletionActionsCellFooter } from "../ai/completion-handlers";
+
+export const StagedAICellBackground: React.FC<{
+  cellId: CellId;
+  className?: string;
+}> = ({ cellId, className }) => {
+  const stagedAICells = useAtomValue(stagedAICellsAtom);
+
+  if (!stagedAICells.has(cellId)) {
+    return null;
+  }
+
+  return <div className={cn("mo-ai-generated-cell", className)} />;
+};
+
+export const StagedAICellFooter: React.FC<{ cellId: CellId }> = ({
+  cellId,
+}) => {
+  const store = useStore();
+  const stagedAICells = useAtomValue(stagedAICellsAtom);
+  const { deleteStagedCell, removeStagedCell } = useStagedCells(store);
+
+  if (!stagedAICells.has(cellId)) {
+    return null;
+  }
+
+  const handleAcceptCompletion = () => {
+    removeStagedCell(cellId);
+  };
+
+  const handleDeclineCompletion = () => {
+    deleteStagedCell(cellId);
+  };
+
+  return (
+    <div className="flex items-center justify-end gap-1.5 w-full pb-1 pt-2">
+      <CompletionActionsCellFooter
+        isLoading={false}
+        onAccept={handleAcceptCompletion}
+        onDecline={handleDeclineCompletion}
+        size="xs"
+      />
+    </div>
+  );
+};

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

@@ -56,7 +56,8 @@ const CellActionsDropdownInternal = (
   ref: React.Ref<CellActionsDropdownHandle>,
 ) => {
   const [open, setOpen] = useState(false);
-  const actions = useCellActionButtons({ cell: props });
+  const closePopover = () => setOpen(false);
+  const actions = useCellActionButtons({ cell: props, closePopover });
 
   // store the last focused element so we can restore it when the popover closes
   const restoreFocus = useRestoreFocus();

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

@@ -7,8 +7,7 @@ import { useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { switchLanguage } from "@/core/codemirror/language/extension";
-import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import type { LanguageAdapter } from "@/core/codemirror/language/types";
 import { Functions } from "@/utils/functions";
 import { MarkdownIcon, PythonIcon } from "./icons";
@@ -27,11 +26,11 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   onAfterToggle,
 }) => {
   const canUseMarkdown = useMemo(
-    () => new MarkdownLanguageAdapter().isSupported(code) || code.trim() === "",
+    () => LanguageAdapters.markdown.isSupported(code) || code.trim() === "",
     [code],
   );
   const canUseSQL = useMemo(
-    () => new SQLLanguageAdapter().isSupported(code) || code.trim() === "",
+    () => LanguageAdapters.sql.isSupported(code) || code.trim() === "",
     [code],
   );
 

package/src/components/editor/chrome/wrapper/footer-items/machine-stats.tsx

@@ -4,6 +4,7 @@ import { useAtomValue } from "jotai";
 import { CpuIcon, MemoryStickIcon, MicrochipIcon } from "lucide-react";
 import type React from "react";
 import { useState } from "react";
+import { useNumberFormatter } from "react-aria";
 import { Tooltip } from "@/components/ui/tooltip";
 import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
@@ -56,23 +57,42 @@ const MemoryUsageBar: React.FC<{
 }> = ({ memory, kernel, server }) => {
   const { percent, total, available } = memory;
   const roundedPercent = Math.round(percent);
+
+  const gbFormatter = useNumberFormatter({
+    maximumFractionDigits: 2,
+  });
+  const mbFormatter = useNumberFormatter({
+    maximumFractionDigits: 0,
+  });
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes > 1024 * 1024 * 1024) {
+      return `${gbFormatter.format(bytes / (1024 * 1024 * 1024))} GB`;
+    }
+    return `${mbFormatter.format(bytes / (1024 * 1024))} MB`;
+  };
+
+  const formatGB = (bytes: number): string => {
+    return gbFormatter.format(bytes / (1024 * 1024 * 1024));
+  };
+
   return (
     <Tooltip
       delayDuration={200}
       content={
         <div className="flex flex-col gap-1">
           <span>
-            <b>computer memory:</b> {asGB(total - available)} / {asGB(total)} GB
-            ({roundedPercent}%)
+            <b>computer memory:</b> {formatGB(total - available)} /{" "}
+            {formatGB(total)} GB ({roundedPercent}%)
           </span>
           {server?.memory && (
             <span>
-              <b>marimo server:</b> {asGBorMB(server.memory)}
+              <b>marimo server:</b> {formatBytes(server.memory)}
             </span>
           )}
           {kernel?.memory && (
             <span>
-              <b>kernel:</b> {asGBorMB(kernel.memory)}
+              <b>kernel:</b> {formatBytes(kernel.memory)}
             </span>
           )}
         </div>
@@ -122,6 +142,20 @@ const GPUBar: React.FC<{ gpus: GPU[] }> = ({ gpus }) => {
       gpus.length,
   );
 
+  const gbFormatter = useNumberFormatter({
+    maximumFractionDigits: 2,
+  });
+  const mbFormatter = useNumberFormatter({
+    maximumFractionDigits: 0,
+  });
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes > 1024 * 1024 * 1024) {
+      return `${gbFormatter.format(bytes / (1024 * 1024 * 1024))} GB`;
+    }
+    return `${mbFormatter.format(bytes / (1024 * 1024))} MB`;
+  };
+
   return (
     <Tooltip
       delayDuration={200}
@@ -132,7 +166,7 @@ const GPUBar: React.FC<{ gpus: GPU[] }> = ({ gpus }) => {
               <b>
                 GPU {gpu.index} ({gpu.name}):
               </b>{" "}
-              {asGBorMB(gpu.memory.used)} / {asGBorMB(gpu.memory.total)} GB (
+              {formatBytes(gpu.memory.used)} / {formatBytes(gpu.memory.total)} (
               {Math.round(gpu.memory.percent)}%)
             </span>
           ))}
@@ -160,26 +194,3 @@ const Bar: React.FC<{ percent: number; colorClassName?: string }> = ({
     </div>
   );
 };
-
-function asGBorMB(bytes: number): string {
-  if (bytes > 1024 * 1024 * 1024) {
-    return `${asGB(bytes)} GB`;
-  }
-  return `${asMB(bytes)} MB`;
-}
-
-function asMB(bytes: number) {
-  // 0 decimal places
-  const format = new Intl.NumberFormat("en-US", {
-    maximumFractionDigits: 0,
-  });
-  return format.format(bytes / (1024 * 1024));
-}
-
-function asGB(bytes: number) {
-  // At most 2 decimal places
-  const format = new Intl.NumberFormat("en-US", {
-    maximumFractionDigits: 2,
-  });
-  return format.format(bytes / (1024 * 1024 * 1024));
-}

package/src/components/editor/controls/notebook-menu-dropdown.tsx

@@ -2,6 +2,7 @@
 
 import { MenuIcon } from "lucide-react";
 import React from "react";
+import { useLocale } from "react-aria";
 import { Button } from "@/components/editor/inputs/Inputs";
 import {
   DropdownMenu,
@@ -33,7 +34,7 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
   tooltip = "Actions",
 }) => {
   const actions = useNotebookActions();
-
+  const { locale } = useLocale();
   // Create tooltip content with keyboard shortcut decoration
   const tooltipContent = (
     <div className="flex flex-col gap-2">
@@ -148,7 +149,8 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
           );
         })}
         <DropdownMenuSeparator />
-        <div className="flex-1 px-2 text-xs text-muted-foreground">
+        <div className="flex-1 px-2 text-xs text-muted-foreground flex flex-col gap-1">
+          <span>Locale: {locale}</span>
           <span>Version: {getMarimoVersion()}</span>
         </div>
       </DropdownMenuContent>

package/src/components/editor/file-tree/requesting-tree.tsx

@@ -13,15 +13,21 @@ import { type FilePath, PathBuilder } from "@/utils/paths";
 
 export class RequestingTree {
   private delegate = new SimpleTree<FileInfo>([]);
+  private callbacks: {
+    listFiles: EditRequests["sendListFiles"];
+    createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
+    deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
+  };
 
-  constructor(
-    private callbacks: {
-      listFiles: EditRequests["sendListFiles"];
-      createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
-      deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
-      renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
-    },
-  ) {}
+  constructor(callbacks: {
+    listFiles: EditRequests["sendListFiles"];
+    createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
+    deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
+  }) {
+    this.callbacks = callbacks;
+  }
 
   private rootPath: FilePath = "" as FilePath;
   private onChange: (data: FileInfo[]) => void = Functions.NOOP;

package/src/components/editor/renderers/CellArray.tsx

@@ -20,8 +20,7 @@ import { SortableCellsProvider } from "@/components/sort/SortableCellsProvider";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import { aiEnabledAtom } from "@/core/config/config";
 import { isConnectedAtom } from "@/core/network/connection";
 import { useBoolean } from "@/hooks/useBoolean";
@@ -288,7 +287,7 @@ const AddCellButtons: React.FC<{
             createNewCell({
               cellId: { type: "__end__", columnId },
               before: false,
-              code: new MarkdownLanguageAdapter().defaultCode,
+              code: LanguageAdapters.markdown.defaultCode,
               hideCode: true,
             });
           }}
@@ -307,7 +306,7 @@ const AddCellButtons: React.FC<{
             createNewCell({
               cellId: { type: "__end__", columnId },
               before: false,
-              code: new SQLLanguageAdapter().defaultCode,
+              code: LanguageAdapters.sql.defaultCode,
             });
           }}
         >

package/src/components/editor/renderers/slides-layout/slides-layout.tsx

@@ -24,7 +24,7 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const isReading = mode === "read";
 
   const slides = (
-    <LazySlidesComponent forceKeyboardNavigation={true}>
+    <LazySlidesComponent forceKeyboardNavigation={true} className="flex-1">
       {cells.map((cell) => {
         const isOutputEmpty = cell.output == null || cell.output.data === "";
         if (isOutputEmpty) {
@@ -45,10 +45,10 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   );
 
   if (isReading) {
-    return <div className="p-4">{slides}</div>;
+    return <div className="p-4 flex flex-col flex-1 max-h-[95%]">{slides}</div>;
   }
 
-  return <div className="pr-9">{slides}</div>;
+  return <div className="pr-18 pb-5 flex-1 flex flex-col">{slides}</div>;
 };
 
 interface SlideProps extends Pick<CellRuntimeState, "output" | "status"> {

package/src/components/editor/renderers/slides-layout/types.ts

@@ -5,6 +5,7 @@
  * The serialized form of a slides layout.
  * This must be backwards-compatible as it is stored on the user's disk.
  */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export type SerializedSlidesLayout = {};
 
 export interface SlidesLayout extends SerializedSlidesLayout {

package/src/components/pages/home-page.tsx

@@ -21,6 +21,7 @@ import {
   Tree,
   type TreeApi,
 } from "react-arborist";
+import { useLocale } from "react-aria";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
@@ -383,6 +384,8 @@ const NotebookList: React.FC<{
 };
 
 const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
+  const { locale } = useLocale();
+
   // If path is a sessionId, then it has not been saved yet
   // We want to keep the sessionId in this case
   const isNewNotebook = isSessionId(file.path);
@@ -427,7 +430,7 @@ const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
         </div>
         {!!file.lastModified && (
           <div className="text-xs text-muted-foreground opacity-80">
-            {timeAgo(file.lastModified * 1000)}
+            {timeAgo(file.lastModified * 1000, locale)}
           </div>
         )}
       </div>

package/src/components/slides/slides-component.tsx

@@ -95,7 +95,7 @@ const SlidesComponent = ({
               }}
               className={cn(
                 "h-full w-full flex box-border overflow-y-auto overflow-x-hidden",
-                isFullscreen ? "p-20" : "p-6",
+                isFullscreen ? "p-20" : "p-6 pb-12",
               )}
             >
               <div className="mo-slide-content">{child}</div>

package/src/components/slides/slides.css

@@ -68,6 +68,7 @@ so we are resetting this back to initial. */
   width: 100%;
   display: flex;
   justify-content: center;
+  min-height: fit-content;
 
   /* width is normally set to 100%, but we want the content to be centered around
   the width needed. */
@@ -79,6 +80,11 @@ so we are resetting this back to initial. */
     width: unset;
   }
 
+  /* If the first output is the only child, make it flex 1 */
+  > *:only-child > .output:only-child {
+    flex: 1;
+  }
+
   /* Components that should be full width when in slides mode */
   div:has(> marimo-ui-element > marimo-vega) {
     display: block !important;