Merge pull request #370 from nulib/preview/chat-integration

Deploy preview/chat-integration branch to staging

.eslintrc.json

@@ -15,11 +15,11 @@
  }
  ],
  "rules": {
- "sort-keys": "error",
- "sort-imports": "error",
+ "sort-keys": 2,
+ "sort-imports": 2,
  "@typescript-eslint/no-var-requires": "warn",
  "@typescript-eslint/no-unused-vars": "error",
- "@typescript-eslint/no-explicit-any": "error",
+ "@typescript-eslint/no-explicit-any": "warn",
  "@typescript-eslint/ban-ts-comment": "warn"
  }
 }

.github/workflows/playwright.yml

@@ -1,9 +1,10 @@
 name: Playwright Tests
 on:
- # push:
- # branches: []
- pull_request:
- branches: [main, deploy/staging]
+# push:
+# branches: []
+# pull_request:
+# branches: [main, deploy/staging]
+ workflow_dispatch:
 jobs:
  test:
  timeout-minutes: 10

components/Chat/Chat.test.tsx

@@ -0,0 +1,174 @@
+import { render, screen } from "@/test-utils";
+
+import Chat from "@/components/Chat/Chat";
+import { SearchProvider } from "@/context/search-context";
+import mockRouter from "next-router-mock";
+import useChatSocket from "@/hooks/useChatSocket";
+
+const mockSendMessage = jest.fn();
+
+jest.mock("@/context/search-context", () => {
+ const actual = jest.requireActual("@/context/search-context");
+
+ return {
+ __esModule: true,
+ ...actual,
+ useSearchState: () => ({
+ searchDispatch: jest.fn(),
+ searchState: {
+ activeTab: "stream",
+ aggregations: {},
+ chat: {
+ answer: "",
+ documents: [],
+ end: "stop",
+ question: "",
+ },
+ searchFixed: false,
+ },
+ }),
+ };
+});
+
+jest.mock("@/components/Chat/Response/Response", () => {
+ return function MockChatResponse(props: any) {
+ return (
+ <div data-testid="mock-chat-response" data-props={JSON.stringify(props)}>
+ Mock Chat Response
+ </div>
+ );
+ };
+});
+
+// Mock the useChatSocket hook and provide a default mock
+// implementation which can be overridden in individual tests
+jest.mock("@/hooks/useChatSocket");
+(useChatSocket as jest.Mock).mockImplementation(() => ({
+ authToken: "fake-token-1",
+ isConnected: false,
+ message: { answer: "fake-answer-1", end: "stop" },
+ sendMessage: mockSendMessage,
+}));
+
+describe("Chat component", () => {
+ it("renders default placeholder text when no search term is present", () => {
+ render(<Chat />);
+
+ const wrapper = screen.getByText(
+ "What can I help you find? Try searching for",
+ {
+ exact: false,
+ },
+ );
+ expect(wrapper).toBeInTheDocument();
+ });
+
+ it("renders the chat response component when search term is present", () => {
+ mockRouter.setCurrentUrl("/search?q=tell+me+about+boats");
+
+ render(
+ <SearchProvider>
+ <Chat />
+ </SearchProvider>,
+ );
+
+ const el = screen.getByTestId("mock-chat-response");
+ expect(el).toBeInTheDocument();
+
+ const dataProps = el.getAttribute("data-props");
+ expect(JSON.parse(dataProps!)).toEqual({
+ isStreamingComplete: false,
+ searchTerm: "tell me about boats",
+ sourceDocuments: [],
+ streamedAnswer: "",
+ });
+ });
+
+ it("sends a websocket message when the search term changes", () => {
+ const mockMessage = jest.fn();
+
+ (useChatSocket as jest.Mock).mockImplementation(() => ({
+ authToken: "fake-token",
+ isConnected: true,
+ message: { answer: "fake-answer-1" },
+ sendMessage: mockMessage,
+ }));
+
+ mockRouter.setCurrentUrl("/search?q=boats");
+
+ render(
+ <SearchProvider>
+ <Chat />
+ </SearchProvider>,
+ );
+
+ expect(mockMessage).toHaveBeenCalledWith(
+ expect.objectContaining({
+ auth: "fake-token",
+ message: "chat",
+ question: "boats",
+ }),
+ );
+ });
+
+ it("doesn't send a websocket message if the search term is empty", () => {
+ mockRouter.setCurrentUrl("/search");
+ render(
+ <SearchProvider>
+ <Chat />
+ </SearchProvider>,
+ );
+
+ expect(mockSendMessage).not.toHaveBeenCalled();
+ });
+
+ it("displays an error message when the response hits the LLM token limit", () => {
+ (useChatSocket as jest.Mock).mockImplementation(() => ({
+ authToken: "fake",
+ isConnected: true,
+ message: {
+ end: {
+ reason: "length",
+ ref: "fake",
+ },
+ },
+ sendMessage: mockSendMessage,
+ }));
+
+ mockRouter.setCurrentUrl("/search?q=boats");
+
+ render(
+ <SearchProvider>
+ <Chat />
+ </SearchProvider>,
+ );
+
+ const error = screen.getByText("The response has hit the LLM token limit.");
+ expect(error).toBeInTheDocument();
+ });
+
+ it("displays an error message when the response times out", () => {
+ (useChatSocket as jest.Mock).mockImplementation(() => ({
+ authToken: "fake",
+ isConnected: true,
+ message: {
+ end: {
+ reason: "timeout",
+ ref: "fake",
+ },
+ },
+ sendMessage: mockSendMessage,
+ }));
+
+ mockRouter.setCurrentUrl("/search?q=boats");
+
+ render(
+ <SearchProvider>
+ <Chat />
+ </SearchProvider>,
+ );
+
+ const error = screen.getByText("The response has timed out.");
+ expect(error).toBeInTheDocument();
+ });
+});

