ewilliams28/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-26 15:34:48 -06:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-08-05 07:44:06 -05:00
parent 29eeda9f9a
commit 6c4d0ace16
4 changed files with 144 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Chat.svelte
+82 -45
View File
@@ -1523,12 +1523,16 @@
toast.success($i18n.t('File uploaded successfully'));
} catch (e) {
console.error('Error uploading file:', e);
fileItem.status = 'error';
fileItem.error = e.message || `${e}`;
files = files.filter((f) => f.itemId !== tempItemId);
toast.error(
$i18n.t('Error uploading file: {{error}}', {
error: e.message || 'Unknown error'
})
);
} finally {
await processNextInQueue($chatId);
}
};
@@ -1573,10 +1577,14 @@
files = [...files];
} catch (e) {
fileItem.status = 'error';
fileItem.error = `${e}`;
files = files.filter((f) => f.name !== url);
toast.error(`${e}`);
}
}
await processNextInQueue($chatId);
};
const onUpload = async (event) => {
@@ -1586,6 +1594,8 @@
await uploadGoogleDriveFile(data);
} else if (type === 'web') {
await uploadWeb(data);
} else if (type === 'file') {
await processNextInQueue($chatId);
}
};
@@ -2159,6 +2169,15 @@
const queue = $chatRequestQueues[targetChatId];
if (!queue || queue.length === 0) return;
const lastMessage = history.currentId ? history.messages[history.currentId] : null;
if (
(lastMessage && lastMessage.role === 'assistant' && !lastMessage.done) ||
queue.some((m) =>
(m.files ?? []).some((file) => ['uploading', 'error'].includes(file.status))
)
) {
return;
}
processingQueueChats.add(targetChatId);
try {
@@ -2176,6 +2195,43 @@
}
};
const sendQueuedMessageNow = async (id) => {
const queue = $chatRequestQueues[$chatId] ?? [];
const item = queue.find((m) => m.id === id);
if (!item || (item.files ?? []).some((file) => ['uploading', 'error'].includes(file.status))) {
return;
}
chatRequestQueues.update((q) => ({
...q,
[$chatId]: queue.filter((m) => m.id !== id)
}));
await stopResponse(false);
await tick();
await submitPrompt(item.prompt, item.files);
};
const editQueuedMessage = (id) => {
const queue = $chatRequestQueues[$chatId] ?? [];
const item = queue.find((m) => m.id === id);
if (!item) return;
chatRequestQueues.update((q) => ({
...q,
[$chatId]: queue.filter((m) => m.id !== id)
}));
files = item.files;
messageInput?.setText(item.prompt);
};
const deleteQueuedMessage = (id) => {
const queue = $chatRequestQueues[$chatId] ?? [];
chatRequestQueues.update((q) => ({
...q,
[$chatId]: queue.filter((m) => m.id !== id)
}));
};
const chatCompletedHandler = async (_chatId, modelId, responseMessageId, messages) => {
// Backend handles outlet filters and persistence inline.
// Just refresh the sidebar chat list.
@@ -2736,16 +2792,6 @@
return;
}
if (
files.length > 0 &&
files.filter((file) => file.type !== 'image' && file.status === 'uploading').length > 0
) {
toast.error(
$i18n.t(`Oops! There are files still uploading. Please wait for the upload to complete.`)
);
return;
}
if (
($config?.file?.max_count ?? null) !== null &&
files.length + chatFiles.length > $config?.file?.max_count
@@ -2768,6 +2814,22 @@
return;
}
if (
($chatRequestQueues[$chatId] ?? []).some((m) =>
(m.files ?? []).some((file) => ['uploading', 'error'].includes(file.status))
) ||
(files.length > 0 && files.some((file) => ['uploading', 'error'].includes(file.status)))
) {
chatRequestQueues.update((q) => ({
...q,
[$chatId]: [...(q[$chatId] ?? []), { id: uuidv4(), prompt: userPrompt, files }]
}));
messageInput?.setText('');
prompt = '';
files = [];
return;
}
// Check if the assistant is still generating the main response
// (don't block on background tasks like title gen, follow-ups, tags)
const lastMessage = history.currentId ? history.messages[history.currentId] : null;
@@ -4029,41 +4091,9 @@
{onUpload}
messageQueue={$chatRequestQueues[$chatId] ?? []}
{chatTasks}
onQueueSendNow={async (id) => {
const queue = $chatRequestQueues[$chatId] ?? [];
const item = queue.find((m) => m.id === id);
if (item) {
// Remove from queue
chatRequestQueues.update((q) => ({
...q,
[$chatId]: queue.filter((m) => m.id !== id)
}));
await stopResponse(false);
await tick();
await submitPrompt(item.prompt, item.files);
}
}}
onQueueEdit={(id) => {
const queue = $chatRequestQueues[$chatId] ?? [];
const item = queue.find((m) => m.id === id);
if (item) {
// Remove from queue
chatRequestQueues.update((q) => ({
...q,
[$chatId]: queue.filter((m) => m.id !== id)
}));
// Set files and restore prompt to input
files = item.files;
messageInput?.setText(item.prompt);
}
}}
onQueueDelete={(id) => {
const queue = $chatRequestQueues[$chatId] ?? [];
chatRequestQueues.update((q) => ({
...q,
[$chatId]: queue.filter((m) => m.id !== id)
}));
}}
onQueueSendNow={sendQueuedMessageNow}
onQueueEdit={editQueuedMessage}
onQueueDelete={deleteQueuedMessage}
onChange={(data) => {
if (!$temporaryChatEnabled) {
saveDraft(data, $chatId);
@@ -4148,6 +4178,9 @@
{onUpload}
messageQueue={$chatRequestQueues[$chatId] ?? []}
{chatTasks}
onQueueSendNow={sendQueuedMessageNow}
onQueueEdit={editQueuedMessage}
onQueueDelete={deleteQueuedMessage}
onWebSearchToggle={handleWebSearchToggle}
on:chatVariables={() => {
showChatVariablesModal = true;
@@ -4186,6 +4219,10 @@
{createMessagePair}
{onSelect}
{onUpload}
messageQueue={$chatRequestQueues[$chatId] ?? []}
onQueueSendNow={sendQueuedMessageNow}
onQueueEdit={editQueuedMessage}
onQueueDelete={deleteQueuedMessage}
onWebSearchToggle={handleWebSearchToggle}
on:chatVariables={() => {
showChatVariablesModal = true;
src/lib/components/chat/MessageInput.svelte
+10
View File
@@ -880,11 +880,17 @@
files = files;
} else {
fileItem.status = 'error';
fileItem.error = $i18n.t('Failed to upload file.');
files = files.filter((item) => item?.itemId !== tempItemId);
}
} catch (e) {
fileItem.status = 'error';
fileItem.error = `${e}`;
toast.error(`${e}`);
files = files.filter((item) => item?.itemId !== tempItemId);
} finally {
onUpload({ type: 'file' });
}
} else {
// If temporary chat is enabled, we just add the file to the list without uploading it.
@@ -897,8 +903,11 @@
});
if (content === null) {
fileItem.status = 'error';
fileItem.error = $i18n.t('Failed to extract content from the file.');
toast.error($i18n.t('Failed to extract content from the file.'));
files = files.filter((item) => item?.itemId !== tempItemId);
onUpload({ type: 'file' });
return null;
} else {
console.log('Extracted content from file:', {
@@ -913,6 +922,7 @@
fileItem.id = uuidv4(); // Temporary ID for the file
files = files;
onUpload({ type: 'file' });
}
}
};
src/lib/components/chat/MessageInput/QueuedMessageItem.svelte
+44 -6
View File
@@ -2,6 +2,7 @@
import { getContext } from 'svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Image from '$lib/components/common/Image.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import EditPencil from '$lib/components/icons/EditPencil.svelte';
import ArrowForward from '$lib/components/icons/ArrowForward.svelte';
@@ -33,11 +34,27 @@
file.url?.startsWith('data') || file.url?.startsWith('http')
? file.url
: `${WEBUI_API_BASE_URL}/files/${file.url}${file?.content_type ? '/content' : ''}`}
<Image src={fileUrl} alt="" imageClassName="size-6 rounded-md object-cover" />
<div
class="relative size-6 shrink-0 overflow-hidden rounded-lg border border-gray-100/60 bg-white/60 dark:border-white/[0.06] dark:bg-white/[0.025]"
>
<Image src={fileUrl} alt="" imageClassName="size-full object-cover" />
{#if file.status === 'uploading'}
<div
class="absolute inset-0 flex items-center justify-center bg-white/75 text-gray-500 backdrop-blur-[1px] dark:bg-gray-950/70 dark:text-gray-300"
>
<Spinner className="size-3" />
</div>
{/if}
</div>
{:else}
<div
class="flex items-center px-1.5 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-xs text-gray-500 dark:text-gray-400"
class="flex h-6 max-w-[9rem] items-center gap-1 rounded-lg border border-gray-100/60 bg-white/60 px-1.5 text-[11px] leading-none text-gray-500 dark:border-white/[0.06] dark:bg-white/[0.025] dark:text-gray-400"
>
{#if file.status === 'uploading'}
<span class="shrink-0 text-gray-400 dark:text-gray-500">
<Spinner className="size-3" />
</span>
{/if}
<span class="max-w-[80px] truncate">{file.name ?? 'file'}</span>
</div>
{/if}
@@ -52,17 +69,38 @@
{$i18n.t('Empty message')}
</p>
{/if}
{#if files.some((file) => file.status === 'error')}
<span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">
{$i18n.t('Upload failed')}
</span>
{/if}
</div>
<!-- Actions -->
<div class="flex items-center gap-1 shrink-0">
<!-- Send immediately -->
<Tooltip content={$i18n.t('Send now')}>
<Tooltip
content={files.some((file) => ['uploading', 'error'].includes(file.status))
? $i18n.t('Waiting for upload')
: $i18n.t('Send now')}
>
<button
type="button"
class="p-1 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
on:click={() => onSendNow(id)}
aria-label={$i18n.t('Send now')}
class="p-1 text-gray-400 transition-colors {files.some((file) =>
['uploading', 'error'].includes(file.status)
)
? 'opacity-40 cursor-not-allowed'
: 'hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300'}"
disabled={files.some((file) => ['uploading', 'error'].includes(file.status))}
on:click={() => {
if (!files.some((file) => ['uploading', 'error'].includes(file.status))) {
onSendNow(id);
}
}}
aria-label={files.some((file) => ['uploading', 'error'].includes(file.status))
? $i18n.t('Waiting for upload')
: $i18n.t('Send now')}
>
<svg
xmlns="http://www.w3.org/2000/svg"
src/lib/components/chat/Placeholder.svelte
+8
View File
@@ -59,6 +59,10 @@
export let onSelect = (e) => {};
export let onChange = (e) => {};
export let onWebSearchToggle: Function = () => {};
export let messageQueue: { id: string; prompt: string; files: any[] }[] = [];
export let onQueueSendNow: (id: string) => void = () => {};
export let onQueueEdit: (id: string) => void = () => {};
export let onQueueDelete: (id: string) => void = () => {};
export let toolServers = [];
@@ -239,6 +243,10 @@
placeholder={$i18n.t('How can I help you today?')}
{onChange}
{onUpload}
{messageQueue}
{onQueueSendNow}
{onQueueEdit}
{onQueueDelete}
{onWebSearchToggle}
on:chatVariables
on:submit={(e) => {