@marimo-team/frontend 0.15.3 → 0.15.5

package/src/components/chat/acp/common.tsx

@@ -0,0 +1,198 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import {
+  CheckCircleIcon,
+  Loader2,
+  PlugIcon,
+  ShieldCheckIcon,
+  WifiIcon,
+  WifiOffIcon,
+  XCircleIcon,
+} from "lucide-react";
+import React, { memo } from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/utils/cn";
+import { ToolBodyBlock } from "./blocks";
+import type { AgentPendingPermission } from "./types";
+
+interface SimpleAccordionProps {
+  title: string | React.ReactNode;
+  children: React.ReactNode | string;
+  status?: "loading" | "error" | "success";
+  index?: number;
+  defaultIcon?: React.ReactNode;
+}
+
+export const SimpleAccordion: React.FC<SimpleAccordionProps> = ({
+  title,
+  children,
+  status,
+  index = 0,
+  defaultIcon,
+}) => {
+  const getStatusIcon = () => {
+    switch (status) {
+      case "loading":
+        return <Loader2 className="h-3 w-3 animate-spin" />;
+      case "error":
+        return <XCircleIcon className="h-3 w-3 text-destructive" />;
+      case "success":
+        return <CheckCircleIcon className="h-3 w-3 text-[var(--blue-9)]" />;
+      default:
+        return defaultIcon;
+    }
+  };
+
+  return (
+    <Accordion
+      key={`tool-${index}`}
+      type="single"
+      collapsible={true}
+      className="w-full"
+    >
+      <AccordionItem value="tool-call" className="border-0">
+        <AccordionTrigger
+          className={cn(
+            "py-1 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180",
+            status === "error" && "text-destructive/80",
+            status === "success" && "text-[var(--blue-8)]",
+          )}
+        >
+          <span className="flex items-center gap-1">
+            {getStatusIcon()}
+            <code className="font-mono text-xs">{title}</code>
+          </span>
+        </AccordionTrigger>
+        <AccordionContent className="p-2">
+          <div className="space-y-3 max-h-64 overflow-y-auto scrollbar-thin">
+            {status !== "error" && (
+              <div className="text-xs font-medium text-muted-foreground mb-1">
+                {children}
+              </div>
+            )}
+
+            {status === "error" && (
+              <div className="bg-destructive/10 border border-destructive/20 rounded-md p-3 text-xs text-destructive">
+                {children}
+              </div>
+            )}
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+interface ConnectionStatusProps {
+  status: string;
+  className?: string;
+}
+
+export const ConnectionStatus: React.FC<ConnectionStatusProps> = memo(
+  ({ status, className }) => {
+    const getStatusConfig = () => {
+      switch (status) {
+        case "connected":
+          return {
+            icon: <WifiIcon className="h-3 w-3" />,
+            label: "Connected",
+            variant: "default" as const,
+            className:
+              "bg-[var(--blue-3)] text-[var(--blue-11)] border-[var(--blue-5)]",
+          };
+        case "connecting":
+          return {
+            icon: <PlugIcon className="h-3 w-3 animate-pulse" />,
+            label: "Connecting",
+            variant: "secondary" as const,
+            className:
+              "bg-[var(--yellow-3)] text-[var(--yellow-11)] border-[var(--yellow-5)]",
+          };
+        case "disconnected":
+          return {
+            icon: <WifiOffIcon className="h-3 w-3" />,
+            label: "Disconnected",
+            variant: "outline" as const,
+            className:
+              "bg-[var(--red-3)] text-[var(--red-11)] border-[var(--red-5)]",
+          };
+        default:
+          return {
+            icon: <WifiOffIcon className="h-3 w-3" />,
+            label: status || "Unknown",
+            variant: "outline" as const,
+            className:
+              "bg-[var(--gray-3)] text-[var(--gray-11)] border-[var(--gray-5)]",
+          };
+      }
+    };
+
+    const config = getStatusConfig();
+
+    return (
+      <Badge
+        variant={config.variant}
+        className={cn(config.className, className)}
+      >
+        {config.icon}
+        <span className="ml-1 text-xs font-medium">{config.label}</span>
+      </Badge>
+    );
+  },
+);
+ConnectionStatus.displayName = "ConnectionStatus";
+
+interface PermissionRequestProps {
+  permission: NonNullable<AgentPendingPermission>;
+  onResolve: (option: unknown) => void;
+}
+
+export const PermissionRequest: React.FC<PermissionRequestProps> = memo(
+  ({ permission, onResolve }) => {
+    return (
+      <div className="border border-[var(--amber-8)] bg-[var(--amber-2)] rounded-lg p-2">
+        <div className="flex items-center gap-2 mb-3">
+          <ShieldCheckIcon className="h-4 w-4 text-[var(--amber-11)]" />
+          <h3 className="text-sm font-medium text-[var(--amber-11)]">
+            Permission Request
+          </h3>
+        </div>
+        <p className="text-sm text-[var(--amber-11)] mb-3">
+          The AI agent is requesting permission to proceed:
+        </p>
+        <ToolBodyBlock data={permission.toolCall} />
+        <div className="flex gap-2">
+          {permission.options.map((option) => (
+            <Button
+              key={option.optionId}
+              size="xs"
+              variant="text"
+              className={
+                option.kind.startsWith("allow")
+                  ? "text-[var(--blue-10)]"
+                  : "text-[var(--red-10)]"
+              }
+              onClick={() => onResolve(option)}
+            >
+              {option.kind.startsWith("allow") && (
+                <CheckCircleIcon className="h-3 w-3 mr-1" />
+              )}
+              {option.kind.startsWith("reject") && (
+                <XCircleIcon className="h-3 w-3 mr-1" />
+              )}
+              {option.name}
+            </Button>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+PermissionRequest.displayName = "PermissionRequest";

package/src/components/chat/acp/prompt.ts

@@ -0,0 +1,284 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+export function getAgentPrompt(filename: string) {
+  return `
+  I am currently editing a marimo notebook.
+  You can read or write to the notebook at @${filename}
+
+  If you make edits to the notebook, only edit the contents inside the function decorator with @app.cell.
+  marimo will automatically handle adding the parameters and return statement of the function. For example,
+  for each edit, just return:
+
+  \`\`\`
+  @app.cell
+  def __():
+    <your code here>
+    return
+  \`\`\`
+
+  ## Marimo fundamentals
+
+  Marimo is a reactive notebook that differs from traditional notebooks in key ways:
+
+  - Cells execute automatically when their dependencies change
+  - Variables cannot be redeclared across cells
+  - The notebook forms a directed acyclic graph (DAG)
+  - The last expression in a cell is automatically displayed
+  - UI elements are reactive and update the notebook automatically
+
+  ## Code Requirements
+
+  1. All code must be complete and runnable
+  2. Follow consistent coding style throughout
+  3. Include descriptive variable names and helpful comments
+  4. Import all modules in the first cell, always including \`import marimo as mo\`
+  5. Never redeclare variables across cells
+  6. Ensure no cycles in notebook dependency graph
+  7. The last expression in a cell is automatically displayed, just like in Jupyter notebooks.
+  8. Don't include comments in markdown cells
+  9. Don't include comments in SQL cells
+
+  ## Reactivity
+
+  Marimo's reactivity means:
+
+  - When a variable changes, all cells that use that variable automatically re-execute
+  - UI elements trigger updates when their values change without explicit callbacks
+  - UI element values are accessed through \`.value\` attribute
+  - You cannot access a UI element's value in the same cell where it's defined
+
+  ## Best Practices
+
+  <data_handling>
+  - Use pandas for data manipulation
+  - Implement proper data validation
+  - Handle missing values appropriately
+  - Use efficient data structures
+  - A variable in the last expression of a cell is automatically displayed as a table
+  </data_handling>
+
+  <visualization>
+  - For matplotlib: use plt.gca() as the last expression instead of plt.show()
+  - For plotly: return the figure object directly
+  - For altair: return the chart object directly
+  - Include proper labels, titles, and color schemes
+  - Make visualizations interactive where appropriate
+  </visualization>
+
+  <ui_elements>
+  - Access UI element values with .value attribute (e.g., slider.value)
+  - Create UI elements in one cell and reference them in later cells
+  - Create intuitive layouts with mo.hstack(), mo.vstack(), and mo.tabs()
+  - Prefer reactive updates over callbacks (marimo handles reactivity automatically)
+  - Group related UI elements for better organization
+  </ui_elements>
+
+  <sql>
+  - When writing duckdb, prefer using marimo's SQL cells, which start with _df = mo.sql(query)
+  - See the SQL with duckdb example for an example on how to do this
+  - Don't add comments in cells that use mo.sql()
+  - Consider using \`vega_datasets\` for common example datasets
+  </sql>
+
+  ## Troubleshooting
+
+  Common issues and solutions:
+  - Circular dependencies: Reorganize code to remove cycles in the dependency graph
+  - UI element value access: Move access to a separate cell from definition
+  - Visualization not showing: Ensure the visualization object is the last expression
+
+  ## Available UI elements
+
+  - \`mo.ui.altair_chart(altair_chart)\`
+  - \`mo.ui.button(value=None, kind='primary')\`
+  - \`mo.ui.run_button(label=None, tooltip=None, kind='primary')\`
+  - \`mo.ui.checkbox(label='', value=False)\`
+  - \`mo.ui.date(value=None, label=None, full_width=False)\`
+  - \`mo.ui.dropdown(options, value=None, label=None, full_width=False)\`
+  - \`mo.ui.file(label='', multiple=False, full_width=False)\`
+  - \`mo.ui.number(value=None, label=None, full_width=False)\`
+  - \`mo.ui.radio(options, value=None, label=None, full_width=False)\`
+  - \`mo.ui.refresh(options: List[str], default_interval: str)\`
+  - \`mo.ui.slider(start, stop, value=None, label=None, full_width=False, step=None)\`
+  - \`mo.ui.range_slider(start, stop, value=None, label=None, full_width=False, step=None)\`
+  - \`mo.ui.table(data, columns=None, on_select=None, sortable=True, filterable=True)\`
+  - \`mo.ui.text(value='', label=None, full_width=False)\`
+  - \`mo.ui.text_area(value='', label=None, full_width=False)\`
+  - \`mo.ui.data_explorer(df)\`
+  - \`mo.ui.dataframe(df)\`
+  - \`mo.ui.plotly(plotly_figure)\`
+  - \`mo.ui.tabs(elements: dict[str, mo.ui.Element])\`
+  - \`mo.ui.array(elements: list[mo.ui.Element])\`
+  - \`mo.ui.form(element: mo.ui.Element, label='', bordered=True)\`
+
+  ## Layout and utility functions
+
+  - \`mo.md(text)\` - display markdown
+  - \`mo.stop(predicate, output=None)\` - stop execution conditionally
+  - \`mo.Html(html)\` - display HTML
+  - \`mo.image(image)\` - display an image
+  - \`mo.hstack(elements)\` - stack elements horizontally
+  - \`mo.vstack(elements)\` - stack elements vertically
+  - \`mo.tabs(elements)\` - create a tabbed interface
+
+  ## Examples
+
+  <example title="Basic UI with reactivity">
+  ${formatCells([
+    `
+  import marimo as mo
+  import matplotlib.pyplot as plt
+  import numpy as np
+    `,
+    `
+  n_points = mo.ui.slider(10, 100, value=50, label="Number of points")
+  n_points
+    `,
+    `
+  x = np.random.rand(n_points.value)
+  y = np.random.rand(n_points.value)
+
+  plt.figure(figsize=(8, 6))
+  plt.scatter(x, y, alpha=0.7)
+  plt.title(f"Scatter plot with {n_points.value} points")
+  plt.xlabel("X axis")
+  plt.ylabel("Y axis")
+  plt.gca()
+    `,
+  ])}
+  </example>
+
+  <example title="Data explorer">
+  ${formatCells([
+    `
+  import marimo as mo
+  import pandas as pd
+  from vega_datasets import data
+    `,
+    `
+  cars_df = data.cars()
+  mo.ui.data_explorer(cars_df)
+    `,
+  ])}
+  </example>
+
+  <example title="Multiple UI elements">
+  ${formatCells([
+    `
+  import marimo as mo
+  import pandas as pd
+  import matplotlib.pyplot as plt
+  import seaborn as sns
+    `,
+    `
+  iris = sns.load_dataset('iris')
+    `,
+    `
+  species_selector = mo.ui.dropdown(
+      options=["All"] + iris["species"].unique().tolist(),
+      value="All",
+      label="Species"
+  )
+  x_feature = mo.ui.dropdown(
+      options=iris.select_dtypes('number').columns.tolist(),
+      value="sepal_length",
+      label="X Feature"
+  )
+  y_feature = mo.ui.dropdown(
+      options=iris.select_dtypes('number').columns.tolist(),
+      value="sepal_width",
+      label="Y Feature"
+  )
+  mo.hstack([species_selector, x_feature, y_feature])
+    `,
+    `
+  filtered_data = iris if species_selector.value == "All" else iris[iris["species"] == species_selector.value]
+
+  plt.figure(figsize=(10, 6))
+  sns.scatterplot(
+      data=filtered_data,
+      x=x_feature.value,
+      y=y_feature.value,
+      hue="species"
+  )
+  plt.title(f"{y_feature.value} vs {x_feature.value}")
+  plt.gca()
+    `,
+  ])}
+  </example>
+
+  <example title="Interactive chart with Altair">
+  ${formatCells([
+    `
+  import marimo as mo
+  import altair as alt
+  import pandas as pd
+    `,
+    `# Load dataset
+  cars_df = pd.read_csv('<https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json>')
+  _chart = alt.Chart(cars_df).mark_point().encode(
+      x='Horsepower',
+      y='Miles_per_Gallon',
+      color='Origin',
+  )
+  `,
+    "chart = mo.ui.altair_chart(_chart)\nchart",
+    `
+  # Display the selection
+  chart.value`,
+  ])}
+  </example>
+
+  <example title="Run Button Example">
+  ${formatCells([
+    "import marimo as mo",
+    `
+  first_button = mo.ui.run_button(label="Option 1")
+  second_button = mo.ui.run_button(label="Option 2")
+  [first_button, second_button]`,
+    `
+  if first_button.value:
+      print("You chose option 1!")
+  elif second_button.value:
+      print("You chose option 2!")
+  else:
+      print("Click a button!")`,
+  ])}
+  </example>
+
+  <example title="SQL with duckdb">
+  ${formatCells([
+    "import marimo as mo\nimport pandas as pd",
+    `cars_df = pd.read_csv('<https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json>')`,
+    `_df = mo.sql("SELECT * from cars_df WHERE Miles_per_Gallon > 20")`,
+  ])}
+  </example>`;
+}
+
+function formatCells(cells: string[]) {
+  // Option 1:
+  // return cells.map((cell) => {
+  //   return `# Cell ${cell}`;
+  // });
+
+  const indent = "    ";
+  const indentCode = (code: string) => {
+    return code
+      .trim()
+      .split("\n")
+      .map((line) => indent + line)
+      .join("\n");
+  };
+
+  // Option 2:
+  const formatCell = (cell: string) => {
+    return `
+  @app.cell
+  def __():
+  ${indentCode(cell)}
+      return
+  `;
+  };
+
+  return cells.map(formatCell).join("");
+}

package/src/components/chat/acp/scroll-to-bottom-button.tsx

@@ -0,0 +1,50 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { ArrowDownIcon } from "lucide-react";
+import { memo } from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/utils/cn";
+
+interface ScrollToBottomButtonProps {
+  isVisible: boolean;
+  onScrollToBottom: () => void;
+  className?: string;
+}
+
+const ScrollToBottomButton = memo<ScrollToBottomButtonProps>(
+  ({ isVisible, onScrollToBottom, className }) => {
+    if (!isVisible) {
+      return null;
+    }
+
+    return (
+      <div
+        className={cn(
+          "absolute bottom-2 right-6 z-10 animate-in fade-in-0 zoom-in-95 duration-200",
+          className,
+        )}
+      >
+        <Button
+          variant="secondary"
+          size="sm"
+          onClick={onScrollToBottom}
+          className={cn(
+            "h-8 w-8 p-0 rounded-full",
+            "bg-background/90 backdrop-blur-sm",
+            "border border-border/50",
+            "shadow-md shadow-black/10",
+            "hover:bg-background hover:shadow-black/15",
+            "transition-all duration-200",
+            "focus:outline-none focus:ring-2 focus:ring-primary/50",
+          )}
+        >
+          <ArrowDownIcon className="h-4 w-4" />
+          <span className="sr-only">Scroll to bottom</span>
+        </Button>
+      </div>
+    );
+  },
+);
+ScrollToBottomButton.displayName = "ScrollToBottomButton";
+
+export default ScrollToBottomButton;

package/src/components/chat/acp/session-tabs.tsx

@@ -0,0 +1,138 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtom, useSetAtom } from "jotai";
+import { XIcon } from "lucide-react";
+import React, { memo } from "react";
+import useEvent from "react-use-event-hook";
+import { AiProviderIcon } from "@/components/ai/ai-provider-icon";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/utils/cn";
+import { AgentSelector } from "./agent-selector";
+import {
+  type AgentSession,
+  agentSessionStateAtom,
+  removeSession,
+  selectedTabAtom,
+  type TabId,
+  updateSessionLastUsed,
+} from "./state";
+
+interface SessionTabProps {
+  session: AgentSession;
+  isActive: boolean;
+  onSelect: (sessionId: TabId) => void;
+  onClose: (sessionId: TabId) => void;
+}
+
+const SessionTab: React.FC<SessionTabProps> = memo(
+  ({ session, isActive, onSelect, onClose }) => {
+    return (
+      <div
+        className={cn(
+          "flex items-center gap-1 px-2 py-1 text-xs border-r border-border bg-muted/30 hover:bg-muted/50 cursor-pointer min-w-0",
+          isActive && "bg-background border-b-0 relative z-10",
+        )}
+        onClick={() => onSelect(session.tabId)}
+      >
+        <div className="flex items-center gap-1 min-w-0 flex-1">
+          <span className="text-muted-foreground text-[10px] font-medium">
+            <AiProviderIcon provider={session.agentId} className="h-3 w-3" />
+          </span>
+          <span className="truncate" title={session.title}>
+            {session.title}
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-4 w-4 p-0 hover:bg-destructive/20 hover:text-destructive flex-shrink-0"
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose(session.tabId);
+          }}
+        >
+          <XIcon className="h-3 w-3" />
+        </Button>
+      </div>
+    );
+  },
+);
+SessionTab.displayName = "SessionTab";
+
+interface SessionTabsProps {
+  onAddSession?: () => void;
+  className?: string;
+}
+
+interface SessionListProps {
+  sessions: AgentSession[];
+  activeTabId: TabId | null;
+  onSelectSession: (sessionId: TabId) => void;
+  onCloseSession: (sessionId: TabId) => void;
+}
+
+const SessionList = memo<SessionListProps>(
+  ({ sessions, activeTabId, onSelectSession, onCloseSession }) => (
+    <div className="flex min-w-0 flex-1 overflow-x-auto">
+      {sessions.map((session) => (
+        <SessionTab
+          key={session.tabId}
+          session={session}
+          isActive={session.tabId === activeTabId}
+          onSelect={onSelectSession}
+          onClose={onCloseSession}
+        />
+      ))}
+    </div>
+  ),
+);
+SessionList.displayName = "SessionList";
+
+interface EmptySessionTabsProps {
+  className?: string;
+}
+
+const EmptySessionTabs = memo<EmptySessionTabsProps>(({ className }) => (
+  <div className={cn("flex items-center border-b bg-muted/20", className)}>
+    <AgentSelector className="h-6" />
+  </div>
+));
+EmptySessionTabs.displayName = "EmptySessionTabs";
+
+export const SessionTabs: React.FC<SessionTabsProps> = memo(({ className }) => {
+  const [sessionState, setSessionState] = useAtom(agentSessionStateAtom);
+  const setActiveSession = useSetAtom(selectedTabAtom);
+
+  const handleSelectSession = useEvent((sessionId: TabId) => {
+    setActiveSession(sessionId);
+    setSessionState((prev) => updateSessionLastUsed(prev, sessionId));
+  });
+
+  const handleCloseSession = useEvent((sessionId: TabId) => {
+    setSessionState((prev) => removeSession(prev, sessionId));
+  });
+
+  const { sessions, activeTabId } = sessionState;
+
+  if (sessions.length === 0) {
+    return <EmptySessionTabs className={className} />;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center border-b bg-muted/20 overflow-hidden",
+        className,
+      )}
+    >
+      <SessionList
+        sessions={sessions}
+        activeTabId={activeTabId}
+        onSelectSession={handleSelectSession}
+        onCloseSession={handleCloseSession}
+      />
+      <AgentSelector className="h-6 flex-shrink-0" />
+    </div>
+  );
+});
+SessionTabs.displayName = "SessionTabs";