From 4b79bfe2cffafe1c6c4a041a4a48d32c989f6b79 Mon Sep 17 00:00:00 2001 From: Aleksander Grygier Date: Thu, 13 Nov 2025 13:26:35 +0100 Subject: [PATCH 1/6] feat: Improve Files Upload Error alert dialog UI --- .../app/chat/ChatScreen/ChatScreen.svelte | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte index 16563537cc2..0c754faa882 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte @@ -333,7 +333,7 @@ ondrop={handleDrop} role="main" > -
+

llama.cpp

@@ -368,7 +368,7 @@ - + File Upload Error @@ -377,7 +377,7 @@ -
+
{#if fileErrorData.generallyUnsupported.length > 0}

Unsupported File Types

@@ -398,8 +398,6 @@ {#if fileErrorData.modalityUnsupported.length > 0}
-

Model Compatibility Issues

-
{#each fileErrorData.modalityUnsupported as file (file.name)}
@@ -415,14 +413,14 @@
{/if} +
-
-

This model supports:

+
+

This model supports:

-

- {fileErrorData.supportedTypes.join(', ')} -

-
+

+ {fileErrorData.supportedTypes.join(', ')} +

From f9fd4d14fe143ab279100df6fbe2aa088bdc8214 Mon Sep 17 00:00:00 2001 From: Aleksander Grygier Date: Thu, 13 Nov 2025 18:32:20 +0100 Subject: [PATCH 2/6] feat: Better UI for multiple attachments --- .../ChatAttachmentFilePreview.svelte | 45 ++-- .../ChatAttachmentImagePreview.svelte | 19 +- .../ChatAttachmentPreviewDialog.svelte | 2 +- .../ChatAttachmentsList.svelte | 201 +++++++++++------ .../ChatAttachmentsViewAllDialog.svelte | 203 ++++++++++++++++++ .../app/chat/ChatForm/ChatForm.svelte | 8 +- .../webui/src/lib/components/app/index.ts | 3 + .../components/app/misc/RemoveButton.svelte | 26 +++ tools/server/webui/src/lib/types/chat.d.ts | 23 ++ 9 files changed, 426 insertions(+), 104 deletions(-) create mode 100644 tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsViewAllDialog.svelte create mode 100644 tools/server/webui/src/lib/components/app/misc/RemoveButton.svelte diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte index d4839f839bf..b9e4b58f5b8 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte @@ -1,6 +1,5 @@ -
+
{#if onClick} +
{/if}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreviewDialog.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreviewDialog.svelte index 3c1ee7fc5d9..8a3389b6579 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreviewDialog.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreviewDialog.svelte @@ -153,7 +153,7 @@ -
+
{#if IconComponent} diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte index e378139d1b6..19b35eea96a 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte @@ -1,11 +1,16 @@ {#if displayItems.length > 0} -
- {#each displayItems as item (item.id)} - {#if item.isImage && item.preview} - openPreview(item, event)} - /> - {:else} - openPreview(item, event)} - /> - {/if} - {/each} +
+
+ + +
+ {#each displayItems as item (item.id)} + {#if item.isImage && item.preview} + openPreview(item, event)} + /> + {:else} + openPreview(item, event)} + /> + {/if} + {/each} +
+ + +
+ + {#if showViewAll} +
+ +
+ {/if}
{/if} @@ -194,3 +265,13 @@ textContent={previewItem.textContent} /> {/if} + + diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsViewAllDialog.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsViewAllDialog.svelte new file mode 100644 index 00000000000..a56e265432d --- /dev/null +++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsViewAllDialog.svelte @@ -0,0 +1,203 @@ + + + + + + + + + All Attachments ({displayItems.length}) + + View and manage all attached files + + + +
+ {#if fileItems.length > 0} +
+

Files ({fileItems.length})

+
+ {#each fileItems as item (item.id)} + openPreview(item, event)} + /> + {/each} +
+
+ {/if} + + {#if imageItems.length > 0} +
+

Images ({imageItems.length})

+
+ {#each imageItems as item (item.id)} + {#if item.preview} + openPreview(item, event)} + /> + {/if} + {/each} +
+
+ {/if} +
+ + + + +{#if previewItem} + +{/if} diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte index 67a7fff54cb..6c9a11849c3 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte @@ -232,7 +232,13 @@ onsubmit={handleSubmit} class="{INPUT_CLASSES} border-radius-bottom-none mx-auto max-w-[48rem] overflow-hidden rounded-3xl backdrop-blur-md {className}" > - +
+ import { X } from '@lucide/svelte'; + import { Button } from '$lib/components/ui/button'; + + interface Props { + id: string; + onRemove?: (id: string) => void; + class?: string; + } + + let { id, onRemove, class: className = '' }: Props = $props(); + + + diff --git a/tools/server/webui/src/lib/types/chat.d.ts b/tools/server/webui/src/lib/types/chat.d.ts index d803a5aa0f2..ee3990b04b9 100644 --- a/tools/server/webui/src/lib/types/chat.d.ts +++ b/tools/server/webui/src/lib/types/chat.d.ts @@ -11,6 +11,29 @@ export interface ChatUploadedFile { textContent?: string; } +export interface ChatAttachmentDisplayItem { + id: string; + name: string; + size?: number; + preview?: string; + type: string; + isImage: boolean; + uploadedFile?: ChatUploadedFile; + attachment?: DatabaseMessageExtra; + attachmentIndex?: number; + textContent?: string; +} + +export interface ChatAttachmentPreviewItem { + uploadedFile?: ChatUploadedFile; + attachment?: DatabaseMessageExtra; + preview?: string; + name?: string; + type?: string; + size?: number; + textContent?: string; +} + export interface ChatMessageSiblingInfo { message: DatabaseMessage; siblingIds: string[]; From 6f7cb7b7a2f95a7359c0b1a18cad3d47b7bbb7a0 Mon Sep 17 00:00:00 2001 From: Aleksander Grygier Date: Thu, 13 Nov 2025 18:58:36 +0100 Subject: [PATCH 3/6] fix: Pasted/Text File preview from Chat Form --- .../chat/ChatAttachments/ChatAttachmentFilePreview.svelte | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte index b9e4b58f5b8..89d0052bf3a 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentFilePreview.svelte @@ -65,10 +65,11 @@ {:else} -
@@ -94,7 +95,7 @@
{/if}
-
+ {/if} {:else}