@elabs-ai/components-ai 4.0.0 → 4.2.0

package/src/model-selector.tsx

@@ -1,225 +0,0 @@
-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 { cn } from "@elabs-ai/components-ui/lib/cn";
-import { BotIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
-import { useState } from "react";
-
-export type ModelSelectorProps = ComponentProps<typeof Dialog>;
-
-export const ModelSelector = (props: ModelSelectorProps) => <Dialog {...props} />;
-
-export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
-
-export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
-  <DialogTrigger {...props} />
-);
-
-export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
-  title?: ReactNode;
-};
-
-export const ModelSelectorContent = ({
-  className,
-  children,
-  title = "Model Selector",
-  ...props
-}: ModelSelectorContentProps) => (
-  <DialogContent
-    aria-describedby={undefined}
-    className={cn("outline! border-none! p-0 outline-border! outline-solid!", className)}
-    {...props}
-  >
-    <DialogTitle className="sr-only">{title}</DialogTitle>
-    <Command className="**:data-[slot=command-input-wrapper]:h-auto">{children}</Command>
-  </DialogContent>
-);
-
-export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
-
-export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
-  <CommandDialog {...props} />
-);
-
-export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
-
-export const ModelSelectorInput = ({ className, ...props }: ModelSelectorInputProps) => (
-  <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
-);
-
-export type ModelSelectorListProps = ComponentProps<typeof CommandList>;
-
-export const ModelSelectorList = (props: ModelSelectorListProps) => <CommandList {...props} />;
-
-export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
-
-export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => <CommandEmpty {...props} />;
-
-export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
-
-export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => <CommandGroup {...props} />;
-
-export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
-
-export const ModelSelectorItem = (props: ModelSelectorItemProps) => <CommandItem {...props} />;
-
-export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
-
-export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
-  <CommandShortcut {...props} />
-);
-
-export type ModelSelectorSeparatorProps = ComponentProps<typeof CommandSeparator>;
-
-export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
-  <CommandSeparator {...props} />
-);
-
-/**
- * Where provider logos are fetched from by default.
- *
- * This is a REMOTE origin: a deployment with a restrictive `img-src` blocks it.
- * Self-host the SVGs and pass `src` (or set a `fallback`) — see
- * `docs/CSP-AND-NETWORK.md`.
- */
-export const MODEL_SELECTOR_LOGO_BASE_URL = "https://models.dev/logos";
-
-export type ModelSelectorLogoProps = Omit<ComponentProps<"img">, "alt"> & {
-  /**
-   * Override the logo URL — point at a self-hosted or bundled asset when a CSP
-   * blocks `models.dev`. Defaults to `${MODEL_SELECTOR_LOGO_BASE_URL}/<provider>.svg`.
-   */
-  src?: string;
-  /**
-   * Rendered when the logo fails to load (blocked, offline, or unknown
-   * provider). Defaults to a neutral Lucide glyph, so the row never collapses
-   * to a broken image.
-   */
-  fallback?: ReactNode;
-  provider:
-    | "moonshotai-cn"
-    | "lucidquery"
-    | "moonshotai"
-    | "zai-coding-plan"
-    | "alibaba"
-    | "xai"
-    | "vultr"
-    | "nvidia"
-    | "upstage"
-    | "groq"
-    | "github-copilot"
-    | "mistral"
-    | "vercel"
-    | "nebius"
-    | "deepseek"
-    | "alibaba-cn"
-    | "google-vertex-anthropic"
-    | "venice"
-    | "chutes"
-    | "cortecs"
-    | "github-models"
-    | "togetherai"
-    | "azure"
-    | "baseten"
-    | "huggingface"
-    | "opencode"
-    | "fastrouter"
-    | "google"
-    | "google-vertex"
-    | "cloudflare-workers-ai"
-    | "inception"
-    | "wandb"
-    | "openai"
-    | "zhipuai-coding-plan"
-    | "perplexity"
-    | "openrouter"
-    | "zenmux"
-    | "v0"
-    | "iflowcn"
-    | "synthetic"
-    | "deepinfra"
-    | "zhipuai"
-    | "submodel"
-    | "zai"
-    | "inference"
-    | "requesty"
-    | "morph"
-    | "lmstudio"
-    | "anthropic"
-    | "aihubmix"
-    | "fireworks-ai"
-    | "modelscope"
-    | "llama"
-    | "scaleway"
-    | "amazon-bedrock"
-    | "cerebras"
-    // oxlint-disable-next-line typescript-eslint(ban-types) -- intentional pattern for autocomplete-friendly string union
-    | (string & {});
-};
-
-export const ModelSelectorLogo = ({
-  provider,
-  className,
-  src,
-  fallback,
-  onError,
-  ...props
-}: ModelSelectorLogoProps) => {
-  const [failed, setFailed] = useState(false);
-
-  // A blocked/missing logo must not leave a broken-image glyph in the row.
-  if (failed) {
-    return (
-      <>
-        {fallback ?? (
-          <BotIcon aria-label={`${provider} logo`} className={cn("size-3", className)} role="img" />
-        )}
-      </>
-    );
-  }
-
-  return (
-    <img
-      {...props}
-      alt={`${provider} logo`}
-      className={cn("size-3 dark:invert", className)}
-      height={12}
-      onError={(event) => {
-        setFailed(true);
-        onError?.(event);
-      }}
-      // AFTER the spread, so the caller's `src` wins via the destructured
-      // default rather than being silently overwritten.
-      src={src ?? `${MODEL_SELECTOR_LOGO_BASE_URL}/${provider}.svg`}
-      width={12}
-    />
-  );
-};
-
-export type ModelSelectorLogoGroupProps = ComponentProps<"div">;
-
-export const ModelSelectorLogoGroup = ({ className, ...props }: ModelSelectorLogoGroupProps) => (
-  <div
-    className={cn(
-      "flex shrink-0 items-center -space-x-1 [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
-      className,
-    )}
-    {...props}
-  />
-);
-
-export type ModelSelectorNameProps = ComponentProps<"span">;
-
-export const ModelSelectorName = ({ className, ...props }: ModelSelectorNameProps) => (
-  <span className={cn("flex-1 truncate text-start", className)} {...props} />
-);

