@elabs-ai/components-ai 4.0.0

package/src/queue.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { Button } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { ScrollArea } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export interface QueueMessagePart {
+  type: string;
+  text?: string;
+  url?: string;
+  filename?: string;
+  mediaType?: string;
+}
+
+export interface QueueMessage {
+  id: string;
+  parts: QueueMessagePart[];
+}
+
+export interface QueueTodo {
+  id: string;
+  title: string;
+  description?: string;
+  status?: "pending" | "completed";
+}
+
+export type QueueItemProps = ComponentProps<"li">;
+
+export const QueueItem = ({ className, ...props }: QueueItemProps) => (
+  <li
+    className={cn(
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemIndicatorProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemIndicatorProps) => (
+  <span
+    className={cn(
+      "mt-0.5 inline-block size-2.5 rounded-full border",
+      completed
+        ? "border-muted-foreground/20 bg-muted-foreground/10"
+        : "border-muted-foreground/50",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemContentProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemContentProps) => (
+  <span
+    className={cn(
+      "line-clamp-1 grow break-words",
+      completed ? "text-muted-foreground/50 line-through" : "text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemDescriptionProps = ComponentProps<"div"> & {
+  completed?: boolean;
+};
+
+export const QueueItemDescription = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemDescriptionProps) => (
+  <div
+    className={cn(
+      "ms-6 text-xs",
+      completed ? "text-muted-foreground/40 line-through" : "text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemActionsProps = ComponentProps<"div">;
+
+export const QueueItemActions = ({ className, ...props }: QueueItemActionsProps) => (
+  <div className={cn("flex gap-1", className)} {...props} />
+);
+
+export type QueueItemActionProps = Omit<ComponentProps<typeof Button>, "variant" | "size">;
+
+export const QueueItemAction = ({ className, ...props }: QueueItemActionProps) => (
+  <Button
+    className={cn(
+      "size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",
+      className,
+    )}
+    size="icon"
+    type="button"
+    variant="ghost"
+    {...props}
+  />
+);
+
+export type QueueItemAttachmentProps = ComponentProps<"div">;
+
+export const QueueItemAttachment = ({ className, ...props }: QueueItemAttachmentProps) => (
+  <div className={cn("mt-1 flex flex-wrap gap-2", className)} {...props} />
+);
+
+export type QueueItemImageProps = ComponentProps<"img">;
+
+export const QueueItemImage = ({ className, ...props }: QueueItemImageProps) => (
+  <img
+    alt=""
+    className={cn("h-8 w-8 rounded border object-cover", className)}
+    height={32}
+    width={32}
+    {...props}
+  />
+);
+
+export type QueueItemFileProps = ComponentProps<"span">;
+
+export const QueueItemFile = ({ children, className, ...props }: QueueItemFileProps) => (
+  <span
+    className={cn("flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs", className)}
+    {...props}
+  >
+    <PaperclipIcon size={12} />
+    <span className="max-w-[100px] truncate">{children}</span>
+  </span>
+);
+
+export type QueueListProps = ComponentProps<typeof ScrollArea>;
+
+export const QueueList = ({ children, className, ...props }: QueueListProps) => (
+  <ScrollArea className={cn("mt-2 -mb-1", className)} {...props}>
+    <div className="max-h-40 pe-4">
+      <ul>{children}</ul>
+    </div>
+  </ScrollArea>
+);
+
+// QueueSection - collapsible section container
+export type QueueSectionProps = ComponentProps<typeof Collapsible>;
+
+export const QueueSection = ({ className, defaultOpen = true, ...props }: QueueSectionProps) => (
+  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
+);
+
+// QueueSectionTrigger - section header/trigger
+export type QueueSectionTriggerProps = ComponentProps<"button">;
+
+export const QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}: QueueSectionTriggerProps) => (
+  <CollapsibleTrigger asChild>
+    <button
+      className={cn(
+        "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-start font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+        className,
+      )}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  </CollapsibleTrigger>
+);
+
+// QueueSectionLabel - label content with icon and count
+export type QueueSectionLabelProps = ComponentProps<"span"> & {
+  count?: number;
+  label: string;
+  icon?: React.ReactNode;
+};
+
+export const QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}: QueueSectionLabelProps) => (
+  <span className={cn("flex items-center gap-2", className)} {...props}>
+    <ChevronDownIcon className="size-4 transition-transform group-data-[state=closed]:-rotate-90" />
+    {icon}
+    <span>
+      {count} {label}
+    </span>
+  </span>
+);
+
+// QueueSectionContent - collapsible content area
+export type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const QueueSectionContent = ({ className, ...props }: QueueSectionContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-top-2 data-[state=closed]:slide-out-to-top-2 data-[state=closed]:fade-out-0 data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)] outline-none",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type QueueProps = ComponentProps<"div">;
+
+export const Queue = ({ className, ...props }: QueueProps) => (
+  <div
+    className={cn(
+      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      className,
+    )}
+    {...props}
+  />
+);

package/src/reasoning.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "./reasoning";
+const meta = {
+  title: "AI/Reasoning",
+  component: Reasoning,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof Reasoning>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Reasoning defaultOpen className="max-w-prose">
+      <ReasoningTrigger />
+      <ReasoningContent>
+        {"I checked CI for the last 7 days, grouped by service, then summarized the failures."}
+      </ReasoningContent>
+    </Reasoning>
+  ),
+};
+
+/** While the model is still thinking: the trigger shimmers and the panel auto-opens. */
+export const Streaming: Story = {
+  render: () => (
+    <Reasoning defaultOpen isStreaming className="max-w-prose">
+      <ReasoningTrigger />
+      <ReasoningContent>
+        {"Querying the warehouse for Q3 orders, then joining against the returns table"}
+      </ReasoningContent>
+    </Reasoning>
+  ),
+};
+
+/**
+ * A structured live ledger instead of markdown.
+ *
+ * `ReasoningContent` takes `ReactNode`: a **string** is parsed as streamed
+ * markdown, anything else renders as-is — so per-step status can live inside the
+ * disclosure without being handed to a markdown parser.
+ */
+export const StructuredLedger: Story = {
+  render: () => (
+    <Reasoning defaultOpen className="max-w-prose">
+      <ReasoningTrigger />
+      <ReasoningContent>
+        <ol className="flex flex-col gap-2">
+          {[
+            ["done", "Resolved the schema for orders + returns"],
+            ["done", "Ran the Q3 aggregation (1.2M rows)"],
+            ["active", "Reconciling against the finance ledger"],
+            ["pending", "Drafting the summary"],
+          ].map(([state, label]) => (
+            <li className="flex items-start gap-2 text-body" key={label}>
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "mt-1.5 size-1.5 shrink-0 rounded-full",
+                  state === "done" && "bg-primary",
+                  state === "active" && "bg-info",
+                  state === "pending" && "bg-muted-foreground/40",
+                )}
+              />
+              <span className={state === "pending" ? "text-muted-foreground" : undefined}>
+                {label}
+                {/* The dot is colour-only, so carry the status in text too —
+                    this story is an exemplar consumers copy (WCAG 1.4.1). */}
+                <span className="sr-only">
+                  {state === "done"
+                    ? " (done)"
+                    : state === "active"
+                      ? " (in progress)"
+                      : " (pending)"}
+                </span>
+              </span>
+            </li>
+          ))}
+        </ol>
+      </ReasoningContent>
+    </Reasoning>
+  ),
+};

