@elabs-ai/components-ai 4.0.0

package/src/mic-selector.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Button } from "@elabs-ai/components-ui";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@elabs-ai/components-ui";
+import { Popover, PopoverContent, PopoverTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import { ChevronsUpDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+const deviceIdRegex = /\(([\da-fA-F]{4}:[\da-fA-F]{4})\)$/;
+
+interface MicSelectorContextType {
+  data: MediaDeviceInfo[];
+  value: string | undefined;
+  onValueChange?: (value: string) => void;
+  open: boolean;
+  onOpenChange?: (open: boolean) => void;
+  width: number;
+  setWidth?: (width: number) => void;
+}
+
+const MicSelectorContext = createContext<MicSelectorContextType>({
+  data: [],
+  onOpenChange: undefined,
+  onValueChange: undefined,
+  open: false,
+  setWidth: undefined,
+  value: undefined,
+  width: 200,
+});
+
+export const useAudioDevices = () => {
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [hasPermission, setHasPermission] = useState(false);
+
+  const loadDevicesWithoutPermission = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter((device) => device.kind === "audioinput");
+
+      setDevices(audioInputs);
+    } catch (caughtError) {
+      const message =
+        caughtError instanceof Error ? caughtError.message : "Failed to get audio devices";
+
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadDevicesWithPermission = useCallback(async () => {
+    if (loading) {
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const tempStream = await navigator.mediaDevices.getUserMedia({
+        audio: true,
+      });
+
+      for (const track of tempStream.getTracks()) {
+        track.stop();
+      }
+
+      const deviceList = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = deviceList.filter((device) => device.kind === "audioinput");
+
+      setDevices(audioInputs);
+      setHasPermission(true);
+    } catch (caughtError) {
+      const message =
+        caughtError instanceof Error ? caughtError.message : "Failed to get audio devices";
+
+      setError(message);
+      console.error("Error getting audio devices:", message);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    loadDevicesWithoutPermission();
+  }, [loadDevicesWithoutPermission]);
+
+  useEffect(() => {
+    const handleDeviceChange = () => {
+      if (hasPermission) {
+        loadDevicesWithPermission();
+      } else {
+        loadDevicesWithoutPermission();
+      }
+    };
+
+    navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+
+    return () => {
+      navigator.mediaDevices.removeEventListener("devicechange", handleDeviceChange);
+    };
+  }, [hasPermission, loadDevicesWithPermission, loadDevicesWithoutPermission]);
+
+  return {
+    devices,
+    error,
+    hasPermission,
+    loadDevices: loadDevicesWithPermission,
+    loading,
+  };
+};
+
+export type MicSelectorProps = ComponentProps<typeof Popover> & {
+  defaultValue?: string;
+  value?: string | undefined;
+  onValueChange?: (value: string | undefined) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const MicSelector = ({
+  defaultValue,
+  value: controlledValue,
+  onValueChange: controlledOnValueChange,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  ...props
+}: MicSelectorProps) => {
+  const [value, onValueChange] = useControllableState<string | undefined>({
+    defaultProp: defaultValue,
+    onChange: controlledOnValueChange,
+    prop: controlledValue,
+  });
+  const [open, onOpenChange] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: controlledOnOpenChange,
+    prop: controlledOpen,
+  });
+  const [width, setWidth] = useState(200);
+  const { devices, loading, hasPermission, loadDevices } = useAudioDevices();
+
+  useEffect(() => {
+    if (open && !hasPermission && !loading) {
+      loadDevices();
+    }
+  }, [open, hasPermission, loading, loadDevices]);
+
+  const contextValue = useMemo(
+    () => ({
+      data: devices,
+      onOpenChange,
+      onValueChange,
+      open,
+      setWidth,
+      value,
+      width,
+    }),
+    [devices, onOpenChange, onValueChange, open, setWidth, value, width],
+  );
+
+  return (
+    <MicSelectorContext.Provider value={contextValue}>
+      <Popover {...props} onOpenChange={onOpenChange} open={open} />
+    </MicSelectorContext.Provider>
+  );
+};
+
+export type MicSelectorTriggerProps = ComponentProps<typeof Button>;
+
+export const MicSelectorTrigger = ({ children, ...props }: MicSelectorTriggerProps) => {
+  const { setWidth } = useContext(MicSelectorContext);
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    // Create a ResizeObserver to detect width changes
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = (entry.target as HTMLElement).offsetWidth;
+        if (newWidth) {
+          setWidth?.(newWidth);
+        }
+      }
+    });
+
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+
+    // Clean up the observer when component unmounts
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [setWidth]);
+
+  return (
+    <PopoverTrigger asChild>
+      <Button variant="outline" {...props} ref={ref}>
+        {children}
+        <ChevronsUpDownIcon className="shrink-0 text-muted-foreground" size={16} />
+      </Button>
+    </PopoverTrigger>
+  );
+};
+
+export type MicSelectorContentProps = ComponentProps<typeof Command> & {
+  popoverOptions?: ComponentProps<typeof PopoverContent>;
+};
+
+export const MicSelectorContent = ({
+  className,
+  popoverOptions,
+  ...props
+}: MicSelectorContentProps) => {
+  const { width, onValueChange, value } = useContext(MicSelectorContext);
+
+  return (
+    <PopoverContent className={cn("p-0", className)} style={{ width }} {...popoverOptions}>
+      <Command onValueChange={onValueChange} value={value} {...props} />
+    </PopoverContent>
+  );
+};
+
+export type MicSelectorInputProps = ComponentProps<typeof CommandInput> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+
+export const MicSelectorInput = ({ ...props }: MicSelectorInputProps) => {
+  const { t } = useLocale();
+  return <CommandInput placeholder={t("ai.micSelector.searchPlaceholder")} {...props} />;
+};
+
+export type MicSelectorListProps = Omit<ComponentProps<typeof CommandList>, "children"> & {
+  children: (devices: MediaDeviceInfo[]) => ReactNode;
+};
+
+export const MicSelectorList = ({ children, ...props }: MicSelectorListProps) => {
+  const { data } = useContext(MicSelectorContext);
+
+  return <CommandList {...props}>{children(data)}</CommandList>;
+};
+
+export type MicSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+
+export const MicSelectorEmpty = ({
+  children = "No microphone found.",
+  ...props
+}: MicSelectorEmptyProps) => <CommandEmpty {...props}>{children}</CommandEmpty>;
+
+export type MicSelectorItemProps = ComponentProps<typeof CommandItem>;
+
+export const MicSelectorItem = (props: MicSelectorItemProps) => {
+  const { onValueChange, onOpenChange } = useContext(MicSelectorContext);
+
+  const handleSelect = useCallback(
+    (currentValue: string) => {
+      onValueChange?.(currentValue);
+      onOpenChange?.(false);
+    },
+    [onValueChange, onOpenChange],
+  );
+
+  return <CommandItem onSelect={handleSelect} {...props} />;
+};
+
+export type MicSelectorLabelProps = ComponentProps<"span"> & {
+  device: MediaDeviceInfo;
+};
+
+export const MicSelectorLabel = ({ device, className, ...props }: MicSelectorLabelProps) => {
+  const matches = device.label.match(deviceIdRegex);
+
+  if (!matches) {
+    return (
+      <span className={className} {...props}>
+        {device.label}
+      </span>
+    );
+  }
+
+  const [, deviceId] = matches;
+  const name = device.label.replace(deviceIdRegex, "");
+
+  return (
+    <span className={className} {...props}>
+      <span>{name}</span>
+      <span className="text-muted-foreground"> ({deviceId})</span>
+    </span>
+  );
+};
+
+export type MicSelectorValueProps = ComponentProps<"span">;
+
+export const MicSelectorValue = ({ className, ...props }: MicSelectorValueProps) => {
+  const { data, value } = useContext(MicSelectorContext);
+  const currentDevice = data.find((d) => d.deviceId === value);
+
+  if (!currentDevice) {
+    return (
+      <span className={cn("flex-1 text-start", className)} {...props}>
+        Select microphone...
+      </span>
+    );
+  }
+
+  return (
+    <MicSelectorLabel
+      className={cn("flex-1 text-start", className)}
+      device={currentDevice}
+      {...props}
+    />
+  );
+};

