@vvedantb/ui 0.1.1 → 0.1.2

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

@@ -1,1018 +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} />
-);
+"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} />
+);