@elabs-ai/components-ai 4.2.0 → 5.0.0

package/dist/chunk-WYTZVSGK.js

@@ -0,0 +1,245 @@
+"use client";
+
+// src/mic-selector.tsx
+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 {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var deviceIdRegex = /\(([\da-fA-F]{4}:[\da-fA-F]{4})\)$/;
+var MicSelectorContext = createContext({
+  data: [],
+  onOpenChange: void 0,
+  onValueChange: void 0,
+  open: false,
+  setWidth: void 0,
+  value: void 0,
+  width: 200
+});
+var useAudioDevices = () => {
+  const [devices, setDevices] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(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
+  };
+};
+var MicSelector = ({
+  defaultValue,
+  value: controlledValue,
+  onValueChange: controlledOnValueChange,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  ...props
+}) => {
+  const [value, onValueChange] = useControllableState({
+    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 /* @__PURE__ */ jsx(MicSelectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Popover, { ...props, onOpenChange, open }) });
+};
+var MicSelectorTrigger = ({ children, ...props }) => {
+  const { setWidth } = useContext(MicSelectorContext);
+  const ref = useRef(null);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.target.offsetWidth;
+        if (newWidth) {
+          setWidth?.(newWidth);
+        }
+      }
+    });
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [setWidth]);
+  return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", ...props, ref, children: [
+    children,
+    /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "shrink-0 text-muted-foreground", size: 16 })
+  ] }) });
+};
+var MicSelectorContent = ({
+  className,
+  popoverOptions,
+  ...props
+}) => {
+  const { width, onValueChange, value } = useContext(MicSelectorContext);
+  return /* @__PURE__ */ jsx(PopoverContent, { className: cn("p-0", className), style: { width }, ...popoverOptions, children: /* @__PURE__ */ jsx(Command, { onValueChange, value, ...props }) });
+};
+var MicSelectorInput = ({ ...props }) => {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsx(CommandInput, { placeholder: t("ai.micSelector.searchPlaceholder"), ...props });
+};
+var MicSelectorList = ({ children, ...props }) => {
+  const { data } = useContext(MicSelectorContext);
+  return /* @__PURE__ */ jsx(CommandList, { ...props, children: children(data) });
+};
+var MicSelectorEmpty = ({
+  children = "No microphone found.",
+  ...props
+}) => /* @__PURE__ */ jsx(CommandEmpty, { ...props, children });
+var MicSelectorItem = (props) => {
+  const { onValueChange, onOpenChange } = useContext(MicSelectorContext);
+  const handleSelect = useCallback(
+    (currentValue) => {
+      onValueChange?.(currentValue);
+      onOpenChange?.(false);
+    },
+    [onValueChange, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(CommandItem, { onSelect: handleSelect, ...props });
+};
+var MicSelectorLabel = ({ device, className, ...props }) => {
+  const matches = device.label.match(deviceIdRegex);
+  if (!matches) {
+    return /* @__PURE__ */ jsx("span", { className, ...props, children: device.label });
+  }
+  const [, deviceId] = matches;
+  const name = device.label.replace(deviceIdRegex, "");
+  return /* @__PURE__ */ jsxs("span", { className, ...props, children: [
+    /* @__PURE__ */ jsx("span", { children: name }),
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      " (",
+      deviceId,
+      ")"
+    ] })
+  ] });
+};
+var MicSelectorValue = ({ className, ...props }) => {
+  const { data, value } = useContext(MicSelectorContext);
+  const currentDevice = data.find((d) => d.deviceId === value);
+  if (!currentDevice) {
+    return /* @__PURE__ */ jsx("span", { className: cn("flex-1 text-start", className), ...props, children: "Select microphone..." });
+  }
+  return /* @__PURE__ */ jsx(
+    MicSelectorLabel,
+    {
+      className: cn("flex-1 text-start", className),
+      device: currentDevice,
+      ...props
+    }
+  );
+};
+
+export {
+  useAudioDevices,
+  MicSelector,
+  MicSelectorTrigger,
+  MicSelectorContent,
+  MicSelectorInput,
+  MicSelectorList,
+  MicSelectorEmpty,
+  MicSelectorItem,
+  MicSelectorLabel,
+  MicSelectorValue
+};
+//# sourceMappingURL=chunk-WYTZVSGK.js.map

