Fix DataPreview table row height and add remark-gfm for markdown tables

Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>

Author: Copilot

site/package.json

@@ -14,7 +14,8 @@
     "buffer": "^6.0.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

site/src/components/DataPreview.tsx

@@ -61,7 +61,7 @@ const DataPreview: React.FC<DataPreviewProps> = ({ data }) => {
           <thead>
             <tr className="border-b border-gray-100">
               {columns.map(col => (
-                <th key={col} className="text-left py-3 px-4 font-medium text-[#78d3f8]">
+                <th key={col} className="text-left py-2 px-4 font-medium text-[#78d3f8]">
                   {col}
                 </th>
               ))}
@@ -71,7 +71,7 @@ const DataPreview: React.FC<DataPreviewProps> = ({ data }) => {
             {displayData.map((row, idx) => (
               <tr key={idx} className="border-b border-gray-50 hover:bg-gray-50/50">
                 {columns.map(col => (
-                  <td key={col} className={`py-3 px-4 ${getValueColor(row[col])}`}>
+                  <td key={col} className={`py-2 px-4 ${getValueColor(row[col])}`}>
                     {formatValue(row[col])}
                   </td>
                 ))}

site/src/components/Visualization.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { AVA } from '@antv/ava';
 import type { AnalysisResponse } from '@antv/ava';
 
@@ -112,7 +113,7 @@ const Visualization: React.FC<VisualizationProps> = ({ avaInstance }) => {
             )}
           </div>
           <div className="text-sm text-gray-600 prose prose-sm max-w-none">
-            <ReactMarkdown>{result.text}</ReactMarkdown>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{result.text}</ReactMarkdown>
           </div>
 
           {/* Collapsible Code Block */}