Merge pull request #4274 from Yanyutin753/display_size

💄Feat show the size of file and prepare for subsequent upload restrictions

src/lib/components/chat/Controls/Controls.svelte

@@ -39,6 +39,7 @@
 							url={`${file?.url}`}
 							name={file.name}
 							type={file.type}
+							size={file?.size}
 							dismissible={true}
 							on:dismiss={() => {
 								// Remove the file from the chatFiles array

src/lib/components/chat/MessageInput.svelte

@@ -554,6 +554,7 @@
 											<FileItem
 												name={file.name}
 												type={file.type}
+												size={file?.size}
 												status={file.status}
 												dismissible={true}
 												on:dismiss={() => {

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

@@ -104,6 +104,7 @@
 									url={file.url}
 									name={file.name}
 									type={file.type}
+									size={file?.size}
 									colorClassName="bg-white dark:bg-gray-850 "
 								/>
 							{/if}

src/lib/components/common/FileItem.svelte

@@ -15,6 +15,21 @@
 
 	export let name: string;
 	export let type: string;
+	export let size: number;
+
+	function formatSize(size) {
+		if (size == null) return 'Unknown size';
+		if (typeof size !== 'number' || size < 0) return 'Invalid size';
+		if (size === 0) return '0 B';
+		const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+		let unitIndex = 0;
+
+		while (size >= 1024 && unitIndex < units.length - 1) {
+			size /= 1024;
+			unitIndex++;
+		}
+		return `${size.toFixed(1)} ${units[unitIndex]}`;
+	}
 </script>
 
 <div class="relative group">
@@ -93,11 +108,11 @@
 		</div>
 
 		<div class="flex flex-col justify-center -space-y-0.5 pl-1.5 pr-4 w-full">
-			<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1">
+			<div class=" dark:text-gray-100 text-sm font-medium line-clamp-1 mb-1">
 				{name}
 			</div>
 
-			<div class=" text-gray-500 text-xs">
+			<div class=" flex justify-between text-gray-500 text-xs">
 				{#if type === 'file'}
 					{$i18n.t('File')}
 				{:else if type === 'doc'}
@@ -107,6 +122,9 @@
 				{:else}
 					<span class=" capitalize">{type}</span>
 				{/if}
+				{#if size}
+					<span class="capitalize">{formatSize(size)}</span>
+				{/if}
 			</div>
 		</div>
 	</button>