Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-02-27 16:21:27 -06:00
parent 0324a1bbdd
commit f60d386b74
3 changed files with 139 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/FileNav.svelte
+133 -111
View File
@@ -7,7 +7,6 @@
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { getContext, onMount, onDestroy, tick } from 'svelte'; import { getContext, onMount, onDestroy, tick } from 'svelte';
import { terminalServers, settings, showFileNavPath, selectedTerminalId } from '$lib/stores'; import { terminalServers, settings, showFileNavPath, selectedTerminalId } from '$lib/stores';
import { WEBUI_API_BASE_URL } from '$lib/constants';
import { import {
getCwd, getCwd,
listFiles, listFiles,
@@ -31,71 +30,89 @@
export let onAttach: ((blob: Blob, name: string, contentType: string) => void) | null = null; export let onAttach: ((blob: Blob, name: string, contentType: string) => void) | null = null;
// ── Directory state ──────────────────────────────────────────────────
let currentPath = savedPath; let currentPath = savedPath;
let entries: FileEntry[] = []; let entries: FileEntry[] = [];
let loading = false; let loading = false;
let error: string | null = null; let error: string | null = null;
// ── File preview state ───────────────────────────────────────────────
let selectedFile: string | null = null; let selectedFile: string | null = null;
let fileContent: string | null = null; let fileContent: string | null = null;
let fileImageUrl: string | null = null; let fileImageUrl: string | null = null;
let filePdfData: ArrayBuffer | null = null; let filePdfData: ArrayBuffer | null = null;
let fileLoading = false; let fileLoading = false;
let filePreviewRef: FilePreview; let filePreviewRef: FilePreview;
const IMAGE_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'avif']); // ── Upload / folder creation ─────────────────────────────────────────
const isImage = (path: string) => IMAGE_EXTS.has(path.split('.').pop()?.toLowerCase() ?? '');
const isPdf = (path: string) => path.split('.').pop()?.toLowerCase() === 'pdf';
let isDragOver = false; let isDragOver = false;
let uploading = false; let uploading = false;
let creatingFolder = false; let creatingFolder = false;
let newFolderName = ''; let newFolderName = '';
let newFolderInput: HTMLInputElement; let newFolderInput: HTMLInputElement;
// ── Delete confirmation ──────────────────────────────────────────────
let deleteTarget: { path: string; name: string } | null = null; let deleteTarget: { path: string; name: string } | null = null;
let showDeleteConfirm = false; let showDeleteConfirm = false;
let shiftKey = false; let shiftKey = false;
$: firstTerminal = $selectedTerminalId // ── Terminal resolution ──────────────────────────────────────────────
? ($terminalServers ?? []).find((t) => t.id === $selectedTerminalId) ?? null let selectedTerminal: { url: string; key: string } | null = null;
: ($terminalServers?.[0] ?? null);
$: activeUserTerminal = ($settings?.terminalServers ?? []).find(
(s) => s.url === $selectedTerminalId
);
// System terminals go through the open-webui proxy and need the session token.
// Direct user terminals talk directly to the server and need the terminal's own key.
$: isSystemTerminal = !!firstTerminal;
$: terminalUrl = firstTerminal?.url ?? activeUserTerminal?.url ?? '';
$: terminalKey = isSystemTerminal ? localStorage.token : (activeUserTerminal?.key ?? '');
$: configured = !!terminalUrl;
// Reload file list when terminal is swapped const getTerminal = (): { url: string; key: string } | null => {
let prevTerminalUrl = ''; const systemTerminal = $selectedTerminalId
$: if (terminalUrl && terminalUrl !== prevTerminalUrl) { ? ($terminalServers ?? []).find((t) => t.id === $selectedTerminalId) ?? null
prevTerminalUrl = terminalUrl; : $terminalServers?.[0] ?? null;
(async () => {
const cwd = await getCwd(terminalUrl, terminalKey);
const dir = cwd ? (cwd.endsWith('/') ? cwd : cwd + '/') : '/';
savedPath = dir;
loadDir(dir);
})();
}
$: breadcrumbs = currentPath const userTerminal = ($settings?.terminalServers ?? []).find(
.split('/') (s) => s.url === $selectedTerminalId
.filter(Boolean)
.reduce(
(acc, part) => {
const prev = acc[acc.length - 1];
acc.push({ label: part, path: `${prev.path}${part}/` });
return acc;
},
[{ label: '/', path: '/' }]
); );
const isSystem = !!systemTerminal;
const url = systemTerminal?.url ?? userTerminal?.url ?? '';
const key = isSystem ? localStorage.token : (userTerminal?.key ?? '');
return url ? { url, key } : null;
};
// Detect terminal changes — the explicit store references ensure
// Svelte re-runs this block when any of them update.
let prevTerminalUrl = '';
$: {
$selectedTerminalId, $terminalServers, $settings;
const terminal = getTerminal();
selectedTerminal = terminal;
if (terminal && terminal.url !== prevTerminalUrl) {
prevTerminalUrl = terminal.url;
(async () => {
const cwd = await getCwd(terminal.url, terminal.key);
const dir = cwd ? (cwd.endsWith('/') ? cwd : cwd + '/') : '/';
savedPath = dir;
loadDir(dir);
})();
}
}
// ── Helpers ──────────────────────────────────────────────────────────
const IMAGE_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'avif']);
const isImage = (path: string) => IMAGE_EXTS.has(path.split('.').pop()?.toLowerCase() ?? '');
const isPdf = (path: string) => path.split('.').pop()?.toLowerCase() === 'pdf';
const buildBreadcrumbs = (path: string) =>
path
.split('/')
.filter(Boolean)
.reduce(
(acc, part) => {
const prev = acc[acc.length - 1];
acc.push({ label: part, path: `${prev.path}${part}/` });
return acc;
},
[{ label: '/', path: '/' }]
);
// ── File preview management ──────────────────────────────────────────
const clearFilePreview = () => { const clearFilePreview = () => {
fileContent = null; fileContent = null;
filePreviewRef?.disposePanzoom(); filePreviewRef?.disposePanzoom();
@@ -106,19 +123,24 @@
filePdfData = null; filePdfData = null;
}; };
// ── Directory operations ─────────────────────────────────────────────
const loadDir = async (path: string) => { const loadDir = async (path: string) => {
if (!configured) return; const terminal = selectedTerminal;
if (!terminal) return;
loading = true; loading = true;
error = null; error = null;
selectedFile = null; selectedFile = null;
clearFilePreview(); clearFilePreview();
currentPath = path; currentPath = path;
savedPath = path; savedPath = path;
const result = await listFiles(terminalUrl, terminalKey, path);
const result = await listFiles(terminal.url, terminal.key, path);
loading = false; loading = false;
// Set working directory on the terminal server (fire-and-forget) // Set working directory on the terminal server (fire-and-forget)
setCwd(terminalUrl, terminalKey, path); setCwd(terminal.url, terminal.key, path);
if (result === null) { if (result === null) {
error = error =
'Failed to load directory. Check your Terminal connection in Settings → Integrations.'; 'Failed to load directory. Check your Terminal connection in Settings → Integrations.';
@@ -134,26 +156,34 @@
const openEntry = async (entry: FileEntry) => { const openEntry = async (entry: FileEntry) => {
if (entry.type === 'directory') { if (entry.type === 'directory') {
await loadDir(`${currentPath}${entry.name}/`); await loadDir(`${currentPath}${entry.name}/`);
} else { return;
const filePath = `${currentPath}${entry.name}`;
selectedFile = filePath;
fileLoading = true;
clearFilePreview();
if (isImage(filePath)) {
const result = await downloadFileBlob(terminalUrl, terminalKey, filePath);
if (result) fileImageUrl = URL.createObjectURL(result.blob);
} else if (isPdf(filePath)) {
const result = await downloadFileBlob(terminalUrl, terminalKey, filePath);
if (result) filePdfData = await result.blob.arrayBuffer();
} else {
fileContent = await readFile(terminalUrl, terminalKey, filePath);
}
fileLoading = false;
} }
const terminal = selectedTerminal;
if (!terminal) return;
const filePath = `${currentPath}${entry.name}`;
selectedFile = filePath;
fileLoading = true;
clearFilePreview();
if (isImage(filePath)) {
const result = await downloadFileBlob(terminal.url, terminal.key, filePath);
if (result) fileImageUrl = URL.createObjectURL(result.blob);
} else if (isPdf(filePath)) {
const result = await downloadFileBlob(terminal.url, terminal.key, filePath);
if (result) filePdfData = await result.blob.arrayBuffer();
} else {
fileContent = await readFile(terminal.url, terminal.key, filePath);
}
fileLoading = false;
}; };
const downloadFile = async (path: string) => { const downloadFile = async (path: string) => {
const result = await downloadFileBlob(terminalUrl, terminalKey, path); const terminal = selectedTerminal;
if (!terminal) return;
const result = await downloadFileBlob(terminal.url, terminal.key, path);
if (!result) return; if (!result) return;
const url = URL.createObjectURL(result.blob); const url = URL.createObjectURL(result.blob);
const a = document.createElement('a'); const a = document.createElement('a');
@@ -163,13 +193,7 @@
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
}; };
const formatSize = (bytes?: number) => { // ── Drag-and-drop upload ─────────────────────────────────────────────
if (bytes === undefined) return '';
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
};
const handleDragOver = (e: DragEvent) => { const handleDragOver = (e: DragEvent) => {
if (selectedFile) return; if (selectedFile) return;
if (!e.dataTransfer?.types.includes('Files')) return; if (!e.dataTransfer?.types.includes('Files')) return;
@@ -178,40 +202,43 @@
isDragOver = true; isDragOver = true;
}; };
const handleDragLeave = () => {
isDragOver = false;
};
const handleDrop = async (e: DragEvent) => { const handleDrop = async (e: DragEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
isDragOver = false; isDragOver = false;
if (selectedFile) return;
const terminal = selectedTerminal;
if (selectedFile || !terminal) return;
const droppedFiles = Array.from(e.dataTransfer?.files ?? []); const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
if (!droppedFiles.length || !configured) return; if (!droppedFiles.length) return;
uploading = true; uploading = true;
for (const file of droppedFiles) { for (const file of droppedFiles) {
await uploadToTerminal(terminalUrl, terminalKey, currentPath, file); await uploadToTerminal(terminal.url, terminal.key, currentPath, file);
} }
uploading = false; uploading = false;
await loadDir(currentPath); await loadDir(currentPath);
}; };
const handleUploadFiles = async (files: File[]) => { const handleUploadFiles = async (files: File[]) => {
if (!files.length || !configured) return; const terminal = selectedTerminal;
if (!files.length || !terminal) return;
uploading = true; uploading = true;
for (const file of files) { for (const file of files) {
await uploadToTerminal(terminalUrl, terminalKey, currentPath, file); await uploadToTerminal(terminal.url, terminal.key, currentPath, file);
} }
uploading = false; uploading = false;
await loadDir(currentPath); await loadDir(currentPath);
}; };
const startNewFolder = () => { // ── Folder creation ──────────────────────────────────────────────────
const startNewFolder = async () => {
creatingFolder = true; creatingFolder = true;
newFolderName = ''; newFolderName = '';
tick().then(() => newFolderInput?.focus()); await tick();
newFolderInput?.focus();
}; };
const submitNewFolder = async () => { const submitNewFolder = async () => {
@@ -219,22 +246,26 @@
creatingFolder = false; creatingFolder = false;
newFolderName = ''; newFolderName = '';
if (!name) return; if (!name) return;
const result = await createDirectory(terminalUrl, terminalKey, `${currentPath}${name}`);
if (result) { const terminal = selectedTerminal;
toast.success($i18n.t('Folder created')); if (!terminal) return;
} else {
toast.error($i18n.t('Failed to create folder')); const result = await createDirectory(terminal.url, terminal.key, `${currentPath}${name}`);
} toast[result ? 'success' : 'error'](
$i18n.t(result ? 'Folder created' : 'Failed to create folder')
);
await loadDir(currentPath); await loadDir(currentPath);
}; };
// ── Delete ───────────────────────────────────────────────────────────
const handleDelete = async (path: string, name: string) => { const handleDelete = async (path: string, name: string) => {
const result = await deleteEntry(terminalUrl, terminalKey, path); const terminal = selectedTerminal;
if (result) { if (!terminal) return;
toast.success($i18n.t('{{name}} deleted', { name }));
} else { const result = await deleteEntry(terminal.url, terminal.key, path);
toast.error($i18n.t('Failed to delete {{name}}', { name })); toast[result ? 'success' : 'error'](
} $i18n.t(result ? '{{name}} deleted' : 'Failed to delete {{name}}', { name })
);
await loadDir(currentPath); await loadDir(currentPath);
}; };
@@ -243,19 +274,18 @@
showDeleteConfirm = true; showDeleteConfirm = true;
}; };
// ── Lifecycle ────────────────────────────────────────────────────────
onMount(async () => { onMount(async () => {
if (!configured) return; const terminal = getTerminal();
if (!terminal) return;
let handledDisplayFile = false; let handledDisplayFile = false;
// Subscribe to display_file requests
const unsubFileNav = showFileNavPath.subscribe(async (filePath) => { const unsubFileNav = showFileNavPath.subscribe(async (filePath) => {
if (!filePath || !configured) return; if (!filePath || !selectedTerminal) return;
handledDisplayFile = true; handledDisplayFile = true;
// Clear the store so it can be re-triggered for the same path
showFileNavPath.set(null); showFileNavPath.set(null);
// Navigate to the parent directory
const lastSlash = filePath.lastIndexOf('/'); const lastSlash = filePath.lastIndexOf('/');
const dir = lastSlash > 0 ? filePath.substring(0, lastSlash + 1) : '/'; const dir = lastSlash > 0 ? filePath.substring(0, lastSlash + 1) : '/';
const fileName = filePath.substring(lastSlash + 1); const fileName = filePath.substring(lastSlash + 1);
@@ -264,19 +294,14 @@
await loadDir(dir); await loadDir(dir);
} }
// Open the file for preview
await tick(); await tick();
const entry = entries.find((e) => e.name === fileName); const entry = entries.find((e) => e.name === fileName);
if (entry) { if (entry) await openEntry(entry);
await openEntry(entry);
}
}); });
// Only load the default directory if a display_file wasn't pending
if (!handledDisplayFile) { if (!handledDisplayFile) {
// On first ever open, resolve the server's CWD instead of defaulting to /
if (savedPath === '/') { if (savedPath === '/') {
const cwd = await getCwd(terminalUrl, terminalKey); const cwd = await getCwd(terminal.url, terminal.key);
if (cwd) savedPath = cwd.endsWith('/') ? cwd : cwd + '/'; if (cwd) savedPath = cwd.endsWith('/') ? cwd : cwd + '/';
} }
loadDir(savedPath); loadDir(savedPath);
@@ -290,9 +315,8 @@
}; };
const onBlur = () => (shiftKey = false); const onBlur = () => (shiftKey = false);
// Auto-reload directory when the browser tab regains focus
const onVisibilityChange = () => { const onVisibilityChange = () => {
if (document.visibilityState === 'visible' && !selectedFile && configured && !loading) { if (document.visibilityState === 'visible' && !selectedFile && selectedTerminal && !loading) {
loadDir(currentPath); loadDir(currentPath);
} }
}; };
@@ -325,7 +349,7 @@
}} }}
/> />
{#if !configured} {#if !selectedTerminal}
<div class="flex-1 flex flex-col items-center justify-center p-6 text-center gap-3"> <div class="flex-1 flex flex-col items-center justify-center p-6 text-center gap-3">
<Folder className="size-10 text-gray-300 dark:text-gray-600" /> <Folder className="size-10 text-gray-300 dark:text-gray-600" />
<div class="text-sm text-gray-500 dark:text-gray-400"> <div class="text-sm text-gray-500 dark:text-gray-400">
@@ -339,7 +363,7 @@
<div <div
class="flex flex-col h-full min-h-0 relative" class="flex flex-col h-full min-h-0 relative"
on:dragover={handleDragOver} on:dragover={handleDragOver}
on:dragleave={handleDragLeave} on:dragleave={() => (isDragOver = false)}
on:drop={handleDrop} on:drop={handleDrop}
role="region" role="region"
aria-label={$i18n.t('File browser')} aria-label={$i18n.t('File browser')}
@@ -367,7 +391,7 @@
{/if} {/if}
<FileNavToolbar <FileNavToolbar
{breadcrumbs} breadcrumbs={buildBreadcrumbs(currentPath)}
{selectedFile} {selectedFile}
{loading} {loading}
onNavigate={loadDir} onNavigate={loadDir}
@@ -389,7 +413,6 @@
onDownload={() => downloadFile(selectedFile)} onDownload={() => downloadFile(selectedFile)}
/> />
{:else} {:else}
<!-- Directory listing -->
{#if uploading} {#if uploading}
<div class="flex items-center justify-center gap-2 p-4 text-xs text-gray-500"> <div class="flex items-center justify-center gap-2 p-4 text-xs text-gray-500">
<Spinner className="size-4" /> <Spinner className="size-4" />
@@ -411,7 +434,7 @@
</div> </div>
{/if} {/if}
{#if !loading && !error && !uploading && !selectedFile} {#if !loading && !error && !uploading}
{#if creatingFolder} {#if creatingFolder}
<div class="flex items-center gap-2 px-3 py-1.5"> <div class="flex items-center gap-2 px-3 py-1.5">
<Folder className="size-4 shrink-0 text-blue-400 dark:text-blue-300" /> <Folder className="size-4 shrink-0 text-blue-400 dark:text-blue-300" />
@@ -438,12 +461,11 @@
<FileEntryRow <FileEntryRow
{entry} {entry}
{currentPath} {currentPath}
{terminalUrl} terminalUrl={selectedTerminal.url}
{terminalKey} terminalKey={selectedTerminal.key}
onOpen={openEntry} onOpen={openEntry}
onDownload={downloadFile} onDownload={downloadFile}
onDelete={requestDelete} onDelete={requestDelete}
{formatSize}
/> />
{/each} {/each}
</ul> </ul>
src/lib/components/chat/FileNav/FileEntryRow.svelte
+2 -3
View File
@@ -2,6 +2,7 @@
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { DropdownMenu } from 'bits-ui'; import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions'; import { flyAndScale } from '$lib/utils/transitions';
import { formatFileSize } from '$lib/utils';
import type { FileEntry } from '$lib/apis/terminal'; import type { FileEntry } from '$lib/apis/terminal';
import Folder from '../../icons/Folder.svelte'; import Folder from '../../icons/Folder.svelte';
import EllipsisHorizontal from '../../icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '../../icons/EllipsisHorizontal.svelte';
@@ -17,8 +18,6 @@
export let onOpen: (entry: FileEntry) => void = () => {}; export let onOpen: (entry: FileEntry) => void = () => {};
export let onDownload: (path: string) => void = () => {}; export let onDownload: (path: string) => void = () => {};
export let onDelete: (path: string, name: string) => void = () => {}; export let onDelete: (path: string, name: string) => void = () => {};
export let formatSize: (bytes?: number) => string = () => '';
</script> </script>
<li class="group"> <li class="group">
@@ -62,7 +61,7 @@
{entry.name} {entry.name}
</span> </span>
{#if entry.type === 'file' && entry.size !== undefined} {#if entry.type === 'file' && entry.size !== undefined}
<span class="text-xs text-gray-400 shrink-0">{formatSize(entry.size)}</span> <span class="text-xs text-gray-400 shrink-0">{formatFileSize(entry.size)}</span>
{/if} {/if}
</button> </button>
src/lib/components/chat/FileNav/FilePreview.svelte
+4 -3
View File
@@ -19,15 +19,16 @@
export let onDownload: () => void = () => {}; export let onDownload: () => void = () => {};
const MD_EXTS = new Set(['md', 'markdown', 'mdx']); const MD_EXTS = new Set(['md', 'markdown', 'mdx']);
$: isMarkdown = MD_EXTS.has(selectedFile?.split('.').pop()?.toLowerCase() ?? ''); const getExt = (path: string | null) => path?.split('.').pop()?.toLowerCase() ?? '';
$: isMarkdown = MD_EXTS.has(getExt(selectedFile));
$: renderedHtml = $: renderedHtml =
isMarkdown && fileContent isMarkdown && fileContent
? DOMPurify.sanitize(marked.parse(fileContent, { async: false }) as string) ? DOMPurify.sanitize(marked.parse(fileContent, { async: false }) as string)
: ''; : '';
let showRaw = false; let showRaw = false;
// Reset to preview mode when switching files $: selectedFile, (showRaw = false); // reset to preview mode when switching files
$: if (selectedFile) showRaw = false;
let pzInstance: PanZoom | null = null; let pzInstance: PanZoom | null = null;