feat: display AISummary section in dataset detail header

Author: elainefan331

src/design/ReadMoreText.tsx

@@ -0,0 +1,44 @@
+import { Colors } from "./theme";
+import { Box, Typography, Button } from "@mui/material";
+import React, { useState } from "react";
+
+const ReadMoreText: React.FC<{ text: string }> = ({ text }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <Box sx={{ position: "relative" }}>
+      <Typography
+        variant="body1"
+        sx={{
+          display: "-webkit-box",
+          WebkitLineClamp: expanded ? "unset" : 3, // show only 3 lines
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {text}
+      </Typography>
+
+      <Button
+        size="small"
+        sx={{
+          mt: 1,
+          fontWeight: 600,
+          textTransform: "uppercase",
+          fontSize: "0.8rem",
+          color: Colors.purple,
+          "&:hover": {
+            color: Colors.secondaryPurple,
+            transform: "scale(1.05)",
+          },
+        }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        {expanded ? "Read Less" : "Read More"}
+      </Button>
+    </Box>
+  );
+};
+
+export default ReadMoreText;

src/pages/DatasetDetailPage.tsx

@@ -17,6 +17,7 @@ import {
 } from "@mui/material";
 import { TextField } from "@mui/material";
 import LoadDatasetTabs from "components/DatasetDetailPage/LoadDatasetTabs";
+import ReadMoreText from "design/ReadMoreText";
 import theme, { Colors } from "design/theme";
 import { useAppDispatch } from "hooks/useAppDispatch";
 import { useAppSelector } from "hooks/useAppSelector";
@@ -156,6 +157,7 @@ const DatasetDetailPage: React.FC = () => {
   const [jsonSize, setJsonSize] = useState<number>(0);
   const [transformedDataset, setTransformedDataset] = useState<any>(null);
   const [previewIndex, setPreviewIndex] = useState<number>(0);
+  const aiSummary = datasetDocument?.[".datainfo"]?.AISummary ?? "";
 
   // add spinner
   const [isPreviewLoading, setIsPreviewLoading] = useState(false);
@@ -952,6 +954,24 @@ const DatasetDetailPage: React.FC = () => {
             </Typography>
           </Box>
 
+          {/* ai summary */}
+          {/* {aiSummary && (
+            <Box
+              sx={{
+                mb: 2,
+                p: 2,
+                borderRadius: "8px",
+                border: "1px solid #ddd",
+              }}
+            >
+              <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1 }}>
+                AI Summary
+              </Typography>
+              <Typography variant="body1">{aiSummary}</Typography>
+            </Box>
+          )} */}
+          {aiSummary && <ReadMoreText text={aiSummary} />}
+
           <Box
             sx={{
               display: "flex",