Update view results panel.

components/Chat/Conversation.styled.tsx

@@ -114,6 +114,7 @@ const StyledChatConversation = styled("div", {
       fontSize: "$gr3",
       padding: "0 $gr2",
       gap: "$gr2",
+      zIndex: 0,
       fontFamily: "$northwesternSansRegular",
 
       "&:hover, &:focus": {

components/Chat/Response/Aggregations.tsx

@@ -0,0 +1,29 @@
+import { IconArrowForward, IconSparkles } from "@/components/Shared/SVG/Icons";
+
+import React from "react";
+import { StyledInterstitialWrapper } from "@/components/Chat/Response/Interstitial.styled";
+import { ToolStartMessage } from "@/types/components/chat";
+
+interface ResponseInterstitialProps {
+  message: ToolStartMessage["message"];
+}
+
+const ResponseAggregations: React.FC<ResponseInterstitialProps> = ({
+  message,
+}) => {
+  const { buckets } = message;
+  console.log(buckets);
+
+  return (
+    <StyledInterstitialWrapper>
+      {buckets.map((bucket) => (
+        <>
+          Aggregation counts:
+          {bucket.key} {bucket.doc_count}
+        </>
+      ))}
+    </StyledInterstitialWrapper>
+  );
+};
+
+export default ResponseAggregations;

components/Chat/Response/Interstitial.styled.tsx

@@ -1,12 +1,5 @@
 import { keyframes, styled } from "@/stitches.config";
 
-const gradientAnimation = keyframes({
-  to: {
-    backgroundSize: "500%",
-    backgroundPosition: "38.2%",
-  },
-});
-
 const StyledInterstitialIcon = styled("div", {
   display: "flex",
   width: "1rem",
@@ -53,9 +46,7 @@ const StyledInterstitial = styled("div", {
   color: "$purple60",
   borderRadius: "1em",
   paddingRight: "$gr2",
-  backgroundSize: "250%",
   backgroundPosition: "61.8%",
-  animation: `${gradientAnimation} 5s infinite alternate`,
 
   strong: {
     fontFamily: "$northwesternSansBold",
@@ -83,7 +74,7 @@ const StyledInterstitialAction = styled("button", {
     width: "1rem",
     stroke: "$purple30",
     transition: "$dcAll",
-    margin: "0",
+    margin: "-2px 0 0",
 
     path: {
       stroke: "inherit",

components/Chat/Response/Interstitial.tsx

@@ -1,14 +1,15 @@
 import { IconArrowForward, IconSparkles } from "@/components/Shared/SVG/Icons";
+import React, { useEffect } from "react";
 import {
   StyledInterstitial,
   StyledInterstitialAction,
   StyledInterstitialIcon,
   StyledInterstitialWrapper,
 } from "@/components/Chat/Response/Interstitial.styled";
 
-import React from "react";
 import { ToolStartMessage } from "@/types/components/chat";
 import { useSearchState } from "@/context/search-context";
+import { v4 as uuidv4 } from "uuid";
 
 interface ResponseInterstitialProps {
   message: ToolStartMessage["message"];
@@ -21,7 +22,11 @@ const ResponseInterstitial: React.FC<ResponseInterstitialProps> = ({
 }) => {
   const { tool, input } = message;
 
-  const { searchDispatch } = useSearchState();
+  const { searchState, searchDispatch } = useSearchState();
+  const {
+    panel: { open, interstitial },
+  } = searchState;
+  const id = uuidv4();
 
   const handleViewResults = (action: string) => {
     window.scrollTo({
@@ -33,19 +38,38 @@ const ResponseInterstitial: React.FC<ResponseInterstitialProps> = ({
       panel: {
         open: true,
         query: action,
+        interstitial: id,
       },
     });
   };
 
   let text: InterstitialContent;
   let action: InterstitialContent;
 
+  useEffect(() => {
+    if (open && !interstitial) return;
+
+    console.log({
+      id,
+      interstitial,
+    });
+
+    if (id === interstitial) {
+      const interstitialElement = document.getElementById(`interstitial-${id}`);
+      // if (interstitialElement)
+      //   interstitialElement.scrollIntoView({
+      //     behavior: "smooth",
+      //     block: "start",
+      //   });
+    }
+  }, [open]);
+
   switch (tool) {
     case "aggregate":
-      text = `Aggregating <strong>${input.agg_field}</strong> by <strong>${input.term_field} ${input.term}</strong>`;
+      text = `Aggregating`;
       break;
     case "discover_fields":
-      text = `Discovering fields`;
+      text = `Discovering`;
       break;
     case "search":
       text = `Searching for <strong>${input.query}</strong>`;
@@ -56,7 +80,7 @@ const ResponseInterstitial: React.FC<ResponseInterstitialProps> = ({
   }
 
   return (
-    <StyledInterstitialWrapper>
+    <StyledInterstitialWrapper id={`interstitial-${id}`}>
       <StyledInterstitial data-testid="response-interstitial" data-tool={tool}>
         <StyledInterstitialIcon>
           <IconSparkles />

components/Chat/Response/Response.tsx

@@ -6,6 +6,7 @@ import {
 
 import BouncingLoader from "@/components/Shared/BouncingLoader";
 import Container from "@/components/Shared/Container";
+import ResponseAggregations from "@/components/Chat/Response/Aggregations";
 import ResponseImages from "@/components/Chat/Response/Images";
 import ResponseInterstitial from "@/components/Chat/Response/Interstitial";
 import ResponseMarkdown from "@/components/Chat/Response/Markdown";
@@ -96,7 +97,7 @@ const ChatResponse: React.FC<ChatResponseProps> = ({
       setRenderedMessage((prev) => (
         <>
           {prev}
-          <></>
+          <ResponseAggregations message={message.message} />
         </>
       ));
     }

components/Search/Panel.tsx

@@ -1,4 +1,9 @@
 import Container, { ContainerStyled } from "../Shared/Container";
+import { IconArrowBack, IconSparkles } from "../Shared/SVG/Icons";
+import {
+  StyledInterstitial,
+  StyledInterstitialIcon,
+} from "../Chat/Response/Interstitial.styled";
 import { useEffect, useState } from "react";
 
 import { ApiSearchRequestBody } from "@/types/api/request";
@@ -22,7 +27,7 @@ const defaultSearchResultsState: SearchResultsState = {
 const SearchPanel = () => {
   const { searchState, searchDispatch } = useSearchState();
   const {
-    panel: { open, query },
+    panel: { open, query, interstitial },
   } = searchState;
 
   const [searchResults, setSearchResults] = useState<SearchResultsState>(
@@ -38,12 +43,18 @@ const SearchPanel = () => {
     if (!query) return;
 
     (async () => {
+      setSearchResults({
+        data: null,
+        error: "",
+        loading: true,
+      });
+
       try {
         const requestUrl = new URL(DC_API_SEARCH_URL);
         const body: ApiSearchRequestBody = buildQuery(
           {
             size: SEARCH_RESULTS_PER_PAGE,
-            term: query as string,
+            term: String(query),
             urlFacets: {},
           },
           true,
@@ -53,11 +64,14 @@ const SearchPanel = () => {
           body,
           url: requestUrl.toString(),
         });
-        setSearchResults({
-          data: response || null,
-          error: "",
-          loading: false,
-        });
+        setTimeout(() => {
+          setSearchResults({
+            data: response || null,
+            error: "",
+            loading: false,
+          });
+        }, 100);
+
         console.log(`response`, response);
       } catch (error) {
         console.error(error);
@@ -75,6 +89,7 @@ const SearchPanel = () => {
       panel: {
         open: false,
         query: undefined,
+        interstitial,
       },
     });
   };
@@ -84,13 +99,32 @@ const SearchPanel = () => {
   return (
     <StyledSearchPanel isOpen={open}>
       <Container containerType="wide" className="search-panel">
-        <StyledSearchPanelContent>
+        <StyledSearchPanelContent id="search-panel-content">
           <Container>
             <SearchOptions
               activeTab="results"
               renderTabList={true}
-              tabs={<button onClick={handleBack}>back</button>}
+              tabs={<></>}
             />
+            {query && (
+              <SearchResultsLabel>
+                <div>
+                  <StyledBackButton onClick={handleBack}>
+                    <IconArrowBack /> Update Conversation
+                    {/* <span style={{ opacity: 0.5 }}>Filtered</span> */}
+                  </StyledBackButton>
+                </div>
+
+                <div>
+                  <StyledInterstitialIcon>
+                    <IconSparkles />
+                  </StyledInterstitialIcon>
+                  <label>
+                    Search results for <strong>{query}</strong>
+                  </label>
+                </div>
+              </SearchResultsLabel>
+            )}
           </Container>
           <SearchResults {...searchResults} />
         </StyledSearchPanelContent>
@@ -99,6 +133,55 @@ const SearchPanel = () => {
   );
 };
 
+const SearchResultsLabel = styled(StyledInterstitial, {
+  marginBottom: "$gr4",
+  textAlign: "center",
+  justifyContent: "space-between",
+  width: "100%",
+
+  div: {
+    display: "flex",
+    alignItems: "center",
+    gap: "$gr2",
+  },
+});
+
+const StyledBackButton = styled("button", {
+  display: "inline-flex",
+  padding: "0 $gr2",
+  height: "38px",
+  alignItems: "center",
+  gap: "$gr1",
+  color: "$purple",
+  background: "transparent",
+  fontFamily: "$northwesternSansBold",
+  fontSize: "$gr3",
+  border: "none",
+  cursor: "pointer",
+  whiteSpace: "nowrap",
+
+  svg: {
+    height: "1rem",
+    width: "1rem",
+    stroke: "$purple30",
+    transition: "$dcAll",
+    margin: "-2px 0 0",
+
+    path: {
+      stroke: "inherit",
+      strokeWidth: "48px",
+    },
+  },
+
+  "&:hover": {
+    svg: {
+      marginLeft: "-3px",
+      marginRight: "3px",
+      stroke: "$purple",
+    },
+  },
+});
+
 const StyledSearchPanel = styled("aside", {
   position: "absolute",
   top: "0",
@@ -108,9 +191,6 @@ const StyledSearchPanel = styled("aside", {
   zIndex: "1",
   transition: "all 382ms ease-in-out",
   opacity: "0",
-  maskImage:
-    "linear-gradient(to bottom, transparent, black 29px, black 80%, transparent)",
-
   variants: {
     isOpen: {
       true: {
@@ -133,6 +213,7 @@ const StyledSearchPanel = styled("aside", {
 const StyledSearchPanelContent = styled("div", {
   height: "100%",
   padding: "$gr4 0",
+  background: "white",
   boxShadow: "-29px 0 29px rgba(0, 0, 0, 0.0382)",
 });
 

context/search-context.tsx

@@ -20,6 +20,7 @@ type Action =
   | {
       type: "updatePanel";
       panel: {
+        interstitial?: string;
         open: boolean;
         query?: string;
       };
@@ -43,6 +44,7 @@ const defaultState: SearchContextStore = {
     ref: "",
   },
   panel: {
+    interstitial: undefined,
     open: false,
     query: undefined,
   },