@sero-ai/ui 0.1.0 → 0.2.0

package/src/components/ai-elements/voice-selector-accent.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps } from 'react';
+import { Languages } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export type VoiceSelectorAccentValue =
+  | 'american'
+  | 'british'
+  | 'australian'
+  | 'canadian'
+  | 'irish'
+  | 'scottish'
+  | 'indian'
+  | 'south-african'
+  | 'new-zealand'
+  | 'spanish'
+  | 'french'
+  | 'german'
+  | 'italian'
+  | 'portuguese'
+  | 'brazilian'
+  | 'mexican'
+  | 'argentinian'
+  | 'japanese'
+  | 'chinese'
+  | 'korean'
+  | 'russian'
+  | 'arabic'
+  | 'dutch'
+  | 'swedish'
+  | 'norwegian'
+  | 'danish'
+  | 'finnish'
+  | 'polish'
+  | 'turkish'
+  | 'greek'
+  | string;
+
+export type VoiceSelectorAccentProps = ComponentProps<'span'> & {
+  value?: VoiceSelectorAccentValue;
+};
+
+export const VoiceSelectorAccent = ({
+  className,
+  children,
+  ...props
+}: VoiceSelectorAccentProps) => (
+  <span className={cn('text-muted-foreground text-xs', className)} {...props}>
+    {children ?? <Languages className="size-4" />}
+  </span>
+);

package/src/components/ai-elements/voice-selector.tsx

@@ -3,6 +3,10 @@
 import type { ComponentProps, ReactNode } from "react";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  VoiceSelectorAccent,