components/Chat/Chat.tsx

@@ -0,0 +1,169 @@
+import { AI_DISCLAIMER, AI_SEARCH_UNSUBMITTED } from "@/lib/constants/common";
+import React, { useEffect, useState } from "react";
+import {
+ StyledResponseActions,
+ StyledResponseDisclaimer,
+ StyledUnsubmitted,
+} from "@/components/Chat/Response/Response.styled";
+import { defaultState, useSearchState } from "@/context/search-context";
+
+import Announcement from "@/components/Shared/Announcement";
+import { Button } from "@nulib/design-system";
+import ChatFeedback from "@/components/Chat/Feedback/Feedback";
+import ChatResponse from "@/components/Chat/Response/Response";
+import Container from "@/components/Shared/Container";
+import { Work } from "@nulib/dcapi-types";
+import { pluralize } from "@/lib/utils/count-helpers";
+import { prepareQuestion } from "@/lib/chat-helpers";
+import useChatSocket from "@/hooks/useChatSocket";
+import useQueryParams from "@/hooks/useQueryParams";
+
+const Chat = ({
+ totalResults,
+ viewResultsCallback,
+}: {
+ totalResults?: number;
+ viewResultsCallback: () => void;
+}) => {
+ const { searchTerm = "" } = useQueryParams();
+ const { authToken, isConnected, message, sendMessage } = useChatSocket();
+
+ const [streamingError, setStreamingError] = useState("");
+
+ /**
+ * get the`chat` state and dispatch function from the search context
+ * for persisting the chat state when search screen tabs are switched
+ */
+ const {
+ searchState: { chat },
+ searchDispatch,
+ } = useSearchState();
+ const { question, answer, documents } = chat;
+
+ const [sourceDocuments, setSourceDocuments] = useState<Work[]>([]);
+ const [streamedAnswer, setStreamedAnswer] = useState("");
+
+ const isStreamingComplete = !!question && searchTerm === question;
+
+ useEffect(() => {
+ if (!isStreamingComplete && isConnected && authToken && searchTerm) {
+ resetChat();
+ const preparedQuestion = prepareQuestion(searchTerm, authToken);
+ sendMessage(preparedQuestion);
+ }
+ }, [authToken, isStreamingComplete, isConnected, searchTerm, sendMessage]);
+
+ useEffect(() => {
+ if (!message) return;
+
+ const updateSourceDocuments = () => {
+ setSourceDocuments(message.source_documents!);
+ };
+
+ const updateStreamedAnswer = () => {
+ setStreamedAnswer((prev) => prev + message.token);
+ };
+
+ const updateChat = () => {
+ searchDispatch({
+ chat: {
+ answer: message.answer || "",
+ documents: sourceDocuments,
+ question: searchTerm || "",
+ ref: message.ref,
+ },
+ type: "updateChat",
+ });
+ };
+
+ if (message.source_documents) {
+ updateSourceDocuments();
+ return;
+ }
+
+ if (message.token) {
+ updateStreamedAnswer();
+ return;
+ }
+
+ if (message.end) {
+ switch (message.end.reason) {
+ case "length":
+ setStreamingError("The response has hit the LLM token limit.");
+ break;
+ case "timeout":
+ setStreamingError("The response has timed out.");
+ break;
+ case "eos_token":
+ setStreamingError("This should never happen.");
+ break;
+ default:
+ break;
+ }
+ }
+
+ if (message.answer) {
+ updateChat();
+ }
+ }, [message]);
+
+ function handleNewQuestion() {
+ const input = document.getElementById("dc-search") as HTMLInputElement;
+ if (input) {
+ input.focus();
+ input.value = "";
+ }
+ }
+
+ function resetChat() {
+ searchDispatch({
+ chat: defaultState.chat,
+ type: "updateChat",
+ });
+ setStreamedAnswer("");
+ setSourceDocuments([]);
+ }
+
+ if (!searchTerm)
+ return (
+ <Container>
+ <StyledUnsubmitted>{AI_SEARCH_UNSUBMITTED}</StyledUnsubmitted>
+ </Container>
+ );
+
+ return (
+ <>
+ <ChatResponse
+ isStreamingComplete={isStreamingComplete}
+ searchTerm={question || searchTerm}
+ sourceDocuments={isStreamingComplete ? documents : sourceDocuments}
+ streamedAnswer={isStreamingComplete ? answer : streamedAnswer}
+ />
+ {streamingError && (
+ <Container>
+ <Announcement css={{ marginTop: "1rem" }}>
+ {streamingError}
+ </Announcement>
+ </Container>
+ )}
+ {isStreamingComplete && (
+ <>
+ <Container>
+ <StyledResponseActions>
+ <Button isPrimary isLowercase onClick={viewResultsCallback}>
+ View More Results
+ </Button>
+ <Button isLowercase onClick={handleNewQuestion}>
+ Ask Another Question
+ </Button>
+ </StyledResponseActions>
+ <StyledResponseDisclaimer>{AI_DISCLAIMER}</StyledResponseDisclaimer>
+ </Container>
+ <ChatFeedback />
+ </>
+ )}
+ </>
+ );
+};
+
+export default React.memo(Chat);