package/src/reasoning.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "./reasoning";
+
+const open = (children: React.ReactNode) =>
+  render(
+    <Reasoning defaultOpen isStreaming={false}>
+      <ReasoningTrigger />
+      <ReasoningContent>{children}</ReasoningContent>
+    </Reasoning>,
+  );
+
+describe("ReasoningContent — markdown or nodes", () => {
+  it("renders a string child as markdown — syntax is consumed", () => {
+    const { container } = open("**bold** reasoning");
+    // Streamdown wraps tokens in styled <span>s for the streaming animation, so
+    // don't assert a tag. The contract is that the markdown was PARSED: the
+    // `**` delimiters are gone and only the text remains. The node-path test
+    // below asserts the exact opposite, which is what pins the branch.
+    expect(container.textContent).not.toContain("**");
+    expect(screen.getByText("bold")).toBeInTheDocument();
+  });
+
+  it("performs structural markdown transforms on a string child", () => {
+    open("- first\n- second");
+    expect(screen.getAllByRole("listitem")).toHaveLength(2);
+  });
+
+  it("renders a non-string child as-is, never through the markdown parser", () => {
+    // The consumer's case: a structured live reasoning ledger (timeline,
+    // per-step status) inside the disclosure. `children: string` made this
+    // impossible; handing JSX to Streamdown would be worse.
+    open(
+      <ol data-testid="ledger">
+        <li>Fetch schema</li>
+        <li>Join tables</li>
+      </ol>,
+    );
+
+    expect(screen.getByTestId("ledger")).toBeInTheDocument();
+    expect(screen.getAllByRole("listitem")).toHaveLength(2);
+  });
+
+  it("does not markdown-parse text inside a node child", () => {
+    open(<span data-testid="raw">**not bold**</span>);
+    expect(screen.getByTestId("raw").textContent).toBe("**not bold**");
+    expect(screen.queryByText("not bold")).not.toBeInTheDocument();
+  });
+});

