refac

src/lib/components/chat/Chat.svelte

@@ -93,6 +93,7 @@
 	import ChatControls from './ChatControls.svelte';
 	import EventConfirmDialog from '../common/ConfirmDialog.svelte';
 	import Placeholder from './Placeholder.svelte';
+	import FilesOverlay from './MessageInput/FilesOverlay.svelte';
 	import NotificationToast from '../NotificationToast.svelte';
 	import Spinner from '../common/Spinner.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
@@ -164,6 +165,7 @@
 	let showCommands = false;
 
 	let generating = false;
+	let dragged = false;
 	let generationController = null;
 
 	let chat = null;
@@ -2645,6 +2647,7 @@
 
 			<PaneGroup direction="horizontal" class="w-full h-full">
 				<Pane defaultSize={50} minSize={30} class="h-full flex relative max-w-full flex-col">
+					<FilesOverlay show={dragged} />
 					<Navbar
 						bind:this={navbarElement}
 						chat={{
@@ -2703,7 +2706,7 @@
 						}}
 					/>
 
-					<div class="flex flex-col flex-auto z-10 w-full @container overflow-auto">
+					<div id="chat-pane" class="flex flex-col flex-auto z-10 w-full @container overflow-auto">
 						{#if ($settings?.landingPageMode === 'chat' && !$selectedFolder) || createMessagesList(history, history.currentId).length > 0}
 							<div
 								class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden"
@@ -2757,6 +2760,7 @@
 									bind:webSearchEnabled
 									bind:atSelectedModel
 									bind:showCommands
+									bind:dragged
 									toolServers={$toolServers}
 									{generating}
 									{stopResponse}
@@ -2827,6 +2831,7 @@
 									bind:webSearchEnabled
 									bind:atSelectedModel
 									bind:showCommands
+									bind:dragged
 									toolServers={$toolServers}
 									{stopResponse}
 									{createMessagePair}

src/lib/components/chat/FileNav.svelte

@@ -54,6 +54,7 @@
 	let creatingFolder = false;
 	let newFolderName = '';
 	let newFolderInput: HTMLInputElement;
+	let uploadInput: HTMLInputElement;
 
 	let deleteTarget: { path: string; name: string } | null = null;
 	let showDeleteConfirm = false;
@@ -370,6 +371,44 @@
 						<NewFolderAlt className="size-3.5" />
 					</button>
 				</Tooltip>
+				<Tooltip content={$i18n.t('Upload')}>
+					<button
+						class="shrink-0 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
+						on:click={() => uploadInput?.click()}
+						aria-label={$i18n.t('Upload')}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							class="size-3.5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
+							/>
+						</svg>
+					</button>
+				</Tooltip>
+				<input
+					bind:this={uploadInput}
+					type="file"
+					multiple
+					hidden
+					on:change={async () => {
+						if (!uploadInput?.files?.length || !configured) return;
+						uploading = true;
+						for (const file of Array.from(uploadInput.files)) {
+							await uploadToTerminal(terminalUrl, terminalKey, currentPath, file);
+						}
+						uploading = false;
+						uploadInput.value = '';
+						await loadDir(currentPath);
+					}}
+				/>
 			{/if}
 		</div>
 

src/lib/components/chat/MessageInput.svelte

@@ -62,7 +62,7 @@
 
 	import InputMenu from './MessageInput/InputMenu.svelte';
 	import VoiceRecording from './MessageInput/VoiceRecording.svelte';
-	import FilesOverlay from './MessageInput/FilesOverlay.svelte';
+
 	import ToolServersModal from './ToolServersModal.svelte';
 
 	import RichTextInput from '../common/RichTextInput.svelte';
@@ -437,7 +437,7 @@
 
 	let showInputModal = false;
 
-	let dragged = false;
+	export let dragged = false;
 	let shiftKey = false;
 
 	let user = null;
@@ -992,7 +992,7 @@
 
 		await tick();
 
-		const dropzoneElement = document.getElementById('chat-container');
+		const dropzoneElement = document.getElementById('chat-pane');
 
 		dropzoneElement?.addEventListener('dragover', onDragOver);
 		dropzoneElement?.addEventListener('drop', onDrop);
@@ -1009,7 +1009,7 @@
 		window.removeEventListener('focus', onFocus);
 		window.removeEventListener('blur', onBlur);
 
-		const dropzoneElement = document.getElementById('chat-container');
+		const dropzoneElement = document.getElementById('chat-pane');
 
 		if (dropzoneElement) {
 			dropzoneElement?.removeEventListener('dragover', onDragOver);
@@ -1019,7 +1019,7 @@
 	});
 </script>
 
-<FilesOverlay show={dragged} />
+
 <ToolServersModal bind:show={showTools} {selectedToolIds} />
 
 <InputVariablesModal

src/lib/components/chat/MessageInput/FilesOverlay.svelte

@@ -1,25 +1,12 @@
 <script lang="ts">
-	import { showSidebar } from '$lib/stores';
 	import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
 
 	export let show = false;
-	let overlayElement = null;
-
-	$: if (show && overlayElement) {
-		document.body.appendChild(overlayElement);
-		document.body.style.overflow = 'hidden';
-	} else if (overlayElement) {
-		document.body.removeChild(overlayElement);
-		document.body.style.overflow = 'unset';
-	}
 </script>
 
 {#if show}
 	<div
-		bind:this={overlayElement}
+		class="absolute inset-0 w-full h-full flex z-[9999] touch-none pointer-events-none"
-		class="fixed {$showSidebar
-			? 'left-0 md:left-[var(--sidebar-width)] md:w-[calc(100%-var(--sidebar-width))]'
-			: 'left-0'}  fixed top-0 right-0 bottom-0 w-full h-full flex z-9999 touch-none pointer-events-none"
 		id="dropzone"
 		role="region"
 		aria-label="Drag and Drop Container"

src/lib/components/chat/Placeholder.svelte

@@ -60,6 +60,8 @@
 
 	export let toolServers = [];
 
+	export let dragged = false;
+
 	let models = [];
 	let selectedModelIdx = 0;
 
@@ -212,6 +214,7 @@
 					bind:webSearchEnabled
 					bind:atSelectedModel
 					bind:showCommands
+					bind:dragged
 					{toolServers}
 					{stopResponse}
 					{createMessagePair}