stop empty messages being sent

src/lib/builders/local-toasts.svelte.ts

@@ -72,8 +72,8 @@ export class LocalToasts {
 						}).then(({ x, y, placement: _placement }) => {
 							placement = _placement;
 							Object.assign(node.style, {
-								left: placement === "top" ? `${x}px` : `${x - 4}px`,
-								top: placement === "top" ? `${y - 6}px` : `${y}px`,
+								left: placement.startsWith("top") ? `${x}px` : `${x - 4}px`,
+								top: placement.startsWith("top") ? `${y - 6}px` : `${y}px`,
 							});
 
 							// Animate
@@ -82,19 +82,16 @@ export class LocalToasts {
 
 							// Determine animation direction based on placement
 							let keyframes: Keyframe[] = [];
-							switch (placement) {
-								case "top":
-									keyframes = [
-										{ opacity: 0, transform: "translateY(8px)", scale: "0.8" },
-										{ opacity: 1, transform: "translateY(0)", scale: "1" },
-									];
-									break;
-								case "left":
-									keyframes = [
-										{ opacity: 0, transform: "translateX(8px)", scale: "0.8" },
-										{ opacity: 1, transform: "translateX(0)", scale: "1" },
-									];
-									break;
+							if (placement.startsWith("top")) {
+								keyframes = [
+									{ opacity: 0, transform: "translateX(var(--tx, 0)) translateY(8px)", scale: "0.8" },
+									{ opacity: 1, transform: "translateX(var(--tx, 0)) translateY(0)", scale: "1" },
+								];
+							} else if (placement.startsWith("left")) {
+								keyframes = [
+									{ opacity: 0, transform: "translateX(8px)", scale: "0.8" },
+									{ opacity: 1, transform: "translateX(0)", scale: "1" },
+								];
 							}
 
 							node.animate(keyframes, {
@@ -123,21 +120,17 @@ export class LocalToasts {
 
 							// Determine animation direction based on placement
 							let keyframes: Keyframe[] = [];
-							switch (placement) {
-								case "top":
-									keyframes = [
-										{ opacity: 1, transform: "translateY(0)" },
-										{ opacity: 0, transform: "translateY(-8px)" },
-									];
-									break;
-								case "left":
-									keyframes = [
-										{ opacity: 1, transform: "translateX(0)" },
-										{ opacity: 0, transform: "translateX(-8px)" },
-									];
-									break;
+							if (placement.startsWith("top")) {
+								keyframes = [
+									{ opacity: 1, transform: "translateX(var(--tx, 0)) translateY(0)" },
+									{ opacity: 0, transform: "translateX(var(--tx, 0)) translateY(-8px)" },
+								];
+							} else if (placement.startsWith("left")) {
+								keyframes = [
+									{ opacity: 1, transform: "translateX(0)" },
+									{ opacity: 0, transform: "translateX(-8px)" },
+								];
 							}
-
 							await cloned.animate(keyframes, {
 								duration: 400,
 								easing: "cubic-bezier(0.22, 1, 0.36, 1)",

src/lib/components/inference-playground/message-textarea.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { autofocus } from "$lib/attachments/autofocus.js";
+	import { LocalToasts } from "$lib/builders/local-toasts.svelte.js";
 	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte.js";
 	import { conversations } from "$lib/state/conversations.svelte";
 	import { images } from "$lib/state/images.svelte";
@@ -19,6 +20,8 @@
 
 	let input = $state("");
 
+	const localToasts = new LocalToasts({ placement: "top" });
+
 	async function onKeydown(event: KeyboardEvent) {
 		if (loading) return;
 		const ctrlOrMeta = event.ctrlKey || event.metaKey;
@@ -41,6 +44,16 @@
 	}
 
 	async function sendMessage() {
+		if (input.trim() === "" && fileUpload.selected.size === 0) {
+			localToasts.addToast({
+				data: {
+					content: "Please enter a message",
+					variant: "danger",
+				},
+			});
+			return;
+		}
+
 		const c = conversations.active;
 
 		let images: string[] | undefined;
@@ -128,6 +141,7 @@
 					loading && "bg-red-900 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700",
 					!loading && "bg-black hover:bg-gray-900 dark:bg-blue-600 dark:hover:bg-blue-700",
 				]}
+				{...localToasts.trigger}
 			>
 				{#if loading}
 					<div class="flex flex-none items-center gap-[3px]">
@@ -182,4 +196,10 @@
 			{/each}
 		</div>
 	</label>
+
+	{#each localToasts.toasts as toast (toast.id)}
+		<div class={toast.class} {...toast.attrs} style="--tx: -10px; {toast.attrs.style}">
+			{toast.data.content}
+		</div>
+	{/each}
 </div>