refac

src/lib/components/chat/FileNav/FilePreview.svelte

@@ -19,14 +19,60 @@
 	export let onDownload: () => void = () => {};
 
 	const MD_EXTS = new Set(['md', 'markdown', 'mdx']);
+	const CSV_EXTS = new Set(['csv', 'tsv']);
 	const getExt = (path: string | null) => path?.split('.').pop()?.toLowerCase() ?? '';
 
 	$: isMarkdown = MD_EXTS.has(getExt(selectedFile));
+	$: isCsv = CSV_EXTS.has(getExt(selectedFile));
+	$: csvDelimiter = getExt(selectedFile) === 'tsv' ? '\t' : ',';
 	$: renderedHtml =
 		isMarkdown && fileContent
 			? DOMPurify.sanitize(marked.parse(fileContent, { async: false }) as string)
 			: '';
 
+	// Simple CSV parser that handles quoted fields
+	const parseCsv = (text: string, delimiter: string): string[][] => {
+		const rows: string[][] = [];
+		let row: string[] = [];
+		let field = '';
+		let inQuotes = false;
+		for (let i = 0; i < text.length; i++) {
+			const ch = text[i];
+			if (inQuotes) {
+				if (ch === '"') {
+					if (text[i + 1] === '"') {
+						field += '"';
+						i++;
+					} else {
+						inQuotes = false;
+					}
+				} else {
+					field += ch;
+				}
+			} else if (ch === '"') {
+				inQuotes = true;
+			} else if (ch === delimiter) {
+				row.push(field);
+				field = '';
+			} else if (ch === '\n' || (ch === '\r' && text[i + 1] === '\n')) {
+				if (ch === '\r') i++;
+				row.push(field);
+				field = '';
+				if (row.some((c) => c !== '')) rows.push(row);
+				row = [];
+			} else {
+				field += ch;
+			}
+		}
+		row.push(field);
+		if (row.some((c) => c !== '')) rows.push(row);
+		return rows;
+	};
+
+	$: csvRows = isCsv && fileContent ? parseCsv(fileContent, csvDelimiter) : [];
+	$: csvHeader = csvRows.length > 0 ? csvRows[0] : [];
+	$: csvBody = csvRows.length > 1 ? csvRows.slice(1) : [];
+
 	let showRaw = false;
 	$: selectedFile, (showRaw = false); // reset to preview mode when switching files
 
@@ -77,7 +123,7 @@
 				</button>
 			</Tooltip>
 		{/if}
-		{#if isMarkdown && fileContent !== null}
+		{#if (isMarkdown || isCsv) && fileContent !== null}
 			<Tooltip content={showRaw ? $i18n.t('Preview') : $i18n.t('Source')}>
 				<button
 					class="p-1.5 rounded-lg bg-white/80 dark:bg-gray-850/80 backdrop-blur-sm shadow-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
@@ -166,6 +212,33 @@
 			<div class="prose dark:prose-invert max-w-full text-sm p-3">
 				{@html renderedHtml}
 			</div>
+		{:else if isCsv && !showRaw && csvRows.length > 0}
+			<div class="overflow-auto h-full p-3">
+				<table class="csv-table w-full text-xs font-mono border-collapse">
+					<thead>
+						<tr>
+							<th class="csv-row-num">#</th>
+							{#each csvHeader as cell}
+								<th>{cell}</th>
+							{/each}
+						</tr>
+					</thead>
+					<tbody>
+						{#each csvBody as row, i}
+							<tr>
+								<td class="csv-row-num">{i + 1}</td>
+								{#each row as cell}
+									<td>{cell}</td>
+								{/each}
+								<!-- Pad missing columns -->
+								{#each Array(Math.max(0, csvHeader.length - row.length)) as _}
+									<td></td>
+								{/each}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
 		{:else}
 			<pre
 				class="text-xs font-mono text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-all leading-relaxed p-3">{fileContent}</pre>
@@ -176,3 +249,57 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.csv-table {
+		font-size: 0.7rem;
+		line-height: 1.4;
+	}
+	.csv-table th,
+	.csv-table td {
+		padding: 4px 8px;
+		text-align: left;
+		white-space: nowrap;
+		border: 1px solid rgba(128, 128, 128, 0.15);
+	}
+	.csv-table thead th {
+		position: sticky;
+		top: 0;
+		background: rgba(243, 244, 246, 0.95);
+		backdrop-filter: blur(4px);
+		font-weight: 600;
+		color: #374151;
+		border-bottom: 2px solid rgba(128, 128, 128, 0.25);
+		z-index: 1;
+	}
+	:global(.dark) .csv-table thead th {
+		background: rgba(31, 41, 55, 0.95);
+		color: #d1d5db;
+	}
+	.csv-table tbody tr:nth-child(even) {
+		background: rgba(128, 128, 128, 0.04);
+	}
+	.csv-table tbody tr:hover {
+		background: rgba(59, 130, 246, 0.06);
+	}
+	:global(.dark) .csv-table tbody tr:hover {
+		background: rgba(59, 130, 246, 0.1);
+	}
+	.csv-table td {
+		color: #374151;
+	}
+	:global(.dark) .csv-table td {
+		color: #d1d5db;
+	}
+	.csv-row-num {
+		color: #9ca3af;
+		font-size: 0.6rem;
+		text-align: right !important;
+		user-select: none;
+		width: 1px;
+		padding-right: 6px !important;
+	}
+	:global(.dark) .csv-row-num {
+		color: #6b7280;
+	}
+</style>