@elabs-ai/components-ai 4.0.0

package/src/voice-selector.tsx

@@ -0,0 +1,469 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Button } from "@elabs-ai/components-ui";
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@elabs-ai/components-ui";
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@elabs-ai/components-ui";
+import { Spinner } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import {
+  CircleSmallIcon,
+  MarsIcon,
+  MarsStrokeIcon,
+  NonBinaryIcon,
+  PauseIcon,
+  PlayIcon,
+  TransgenderIcon,
+  VenusAndMarsIcon,
+  VenusIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, useCallback, useContext, useMemo } from "react";
+
+interface VoiceSelectorContextValue {
+  value: string | undefined;
+  setValue: (value: string | undefined) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const VoiceSelectorContext = createContext<VoiceSelectorContextValue | null>(null);
+
+export const useVoiceSelector = () => {
+  const context = useContext(VoiceSelectorContext);
+  if (!context) {
+    throw new Error("VoiceSelector components must be used within VoiceSelector");
+  }
+  return context;
+};
+
+export type VoiceSelectorProps = ComponentProps<typeof Dialog> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string | undefined) => void;
+};
+
+export const VoiceSelector = ({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}: VoiceSelectorProps) => {
+  const [value, setValue] = useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: valueProp,
+  });
+
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp,
+  });
+
+  const voiceSelectorContext = useMemo(
+    () => ({ open, setOpen, setValue, value }),
+    [value, setValue, open, setOpen],
+  );
+
+  return (
+    <VoiceSelectorContext.Provider value={voiceSelectorContext}>
+      <Dialog onOpenChange={setOpen} open={open} {...props}>
+        {children}
+      </Dialog>
+    </VoiceSelectorContext.Provider>
+  );
+};
+
+export type VoiceSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+
+export const VoiceSelectorTrigger = (props: VoiceSelectorTriggerProps) => (
+  <DialogTrigger {...props} />
+);
+
+export type VoiceSelectorContentProps = ComponentProps<typeof DialogContent> & {
+  title?: ReactNode;
+};
+
+export const VoiceSelectorContent = ({
+  className,
+  children,
+  title = "Voice Selector",
+  ...props
+}: VoiceSelectorContentProps) => (
+  <DialogContent aria-describedby={undefined} className={cn("p-0", className)} {...props}>
+    <DialogTitle className="sr-only">{title}</DialogTitle>
+    <Command className="**:data-[slot=command-input-wrapper]:h-auto">{children}</Command>
+  </DialogContent>
+);
+
+export type VoiceSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+
+export const VoiceSelectorDialog = (props: VoiceSelectorDialogProps) => (
+  <CommandDialog {...props} />
+);
+
+export type VoiceSelectorInputProps = ComponentProps<typeof CommandInput>;
+
+export const VoiceSelectorInput = ({ className, ...props }: VoiceSelectorInputProps) => (
+  <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
+);
+
+export type VoiceSelectorListProps = ComponentProps<typeof CommandList>;
+
+export const VoiceSelectorList = (props: VoiceSelectorListProps) => <CommandList {...props} />;
+
+export type VoiceSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+
+export const VoiceSelectorEmpty = (props: VoiceSelectorEmptyProps) => <CommandEmpty {...props} />;
+
+export type VoiceSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+
+export const VoiceSelectorGroup = (props: VoiceSelectorGroupProps) => <CommandGroup {...props} />;
+
+export type VoiceSelectorItemProps = ComponentProps<typeof CommandItem>;
+
+export const VoiceSelectorItem = ({ className, ...props }: VoiceSelectorItemProps) => (
+  <CommandItem className={cn("px-4 py-2", className)} {...props} />
+);
+
+export type VoiceSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+
+export const VoiceSelectorShortcut = (props: VoiceSelectorShortcutProps) => (
+  <CommandShortcut {...props} />
+);
+
+export type VoiceSelectorSeparatorProps = ComponentProps<typeof CommandSeparator>;
+
+export const VoiceSelectorSeparator = (props: VoiceSelectorSeparatorProps) => (
+  <CommandSeparator {...props} />
+);
+
+export type VoiceSelectorGenderProps = ComponentProps<"span"> & {
+  value?: "male" | "female" | "transgender" | "androgyne" | "non-binary" | "intersex";
+};
+
+export const VoiceSelectorGender = ({
+  className,
+  value,
+  children,
+  ...props
+}: VoiceSelectorGenderProps) => {
+  let icon: ReactNode | null = null;
+
+  switch (value) {
+    case "male": {
+      icon = <MarsIcon className="size-4" />;
+      break;
+    }
+    case "female": {
+      icon = <VenusIcon className="size-4" />;
+      break;
+    }
+    case "transgender": {
+      icon = <TransgenderIcon className="size-4" />;
+      break;
+    }
+    case "androgyne": {
+      icon = <MarsStrokeIcon className="size-4" />;
+      break;
+    }
+    case "non-binary": {
+      icon = <NonBinaryIcon className="size-4" />;
+      break;
+    }
+    case "intersex": {
+      icon = <VenusAndMarsIcon className="size-4" />;
+      break;
+    }
+    default: {
+      icon = <CircleSmallIcon className="size-4" />;
+    }
+  }
+
+  return (
+    <span className={cn("text-muted-foreground text-xs", className)} {...props}>
+      {children ?? icon}
+    </span>
+  );
+};
+
+export type VoiceSelectorAccentProps = ComponentProps<"span"> & {
+  value?:
+    | "american"
+    | "british"
+    | "australian"
+    | "canadian"
+    | "irish"
+    | "scottish"
+    | "indian"
+    | "south-african"
+    | "new-zealand"
+    | "spanish"
+    | "french"
+    | "german"
+    | "italian"
+    | "portuguese"
+    | "brazilian"
+    | "mexican"
+    | "argentinian"
+    | "japanese"
+    | "chinese"
+    | "korean"
+    | "russian"
+    | "arabic"
+    | "dutch"
+    | "swedish"
+    | "norwegian"
+    | "danish"
+    | "finnish"
+    | "polish"
+    | "turkish"
+    | "greek"
+    | string;
+};
+
+export const VoiceSelectorAccent = ({
+  className,
+  value,
+  children,
+  ...props
+}: VoiceSelectorAccentProps) => {
+  let emoji: string | null = null;
+
+  switch (value) {
+    case "american": {
+      emoji = "🇺🇸";
+      break;
+    }
+    case "british": {
+      emoji = "🇬🇧";
+      break;
+    }
+    case "australian": {
+      emoji = "🇦🇺";
+      break;
+    }
+    case "canadian": {
+      emoji = "🇨🇦";
+      break;
+    }
+    case "irish": {
+      emoji = "🇮🇪";
+      break;
+    }
+    case "scottish": {
+      emoji = "🏴󠁧󠁢󠁳󠁣󠁴󠁿";
+      break;
+    }
+    case "indian": {
+      emoji = "🇮🇳";
+      break;
+    }
+    case "south-african": {
+      emoji = "🇿🇦";
+      break;
+    }
+    case "new-zealand": {
+      emoji = "🇳🇿";
+      break;
+    }
+    case "spanish": {
+      emoji = "🇪🇸";
+      break;
+    }
+    case "french": {
+      emoji = "🇫🇷";
+      break;
+    }
+    case "german": {
+      emoji = "🇩🇪";
+      break;
+    }
+    case "italian": {
+      emoji = "🇮🇹";
+      break;
+    }
+    case "portuguese": {
+      emoji = "🇵🇹";
+      break;
+    }
+    case "brazilian": {
+      emoji = "🇧🇷";
+      break;
+    }
+    case "mexican": {
+      emoji = "🇲🇽";
+      break;
+    }
+    case "argentinian": {
+      emoji = "🇦🇷";
+      break;
+    }
+    case "japanese": {
+      emoji = "🇯🇵";
+      break;
+    }
+    case "chinese": {
+      emoji = "🇨🇳";
+      break;
+    }
+    case "korean": {
+      emoji = "🇰🇷";
+      break;
+    }
+    case "russian": {
+      emoji = "🇷🇺";
+      break;
+    }
+    case "arabic": {
+      emoji = "🇸🇦";
+      break;
+    }
+    case "dutch": {
+      emoji = "🇳🇱";
+      break;
+    }
+    case "swedish": {
+      emoji = "🇸🇪";
+      break;
+    }
+    case "norwegian": {
+      emoji = "🇳🇴";
+      break;
+    }
+    case "danish": {
+      emoji = "🇩🇰";
+      break;
+    }
+    case "finnish": {
+      emoji = "🇫🇮";
+      break;
+    }
+    case "polish": {
+      emoji = "🇵🇱";
+      break;
+    }
+    case "turkish": {
+      emoji = "🇹🇷";
+      break;
+    }
+    case "greek": {
+      emoji = "🇬🇷";
+      break;
+    }
+    default: {
+      emoji = null;
+    }
+  }
+
+  return (
+    <span className={cn("text-muted-foreground text-xs", className)} {...props}>
+      {children ?? emoji}
+    </span>
+  );
+};
+
+export type VoiceSelectorAgeProps = ComponentProps<"span">;
+
+export const VoiceSelectorAge = ({ className, ...props }: VoiceSelectorAgeProps) => (
+  <span className={cn("text-muted-foreground text-xs tabular-nums", className)} {...props} />
+);
+
+export type VoiceSelectorNameProps = ComponentProps<"span">;
+
+export const VoiceSelectorName = ({ className, ...props }: VoiceSelectorNameProps) => (
+  <span className={cn("flex-1 truncate text-start font-medium", className)} {...props} />
+);
+
+export type VoiceSelectorDescriptionProps = ComponentProps<"span">;
+
+export const VoiceSelectorDescription = ({
+  className,
+  ...props
+}: VoiceSelectorDescriptionProps) => (
+  <span className={cn("text-muted-foreground text-xs", className)} {...props} />
+);
+
+export type VoiceSelectorAttributesProps = ComponentProps<"div">;
+
+export const VoiceSelectorAttributes = ({
+  className,
+  children,
+  ...props
+}: VoiceSelectorAttributesProps) => (
+  <div className={cn("flex items-center text-xs", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type VoiceSelectorBulletProps = ComponentProps<"span">;
+
+export const VoiceSelectorBullet = ({ className, ...props }: VoiceSelectorBulletProps) => (
+  <span aria-hidden="true" className={cn("select-none text-border", className)} {...props}>
+    &bull;
+  </span>
+);
+
+export type VoiceSelectorPreviewProps = Omit<ComponentProps<"button">, "children"> & {
+  playing?: boolean;
+  loading?: boolean;
+  onPlay?: () => void;
+};
+
+export const VoiceSelectorPreview = ({
+  className,
+  playing,
+  loading,
+  onPlay,
+  onClick,
+  ...props
+}: VoiceSelectorPreviewProps) => {
+  const { t } = useLocale();
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+      onClick?.(event);
+      onPlay?.();
+    },
+    [onClick, onPlay],
+  );
+
+  let icon = <PlayIcon className="size-3" />;
+
+  if (loading) {
+    icon = <Spinner className="size-3" />;
+  } else if (playing) {
+    icon = <PauseIcon className="size-3" />;
+  }
+
+  return (
+    <Button
+      aria-label={playing ? t("ai.voiceSelector.pausePreview") : t("ai.voiceSelector.playPreview")}
+      className={cn("size-6", className)}
+      disabled={loading}
+      onClick={handleClick}
+      size="icon-sm"
+      type="button"
+      variant="outline"
+      {...props}
+    >
+      {icon}
+    </Button>
+  );
+};

package/src/web-preview.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  WebPreview,
+  WebPreviewBody,
+  WebPreviewNavigation,
+  WebPreviewNavigationButton,
+  WebPreviewUrl,
+} from "./web-preview";
+import { RotateCwIcon } from "lucide-react";
+
+const meta = {
+  title: "AI/WebPreview",
+  component: WebPreview,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof WebPreview>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <WebPreview className="h-96" defaultUrl="about:blank">
+      <WebPreviewNavigation>
+        <WebPreviewNavigationButton tooltip="Reload">
+          <RotateCwIcon className="size-4" />
+        </WebPreviewNavigationButton>
+        <WebPreviewUrl />
+      </WebPreviewNavigation>
+      <WebPreviewBody />
+    </WebPreview>
+  ),
+};
+
+// LOADING — the preview target hasn't finished loading yet (loading-states.md
+// `loading`). `WebPreviewBody` renders a layout-shaped skeleton filling the
+// iframe box while the navigation bar keeps rendering as passed.
+export const Loading: Story = {
+  render: () => (
+    <WebPreview className="h-96" defaultUrl="about:blank">
+      <WebPreviewNavigation>
+        <WebPreviewNavigationButton disabled tooltip="Reload">
+          <RotateCwIcon className="size-4" />
+        </WebPreviewNavigationButton>
+        <WebPreviewUrl />
+      </WebPreviewNavigation>
+      <WebPreviewBody loading />
+    </WebPreview>
+  ),
+};
+
+// A caller-supplied placeholder node overrides the default Skeleton (the
+// pre-existing escape hatch, kept alongside the boolean signal).
+export const CustomLoadingNode: Story = {
+  render: () => (
+    <WebPreview className="h-96" defaultUrl="about:blank">
+      <WebPreviewNavigation>
+        <WebPreviewUrl />
+      </WebPreviewNavigation>
+      <WebPreviewBody
+        loading={
+          <div className="absolute inset-0 flex items-center justify-center bg-card text-body text-muted-foreground">
+            Booting sandbox…
+          </div>
+        }
+      />
+    </WebPreview>
+  ),
+};

