From 360289db215e7d555e8f0957fc5dd464ea53e0c0 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 21 Dec 2025 14:24:53 +0400
Subject: [PATCH] refac: file item modal

---
 src/lib/components/common/FileItem.svelte     |   4 +-
 .../components/common/FileItemModal.svelte    | 172 +++++-------------
 2 files changed, 45 insertions(+), 131 deletions(-)

diff --git a/src/lib/components/common/FileItem.svelte b/src/lib/components/common/FileItem.svelte
index 2925c8362..a5b19d630 100644
--- a/src/lib/components/common/FileItem.svelte
+++ b/src/lib/components/common/FileItem.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { createEventDispatcher, getContext } from 'svelte';
 	import { formatFileSize } from '$lib/utils';
+	import { settings } from '$lib/stores';
 
 	import FileItemModal from './FileItemModal.svelte';
 	import GarbageBin from '../icons/GarbageBin.svelte';
 	import Spinner from './Spinner.svelte';
 	import Tooltip from './Tooltip.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
-	import { settings } from '$lib/stores';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
@@ -55,7 +55,7 @@
 		: 'rounded-2xl'} text-left"
 	type="button"
 	on:click={async () => {
-		if (item?.file?.data?.content || item?.type === 'file' || modal) {
+		if (item?.file?.data?.content || item?.type === 'file' || item?.content || modal) {
 			showModal = !showModal;
 		} else {
 			if (url) {
diff --git a/src/lib/components/common/FileItemModal.svelte b/src/lib/components/common/FileItemModal.svelte
index 85a681eb7..828eb43a9 100644
--- a/src/lib/components/common/FileItemModal.svelte
+++ b/src/lib/components/common/FileItemModal.svelte
@@ -26,11 +26,11 @@
 	export let edit = false;
 
 	let enableFullContent = false;
+	let loading = false;
 
-	let isPdf = false;
+	let isPDF = false;
 	let isAudio = false;
 	let isExcel = false;
-	let loading = false;
 
 	let selectedTab = '';
 	let excelWorkbook: XLSX.WorkBook | null = null;
@@ -313,7 +313,9 @@
 							</div>
 						{/each}
 					</div>
-				{:else if isPDF}
+				{/if}
+
+				{#if isAudio || isPDF || isExcel || isCode || isMarkdown}
 					<div
 						class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-50 dark:border-gray-850/30 text-center text-sm font-medium bg-transparent dark:text-gray-200"
 					>
@@ -337,44 +339,33 @@
 							}}>{$i18n.t('Preview')}</button
 						>
 					</div>
+				{/if}
 
-					{#if selectedTab === 'preview'}
+				{#if selectedTab === ''}
+					{#if item?.file?.data}
+						<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
+							{(item?.file?.data?.content ?? '').trim() || 'No content'}
+						</div>
+					{:else if item?.content}
+						<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
+							{(item?.content ?? '').trim() || 'No content'}
+						</div>
+					{/if}
+				{:else if selectedTab === 'preview'}
+					{#if isAudio}
+						<audio
+							src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
+							class="w-full border-0 rounded-lg mb-2"
+							controls
+							playsinline
+						/>
+					{:else if isPDF}
 						<iframe
 							title={item?.name}
 							src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
 							class="w-full h-[70vh] border-0 rounded-lg"
 						/>
-					{:else}
-						<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
-							{(item?.file?.data?.content ?? '').trim() || 'No content'}
-						</div>
-					{/if}
-				{:else if isExcel}
-					<div
-						class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-50 dark:border-gray-850/30 text-center text-sm font-medium bg-transparent dark:text-gray-200"
-					>
-						<button
-							class="min-w-fit py-1.5 px-4 border-b {selectedTab === ''
-								? ' '
-								: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-							type="button"
-							on:click={() => {
-								selectedTab = '';
-							}}>{$i18n.t('Content')}</button
-						>
-
-						<button
-							class="min-w-fit py-1.5 px-4 border-b {selectedTab === 'preview'
-								? ' '
-								: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-							type="button"
-							on:click={() => {
-								selectedTab = 'preview';
-							}}>{$i18n.t('Preview')}</button
-						>
-					</div>
-
-					{#if selectedTab === 'preview'}
+					{:else if isExcel}
 						{#if excelError}
 							<div class="text-red-500 text-sm p-4">
 								{excelError}
@@ -406,105 +397,28 @@
 								<div class="text-gray-500 text-sm p-4">No content available</div>
 							{/if}
 						{/if}
+					{:else if isCode}
+						<div class="max-h-[60vh] overflow-scroll scrollbar-hidden text-sm relative">
+							<CodeBlock
+								code={item.file.data.content}
+								lang={item.name.split('.').pop()}
+								token={null}
+								edit={false}
+								run={false}
+								save={false}
+							/>
+						</div>
+					{:else if isMarkdown}
+						<div
+							class="max-h-[60vh] overflow-scroll scrollbar-hidden text-sm prose dark:prose-invert max-w-full"
+						>
+							<Markdown content={item.file.data.content} id="markdown-viewer" />
+						</div>
 					{:else}
 						<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
 							{(item?.file?.data?.content ?? '').trim() || 'No content'}
 						</div>
 					{/if}
-				{:else}
-					{#if isAudio}
-						<audio
-							src={`${WEBUI_API_BASE_URL}/files/${item.id}/content`}
-							class="w-full border-0 rounded-lg mb-2"
-							controls
-							playsinline
-						/>
-					{/if}
-
-					{#if item?.file?.data}
-						{#if isMarkdown}
-							<div
-								class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-50 dark:border-gray-850/30 text-center text-sm font-medium bg-transparent dark:text-gray-200"
-							>
-								<button
-									class="min-w-fit py-1.5 px-4 border-b {selectedTab === ''
-										? ' '
-										: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-									type="button"
-									on:click={() => {
-										selectedTab = '';
-									}}>{$i18n.t('Content')}</button
-								>
-
-								<button
-									class="min-w-fit py-1.5 px-4 border-b {selectedTab === 'preview'
-										? ' '
-										: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-									type="button"
-									on:click={() => {
-										selectedTab = 'preview';
-									}}>{$i18n.t('Preview')}</button
-								>
-							</div>
-
-							{#if selectedTab === 'preview'}
-								<div
-									class="max-h-[60vh] overflow-scroll scrollbar-hidden text-sm prose dark:prose-invert max-w-full"
-								>
-									<Markdown content={item.file.data.content} id="markdown-viewer" />
-								</div>
-							{:else}
-								<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
-									{(item?.file?.data?.content ?? '').trim() || 'No content'}
-								</div>
-							{/if}
-						{:else if isCode}
-							<div
-								class="flex mb-2.5 scrollbar-none overflow-x-auto w-full border-b border-gray-50 dark:border-gray-850/30 text-center text-sm font-medium bg-transparent dark:text-gray-200"
-							>
-								<button
-									class="min-w-fit py-1.5 px-4 border-b {selectedTab === ''
-										? ' '
-										: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-									type="button"
-									on:click={() => {
-										selectedTab = '';
-									}}>{$i18n.t('Content')}</button
-								>
-
-								<button
-									class="min-w-fit py-1.5 px-4 border-b {selectedTab === 'preview'
-										? ' '
-										: ' border-transparent text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-									type="button"
-									on:click={() => {
-										selectedTab = 'preview';
-									}}>{$i18n.t('Preview')}</button
-								>
-							</div>
-
-							{#if selectedTab === 'preview'}
-								<div class="max-h-[60vh] overflow-scroll scrollbar-hidden text-sm relative">
-									<CodeBlock
-										code={item.file.data.content}
-										lang={item.name.split('.').pop()}
-										token={null}
-										edit={false}
-										run={false}
-										save={false}
-									/>
-								</div>
-							{:else}
-								<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
-									{(item?.file?.data?.content ?? '').trim() || 'No content'}
-								</div>
-							{/if}
-						{:else}
-							<div class="max-h-96 overflow-scroll scrollbar-hidden text-xs whitespace-pre-wrap">
-								{(item?.file?.data?.content ?? '').trim() || 'No content'}
-							</div>
-						{/if}
-					{/if}
 				{/if}
 			{:else}
 				<div class="flex items-center justify-center py-6">