diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte index d5c318de62..b7133e4344 100644 --- a/src/lib/components/chat/Chat.svelte +++ b/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}` : ''}`); + } + }; @@ -2173,16 +2192,9 @@ false} {stopResponse} {createMessagePair} - onChange={(input) => { + onChange={(data) => { if (!$temporaryChatEnabled) { - if (input.prompt !== null) { - sessionStorage.setItem( - `chat-input${$chatId ? `-${$chatId}` : ''}`, - JSON.stringify(input) - ); - } else { - sessionStorage.removeItem(`chat-input${$chatId ? `-${$chatId}` : ''}`); - } + saveDraft(data, $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; diff --git a/src/lib/components/chat/Placeholder.svelte b/src/lib/components/chat/Placeholder.svelte index 5f9f1cb658..3bc9decb1b 100644 --- a/src/lib/components/chat/Placeholder.svelte +++ b/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) => { - if (!$temporaryChatEnabled) { - if (input.prompt !== null) { - sessionStorage.setItem(`chat-input`, JSON.stringify(input)); - } else { - sessionStorage.removeItem(`chat-input`); - } - } - }} + {onChange} on:upload={(e) => { dispatch('upload', e.detail); }}