Move chat question, answer and source documents to Search state to av…

…oid new Websocket connections when filtering items on the search page

Co-authored-by: Adam J. Arling <[email protected]>

components/Chat/Chat.tsx

@@ -5,21 +5,26 @@ import { Work } from "@nulib/dcapi-types";
 import { prepareQuestion } from "@/lib/chat-helpers";
 import useChatSocket from "@/hooks/useChatSocket";
 import useQueryParams from "@/hooks/useQueryParams";
+import { useSearchState } from "@/context/search-context";
 
 const Chat = () => {
- const { searchTerm: question } = useQueryParams();
+ const { searchTerm = "" } = useQueryParams();
  const { authToken, isConnected, message, sendMessage } = useChatSocket();
+ const { searchDispatch, searchState } = useSearchState();
+ const { chat } = searchState;
+ const { answer, documents = [], question } = chat;
+
+ const sameQuestionExists = !!question && searchTerm === question;
 
- const [isStreamingComplete, setIsStreamingComplete] = useState(false);
  const [sourceDocuments, setSourceDocuments] = useState<Work[]>([]);
  const [streamedAnswer, setStreamedAnswer] = useState("");
 
  useEffect(() => {
- if (question && isConnected && authToken) {
- const preparedQuestion = prepareQuestion(question, authToken);
+ if (!sameQuestionExists && isConnected && authToken) {
+ const preparedQuestion = prepareQuestion(searchTerm, authToken);
  sendMessage(preparedQuestion);
  }
- }, [authToken, isConnected, question, sendMessage]);
+ }, [authToken, isConnected, sameQuestionExists, searchTerm, sendMessage]);
 
  useEffect(() => {
  if (!message) return;
@@ -31,21 +36,27 @@ const Chat = () => {
  return prev + message.token;
  });
  } else if (message.answer) {
- setStreamedAnswer(message.answer);
- setIsStreamingComplete(true);
+ searchDispatch({
+ chat: {
+ answer: message.answer,
+ documents: sourceDocuments,
+ question: searchTerm || "",
+ },
+ type: "updateChat",
+ });
  }
- }, [message]);
+ }, [message, searchTerm, sourceDocuments, searchDispatch]);
 
- if (!question) return null;
+ if (!searchTerm) return null;
 
  return (
  <ChatResponse
- isStreamingComplete={isStreamingComplete}
- question={question}
- sourceDocuments={sourceDocuments}
- streamedAnswer={streamedAnswer}
+ isStreamingComplete={!!answer}
+ searchTerm={searchTerm}
+ sourceDocuments={sameQuestionExists ? documents : sourceDocuments}
+ streamedAnswer={sameQuestionExists ? answer : streamedAnswer}
  />
  );
 };
 
-export default Chat;
+export default React.memo(Chat);

components/Chat/Response/Images.tsx

@@ -4,18 +4,29 @@ import GridItem from "@/components/Grid/Item";
 import { StyledImages } from "@/components/Chat/Response/Response.styled";
 import { Work } from "@nulib/dcapi-types";
 
-const ResponseImages = ({ sourceDocuments }: { sourceDocuments: Work[] }) => {
+const ResponseImages = ({
+ isStreamingComplete,
+ sourceDocuments,
+}: {
+ isStreamingComplete: boolean;
+ sourceDocuments: Work[];
+}) => {
  const [nextIndex, setNextIndex] = useState(0);
 
  useEffect(() => {
+ if (isStreamingComplete) {
+ setNextIndex(sourceDocuments.length);
+ return;
+ }
+
  if (nextIndex < sourceDocuments.length) {
  const timer = setTimeout(() => {
  setNextIndex(nextIndex + 1);
  }, 382);
 
  return () => clearTimeout(timer);
  }
- }, [nextIndex, sourceDocuments.length]);
+ }, [isStreamingComplete, nextIndex, sourceDocuments.length]);
 
  return (
  <StyledImages>

components/Chat/Response/Response.tsx

@@ -15,14 +15,14 @@ import { Work } from "@nulib/dcapi-types";
 
 interface ChatResponseProps {
  isStreamingComplete: boolean;
- question: string;
+ searchTerm: string;
  sourceDocuments: Work[];
  streamedAnswer?: string;
 }
 
 const ChatResponse: React.FC<ChatResponseProps> = ({
  isStreamingComplete,
- question,
+ searchTerm,
  sourceDocuments,
  streamedAnswer,
 }) => {
@@ -31,7 +31,7 @@ const ChatResponse: React.FC<ChatResponseProps> = ({
  <Container containerType="wide">
  <StyledResponse>
  <StyledResponseContent>
- <StyledQuestion>{question}</StyledQuestion>
+ <StyledQuestion>{searchTerm}</StyledQuestion>
  {streamedAnswer ? (
  <ResponseStreamedAnswer
  isStreamingComplete={isStreamingComplete}
@@ -43,7 +43,10 @@ const ChatResponse: React.FC<ChatResponseProps> = ({
  </StyledResponseContent>
  {sourceDocuments.length > 0 && (
  <StyledResponseAside>
- <ResponseImages sourceDocuments={sourceDocuments} />
+ <ResponseImages
+ isStreamingComplete={isStreamingComplete}
+ sourceDocuments={sourceDocuments}
+ />
  </StyledResponseAside>
  )}
  </StyledResponse>

context/search-context.tsx

@@ -1,12 +1,21 @@
 import { ApiResponseAggregation } from "@/types/api/response";
 import React from "react";
 import { SearchContextStore } from "@/types/context/search-context";
+import { Work } from "@nulib/dcapi-types";
 
 type Action =
  | {
  type: "updateAggregations";
  aggregations: ApiResponseAggregation | undefined;
  }
+ | {
+ type: "updateChat";
+ chat: {
+ answer: string;
+ documents: Work[];
+ question: string;
+ };
+ }
  | { type: "updateSearch"; q: string }
  | { type: "updateSearchFixed"; searchFixed: boolean };
 
@@ -19,6 +28,11 @@ type SearchProviderProps = {
 
 const defaultState: SearchContextStore = {
  aggregations: {},
+ chat: {
+ answer: "",
+ documents: [],
+ question: "",
+ },
  searchFixed: false,
 };
 
@@ -34,6 +48,12 @@ function searchReducer(state: State, action: Action) {
  aggregations: action.aggregations,
  };
  }
+ case "updateChat": {
+ return {
+ ...state,
+ chat: action.chat,
+ };
+ }
  case "updateSearch": {
  return {
  ...state,

types/context/search-context.ts

@@ -1,7 +1,13 @@
 import { ApiResponseAggregation } from "@/types/api/response";
+import { Work } from "@nulib/dcapi-types";
 
 export interface SearchContextStore {
  aggregations?: ApiResponseAggregation;
+ chat: {
+ answer: string;
+ documents: Work[];
+ question: string;
+ };
  searchFixed: boolean;
 }