package/src/terminal.tsx

@@ -1,244 +0,0 @@
-"use client";
-
-import { Button } from "@elabs-ai/components-ui";
-import { cn } from "@elabs-ai/components-ui/lib/cn";
-import Ansi from "ansi-to-react";
-import { CheckIcon, CopyIcon, TerminalIcon, Trash2Icon } from "lucide-react";
-import type { ComponentProps, HTMLAttributes } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-interface TerminalContextType {
-  output: string;
-  isStreaming: boolean;
-  autoScroll: boolean;
-  onClear?: () => void;
-}
-
-const TerminalContext = createContext<TerminalContextType>({
-  autoScroll: true,
-  isStreaming: false,
-  output: "",
-});
-
-export type TerminalHeaderProps = HTMLAttributes<HTMLDivElement>;
-
-export const TerminalHeader = ({ className, children, ...props }: TerminalHeaderProps) => (
-  <div
-    className={cn(
-      "flex items-center justify-between border-zinc-800 border-b px-4 py-2",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-export type TerminalTitleProps = HTMLAttributes<HTMLDivElement>;
-
-export const TerminalTitle = ({ className, children, ...props }: TerminalTitleProps) => (
-  <div className={cn("flex items-center gap-2 text-sm text-zinc-400", className)} {...props}>
-    <TerminalIcon className="size-4" />
-    {children ?? "Terminal"}
-  </div>
-);
-
-export type TerminalStatusProps = HTMLAttributes<HTMLDivElement>;
-
-export const TerminalStatus = ({ className, children, ...props }: TerminalStatusProps) => {
-  const { isStreaming } = useContext(TerminalContext);
-
-  if (!isStreaming) {
-    return null;
-  }
-
-  return (
-    <div className={cn("flex items-center gap-2 text-xs text-zinc-400", className)} {...props}>
-      {children}
-    </div>
-  );
-};
-
-export type TerminalActionsProps = HTMLAttributes<HTMLDivElement>;
-
-export const TerminalActions = ({ className, children, ...props }: TerminalActionsProps) => (
-  <div className={cn("flex items-center gap-1", className)} {...props}>
-    {children}
-  </div>
-);
-
-export type TerminalCopyButtonProps = ComponentProps<typeof Button> & {
-  onCopy?: () => void;
-  onError?: (error: Error) => void;
-  timeout?: number;
-};
-
-export const TerminalCopyButton = ({
-  onCopy,
-  onError,
-  timeout = 2000,
-  children,
-  className,
-  ...props
-}: TerminalCopyButtonProps) => {
-  const [isCopied, setIsCopied] = useState(false);
-  const timeoutRef = useRef<number>(0);
-  const { output } = useContext(TerminalContext);
-
-  const copyToClipboard = useCallback(async () => {
-    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
-      onError?.(new Error("Clipboard API not available"));
-      return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(output);
-      setIsCopied(true);
-      onCopy?.();
-      timeoutRef.current = window.setTimeout(() => setIsCopied(false), timeout);
-    } catch (error) {
-      onError?.(error as Error);
-    }
-  }, [output, onCopy, onError, timeout]);
-
-  useEffect(
-    () => () => {
-      window.clearTimeout(timeoutRef.current);
-    },
-    [],
-  );
-
-  const Icon = isCopied ? CheckIcon : CopyIcon;
-
-  return (
-    <Button
-      className={cn(
-        "size-7 shrink-0 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100",
-        className,
-      )}
-      onClick={copyToClipboard}
-      size="icon"
-      variant="ghost"
-      {...props}
-    >
-      {children ?? <Icon size={14} />}
-    </Button>
-  );
-};
-
-export type TerminalClearButtonProps = ComponentProps<typeof Button>;
-
-export const TerminalClearButton = ({
-  children,
-  className,
-  ...props
-}: TerminalClearButtonProps) => {
-  const { onClear } = useContext(TerminalContext);
-
-  if (!onClear) {
-    return null;
-  }
-
-  return (
-    <Button
-      className={cn(
-        "size-7 shrink-0 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100",
-        className,
-      )}
-      onClick={onClear}
-      size="icon"
-      variant="ghost"
-      {...props}
-    >
-      {children ?? <Trash2Icon size={14} />}
-    </Button>
-  );
-};
-
-export type TerminalContentProps = HTMLAttributes<HTMLDivElement>;
-
-export const TerminalContent = ({ className, children, ...props }: TerminalContentProps) => {
-  const { output, isStreaming, autoScroll } = useContext(TerminalContext);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (autoScroll && containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-    }
-  }, [output, autoScroll]);
-
-  return (
-    <div
-      className={cn("max-h-96 overflow-auto p-4 font-mono text-sm leading-relaxed", className)}
-      ref={containerRef}
-      {...props}
-    >
-      {children ?? (
-        <pre className="whitespace-pre-wrap break-words">
-          <Ansi>{output}</Ansi>
-          {isStreaming && (
-            <span className="ml-0.5 inline-block h-4 w-2 animate-pulse bg-zinc-100" />
-          )}
-        </pre>
-      )}
-    </div>
-  );
-};
-
-export type TerminalProps = HTMLAttributes<HTMLDivElement> & {
-  output: string;
-  isStreaming?: boolean;
-  autoScroll?: boolean;
-  onClear?: () => void;
-};
-
-export const Terminal = ({
-  output,
-  isStreaming = false,
-  autoScroll = true,
-  onClear,
-  className,
-  children,
-  ...props
-}: TerminalProps) => {
-  const contextValue = useMemo(
-    () => ({ autoScroll, isStreaming, onClear, output }),
-    [autoScroll, isStreaming, onClear, output],
-  );
-
-  return (
-    <TerminalContext.Provider value={contextValue}>
-      <div
-        className={cn(
-          "flex flex-col overflow-hidden rounded-lg border bg-zinc-950 text-zinc-100",
-          className,
-        )}
-        {...props}
-      >
-        {children ?? (
-          <>
-            <TerminalHeader>
-              <TerminalTitle />
-              <div className="flex items-center gap-1">
-                <TerminalStatus />
-                <TerminalActions>
-                  <TerminalCopyButton />
-                  {onClear && <TerminalClearButton />}
-                </TerminalActions>
-              </div>
-            </TerminalHeader>
-            <TerminalContent />
-          </>
-        )}
-      </div>
-    </TerminalContext.Provider>
-  );
-};