package/src/microcopy.test.tsx

@@ -0,0 +1,123 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { LocaleProvider } from "@elabs-ai/components-ui";
+
+import { Composer } from "./composer";
+import { InlineCitationCard, InlineCitationCarouselNext } from "./inline-citation";
+import { Message, MessageBranch, MessageBranchNext } from "./message";
+import { PromptInput, PromptInputBody, PromptInputTextarea } from "./prompt-input";
+
+/**
+ * The locale seam is only real if microcopy can actually be overridden. These
+ * tests assert both halves of the contract: the shipped English defaults are
+ * byte-identical to what was hardcoded before (so adoption is non-breaking), and
+ * a `LocaleProvider` can replace them.
+ */
+
+const de = {
+  "ai.composer.placeholder": "Frag mich etwas…",
+  "ai.message.nextBranch": "Nächster Zweig",
+  "ai.promptInput.placeholder": "Was möchtest du wissen?",
+  "ai.promptInput.uploadFiles": "Dateien hochladen",
+  next: "Weiter",
+};
+
+describe("microcopy — English defaults are unchanged", () => {
+  it("PromptInput keeps its shipped placeholder and upload label", () => {
+    render(
+      <PromptInput onSubmit={() => undefined}>
+        <PromptInputBody>
+          <PromptInputTextarea />
+        </PromptInputBody>
+      </PromptInput>,
+    );
+    expect(screen.getByPlaceholderText("What would you like to know?")).toBeInTheDocument();
+    expect(screen.getByLabelText("Upload files")).toBeInTheDocument();
+  });
+
+  it("Composer keeps its shipped placeholder", () => {
+    render(<Composer />);
+    expect(screen.getByPlaceholderText("Ask me anything…")).toBeInTheDocument();
+  });
+
+  it("message branch controls keep their shipped labels", () => {
+    render(
+      <MessageBranch>
+        <MessageBranchNext />
+      </MessageBranch>,
+    );
+    expect(screen.getByRole("button", { name: "Next branch" })).toBeInTheDocument();
+  });
+});
+
+describe("microcopy — a LocaleProvider overrides it", () => {
+  it("translates the PromptInput placeholder and upload label", () => {
+    render(
+      <LocaleProvider locale="de-DE" messages={de}>
+        <PromptInput onSubmit={() => undefined}>
+          <PromptInputBody>
+            <PromptInputTextarea />
+          </PromptInputBody>
+        </PromptInput>
+      </LocaleProvider>,
+    );
+    expect(screen.getByPlaceholderText("Was möchtest du wissen?")).toBeInTheDocument();
+    expect(screen.getByLabelText("Dateien hochladen")).toBeInTheDocument();
+  });
+
+  it("translates the Composer placeholder", () => {
+    render(
+      <LocaleProvider locale="de-DE" messages={de}>
+        <Composer />
+      </LocaleProvider>,
+    );
+    expect(screen.getByPlaceholderText("Frag mich etwas…")).toBeInTheDocument();
+  });
+
+  it("translates a namespaced @elabs-ai/components-ai aria-label", () => {
+    render(
+      <LocaleProvider locale="de-DE" messages={de}>
+        <MessageBranch>
+          <MessageBranchNext />
+        </MessageBranch>
+      </LocaleProvider>,
+    );
+    expect(screen.getByRole("button", { name: "Nächster Zweig" })).toBeInTheDocument();
+  });
+
+  it("reuses the GENERIC keys where they already existed", () => {
+    // inline-citation hardcoded "Next" while DEFAULT_MESSAGES already had a
+    // `next` key — the double gap the audit found. One override now covers both.
+    render(
+      <LocaleProvider locale="de-DE" messages={de}>
+        <InlineCitationCard>
+          <InlineCitationCarouselNext />
+        </InlineCitationCard>
+      </LocaleProvider>,
+    );
+    expect(screen.getByRole("button", { name: "Weiter" })).toBeInTheDocument();
+  });
+
+  it("an explicit prop still beats the locale bundle", () => {
+    render(
+      <LocaleProvider locale="de-DE" messages={de}>
+        <Composer placeholder="Explicit wins" />
+      </LocaleProvider>,
+    );
+    expect(screen.getByPlaceholderText("Explicit wins")).toBeInTheDocument();
+  });
+});
+
+describe("microcopy — no provider is required", () => {
+  it("renders English with no LocaleProvider ancestor at all", () => {
+    // useLocale is provider-optional, which is what makes adoption non-breaking.
+    render(
+      <Message from="assistant">
+        <MessageBranch>
+          <MessageBranchNext />
+        </MessageBranch>
+      </Message>,
+    );
+    expect(screen.getByRole("button", { name: "Next branch" })).toBeInTheDocument();
+  });
+});

