@marimo-team/islands 0.16.4 → 0.17.0

package/src/components/chat/chat-history-popover.tsx

@@ -0,0 +1,125 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { BotMessageSquareIcon, ClockIcon, SearchIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useLocale } from "react-aria";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip } from "@/components/ui/tooltip";
+import { type ChatId, chatStateAtom } from "@/core/ai/state";
+import { cn } from "@/utils/cn";
+import { timeAgo } from "@/utils/dates";
+import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
+import { groupChatsByDate } from "./chat-history-utils";
+
+interface ChatHistoryPopoverProps {
+  activeChatId: ChatId | undefined;
+  setActiveChat: (id: ChatId | null) => void;
+}
+
+export const ChatHistoryPopover: React.FC<ChatHistoryPopoverProps> = ({
+  activeChatId,
+  setActiveChat,
+}) => {
+  const chatState = useAtomValue(chatStateAtom);
+  const { locale } = useLocale();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const chats = useMemo(() => {
+    return [...chatState.chats.values()].sort(
+      (a, b) => b.updatedAt - a.updatedAt,
+    );
+  }, [chatState.chats]);
+
+  const filteredChats = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return chats;
+    }
+    return chats.filter((chat) =>
+      chat.title.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+  }, [chats, searchQuery]);
+
+  const groupedChats = useMemo(() => {
+    return groupChatsByDate(filteredChats);
+  }, [filteredChats]);
+
+  return (
+    <Popover>
+      <Tooltip content="Previous chats">
+        <PopoverTrigger asChild={true}>
+          <Button variant="text" size="icon">
+            <ClockIcon className="h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+      </Tooltip>
+      <PopoverContent className="w-[480px] p-0" align="start" side="right">
+        <div className="pt-3 px-3 w-full">
+          <Input
+            placeholder="Search chat history..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="text-xs"
+          />
+        </div>
+        <ScrollArea className="h-[450px] p-2">
+          <div className="space-y-3">
+            {chats.length === 0 && (
+              <PanelEmptyState
+                title="No chats yet"
+                description="Start a new chat to get started"
+                icon={<BotMessageSquareIcon />}
+              />
+            )}
+            {filteredChats.length === 0 && searchQuery && chats.length > 0 && (
+              <PanelEmptyState
+                title="No chats found"
+                description={`No chats match "${searchQuery}"`}
+                icon={<SearchIcon />}
+              />
+            )}
+            {groupedChats.map((group, idx) => (
+              <div key={group.label} className="space-y-2">
+                <div className="text-xs px-1 text-muted-foreground/60">
+                  {group.label}
+                </div>
+                <div>
+                  {group.chats.map((chat) => (
+                    <button
+                      key={chat.id}
+                      className={cn(
+                        "w-full p-1 rounded-md cursor-pointer text-left flex items-center justify-between",
+                        chat.id === activeChatId && "bg-accent",
+                        chat.id !== activeChatId && "hover:bg-muted/20",
+                      )}
+                      onClick={() => {
+                        setActiveChat(chat.id);
+                      }}
+                      type="button"
+                    >
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm truncate">{chat.title}</div>
+                      </div>
+                      <div className="text-xs text-muted-foreground/60 ml-2 flex-shrink-0">
+                        {timeAgo(chat.updatedAt, locale)}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+                {/* If last group, don't show a divider */}
+                {idx !== groupedChats.length - 1 && <hr />}
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/chat/chat-history-utils.ts

@@ -0,0 +1,69 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { Chat } from "@/core/ai/state";
+
+const DATE_GROUP_CONFIG = [
+  { label: "Today", days: 0 },
+  { label: "Yesterday", days: 1 },
+  { label: "2d ago", days: 2 },
+  { label: "3d ago", days: 3 },
+  { label: "This week", days: 7 },
+  { label: "This month", days: 30 },
+] as const;
+
+interface DateGroup {
+  label: string;
+  days: number;
+  chats: Chat[];
+}
+
+// Utility function to group chats by date periods
+export const groupChatsByDate = (chats: Chat[]): DateGroup[] => {
+  const now = Date.now();
+  const oneDayMs = 24 * 60 * 60 * 1000;
+
+  // Initialize groups with empty chat arrays
+  const groups: DateGroup[] = DATE_GROUP_CONFIG.map((config) => ({
+    ...config,
+    chats: [],
+  }));
+
+  const olderGroup: DateGroup = {
+    label: "Older",
+    days: Infinity,
+    chats: [],
+  };
+
+  // Helper function to determine which group a chat belongs to
+  const getGroupForChat = (daysDiff: number): DateGroup => {
+    // Use switch for exact day matches, then handle ranges
+    switch (daysDiff) {
+      case 0:
+        return groups[0]; // Today
+      case 1:
+        return groups[1]; // Yesterday
+      case 2:
+        return groups[2]; // 2d ago
+      case 3:
+        return groups[3]; // 3d ago
+      default:
+        // Handle range-based grouping for older chats
+        if (daysDiff >= 4 && daysDiff <= 7) {
+          return groups[4]; // This week
+        } else if (daysDiff >= 8 && daysDiff <= 30) {
+          return groups[5]; // This month
+        }
+        // Everything else goes to Older
+        return olderGroup;
+    }
+  };
+
+  for (const chat of chats) {
+    const daysDiff = Math.floor((now - chat.updatedAt) / oneDayMs);
+    const targetGroup = getGroupForChat(daysDiff);
+    targetGroup.chats.push(chat);
+  }
+
+  // Return only non-empty groups
+  return [...groups, olderGroup].filter((group) => group.chats.length > 0);
+};

package/src/components/chat/chat-panel.tsx

@@ -9,7 +9,6 @@ import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   AtSignIcon,
   BotMessageSquareIcon,
-  ClockIcon,
   Loader2,
   PaperclipIcon,
   PlusIcon,
@@ -17,16 +16,9 @@ import {
   SettingsIcon,
   SquareIcon,
 } from "lucide-react";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { useLocale } from "react-aria";
+import { memo, useEffect, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -52,8 +44,8 @@ import { useRequestClient } from "@/core/network/requests";
 import { useRuntimeManager } from "@/core/runtime/config";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
-import { timeAgo } from "@/utils/dates";
 import { Logger } from "@/utils/Logger";
+
 import { AIModelDropdown } from "../ai/ai-model-dropdown";
 import { useOpenSettingsToTab } from "../app-config/state";
 import { PromptInput } from "../editor/ai/add-cell-with-ai";
@@ -63,10 +55,12 @@ import {
 } from "../editor/ai/completion-utils";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
 import { CopyClipboardIcon } from "../icons/copy-icon";
+import { MCPStatusIndicator } from "../mcp/mcp-status-indicator";
 import { Input } from "../ui/input";
 import { Tooltip, TooltipProvider } from "../ui/tooltip";
 import { toast } from "../ui/use-toast";
 import { AttachmentRenderer, FileAttachmentPill } from "./chat-components";
+import { ChatHistoryPopover } from "./chat-history-popover";
 import {
   buildCompletionRequestBody,
   convertToFileUIPart,
@@ -104,13 +98,6 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   setActiveChat,
 }) => {
   const { handleClick } = useOpenSettingsToTab();
-  const chatState = useAtomValue(chatStateAtom);
-  const { locale } = useLocale();
-  const chats = useMemo(() => {
-    return [...chatState.chats.values()].sort(
-      (a, b) => b.updatedAt - a.updatedAt,
-    );
-  }, [chatState.chats]);
 
   return (
     <div className="flex border-b px-2 py-1 justify-between shrink-0 items-center">
@@ -120,6 +107,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
         </Button>
       </Tooltip>
       <div className="flex items-center gap-2">
+        <MCPStatusIndicator />
         <Tooltip content="AI Settings">
           <Button
             variant="text"
@@ -130,46 +118,10 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
             <SettingsIcon className="h-4 w-4" />
           </Button>
         </Tooltip>
-        <Popover>
-          <Tooltip content="Previous chats">
-            <PopoverTrigger asChild={true}>
-              <Button variant="text" size="icon">
-                <ClockIcon className="h-4 w-4" />
-              </Button>
-            </PopoverTrigger>
-          </Tooltip>
-          <PopoverContent className="w-[520px] p-0" align="start" side="right">
-            <ScrollArea className="h-[500px] p-4">
-              <div className="space-y-4">
-                {chats.length === 0 && (
-                  <PanelEmptyState
-                    title="No chats yet"
-                    description="Start a new chat to get started"
-                    icon={<BotMessageSquareIcon />}
-                  />
-                )}
-                {chats.map((chat) => (
-                  <button
-                    key={chat.id}
-                    className={cn(
-                      "w-full p-3 rounded-md cursor-pointer hover:bg-accent text-left",
-                      chat.id === activeChatId && "bg-accent",
-                    )}
-                    onClick={() => {
-                      setActiveChat(chat.id);
-                    }}
-                    type="button"
-                  >
-                    <div className="font-medium">{chat.title}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {timeAgo(chat.updatedAt, locale)}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </ScrollArea>
-          </PopoverContent>
-        </Popover>
+        <ChatHistoryPopover
+          activeChatId={activeChatId}
+          setActiveChat={setActiveChat}
+        />
       </div>
     </div>
   );

package/src/components/chat/chat-utils.ts

@@ -127,7 +127,7 @@ export async function handleToolCall({
       addToolResult({
         tool: toolCall.toolName,
         toolCallId: toolCall.toolCallId,
-        output: response,
+        output: response.result || response.error,
       });
     } else {
       // Invoke the backend/mcp tool
@@ -153,7 +153,7 @@ export async function handleToolCall({
 
 /**
  * Checks if we should send a message automatically based on the messages.
- * We only want to send a message if we have completed tool calls and there is no reply yet.
+ * We only want to send a message if all tool calls are completed and there is no reply yet.
  */
 export function hasPendingToolCalls(messages: UIMessage[]): boolean {
   if (messages.length === 0) {
@@ -177,7 +177,12 @@ export function hasPendingToolCalls(messages: UIMessage[]): boolean {
     part.type.startsWith("tool-"),
   ) as ToolUIPart[];
 
-  const hasCompletedToolCalls = toolParts.some(
+  // Guard against no tool parts
+  if (toolParts.length === 0) {
+    return false;
+  }
+
+  const allToolCallsCompleted = toolParts.every(
     (part) => part.state === "output-available",
   );
 
@@ -186,6 +191,8 @@ export function hasPendingToolCalls(messages: UIMessage[]): boolean {
   const hasTextContent =
     lastPart.type === "text" && lastPart.text?.trim().length > 0;
 
+  Logger.warn("All tool calls completed: %s", allToolCallsCompleted);
+
   // Only auto-send if we have completed tool calls and there is no reply yet
-  return hasCompletedToolCalls && !hasTextContent;
+  return allToolCallsCompleted && !hasTextContent;
 }

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

@@ -0,0 +1,117 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { SortingState } from "@tanstack/react-table";
+import { describe, expect, it, vi } from "vitest";
+
+describe("multi-column sorting logic", () => {
+  // Extract the core sorting logic to test in isolation
+  const handleSort = (
+    columnId: string,
+    desc: boolean,
+    sortingState: SortingState,
+    setSorting: (state: SortingState) => void,
+    clearSorting: () => void,
+  ) => {
+    const currentSort = sortingState.find((s) => s.id === columnId);
+
+    if (currentSort && currentSort.desc === desc) {
+      // Clicking the same sort again - remove it
+      clearSorting();
+    } else {
+      // New sort or different direction - move to end of stack
+      const otherSorts = sortingState.filter((s) => s.id !== columnId);
+      const newSort = { id: columnId, desc };
+      setSorting([...otherSorts, newSort]);
+    }
+  };
+
+  it("implements stack-based sorting: moves re-clicked column to end", () => {
+    const sortingState: SortingState = [
+      { id: "name", desc: false },
+      { id: "age", desc: false },
+    ];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Desc on age - should move age to end with desc=true
+    handleSort("age", true, sortingState, setSorting, clearSorting);
+
+    expect(setSorting).toHaveBeenCalledWith([
+      { id: "name", desc: false },
+      { id: "age", desc: true },
+    ]);
+    expect(clearSorting).not.toHaveBeenCalled();
+  });
+
+  it("removes sort when clicking same direction twice", () => {
+    const sortingState: SortingState = [{ id: "age", desc: false }];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Asc on age again - should remove the sort
+    handleSort("age", false, sortingState, setSorting, clearSorting);
+
+    expect(clearSorting).toHaveBeenCalled();
+    expect(setSorting).not.toHaveBeenCalled();
+  });
+
+  it("adds new column to end of stack", () => {
+    const sortingState: SortingState = [{ id: "name", desc: false }];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Asc on age - should add age to end
+    handleSort("age", false, sortingState, setSorting, clearSorting);
+
+    expect(setSorting).toHaveBeenCalledWith([
+      { id: "name", desc: false },
+      { id: "age", desc: false },
+    ]);
+    expect(clearSorting).not.toHaveBeenCalled();
+  });
+
+  it("toggles sort direction when clicking opposite", () => {
+    const sortingState: SortingState = [{ id: "age", desc: false }];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Desc on age - should toggle to descending
+    handleSort("age", true, sortingState, setSorting, clearSorting);
+
+    expect(setSorting).toHaveBeenCalledWith([{ id: "age", desc: true }]);
+    expect(clearSorting).not.toHaveBeenCalled();
+  });
+
+  it("correctly calculates priority numbers", () => {
+    const sortingState: SortingState = [
+      { id: "name", desc: false },
+      { id: "age", desc: true },
+      { id: "dept", desc: false },
+    ];
+
+    // Priority is index + 1
+    const nameSort = sortingState.find((s) => s.id === "name");
+    const namePriority = nameSort ? sortingState.indexOf(nameSort) + 1 : null;
+    expect(namePriority).toBe(1);
+
+    const deptSort = sortingState.find((s) => s.id === "dept");
+    const deptPriority = deptSort ? sortingState.indexOf(deptSort) + 1 : null;
+    expect(deptPriority).toBe(3);
+  });
+
+  it("handles removing column from middle of stack", () => {
+    const sortingState: SortingState = [
+      { id: "name", desc: false },
+      { id: "age", desc: true },
+      { id: "dept", desc: false },
+    ];
+    const setSorting = vi.fn();
+    const clearSorting = vi.fn();
+
+    // Click Desc on age again - should remove it
+    handleSort("age", true, sortingState, setSorting, clearSorting);
+
+    expect(clearSorting).toHaveBeenCalled();
+    // After removal, dept should move from priority 3 to priority 2
+  });
+});

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

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 "use no memo";
 
-import type { Column } from "@tanstack/react-table";
+import type { Column, Table } from "@tanstack/react-table";
 import { capitalize } from "lodash-es";
 import { FilterIcon, MinusIcon, TextIcon, XIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
@@ -68,6 +68,7 @@ interface DataTableColumnHeaderProps<TData, TValue>
   column: Column<TData, TValue>;
   header: React.ReactNode;
   calculateTopKRows?: CalculateTopKRows;
+  table?: Table<TData>;
 }
 
 export const DataTableColumnHeader = <TData, TValue>({
@@ -75,6 +76,7 @@ export const DataTableColumnHeader = <TData, TValue>({
   header,
   className,
   calculateTopKRows,
+  table,
 }: DataTableColumnHeaderProps<TData, TValue>) => {
   const [isFilterValueOpen, setIsFilterValueOpen] = useState(false);
   const { locale } = useLocale();
@@ -117,7 +119,7 @@ export const DataTableColumnHeader = <TData, TValue>({
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           {renderDataType(column)}
-          {renderSorts(column)}
+          {renderSorts(column, table)}
           {renderCopyColumn(column)}
           {renderColumnPinning(column)}
           {renderColumnWrapping(column)}

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

@@ -165,7 +165,7 @@ export function generateColumns<T>({
         return row[key as keyof T];
       },
 
-      header: ({ column }) => {
+      header: ({ column, table }) => {
         const stats = chartSpecModel?.getColumnStats(key);
         const dtype = column.columnDef.meta?.dtype;
         const headerTitle = headerTooltip?.[key];
@@ -208,6 +208,7 @@ export function generateColumns<T>({
             header={headerWithTooltip}
             column={column}
             calculateTopKRows={calculateTopKRows}
+            table={table}
           />
         );
 

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

@@ -215,8 +215,13 @@ const DataTableInternal = <TData,>({
     manualPagination: manualPagination,
     getPaginationRowModel: getPaginationRowModel(),
     // sorting
-    ...(setSorting ? { onSortingChange: setSorting } : {}),
+    ...(setSorting
+      ? {
+          onSortingChange: setSorting,
+        }
+      : {}),
     manualSorting: manualSorting,
+    enableMultiSort: true,
     getSortedRowModel: getSortedRowModel(),
     // filtering
     manualFiltering: true,
@@ -302,7 +307,7 @@ const DataTableInternal = <TData,>({
         )}
         <Table className="relative" ref={tableRef}>
           {showLoadingBar && (
-            <div className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
+            <thead className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
           )}
           {renderTableHeader(table, Boolean(maxHeight))}
           <CellSelectionProvider>

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

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { PinLeftIcon, PinRightIcon } from "@radix-ui/react-icons";
-import type { Column } from "@tanstack/react-table";
+import type { Column, SortDirection, Table } from "@tanstack/react-table";
 import {
   AlignJustifyIcon,
   ArrowDownWideNarrowIcon,
@@ -163,27 +163,80 @@ export function renderCopyColumn<TData, TValue>(column: Column<TData, TValue>) {
 const AscIcon = ArrowUpNarrowWideIcon;
 const DescIcon = ArrowDownWideNarrowIcon;
 
-export function renderSorts<TData, TValue>(column: Column<TData, TValue>) {
+export function renderSorts<TData, TValue>(
+  column: Column<TData, TValue>,
+  table?: Table<TData>,
+) {
   if (!column.getCanSort()) {
     return null;
   }
 
+  const sortDirection = column.getIsSorted();
+  const sortingIndex = column.getSortIndex();
+
+  const sortingState = table?.getState().sorting;
+  const hasMultiSort = sortingState?.length && sortingState.length > 1;
+
+  const renderSortIndex = () => {
+    return (
+      <span className="ml-auto text-xs font-medium">{sortingIndex + 1}</span>
+    );
+  };
+
+  const renderClearSort = () => {
+    if (!sortDirection) {
+      return null;
+    }
+
+    if (!hasMultiSort) {
+      // render clear sort for this column
+      return (
+        <DropdownMenuItem onClick={() => column.clearSorting()}>
+          <ChevronsUpDown className="mo-dropdown-icon" />
+          Clear sort
+        </DropdownMenuItem>
+      );
+    }
+
+    // render clear sort for all columns
+    return (
+      <DropdownMenuItem onClick={() => table?.resetSorting()}>
+        <ChevronsUpDown className="mo-dropdown-icon" />
+        Clear all sorts
+      </DropdownMenuItem>
+    );
+  };
+
+  const toggleSort = (direction: SortDirection) => {
+    // Clear sort if clicking the same direction
+    if (sortDirection === direction) {
+      column.clearSorting();
+    } else {
+      // Toggle sort direction
+      const descending = direction === "desc";
+      column.toggleSorting(descending, true);
+    }
+  };
+
   return (
     <>
-      <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+      <DropdownMenuItem
+        onClick={() => toggleSort("asc")}
+        className={sortDirection === "asc" ? "bg-accent" : ""}
+      >
         <AscIcon className="mo-dropdown-icon" />
         Asc
+        {sortDirection === "asc" && renderSortIndex()}
       </DropdownMenuItem>
-      <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+      <DropdownMenuItem
+        onClick={() => toggleSort("desc")}
+        className={sortDirection === "desc" ? "bg-accent" : ""}
+      >
         <DescIcon className="mo-dropdown-icon" />
         Desc
+        {sortDirection === "desc" && renderSortIndex()}
       </DropdownMenuItem>
-      {column.getIsSorted() && (
-        <DropdownMenuItem onClick={() => column.clearSorting()}>
-          <ChevronsUpDown className="mo-dropdown-icon" />
-          Clear sort
-        </DropdownMenuItem>
-      )}
+      {renderClearSort()}
       <DropdownMenuSeparator />
     </>
   );