@protobase/ui 0.55.4 → 0.55.5

package/dist/chat/composer-files.js

@@ -0,0 +1,13 @@
+//#region src/chat/composer-files.ts
+/** Whether a drag carries files, which the composer takes, rather than text, which the box takes as usual. */
+const carriesFiles = (transfer) => transfer.types.includes("Files");
+/**
+* The files a paste gives, or none when it also holds text: a copy from a spreadsheet or a web page can hold an image
+* of its text too, and text pasted into the box stays text.
+*/
+const pastedFiles = (transfer) => {
+	if (transfer.types.includes("text/plain")) return [];
+	return [...transfer.files];
+};
+//#endregion
+export { carriesFiles, pastedFiles };

package/dist/chat/composer-send.js

@@ -0,0 +1,8 @@
+//#region src/chat/composer-send.ts
+/** Whether the composer may send `message`, its trimmed text: never while busy, and empty text only when allowed, such as for a message of files alone. */
+const canSend = (message, { busy, canSendEmpty }) => {
+	if (busy) return false;
+	return message !== "" || canSendEmpty === true;
+};
+//#endregion
+export { canSend };

package/dist/chat/composer.d.ts

@@ -1,6 +1,6 @@
 import { PeopleSearch } from "../mentions/use-people-search.js";
 import "../mentions/index.js";
-import { Ref } from "react";
+import { ReactNode, Ref } from "react";
 //#region src/chat/composer.d.ts
 export type ComposerProps = {
   /** Gets the trimmed text and the ids of the people it mentions, each once. */
@@ -11,10 +11,19 @@ export type ComposerProps = {
   inputRef?: Ref<HTMLTextAreaElement>;
   /** Finds the people `@` lists by the name typed after it, such as a channel's members; without it, `@` is plain text. */
   searchPeople?: PeopleSearch;
+  /** Drawn inside the composer above the box, such as a tray of the files picked for the message. */
+  attachments?: ReactNode;
+  /** Drawn left of the box, such as a button that picks files. */
+  actions?: ReactNode;
+  /** Enter and the button send even with no text, `onSend('', [])`, such as when files are picked. */
+  canSendEmpty?: boolean;
+  /** Gets the files pasted into the box or dropped on the composer; the composer itself uploads and sends nothing. A paste that holds text stays text. */
+  onFiles?: (files: File[]) => void;
 };
 /**
  * The text box under a chat, which grows with its text. Enter or the button sends the trimmed text and clears the box,
- * Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead.
+ * Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead. With `canSendEmpty`,
+ * such as while files are picked, it sends with no text too.
  */
-export declare const Composer: ({ onSend, busy, placeholder, inputRef, searchPeople }: ComposerProps) => import("react").JSX.Element;
+export declare const Composer: ({ onSend, busy, placeholder, inputRef, searchPeople, attachments, actions, canSendEmpty, onFiles }: ComposerProps) => import("react").JSX.Element;
 //#endregion

package/dist/chat/composer.js

@@ -2,19 +2,26 @@ import { Button } from "../primitives/button.js";
 import { text } from "./messages.js";
 import { mentionedIds } from "../mentions/mention-text.js";
 import { MentionBox, emptyDraft } from "../mentions/mention-box.js";
+import { carriesFiles, pastedFiles } from "./composer-files.js";
+import { canSend } from "./composer-send.js";
 import { useState } from "react";
 import { SendHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/composer.tsx
 /**
 * The text box under a chat, which grows with its text. Enter or the button sends the trimmed text and clears the box,
-* Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead.
+* Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead. With `canSendEmpty`,
+* such as while files are picked, it sends with no text too.
 */
-const Composer = ({ onSend, busy, placeholder, inputRef, searchPeople }) => {
+const Composer = ({ onSend, busy, placeholder, inputRef, searchPeople, attachments, actions, canSendEmpty, onFiles }) => {
 	const [draft, setDraft] = useState(emptyDraft);
 	const message = draft.text.trim();
+	const sendable = canSend(message, {
+		busy,
+		canSendEmpty
+	});
 	const send = () => {
-		if (!message || busy) return;
+		if (!sendable) return;
 		onSend?.(message, mentionedIds(message, draft.picked));
 		setDraft(emptyDraft);
 	};
@@ -23,33 +30,60 @@ const Composer = ({ onSend, busy, placeholder, inputRef, searchPeople }) => {
 		event.preventDefault();
 		send();
 	};
+	const onPaste = (event) => {
+		if (!onFiles) return;
+		const files = pastedFiles(event.clipboardData);
+		if (files.length === 0) return;
+		event.preventDefault();
+		onFiles(files);
+	};
+	const onDragOver = (event) => {
+		if (!onFiles || !carriesFiles(event.dataTransfer)) return;
+		event.preventDefault();
+	};
+	const onDrop = (event) => {
+		if (!onFiles || !carriesFiles(event.dataTransfer)) return;
+		event.preventDefault();
+		onFiles([...event.dataTransfer.files]);
+	};
 	return /* @__PURE__ */ jsxs("form", {
-		className: "flex items-end gap-2",
+		className: "flex flex-wrap items-end gap-2",
 		onSubmit: (event) => {
 			event.preventDefault();
 			send();
 		},
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "min-w-0 flex-1",
-			children: /* @__PURE__ */ jsx(MentionBox, {
-				ref: inputRef,
-				rows: 1,
-				"aria-label": text("message"),
-				placeholder,
-				value: draft,
-				onChange: setDraft,
-				searchPeople,
-				listAt: "above",
-				onKeyDown
+		onDragOver,
+		onDrop,
+		children: [
+			attachments && /* @__PURE__ */ jsx("div", {
+				className: "basis-full",
+				children: attachments
+			}),
+			actions,
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: /* @__PURE__ */ jsx(MentionBox, {
+					ref: inputRef,
+					rows: 1,
+					"aria-label": text("message"),
+					placeholder,
+					value: draft,
+					onChange: setDraft,
+					searchPeople,
+					listAt: "above",
+					onKeyDown,
+					onPaste
+				})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				variant: "primary",
+				className: "w-8 px-0",
+				"aria-label": text("send"),
+				disabled: !sendable,
+				children: /* @__PURE__ */ jsx(SendHorizontal, { className: "size-4" })
 			})
-		}), /* @__PURE__ */ jsx(Button, {
-			type: "submit",
-			variant: "primary",
-			className: "w-8 px-0",
-			"aria-label": text("send"),
-			disabled: !message || busy,
-			children: /* @__PURE__ */ jsx(SendHorizontal, { className: "size-4" })
-		})]
+		]
 	});
 };
 //#endregion

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.55.4";
+var version = "0.55.5";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };