feat: model file upload capability

src/lib/components/chat/MessageInput.svelte

@@ -120,6 +120,11 @@
 		(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true
 	);
 
+	let fileUploadCapableModels = [];
+	$: fileUploadCapableModels = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).filter(
+		(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.file_upload ?? true
+	);
+
 	let webSearchCapableModels = [];
 	$: webSearchCapableModels = (atSelectedModel?.id ? [atSelectedModel.id] : selectedModels).filter(
 		(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.web_search ?? true
@@ -1086,6 +1091,8 @@
 									<div class="ml-1 self-end flex items-center flex-1 max-w-[80%] gap-0.5">
 										<InputMenu
 											bind:selectedToolIds
+											selectedModels={atSelectedModel ? [atSelectedModel.id] : selectedModels}
+											{fileUploadCapableModels}
 											{screenCaptureHandler}
 											{inputFilesHandler}
 											uploadFilesHandler={() => {

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

@@ -20,6 +20,11 @@
 
 	const i18n = getContext('i18n');
 
+	export let selectedToolIds: string[] = [];
+
+	export let selectedModels: string[] = [];
+	export let fileUploadCapableModels: string[] = [];
+
 	export let screenCaptureHandler: Function;
 	export let uploadFilesHandler: Function;
 	export let inputFilesHandler: Function;
@@ -27,8 +32,6 @@
 	export let uploadGoogleDriveHandler: Function;
 	export let uploadOneDriveHandler: Function;
 
-	export let selectedToolIds: string[] = [];
-
 	export let onClose: Function;
 
 	let tools = {};
@@ -40,7 +43,9 @@
 	}
 
 	let fileUploadEnabled = true;
-	$: fileUploadEnabled = $user?.role === 'admin' || $user?.permissions?.chat?.file_upload;
+	$: fileUploadEnabled =
+		fileUploadCapableModels.length === selectedModels.length &&
+		($user?.role === 'admin' || $user?.permissions?.chat?.file_upload);
 
 	const init = async () => {
 		if ($_tools === null) {
@@ -169,7 +174,11 @@
 			{/if}
 
 			<Tooltip
-				content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files.') : ''}
+				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"
 			>
 				<DropdownMenu.Item
@@ -196,7 +205,11 @@
 			</Tooltip>
 
 			<Tooltip
-				content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files.') : ''}
+				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"
 			>
 				<DropdownMenu.Item
@@ -214,157 +227,164 @@
 				</DropdownMenu.Item>
 			</Tooltip>
 
-			{#if $config?.features?.enable_google_drive_integration}
-				<DropdownMenu.Item
-					class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-					on:click={() => {
-						uploadGoogleDriveHandler();
-					}}
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" class="w-5 h-5">
-						<path
-							d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
-							fill="#0066da"
-						/>
-						<path
-							d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
-							fill="#00ac47"
-						/>
-						<path
-							d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
-							fill="#ea4335"
-						/>
-						<path
-							d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
-							fill="#00832d"
-						/>
-						<path
-							d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
-							fill="#2684fc"
-						/>
-						<path
-							d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
-							fill="#ffba00"
-						/>
-					</svg>
-					<div class="line-clamp-1">{$i18n.t('Google Drive')}</div>
-				</DropdownMenu.Item>
-			{/if}
-
-			{#if $config?.features?.enable_onedrive_integration}
-				<DropdownMenu.Sub>
-					<DropdownMenu.SubTrigger
-						class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+			{#if fileUploadEnabled}
+				{#if $config?.features?.enable_google_drive_integration}
+					<DropdownMenu.Item
+						class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+						on:click={() => {
+							uploadGoogleDriveHandler();
+						}}
 					>
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5" fill="none">
-							<mask
-								id="mask0_87_7796"
-								style="mask-type:alpha"
-								maskUnits="userSpaceOnUse"
-								x="0"
-								y="6"
-								width="32"
-								height="20"
-							>
-								<path
-									d="M7.82979 26C3.50549 26 0 22.5675 0 18.3333C0 14.1921 3.35322 10.8179 7.54613 10.6716C9.27535 7.87166 12.4144 6 16 6C20.6308 6 24.5169 9.12183 25.5829 13.3335C29.1316 13.3603 32 16.1855 32 19.6667C32 23.0527 29 26 25.8723 25.9914L7.82979 26Z"
-									fill="#C4C4C4"
-								/>
-							</mask>
-							<g mask="url(#mask0_87_7796)">
-								<path
-									d="M7.83017 26.0001C5.37824 26.0001 3.18957 24.8966 1.75391 23.1691L18.0429 16.3335L30.7089 23.4647C29.5926 24.9211 27.9066 26.0001 26.0004 25.9915C23.1254 26.0001 12.0629 26.0001 7.83017 26.0001Z"
-									fill="url(#paint0_linear_87_7796)"
-								/>
-								<path
-									d="M25.5785 13.3149L18.043 16.3334L30.709 23.4647C31.5199 22.4065 32.0004 21.0916 32.0004 19.6669C32.0004 16.1857 29.1321 13.3605 25.5833 13.3337C25.5817 13.3274 25.5801 13.3212 25.5785 13.3149Z"
-									fill="url(#paint1_linear_87_7796)"
-								/>
-								<path
-									d="M7.06445 10.7028L18.0423 16.3333L25.5779 13.3148C24.5051 9.11261 20.6237 6 15.9997 6C12.4141 6 9.27508 7.87166 7.54586 10.6716C7.3841 10.6773 7.22358 10.6877 7.06445 10.7028Z"
-									fill="url(#paint2_linear_87_7796)"
-								/>
-								<path
-									d="M1.7535 23.1687L18.0425 16.3331L7.06471 10.7026C3.09947 11.0792 0 14.3517 0 18.3331C0 20.1665 0.657197 21.8495 1.7535 23.1687Z"
-									fill="url(#paint3_linear_87_7796)"
-								/>
-							</g>
-							<defs>
-								<linearGradient
-									id="paint0_linear_87_7796"
-									x1="4.42591"
-									y1="24.6668"
-									x2="27.2309"
-									y2="23.2764"
-									gradientUnits="userSpaceOnUse"
-								>
-									<stop stop-color="#2086B8" />
-									<stop offset="1" stop-color="#46D3F6" />
-								</linearGradient>
-								<linearGradient
-									id="paint1_linear_87_7796"
-									x1="23.8302"
-									y1="19.6668"
-									x2="30.2108"
-									y2="15.2082"
-									gradientUnits="userSpaceOnUse"
-								>
-									<stop stop-color="#1694DB" />
-									<stop offset="1" stop-color="#62C3FE" />
-								</linearGradient>
-								<linearGradient
-									id="paint2_linear_87_7796"
-									x1="8.51037"
-									y1="7.33333"
-									x2="23.3335"
-									y2="15.9348"
-									gradientUnits="userSpaceOnUse"
-								>
-									<stop stop-color="#0D3D78" />
-									<stop offset="1" stop-color="#063B83" />
-								</linearGradient>
-								<linearGradient
-									id="paint3_linear_87_7796"
-									x1="-0.340429"
-									y1="19.9998"
-									x2="14.5634"
-									y2="14.4649"
-									gradientUnits="userSpaceOnUse"
-								>
-									<stop stop-color="#16589B" />
-									<stop offset="1" stop-color="#1464B7" />
-								</linearGradient>
-							</defs>
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" class="w-5 h-5">
+							<path
+								d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+								fill="#0066da"
+							/>
+							<path
+								d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+								fill="#00ac47"
+							/>
+							<path
+								d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+								fill="#ea4335"
+							/>
+							<path
+								d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+								fill="#00832d"
+							/>
+							<path
+								d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+								fill="#2684fc"
+							/>
+							<path
+								d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+								fill="#ffba00"
+							/>
 						</svg>
-						<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive')}</div>
-					</DropdownMenu.SubTrigger>
-					<DropdownMenu.SubContent
-						class="w-[calc(100vw-2rem)] max-w-[280px] rounded-xl px-1 py-1 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
-						side={$mobile ? 'bottom' : 'right'}
-						sideOffset={$mobile ? 5 : 0}
-						alignOffset={$mobile ? 0 : -8}
-					>
-						<DropdownMenu.Item
-							class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-							on:click={() => {
-								uploadOneDriveHandler('personal');
-							}}
+						<div class="line-clamp-1">{$i18n.t('Google Drive')}</div>
+					</DropdownMenu.Item>
+				{/if}
+
+				{#if $config?.features?.enable_onedrive_integration}
+					<DropdownMenu.Sub>
+						<DropdownMenu.SubTrigger
+							class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 						>
-							<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div>
-						</DropdownMenu.Item>
-						<DropdownMenu.Item
-							class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-							on:click={() => {
-								uploadOneDriveHandler('organizations');
-							}}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 32 32"
+								class="w-5 h-5"
+								fill="none"
+							>
+								<mask
+									id="mask0_87_7796"
+									style="mask-type:alpha"
+									maskUnits="userSpaceOnUse"
+									x="0"
+									y="6"
+									width="32"
+									height="20"
+								>
+									<path
+										d="M7.82979 26C3.50549 26 0 22.5675 0 18.3333C0 14.1921 3.35322 10.8179 7.54613 10.6716C9.27535 7.87166 12.4144 6 16 6C20.6308 6 24.5169 9.12183 25.5829 13.3335C29.1316 13.3603 32 16.1855 32 19.6667C32 23.0527 29 26 25.8723 25.9914L7.82979 26Z"
+										fill="#C4C4C4"
+									/>
+								</mask>
+								<g mask="url(#mask0_87_7796)">
+									<path
+										d="M7.83017 26.0001C5.37824 26.0001 3.18957 24.8966 1.75391 23.1691L18.0429 16.3335L30.7089 23.4647C29.5926 24.9211 27.9066 26.0001 26.0004 25.9915C23.1254 26.0001 12.0629 26.0001 7.83017 26.0001Z"
+										fill="url(#paint0_linear_87_7796)"
+									/>
+									<path
+										d="M25.5785 13.3149L18.043 16.3334L30.709 23.4647C31.5199 22.4065 32.0004 21.0916 32.0004 19.6669C32.0004 16.1857 29.1321 13.3605 25.5833 13.3337C25.5817 13.3274 25.5801 13.3212 25.5785 13.3149Z"
+										fill="url(#paint1_linear_87_7796)"
+									/>
+									<path
+										d="M7.06445 10.7028L18.0423 16.3333L25.5779 13.3148C24.5051 9.11261 20.6237 6 15.9997 6C12.4141 6 9.27508 7.87166 7.54586 10.6716C7.3841 10.6773 7.22358 10.6877 7.06445 10.7028Z"
+										fill="url(#paint2_linear_87_7796)"
+									/>
+									<path
+										d="M1.7535 23.1687L18.0425 16.3331L7.06471 10.7026C3.09947 11.0792 0 14.3517 0 18.3331C0 20.1665 0.657197 21.8495 1.7535 23.1687Z"
+										fill="url(#paint3_linear_87_7796)"
+									/>
+								</g>
+								<defs>
+									<linearGradient
+										id="paint0_linear_87_7796"
+										x1="4.42591"
+										y1="24.6668"
+										x2="27.2309"
+										y2="23.2764"
+										gradientUnits="userSpaceOnUse"
+									>
+										<stop stop-color="#2086B8" />
+										<stop offset="1" stop-color="#46D3F6" />
+									</linearGradient>
+									<linearGradient
+										id="paint1_linear_87_7796"
+										x1="23.8302"
+										y1="19.6668"
+										x2="30.2108"
+										y2="15.2082"
+										gradientUnits="userSpaceOnUse"
+									>
+										<stop stop-color="#1694DB" />
+										<stop offset="1" stop-color="#62C3FE" />
+									</linearGradient>
+									<linearGradient
+										id="paint2_linear_87_7796"
+										x1="8.51037"
+										y1="7.33333"
+										x2="23.3335"
+										y2="15.9348"
+										gradientUnits="userSpaceOnUse"
+									>
+										<stop stop-color="#0D3D78" />
+										<stop offset="1" stop-color="#063B83" />
+									</linearGradient>
+									<linearGradient
+										id="paint3_linear_87_7796"
+										x1="-0.340429"
+										y1="19.9998"
+										x2="14.5634"
+										y2="14.4649"
+										gradientUnits="userSpaceOnUse"
+									>
+										<stop stop-color="#16589B" />
+										<stop offset="1" stop-color="#1464B7" />
+									</linearGradient>
+								</defs>
+							</svg>
+							<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive')}</div>
+						</DropdownMenu.SubTrigger>
+						<DropdownMenu.SubContent
+							class="w-[calc(100vw-2rem)] max-w-[280px] rounded-xl px-1 py-1 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
+							side={$mobile ? 'bottom' : 'right'}
+							sideOffset={$mobile ? 5 : 0}
+							alignOffset={$mobile ? 0 : -8}
 						>
-							<div class="flex flex-col">
-								<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (work/school)')}</div>
-								<div class="text-xs text-gray-500">Includes SharePoint</div>
-							</div>
-						</DropdownMenu.Item>
-					</DropdownMenu.SubContent>
-				</DropdownMenu.Sub>
+							<DropdownMenu.Item
+								class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+								on:click={() => {
+									uploadOneDriveHandler('personal');
+								}}
+							>
+								<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item
+								class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+								on:click={() => {
+									uploadOneDriveHandler('organizations');
+								}}
+							>
+								<div class="flex flex-col">
+									<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (work/school)')}</div>
+									<div class="text-xs text-gray-500">Includes SharePoint</div>
+								</div>
+							</DropdownMenu.Item>
+						</DropdownMenu.SubContent>
+					</DropdownMenu.Sub>
+				{/if}
 			{/if}
 		</DropdownMenu.Content>
 	</div>

src/lib/components/workspace/Models/Capabilities.svelte

@@ -11,6 +11,10 @@
 			label: $i18n.t('Vision'),
 			description: $i18n.t('Model accepts image inputs')
 		},
+		file_upload: {
+			label: $i18n.t('File Upload'),
+			description: $i18n.t('Model accepts file inputs')
+		},
 		web_search: {
 			label: $i18n.t('Web Search'),
 			description: $i18n.t('Model can search the web for information')
@@ -37,6 +41,7 @@
 
 	export let capabilities: {
 		vision?: boolean;
+		file_upload?: boolean;
 		web_search?: boolean;
 		image_generation?: boolean;
 		code_interpreter?: boolean;

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -77,6 +77,7 @@
 	};
 	let capabilities = {
 		vision: true,
+		file_upload: true,
 		web_search: true,
 		image_generation: true,
 		code_interpreter: true,