package/src/model-selector.stories.tsx

@@ -0,0 +1,73 @@
+/**
+ * ModelSelector — a command-palette model picker.
+ *
+ * `ModelSelectorLogo` fetches provider marks from a **remote origin**
+ * (`models.dev`) by default, so a restrictive `img-src` blocks them. Pass `src`
+ * to self-host, or `fallback` to control what a blocked load renders — it is
+ * never a broken-image glyph. See `docs/CSP-AND-NETWORK.md`.
+ */
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { ModelSelectorLogo } from "./model-selector";
+
+const meta = {
+  title: "AI/ModelSelectorLogo",
+  component: ModelSelectorLogo,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Provider logo for the model selector. Defaults to fetching from models.dev; pass `src` for a self-hosted asset and `fallback` for the blocked/offline case. A failed load renders a neutral glyph, never a broken image.",
+      },
+    },
+  },
+  args: { provider: "anthropic" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ModelSelectorLogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The blocked / offline state — the DEFAULT story on purpose, so neither CI nor
+ * the visual sweep depends on a third-party origin. `src` cannot resolve, so the
+ * neutral fallback glyph renders.
+ */
+export const Default: Story = {
+  args: { src: "about:blank#logo-offline" },
+};
+
+/** A caller-supplied fallback instead of the built-in glyph. */
+export const CustomFallback: Story = {
+  args: {
+    src: "about:blank#logo-offline",
+    fallback: <span className="text-meta text-muted-foreground">AI</span>,
+  },
+};
+
+/** A self-hosted (inline data-URI) logo — the CSP-safe path. */
+export const SelfHosted: Story = {
+  args: {
+    src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='%23888'/%3E%3C/svg%3E",
+  },
+};
+
+/**
+ * Live logos from the default remote origin.
+ *
+ * ⚠️ The only story here that reaches the network (`models.dev`). Each falls
+ * back to the neutral glyph if blocked.
+ */
+export const LiveRemoteLogos: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      {(["anthropic", "openai", "google", "mistral"] as const).map((provider) => (
+        <figure className="flex flex-col items-center gap-2" key={provider}>
+          <ModelSelectorLogo provider={provider} />
+          <figcaption className="text-meta text-muted-foreground">{provider}</figcaption>
+        </figure>
+      ))}
+    </div>
+  ),
+};

