@marimo-team/frontend 0.16.0-dev96986 → 0.16.0

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

@@ -19,13 +19,11 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import React, { memo } from "react";
-import { useLocale } from "react-aria";
 
 import { Table } from "@/components/ui/table";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import type { PanelType } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
-import { CellHoverTemplateFeature } from "./cell-hover-template/feature";
 import { CellSelectionFeature } from "./cell-selection/feature";
 import type { CellSelectionState } from "./cell-selection/types";
 import { CellStylingFeature } from "./cell-styling/feature";
@@ -65,7 +63,6 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   rowSelection?: RowSelectionState;
   cellSelection?: CellSelectionState;
   cellStyling?: CellStyleState | null;
-  hoverTemplate?: string | null;
   onRowSelectionChange?: OnChangeFn<RowSelectionState>;
   onCellSelectionChange?: OnChangeFn<CellSelectionState>;
   getRowIds?: GetRowIds;
@@ -106,7 +103,6 @@ const DataTableInternal = <TData,>({
   rowSelection,
   cellSelection,
   cellStyling,
-  hoverTemplate,
   paginationState,
   setPaginationState,
   downloadAs,
@@ -135,7 +131,6 @@ const DataTableInternal = <TData,>({
 }: DataTableProps<TData>) => {
   const [isSearchEnabled, setIsSearchEnabled] = React.useState<boolean>(false);
   const [showLoadingBar, setShowLoadingBar] = React.useState<boolean>(false);
-  const { locale } = useLocale();
 
   const { columnPinning, setColumnPinning } = useColumnPinning(
     freezeColumnsLeft,
@@ -181,7 +176,6 @@ const DataTableInternal = <TData,>({
       ColumnFormattingFeature,
       CellSelectionFeature,
       CellStylingFeature,
-      CellHoverTemplateFeature,
       CopyColumnFeature,
       FocusRowFeature,
     ],
@@ -205,7 +199,6 @@ const DataTableInternal = <TData,>({
           },
         }
       : {}),
-    locale: locale,
     manualPagination: manualPagination,
     getPaginationRowModel: getPaginationRowModel(),
     // sorting
@@ -240,11 +233,10 @@ const DataTableInternal = <TData,>({
           ? {}
           : // No pagination, show all rows
             { pagination: { pageIndex: 0, pageSize: data.length } }),
-      rowSelection: rowSelection ?? {},
-      cellSelection: cellSelection ?? [],
+      rowSelection,
+      cellSelection,
       cellStyling,
       columnPinning: columnPinning,
-      cellHoverTemplate: hoverTemplate,
     },
   });
 

package/src/components/data-table/date-popover.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import React from "react";
-import { useDateFormatter, useLocale } from "react-aria";
 import { Tooltip } from "@/components/ui/tooltip";
 
 interface DatePopoverProps {
@@ -20,17 +19,33 @@ export const DatePopover: React.FC<DatePopoverProps> = ({
   }
 
   const dateObj = new Date(date);
+  const relativeTime = getRelativeTime(dateObj);
 
   const content = (
     <div className="min-w-[240px] p-1 text-sm">
-      <div className="text-muted-foreground mb-2">
-        <RelativeTime date={dateObj} />
-      </div>
+      <div className="text-muted-foreground mb-2">{relativeTime}</div>
       <div className="space-y-1">
         {type === "datetime" ? (
-          <TimezoneDisplay date={dateObj} />
+          Object.entries(getTimezones(dateObj)).map(
+            ([timezone, formattedDate]) => (
+              <div
+                key={timezone}
+                className="grid grid-cols-[fit-content(40px)_1fr] gap-4 items-center justify-items-end"
+              >
+                <span className="bg-muted rounded-md py-1 px-2 w-fit ml-auto">
+                  {timezone}
+                </span>
+                <span>{formattedDate}</span>
+              </div>
+            ),
+          )
         ) : (
-          <DateDisplay date={dateObj} />
+          <span>
+            {dateObj.toLocaleDateString("en-US", {
+              timeZone: "UTC",
+              dateStyle: "long",
+            })}
+          </span>
         )}
       </div>
     </div>
@@ -43,79 +58,57 @@ export const DatePopover: React.FC<DatePopoverProps> = ({
   );
 };
 
-const TimezoneDisplay = ({ date }: { date: Date }) => {
-  const { locale } = useLocale();
-  const localTimezone = Intl.DateTimeFormat(locale).resolvedOptions().timeZone;
-  const hasSubSeconds = date.getUTCMilliseconds() !== 0;
-
-  const utcFormatter = useDateFormatter(
-    hasSubSeconds
-      ? {
-          timeZone: "UTC",
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit",
-          fractionalSecondDigits: 3,
-        }
-      : {
-          timeZone: "UTC",
-          dateStyle: "long",
-          timeStyle: "medium",
-        },
-  );
-
-  const localFormatter = useDateFormatter(
-    hasSubSeconds
-      ? {
-          timeZone: localTimezone,
-          year: "numeric",
-          month: "2-digit",
-          day: "2-digit",
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit",
-          fractionalSecondDigits: 3,
-        }
-      : {
-          timeZone: localTimezone,
-          dateStyle: "long",
-          timeStyle: "medium",
-        },
-  );
-
-  return (
-    <>
-      <div className="grid grid-cols-[fit-content(40px)_1fr] gap-4 items-center justify-items-end">
-        <span className="bg-muted rounded-md py-1 px-2 w-fit ml-auto">UTC</span>
-        <span>{utcFormatter.format(date)}</span>
-      </div>
-      <div className="grid grid-cols-[fit-content(40px)_1fr] gap-4 items-center justify-items-end">
-        <span className="bg-muted rounded-md py-1 px-2 w-fit ml-auto">
-          {localTimezone}
-        </span>
-        <span>{localFormatter.format(date)}</span>
-      </div>
-    </>
-  );
-};
-
-const DateDisplay = ({ date }: { date: Date }) => {
-  const dateFormatter = useDateFormatter({
-    timeZone: "UTC",
-    dateStyle: "long",
-  });
+function getTimezones(date: Date) {
+  const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
-  return <span>{dateFormatter.format(date)}</span>;
-};
+  const hasSubSeconds = date.getUTCMilliseconds() !== 0;
+  if (hasSubSeconds) {
+    return {
+      UTC: new Intl.DateTimeFormat("en-US", {
+        timeZone: "UTC",
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        fractionalSecondDigits: 3,
+      }).format(date),
+      [localTimezone]: new Intl.DateTimeFormat("en-US", {
+        timeZone: localTimezone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        fractionalSecondDigits: 3,
+      }).format(date),
+    };
+  }
 
-const RelativeTime = ({ date }: { date: Date }) => {
-  const { locale } = useLocale();
+  return {
+    UTC: new Intl.DateTimeFormat("en-US", {
+      timeZone: "UTC",
+      dateStyle: "long",
+      timeStyle: "medium",
+    }).format(date),
+    [localTimezone]: new Intl.DateTimeFormat("en-US", {
+      timeZone: localTimezone,
+      dateStyle: "long",
+      timeStyle: "medium",
+    }).format(date),
+  };
+}
 
-  // Initialize relative time formatter with current locale and "auto" numeric style
-  const relativeTimeFormatter = new Intl.RelativeTimeFormat(locale, {
+/**
+ * Converts a date into a human-readable relative time string (e.g. "2 hours ago", "in 5 minutes")
+ * Uses Intl.RelativeTimeFormat for localized formatting
+ */
+function getRelativeTime(date: Date): string {
+  // Initialize relative time formatter with English locale and "auto" numeric style
+  // "auto" allows for strings like "yesterday" instead of "1 day ago"
+  const relativeTimeFormatter = new Intl.RelativeTimeFormat("en", {
     numeric: "auto",
   });
 
@@ -124,6 +117,7 @@ const RelativeTime = ({ date }: { date: Date }) => {
   const differenceInSeconds = (currentTime.getTime() - date.getTime()) / 1000;
 
   // Define time units with their thresholds and conversion factors
+  // Format: [threshold before next unit, seconds in this unit, unit name]
   const timeUnits: Array<[number, number, string]> = [
     [60, 1, "second"], // Less than 60 seconds
     [60, 60, "minute"], // Less than 60 minutes
@@ -140,17 +134,13 @@ const RelativeTime = ({ date }: { date: Date }) => {
       // Convert to fixed decimal and negate since RelativeTimeFormat expects
       // negative values for past times and positive for future times
       const roundedValue = -Number(valueInUnits.toFixed(1));
-      return (
-        <span>
-          {relativeTimeFormatter.format(
-            roundedValue,
-            unitName as Intl.RelativeTimeFormatUnit,
-          )}
-        </span>
+      return relativeTimeFormatter.format(
+        roundedValue,
+        unitName as Intl.RelativeTimeFormatUnit,
       );
     }
   }
 
   // Should never reach here due to Infinity threshold, but provide fallback
-  return <span>{relativeTimeFormatter.format(0, "second")}</span>;
-};
+  return relativeTimeFormatter.format(0, "second");
+}

package/src/components/data-table/filter-pills.tsx

@@ -7,7 +7,6 @@ import type {
   Table,
 } from "@tanstack/react-table";
 import { XIcon } from "lucide-react";
-import { type DateFormatter, useDateFormatter } from "react-aria";
 import { logNever } from "@/utils/assertNever";
 import { Badge } from "../ui/badge";
 import type { ColumnFilterValue } from "./filters";
@@ -19,21 +18,12 @@ interface Props<TData> {
 }
 
 export const FilterPills = <TData,>({ filters, table }: Props<TData>) => {
-  const timeFormatter = useDateFormatter({
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-  });
-
   if (!filters || filters.length === 0) {
     return null;
   }
 
   function renderFilterPill(filter: ColumnFilter) {
-    const formattedValue = formatValue(
-      filter.value as ColumnFilterValue,
-      timeFormatter,
-    );
+    const formattedValue = formatValue(filter.value as ColumnFilterValue);
     if (!formattedValue) {
       return null;
     }
@@ -62,7 +52,7 @@ export const FilterPills = <TData,>({ filters, table }: Props<TData>) => {
   );
 };
 
-function formatValue(value: ColumnFilterValue, timeFormatter: DateFormatter) {
+function formatValue(value: ColumnFilterValue) {
   if (!("type" in value)) {
     return;
   }
@@ -81,9 +71,14 @@ function formatValue(value: ColumnFilterValue, timeFormatter: DateFormatter) {
     return formatMinMax(value.min?.toISOString(), value.max?.toISOString());
   }
   if (value.type === "time") {
+    const formatTime = new Intl.DateTimeFormat("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
     return formatMinMax(
-      value.min ? timeFormatter.format(value.min) : undefined,
-      value.max ? timeFormatter.format(value.max) : undefined,
+      value.min ? formatTime.format(value.min) : undefined,
+      value.max ? formatTime.format(value.max) : undefined,
     );
   }
   if (value.type === "datetime") {

package/src/components/data-table/header-items.tsx

@@ -34,7 +34,6 @@ import { NAMELESS_COLUMN_PREFIX } from "./columns";
 
 export function renderFormatOptions<TData, TValue>(
   column: Column<TData, TValue>,
-  locale: string,
 ) {
   const dataType: DataType | undefined = column.columnDef.meta?.dataType;
   const columnFormatOptions = dataType ? formatOptions[dataType] : [];
@@ -52,9 +51,6 @@ export function renderFormatOptions<TData, TValue>(
       </DropdownMenuSubTrigger>
       <DropdownMenuPortal>
         <DropdownMenuSubContent>
-          <div className="text-xs text-muted-foreground px-2 py-1">
-            Locale: {locale}
-          </div>
           {Boolean(currentFormat) && (
             <>
               <DropdownMenuItem
@@ -76,7 +72,7 @@ export function renderFormatOptions<TData, TValue>(
                 {option}
               </span>
               <span className="ml-auto pl-5 text-xs text-muted-foreground">
-                {formattingExample(option, locale)}
+                {formattingExample(option)}
               </span>
             </DropdownMenuItem>
           ))}

package/src/components/data-table/pagination.tsx

@@ -9,10 +9,8 @@ import {
   ChevronsLeft,
   ChevronsRight,
 } from "lucide-react";
-import { useLocale } from "react-aria";
 import { Button } from "@/components/ui/button";
 import { Events } from "@/utils/events";
-import { prettyNumber } from "@/utils/numbers";
 import { PluralWord } from "@/utils/pluralize";
 import {
   Select,
@@ -42,8 +40,6 @@ export const DataTablePagination = <TData,>({
   tableLoading,
   showPageSizeSelector,
 }: DataTablePaginationProps<TData>) => {
-  const { locale } = useLocale();
-
   const renderTotal = () => {
     const { rowSelection, cellSelection } = table.getState();
     let selected = Object.keys(rowSelection).length;
@@ -62,7 +58,7 @@ export const DataTablePagination = <TData,>({
     if (isAllPageSelected && !isAllSelected) {
       return (
         <>
-          <span>{prettyNumber(selected, locale)} selected</span>
+          <span>{prettyNumber(selected)} selected</span>
           <Button
             size="xs"
             data-testid="select-all-button"
@@ -77,7 +73,7 @@ export const DataTablePagination = <TData,>({
               }
             }}
           >
-            Select all {prettyNumber(numRows, locale)}
+            Select all {prettyNumber(numRows)}
           </Button>
         </>
       );
@@ -86,7 +82,7 @@ export const DataTablePagination = <TData,>({
     if (selected) {
       return (
         <>
-          <span>{prettyNumber(selected, locale)} selected</span>
+          <span>{prettyNumber(selected)} selected</span>
           <Button
             size="xs"
             data-testid="clear-selection-button"
@@ -111,11 +107,7 @@ export const DataTablePagination = <TData,>({
       );
     }
 
-    const rowColumnCount = prettifyRowColumnCount(
-      numRows,
-      totalColumns,
-      locale,
-    );
+    const rowColumnCount = prettifyRowColumnCount(numRows, totalColumns);
     return <span>{rowColumnCount}</span>;
   };
   const currentPage = Math.min(
@@ -207,9 +199,7 @@ export const DataTablePagination = <TData,>({
               handlePageChange(() => table.setPageIndex(page))
             }
           />
-          <span className="shrink-0">
-            of {prettyNumber(totalPages, locale)}
-          </span>
+          <span className="shrink-0">of {prettyNumber(totalPages)}</span>
         </div>
         <Button
           size="xs"
@@ -242,6 +232,10 @@ export const DataTablePagination = <TData,>({
   );
 };
 
+function prettyNumber(value: number): string {
+  return new Intl.NumberFormat().format(value);
+}
+
 export const PageSelector = ({
   currentPage,
   totalPages,
@@ -319,18 +313,17 @@ export const PageSelector = ({
   );
 };
 
-export function prettifyRowCount(rowCount: number, locale: string): string {
-  return `${prettyNumber(rowCount, locale)} ${new PluralWord("row").pluralize(rowCount)}`;
+export function prettifyRowCount(rowCount: number): string {
+  return `${prettyNumber(rowCount)} ${new PluralWord("row").pluralize(rowCount)}`;
 }
 
 export const prettifyRowColumnCount = (
   numRows: number | "too_many",
   totalColumns: number,
-  locale: string,
 ): string => {
   const rowsLabel =
-    numRows === "too_many" ? "Unknown" : prettifyRowCount(numRows, locale);
-  const columnsLabel = `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;
+    numRows === "too_many" ? "Unknown" : prettifyRowCount(numRows);
+  const columnsLabel = `${prettyNumber(totalColumns)} ${new PluralWord("column").pluralize(totalColumns)}`;
 
   return [rowsLabel, columnsLabel].join(", ");
 };

package/src/components/data-table/renderers.tsx

@@ -93,25 +93,6 @@ export const DataTableBody = <TData,>({
     handleCellsKeyDown,
   } = useCellRangeSelection({ table });
 
-  function applyHoverTemplate(
-    template: string,
-    cells: Array<Cell<TData, unknown>>,
-  ): string {
-    const variableRegex = /{{(\w+)}}/g;
-    // Map column id -> stringified value
-    const idToValue = new Map<string, string>();
-    for (const c of cells) {
-      const v = c.getValue();
-      // Prefer empty string for nulls to keep tooltip clean
-      const s = renderUnknownValue({ value: v, nullAsEmptyString: true });
-      idToValue.set(c.column.id, s);
-    }
-    return template.replace(variableRegex, (_substr, varName: string) => {
-      const val = idToValue.get(varName);
-      return val !== undefined ? val : `{{${varName}}}`;
-    });
-  }
-
   const renderCells = (cells: Array<Cell<TData, unknown>>) => {
     return cells.map((cell) => {
       const { className, style: pinningstyle } = getPinningStyles(cell.column);
@@ -120,7 +101,6 @@ export const DataTableBody = <TData,>({
         cell.getUserStyling?.() || {},
         pinningstyle,
       );
-
       return (
         <TableCell
           tabIndex={0}
@@ -165,18 +145,10 @@ export const DataTableBody = <TData,>({
           const isRowViewedInPanel =
             rowViewerPanelOpen && viewedRowIdx === rowIndex;
 
-          // Compute hover title once per row using this row's cells (visible or hidden)
-          const hoverTemplate = table.getState().cellHoverTemplate || null;
-          const rowCells = row.getAllCells();
-          const rowTitle = hoverTemplate
-            ? applyHoverTemplate(hoverTemplate, rowCells)
-            : undefined;
-
           return (
             <TableRow
               key={row.id}
               data-state={row.getIsSelected() && "selected"}
-              title={rowTitle}
               // These classes ensure that empty rows (nulls) still render
               className={cn(
                 "border-t h-6",

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -15,7 +15,6 @@ import {
   SearchIcon,
 } from "lucide-react";
 import { useRef, useState } from "react";
-import { useLocale } from "react-aria";
 import { ColumnName } from "@/components/datasources/components";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
@@ -67,7 +66,6 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
   const [searchQuery, setSearchQuery] = useState("");
   const panelRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const { locale } = useLocale();
 
   const tooManyRows = totalRows === TOO_MANY_ROWS;
 
@@ -206,13 +204,13 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
               applyColumnFormatting: (value) => value,
             } as Column<unknown>;
 
-            const cellContent = renderCellValue({
-              column: mockColumn,
-              renderValue: () => columnValue,
-              getValue: () => columnValue,
-              selectCell: undefined,
-              cellStyles: "text-left break-word",
-            });
+            const cellContent = renderCellValue(
+              mockColumn,
+              () => columnValue,
+              () => columnValue,
+              undefined,
+              "text-left break-word",
+            );
 
             const copyValue =
               typeof columnValue === "object"
@@ -288,7 +286,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
         <span className="text-xs">
           {tooManyRows
             ? `Row ${rowIdx + 1}`
-            : `Row ${rowIdx + 1} of ${prettifyRowCount(totalRows, locale)}`}
+            : `Row ${rowIdx + 1} of ${prettifyRowCount(totalRows)}`}
         </span>
         <Button
           variant="outline"

package/src/components/datasources/column-preview.tsx

@@ -3,7 +3,6 @@
 import { useAtomValue } from "jotai";
 import { PlusSquareIcon } from "lucide-react";
 import React, { Suspense } from "react";
-import { useLocale } from "react-aria";
 import { maybeAddAltairImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
@@ -43,7 +42,6 @@ export const DatasetColumnPreview: React.FC<{
 }> = ({ table, column, preview, onAddColumnChart, sqlTableContext }) => {
   const { theme } = useTheme();
   const { previewDatasetColumn } = useRequestClient();
-  const { locale } = useLocale();
 
   const previewColumn = () => {
     previewDatasetColumn({
@@ -109,8 +107,7 @@ export const DatasetColumnPreview: React.FC<{
       refetchPreview: previewColumn,
     });
 
-  const stats =
-    preview.stats && renderStats(preview.stats, column.type, locale);
+  const stats = preview.stats && renderStats(preview.stats, column.type);
 
   const chart = preview.chart_spec && renderChart(preview.chart_spec, theme);
 
@@ -178,7 +175,6 @@ export function renderPreviewError({
 export function renderStats(
   stats: Partial<Record<ColumnHeaderStatsKey, unknown>>,
   dataType: DataType,
-  locale: string,
 ) {
   return (
     <div className="gap-x-16 gap-y-1 grid grid-cols-2-fit border rounded p-2 empty:hidden">
@@ -193,7 +189,7 @@ export function renderStats(
               {convertStatsName(key as ColumnHeaderStatsKey, dataType)}
             </span>
             <span className="text-xs font-bold text-muted-foreground tracking-wide">
-              {prettyNumber(value, locale)}
+              {prettyNumber(value)}
             </span>
             <CopyClipboardIcon
               className="h-3 w-3 invisible group-hover:visible"

package/src/components/datasources/datasources.tsx

@@ -304,12 +304,10 @@ const DatabaseItem: React.FC<{
 }> = ({ hasSearch, engineName, database, children }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [isSelected, setIsSelected] = React.useState(false);
-  const [prevHasSearch, setPrevHasSearch] = React.useState(hasSearch);
 
-  if (prevHasSearch !== hasSearch) {
-    setPrevHasSearch(hasSearch);
+  React.useEffect(() => {
     setIsExpanded(hasSearch);
-  }
+  }, [hasSearch]);
 
   return (
     <>
@@ -401,10 +399,14 @@ const SchemaItem: React.FC<{
   children: React.ReactNode;
   hasSearch: boolean;
 }> = ({ databaseName, schema, children, hasSearch }) => {
-  const [isExpanded, setIsExpanded] = React.useState(hasSearch);
+  const [isExpanded, setIsExpanded] = React.useState(false);
   const [isSelected, setIsSelected] = React.useState(false);
   const uniqueValue = `${databaseName}:${schema.name}`;
 
+  React.useEffect(() => {
+    setIsExpanded(hasSearch);
+  }, [hasSearch]);
+
   if (isSchemaless(schema.name)) {
     return children;
   }
@@ -691,9 +693,11 @@ const DatasetColumnItem: React.FC<{
   const closeAllColumns = useAtomValue(closeAllColumnsAtom);
   const setExpandedColumns = useSetAtom(expandedColumnsAtom);
 
-  if (closeAllColumns && isExpanded) {
-    setIsExpanded(false);
-  }
+  React.useEffect(() => {
+    if (closeAllColumns) {
+      setIsExpanded(false);
+    }
+  }, [closeAllColumns]);
 
   if (isExpanded) {
     setExpandedColumns(

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

@@ -13,14 +13,11 @@ import {
 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,
+    private onChunkReceived: (chunk: UIMessageChunk) => void,
   ) {
     super(options);
-    this.onChunkReceived = onChunkReceived;
   }
 
   protected override processResponseStream(