@alliance-droid/status-feedback-system 2.3.0 → 2.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.3.1
+
+### Fixed
+
+- `<FeedbackSubmitForm>` paste-to-attach was missing from 2.3.0 (commit didn't land on main before merge). Now included.
+
 ## 2.3.0
 
 ### Added

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Card, Button, Input, Textarea, Select } from '@alliance-droid/svelte-component-library';
 	import type { FeedbackBoardState } from './state.svelte.js';
+	import PasteImageInput from '../shared/PasteImageInput.svelte';
 
 	interface Props {
 		board: FeedbackBoardState;
@@ -16,6 +17,16 @@
 	let submitting = $state(false);
 	let success = $state(false);
 	let error = $state('');
+	let pastedImage = $state<string | null>(null);
+	let pastedFilename = $state('');
+	let textareaWrapperEl: HTMLDivElement | undefined = $state();
+	let textareaEl: HTMLTextAreaElement | undefined = $state();
+
+	$effect(() => {
+		if (textareaWrapperEl) {
+			textareaEl = textareaWrapperEl.querySelector('textarea') ?? undefined;
+		}
+	});
 
 	let isAuthenticated = $derived(!!board.userEmail);
 
@@ -32,11 +43,14 @@
 				title: title.trim() || undefined,
 				message: message.trim(),
 				category: category || undefined,
+				pastedImage,
 			});
 			success = true;
 			title = '';
 			message = '';
 			category = '';
+			pastedImage = null;
+			pastedFilename = '';
 			setTimeout(() => { success = false; }, 2000);
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to submit';
@@ -66,11 +80,18 @@
 				bind:value={title}
 				placeholder="Title (optional)"
 			/>
-			<Textarea
-				value={message}
-				oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
-				placeholder="Describe your feedback..."
-				rows={3}
+			<div bind:this={textareaWrapperEl}>
+				<Textarea
+					value={message}
+					oninput={(e) => (message = (e.currentTarget as HTMLTextAreaElement).value)}
+					placeholder="Describe your feedback (paste an image to attach it)\u2026"
+					rows={3}
+				/>
+			</div>
+			<PasteImageInput
+				{textareaEl}
+				bind:image={pastedImage}
+				bind:filename={pastedFilename}
 			/>
 			{#if error}
 				<p class="text-sm text-red-400">

package/dist/components/board/state.svelte.d.ts

@@ -46,6 +46,7 @@ export interface FeedbackBoardState {
         title?: string;
         message: string;
         category?: string;
+        pastedImage?: string | null;
     }): Promise<void>;
     submitResponse(itemId: string, message: string, pastedImage?: string | null): Promise<void>;
     getCategoryIcon(name: string): string;

package/dist/components/board/state.svelte.js

@@ -128,10 +128,16 @@ export function createFeedbackBoard(options) {
     async function submitFeedback(data) {
         if (!resolvedEmail)
             throw new Error('Authentication required to submit feedback');
+        const metadata = {};
+        if (data.pastedImage)
+            metadata.pastedScreenshot = data.pastedImage;
         await client.submitFeedback({
-            ...data,
+            title: data.title,
+            message: data.message,
+            category: data.category,
             email: resolvedEmail,
             pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
+            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
         });
         await load();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alliance-droid/status-feedback-system",
-	"version": "2.3.0",
+	"version": "2.3.1",
 	"type": "module",
 	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
 	"svelte": "./dist/index.js",