@elabs-ai/components-ai 4.2.0 → 5.0.0

package/dist/chunk-SSGJ6MEM.js

@@ -0,0 +1,1076 @@
+"use client";
+
+// src/prompt-input.tsx
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from "@elabs-ai/components-ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@elabs-ai/components-ui";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@elabs-ai/components-ui";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea
+} from "@elabs-ai/components-ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@elabs-ai/components-ui";
+import { Spinner } from "@elabs-ai/components-ui";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import { CornerDownLeftIcon, ImageIcon, Monitor, PlusIcon, SquareIcon, XIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } 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 PromptInputSubmitStateContext = createContext(
+  null
+);
+var useOptionalSubmitState = () => useContext(PromptInputSubmitStateContext);
+var SUBMIT_SLOT = "prompt-input-submit";
+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: "me-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: "me-2 size-4" }),
+    label
+  ] });
+};
+var PromptInput = ({
+  className,
+  surfaceClassName,
+  tone = "surface",
+  accept,
+  multiple,
+  globalDrop,
+  syncHiddenInput,
+  maxFiles,
+  maxFileSize,
+  onError,
+  onSubmit,
+  children,
+  ...props
+}) => {
+  const controller = useOptionalPromptInputController();
+  const usingProvider = !!controller;
+  const { t } = useLocale();
+  const inputRef = useRef(null);
+  const formRef = useRef(null);
+  const isSubmittingRef = useRef(false);
+  const [items, setItems] = useState([]);
+  const files = usingProvider ? controller.attachments.files : items;
+  const [hasLocalText, setHasLocalText] = useState(false);
+  const hasText = usingProvider ? controller.textInput.value.trim().length > 0 : hasLocalText;
+  const [hasDedicatedStop, setHasDedicatedStop] = useState(false);
+  const stopCountRef = useRef(0);
+  const registerStop = useCallback(() => {
+    stopCountRef.current += 1;
+    setHasDedicatedStop(true);
+    return () => {
+      stopCountRef.current = Math.max(0, stopCountRef.current - 1);
+      if (stopCountRef.current === 0) {
+        setHasDedicatedStop(false);
+      }
+    };
+  }, []);
+  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: t("ai.promptInput.errorAccept")
+        });
+        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: t("ai.promptInput.errorMaxFileSize")
+        });
+        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: t("ai.promptInput.errorMaxFiles")
+          });
+        }
+        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: t("ai.promptInput.errorAccept")
+        });
+        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: t("ai.promptInput.errorMaxFileSize")
+        });
+        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: t("ai.promptInput.errorMaxFiles")
+        });
+      }
+      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 submitState = useMemo(
+    () => ({
+      canSubmit: hasText || files.length > 0,
+      hasDedicatedStop,
+      registerStop,
+      setHasText: setHasLocalText
+    }),
+    [hasText, files.length, hasDedicatedStop, registerStop]
+  );
+  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();
+      if (isSubmittingRef.current) {
+        return;
+      }
+      const form = event.currentTarget;
+      const text = usingProvider ? controller.textInput.value : (() => {
+        const formData = new FormData(form);
+        return formData.get("message") || "";
+      })();
+      if (text.trim().length === 0 && files.length === 0) {
+        return;
+      }
+      isSubmittingRef.current = true;
+      const textarea = usingProvider ? null : form.querySelector('textarea[name="message"]');
+      const restoreTextOnFailure = () => {
+        if (textarea) {
+          textarea.value = text;
+          setHasLocalText(text.trim().length > 0);
+        }
+      };
+      if (!usingProvider) {
+        form.reset();
+        setHasLocalText(false);
+      }
+      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 {
+            restoreTextOnFailure();
+          }
+        } else {
+          clear();
+          if (usingProvider) {
+            controller.textInput.clear();
+          }
+        }
+      } catch {
+        restoreTextOnFailure();
+      } finally {
+        isSubmittingRef.current = false;
+      }
+    },
+    [usingProvider, controller, files, onSubmit, clear]
+  );
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        accept,
+        "aria-label": t("ai.promptInput.uploadFiles"),
+        className: "hidden",
+        multiple,
+        onChange: handleChange,
+        ref: inputRef,
+        title: t("ai.promptInput.uploadFiles"),
+        type: "file"
+      }
+    ),
+    /* @__PURE__ */ jsx("form", { className: cn("w-full", className), onSubmit: handleSubmit, ref: formRef, ...props, children: /* @__PURE__ */ jsx(InputGroup, { variant: tone, className: cn("overflow-hidden", surfaceClassName), children }) })
+  ] });
+  const withReferencedSources = /* @__PURE__ */ jsx(LocalReferencedSourcesContext.Provider, { value: refsCtx, children: /* @__PURE__ */ jsx(PromptInputSubmitStateContext.Provider, { value: submitState, 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,
+  ...props
+}) => {
+  const { t } = useLocale();
+  const controller = useOptionalPromptInputController();
+  const attachments = usePromptInputAttachments();
+  const submitState = useOptionalSubmitState();
+  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 submitControl = form?.querySelector(
+          `[data-slot="${SUBMIT_SLOT}"]`
+        );
+        const action = submitControl?.dataset.action ?? (submitControl?.dataset.generating === "true" ? "stop" : void 0);
+        if (submitControl?.disabled || submitControl?.getAttribute("aria-disabled") === "true" || action === "stop") {
+          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
+  } : {
+    // Uncontrolled: report only the empty↔non-empty transition so the submit
+    // affordance can enable/disable. Boolean state ⇒ React bails out on
+    // identical values, so this stays cheap per keystroke.
+    onChange: (e) => {
+      submitState?.setHasText(e.currentTarget.value.trim().length > 0);
+      onChange?.(e);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    InputGroupTextarea,
+    {
+      className: cn("field-sizing-content max-h-48 min-h-10", className),
+      name: "message",
+      onCompositionEnd: handleCompositionEnd,
+      onCompositionStart: handleCompositionStart,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      placeholder: placeholder ?? t("ai.promptInput.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 hasVisibleText = (node) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node).trim().length > 0;
+  }
+  if (Array.isArray(node)) {
+    return node.some(hasVisibleText);
+  }
+  if (isValidElement(node)) {
+    return hasVisibleText(node.props.children);
+  }
+  return false;
+};
+var PromptInputButton = ({
+  variant = "ghost",
+  className,
+  size,
+  tooltip,
+  "aria-label": ariaLabelProp,
+  ...props
+}) => {
+  const newSize = size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+  const tooltipContent = tooltip ? typeof tooltip === "string" ? tooltip : tooltip.content : void 0;
+  const isIconOnly = !hasVisibleText(props.children);
+  const ariaLabel = ariaLabelProp ?? (isIconOnly && typeof tooltipContent === "string" ? tooltipContent : void 0);
+  const button = /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      className: cn(className),
+      size: newSize,
+      type: "button",
+      variant,
+      ...props,
+      "aria-label": ariaLabel
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  const shortcut = typeof tooltip === "string" ? void 0 : tooltip.shortcut;
+  const side = typeof tooltip === "string" ? "top" : tooltip.side ?? "top";
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsxs(TooltipContent, { side, children: [
+      tooltipContent,
+      shortcut && /* @__PURE__ */ jsx("span", { className: "ms-2 text-muted-foreground", children: shortcut })
+    ] })
+  ] }) });
+};
+var PromptInputActionMenu = (props) => /* @__PURE__ */ jsx(DropdownMenu, { ...props });
+var PromptInputActionMenuTrigger = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__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 = "default",
+  size = "icon-sm",
+  status,
+  onStop,
+  onClick,
+  children,
+  sendIcon,
+  disabled,
+  ...props
+}) => {
+  const { t } = useLocale();
+  const isGenerating = status === "submitted" || status === "streaming";
+  const submitState = useOptionalSubmitState();
+  const action = isGenerating && !submitState?.canSubmit && !submitState?.hasDedicatedStop ? "stop" : "send";
+  const autoDisabled = action === "send" && status !== "error" && submitState ? !submitState.canSubmit : false;
+  let Icon = sendIcon ?? /* @__PURE__ */ jsx(CornerDownLeftIcon, { className: "size-4", "data-rtl-flip": true });
+  if (action === "stop") {
+    Icon = status === "submitted" ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" });
+  } else if (status === "error") {
+    Icon = /* @__PURE__ */ jsx(XIcon, { className: "size-4" });
+  }
+  const handleClick = useCallback(
+    (e) => {
+      if (autoDisabled) {
+        e.preventDefault();
+        return;
+      }
+      if (action === "stop" && onStop) {
+        e.preventDefault();
+        onStop();
+        return;
+      }
+      onClick?.(e);
+    },
+    [autoDisabled, action, onStop, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      "aria-label": action === "stop" ? t("ai.promptInput.stop") : t("ai.promptInput.submit"),
+      "aria-disabled": autoDisabled || void 0,
+      className: cn(autoDisabled && "cursor-not-allowed opacity-50 hover:bg-primary", className),
+      "data-action": action,
+      "data-generating": action === "stop" ? "true" : void 0,
+      "data-slot": SUBMIT_SLOT,
+      disabled,
+      onClick: handleClick,
+      size,
+      type: autoDisabled || action === "stop" && onStop ? "button" : "submit",
+      variant,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "flex animate-in fade-in-0 zoom-in-95 duration-fast ease-entrance",
+          children: Icon
+        },
+        `${status ?? "ready"}-${action}`
+      )
+    }
+  );
+};
+var STOP_SLOT = "prompt-input-stop";
+var PromptInputStop = ({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  status,
+  onStop,
+  onClick,
+  children,
+  ...props
+}) => {
+  const { t } = useLocale();
+  const submitState = useOptionalSubmitState();
+  const isGenerating = status === "submitted" || status === "streaming";
+  useEffect(() => {
+    const unregister = submitState?.registerStop();
+    return unregister;
+  }, [submitState]);
+  const handleClick = useCallback(
+    (e) => {
+      onClick?.(e);
+      if (e.defaultPrevented) {
+        return;
+      }
+      onStop();
+    },
+    [onClick, onStop]
+  );
+  if (!isGenerating) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    InputGroupButton,
+    {
+      "aria-label": t("ai.promptInput.stop"),
+      className: cn(className),
+      "data-slot": STOP_SLOT,
+      onClick: handleClick,
+      size,
+      type: "button",
+      variant,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" })
+    }
+  );
+};
+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 = ({
+  openDelay = 0,
+  closeDelay = 0,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCard, { closeDelay, openDelay, ...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-meta", 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-meta 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 {
+  usePromptInputController,
+  useProviderAttachments,
+  PromptInputProvider,
+  usePromptInputAttachments,
+  LocalReferencedSourcesContext,
+  usePromptInputReferencedSources,
+  PromptInputActionAddAttachments,
+  PromptInputActionAddScreenshot,
+  PromptInput,
+  PromptInputBody,
+  PromptInputTextarea,
+  PromptInputHeader,
+  PromptInputFooter,
+  PromptInputTools,
+  PromptInputButton,
+  PromptInputActionMenu,
+  PromptInputActionMenuTrigger,
+  PromptInputActionMenuContent,
+  PromptInputActionMenuItem,
+  PromptInputSubmit,
+  PromptInputStop,
+  PromptInputSelect,
+  PromptInputSelectTrigger,
+  PromptInputSelectContent,
+  PromptInputSelectItem,
+  PromptInputSelectValue,
+  PromptInputHoverCard,
+  PromptInputHoverCardTrigger,
+  PromptInputHoverCardContent,
+  PromptInputTabsList,
+  PromptInputTab,
+  PromptInputTabLabel,
+  PromptInputTabBody,
+  PromptInputTabItem,
+  PromptInputCommand,
+  PromptInputCommandInput,
+  PromptInputCommandList,
+  PromptInputCommandEmpty,
+  PromptInputCommandGroup,
+  PromptInputCommandItem,
+  PromptInputCommandSeparator
+};
+//# sourceMappingURL=chunk-SSGJ6MEM.js.map