package/src/reasoning.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useStreamdownPlugins, useStreamdownTranslations } from "./_streamdown-i18n";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Streamdown } from "streamdown";
+
+import { Shimmer } from "./shimmer";
+
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+}
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+export const useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export const Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }: ReasoningProps) => {
+    const resolvedDefaultOpen = defaultOpen ?? isStreaming;
+    // Track if defaultOpen was explicitly set to false (to prevent auto-open)
+    const isExplicitlyClosed = defaultOpen === false;
+
+    const [isOpen, setIsOpen] = useControllableState<boolean>({
+      defaultProp: resolvedDefaultOpen,
+      onChange: onOpenChange,
+      prop: open,
+    });
+    const [duration, setDuration] = useControllableState<number | undefined>({
+      defaultProp: undefined,
+      prop: durationProp,
+    });
+
+    const hasEverStreamedRef = useRef(isStreaming);
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const startTimeRef = useRef<number | null>(null);
+
+    // Track when streaming starts and compute duration
+    useEffect(() => {
+      if (isStreaming) {
+        hasEverStreamedRef.current = true;
+        if (startTimeRef.current === null) {
+          startTimeRef.current = Date.now();
+        }
+      } else if (startTimeRef.current !== null) {
+        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+        startTimeRef.current = null;
+      }
+    }, [isStreaming, setDuration]);
+
+    // Auto-open when streaming starts (unless explicitly closed)
+    useEffect(() => {
+      if (isStreaming && !isOpen && !isExplicitlyClosed) {
+        setIsOpen(true);
+      }
+    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+
+    // Auto-close when streaming ends (once only, and only if it ever streamed)
+    useEffect(() => {
+      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
+
+    const handleOpenChange = useCallback(
+      (newOpen: boolean) => {
+        setIsOpen(newOpen);
+      },
+      [setIsOpen],
+    );
+
+    const contextValue = useMemo(
+      () => ({ duration, isOpen, isStreaming, setIsOpen }),
+      [duration, isOpen, isStreaming, setIsOpen],
+    );
+
+    return (
+      <ReasoningContext.Provider value={contextValue}>
+        <Collapsible
+          className={cn("not-prose mb-4", className)}
+          onOpenChange={handleOpenChange}
+          open={isOpen}
+          {...props}
+        >
+          {children}
+        </Collapsible>
+      </ReasoningContext.Provider>
+    );
+  },
+);
+
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+  if (isStreaming || duration === 0) {
+    return <Shimmer duration={1}>Thinking...</Shimmer>;
+  }
+  if (duration === undefined) {
+    return <p>Thought for a few seconds</p>;
+  }
+  return <p>Thought for {duration} seconds</p>;
+};
+
+export const ReasoningTrigger = memo(
+  ({
+    className,
+    children,
+    getThinkingMessage = defaultGetThinkingMessage,
+    ...props
+  }: ReasoningTriggerProps) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+
+    return (
+      <CollapsibleTrigger
+        className={cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <BrainIcon className="size-4" />
+            {getThinkingMessage(isStreaming, duration)}
+            <ChevronDownIcon
+              className={cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0")}
+            />
+          </>
+        )}
+      </CollapsibleTrigger>
+    );
+  },
+);
+
+export type ReasoningContentProps = Omit<ComponentProps<typeof CollapsibleContent>, "children"> & {
+  /**
+   * The reasoning body.
+   *
+   * A **string** is rendered as streamed markdown (Streamdown) — the default for
+   * model reasoning text. Any other node renders **as-is**, so a structured live
+   * ledger (a timeline, per-step status) can live inside the disclosure without
+   * being handed to a markdown parser. Mirrors the `getThinkingMessage` /
+   * `children` override seam on `ReasoningTrigger`.
+   *
+   * Note an **array** of strings is not a `string` — `{["a", "b"]}` renders raw.
+   * Pass one string if you want it parsed as markdown.
+   */
+  children: ReactNode;
+};
+
+export const ReasoningContent = memo(({ className, children, ...props }: ReasoningContentProps) => {
+  // Streamdown's own chrome (code copy, table menus) reads the locale seam (#310).
+  const translations = useStreamdownTranslations();
+  // Brand-token-derived `code` plugin, not the package's static github-*
+  // default (#315 follow-up) — re-derives when the active theme changes.
+  const plugins = useStreamdownPlugins();
+
+  return (
+    <CollapsibleContent
+      className={cn(
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
+        className,
+      )}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Streamdown plugins={plugins} translations={translations}>
+          {children}
+        </Streamdown>
+      ) : (
+        children
+      )}
+    </CollapsibleContent>
+  );
+});
+
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";

