fix: add dir=auto to table cells for proper RTL/LTR text direction

Author: Algorithm5838

src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte

@@ -142,11 +142,12 @@
 					>
 						<tr class="">
 							{#each token.header as header, headerIdx}
-								<th
-									scope="col"
-									class="px-2.5! py-2! cursor-pointer border-b border-gray-100! dark:border-gray-800!"
-									style={token.align[headerIdx] ? '' : `text-align: ${token.align[headerIdx]}`}
-								>
+							<th
+								scope="col"
+								class="px-2.5! py-2! cursor-pointer border-b border-gray-100! dark:border-gray-800!"
+								style={token.align[headerIdx] ? '' : `text-align: ${token.align[headerIdx]}`}
+								dir="auto"
+							>
 									<div class="gap-1.5 text-left">
 										<div class="shrink-0 break-normal">
 											<MarkdownInlineTokens
@@ -166,14 +167,15 @@
 						{#each token.rows as row, rowIdx}
 							<tr class="bg-white dark:bg-gray-900 text-xs">
 								{#each row ?? [] as cell, cellIdx}
-									<td
-										class="px-3! py-2! text-gray-900 dark:text-white w-max {token.rows.length -
-											1 ===
-										rowIdx
-											? ''
-											: 'border-b border-gray-50! dark:border-gray-850!'}"
-										style={token.align[cellIdx] ? `text-align: ${token.align[cellIdx]}` : ''}
-									>
+								<td
+									class="px-3! py-2! text-gray-900 dark:text-white w-max {token.rows.length -
+										1 ===
+									rowIdx
+										? ''
+										: 'border-b border-gray-50! dark:border-gray-850!'}"
+									style={token.align[cellIdx] ? `text-align: ${token.align[cellIdx]}` : ''}
+									dir="auto"
+								>
 										<div class="break-normal">
 											<MarkdownInlineTokens
 												id={`${id}-${tokenIdx}-row-${rowIdx}-${cellIdx}`}