Merge pull request #1947 from stakwork/feature/home-btn-from-ai

feat: added home btn within ai search

src/components/App/SideBar/index.tsx

@@ -1,4 +1,4 @@
-import { Slide } from '@mui/material'
+import { Button, Slide } from '@mui/material'
 import clsx from 'clsx'
 import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
@@ -7,6 +7,7 @@ import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import { SelectWithPopover } from '~/components/App/SideBar/Dropdown'
 import { FilterSearch } from '~/components/App/SideBar/FilterSearch'
+import ArrowBackIcon from '~/components/Icons/ArrowBackIcon'
 import ChevronLeftIcon from '~/components/Icons/ChevronLeftIcon'
 import ClearIcon from '~/components/Icons/ClearIcon'
 import SearchFilterCloseIcon from '~/components/Icons/SearchFilterCloseIcon'
@@ -43,7 +44,7 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ subViewOpen }, ref) =
   const { isFetching: isLoading, setSidebarFilter, setFilters } = useDataStore((s) => s)
   const [schemaAll, setSchemaAll] = useSchemaStore((s) => [s.schemas, s.setSchemas])
 
-  const { aiSummaryAnswers } = useAiSummaryStore((s) => s)
+  const { aiSummaryAnswers, resetAiSummaryAnswer } = useAiSummaryStore((s) => s)
   const setSelectedNode = useUpdateSelectedNode()
 
   const filteredNodes = useFilteredNodes()
@@ -105,6 +106,11 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ subViewOpen }, ref) =
     setShowAllSchemas(false)
   }
 
+  const handleCloseAi = () => {
+    resetAiSummaryAnswer()
+    navigate('/')
+  }
+
   const handleFiltersApply = () => {
     setFilters({
       node_type: selectedTypes,
@@ -203,7 +209,14 @@ const Content = forwardRef<HTMLDivElement, ContentProp>(({ subViewOpen }, ref) =
             <Trending />
           </TrendingWrapper>
         )}
-        <Flex>
+        <Flex align="flex-start">
+          {hasAiChats ? (
+            <Flex p={24}>
+              <Button onClick={handleCloseAi} startIcon={<ArrowBackIcon />}>
+                Home
+              </Button>
+            </Flex>
+          ) : null}
           {Object.keys(aiSummaryAnswers).map((i: string) => (
             <AiSummary key={i} question={i} response={aiSummaryAnswers[i]} />
           ))}

src/components/Icons/AddCircleIcon.tsx

@@ -1,13 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddCircleIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M7.37516 8.625V11.3334C7.37516 11.5104 7.43508 11.6589 7.55491 11.7786C7.67476 11.8984 7.82326 11.9583 8.00041 11.9583C8.17758 11.9583 8.32599 11.8984 8.44564 11.7786C8.5653 11.6589 8.62512 11.5104 8.62512 11.3334V8.625H11.3335C11.5106 8.625 11.659 8.56508 11.7788 8.44525C11.8986 8.3254 11.9585 8.1769 11.9585 7.99975C11.9585 7.82258 11.8986 7.67417 11.7788 7.55452C11.659 7.43487 11.5106 7.37504 11.3335 7.37504H8.62512V4.66669C8.62512 4.4896 8.56521 4.34117 8.44537 4.22137C8.32553 4.1016 8.17702 4.04171 7.99987 4.04171C7.82271 4.04171 7.6743 4.1016 7.55464 4.22137C7.43499 4.34117 7.37516 4.4896 7.37516 4.66669V7.37504H4.66681C4.48973 7.37504 4.3413 7.43496 4.22152 7.55479C4.10173 7.67464 4.04183 7.82314 4.04183 8.00029C4.04183 8.17746 4.10173 8.32587 4.22152 8.44552C4.3413 8.56517 4.48973 8.625 4.66681 8.625H7.37516ZM8.00154 15.9167C6.90659 15.9167 5.8774 15.7089 4.91395 15.2933C3.9505 14.8778 3.11243 14.3138 2.39975 13.6015C1.68705 12.8891 1.12284 12.0514 0.7071 11.0884C0.291364 10.1253 0.0834961 9.09636 0.0834961 8.00142C0.0834961 6.90647 0.291274 5.87728 0.70683 4.91383C1.12239 3.95037 1.68634 3.11231 2.3987 2.39963C3.11108 1.68693 3.94878 1.12272 4.91181 0.706979C5.87482 0.291243 6.9038 0.083374 7.99875 0.083374C9.09369 0.083374 10.1229 0.291153 11.0863 0.706708C12.0498 1.12226 12.8879 1.68622 13.6005 2.39858C14.3132 3.11096 14.8774 3.94866 15.2932 4.91169C15.7089 5.8747 15.9168 6.90368 15.9168 7.99863C15.9168 9.09357 15.709 10.1228 15.2935 11.0862C14.8779 12.0497 14.3139 12.8877 13.6016 13.6004C12.8892 14.3131 12.0515 14.8773 11.0885 15.2931C10.1255 15.7088 9.09648 15.9167 8.00154 15.9167ZM8.00014 14.6667C9.86125 14.6667 11.4376 14.0209 12.7293 12.7292C14.021 11.4375 14.6668 9.86113 14.6668 8.00002C14.6668 6.13891 14.021 4.56252 12.7293 3.27085C11.4376 1.97919 9.86125 1.33335 8.00014 1.33335C6.13903 1.33335 4.56264 1.97919 3.27098 3.27085C1.97931 4.56252 1.33348 6.13891 1.33348 8.00002C1.33348 9.86113 1.97931 11.4375 3.27098 12.7292C4.56264 14.0209 6.13903 14.6667 8.00014 14.6667Z"
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default AddCircleIcon
+export default AddCircleIcon;

src/components/Icons/AddContentIcon.tsx

@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_25" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_25"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_25)">
@@ -13,6 +26,6 @@ const AddContentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default AddContentIcon
+export default AddContentIcon;

src/components/Icons/AddLinkIcon.tsx

@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddLinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="add_link">
-      <mask id="mask0_2659_52" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+      <mask
+        id="mask0_2659_52"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_2659_52)">
@@ -16,6 +29,6 @@ const AddLinkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default AddLinkIcon
+export default AddLinkIcon;

