From d7c72e0eaa9febc8558f4a11fbb13d5643ff90b1 Mon Sep 17 00:00:00 2001
From: Nathan Sarrazin <sarrazin.nathan@gmail.com>
Date: Wed, 25 Dec 2024 11:29:45 +0000
Subject: [PATCH] feat: put file upload icon first so its always visible and
 make tools scrollable on mobile

---
 src/lib/components/chat/ChatInput.svelte | 77 ++++++++++++------------
 1 file changed, 39 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/chat/ChatInput.svelte b/src/lib/components/chat/ChatInput.svelte
index 195e18de024..62054ecdbc9 100644
--- a/src/lib/components/chat/ChatInput.svelte
+++ b/src/lib/components/chat/ChatInput.svelte
@@ -142,8 +142,46 @@
 	</div>
 	{#if !assistant}
 		<div
-			class="-ml-0.5 flex flex-wrap items-center justify-start gap-2.5 px-3 pb-2.5 text-gray-500 dark:text-gray-400"
+			class="scrollbar-custom -ml-0.5 flex max-w-[90dvw] flex-wrap items-center justify-start gap-2.5 px-3 pb-2.5
+			text-gray-500 dark:text-gray-400 max-md:flex-nowrap max-md:overflow-x-auto"
 		>
+			{#if modelIsMultimodal || modelHasTools}
+				{@const mimeTypesString = mimeTypes
+					.map((m) => {
+						// if the mime type ends in *, grab the first part so image/* becomes image
+						if (m.endsWith("*")) {
+							return m.split("/")[0];
+						}
+						// otherwise, return the second part for example application/pdf becomes pdf
+						return m.split("/")[1];
+					})
+					.join(", ")}
+				<form class="flex items-center">
+					<HoverTooltip
+						label={`Upload ${mimeTypesString} files`}
+						position="top"
+						TooltipClassNames="text-xs !text-left !w-auto whitespace-nowrap !py-1 !mb-0 max-sm:hidden"
+					>
+						<button
+							class="base-tool relative"
+							class:active-tool={documentParserIsOn}
+							disabled={loading}
+						>
+							<input
+								class="absolute w-full cursor-pointer opacity-0"
+								aria-label="Upload file"
+								type="file"
+								on:change={onFileChange}
+								accept={mimeTypes.join(",")}
+							/>
+							<IconPaperclip classNames="text-xl" />
+							{#if documentParserIsOn}
+								Document Parser
+							{/if}
+						</button>
+					</HoverTooltip>
+				</form>
+			{/if}
 			<HoverTooltip
 				label="Search the web"
 				position="top"
@@ -226,43 +264,6 @@
 					</button>
 				{/each}
 			{/if}
-			{#if modelIsMultimodal || modelHasTools}
-				{@const mimeTypesString = mimeTypes
-					.map((m) => {
-						// if the mime type ends in *, grab the first part so image/* becomes image
-						if (m.endsWith("*")) {
-							return m.split("/")[0];
-						}
-						// otherwise, return the second part for example application/pdf becomes pdf
-						return m.split("/")[1];
-					})
-					.join(", ")}
-				<form class="flex items-center">
-					<HoverTooltip
-						label={`Upload ${mimeTypesString} files`}
-						position="top"
-						TooltipClassNames="text-xs !text-left !w-auto whitespace-nowrap !py-1 !mb-0 max-sm:hidden"
-					>
-						<button
-							class="base-tool relative"
-							class:active-tool={documentParserIsOn}
-							disabled={loading}
-						>
-							<input
-								class="absolute w-full cursor-pointer opacity-0"
-								aria-label="Upload file"
-								type="file"
-								on:change={onFileChange}
-								accept={mimeTypes.join(",")}
-							/>
-							<IconPaperclip classNames="text-xl" />
-							{#if documentParserIsOn}
-								Document Parser
-							{/if}
-						</button>
-					</HoverTooltip>
-				</form>
-			{/if}
 			{#if modelHasTools}
 				<HoverTooltip
 					label="Browse more tools"