@elabs-ai/components-ai 4.0.0

package/src/sources.test.tsx

@@ -0,0 +1,129 @@
+/**
+ * sources.test.tsx — smoke + link-safety lock for the grounding footer (#59).
+ *
+ * `Sources` is how an answer shows what it was grounded in, so the assertions
+ * that matter are about the LINKS: every source is a real `<a href>` (not a
+ * div-as-link), and every one carries `rel="noopener noreferrer"` alongside
+ * `target="_blank"` — these open model-supplied URLs, so a missing `noopener`
+ * is a reverse-tabnabbing hole, not a lint nit.
+ *
+ * The collapsible starts closed, so each test opens it the way a user would.
+ */
+import { describe, expect, it } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Source, SourceList, Sources, SourcesContent, SourcesTrigger } from "./sources";
+
+const sources = [
+  { href: "https://example.com/a", title: "Deploy log" },
+  { href: "https://example.com/b", title: "Incident report" },
+];
+
+/** Open the collapsible the way a user does. */
+function open(name: RegExp) {
+  fireEvent.click(screen.getByRole("button", { name }));
+}
+
+describe("Sources — trigger", () => {
+  it("summarises the count on the trigger", () => {
+    render(
+      <Sources>
+        <SourcesTrigger count={2} />
+        <SourcesContent>
+          <Source href="https://example.com/a" title="Deploy log" />
+        </SourcesContent>
+      </Sources>,
+    );
+    expect(screen.getByRole("button", { name: /Used 2 sources/ })).toBeInTheDocument();
+  });
+
+  it("keeps the list collapsed until the trigger is used", () => {
+    render(
+      <Sources>
+        <SourcesTrigger count={1} />
+        <SourcesContent>
+          <Source href="https://example.com/a" title="Deploy log" />
+        </SourcesContent>
+      </Sources>,
+    );
+    expect(screen.queryByRole("link", { name: "Deploy log" })).toBeNull();
+    open(/Used 1 sources/);
+    expect(screen.getByRole("link", { name: "Deploy log" })).toBeInTheDocument();
+  });
+});
+
+describe("Source — link safety", () => {
+  it("renders a real anchor carrying the href", () => {
+    render(<Source href="https://example.com/a" title="Deploy log" />);
+    expect(screen.getByRole("link", { name: "Deploy log" })).toHaveAttribute(
+      "href",
+      "https://example.com/a",
+    );
+  });
+
+  it("opens in a new tab WITH noopener noreferrer (these are model-supplied URLs)", () => {
+    render(<Source href="https://example.com/a" title="Deploy log" />);
+    const link = screen.getByRole("link", { name: "Deploy log" });
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link.getAttribute("rel")).toContain("noopener");
+    expect(link.getAttribute("rel")).toContain("noreferrer");
+  });
+
+  it("lets children replace the default icon + title anatomy", () => {
+    render(
+      <Source href="https://example.com/a">
+        <span>Custom label</span>
+      </Source>,
+    );
+    expect(screen.getByRole("link", { name: "Custom label" })).toBeInTheDocument();
+  });
+});
+
+describe("Sources — semantic token", () => {
+  it("uses text-success-text for grounded concept and does NOT use text-primary", () => {
+    const { container } = render(
+      <Sources>
+        <SourcesTrigger count={1} />
+        <SourcesContent>
+          <Source href="https://example.com/a" title="Deploy log" />
+        </SourcesContent>
+      </Sources>,
+    );
+    const root =
+      container.querySelector('[data-slot="sources"]') ||
+      (container.firstElementChild as HTMLElement);
+    expect(root.className).toContain("text-success-text");
+    expect(root.className).not.toMatch(/text-primary/);
+  });
+});
+
+describe("SourceList — the per-answer grounding footer", () => {
+  it("pluralises the count in the trigger", () => {
+    const { unmount } = render(<SourceList sources={sources} />);
+    expect(screen.getByRole("button", { name: /Grounded in 2 sources/ })).toBeInTheDocument();
+    unmount();
+    render(<SourceList sources={[sources[0]!]} />);
+    expect(screen.getByRole("button", { name: /Grounded in 1 source$/ })).toBeInTheDocument();
+  });
+
+  it("renders one accessible link per source once expanded", () => {
+    render(<SourceList sources={sources} />);
+    open(/Grounded in 2 sources/);
+    expect(screen.getByRole("link", { name: "Deploy log" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Incident report" })).toBeInTheDocument();
+  });
+
+  it("appends extra children after the named list (the escape hatch)", () => {
+    render(
+      <SourceList sources={sources}>
+        <span>and 3 internal documents</span>
+      </SourceList>,
+    );
+    open(/Grounded in 2 sources/);
+    expect(screen.getByText("and 3 internal documents")).toBeInTheDocument();
+  });
+
+  it("still renders a usable trigger with zero sources (no broken UI for [])", () => {
+    render(<SourceList sources={[]} />);
+    expect(screen.getByRole("button", { name: /Grounded in 0 sources/ })).toBeInTheDocument();
+  });
+});

package/src/sources.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { BookIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
+export type SourcesProps = ComponentProps<"div">;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+  <Collapsible className={cn("not-prose mb-4 text-success-text text-meta", className)} {...props} />
+);
+
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+};
+
+export const SourcesTrigger = ({ className, count, children, ...props }: SourcesTriggerProps) => (
+  <CollapsibleTrigger className={cn("group flex items-center gap-2", className)} {...props}>
+    {children ?? (
+      <>
+        <p className="font-medium">Used {count} sources</p>
+        <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+      </>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SourcesContent = ({ className, ...props }: SourcesContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "mt-3 flex w-fit flex-col gap-2",
+      "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}
+  />
+);
+
+export type SourceProps = ComponentProps<"a">;
+
+export const Source = ({ href, title, children, className, ...props }: SourceProps) => (
+  <a
+    className={cn("flex items-center gap-2", className)}
+    href={href}
+    rel="noopener noreferrer"
+    target="_blank"
+    {...props}
+  >
+    {children ?? (
+      <>
+        <BookIcon className="h-4 w-4" />
+        <span className="block text-caption font-medium">{title}</span>
+      </>
+    )}
+  </a>
+);
+
+export interface SourceListItem {
+  href: string;
+  title?: string;
+}
+
+export type SourceListProps = Omit<ComponentProps<typeof Sources>, "children"> & {
+  /** The grounding sources, rendered as the named list. */
+  sources: SourceListItem[];
+  /** Extra rows appended after the named list (escape hatch). */
+  children?: ReactNode;
+};
+
+/**
+ * SourceList — the per-answer grounding footer (research 11 §B.4): a green
+ * "Grounded in N sources" header + the named source list. Sugar over the fixed
+ * `Sources`/`Source` primitives, reused by the context panel (research 09).
+ */
+export const SourceList = ({ sources, children, ...props }: SourceListProps) => (
+  <Sources {...props}>
+    <SourcesTrigger count={sources.length}>
+      <p className="font-medium">
+        Grounded in {sources.length} {sources.length === 1 ? "source" : "sources"}
+      </p>
+      <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+    </SourcesTrigger>
+    <SourcesContent>
+      {sources.map((source) => (
+        <Source href={source.href} key={source.href} title={source.title} />
+      ))}
+      {children}
+    </SourcesContent>
+  </Sources>
+);

package/src/speech-input.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import { Button } from "@elabs-ai/components-ui";
+import { Spinner } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { MicIcon, SquareIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface SpeechRecognition extends EventTarget {
+  continuous: boolean;
+  interimResults: boolean;
+  lang: string;
+  start(): void;
+  stop(): void;
+  onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
+  onend: ((this: SpeechRecognition, ev: Event) => void) | null;
+  onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void) | null;
+  onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => void) | null;
+}
+
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList;
+  resultIndex: number;
+}
+
+interface SpeechRecognitionResultList {
+  readonly length: number;
+  item(index: number): SpeechRecognitionResult;
+  [index: number]: SpeechRecognitionResult;
+}
+
+interface SpeechRecognitionResult {
+  readonly length: number;
+  item(index: number): SpeechRecognitionAlternative;
+  [index: number]: SpeechRecognitionAlternative;
+  isFinal: boolean;
+}
+
+interface SpeechRecognitionAlternative {
+  transcript: string;
+  confidence: number;
+}
+
+interface SpeechRecognitionErrorEvent extends Event {
+  error: string;
+}
+
+declare global {
+  interface Window {
+    SpeechRecognition: new () => SpeechRecognition;
+    webkitSpeechRecognition: new () => SpeechRecognition;
+  }
+}
+
+type SpeechInputMode = "speech-recognition" | "media-recorder" | "none";
+
+export type SpeechInputProps = ComponentProps<typeof Button> & {
+  onTranscriptionChange?: (text: string) => void;
+  /**
+   * Callback for when audio is recorded using MediaRecorder fallback.
+   * This is called in browsers that don't support the Web Speech API (Firefox, Safari).
+   * The callback receives an audio Blob that should be sent to a transcription service.
+   * Return the transcribed text, which will be passed to onTranscriptionChange.
+   */
+  onAudioRecorded?: (audioBlob: Blob) => Promise<string>;
+  lang?: string;
+};
+
+const detectSpeechInputMode = (): SpeechInputMode => {
+  if (typeof window === "undefined") {
+    return "none";
+  }
+
+  if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
+    return "speech-recognition";
+  }
+
+  if ("MediaRecorder" in window && "mediaDevices" in navigator) {
+    return "media-recorder";
+  }
+
+  return "none";
+};
+
+export const SpeechInput = ({
+  className,
+  onTranscriptionChange,
+  onAudioRecorded,
+  lang = "en-US",
+  ...props
+}: SpeechInputProps) => {
+  const [isListening, setIsListening] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [mode] = useState<SpeechInputMode>(detectSpeechInputMode);
+  const [isRecognitionReady, setIsRecognitionReady] = useState(false);
+  const recognitionRef = useRef<SpeechRecognition | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const onTranscriptionChangeRef =
+    useRef<SpeechInputProps["onTranscriptionChange"]>(onTranscriptionChange);
+  const onAudioRecordedRef = useRef<SpeechInputProps["onAudioRecorded"]>(onAudioRecorded);
+
+  // Keep refs in sync
+  onTranscriptionChangeRef.current = onTranscriptionChange;
+  onAudioRecordedRef.current = onAudioRecorded;
+
+  // Initialize Speech Recognition when mode is speech-recognition
+  useEffect(() => {
+    if (mode !== "speech-recognition") {
+      return;
+    }
+
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const speechRecognition = new SpeechRecognition();
+
+    speechRecognition.continuous = true;
+    speechRecognition.interimResults = true;
+    speechRecognition.lang = lang;
+
+    const handleStart = () => {
+      setIsListening(true);
+    };
+
+    const handleEnd = () => {
+      setIsListening(false);
+    };
+
+    const handleResult = (event: Event) => {
+      const speechEvent = event as SpeechRecognitionEvent;
+      let finalTranscript = "";
+
+      for (let i = speechEvent.resultIndex; i < speechEvent.results.length; i += 1) {
+        const result = speechEvent.results[i];
+        if (result?.isFinal) {
+          finalTranscript += result[0]?.transcript ?? "";
+        }
+      }
+
+      if (finalTranscript) {
+        onTranscriptionChangeRef.current?.(finalTranscript);
+      }
+    };
+
+    const handleError = () => {
+      setIsListening(false);
+    };
+
+    speechRecognition.addEventListener("start", handleStart);
+    speechRecognition.addEventListener("end", handleEnd);
+    speechRecognition.addEventListener("result", handleResult);
+    speechRecognition.addEventListener("error", handleError);
+
+    recognitionRef.current = speechRecognition;
+    setIsRecognitionReady(true);
+
+    return () => {
+      speechRecognition.removeEventListener("start", handleStart);
+      speechRecognition.removeEventListener("end", handleEnd);
+      speechRecognition.removeEventListener("result", handleResult);
+      speechRecognition.removeEventListener("error", handleError);
+      speechRecognition.stop();
+      recognitionRef.current = null;
+      setIsRecognitionReady(false);
+    };
+  }, [mode, lang]);
+
+  // Cleanup MediaRecorder and stream on unmount
+  useEffect(
+    () => () => {
+      if (mediaRecorderRef.current?.state === "recording") {
+        mediaRecorderRef.current.stop();
+      }
+      if (streamRef.current) {
+        for (const track of streamRef.current.getTracks()) {
+          track.stop();
+        }
+      }
+    },
+    [],
+  );
+
+  // Start MediaRecorder recording
+  const startMediaRecorder = useCallback(async () => {
+    if (!onAudioRecordedRef.current) {
+      return;
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const mediaRecorder = new MediaRecorder(stream);
+      audioChunksRef.current = [];
+
+      const handleDataAvailable = (event: BlobEvent) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+
+      const handleStop = async () => {
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+
+        const audioBlob = new Blob(audioChunksRef.current, {
+          type: "audio/webm",
+        });
+
+        if (audioBlob.size > 0 && onAudioRecordedRef.current) {
+          setIsProcessing(true);
+          try {
+            const transcript = await onAudioRecordedRef.current(audioBlob);
+            if (transcript) {
+              onTranscriptionChangeRef.current?.(transcript);
+            }
+          } catch {
+            // Error handling delegated to the onAudioRecorded caller
+          } finally {
+            setIsProcessing(false);
+          }
+        }
+      };
+
+      const handleError = () => {
+        setIsListening(false);
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+      };
+
+      mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
+      mediaRecorder.addEventListener("stop", handleStop);
+      mediaRecorder.addEventListener("error", handleError);
+
+      mediaRecorderRef.current = mediaRecorder;
+      mediaRecorder.start();
+      setIsListening(true);
+    } catch {
+      setIsListening(false);
+    }
+  }, []);
+
+  // Stop MediaRecorder recording
+  const stopMediaRecorder = useCallback(() => {
+    if (mediaRecorderRef.current?.state === "recording") {
+      mediaRecorderRef.current.stop();
+    }
+    setIsListening(false);
+  }, []);
+
+  const toggleListening = useCallback(() => {
+    if (mode === "speech-recognition" && recognitionRef.current) {
+      if (isListening) {
+        recognitionRef.current.stop();
+      } else {
+        recognitionRef.current.start();
+      }
+    } else if (mode === "media-recorder") {
+      if (isListening) {
+        stopMediaRecorder();
+      } else {
+        startMediaRecorder();
+      }
+    }
+  }, [mode, isListening, startMediaRecorder, stopMediaRecorder]);
+
+  // Determine if button should be disabled
+  const isDisabled =
+    mode === "none" ||
+    (mode === "speech-recognition" && !isRecognitionReady) ||
+    (mode === "media-recorder" && !onAudioRecorded) ||
+    isProcessing;
+
+  return (
+    <div className="relative inline-flex items-center justify-center">
+      {/* Animated pulse rings */}
+      {isListening &&
+        [0, 1, 2].map((index) => (
+          <div
+            className="absolute inset-0 animate-ping rounded-full border-2 border-red-400/30"
+            key={index}
+            style={{
+              animationDelay: `${index * 0.3}s`,
+              animationDuration: "2s",
+            }}
+          />
+        ))}
+
+      {/* Main record button */}
+      <Button
+        className={cn(
+          "relative z-10 rounded-full transition-colors duration-slow ease-standard motion-reduce:transition-none",
+          isListening
+            ? "bg-destructive text-white hover:bg-destructive/80 hover:text-white"
+            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
+          className,
+        )}
+        disabled={isDisabled}
+        onClick={toggleListening}
+        {...props}
+      >
+        {isProcessing && <Spinner />}
+        {!isProcessing && isListening && <SquareIcon className="size-4" />}
+        {!(isProcessing || isListening) && <MicIcon className="size-4" />}
+      </Button>
+    </div>
+  );
+};