src/components/Icons/AddSourceIcon.tsx

@@ -1,9 +1,22 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <mask id="mask0_1259_27" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <mask
+      id="mask0_1259_27"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="24"
+      height="24"
+    >
       <rect width="1em" height="1em" fill="currentColor" />
     </mask>
     <g mask="url(#mask0_1259_27)">
@@ -13,6 +26,6 @@ const AddSourceIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       />
     </g>
   </svg>
-)
+);
 
-export default AddSourceIcon
+export default AddSourceIcon;

src/components/Icons/AiSummaryIcon.tsx

@@ -1,13 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AiSummaryIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M7.28729 0.918723C7.41428 0.105284 8.58572 0.105284 8.71271 0.918723L8.76054 1.22508C9.2444 4.32436 11.6757 6.75568 14.775 7.23954L15.0814 7.28737C15.8948 7.41436 15.8948 8.5858 15.0814 8.71279L14.775 8.76062C11.6757 9.24448 9.2444 11.6758 8.76054 14.7751L8.71271 15.0814C8.58572 15.8949 7.41428 15.8949 7.28729 15.0814L7.23946 14.7751C6.7556 11.6758 4.32428 9.24448 1.225 8.76062L0.918643 8.71279C0.105204 8.5858 0.105204 7.41436 0.918642 7.28737L1.225 7.23954C4.32428 6.75568 6.7556 4.32436 7.23946 1.22508L7.28729 0.918723Z"
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default AiSummaryIcon
+export default AiSummaryIcon;

