Update toggle.

pages/search.tsx

@@ -6,7 +6,7 @@ import {
  ResultsWrapper,
  StyledResponseWrapper,
 } from "@/components/Search/Search.styled";
-import React, { useEffect, useState } from "react";
+import React, { use, useEffect, useState } from "react";
 
 import { ApiSearchRequestBody } from "@/types/api/request";
 import { ApiSearchResponse } from "@/types/api/response";
@@ -40,6 +40,7 @@ import { parseUrlFacets } from "@/lib/utils/facet-helpers";
 import { pluralize } from "@/lib/utils/count-helpers";
 import useQueryParams from "@/hooks/useQueryParams";
 import { useRouter } from "next/router";
+import { useSearchState } from "@/context/search-context";
 
 type RequestState = {
  data: ApiSearchResponse | null;
@@ -54,12 +55,19 @@ const SearchPage: NextPage = () => {
  const router = useRouter();
 
  const { user } = React.useContext(UserContext);
- const { ai, searchTerm } = useQueryParams();
+ const queryParams = useQueryParams();
+ const { searchTerm, ai } = queryParams;
+ const { searchState } = useSearchState();
+ const {
+ chat: { question },
+ } = searchState;
  const showStreamedResponse = Boolean(user?.isLoggedIn && ai);
 
+ const searchInput = document.getElementById("dc-search") as HTMLInputElement;
  const checkScrollRef = React.useRef<() => void>();
 
  const [activeTab, setActiveTab] = useState<ActiveTab>();
+ const [isStreamComplete, setIsStreamComplete] = useState(false);
  const [requestState, setRequestState] = useState<RequestState>({
  data: null,
  error: "",
@@ -78,13 +86,24 @@ const SearchPage: NextPage = () => {
  });
 
  useEffect(() => {
- if (!searchTerm) {
+ if (!searchTerm && searchInput?.value) {
  setActiveTab("results");
  return;
  }
 
- setActiveTab(showStreamedResponse ? "stream" : "results");
- }, [showStreamedResponse, searchTerm]);
+ if (!activeTab) setActiveTab(showStreamedResponse ? "stream" : "results");
+
+ if (
+ searchInput?.value &&
+ showStreamedResponse &&
+ searchTerm !== searchInput?.value
+ )
+ setActiveTab("stream");
+ }, [showStreamedResponse, searchTerm, searchInput?.value]);
+
+ useEffect(() => {
+ setIsStreamComplete(question === searchTerm);
+ }, [question, searchTerm]);
 
  /**
  * Make requests to the search API endpoint
@@ -266,7 +285,7 @@ const SearchPage: NextPage = () => {
  </Tabs.Trigger>
  <Tabs.Trigger value="results" data-tab="results">
  {Number.isInteger(totalResults) ? (
- <>View {pluralize("Result", Number(totalResults))}</>
+ <>View {pluralize("Result", totalResults || 0)}</>
  ) : (
  <SpinLoader size="small" />
  )}
@@ -278,16 +297,18 @@ const SearchPage: NextPage = () => {
  />
  <Tabs.Content value="stream">
  <Chat />
- <Container>
- <StyledResponseActions>
- <Button isPrimary isLowercase onClick={handleResultsTab}>
- View {pluralize("Result", Number(totalResults))}
- </Button>
- <Button isLowercase onClick={handleNewQuestion}>
- Ask another Question
- </Button>
- </StyledResponseActions>
- </Container>
+ {isStreamComplete && (
+ <Container>
+ <StyledResponseActions>
+ <Button isPrimary isLowercase onClick={handleResultsTab}>
+ View {pluralize("Result", totalResults || 0)}
+ </Button>
+ <Button isLowercase onClick={handleNewQuestion}>
+ Ask another Question
+ </Button>
+ </StyledResponseActions>
+ </Container>
+ )}
  </Tabs.Content>
  <Tabs.Content value="results">
  <Container containerType="wide">