+  type VoiceSelectorAccentProps,
+} from "./voice-selector-accent";
 import { Button } from "../ui/button";
 import {
   Command,
@@ -238,181 +242,8 @@ export const VoiceSelectorGender = ({
   );
 };
 
-export type VoiceSelectorAccentProps = ComponentProps<"span"> & {
-  value?:
-    | "american"
-    | "british"
-    | "australian"
-    | "canadian"
-    | "irish"
-    | "scottish"
-    | "indian"
-    | "south-african"
-    | "new-zealand"
-    | "spanish"
-    | "french"
-    | "german"
-    | "italian"
-    | "portuguese"
-    | "brazilian"
-    | "mexican"
-    | "argentinian"
-    | "japanese"
-    | "chinese"
-    | "korean"
-    | "russian"
-    | "arabic"
-    | "dutch"
-    | "swedish"
-    | "norwegian"
-    | "danish"
-    | "finnish"
-    | "polish"
-    | "turkish"
-    | "greek"
-    | string;
-};
-
-export const VoiceSelectorAccent = ({
-  className,
-  value,
-  children,
-  ...props
-}: VoiceSelectorAccentProps) => {
-  let emoji: string | null = null;
-
-  switch (value) {
-    case "american": {
-      emoji = "🇺🇸";
-      break;
-    }
-    case "british": {
-      emoji = "🇬🇧";
-      break;
-    }
-    case "australian": {
-      emoji = "🇦🇺";
-      break;
-    }
-    case "canadian": {
-      emoji = "🇨🇦";
-      break;
-    }
-    case "irish": {
-      emoji = "🇮🇪";
-      break;
-    }
-    case "scottish": {
-      emoji = "🏴󠁧󠁢󠁳󠁣󠁴󠁿";
-      break;
-    }
-    case "indian": {
-      emoji = "🇮🇳";
-      break;
-    }
-    case "south-african": {
-      emoji = "🇿🇦";
-      break;
-    }
-    case "new-zealand": {
-      emoji = "🇳🇿";
-      break;
-    }
-    case "spanish": {
-      emoji = "🇪🇸";
-      break;
-    }
-    case "french": {
-      emoji = "🇫🇷";
-      break;
-    }
-    case "german": {
-      emoji = "🇩🇪";
-      break;
-    }
-    case "italian": {
-      emoji = "🇮🇹";
-      break;
-    }
-    case "portuguese": {
-      emoji = "🇵🇹";
-      break;
-    }
-    case "brazilian": {
-      emoji = "🇧🇷";
-      break;
-    }
-    case "mexican": {
-      emoji = "🇲🇽";
-      break;
-    }
-    case "argentinian": {
-      emoji = "🇦🇷";
-      break;
-    }
-    case "japanese": {
-      emoji = "🇯🇵";
-      break;
-    }
-    case "chinese": {
-      emoji = "🇨🇳";
-      break;
-    }
-    case "korean": {
-      emoji = "🇰🇷";
-      break;
-    }
-    case "russian": {
-      emoji = "🇷🇺";
-      break;
-    }
-    case "arabic": {
-      emoji = "🇸🇦";
-      break;
-    }
-    case "dutch": {
-      emoji = "🇳🇱";
-      break;
-    }
-    case "swedish": {
-      emoji = "🇸🇪";
-      break;
-    }
-    case "norwegian": {
-      emoji = "🇳🇴";
-      break;
-    }
-    case "danish": {
-      emoji = "🇩🇰";
-      break;
-    }
-    case "finnish": {
-      emoji = "🇫🇮";
-      break;
-    }
-    case "polish": {
-      emoji = "🇵🇱";
-      break;
-    }
-    case "turkish": {
-      emoji = "🇹🇷";
-      break;
-    }
-    case "greek": {
-      emoji = "🇬🇷";
-      break;
-    }
-    default: {
-      emoji = null;
-    }
-  }
-
-  return (
-    <span className={cn("text-muted-foreground text-xs", className)} {...props}>
-      {children ?? emoji}
-    </span>
-  );
-};
+export { VoiceSelectorAccent };
+export type { VoiceSelectorAccentProps };
 
 export type VoiceSelectorAgeProps = ComponentProps<"span">;
 

package/src/components/model-selection/available-model-picker.tsx

@@ -0,0 +1,231 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Check, ChevronDown, Sparkles, X } from 'lucide-react';
+import {
+  filterModelGroups,
+  findGroup,
+  findModel,
+  modelKey,
+  parseModelKey,
+  type SharedAvailableModelGroup,
+  type SharedModelInfo,
+} from '@sero-ai/common';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { SearchInput } from '../ui/search-input';
+import { cn } from '../../lib/utils';
+
+interface AvailableModelPickerProps<
+  TModel extends SharedModelInfo,
+  TGroup extends SharedAvailableModelGroup<TModel>,
+> {
+  groups: TGroup[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyLabel?: string;
+  noModelsLabel?: string;
+  allowClear?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function AvailableModelPicker<
+  TModel extends SharedModelInfo,
+  TGroup extends SharedAvailableModelGroup<TModel>,
+>({
+  groups,
+  value,
+  onChange,
+  placeholder = 'Choose a model',
+  searchPlaceholder = 'Search models…',
+  emptyLabel = 'No matching models',
+  noModelsLabel = 'No models available',
+  allowClear = false,
+  disabled = false,
+  className,
+}: AvailableModelPickerProps<TModel, TGroup>) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const selected = useMemo(() => {
+    const parsed = parseModelKey(value);
+    if (!parsed) {
+      return value
+        ? { group: null, model: null, fallbackLabel: value }
+        : { group: null, model: null, fallbackLabel: null };
+    }
+
+    const group = findGroup(groups, parsed.provider, parsed.modelId) ?? null;
+    const model = findModel(groups, parsed.provider, parsed.modelId) ?? null;
+    return {
+      group,
+      model,
+      fallbackLabel: model ? null : value,
+    };
+  }, [groups, value]);
+
+  const filteredGroups = useMemo(
+    () => filterModelGroups(groups, query),
+    [groups, query],
+  );
+
+  const totalResults = useMemo(
+    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
+    [filteredGroups],
+  );
+
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) return;
+    setQuery('');
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, []);
+
+  const handleSelect = useCallback((provider: string, modelId: string) => {
+    onChange(modelKey(provider, modelId));
+    setOpen(false);
+    setQuery('');
+  }, [onChange]);
+
+  const handleClear = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onChange('');
+    setOpen(false);
+    setQuery('');
+  }, [onChange]);
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild disabled={disabled}>
+        <div
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          className={cn(
+            'flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors',
+            'hover:bg-secondary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+            disabled && 'cursor-not-allowed opacity-50',
+            className,
+          )}
+        >
+          {selected.group && selected.model ? (
+            <>
+              <img
+                src={selected.group.logo}
+                alt={selected.group.displayName}
+                className="size-4 shrink-0 rounded-sm dark:invert"
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-1.5">
+                  <span className="truncate font-medium text-foreground">{selected.model.name}</span>
+                  {selected.model.reasoning ? (
+                    <Sparkles className="size-3 shrink-0 text-amber-500/70" />
+                  ) : null}
+                </div>
+                <div className="truncate text-[11px] text-muted-foreground">
+                  {selected.group.displayName}
+                </div>
+              </div>
+            </>
+          ) : selected.fallbackLabel ? (
+            <span className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">
+              {selected.fallbackLabel}
+            </span>
+          ) : (
+            <span className="min-w-0 flex-1 truncate text-muted-foreground">
+              {placeholder}
+            </span>
+          )}
+
+          {allowClear && value ? (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="rounded p-1 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+              title="Clear selection"
+            >
+              <X className="size-3.5" />
+            </button>
+          ) : null}
+
+          <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
+        </div>
+      </PopoverTrigger>
+
+      <PopoverContent
+        side="bottom"
+        align="start"
+        sideOffset={4}
+        className="w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-xl border-border/60 bg-background p-0 shadow-xl"
+        onWheel={(event) => event.stopPropagation()}
+      >
+        <SearchInput
+          ref={inputRef}
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder={searchPlaceholder}
+          containerClassName="border-b border-border/40"
+        />
+
+        <div className="max-h-[280px] overflow-y-auto py-1">
+          {groups.length === 0 ? (
+            <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+              {noModelsLabel}
+            </div>
+          ) : totalResults === 0 ? (
+            <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+              {emptyLabel}
+            </div>
+          ) : (
+            filteredGroups.map((group, index) => (
+              <div key={group.provider}>
+                {index > 0 ? <div className="mx-3 border-t border-border/30" /> : null}
+                <div className="flex items-center gap-2 px-3 pb-1 pt-2">
+                  <img
+                    src={group.logo}
+                    alt={group.displayName}
+                    className="size-3.5 shrink-0 rounded-sm dark:invert"
+                  />
+                  <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                    {group.displayName}
+                  </span>
+                </div>
+                <div className="px-1">
+                  {group.models.map((model) => {
+                    const nextValue = modelKey(model.provider, model.modelId);
+                    const isSelected = nextValue === value;
+                    return (
+                      <button
+                        key={nextValue}
+                        type="button"
+                        onClick={() => handleSelect(model.provider, model.modelId)}
+                        className={cn(
+                          'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors',
+                          isSelected
+                            ? 'bg-secondary text-foreground'
+                            : 'text-muted-foreground hover:bg-secondary/60 hover:text-foreground',
+                        )}
+                      >
+                        <div className="flex size-4 shrink-0 items-center justify-center">
+                          {isSelected ? (
+                            <Check className="size-3.5 text-emerald-500" />
+                          ) : (
+                            <div className="size-1.5 rounded-full bg-border" />
+                          )}
+                        </div>
+                        <span className="min-w-0 flex-1 truncate font-medium">{model.name}</span>
+                        {model.reasoning ? (
+                          <Sparkles className="size-3 shrink-0 text-amber-500/60" />
+                        ) : null}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/model-selection/model-warning-list.tsx

@@ -0,0 +1,33 @@
+import { TriangleAlert } from 'lucide-react';
+import { formatModelValidationWarning, type ModelValidationWarning } from '@sero-ai/common';
+import { cn } from '../../lib/utils';
+
+interface ModelWarningListProps {
+  warnings: ModelValidationWarning[];
+  className?: string;
+}
+
+export function ModelWarningList({ warnings, className }: ModelWarningListProps) {
+  if (warnings.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {warnings.map((warning, index) => (
+        <div
+          key={`${warning.code}:${index}`}
+          className={cn(
+            'rounded-lg border px-3 py-2 text-xs',
+            warning.severity === 'info'
+              ? 'border-primary/20 bg-primary/5 text-primary'
+              : 'border-amber-500/20 bg-amber-500/5 text-amber-700 dark:text-amber-300',
+          )}
+        >
+          <div className="flex items-start gap-2">
+            <TriangleAlert className="mt-0.5 size-3.5 shrink-0" />
+            <span>{formatModelValidationWarning(warning)}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/model-selection/thinking-level-picker.tsx

@@ -0,0 +1,55 @@
+import {
+  THINKING_LABELS,
+  THINKING_LEVELS,
+  type ThinkingLevel,
+} from '@sero-ai/common';
+import { cn } from '../../lib/utils';
+
+interface ThinkingLevelPickerProps {
+  value: string;
+  onChange: (value: ThinkingLevel) => void;
+  availableLevels?: readonly string[];
+  disabled?: boolean;
+  showUnsupported?: boolean;
+  className?: string;
+}
+
+export function ThinkingLevelPicker({
+  value,
+  onChange,
+  availableLevels,
+  disabled = false,
+  showUnsupported = true,
+  className,
+}: ThinkingLevelPickerProps) {
+  const allowed = new Set<string>(availableLevels ?? THINKING_LEVELS);
+  const levels = showUnsupported || !availableLevels
+    ? THINKING_LEVELS
+    : THINKING_LEVELS.filter((level) => allowed.has(level));
+
+  return (
+    <div className={cn('grid grid-cols-6 gap-1 rounded-lg border border-border/50 bg-muted/20 p-1', className)}>
+      {levels.map((level) => {
+        const isActive = value === level;
+        const isAvailable = allowed.has(level) || !availableLevels;
+        return (
+          <button
+            key={level}
+            type="button"
+            disabled={disabled || !isAvailable}
+            onClick={() => onChange(level)}
+            className={cn(
+              'rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors',
+              isActive
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',
+              (!isAvailable || disabled) && 'cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground',
+            )}
+          >
+            {THINKING_LABELS[level]}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -58,7 +58,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
           className
         )}
         {...props}

package/src/components/ui/command.tsx

@@ -73,7 +73,7 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent pl-1.5 py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}

package/src/components/ui/dialog.tsx

@@ -61,7 +61,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className
         )}
         {...props}

package/src/components/ui/plugin-safety-disclaimer.tsx

@@ -0,0 +1,25 @@
+import { ShieldAlert } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export interface PluginSafetyDisclaimerProps {
+  className?: string;
+}
+
+export function PluginSafetyDisclaimer({ className }: PluginSafetyDisclaimerProps) {
+  return (
+    <div
+      role="note"
+      className={cn(
+        'flex shrink-0 items-start gap-2 border-t border-[var(--status-warning-border)] bg-[var(--status-warning-faint)] px-4 py-2.5 text-[11px] leading-5 text-[var(--text-secondary)]',
+        className,
+      )}
+    >
+      <ShieldAlert className="mt-0.5 size-3.5 shrink-0 text-[var(--status-warning)]" />
+      <p>
+        <span className="font-medium text-[var(--status-warning)]">Heads up:</span>{' '}
+        Plugins run with full access to this workspace and can execute code on your device.
+        Only install plugins from sources you trust.
+      </p>
+    </div>
+  );
+}

package/src/components/ui/search-input.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+interface SearchInputProps extends React.ComponentProps<"input"> {
+  containerClassName?: string
+  endAdornment?: React.ReactNode
+  iconClassName?: string
+}
+
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ containerClassName, className, endAdornment, iconClassName, ...props }, ref) => {
+    return (
+      <div
+        data-slot="search-input"
+        className={cn("flex items-center gap-2 px-3", containerClassName)}
+      >
+        <SearchIcon
+          data-slot="search-input-icon"
+          className={cn("text-muted-foreground size-3.5 shrink-0", iconClassName)}
+        />
+        <input
+          ref={ref}
+          data-slot="search-input-control"
+          className={cn(
+            "placeholder:text-muted-foreground h-9 w-full min-w-0 bg-transparent pl-1.5 text-xs text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        {endAdornment}
+      </div>
+    )
+  }
+)
+
+SearchInput.displayName = "SearchInput"
+
+export { SearchInput }