@elabs-ai/components-ai 4.0.0

package/src/sandbox.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Skeleton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  useLocale,
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { ToolUIPart } from "ai";
+import { ChevronDownIcon, Code } from "lucide-react";
+import type { ComponentProps } from "react";
+import { createContext, use, useMemo } from "react";
+
+import { getStatusBadge } from "./tool";
+
+/**
+ * Shared loading state (composition-patterns — lifted into the provider),
+ * mirroring Artifact: Sandbox is the only place that knows whether the run
+ * body has arrived; SandboxContent reads the interface and renders a
+ * skeleton, while SandboxHeader (an ordinary child of Sandbox) keeps
+ * rendering as passed.
+ */
+const SandboxContext = createContext<{ loading: boolean }>({ loading: false });
+
+export type SandboxProps = ComponentProps<typeof Collapsible> & {
+  /**
+   * The run output has not arrived yet (loading-states.md loading signal).
+   * SandboxContent renders a layout-shaped skeleton instead of its children;
+   * SandboxHeader keeps rendering as passed.
+   * @default false
+   */
+  loading?: boolean;
+};
+
+/** @deprecated Renamed to `SandboxProps`. */
+export type SandboxRootProps = SandboxProps;
+
+export const Sandbox = ({ className, loading = false, children, ...props }: SandboxProps) => {
+  const contextValue = useMemo(() => ({ loading }), [loading]);
+
+  return (
+    <SandboxContext.Provider value={contextValue}>
+      <Collapsible
+        className={cn("not-prose group mb-4 w-full overflow-hidden rounded-md border", className)}
+        defaultOpen
+        {...props}
+      >
+        {children}
+      </Collapsible>
+    </SandboxContext.Provider>
+  );
+};
+
+export interface SandboxHeaderProps {
+  title?: string;
+  state: ToolUIPart["state"];
+  className?: string;
+}
+
+export const SandboxHeader = ({ className, title, state, ...props }: SandboxHeaderProps) => (
+  <CollapsibleTrigger
+    className={cn("flex w-full items-center justify-between gap-4 p-3", className)}
+    {...props}
+  >
+    <div className="flex items-center gap-2">
+      <Code className="size-4 text-muted-foreground" />
+      <span className="font-medium text-sm">{title}</span>
+      {getStatusBadge(state)}
+    </div>
+    <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+  </CollapsibleTrigger>
+);
+
+export type SandboxContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SandboxContent = ({ className, children, ...props }: SandboxContentProps) => {
+  const { loading } = use(SandboxContext);
+  const { t } = useLocale();
+
+  return (
+    <CollapsibleContent
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className,
+      )}
+      {...props}
+    >
+      {loading ? (
+        <div className="space-y-2 p-3" role="status" aria-live="polite">
+          <span className="sr-only">{t("loading")}</span>
+          <Skeleton className="h-4 w-1/3" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-2/3" />
+        </div>
+      ) : (
+        children
+      )}
+    </CollapsibleContent>
+  );
+};
+
+export type SandboxTabsProps = ComponentProps<typeof Tabs>;
+
+export const SandboxTabs = ({ className, ...props }: SandboxTabsProps) => (
+  <Tabs className={cn("w-full gap-0", className)} {...props} />
+);
+
+export type SandboxTabsBarProps = ComponentProps<"div">;
+
+export const SandboxTabsBar = ({ className, ...props }: SandboxTabsBarProps) => (
+  <div
+    className={cn("flex w-full items-center border-border border-t border-b", className)}
+    {...props}
+  />
+);
+
+export type SandboxTabsListProps = ComponentProps<typeof TabsList>;
+
+export const SandboxTabsList = ({ className, ...props }: SandboxTabsListProps) => (
+  <TabsList
+    className={cn("h-auto rounded-none border-0 bg-transparent p-0", className)}
+    {...props}
+  />
+);
+
+export type SandboxTabsTriggerProps = ComponentProps<typeof TabsTrigger>;
+
+export const SandboxTabsTrigger = ({ className, ...props }: SandboxTabsTriggerProps) => (
+  <TabsTrigger
+    className={cn(
+      "rounded-none border-0 border-transparent border-b-2 px-4 py-2 font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type SandboxTabContentProps = ComponentProps<typeof TabsContent>;
+
+export const SandboxTabContent = ({ className, ...props }: SandboxTabContentProps) => (
+  <TabsContent className={cn("mt-0 text-sm", className)} {...props} />
+);

package/src/schema-display.tsx

@@ -0,0 +1,412 @@
+"use client";
+
+import { Badge } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ChevronRightIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+import { createContext, useContext, useMemo } from "react";
+
+type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+
+interface SchemaParameter {
+  name: string;
+  type: string;
+  required?: boolean;
+  description?: string;
+  location?: "path" | "query" | "header";
+}
+
+interface SchemaProperty {
+  name: string;
+  type: string;
+  required?: boolean;
+  description?: string;
+  properties?: SchemaProperty[];
+  items?: SchemaProperty;
+}
+
+interface SchemaDisplayContextType {
+  method: HttpMethod;
+  path: string;
+  description?: string;
+  parameters?: SchemaParameter[];
+  requestBody?: SchemaProperty[];
+  responseBody?: SchemaProperty[];
+}
+
+const SchemaDisplayContext = createContext<SchemaDisplayContextType>({
+  method: "GET",
+  path: "",
+});
+
+const methodStyles: Record<HttpMethod, string> = {
+  DELETE: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  GET: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+  PATCH: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
+  POST: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  PUT: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400",
+};
+
+export type SchemaDisplayHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export const SchemaDisplayHeader = ({
+  className,
+  children,
+  ...props
+}: SchemaDisplayHeaderProps) => (
+  <div className={cn("flex items-center gap-3 border-b px-4 py-3", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type SchemaDisplayMethodProps = ComponentProps<typeof Badge>;
+
+export const SchemaDisplayMethod = ({
+  className,
+  children,
+  ...props
+}: SchemaDisplayMethodProps) => {
+  const { method } = useContext(SchemaDisplayContext);
+
+  return (
+    <Badge
+      className={cn("font-mono text-xs", methodStyles[method], className)}
+      variant="secondary"
+      {...props}
+    >
+      {children ?? method}
+    </Badge>
+  );
+};
+
+export type SchemaDisplayPathProps = HTMLAttributes<HTMLSpanElement>;
+
+export const SchemaDisplayPath = ({ className, children, ...props }: SchemaDisplayPathProps) => {
+  const { path } = useContext(SchemaDisplayContext);
+
+  // Highlight path parameters
+  const highlightedPath = path.replaceAll(
+    /\{([^}]+)\}/g,
+    '<span class="text-blue-600 dark:text-blue-400">{$1}</span>',
+  );
+
+  return (
+    <span
+      className={cn("font-mono text-sm", className)}
+      // oxlint-disable-next-line eslint-plugin-react(no-danger)
+      dangerouslySetInnerHTML={{ __html: children ?? highlightedPath }}
+      {...props}
+    />
+  );
+};
+
+export type SchemaDisplayDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const SchemaDisplayDescription = ({
+  className,
+  children,
+  ...props
+}: SchemaDisplayDescriptionProps) => {
+  const { description } = useContext(SchemaDisplayContext);
+
+  return (
+    <p className={cn("border-b px-4 py-3 text-muted-foreground text-sm", className)} {...props}>
+      {children ?? description}
+    </p>
+  );
+};
+
+export type SchemaDisplayContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const SchemaDisplayContent = ({
+  className,
+  children,
+  ...props
+}: SchemaDisplayContentProps) => (
+  <div className={cn("divide-y", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type SchemaDisplayParameterProps = HTMLAttributes<HTMLDivElement> & SchemaParameter;
+
+export const SchemaDisplayParameter = ({
+  name,
+  type,
+  required,
+  description,
+  location,
+  className,
+  ...props
+}: SchemaDisplayParameterProps) => (
+  <div className={cn("px-4 py-3 ps-10", className)} {...props}>
+    <div className="flex items-center gap-2">
+      <span className="font-mono text-sm">{name}</span>
+      <Badge className="text-xs" variant="outline">
+        {type}
+      </Badge>
+      {location && (
+        <Badge className="text-xs" variant="secondary">
+          {location}
+        </Badge>
+      )}
+      {required && (
+        <Badge
+          className="bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400"
+          variant="secondary"
+        >
+          required
+        </Badge>
+      )}
+    </div>
+    {description && <p className="mt-1 text-muted-foreground text-sm">{description}</p>}
+  </div>
+);
+
+export type SchemaDisplayParametersProps = ComponentProps<typeof Collapsible>;
+
+export const SchemaDisplayParameters = ({
+  className,
+  children,
+  ...props
+}: SchemaDisplayParametersProps) => {
+  const { parameters } = useContext(SchemaDisplayContext);
+
+  return (
+    <Collapsible className={cn(className)} defaultOpen {...props}>
+      <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-start transition-colors hover:bg-muted/50">
+        <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
+        <span className="font-medium text-sm">Parameters</span>
+        <Badge className="ms-auto text-xs" variant="secondary">
+          {parameters?.length}
+        </Badge>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="divide-y border-t">
+          {children ??
+            parameters?.map((param) => <SchemaDisplayParameter key={param.name} {...param} />)}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export type SchemaDisplayPropertyProps = HTMLAttributes<HTMLDivElement> &
+  SchemaProperty & {
+    depth?: number;
+  };
+
+export const SchemaDisplayProperty = ({
+  name,
+  type,
+  required,
+  description,
+  properties,
+  items,
+  depth = 0,
+  className,
+  ...props
+}: SchemaDisplayPropertyProps) => {
+  const hasChildren = properties || items;
+  const paddingLeft = 40 + depth * 16;
+
+  if (hasChildren) {
+    return (
+      <Collapsible defaultOpen={depth < 2}>
+        <CollapsibleTrigger
+          className={cn(
+            "group flex w-full items-center gap-2 py-3 text-start transition-colors hover:bg-muted/50",
+            className,
+          )}
+          style={{ paddingLeft }}
+        >
+          <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
+          <span className="font-mono text-sm">{name}</span>
+          <Badge className="text-xs" variant="outline">
+            {type}
+          </Badge>
+          {required && (
+            <Badge
+              className="bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400"
+              variant="secondary"
+            >
+              required
+            </Badge>
+          )}
+        </CollapsibleTrigger>
+        {description && (
+          <p
+            className="pb-2 text-muted-foreground text-sm"
+            style={{ paddingLeft: paddingLeft + 24 }}
+          >
+            {description}
+          </p>
+        )}
+        <CollapsibleContent>
+          <div className="divide-y border-t">
+            {properties?.map((prop) => (
+              <SchemaDisplayProperty key={prop.name} {...prop} depth={depth + 1} />
+            ))}
+            {items && <SchemaDisplayProperty {...items} depth={depth + 1} name={`${name}[]`} />}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+
+  return (
+    <div className={cn("py-3 pe-4", className)} style={{ paddingLeft }} {...props}>
+      <div className="flex items-center gap-2">
+        {/* Spacer for alignment */}
+        <span className="size-4" />
+        <span className="font-mono text-sm">{name}</span>
+        <Badge className="text-xs" variant="outline">
+          {type}
+        </Badge>
+        {required && (
+          <Badge
+            className="bg-red-100 text-red-700 text-xs dark:bg-red-900/30 dark:text-red-400"
+            variant="secondary"
+          >
+            required
+          </Badge>
+        )}
+      </div>
+      {description && <p className="mt-1 ps-6 text-muted-foreground text-sm">{description}</p>}
+    </div>
+  );
+};
+
+export type SchemaDisplayRequestProps = ComponentProps<typeof Collapsible>;
+
+export const SchemaDisplayRequest = ({
+  className,
+  children,
+  ...props
+}: SchemaDisplayRequestProps) => {
+  const { requestBody } = useContext(SchemaDisplayContext);
+
+  return (
+    <Collapsible className={cn(className)} defaultOpen {...props}>
+      <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-start transition-colors hover:bg-muted/50">
+        <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
+        <span className="font-medium text-sm">Request Body</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t">
+          {children ??
+            requestBody?.map((prop) => (
+              <SchemaDisplayProperty key={prop.name} {...prop} depth={0} />
+            ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export type SchemaDisplayResponseProps = ComponentProps<typeof Collapsible>;
+
+export const SchemaDisplayResponse = ({
+  className,
+  children,
+  ...props
+}: SchemaDisplayResponseProps) => {
+  const { responseBody } = useContext(SchemaDisplayContext);
+
+  return (
+    <Collapsible className={cn(className)} defaultOpen {...props}>
+      <CollapsibleTrigger className="group flex w-full items-center gap-2 px-4 py-3 text-start transition-colors hover:bg-muted/50">
+        <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-90" />
+        <span className="font-medium text-sm">Response</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="border-t">
+          {children ??
+            responseBody?.map((prop) => (
+              <SchemaDisplayProperty key={prop.name} {...prop} depth={0} />
+            ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export type SchemaDisplayProps = HTMLAttributes<HTMLDivElement> & {
+  method: HttpMethod;
+  path: string;
+  description?: string;
+  parameters?: SchemaParameter[];
+  requestBody?: SchemaProperty[];
+  responseBody?: SchemaProperty[];
+};
+
+export const SchemaDisplay = ({
+  method,
+  path,
+  description,
+  parameters,
+  requestBody,
+  responseBody,
+  className,
+  children,
+  ...props
+}: SchemaDisplayProps) => {
+  const contextValue = useMemo(
+    () => ({
+      description,
+      method,
+      parameters,
+      path,
+      requestBody,
+      responseBody,
+    }),
+    [description, method, parameters, path, requestBody, responseBody],
+  );
+
+  return (
+    <SchemaDisplayContext.Provider value={contextValue}>
+      <div className={cn("overflow-hidden rounded-lg border bg-background", className)} {...props}>
+        {children ?? (
+          <>
+            <SchemaDisplayHeader>
+              <div className="flex items-center gap-3">
+                <SchemaDisplayMethod />
+                <SchemaDisplayPath />
+              </div>
+            </SchemaDisplayHeader>
+            {description && <SchemaDisplayDescription />}
+            <SchemaDisplayContent>
+              {parameters && parameters.length > 0 && <SchemaDisplayParameters />}
+              {requestBody && requestBody.length > 0 && <SchemaDisplayRequest />}
+              {responseBody && responseBody.length > 0 && <SchemaDisplayResponse />}
+            </SchemaDisplayContent>
+          </>
+        )}
+      </div>
+    </SchemaDisplayContext.Provider>
+  );
+};
+
+export type SchemaDisplayBodyProps = HTMLAttributes<HTMLDivElement>;
+
+export const SchemaDisplayBody = ({ className, children, ...props }: SchemaDisplayBodyProps) => (
+  <div className={cn("divide-y", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type SchemaDisplayExampleProps = HTMLAttributes<HTMLPreElement>;
+
+export const SchemaDisplayExample = ({
+  className,
+  children,
+  ...props
+}: SchemaDisplayExampleProps) => (
+  <pre
+    className={cn("mx-4 mb-4 overflow-auto rounded-md bg-muted p-4 font-mono text-sm", className)}
+    {...props}
+  >
+    {children}
+  </pre>
+);

package/src/selection-toolbar.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Textarea } from "@elabs-ai/components-ui";
+import { SelectionToolbar } from "./selection-toolbar";
+import { Message, MessageContent } from "./message";
+
+const meta = {
+  title: "AI/SelectionToolbar",
+  component: SelectionToolbar,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof SelectionToolbar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default — select any text in the transcript to reveal the Quote toolbar. */
+export const Default: Story = {
+  render: () => (
+    <SelectionToolbar onQuote={(text) => console.info("quote", text)}>
+      <div className="flex flex-col gap-3">
+        <Message from="assistant">
+          <MessageContent>
+            Q3 revenue totalled $4.2M across four regions. EMEA led at $1.8M, followed by the
+            Americas at $1.4M. Growth was strongest in APAC, up 22% quarter over quarter.
+          </MessageContent>
+        </Message>
+        <Message from="assistant">
+          <MessageContent>
+            The biggest risk to Q4 is renewal concentration: three enterprise accounts make up 31%
+            of ARR and all renew in the same month.
+          </MessageContent>
+        </Message>
+      </div>
+    </SelectionToolbar>
+  ),
+};
+
+/** Wired to a composer — quoting prepends a `>`-prefixed blockquote into the draft. */
+export const QuoteIntoComposer: Story = {
+  render: function QuoteIntoComposer() {
+    const [draft, setDraft] = useState("");
+    const quote = (text: string) => {
+      const block = text
+        .split("\n")
+        .map((line) => `> ${line}`)
+        .join("\n");
+      setDraft((d) => (d ? `${block}\n\n${d}` : `${block}\n\n`));
+    };
+    return (
+      <div className="flex flex-col gap-4">
+        <SelectionToolbar onQuote={quote}>
+          <Message from="assistant">
+            <MessageContent>
+              Select this sentence and click Quote to pull it into the composer as a blockquote.
+            </MessageContent>
+          </Message>
+        </SelectionToolbar>
+        <Textarea
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          placeholder="Your reply…"
+          aria-label="Reply"
+          className="min-h-24"
+        />
+      </div>
+    );
+  },
+};
+
+/** Dark theme. */
+export const DarkTheme: Story = {
+  render: () => (
+    <SelectionToolbar onQuote={(text) => console.info("quote", text)}>
+      <Message from="assistant">
+        <MessageContent>Select this text to see the Quote toolbar in dark theme.</MessageContent>
+      </Message>
+    </SelectionToolbar>
+  ),
+  decorators: [
+    (Story) => (
+      <div data-theme="dark" className="rounded-lg bg-background p-6 text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+};