enh/refac: debounce chat draft save

src/lib/components/chat/Chat.svelte

@@ -2038,6 +2038,25 @@
 			}
 		}
 	};
+
+	const MAX_DRAFT_LENGTH = 5000;
+	let saveDraftTimeout = null;
+	const saveDraft = async (draft, chatId = null) => {
+		if (saveDraftTimeout) {
+			clearTimeout(saveDraftTimeout);
+		}
+
+		if (draft.prompt !== null && draft.prompt.length < MAX_DRAFT_LENGTH) {
+			saveDraftTimeout = setTimeout(async () => {
+				await sessionStorage.setItem(
+					`chat-input${chatId ? `-${chatId}` : ''}`,
+					JSON.stringify(draft)
+				);
+			}, 500);
+		} else {
+			sessionStorage.removeItem(`chat-input${chatId ? `-${chatId}` : ''}`);
+		}
+	};
 </script>
 
 <svelte:head>
@@ -2173,16 +2192,9 @@
 										false}
 									{stopResponse}
 									{createMessagePair}
-									onChange={(input) => {
+									onChange={(data) => {
 										if (!$temporaryChatEnabled) {
-											if (input.prompt !== null) {
+											saveDraft(data, $chatId);
-												sessionStorage.setItem(
-													`chat-input${$chatId ? `-${$chatId}` : ''}`,
-													JSON.stringify(input)
-												);
-											} else {
-												sessionStorage.removeItem(`chat-input${$chatId ? `-${$chatId}` : ''}`);
-											}
 										}
 									}}
 									on:upload={async (e) => {
@@ -2237,6 +2249,11 @@
 									{stopResponse}
 									{createMessagePair}
 									{onSelect}
+									onChange={(data) => {
+										if (!$temporaryChatEnabled) {
+											saveDraft(data);
+										}
+									}}
 									on:upload={async (e) => {
 										const { type, data } = e.detail;
 

src/lib/components/chat/Placeholder.svelte

@@ -55,6 +55,7 @@
 	export let webSearchEnabled = false;
 
 	export let onSelect = (e) => {};
+	export let onChange = (e) => {};
 
 	export let toolServers = [];
 
@@ -224,15 +225,7 @@
 					{stopResponse}
 					{createMessagePair}
 					placeholder={$i18n.t('How can I help you today?')}
-					onChange={(input) => {
+					{onChange}
-						if (!$temporaryChatEnabled) {
-							if (input.prompt !== null) {
-								sessionStorage.setItem(`chat-input`, JSON.stringify(input));
-							} else {
-								sessionStorage.removeItem(`chat-input`);
-							}
-						}
-					}}
 					on:upload={(e) => {
 						dispatch('upload', e.detail);
 					}}