@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/ai/prompt-input/prompt-input.mjs

@@ -1,103 +1,218 @@
 "use client";
-import { FOCUS_RING, FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import { SendIcon } from "../../icons/lucide.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
-import { mergeRefs } from "../../../helpers/merge-refs.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
-import { SendIcon } from "../../icons/lucide.mjs";
-import { useEffect, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { acceptsFile } from "../../../internal/accepts-file.mjs";
+import { carriesFiles } from "../../../internal/carries-files.mjs";
+import { droppedFiles } from "../../../internal/dropped-files.mjs";
+import { AttachIcon } from "../_internal/icons.mjs";
+import { AttachmentPreview, isImageMediaType } from "../_internal/attachment-preview.mjs";
+import { List } from "../attachment/attachment.mjs";
+import prompt_input_module_default from "./prompt-input.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai/prompt-input/prompt-input.tsx
-const [PromptInputProvider, usePromptInputContext] = createSafeContext("PromptInput.Textarea / PromptInput.Submit must be used within <PromptInput.Root>");
-const resizeToContent = (el) => {
-	el.style.height = "auto";
-	el.style.height = `${el.scrollHeight.toString()}px`;
-};
-const Root = ({ status = "ready", value, defaultValue = "", onChange, onSubmit, onStop, children }) => {
+const [PromptInputProvider, usePromptInputContext] = createSafeContext("PromptInput.* must be used within <PromptInput.Root>");
+const isBusy = (status) => status === "submitted" || status === "streaming";
+const Root = ({ status = "ready", value, defaultValue = "", onChange, onSubmit, onStop, accept, maxFiles, children }) => {
 	const isControlled = value !== void 0;
 	const [text, setText] = useControllableState({
 		value,
 		defaultValue,
 		onChange
 	});
+	const [files, setFiles] = useState([]);
+	const [dragDepth, setDragDepth] = useState(0);
+	const isDragging = dragDepth > 0 && accept !== void 0;
+	const addFiles = useCallback((incoming) => {
+		if (accept === void 0) return false;
+		const taken = Array.from(incoming).filter((file) => acceptsFile(file, accept)).map((file) => ({
+			id: crypto.randomUUID(),
+			file
+		}));
+		if (taken.length === 0) return false;
+		setFiles((prev) => [...prev, ...taken].slice(0, maxFiles ?? Number.POSITIVE_INFINITY));
+		return true;
+	}, [accept, maxFiles]);
+	const removeFile = useCallback((id) => {
+		setFiles((prev) => prev.filter((attached) => attached.id !== id));
+	}, []);
 	const contextValue = useMemo(() => ({
 		value: text,
 		setValue: setText,
 		status,
-		stop: () => onStop?.()
+		stop: () => onStop?.(),
+		accept,
+		maxFiles,
+		files,
+		addFiles,
+		removeFile
 	}), [
 		text,
 		setText,
 		status,
-		onStop
+		onStop,
+		accept,
+		maxFiles,
+		files,
+		addFiles,
+		removeFile
 	]);
 	return /* @__PURE__ */ jsx(PromptInputProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("form", {
-			className: cn("flex items-end gap-2 rounded-2xl border border-border-base bg-bg-base p-2", FOCUS_RING_WITHIN),
+			className: clsx(prompt_input_module_default.root, focus_ring_module_default.ringWithin, isDragging && prompt_input_module_default.dragging),
+			"data-dragging": isDragging || void 0,
+			onDragEnter: (event) => {
+				if (!carriesFiles(event.dataTransfer)) return;
+				event.preventDefault();
+				setDragDepth((current) => current + 1);
+			},
+			onDragLeave: (event) => {
+				if (!carriesFiles(event.dataTransfer)) return;
+				setDragDepth((current) => Math.max(current - 1, 0));
+			},
+			onDragOver: (event) => {
+				if (!carriesFiles(event.dataTransfer)) return;
+				event.preventDefault();
+				event.dataTransfer.dropEffect = accept === void 0 ? "none" : "copy";
+			},
+			onDrop: (event) => {
+				if (!carriesFiles(event.dataTransfer)) return;
+				event.preventDefault();
+				setDragDepth(0);
+				addFiles(droppedFiles(event.dataTransfer));
+			},
 			onSubmit: (event) => {
 				event.preventDefault();
-				if (status === "submitted" || status === "streaming") return;
+				if (isBusy(status)) return;
 				const trimmed = text.trim();
-				if (trimmed === "") return;
-				onSubmit?.(trimmed);
+				if (trimmed === "" && files.length === 0) return;
+				const transfer = new DataTransfer();
+				for (const { file } of files) transfer.items.add(file);
+				onSubmit?.(trimmed, transfer.files);
+				setFiles([]);
 				if (!isControlled) setText("");
 			},
 			children
 		})
 	});
 };
-const Textarea = ({ placeholder, onKeyDown, ref, ...rest }) => {
-	const { value, setValue, status } = usePromptInputContext();
-	const innerRef = useRef(null);
-	const mergedRef = useMemo(() => mergeRefs(innerRef, ref), [ref]);
-	useEffect(() => {
-		if (innerRef.current) resizeToContent(innerRef.current);
-	}, [value]);
+const Textarea = ({ placeholder, onKeyDown, onPaste, ref, ...rest }) => {
+	const { value, setValue, status, addFiles } = usePromptInputContext();
 	const handleKeyDown = (event) => {
 		onKeyDown?.(event);
 		if (event.defaultPrevented) return;
 		if (event.key !== "Enter" || event.shiftKey) return;
 		if (event.nativeEvent.isComposing) return;
-		if (status !== "submitted" && status !== "streaming") {
+		if (!isBusy(status)) {
 			event.preventDefault();
 			event.currentTarget.form?.requestSubmit();
 		}
 	};
 	return /* @__PURE__ */ jsx("textarea", {
 		...rest,
-		className: cn("max-h-48 min-h-10 flex-1 resize-none bg-transparent text-fg-base outline-hidden p-2", "placeholder:text-fg-subtle"),
+		className: prompt_input_module_default.textarea,
 		onChange: (event) => {
 			setValue(event.target.value);
 		},
 		onKeyDown: handleKeyDown,
+		onPaste: (event) => {
+			onPaste?.(event);
+			if (event.defaultPrevented) return;
+			if (addFiles(event.clipboardData.files)) event.preventDefault();
+		},
 		placeholder,
-		ref: mergedRef,
+		ref,
 		rows: 1,
 		value
 	});
 };
+const FileImage = ({ file, id, alt }) => {
+	const attachObjectUrl = useCallback((img) => {
+		const url = URL.createObjectURL(file);
+		img.src = url;
+		return () => {
+			URL.revokeObjectURL(url);
+		};
+	}, [file]);
+	return /* @__PURE__ */ jsx("img", {
+		alt,
+		className: prompt_input_module_default.image,
+		id,
+		ref: attachObjectUrl
+	});
+};
+const Attachments = ({ label }) => {
+	const { files, removeFile } = usePromptInputContext();
+	if (files.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: prompt_input_module_default.attachments,
+		children: /* @__PURE__ */ jsx(List, {
+			label,
+			children: files.map(({ id, file }) => /* @__PURE__ */ jsx(AttachmentPreview, {
+				filename: file.name,
+				mediaType: file.type,
+				onRemove: () => {
+					removeFile(id);
+				},
+				renderImage: isImageMediaType(file.type) ? (image) => /* @__PURE__ */ jsx(FileImage, {
+					file,
+					...image
+				}) : void 0
+			}, id))
+		})
+	});
+};
+const Attach = ({ label }) => {
+	const messages = getMessages();
+	const { accept, maxFiles, addFiles } = usePromptInputContext();
+	const inputRef = useRef(null);
+	if (accept === void 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+		accept,
+		hidden: true,
+		multiple: maxFiles !== 1,
+		onChange: (event) => {
+			if (event.currentTarget.files !== null) addFiles(event.currentTarget.files);
+			event.currentTarget.value = "";
+		},
+		ref: inputRef,
+		tabIndex: -1,
+		type: "file"
+	}), /* @__PURE__ */ jsx("button", {
+		"aria-label": label ?? messages.attach,
+		className: clsx(prompt_input_module_default.button, prompt_input_module_default.attach, focus_ring_module_default.ring),
+		onClick: () => {
+			inputRef.current?.click();
+		},
+		type: "button",
+		children: /* @__PURE__ */ jsx(AttachIcon, { size: "sm" })
+	})] });
+};
 const Submit = ({ sendLabel, stopLabel }) => {
-	const messages = useMessages();
-	const { value, status, stop } = usePromptInputContext();
-	if (status === "submitted" || status === "streaming") return /* @__PURE__ */ jsx("button", {
+	const messages = getMessages();
+	const { value, status, stop, files } = usePromptInputContext();
+	if (isBusy(status)) return /* @__PURE__ */ jsx("button", {
 		"aria-label": stopLabel ?? messages.stop,
-		className: cn("flex size-9 shrink-0 items-center justify-center rounded-full bg-primary-bg text-primary-fg transition-colors duration-150 ease-out", FOCUS_RING),
+		className: clsx(prompt_input_module_default.button, prompt_input_module_default.primary, focus_ring_module_default.ring),
 		onClick: stop,
 		type: "button",
 		children: /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: "size-3 rounded-xs bg-current"
+			className: prompt_input_module_default.stopMark
 		})
 	});
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": sendLabel ?? messages.send,
-		className: cn("flex size-9 shrink-0 items-center justify-center rounded-full bg-primary-bg text-primary-fg transition-colors duration-150 ease-out", "disabled:cursor-not-allowed disabled:opacity-50", FOCUS_RING),
-		disabled: value.trim() === "",
+		className: clsx(prompt_input_module_default.button, prompt_input_module_default.primary, focus_ring_module_default.ring),
+		disabled: value.trim() === "" && files.length === 0,
 		type: "submit",
 		children: /* @__PURE__ */ jsx(SendIcon, { size: "sm" })
 	});
 };
 //#endregion