package/src/sandbox.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Sandbox,
+  SandboxContent,
+  SandboxHeader,
+  SandboxTabContent,
+  SandboxTabs,
+  SandboxTabsBar,
+  SandboxTabsList,
+  SandboxTabsTrigger,
+} from "./sandbox";
+
+const meta = {
+  title: "AI/Sandbox",
+  component: Sandbox,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof Sandbox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Sandbox className="max-w-lg">
+      <SandboxHeader title="Python sandbox" state="output-available" />
+      <SandboxContent>
+        <SandboxTabs defaultValue="output">
+          <SandboxTabsBar>
+            <SandboxTabsList>
+              <SandboxTabsTrigger value="output">Output</SandboxTabsTrigger>
+            </SandboxTabsList>
+          </SandboxTabsBar>
+          <SandboxTabContent value="output" className="p-3">
+            3 rows reconciled.
+          </SandboxTabContent>
+        </SandboxTabs>
+      </SandboxContent>
+    </Sandbox>
+  ),
+};
+
+// LOADING — the run's output hasn't arrived yet (loading-states.md `loading`).
+// `SandboxContent` renders a layout-shaped skeleton while `SandboxHeader`
+// keeps rendering as passed, so the run's identity stays visible.
+export const Loading: Story = {
+  render: () => (
+    <Sandbox className="max-w-lg" loading>
+      <SandboxHeader title="Python sandbox" state="input-streaming" />
+      <SandboxContent>
+        <SandboxTabs defaultValue="output">
+          <SandboxTabsBar>
+            <SandboxTabsList>
+              <SandboxTabsTrigger value="output">Output</SandboxTabsTrigger>
+            </SandboxTabsList>
+          </SandboxTabsBar>
+          <SandboxTabContent value="output" className="p-3">
+            This content is not shown while loading.
+          </SandboxTabContent>
+        </SandboxTabs>
+      </SandboxContent>
+    </Sandbox>
+  ),
+};

package/src/sandbox.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Sandbox, SandboxContent, SandboxHeader } from "./sandbox";
+
+describe("Sandbox", () => {
+  it("renders its header and content", () => {
+    render(
+      <Sandbox>
+        <SandboxHeader title="Python sandbox" state="output-available" />
+        <SandboxContent>Real output</SandboxContent>
+      </Sandbox>,
+    );
+    expect(screen.getByText("Python sandbox")).toBeInTheDocument();
+    expect(screen.getByText("Real output")).toBeInTheDocument();
+  });
+});
+
+describe("Sandbox loading (#269, loading-states.md)", () => {
+  it("renders a skeleton in SandboxContent while loading — header keeps rendering", () => {
+    const { container } = render(
+      <Sandbox loading>
+        <SandboxHeader title="Python sandbox" state="input-streaming" />
+        <SandboxContent>Real output — should not render while loading</SandboxContent>
+      </Sandbox>,
+    );
+    expect(screen.getByText("Python sandbox")).toBeInTheDocument();
+    expect(screen.queryByText(/Real output/)).not.toBeInTheDocument();
+    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
+    const statuses = container.querySelectorAll('[role="status"]');
+    expect(statuses).toHaveLength(1);
+    expect(statuses[0]).toHaveAttribute("aria-live", "polite");
+  });
+
+  it("renders the real content once loading clears", () => {
+    render(
+      <Sandbox>
+        <SandboxContent>Real output</SandboxContent>
+      </Sandbox>,
+    );
+    expect(screen.getByText("Real output")).toBeInTheDocument();
+  });
+});