package/src/web-preview.test.tsx

@@ -0,0 +1,117 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  WebPreview,
+  WebPreviewBody,
+  WebPreviewNavigation,
+  WebPreviewNavigationButton,
+  WebPreviewUrl,
+} from "./web-preview";
+
+describe("WebPreview", () => {
+  it("renders the navigation bar and the iframe body", () => {
+    const { container, getByDisplayValue } = render(
+      <WebPreview defaultUrl="about:blank">
+        <WebPreviewNavigation>
+          <WebPreviewUrl />
+        </WebPreviewNavigation>
+        <WebPreviewBody />
+      </WebPreview>,
+    );
+    expect(container.querySelector("iframe")).not.toBeNull();
+    expect(getByDisplayValue("about:blank")).toBeInTheDocument();
+  });
+});
+
+describe("WebPreviewBody loading (#269, loading-states.md)", () => {
+  it("renders nothing extra by default", () => {
+    const { container } = render(
+      <WebPreview>
+        <WebPreviewBody />
+      </WebPreview>,
+    );
+    expect(container.querySelector(".animate-pulse")).toBeNull();
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+
+  it("renders a layout-shaped skeleton filling the iframe box when loading is true", () => {
+    const { container } = render(
+      <WebPreview>
+        <WebPreviewBody loading />
+      </WebPreview>,
+    );
+    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");
+    // The iframe itself keeps rendering underneath the placeholder.
+    expect(container.querySelector("iframe")).not.toBeNull();
+  });
+
+  it("renders a caller-supplied placeholder node instead of the default skeleton", () => {
+    const { container, getByText } = render(
+      <WebPreview>
+        <WebPreviewBody loading={<div>Booting sandbox…</div>} />
+      </WebPreview>,
+    );
+    expect(getByText("Booting sandbox…")).toBeInTheDocument();
+    expect(container.querySelector(".animate-pulse")).toBeNull();
+  });
+});
+
+// #386 — `WebPreviewNavigationButton` is icon-only. Its `tooltip` only becomes
+// an `aria-describedby` while the Radix tooltip is OPEN, so at rest the button
+// had no accessible name at all and axe's `button-name` reds every story that
+// mounts one. The tooltip text is the name (the `MessageAction` precedent in
+// message.tsx), and an explicit `aria-label` still wins.
+describe("WebPreviewNavigationButton accessible name (#386)", () => {
+  it("names an icon-only navigation button from its tooltip", () => {
+    render(
+      <WebPreview>
+        <WebPreviewNavigation>
+          <WebPreviewNavigationButton tooltip="Reload">
+            <svg aria-hidden="true" />
+          </WebPreviewNavigationButton>
+        </WebPreviewNavigation>
+      </WebPreview>,
+    );
+    expect(screen.getByRole("button", { name: "Reload" })).toBeInTheDocument();
+  });
+
+  it("still names a disabled navigation button", () => {
+    render(
+      <WebPreview>
+        <WebPreviewNavigation>
+          <WebPreviewNavigationButton disabled tooltip="Reload">
+            <svg aria-hidden="true" />
+          </WebPreviewNavigationButton>
+        </WebPreviewNavigation>
+      </WebPreview>,
+    );
+    expect(screen.getByRole("button", { name: "Reload" })).toBeDisabled();
+  });
+
+  it("lets an explicit aria-label override the tooltip-derived name", () => {
+    render(
+      <WebPreview>
+        <WebPreviewNavigation>
+          <WebPreviewNavigationButton aria-label="Reload preview" tooltip="Reload">
+            <svg aria-hidden="true" />
+          </WebPreviewNavigationButton>
+        </WebPreviewNavigation>
+      </WebPreview>,
+    );
+    expect(screen.getByRole("button", { name: "Reload preview" })).toBeInTheDocument();
+  });
+
+  it("keeps a text-labelled navigation button's own content as its name", () => {
+    render(
+      <WebPreview>
+        <WebPreviewNavigation>
+          <WebPreviewNavigationButton>Back</WebPreviewNavigationButton>
+        </WebPreviewNavigation>
+      </WebPreview>,
+    );
+    expect(screen.getByRole("button", { name: "Back" })).toBeInTheDocument();
+  });
+});