@elabs-ai/components-ai 4.0.0

package/src/commit.tsx

@@ -0,0 +1,343 @@
+"use client";
+
+import { Avatar, AvatarFallback } from "@elabs-ai/components-ui";
+import { Button } from "@elabs-ai/components-ui";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { CheckIcon, CopyIcon, FileIcon, GitCommitIcon, MinusIcon, PlusIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export type CommitProps = ComponentProps<typeof Collapsible>;
+
+export const Commit = ({ className, children, ...props }: CommitProps) => (
+  <Collapsible className={cn("rounded-lg border bg-background", className)} {...props}>
+    {children}
+  </Collapsible>
+);
+
+export type CommitHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
+
+export const CommitHeader = ({ className, children, ...props }: CommitHeaderProps) => (
+  <CollapsibleTrigger asChild {...props}>
+    <div
+      className={cn(
+        "group flex cursor-pointer items-center justify-between gap-4 p-3 text-start transition-colors hover:opacity-80",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  </CollapsibleTrigger>
+);
+
+export type CommitHashProps = HTMLAttributes<HTMLSpanElement>;
+
+export const CommitHash = ({ className, children, ...props }: CommitHashProps) => (
+  <span className={cn("font-mono text-xs", className)} {...props}>
+    <GitCommitIcon className="me-1 inline-block size-3" />
+    {children}
+  </span>
+);
+
+export type CommitMessageProps = HTMLAttributes<HTMLSpanElement>;
+
+export const CommitMessage = ({ className, children, ...props }: CommitMessageProps) => (
+  <span className={cn("font-medium text-sm", className)} {...props}>
+    {children}
+  </span>
+);
+
+export type CommitMetadataProps = HTMLAttributes<HTMLDivElement>;
+
+export const CommitMetadata = ({ className, children, ...props }: CommitMetadataProps) => (
+  <div
+    className={cn("flex items-center gap-2 text-muted-foreground text-xs", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type CommitSeparatorProps = HTMLAttributes<HTMLSpanElement>;
+
+export const CommitSeparator = ({ className, children, ...props }: CommitSeparatorProps) => (
+  <span className={className} {...props}>
+    {children ?? "•"}
+  </span>
+);
+
+export type CommitInfoProps = HTMLAttributes<HTMLDivElement>;
+
+export const CommitInfo = ({ className, children, ...props }: CommitInfoProps) => (
+  <div className={cn("flex flex-1 flex-col", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type CommitAuthorProps = HTMLAttributes<HTMLDivElement>;
+
+export const CommitAuthor = ({ className, children, ...props }: CommitAuthorProps) => (
+  <div className={cn("flex items-center", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type CommitAuthorAvatarProps = ComponentProps<typeof Avatar> & {
+  initials: string;
+};
+
+export const CommitAuthorAvatar = ({ initials, className, ...props }: CommitAuthorAvatarProps) => (
+  <Avatar className={cn("size-8", className)} {...props}>
+    <AvatarFallback className="text-xs">{initials}</AvatarFallback>
+  </Avatar>
+);
+
+export type CommitTimestampProps = HTMLAttributes<HTMLTimeElement> & {
+  date: Date;
+};
+
+const formatRelativeDate = (date: Date, locale: string) => {
+  const days = Math.round((date.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
+  return new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(days, "day");
+};
+
+export const CommitTimestamp = ({ date, className, children, ...props }: CommitTimestampProps) => {
+  const { locale } = useLocale();
+  const [formatted, setFormatted] = useState("");
+
+  const updateFormatted = useCallback(() => {
+    setFormatted(formatRelativeDate(date, locale));
+  }, [date, locale]);
+
+  useEffect(() => {
+    updateFormatted();
+  }, [updateFormatted]);
+
+  return (
+    <time className={cn("text-xs", className)} dateTime={date.toISOString()} {...props}>
+      {children ?? formatted}
+    </time>
+  );
+};
+
+export type CommitActionsProps = HTMLAttributes<HTMLDivElement>;
+
+const handleActionsClick = (e: React.MouseEvent) => e.stopPropagation();
+const handleActionsKeyDown = (e: React.KeyboardEvent) => e.stopPropagation();
+
+export const CommitActions = ({ className, children, ...props }: CommitActionsProps) => (
+  <div
+    className={cn("flex items-center gap-1", className)}
+    onClick={handleActionsClick}
+    onKeyDown={handleActionsKeyDown}
+    role="group"
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type CommitCopyButtonProps = ComponentProps<typeof Button> & {
+  hash: string;
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+};
+
+export const CommitCopyButton = ({
+  hash,
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: CommitCopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<number>(0);
+
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(hash);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
+      }
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  }, [hash, onCopy, onError, timeout, isCopied]);
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    [],
+  );
+
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <Button
+      className={cn("size-7 shrink-0", className)}
+      onClick={copyToClipboard}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <Icon size={14} />}
+    </Button>
+  );
+};
+
+export type CommitContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const CommitContent = ({ className, children, ...props }: CommitContentProps) => (
+  <CollapsibleContent className={cn("border-t p-3", className)} {...props}>
+    {children}
+  </CollapsibleContent>
+);
+
+export type CommitFilesProps = HTMLAttributes<HTMLDivElement>;
+
+export const CommitFiles = ({ className, children, ...props }: CommitFilesProps) => (
+  <div className={cn("space-y-1", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type CommitFileProps = HTMLAttributes<HTMLDivElement>;
+
+export const CommitFile = ({ className, children, ...props }: CommitFileProps) => (
+  <div
+    className={cn(
+      "flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/50",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type CommitFileInfoProps = HTMLAttributes<HTMLDivElement>;
+
+export const CommitFileInfo = ({ className, children, ...props }: CommitFileInfoProps) => (
+  <div className={cn("flex min-w-0 items-center gap-2", className)} {...props}>
+    {children}
+  </div>
+);
+
+const fileStatusStyles = {
+  added: "text-green-600 dark:text-green-400",
+  deleted: "text-red-600 dark:text-red-400",
+  modified: "text-yellow-600 dark:text-yellow-400",
+  renamed: "text-blue-600 dark:text-blue-400",
+};
+
+const fileStatusLabels = {
+  added: "A",
+  deleted: "D",
+  modified: "M",
+  renamed: "R",
+};
+
+export type CommitFileStatusProps = HTMLAttributes<HTMLSpanElement> & {
+  status: "added" | "modified" | "deleted" | "renamed";
+};
+
+export const CommitFileStatus = ({
+  status,
+  className,
+  children,
+  ...props
+}: CommitFileStatusProps) => (
+  <span
+    className={cn("font-medium font-mono text-xs", fileStatusStyles[status], className)}
+    {...props}
+  >
+    {children ?? fileStatusLabels[status]}
+  </span>
+);
+
+export type CommitFileIconProps = ComponentProps<typeof FileIcon>;
+
+export const CommitFileIcon = ({ className, ...props }: CommitFileIconProps) => (
+  <FileIcon className={cn("size-3.5 shrink-0 text-muted-foreground", className)} {...props} />
+);
+
+export type CommitFilePathProps = HTMLAttributes<HTMLSpanElement>;
+
+export const CommitFilePath = ({ className, children, ...props }: CommitFilePathProps) => (
+  <span className={cn("truncate font-mono text-xs", className)} {...props}>
+    {children}
+  </span>
+);
+
+export type CommitFileChangesProps = HTMLAttributes<HTMLDivElement>;
+
+export const CommitFileChanges = ({ className, children, ...props }: CommitFileChangesProps) => (
+  <div className={cn("flex shrink-0 items-center gap-1 font-mono text-xs", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type CommitFileAdditionsProps = HTMLAttributes<HTMLSpanElement> & {
+  count: number;
+};
+
+export const CommitFileAdditions = ({
+  count,
+  className,
+  children,
+  ...props
+}: CommitFileAdditionsProps) => {
+  if (count <= 0) {
+    return null;
+  }
+
+  return (
+    <span className={cn("text-green-600 dark:text-green-400", className)} {...props}>
+      {children ?? (
+        <>
+          <PlusIcon className="inline-block size-3" />
+          {count}
+        </>
+      )}
+    </span>
+  );
+};
+
+export type CommitFileDeletionsProps = HTMLAttributes<HTMLSpanElement> & {
+  count: number;
+};
+
+export const CommitFileDeletions = ({
+  count,
+  className,
+  children,
+  ...props
+}: CommitFileDeletionsProps) => {
+  if (count <= 0) {
+    return null;
+  }
+
+  return (
+    <span className={cn("text-red-600 dark:text-red-400", className)} {...props}>
+      {children ?? (
+        <>
+          <MinusIcon className="inline-block size-3" />
+          {count}
+        </>
+      )}
+    </span>
+  );
+};

package/src/composer.stories.tsx

@@ -0,0 +1,188 @@
+/**
+ * Composer — the standard brand-ui AI chat input.
+ *
+ * The canonical two-tone "double card": an outer `bg-card` frame with a muted
+ * status strip wrapping a recessed `PromptInput` well (sharp top, theme-rounded
+ * bottom), a model pill, voice, and a circular send. This is THE chat input —
+ * reach for `<Composer />` instead of hand-rolling a `PromptInput` footer, in a
+ * `ChatShell` footer or as a standalone empty-state composer. Semantic tokens
+ * only; theme-aware radii; reads in every theme.
+ */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, waitFor } from "storybook/test";
+
+import { ChatGreeting } from "./chat-greeting";
+import { Composer } from "./composer";
+
+const SUGGESTIONS = ["Summary", "Code", "Design", "Research"];
+
+const meta = {
+  title: "AI/Composer",
+  component: Composer,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "The standard brand-ui AI chat input: a rounded two-tone double card (outer bg-card frame + muted status strip around a recessed PromptInput well with a sharp top and theme-rounded bottom), a model pill, voice, and a circular send. Built on the real @elabs-ai/components-ai PromptInput. Use it as the chat input everywhere — a ChatShell footer or a standalone empty-state composer. Semantic tokens only; reads in all themes.",
+      },
+    },
+  },
+  args: {
+    onSubmit: () => undefined,
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Composer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The standalone composer with its defaults. */
+export const Default: Story = {
+  render: (args) => (
+    <div className="mx-auto max-w-2xl">
+      <Composer {...args} />
+    </div>
+  ),
+};
+
+/**
+ * `tone="card"` (#254): the tinted-outer/distinct-inner "double card" — an
+ * outer `bg-surface-muted` frame around a `tone="card"` well, instead of
+ * Composer's default outer `bg-card` frame. Check both themes: the well
+ * is raised (lighter than the frame) on light themes, recessed (darker) on
+ * dark.
+ */
+export const DoubleCardToned: Story = {
+  args: { tone: "card" },
+  render: (args) => (
+    <div className="mx-auto max-w-2xl">
+      <Composer {...args} />
+    </div>
+  ),
+};
+
+/** The empty/first-run chat state: a centered greeting + composer + suggestion chips. */
+export const EmptyStateScene: Story = {
+  parameters: { layout: "fullscreen" },
+  render: (args) => (
+    <div className="grid min-h-[28rem] place-items-center bg-background px-4 py-10 text-foreground">
+      <div className="w-full max-w-2xl">
+        <ChatGreeting title="Good morning, Avery" subtitle="How can I" accent="assist you today?" />
+        <Composer {...args} suggestions={SUGGESTIONS} />
+      </div>
+    </div>
+  ),
+};
+
+/** While the agent is generating: a status line + the streaming send (stop) state. */
+export const Streaming: Story = {
+  args: { status: "Generating…", sendStatus: "streaming", onStop: () => undefined },
+  render: (args) => (
+    <div className="mx-auto max-w-2xl">
+      <Composer {...args} />
+    </div>
+  ),
+};
+
+/**
+ * Running, but the user has already typed a follow-up (#351's P0 fix): the
+ * control flips back to the circular ArrowUp `sendIcon` — never the Stop
+ * square — and submits normally, letting the app decide what a mid-turn
+ * submit means. `sendIcon` (not `children`) is what survives the flip; see
+ * `Composer`'s own docblock.
+ */
+export const StreamingWithDraft: Story = {
+  args: { status: "Generating…", sendStatus: "streaming", onSubmit: fn(), onStop: fn() },
+  render: (args) => (
+    <div className="mx-auto max-w-2xl">
+      <Composer {...args} />
+    </div>
+  ),
+  play: async ({ canvas, args, userEvent }) => {
+    await userEvent.type(
+      canvas.getByPlaceholderText("Ask me anything…"),
+      "What about the edge cases?",
+    );
+
+    const send = await canvas.findByRole("button", { name: "Submit" });
+    await expect(send).toHaveAttribute("data-action", "send");
+    await expect(send.querySelector("svg.lucide-arrow-up")).not.toBeNull();
+
+    await send.click();
+    await waitFor(() => expect(args.onSubmit).toHaveBeenCalledTimes(1));
+    await expect(args.onStop).not.toHaveBeenCalled();
+  },
+};
+
+/**
+ * Every send-button state at once — the affordance grid.
+ *
+ * At rest the send is an ArrowUp and is **disabled** until there is text or an
+ * attachment (an enabled-looking button that refuses to send is an a11y lie).
+ * While generating it becomes the Stop square; on error, an X that stays
+ * clickable so the user can retry. Use this story to check the disabled circular
+ * send across both themes — the primary fill and the disabled opacity interact.
+ */
+export const SendStates: Story = {
+  render: (args) => (
+    <div className="mx-auto flex max-w-2xl flex-col gap-6">
+      {(
+        [
+          ["ready", "Empty — send disabled until you type"],
+          ["submitted", "Submitted — spinner"],
+          ["streaming", "Generating — Stop"],
+          ["error", "Failed — retry"],
+        ] as const
+      ).map(([sendStatus, label]) => (
+        <Composer
+          key={sendStatus}
+          {...args}
+          onStop={() => undefined}
+          sendStatus={sendStatus}
+          status={label}
+        />
+      ))}
+    </div>
+  ),
+};
+
+/** Trimmed: no model pill, no voice — just attach + send. */
+export const Minimal: Story = {
+  args: { model: null, showVoice: false, status: null },
+  render: (args) => (
+    <div className="mx-auto max-w-2xl">
+      <Composer {...args} />
+    </div>
+  ),
+};
+
+/**
+ * A consumer-refused send: `submitProps.disabled` closes BOTH the click and the
+ * Enter route to submit.
+ *
+ * Why it matters: `PromptInput`'s submit handler calls `form.reset()` the moment
+ * it ACCEPTS a submit, so an app that refuses the send inside `onSubmit` — one
+ * doing async setup before the first message, say — finds the textarea already
+ * cleared and the user's question destroyed, with nothing to restore from.
+ * Disabling the control is what actually prevents that.
+ *
+ * Type into the field: the text stays, and nothing submits.
+ *
+ * Note `disabled` must be left UNSET (not `false`) when you have no opinion —
+ * `PromptInputSubmit` resolves `disabled ?? autoDisabled`, so a literal `false`
+ * opts out of the library's own empty-composer guard.
+ */
+export const RefusedSubmit: Story = {
+  args: {
+    model: null,
+    status: "Setting up the conversation…",
+    suggestions: undefined,
+    submitProps: { disabled: true, "aria-label": "Send (unavailable until setup completes)" },
+  },
+  render: (args) => (
+    <div className="mx-auto max-w-2xl">
+      <Composer {...args} />
+    </div>
+  ),
+};