-export { Root, Submit, Textarea };
+export { Attach, Attachments, Root, Submit, Textarea };

package/dist/components/ai/prompt-input/prompt-input.module.mjs

@@ -0,0 +1,15 @@
+import './prompt-input.css';
+//#region src/components/ai/prompt-input/prompt-input.module.css
+var prompt_input_module_default = {
+	"attach": "_2eq2pa_attach",
+	"attachments": "_2eq2pa_attachments",
+	"button": "_2eq2pa_button",
+	"dragging": "_2eq2pa_dragging",
+	"image": "_2eq2pa_image",
+	"primary": "_2eq2pa_primary",
+	"root": "_2eq2pa_root",
+	"stopMark": "_2eq2pa_stopMark",
+	"textarea": "_2eq2pa_textarea"
+};
+//#endregion
+export { prompt_input_module_default as default };

package/dist/components/ai/reasoning/reasoning.css

@@ -0,0 +1,16 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._m0qEq_icon {
+    color: var(--color-fg-subtle);
+  }
+
+  ._m0qEq_text {
+    white-space: pre-wrap;
+    color: var(--color-fg-mute);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-relaxed);
+  }
+}
+
+@layer utilities;

package/dist/components/ai/reasoning/reasoning.d.mts

@@ -7,6 +7,5 @@ type Props = {
   defaultOpen?: boolean;
   onChange?: (isOpen: boolean) => void;
 };