src/components/Icons/ArrowBackIcon.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable */
+import React from 'react';
+
+const ArrowBackIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="arrow_forward">
+      <mask
+        id="mask0_8980_24763"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect
+          id="Bounding box"
+          x="20"
+          y="20"
+          width="1em"
+          height="1em"
+          transform="rotate(-180 20 20)"
+          fill="currentColor"
+        />
+      </mask>
+      <g mask="url(#mask0_8980_24763)">
+        <path
+          id="arrow_forward_2"
+          d="M7.52981 10.4372L16.0625 10.4372C16.2221 10.4372 16.3558 10.4911 16.4635 10.5988C16.5712 10.7065 16.625 10.8401 16.625 10.9997C16.625 11.1593 16.5712 11.293 16.4635 11.4007C16.3558 11.5084 16.2221 11.5622 16.0625 11.5622L7.52981 11.5622L11.4067 15.4391C11.5183 15.5507 11.5733 15.6812 11.5719 15.8307C11.5704 15.9802 11.5115 16.1132 11.3952 16.2295C11.2789 16.3382 11.1471 16.3944 11 16.3983C10.8529 16.4021 10.7212 16.3459 10.6048 16.2295L5.84956 11.4742C5.77938 11.404 5.72986 11.33 5.70101 11.2521C5.67216 11.1742 5.65773 11.0901 5.65773 10.9997C5.65773 10.9093 5.67216 10.8252 5.70101 10.7473C5.72986 10.6694 5.77938 10.5954 5.84956 10.5252L10.6048 5.76993C10.7087 5.66608 10.8373 5.61295 10.9906 5.61055C11.144 5.60815 11.2789 5.66128 11.3952 5.76993C11.5115 5.88626 11.5697 6.01992 11.5697 6.17088C11.5697 6.32184 11.5115 6.45549 11.3952 6.57183L7.52981 10.4372Z"
+          fill="currentColor"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default ArrowBackIcon;

src/components/Icons/ArrowForwardIcon.tsx

@@ -1,13 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const ArrowForwardIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 12 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 12 12"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M9.47019 6.56248H0.9375C0.777887 6.56248 0.644237 6.50863 0.53655 6.40094C0.42885 6.29326 0.375 6.15961 0.375 5.99999C0.375 5.84038 0.42885 5.70673 0.53655 5.59904C0.644237 5.49136 0.777887 5.43751 0.9375 5.43751H9.47019L5.59326 1.56058C5.48172 1.44904 5.42667 1.31851 5.42812 1.169C5.42956 1.01948 5.48846 0.886545 5.60481 0.770208C5.72114 0.661558 5.85287 0.605308 5.99998 0.601458C6.14709 0.597608 6.27882 0.653858 6.39516 0.770208L11.1504 5.52549C11.2206 5.59568 11.2701 5.66971 11.299 5.7476C11.3278 5.82548 11.3423 5.90961 11.3423 5.99999C11.3423 6.09038 11.3278 6.17451 11.299 6.25239C11.2701 6.33028 11.2206 6.40431 11.1504 6.4745L6.39516 11.2298C6.29132 11.3336 6.16272 11.3868 6.00936 11.3892C5.85599 11.3916 5.72114 11.3384 5.60481 11.2298C5.48846 11.1134 5.43028 10.9798 5.43028 10.8288C5.43028 10.6779 5.48846 10.5442 5.60481 10.4279L9.47019 6.56248Z"
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default ArrowForwardIcon
+export default ArrowForwardIcon;

src/components/Icons/ArrowRight.tsx

@@ -1,10 +1,19 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const ArrowRight: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 6 10" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6 5L6.90043e-08 9.33013L4.47556e-07 0.669872L6 5Z" fill="currentColor" />
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 6 10"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 5L6.90043e-08 9.33013L4.47556e-07 0.669872L6 5Z"
+      fill="currentColor"
+    />
   </svg>
-)
+);
 
-export default ArrowRight
+export default ArrowRight;

src/components/Icons/AudioIcon.tsx

@@ -1,10 +1,23 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const AudioIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="Audio">
-      <mask id="mask0_1506_147" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+      <mask
+        id="mask0_1506_147"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
         <rect id="Bounding box" width="1em" height="1em" fill="currentColor" />
       </mask>
       <g mask="url(#mask0_1506_147)">
@@ -16,6 +29,6 @@ const AudioIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       </g>
     </g>
   </svg>
-)
+);
 
-export default AudioIcon
+export default AudioIcon;

src/components/Icons/BoostIcon.tsx

@@ -1,8 +1,14 @@
 /* eslint-disable */
-import React from 'react'
+import React from 'react';
 
 const BoostIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
-  <svg width="1em" height="1em" viewBox="0 0 9 9" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 9 9"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       id="Icon"
       fill-rule="evenodd"
@@ -11,6 +17,6 @@ const BoostIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       fill="currentColor"
     />
   </svg>
-)
+);
 
-export default BoostIcon
+export default BoostIcon;