package/dist/chunk-WYTZVSGK.js.map

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

package/dist/chunk-X47QMM6K.js

@@ -0,0 +1,187 @@
+"use client";
+import {
+  Shimmer
+} from "./chunk-3YPT3V7L.js";
+import {
+  getStreamdownPluginsKey,
+  useStreamdownMermaidOptions,
+  useStreamdownPlugins,
+  useStreamdownTranslations
+} from "./chunk-PQBF6ZIQ.js";
+
+// src/reasoning.tsx
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useLocale
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Streamdown } from "streamdown";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ReasoningContext = createContext(null);
+var useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+var AUTO_CLOSE_DELAY = 1e3;
+var MS_IN_S = 1e3;
+var Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }) => {
+    const resolvedDefaultOpen = defaultOpen ?? isStreaming;
+    const isExplicitlyClosed = defaultOpen === false;
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: resolvedDefaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const [duration, setDuration] = useControllableState({
+      defaultProp: void 0,
+      prop: durationProp
+    });
+    const hasEverStreamedRef = useRef(isStreaming);
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const startTimeRef = useRef(null);
+    useEffect(() => {
+      if (isStreaming) {
+        hasEverStreamedRef.current = true;
+        if (startTimeRef.current === null) {
+          startTimeRef.current = Date.now();
+        }
+      } else if (startTimeRef.current !== null) {
+        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+        startTimeRef.current = null;
+      }
+    }, [isStreaming, setDuration]);
+    useEffect(() => {
+      if (isStreaming && !isOpen && !isExplicitlyClosed) {
+        setIsOpen(true);
+      }
+    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+    useEffect(() => {
+      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
+    const handleOpenChange = useCallback(
+      (newOpen) => {
+        setIsOpen(newOpen);
+      },
+      [setIsOpen]
+    );
+    const contextValue = useMemo(
+      () => ({ duration, isOpen, isStreaming, setIsOpen }),
+      [duration, isOpen, isStreaming, setIsOpen]
+    );
+    return /* @__PURE__ */ jsx(ReasoningContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      Collapsible,
+      {
+        className: cn("not-prose mb-4", className),
+        onOpenChange: handleOpenChange,
+        open: isOpen,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var defaultGetThinkingMessage = (isStreaming, duration, t) => {
+  if (isStreaming || duration === 0) {
+    return /* @__PURE__ */ jsx(Shimmer, { duration: 1, children: t("ai.reasoning.thinking") });
+  }
+  if (duration === void 0) {
+    return /* @__PURE__ */ jsx("p", { children: t("ai.reasoning.thoughtDefault") });
+  }
+  return /* @__PURE__ */ jsx("p", { children: t("ai.reasoning.thoughtForDuration", { duration }) });
+};
+var ReasoningTrigger = memo(
+  ({ className, children, getThinkingMessage, ...props }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+    const { t } = useLocale();
+    return /* @__PURE__ */ jsx(
+      CollapsibleTrigger,
+      {
+        className: cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-body transition-colors hover:text-foreground focus-ring",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(BrainIcon, { className: "size-4" }),
+          getThinkingMessage ? getThinkingMessage(isStreaming, duration) : defaultGetThinkingMessage(isStreaming, duration, t),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn("size-4 transition-transform", isOpen ? "rotate-180" : "rotate-0")
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+var ReasoningContent = memo(({ className, children, ...props }) => {
+  const translations = useStreamdownTranslations();
+  const plugins = useStreamdownPlugins(typeof children === "string" ? children : "");
+  const mermaidOptions = useStreamdownMermaidOptions();
+  return /* @__PURE__ */ jsx(
+    CollapsibleContent,
+    {
+      className: cn(
+        "mt-4 text-body",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
+        className
+      ),
+      ...props,
+      children: typeof children === "string" ? /* @__PURE__ */ jsx(
+        Streamdown,
+        {
+          plugins,
+          translations,
+          mermaid: mermaidOptions,
+          children
+        },
+        getStreamdownPluginsKey(plugins)
+      ) : children
+    }
+  );
+});
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";
+
+export {
+  useReasoning,
+  Reasoning,
+  ReasoningTrigger,
+  ReasoningContent
+};
+//# sourceMappingURL=chunk-X47QMM6K.js.map

package/dist/chunk-X47QMM6K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/reasoning.tsx"],"sourcesContent":["\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n  useLocale,\n} from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport {\n  getStreamdownPluginsKey,\n  useStreamdownMermaidOptions,\n  useStreamdownPlugins,\n  useStreamdownTranslations,\n} from \"./_streamdown-i18n\";\nimport { BrainIcon, ChevronDownIcon } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport {\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Streamdown } from \"streamdown\";\n\nimport { Shimmer } from \"./shimmer\";\n\ninterface ReasoningContextValue {\n  isStreaming: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  duration: number | undefined;\n}\n\nconst ReasoningContext = createContext<ReasoningContextValue | null>(null);\n\nexport const useReasoning = () => {\n  const context = useContext(ReasoningContext);\n  if (!context) {\n    throw new Error(\"Reasoning components must be used within Reasoning\");\n  }\n  return context;\n};\n\nexport type ReasoningProps = ComponentProps<typeof Collapsible> & {\n  isStreaming?: boolean;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  duration?: number;\n};\n\nconst AUTO_CLOSE_DELAY = 1000;\nconst MS_IN_S = 1000;\n\nexport const Reasoning = memo(\n  ({\n    className,\n    isStreaming = false,\n    open,\n    defaultOpen,\n    onOpenChange,\n    duration: durationProp,\n    children,\n    ...props\n  }: ReasoningProps) => {\n    const resolvedDefaultOpen = defaultOpen ?? isStreaming;\n    // Track if defaultOpen was explicitly set to false (to prevent auto-open)\n    const isExplicitlyClosed = defaultOpen === false;\n\n    const [isOpen, setIsOpen] = useControllableState<boolean>({\n      defaultProp: resolvedDefaultOpen,\n      onChange: onOpenChange,\n      prop: open,\n    });\n    const [duration, setDuration] = useControllableState<number | undefined>({\n      defaultProp: undefined,\n      prop: durationProp,\n    });\n\n    const hasEverStreamedRef = useRef(isStreaming);\n    const [hasAutoClosed, setHasAutoClosed] = useState(false);\n    const startTimeRef = useRef<number | null>(null);\n\n    // Track when streaming starts and compute duration\n    useEffect(() => {\n      if (isStreaming) {\n        hasEverStreamedRef.current = true;\n        if (startTimeRef.current === null) {\n          startTimeRef.current = Date.now();\n        }\n      } else if (startTimeRef.current !== null) {\n        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));\n        startTimeRef.current = null;\n      }\n    }, [isStreaming, setDuration]);\n\n    // Auto-open when streaming starts (unless explicitly closed)\n    useEffect(() => {\n      if (isStreaming && !isOpen && !isExplicitlyClosed) {\n        setIsOpen(true);\n      }\n    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);\n\n    // Auto-close when streaming ends (once only, and only if it ever streamed)\n    useEffect(() => {\n      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {\n        const timer = setTimeout(() => {\n          setIsOpen(false);\n          setHasAutoClosed(true);\n        }, AUTO_CLOSE_DELAY);\n\n        return () => clearTimeout(timer);\n      }\n    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);\n\n    const handleOpenChange = useCallback(\n      (newOpen: boolean) => {\n        setIsOpen(newOpen);\n      },\n      [setIsOpen],\n    );\n\n    const contextValue = useMemo(\n      () => ({ duration, isOpen, isStreaming, setIsOpen }),\n      [duration, isOpen, isStreaming, setIsOpen],\n    );\n\n    return (\n      <ReasoningContext.Provider value={contextValue}>\n        <Collapsible\n          className={cn(\"not-prose mb-4\", className)}\n          onOpenChange={handleOpenChange}\n          open={isOpen}\n          {...props}\n        >\n          {children}\n        </Collapsible>\n      </ReasoningContext.Provider>\n    );\n  },\n);\n\nexport type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {\n  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;\n};\n\nconst defaultGetThinkingMessage = (\n  isStreaming: boolean,\n  duration: number | undefined,\n  t: (key: string, vars?: Record<string, string | number>) => string,\n) => {\n  if (isStreaming || duration === 0) {\n    return <Shimmer duration={1}>{t(\"ai.reasoning.thinking\")}</Shimmer>;\n  }\n  if (duration === undefined) {\n    return <p>{t(\"ai.reasoning.thoughtDefault\")}</p>;\n  }\n  return <p>{t(\"ai.reasoning.thoughtForDuration\", { duration })}</p>;\n};\n\nexport const ReasoningTrigger = memo(\n  ({ className, children, getThinkingMessage, ...props }: ReasoningTriggerProps) => {\n    const { isStreaming, isOpen, duration } = useReasoning();\n    const { t } = useLocale();\n\n    return (\n      <CollapsibleTrigger\n        className={cn(\n          \"flex w-full items-center gap-2 text-muted-foreground text-body transition-colors hover:text-foreground focus-ring\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <BrainIcon className=\"size-4\" />\n            {getThinkingMessage\n              ? getThinkingMessage(isStreaming, duration)\n              : defaultGetThinkingMessage(isStreaming, duration, t)}\n            <ChevronDownIcon\n              className={cn(\"size-4 transition-transform\", isOpen ? \"rotate-180\" : \"rotate-0\")}\n            />\n          </>\n        )}\n      </CollapsibleTrigger>\n    );\n  },\n);\n\nexport type ReasoningContentProps = Omit<ComponentProps<typeof CollapsibleContent>, \"children\"> & {\n  /**\n   * The reasoning body.\n   *\n   * A **string** is rendered as streamed markdown (Streamdown) — the default for\n   * model reasoning text. Any other node renders **as-is**, so a structured live\n   * ledger (a timeline, per-step status) can live inside the disclosure without\n   * being handed to a markdown parser. Mirrors the `getThinkingMessage` /\n   * `children` override seam on `ReasoningTrigger`.\n   *\n   * Note an **array** of strings is not a `string` — `{[\"a\", \"b\"]}` renders raw.\n   * Pass one string if you want it parsed as markdown.\n   */\n  children: ReactNode;\n};\n\nexport const ReasoningContent = memo(({ className, children, ...props }: ReasoningContentProps) => {\n  // Streamdown's own chrome (code copy, table menus) reads the locale seam (#310).\n  const translations = useStreamdownTranslations();\n  // Brand-token-derived `code` plugin, not the package's static github-*\n  // default (#315 follow-up) — re-derives when the active theme changes.\n  // `math`/`cjk` are lazy-loaded off the raw text (#perf-5, see\n  // `_streamdown-i18n.ts`) — pass `children` so they load only when this\n  // reasoning block actually needs them.\n  const plugins = useStreamdownPlugins(typeof children === \"string\" ? children : \"\");\n  // The TOP-LEVEL Streamdown `mermaid` prop — catches a failed diagram\n  // render, including a missing `mermaid` optional peer (issue #33).\n  const mermaidOptions = useStreamdownMermaidOptions();\n\n  return (\n    <CollapsibleContent\n      className={cn(\n        \"mt-4 text-body\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]\",\n        className,\n      )}\n      {...props}\n    >\n      {typeof children === \"string\" ? (\n        <Streamdown\n          // Forces a remount the first time the lazy math/cjk slot resolves —\n          // see `getStreamdownPluginsKey`'s doc in `_streamdown-i18n.ts` for why.\n          key={getStreamdownPluginsKey(plugins)}\n          plugins={plugins}\n          translations={translations}\n          mermaid={mermaidOptions}\n        >\n          {children}\n        </Streamdown>\n      ) : (\n        children\n      )}\n    </CollapsibleContent>\n  );\n});\n\nReasoning.displayName = \"Reasoning\";\nReasoningTrigger.displayName = \"ReasoningTrigger\";\nReasoningContent.displayName = \"ReasoningContent\";\n"],"mappings":"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","names":[]}

package/dist/chunk-XNBKO32Y.js

@@ -0,0 +1,174 @@
+"use client";
+import {
+  A2UI_CATALOG_SCHEMA
+} from "./chunk-AXMNJMMH.js";
+
+// src/a2ui/ui-catalog.tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Avatar,
+  AvatarFallback,
+  Badge,
+  BentoGrid,
+  BentoGridItem,
+  Button,
+  ButtonGroup,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Descriptions,
+  DescriptionsItem,
+  EmptyState,
+  Heading,
+  Input,
+  Kbd,
+  Label,
+  MetricCard,
+  Progress,
+  RadioGroup,
+  RadioGroupItem,
+  SectionHeader,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Slider,
+  StatePanel,
+  StatusBadge,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Text,
+  Textarea,
+  Timeline
+} from "@elabs-ai/components-ui";
+import { jsx } from "react/jsx-runtime";
+var SurfaceAlertTitle = (props) => /* @__PURE__ */ jsx(AlertTitle, { ...props, as: "div" });
+var UI_CATALOG_BINDINGS = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AlertDescription,
+  AlertTitle: SurfaceAlertTitle,
+  Avatar,
+  AvatarFallback,
+  Badge,
+  BentoGrid,
+  BentoGridItem,
+  Button,
+  ButtonGroup,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Descriptions,
+  DescriptionsItem,
+  EmptyState,
+  Heading,
+  Input,
+  Kbd,
+  Label,
+  MetricCard,
+  Progress,
+  RadioGroup,
+  RadioGroupItem,
+  SectionHeader,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Slider,
+  StatePanel,
+  StatusBadge,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Text,
+  Textarea,
+  Timeline
+};
+function createA2uiCatalog(bindings, schema = A2UI_CATALOG_SCHEMA) {
+  const catalog = {};
+  for (const [type, typeSchema] of Object.entries(schema)) {
+    if (typeSchema.builtin) {
+      catalog[type] = { schema: typeSchema };
+      continue;
+    }
+    const component = bindings[type];
+    if (!component) {
+      throw new Error(`createA2uiCatalog: catalog type "${type}" has no component binding`);
+    }
+    catalog[type] = { schema: typeSchema, component };
+  }
+  return catalog;
+}
+function defineA2uiType(partial) {
+  return {
+    children: partial.children ?? false,
+    props: partial.props ?? {},
+    events: partial.events ?? {},
+    source: partial.source ?? "app",
+    ...partial.summary ? { summary: partial.summary } : {},
+    ...partial.builtin ? { builtin: true } : {}
+  };
+}
+function catalogSchema(catalog) {
+  return Object.fromEntries(Object.entries(catalog).map(([t, e]) => [t, e.schema]));
+}
+var uiCatalog = createA2uiCatalog(UI_CATALOG_BINDINGS);
+
+export {
+  UI_CATALOG_BINDINGS,
+  createA2uiCatalog,
+  defineA2uiType,
+  catalogSchema,
+  uiCatalog
+};
+//# sourceMappingURL=chunk-XNBKO32Y.js.map

package/dist/chunk-XNBKO32Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/a2ui/ui-catalog.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * ui-catalog.tsx — the shipped A2UI catalog: every non-builtin type in\n * `catalog.source.json` bound to its `@elabs-ai/components-ui` component. The\n * schema half (`A2UI_CATALOG_SCHEMA`, generated) says what an agent MAY emit; this\n * half says what it renders AS. A test asserts the two key sets are identical, so\n * a type cannot be validatable-but-unrenderable or the reverse.\n *\n * Apps extend it (`createA2uiCatalog`) with their own types — a chart from\n * `@elabs-ai/components-charts`, a domain card — because `ai` may not import its\n * sibling packages (one-way dependency graph) and an app composes freely.\n */\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Alert,\n  AlertDescription,\n  AlertTitle,\n  Avatar,\n  AvatarFallback,\n  Badge,\n  BentoGrid,\n  BentoGridItem,\n  Button,\n  ButtonGroup,\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n  Checkbox,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n  Descriptions,\n  DescriptionsItem,\n  EmptyState,\n  Heading,\n  Input,\n  Kbd,\n  Label,\n  MetricCard,\n  Progress,\n  RadioGroup,\n  RadioGroupItem,\n  SectionHeader,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Separator,\n  Slider,\n  StatePanel,\n  StatusBadge,\n  Switch,\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  Text,\n  Textarea,\n  Timeline,\n} from \"@elabs-ai/components-ui\";\nimport type { AlertTitleProps } from \"@elabs-ai/components-ui\";\nimport type { ComponentType } from \"react\";\n\nimport { A2UI_CATALOG_SCHEMA } from \"./core/catalog.generated\";\nimport type { A2uiCatalogSchema, A2uiCatalogTypeSchema } from \"./core/spec\";\n\n/** One renderable catalog type: its schema plus the component that draws it. */\nexport interface A2uiCatalogEntry {\n  schema: A2uiCatalogTypeSchema;\n  /** Absent for builtins (`Stack`, `Grid`), which the surface draws itself. */\n  component?: ComponentType<Record<string, unknown>>;\n}\n\nexport type A2uiCatalog = Record<string, A2uiCatalogEntry>;\n\n// `ComponentType<Record<string, unknown>>` is the erased shape the renderer calls\n// with validated, catalog-shaped props; each binding is a real ui component.\ntype AnyComponent = ComponentType<any>; // eslint-disable-line @typescript-eslint/no-explicit-any -- erased at the catalog boundary; props are validated against the schema\n\n/**\n * `AlertTitle` inside a surface, as a `<div>` rather than its default `<h5>`.\n *\n * A surface is rendered into a host page whose heading outline the agent cannot see, so a\n * fixed `h5` fails axe's `heading-order` under any host with no `h4` above it — which is\n * most of them. The alert's `role=\"alert\"` announces the title either way, so the heading\n * adds nothing here; `CardTitle` defaults to `div` for the same reason. A host writing real\n * code composes `<AlertTitle as=\"h3\">`, where the level is knowable.\n */\nconst SurfaceAlertTitle = (props: AlertTitleProps) => <AlertTitle {...props} as=\"div\" />;\n\n/** The `@elabs-ai/components-ui` bindings, one per non-builtin catalog type. */\nexport const UI_CATALOG_BINDINGS: Record<string, AnyComponent> = {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Alert,\n  AlertDescription,\n  AlertTitle: SurfaceAlertTitle,\n  Avatar,\n  AvatarFallback,\n  Badge,\n  BentoGrid,\n  BentoGridItem,\n  Button,\n  ButtonGroup,\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n  Checkbox,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n  Descriptions,\n  DescriptionsItem,\n  EmptyState,\n  Heading,\n  Input,\n  Kbd,\n  Label,\n  MetricCard,\n  Progress,\n  RadioGroup,\n  RadioGroupItem,\n  SectionHeader,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  Separator,\n  Slider,\n  StatePanel,\n  StatusBadge,\n  Switch,\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  Text,\n  Textarea,\n  Timeline,\n};\n\n/**\n * Build a catalog from component bindings + a schema. Every schema type that is\n * not a builtin must have a binding; a binding without a schema is ignored (it\n * would be unvalidatable). Extend the shipped one:\n *\n * ```ts\n * const catalog = createA2uiCatalog(\n *   { ...UI_CATALOG_BINDINGS, RevenueChart },\n *   { ...A2UI_CATALOG_SCHEMA, RevenueChart: defineA2uiType({ props: { series: { type: \"array\", required: true } } }) },\n * );\n * ```\n */\nexport function createA2uiCatalog(\n  bindings: Record<string, AnyComponent>,\n  schema: A2uiCatalogSchema = A2UI_CATALOG_SCHEMA,\n): A2uiCatalog {\n  const catalog: A2uiCatalog = {};\n  for (const [type, typeSchema] of Object.entries(schema)) {\n    if (typeSchema.builtin) {\n      catalog[type] = { schema: typeSchema };\n      continue;\n    }\n    const component = bindings[type];\n    if (!component) {\n      throw new Error(`createA2uiCatalog: catalog type \"${type}\" has no component binding`);\n    }\n    catalog[type] = { schema: typeSchema, component };\n  }\n  return catalog;\n}\n\n/** Author a schema entry for an app-provided type with sensible defaults. */\nexport function defineA2uiType(\n  partial: Partial<A2uiCatalogTypeSchema> & { source?: string },\n): A2uiCatalogTypeSchema {\n  return {\n    children: partial.children ?? false,\n    props: partial.props ?? {},\n    events: partial.events ?? {},\n    source: partial.source ?? \"app\",\n    ...(partial.summary ? { summary: partial.summary } : {}),\n    ...(partial.builtin ? { builtin: true } : {}),\n  };\n}\n\n/** The schema half of a catalog (what `validateA2uiSurface` takes). */\nexport function catalogSchema(catalog: A2uiCatalog): A2uiCatalogSchema {\n  return Object.fromEntries(Object.entries(catalog).map(([t, e]) => [t, e.schema]));\n}\n\n/** The shipped catalog: builtins + every `@elabs-ai/components-ui` type above. */\nexport const uiCatalog: A2uiCatalog = createA2uiCatalog(UI_CATALOG_BINDINGS);\n"],"mappings":"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","names":[]}