@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/prompt-input.js

@@ -0,0 +1,939 @@
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '@chatsdk-dev/ui/components/command';
+import { DropdownMenuItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '@chatsdk-dev/ui/components/dropdown-menu';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@chatsdk-dev/ui/components/hover-card';
+import { InputGroup, InputGroupTextarea, InputGroupAddon, InputGroupButton } from '@chatsdk-dev/ui/components/input-group';
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@chatsdk-dev/ui/components/select';
+import { Spinner } from '@chatsdk-dev/ui/components/spinner';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@chatsdk-dev/ui/components/tooltip';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { ImageIcon, Monitor, PlusIcon, CornerDownLeftIcon, SquareIcon, XIcon } from 'lucide-react';
+import { nanoid } from 'nanoid';
+import { createContext, useContext, useState, useCallback, useRef, useEffect, useMemo, Children } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var convertBlobUrlToDataUrl = async (url) => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.onerror = () => resolve(null);
+      reader.readAsDataURL(blob);
+    });
+  } catch {
+    return null;
+  }
+};
+var captureScreenshot = async () => {
+  if (typeof navigator === "undefined" || !navigator.mediaDevices?.getDisplayMedia) {
+    return null;
+  }
+  let stream = null;
+  const video = document.createElement("video");
+  video.muted = true;
+  video.playsInline = true;
+  try {
+    stream = await navigator.mediaDevices.getDisplayMedia({
+      audio: false,
+      video: true
+    });
+    video.srcObject = stream;
+    await new Promise((resolve, reject) => {
+      video.onloadedmetadata = () => resolve();
+      video.onerror = () => reject(new Error("Failed to load screen stream"));
+    });
+    await video.play();
+    const width = video.videoWidth;
+    const height = video.videoHeight;
+    if (!width || !height) {
+      return null;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return null;
+    }
+    context.drawImage(video, 0, 0, width, height);
+    const blob = await new Promise((resolve) => {
+      canvas.toBlob(resolve, "image/png");
+    });
+    if (!blob) {
+      return null;
+    }
+    const timestamp = (/* @__PURE__ */ new Date()).toISOString().replaceAll(/[:.]/g, "-").replace("T", "_").replace("Z", "");
+    return new File([blob], `screenshot-${timestamp}.png`, {
+      lastModified: Date.now(),
+      type: "image/png"
+    });
+  } finally {
+    if (stream) {
+      for (const track of stream.getTracks()) {
+        track.stop();
+      }
+    }
+    video.pause();
+    video.srcObject = null;
+  }
+};
+var PromptInputController = createContext(
+  null
+);
+var ProviderAttachmentsContext = createContext(
+  null
+);
+var usePromptInputController = () => {
+  const ctx = useContext(PromptInputController);
+  if (!ctx) {
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use usePromptInputController()."
+    );
+  }
+  return ctx;
+};
+var useOptionalPromptInputController = () => useContext(PromptInputController);
+var useProviderAttachments = () => {
+  const ctx = useContext(ProviderAttachmentsContext);
+  if (!ctx) {
+    throw new Error(
+      "Wrap your component inside <PromptInputProvider> to use useProviderAttachments()."
+    );
+  }
+  return ctx;
+};
+var useOptionalProviderAttachments = () => useContext(ProviderAttachmentsContext);
+var PromptInputProvider = ({
+  initialInput: initialTextInput = "",
+  children
+}) => {
+  const [textInput, setTextInput] = useState(initialTextInput);
+  const clearInput = useCallback(() => setTextInput(""), []);
+  const [attachmentFiles, setAttachmentFiles] = useState([]);
+  const fileInputRef = useRef(null);
+  const openRef = useRef(() => {
+  });
+  const add = useCallback((files) => {
+    const incoming = [...files];
+    if (incoming.length === 0) {
+      return;
+    }
+    setAttachmentFiles((prev) => [
+      ...prev,
+      ...incoming.map((file) => ({
+        filename: file.name,
+        id: nanoid(),
+        mediaType: file.type,
+        type: "file",
+        url: URL.createObjectURL(file)
+      }))
+    ]);
+  }, []);
+  const remove = useCallback((id) => {
+    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 = useCallback(() => {
+    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 = useCallback(() => {
+    openRef.current?.();
+  }, []);
+  const attachments = useMemo(
+    () => ({
+      add,
+      clear,
+      fileInputRef,
+      files: attachmentFiles,
+      openFileDialog,
+      remove
+    }),
+    [attachmentFiles, add, remove, clear, openFileDialog]
+  );
+  const __registerFileInput = useCallback(
+    (ref, open) => {
+      fileInputRef.current = ref.current;
+      openRef.current = open;
+    },
+    []
+  );
+  const controller = useMemo(
+    () => ({
+      __registerFileInput,
+      attachments,
+      textInput: {
+        clear: clearInput,
+        setInput: setTextInput,
+        value: textInput
+      }
+    }),
+    [textInput, clearInput, attachments, __registerFileInput]
+  );
+  return /* @__PURE__ */ jsx(PromptInputController.Provider, { value: controller, children: /* @__PURE__ */ jsx(ProviderAttachmentsContext.Provider, { value: attachments, children }) });
+};
+var LocalAttachmentsContext = createContext(null);
+var 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;
+};
+var LocalReferencedSourcesContext = createContext(null);
+var usePromptInputReferencedSources = () => {
+  const ctx = useContext(LocalReferencedSourcesContext);
+  if (!ctx) {
+    throw new Error(
+      "usePromptInputReferencedSources must be used within a LocalReferencedSourcesContext.Provider"
+    );
+  }
+  return ctx;
+};
+var PromptInputActionAddAttachments = ({
+  label = "Add photos or files",
+  ...props
+}) => {
+  const attachments = usePromptInputAttachments();
+  const handleSelect = useCallback(
+    (e) => {
+      e.preventDefault();
+      attachments.openFileDialog();
+    },
+    [attachments]
+  );
+  return /* @__PURE__ */ jsxs(DropdownMenuItem, { ...props, onSelect: handleSelect, children: [
+    /* @__PURE__ */ jsx(ImageIcon, { className: "mr-2 size-4" }),
+    " ",
+    label
+  ] });
+};
+var PromptInputActionAddScreenshot = ({
+  label = "Take screenshot",
+  onSelect,
+  ...props
+}) => {
+  const attachments = usePromptInputAttachments();
+  const handleSelect = useCallback(
+    async (event) => {
+      onSelect?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      try {
+        const screenshot = await captureScreenshot();
+        if (screenshot) {
+          attachments.add([screenshot]);
+        }
+      } catch (error) {
+        if (error instanceof DOMException && (error.name === "NotAllowedError" || error.name === "AbortError")) {
+          return;
+        }
+        throw error;
+      }
+    },
+    [onSelect, attachments]
+  );
+  return /* @__PURE__ */ jsxs(DropdownMenuItem, { ...props, onSelect: handleSelect, children: [
+    /* @__PURE__ */ jsx(Monitor, { className: "mr-2 size-4" }),
+    label
+  ] });
+};
+var PromptInput = ({
+  className,
+  accept,
+  multiple,
+  globalDrop,
+  syncHiddenInput,
+  maxFiles,
+  maxFileSize,
+  onError,
+  onSubmit,
+  children,
+  ...props
+}) => {
+  const controller = useOptionalPromptInputController();
+  const usingProvider = !!controller;
+  const inputRef = useRef(null);
+  const formRef = useRef(null);
+  const [items, setItems] = useState([]);
+  const files = usingProvider ? controller.attachments.files : items;
+  const [referencedSources, setReferencedSources] = useState([]);
+  const filesRef = useRef(files);
+  useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+  const openFileDialogLocal = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+  const matchesAccept = useCallback(
+    (f) => {
+      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;
+      });
+    },
+    [accept]
+  );
+  const addLocal = useCallback(
+    (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) => 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) : void 0;
+        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 = [];
+        for (const file of capped) {
+          next.push({
+            filename: file.name,
+            id: nanoid(),
+            mediaType: file.type,
+            type: "file",
+            url: URL.createObjectURL(file)
+          });
+        }
+        return [...prev, ...next];
+      });
+    },
+    [matchesAccept, maxFiles, maxFileSize, onError]
+  );
+  const removeLocal = useCallback(
+    (id) => 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 = useCallback(
+    (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) => 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) : void 0;
+      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);
+      }
+    },
+    [matchesAccept, maxFileSize, maxFiles, onError, files.length, controller]
+  );
+  const clearAttachments = useCallback(
+    () => usingProvider ? controller?.attachments.clear() : setItems((prev) => {
+      for (const file of prev) {
+        if (file.url) {
+          URL.revokeObjectURL(file.url);
+        }
+      }
+      return [];
+    }),
+    [usingProvider, controller]
+  );
+  const clearReferencedSources = useCallback(
+    () => setReferencedSources([]),
+    []
+  );
+  const add = usingProvider ? addWithProviderValidation : addLocal;
+  const remove = usingProvider ? controller.attachments.remove : removeLocal;
+  const openFileDialog = usingProvider ? controller.attachments.openFileDialog : openFileDialogLocal;
+  const clear = useCallback(() => {
+    clearAttachments();
+    clearReferencedSources();
+  }, [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) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+    };
+    const onDrop = (e) => {
+      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) => {
+      if (e.dataTransfer?.types?.includes("Files")) {
+        e.preventDefault();
+      }
+    };
+    const onDrop = (e) => {
+      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 = useCallback(
+    (event) => {
+      if (event.currentTarget.files) {
+        add(event.currentTarget.files);
+      }
+      event.currentTarget.value = "";
+    },
+    [add]
+  );
+  const attachmentsCtx = useMemo(
+    () => ({
+      add,
+      clear: clearAttachments,
+      fileInputRef: inputRef,
+      files: files.map((item) => ({ ...item, id: item.id })),
+      openFileDialog,
+      remove
+    }),
+    [files, add, remove, clearAttachments, openFileDialog]
+  );
+  const refsCtx = useMemo(
+    () => ({
+      add: (incoming) => {
+        const array = Array.isArray(incoming) ? incoming : [incoming];
+        setReferencedSources((prev) => [
+          ...prev,
+          ...array.map((s) => ({ ...s, id: nanoid() }))
+        ]);
+      },
+      clear: clearReferencedSources,
+      remove: (id) => {
+        setReferencedSources((prev) => prev.filter((s) => s.id !== id));
+      },
+      sources: referencedSources
+    }),
+    [referencedSources, clearReferencedSources]
+  );
+  const handleSubmit = useCallback(
+    async (event) => {
+      event.preventDefault();
+      const form = event.currentTarget;
+      const text = usingProvider ? controller.textInput.value : (() => {
+        const formData = new FormData(form);
+        return formData.get("message") || "";
+      })();
+      if (!usingProvider) {
+        form.reset();
+      }
+      try {
+        const convertedFiles = 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 {
+          }
+        } else {
+          clear();
+          if (usingProvider) {
+            controller.textInput.clear();
+          }
+        }
+      } catch {
+      }
+    },
+    [usingProvider, controller, files, onSubmit, clear]
+  );
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        accept,
+        "aria-label": "Upload files",
+        className: "hidden",
+        multiple,
+        onChange: handleChange,
+        ref: inputRef,
+        title: "Upload files",
+        type: "file"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "form",
+      {
+        className: cn("w-full", className),
+        onSubmit: handleSubmit,
+        ref: formRef,
+        ...props,
+        children: /* @__PURE__ */ jsx(InputGroup, { className: "overflow-hidden", children })
+      }
+    )
+  ] });
+  const withReferencedSources = /* @__PURE__ */ jsx(LocalReferencedSourcesContext.Provider, { value: refsCtx, children: inner });
+  return /* @__PURE__ */ jsx(LocalAttachmentsContext.Provider, { value: attachmentsCtx, children: withReferencedSources });
+};
+var PromptInputBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("contents", className), ...props });
+var PromptInputTextarea = ({
+  onChange,
+  onKeyDown,
+  className,
+  placeholder = "What would you like to know?",
+  ...props
+}) => {
+  const controller = useOptionalPromptInputController();
+  const attachments = usePromptInputAttachments();
+  const [isComposing, setIsComposing] = useState(false);
+  const handleKeyDown = useCallback(
+    (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"]'
+        );
+        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);
+        }
+      }
+    },
+    [onKeyDown, isComposing, attachments]
+  );
+  const handlePaste = useCallback(
+    (event) => {
+      const items = event.clipboardData?.items;
+      if (!items) {
+        return;
+      }
+      const files = [];
+      for (const item of items) {
+        if (item.kind === "file") {
+          const file = item.getAsFile();
+          if (file) {
+            files.push(file);
+          }
+        }
+      }
+      if (files.length > 0) {
+        event.preventDefault();
+        attachments.add(files);
+      }
+    },
+    [attachments]
+  );
+  const handleCompositionEnd = useCallback(() => setIsComposing(false), []);
+  const handleCompositionStart = useCallback(() => setIsComposing(true), []);
+  const controlledProps = controller ? {
+    onChange: (e) => {
+      controller.textInput.setInput(e.currentTarget.value);
+      onChange?.(e);
+    },
+    value: controller.textInput.value
+  } : {
+    onChange
+  };
+  return /* @__PURE__ */ jsx(
+    InputGroupTextarea,
+    {
+      className: cn("field-sizing-content max-h-48 min-h-16", className),
+      name: "message",
+      onCompositionEnd: handleCompositionEnd,
+      onCompositionStart: handleCompositionStart,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      placeholder,
+      ...props,
+      ...controlledProps
+    }
+  );
+};
+var PromptInputHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  InputGroupAddon,
+  {
+    align: "block-end",
+    className: cn("order-first flex-wrap gap-1", className),
+    ...props
+  }
+);
+var PromptInputFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  InputGroupAddon,
+  {
+    align: "block-end",
+    className: cn("justify-between gap-1", className),
+    ...props
+  }
+);
+var PromptInputTools = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex min-w-0 items-center gap-1", className),
+    ...props
+  }
+);
+var PromptInputButton = ({
+  variant = "ghost",
+  className,
+  size,
+  tooltip,
+  ...props
+}) => {
+  const newSize = size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+  const button = /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      className: cn(className),
+      size: newSize,
+      type: "button",
+      variant,
+      ...props
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  const tooltipContent = typeof tooltip === "string" ? tooltip : tooltip.content;
+  const shortcut = typeof tooltip === "string" ? void 0 : tooltip.shortcut;
+  const side = typeof tooltip === "string" ? "top" : tooltip.side ?? "top";
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: () => button }),
+    /* @__PURE__ */ jsxs(TooltipContent, { side, children: [
+      tooltipContent,
+      shortcut && /* @__PURE__ */ jsx("span", { className: "ml-2 text-muted-foreground", children: shortcut })
+    ] })
+  ] });
+};
+var PromptInputActionMenu = (props) => /* @__PURE__ */ jsx(DropdownMenu, { ...props });
+var PromptInputActionMenuTrigger = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  DropdownMenuTrigger,
+  {
+    render: () => /* @__PURE__ */ jsx(PromptInputButton, { className, ...props, children: children ?? /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" }) })
+  }
+);
+var PromptInputActionMenuContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: cn(className), ...props });
+var PromptInputActionMenuItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuItem, { className: cn(className), ...props });
+var PromptInputSubmit = ({
+  className,
+  variant = "primary",
+  size = "icon-sm",
+  status,
+  onStop,
+  onClick,
+  children,
+  ...props
+}) => {
+  const isGenerating = status === "submitted" || status === "streaming";
+  let Icon = /* @__PURE__ */ jsx(CornerDownLeftIcon, { className: "size-4" });
+  if (status === "submitted") {
+    Icon = /* @__PURE__ */ jsx(Spinner, {});
+  } else if (status === "streaming") {
+    Icon = /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" });
+  } else if (status === "error") {
+    Icon = /* @__PURE__ */ jsx(XIcon, { className: "size-4" });
+  }
+  const handleClick = useCallback(
+    (e) => {
+      if (isGenerating && onStop) {
+        e.preventDefault();
+        onStop();
+        return;
+      }
+      onClick?.(e);
+    },
+    [isGenerating, onStop, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      "aria-label": isGenerating ? "Stop" : "Submit",
+      className: cn(className),
+      onClick: handleClick,
+      size,
+      type: isGenerating && onStop ? "button" : "submit",
+      variant,
+      ...props,
+      children: children ?? Icon
+    }
+  );
+};
+var PromptInputSelect = (props) => /* @__PURE__ */ jsx(Select, { ...props });
+var PromptInputSelectTrigger = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  SelectTrigger,
+  {
+    className: cn(
+      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors",
+      "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
+      className
+    ),
+    ...props
+  }
+);
+var PromptInputSelectContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(SelectContent, { className: cn(className), ...props });
+var PromptInputSelectItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(SelectItem, { className: cn(className), ...props });
+var PromptInputSelectValue = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(SelectValue, { className: cn(className), ...props });
+var PromptInputHoverCard = ({
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCard, { ...props });
+var PromptInputHoverCardTrigger = (props) => /* @__PURE__ */ jsx(HoverCardTrigger, { ...props });
+var PromptInputHoverCardContent = ({
+  align = "start",
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCardContent, { align, ...props });
+var PromptInputTabsList = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn(className), ...props });
+var PromptInputTab = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn(className), ...props });
+var PromptInputTabLabel = ({
+  className,
+  ...props
+}) => (
+  // Content provided via children in props
+  // oxlint-disable-next-line eslint-plugin-jsx-a11y(heading-has-content)
+  /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn(
+        "mb-2 px-3 font-medium text-muted-foreground text-xs",
+        className
+      ),
+      ...props
+    }
+  )
+);
+var PromptInputTabBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), ...props });
+var PromptInputTabItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent",
+      className
+    ),
+    ...props
+  }
+);
+var PromptInputCommand = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Command, { className: cn(className), ...props });
+var PromptInputCommandInput = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandInput, { className: cn(className), ...props });
+var PromptInputCommandList = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandList, { className: cn(className), ...props });
+var PromptInputCommandEmpty = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandEmpty, { className: cn(className), ...props });
+var PromptInputCommandGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandGroup, { className: cn(className), ...props });
+var PromptInputCommandItem = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandItem, { className: cn(className), ...props });
+var PromptInputCommandSeparator = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(CommandSeparator, { className: cn(className), ...props });
+
+export { LocalReferencedSourcesContext, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };