From 90e4b49b881b644465831cc3028bb44f0f7a2196 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 25 Sep 2025 14:36:25 -0500
Subject: [PATCH] refac/fix: onedrive input menu styling issue

---
 .../chat/MessageInput/InputMenu.svelte        | 269 ++++++++++--------
 1 file changed, 146 insertions(+), 123 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
index a197db3d45..79b22a5882 100644
--- a/src/lib/components/chat/MessageInput/InputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -315,7 +315,7 @@
 									uploadGoogleDriveHandler();
 								}}
 							>
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" class="w-5 h-5">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" class="w-4">
 									<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"
@@ -346,133 +346,110 @@
 						{/if}
 
 						{#if $config?.features?.enable_onedrive_integration && ($config?.features?.enable_onedrive_personal || $config?.features?.enable_onedrive_business)}
-							<DropdownMenu.Sub>
-								<DropdownMenu.SubTrigger
-									class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl w-full"
+							<button
+								class="flex gap-2 w-full items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl {!fileUploadEnabled
+									? 'opacity-50'
+									: ''}"
+								on:click={() => {
+									tab = 'microsoft_onedrive';
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 32 32"
+									class="size-4"
+									fill="none"
 								>
-									<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"
 									>
-										<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"
 										>
-											<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-100  dark:border-gray-800 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}
-								>
-									{#if $config?.features?.enable_onedrive_personal}
-										<DropdownMenu.Item
-											class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl"
-											on:click={() => {
-												uploadOneDriveHandler('personal');
-											}}
+											<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"
 										>
-											<div class="flex flex-col">
-												<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div>
-											</div>
-										</DropdownMenu.Item>
-									{/if}
+											<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>
 
-									{#if $config?.features?.enable_onedrive_business}
-										<DropdownMenu.Item
-											class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 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">{$i18n.t('Includes SharePoint')}</div>
-											</div>
-										</DropdownMenu.Item>
-									{/if}
-								</DropdownMenu.SubContent>
-							</DropdownMenu.Sub>
+								<div class="flex items-center w-full justify-between">
+									<div class=" line-clamp-1">
+										{$i18n.t('Microsoft OneDrive')}
+									</div>
+
+									<div class="text-gray-500">
+										<ChevronRight />
+									</div>
+								</div>
+							</button>
 						{/if}
 					{/if}
 				</div>
@@ -533,6 +510,52 @@
 
 					<Chats {onSelect} />
 				</div>
+			{:else if tab === 'microsoft_onedrive'}
+				<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 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('Microsoft OneDrive')}
+							</div>
+						</div>
+					</button>
+
+					{#if $config?.features?.enable_onedrive_personal}
+						<DropdownMenu.Item
+							class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl"
+							on:click={() => {
+								uploadOneDriveHandler('personal');
+							}}
+						>
+							<div class="flex flex-col">
+								<div class="line-clamp-1">{$i18n.t('Microsoft OneDrive (personal)')}</div>
+							</div>
+						</DropdownMenu.Item>
+					{/if}
+
+					{#if $config?.features?.enable_onedrive_business}
+						<DropdownMenu.Item
+							class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 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">{$i18n.t('Includes SharePoint')}</div>
+							</div>
+						</DropdownMenu.Item>
+					{/if}
+				</div>
 			{/if}
 		</DropdownMenu.Content>
 	</div>