refac: styling

src/lib/components/channel/MessageInput.svelte

@@ -398,7 +398,7 @@
 						dir={$settings?.chatDirection ?? 'LTR'}
 					>
 						{#if files.length > 0}
-							<div class="mx-1 mt-2.5 mb-1 flex flex-wrap gap-2">
+							<div class="mx-1 mt-2.5 flex flex-wrap gap-2">
 								{#each files as file, fileIdx}
 									{#if file.type === 'image'}
 										<div class=" relative group">
@@ -411,7 +411,7 @@
 											</div>
 											<div class=" absolute -top-1 -right-1">
 												<button
-													class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
+													class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
 													type="button"
 													on:click={() => {
 														files.splice(fileIdx, 1);
@@ -453,7 +453,7 @@
 							</div>
 						{/if}
 
-						<div class="px-3">
+						<div class="px-2.5">
 							<div
 								class="scrollbar-hidden text-left bg-transparent dark:text-gray-100 outline-none w-full pt-2.5 px-1 rounded-xl resize-none h-fit max-h-80 overflow-auto"
 							>

src/lib/components/chat/MessageInput.svelte

@@ -573,7 +573,7 @@
 								dir={$settings?.chatDirection ?? 'LTR'}
 							>
 								{#if files.length > 0}
-									<div class="mx-1 mt-2.5 mb-1 flex items-center flex-wrap gap-2">
+									<div class="mx-1 mt-2.5 flex items-center flex-wrap gap-2">
 										{#each files as file, fileIdx}
 											{#if file.type === 'image'}
 												<div class=" relative group">
@@ -611,7 +611,7 @@
 													</div>
 													<div class=" absolute -top-1 -right-1">
 														<button
-															class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
+															class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
 															type="button"
 															on:click={() => {
 																files.splice(fileIdx, 1);
@@ -661,7 +661,7 @@
 									</div>
 								{/if}
 
-								<div class="px-3">
+								<div class="px-2.5">
 									{#if $settings?.richTextInput ?? true}
 										<div
 											class="scrollbar-hidden text-left bg-transparent dark:text-gray-100 outline-none w-full pt-2.5 pb-1 px-1 rounded-xl resize-none h-fit max-h-80 overflow-auto"
@@ -1062,11 +1062,9 @@
 								<div class=" flex justify-between">
 									<div class="ml-1 self-end mb-1.5 gap-0.5 flex items-center">
 										<InputMenu
-											bind:imageGenerationEnabled
-											bind:codeInterpreterEnabled
-											bind:webSearchEnabled
 											bind:selectedToolIds
 											{screenCaptureHandler}
+											{inputFilesHandler}
 											uploadFilesHandler={() => {
 												filesInputElement.click();
 											}}

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

@@ -21,12 +21,12 @@
 
 	export let screenCaptureHandler: Function;
 	export let uploadFilesHandler: Function;
+	export let inputFilesHandler: Function;
+
 	export let uploadGoogleDriveHandler: Function;
 
 	export let selectedToolIds: string[] = [];
 
-	export let codeInterpreterEnabled: boolean;
-
 	export let onClose: Function;
 
 	let tools = {};
@@ -53,8 +53,26 @@
 			return a;
 		}, {});
 	};
+
+	function handleFileChange(event) {
+		const inputFiles = Array.from(event.target?.files);
+		if (inputFiles && inputFiles.length > 0) {
+			console.log(inputFiles);
+			inputFilesHandler(inputFiles);
+		}
+	}
 </script>
 
+<!-- Hidden file input used to open the camera on mobile -->
+<input
+	id="camera-input"
+	type="file"
+	accept="image/*"
+	capture="environment"
+	on:change={handleFileChange}
+	style="display: none;"
+/>
+
 <Dropdown
 	bind:show
 	on:change={(e) => {
@@ -120,26 +138,32 @@
 				<hr class="border-black/5 dark:border-white/5 my-1" />
 			{/if}
 
-			{#if !$mobile}
-				<Tooltip
-					content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files') : ''}
-					className="w-full"
-				>
-					<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 {!fileUploadEnabled
-							? 'opacity-50'
-							: ''}"
-						on:click={() => {
-							if (fileUploadEnabled) {
+			<Tooltip
+				content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files') : ''}
+				className="w-full"
+			>
+				<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 {!fileUploadEnabled
+						? 'opacity-50'
+						: ''}"
+					on:click={() => {
+						if (fileUploadEnabled) {
+							if (!$mobile) {
 								screenCaptureHandler();
+							} else {
+								const cameraInputElement = document.getElementById('camera-input');
+
+								if (cameraInputElement) {
+									cameraInputElement.click();
+								}
 							}
-						}}
-					>
-						<CameraSolid />
-						<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
-					</DropdownMenu.Item>
-				</Tooltip>
-			{/if}
+						}
+					}}
+				>
+					<CameraSolid />
+					<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
+				</DropdownMenu.Item>
+			</Tooltip>
 
 			<Tooltip
 				content={!fileUploadEnabled ? $i18n.t('You do not have permission to upload files') : ''}

src/lib/components/common/FileItem.svelte

@@ -119,7 +119,7 @@
 	{#if dismissible}
 		<div class=" absolute -top-1 -right-1">
 			<button
-				class=" bg-gray-400 text-white border border-white rounded-full group-hover:visible invisible transition"
+				class=" bg-white text-black border border-white rounded-full group-hover:visible invisible transition"
 				type="button"
 				on:click|stopPropagation={() => {
 					dispatch('dismiss');