@marimo-team/frontend 0.16.0 → 0.16.2

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

@@ -1,6 +1,10 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { NotebookPenIcon, SquareArrowOutUpRightIcon } from "lucide-react";
+import {
+  InfoIcon,
+  NotebookPenIcon,
+  SquareArrowOutUpRightIcon,
+} from "lucide-react";
 import { Fragment, type JSX } from "react";
 import {
   Accordion,
@@ -72,6 +76,8 @@ export const MarimoErrorOutput = ({
     titleContents = "Ancestor stopped";
     alertVariant = "default";
     titleColor = "text-secondary-foreground";
+  } else if (errors.some((e) => e.type === "sql-error")) {
+    titleContents = "SQL Error in statement";
   } else {
     // Check for exception type
     const exceptionError = errors.find((e) => e.type === "exception");
@@ -126,6 +132,10 @@ export const MarimoErrorOutput = ({
   const unknownErrors = errors.filter(
     (e): e is Extract<MarimoError, { type: "unknown" }> => e.type === "unknown",
   );
+  const sqlErrors = errors.filter(
+    (e): e is Extract<MarimoError, { type: "sql-error" }> =>
+      e.type === "sql-error",
+  );
 
   const openScratchpad = () => {
     chromeActions.openApplication("scratchpad");
@@ -485,6 +495,55 @@ export const MarimoErrorOutput = ({
       );
     }
 
+    if (sqlErrors.length > 0) {
+      messages.push(
+        <div key="sql-errors">
+          {sqlErrors.map((error, idx) => {
+            const line =
+              error.sql_line != null ? (error?.sql_line | 0) + 1 : null;
+            const col = error.sql_col != null ? (error?.sql_col | 0) + 1 : null;
+            return (
+              <div key={`sql-error-${idx}`} className="space-y-2">
+                <p className="text-muted-foreground">{error.msg}</p>
+                {error.hint && (
+                  <div className="flex items-start gap-2">
+                    <InfoIcon className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                    <pre className="whitespace-pre-wrap text-sm text-muted-foreground">
+                      {error.hint}
+                    </pre>
+                  </div>
+                )}
+                {error.sql_statement && (
+                  <div className="bg-muted/50 p-2 rounded text-xs font-mono">
+                    <pre className="whitespace-pre-wrap">
+                      {error.sql_statement}
+                    </pre>
+                  </div>
+                )}
+                {line !== null && col !== null && (
+                  <p className="text-xs text-muted-foreground">
+                    Error at line {line}, column {col}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+          {cellId && <AutoFixButton errors={sqlErrors} cellId={cellId} />}
+          <Tip title="How to fix SQL errors">
+            <p className="pb-2">
+              SQL parsing errors often occur due to invalid syntax, missing
+              keywords, or unsupported SQL features.
+            </p>
+            <p className="py-2">
+              Check your SQL syntax and ensure you're using supported SQL
+              dialect features. The error location can help you identify the
+              problematic part of your query.
+            </p>
+          </Tip>
+        </div>,
+      );
+    }
+
     return messages;
   };
 

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;

package/src/components/terminal/theme.tsx

@@ -1,3 +1,4 @@
+/* Copyright 2024 Marimo. All rights reserved. */
 import type { ResolvedTheme } from "@/theme/useTheme";
 
 // Terminal theme configuration

package/src/components/tracing/tracing-spec.ts

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import type { TopLevelSpec } from "vega-lite";
+import type { TimeUnit } from "vega-lite/build/src/timeunit";
 import type { CellId } from "@/core/cells/ids";
 import type { CellRun } from "@/core/cells/runs";
 import type { ResolvedTheme } from "@/theme/useTheme";
@@ -30,6 +31,8 @@ export function createGanttBaseSpec(
   chartPosition: ChartPosition,
   theme: ResolvedTheme,
 ): Readonly<TopLevelSpec> {
+  // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
+  const timeUnit: TimeUnit = "hoursminutessecondsmilliseconds";
   return {
     $schema: "https://vega.github.io/schema/vega-lite/v5.json",
     background: theme === "dark" ? "black" : undefined,
@@ -76,15 +79,13 @@ export function createGanttBaseSpec(
         {
           field: startTimestampField,
           type: "temporal",
-          // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
-          timeUnit: "hoursminutessecondsmilliseconds",
+          timeUnit: timeUnit,
           title: "Start",
         },
         {
           field: endTimestampField,
           type: "temporal",
-          // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
-          timeUnit: "hoursminutessecondsmilliseconds",
+          timeUnit: timeUnit,
           title: "End",
         },
       ],

package/src/components/ui/range-slider.tsx

@@ -3,6 +3,7 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
 import { prettyScientificNumber } from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
@@ -20,6 +21,7 @@ const RangeSlider = React.forwardRef<
   }
 >(({ className, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
+  const { locale } = useLocale();
 
   return (
     <SliderPrimitive.Root
@@ -66,7 +68,7 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[0]}>
-                {prettyScientificNumber(valueMap(props.value[0]))}
+                {prettyScientificNumber(valueMap(props.value[0]), { locale })}
               </TooltipContent>
             )}
           </TooltipPortal>
@@ -87,7 +89,7 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[1]}>
-                {prettyScientificNumber(valueMap(props.value[1]))}
+                {prettyScientificNumber(valueMap(props.value[1]), { locale })}
               </TooltipContent>
             )}
           </TooltipPortal>

package/src/components/ui/slider.tsx

@@ -3,6 +3,7 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
 import { prettyScientificNumber } from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
@@ -20,6 +21,7 @@ const Slider = React.forwardRef<
   }
 >(({ className, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
+  const { locale } = useLocale();
 
   return (
     <SliderPrimitive.Root
@@ -66,7 +68,7 @@ const Slider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 1 && (
               <TooltipContent key={props.value[0]}>
-                {prettyScientificNumber(valueMap(props.value[0]))}
+                {prettyScientificNumber(valueMap(props.value[0]), { locale })}
               </TooltipContent>
             )}
           </TooltipPortal>

package/src/components/variables/variables-table.tsx

@@ -14,6 +14,7 @@ import {
 import { sortBy } from "lodash-es";
 import { SquareEqualIcon, WorkflowIcon } from "lucide-react";
 import React, { memo, useMemo } from "react";
+import { useLocale } from "react-aria";
 import { CellLink } from "@/components/editor/links/cell-link";
 import { getCellEditorView, useCellNames } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
@@ -233,6 +234,7 @@ export const VariableTable: React.FC<Props> = memo(
     const [sorting, setSorting] = React.useState<SortingState>([]);
     const [globalFilter, setGlobalFilter] = React.useState("");
     const cellNames = useCellNames();
+    const { locale } = useLocale();
 
     const resolvedVariables: ResolvedVariable[] = useMemo(() => {
       const getName = (id: CellId) => {
@@ -279,6 +281,7 @@ export const VariableTable: React.FC<Props> = memo(
       globalFilterFn: "auto",
       // sorting
       manualSorting: true,
+      locale: locale,
       onSortingChange: setSorting,
       getSortedRowModel: getSortedRowModel(),
       state: {

package/src/core/MarimoApp.tsx

@@ -15,6 +15,7 @@ import { ErrorBoundary } from "../components/editor/boundary/ErrorBoundary";
 import { ModalProvider } from "../components/modal/ImperativeModal";
 import { Toaster } from "../components/ui/toaster";
 import { TooltipProvider } from "../components/ui/tooltip";
+import { LocaleProvider } from "./i18n/locale-provider";
 import { slotsController } from "./slots/slots";
 
 // Force tailwind classnames
@@ -69,7 +70,7 @@ export const MarimoApp: React.FC = memo(() => {
       <CssVariables
         variables={{ "--marimo-code-editor-font-size": editorFontSize }}
       >
-        {renderBody()}
+        <LocaleProvider>{renderBody()}</LocaleProvider>
       </CssVariables>
     </Providers>
   );
@@ -85,11 +86,13 @@ const Providers = memo(({ children }: PropsWithChildren) => {
       <Suspense>
         <TooltipProvider>
           <SlotzProvider controller={slotsController}>
-            <ModalProvider>
-              {children}
-              <Toaster />
-              <TailwindIndicator />
-            </ModalProvider>
+            <LocaleProvider>
+              <ModalProvider>
+                {children}
+                <Toaster />
+                <TailwindIndicator />
+              </ModalProvider>
+            </LocaleProvider>
           </SlotzProvider>
         </TooltipProvider>
       </Suspense>

package/src/core/ai/context/__tests__/registry.test.ts

@@ -101,11 +101,13 @@ class AttachmentContextProvider extends AIContextProvider<MockContextItem> {
   readonly mentionPrefix = "@";
   readonly contextType = "attachment";
 
-  constructor(
-    private items: MockContextItem[] = [],
-    private attachments: FileUIPart[] = [],
-  ) {
+  private items: MockContextItem[];
+  private attachments: FileUIPart[];
+
+  constructor(items: MockContextItem[] = [], attachments: FileUIPart[] = []) {
     super();
+    this.items = items;
+    this.attachments = attachments;
   }
 
   getItems(): MockContextItem[] {

package/src/core/ai/context/providers/cell-output.ts

@@ -9,6 +9,7 @@ import { displayCellName } from "@/core/cells/names";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import type { OutputMessage } from "@/core/kernel/messages";
 import type { JotaiStore } from "@/core/state/jotai";
+import { parseHtmlContent } from "@/utils/dom";
 import { Logger } from "@/utils/Logger";
 import { type AIContextItem, AIContextProvider } from "../registry";
 import { contextToXml } from "../utils";
@@ -64,31 +65,14 @@ function isMediaMimetype(
   return false;
 }
 
-function parseHtmlContent(htmlString: string): string {
-  try {
-    // Create a temporary DOM element to parse HTML
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = htmlString;
-
-    // Extract text content, removing HTML tags
-    const textContent = tempDiv.textContent || tempDiv.innerText || "";
-
-    // Clean up extra whitespace
-    return textContent.replaceAll(/\s+/g, " ").trim();
-  } catch (error) {
-    Logger.error("Error parsing HTML content:", error);
-    // If parsing fails, return the original string
-    return htmlString;
-  }
-}
-
 export class CellOutputContextProvider extends AIContextProvider<CellOutputContextItem> {
   readonly title = "Cell Outputs";
   readonly mentionPrefix = "@";
   readonly contextType = "cell-output";
-
-  constructor(private store: JotaiStore) {
+  private store: JotaiStore;
+  constructor(store: JotaiStore) {
     super();
+    this.store = store;
   }
 
   getItems(): CellOutputContextItem[] {

package/src/core/ai/context/providers/error.ts

@@ -64,9 +64,11 @@ export class ErrorContextProvider extends AIContextProvider<ErrorContextItem> {
   readonly title = "Errors";
   readonly mentionPrefix = "@";
   readonly contextType = "error";
+  private store: JotaiStore;
 
-  constructor(private store: JotaiStore) {
+  constructor(store: JotaiStore) {
     super();
+    this.store = store;
   }
 
   getItems(): ErrorContextItem[] {

package/src/core/ai/context/providers/file.ts

@@ -43,11 +43,16 @@ export class FileContextProvider extends AIContextProvider<FileContextItem> {
   readonly mentionPrefix = "#";
   readonly contextType = "file";
 
+  private apiRequests: EditRequests & RunRequests;
+  private config: FileSearchConfig;
+
   constructor(
-    private apiRequests: EditRequests & RunRequests,
-    private config: FileSearchConfig = DEFAULT_FILE_SEARCH_CONFIG,
+    apiRequests: EditRequests & RunRequests,
+    config: FileSearchConfig = DEFAULT_FILE_SEARCH_CONFIG,
   ) {
     super();
+    this.apiRequests = apiRequests;
+    this.config = config;
   }
 
   /**

package/src/core/ai/context/providers/tables.ts

@@ -17,9 +17,10 @@ export class TableContextProvider extends AIContextProvider<TableContextItem> {
   readonly title = "Tables";
   readonly mentionPrefix = "@";
   readonly contextType = "data";
-
-  constructor(private tablesMap: DatasetTablesMap) {
+  private tablesMap: DatasetTablesMap;
+  constructor(tablesMap: DatasetTablesMap) {
     super();
+    this.tablesMap = tablesMap;
   }
 
   getItems(): TableContextItem[] {

package/src/core/ai/context/providers/variable.ts

@@ -20,11 +20,13 @@ export class VariableContextProvider extends AIContextProvider<VariableContextIt
   readonly mentionPrefix = "@";
   readonly contextType = "variable";
 
-  constructor(
-    private variables: Variables,
-    private tablesMap: DatasetTablesMap,
-  ) {
+  private variables: Variables;
+  private tablesMap: DatasetTablesMap;
+
+  constructor(variables: Variables, tablesMap: DatasetTablesMap) {
     super();
+    this.variables = variables;
+    this.tablesMap = tablesMap;
   }
 
   getItems(): VariableContextItem[] {

package/src/core/ai/staged-cells.ts

@@ -10,7 +10,12 @@ import { useDeleteCellCallback } from "@/components/editor/cell/useDeleteCell";
 import { CellId } from "@/core/cells/ids";
 import { createReducerAndAtoms } from "@/utils/createReducer";
 import { Logger } from "@/utils/Logger";
-import { cellHandleAtom, useCellActions } from "../cells/cells";
+import { maybeAddMarimoImport } from "../cells/add-missing-import";
+import {
+  type CreateNewCellAction,
+  cellHandleAtom,
+  useCellActions,
+} from "../cells/cells";
 import type { LanguageAdapterType } from "../codemirror/language/types";
 import { updateEditorCodeFromPython } from "../codemirror/language/utils";
 import type { JotaiStore } from "../state/jotai";
@@ -113,6 +118,8 @@ export function useStagedCells(store: JotaiStore) {
         cellCreationStream.current = new CellCreationStream(
           createStagedCell,
           updateStagedCell,
+          addStagedCell,
+          createNewCell,
         );
         break;
       case "text-delta":
@@ -168,13 +175,20 @@ class CellCreationStream {
 
   private onCreateCell: (code: string) => CellId;
   private onUpdateCell: (opts: UpdateStagedCellAction) => void;
+  private addStagedCell: (payload: { cellId: CellId }) => void;
+  private createNewCell: (opts: CreateNewCellAction) => void;
+  private hasMarimoImport = false;
 
   constructor(
     onCreateCell: (code: string) => CellId,
     onUpdateCell: (opts: UpdateStagedCellAction) => void,
+    addStagedCell: (payload: { cellId: CellId }) => void,
+    createNewCell: (opts: CreateNewCellAction) => void,
   ) {
     this.onCreateCell = onCreateCell;
     this.onUpdateCell = onUpdateCell;
+    this.addStagedCell = addStagedCell;
+    this.createNewCell = createNewCell;
   }
 
   stream(chunk: TextDeltaChunk) {
@@ -187,6 +201,7 @@ class CellCreationStream {
     // For each parsed cell, we either update an existing staged cell or create a new one.
     for (const [idx, cell] of completionCells.entries()) {
       if (idx < this.createdCells.length) {
+        this.addMarimoImport(cell.language);
         const existingCell = this.createdCells[idx];
         this.createdCells[idx] = { ...existingCell, cell };
         this.onUpdateCell({
@@ -201,6 +216,24 @@ class CellCreationStream {
     }
   }
 
+  /** Add a marimo import if the cell is SQL or Markdown and we haven't added it yet. */
+  private addMarimoImport(language: LanguageAdapterType) {
+    if (this.hasMarimoImport || language === "python") {
+      return;
+    }
+
+    const cellId = maybeAddMarimoImport({
+      autoInstantiate: false,
+      createNewCell: this.createNewCell,
+      fromCellId: this.createdCells[0]?.cellId,
+      before: true,
+    });
+    if (cellId) {
+      this.addStagedCell({ cellId });
+    }
+    this.hasMarimoImport = true;
+  }
+
   stop() {
     // Clear all state
     this.buffer = "";