Assistant/Add results summary

src/components/NavItems/Assistant/Assistant.jsx

@@ -47,6 +47,7 @@ import {
 } from "@/redux/actions/tools/assistantActions";
 import { setError } from "@/redux/reducers/errorReducer";
 
+import AssistantSummary from "./AssistantScrapeResults/AssistantSummary";
 import {
   TransAssistantHelpFourTooltip,
   TransAssistantHelpThreeTooltip,
@@ -490,6 +491,11 @@ const Assistant = () => {
 
           <CardContent>
             <Grid container spacing={4}>
+              {/* assistant result summary */}
+              <Grid size={{ xs: 12 }}>
+                <AssistantSummary />
+              </Grid>
+
               {/* warnings and api status checks */}
               {dbkfTextMatch || prevFactChecksResult ? (
                 <Grid

src/components/NavItems/Assistant/AssistantCheckResults/AssistantNEResult.jsx

@@ -16,6 +16,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 
 import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
+import LabelOutlinedIcon from "@mui/icons-material/LabelOutlined";
 
 import { i18nLoadNamespace } from "@/components/Shared/Languages/i18nLoadNamespace";
 import useMyStyles from "@/components/Shared/MaterialUiStyles/useMyStyles";
@@ -129,10 +130,15 @@ const AssistantNEResult = () => {
 
   return (
     <Grid size={{ xs: 12 }}>
-      <Card variant="outlined">
+      <Card id="named-entity-results" variant="outlined">
         <CardHeader
           className={classes.assistantCardHeader}
-          title={keyword("named_entity_title")}
+          title={
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+              <LabelOutlinedIcon color="primary" />
+              {keyword("named_entity_title")}
+            </Box>
+          }
           action={
             <Tooltip
               interactive={"true"}

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantCommentResult.jsx

@@ -28,6 +28,7 @@ import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 
+import CommentOutlinedIcon from "@mui/icons-material/CommentOutlined";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
@@ -595,10 +596,18 @@ const AssistantCommentResult = ({ collectedComments }) => {
   }
 
   return (
-    <Card data-testid="assistant-collected-comments">
+    <Card
+      id="assistant-collected-comments"
+      data-testid="assistant-collected-comments"
+    >
       <CardHeader
         className={classes.assistantCardHeader}
-        title={keyword("collected_comments_title")}
+        title={
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <CommentOutlinedIcon color="primary" />
+            {keyword("collected_comments_title")}
+          </Box>
+        }
         action={
           <Tooltip
             interactive={"true"}

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantLinkResult.jsx

@@ -14,6 +14,7 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 
 import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
+import LinkOutlinedIcon from "@mui/icons-material/LinkOutlined";
 
 import ExtractedUrlDomainAnalysisResults from "@/components/NavItems/Assistant/AssistantCheckResults/ExtractedUrlDomainAnalysisResults";
 import CopyButton from "@/components/Shared/CopyButton";
@@ -458,10 +459,15 @@ const AssistantLinkResult = () => {
   }
 
   return (
-    <Card variant="outlined">
+    <Card id="extracted-urls" variant="outlined">
       <CardHeader
         className={classes.assistantCardHeader}
-        title={keyword("extracted_urls_url_domain_analysis")}
+        title={
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <LinkOutlinedIcon color="primary" />
+            {keyword("extracted_urls_url_domain_analysis")}
+          </Box>
+        }
         action={
           <Tooltip
             interactive={"true"}

src/components/NavItems/Assistant/AssistantScrapeResults/AssistantMediaResult.jsx

@@ -13,20 +13,26 @@ import CardHeader from "@mui/material/CardHeader";
 import Collapse from "@mui/material/Collapse";
 import Grid from "@mui/material/Grid";
 import IconButton from "@mui/material/IconButton";
+import SvgIcon from "@mui/material/SvgIcon";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 
+import CollectionsOutlinedIcon from "@mui/icons-material/CollectionsOutlined";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import HelpOutlineOutlinedIcon from "@mui/icons-material/HelpOutlineOutlined";
 
+import ImageIcon from "@/components/NavBar/images/SVG/Image/Images.svg";
+import VideoIcon from "@/components/NavBar/images/SVG/Video/Video.svg";
 import ImageGridList from "@/components/Shared/ImageGridList/ImageGridList";
 import { i18nLoadNamespace } from "@/components/Shared/Languages/i18nLoadNamespace";
 import useMyStyles from "@/components/Shared/MaterialUiStyles/useMyStyles";
 import VideoGridList from "@/components/Shared/VideoGridList/VideoGridList";
 import { TOOLS_CATEGORIES } from "@/constants/tools";
 import {
+  setImageResultsExpanded,
   setProcessUrl,
   setStateExpanded,
+  setVideoResultsExpanded,
 } from "@/redux/actions/tools/assistantActions";
 
 import {
@@ -58,6 +64,13 @@ const AssistantMediaResult = ({ title = null }) => {
   // third party topMenuItem states
   //const ocrLoading = useSelector(state=>state.assistant.ocrLoading)
 
+  const imageResultsExpanded = useSelector(
+    (state) => state.assistant.imageResultsExpanded,
+  );
+  const videoResultsExpanded = useSelector(
+    (state) => state.assistant.videoResultsExpanded,
+  );
+
   const resultIsImage = resultProcessType === TOOLS_CATEGORIES.IMAGE;
 
   // local control state
@@ -112,38 +125,40 @@ const AssistantMediaResult = ({ title = null }) => {
 
   return (
     <Card
+      id="url-media-results"
       variant="outlined"
       data-testid="url-media-results"
       hidden={!filteredImageList.length && !videoList.length}
     >
       <CardHeader
         className={classes.assistantCardHeader}
-        title={title ? keyword(title) : keyword("media_title")}
+        title={
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <CollectionsOutlinedIcon color="primary" />
+            {title ? keyword(title) : keyword("media_title")}
+          </Box>
+        }
         subheader={keyword("media_below")}
         action={
-          <div style={{ display: "flex" }}>
-            <div>
-              <Tooltip
-                interactive={"true"}
-                title={
-                  <>
-                    <Trans
-                      t={keyword}
-                      i18nKey="media_tooltip"
-                      components={{
-                        b: <b />,
-                      }}
-                    />
-                    <TransHtmlDoubleLineBreak keyword={keyword} />
-                    <TransSupportedToolsLink keyword={keyword} />
-                  </>
-                }
-                classes={{ tooltip: classes.assistantTooltip }}
-              >
-                <HelpOutlineOutlinedIcon className={classes.toolTipIcon} />
-              </Tooltip>
-            </div>
-          </div>
+          <Tooltip
+            interactive={"true"}
+            title={
+              <>
+                <Trans
+                  t={keyword}
+                  i18nKey="media_tooltip"
+                  components={{
+                    b: <b />,
+                  }}
+                />
+                <TransHtmlDoubleLineBreak keyword={keyword} />
+                <TransSupportedToolsLink keyword={keyword} />
+              </>
+            }
+            classes={{ tooltip: classes.assistantTooltip }}
+          >
+            <HelpOutlineOutlinedIcon className={classes.toolTipIcon} />
+          </Tooltip>
         }
       />
 
@@ -178,7 +193,7 @@ const AssistantMediaResult = ({ title = null }) => {
         ) : null}
         {processUrl !== null ? (
           resultIsImage ? (
-            <Grid container spacing={2}>
+            <Grid container spacing={2} id="assistant-image-results">
               <Grid size={6}>
                 <AssistantImageResult />
               </Grid>
@@ -187,7 +202,7 @@ const AssistantMediaResult = ({ title = null }) => {
               </Grid>
             </Grid>
           ) : (
-            <Grid container spacing={2}>
+            <Grid container spacing={2} id="assistant-video-results">
               <Grid size={6}>
                 <AssistantVideoResult />
               </Grid>
@@ -204,11 +219,24 @@ const AssistantMediaResult = ({ title = null }) => {
           <CardContent style={{ wordBreak: "break-word" }}>
             {/* image list */}
             {filteredImageList.length > 0 ? (
-              <Accordion defaultExpanded>
+              <Accordion
+                expanded={imageResultsExpanded}
+                onChange={(_, expanded) =>
+                  dispatch(setImageResultsExpanded(expanded))
+                }
+                id="assistant-image-results"
+              >
                 <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                  <Typography variant="h6">
-                    {keyword("images_label")}
-                  </Typography>
+                  <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                    <SvgIcon
+                      component={ImageIcon}
+                      color="primary"
+                      inheritViewBox
+                    />
+                    <Typography variant="h6">
+                      {keyword("images_label")}
+                    </Typography>
+                  </Box>
                 </AccordionSummary>
                 <AccordionDetails>
                   <ImageGridList
@@ -225,11 +253,24 @@ const AssistantMediaResult = ({ title = null }) => {
 
             {/* video list */}
             {videoList.length > 0 ? (
-              <Accordion defaultExpanded>
+              <Accordion
+                expanded={videoResultsExpanded}
+                onChange={(_, expanded) =>
+                  dispatch(setVideoResultsExpanded(expanded))
+                }
+                id="assistant-video-results"
+              >
                 <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                  <Typography variant="h6">
-                    {keyword("videos_label")}
-                  </Typography>
+                  <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                    <SvgIcon
+                      component={VideoIcon}
+                      color="primary"
+                      inheritViewBox
+                    />
+                    <Typography variant="h6">
+                      {keyword("videos_label")}
+                    </Typography>
+                  </Box>
                 </AccordionSummary>
                 <AccordionDetails style={{ paddingTop: 0 }}>
                   <VideoGridList