refac

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

@@ -22,6 +22,7 @@
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 	import PageEdit from '$lib/components/icons/PageEdit.svelte';
 	import Chats from './InputMenu/Chats.svelte';
+	import Files from './InputMenu/Files.svelte';
 	import Notes from './InputMenu/Notes.svelte';
 	import Knowledge from './InputMenu/Knowledge.svelte';
 	import AttachWebpageModal from './AttachWebpageModal.svelte';
@@ -204,6 +205,38 @@
 						</button>
 					</Tooltip>
 
+					<Tooltip
+						content={fileUploadCapableModels.length !== selectedModels.length
+							? $i18n.t('Model(s) do not support file upload')
+							: !fileUploadEnabled
+								? $i18n.t('You do not have permission to upload files.')
+								: ''}
+						className="w-full"
+					>
+						<button
+							class="flex gap-2 w-full items-center px-3 py-1.5 text-sm select-none cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl {!fileUploadEnabled
+								? 'opacity-50'
+								: ''}"
+							on:click={() => {
+								if (fileUploadEnabled) {
+									tab = 'files';
+								}
+							}}
+						>
+							<DocumentArrowUp />
+
+							<div class="flex items-center w-full justify-between">
+								<div class="line-clamp-1">
+									{$i18n.t('Attach Files')}
+								</div>
+
+								<div class="text-gray-500">
+									<ChevronRight />
+								</div>
+							</div>
+						</button>
+					</Tooltip>
+
 					{#if $config?.features?.enable_notes ?? false}
 						<Tooltip
 							content={fileUploadCapableModels.length !== selectedModels.length
@@ -481,6 +514,25 @@
 
 					<Notes {onSelect} />
 				</div>
+			{:else if tab === 'files'}
+				<div in:fly={{ x: 20, duration: 150 }}>
+					<button
+						class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm select-none cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800/50"
+						on:click={() => {
+							tab = '';
+						}}
+					>
+						<ChevronLeft />
+
+						<div class="flex items-center w-full justify-between">
+							<div>
+								{$i18n.t('Files')}
+							</div>
+						</div>
+					</button>
+
+					<Files {onSelect} />
+				</div>
 			{:else if tab === 'chats'}
 				<div in:fly={{ x: 20, duration: 150 }}>
 					<button

src/lib/components/chat/MessageInput/InputMenu/Files.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { onMount, tick, getContext } from 'svelte';
+
+	import { searchFiles } from '$lib/apis/files';
+
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Loader from '$lib/components/common/Loader.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let onSelect = (e) => {};
+
+	let loaded = false;
+	let items = [];
+	let selectedIdx = 0;
+
+	let page = 0;
+	let limit = 50;
+	let itemsLoading = false;
+	let allItemsLoaded = false;
+
+	const loadMoreItems = async () => {
+		if (allItemsLoaded) return;
+		page += 1;
+		await getItemsPage();
+	};
+
+	const getItemsPage = async () => {
+		itemsLoading = true;
+		let res = await searchFiles(localStorage.token, '*', page * limit, limit).catch(() => []);
+
+		if ((res ?? []).length < limit) {
+			allItemsLoaded = true;
+		}
+
+		items = [
+			...items,
+			...(res ?? []).map((file) => ({
+				...file,
+				type: file?.meta?.content_type?.startsWith('image/') ? 'image' : 'file',
+				name: file.filename,
+				url: file.id,
+				content_type: file?.meta?.content_type,
+				size: file?.meta?.size
+			}))
+		];
+
+		itemsLoading = false;
+		return res;
+	};
+
+	onMount(async () => {
+		await getItemsPage();
+		await tick();
+		loaded = true;
+	});
+</script>
+
+{#if loaded}
+	{#if items.length === 0}
+		<div class="text-center text-xs text-gray-500 py-3">{$i18n.t('No files found')}</div>
+	{:else}
+		<div class="flex flex-col gap-0.5">
+			{#each items as item, idx}
+				<button
+					class=" px-2.5 py-1 rounded-xl w-full text-left flex justify-between items-center text-sm {idx ===
+					selectedIdx
+						? ' bg-gray-50 dark:bg-gray-800 dark:text-gray-100 selected-command-option-button'
+						: ''}"
+					type="button"
+					on:click={() => {
+						onSelect(item);
+					}}
+					on:mousemove={() => {
+						selectedIdx = idx;
+					}}
+					on:mouseleave={() => {
+						if (idx === 0) {
+							selectedIdx = -1;
+						}
+					}}
+					data-selected={idx === selectedIdx}
+				>
+					<div class="text-black dark:text-gray-100 flex items-center gap-1.5 overflow-hidden">
+						<Tooltip content={$i18n.t('File')} placement="top">
+							<DocumentPage className="size-4 shrink-0" />
+						</Tooltip>
+
+						<Tooltip content={item?.name} placement="top-start">
+							<div class="line-clamp-1 flex-1">
+								{item?.name}
+							</div>
+						</Tooltip>
+					</div>
+				</button>
+			{/each}
+
+			{#if !allItemsLoaded}
+				<Loader
+					on:visible={(e) => {
+						if (!itemsLoading) {
+							loadMoreItems();
+						}
+					}}
+				>
+					<div class="w-full flex justify-center py-4 text-xs animate-pulse items-center gap-2">
+						<Spinner className=" size-4" />
+						<div class=" ">{$i18n.t('Loading...')}</div>
+					</div>
+				</Loader>
+			{/if}
+		</div>
+	{/if}
+{:else}
+	<div class="py-4.5">
+		<Spinner />
+	</div>
+{/if}

src/lib/components/chat/Messages/CodeBlock.svelte

@@ -469,7 +469,7 @@
 			{/if}
 		{:else}
 			<div
-				class="sticky {stickyButtonsClassName} left-0 right-0 py-1.5 px-3 gap-2 flex items-center justify-end w-full z-10 text-xs text-black dark:text-white bg-white dark:bg-black rounded-t-2xl"
+				class="sticky {stickyButtonsClassName} left-0 right-0 py-1.5 px-3.5 gap-2 flex items-center justify-end w-full z-10 text-xs text-black dark:text-white bg-white dark:bg-black rounded-t-2xl"
 			>
 				<div class="flex-1 truncate">
 					<Tooltip content={lang} placement="top-start">
@@ -599,17 +599,17 @@
 
 				{#if executing || stdout || stderr || result || files}
 					<div
-						class="bg-gray-50 dark:bg-black dark:text-white rounded-b-2xl! py-4 px-4 flex flex-col gap-2"
+						class="bg-gray-50 dark:bg-black dark:text-white rounded-b-2xl! pt-2 pb-3 px-3.5 flex flex-col gap-2"
 					>
 						{#if executing}
 							<div class=" ">
-								<div class=" text-gray-500 text-sm mb-1">{$i18n.t('STDOUT/STDERR')}</div>
+								<div class=" text-gray-500 text-xs mb-1">{$i18n.t('STDOUT/STDERR')}</div>
 								<div class="text-sm">{$i18n.t('Running...')}</div>
 							</div>
 						{:else}
 							{#if stdout || stderr}
 								<div class=" ">
-									<div class=" text-gray-500 text-sm mb-1">{$i18n.t('STDOUT/STDERR')}</div>
+									<div class=" text-gray-500 text-xs mb-1">{$i18n.t('STDOUT/STDERR')}</div>
 									<div
 										class="text-sm font-mono whitespace-pre-wrap {stdout?.split('\n')?.length > 100
 											? `max-h-96`
@@ -621,7 +621,7 @@
 							{/if}
 							{#if result || files}
 								<div class=" ">
-									<div class=" text-gray-500 text-sm mb-1">{$i18n.t('RESULT')}</div>
+									<div class=" text-gray-500 text-xs mb-1">{$i18n.t('RESULT')}</div>
 									{#if result}
 										<div class="text-sm">{`${JSON.stringify(result)}`}</div>
 									{/if}