@vvedantb/ui 0.17.1 → 0.18.0

package/src/ai-elements/prompt-input-settings.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+} from "../ui/dropdown-menu";
+import { useCn, useUiConfig } from "../ui/ui-config";
+import { IconDots } from "@tabler/icons-react";
+
+/** One model in `PromptInputSettings`, grouped by `provider`. */
+export interface PromptInputSettingsOption<TModel extends string = string> {
+  id: TModel;
+  provider: string;
+  label: string;
+}
+
+/**
+ * `UiConfig.PromptInputSettings`. `providerLabel` names a provider group
+ * (default: the provider id); `providerIcon` renders the icon before a
+ * provider and before "Model" (default: none). `classes.trigger` replaces the
+ * trigger button's classes.
+ */
+export interface PromptInputSettingsConfig {
+  providerLabel?: (provider: string) => string;
+  providerIcon?: (provider: string) => ReactNode;
+  classes?: {
+    trigger?: string;
+  };
+}
+
+function getProviderOptions<TModel extends string>(
+  options: ReadonlyArray<PromptInputSettingsOption<TModel>>,
+  providerLabel: (provider: string) => string,
+): ReadonlyArray<{ id: string; label: string }> {
+  const providers: Array<{ id: string; label: string }> = [];
+  for (const option of options) {
+    if (providers.some((provider) => provider.id === option.provider)) {
+      continue;
+    }
+    providers.push({
+      id: option.provider,
+      label: providerLabel(option.provider),
+    });
+  }
+  return providers;
+}
+
+export interface PromptInputSettingsProps<TModel extends string = string> {
+  model: TModel;
+  onModelChange: (model: TModel) => void;
+  options: ReadonlyArray<PromptInputSettingsOption<TModel>>;
+  disabled?: boolean;
+  icon?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Overflow menu for the prompt footer with a "Model" submenu: one radio list,
+ * or one submenu per provider when the options span several providers.
+ */
+export function PromptInputSettings<TModel extends string>({
+  model,
+  onModelChange,
+  options,
+  disabled,
+  icon,
+  className,
+}: PromptInputSettingsProps<TModel>) {
+  const config = useUiConfig("PromptInputSettings");
+  const merge = useCn();
+  const providerLabel = config?.providerLabel ?? ((provider: string) => provider);
+  const providerIcon = config?.providerIcon;
+  const selectedModel =
+    options.find((entry) => entry.id === model) ?? options[0] ?? null;
+  const providerOptions = getProviderOptions(options, providerLabel);
+  const handleValueChange = (nextValue: string) => {
+    const option = options.find((entry) => entry.id === nextValue);
+    if (option) {
+      onModelChange(option.id);
+    }
+  };
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <button
+          className={merge(
+            config?.classes?.trigger ??
+              "rounded-lg p-1.5 text-muted-foreground transition-[color,background-color,scale] duration-150 ease-out hover:bg-surface-secondary hover:text-foreground active:scale-[0.92] disabled:opacity-50",
+            className,
+          )}
+          disabled={disabled}
+        >
+          {icon ?? <IconDots size={16} />}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            {providerIcon?.(selectedModel?.provider ?? "")}
+            Model
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            {providerOptions.map((provider) => {
+              const models = options.filter(
+                (option) => option.provider === provider.id,
+              );
+              const radios = (
+                <DropdownMenuRadioGroup
+                  key={provider.id}
+                  value={selectedModel?.id}
+                  onValueChange={handleValueChange}
+                >
+                  {models.map((option) => (
+                    <DropdownMenuRadioItem key={option.id} value={option.id}>
+                      {option.label}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              );
+              if (providerOptions.length === 1) return radios;
+              return (
+                <DropdownMenuSub key={provider.id}>
+                  <DropdownMenuSubTrigger>
+                    {providerIcon?.(provider.id)}
+                    {provider.label}
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent>{radios}</DropdownMenuSubContent>
+                </DropdownMenuSub>
+              );
+            })}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/ai-elements/prompt-input-speech.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { IconMicrophone, IconPlayerStop } from "@tabler/icons-react";
+import { PromptInputButton } from "./prompt-input";
+
+// Web Speech API dictation for the prompt input: `useSpeechRecognition` streams
+// the transcript (prefix + finals + interim) to a callback, and
+// `PromptInputSpeech` is a microphone button that writes it into the form's
+// `textarea[name="message"]`.
+
+interface SpeechRecognitionResult {
+  readonly isFinal: boolean;
+  readonly length: number;
+  [index: number]: { transcript: string; confidence: number };
+}
+
+interface SpeechRecognitionResultList {
+  readonly length: number;
+  [index: number]: SpeechRecognitionResult;
+}
+
+interface SpeechRecognitionEvent extends Event {
+  readonly resultIndex: number;
+  readonly results: SpeechRecognitionResultList;
+}
+
+interface SpeechRecognitionInstance extends EventTarget {
+  continuous: boolean;
+  interimResults: boolean;
+  lang: string;
+  onresult: ((event: SpeechRecognitionEvent) => void) | null;
+  onerror: ((event: Event) => void) | null;
+  onend: (() => void) | null;
+  start(): void;
+  stop(): void;
+}
+
+type SpeechRecognitionConstructor = new () => SpeechRecognitionInstance;
+
+// Read the constructors through a local type: a package must not augment the
+// global Window. Apps often declare their own `Window.SpeechRecognition` with
+// other event types, so `window` is cast to this shape rather than assigned
+// (an assignment fails to typecheck in those apps; see
+// consumer/window-speech-global.d.ts).
+type SpeechRecognitionWindow = {
+  SpeechRecognition?: SpeechRecognitionConstructor;
+  webkitSpeechRecognition?: SpeechRecognitionConstructor;
+};
+
+/** The browser's `SpeechRecognition` constructor, or `null` without one. */
+export function getSpeechRecognition(): SpeechRecognitionConstructor | null {
+  if (typeof window === "undefined") return null;
+  const speechWindow = window as unknown as SpeechRecognitionWindow;
+  return speechWindow.SpeechRecognition ?? speechWindow.webkitSpeechRecognition ?? null;
+}
+
+/**
+ * Continuous dictation. `toggle(prefix)` starts listening (or stops); each
+ * result calls `onUpdate` with `prefix` plus the transcript so far.
+ */
+export function useSpeechRecognition(onUpdate: (fullText: string) => void) {
+  const [isListening, setIsListening] = useState(false);
+  const recognitionRef = useRef<SpeechRecognitionInstance | null>(null);
+  const onUpdateRef = useRef(onUpdate);
+  onUpdateRef.current = onUpdate;
+  const prefixRef = useRef("");
+
+  const stop = () => {
+    recognitionRef.current?.stop();
+    recognitionRef.current = null;
+    setIsListening(false);
+  };
+
+  const start = (prefix: string) => {
+    const SR = getSpeechRecognition();
+    if (!SR) return;
+
+    const separator = prefix && !prefix.endsWith(" ") ? " " : "";
+    prefixRef.current = prefix + separator;
+
+    const recognition = new SR();
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.lang = "en-US";
+
+    recognition.onresult = (event: SpeechRecognitionEvent) => {
+      let finals = "";
+      let interim = "";
+      for (let i = 0; i < event.results.length; i++) {
+        const result = event.results[i];
+        if (!result) continue;
+        const text = result[0]?.transcript ?? "";
+        if (result.isFinal) {
+          finals += text;
+        } else {
+          interim += text;
+        }
+      }
+      onUpdateRef.current(prefixRef.current + finals + interim);
+    };
+
+    recognition.onerror = () => {
+      stop();
+    };
+
+    recognition.onend = () => {
+      setIsListening(false);
+      recognitionRef.current = null;
+    };
+
+    recognitionRef.current = recognition;
+    recognition.start();
+    setIsListening(true);
+  };
+
+  const toggle = (prefix: string) => {
+    if (isListening) {
+      stop();
+    } else {
+      start(prefix);
+    }
+  };
+
+  // Stop listening on unmount.
+  useEffect(
+    () => () => {
+      recognitionRef.current?.stop();
+      recognitionRef.current = null;
+    },
+    [],
+  );
+
+  return { isListening, toggle };
+}
+
+export interface PromptInputSpeechProps {
+  disabled?: boolean;
+}
+
+/** Microphone button for the prompt input. Renders nothing without the Web Speech API. */
+export function PromptInputSpeech({ disabled }: PromptInputSpeechProps) {
+  if (!getSpeechRecognition()) return null;
+
+  return <SpeechButton disabled={disabled} />;
+}
+
+function setTextareaValue(textarea: HTMLTextAreaElement, value: string) {
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLTextAreaElement.prototype,
+    "value",
+  )?.set;
+  if (!setter) return;
+  setter.call(textarea, value);
+  textarea.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function SpeechButton({ disabled }: PromptInputSpeechProps) {
+  const { isListening, toggle } = useSpeechRecognition((fullText) => {
+    const textarea = document.querySelector<HTMLTextAreaElement>(
+      'textarea[name="message"]',
+    );
+    if (!textarea) return;
+    setTextareaValue(textarea, fullText);
+    textarea.focus();
+  });
+
+  const handleToggle = () => {
+    const textarea = document.querySelector<HTMLTextAreaElement>(
+      'textarea[name="message"]',
+    );
+    toggle(textarea?.value ?? "");
+  };
+
+  return (
+    <PromptInputButton
+      tooltip={isListening ? "Stop recording" : "Voice input"}
+      onClick={handleToggle}
+      disabled={disabled}
+      className={isListening ? "text-destructive" : ""}
+    >
+      {isListening ? (
+        <IconPlayerStop className="size-4" />
+      ) : (
+        <IconMicrophone className="size-4" />
+      )}
+    </PromptInputButton>
+  );
+}

package/src/ai-elements/prompt-input-traits.tsx

@@ -0,0 +1,281 @@
+"use client";
+
+import { useOptionalPromptInputController } from "./prompt-input";
+import { useCn, useUiConfig } from "../ui/ui-config";
+
+const ULTRATHINK_PROMPT_PREFIX = "Ultrathink:\n";
+
+export function isUltrathinkPrompt(text: string | null | undefined): boolean {
+  return typeof text === "string" && /\bultrathink\b/i.test(text);
+}
+
+export function applyUltrathinkPrefix(text: string): string {
+  const trimmed = text.trim();
+  if (!trimmed) {
+    return ULTRATHINK_PROMPT_PREFIX;
+  }
+  if (trimmed.startsWith("Ultrathink:")) {
+    return trimmed;
+  }
+  return `${ULTRATHINK_PROMPT_PREFIX}${trimmed}`;
+}
+
+/**
+ * `UiConfig.TraitsPanel`: classes that replace the row `label`, the `empty`
+ * text, the option button `option` base and its `optionSelected` /
+ * `optionIdle` states, and the ultrathink `note`.
+ */
+export interface TraitsPanelConfig {
+  classes?: {
+    label?: string;
+    empty?: string;
+    option?: string;
+    optionSelected?: string;
+    optionIdle?: string;
+    note?: string;
+  };
+}
+
+export interface TraitsReasoningConfig {
+  levels: ReadonlyArray<string>;
+  default: string;
+  ultrathink?: boolean;
+}
+
+export interface TraitsMenuConfig {
+  reasoning?: TraitsReasoningConfig;
+  thinkingToggle?: boolean;
+  contextWindow1m?: boolean;
+  contextWindowDefaultLabel?: string;
+  fastMode?: boolean;
+}
+
+export interface TraitsMenuProps {
+  config: TraitsMenuConfig;
+  effortLevel: string | undefined;
+  thinkingEnabled: boolean;
+  use1mContext: boolean;
+  fastMode: boolean;
+  getLevelLabel: (level: string) => string;
+  onEffortLevelChange: (level: string) => void;
+  onThinkingEnabledChange: (enabled: boolean) => void;
+  onUse1mContextChange: (use1m: boolean) => void;
+  onFastModeChange: (enabled: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+interface TraitOption {
+  value: string;
+  label: string;
+}
+
+function TraitSegment({
+  label,
+  value,
+  options,
+  onChange,
+  disabled,
+}: {
+  label: string;
+  value: string;
+  options: ReadonlyArray<TraitOption>;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}) {
+  const classes = useUiConfig("TraitsPanel")?.classes;
+  const merge = useCn();
+  return (
+    <div className="flex items-start gap-2.5">
+      <span
+        className={
+          classes?.label ??
+          "w-[4.75rem] shrink-0 pt-1 text-[0.6875rem] leading-4 font-medium text-muted-foreground"
+        }
+      >
+        {label}
+      </span>
+      {options.length === 0 ? (
+        <span
+          className={
+            classes?.empty ?? "flex h-6 items-center text-[0.6875rem] leading-4 text-muted-foreground/70"
+          }
+        >
+          No options available
+        </span>
+      ) : (
+        <div
+          className="flex min-w-0 flex-1 flex-wrap gap-0.5"
+          role="radiogroup"
+          aria-label={label}
+        >
+          {options.map((option) => {
+            const selected = option.value === value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="radio"
+                aria-checked={selected}
+                disabled={disabled}
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => onChange(option.value)}
+                className={merge(
+                  classes?.option ??
+                    "h-6 rounded-md px-2 text-[0.6875rem] leading-4 font-medium transition-[color,background-color,scale] duration-150 ease-out active:scale-[0.96]",
+                  selected
+                    ? (classes?.optionSelected ?? "bg-background text-foreground")
+                    : (classes?.optionIdle ??
+                        "text-muted-foreground hover:bg-surface-secondary/80 hover:text-foreground"),
+                  disabled && "pointer-events-none opacity-50",
+                )}
+              >
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Compact trait controls for embedding in the model picker. Every section
+ * stays mounted so switching models cannot collapse the header; unsupported
+ * traits show a muted empty state.
+ */
+export function TraitsPanel({
+  config,
+  effortLevel,
+  thinkingEnabled,
+  use1mContext,
+  fastMode,
+  getLevelLabel,
+  onEffortLevelChange,
+  onThinkingEnabledChange,
+  onUse1mContextChange,
+  onFastModeChange,
+  disabled,
+  className,
+}: TraitsMenuProps) {
+  const controller = useOptionalPromptInputController();
+  const classes = useUiConfig("TraitsPanel")?.classes;
+  const merge = useCn();
+  const prompt = controller?.textInput.value ?? "";
+
+  const ultrathinkAvailable =
+    Boolean(config.reasoning?.ultrathink) && controller !== null;
+  const ultrathinkPromptControlled =
+    ultrathinkAvailable && isUltrathinkPrompt(prompt);
+  const ultrathinkInBodyText =
+    ultrathinkPromptControlled &&
+    isUltrathinkPrompt(prompt.replace(/^Ultrathink:\s*/i, ""));
+
+  const resolvedEffort = effortLevel ?? config.reasoning?.default ?? "";
+  const contextDefaultLabel = config.contextWindowDefaultLabel ?? "200K";
+
+  const handleEffortChange = (value: string) => {
+    if (!value || !config.reasoning) return;
+
+    if (value === "ultrathink") {
+      if (!controller) return;
+      const nextPrompt =
+        prompt.trim().length === 0
+          ? ULTRATHINK_PROMPT_PREFIX
+          : applyUltrathinkPrefix(prompt);
+      controller.textInput.setInput(nextPrompt);
+      return;
+    }
+
+    if (ultrathinkInBodyText) return;
+
+    if (ultrathinkPromptControlled && controller) {
+      controller.textInput.setInput(prompt.replace(/^Ultrathink:\s*/i, ""));
+    }
+
+    onEffortLevelChange(value);
+  };
+
+  const effortRadioValue = ultrathinkPromptControlled
+    ? "ultrathink"
+    : resolvedEffort;
+
+  const reasoningOptions: TraitOption[] = config.reasoning
+    ? [
+        ...config.reasoning.levels.map((level) => ({
+          value: level,
+          label: getLevelLabel(level),
+        })),
+        ...(ultrathinkAvailable
+          ? [{ value: "ultrathink", label: "Ultrathink" }]
+          : []),
+      ]
+    : [];
+
+  return (
+    <div className={merge("flex flex-col gap-1.5", className)}>
+      <div className="flex min-h-6 flex-col gap-1">
+        <TraitSegment
+          label="Reasoning"
+          value={effortRadioValue}
+          options={reasoningOptions}
+          onChange={handleEffortChange}
+          disabled={disabled || ultrathinkInBodyText}
+        />
+        {ultrathinkInBodyText ? (
+          <p
+            className={
+              classes?.note ?? "pl-[5.375rem] text-[0.6875rem] leading-snug text-muted-foreground/80"
+            }
+          >
+            Your prompt contains &quot;ultrathink&quot; in the text. Remove it
+            to change this option.
+          </p>
+        ) : null}
+      </div>
+      <TraitSegment
+        label="Speed"
+        value={fastMode ? "fast" : "standard"}
+        options={
+          config.fastMode
+            ? [
+                { value: "standard", label: "Standard" },
+                { value: "fast", label: "Fast" },
+              ]
+            : []
+        }
+        onChange={(value) => onFastModeChange(value === "fast")}
+        disabled={disabled}
+      />
+      <TraitSegment
+        label="Context"
+        value={use1mContext ? "1m" : "standard"}
+        options={
+          config.contextWindow1m
+            ? [
+                { value: "standard", label: contextDefaultLabel },
+                { value: "1m", label: "1M" },
+              ]
+            : []
+        }
+        onChange={(value) => onUse1mContextChange(value === "1m")}
+        disabled={disabled}
+      />
+      <TraitSegment
+        label="Thinking"
+        value={thinkingEnabled ? "on" : "off"}
+        options={
+          config.thinkingToggle
+            ? [
+                { value: "on", label: "On" },
+                { value: "off", label: "Off" },
+              ]
+            : []
+        }
+        onChange={(value) => onThinkingEnabledChange(value === "on")}
+        disabled={disabled}
+      />
+    </div>
+  );
+}