package/src/model-selector.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { MODEL_SELECTOR_LOGO_BASE_URL, ModelSelectorLogo } from "./model-selector";
+
+describe("ModelSelectorLogo — remote origin escape hatches", () => {
+  it("defaults to the models.dev logo for the provider", () => {
+    render(<ModelSelectorLogo provider="anthropic" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).toHaveAttribute(
+      "src",
+      `${MODEL_SELECTOR_LOGO_BASE_URL}/anthropic.svg`,
+    );
+  });
+
+  it("lets a caller override src for a self-hosted asset", () => {
+    // The old props type did `Omit<…, "src">` AND spread props before `src=`, so
+    // a self-hosting consumer had no way to win. Both are fixed.
+    render(<ModelSelectorLogo provider="anthropic" src="/local/anthropic.svg" />);
+    expect(screen.getByRole("img", { name: "anthropic logo" })).toHaveAttribute(
+      "src",
+      "/local/anthropic.svg",
+    );
+  });
+
+  it("renders a neutral glyph instead of a broken image when the load fails", () => {
+    render(<ModelSelectorLogo provider="anthropic" />);
+    fireEvent.error(screen.getByRole("img", { name: "anthropic logo" }));
+
+    const fallback = screen.getByRole("img", { name: "anthropic logo" });
+    expect(fallback.tagName.toLowerCase()).toBe("svg");
+    expect(fallback).not.toHaveAttribute("src");
+  });
+
+  it("renders a caller-supplied fallback when provided", () => {
+    render(<ModelSelectorLogo provider="anthropic" fallback={<span data-testid="fb">AI</span>} />);
+    fireEvent.error(screen.getByRole("img", { name: "anthropic logo" }));
+    expect(screen.getByTestId("fb")).toBeInTheDocument();
+  });
+
+  it("still calls a caller's onError", () => {
+    const onError = vi.fn();
+    render(<ModelSelectorLogo provider="anthropic" onError={onError} />);
+    fireEvent.error(screen.getByRole("img", { name: "anthropic logo" }));
+    expect(onError).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps an accessible name in both states", () => {
+    const { rerender } = render(<ModelSelectorLogo provider="openai" />);
+    expect(screen.getByRole("img", { name: "openai logo" })).toBeInTheDocument();
+
+    fireEvent.error(screen.getByRole("img", { name: "openai logo" }));
+    rerender(<ModelSelectorLogo provider="openai" />);
+    expect(screen.getByRole("img", { name: "openai logo" })).toBeInTheDocument();
+  });
+});