-declare const Reasoning: FC<Props>;
-//#endregion
-export { Reasoning };
+export declare const Reasoning: FC<Props>;
+//#endregion

package/dist/components/ai/reasoning/reasoning.mjs

@@ -1,22 +1,22 @@
-"use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
 import { SparklesIcon } from "../../icons/lucide.mjs";
 import { Collapsible } from "../_internal/collapsible.mjs";
+import reasoning_module_default from "./reasoning.module.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai/reasoning/reasoning.tsx
 const Reasoning = ({ children, isStreaming = false, isOpen, defaultOpen = false, onChange }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	return /* @__PURE__ */ jsx(Collapsible, {
 		defaultOpen,
 		isOpen,
 		onChange,
 		icon: /* @__PURE__ */ jsx("span", {
-			className: "text-fg-subtle",
+			className: reasoning_module_default.icon,
 			children: /* @__PURE__ */ jsx(SparklesIcon, { size: "sm" })
 		}),
 		label: isStreaming ? messages.reasoningStreaming : messages.reasoning,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "text-fg-mute text-sm leading-relaxed whitespace-pre-wrap",
+			className: reasoning_module_default.text,
 			children
 		})
 	});

package/dist/components/ai/reasoning/reasoning.module.mjs

@@ -0,0 +1,8 @@
+import './reasoning.css';
+//#region src/components/ai/reasoning/reasoning.module.css
+var reasoning_module_default = {
+	"icon": "_m0qEq_icon",
+	"text": "_m0qEq_text"
+};
+//#endregion
+export { reasoning_module_default as default };