@vvedantb/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,1018 @@
+"use client";
+import type { ChatStatus, FileUIPart, SourceDocumentUIPart } from "ai";
+import type {
+  ChangeEvent,
+  ChangeEventHandler,
+  ClipboardEventHandler,
+  ComponentProps,
+  FormEvent,
+  FormEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  MouseEvent,
+  PropsWithChildren,
+  ReactNode,
+  RefObject,
+} from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../ui/command";
+import {
+  DropdownMenu as Dropdown,
+  DropdownMenuTrigger as DropdownTrigger,
+  DropdownMenuContent as DropdownMenu,
+  DropdownMenuItem as DropdownItem,
+} from "../ui/dropdown-menu";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../ui/hover-card";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "../ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/radix-select";
+import { Spinner } from "../ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { cn } from "../utils/cn";
+import { segmentExpandedStateClass } from "../ui/surface-classes";
+import {
+  IconCornerDownLeft,
+  IconPhoto,
+  IconPlus,
+  IconSquare,
+  IconX,
+} from "@tabler/icons-react";
+import { nanoid } from "nanoid";
+import {
+  Children,
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+const convertBlobUrlToDataUrl = async (url: string): Promise<string | null> => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result as string);
+      reader.onerror = () => resolve(null);
+      reader.readAsDataURL(blob);
+    });
+  } catch {
+    return null;
+  }
+};
+export interface AttachmentsContext {
+  files: (FileUIPart & {
+    id: string;
+  })[];
+  add: (files: File[] | FileList) => void;
+  remove: (id: string) => void;
+  clear: () => void;
+  openFileDialog: () => void;
+  fileInputRef: RefObject<HTMLInputElement | null>;
+}
+export interface TextInputContext {
+  value: string;
+  setInput: (v: string) => void;
+  clear: () => void;
+}
+export interface PromptInputControllerProps {
+  textInput: TextInputContext;
+  attachments: AttachmentsContext;
+  __registerFileInput: (
+    ref: RefObject<HTMLInputElement | null>,
+    open: () => void,
+  ) => void;
+}
+const PromptInputController = createContext<PromptInputControllerProps | null>(
+  null,
+);
+const ProviderAttachmentsContext = createContext<AttachmentsContext | null>(
+  null,
+);
+export const usePromptInputController = () => {
+  const ctx = useContext(PromptInputController);
+  if (!ctx) {
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use usePromptInputController().",
+    );
+  }
+  return ctx;
+};
+const useOptionalPromptInputController = () =>
+  useContext(PromptInputController);
+export const useProviderAttachments = () => {
+  const ctx = useContext(ProviderAttachmentsContext);
+  if (!ctx) {
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use useProviderAttachments().",
+    );
+  }
+  return ctx;
+};
+const useOptionalProviderAttachments = () =>
+  useContext(ProviderAttachmentsContext);
+export type PromptInputProviderProps = PropsWithChildren<{
+  initialInput?: string;
+}>;
+export const PromptInputProvider = ({
+  initialInput: initialTextInput = "",
+  children,
+}: PromptInputProviderProps) => {
+  const [textInput, setTextInput] = useState(initialTextInput);
+  const clearInput = () => setTextInput("");
+  const [attachmentFiles, setAttachmentFiles] = useState<
+    (FileUIPart & {
+      id: string;
+    })[]
+  >([]);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const openRef = useRef<() => void>(() => {});
+  const add = (files: File[] | FileList) => {
+    const incoming = [...files];
+    if (incoming.length === 0) return;
+    setAttachmentFiles((prev) => [
+      ...prev,
+      ...incoming.map((file) => ({
+        filename: file.name,
+        id: nanoid(),
+        mediaType: file.type,
+        type: "file" as const,
+        url: URL.createObjectURL(file),
+      })),
+    ]);
+  };
+  const remove = (id: string) => {
+    setAttachmentFiles((prev) => {
+      const found = prev.find((f) => f.id === id);
+      if (found?.url) URL.revokeObjectURL(found.url);
+      return prev.filter((f) => f.id !== id);
+    });
+  };
+  const clear = () => {
+    setAttachmentFiles((prev) => {
+      for (const f of prev) {
+        if (f.url) URL.revokeObjectURL(f.url);
+      }
+      return [];
+    });
+  };
+  const attachmentsRef = useRef(attachmentFiles);
+  useEffect(() => {
+    attachmentsRef.current = attachmentFiles;
+  }, [attachmentFiles]);
+  useEffect(
+    () => () => {
+      for (const f of attachmentsRef.current) {
+        if (f.url) URL.revokeObjectURL(f.url);
+      }
+    },
+    [],
+  );
+  const openFileDialog = () => {
+    openRef.current?.();
+  };
+  const attachments = {
+    add,
+    clear,
+    fileInputRef,
+    files: attachmentFiles,
+    openFileDialog,
+    remove,
+  };
+  const __registerFileInput = (
+    ref: RefObject<HTMLInputElement | null>,
+    open: () => void,
+  ) => {
+    fileInputRef.current = ref.current;
+    openRef.current = open;
+  };
+  const controller = {
+    __registerFileInput,
+    attachments,
+    textInput: {
+      clear: clearInput,
+      setInput: setTextInput,
+      value: textInput,
+    },
+  };
+  return (
+    <PromptInputController.Provider value={controller}>
+      <ProviderAttachmentsContext.Provider value={attachments}>
+        {children}
+      </ProviderAttachmentsContext.Provider>
+    </PromptInputController.Provider>
+  );
+};
+const LocalAttachmentsContext = createContext<AttachmentsContext | null>(null);
+export const usePromptInputAttachments = () => {
+  const provider = useOptionalProviderAttachments();
+  const local = useContext(LocalAttachmentsContext);
+  const context = local ?? provider;
+  if (!context) {
+    throw new Error(
+      "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider",
+    );
+  }
+  return context;
+};
+export interface ReferencedSourcesContext {
+  sources: (SourceDocumentUIPart & {
+    id: string;
+  })[];
+  add: (sources: SourceDocumentUIPart[] | SourceDocumentUIPart) => void;
+  remove: (id: string) => void;
+  clear: () => void;
+}
+export const LocalReferencedSourcesContext =
+  createContext<ReferencedSourcesContext | null>(null);
+export const usePromptInputReferencedSources = () => {
+  const ctx = useContext(LocalReferencedSourcesContext);
+  if (!ctx) {
+    throw new Error(
+      "usePromptInputReferencedSources must be used within a LocalReferencedSourcesContext.Provider",
+    );
+  }
+  return ctx;
+};
+export type PromptInputActionAddAttachmentsProps = ComponentProps<
+  typeof DropdownItem
+> & {
+  label?: string;
+};
+export const PromptInputActionAddAttachments = ({
+  label = "Add photos or files",
+  ...props
+}: PromptInputActionAddAttachmentsProps) => {
+  const attachments = usePromptInputAttachments();
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    attachments.openFileDialog();
+  };
+  return (
+    <DropdownItem {...props} onClick={handleClick}>
+      <IconPhoto className="mr-2 size-4" /> {label}
+    </DropdownItem>
+  );
+};
+export interface PromptInputMessage {
+  text: string;
+  files: FileUIPart[];
+}
+export type PromptInputProps = Omit<
+  HTMLAttributes<HTMLFormElement>,
+  "onSubmit" | "onError"
+> & {
+  accept?: string;
+  multiple?: boolean;
+  globalDrop?: boolean;
+  syncHiddenInput?: boolean;
+  maxFiles?: number;
+  maxFileSize?: number;
+  containerClassName?: string;
+  onError?: (err: {
+    code: "max_files" | "max_file_size" | "accept";
+    message: string;
+  }) => void;
+  onSubmit: (
+    message: PromptInputMessage,
+    event: FormEvent<HTMLFormElement>,
+  ) => void | Promise<void>;
+};
+export const PromptInput = ({
+  className,
+  accept,
+  multiple,
+  globalDrop,
+  syncHiddenInput,
+  maxFiles,
+  maxFileSize,
+  containerClassName,
+  onError,
+  onSubmit,
+  children,
+  ...props
+}: PromptInputProps) => {
+  const controller = useOptionalPromptInputController();
+  const usingProvider = !!controller;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const formRef = useRef<HTMLFormElement | null>(null);
+  const [items, setItems] = useState<
+    (FileUIPart & {
+      id: string;
+    })[]
+  >([]);
+  const files = usingProvider ? controller.attachments.files : items;
+  const [referencedSources, setReferencedSources] = useState<
+    (SourceDocumentUIPart & {
+      id: string;
+    })[]
+  >([]);
+  const filesRef = useRef(files);
+  useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+  const openFileDialogLocal = () => {
+    inputRef.current?.click();
+  };
+  const matchesAccept = (f: File) => {
+    if (!accept || accept.trim() === "") return true;
+    const patterns = accept
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
+    return patterns.some((pattern) => {
+      if (pattern.endsWith("/*")) {
+        const prefix = pattern.slice(0, -1);
+        return f.type.startsWith(prefix);
+      }
+      return f.type === pattern;
+    });
+  };
+  const addLocal = (fileList: File[] | FileList) => {
+    const incoming = [...fileList];
+    const accepted = incoming.filter((f) => matchesAccept(f));
+    if (incoming.length && accepted.length === 0) {
+      onError?.({
+        code: "accept",
+        message: "No files match the accepted types.",
+      });
+      return;
+    }
+    const withinSize = (f: File) =>
+      maxFileSize ? f.size <= maxFileSize : true;
+    const sized = accepted.filter(withinSize);
+    if (accepted.length > 0 && sized.length === 0) {
+      onError?.({
+        code: "max_file_size",
+        message: "All files exceed the maximum size.",
+      });
+      return;
+    }
+    setItems((prev) => {
+      const capacity =
+        typeof maxFiles === "number"
+          ? Math.max(0, maxFiles - prev.length)
+          : undefined;
+      const capped =
+        typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+      if (typeof capacity === "number" && sized.length > capacity) {
+        onError?.({
+          code: "max_files",
+          message: "Too many files. Some were not added.",
+        });
+      }
+      const next: (FileUIPart & {
+        id: string;
+      })[] = [];
+      for (const file of capped) {
+        next.push({
+          filename: file.name,
+          id: nanoid(),
+          mediaType: file.type,
+          type: "file",
+          url: URL.createObjectURL(file),
+        });
+      }
+      return [...prev, ...next];
+    });
+  };
+  const removeLocal = (id: string) =>
+    setItems((prev) => {
+      const found = prev.find((file) => file.id === id);
+      if (found?.url) URL.revokeObjectURL(found.url);
+      return prev.filter((file) => file.id !== id);
+    });
+  const addWithProviderValidation = (fileList: File[] | FileList) => {
+    const incoming = [...fileList];
+    const accepted = incoming.filter((f) => matchesAccept(f));
+    if (incoming.length && accepted.length === 0) {
+      onError?.({
+        code: "accept",
+        message: "No files match the accepted types.",
+      });
+      return;
+    }
+    const withinSize = (f: File) =>
+      maxFileSize ? f.size <= maxFileSize : true;
+    const sized = accepted.filter(withinSize);
+    if (accepted.length > 0 && sized.length === 0) {
+      onError?.({
+        code: "max_file_size",
+        message: "All files exceed the maximum size.",
+      });
+      return;
+    }
+    const currentCount = files.length;
+    const capacity =
+      typeof maxFiles === "number"
+        ? Math.max(0, maxFiles - currentCount)
+        : undefined;
+    const capped =
+      typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+    if (typeof capacity === "number" && sized.length > capacity) {
+      onError?.({
+        code: "max_files",
+        message: "Too many files. Some were not added.",
+      });
+    }
+    if (capped.length > 0) {
+      controller?.attachments.add(capped);
+    }
+  };
+  const clearAttachments = () =>
+    usingProvider
+      ? controller?.attachments.clear()
+      : setItems((prev) => {
+          for (const file of prev) {
+            if (file.url) URL.revokeObjectURL(file.url);
+          }
+          return [];
+        });
+  const clearReferencedSources = () => setReferencedSources([]);
+  const add = usingProvider ? addWithProviderValidation : addLocal;
+  const remove = usingProvider ? controller.attachments.remove : removeLocal;
+  const openFileDialog = usingProvider
+    ? controller.attachments.openFileDialog
+    : openFileDialogLocal;
+  const clear = () => {
+    clearAttachments();
+    clearReferencedSources();
+  };
+  useEffect(() => {
+    if (!usingProvider) return;
+    controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+  }, [usingProvider, controller]);
+  useEffect(() => {
+    if (syncHiddenInput && inputRef.current && files.length === 0) {
+      inputRef.current.value = "";
+    }
+  }, [files, syncHiddenInput]);
+  useEffect(() => {
+    const form = formRef.current;
+    if (!form) return;
+    if (globalDrop) return;
+    const onDragOver = (e: DragEvent) => {
+      if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+    };
+    const onDrop = (e: DragEvent) => {
+      if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+        add(e.dataTransfer.files);
+      }
+    };
+    form.addEventListener("dragover", onDragOver);
+    form.addEventListener("drop", onDrop);
+    return () => {
+      form.removeEventListener("dragover", onDragOver);
+      form.removeEventListener("drop", onDrop);
+    };
+  }, [add, globalDrop]);
+  useEffect(() => {
+    if (!globalDrop) return;
+    const onDragOver = (e: DragEvent) => {
+      if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+    };
+    const onDrop = (e: DragEvent) => {
+      if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+        add(e.dataTransfer.files);
+      }
+    };
+    document.addEventListener("dragover", onDragOver);
+    document.addEventListener("drop", onDrop);
+    return () => {
+      document.removeEventListener("dragover", onDragOver);
+      document.removeEventListener("drop", onDrop);
+    };
+  }, [add, globalDrop]);
+  useEffect(
+    () => () => {
+      if (!usingProvider) {
+        for (const f of filesRef.current) {
+          if (f.url) URL.revokeObjectURL(f.url);
+        }
+      }
+    },
+    [usingProvider],
+  );
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    if (event.currentTarget.files) add(event.currentTarget.files);
+    event.currentTarget.value = "";
+  };
+  const attachmentsCtx = {
+    add,
+    clear: clearAttachments,
+    fileInputRef: inputRef,
+    files: files.map((item) => ({ ...item, id: item.id })),
+    openFileDialog,
+    remove,
+  };
+  const refsCtx = {
+    add: (incoming: SourceDocumentUIPart[] | SourceDocumentUIPart) => {
+      const array = Array.isArray(incoming) ? incoming : [incoming];
+      setReferencedSources((prev) => [
+        ...prev,
+        ...array.map((s) => ({ ...s, id: nanoid() })),
+      ]);
+    },
+    clear: clearReferencedSources,
+    remove: (id: string) => {
+      setReferencedSources((prev) => prev.filter((s) => s.id !== id));
+    },
+    sources: referencedSources,
+  };
+  const handleSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const text = usingProvider
+      ? controller.textInput.value
+      : (() => {
+          const formData = new FormData(form);
+          return (formData.get("message") as string) || "";
+        })();
+    if (!usingProvider) form.reset();
+    try {
+      const convertedFiles: FileUIPart[] = await Promise.all(
+        files.map(async ({ id: _id, ...item }) => {
+          if (item.url?.startsWith("blob:")) {
+            const dataUrl = await convertBlobUrlToDataUrl(item.url);
+            return { ...item, url: dataUrl ?? item.url };
+          }
+          return item;
+        }),
+      );
+      const result = onSubmit({ files: convertedFiles, text }, event);
+      if (result instanceof Promise) {
+        try {
+          await result;
+          clear();
+          if (usingProvider) controller.textInput.clear();
+        } catch {
+          /* Don't clear on error */
+        }
+      } else {
+        clear();
+        if (usingProvider) controller.textInput.clear();
+      }
+    } catch {
+      /* Don't clear on error */
+    }
+  };
+  const inner = (
+    <>
+      <input
+        accept={accept}
+        aria-label="Upload files"
+        className="hidden"
+        multiple={multiple}
+        onChange={handleChange}
+        ref={inputRef}
+        title="Upload files"
+        type="file"
+      />
+      <form
+        className={cn("w-full", className)}
+        onSubmit={handleSubmit}
+        ref={formRef}
+        {...props}
+      >
+        <InputGroup className={cn("overflow-hidden", containerClassName)}>
+          {children}
+        </InputGroup>
+      </form>
+    </>
+  );
+  const withReferencedSources = (
+    <LocalReferencedSourcesContext.Provider value={refsCtx}>
+      {inner}
+    </LocalReferencedSourcesContext.Provider>
+  );
+  return (
+    <LocalAttachmentsContext.Provider value={attachmentsCtx}>
+      {withReferencedSources}
+    </LocalAttachmentsContext.Provider>
+  );
+};
+export type PromptInputBodyProps = HTMLAttributes<HTMLDivElement>;
+export const PromptInputBody = ({
+  className,
+  ...props
+}: PromptInputBodyProps) => (
+  <div className={cn("contents", className)} {...props} />
+);
+export type PromptInputTextareaProps = ComponentProps<
+  typeof InputGroupTextarea
+>;
+export const PromptInputTextarea = ({
+  onChange,
+  onKeyDown,
+  className,
+  placeholder = "What would you like to know?",
+  ...props
+}: PromptInputTextareaProps) => {
+  const controller = useOptionalPromptInputController();
+  const attachments = usePromptInputAttachments();
+  const [isComposing, setIsComposing] = useState(false);
+  const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Enter") {
+      if (isComposing || e.nativeEvent.isComposing) return;
+      if (e.shiftKey) return;
+      e.preventDefault();
+      const { form } = e.currentTarget;
+      const submitButton = form?.querySelector(
+        'button[type="submit"]',
+      ) as HTMLButtonElement | null;
+      if (submitButton?.disabled) return;
+      form?.requestSubmit();
+    }
+    if (
+      e.key === "Backspace" &&
+      e.currentTarget.value === "" &&
+      attachments.files.length > 0
+    ) {
+      e.preventDefault();
+      const lastAttachment = attachments.files.at(-1);
+      if (lastAttachment) attachments.remove(lastAttachment.id);
+    }
+  };
+  const handlePaste: ClipboardEventHandler<HTMLTextAreaElement> = (event) => {
+    const items = event.clipboardData?.items;
+    if (!items) return;
+    const pastedFiles: File[] = [];
+    for (const item of items) {
+      if (item.kind === "file") {
+        const file = item.getAsFile();
+        if (file) pastedFiles.push(file);
+      }
+    }
+    if (pastedFiles.length > 0) {
+      event.preventDefault();
+      attachments.add(pastedFiles);
+    }
+  };
+  const handleCompositionEnd = () => setIsComposing(false);
+  const handleCompositionStart = () => setIsComposing(true);
+  const controlledProps = controller
+    ? {
+        onChange: (e: ChangeEvent<HTMLTextAreaElement>) => {
+          controller.textInput.setInput(e.currentTarget.value);
+          onChange?.(e);
+        },
+        value: controller.textInput.value,
+      }
+    : { onChange };
+  return (
+    <InputGroupTextarea
+      className={cn("field-sizing-content max-h-48 min-h-16", className)}
+      name="message"
+      onCompositionEnd={handleCompositionEnd}
+      onCompositionStart={handleCompositionStart}
+      onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
+      placeholder={placeholder}
+      {...props}
+      {...controlledProps}
+    />
+  );
+};
+export type PromptInputHeaderProps = Omit<
+  ComponentProps<typeof InputGroupAddon>,
+  "align"
+>;
+export const PromptInputHeader = ({
+  className,
+  ...props
+}: PromptInputHeaderProps) => (
+  <InputGroupAddon
+    align="block-end"
+    className={cn("order-first flex-wrap gap-1", className)}
+    {...props}
+  />
+);
+export type PromptInputFooterProps = Omit<
+  ComponentProps<typeof InputGroupAddon>,
+  "align"
+>;
+export const PromptInputFooter = ({
+  className,
+  ...props
+}: PromptInputFooterProps) => (
+  <InputGroupAddon
+    align="block-end"
+    className={cn("justify-between gap-1", className)}
+    {...props}
+  />
+);
+export type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;
+export const PromptInputTools = ({
+  className,
+  ...props
+}: PromptInputToolsProps) => (
+  <div
+    className={cn("flex min-w-0 items-center gap-1", className)}
+    {...props}
+  />
+);
+export type PromptInputButtonTooltip =
+  | string
+  | {
+      content: ReactNode;
+      shortcut?: string;
+      side?: ComponentProps<typeof TooltipContent>["side"];
+    };
+export type PromptInputButtonProps = ComponentProps<typeof InputGroupButton> & {
+  tooltip?: PromptInputButtonTooltip;
+};
+export const PromptInputButton = ({
+  variant = "ghost",
+  className,
+  size,
+  tooltip,
+  ...props
+}: PromptInputButtonProps) => {
+  const newSize =
+    size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+  const button = (
+    <InputGroupButton
+      className={cn(className)}
+      size={newSize}
+      type="button"
+      variant={variant}
+      {...props}
+    />
+  );
+  if (!tooltip) return button;
+  const tooltipContent =
+    typeof tooltip === "string" ? tooltip : tooltip.content;
+  const shortcut = typeof tooltip === "string" ? undefined : tooltip.shortcut;
+  const side = typeof tooltip === "string" ? "top" : tooltip.side ?? "top";
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side={side}>
+        {tooltipContent}
+        {shortcut && <span className="ml-2 text-muted">{shortcut}</span>}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+export type PromptInputActionMenuProps = ComponentProps<typeof Dropdown>;
+export const PromptInputActionMenu = (props: PromptInputActionMenuProps) => (
+  <Dropdown {...props} />
+);
+export type PromptInputActionMenuTriggerProps = PromptInputButtonProps;
+export const PromptInputActionMenuTrigger = ({
+  className,
+  children,
+  ...props
+}: PromptInputActionMenuTriggerProps) => (
+  <DropdownTrigger>
+    <PromptInputButton className={className} {...props}>
+      {children ?? <IconPlus className="size-4" />}
+    </PromptInputButton>
+  </DropdownTrigger>
+);
+export type PromptInputActionMenuContentProps = ComponentProps<
+  typeof DropdownMenu
+>;
+export const PromptInputActionMenuContent = ({
+  className,
+  ...props
+}: PromptInputActionMenuContentProps) => (
+  <DropdownMenu align="start" className={cn(className)} {...props} />
+);
+export type PromptInputActionMenuItemProps = ComponentProps<
+  typeof DropdownItem
+>;
+export const PromptInputActionMenuItem = ({
+  className,
+  ...props
+}: PromptInputActionMenuItemProps) => (
+  <DropdownItem className={cn(className)} {...props} />
+);
+export type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
+  status?: ChatStatus;
+  onStop?: () => void;
+};
+export const PromptInputSubmit = ({
+  className,
+  variant = "default",
+  size = "icon-sm",
+  status,
+  onStop,
+  onClick,
+  children,
+  ...props
+}: PromptInputSubmitProps) => {
+  const isGenerating = status === "submitted" || status === "streaming";
+  let Icon = <IconCornerDownLeft className="size-4" />;
+  if (status === "submitted") {
+    Icon = <Spinner size="sm" />;
+  } else if (status === "streaming") {
+    Icon = <IconSquare className="size-4" />;
+  } else if (status === "error") {
+    Icon = <IconX className="size-4" />;
+  }
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (isGenerating && onStop) {
+      e.preventDefault();
+      onStop();
+      return;
+    }
+    onClick?.(e);
+  };
+  return (
+    <InputGroupButton
+      aria-label={isGenerating ? "Stop" : "Submit"}
+      className={cn(className)}
+      onClick={handleClick}
+      size={size}
+      type={isGenerating && onStop ? "button" : "submit"}
+      variant={variant}
+      {...props}
+    >
+      {children ?? Icon}
+    </InputGroupButton>
+  );
+};
+export type PromptInputModelSelectProps = ComponentProps<typeof Select>;
+export const PromptInputModelSelect = (props: PromptInputModelSelectProps) => (
+  <Select {...props} />
+);
+export type PromptInputModelSelectTriggerProps = ComponentProps<
+  typeof SelectTrigger
+>;
+export const PromptInputModelSelectTrigger = ({
+  className,
+  ...props
+}: PromptInputModelSelectTriggerProps) => (
+  <SelectTrigger
+    className={cn(
+      "border-none bg-transparent font-medium text-muted shadow-none transition-[color,transform] duration-150 ease-out active:scale-[0.97]",
+      "hover:bg-surface-secondary hover:text-foreground",
+      segmentExpandedStateClass,
+      className,
+    )}
+    {...props}
+  />
+);
+export type PromptInputModelSelectContentProps = ComponentProps<
+  typeof SelectContent
+>;
+export const PromptInputModelSelectContent = ({
+  className,
+  ...props
+}: PromptInputModelSelectContentProps) => (
+  <SelectContent className={cn(className)} {...props} />
+);
+export type PromptInputModelSelectItemProps = ComponentProps<typeof SelectItem>;
+export const PromptInputModelSelectItem = ({
+  className,
+  ...props
+}: PromptInputModelSelectItemProps) => (
+  <SelectItem className={cn(className)} {...props} />
+);
+export type PromptInputModelSelectValueProps = ComponentProps<
+  typeof SelectValue
+>;
+export const PromptInputModelSelectValue = ({
+  className,
+  ...props
+}: PromptInputModelSelectValueProps) => (
+  <SelectValue className={cn(className)} {...props} />
+);
+export type PromptInputHoverCardProps = ComponentProps<typeof HoverCard>;
+export const PromptInputHoverCard = ({
+  openDelay = 0,
+  closeDelay = 0,
+  ...props
+}: PromptInputHoverCardProps) => (
+  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />
+);
+export type PromptInputHoverCardTriggerProps = ComponentProps<
+  typeof HoverCardTrigger
+>;
+export const PromptInputHoverCardTrigger = (
+  props: PromptInputHoverCardTriggerProps,
+) => <HoverCardTrigger {...props} />;
+export type PromptInputHoverCardContentProps = ComponentProps<
+  typeof HoverCardContent
+>;
+export const PromptInputHoverCardContent = ({
+  align = "start",
+  ...props
+}: PromptInputHoverCardContentProps) => (
+  <HoverCardContent align={align} {...props} />
+);
+export type PromptInputTabsListProps = HTMLAttributes<HTMLDivElement>;
+export const PromptInputTabsList = ({
+  className,
+  ...props
+}: PromptInputTabsListProps) => <div className={cn(className)} {...props} />;
+export type PromptInputTabProps = HTMLAttributes<HTMLDivElement>;
+export const PromptInputTab = ({
+  className,
+  ...props
+}: PromptInputTabProps) => <div className={cn(className)} {...props} />;
+export type PromptInputTabLabelProps = HTMLAttributes<HTMLHeadingElement>;
+export const PromptInputTabLabel = ({
+  className,
+  ...props
+}: PromptInputTabLabelProps) => (
+  <h3
+    className={cn("mb-2 px-3 font-medium text-muted text-xs", className)}
+    {...props}
+  />
+);
+export type PromptInputTabBodyProps = HTMLAttributes<HTMLDivElement>;
+export const PromptInputTabBody = ({
+  className,
+  ...props
+}: PromptInputTabBodyProps) => (
+  <div className={cn("space-y-1", className)} {...props} />
+);
+export type PromptInputTabItemProps = HTMLAttributes<HTMLDivElement>;
+export const PromptInputTabItem = ({
+  className,
+  ...props
+}: PromptInputTabItemProps) => (
+  <div
+    className={cn(
+      "flex items-center gap-2 rounded-md px-3 py-2 text-xs transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary",
+      className,
+    )}
+    {...props}
+  />
+);
+export type PromptInputCommandProps = ComponentProps<typeof Command>;
+export const PromptInputCommand = ({
+  className,
+  ...props
+}: PromptInputCommandProps) => <Command className={cn(className)} {...props} />;
+export type PromptInputCommandInputProps = ComponentProps<typeof CommandInput>;
+export const PromptInputCommandInput = ({
+  className,
+  ...props
+}: PromptInputCommandInputProps) => (
+  <CommandInput className={cn(className)} {...props} />
+);
+export type PromptInputCommandListProps = ComponentProps<typeof CommandList>;
+export const PromptInputCommandList = ({
+  className,
+  ...props
+}: PromptInputCommandListProps) => (
+  <CommandList className={cn(className)} {...props} />
+);
+export type PromptInputCommandEmptyProps = ComponentProps<typeof CommandEmpty>;
+export const PromptInputCommandEmpty = ({
+  className,
+  ...props
+}: PromptInputCommandEmptyProps) => (
+  <CommandEmpty className={cn(className)} {...props} />
+);
+export type PromptInputCommandGroupProps = ComponentProps<typeof CommandGroup>;
+export const PromptInputCommandGroup = ({
+  className,
+  ...props
+}: PromptInputCommandGroupProps) => (
+  <CommandGroup className={cn(className)} {...props} />
+);
+export type PromptInputCommandItemProps = ComponentProps<typeof CommandItem>;
+export const PromptInputCommandItem = ({
+  className,
+  ...props
+}: PromptInputCommandItemProps) => (
+  <CommandItem className={cn(className)} {...props} />
+);
+export type PromptInputCommandSeparatorProps = ComponentProps<
+  typeof CommandSeparator
+>;
+export const PromptInputCommandSeparator = ({
+  className,
+  ...props
+}: PromptInputCommandSeparatorProps) => (
+  <CommandSeparator className={cn(className)} {...props} />
+);